/* ═══════════════════════════════════════════════════════════════════════════
   MADEBYAURA — SYSTÈME « LA PREUVE EN PLEINE LUMIÈRE »  (refonte 2026)
   Voir docs/refonte-2026/direction-artistique.md pour les décisions.
   Grammaire : une famille (Switzer), une lumière (blanc/perle), un accent
   (le point cobalt), une courbe par rôle. Aucune autre courbe autorisée.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── §0  Police ─────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Switzer';
  src:url('/assets/fonts/switzer.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ─── §1  Jetons ─────────────────────────────────────────────────────────── */
:root{
  --blanc:#FFFFFF;
  --perle:#F4F5F7;
  --encre:#101216;
  --gris:#3E4249;
  --muet:#6C7076;
  --trait:rgba(16,18,22,.08);
  --trait-fort:rgba(16,18,22,.14);
  --point:#2F6BFF;
  --lien:#1F55E8;
  --nuit:#0C0E12;
  --nuit-texte:#F4F5F7;
  --nuit-muet:#9CA1A8;
  --nuit-trait:rgba(244,245,247,.10);

  --police:'Switzer',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Les trois courbes du site — jamais d'autre. */
  --ease-standard:cubic-bezier(.2,0,.38,.9);
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --ease-exit:cubic-bezier(.2,0,1,.9);
  --dur-1:150ms;   /* feedback */
  --dur-2:300ms;   /* transitions d'éléments */
  --dur-3:700ms;   /* révélations */

  /* Ombre multi-couches, teintée encre, même soleil partout (haut). */
  --ombre-carte:
    0 1px 1px rgba(16,18,22,.03),
    0 2px 2px rgba(16,18,22,.03),
    0 4px 4px rgba(16,18,22,.03),
    0 8px 8px rgba(16,18,22,.03),
    0 16px 16px rgba(16,18,22,.03);
  --ombre-scene:
    0 1px 2px rgba(16,18,22,.05),
    0 4px 8px rgba(16,18,22,.05),
    0 12px 24px rgba(16,18,22,.06),
    0 32px 64px rgba(16,18,22,.09),
    0 64px 128px rgba(16,18,22,.10);

  --rayon:18px;
  --rayon-pilule:999px;
  --colonne:1200px;
  --marge:clamp(20px, 4.5vw, 64px);
  --nav-h:64px;
}

/* ─── §2  Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  font-family:var(--police);
  font-size:16px;font-weight:420;line-height:1.6;letter-spacing:-.008em;
  color:var(--encre);background:var(--blanc);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:rgba(47,107,255,.16)}

/* Transitions inter-pages : View Transitions RETIRÉES délibérément.
   Cause prouvée en test réel (2026-07-29) : @view-transition{navigation:auto}
   + restauration bfcache = rendu gelé (rAF mort, page figée au bouton Retour,
   reproduit 4/4 en Chrome headless, disparaît sans la règle). Un fondu de
   250 ms ne vaut pas un risque de page morte : la fiabilité EST le premium.
   Ne pas réintroduire sans re-tester ce scénario précis. */

/* Focus clavier : double anneau (lisible sur tout fond), jamais supprimé. */
:focus{outline:none}
:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--blanc),0 0 0 4px var(--point);
  border-radius:6px;
}
.nuit :focus-visible{box-shadow:0 0 0 2px var(--nuit),0 0 0 4px var(--point)}

/* Accessibilité : lien d'évitement */
.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  background:var(--encre);color:#fff;padding:10px 18px;border-radius:var(--rayon-pilule);
  transform:translateY(-64px);transition:transform var(--dur-1) var(--ease-standard);
}
.skip:focus-visible{transform:none}

