/* Mise en page : fiche technique vivante - filets fins, rubriques numérotées, symbole tracé comme une épure qui se dessine, aiguille de mesure pilotée par le visiteur */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/plus-jakarta-sans-latin.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/open-sans-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2')}
:root{
  --fond:#FFFFFF; --zone:#EEF4F8; --encre:#0B1F3A; --gris:#3D5470; --filet:#D6E4EE; --gris-clair:#9FB3C6;
  --bleu:#0047AB; --lien:#1E6FC0; --lagon:#5CE1E6; --azur:#3BA3D3; --brique:#C2603A; --brique-texte:#A84E2C;
  --sombre:#0B1F3A; --sombre-texte:#CFE3F2; --sur-bleu:#FFFFFF; --trame:#EEF4F8; --logo:#0047AB;
  --f-titre:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;
  --f-texte:'Open Sans',Arial,Helvetica,sans-serif;
  --f-mono:'IBM Plex Mono',Consolas,'Courier New',monospace;
  --max:none; --gouttiere:clamp(16px,4vw,80px); --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --fond:#0F1419; --zone:#161C24; --encre:#E8EDF2; --gris:#A3B0BE; --filet:#28323F; --gris-clair:#5D6B7B;
  --bleu:#5CE1E6; --lien:#8CCBEF; --lagon:#5CE1E6; --azur:#8CCBEF; --brique:#E07A52; --brique-texte:#EE9A78;
  --sombre:#0A0E13; --sombre-texte:#C3CDD8; --sur-bleu:#0B1F3A; --trame:#1A212A; --logo:#FFFFFF; color-scheme:dark}}
:root[data-theme="dark"]{
  --fond:#0F1419; --zone:#161C24; --encre:#E8EDF2; --gris:#A3B0BE; --filet:#28323F; --gris-clair:#5D6B7B;
  --bleu:#5CE1E6; --lien:#8CCBEF; --lagon:#5CE1E6; --azur:#8CCBEF; --brique:#E07A52; --brique-texte:#EE9A78;
  --sombre:#0A0E13; --sombre-texte:#C3CDD8; --sur-bleu:#0B1F3A; --trame:#1A212A; --logo:#FFFFFF; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;background:var(--fond);color:var(--encre);font-family:var(--f-texte);font-size:16px;line-height:1.65;margin:0;transition:background-color .35s,color .35s}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--fond)}
a{color:var(--lien)}
a:hover{color:var(--bleu)}
:focus-visible{outline:2px solid var(--lagon);outline-offset:3px}
h1,h2,h3{font-family:var(--f-titre);text-wrap:balance;margin:0}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:max(var(--gouttiere),env(safe-area-inset-left,0px));padding-right:max(var(--gouttiere),env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono)}
.lbl{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.lbl b{font-weight:400;color:var(--bleu)}
.trame{background-color:var(--fond);background-image:linear-gradient(var(--trame) 1px,transparent 1px),linear-gradient(90deg,var(--trame) 1px,transparent 1px);background-size:16px 16px}
.regle{display:block;width:100%;height:10px;color:var(--encre);background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 40px) 0 0/100% 10px no-repeat,repeating-linear-gradient(90deg,var(--gris-clair) 0 1px,transparent 1px 8px) 0 0/100% 5px no-repeat}
.regle use{display:none}
.fin{stroke:var(--gris-clair)}

/* boutons */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 22px;border-radius:2px;font-family:var(--f-texte);font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;transition:background-color .2s,color .2s,border-color .2s}
.btn .fl{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .fl{transform:translateX(4px)}
.btn-plein{background:var(--bleu);color:var(--sur-bleu)}
.btn-plein:hover{color:var(--sur-bleu);filter:brightness(1.1)}
.btn-trait{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn-trait:hover{color:var(--encre);background:var(--zone)}

/* en-tête */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--fond);border-bottom:1px solid var(--encre);transition:background-color .35s}
.progres{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--bleu);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:14px}
.marque{display:flex;align-items:center;color:var(--bleu);text-decoration:none}
.marque svg{height:30px;width:96px}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;font-size:14px}
.menu a:not(.btn){position:relative;color:var(--encre);text-decoration:none;padding:6px 0}
.menu a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--bleu);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.menu a:not(.btn):hover::after,.menu a.actif::after{transform:scaleX(1)}
.menu a.actif{color:var(--bleu)}
.menu a span{font-family:var(--f-mono);font-size:11px;color:var(--lien);margin-right:4px}
.menu .btn{min-height:42px;padding:0 18px;font-size:14px}
.theme{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--filet);border-radius:2px;background:transparent;color:var(--encre);cursor:pointer}
.theme:hover{border-color:var(--encre)}
.theme svg{width:18px;height:18px;transition:transform .5s var(--ease)}
:root[data-theme="dark"] .theme svg{transform:rotate(180deg)}

