/* ==========================================================================
   Feuille commune (accueil + pages services) · DA « Plein jour » · 16/09/2026
   Blanc et gris très clair, encre froide, un seul accent : bleu franc #2447F5.
   Inter Tight (titres) · Inter (texte), auto-hébergées. Aucune police à chasse fixe.
   Ombres en couches douces (jamais d'ombre décalée), mouvements courts et calmes,
   tout est coupé sous prefers-reduced-motion.
   ========================================================================== */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/inter-tight-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}

:root{
  --blanc:#FFFFFF;--gris:#F5F7FA;--gris-2:#ECEFF4;--gris-3:#E2E6ED;
  --encre:#0B0D12;--texte:#3E4553;--doux:#5F6675;
  --bleu:#2447F5;--bleu-fonce:#1A36D6;--bleu-nuit:#14259E;--bleu-pale:#EEF2FF;--bleu-ligne:rgba(36,71,245,.24);
  --ok:#0F7A4A;--ok-pale:#E8F5EE;--ambre:#9A5B00;--rouge:#C0341D;--wa:#1F7A4D;
  --ligne:rgba(11,13,18,.08);--ligne-2:rgba(11,13,18,.14);
  --o-1:0 1px 2px rgba(11,13,18,.05),0 1px 1px rgba(11,13,18,.02);
  --o-2:0 1px 2px rgba(11,13,18,.04),0 6px 16px -4px rgba(11,13,18,.08);
  --o-3:0 2px 4px rgba(11,13,18,.04),0 16px 36px -10px rgba(11,13,18,.16);
  --o-4:0 4px 10px rgba(11,13,18,.05),0 30px 60px -18px rgba(15,25,70,.28);
  --o-bleu:0 1px 2px rgba(20,37,158,.30),0 8px 22px -8px rgba(36,71,245,.60);
  --ff-d:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1240px;--pad:clamp(1.1rem,4vw,3.5rem);--sec:clamp(4rem,8vw,6.5rem);
  --r:16px;--r-btn:11px;--ease:cubic-bezier(.2,.7,.2,1);--vite:.18s;--moyen:.32s;
  --sortie:cubic-bezier(.16,1,.3,1);--glisse:cubic-bezier(.65,0,.35,1)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px;interpolate-size:allow-keywords}