/* ─── §3  Typographie ────────────────────────────────────────────────────── */
h1,h2,h3{font-weight:580;line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
.t-hero{font-size:clamp(2.6rem,6.2vw,4.9rem)}
.t-section{font-size:clamp(2rem,4.3vw,3.4rem)}
.t-carte{font-size:clamp(1.25rem,1.8vw,1.5rem);letter-spacing:-.018em;line-height:1.2}
.sous{
  font-size:clamp(1.06rem,1.5vw,1.3rem);line-height:1.55;letter-spacing:-.012em;
  color:var(--gris);font-weight:430;max-width:34em;text-wrap:pretty;
}
.etiquette{
  font-size:.83rem;font-weight:500;letter-spacing:-.002em;color:var(--muet);
}
.chiffre{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.03em}

/* Le point de la marque : fin de titre, couleur cobalt. */
.pt{color:var(--point)}

/* Liens texte : souligné qui traverse (entre à gauche, sort à gauche). */
.lien{
  position:relative;color:var(--lien);font-weight:500;
  padding-bottom:2px;
}
.lien::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:bottom right;
  transition:transform var(--dur-2) var(--ease-standard);
}
.lien:hover::after{transform:scaleX(1);transform-origin:bottom left}
.nuit .lien{color:#9BB8FF}

/* ─── §4  Boutons ────────────────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:15px 30px;border-radius:var(--rayon-pilule);
  font-size:.98rem;font-weight:520;letter-spacing:-.006em;line-height:1;
  overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:color var(--dur-2) var(--ease-standard);
}
.btn-plein{background:var(--encre);color:#fff}
.btn-plein::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--point);
  transform:translateY(101%);transition:transform var(--dur-2) var(--ease-standard);
}
.btn-plein:hover::before{transform:translateY(0)}
.btn-contour{
  color:var(--encre);box-shadow:inset 0 0 0 1px var(--trait-fort);
  transition:box-shadow var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard);
}
.btn-contour:hover{box-shadow:inset 0 0 0 1px var(--encre)}
.nuit .btn-plein{background:var(--nuit-texte);color:var(--nuit)}
.nuit .btn-plein:hover{color:#fff}
.nuit .btn-contour{color:var(--nuit-texte);box-shadow:inset 0 0 0 1px var(--nuit-trait)}
.nuit .btn-contour:hover{box-shadow:inset 0 0 0 1px rgba(244,245,247,.5)}
[data-magnetique]{will-change:transform}

/* ─── §5  Navigation ─────────────────────────────────────────────────────── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:130;height:var(--nav-h);
  transition:background var(--dur-2) var(--ease-standard),
             box-shadow var(--dur-2) var(--ease-standard);
}
#nav.solid{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--trait);
}
@supports not (backdrop-filter:blur(1px)){
  #nav.solid{background:rgba(255,255,255,.95)}
}
.nav-int{
  max-width:calc(var(--colonne) + 2*var(--marge));margin:0 auto;height:100%;
  padding:0 var(--marge);display:flex;align-items:center;gap:28px;
}
.logo{display:flex;align-items:baseline;gap:1px;font-size:1.02rem;font-weight:580;letter-spacing:-.02em}
.logo b{color:var(--point);font-weight:700}
.nav-liens{display:flex;gap:26px;margin-left:auto}
.nav-liens a{
  position:relative;font-size:.92rem;font-weight:480;color:var(--gris);
  padding:6px 0;transition:color var(--dur-1) var(--ease-standard);
}
.nav-liens a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--encre);transform:scaleX(0);transform-origin:bottom right;
  transition:transform var(--dur-2) var(--ease-standard);
}
.nav-liens a:hover{color:var(--encre)}
.nav-liens a:hover::after{transform:scaleX(1);transform-origin:bottom left}
.nav-liens a[aria-current="page"]{color:var(--encre)}
.nav-liens a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{padding:11px 22px;font-size:.9rem}
.langues,.devises{display:flex;gap:2px;padding:3px;border-radius:var(--rayon-pilule);box-shadow:inset 0 0 0 1px var(--trait)}
.langues button,.devises button{
  padding:5px 10px;border-radius:var(--rayon-pilule);font-size:.78rem;font-weight:540;
  color:var(--muet);transition:color var(--dur-1) var(--ease-standard),background var(--dur-1) var(--ease-standard);
}
.langues button[aria-pressed="true"],.devises button[aria-pressed="true"]{background:var(--encre);color:#fff}

#burger{display:none}

/* Menu mobile plein écran */
#menu{
  position:fixed;inset:0;z-index:120;background:var(--blanc);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--marge);
  visibility:hidden;opacity:0;transform:translateY(-3%);
  transition:opacity var(--dur-2) var(--ease-exit),transform var(--dur-2) var(--ease-exit),visibility 0s var(--dur-2);
}
#menu.open{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .45s var(--ease-enter),transform .45s var(--ease-enter);
}
#menu a{
  font-size:clamp(1.9rem,7vw,2.6rem);font-weight:570;letter-spacing:-.025em;
  padding:12px 0;border-bottom:1px solid var(--trait);
}
#menu .menu-pied{margin-top:34px;display:flex;align-items:center;gap:18px}

@media (max-width:899px){
  .nav-liens,#nav .nav-cta,#nav .langues,#nav .devises{display:none}
  #burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;margin-left:auto;align-items:center;
  }
  #burger span{
    display:block;width:20px;height:1.6px;background:var(--encre);
    transition:transform var(--dur-2) var(--ease-standard),opacity var(--dur-1) var(--ease-standard);
  }
  #burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  #burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  #burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
}

/* ─── §6  Gabarit de section ─────────────────────────────────────────────── */
.section{padding:clamp(72px,10vw,128px) var(--marge)}
.section-int{max-width:var(--colonne);margin:0 auto}
.section-tete{max-width:720px;margin-bottom:clamp(36px,5vw,64px)}
.section-tete .etiquette{display:block;margin-bottom:14px}
.section-tete .sous{margin-top:18px}
.perle{background:var(--perle)}
.nuit{background:var(--nuit);color:var(--nuit-texte)}
.nuit .sous{color:var(--nuit-muet)}
.nuit .etiquette{color:var(--nuit-muet)}
/* Rendu différé des sections sous le pli */
.differee{content-visibility:auto;contain-intrinsic-size:auto 720px}

