/* ==========================================================================
   FINOVÉE — feuille de style v7
   Socle : jetons de couleur en light-dark(), typographie fluide en clamp(),
   container queries, :has(), @starting-style, scroll-driven animations.
   Chaque jeton porte une valeur de repli avant sa version moderne :
   un navigateur qui ignore light-dark() garde le thème clair.
   ========================================================================== */

:root{
  color-scheme: light dark;

  /* — accents — */
  --red:#F4631E;                    /* accent décoratif : puces, carrés, filets */
  --red-a:#B64008;                  /* accent ACCESSIBLE : texte et boutons (5,2:1 sur blanc) */
  --red-a:light-dark(#B64008,#F88752);
  --red-btn:#B64008;                /* fond de bouton — blanc dessus = 5,2:1 */
  --red-btn:light-dark(#B64008,#C34509);
  --red-btn-h:#963406;
  --red-btn-h:light-dark(#963406,#F4631E);
  --red-1:#F6844D; --red-2:#FAC1A6;

  /* — surfaces & encre — */
  --paper:#ffffff;  --paper:light-dark(#ffffff,#171514);
  --soft:#F7F5F3;   --soft:light-dark(#F7F5F3,#201D1B);
  --card:#ffffff;   --card:light-dark(#ffffff,#221F1D);
  --line:#E7E3DF;   --line:light-dark(#E7E3DF,#36322F);
  --ink:#201E1D;    --ink:light-dark(#201E1D,#F1EEEB);
  --ink2:#55524F;   --ink2:light-dark(#55524F,#B6B0AA);
  --ink3:#6E6A66;   --ink3:light-dark(#6E6A66,#98928C);
  --red-w:#FEF1EB;  --red-w:light-dark(#FEF1EB,#2E1A16);
  --warn-bg:#FFF9E6; --warn-bg:light-dark(#FFF9E6,#2A2415);
  --warn-bd:#F0DFA8; --warn-bd:light-dark(#F0DFA8,#4A4126);
  --warn-tx:#6B5A20; --warn-tx:light-dark(#6B5A20,#D9CB94);

  /* blocs sombres : identiques dans les deux thèmes */
  --dark-bg:#201E1D; --dark-card:#2C2A28; --dark-line:#3D3A38; --dark-tx:#B0ABA7;

  --max:1160px;
  --sh:0 1px 2px rgba(32,30,29,.04), 0 14px 34px -14px rgba(32,30,29,.16);
  --ring:0 0 0 3px var(--paper), 0 0 0 6px var(--red-a);

  /* typographie fluide — bornée en rem pour ne pas casser le zoom (WCAG 1.4.4) */
  --t-body:clamp(1.0625rem, 1.02rem + .18vw, 1.15rem);
  --t-lead:clamp(1.09rem, 1.03rem + .32vw, 1.24rem);
  --t-h1:clamp(2.05rem, 1.5rem + 2.6vw, 3.3rem);
  --t-h2:clamp(1.6rem, 1.28rem + 1.5vw, 2.45rem);
}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:var(--t-body);line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:750;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:1.15rem;letter-spacing:-.015em}
p{margin:0 0 1rem;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--red-a);margin-bottom:1rem}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--red);flex:0 0 auto}
.lead{font-size:var(--t-lead);color:var(--ink2);max-width:64ch}
.muted{color:var(--ink2)}
.small{font-size:.86rem}
.note{font-size:.82rem;color:var(--ink3)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* lien d'évitement — WCAG 2.4.1 */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 8px 8px;font-weight:700;font-size:.9rem;transition:top .18s}
.skip:focus{top:0}

/* barre de progression de lecture — CSS pur, sans JavaScript */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;
  background:var(--red);z-index:90;scale:0 1;pointer-events:none}
@supports (animation-timeline: scroll()){
  .progress{animation:grow linear both;animation-timeline:scroll(root block)}
}
@keyframes grow{from{scale:0 1}to{scale:1 1}}
@media(prefers-reduced-motion:reduce){.progress{display:none}}

/* ---------- en-tête ---------- */
header.site{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line)}
@supports not (backdrop-filter:blur(2px)){header.site{background:var(--paper)}}
.bar{display:flex;align-items:center;gap:1.4rem;height:76px}
.brand{margin-right:auto;display:flex;align-items:center}
.brand img{height:34px;width:auto}
html[data-theme="dark"] .brand img,
html[data-theme="dark"] .logo-f{filter:invert(1) hue-rotate(180deg) saturate(1.35)}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .brand img{filter:invert(1) hue-rotate(180deg) saturate(1.35)}
}
nav.main{display:flex;gap:1.4rem;align-items:center}
nav.main a{font-size:.85rem;font-weight:650;color:var(--ink2);position:relative;padding:.5rem 0;min-height:44px;
  display:inline-flex;align-items:center}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:8px;height:2.5px;background:var(--red);transition:right .26s}
nav.main a:hover,nav.main a.active{color:var(--ink)}
nav.main a.active::after,nav.main a:hover::after{right:0}

.iconbtn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--card);color:var(--ink);border-radius:9px;cursor:pointer;font-size:1rem;flex:0 0 auto;
  transition:border-color .18s,transform .18s}