.burger{display:none;width:44px;height:44px;border:1px solid var(--filet);border-radius:2px;background:transparent;color:var(--encre);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* hero */
.hero-zone{position:relative;overflow:hidden}
.fond-anime{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-contenu{position:relative}
.hero-txt{position:relative}
.hero-txt::before{content:"";position:absolute;inset:-24px -32px;background:radial-gradient(closest-side,var(--fond) 55%,transparent);opacity:.85;z-index:-1}
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:72px 56px}
.hero-txt{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero h1{font-weight:300;font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.07;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--bleu)}
.hero p.lead{font-size:18px;color:var(--gris);max-width:36em}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.epure-bloc{display:flex;flex-direction:column;gap:10px;max-width:440px;width:100%;margin-left:auto}
.epure{border:1px solid var(--encre);width:100%;aspect-ratio:1;max-width:100%;cursor:crosshair;touch-action:pan-y}
.epure svg{display:block;width:100%;height:100%}
.epure .ln{stroke:var(--encre)}
.epure .ax{stroke:var(--gris-clair)}
.epure .sym{fill:var(--zone);stroke:var(--bleu)}
.epure .quart{stroke:var(--lagon)}
.epure .aig{stroke:var(--brique)}
.epure .pivot{fill:var(--fond);stroke:var(--encre)}
.epure text{font-family:var(--f-mono);font-size:11px;fill:var(--encre)}
.epure text.br{fill:var(--brique-texte);font-size:12px}
.epure .cache{fill:var(--fond)}
.epure-legende{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:11px;color:var(--gris)}
.epure-legende output{color:var(--brique-texte)}

/* dessin d'ouverture */
.trace{stroke-dasharray:1;stroke-dashoffset:1;animation:tracer 1.4s var(--ease) .2s forwards}
.sym.trace{fill-opacity:0;animation:tracer 1.4s var(--ease) .2s forwards,remplir .6s ease 1.3s forwards}
.apparait{opacity:0;animation:apparaitre .6s ease forwards}
.d1{animation-delay:1.2s}.d2{animation-delay:1.5s}.d3{animation-delay:1.8s}
@keyframes tracer{to{stroke-dashoffset:0}}
@keyframes remplir{to{fill-opacity:1}}
@keyframes apparaitre{to{opacity:1}}
.hero-txt > *{animation:monter .7s var(--ease) both}
.hero-txt > :nth-child(2){animation-delay:.08s}.hero-txt > :nth-child(3){animation-delay:.16s}.hero-txt > :nth-child(4){animation-delay:.24s}
@keyframes monter{from{transform:translateY(10px)}to{transform:none}}

/* sections */
section{scroll-margin-top:84px}
@media (max-width:900px){section{scroll-margin-top:72px}}
.sec{padding-block:72px}
.sec-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px;margin-bottom:40px}
.sec h2{font-weight:300;font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.02em;line-height:1.15}

.expertises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--encre);border-bottom:1px solid var(--encre)}
.exp{position:relative;z-index:0;padding:32px 32px 36px;display:flex;flex-direction:column;gap:14px;min-width:0;background:var(--fond);transform-origin:50% 50%;transition:transform .35s var(--ease),background-color .3s,box-shadow .3s}
.exp:focus-within{z-index:2;background:var(--zone);box-shadow:0 0 0 1px var(--encre)}
@media (hover:hover){.exp:hover,.exp:focus-within{z-index:2;transform:scale(1.04);background:var(--zone);box-shadow:0 0 0 1px var(--encre)}}
.exp::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--bleu);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.exp:hover::before,.exp:focus-within::before{transform:scaleX(1)}
.exp + .exp{border-left:1px solid var(--filet)}
.exp:first-child{padding-left:16px}
.exp:last-child{padding-right:16px}
.exp-haut{display:flex;justify-content:space-between;align-items:center}
.exp-haut svg{width:40px;height:40px;transition:transform .6s var(--ease)}
.exp:hover .exp-haut svg{transform:rotate(90deg)}
.exp h3{font-weight:500;font-size:21px}
.exp p{color:var(--gris);font-size:15px}
.exp ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
.exp li{display:grid;grid-template-columns:18px 1fr;gap:4px}
.exp li::before{content:"";width:8px;height:8px;margin-top:8px;border:1px solid var(--bleu);border-radius:50%;border-top-color:transparent;transform:rotate(45deg);transition:transform .4s var(--ease)}
.exp:hover li::before{transform:rotate(135deg)}