/* Séparateur qui s'évanouit aux extrémités */
.voile-trait{
  height:1px;border:0;
  background:linear-gradient(90deg,transparent,var(--trait-fort),transparent);
}

/* ─── §7  Révélation au viewport ─────────────────────────────────────────── */
/* L'état RÉVÉLÉ est le défaut. html.eteint est la couche « ordinaire »,
   posée avant le premier paint et retirée par le moteur (app.js). */
html.eteint .mes{opacity:0;transform:translateY(26px)}
.mes{
  transition:opacity var(--dur-3) var(--ease-enter),transform var(--dur-3) var(--ease-enter);
  transition-delay:calc(var(--i,0) * 70ms);
}
.mes.lu{opacity:1;transform:none}
html.eteint .mes.lu{opacity:1;transform:none}

/* ─── §8  Hero ───────────────────────────────────────────────────────────── */
.hero{
  padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) var(--marge) clamp(64px,8vw,110px);
}
.hero-int{max-width:var(--colonne);margin:0 auto}
.hero-texte{max-width:780px}
.hero h1{margin:18px 0 22px}
.hero .sous{margin-bottom:34px}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* La scène : cadre navigateur minimal autour du comparateur. */
.scene{
  margin-top:clamp(44px,6vw,72px);
  border-radius:var(--rayon);
  background:var(--blanc);
  box-shadow:var(--ombre-scene),0 0 0 1px var(--trait),var(--aura,0 0 rgba(0,0,0,0));
  overflow:hidden;
}
.scene-barre{
  display:flex;align-items:center;gap:6px;height:38px;padding:0 16px;
  border-bottom:1px solid var(--trait);
}
.scene-barre i{width:9px;height:9px;border-radius:50%;background:var(--trait-fort)}
.scene-legende{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:16px;
}
.scene-legende .etiquette b{color:var(--encre);font-weight:560}

/* ─── §9  Comparateur avant/après ────────────────────────────────────────── */
/* inherits:true est OBLIGATOIRE, pas un détail (D-043) : --ba-pos est posée sur
   .ba mais lue uniquement par un ENFANT (.ba-avant, via clip-path) et par les
   pseudo-éléments. Une propriété enregistrée non héritable ne descend pas :
   tous retombaient sur initial-value et le volet restait figé à 50 % à vie,
   pendant que le JS écrivait consciencieusement dans le vide. */
@property --ba-pos{syntax:'<percentage>';inherits:true;initial-value:50%}
.ba{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:16/10;
  --ba-pos:50%;
  cursor:ew-resize;
  touch-action:pan-y;             /* vertical = défilement, horizontal = la ligne */
  user-select:none;-webkit-user-select:none;
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-avant{clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0);z-index:2}
/* La ligne et sa poignée : le point de la marque. */
.ba::before{
  content:'';position:absolute;top:0;bottom:0;left:var(--ba-pos);width:1.5px;
  background:rgba(255,255,255,.92);z-index:3;transform:translateX(-50%);
  box-shadow:0 0 0 .5px rgba(16,18,22,.18);
}
/* Icône ↔ sur la poignée : le visiteur ne doit jamais hésiter sur le fait que
   ça se tire (retour Loan 2026-08-05). Chevrons en SVG plutôt qu'un glyphe
   unicode — rendu identique sur toutes les plateformes, contrairement à « ↔ »
   dont l'épaisseur et le centrage varient trop d'une police système à l'autre. */
.ba::after{
  content:'';position:absolute;top:50%;left:var(--ba-pos);z-index:4;
  width:34px;height:34px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--point) center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7 3 12l5 5M16 7l5 5-5 5'/%3E%3C/svg%3E");
  box-shadow:0 0 0 4px rgba(255,255,255,.92),0 4px 14px rgba(16,18,22,.3);
}
/* Le range est la voie clavier/lecteur d'écran : le glisser souris/doigt est
   géré en pointer events sur .ba (app.js §10) — le drag natif du range varie
   trop d'un moteur à l'autre (Safari iOS n'accroche que le pouce, invisible ici). */
.ba input[type=range]{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;
}
.js .ba input[type=range]{pointer-events:none}  /* sans JS : le range natif reste la seule prise */
/* Étiquettes avant/après — pastille blanche, texte noir (retour Loan 2026-08-05,
   itération 3 : retour au style d'origine, le texte blanc à contour ne s'intégrait
   pas au design). */
.ba-tag{
  position:absolute;top:14px;z-index:3;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
  background:#fff;color:#111;
  pointer-events:none;
}
.ba-tag.avant{left:18px}
.ba-tag.apres{right:18px}

/* Balayage d'accueil : un seul geste, puis la main. */
@keyframes ba-balayage{
  0%{--ba-pos:50%}
  38%{--ba-pos:12%}
  78%{--ba-pos:88%}
  100%{--ba-pos:50%}
}
.lu .ba:not(.manuel):not(.scrub){animation:ba-balayage 3.2s var(--ease-standard) .35s 1 both}
.ba.manuel,.ba.scrub{animation:none}

