
:root{
  --bg:#FAFAFC; --bg-2:#F1EFF9;
  --violet:#6D28D9; --violet-dk:#4C1D95; --violet-glow:rgba(109,40,217,.28);
  --gold:#8A6B12; --gold-dk:#6B520E;
  --white:#14102B;                     /* c'est la couleur du TEXTE */
  --muted:rgba(20,16,43,.72); --muted-2:rgba(20,16,43,.52);
  --line:rgba(109,40,217,.16);
}
html{background:#FAFAFC!important}
body{color:#14102B}

/* le rideau fixe pose par-dessus la video : repeint en blanc */
div[style*="rgba(4,6,15,0.98)"]{background:linear-gradient(to right,rgba(250,250,252,0) 0%,rgba(250,250,252,.55) 10%,rgba(250,250,252,.97) 22%,rgba(250,250,252,.985) 32%,rgba(250,250,252,.985) 68%,rgba(250,250,252,.97) 78%,rgba(250,250,252,.55) 90%,rgba(250,250,252,0) 100%)!important}

/* ---- LE BANDEAU DEFILANT : ramene dans la zone claire ---- */
.ticker-band{max-width:56vw!important;margin-left:auto!important;
  margin-right:auto!important;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)}
.tick-item{font-size:.86rem!important;padding:0 1.1rem!important;
  color:#3B3454!important}
.tick-sep{font-size:1rem!important}

/* ---- LE BANDEAU DES 4 CHIFFRES : meme cadrage que le defilant ----
   MESURE au navigateur, viewport 1600 : .stats-bar allait de 0 a 1585 px,
   soit les 4 tuiles a cheval sur les deux zones foncees. Ramene a 56vw
   (896 px sur un 1600), donc 352 -> 1248 : exactement le plateau clair.
   Chiffre reduit de 3.4rem a 2.8rem pour tenir dans une tuile de 200 px. */
.stats-bar{max-width:56vw!important;margin-left:auto!important;
  margin-right:auto!important;padding-left:0!important;padding-right:0!important}
.stat-n{font-size:2.8rem!important}
.stat-l{font-size:.76rem!important}

/* ---- LE MENU RESTE FONCE, ECRITURES BLANCHES ---- */
nav .nav-links a{color:rgba(255,255,255,.66)!important}
nav .nav-links a:hover{color:#FFFFFF!important}
.nav-melas{color:#FFFFFF!important}
.nav-cta{color:#FFFFFF!important}
.nav-phone{color:#B794FF!important}
.nav-dd{background:#0d0b1f!important}
.nav-dd a{color:rgba(255,255,255,.82)!important}
.nav-dd a:hover{color:#FFFFFF!important}
.mobile-menu,.mm-panel{background:rgba(8,7,26,.985)!important}
.mm-links a{color:#FFFFFF!important}
.mm-sub a{color:rgba(255,255,255,.7)!important}
.nav-burger span{background:#FFFFFF!important}

/* ---- LES CARTES ---- */
.svc-card,.offre-card,.demo-card,.temo-card,.cible-card,.team-card,.bento-card,
.rs,.sec-item,.sec-quote,.sec-incl,.securite-badge,.tarif-bloc,.abo-detail,
.sur-mesure,.garantie-box,.about-card-3d,.gift-box,.cas-client,.faq-item,
.svc9{background:rgba(255,255,255,.88)!important}
div[style*="background:#1a1a2e"]{background:rgba(255,255,255,.90)!important}
.modal-inner{background:#FFFFFF!important}
select option{background:#FFFFFF;color:#14102B}
#modal-checklist{background:rgba(20,16,43,.45)!important}

/* ---- LES TEXTES CLAIRS ECRITS EN DUR (invisibles sur blanc si oublies) ---- */
.bento-quote,.cas-quote,.pme-quote,.temo-text{color:rgba(20,16,43,.8)!important}
.bento-stat-l,.cas-stat-l,.bento-tag{color:rgba(20,16,43,.6)!important}
.mfoot .fh{color:#14102B!important}
.mfoot a{color:rgba(20,16,43,.66)!important}
.mfoot a:hover{color:#6D28D9!important}
.mfoot p,footer p{color:rgba(20,16,43,.7)!important}

/* ---- LE CHATBOT ---- */
.cb-win{background:#FFFFFF!important;border-color:rgba(109,40,217,.18)!important}
.cb-info h4{color:#14102B!important}
.cb-close{color:rgba(20,16,43,.45)!important}
.cb-msgs .msg.bot{background:rgba(109,40,217,.08)!important;
  border-color:rgba(109,40,217,.16)!important;color:#14102B!important}
.cb-inp{color:#14102B!important;background:rgba(109,40,217,.05)!important}
.cb-inp::placeholder{color:rgba(20,16,43,.45)!important}
.cb-sugs .sug{color:#6D28D9!important;background:rgba(109,40,217,.07)!important}

/* ---- les boutons pleins gardent leur texte blanc ---- */
.btn-primary,.submit,.cl-btn,.gift-box .btn-sm,.temo-avatar{color:#fff!important}

/* ================= PASSE 10 — 19/09/2026 ================= */
/* les deux dores : un pour le TEXTE (ratio 3,62 sur #FAFAFC),
   un pour les POINTS (aucune contrainte, c'est l'ambre de l'animation) */
:root{--gold:#A87C1F;--gold-dk:#8A6B12}

/* 1 — les vignettes ne doivent plus etre transparentes */
.svc-card,.offre-card,.demo-card,.temo-card,.cible-card,.team-card,.bento-card,
.rs,.sec-item,.sec-quote,.sec-incl,.securite-badge,.tarif-bloc,.abo-detail,
.sur-mesure,.garantie-box,.about-card-3d,.gift-box,.cas-client,.faq-item,
.svc9{background:rgba(255,255,255,.96)!important}
div[style*="background:rgba(147,91,255,.05)"]{background:rgba(255,255,255,.96)!important;
  border-color:rgba(109,40,217,.18)!important}

/* 2 — les deux cartes application : elles etaient restees sombres */
div[style*="background:rgba(10,8,24,.5)"]{background:rgba(255,255,255,.96)!important}
div[style*="color:#BCA4FF"]{color:#6D28D9!important;border-color:rgba(109,40,217,.45)!important}
div[style*="color:#7BD88F"]{color:#1B7A3D!important;border-color:rgba(27,122,61,.45)!important}

/* 2 bis + 3 — le halo violet au survol, sur les cartes qui n'en avaient pas.
   Valeurs reprises telles quelles de sa propre regle .hvcard:hover. */
div[style*="background:rgba(10,8,24,.5)"],
div[style*="background:rgba(147,91,255,.05)"],
div[style*="rgba(201,168,76,.13)"],
div[style*="rgba(201,168,76,.10)"]{
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
div[style*="background:rgba(10,8,24,.5)"]:hover,
div[style*="background:rgba(147,91,255,.05)"]:hover,
div[style*="rgba(201,168,76,.13)"]:hover,
div[style*="rgba(201,168,76,.10)"]:hover{
  transform:translateY(-4px);border-color:rgba(109,40,217,.6)!important;
  box-shadow:0 12px 34px rgba(109,40,217,.30)}

/* 5 — le beige s'en va : violet sur l'AI Act, blanc sur le bloc logiciel */
div[style*="rgba(201,168,76,.10)"]{
  background:linear-gradient(180deg,rgba(109,40,217,.07),rgba(109,40,217,.02))!important;
  border-color:rgba(109,40,217,.22)!important}
div[style*="rgba(201,168,76,.13)"]{background:rgba(255,255,255,.96)!important;
  border-color:rgba(109,40,217,.18)!important}

/* 6 et 7 — les textes ecrits en #F5F7FA en dur : blancs sur blanc */
[style*="color:#F5F7FA"]{color:#14102B!important}

/* 8 — le halo blanc derriere les deux mentions du hero */
.hf-mention{text-shadow:0 0 5px rgba(255,255,255,.98),0 0 12px rgba(255,255,255,.95),
  0 0 24px rgba(255,255,255,.8),0 0 40px rgba(255,255,255,.6)}

/* le motif : le trait devient une synapse, posee AVANT l'ecriture */
.section-label::after{display:none!important}
.section-label::before{content:'';flex:0 0 30px;width:30px;height:18px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18'><g stroke='%236D28D9' stroke-opacity='.42' stroke-width='1' stroke-linecap='round' fill='none'><path d='M16 9L2 4'/><path d='M16 9L3 14'/><path d='M16 9L30 4.5'/><path d='M16 9L29 14'/><path d='M16 9L16 1.5'/></g><circle cx='16' cy='9' r='5.4' fill='%236D28D9' fill-opacity='.13'/><circle cx='16' cy='9' r='2.9' fill='%236D28D9'/><circle cx='3' cy='14' r='1.5' fill='%23C9A84C'/><circle cx='30' cy='4.5' r='1.7' fill='%23E6B03A'/></svg>") no-repeat center/contain}

/* les touches de dore */
div[style*="font-size:.95rem;color:#935BFF"]{color:#A87C1F!important}
.tick-sep{color:#C9A84C!important}

/* ================= PASSE 11 — 19/09/2026 ================= */
/* le motif encadre l'ecriture : devant ET derriere, le second en miroir */
.section-label::after{display:block!important;flex:0 0 30px;width:30px;
  height:18px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18'><g stroke='%236D28D9' stroke-opacity='.42' stroke-width='1' stroke-linecap='round' fill='none'><path d='M16 9L2 4'/><path d='M16 9L3 14'/><path d='M16 9L30 4.5'/><path d='M16 9L29 14'/><path d='M16 9L16 1.5'/></g><circle cx='16' cy='9' r='5.4' fill='%236D28D9' fill-opacity='.13'/><circle cx='16' cy='9' r='2.9' fill='%236D28D9'/><circle cx='3' cy='14' r='1.5' fill='%23C9A84C'/><circle cx='30' cy='4.5' r='1.7' fill='%23E6B03A'/></svg>") no-repeat center/contain;
  transform:scaleX(-1)}
.hero-eyebrow::before,.hero-eyebrow::after{width:30px!important;height:18px!important;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18'><g stroke='%236D28D9' stroke-opacity='.42' stroke-width='1' stroke-linecap='round' fill='none'><path d='M16 9L2 4'/><path d='M16 9L3 14'/><path d='M16 9L30 4.5'/><path d='M16 9L29 14'/><path d='M16 9L16 1.5'/></g><circle cx='16' cy='9' r='5.4' fill='%236D28D9' fill-opacity='.13'/><circle cx='16' cy='9' r='2.9' fill='%236D28D9'/><circle cx='3' cy='14' r='1.5' fill='%23C9A84C'/><circle cx='30' cy='4.5' r='1.7' fill='%23E6B03A'/></svg>") no-repeat center/contain!important}
.hero-eyebrow::after{transform:scaleX(-1)}

/* les intertitres passent en dore */
.section-label{color:#A87C1F!important}
.hero-eyebrow{color:#A87C1F!important}

/* les ecritures qui etaient en dore passent en noir, halo violet */
p[style*="color:#C9A84C"],strong[style*="color:#C9A84C"]{
  color:#14102B!important;
  text-shadow:0 0 9px rgba(109,40,217,.34),0 0 20px rgba(109,40,217,.18)}
/* les petites etiquettes et le lien restent dores, mais LISIBLES :
   #C9A84C sur #FAFAFC donne un rapport de 2,19 — un texte a 2,19 n'est
   pas lu par tout le monde. #A87C1F donne 3,62. */
div[style*="color:#C9A84C"],a[style*="color:#C9A84C"]{color:#A87C1F!important}

/* 6 — le bloc « Un logiciel » prend le meme violet que l'AI Act */
div[style*="rgba(201,168,76,.13)"]{
  background:linear-gradient(180deg,rgba(109,40,217,.07),rgba(109,40,217,.02))!important;
  border-color:rgba(109,40,217,.22)!important}

/* 7 — les champs du formulaire : on voyait l'animation au travers */
input,textarea,select{background:rgba(255,255,255,.96)!important;
  border-color:rgba(109,40,217,.20)!important}

/* 8 — les deux mentions du hero : plus grosses, en relief, halo blanc.
   L'ordre des ombres compte : le relief d'abord (il se peint DESSUS),
   le halo blanc ensuite (il se peint DESSOUS, donc derriere). */
.hf-mention{font-size:clamp(1.15rem,1.6vw,1.55rem)!important;
  font-weight:800!important;color:#7C3AED!important;letter-spacing:.06em!important;
  text-shadow:
    1px 1px 0 #6D28D9,
    2px 2px 0 #5B21B6,
    3px 3px 0 #4C1D95,
    4px 5px 7px rgba(60,22,120,.34),
    0 0 10px rgba(255,255,255,.98),
    0 0 24px rgba(255,255,255,.95),
    0 0 46px rgba(255,255,255,.85),
    0 0 70px rgba(255,255,255,.60)!important}

/* ================= PASSE 12 — 19/09/2026 ================= */
/* 1 — LES MENTIONS SORTENT DU FLUX.
   Avant, elles partageaient la largeur avec le titre (grille 1fr auto 1fr) :
   plus elles s'ecartaient, moins il restait de place au milieu, donc
   « Gagnez du temps. » se coupait en deux et le bloc glissait.
   Maintenant le bandeau prend toute la largeur de l'ecran et les mentions
   sont posees EN ABSOLU sur les bords. Le titre ne peut plus etre pousse. */
.hero-flanc{position:relative!important;display:block!important;
  width:100vw!important;max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
.hero-flanc .hero-title{margin:0 auto!important;text-align:center!important}

.hf-mention{position:absolute!important;top:50%!important;
  transform:translateY(-50%)!important;text-align:center!important;
  font-size:1rem!important;font-weight:400!important;letter-spacing:0!important;
  line-height:1.65!important;color:#F0C05A!important;
  text-shadow:0 0 6px rgba(12,14,40,1),0 0 13px rgba(12,14,40,1),0 0 22px rgba(12,14,40,1),0 0 36px rgba(12,14,40,0.98),0 0 58px rgba(12,14,40,0.95),0 0 88px rgba(12,14,40,0.88),0 0 128px rgba(12,14,40,0.74),0 0 180px rgba(12,14,40,0.55)!important}
.hf-g{left:2.4vw!important;right:auto!important}
.hf-d{right:2.4vw!important;left:auto!important}

/* l'ecriture 3 : capitales grasses, puis capitales fines tres espacees */
.hf-cle{font-family:'Inter',system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.05rem,1.25vw,1.34rem);letter-spacing:.09em;
  text-transform:uppercase;display:inline-block;line-height:1.2}
.hf-suite{font-family:'Inter',system-ui,sans-serif;font-weight:400;
  font-size:clamp(.78rem,.9vw,.94rem);letter-spacing:.17em;
  text-transform:uppercase;white-space:nowrap}

/* sur telephone et tablette, elles reviennent dans le flux */
@media(max-width:1000px){
  .hero-flanc{width:auto!important;max-width:100%!important;
    margin-left:0!important;margin-right:0!important}
  .hf-mention{position:static!important;transform:none!important}
  .hf-g,.hf-d{left:auto!important;right:auto!important}
}

/* 2 — plus AUCUN halo violet autour des ecritures */
p[style*="color:#C9A84C"],strong[style*="color:#C9A84C"]{text-shadow:none!important}

/* 3 — les deux lignes du hero : le noir en gras, le violet un cran au-dessus */
p strong[style*="color:#6D28D9"]{font-weight:700!important}

/* 4 — le CTA final.
   ⛔ Ni le EM ni un saut de ligne ne survivent : le script « split »
   du site reconstruit le titre mot par mot avec textContent, et les
   mots sont en inline-block — donc aucune pseudo-regle ne peut
   casser la ligne de l'exterieur.
   MESURE a 64 px de fonte :
     « Votre prix depend de vos besoins. »  = 926 px = 14,46 em
     avec « Voyons » en plus                ~ 17,9 em
   Toute largeur entre 14,6 et 17,6 em force la coupe pile apres
   « besoins. ». On prend 16 em : le milieu, donc la plus grande
   marge d'erreur. En em, la regle suit la taille de la police.
   Le h2 porte « margin:0 0 1.4rem » en ligne — 1 seule occurrence
   dans le fichier — d'ou le selecteur, et le margin auto pour
   le recentrer une fois sa largeur bridee. */
h2[style*="margin:0 0 1.4rem"]{max-width:16em!important;
  margin:0 auto 1.4rem!important}
section[style*="padding-top:2rem;padding-bottom:2rem"]{padding-top:0!important}

/* ====== VARIANTE RETENUE LE 19/09 : les mentions SOUS la phrase ======
   Ce bloc vient d'index-essai2.html, repris tel quel. Ce brouillon a ete sorti du dossier servi le 20/09/2026 : il vit desormais dans /root/sauv/brouillons-accueil-20092026/. Il arrive APRES
   les regles ci-dessus et les recouvre : c'est voulu. */
/* Le hero fait min-height:100vh et centre son contenu entre ses marges
   (padding:150px 2rem). Il n'y a donc PAS de place sous la phrase : le
   bloc debordait de 12 px sur un ecran de 900 et passait sous le bandeau.
   On agrandit la marge basse : le contenu remonte de la moitie, et
   l'espace sous lui grandit d'autant. 150 -> 270 px = +60 px de degagement. */
@media(min-width:1001px){section.hero{padding-bottom:270px!important}}
/* .hero-content est positionne ET ne fait que ~600 px de large :
   un left:5vw s'y calait, pas sur la page. On repart du CENTRE du
   bloc — qui est aussi le centre de la page — et on s'en ecarte de
   45vw. Le resultat ne depend plus de la largeur du parent. */
.hero-flanc{position:static!important}
.hf-mention{position:absolute!important;
  top:calc(100% + 1.95rem)!important;bottom:auto!important;  /* MESURE : avec le visuel, le bloc fait 53 (texte) + 8 (marge)
     + 96 (image) = 157 px. La zone sous la phrase fait 193 px
     sur un ecran de 980 de haut, et seulement ~153 sur un 900.
     D'ou le visuel a 96 px et le bloc remonte a +0,55 rem. */
  text-shadow:none!important;color:#A87C1F!important;text-align:center!important}
/* chaque bloc est CENTRE sur le milieu de sa moitie de bandeau clair :
   le bandeau plein va de 22 % a 78 %, son centre gauche tombe donc a
   14 vw a gauche du centre de la page, et symetriquement a droite. */
.hf-g{left:calc(50% - 14vw)!important;right:auto!important;
  transform:translateX(-50%)!important}
/* les deux visuels, poses SOUS chaque mention par ::after — aucun
   changement de balisage. Le masque rond dissout les bords : le fond
   sombre de l'image disparait sans qu'on touche a l'image. */
/* ⛔ PLUS AUCUN masque CSS : c'est lui qui faisait l'anneau visible
   et les coins carres. Le rond est maintenant decoupe DANS l'image,
   bord net, antialiase sur 6 px. */
.hf-g::after,.hf-d::after{content:'';display:block;
  width:132px;height:132px;margin:.6rem auto 0;
  background:center/contain no-repeat}
.hf-g::after{background-image:url(/img/cerveau.png)}
.hf-d::after{background-image:url(/img/flux.svg)}
.hf-d{right:calc(50% - 14vw)!important;left:auto!important;
  transform:translateX(50%)!important}

/* ================= PASSE 14 — 19/09/2026 ================= */
/* text-wrap:balance equilibrait les deux lignes du CTA (688 et 703 px)
   au lieu de remplir la premiere. La phrase 1 tient en 929 px pour un
   bloc de 1024 : on coupe l'equilibrage, le remplissage redevient
   glouton et la coupe tombe apres « besoins. » */
h2[style*="margin:0 0 1.4rem"]{text-wrap:wrap!important;
  text-wrap-style:auto!important}

/* LE CORPS DU TITRE. La nouvelle accroche fait 15,72 em contre 7,71
   pour l'ancienne. A 6vw / 6rem elle debordait des 1280 px de large.
   A 5vw / 5rem : 15,72 x 0,05 = 0,786 vw, toujours inferieur a la
   largeur moins les marges, quelle que soit la taille d'ecran. */
.hero-title{font-size:clamp(2.2rem,5vw,5rem)!important}

/* le bloc « L'assistant prepare… » : texte centre */
p[style*="border-left:2px solid #935BFF"]{text-align:center!important}

/* ================= PASSE 16 — 19/09/2026 ================= */
/* .line2 est en block, marge haute a 0, et les deux lignes se
   chevauchaient de 9 px. L'ecart est en em : il suit le corps. */
.hero-title .line2{margin-top:.22em!important}

/* ================= PASSE 17 — 19/09/2026 ================= */
/* Il est enfant de .maillons-grid (3 colonnes de 280,875 px) et tenait
   donc dans UNE case. On lui fait traverser les trois : le margin auto
   deja present en ligne fait alors le centrage. */
p[style*="border-left:2px solid #935BFF"]{grid-column:1/-1!important}

/* ---- LE REPLI MOBILE, qui avait saute ----
   La passe 12 prevoyait un repli sous 1000 px, mais le calque de la
   variante 2, ajoute APRES, redeclare position:absolute sans media
   query et l'ecrasait. MESURE a 375 px : les deux mentions se
   chevauchaient sur 117 px, medaillons compris.
   Cette regle est la DERNIERE du fichier : elle gagne. */
@media(max-width:1000px){
  .hero-flanc{position:static!important;width:auto!important;
    max-width:100%!important;margin-left:0!important;margin-right:0!important}
  .hf-mention{position:static!important;transform:none!important;
    display:block!important;margin:1.6rem auto 0!important;
    text-align:center!important}
  .hf-g,.hf-d{left:auto!important;right:auto!important;
    transform:none!important}
  .hf-g::after,.hf-d::after{width:104px!important;height:104px!important}
}

/* ================= PASSE 19 - 19/09/2026 ================= */
/* Le bloc « L'assistant prepare… » : on retire le filet violet.
   POURQUOI : depuis la passe 18 le bloc est sorti de la grille et son
   texte est centre. Un filet colle a gauche d'un texte centre tire
   l'oeil hors de l'axe : on lit un decalage la ou il n'y en a pas.
   Le filet avait un sens quand le texte etait aligne a gauche dans
   une case ; il n'en a plus. On enleve aussi le retrait gauche qui
   l'accompagnait, sinon le bloc reste pousse de 17,6 px vers la
   droite. */
p[style*="border-left:2px solid #935BFF"]{
  border-left:0!important;
  padding-left:0!important}


/* ==========================================================================
   AJOUT DU 20/09/2026 — le texte ecrit en blanc DANS l'attribut style.
   Un style d'attribut passe devant une feuille : il faut le viser forme par
   forme, avec !important. Les onze formes ci-dessous sont celles REELLEMENT
   presentes sur les pages atteignables, mesurees le 20/09.
   ⭐ var(--white) n'est PAS ici : la variable est deja redefinie plus haut.
   ========================================================================== */
[style*="color:#fff"],[style*="color: #fff"]{color:#1B1733!important}
[style*="color:rgba(255,255,255,.85)"]{color:rgba(27,23,51,.88)!important}
[style*="color:rgba(255,255,255,.82)"]{color:rgba(27,23,51,.86)!important}
[style*="color:rgba(255,255,255,.78)"]{color:rgba(27,23,51,.84)!important}
[style*="color:rgba(255,255,255,.72)"]{color:rgba(27,23,51,.80)!important}
[style*="color:rgba(255,255,255,.7)"]{color:rgba(27,23,51,.78)!important}
[style*="color:rgba(255,255,255,0.6)"]{color:rgba(27,23,51,.70)!important}
[style*="color:rgba(255,255,255,.55)"]{color:rgba(27,23,51,.66)!important}
[style*="color:rgba(255,255,255,.45)"]{color:rgba(27,23,51,.60)!important}
[style*="color:rgba(255,255,255,.4)"]{color:rgba(27,23,51,.58)!important}
[style*="color:rgba(255,255,255,.32)"]{color:rgba(27,23,51,.54)!important}

/* Le pied de page : ce n'est pas un style d'attribut mais une regle de
   classe, posee APRES le lien vers cette feuille. Seul !important la bat. */
.mfoot,.mfoot a,.mfoot .fcol a,.mfoot .fh{color:rgba(27,23,51,.74)!important}
.mfoot a:hover{color:#4C1D95!important}


/* ==========================================================================
   AJOUT DU 20/09/2026 (2) — LE SIMULATEUR SUR FOND CLAIR
   Tout est prefixe #roi-calculator : rien d'autre sur le site n'est touche.
   Les couleurs du calculateur sont injectees par JS apres cette feuille :
   seul !important les bat. Ce n'est pas de la coquetterie, c'est l'ordre
   de cascade.
   ========================================================================== */

/* 1. LES CURSEURS — le theme les habillait en champs de saisie */
#roi-calculator input[type=range]{
  -webkit-appearance:none!important;appearance:none!important;
  width:100%!important;height:6px!important;border:0!important;
  padding:0!important;margin:0!important;border-radius:6px!important;
  background:rgba(109,40,217,.20)!important;box-shadow:none!important;
  min-height:0!important;line-height:normal!important}
#roi-calculator input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#6D28D9;border:3px solid #FFFFFF;
  box-shadow:0 0 0 1px rgba(109,40,217,.55),0 3px 10px rgba(109,40,217,.35);
  cursor:pointer}
#roi-calculator input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#6D28D9;
  border:3px solid #FFFFFF;cursor:pointer}

/* 2. LE CADRE ET LES FONDS */
#roi-calculator{background:rgba(109,40,217,.05)!important;
  border-color:rgba(109,40,217,.22)!important}
#roi-calculator .r2-res{background:rgba(255,255,255,.72)!important;
  border-color:rgba(201,168,76,.45)!important}
#roi-calculator .r2-card{background:rgba(255,255,255,.80)!important;
  border-color:rgba(109,40,217,.16)!important}
#roi-calculator .r2-card.hl{background:rgba(201,168,76,.10)!important;
  border-color:rgba(201,168,76,.45)!important}
#roi-calculator .r2-task{background:rgba(255,255,255,.72)!important;
  border-color:rgba(109,40,217,.22)!important;color:rgba(27,23,51,.78)!important}
#roi-calculator .r2-task.on{background:rgba(109,40,217,.14)!important;
  border-color:#6D28D9!important;color:#1B1733!important}
#roi-calculator .r2-task .dot{background:rgba(27,23,51,.22)!important}
#roi-calculator .r2-task.on .dot{background:#6D28D9!important;
  box-shadow:0 0 0 3px rgba(109,40,217,.22)!important}
#roi-calculator .r2-globals{border-top-color:rgba(27,23,51,.14)!important}
#roi-calculator .r2-methode{background:rgba(109,40,217,.06)!important;
  border-left-color:rgba(109,40,217,.45)!important}

/* 3. LE TEXTE */
#roi-calculator .r2-h,
#roi-calculator .r2-card .c-val,
#roi-calculator .r2-methode b{color:#1B1733!important}
#roi-calculator .r2-card.hl .c-val{color:#8A6D1F!important}
#roi-calculator .r2-sub,
#roi-calculator .r2-lab,
#roi-calculator .r2-empty,
#roi-calculator .r2-methode,
#roi-calculator .r2-card .c-lab{color:rgba(27,23,51,.72)!important}
#roi-calculator .r2-note{color:rgba(27,23,51,.58)!important}
#roi-calculator .r2-lab b{color:#8A6D1F!important}
#roi-calculator .r2-eye{color:#6D28D9!important}
#roi-calculator .r2-cta{color:#FFFFFF!important}

/* 22/09/2026 : « Espace client » — la partie en violet passe a la ligne.
   Le <br> du HTML est detruit par splitWords() : le retour se fait ici, sur CE titre seulement. */
.ck-grid h2.split em{display:block}