body{font:400 clamp(1rem,1.02vw,1.0625rem)/1.6 var(--ff);background:var(--blanc);color:var(--encre);overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01"}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
b,strong{font-weight:600}
::selection{background:var(--bleu);color:#fff}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:6px}
.bleu :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-999px;top:0;z-index:300;background:var(--encre);color:#fff;padding:.6em 1em;font-weight:600}
.skip:focus{left:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
.clair,.blanc{background:var(--blanc);color:var(--encre)}
.gris{background:var(--gris);color:var(--encre);box-shadow:inset 0 1px 0 var(--ligne),inset 0 -1px 0 var(--ligne)}
.bleu{position:relative;color:#fff;isolation:isolate;
  background:radial-gradient(70% 90% at 0% 0%,rgba(255,255,255,.16),transparent 60%),radial-gradient(60% 80% at 100% 100%,rgba(10,20,110,.35),transparent 65%),linear-gradient(180deg,#2A4DFF,#1F3FE6)}

h1,h2,h3,h4{font-family:var(--ff-d);color:var(--encre);text-wrap:balance}
h1{font-size:clamp(2.35rem,4.5vw,3.8rem);font-weight:700;line-height:1.03;letter-spacing:-.034em}
h2{font-size:clamp(1.85rem,3.4vw,2.85rem);font-weight:700;line-height:1.08;letter-spacing:-.028em;max-width:22ch}
h3{font-size:clamp(1.1rem,1.45vw,1.28rem);font-weight:650;line-height:1.2;letter-spacing:-.018em}
h1 em,h2 em{font-style:normal;color:var(--bleu)}
.bleu h2,.bleu h3{color:#fff}
.bleu h2 em{color:#C9D3FF}
p{max-width:66ch;text-wrap:pretty}
.lead{font-size:clamp(1.05rem,1.3vw,1.2rem);color:var(--texte);max-width:58ch;line-height:1.55}
.bleu .lead{color:rgba(255,255,255,.86)}
.kicker{display:inline-flex;align-items:center;gap:.55em;font:600 .78rem/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--bleu);margin-bottom:.9rem}
.bleu .kicker{color:rgba(255,255,255,.8)}
.tete{margin-bottom:clamp(2rem,4vw,3.2rem);display:grid;gap:.9rem}
.tete .kicker{margin-bottom:0}
.tete.centre{justify-items:center;text-align:center}
.tete.centre h2{margin-inline:auto}
.note{font-size:.86rem;color:var(--doux);line-height:1.55;max-width:80ch}
.ico{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ----------------------------------------------------------------- boutons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 .97rem/1.15 var(--ff);letter-spacing:-.005em;
  padding:.9em 1.35em;min-height:48px;border-radius:var(--r-btn);border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--vite) var(--ease),box-shadow var(--moyen) var(--ease),background-color var(--vite),border-color var(--vite),color var(--vite)}
.btn .ico{transition:transform var(--moyen) var(--ease)}
.btn:hover .ico:last-child{transform:translateX(3px)}
.btn-1{background:linear-gradient(180deg,#3558FF,var(--bleu));color:#fff;border-color:var(--bleu-fonce);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--o-bleu)}
.btn-1:hover{background:linear-gradient(180deg,#2E51FF,var(--bleu-fonce));transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(20,37,158,.3),0 14px 28px -10px rgba(36,71,245,.7)}
.btn-1:active{transform:translateY(0);box-shadow:inset 0 1px 2px rgba(0,0,0,.2),0 1px 2px rgba(20,37,158,.3)}
.btn-2{background:var(--blanc);color:var(--encre);border-color:var(--ligne-2);box-shadow:var(--o-1)}
.btn-2:hover{border-color:rgba(11,13,18,.26);box-shadow:var(--o-2);transform:translateY(-1px)}
.btn-2:active{transform:none;box-shadow:var(--o-1)}
.btn-wa{background:var(--wa);border-color:#186640;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.12)}
.btn-wa:hover{background:#186640;transform:translateY(-1px)}
.btn-terra{background:var(--bleu);color:#fff}
.btn-s{font-size:.88rem;padding:.65em 1em;min-height:42px;border-radius:10px}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.lien{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--bleu);text-decoration:none}
.lien:hover{text-decoration:underline;text-underline-offset:3px}

/* ----------------------------------------------------------------- navigation */
/* Le fond flouté vit sur un pseudo-élément : il apparaît en fondu d'opacité (composé par le GPU)
   au lieu de basculer d'un coup. La barre se rétracte au défilement vers le bas (transform). */
#haut{position:sticky;top:0;z-index:100;transition:transform .5s var(--sortie)}
#haut::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(1.8) blur(14px);backdrop-filter:saturate(1.8) blur(14px);
  box-shadow:0 1px 0 var(--ligne),0 6px 20px -12px rgba(11,13,18,.12);opacity:0;transition:opacity .4s var(--ease)}
#haut.fond::before{opacity:1}
#haut.cache{transform:translateY(-100%);transition:transform .34s var(--glisse)}
#haut.cache:has(:focus-visible){transform:none}
.nav{max-width:var(--maxw);margin-inline:auto;padding:.7rem var(--pad);display:flex;align-items:center;gap:1.2rem;min-height:68px}
.marque{display:inline-block;text-decoration:none;font:700 1.62rem/1 var(--ff-d);letter-spacing:-.045em;margin-right:auto;color:var(--encre);white-space:nowrap;padding-bottom:.08em}
.marque svg{display:inline-block;height:.82em;width:auto;vertical-align:-.12em;margin-right:.16em}
.nav-liens{display:flex;gap:.3rem;align-items:center}
.nav-liens a{text-decoration:none;font-size:.94rem;font-weight:500;color:var(--texte);padding:.5rem .75rem;border-radius:8px;transition:color var(--vite),background-color var(--vite)}
.nav-liens a:hover,.nav-liens a[aria-current]{color:var(--encre);background:var(--gris-2)}
.nav .btn{padding:.62em 1.05em;min-height:42px;font-size:.92rem}
.nav-liens .seul-m{display:none}
.nav-tel{display:none}
.burger{display:none;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--encre);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--bleu);transform-origin:left;transform:scaleX(0)}
@media (max-width:1020px){
  .burger{display:inline-flex}
  .nav-liens{position:absolute;inset:100% 0 auto 0;max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:0;background:var(--blanc);padding:.4rem var(--pad) 1.2rem;
    box-shadow:0 1px 0 var(--ligne),0 24px 40px -16px rgba(11,13,18,.18);transform:translateY(-6px);opacity:0;visibility:hidden;transition:opacity .22s,transform .22s var(--ease),visibility .22s}
  .nav-liens.ouvert{opacity:1;transform:none;visibility:visible}
  .nav-liens a{padding:.95rem .2rem;border-radius:0;border-bottom:1px solid var(--ligne);font-size:1.04rem;color:var(--encre)}
  .nav-liens a:hover{background:none}
  .nav-liens .seul-m{display:block;font-weight:600;color:var(--bleu);border-bottom:0}
  .nav>.btn{display:none}
}
@media (max-width:1020px) and (min-width:520px){.nav>.btn{display:inline-flex}}

/* ----------------------------------------------------------------- fil d'Ariane */
.ariane{font-size:.86rem;color:var(--doux);display:flex;flex-wrap:wrap;gap:.5em;margin-bottom:1.4rem}
.ariane a{text-decoration:none;color:var(--bleu);font-weight:500}
.ariane a:hover{text-decoration:underline}
.ariane span[aria-hidden]{opacity:.45}

/* ----------------------------------------------------------------- hero */
.hero{position:relative;padding-block:clamp(1.2rem,2.8vw,2.6rem) clamp(3rem,6vw,5rem);overflow:hidden;overflow:clip;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;inset:0 0 0 40%;pointer-events:none;
  background:radial-gradient(42% 40% at 55% 52%,rgba(36,71,245,.12),transparent 72%),radial-gradient(26% 26% at 82% 72%,rgba(120,150,255,.12),transparent 72%)}
.hero::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:1px;background:var(--ligne)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.hero h1{max-width:15ch}
.hero .lead{margin-top:1.15rem}
.depart{margin-top:1.5rem}
.depart-l{font-size:.86rem;font-weight:500;color:var(--doux);margin-bottom:.65rem}
.puces{display:flex;flex-wrap:wrap;gap:.5rem}
.puce{display:inline-flex;align-items:center;gap:.5em;padding:.6em .95em;border-radius:10px;border:1px solid var(--ligne-2);background:var(--blanc);box-shadow:var(--o-1);
  font:500 .92rem var(--ff);text-decoration:none;color:var(--encre);min-height:44px;
  transition:border-color var(--vite),background-color var(--vite),box-shadow var(--moyen) var(--ease),transform var(--vite) var(--ease)}
.puce:hover{border-color:var(--bleu-ligne);background:var(--bleu-pale);transform:translateY(-1px);box-shadow:var(--o-2)}
.puce .ico{color:var(--bleu)}
.hero .btns{margin-top:1.5rem}
.rassure{display:flex;flex-wrap:wrap;gap:.45rem 1.3rem;margin-top:1.2rem;font-size:.9rem;color:var(--texte)}
.rassure li{display:inline-flex;align-items:center;gap:.45em}
.rassure .ico{color:var(--ok);width:1.05em;height:1.05em}
.hero-scene{position:relative;min-width:0}
.scene-app{position:relative;aspect-ratio:1/.74}
.hero-scene .p-mbp{position:absolute;left:4%;right:0;top:6%}
.hero-scene .p-iph{position:absolute;left:0;width:23%;top:30%;z-index:2}
.hero-scene .p-awu{position:absolute;right:3%;width:16%;top:45%;z-index:3}
.legendes{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:.6rem;padding-left:4%}
.etiq{display:inline-flex;align-items:center;gap:.5em;font:500 .8rem/1.2 var(--ff);color:var(--doux);white-space:nowrap}
.etiq::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor;flex:none}
.etiq.vrai{color:var(--ok)}.etiq.fictif{color:var(--ambre)}.etiq.maison{color:var(--bleu)}
@media (max-width:980px){
  .hero-grille{grid-template-columns:1fr}
  .hero h1{max-width:17ch}
  .hero-scene{max-width:640px;margin-inline:auto;width:100%}
}

/* ----------------------------------------------------------------- bandeau preuves */
.preuves{background:var(--blanc);border-bottom:1px solid var(--ligne)}
.preuves ul{display:grid;grid-template-columns:repeat(4,1fr)}
.preuves li{padding:1.35rem 1.2rem;display:flex;gap:.8rem;align-items:flex-start;border-left:1px solid var(--ligne)}
.preuves li:first-child{border-left:0;padding-left:0}
.preuves .ico{color:var(--bleu);width:1.35em;height:1.35em;margin-top:.12em}
.preuves b{display:block;font:650 1rem/1.25 var(--ff-d);letter-spacing:-.012em}
.preuves span{font-size:.86rem;color:var(--doux);line-height:1.4;display:block;margin-top:.15rem}
@media (max-width:860px){.preuves ul{grid-template-columns:1fr 1fr}.preuves li{padding-left:1rem}.preuves li:nth-child(odd){border-left:0;padding-left:0}.preuves li:nth-child(n+3){border-top:1px solid var(--ligne)}}
@media (max-width:460px){.preuves li{padding:1rem .6rem}.preuves b{font-size:.95rem}}

/* ----------------------------------------------------------------- cartes (commun) */
.service,.atout,.etape,.prix,.projet,.autres a{transition:transform var(--moyen) var(--ease),box-shadow var(--moyen) var(--ease),border-color var(--moyen)}

/* ----------------------------------------------------------------- services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.service{position:relative;display:flex;flex-direction:column;gap:.65rem;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:1.5rem 1.4rem 1.25rem;box-shadow:var(--o-1)}
.service:hover{transform:translateY(-3px);box-shadow:var(--o-3);border-color:var(--ligne-2)}
.service .pict{width:44px;height:44px;border-radius:12px;background:var(--bleu-pale);color:var(--bleu);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(36,71,245,.12)}
.service .pict .ico{width:22px;height:22px}
.service h3{margin-top:.25rem}
.service p{color:var(--texte);font-size:.95rem}
.service .prix-l{font:650 1rem var(--ff-d);letter-spacing:-.01em;color:var(--encre);margin-top:auto;padding-top:.4rem;font-variant-numeric:tabular-nums}
.service .prix-l small{font:400 .88rem var(--ff);color:var(--doux);letter-spacing:0}
.service .actions{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center;border-top:1px solid var(--ligne);padding-top:.9rem}
.service .actions a{font-weight:600;font-size:.92rem;text-decoration:none;color:var(--encre)}
.service .actions a.plus{color:var(--bleu)}
.service .actions a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){.services{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.services{grid-template-columns:1fr}}

/* ----------------------------------------------------------------- réalisations (bento) */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem}
.projet{grid-column:span 6;position:relative;border-radius:22px;overflow:hidden;overflow:clip;background:var(--blanc);border:1px solid var(--ligne);display:flex;flex-direction:column;box-shadow:var(--o-2)}
.projet:hover{box-shadow:var(--o-3);border-color:var(--ligne-2)}
.projet.large{grid-column:span 12}
.projet.s5{grid-column:span 5}.projet.s7{grid-column:span 7}
.projet .visuel{position:relative;padding:clamp(1.4rem,3vw,2.6rem) clamp(1rem,3vw,2.4rem) clamp(.8rem,1.6vw,1.2rem);flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0;
  background:linear-gradient(180deg,var(--gris) 0%,#EEF1F6 100%)}
.projet .visuel .p-iph,.projet .visuel .p-awu{transition:transform .6s var(--ease)}
.projet:hover .visuel .p-iph{transform:translateY(-6px)}
.projet:hover .visuel .p-awu{transform:translateY(-4px)}
.projet:hover .c-apps .a1{transform:rotate(-7deg) translateY(-6px)}
.projet:hover .c-apps .a2{transform:rotate(6deg) translateY(-8px)}
.projet .texte{padding:1.3rem clamp(1.2rem,2.4vw,2rem) 1.6rem;display:grid;gap:.5rem;border-top:1px solid var(--ligne);background:var(--blanc)}
.projet .texte p{color:var(--texte);font-size:.95rem}
.projet .texte .chez{color:var(--encre)}
.projet .texte .chez b{color:var(--bleu);font-weight:600}
.projet .tags{display:flex;flex-wrap:wrap;gap:.35rem}
.projet .tags span:not(.etiq){font:500 .76rem var(--ff);color:var(--texte);background:var(--gris-2);border-radius:6px;padding:.3em .6em}
.projet .liens{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.35rem}
.projet.large{display:grid;grid-template-columns:1.55fr 1fr}
.projet.large .texte{border-top:0;border-left:1px solid var(--ligne);align-content:center;padding:2rem 2.2rem}
.projet.large .texte h3{font-size:clamp(1.45rem,2.3vw,2rem);letter-spacing:-.03em}
.lueur{position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 55% at 45% 50%,rgba(36,71,245,.10),transparent 70%)}
.lueur.bleue{background:radial-gradient(55% 55% at 50% 45%,rgba(36,71,245,.12),transparent 70%)}
.lueur.lime{background:radial-gradient(55% 55% at 50% 45%,rgba(15,122,74,.08),transparent 70%)}
.lueur.terra{background:radial-gradient(55% 55% at 50% 50%,rgba(240,120,60,.10),transparent 70%)}
/* compositions */
.c-vigie{position:relative;width:100%;aspect-ratio:1/.62}
.c-vigie .p-mbp{position:absolute;left:0;width:80%;top:4%}
.c-vigie .p-iph{position:absolute;right:4%;width:21%;top:10%;z-index:2}
.c-vigie .p-awu{position:absolute;left:62%;width:14%;top:44%;z-index:3}
.c-duo{position:relative;width:100%;aspect-ratio:1/.66}
.c-duo .p-mbp{position:absolute;left:0;width:84%;top:2%}
.c-duo .p-iph{position:absolute;right:0;width:24%;top:18%;z-index:2}
.c-apps{position:relative;width:100%;aspect-ratio:1/1.08;max-width:440px;margin-inline:auto}
.c-apps .p-iph{position:absolute;width:43%;transition:transform .6s var(--ease)}
.c-apps .a1{left:5%;top:7%;transform:rotate(-6deg);z-index:1}
.c-apps .a2{right:5%;top:2%;transform:rotate(5deg);z-index:2}
.c-sites{position:relative;width:100%;aspect-ratio:1/.62}
.c-sites .p-mbp{position:absolute;width:72%}
.c-sites .m1{left:0;top:0}
.c-sites .m2{right:0;top:26%;z-index:2}
@media (max-width:980px){
  .projet,.projet.s5,.projet.s7{grid-column:span 12}
  .projet.large{grid-template-columns:1fr}
  .projet.large .texte{border-left:0;border-top:1px solid var(--ligne);padding:1.3rem 1.3rem 1.6rem}
}

/* ----------------------------------------------------------------- tarifs */
.onglets{display:inline-flex;flex-wrap:wrap;gap:.25rem;margin-bottom:1.6rem;padding:.3rem;border-radius:13px;background:var(--gris-2);box-shadow:inset 0 1px 2px rgba(11,13,18,.06)}
.onglet{padding:.6em 1.05em;border-radius:10px;font:500 .93rem var(--ff);color:var(--texte);min-height:42px;transition:background-color var(--vite),color var(--vite),box-shadow var(--moyen) var(--ease)}
.onglet:hover{color:var(--encre)}
.onglet[aria-selected="true"]{background:var(--blanc);color:var(--encre);font-weight:600;box-shadow:var(--o-2)}
[role="tabpanel"]:not([hidden]){animation:panneau .35s var(--ease)}
@keyframes panneau{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.grille-prix{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.prix{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:1.45rem 1.35rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--o-1);position:relative}
.prix:hover{transform:translateY(-3px);box-shadow:var(--o-3);border-color:var(--ligne-2)}
.prix:has(.badge){border-color:var(--bleu-ligne);box-shadow:0 0 0 3px var(--bleu-pale),var(--o-2)}
.prix h3{font-size:1.15rem}
.prix .pour{font-size:.82rem;font-weight:500;color:var(--doux)}
.prix p{font-size:.93rem;color:var(--texte)}
.prix .montant{font:700 clamp(1.5rem,2.2vw,1.85rem)/1.05 var(--ff-d);letter-spacing:-.03em;margin-top:auto;padding-top:.6rem;color:var(--encre);font-variant-numeric:tabular-nums}
.prix .montant small{display:block;font:400 .8rem var(--ff);color:var(--doux);margin-top:.35rem;letter-spacing:0}
.prix .montant.devis{font-size:1.3rem}
.prix .btn{margin-top:.6rem;align-self:flex-start}
.prix .btn-1{background:var(--blanc);color:var(--encre);border-color:var(--ligne-2);box-shadow:var(--o-1)}
.prix .btn-1:hover{background:var(--bleu);color:#fff;border-color:var(--bleu-fonce);box-shadow:var(--o-bleu)}
.prix:has(.badge) .btn-1{background:linear-gradient(180deg,#3558FF,var(--bleu));color:#fff;border-color:var(--bleu-fonce);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--o-bleu)}
.badge{position:absolute;top:-.7rem;left:1.1rem;font:600 .72rem/1 var(--ff);background:var(--bleu);color:#fff;padding:.42em .7em;border-radius:99px;box-shadow:var(--o-bleu)}
.bon{margin-top:1.4rem;background:var(--bleu-pale);border:1px solid rgba(36,71,245,.14);border-radius:12px;padding:1rem 1.2rem;font-size:.95rem;max-width:none;color:var(--texte)}
.bon b{display:block;font:600 .8rem var(--ff);letter-spacing:.06em;text-transform:uppercase;color:var(--bleu);margin-bottom:.3rem}
@media (max-width:980px){.grille-prix{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grille-prix{grid-template-columns:1fr}.onglets{display:flex}}

/* ----------------------------------------------------------------- méthode */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:e;position:relative}
.etape{position:relative;padding:1.4rem 1.2rem 1.3rem;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--o-1)}
.etape .n{width:36px;height:36px;border-radius:50%;background:var(--bleu);color:#fff;display:grid;place-items:center;font:700 .95rem var(--ff-d);margin-bottom:.9rem;box-shadow:0 0 0 5px var(--bleu-pale)}
.etape .quand{font:600 .76rem var(--ff);letter-spacing:.06em;text-transform:uppercase;color:var(--bleu);display:block;margin-bottom:.35rem}
.etape p{font-size:.94rem;color:var(--texte);margin-top:.45rem}
.garanties{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.garanties li{display:inline-flex;align-items:center;gap:.5em;padding:.55em .9em;border-radius:10px;background:var(--blanc);border:1px solid var(--ligne);box-shadow:var(--o-1);font-size:.9rem;font-weight:500}
.garanties .ico{color:var(--ok)}
.gris .etape,.gris .garanties li{background:var(--blanc)}
@media (min-width:981px){.etapes::before{content:"";position:absolute;left:3.2rem;right:3.2rem;top:calc(1.4rem + 18px);height:2px;background:linear-gradient(90deg,var(--bleu-pale),var(--bleu-ligne),var(--bleu-pale));z-index:0}.etape{z-index:1}}
@media (max-width:980px){.etapes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.etapes{grid-template-columns:1fr}}

/* ----------------------------------------------------------------- fondateur */
.fondateur{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.fondateur .portrait{position:relative}
.fondateur .portrait img{border-radius:20px;width:100%;height:auto;box-shadow:var(--o-4)}
.portrait-badge{position:absolute;left:-.8rem;bottom:1.4rem;display:flex;align-items:center;gap:.6rem;background:var(--blanc);border:1px solid var(--ligne);border-radius:12px;padding:.7rem .9rem;box-shadow:var(--o-3);font-size:.88rem;font-weight:500;max-width:80%}
.portrait-badge .ico{color:var(--bleu);width:1.3em;height:1.3em}
.fondateur p{margin-top:1rem;color:var(--texte)}
.fondateur p.kicker{color:var(--bleu);margin-top:0}
.fondateur p:first-of-type{margin-top:1.3rem}
.puces-m{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem}
.puces-m span{font-size:.82rem;font-weight:500;padding:.4em .75em;border-radius:8px;background:var(--blanc);border:1px solid var(--ligne);color:var(--texte)}
@media (max-width:820px){.fondateur{grid-template-columns:1fr}.fondateur .portrait{max-width:340px}.portrait-badge{left:.8rem}}

/* ----------------------------------------------------------------- FAQ */
.faq-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.faq-grille .tete{position:sticky;top:100px}
.faq{display:grid;gap:.6rem}
.faq details{background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;box-shadow:var(--o-1);transition:box-shadow var(--moyen) var(--ease),border-color var(--moyen)}
.faq details:hover{border-color:var(--ligne-2)}
.faq details[open]{box-shadow:var(--o-2);border-color:var(--ligne-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.05rem 1.2rem;font:600 1.03rem/1.35 var(--ff-d);letter-spacing:-.012em;border-radius:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--gris-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232447F5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform var(--moyen) var(--ease),background-color var(--vite)}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--bleu-pale)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size var(--moyen) var(--ease),content-visibility var(--moyen) allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq .rep{padding:0 1.2rem 1.15rem;color:var(--texte)}
.faq .rep p+p{margin-top:.6rem}
.gris .faq details{background:var(--blanc)}
@media (max-width:860px){.faq-grille{grid-template-columns:1fr}.faq-grille .tete{position:static}}

/* ----------------------------------------------------------------- devis */
.devis-grille{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.formulaire{background:var(--blanc);color:var(--encre);border-radius:22px;padding:clamp(1.3rem,3vw,2.2rem);position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 2px 6px rgba(10,20,90,.18),0 40px 80px -30px rgba(8,16,80,.55)}
.avance{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem;font-size:.82rem;font-weight:500;color:var(--doux)}
.avance .piste{flex:1;height:6px;border-radius:99px;background:var(--gris-2);overflow:hidden}
.avance .piste i{display:block;height:100%;width:33.3%;background:linear-gradient(90deg,#5A78FF,var(--bleu));border-radius:99px;transition:width .5s var(--ease)}
.formulaire fieldset{border:0;min-width:0}
.formulaire fieldset:not([hidden]){animation:panneau .35s var(--ease)}
.formulaire legend{font:700 clamp(1.25rem,2vw,1.5rem)/1.2 var(--ff-d);letter-spacing:-.025em;color:var(--encre);margin-bottom:1rem;padding:0}
.formulaire legend span{font:400 .9rem var(--ff)!important;color:var(--doux)!important;letter-spacing:0}
.formulaire .sous-l{font-size:.86rem;font-weight:600;color:var(--texte);margin:1.2rem 0 .55rem}
.choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.5rem}
.choix.lignes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.opt span{position:relative;display:flex;align-items:center;gap:.6em;min-height:50px;padding:.7em calc(19px + 1.25rem) .7em .9em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;border-radius:12px;border:1px solid var(--ligne-2);background:var(--blanc);box-shadow:var(--o-1);
  font:500 .93rem/1.25 var(--ff);color:var(--encre);transition:border-color var(--vite),background-color var(--vite),box-shadow var(--moyen) var(--ease)}
.opt span::after{content:"";position:absolute;right:.75rem;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:1.5px solid var(--gris-3);background:var(--blanc) center/10px no-repeat;transition:border-color var(--vite),background-color var(--vite),transform var(--moyen) var(--ease)}
.opt span .ico{color:var(--bleu)}
.opt input:hover+span{border-color:var(--bleu-ligne);box-shadow:var(--o-2)}
.opt input:checked+span{border-color:var(--bleu);background:var(--bleu-pale);box-shadow:0 0 0 1px var(--bleu)}
.opt input:checked+span::after{border-color:var(--bleu);background-color:var(--bleu);transform:scale(1.05);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
.opt input:focus-visible+span{outline:2px solid var(--bleu);outline-offset:2px}
.choix.petits .opt span{min-height:44px;font-size:.9rem;padding:.55em calc(19px + 1.25rem) .55em .8em;box-shadow:none}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.champ{display:grid;gap:.35rem;align-content:start}
.champ.plein{grid-column:1/-1}
.champ label{font-size:.87rem;font-weight:500;color:var(--texte)}
.champ label i{font-style:normal;color:var(--doux);font-weight:400}
.champ input,.champ textarea{width:100%;font:400 1rem var(--ff);color:var(--encre);background:var(--blanc);border:1px solid #CDD3DE;border-radius:10px;padding:.75em .9em;min-height:48px;
  box-shadow:inset 0 1px 2px rgba(11,13,18,.05);transition:border-color var(--vite),box-shadow var(--vite)}
.champ textarea{min-height:110px;resize:vertical;line-height:1.5}
.champ input::placeholder,.champ textarea::placeholder{color:#8A909C}
.champ input:hover,.champ textarea:hover{border-color:#B5BDCB}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 4px rgba(36,71,245,.15)}
.champ input[aria-invalid="true"]{border-color:var(--rouge);box-shadow:0 0 0 4px rgba(192,52,29,.12)}
.champ .err{font-size:.8rem;color:var(--rouge);min-height:1em}
.piege{position:absolute!important;left:-5000px!important;width:1px;height:1px;overflow:hidden}
.navig{display:flex;align-items:center;gap:.8rem;margin-top:1.5rem;flex-wrap:wrap}
.navig .btn-1{margin-left:auto}
.navig .manque{font-size:.86rem;color:var(--rouge);flex-basis:100%;order:3}
.consent{margin-top:1rem;font-size:.8rem;color:var(--doux);line-height:1.5}
.consent a{color:var(--texte)}
.etat-envoi{text-align:left;display:grid;gap:.9rem;animation:panneau .45s var(--ease)}
.etat-envoi .gros{width:56px;height:56px;border-radius:50%;background:var(--ok-pale);color:var(--ok);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(15,122,74,.08)}
.etat-envoi .gros .ico{width:28px;height:28px;stroke-width:2.6}
.etat-envoi h3{font-size:1.6rem;letter-spacing:-.03em}
.etat-envoi p{color:var(--texte)}
.etat-envoi.echec .gros{background:#FFF4E5;color:var(--ambre);box-shadow:0 0 0 6px rgba(154,91,0,.08)}
.recap-texte{font:400 .85rem/1.5 var(--ff);white-space:pre-wrap;background:var(--gris);border:1px solid var(--ligne);border-radius:10px;padding:.8rem 1rem;color:var(--texte);max-height:180px;overflow:auto}
.aside-devis{display:grid;gap:1rem}
.carte-s{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:1.3rem;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.carte-s h3{color:#fff;margin-bottom:.8rem;font-size:1.1rem}
.suite li{display:grid;grid-template-columns:30px 1fr;gap:.7rem;padding:.55rem 0;color:rgba(255,255,255,.82);font-size:.93rem}
.suite li b{color:#fff;font-weight:600;display:block}
.suite .n{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;font:600 .85rem var(--ff-d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.contacts a{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.16);font-size:.96rem;font-weight:500}
.contacts a:last-child{border-bottom:0}
.contacts a:hover span,.contacts a:hover{text-decoration:underline;text-underline-offset:3px}
.contacts .ico{color:#fff}
.contacts small{margin-left:auto;color:rgba(255,255,255,.72);font-size:.8rem;font-weight:400}
.carte-s p{color:rgba(255,255,255,.82);font-size:.92rem}
@media (min-width:921px){.formulaire{position:sticky;top:92px}}
@media (max-width:920px){.devis-grille{grid-template-columns:1fr}}
@media (max-width:520px){.champs{grid-template-columns:1fr}.choix{grid-template-columns:1fr 1fr}.opt span{font-size:.88rem;padding:.6em calc(19px + 1.05rem) .6em .7em}.opt span::after{right:.55rem}}

/* ----------------------------------------------------------------- pages services */
.atouts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.atout{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:1.35rem 1.3rem;box-shadow:var(--o-1)}
.atout:hover{transform:translateY(-3px);box-shadow:var(--o-3);border-color:var(--ligne-2)}
.atout>.ico{width:44px;height:44px;padding:11px;border-radius:12px;background:var(--bleu-pale);color:var(--bleu);margin-bottom:.9rem;box-shadow:inset 0 0 0 1px rgba(36,71,245,.12)}
.atout p{color:var(--texte);font-size:.95rem;margin-top:.45rem}
@media (max-width:980px){.atouts{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.atouts{grid-template-columns:1fr}}
.prose{max-width:760px}
.prose h2{margin-bottom:1rem}
.prose p{color:var(--texte);margin-top:.9rem}
.prose ul{margin-top:.9rem;display:grid;gap:.55rem}
.prose li{padding-left:1.6rem;position:relative;color:var(--texte)}
.prose li::before{content:"";position:absolute;left:0;top:.28em;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--bleu-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232447F5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/.7rem no-repeat}
.deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.deux{grid-template-columns:1fr}}
.bande-cta{position:relative;overflow:hidden;color:#fff;border-radius:22px;padding:clamp(1.6rem,4vw,2.6rem);display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;
  background:radial-gradient(80% 100% at 0% 0%,rgba(255,255,255,.18),transparent 60%),linear-gradient(180deg,#2A4DFF,#1F3FE6);box-shadow:var(--o-4)}
.bande-cta h2{font-size:clamp(1.5rem,2.8vw,2.2rem);max-width:24ch;color:#fff}
.bande-cta p{color:rgba(255,255,255,.85);margin-top:.4rem}
.bande-cta .btn-1{background:var(--blanc);color:var(--bleu-nuit);border-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 24px -10px rgba(0,0,0,.4)}
.bande-cta .btn-1:hover{background:#F2F5FF}
.visuel-page{position:relative;width:100%;max-width:620px;margin-inline:auto}
.villes{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.villes span{font-size:.82rem;font-weight:500;padding:.38em .7em;border:1px solid var(--ligne);border-radius:8px;background:var(--blanc);color:var(--texte)}
.autres{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.autres a{display:flex;justify-content:space-between;gap:.6rem;align-items:center;padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--ligne);background:var(--blanc);text-decoration:none;font-weight:600;box-shadow:var(--o-1)}
.autres a:hover{border-color:var(--bleu-ligne);box-shadow:var(--o-3);transform:translateY(-2px)}
.autres a .ico{color:var(--bleu);transition:transform var(--moyen) var(--ease)}
.autres a:hover .ico{transform:translateX(3px)}

/* ----------------------------------------------------------------- pied de page */
.pied{padding-block:clamp(3rem,6vw,4.5rem) 2rem;background:var(--gris);border-top:1px solid var(--ligne)}
.pied-grille{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
.pied h4{font:600 .78rem var(--ff);letter-spacing:.06em;text-transform:uppercase;color:var(--doux);margin-bottom:.9rem}
.pied li{margin-bottom:.5rem}
.pied li a{text-decoration:none;color:var(--texte);font-size:.93rem}
.pied li a:hover{color:var(--bleu)}
.pied .sign{font:650 1.1rem var(--ff-d);letter-spacing:-.02em;margin-top:1rem}
.pied .base{color:var(--doux);font-size:.92rem;margin-top:.8rem}
.legal{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--ligne);display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;font-size:.82rem;line-height:1.6;color:var(--doux)}
.legal a{color:var(--texte)}
@media (max-width:860px){.pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pied-grille{grid-template-columns:1fr}}

/* ----------------------------------------------------------------- barre mobile */
.barre-m{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:.6rem;padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.8) blur(14px);-webkit-backdrop-filter:saturate(1.8) blur(14px);box-shadow:0 -1px 0 var(--ligne),0 -10px 30px -12px rgba(11,13,18,.16);
  transform:translateY(110%);transition:transform .35s var(--ease)}
.barre-m.visible{transform:none}
.barre-m .btn-1{flex:1}
.barre-m .btn-wa{padding-inline:1rem}
@media (max-width:760px){.barre-m{display:flex}body{padding-bottom:74px}}

/* ----------------------------------------------------------------- appareils : ombres adaptées au fond clair */
.mbp{filter:drop-shadow(0 .35vw .5vw rgba(15,25,70,.10)) drop-shadow(0 1.8vw 2.4vw rgba(15,25,70,.16))}

/* ==========================================================================
   Mouvement (16/09/2026) · défilement natif, jamais détourné ni lissé
   · Tout ce qui bouge ne touche qu'à opacity et aux transformations (transform, translate,
     scale), composées par le GPU ; un flou léger seulement sur les titres qui apparaissent.
   · Aucune animation infinie : au repos, la page ne produit plus aucune image.
   · Classes posées par site.js sur <html> : .mo (mouvement actif), puis .mo-tl (animations
     liées au défilement natives, animation-timeline) ou .mo-js (repli : site.js pilote les
     mêmes animations, en pause, depuis un seul requestAnimationFrame par salve de scroll).
   · Sans JS : .js n'est jamais posée, rien n'est masqué. JS présent mais site.js en échec :
     filet de sécurité CSS, tout apparaît à 2,5 s.
   · prefers-reduced-motion: reduce coupe tout : contenu visible, aucune translation.
   ========================================================================== */

/* Les appareils ne flottent plus en boucle (image produite en continu) : ils bougent avec le
   défilement, et s'arrêtent avec lui. */
html .flotte{animation:none}
/* 16/09/2026 : les délais négatifs de .flotte.d2/.d3 (appareils.css) figeaient l'iPhone et la montre du hero en fin de course. */
html .hero-scene .flotte.d2,html .hero-scene .flotte.d3{animation-delay:0s}

/* ----------------------------------------------------------------- entrée du hero (au chargement) */
@media (prefers-reduced-motion:no-preference){
  .entree{animation:entree 1s var(--sortie) both}
  .entree.d1{animation-delay:.08s}.entree.d2{animation-delay:.2s}.entree.d3{animation-delay:.32s}
  .hero .kicker.entree{animation-delay:0s}
  .hero h1.entree{animation-delay:.18s}
  .hero .lead.entree{animation-delay:.42s}
  .hero .depart.entree{animation-delay:.52s}
  .hero .btns.entree{animation-delay:.62s}
  .hero .rassure.entree{animation-delay:.72s}
  .hero-grille>.entree:last-child{animation:scene 1.5s var(--sortie) .26s both}
  /* titre découpé en mots par site.js (seulement s'il est encore invisible) */
  .hero h1.mots{animation:none;opacity:1}
  .hero h1 .mot{display:inline-block;animation:mot 1.05s var(--sortie) both;animation-delay:calc(.14s + var(--i,0) * 46ms)}
  .hero h1.mots-fini .mot{animation:none}
}
@keyframes entree{from{opacity:0;translate:0 22px}}
@keyframes scene{from{opacity:0;translate:0 56px;scale:.94}}
@keyframes mot{from{opacity:0;translate:0 .45em;filter:blur(10px)}}

/* ----------------------------------------------------------------- apparition des sections */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;translate:0 30px}
  .js .tete.rv{filter:blur(6px)}
  .js .rv.vu{opacity:1;translate:none;filter:none;
    transition:opacity .9s var(--sortie) var(--rv-d,0s),translate 1.15s var(--sortie) var(--rv-d,0s),filter .8s var(--sortie) var(--rv-d,0s),
      transform var(--moyen) var(--ease),box-shadow var(--moyen) var(--ease),border-color var(--moyen),background-color var(--vite)}
  .js .rv.rv-anim{will-change:opacity,translate}
  .js .tete.rv.rv-anim{will-change:opacity,translate,filter}
  /* filet de sécurité : si site.js ne s'exécute jamais, tout apparaît quand même */
  html.js:not(.mo) .rv:not(.vu){animation:rv-secours .8s var(--sortie) 2.5s both}
  /* méthode hors récit épinglé : la pastille du numéro arrive juste après sa carte */
  .mo .etape.rv .n{scale:.4;opacity:0}
  .mo .etape.rv.vu .n{scale:1;opacity:1;transition:scale .7s cubic-bezier(.34,1.56,.64,1) calc(var(--rv-d,0s) + .22s),opacity .3s var(--ease) calc(var(--rv-d,0s) + .22s)}
}
@keyframes rv-secours{to{opacity:1;translate:none;filter:none}}

/* compteurs du bandeau de preuves : largeur réservée par le nombre final (transparent), le
   compte défile par-dessus, en chiffres tabulaires ; aucun décalage de mise en page */
.compte{position:relative;display:inline-block;font:inherit;color:inherit}
.compte i{font-style:normal}
.compte-fin{color:transparent}
.compte-vif{position:absolute;right:0;top:0;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ----------------------------------------------------------------- navigation : section active */
@media (min-width:1021px){
  .nav-liens a{position:relative}
  .nav-liens a:not(.seul-m)::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.3rem;height:2px;border-radius:2px;
    background:var(--bleu);transform:scaleX(0);transition:transform .5s var(--sortie)}
  .nav-liens a.ici{color:var(--encre)}
  .nav-liens a.ici::after{transform:scaleX(1)}
}
@media (max-width:1020px){.nav-liens a.ici{color:var(--bleu)}}

/* ----------------------------------------------------------------- liées au défilement
   Mêmes noms d'animation pour les deux moteurs. Durée 1 s : le repli JS règle currentTime
   (0 à 1000 ms) ; le moteur natif remplace le temps par la position de défilement. */
@media (prefers-reduced-motion:no-preference){
  /* propriétés longues seulement : un raccourci « animation » remettrait animation-timeline à auto */
  .mo .hero::before,.mo .hero :is(.scene-app,.visuel-page),.mo .hero :is(.scene-app,.visuel-page) :is(.p-iph,.p-awu),
  .mo .projet .visuel :is(.p-mbp,.p-iph,.p-awu),.mo .portrait-badge{animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both}
  .mo .hero::before{animation-name:h-lueur}
  .mo .hero :is(.scene-app,.visuel-page){transform-origin:50% 85%}
  .mo .projet .visuel .p-mbp{animation-name:par-mac}
  .mo .projet .visuel :is(.c-vigie,.c-duo) .p-iph,.mo .projet .visuel .c-sites .m2,.mo .projet .visuel .c-apps .a2{animation-name:par-doux}
  .mo .projet .visuel .c-vigie .p-awu{animation-name:par-fort}
  .mo .projet .visuel .c-apps .a1{animation-name:par-inverse}
  .mo .portrait-badge{animation-name:par-badge}
}
@media (prefers-reduced-motion:no-preference) and (min-width:981px){
  /* ordinateur : la scène descend légèrement, iPhone et montre montent plus vite (profondeur sans flou : translations seules) */
  .mo .hero :is(.scene-app,.visuel-page){animation-name:h-groupe}
  .mo .hero :is(.scene-app,.visuel-page) .p-iph{animation-name:h-avant}
  .mo .hero :is(.scene-app,.visuel-page) .p-awu{animation-name:h-devant}
}
@media (prefers-reduced-motion:no-preference) and (max-width:980px){
  /* téléphone et tablette : la scène est sous le texte, elle glisse en place en entrant dans l’écran */
  .mo .hero :is(.scene-app,.visuel-page){animation-name:hm-groupe}
  .mo .hero :is(.scene-app,.visuel-page) :is(.p-iph,.p-awu){animation-name:hm-avant}
}
/* repli JS : les mêmes animations restent en pause, site.js règle leur currentTime */
@media (prefers-reduced-motion:no-preference){
  .mo-js .hero::before,.mo-js .hero :is(.scene-app,.visuel-page),.mo-js .hero :is(.scene-app,.visuel-page) :is(.p-iph,.p-awu),
  .mo-js .projet .visuel :is(.p-mbp,.p-iph,.p-awu),.mo-js .portrait-badge{animation-play-state:paused}
}
/* moteur natif ; view-timeline-inset à 0 : sinon la plage se décale du scroll-padding-top (84 px) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .mo-tl .hero::before{animation-timeline:scroll(root);animation-range:0px 100vh}
    .mo-tl .projet .visuel{view-timeline:--visuel block;view-timeline-inset:0}
    .mo-tl .projet .visuel :is(.p-mbp,.p-iph,.p-awu){animation-timeline:--visuel;animation-range:cover 0% cover 100%}
    .mo-tl .projet .visuel .p-mbp:not(.c-sites .m2){animation-range:entry 0% cover 45%}
    .mo-tl .fondateur .portrait{view-timeline:--portrait block;view-timeline-inset:0}
    .mo-tl .portrait-badge{animation-timeline:--portrait;animation-range:cover 0% cover 100%}
    .mo-tl .recit{view-timeline:--recit block;view-timeline-inset:0}
    .mo-tl .recit .recit-piste i{animation:recit-fil 1s linear both;animation-timeline:--recit;animation-range:contain 0% contain 92%}
    .mo-tl .prog{animation:prog 1s linear both;animation-timeline:scroll(root)}
  }
  @media (prefers-reduced-motion:no-preference) and (min-width:981px){
    .mo-tl .hero :is(.scene-app,.visuel-page),.mo-tl .hero :is(.scene-app,.visuel-page) :is(.p-iph,.p-awu){animation-timeline:scroll(root);animation-range:0px 90vh}
  }
  @media (prefers-reduced-motion:no-preference) and (max-width:980px){
    .mo-tl .hero :is(.scene-app,.visuel-page){view-timeline:--scene block;view-timeline-inset:0;animation-timeline:--scene;animation-range:entry 0% cover 50%}
    .mo-tl .hero :is(.scene-app,.visuel-page) :is(.p-iph,.p-awu){animation-timeline:--scene;animation-range:entry 0% cover 50%}
  }
}
@keyframes h-lueur{to{translate:0 24%;opacity:.35}}
@keyframes h-groupe{to{transform:translate(0,7%)}}
@keyframes h-avant{to{translate:0 -24%}}
@keyframes h-devant{to{translate:0 -48%}}
@keyframes hm-groupe{from{transform:translate(0,9%)}to{transform:none}}
@keyframes hm-avant{from{translate:0 26%}to{translate:0 0}}
@keyframes par-mac{from{scale:.955}to{scale:1}}
@keyframes par-doux{from{translate:0 9%}to{translate:0 -9%}}
@keyframes par-fort{from{translate:0 24%}to{translate:0 -24%}}
@keyframes par-inverse{from{translate:0 -6%}to{translate:0 6%}}
@keyframes par-badge{from{translate:0 34px}to{translate:0 -34px}}
@keyframes recit-fil{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ----------------------------------------------------------------- récit : la méthode, étape par étape
   Ordinateur assez haut : la section s'allonge et son contenu reste épinglé (position: sticky)
   pendant que les étapes s'allument une à une, avec une barre de progression en 4 segments.
   Ailleurs (téléphone, fenêtre basse, contenu trop haut) : version simple, non épinglée. */
.recit-rail{display:none}
@media screen and (prefers-reduced-motion:no-preference) and (min-width:981px) and (min-height:700px){
  .mo .recit:not(.recit-libre){--recit-long:250vh;position:relative;height:calc(100vh + var(--recit-long));padding-block:0;scroll-margin-top:-84px}
  .mo .recit:not(.recit-libre)>.wrap{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:4.6rem 2rem}
  .mo .recit:not(.recit-libre) .etapes .etape.rv{opacity:.3;translate:0 14px;
    transition:opacity .7s var(--sortie),translate .9s var(--sortie),transform var(--moyen) var(--ease),box-shadow var(--moyen) var(--ease),border-color var(--moyen)}
  .mo .recit:not(.recit-libre) .etapes .etape.rv.fait,.mo .recit:not(.recit-libre) .etapes .etape.rv.actif{opacity:1;translate:none}
  .mo .recit:not(.recit-libre) .etape .n{scale:1;opacity:1;transition:none}
  .mo .recit:not(.recit-libre) .etapes::before{content:none}
  .mo .recit:not(.recit-libre) .etape::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    box-shadow:0 0 0 1.5px rgba(36,71,245,.55),0 24px 48px -22px rgba(36,71,245,.5);opacity:0;transition:opacity .6s var(--ease)}
  .mo .recit:not(.recit-libre) .etape.actif::before{opacity:1}
  .mo .recit:not(.recit-libre) .recit-rail{display:flex;align-items:center;gap:1.1rem;margin-top:1.6rem}
  .recit-piste{position:relative;flex:1;height:4px;border-radius:99px;overflow:hidden;background:var(--gris-2);
    -webkit-mask:linear-gradient(90deg,#000 calc(25% - 3px),transparent 0 calc(25% + 3px),#000 0 calc(50% - 3px),transparent 0 calc(50% + 3px),#000 0 calc(75% - 3px),transparent 0 calc(75% + 3px),#000 0);
    mask:linear-gradient(90deg,#000 calc(25% - 3px),transparent 0 calc(25% + 3px),#000 0 calc(50% - 3px),transparent 0 calc(50% + 3px),#000 0 calc(75% - 3px),transparent 0 calc(75% + 3px),#000 0)}
  .recit-piste i{position:absolute;inset:0;background:var(--bleu);transform-origin:0 50%;transform:scaleX(0)}
  .recit-num{font:600 .8rem/1 var(--ff);letter-spacing:.06em;text-transform:uppercase;color:var(--bleu);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:9.5em;text-align:right}
  .mo .recit:not(.recit-libre) .garanties{margin-top:1.3rem}
}

/* ----------------------------------------------------------------- transitions entre pages
   Fondu court d'une page à l'autre ; la barre du haut est nommée pendant la transition
   seulement, pour rester en place. Navigateurs sans support : navigation classique. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  html:active-view-transition #haut{view-transition-name:haut}
  ::view-transition-old(root){animation:vt-sortie .2s var(--ease) both}
  ::view-transition-new(root){animation:vt-entree .42s var(--sortie) both}
  ::view-transition-group(haut){animation-duration:.35s;animation-timing-function:var(--sortie)}
}
@keyframes vt-sortie{to{opacity:0}}
@keyframes vt-entree{from{opacity:0;translate:0 12px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [role="tabpanel"]:not([hidden]),.formulaire fieldset:not([hidden]),.etat-envoi{animation:none}
  *,*::before,*::after,*::details-content{transition-duration:.01ms!important}
}
@media print{#haut,.barre-m,#devis{display:none}}

/* ----------------------------------------------------------------- langues */
.langue{position:relative}
.langue summary{list-style:none;display:inline-flex;align-items:center;gap:.35rem;min-height:42px;padding:.45rem .65rem;border-radius:9px;cursor:pointer;
  font:600 .86rem var(--ff);color:var(--texte);transition:background-color var(--vite),color var(--vite)}
.langue summary::-webkit-details-marker{display:none}
.langue summary:hover,.langue[open] summary{background:var(--gris-2);color:var(--encre)}
.langue summary .ico{width:1.05em;height:1.05em}
.langue ul{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:var(--blanc);border:1px solid var(--ligne);border-radius:12px;padding:.35rem;box-shadow:var(--o-3);z-index:120;
  animation:panneau .2s var(--ease)}
.langue a{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:8px;text-decoration:none;font-size:.93rem;color:var(--encre)}
.langue a b{font:600 .72rem var(--ff);letter-spacing:.04em;color:var(--doux);width:1.6rem}
.langue a:hover{background:var(--gris)}
.langue a[aria-current]{background:var(--bleu-pale);color:var(--bleu)}
.langue a[aria-current] b{color:var(--bleu)}
@media (max-width:1020px){.langue{margin-left:auto}.nav .marque{margin-right:0}}
.suggestion{display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:.3rem 1rem;padding:.45rem var(--pad);background:var(--bleu-pale);border-bottom:1px solid rgba(36,71,245,.14);font-size:.9rem;color:var(--texte)}
.suggestion a{font-weight:600;color:var(--bleu);white-space:nowrap}
@media (max-width:620px){.suggestion{grid-template-columns:1fr auto;font-size:.85rem;justify-content:stretch}.suggestion span{grid-column:1/-1;grid-row:1}.suggestion a{grid-row:2}.suggestion button{grid-row:2;justify-self:end}}
.suggestion button{width:32px;height:32px;border-radius:8px;font-size:1.2rem;line-height:1;color:var(--doux)}
.suggestion button:hover{background:rgba(36,71,245,.1);color:var(--encre)}
@media (prefers-reduced-motion:reduce){.langue ul{animation:none}}

/* ==========================================================================
   Accueil « système en tête » (17/09/2026) · hero à démo animée, branché sur vos outils, garde-fous.
   Démo pilotée par site.js (bloc « démo du hero ») : data-etape 1 à 5 sur #hs-scene.
   ========================================================================== */
.hs-hero{overflow:visible;padding-bottom:0}
.hs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.hs-texte{position:sticky;top:96px;padding-block:clamp(1rem,6vh,4rem) 2rem}
.hs-texte h1{font-size:clamp(2.2rem,4.2vw,3.5rem)}
.hs-cta .btn{white-space:normal;text-align:center;max-width:100%}
.hs-piste{height:380vh;position:relative}
.hs-sticky{position:sticky;top:84px;height:calc(100vh - 84px);min-height:520px;display:grid;align-content:center;gap:.9rem}
.hs-scene{position:relative;width:100%;aspect-ratio:1/.8}
.hs-tag{position:absolute;left:0;top:-.2rem;z-index:10;font:600 .72rem/1 var(--ff);letter-spacing:.04em;padding:.4em .7em;border-radius:7px;background:var(--gris-2);color:var(--texte)}
.hs-scene .pose{position:absolute;transition:transform .9s var(--sortie),opacity .7s var(--sortie),left .9s var(--sortie),top .9s var(--sortie)}
.pose-mac{left:6%;width:88%;top:6%}
.pose-tel{left:0;width:23%;top:36%;z-index:4;opacity:0;transform:translateY(14%)}
.pose-montre{left:44%;width:12%;top:22%;z-index:1;opacity:0;transform:scale(.7)}
.pose-ipad{right:0;width:40%;top:56%;z-index:5;opacity:0;transform:translateY(16%)}
.hs-scene:is([data-etape="2"],[data-etape="3"],[data-etape="4"],[data-etape="5"]) .pose-tel{opacity:1;transform:none}
.hs-scene:is([data-etape="4"],[data-etape="5"]) .pose-montre{left:84%;top:4%;z-index:6;opacity:1;transform:none}
.hs-scene[data-etape="5"] .pose-ipad{opacity:1;transform:none}
.hs-points{display:flex;gap:.4rem}
.hs-points i{height:4px;flex:1;max-width:3rem;border-radius:2px;background:var(--gris-3);transition:background .3s}
.hs-points i.on{background:var(--bleu)}
.hs-legende{min-height:2.9rem}
.hs-legende li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.95rem;line-height:1.4;color:var(--encre);font-weight:500}
.hs-legende li:not(.ici){display:none}
.hs-legende li::before{content:attr(data-n);width:1.45rem;height:1.45rem;border-radius:50%;display:grid;place-items:center;font:650 .75rem/1 var(--ff-d);background:var(--bleu);color:#fff}
.hs-scene .awu-ecran>.vivant{position:absolute;inset:0}
.ecr-mac{position:absolute;inset:0;background:radial-gradient(80% 90% at 30% 20%,#2c3f9e 0%,#14203f 55%,#0b1020 100%);font-family:-apple-system,BlinkMacSystemFont,var(--ff);color:#fff}
.ecr-noir{position:absolute;inset:0;background:#000;z-index:8;transition:opacity 1.1s ease}
.hs-scene:not([data-etape="0"]) .ecr-noir{opacity:0}
.ecr-accueil{position:absolute;left:0;right:0;top:22%;display:grid;justify-items:center;gap:2.2cqi;text-align:center;transition:transform .8s var(--sortie),opacity .6s}
.ecr-orbe{width:7cqi;height:7cqi;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7d93ff,#2447F5 60%,#14259e);box-shadow:0 0 0 1.4cqi rgba(90,120,255,.18),0 0 5cqi rgba(90,120,255,.55)}
.ecr-bonjour{font-size:2.1cqi;opacity:.8}
.ecr-question{font-size:3.6cqi;font-weight:600;letter-spacing:-.02em}
.ecr-champ{width:46cqi;height:4.6cqi;border-radius:99px;background:rgba(255,255,255,.12);border:.12cqi solid rgba(255,255,255,.22);display:flex;align-items:center;padding-inline:2cqi;font-size:1.6cqi;color:rgba(255,255,255,.6)}
.hs-scene:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .ecr-accueil{transform:translateY(-8%) scale(.82);opacity:.35}
.ecr-brouillon{position:absolute;left:50%;top:40%;width:52cqi;transform:translate(-50%,8%);opacity:0;background:#fff;color:#0B0D12;border-radius:1.6cqi;padding:2.2cqi 2.4cqi;box-shadow:0 2cqi 5cqi rgba(0,0,0,.45);transition:transform .8s var(--sortie),opacity .6s}
.hs-scene:is([data-etape="3"],[data-etape="4"],[data-etape="5"]) .ecr-brouillon{opacity:1;transform:translate(-50%,0)}
.ecr-b-tete{display:flex;align-items:center;gap:1cqi;font-size:1.35cqi;font-weight:600;color:#5F6675}
.ecr-b-tete i{width:1.3cqi;height:1.3cqi;border-radius:.3cqi;background:#2447F5}
.ecr-b-objet{font-size:1.9cqi;font-weight:650;margin:.9cqi 0 .7cqi}
.ecr-b-texte{font-size:1.5cqi;line-height:1.45;color:#3E4553;max-width:none}
.ecr-b-actions{display:flex;align-items:center;gap:1cqi;margin-top:1.6cqi;font-size:1.45cqi;font-weight:600}
.ecr-b-actions span{padding:.8cqi 1.6cqi;border-radius:.9cqi;border:.12cqi solid rgba(11,13,18,.16)}
.ecr-b-actions .valider{background:#2447F5;border-color:#2447F5;color:#fff;transition:transform .2s,background .3s}
.ecr-b-actions .envoye{margin-left:auto;color:#0F7A4A;opacity:0;transition:opacity .4s;border:0;padding:0;white-space:nowrap}
.valide .ecr-b-actions .valider{transform:scale(.94);background:#1A36D6}
.valide .ecr-b-actions .envoye{opacity:1}
.ecr-tel{position:absolute;inset:0;background:linear-gradient(180deg,#1b2a6b 0%,#2d1f4f 60%,#140f22 100%);color:#fff;font-family:-apple-system,BlinkMacSystemFont,var(--ff);display:grid;align-content:start;justify-items:center;padding-top:20cqi}
.ecr-t-jour{font-size:5cqi;opacity:.85}
.ecr-t-heure{font-size:22cqi;font-weight:600;letter-spacing:-.03em;line-height:1}
.ecr-notif{width:88cqi;margin-top:12cqi;padding:3.4cqi 3.8cqi;border-radius:5.5cqi;background:rgba(255,255,255,.2);display:grid;grid-template-columns:auto 1fr;gap:1cqi 3cqi;align-items:start;transform:translateY(20%);opacity:0;transition:all .8s var(--sortie) .35s}
.hs-scene:is([data-etape="2"],[data-etape="3"],[data-etape="4"],[data-etape="5"]) .ecr-notif{transform:none;opacity:1}
.ecr-notif i{grid-row:span 2;width:9cqi;height:9cqi;border-radius:2.4cqi;background:#E7EAF0;display:grid;place-items:center}
.ecr-notif i .ico{width:5.6cqi;height:5.6cqi;color:#3E4553}
.ecr-notif b{font-size:5.4cqi}
.ecr-notif span{font-size:5.2cqi;line-height:1.3}
.ecr-montre{position:absolute;inset:0;background:#000;color:#fff;display:grid;place-items:center;align-content:center;gap:5cqi;font-family:-apple-system,BlinkMacSystemFont,var(--ff)}
.ecr-m-ondes{position:relative;width:34cqi;height:34cqi;display:grid;place-items:center}
.ecr-m-ondes::before,.ecr-m-ondes::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.4cqi solid rgba(255,138,46,.8);animation:hs-onde 2.2s ease-out infinite}
.ecr-m-ondes::after{animation-delay:1.1s}
.ecr-m-ondes b{width:18cqi;height:18cqi;border-radius:50%;background:#ff8a2e}
.ecr-m-txt{font-size:10cqi;font-weight:600}
.ecr-m-sous{font-size:7cqi;opacity:.6;margin-top:-3cqi}
@keyframes hs-onde{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.ipad{position:relative;width:100%;padding:2.6%;border-radius:5.2%/7.4%;background:linear-gradient(135deg,#3a3b40,#121214 60%,#26272b);box-shadow:0 0 0 .12vw #6b6c70,0 2.4vw 3.4vw -1vw rgba(8,10,18,.45)}
.ipad-ecran{position:relative;aspect-ratio:1180/820;overflow:hidden;border-radius:2.6%/3.8%;background:#F5F7FA;container-type:inline-size;font-family:var(--ff);color:#0B0D12}
.ip-tete{display:flex;justify-content:space-between;align-items:center;padding:3cqi 3.6cqi 1.6cqi;font-size:3.2cqi;font-weight:650}
.ip-tete span{font-size:2.4cqi;font-weight:500;color:#5F6675;background:#ECEFF4;padding:.6cqi 1.2cqi;border-radius:1cqi}
.ip-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8cqi;padding:0 3.6cqi}
.ip-kpi{background:#fff;border-radius:1.8cqi;padding:2cqi 2.2cqi;box-shadow:0 .2cqi .6cqi rgba(11,13,18,.06)}
.ip-kpi small{display:block;font-size:2.5cqi;color:#5F6675}
.ip-kpi b{display:block;font-size:4.4cqi;font-weight:700;letter-spacing:-.02em;margin-top:.5cqi;font-variant-numeric:tabular-nums}
.ip-barres{display:flex;align-items:flex-end;gap:1.6cqi;height:22cqi;margin:2.6cqi 3.6cqi 0;padding:2cqi;background:#fff;border-radius:1.8cqi}
.ip-barres i{flex:1;border-radius:.8cqi .8cqi 0 0;background:#C9D3FF;height:6%;transition:height 1.2s var(--sortie)}
.ip-barres i:last-child{background:#2447F5}
.hs-scene[data-etape="5"] .ip-barres i{height:var(--h)}

.ac-grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.ac-carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:16px;padding:1.2rem 1.25rem;box-shadow:var(--o-1)}
.ac-carte h3{margin-bottom:.4rem}
.ac-carte p{color:var(--texte);font-size:.95rem}
.ac-espace{margin-top:1rem}
.ac-puces{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.ac-puces span{display:inline-flex;align-items:center;gap:.45em;font-size:.88rem;font-weight:500;padding:.45em .8em;border-radius:9px;background:var(--blanc);border:1px solid var(--ligne-2)}
.ac-puces span.ok{border-color:rgba(15,122,74,.35);background:var(--ok-pale);color:#0B4F31}
.ac-puces span.ok::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--ok)}
.ac-liste{display:grid;gap:.55rem;margin-top:.8rem}
.ac-liste li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;font-size:.95rem;line-height:1.45}
.ac-liste .ico{margin-top:.15rem;color:var(--ok)}
.ac-liste.non .ico{color:var(--rouge)}
.ac-carte .ac-mac{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--encre);padding:.5em .85em;border-radius:10px;background:var(--bleu-pale);border:1px solid var(--bleu-ligne);margin-top:1rem}
.ac-niveaux{margin-top:clamp(2.5rem,5vw,4rem)}
.ac-niv-titre{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.025em}
.grille-prix.ac-grille-niveaux{grid-template-columns:repeat(4,minmax(0,1fr))}
.ac-pile{display:grid;gap:1rem;align-content:start}
.ac-fiche{background:var(--blanc);border:1px dashed var(--ligne-2);border-radius:14px;padding:1rem 1.1rem;font-size:.92rem}
.ac-fiche dt{font-weight:600;margin-top:.6rem}
.ac-fiche .ac-fiche-titre{margin-top:0;color:var(--bleu)}
.ac-fiche dd{color:var(--texte)}
.ac-vigie{position:relative;aspect-ratio:1/.62;align-self:center}
.ac-vigie .p-mbp{position:absolute;left:0;width:82%;top:2%}
.ac-vigie .p-iph{position:absolute;right:2%;width:22%;top:12%}
@media (max-width:980px){
  .hs{grid-template-columns:1fr}
  .hs-texte{position:static;padding-bottom:0}
  .hs-piste{height:300vh}
  .hs-sticky{top:64px;height:calc(100vh - 64px);min-height:0}
  .grille-prix.ac-grille-niveaux{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ac-grille-2,.grille-prix.ac-grille-niveaux{grid-template-columns:1fr}
  .hs-legende li{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  .hs-piste{height:auto}
  .hs-sticky{position:static;height:auto;min-height:0}
  .hs-legende li:not(.ici){display:grid}
  .hs-scene .pose,.ecr-notif,.ecr-brouillon,.ecr-accueil,.ip-barres i,.ecr-noir{transition:none}
  .ecr-m-ondes::before,.ecr-m-ondes::after{animation:none}
}