/* ─── §10  Chiffres de mesure ────────────────────────────────────────────── */
.mesures{display:grid;grid-template-columns:repeat(3,1fr)}
.mesure{padding:0 clamp(24px,3.4vw,48px);border-left:1px solid var(--trait)}
.mesure:first-child{padding-left:0;border-left:0}
.mesure .chiffre{display:block;font-size:clamp(3.2rem,7vw,5.4rem);line-height:1;color:var(--encre)}
.mesure .chiffre sub{font-size:.35em;font-weight:520;color:var(--muet);vertical-align:baseline}
.mesure p{margin-top:10px;font-size:.95rem;color:var(--gris);max-width:24em;text-wrap:pretty}
.methode-note{margin-top:clamp(32px,4vw,48px);font-size:.86rem;color:var(--muet);max-width:56em}
@media (max-width:719px){
  .mesures{grid-template-columns:1fr;gap:30px}
  .mesure{padding:0 0 0 0;border-left:0;border-top:1px solid var(--trait);padding-top:26px}
  .mesure:first-child{border-top:0;padding-top:0}
}

/* ─── §11  Tuiles de transformation ──────────────────────────────────────── */
.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
@media (max-width:1099px){
  .tuiles{grid-template-columns:1fr 1fr}
}
.tuile{
  border-radius:var(--rayon);background:var(--blanc);
  box-shadow:var(--ombre-carte),0 0 0 1px var(--trait),var(--aura,0 0 rgba(0,0,0,0));
  overflow:hidden;
  transition:transform var(--dur-2) var(--ease-standard);
}
.tuile .ba{border-radius:0}
.tuile-corps{padding:20px 22px 24px}
.tuile-corps .ecran{display:block;margin-bottom:10px;font-size:.78rem;letter-spacing:.01em}
.tuile-corps h3{margin-bottom:6px}
.tuile-corps .secteur{font-size:.88rem;color:var(--muet)}
.tuile-corps .gain{
  margin-top:14px;font-size:.98rem;font-weight:500;letter-spacing:-.01em;color:var(--gris);
}
.tuile-corps .scores{
  margin-top:10px;display:flex;align-items:baseline;gap:8px;
  font-size:.88rem;color:var(--muet);
}
.tuile-corps .scores b{font-size:1.3rem;color:var(--encre)}
.tuile-corps .scores .fleche{color:var(--point);font-weight:600}
.tuiles-pied{
  margin-top:clamp(30px,4vw,44px);display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.tuiles-pied p{font-size:.92rem;color:var(--muet);max-width:44em}
@media (max-width:859px){
  .tuiles{grid-template-columns:1fr}
}

/* ─── §12  Liste éditoriale (ce qui change) ──────────────────────────────── */
.change{display:flex;flex-direction:column}
.change-ligne{
  display:grid;grid-template-columns:64px 1fr 1.2fr;gap:clamp(16px,3vw,44px);
  align-items:baseline;padding:clamp(24px,3.4vw,40px) 0;
  border-top:1px solid var(--trait);
}
.change-ligne:last-child{border-bottom:1px solid var(--trait)}
.change-ligne .num{font-size:.88rem;font-weight:560;color:var(--muet);font-variant-numeric:tabular-nums}
.change-ligne h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.change-ligne p{color:var(--gris);max-width:34em;text-wrap:pretty}
@media (max-width:719px){
  .change-ligne{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .change-ligne .num{margin-bottom:2px}
}

/* ─── §13  Méthode (trois moments) ───────────────────────────────────────── */
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,48px)}
.moment .num{
  display:block;font-size:.9rem;font-weight:600;color:var(--lien);
  font-variant-numeric:tabular-nums;margin-bottom:14px;
}
.moment h3{font-size:clamp(1.2rem,1.9vw,1.45rem);margin-bottom:10px}
.moment p{color:var(--gris);font-size:.97rem;text-wrap:pretty}
.refus{
  margin-top:clamp(36px,5vw,56px);padding:22px 26px;border-radius:var(--rayon);
  background:var(--perle);color:var(--gris);font-size:.98rem;max-width:640px;
}
.refus b{color:var(--encre);font-weight:560}
@media (max-width:719px){
  .moments{grid-template-columns:1fr;gap:32px}
}

/* ─── §14  Formules ──────────────────────────────────────────────────────── */
/* Trois offres (D-044) : Stature au centre, en relief. Les deux autres
   l'encadrent — elles ne le concurrencent pas, elles le situent. */