.iconbtn:hover{border-color:var(--red-a);transform:translateY(-1px)}
.burger{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:7px;
  font-size:.88rem;font-weight:750;border:2px solid transparent;cursor:pointer;min-height:44px;
  font-family:inherit;text-align:center;
  transition:transform .16s,box-shadow .16s,background .16s,color .16s,border-color .16s}
@media(prefers-reduced-motion:reduce){.btn{transition:background .16s,color .16s}}
.btn-p{background:var(--red-btn);color:#fff}
.btn-p:hover{background:var(--red-btn-h);transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(200,36,10,.75)}
.btn-d{background:var(--ink);color:var(--paper)}
.btn-d:hover{transform:translateY(-2px)}
.btn-o{border-color:var(--ink);color:var(--ink)}
.btn-o:hover{background:var(--ink);color:var(--paper)}
.btn-w{background:#fff;color:#201E1D}
.btn-w:hover{transform:translateY(-2px)}
.btn-sm{padding:.55rem 1rem;font-size:.8rem;min-height:38px}

.squares{display:flex;gap:5px;align-items:flex-end}
.squares i{display:block;width:11px;height:11px;background:var(--red-2)}
.squares i:nth-child(2){background:var(--red-1);margin-bottom:7px}
.squares i:nth-child(3){background:var(--red);margin-bottom:14px}

/* ---------- héros ---------- */
.hero{padding:4.6rem 0 4rem;background:linear-gradient(180deg,var(--paper),var(--soft));position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-6%;top:12%;width:340px;height:340px;
  background:radial-gradient(circle,rgba(236,48,19,.09),transparent 68%)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.6rem;align-items:center}
.hero h1{font-size:clamp(2rem,4.1vw,3.15rem)}
.hero h1 span{color:var(--red-a)}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.trust{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.trust div{font-size:.85rem;color:var(--ink2);max-width:20ch}
.trust b{display:block;font-size:1.6rem;color:var(--ink);letter-spacing:-.03em;margin-bottom:.1rem}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:2rem;box-shadow:var(--sh)}
.panel h3{margin-bottom:1.3rem}

section.pad{padding:4.8rem 0}
section.pad.tight{padding:3.2rem 0}
.soft{background:var(--soft)}
.dark{background:var(--dark-bg);color:#E8E5E2}
.dark h2,.dark h3,.dark b{color:#fff}
.dark .lead,.dark .muted{color:var(--dark-tx)}
.dark .eyebrow{color:var(--red-1)}
.dark .eyebrow::before{background:var(--red-1)}
.dark .card{background:var(--dark-card);border-color:var(--dark-line);color:#E8E5E2}
.dark .card p{color:var(--dark-tx)}
.head{max-width:66ch;margin-bottom:2.8rem}
.grid{display:grid;gap:1.4rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:start}

/* cartes — container queries : la carte s'adapte à SON conteneur, pas au viewport */
.grid{container-type:inline-size}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.8rem;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--red-2)}
@media(prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card p{font-size:.95rem;color:var(--ink2);margin-bottom:0}
.card h3{margin-bottom:.55rem}
.card .squares{margin-bottom:1.2rem}

.ul-check{list-style:none;padding:0;margin:1.1rem 0 0}
.ul-check li{position:relative;padding-left:1.7rem;margin-bottom:.7rem;font-size:.96rem;color:var(--ink2)}
.ul-check li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;background:var(--red)}
.dark .ul-check li{color:var(--dark-tx)}
.ul-cross{list-style:none;padding:0;margin:1.1rem 0 0}
.ul-cross li{position:relative;padding-left:1.7rem;margin-bottom:.7rem;font-size:.96rem;color:var(--ink2)}
.ul-cross li::before,.ul-cross li::after{content:"";position:absolute;left:1px;top:.55em;width:11px;height:2px;background:var(--ink3)}
.ul-cross li::before{transform:rotate(45deg)}
.ul-cross li::after{transform:rotate(-45deg)}

.steps{display:grid}
.step{display:grid;grid-template-columns:74px 1fr;gap:1.6rem;padding:1.9rem 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{font-size:2.1rem;font-weight:800;color:var(--red-a);letter-spacing:-.04em;line-height:1}
.step h3{margin-bottom:.5rem}
.step p{margin:0;color:var(--ink2);font-size:.96rem}

/* ==========================================================================
   ILLUSTRATIONS ANIMÉES — SVG inline, aucune image, aucune bibliothèque.
   Toutes les animations sont désactivées si le visiteur a demandé
   la réduction des animations (prefers-reduced-motion).
   ========================================================================== */
/* ============ 1. SABLIER ============ */
.fv-hourglass{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
@media(prefers-reduced-motion:no-preference){
  .hg-sand-top{animation:hgTop 2.2s cubic-bezier(.4,0,.6,1) 1 both}
  .hg-stream{animation:hgStream 2.2s linear 1 both}
  .hg-sand-bot{animation:hgBot 2.2s cubic-bezier(.4,0,.6,1) 1 both}
  .hg-out rect{animation:hgPop .38s ease-out 1 both}
  .hg-out rect:nth-of-type(1){animation-delay:2.1s}
  .hg-out rect:nth-of-type(2){animation-delay:2.3s}
  .hg-out rect:nth-of-type(3){animation-delay:2.5s}
  .hg-out rect:nth-of-type(4){animation-delay:2.7s}
  .hg-lab{animation:hgLab .45s ease-out 3s 1 both}
}
@keyframes hgTop{from{transform:scaleY(1);transform-origin:100px 78px}
  to{transform:scaleY(0);transform-origin:100px 78px}}
@keyframes hgBot{from{transform:scaleY(0);transform-origin:100px 182px}
  to{transform:scaleY(1);transform-origin:100px 182px}}
@keyframes hgStream{0%,88%{opacity:1}100%{opacity:0}}
@keyframes hgPop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes hgLab{from{opacity:0}to{opacity:1}}

/* ============ 2. CONSTRUCTION D'OUTIL ============ */
.fv-build{width:100%;max-width:520px;display:block;margin:0 auto}
.bd-line{stroke-dasharray:260}
@media(prefers-reduced-motion:no-preference){
  .bd-paper{animation:bdPaper 4.6s ease-in-out 1 both}
  .bd-paper:nth-of-type(2){animation-delay:.12s}
  .bd-paper:nth-of-type(3){animation-delay:.24s}
  .bd-paper:nth-of-type(4){animation-delay:.36s}
  .bd-paper:nth-of-type(5){animation-delay:.48s}
  .bd-grid{animation:bdGrid 4.6s ease-in-out 1 both}
  .bd-ui{animation:bdUi 4.6s ease-in-out 1 both}
  .bd-bar{transform-origin:bottom;animation:bdBar 4.6s ease-in-out 1 both}
  .bd-bar:nth-of-type(2){animation-delay:.1s}
  .bd-bar:nth-of-type(3){animation-delay:.2s}
  .bd-bar:nth-of-type(4){animation-delay:.3s}
  .bd-line{animation:bdLine 4.6s ease-in-out 1 both}
  .bd-step:nth-of-type(1){animation:bdStep 4.6s linear 1 both}
  .bd-step:nth-of-type(2){animation:bdStep 4.6s linear 1 both;animation-delay:.5s}
  .bd-step:nth-of-type(3){animation:bdStep 4.6s linear 1 both;animation-delay:1s}
}
@keyframes bdPaper{0%{opacity:0;transform:translate(0,0) rotate(0)}
  8%,34%{opacity:1}48%,100%{opacity:0;transform:translate(0,-14px) rotate(-6deg)}}
@keyframes bdGrid{0%,34%{opacity:0;stroke-dashoffset:1160}40%{opacity:1}
  58%{opacity:1;stroke-dashoffset:0}72%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes bdUi{0%,60%{opacity:0;transform:translateY(8px)}72%,100%{opacity:1;transform:translateY(0)}}
@keyframes bdBar{0%,66%{transform:scaleY(0)}78%,100%{transform:scaleY(1)}}
@keyframes bdLine{0%,72%{stroke-dashoffset:260}88%,100%{stroke-dashoffset:0}}
@keyframes bdStep{0%,58%{opacity:.25}74%,100%{opacity:1}}

/* ============ 3. KAIROS ============ */
.fv-kairos{width:100%;max-width:600px;display:block;margin:0 auto}
@media(prefers-reduced-motion:no-preference){
  .kr-scan{animation:krScan 3.2s cubic-bezier(.5,0,.3,1) 1 both}
  .kr-win{animation:krWin .5s ease-out 1.3s 1 both}
  .kr-rise g{animation:krRise .7s cubic-bezier(.2,.8,.3,1) 1 both}
  .kr-rise g:nth-of-type(1){animation-delay:1.5s}
  .kr-rise g:nth-of-type(2){animation-delay:1.65s}
  .kr-rise g:nth-of-type(3){animation-delay:1.8s}
  .kr-lab{animation:krLab .5s ease-out 2.25s 1 both}
}
@keyframes krScan{from{transform:translateX(0)}to{transform:translateX(300px)}}
@keyframes krWin{from{opacity:0}to{opacity:1}}
@keyframes krRise{0%{opacity:0;transform:translateY(0)}
  30%{opacity:1}100%{opacity:1;transform:translateY(-34px)}}
@keyframes krLab{from{opacity:0}to{opacity:1}}

/* ---------- veille ---------- */
.veille{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr)}
.vitem{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s}
.vitem:hover{border-color:var(--red-2);transform:translateY(-3px)}
.vitem .vmeta{display:flex;gap:.6rem;align-items:center;font-size:.68rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:.9rem;flex-wrap:wrap}
.vitem .vcat{color:var(--red-a)}
.vitem h3{font-size:1.05rem;margin-bottom:.6rem}
.vitem p{font-size:.93rem;color:var(--ink2)}
.vitem .vsrc{margin-top:auto;padding-top:1rem;font-size:.8rem}
.vitem .vsrc a{color:var(--red-a);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.veille{grid-template-columns:1fr}}

/* ---------- tarifs & tableaux ---------- */
.price{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2rem;display:flex;flex-direction:column}
.price.feature{border:2px solid var(--red-a);position:relative}
.price.feature::before{content:"Le plus demandé";position:absolute;top:-11px;left:2rem;background:var(--red-btn);color:#fff;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;padding:.3rem .7rem;border-radius:3px}
.price .amount{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin:.8rem 0 .2rem}
.price .amount small{font-size:.95rem;font-weight:600;color:var(--ink3);letter-spacing:0}
.price .ul-check{flex:1}
.price .btn{margin-top:1.5rem}

.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tar{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--card);min-width:min(100%,420px)}
table.tar caption{text-align:left;font-size:.82rem;color:var(--ink3);padding-bottom:.6rem}
table.tar th,table.tar td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
table.tar thead th,table.tar th[scope="col"]{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:800;background:var(--soft)}
table.tar td:last-child,table.tar th[scope="col"]:last-child{text-align:right}
table.tar td:last-child{font-weight:700;white-space:nowrap}
table.tar th[scope="row"]{font-weight:700;background:transparent;text-transform:none;letter-spacing:normal;font-size:.94rem;color:var(--ink)}
table.cmp td,table.cmp th{text-align:center}
table.cmp td:first-child,table.cmp th:first-child{text-align:left}
table.cmp td:last-child{text-align:center}
table.cmp .win{background:var(--red-w);font-weight:750;color:var(--ink)}
.yes{color:var(--red-a);font-weight:800}
.no{color:var(--ink3)}

.example{background:var(--red-w);border-left:4px solid var(--red);border-radius:0 10px 10px 0;padding:1.7rem}
.example h3{margin-bottom:.8rem}
.example p{font-size:.95rem;color:var(--ink2);margin-bottom:.6rem}
.example .tot{font-size:1.05rem;font-weight:750;color:var(--ink);margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--red-2)}
.warnbox{background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:10px;padding:1.2rem 1.4rem;font-size:.89rem;color:var(--warn-tx)}
.warnbox b{color:var(--ink)}

/* ---------- implantations ---------- */
.zones{background:var(--dark-bg);color:#fff;padding:1.9rem 0}
.zones .eyebrow{color:var(--red-1)}.zones .eyebrow::before{background:var(--red-1)}
.zones .muted{color:#A5A09C}
.cities{display:flex;gap:1.6rem;flex-wrap:wrap}
.cities b{font-size:1.5rem;letter-spacing:-.03em;position:relative;padding-left:1.1rem;color:#fff}
.cities b::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--red)}

.sites{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.imp{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.9rem;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.imp:hover{border-color:var(--red-2);transform:translateY(-3px);box-shadow:var(--sh)}
.imp .tag{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;font-size:.68rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:.3rem .65rem;border-radius:4px;margin-bottom:1rem}
.imp .tag.a{background:var(--red-w);color:var(--red-a)}
.imp .tag.b{background:var(--soft);color:var(--ink2);border:1px solid var(--line)}
.imp h3{font-size:1.4rem;margin-bottom:.35rem}
.imp address{font-style:normal;color:var(--ink2);font-size:.97rem;margin-bottom:1rem}
.imp .facts{list-style:none;padding:0;margin:0 0 1.4rem;font-size:.9rem;color:var(--ink2)}
.imp .facts li{padding:.35rem 0;border-bottom:1px dashed var(--line);display:flex;justify-content:space-between;gap:1rem}
.imp .facts li:last-child{border:0}
.imp .facts b{color:var(--ink);font-weight:650;text-align:right}
.imp .go{margin-top:auto}

/* ---------- avis / cas ---------- */
.avis{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.8rem;display:flex;flex-direction:column}
.avis blockquote{margin:0 0 1.2rem;font-size:1rem;line-height:1.6;color:var(--ink)}
.avis footer{margin-top:auto;font-size:.85rem;color:var(--ink3);display:flex;align-items:center;gap:.7rem}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--red-w);color:var(--red-a);display:grid;place-items:center;
  font-weight:800;font-size:.85rem;flex:0 0 auto;border:1px solid var(--red-2)}

/* ---------- carte ---------- */
.mapbox{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft);min-height:250px;
  display:grid;place-items:center;position:relative;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px}
.pin{text-align:center;padding:1rem}
.pin .dot{width:22px;height:22px;border-radius:50%;background:var(--red);margin:0 auto .7rem;
  box-shadow:0 0 0 8px rgba(236,48,19,.18),0 0 0 18px rgba(236,48,19,.08)}

/* ---------- formulaires ---------- */
form.contact{display:grid;gap:1.1rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink2);display:block;margin-bottom:.4rem}
label .opt{text-transform:none;letter-spacing:normal;font-weight:600;color:var(--ink3)}
input,select,textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:8px;font:inherit;
  font-size:.95rem;background:var(--card);color:var(--ink);min-height:46px}
textarea{field-sizing:content;min-height:120px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--red-a) 22%,transparent)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
dl.coord dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red-a);font-weight:800;margin-top:1.3rem}
dl.coord dt:first-child{margin-top:0}
dl.coord dd{margin:.25rem 0 0;font-size:.97rem}
.sent{border:1px solid var(--red-2);background:var(--red-w);border-radius:9px;padding:.9rem 1.1rem;font-size:.9rem}
@starting-style{.sent{opacity:0;translate:0 6px}}
.sent{transition:opacity .25s ease-out,translate .25s ease-out}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:1.1rem 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;
  gap:1rem;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red-a);font-weight:800;font-size:1.4rem;line-height:1;transition:rotate .2s}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.8rem 0 0;color:var(--ink2);font-size:.96rem;max-width:74ch}