/* méthode */
.methode{position:relative;overflow:hidden;background-color:var(--sombre);color:#FFFFFF;background-image:linear-gradient(rgba(92,225,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(92,225,230,.07) 1px,transparent 1px);background-size:24px 24px}
.spirale{position:absolute;right:-120px;top:-40px;width:620px;height:auto;pointer-events:none;transform-origin:71% 68%;animation:tourner 90s linear infinite}
@keyframes tourner{to{transform:rotate(360deg)}}
.spirale path,.spirale rect{fill:none}
.spirale rect{stroke:rgba(92,225,230,.12)}
.spirale .sp{stroke:rgba(92,225,230,.45);stroke-dasharray:1;stroke-dashoffset:0}
.methode .wrap{position:relative}
.methode .lbl{color:var(--sombre-texte)}
.methode .lbl b{color:#5CE1E6}
.methode h2{color:#FFFFFF}
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.etape{position:relative;border-top:1px solid rgba(92,225,230,.35);padding-top:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.etape::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#5CE1E6;transform-origin:0 50%}
.etape .num{font-family:var(--f-mono);font-size:13px;color:#5CE1E6}
.etape h3{font-weight:500;font-size:20px;color:#FFFFFF}
.etape p{color:var(--sombre-texte);font-size:15px}
.js .methode:not(.vu) .etape::before{transform:scaleX(0)}
.js .methode:not(.vu) .spirale .sp{stroke-dashoffset:1}
.methode .etape::before{transition:transform .7s var(--ease)}
.methode .etape:nth-child(2)::before{transition-delay:.15s}.methode .etape:nth-child(3)::before{transition-delay:.3s}.methode .etape:nth-child(4)::before{transition-delay:.45s}
.spirale .sp{transition:stroke-dashoffset 2.6s var(--ease) .2s}

/* diagnostic */
.diag{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:start}
.diag-intro{color:var(--gris);font-size:17px;max-width:40em;margin-bottom:28px}
.questions{display:flex;flex-direction:column;border-top:1px solid var(--encre)}
.q{border:0;margin:0;padding:16px 0;border-bottom:1px solid var(--filet);display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 12px;align-items:start;min-width:0}
.q legend{display:contents}
.q .qn{font-family:var(--f-mono);font-size:12px;color:var(--lien);padding-top:3px}
.q .qt{font-size:15px;line-height:1.5}
.choix{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.choix label{position:relative}
.choix input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choix span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--filet);border-radius:2px;font-size:14px;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.choix label:hover span{border-color:var(--encre)}
.choix input:checked + span{background:var(--bleu);border-color:var(--bleu);color:var(--sur-bleu)}
.choix input:focus-visible + span{outline:2px solid var(--lagon);outline-offset:2px}
.resultat{position:sticky;top:96px;border:1px solid var(--encre);padding:24px;display:flex;flex-direction:column;gap:16px;background:var(--fond)}
.jauge{width:200px;max-width:100%;align-self:center}
.jauge svg{display:block;width:100%;height:auto}
.jauge .fondj{stroke:var(--filet)}
.jauge .arc{stroke:var(--bleu);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s var(--ease)}
.jauge .grad{stroke:var(--gris-clair)}
.jauge text{font-family:var(--f-mono);fill:var(--encre)}
.niveau{font-family:var(--f-titre);font-weight:400;font-size:22px;letter-spacing:-.01em;text-align:center}
.conseil{font-size:15px;color:var(--gris);text-align:center}
.compteur{font-family:var(--f-mono);font-size:11px;color:var(--gris);text-align:center;letter-spacing:.06em}
.resultat .actions{justify-content:center}
.raz{background:transparent;border:0;color:var(--lien);font-family:var(--f-mono);font-size:12px;cursor:pointer;text-decoration:underline;align-self:center;padding:6px}

/* à propos */
.apropos{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:center}
.portrait{border:1px solid var(--encre);aspect-ratio:4/5;max-width:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:var(--f-mono);font-size:12px;color:var(--gris)}
.apropos-txt{display:flex;flex-direction:column;gap:20px;min-width:0}
.apropos-txt p{color:var(--gris);font-size:17px;max-width:38em}
.reperes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--encre);border-bottom:1px solid var(--encre)}
.reperes div{padding:12px 12px 12px 0;display:flex;flex-direction:column;gap:2px;min-width:0}
.reperes div + div{padding-left:12px;border-left:1px solid var(--filet)}
.reperes span:first-child{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--gris)}

/* contact */
.contact{background:var(--zone);border-top:1px solid var(--encre);border-bottom:1px solid var(--encre)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding-block:64px;align-items:start}
.contact h2{font-weight:300;font-size:clamp(1.8rem,3.4vw,2.3rem);letter-spacing:-.02em;margin-bottom:12px}
.contact p{color:var(--gris);font-size:17px}
.coord{display:flex;flex-direction:column;border-top:1px solid var(--encre)}
.coord-ligne{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:14px 0;border-bottom:1px solid var(--filet)}
.coord-ligne:last-child{border-bottom-color:var(--encre)}
.coord-ligne .k{font-family:var(--f-mono);font-size:12px;color:var(--lien)}
.coord-ligne .v{font-family:var(--f-mono);font-size:15px;overflow-wrap:anywhere}
.copier{font-family:var(--f-mono);font-size:12px;background:transparent;border:1px solid var(--filet);color:var(--encre);border-radius:2px;min-height:36px;padding:0 12px;cursor:pointer;min-width:96px}
.copier:hover{border-color:var(--encre)}
.contact .actions{margin-top:24px}

/* mentions */
.mentions{padding-block:56px}
.mentions h2{font-weight:300;font-size:1.6rem;letter-spacing:-.01em;margin-bottom:24px}
.mentions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.mentions-grid div{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--encre);padding-top:14px;min-width:0}
.mentions-grid h3{font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.mentions-grid p{font-size:14px;color:var(--gris);line-height:1.6}

footer{border-top:1px solid var(--encre)}
.pied{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 32px;padding-block:24px;font-family:var(--f-mono);font-size:12px;color:var(--gris)}
.pied a{color:var(--gris)}
.pied .marque svg{height:16px;width:52px}
.haut{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;width:44px;height:44px;border:1px solid var(--encre);border-radius:2px;background:var(--fond);color:var(--encre);display:flex;align-items:center;justify-content:center;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease)}
.haut.visible{opacity:1;pointer-events:auto;transform:none}
.haut svg{width:18px;height:18px}

@media (min-width:1600px){
  .hero{gap:96px;padding-block:96px 72px}
  .epure-bloc{max-width:600px}
  .hero h1{font-size:clamp(3.6rem,3.4vw,5rem)}
  .hero p.lead{font-size:20px}
  .sec{padding-block:96px}
  .etapes{gap:48px}
}

/* téléphones et tablettes : menu repliable */
@media (max-width:900px){
  .nav{flex-wrap:nowrap;padding-block:10px}
  .burger{display:inline-flex}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px max(var(--gouttiere),env(safe-area-inset-right,0px)) 20px max(var(--gouttiere),env(safe-area-inset-left,0px));background:var(--fond);border-bottom:1px solid var(--encre);max-height:calc(100dvh - 64px);overflow-y:auto;box-shadow:0 12px 24px -16px rgba(11,31,58,.35)}
  header.ouvert .menu{display:flex}
  .menu a:not(.btn){font-size:17px;padding:14px 0;border-bottom:1px solid var(--filet)}
  .menu a:not(.btn)::after{display:none}
  .menu .btn{margin-top:16px;justify-content:center;min-height:48px;font-size:15px}
  .menu .theme{margin-top:12px;align-self:flex-start;width:48px;height:48px}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-block:48px 40px;gap:36px}
  .epure-bloc{margin:0;max-width:360px}
  .expertises{grid-template-columns:1fr}
  .exp,.exp:first-child,.exp:last-child{padding:28px 0}
  .exp + .exp{border-left:none;border-top:1px solid var(--filet)}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diag{grid-template-columns:1fr;gap:32px}
  .resultat{position:static}
  .apropos{grid-template-columns:1fr;gap:32px}
  .portrait{max-width:320px}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .mentions-grid{grid-template-columns:1fr;gap:20px}
  .spirale{width:420px;right:-160px}
}
@media (max-width:560px){
  .hero{padding-block:32px 28px}
  .hero p.lead{font-size:17px}
  .actions .btn{flex:1 1 100%;justify-content:center}
  .bandeau-cta .actions{width:100%}
  .sec-tete{margin-bottom:28px}
  .contact-grid,.contact-page{padding-block:40px}
  .page-tete .wrap{padding-block:36px 24px}
  .page-tete .lead{font-size:17px}
  .resultat{padding:20px 16px}
  .epure-bloc{max-width:100%}
  .etapes{grid-template-columns:1fr}
  .reperes{grid-template-columns:1fr}
  .reperes div + div{padding-left:0;border-left:none;border-top:1px solid var(--filet)}
  .sec{padding-block:56px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .trace{stroke-dashoffset:0}.sym.trace{fill-opacity:1}.apparait{opacity:1}
  .js .methode:not(.vu) .etape::before{transform:none}
  .js .methode:not(.vu) .spirale .sp{stroke-dashoffset:0}
}

/* ---------- multi-pages ---------- */
.vue{display:block}
.vue[hidden]{display:none!important}
.page-tete{border-bottom:1px solid var(--encre);position:relative;overflow:hidden}
.page-tete .wrap{padding-block:56px 28px;display:flex;flex-direction:column;gap:18px;position:relative}
.page-tete h1{font-weight:300;font-size:clamp(2.2rem,4.6vw,3.3rem);letter-spacing:-.03em;line-height:1.08}
.page-tete .lead{font-size:18px;color:var(--gris);max-width:40em}
.fil{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--gris)}
.fil a{color:var(--gris);text-decoration:none}
.fil a:hover{color:var(--bleu)}
.page-tete .motif{position:absolute;right:-60px;top:-60px;width:360px;height:360px;pointer-events:none;opacity:.9}
.page-tete .motif circle,.page-tete .motif path{fill:none}
.page-tete .motif .g1{stroke:var(--filet)}
.page-tete .motif .g2{stroke:var(--gris-clair)}
.page-tete .motif .g3{stroke:var(--lagon)}
.page-tete .motif .rot{transform-origin:180px 180px;animation:tourner 120s linear infinite}
.menu a.courant{color:var(--bleu)}
.menu a.courant::after{transform:scaleX(1)}