.formules{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:clamp(18px,2.2vw,30px);align-items:stretch}
@media (max-width:1099px){.formules{grid-template-columns:1fr}}
.formule{
  display:flex;flex-direction:column;gap:0;
  padding:clamp(28px,3.6vw,44px);border-radius:var(--rayon);
  background:var(--blanc);box-shadow:0 0 0 1px var(--trait);
}
.formule.phare{box-shadow:0 0 0 1.5px var(--encre),var(--ombre-carte)}
.formule .nom{font-size:1.05rem;font-weight:560;letter-spacing:-.01em}
.formule .pour{margin-top:6px;font-size:.94rem;color:var(--muet)}
.formule .prix{
  margin:22px 0 4px;font-size:clamp(2.6rem,4.6vw,3.6rem);line-height:1;
  font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.formule .prix small{font-size:.34em;font-weight:500;color:var(--muet);letter-spacing:0}
.formule .paiement{font-size:.88rem;color:var(--muet)}
.formule ul{list-style:none;margin:24px 0 30px;display:flex;flex-direction:column;gap:10px}
.formule li{
  position:relative;padding-left:22px;font-size:.95rem;color:var(--gris);
}
.formule li::before{
  content:'';position:absolute;left:2px;top:.56em;width:7px;height:7px;
  border-radius:50%;background:var(--point);
}
.formule .btn{margin-top:auto;justify-content:center}

/* Détail déroulant de chaque offre : ferme par défaut, hauteur bornée large
   (pas de mesure JS du contenu) — overflow:hidden masque le surplus tant que
   .ouvert n'est pas posée. */
.voir-detail{
  display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
  margin:10px 0 4px -8px;padding:7px 8px;border:0;border-radius:8px;background:none;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:540;color:var(--lien);min-height:24px;
  -webkit-tap-highlight-color:transparent;
}
.voir-detail .vd-ouvert{display:none}
.voir-detail[aria-expanded="true"] .vd-ferme{display:none}
.voir-detail[aria-expanded="true"] .vd-ouvert{display:inline}
.detail{
  max-height:0;overflow:hidden;
  transition:max-height var(--dur-2) var(--ease-standard);
}
.detail.ouvert{max-height:1100px}
.detail-int{
  margin-top:16px;padding:18px 20px;border-radius:calc(var(--rayon) - 8px);
  background:var(--perle);
}
.detail-int .detail-intro{font-size:.86rem;font-weight:560;color:var(--gris);margin-bottom:10px}
.detail-int ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:8px}
.detail-int li{position:relative;padding-left:18px;font-size:.86rem;line-height:1.5;color:var(--gris)}
.detail-int li::before{
  content:'';position:absolute;left:2px;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--muet);
}
.detail-int .non-compris{margin-top:12px;font-size:.82rem;color:var(--muet)}
.detail-int .non-compris b{color:var(--gris);font-weight:560}

.formules-pied{margin-top:clamp(28px,3.6vw,40px);display:flex;gap:24px;align-items:baseline;flex-wrap:wrap}
.formules-pied p{font-size:.9rem;color:var(--muet)}
@media (max-width:799px){
  .formules{grid-template-columns:1fr}
}

/* ─── §15  L'appel (section nuit + formulaire) ───────────────────────────── */
.appel{position:relative}
.appel .section-int{max-width:820px;text-align:center}
.appel h2{margin-bottom:16px}
.appel .sous{margin:0 auto 40px}
.appel-form{
  display:flex;gap:12px;max-width:760px;margin:0 auto;
}
.appel-form .champ{flex:1 1 0}
.champ{position:relative}
.champ input,.champ select,.champ textarea{
  width:100%;padding:16px 20px;border-radius:14px;
  background:rgba(244,245,247,.06);
  border:1px solid var(--nuit-trait);
  color:var(--nuit-texte);
  transition:border-color var(--dur-1) var(--ease-standard),background var(--dur-1) var(--ease-standard);
}
.champ input::placeholder{color:var(--nuit-muet)}
.champ input:focus{border-color:rgba(47,107,255,.65);background:rgba(244,245,247,.08);outline:none;box-shadow:none}
.appel-note{margin-top:22px;font-size:.86rem;color:var(--nuit-muet)}
@media (max-width:719px){
  .appel-form{flex-direction:column}
  .appel-form .btn{width:100%}
}

/* Formulaire clair (page contact) */
.clair .champ input,.clair .champ select,.clair .champ textarea{
  background:var(--blanc);border:1px solid var(--trait-fort);color:var(--encre);
}
.clair .champ input::placeholder,.clair .champ textarea::placeholder{color:var(--muet)}
.clair .champ input:focus,.clair .champ select:focus,.clair .champ textarea:focus{
  border-color:var(--point);
}
.champ label{display:block;font-size:.88rem;font-weight:520;margin-bottom:8px}
.champ .aide{margin-top:6px;font-size:.82rem;color:var(--muet)}