/* ---------- filtre déclaratif « je suis… » : CSS pur, via :has() ---------- */
.segbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1.8rem}
.segbar .lbl{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--ink3);margin-right:.4rem}
.segbar input{position:absolute;opacity:0;width:1px;height:1px}
.segbar label{margin:0;text-transform:none;letter-spacing:normal;font-size:.87rem;font-weight:650;color:var(--ink2);
  border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:.5rem 1rem;cursor:pointer;
  min-height:40px;display:inline-flex;align-items:center;transition:all .15s}
.segbar label:hover{border-color:var(--ink3)}
.segbar input:checked + label{border-color:var(--red-a);background:var(--red-w);color:var(--ink);font-weight:750}
.segbar input:focus-visible + label{box-shadow:var(--ring)}
.filterzone:has(#seg-artisan:checked) .sectors .card:not([data-seg~="artisan"]),
.filterzone:has(#seg-liberal:checked) .sectors .card:not([data-seg~="liberal"]),
.filterzone:has(#seg-sante:checked)   .sectors .card:not([data-seg~="sante"]),
.filterzone:has(#seg-pme:checked)     .sectors .card:not([data-seg~="pme"]){display:none}

/* ---------- simulateur ---------- */
.sim-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:1.8rem;align-items:start}
.simstep{margin-bottom:1.7rem}
.simstep:last-child{margin-bottom:0}
.simstep>.slab{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--ink3);display:block;margin-bottom:.7rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{font:inherit;font-size:.88rem;font-weight:600;padding:.6rem 1rem;border-radius:7px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink2);cursor:pointer;transition:all .15s;min-height:44px}
.chip:hover{border-color:var(--ink3)}
.chip[aria-pressed="true"]{border-color:var(--red-a);background:var(--red-w);color:var(--ink);font-weight:750}
.tasks{display:grid;gap:.5rem}
.task{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:9px;
  cursor:pointer;transition:all .15s;margin:0;text-transform:none;letter-spacing:normal;color:inherit;font-weight:400}
.task:hover{border-color:var(--ink3)}
.task:has(input:checked){border-color:var(--red-a);background:var(--red-w)}
.task:has(input:focus-visible){box-shadow:var(--ring)}
.task input{width:auto;min-height:0;flex:0 0 auto;margin-top:.3rem;accent-color:var(--red-btn)}
.task b{display:block;font-size:.94rem;font-weight:700}
.task i{display:block;font-style:normal;font-size:.82rem;color:var(--ink3);margin-top:.1rem}

.result{background:var(--dark-bg);color:#fff;border-radius:14px;padding:1.9rem;position:sticky;top:96px}
.res-lab{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--red-1);margin-bottom:.5rem}
.res-amount{font-size:2.9rem;font-weight:800;letter-spacing:-.045em;line-height:1;transition:opacity .18s}
.res-amount small{font-size:.95rem;font-weight:600;color:#A5A09C;letter-spacing:0}
.res-sub{color:#A5A09C;font-size:.9rem;margin-top:.4rem}
.res-bd{margin:1.3rem 0;padding:1rem 0;border-top:1px solid #3A3735;border-bottom:1px solid #3A3735;font-size:.86rem}
.res-bd div{display:flex;justify-content:space-between;gap:1rem;padding:.22rem 0;color:#B6B1AD}
.res-bd div b{color:#fff;font-weight:650;white-space:nowrap}
.res-bd em{font-style:normal;color:#807B77;font-size:.8em}
.res-cmp div{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;padding:.3rem 0;color:#B6B1AD}
.res-cmp b{color:#fff}
.res-cmp b.hl{color:var(--red-1)}
.res-cmp .res-save{display:block;background:rgba(236,48,19,.14);border-radius:8px;padding:.75rem .9rem;margin-top:.8rem;
  font-size:.88rem;color:#fff;text-align:center;line-height:1.5}
.result .note{color:#8F8A86}
.result .btn-o{border-color:#fff;color:#fff}
.result .btn-o:hover{background:#fff;color:var(--dark-bg)}
.simtools{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.simtools button{flex:1;background:transparent;border:1px solid #4A4643;color:#CFC9C4;border-radius:7px;padding:.55rem .6rem;
  font:inherit;font-size:.78rem;font-weight:650;cursor:pointer;min-height:40px;transition:all .15s}
.simtools button:hover{border-color:#fff;color:#fff}

/* ---------- appel à l'action, pied de page ---------- */
.cta{background:var(--dark-bg);color:#fff;border-radius:16px;padding:3.4rem;text-align:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 130%,rgba(236,48,19,.55),transparent 55%)}
.cta>*{position:relative;z-index:2}
.cta h2{color:#fff;margin-bottom:.7rem}
.cta p{color:var(--dark-tx);max-width:54ch;margin:0 auto 1.8rem}
.cta .hero-cta{justify-content:center}
footer.site{background:var(--dark-bg);color:#9C9793;padding:3.4rem 0 1.5rem;font-size:.9rem}
footer.site h4{color:#fff;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
footer.site a{display:inline-block;padding:.15rem 0}
footer.site a:hover{color:var(--red-1)}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:2.4rem}
.fgrid ul{list-style:none;padding:0;margin:0}
.fgrid li{margin-bottom:.45rem}
.fbot{margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid #383533;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.8rem}
.logo-f{height:34px;margin-bottom:1.1rem}
.devise{font-style:italic;color:var(--red-1);letter-spacing:.02em}

/* ---------- logos du groupe ---------- */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.lg{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.4rem 1rem;text-align:center;
  display:flex;flex-direction:column;justify-content:center;min-height:158px;transition:border-color .2s}
.lg:hover{border-color:var(--red-2)}
.lg img{height:66px;width:auto;max-width:88%;object-fit:contain;margin:0 auto .8rem;
  filter:grayscale(.55);opacity:.9;transition:filter .25s,opacity .25s}
.lg:hover img{filter:none;opacity:1}
.lg b{font-size:1.02rem;letter-spacing:-.02em;display:block;margin-bottom:.25rem;color:#201E1D}
.lg span{font-size:.73rem;color:#6A6560;line-height:1.35}
.volume{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem;
  background:var(--dark-bg);border-radius:12px;padding:1.8rem}
.volume div{text-align:center;color:#A5A09C;font-size:.86rem}
.volume b{display:block;font-size:2.1rem;color:#fff;letter-spacing:-.04em;line-height:1;margin-bottom:.35rem}
.volume div:first-child b{color:var(--red-1)}

/* ---------- barre d'action collante, mobile ---------- */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:.6rem;padding:.7rem 16px calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  translate:0 110%;transition:translate .28s ease-out}
.stickycta.on{translate:0 0}
.stickycta .btn{flex:1}
@media(prefers-reduced-motion:reduce){.stickycta{transition:none}}

/* ---------- navigation par « pages » ---------- */
.page{display:block}
@media(prefers-reduced-motion:no-preference){
  .page{animation:fade .28s ease-out both}
}
@keyframes fade{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
::view-transition-old(root){animation:vt-out .16s ease-in both}
::view-transition-new(root){animation:vt-in .22s ease-out both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
.mockbar{background:var(--dark-bg);color:#B0ABA7;font-size:.78rem;text-align:center;padding:.55rem 1rem}
.mockbar b{color:var(--red-1)}
.crumbs{font-size:.8rem;color:var(--ink3);margin-bottom:1rem}
.crumbs a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px}

/* ---------- adaptations ---------- */
@media(max-width:1000px){
  .logos{grid-template-columns:repeat(3,1fr)}
  nav.main{gap:1rem}
  nav.main a{font-size:.8rem}
}
@media(max-width:900px){
  .hero-grid,.split,.g2,.g3,.g4,.row2,.fgrid,.sites,.sim-grid{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .volume{grid-template-columns:1fr;gap:1.4rem}
  .result{position:static}
  .cities b{font-size:1.2rem}
  nav.main{position:fixed;inset:76px 0 auto 0;background:var(--paper);flex-direction:column;align-items:flex-start;
    padding:1.3rem 28px 2rem;gap:.2rem;border-bottom:1px solid var(--line);display:none;box-shadow:var(--sh)}
  nav.main.open{display:flex}
  nav.main a{font-size:1rem;padding:.6rem 0;width:100%}
  .burger{display:grid}
  .bar .head-cta{display:none}
  .cta{padding:2.4rem 1.3rem}
  section.pad{padding:3.4rem 0}
  .step{grid-template-columns:1fr;gap:.5rem}
  .stickycta{display:flex}
  body{padding-bottom:0}
}
@media print{
  header.site,footer.site,.stickycta,.mockbar,.progress,.simtools{display:none!important}
  .page{display:block!important}
  .result{position:static;background:#fff;color:#000;border:1px solid #999}
}

/* ————————————— v11 : continuité devis → contact ————————————— */
.res-promise{font-size:.82rem;line-height:1.55;color:#C4BEB8;margin:.9rem 0 0;text-align:center}
.res-promise b{color:#fff}
.recap{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:12px;
  padding:1.1rem 1.2rem;margin-bottom:1.8rem;background:var(--soft)}
.recap-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-bottom:.75rem;flex-wrap:wrap}
.recap-h b{font-size:1rem}
.recap-h a{font-size:.82rem;color:var(--ink3);text-decoration:underline;min-height:44px;
  display:inline-flex;align-items:center}
.recap-h a:hover{color:var(--ink)}
.recap dl{display:grid;grid-template-columns:max-content 1fr;gap:.32rem .9rem;margin:0;font-size:.9rem}
.recap dt{color:var(--ink3)}
.recap dd{margin:0;font-weight:650;color:var(--ink)}
.recap-est{margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink2)}
.recap-est b{font-size:1.1rem;color:var(--ink)}
.fset{border:0;padding:0;margin:0}
.fset legend{font:inherit;font-size:.88rem;font-weight:650;color:var(--ink2);margin-bottom:.55rem;padding:0}
.fset .chip{font-size:.84rem;padding:.5rem .9rem}
.promise{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;line-height:1.5;
  color:var(--ink2);background:var(--soft);border-radius:10px;padding:.8rem .95rem;margin:0}
.promise b{color:var(--ink)}
.promise .pi{color:var(--red-a);font-weight:700;flex:none}
.hero-promise{font-size:.86rem;color:var(--ink3);margin:1rem 0 0;text-wrap:pretty}
.hero-promise b{color:var(--ink2)}

/* ————————————— v12 : curseur de volume + structures ————————————— */
.simhint{font-size:.84rem;color:var(--ink3);margin:.15rem 0 .9rem;line-height:1.55;text-wrap:pretty}
.volrow{display:flex;align-items:center;gap:1rem}
.volrow input[type=range]{flex:1;min-height:44px;accent-color:var(--red-a);background:transparent;cursor:pointer}
.volrow output{font-weight:750;font-size:1.05rem;min-width:4.6rem;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.volscale{display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink3);margin-top:.1rem}
.vreset{font:inherit;font-size:.82rem;margin-top:.5rem;background:none;border:0;color:var(--ink3);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:.4rem 0;min-height:44px;display:block}
.vreset[hidden]{display:none}
.vreset:hover{color:var(--ink)}
.strucs{margin-top:2.6rem}
.strucs ul{list-style:none;padding:0;margin:1.1rem 0 0}
.strucs li{display:flex;flex-wrap:wrap;gap:.15rem .9rem;align-items:baseline;
  padding:.8rem 0;border-bottom:1px solid var(--line)}
.strucs li:last-child{border-bottom:0}
.strucs li b{font-size:.98rem;color:var(--ink)}
.strucs li a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.strucs li a:hover{color:var(--red-a)}
.strucs li span{color:var(--ink3);font-size:.88rem}
.strucs li .ext::after{content:"\2197";font-size:.78em;color:var(--ink3);margin-left:.15em}
.strucs li{display:grid;grid-template-columns:132px 1fr;gap:.2rem 1.6rem;align-items:center;padding:1.1rem 0}
.strucs .slogo{display:flex;align-items:center;justify-content:center;height:52px}
.strucs .slogo img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.strucs li:hover .slogo img{filter:none;opacity:1}
.strucs .slogo .squares{display:flex;gap:4px}
.strucs .slogo .squares i{width:10px;height:10px;border-radius:2px;background:var(--red)}
.strucs .slogo .squares i:nth-child(1){opacity:.3}
.strucs .slogo .squares i:nth-child(2){opacity:.6}
.strucs .sbody b{display:block;font-size:1rem;margin-bottom:.15rem}
@media(max-width:620px){
  .strucs li{grid-template-columns:1fr;gap:.6rem}
  .strucs .slogo{justify-content:flex-start;height:40px}
  .strucs .slogo img{max-height:40px}
}
.tsub{display:block;font-weight:400;font-size:.82rem;color:var(--ink3);margin-top:.25rem;line-height:1.45}

/* ---------- pictogrammes de service ---------- */
.ic{width:30px;height:30px;display:block;color:var(--red-a);flex:0 0 auto}
.card>.ic{margin-bottom:1.1rem}
.dark .ic{color:var(--red-1)}

/* ---------- « concrètement », dans le héros ---------- */
.doit{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem 1.3rem}
.doit .it{display:flex;gap:.75rem;align-items:flex-start}
.doit .ic{width:24px;height:24px;margin-top:.15rem}
.doit b{display:block;font-size:.93rem;line-height:1.3;margin-bottom:.1rem;letter-spacing:-.01em}
.doit span{display:block;font-size:.79rem;color:var(--ink3);line-height:1.35}
@media(max-width:1080px){.doit{grid-template-columns:1fr}}

/* ---------- les trois registres ---------- */
.regs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.reg{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.7rem;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.reg:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--red-2)}
@media(prefers-reduced-motion:reduce){.reg:hover{transform:none}}
.reg h3{margin-bottom:.5rem}
.reg p{font-size:.95rem;color:var(--ink2);margin-bottom:1.1rem}
.reg .rtag{margin-top:auto;font-size:.75rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--red-a)}
@media(max-width:900px){.regs{grid-template-columns:1fr}}

.fv-reg{width:100%;max-width:230px;height:auto;display:block;margin:0 0 1.4rem;overflow:visible}
.fv-reg .rg-dot,.fv-reg .rg-blocks>*{transform-box:fill-box;transform-origin:center}
/* L'animation se joue UNE fois et s'arrête sur l'image complète : le NN/g mesure
   que les animations répétées ou déclenchées au défilement retardent les publics
   orientés tâche — B2B, santé, finance — et n'apportent rien à la compréhension. */
@media(prefers-reduced-motion:no-preference){
  .fv-reg .rg-arrow{animation:rgArrow .5s ease-out .15s 1 both}
  .fv-reg .rg-ticks path{animation:rgTick .32s ease-out .5s 1 both}
  .fv-reg .rg-ticks path:nth-child(2){animation-delay:.68s}
  .fv-reg .rg-ticks path:nth-child(3){animation-delay:.86s}
  .fv-reg .rg-line{animation:rgLine .75s ease-out .2s 1 both}
  .fv-reg .rg-dot{animation:rgDot .3s ease-out .85s 1 both}
  .fv-reg .rg-frame{animation:rgFrame .8s ease-out .1s 1 both}
  .fv-reg .rg-blocks>*{animation:rgBlock .34s ease-out .6s 1 both}
  .fv-reg .rg-blocks>*:nth-child(2){animation-delay:.72s}
  .fv-reg .rg-blocks>*:nth-child(3){animation-delay:.84s}
  .fv-reg .rg-blocks>*:nth-child(4){animation-delay:.96s}
}
@keyframes rgArrow{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
@keyframes rgTick{from{opacity:0}to{opacity:1}}
@keyframes rgLine{from{stroke-dashoffset:150}to{stroke-dashoffset:0}}
@keyframes rgDot{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes rgFrame{from{stroke-dashoffset:412}to{stroke-dashoffset:0}}
@keyframes rgBlock{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}

/* ---------- notes de travail, repliées : elles ne coupent plus la lecture ---------- */
details.worknote{background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:10px;
  color:var(--warn-tx);font-size:.87rem;margin-top:1.6rem}
details.worknote>summary{cursor:pointer;padding:.8rem 1.1rem;font-weight:750;min-height:44px;
  display:flex;align-items:center;gap:.55rem;list-style:none;color:var(--ink)}
details.worknote>summary::-webkit-details-marker{display:none}
details.worknote>summary::before{content:"\25B8";display:inline-block;transition:transform .18s;color:var(--warn-tx)}
details.worknote[open]>summary::before{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){details.worknote>summary::before{transition:none}}
details.worknote .wn{padding:0 1.1rem 1.1rem;line-height:1.6}
details.worknote .wn p{margin:0 0 .75rem}
details.worknote .wn p:last-child{margin-bottom:0}
details.worknote b{color:var(--ink)}

/* ---------- références : un cadre par structure, logo compris ---------- */
.refgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.5rem}
.refcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.5rem;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.refcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--red-2)}
@media(prefers-reduced-motion:reduce){.refcard:hover{transform:none}}
.refcard .frame{height:112px;display:flex;align-items:center;justify-content:center;
  background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:1rem;margin-bottom:1.25rem}
.refcard .frame img{max-height:80px;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.6;transition:filter .25s,opacity .25s}
.refcard:hover .frame img{filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){.refcard .frame img{transition:none}}
.refcard h3{font-size:1.06rem;margin-bottom:.35rem}
.refcard .act{font-size:.87rem;color:var(--ink2);margin:0 0 .5rem}
.refcard .where{font-size:.8rem;color:var(--ink3);margin:0 0 1rem}
.refcard .meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.refcard .pill{font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;padding:.3rem .65rem;color:var(--ink3)}
.refcard .pill.dir{border-color:var(--red-2);color:var(--red-a);background:var(--red-w)}
.refcard a.ext{font-size:.84rem;font-weight:700;color:var(--red-a);
  text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.refcard a.ext::after{content:"\2197";margin-left:.2em;font-size:.85em}
@media(max-width:980px){.refgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.refgrid{grid-template-columns:1fr}}

.rd{color:var(--red-a)}

/* ---------- bandeau des trois promesses ---------- */
.promesses{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prom{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 2.2rem}
.prom .it{display:flex;gap:.95rem;align-items:flex-start}
.prom .ic{width:32px;height:32px;margin-top:.1rem}
.prom b{display:block;font-size:1.02rem;letter-spacing:-.015em;margin-bottom:.2rem}
.prom span{display:block;font-size:.86rem;color:var(--ink2);line-height:1.5}
@media(max-width:880px){.prom{grid-template-columns:1fr;gap:1.3rem}}

/* ---------- les six domaines : un pictogramme au-dessus du numéro ---------- */
.step .n{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.step .n .stepic{width:34px;height:34px;color:var(--red-a)}
.step .n span{font-size:2.1rem;font-weight:800;color:var(--red-a);letter-spacing:-.04em;line-height:1}
.stepfig{margin:1.4rem 0 0;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:1.4rem}
.stepfig .fv-build{max-width:440px}
.stepfig .note{margin:.9rem 0 0;text-align:center}
@media(max-width:760px){.step .n{flex-direction:row;align-items:center;gap:.8rem}}

/* ---------- « ce que nous ne faisons pas » ---------- */
.card>.ic.no{color:var(--ink3);margin-bottom:1.1rem}

/* ---------- « ce que l'écart vous épargne » ---------- */
.epargne{display:grid;grid-template-columns:1fr;gap:1.15rem;margin-top:1.6rem}
.epargne .it{display:flex;gap:.9rem;align-items:flex-start}
.epargne .ic{width:28px;height:28px;margin-top:.15rem}
.epargne b{display:block;font-size:.99rem;letter-spacing:-.015em;margin-bottom:.15rem}
.epargne span{display:block;font-size:.88rem;color:var(--ink2);line-height:1.5}

/* --- ajouts de la version multi-pages --- */
nav.main a{white-space:nowrap}
@media(min-width:901px) and (max-width:1330px){
  .bar{gap:1rem}
  nav.main{gap:.95rem}
  nav.main a{font-size:.78rem}
  .bar .head-cta{padding:.7rem 1rem;font-size:.8rem}
}
@view-transition{navigation:auto}
.page{display:block}

/* 31/10/2026 — les illustrations attendent d'être visibles pour se jouer (une seule fois).
   Sans JavaScript ou en animation réduite, la classe n'est jamais posée : rien ne change. */
.fv-wait,.fv-wait *{animation-play-state:paused!important}

/* 01/11/2026 — v24 : photos de Florence Arnould, présidente */
.fv-photo{margin:2rem 0 0}
.fv-photo img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--sh)}
.fv-photo figcaption{margin-top:.6rem;font-size:.84rem;color:var(--ink3)}
.qui{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:3rem;align-items:center}
.qui img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;box-shadow:var(--sh)}
.qui blockquote{margin:1.2rem 0;padding-left:1rem;border-left:3px solid var(--red);font-size:1.12rem;color:var(--ink)}
.fv-who{display:flex;gap:1rem;align-items:center;margin-bottom:1.6rem}
.fv-who img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--card);box-shadow:var(--sh)}
.fv-who p{margin:0}
@media(max-width:900px){.qui{grid-template-columns:1fr;gap:1.6rem}.qui img{max-width:320px}}