/* services */
.service{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:48px;padding-block:48px;border-bottom:1px solid var(--filet)}
.service:last-child{border-bottom:0}
.service-titre{display:flex;flex-direction:column;gap:14px;min-width:0}
.service-titre svg{width:56px;height:56px}
.service-titre h2{font-weight:300;font-size:2rem;letter-spacing:-.02em}
.service-titre p{color:var(--gris);font-size:16px}
.service-corps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--encre);min-width:0}
.service-corps > div{padding:16px 20px 8px 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.service-corps > div + div{padding-left:20px;border-left:1px solid var(--filet)}
.service-corps h3{font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.service-corps ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px}
.service-corps li{display:grid;grid-template-columns:16px 1fr;gap:6px}
.service-corps li::before{content:"";width:7px;height:7px;margin-top:8px;border:1px solid var(--bleu);border-radius:50%;border-top-color:transparent;transform:rotate(45deg)}

.tableau-wrap{overflow-x:auto;border-top:1px solid var(--encre);border-bottom:1px solid var(--encre)}
table.formats{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.formats th{text-align:left;font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);padding:12px 16px 12px 0;border-bottom:1px solid var(--encre)}
.formats td{padding:16px 16px 16px 0;border-bottom:1px solid var(--filet);vertical-align:top}
.formats tr:last-child td{border-bottom:0}
.formats td:first-child{font-family:var(--f-titre);font-weight:500;font-size:17px;width:22%}
.formats .mono{font-size:13px;color:var(--gris);white-space:nowrap}
.formats tbody tr{transition:background-color .2s}
.formats tbody tr:hover{background:var(--zone)}

.avertissement{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--gris);border:1px dashed var(--gris-clair);padding:12px 16px;margin-bottom:28px;max-width:52em}
.avertissement span:first-child{font-family:var(--f-mono);font-size:11px;color:var(--brique-texte);letter-spacing:.08em;padding-top:2px;white-space:nowrap}
.cas-liste{display:flex;flex-direction:column;gap:28px}
.cas{border:1px solid var(--encre);display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);transition:transform .35s var(--ease),box-shadow .3s}
@media (hover:hover){.cas:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--encre)}}
.cas-cote{background:var(--zone);padding:24px;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--encre);min-width:0}
.cas-cote h3{font-weight:400;font-size:22px;letter-spacing:-.01em;line-height:1.25}
.cas-fiche{display:flex;flex-direction:column;border-top:1px solid var(--encre)}
.cas-fiche div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px solid var(--filet);font-size:14px}
.cas-fiche span:first-child{font-family:var(--f-mono);font-size:11px;color:var(--gris);padding-top:2px}
.cas-corps{padding:24px;display:flex;flex-direction:column;gap:18px;min-width:0}
.cas-bloc{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px}
.cas-bloc > span{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);padding-top:3px}
.cas-bloc p,.cas-bloc li{font-size:15px}
.cas-bloc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.phases{display:flex;flex-direction:column;gap:6px}
.phase{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 64px;gap:12px;align-items:center;font-size:14px}
.phase > b{font-weight:400;font-size:13px;color:var(--encre)}
.phase-barre{height:14px!important}
@media (max-width:560px){.phase{grid-template-columns:minmax(0,1fr) 56px}.phase > b{grid-column:1 / -1}}
.phase-barre{position:relative;height:22px;border:1px solid var(--filet);background:var(--fond)}
.phase-barre i{position:absolute;top:-1px;bottom:-1px;left:var(--d);width:var(--l);background:var(--bleu);opacity:.9;transform-origin:0 50%;animation:barre 1s var(--ease) both}
@keyframes barre{from{transform:scaleX(0)}}
.phase-barre b{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-weight:400;font-size:12px;color:var(--encre);white-space:nowrap;z-index:1}
.phase-barre i + b{color:var(--encre)}
.phase .mono{font-size:12px;color:var(--gris);text-align:right}
.indic{display:flex;flex-wrap:wrap;gap:8px}
.indic span{font-family:var(--f-mono);font-size:12px;border:1px solid var(--filet);padding:4px 10px;border-radius:2px}