/* Formulaire de contact (structure héritée : label.champ > span + champ) */
.ct-grille{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.ct-form{display:flex;flex-direction:column;gap:24px}
label.champ{margin:0}
.champ>span:first-child{display:block;font-size:.88rem;font-weight:520;margin-bottom:8px;color:var(--encre)}
.ct-req{color:var(--lien);font-weight:600}
.ct-opt{font-style:normal;color:var(--muet);font-size:.8rem;font-weight:420;margin-left:4px}
.ct-aide{margin-top:6px;font-size:.82rem;color:var(--muet)}
.ct-err{margin-top:6px;font-size:.82rem;color:#C42B2B}
.clair input[aria-invalid="true"],.clair textarea[aria-invalid="true"]{border-color:#C42B2B}
.ct-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ct-select{position:relative;display:block}
.ct-select::after{
  content:'';position:absolute;right:18px;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--muet);border-bottom:1.5px solid var(--muet);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.clair select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.clair textarea{resize:vertical;min-height:120px}
.ct-consent{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--gris)}
.ct-consent input{width:18px;height:18px;accent-color:var(--point);margin-top:2px;flex:none}
.ct-consent label{margin:0;font-weight:420}
.ct-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ct-envoi{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ct-statut{font-size:.88rem;color:var(--muet)}
.ct-ok{padding:clamp(28px,4vw,44px);border-radius:var(--rayon);background:var(--perle)}
.ct-ok h3{font-size:clamp(1.4rem,2.2vw,1.8rem);margin-bottom:12px}
.ct-ok p{color:var(--gris);max-width:38em}
.ct-ok .btn{margin-top:22px}
.ct-aside{display:flex;flex-direction:column;gap:22px}
.ct-carte{padding:clamp(22px,3vw,30px);border-radius:var(--rayon);box-shadow:0 0 0 1px var(--trait)}
.ct-carte h2{font-size:1.05rem;margin-bottom:10px}
.ct-carte p{font-size:.92rem;color:var(--gris);text-wrap:pretty}
.ct-carte .mail{display:inline-block;margin-top:6px;font-size:1.05rem;font-weight:560}
@media (max-width:899px){
  .ct-grille{grid-template-columns:1fr}
  .ct-duo{grid-template-columns:1fr}
}

@keyframes secousse{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* ─── §16  Relevé de performance + chrono ────────────────────────────────── */
#chrono{
  position:fixed;left:18px;bottom:18px;z-index:80;
  font-size:.78rem;color:var(--muet);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:var(--rayon-pilule);padding:8px 14px;
  box-shadow:0 0 0 1px var(--trait),0 2px 10px rgba(16,18,22,.06);
  opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-2) var(--ease-enter),transform var(--dur-2) var(--ease-enter);
  pointer-events:none;
}
#chrono.show{opacity:1;transform:none}
#chrono b{color:var(--encre);font-weight:560;font-variant-numeric:tabular-nums}
.releve{display:flex;gap:26px;flex-wrap:wrap;align-items:baseline}
.releve .etiquette{margin:0}
.releve b{
  font-weight:560;font-variant-numeric:tabular-nums;font-size:.95rem;
  opacity:0;transition:opacity .35s var(--ease-standard);
}
.releve.pret b{opacity:1}

/* ─── §17  Pied de page ──────────────────────────────────────────────────── */
footer{background:var(--nuit);color:var(--nuit-texte)}
.pied-int{
  max-width:calc(var(--colonne) + 2*var(--marge));margin:0 auto;
  padding:clamp(56px,7vw,88px) var(--marge) 36px;
}
.pied-haut{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(32px,5vw,72px);
  padding-bottom:clamp(36px,5vw,56px);
}
.pied-haut .logo{font-size:1.15rem}
.pied-haut .tagline{margin-top:10px;color:var(--nuit-muet);font-size:.95rem}
.pied-col .etiquette{color:var(--nuit-muet);display:block;margin-bottom:16px}
.pied-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.pied-col a,.pied-col p{font-size:.93rem;color:var(--nuit-texte)}
.pied-col p{color:var(--nuit-muet)}
.pied-col a{position:relative;padding-bottom:1px}
.pied-col a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:bottom right;
  transition:transform var(--dur-2) var(--ease-standard);
}
.pied-col a:hover::after{transform:scaleX(1);transform-origin:bottom left}
.pied-releve{
  border-top:1px solid var(--nuit-trait);padding:22px 0;
  color:var(--nuit-muet);font-size:.85rem;
}
footer .etiquette{color:var(--nuit-muet)}
.pied-releve .releve b{color:var(--nuit-texte)}
.pied-bas{
  border-top:1px solid var(--nuit-trait);padding-top:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.85rem;color:var(--nuit-muet);
}
.pied-bas nav{display:flex;gap:22px}
.pied-bas a{color:var(--nuit-muet);transition:color var(--dur-1) var(--ease-standard)}
.pied-bas a:hover{color:var(--nuit-texte)}
@media (max-width:799px){
  .pied-haut{grid-template-columns:1fr;gap:36px}
}

/* ─── §18  Bannière de confidentialité ───────────────────────────────────── */
#conf{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:110;
  max-width:420px;margin-left:auto;
  background:rgba(16,18,22,.92);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:var(--rayon);padding:20px 22px;
  box-shadow:var(--ombre-scene);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-enter),transform var(--dur-2) var(--ease-enter);
}
#conf.show{opacity:1;transform:none;pointer-events:auto}
#conf h2{font-size:.95rem;margin-bottom:6px}
#conf p{font-size:.84rem;color:rgba(255,255,255,.72);margin-bottom:14px}
#conf .actions{display:flex;align-items:center;gap:16px}
#conf .btn{background:#fff;color:var(--encre);padding:10px 20px;font-size:.86rem}
#conf .lien{color:#9BB8FF;font-size:.84rem}