.bandeau-cta{border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);background:var(--zone)}
.bandeau-cta .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;padding-block:44px}
.bandeau-cta h2{font-weight:300;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.02em}
.bandeau-cta p{color:var(--gris);margin-top:6px}
.lien-fleche{font-family:var(--f-mono);font-size:13px;text-decoration:none;color:var(--bleu);display:inline-flex;gap:6px;margin-top:6px}
.lien-fleche:hover .fl{transform:translateX(4px)}
.lien-fleche .fl{transition:transform .25s var(--ease)}

/* à propos */
.parcours{display:flex;flex-direction:column;border-top:1px solid var(--encre)}
.parcours div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--filet);font-size:15px}
.parcours span:first-child{font-family:var(--f-mono);font-size:12px;color:var(--lien);padding-top:2px}
.valeurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--encre)}
.valeur{padding:22px 22px 24px 0;border-bottom:1px solid var(--filet);display:flex;flex-direction:column;gap:8px;min-width:0;transition:background-color .25s}
.valeur:nth-child(3n+2),.valeur:nth-child(3n){padding-left:22px;border-left:1px solid var(--filet)}
.valeur:hover{background:var(--zone)}
.valeur .idx{font-family:var(--f-mono);font-size:11px;color:var(--lien)}
.valeur:last-child .idx{color:var(--brique-texte)}
.valeur h3{font-weight:400;font-size:22px;letter-spacing:-.01em}
.valeur p{font-size:15px;color:var(--gris)}
.engagements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.engagement{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:18px 0;border-top:1px solid var(--filet)}
.engagement svg{width:32px;height:32px}
.engagement h3{font-weight:500;font-size:17px;margin-bottom:4px}
.engagement p{font-size:15px;color:var(--gris)}

/* contact */
.contact-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;padding-block:56px;align-items:start}
.form{display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--encre);padding-top:20px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ label{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--gris)}
.champ input,.champ select,.champ textarea{font:inherit;font-size:16px;color:var(--encre);background:var(--fond);border:1px solid var(--filet);border-radius:2px;padding:12px 14px;min-height:48px;width:100%}
.champ textarea{min-height:140px;resize:vertical}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--gris-clair)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 1px var(--bleu)}
.champ .err{font-size:13px;color:var(--brique-texte);min-height:0}
.champ.ko input,.champ.ko textarea{border-color:var(--brique-texte)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-statut{font-size:14px;color:var(--gris);border-left:0;padding:12px 14px;background:var(--zone)}
.etapes-contact{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--encre)}
.etapes-contact li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:12px 0;border-bottom:1px solid var(--filet);font-size:15px}
.etapes-contact span{font-family:var(--f-mono);font-size:12px;color:var(--lien);padding-top:2px}

/* pied enrichi */
.pied-nav{display:flex;flex-wrap:wrap;gap:6px 20px}

@media (max-width:900px){
  .service{grid-template-columns:1fr;gap:24px}
  .service-corps{grid-template-columns:1fr}
  .service-corps > div + div{padding-left:0;border-left:0;border-top:1px solid var(--filet)}
  .cas{grid-template-columns:1fr}
  .cas-cote{border-right:0;border-bottom:1px solid var(--encre)}
  .valeurs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .valeur,.valeur:nth-child(3n+2),.valeur:nth-child(3n){padding:20px 16px 20px 0;border-left:0}
  .valeur:nth-child(2n){padding-left:16px;border-left:1px solid var(--filet)}
  .engagements{grid-template-columns:1fr}
  .contact-page{grid-template-columns:1fr;gap:36px}
  .page-tete .motif{width:240px;height:240px;right:-80px}
}
@media (max-width:560px){
  .cas-bloc{grid-template-columns:1fr;gap:6px}
  .valeurs{grid-template-columns:1fr}
  .valeur:nth-child(2n){padding-left:0;border-left:0}
  .duo{grid-template-columns:1fr}
  .parcours div{grid-template-columns:1fr;gap:2px}
}

/* curseur de la règle */
.regle-bloc{position:relative;padding-top:18px;overflow:hidden}
.curseur{position:absolute;left:0;top:0;height:30px;width:0;transform:translateX(var(--x,0px));transition:transform .12s linear;pointer-events:none}
.curseur i{position:absolute;left:-4px;top:13px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--brique)}
.curseur i::after{content:"";position:absolute;left:-.5px;top:0;width:1px;height:12px;background:var(--brique)}
.curseur b{position:absolute;left:0;top:0;transform:translateX(calc(-50% + var(--dx,0px)));font-family:var(--f-mono);font-weight:400;font-size:10px;line-height:12px;color:var(--brique-texte);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.curseur{transition:none}}

/* mention d'information RGPD sous le formulaire */
.mention-rgpd{font-size:13px;line-height:1.55;color:var(--gris)}
.coord-ligne a.v{color:var(--encre);text-decoration:none}
.coord-ligne a.v:hover{color:var(--bleu);text-decoration:underline}

/* prestations et tarifs */
.offres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--encre);border-bottom:1px solid var(--encre)}
.offre{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 24px 28px;min-width:0;transition:background-color .25s}
.offre + .offre{border-left:1px solid var(--filet)}
.offre:first-child{padding-left:0}
.offre:last-child{padding-right:0}
.offre::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--bleu);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.offre-phare::before{transform:scaleX(1);background:var(--brique)}
@media (hover:hover){.offre:hover::before{transform:scaleX(1)}}
.offre h3{font-weight:500;font-size:21px;line-height:1.25}
.prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding-bottom:12px;border-bottom:1px solid var(--filet)}
.prix .mono{font-size:24px;color:var(--bleu);letter-spacing:-.01em}
.offre-phare .prix .mono{color:var(--brique-texte)}
.prix small{font-family:var(--f-mono);font-size:12px;color:var(--gris)}
.offre-desc{color:var(--gris);font-size:15px}
.offre ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px;flex:1}
.offre li{display:grid;grid-template-columns:16px 1fr;gap:6px}
.offre li::before{content:"";width:7px;height:7px;margin-top:8px;border:1px solid var(--bleu);border-radius:50%;border-top-color:transparent;transform:rotate(45deg)}
.offres-note{margin-top:16px;font-size:13px;color:var(--gris);max-width:60em}
@media (max-width:1200px){
  .offres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offre,.offre:first-child,.offre:last-child{padding:28px 24px}
  .offre:nth-child(odd){padding-left:0;border-left:0}
  .offre:nth-child(even){padding-right:0}
  .offre:nth-child(n+3){border-top:1px solid var(--filet)}
}
@media (max-width:640px){
  .offres{grid-template-columns:1fr}
  .offre,.offre:first-child,.offre:last-child,.offre:nth-child(odd),.offre:nth-child(even){padding:24px 0;border-left:0}
  .offre + .offre{border-top:1px solid var(--filet)}
}

/* valeurs : titres sur deux lignes et dernière carte étirée pour combler la grille */
.valeur h3{line-height:1.25}
@media (min-width:901px){.valeur:last-child:nth-child(3n+2){grid-column:span 2}}
@media (min-width:561px) and (max-width:900px){.valeur:last-child:nth-child(odd){grid-column:span 2;border-left:0;padding-left:0}}

/* dépliants (téléphone) : invisibles sur ordinateur, où le contenu reste ouvert */
.repli > summary{display:none}
.piege{display:none!important}
#envoyer:disabled{opacity:.6;cursor:progress}
@media (max-width:760px){
  /* le cercle de mesure et la réglette sont retirés sur téléphone */
  .epure-bloc,.regle-bloc{display:none}
  .hero{padding-block:32px 40px}

  .repli > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 0;cursor:pointer;list-style:none;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:var(--bleu);border-top:1px solid var(--filet)}
  .repli > summary::-webkit-details-marker{display:none}
  .repli-signe{position:relative;flex:none;width:28px;height:28px;border:1px solid var(--filet);border-radius:2px}
  .repli-signe::before,.repli-signe::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;transition:transform .3s var(--ease)}
  .repli-signe::after{transform:rotate(90deg)}
  .repli[open] > summary .repli-signe::after{transform:rotate(0deg)}
  .repli[open] > summary{color:var(--encre)}
  .repli-diag > summary{min-height:56px;padding:14px 16px;border:1px solid var(--bleu);background:var(--zone);font-size:14px;margin-bottom:8px}
  .repli-diag[open] > summary{margin-bottom:24px}
  .repli-cas > summary{padding-inline:20px}
  .service .repli > summary{margin-top:4px}
  .offre ul{margin-bottom:8px}
}

/* détail des prestations : quoi, comment, pour qui */
.offre:focus{outline:none}
.offre:focus-visible{outline:2px solid var(--lagon);outline-offset:4px}
.offre-indice{display:none}
.offre-detail{display:flex;flex-direction:column;gap:16px;padding-top:4px}
.offre-detail-titre{display:none}
.offre-detail-bloc{display:flex;flex-direction:column;gap:6px}
.offre-detail-bloc h4{margin:0;font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lien)}
.offre-detail-bloc p{font-size:15px;color:var(--gris)}
.offre .offre-detail ul{flex:none}
.offre-detail .lien-fleche{display:none}

/* ordinateur avec souris : le détail s'ouvre en zoom au survol (ou au clavier) */
@media (hover:hover) and (min-width:761px){
  .offre{cursor:default}
  .offre-indice{display:block;margin-top:auto;font-family:var(--f-mono);font-size:12px;color:var(--gris)}
  .offre-indice::after{content:" →"}
  .offre-lien{display:none}
  .offre .repli{position:static}
  .offre-detail{position:absolute;z-index:6;top:-16px;left:-16px;right:-16px;min-height:calc(100% + 32px);padding:24px;gap:14px;background:var(--fond);border:1px solid var(--encre);box-shadow:0 28px 56px -28px rgba(11,31,58,.55);opacity:0;visibility:hidden;transform:scale(.94);transform-origin:50% 0;pointer-events:none;transition:opacity .25s ease,transform .35s var(--ease),visibility 0s linear .35s}
  .offre-phare .offre-detail{border-top:2px solid var(--brique)}
  .offre:hover .offre-detail,.offre:focus-within .offre-detail{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .25s ease,transform .35s var(--ease),visibility 0s}
  .offre-detail-titre{display:block;font-family:var(--f-titre);font-weight:500;font-size:19px;line-height:1.25;color:var(--encre);padding-bottom:10px;border-bottom:1px solid var(--filet)}
  .offre-detail .lien-fleche{display:inline-flex;margin-top:auto}
  .offre-detail-bloc p,.offre-detail-bloc li{font-size:14px}
}
@media (prefers-reduced-motion: reduce){.offre-detail{transform:none!important}}