/* ─── §19  Pages internes ────────────────────────────────────────────────── */
.page-tete{
  padding:calc(var(--nav-h) + clamp(40px,6vw,72px)) var(--marge) clamp(40px,6vw,64px);
}
.page-tete-int{max-width:var(--colonne);margin:0 auto}
.retour{
  display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muet);
  margin-bottom:26px;transition:color var(--dur-1) var(--ease-standard);
}
.page-tete .etiquette{display:block;margin-bottom:14px}
.retour:hover{color:var(--encre)}
.page-tete h1{margin:14px 0 18px}

/* Étapes (page comment) */
.etapes{display:flex;flex-direction:column}
.etape{
  display:grid;grid-template-columns:80px 1fr 200px;gap:clamp(16px,3vw,44px);
  padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--trait);
}
.etape:last-of-type{border-bottom:1px solid var(--trait)}
.etape .num{font-size:.9rem;font-weight:600;color:var(--lien);font-variant-numeric:tabular-nums}
.etape h2{font-size:clamp(1.35rem,2.3vw,1.8rem);margin-bottom:10px}
.etape p{color:var(--gris);max-width:44em;text-wrap:pretty}
.etape .duree{font-size:.86rem;color:var(--muet)}
.etape .duree b{display:block;color:var(--encre);font-weight:540;margin-top:4px}
@media (max-width:799px){
  .etape{grid-template-columns:1fr;gap:16px}
}

/* Cas portfolio (pleine largeur) */
.cas{margin-bottom:clamp(56px,8vw,96px)}
.cas .scene{margin-top:0}
.cas-corps{
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(20px,4vw,56px);
  margin-top:24px;align-items:baseline;
}
.cas-corps h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.cas-corps .secteur{margin-top:4px;font-size:.92rem;color:var(--muet)}
.cas-scores{display:flex;gap:34px;margin-top:18px}
.cas-scores .avant b,.cas-scores .apres b{
  display:block;font-size:clamp(2.2rem,4vw,3rem);line-height:1;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.cas-scores .avant b{color:var(--muet)}
.cas-scores .apres b{color:var(--point)}
.cas-scores span{font-size:.82rem;color:var(--muet)}
.cas-corps .recit{color:var(--gris);text-wrap:pretty}
@media (max-width:799px){
  .cas-corps{grid-template-columns:1fr;gap:18px}
}

/* Deux écrans par cas (D-044) : l'écran d'identité et celui où le client agit.
   Un seul écran par cas laissait croire qu'on ne sait produire qu'une page. */
.cas-ecrans{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,2.2vw,26px);align-items:start;
}
.cas-ecrans .scene{margin-top:0}
.cas-ecrans .ecran{margin:0}
.cas-ecrans figcaption{margin-top:12px}
@media (max-width:899px){
  .cas-ecrans{grid-template-columns:1fr;gap:26px}
}

/* FAQ (page offres) */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.faq-item .num{font-size:.85rem;font-weight:600;color:var(--lien);font-variant-numeric:tabular-nums}
.faq-item h3{font-size:clamp(1.15rem,1.8vw,1.4rem);margin:10px 0 10px}
.faq-item p{color:var(--gris);font-size:.96rem;text-wrap:pretty}
@media (max-width:799px){
  .faq{grid-template-columns:1fr}
}

/* Deux colonnes inclus / jamais inclus */
/* Trois colonnes (D-044) : inclus · en option · jamais inclus. Les options ont
   leur propre colonne — annoncées et chiffrées, elles rassurent au lieu
   d'inquiéter (recherche marché §D.4). */
.couverture{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
@media (max-width:1023px){.couverture{grid-template-columns:1fr}}
.couverture .option li::marker{color:var(--cobalt)}
.couverture ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px}
.couverture li{position:relative;padding-left:24px;color:var(--gris);font-size:.96rem}
.couverture .oui li::before{
  content:'';position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--point);
}
.couverture .non li::before{
  content:'';position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--muet);
}
@media (max-width:799px){
  .couverture{grid-template-columns:1fr}
}

/* ─── §19bis  Pages légales — couche de compatibilité ml-* ───────────────────
   Le contenu juridique (validé) est greffé tel quel depuis l'ancien gabarit :
   on style ses classes plutôt que de réécrire un texte légal. */