/* moins de vide entre les prestations et les business cases */
#prestations{padding-bottom:16px}
#cas{padding-top:40px}
@media (max-width:560px){#prestations{padding-bottom:8px}#cas{padding-top:32px}}

/* référentiels, intégrés dans le cadre réglementaire */
.ref-intro{color:var(--gris);font-size:17px;max-width:46em;margin:-16px 0 28px}
.cadre-regl{border:1px solid var(--brique)}
.cadre-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;padding:16px 24px;border-bottom:1px solid var(--brique);background:var(--zone)}
.cadre-tete strong{font-family:var(--f-titre);font-weight:500;font-size:20px;color:var(--brique-texte)}
.cadre-txt{flex:1 1 360px;font-size:14px;color:var(--gris)}
.ref-dom{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lien)}
.cadre-tete .ref-dom{color:var(--brique-texte)}
.refs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ref{display:flex;flex-direction:column;gap:8px;padding:22px 24px;min-width:0;border-right:1px solid var(--filet);border-bottom:1px solid var(--filet);transition:background-color .25s}
.ref:first-child{background:var(--zone)}
.ref:nth-child(4n){border-right:0}
.ref:nth-child(n+5){border-bottom:0}
.ref h3{font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.ref p{font-size:14px;color:var(--gris)}
@media (hover:hover){.ref:hover{background:var(--zone)}}
@media (max-width:900px){
  .refs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref,.ref:nth-child(n){border-right:1px solid var(--filet);border-bottom:1px solid var(--filet)}
  .ref:nth-child(even){border-right:0}
  .ref:last-child,.ref:nth-last-child(2){border-bottom:0}
}
@media (max-width:560px){
  .refs{grid-template-columns:1fr}
  .ref,.ref:nth-child(n){border-right:0;border-bottom:1px solid var(--filet);padding:18px 16px}
  .ref:last-child{border-bottom:0}
  .cadre-tete{padding:14px 16px}
  .ref-intro{margin-top:-8px;font-size:16px}
}

/* diagnostic express en cartes : une question à la fois */
.diag-progres{display:none}
.js .diag-progres{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--gris)}
.diag-barre{flex:1;height:3px;background:var(--filet);position:relative;overflow:hidden}
.diag-barre i{position:absolute;inset:0 auto 0 0;width:0;background:var(--bleu);transition:width .35s var(--ease)}
.questions.en-cartes{border:1px solid var(--encre);background:var(--fond);padding:28px 28px 24px;min-height:260px;display:flex;flex-direction:column}
.questions.en-cartes .q{display:none;border:0;padding:0;grid-template-columns:44px minmax(0,1fr)}
.questions.en-cartes .q.actif{display:grid;animation:carte .35s var(--ease) both}
.questions.en-cartes .q:focus{outline:none}
.questions.en-cartes .qn{font-size:14px}
.questions.en-cartes .qt{font-family:var(--f-titre);font-size:22px;line-height:1.3;letter-spacing:-.01em}
.questions.en-cartes .choix{margin-top:20px;gap:10px}
.questions.en-cartes .choix span{min-height:48px;padding:0 20px;font-size:15px}
@keyframes carte{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.diag-nav{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:28px}
.diag-nav[hidden]{display:none}
.diag-nav .btn:disabled{opacity:.4;cursor:not-allowed}
.diag-cas{border-top:1px solid var(--filet);padding-top:14px;display:flex;flex-direction:column;gap:8px;text-align:left}
.diag-cas ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.diag-cas li a{display:block;padding:10px 12px;border:1px solid var(--filet);border-radius:2px;font-size:14px;color:var(--encre);text-decoration:none}
.diag-cas li a::after{content:" →";color:var(--bleu)}
.diag-cas li a:hover{border-color:var(--bleu);color:var(--bleu)}
.diag-presta{font-size:14px;color:var(--gris)}
.cas{scroll-margin-top:90px}
@media (max-width:560px){
  .questions.en-cartes{padding:20px 16px 18px;min-height:0}
  .questions.en-cartes .q{grid-template-columns:1fr;gap:6px}
  .questions.en-cartes .choix{grid-column:1}
  .questions.en-cartes .qt{font-size:19px}
  .questions.en-cartes .choix label{flex:1 1 auto}
  .questions.en-cartes .choix span{justify-content:center;width:100%}
  .diag-nav .btn{flex:1;justify-content:center;padding:0 12px}
}
@media (prefers-reduced-motion: reduce){.questions.en-cartes .q.actif{animation:none}}
/* un élément masqué reste masqué, quelle que soit sa mise en page */
.resultat [hidden],.diag-cas[hidden]{display:none!important}

/* note des tarifs sur toute la largeur */
.offres-note{max-width:none}


/* encart « Normes et règlements utilisés » (accueil) */
.normes-encart{padding-bottom:72px}
.normes-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;padding-bottom:16px;border-bottom:1px solid var(--encre)}
.normes-tete h2{font-weight:300;font-size:clamp(1.4rem,2.4vw,1.8rem);letter-spacing:-.02em}
.normes-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin:0;padding:0;list-style:none;border-bottom:1px solid var(--filet)}
.normes-liste li{display:flex;flex-direction:column;gap:2px;padding:14px 16px 14px 0;border-bottom:1px solid var(--filet);margin-bottom:-1px;min-width:0}
.normes-liste b{font-family:var(--f-titre);font-weight:500;font-size:17px;color:var(--bleu)}
.normes-liste span{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--gris)}
.normes-regl{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:14px}
.normes-regl .lbl{color:var(--brique-texte)}
.normes-regl b{font-family:var(--f-titre);font-weight:500;font-size:17px;color:var(--brique-texte);padding:2px 12px;border:1px solid var(--brique)}
@media (max-width:560px){.normes-liste{grid-template-columns:repeat(2,minmax(0,1fr))}.normes-encart{padding-bottom:56px}}

/* business cases compacts : le détail s'ouvre au survol (ordinateur avec souris) */
.cas-indice{display:none}
@media (hover:hover) and (min-width:761px){
  .cas{grid-template-columns:1fr;cursor:default}
  .cas:focus{outline:none}
  .cas:focus-visible{outline:2px solid var(--lagon);outline-offset:4px}
  .cas-cote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:6px 32px;align-items:center;border-right:0;border-bottom:0;padding:20px 24px}
  .cas-cote > .lbl,.cas-cote > h3,.cas-indice{grid-column:1}
  .cas-indice{display:block;font-family:var(--f-mono);font-size:11px;color:var(--gris);transition:opacity .2s}
  .cas-indice::after{content:" ↓"}
  .cas-fiche{grid-column:2;grid-row:1 / span 3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:0}
  .cas-fiche div{grid-template-columns:1fr;gap:2px;padding:4px 0 4px 14px;border-bottom:0;border-left:1px solid var(--filet)}
  .repli-cas .cas-corps{max-height:0;overflow:hidden;opacity:0;padding-block:0;transition:max-height .45s var(--ease),opacity .25s ease,padding .3s var(--ease)}
  .cas:hover .cas-corps,.cas:focus-within .cas-corps,.cas:target .cas-corps{max-height:1400px;opacity:1;padding-block:24px;border-top:1px solid var(--encre);transition-delay:.08s}
  .cas:hover .cas-indice,.cas:focus-within .cas-indice,.cas:target .cas-indice{opacity:0}
  .cas-liste{gap:16px}
  .cas:hover{transform:none}
}
@media (hover:hover) and (min-width:761px) and (max-width:1100px){
  .cas-cote{grid-template-columns:1fr}
  .cas-fiche{grid-column:1;grid-row:auto}
}

/* ---------- espacements resserrés et harmonisés sur toutes les pages ---------- */
:root{--esp:clamp(36px,4.5vw,60px)}
.sec{padding-block:var(--esp)}
.wrap.sec + .wrap.sec,.wrap.sec + .normes-encart{padding-top:8px}
.sec-tete{margin-bottom:24px}
.hero{padding-block:clamp(32px,5vw,64px) clamp(24px,3vw,40px)}
.page-tete .wrap{padding-block:clamp(28px,4vw,48px) clamp(18px,2.5vw,28px);gap:14px}
.bandeau-cta .wrap{padding-block:clamp(24px,3vw,36px)}
.mentions{padding-block:var(--esp)}
.contact-page{padding-block:var(--esp)}
.contact-grid{padding-block:var(--esp)}
.normes-encart{padding-bottom:var(--esp)}
.exp{padding-block:26px 28px}
.etapes{gap:24px}
#prestations{padding-bottom:12px}
#cas{padding-top:28px}
@media (min-width:1600px){.hero{padding-block:72px 48px}.sec{padding-block:72px}}
@media (max-width:900px){
  .apropos{gap:24px}
  .portrait{max-width:200px;aspect-ratio:1}
  .diag{gap:24px}
  .contact-page{gap:28px}
}
@media (max-width:560px){
  .sec{padding-block:36px}
  .wrap.sec + .wrap.sec{padding-top:4px}
  .sec-tete{margin-bottom:18px;gap:6px}
  .exp,.exp:first-child,.exp:last-child{padding:22px 0}
  .etape{padding-top:14px}
  .valeur,.valeur:nth-child(n){padding:16px 0}
  .engagement{padding:14px 0}
  .offre,.offre:first-child,.offre:last-child,.offre:nth-child(odd),.offre:nth-child(even){padding:20px 0}
  .cas-liste{gap:16px}
  .cas-cote,.cas-corps{padding:18px 16px}
  .mentions-grid{gap:16px}
  .bandeau-cta .wrap{gap:16px}
}

/* ---------- animations d'apparition (discrètes) ---------- */
.anim:not(.visible){opacity:0}
.anim.visible{animation:apparaitre-doux .7s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes apparaitre-doux{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion: reduce){.anim:not(.visible){opacity:1}.anim.visible{animation:none}}
@media print{.anim:not(.visible){opacity:1}}

/* zones tactiles d'au moins 44 px sur téléphone */
.nav .marque{min-height:44px}
@media (pointer:coarse){
  .copier{min-height:44px}
  .coord-ligne a.v{display:inline-flex;align-items:center;min-height:44px}
}


/* ---------- revue DA v2 : couleurs, relief, brique au compte-gouttes ---------- */
/* logo : version Bleu OXIS sur fond clair, version blanche sur fond sombre */
.marque{color:var(--logo)}
/* aucune ombre portée : les volumes se font au filet */
.menu{box-shadow:none!important}
@media (hover:hover) and (min-width:761px){.offre-detail{box-shadow:none}}
/* la brique reste un seul détail par page :
   accueil = l'aiguille de l'épure ; Services = l'offre phare ; À propos = le cadre réglementaire */
.curseur i{border-top-color:var(--lien)}
.curseur i::after{background:var(--lien)}
.curseur b{color:var(--lien)}
.normes-regl .lbl{color:var(--lien)}
.normes-regl b{color:var(--bleu);border-color:var(--bleu)}
.valeur:last-child .idx{color:var(--lien)}
/* erreurs de formulaire : couleur fonctionnelle « écart » de la DA */
.champ .err{color:#B5532F}
.champ.ko input,.champ.ko textarea{border-color:#B5532F}
:root[data-theme="dark"] .champ .err{color:#EE8A68}
:root[data-theme="dark"] .champ.ko input,:root[data-theme="dark"] .champ.ko textarea{border-color:#EE8A68}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .champ .err{color:#EE8A68}:root:not([data-theme="light"]) .champ.ko input,:root:not([data-theme="light"]) .champ.ko textarea{border-color:#EE8A68}}
/* section Méthode : Encre et trame Lagon à 8 % (DA), plus profonde que le fond en mode sombre */
.methode{background-image:linear-gradient(rgba(92,225,230,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(92,225,230,.08) 1px,transparent 1px);background-size:24px 24px}
/* pied de page : ligne légale DA en IBM Plex Mono 11 px */
.pied{font-size:11px}
.pied-legal{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:12px;border-top:1px solid var(--filet);line-height:1.6}
.pied-legal b{color:var(--encre);font-weight:600}
.pied-legal a{color:var(--lien)}
/* mode sombre : le Lagon reste un accent, pas une couleur de texte courante */
:root[data-theme="dark"] .normes-liste b{color:var(--encre)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .normes-liste b{color:var(--encre)}}

.hero-zone{padding-bottom:clamp(20px,3vw,36px)}

/* diagnostic express : le cadran et la colonne des questions ont exactement la même hauteur */
@media (min-width:901px){
  .diag{align-items:stretch}
  .diag > div:first-child{display:flex;flex-direction:column}
  .diag > div:first-child .questions{flex:1}
  .resultat{position:static;justify-content:center}
}

/* remplacements des anciens styles écrits dans le HTML */
.sprite{position:absolute}
.jauge-lib{fill:var(--gris)}

/* portrait du fondateur (page À propos) : photo ronde, filet fin, sans ombre */
.portrait-photo{display:block;width:100%;max-width:340px;height:auto;aspect-ratio:1;border-radius:50%;border:1px solid var(--filet)}
@media (max-width:900px){.portrait-photo{max-width:200px}}