.large{max-width:860px;margin:0 auto;padding:0 var(--marge)}
.ml-barre{padding-top:calc(var(--nav-h) + 30px)}
.ml-barre .fl{margin-right:6px}
.ml-tete{padding:26px 0 6px}
.ml-tete .oeil{display:block;font-size:.83rem;font-weight:500;color:var(--muet);margin-bottom:14px}
.titre-reserve{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:16px}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;color:var(--gris);max-width:38em;text-wrap:pretty}
.source{display:block;margin-top:14px;font-size:.84rem;color:var(--muet)}
.ml-sommaire{margin:30px 0 6px}
.ml-sommaire .label{display:block;font-size:.8rem;color:var(--muet);margin-bottom:10px}
.ml-sommaire-liste{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;padding:0}
.ml-sommaire-liste a{font-size:.92rem;display:inline-flex;align-items:baseline;gap:8px}
.ml-sommaire-liste a i{font-style:normal;color:var(--lien);font-weight:600;font-variant-numeric:tabular-nums}
.sect{padding:10px 0 40px}
.ml-bloc{border-top:1px solid var(--trait);padding:32px 0;scroll-margin-top:calc(var(--nav-h) + 16px)}
.ml-bloc:first-of-type{border-top:0}
.ml-num{font-size:.85rem;font-weight:600;color:var(--lien);font-variant-numeric:tabular-nums;margin-bottom:18px}
.ml-bloc h2{font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:14px}
.ml-bloc p{color:var(--gris);margin-bottom:12px;max-width:48em;text-wrap:pretty}
.ml-bloc p:last-child{margin-bottom:0}
.ml-fort{color:var(--encre);font-weight:560}
.ml-identite{margin:16px 0}
.ml-ligne{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:7px 0}
.ml-ligne dt{color:var(--muet);font-size:.88rem}
.ml-ligne dd{margin:0}
.ml-encadre{background:var(--perle);border-radius:14px;padding:18px 22px;margin:14px 0}
.ml-fin{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}
.ml-mono,.lien-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
.rangee{display:flex;gap:12px;flex-wrap:wrap}
.h3{font-weight:560;color:var(--encre)}
.mt-s{margin-top:10px}
@media (max-width:599px){
  .ml-ligne{grid-template-columns:1fr;gap:2px}
}

/* ─── §21  Le point vivant — la signature de la marque ─────────────────────
   Le point cobalt n'est pas une couleur posée : c'est un organisme à grammaire
   stricte. Il SE POSE (fin du titre hero), il RESPIRE (poignée du comparateur
   hero tant qu'on ne l'a pas saisie — cadence 4 s, la plage du rythme
   respiratoire humain au repos), il TRAVAILLE (la poignée saisie), il CONCLUT
   (l'envoi du formulaire). Règles de rareté : jamais deux points animés dans
   le même viewport ; le point cobalt de fin de titre est réservé au hero et à
   la section de conclusion (fond nuit) — les autres titres gardent un point
   encre ; jamais d'animation en boucle hors état d'attente. */

/* Rareté : les titres de section repassent à l'encre… */
.t-section .pt{color:inherit}
/* …sauf la conclusion sur fond nuit : le point final de la page. */
.nuit .t-section .pt{color:var(--point)}

/* 1. Le point du titre hero SE POSE, 150 ms après la fin de l'entrée du titre. */
@keyframes pt-pose{
  from{transform:scale(0);opacity:0}
  62%{transform:scale(1.22);opacity:1}
  to{transform:none;opacity:1}
}
.js .t-hero .pt{display:inline-block;animation:pt-pose .26s var(--ease-enter) 1.12s both}

/* 2. La poignée du comparateur hero RESPIRE tant qu'elle n'a pas été saisie.
   Démarre après le balayage d'invitation (3,55 s), cesse définitivement au
   premier geste (.manuel). Compositor uniquement : transform seul. */
@keyframes pt-respire{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.07)}
}
.js #ba-hero:not(.manuel)::after{animation:pt-respire 4s ease-in-out 4.2s infinite}
#ba-hero.manuel::after{animation:none}

/* 3. Le point du logo : UNE pulsation au survol, jamais en boucle. */
@keyframes pt-pulse{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.logo b{display:inline-block}
.logo:hover b,.logo:focus-visible b{animation:pt-pulse .24s var(--ease-standard) 1}

/* 4. Le relevé de mesure : chaque valeur est certifiée d'un point qui se
   tamponne, en cascade de 60 ms. L'espace est réservé : zéro CLS. */
.releve b::before{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--point);margin-right:8px;vertical-align:baseline;
  transform:scale(0);transition:transform .3s var(--ease-enter);
}
.releve.pret b::before{transform:scale(1)}
.releve.pret b:nth-of-type(2)::before{transition-delay:.06s}
.releve.pret b:nth-of-type(3)::before{transition-delay:.12s}

/* 5. L'aura : une ombre cobalt à 4-5 %, réservée aux scènes de transformation.
   Invisible consciemment, perceptible face aux captures « avant ». */
.scene{--aura:0 28px 80px rgba(47,107,255,.05)}
.tuile{--aura:0 18px 48px rgba(47,107,255,.04)}

/* 6. L'attente d'un envoi de formulaire : UN point qui respire (jamais les
   trois points génériques). Posé par app.js sur le bouton pendant le réseau. */
.pt-attente{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:currentColor;vertical-align:middle;
  animation:pt-respire-libre 1.4s ease-in-out infinite;
}
@keyframes pt-respire-libre{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.5);opacity:1}}

/* ─── §20  Mouvement réduit ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .lu .ba:not(.manuel){animation:none}
  .js .t-hero .pt{animation:none}          /* le point est là, immobile */
  .js #ba-hero:not(.manuel)::after{animation:none}
  .pt-attente{animation:none;opacity:1}
}