@charset "utf-8";

/* =========================================================================
   mariusweb.fr, feuille unique
   Direction : "On vous a laisse dans le flou. Voila les chiffres." Voir DIRECTION.md
   ========================================================================= */

/* ---------- 1. Polices ---------- */

/* Space Grotesk, la police du lettrage de la marque. Le guide d'identite
   la fixe pour le nom ; elle porte donc aussi les titres du site, pour que
   l'en-tete et le premier titre soient dessines de la meme main.
   Voir CHARTE.md section 4.

   DECOUPAGE DU 17 AOUT 2026. Les cinq fichiers pesaient 50,6 des 97 ko de la
   page, plus que tout le reste reuni, et /verifications-techniques/ ecrivait
   que c'etait "le poste que je ne sais pas reduire sans retirer une graisse".
   Il l'etait sans en retirer aucune.

   Methode : le jeu de caracteres reellement employe par les seize pages, le
   script et llms.txt a ete releve, cent treize caracteres. Chaque police est
   coupee en deux, le jeu employe plus tout l'ASCII imprimable d'un cote, le
   reste du Latin-1 de l'autre. Le second fichier n'est telecharge que si un
   caractere de sa plage apparait, ce qui n'arrive que si un visiteur tape un
   nom comme Muller ou Nunez dans un champ. Tout l'ASCII est dans le premier
   fichier pour qu'une saisie ordinaire n'en declenche jamais le chargement.

   Conserve : le crenage (kern) et les chiffres tabulaires (tnum), ce dernier
   parce que la colonne des montants du devis (.el-v) est en Atkinson avec
   font-variant-numeric:tabular-nums. Retire : frac, liga, locl et pnum, que
   le site n'emploie nulle part.

   Resultat mesure : 50,6 ko a 33,0 ko en premiere visite, moins 34,8 %. */
@font-face{
  font-family:"Space";
  src:url("/fonts/space-latin.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+00C0,U+00C2,U+00C7-00CA,U+00CE,U+00D4,U+00D9,U+00DB,U+00E0,U+00E2,U+00E7-00EA,U+00EE,U+00F4,U+00F9,U+00FB,U+2014,U+2018,U+201A,U+201C-201D,U+20AC;
}
@font-face{
  font-family:"Space";
  src:url("/fonts/space-rare.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+000D,U+00A1-00A8,U+00AA-00B6,U+00B8-00BF,U+00C1,U+00C3-00C6,U+00CB-00CD,U+00CF-00D3,U+00D5-00D8,U+00DA,U+00DC-00DF,U+00E1,U+00E3-00E6,U+00EB-00ED,U+00EF-00F3,U+00F5-00F8,U+00FA,U+00FC-00FF,U+2013,U+2019,U+2026;
}
@font-face{
  font-family:"Space";
  src:url("/fonts/space-latin-ext.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0152-0153;
}
@font-face{
  font-family:"AtkFallback";
  src:local("Arial");
  size-adjust:102%; ascent-override:93%; descent-override:24%; line-gap-override:0%;
}
@font-face{
  font-family:"SpaceFallback";
  src:local("Arial");
  size-adjust:100%; ascent-override:98%; descent-override:24%; line-gap-override:0%;
}
/* Atkinson Hyperlegible Next, dessinee par le Braille Institute pour que des
   caracteres proches ne puissent pas etre confondus. Voir DIRECTION.md. */
@font-face{
  font-family:"Atkinson";
  src:url("/fonts/atk-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+00C0,U+00C2,U+00C7-00CA,U+00CE,U+00D4,U+00D9,U+00DB,U+00E0,U+00E2,U+00E7-00EA,U+00EE,U+00F4,U+00F9,U+00FB,U+0152-0153,U+2014,U+2018,U+201A,U+201C-201D,U+20AC;
}
@font-face{
  font-family:"Atkinson";
  src:url("/fonts/atk-400-rare.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+00A1-00A8,U+00AA-00AC,U+00AE-00B4,U+00B6,U+00B8-00BF,U+00C1,U+00C3-00C6,U+00CB-00CD,U+00CF-00D3,U+00D5-00D8,U+00DA,U+00DC-00DF,U+00E1,U+00E3-00E6,U+00EB-00ED,U+00EF-00F3,U+00F5-00F8,U+00FA,U+00FC-00FF,U+2009,U+2013,U+2019,U+2026;
}
@font-face{
  font-family:"Atkinson";
  src:url("/fonts/atk-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+00C0,U+00C2,U+00C7-00CA,U+00CE,U+00D4,U+00D9,U+00DB,U+00E0,U+00E2,U+00E7-00EA,U+00EE,U+00F4,U+00F9,U+00FB,U+0152-0153,U+2014,U+2018,U+201A,U+201C-201D,U+20AC;
}
@font-face{
  font-family:"Atkinson";
  src:url("/fonts/atk-600-rare.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+00A1-00A8,U+00AA-00AC,U+00AE-00B4,U+00B6,U+00B8-00BF,U+00C1,U+00C3-00C6,U+00CB-00CD,U+00CF-00D3,U+00D5-00D8,U+00DA,U+00DC-00DF,U+00E1,U+00E3-00E6,U+00EB-00ED,U+00EF-00F3,U+00F5-00F8,U+00FA,U+00FC-00FF,U+2009,U+2013,U+2019,U+2026;
}
@font-face{
  font-family:"Atkinson";
  src:url("/fonts/atk-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+00C0,U+00C2,U+00C7-00CA,U+00CE,U+00D4,U+00D9,U+00DB,U+00E0,U+00E2,U+00E7-00EA,U+00EE,U+00F4,U+00F9,U+00FB,U+0152-0153,U+2014,U+2018,U+201A,U+201C-201D,U+20AC;
}
@font-face{
  font-family:"Atkinson";
  src:url("/fonts/atk-700-rare.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+00A1-00A8,U+00AA-00AC,U+00AE-00B4,U+00B6,U+00B8-00BF,U+00C1,U+00C3-00C6,U+00CB-00CD,U+00CF-00D3,U+00D5-00D8,U+00DA,U+00DC-00DF,U+00E1,U+00E3-00E6,U+00EB-00ED,U+00EF-00F3,U+00F5-00F8,U+00FA,U+00FC-00FF,U+2009,U+2013,U+2019,U+2026;
}

/* ---------- 2. Primitives ---------- */
/* Direction "Contraste", fond sombre et bleu Klein.
   Tous les rapports ci-dessous sont calcules, pas estimes. */

:root{
  /* Fonds */
  --c-void:       #0B0C0F;   /* page */
  --c-surface:    #14161B;   /* cartes */
  --c-surface-2:  #1E212A;   /* champs, bandes creusees */
  --c-surface-3:  #262A34;   /* survol */

  /* Traits */
  --c-line:       #313642;   /* filets decoratifs */
  --c-border:     #666F82;   /* bordures de controle, 3.88:1 sur le fond */

  /* Textes */
  --c-text:       #F4F5F7;   /* 17.93:1 */
  --c-mute:       #959DAD;   /* 7.18:1 */
  --c-dim:        #828BA0;   /* metadonnees, 5.73:1 void, 5.30 surface, 4.71 surface-2 */

  /* Bleu Klein */
  --c-klein:      #002FA7;   /* surface d'accent, blanc dessus 10.69:1 */
  --c-klein-lift: #2452E8;   /* survol */
  --c-klein-clair:#3F6BFF;   /* symbole de marque sur fond sombre, 4.43:1 */
  --c-klein-text: #8AA6FF;   /* accent en texte, 8.36:1 */
  --c-klein-dim:  #17204A;   /* fond teinte tres sombre */

  /* Jetons valables uniquement SUR un aplat Klein. Le Klein devient une
     surface, pas seulement un accent : la strategie declaree est "engagee",
     soit 30 a 60 % de la page, et elle etait executee a 8,3 %.
     Tous les rapports ci-dessous sont calcules sur #002FA7. */
  --on-klein:      #FFFFFF;  /* texte principal, 10.69:1 */
  --on-klein-2:    #C3CEE8;  /* texte secondaire, 6.78:1 */
  --on-klein-line: #6A8CD4;  /* filet et bordure de composant, 3.21:1 */
  --on-klein-sunk: #001C5E;  /* surface creusee, blanc dessus 15.82:1 */

  /* Troisieme contexte : le contenu pose sur une carte blanche a l'interieur
     d'une bande Klein. Il ne se decrit ni par les jetons sombres ni par les
     jetons --on-klein, et il vivait en dur dans dix-huit declarations. */
  --on-pale-2:     #2B3F73;  /* texte secondaire sur carte blanche, 10.19:1 */
  --on-pale-3:     #4A5B87;  /* metadonnee sur carte blanche, 6.69:1 */
  --on-pale-line:  #8698C8;  /* filet sur carte blanche, 2.86:1, non textuel */
  --c-klein-deep:  #00185A;  /* survol creuse sur Klein, blanc dessus 16.43:1 */

  /* Echelle d'erreur en polarite claire. Le jeton --c-error existant sert le
     theme sombre ; ces six-la servaient sans nom la carte blanche et la carte
     rouge de refus. */
  --c-error-ink:   #8B1A1A;  /* titre de refus, 9.29:1 blanc, 8.57:1 pale */
  --c-error-body:  #5A2020;  /* texte de refus sur pale, 11.65:1 */
  --c-error-pale:  #FFF3F3;  /* surface de refus, claire */
  --c-error-deep:  #5E0F0F;  /* surface de refus, sombre */
  --c-error-line:  #FFC2C2;  /* 8.86:1 sur deep, 7.00:1 sur Klein plein */
  --c-error-2:     #FFD6D6;  /* texte secondaire sur deep, 10.21:1 */

  /* Points hauts des effets, jusqu'ici ecrits en dur dans les degrades. */
  --on-klein-hi:   #A8BEFF;  /* pointe du faisceau de bordure */
  --on-brand-hi:   #DCE6FF;  /* pointe du balayage de la marque */

  /* Hauteur de l'en-tete colle. Trois elements fixes en dependent depuis
     que le bandeau de devis et le filet de lecture existent. */
  --h-hdr:         68px;

  /* Empilement nomme. Sept valeurs ad hoc auparavant, sans ordre lisible :
     savoir si 99 passait au-dessus ou en dessous de 100 demandait de relire
     le fichier. L'ordre est ici, une fois. */
  --z-fond:      0;    /* contenu sous une lueur ou un faisceau */
  --z-contenu:   1;    /* contenu au-dessus */
  --z-collant:  60;    /* bandeau de resultat, colle sous l'en-tete */
  --z-lecture:  99;    /* filet de progression, juste sous l'en-tete */
  --z-entete:  100;    /* en-tete collee */
  --z-barre:   120;    /* barre d'action fixe du bas */
  --z-evite:   200;    /* lien d'evitement, toujours au-dessus de tout */

  /* Elevation. Deux niveaux nommes plutot que quatre ombres litterales. */
  --sh-card: 0 20px 44px -20px rgb(0 0 0 / .55), 0 3px 10px -4px rgb(0 0 0 / .40);
  --sh-lift: 0 26px 52px -22px rgb(0 0 0 / .62), 0 3px 10px -4px rgb(0 0 0 / .40);

  --c-error:      #FF8080;   /* 8.06:1 */

  /* Espace */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;   --s-5:1.5rem;
  --s-6:2rem;   --s-7:3rem;   --s-8:4rem;   --s-9:6rem;   --s-10:8rem;

  /* Typo */
  --f-display:"Space","SpaceFallback",ui-sans-serif,"Segoe UI",Roboto,sans-serif;
  --f-body:"Atkinson","AtkFallback",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular","Menlo",monospace;

  --t-display: clamp(2.5rem, 1.05rem + 6vw, 5.5rem);
  --t-h1:      clamp(2.125rem, 1.2rem + 3.6vw, 3.75rem);
  --t-h2:      clamp(1.75rem, 1.15rem + 2.3vw, 2.875rem);
  --t-h3:      clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);
  --t-body:    clamp(1.0625rem, 1.02rem + .18vw, 1.1875rem);
  --t-small:   .9375rem;
  --t-micro:   .8125rem;
  /* Trois paliers qui existaient deja, ecrits en dur 30 fois. Nommer ne change
     aucune valeur, c'est le controle avant-apres qui le prouve. */
  --t-sub:     1.125rem;   /* sous-titre de carte, bouton large, nom de marque */
  --t-fix:     1.0625rem;  /* corps qui ne grandit pas : options, listes denses */
  --t-ui:      1rem;       /* etiquette de champ, cellule de tableau */
  --t-nano:    .75rem;     /* etiquette monospace ou capitale, la plus petite */

  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-quart:cubic-bezier(.25,1,.5,1);
  --d-fast:140ms; --d-mid:220ms; --d-slow:300ms;

  /* Couche semantique */
  --bg:            var(--c-void);
  --bg-raised:     var(--c-surface);
  --bg-sunken:     var(--c-surface-2);
  --fg:            var(--c-text);
  --fg-muted:      var(--c-mute);
  --fg-subtle:     var(--c-dim);
  --border:        var(--c-line);
  --accent:        var(--c-klein);
  --accent-text:   var(--c-klein-text);
  --accent-hover:  var(--c-klein-lift);
  --accent-wash:   var(--c-klein-dim);
  --brand-mark:    var(--c-klein-clair);
  --bg-hover:      var(--c-surface-3);
  --border-strong: var(--c-border);
  --danger:        var(--c-error);
  --focus:         var(--c-klein-text);

  --measure:68ch;
  --wrap:78rem;
  --wrap-narrow:46rem;

  color-scheme:dark;
}

/* ---------- 3. Base ---------- */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}
body{
  margin:0;
  font-variant-numeric:tabular-nums;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.022em;
  margin:0 0 var(--s-4);
  text-wrap:balance;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.012em}
p{margin:0 0 var(--s-4);max-width:var(--measure);text-wrap:pretty}
a{color:var(--accent-text);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 var(--s-4);padding-left:1.15rem}
li{margin-bottom:var(--s-2);max-width:var(--measure)}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--border);margin:var(--s-7) 0}
::selection{background:var(--accent);color:var(--on-klein)}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}
.cta-band :focus-visible,
.mobile-bar .is-primary:focus-visible{
  outline-color:var(--on-klein);
  box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 70%,transparent);
}
:focus:not(:focus-visible){outline:none}

.skip{
  position:fixed;left:var(--s-4);top:var(--s-4);z-index:var(--z-evite);
  transform:translateY(-8rem);
  background:var(--accent);color:var(--on-klein);
  padding:var(--s-3) var(--s-5);border-radius:var(--radius);
  font-weight:600;text-decoration:none;
  transition:transform var(--d-fast) var(--e-out);
}
.skip:focus{transform:translateY(0)}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- 4. Structure ---------- */

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-n{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
@media (min-width:48rem){.wrap,.wrap-n{width:min(100% - 4rem,var(--wrap))}
  .wrap-n{width:min(100% - 4rem,var(--wrap-narrow))}}

section{padding-block:var(--s-9)}
section.tight{padding-block:var(--s-8)}
@media (max-width:47.99rem){section{padding-block:var(--s-8)}}

.eyebrow{
  font-family:var(--f-body);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin:0 0 var(--s-4);
  display:flex;align-items:center;gap:var(--s-3);
}
.eyebrow::before{
  content:"";width:1.75rem;height:2px;background:var(--accent);flex:none;
}
.lede{font-family:var(--f-display);font-weight:400;font-size:clamp(1.125rem,1rem + .55vw,1.4375rem);line-height:1.42;letter-spacing:-.012em;color:var(--fg-muted)}

/* ---------- 5. Boutons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;padding:.85rem 1.6rem;
  font-family:var(--f-body);font-size:var(--t-fix);font-weight:600;line-height:1.2;
  border:2px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out),
             color var(--d-fast) var(--e-out),
             transform var(--d-fast) var(--e-out);
}
.btn-primary{background:var(--accent);color:var(--on-klein);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--fg);background:var(--bg-sunken)}
.btn-ghost:active{background:var(--bg-hover);transform:translateY(1px)}
.btn-lg{min-height:58px;padding:var(--s-4) var(--s-6);font-size:var(--t-sub)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}

/* ---------- 6. En-tête ---------- */

.hdr{
  position:sticky;top:0;z-index:var(--z-entete);
  background:color-mix(in oklab,var(--bg) 82%,transparent);
  border-bottom:1px solid transparent;
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  transition:border-color var(--d-mid) var(--e-out),background-color var(--d-mid) var(--e-out);
}
.hdr.is-stuck{border-bottom-color:var(--border);background:color-mix(in oklab,var(--bg) 92%,transparent)}
.hdr-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);min-height:68px}

/* Le nom de la marque, tel que le guide d'identite le fixe : Marius en
   Medium 500, Web en Bold 700, interlettrage resserre de 0,8 %.
   Le guide autorise le texte vivant sur le site, la police y etant chargee. */
/* 44 px de zone active : le verrouillage ne mesurait que 30 px de haut, sous
   la ligne de confort, alors que c'est le retour a l'accueil. La taille
   visible ne bouge pas, seule la zone receptive grandit. En-tete verifiee a
   69 px apres coup, --h-hdr reste juste. */
.brand{
  display:inline-flex;align-items:center;gap:.62rem;white-space:nowrap;
  min-height:44px;
  font-family:var(--f-display);font-size:var(--t-sub);
  letter-spacing:-.008em;color:var(--fg);text-decoration:none;flex:none;
}
.brand-nom{display:inline-block}
.bn-1{font-weight:500}
.bn-2{font-weight:700}
/* Symbole Marius Web, quatre lames de raison 0,618. Le guide d'identite
   interdit le Klein #002FA7 sur fond sombre : mesure sur ce fond, 1,83:1.
   Sur fond sombre c'est le Klein eclairci #3F6BFF, sans exception. */
.mw{width:30px;height:30px;flex:none}
.mw rect{fill:var(--brand-mark)}

/* Le seul mouvement que la marque autorise : les lames arrivent ecartees et
   se resserrent, une fois, a l'ouverture. C'est la seule exception au plafond
   de 300 ms de la CHARTE, elle est ecrite et elle ne s'etend a rien d'autre. */
@media (prefers-reduced-motion: no-preference){
  .mw rect{animation:mw-compression .55s cubic-bezier(.22,1,.36,1) both}
  .mw rect:nth-of-type(2){--dx:5px;  animation-delay:.05s}
  .mw rect:nth-of-type(3){--dx:9px;  animation-delay:.10s}
  .mw rect:nth-of-type(4){--dx:12px; animation-delay:.15s}
}
@keyframes mw-compression{
  from{transform:translateX(var(--dx,0px))}
  to{transform:translateX(0)}
}


.nav{display:none;margin-left:auto;align-items:center;gap:var(--s-1)}
@media (min-width:60rem){.nav{display:flex}}
@media (min-width:60rem) and (max-width:68rem){
  .nav a{font-size:.875rem;padding:.65rem .45rem}
  .hdr .btn{padding:.6rem .8rem;font-size:.875rem}
  .brand{font-size:var(--t-ui)}
}
.nav a{
  color:var(--fg-muted);text-decoration:none;font-size:var(--t-small);font-weight:400;
  padding:.65rem .6rem;border-radius:var(--radius-sm);white-space:nowrap;flex:none;
  transition:color var(--d-fast) var(--e-out),background-color var(--d-fast) var(--e-out);
}
.nav a:hover{color:var(--fg);background:var(--bg-raised)}
.nav a:active{background:var(--bg-sunken)}
.nav a[aria-current="page"]{color:var(--fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent-text)}
.hdr .btn{min-height:44px;padding:.6rem 1.1rem;font-size:var(--t-small)}
.hdr-cta{display:none;margin-left:var(--s-3)}
@media (min-width:60rem){.hdr-cta{display:inline-flex}}

.burger{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;min-width:44px;padding:.5rem .85rem;
  background:transparent;border:1px solid var(--border-strong);border-radius:var(--radius);
  font-family:var(--f-body);font-size:var(--t-small);font-weight:600;color:var(--fg);cursor:pointer;
}
@media (min-width:60rem){.burger{display:none}}
/* Le burger etait le seul bouton du site sans survol ni appui. Il reste
   visible avec un pointeur sous 60rem et sur un ordinateur tactile. */
.burger:hover{background:var(--bg-raised);border-color:var(--fg)}
.burger:active{background:var(--bg-sunken);transform:scale(.96)}
.burger-ico{position:relative;width:18px;height:12px;flex:none}
.burger-ico i{
  position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;
  transition:transform var(--d-mid) var(--e-out),opacity var(--d-fast) linear;
}
.burger-ico i:nth-child(1){top:0}
.burger-ico i:nth-child(2){top:5px}
.burger-ico i:nth-child(3){top:10px}
.burger[aria-expanded="true"] .burger-ico i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-ico i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-ico i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.drawer{
  display:none;border-top:1px solid var(--border);
  background:var(--bg);padding:var(--s-4) 0 var(--s-6);
}
.drawer.is-open{display:block;max-height:calc(100dvh - var(--h-hdr));overflow-y:auto;overscroll-behavior:contain}
@media (min-width:60rem){.drawer,.drawer.is-open{display:none}}
.drawer a{
  display:block;padding:.95rem .25rem;color:var(--fg);text-decoration:none;
  font-size:var(--t-fix);font-weight:400;border-bottom:1px solid var(--border);
}
.drawer a[aria-current="page"]{color:var(--accent-text);font-weight:600}
.drawer a:active{background:var(--bg-raised)}
.drawer .btn{width:100%;margin-top:var(--s-5)}
.drawer .drawer-tel{margin-top:var(--s-3)}

/* ---------- 7. Héros ---------- */

.hero{padding-block:var(--s-6) var(--s-8);position:relative}
@media (min-width:48rem){.hero{padding-block:var(--s-8) var(--s-9)}}
@media (min-width:64rem){.hero{padding-block:var(--s-9) var(--s-10)}}
.hero-grid{display:grid;gap:var(--s-7)}
@media (min-width:64rem){
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:start}
}
.hero h1{
  font-size:var(--t-display);
  letter-spacing:-.032em;
  line-height:.98;
  margin-bottom:var(--s-5);
}
.hero h1 .accent{color:var(--accent-text)}
.hero-sub{font-family:var(--f-display);font-weight:400;font-size:clamp(1.125rem,1rem + .6vw,1.5rem);line-height:1.38;letter-spacing:-.014em;color:var(--fg-muted);max-width:46ch}
.hero-cta{margin-top:var(--s-6)}
.hero-note{margin-top:var(--s-4);font-size:var(--t-small);color:var(--fg-subtle);max-width:42ch}

.price-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;margin-top:var(--s-6);max-width:32rem;
}
.price-pair div{background:var(--bg-raised);padding:var(--s-5)}
.price-pair .amt{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2rem,1.4rem + 2.2vw,2.75rem);line-height:1;letter-spacing:-.03em;
}
.price-pair .lbl{display:block;margin-top:.4rem;font-size:var(--t-small);color:var(--fg-muted)}

/* Carte de confiance du héros */
/* Deux des quatre promesses sont reprises plus bas dans la section des
   limites. Sur telephone, ou la page fait vingt ecrans, elles ne sont dites
   qu'une fois : 297 px de moins. Sur ordinateur la page fait onze ecrans et
   la carte a besoin de sa hauteur pour equilibrer la colonne du heros, donc
   les quatre restent. */
@media (max-width:63.99rem){.trust .hors-tel{display:none}}
.trust{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg-raised);padding:var(--s-6);
}
.trust h2{font-size:var(--t-fix);font-family:var(--f-body);font-weight:600;letter-spacing:0;margin-bottom:var(--s-4)}
.trust ul{list-style:none;padding:0;margin:0}
.trust li{
  display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-3) 0;border-bottom:1px solid var(--border);
  font-size:var(--t-small);line-height:1.5;color:var(--fg-muted);margin:0;
}
.trust li:last-child{border-bottom:0;padding-bottom:0}
.trust li b{color:var(--fg);font-weight:600;display:block}
.tick{flex:none;width:20px;height:20px;margin-top:2px;color:var(--accent-text)}

/* ---------- 8. Cover Flow ---------- */

.cf-head{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:flex-end;justify-content:space-between;margin-bottom:var(--s-7)}

/* Etat par defaut : grille. Sans JS, petit ecran, mouvement reduit. */
.cf-track{display:grid;gap:var(--s-7) var(--s-6);grid-template-columns:1fr}
@media (min-width:48rem){.cf-track{grid-template-columns:1fr 1fr}}
.cf-item{margin:0}
.cf-ctrl{display:none}
.cf-item figcaption{padding-top:var(--s-4)}
.cf-tag{
  font-family:var(--f-body);font-size:var(--t-nano);font-weight:600;letter-spacing:.14em;
  color:var(--fg-subtle);text-transform:uppercase;display:block;margin-bottom:var(--s-2);
}
.cf-item figcaption h3{margin-bottom:var(--s-2)}
.cf-item figcaption p{color:var(--fg-muted);font-size:var(--t-fix);margin-bottom:var(--s-2)}
.cf-open{font-weight:600}

.cf-card{
  display:block;text-decoration:none;color:inherit;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg-raised);
  border:1px solid var(--border);
  transition:border-color var(--d-mid) var(--e-out),transform var(--d-mid) var(--e-out);
}
.cf-card img{width:100%;aspect-ratio:1.85/1;object-fit:cover;object-position:top center;background:var(--bg-sunken)}
.cf-card:hover{border-color:var(--fg)}

/* Etat enrichi : le vrai Cover Flow */
.cf.is-cf .cf-stage{
  position:relative;
  height:clamp(205px,24.5vw,300px);
  perspective:1600px;
  perspective-origin:50% 42%;
  touch-action:pan-y;
}
.cf.is-cf .cf-track{
  display:block;position:absolute;inset:0;
  transform-style:preserve-3d;
}
.cf.is-cf .cf-item{
  position:absolute;top:0;left:50%;
  width:clamp(240px,33vw,468px);
  margin-left:calc(clamp(240px,33vw,468px) / -2);
  transform-style:preserve-3d;
  transition:transform var(--d-slow) var(--e-quart),opacity var(--d-mid) var(--e-out);
  will-change:transform;
}
.cf.is-cf .cf-card{
  border-radius:var(--radius-lg);
  box-shadow:var(--sh-card);
}
.cf.is-cf .cf-card:hover{transform:none}
.cf.is-cf .cf-item[data-pos="0"] .cf-card{border-color:var(--fg)}
.cf.is-cf .cf-ctrl{display:flex}

.cf-meta{margin-top:var(--s-5);text-align:center;max-width:46rem;margin-inline:auto}
.cf-meta:empty{display:none}
.cf-meta figcaption{display:none;padding:0}
.cf-meta figcaption.is-active{display:block;animation:cfIn 300ms var(--e-out)}
@keyframes cfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cf-meta p{margin-inline:auto;max-width:58ch}

.cf-ctrl{align-items:center;justify-content:center;gap:var(--s-3);margin-top:var(--s-5)}
.cf-btn{
  width:48px;height:48px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--border-strong);border-radius:50%;
  color:var(--fg);cursor:pointer;
  transition:background-color var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out);
}
.cf-btn:hover:not(:disabled){background:var(--bg-raised);border-color:var(--fg)}
.cf-btn:active:not(:disabled){background:var(--bg-sunken);transform:scale(.94)}
.cf-btn:disabled{opacity:.35;cursor:not-allowed}
.cf-dots{display:flex;gap:var(--s-1);align-items:center}
.cf-dot{
  width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.cf-dot::after{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--border-strong);
  transition:background-color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
.cf-dot[aria-current="true"]::after{background:var(--accent-text);transform:scale(1.4)}
.cf-dot:hover::after{background:var(--fg-muted)}
.cf-dot:active::after{background:var(--fg)}

/* ---------- 9. Offre ---------- */

.offer{display:grid;gap:var(--s-6)}
/* minmax(0,1fr) et non 1fr : la valeur par defaut est min-content, donc
   pendant le remplacement des polices le montant en police de repli
   elargissait sa colonne. Trois pixels de defilement horizontal a 768 px,
   reproduits 2 fois sur 8, disparus une fois les polices posees. */
@media (min-width:56rem){.offer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.plan{
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s-6);
  background:var(--bg-raised);display:flex;flex-direction:column;
}
.plan.is-featured{border-color:var(--accent-text);background:var(--accent-wash)}
/* flex-wrap : en chasse tabulaire pendant le comptage, "800 €" gagne une
   fraction de pixel et poussait la carte hors du cadre a 375 px. */
.plan-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-2)}
.plan-top h2,.plan-top h3{min-width:0;overflow-wrap:anywhere}
.plan h3{margin:0}
/* Le compteur reecrit le texte hors du cycle de rendu, et la taille de base
   de l'element flexible restait figee a 20 px pendant que son contenu en
   demandait 95 : de 1 a 10 px de defilement horizontal selon la largeur,
   jusqu'a ce qu'un autre calcul de mise en page survienne une seconde plus
   tard. min-width:max-content epingle la boite sur son contenu, flex:none
   empeche la compression. Mesure : 9 largeurs, 0 partout. */
.plan .amt{flex:none;min-width:max-content;font-family:var(--f-display);font-weight:700;font-size:clamp(1.75rem,1.4rem + 1.4vw,2.25rem);letter-spacing:-.03em;line-height:1;white-space:nowrap}
.plan .who{color:var(--fg-muted);font-size:var(--t-small);margin-bottom:var(--s-5)}
.plan ul{list-style:none;padding:0;margin:0 0 var(--s-6);flex:1}
.plan li{display:flex;gap:var(--s-3);font-size:var(--t-ui);line-height:1.5;color:var(--fg-muted);margin-bottom:var(--s-3)}
.plan .btn{width:100%}

.incl{
  margin-top:var(--s-7);border:1px solid var(--border);border-radius:var(--radius);
  overflow:clip;overflow-clip-margin:8px;
}
.incl > div{padding:var(--s-5) var(--s-6);display:grid;gap:var(--s-2)}
@media (min-width:44rem){.incl > div{grid-template-columns:11rem 1fr;gap:var(--s-5);align-items:start}}
.incl > div + div{border-top:1px solid var(--border)}
.incl dt{font-weight:600;font-size:var(--t-small);letter-spacing:.02em;text-transform:uppercase;color:var(--fg-subtle);margin:0}
.incl dd{margin:0;color:var(--fg-muted)}
.incl dd p:last-child{margin-bottom:0}

/* ---------- 11. Preuve, méthode, objections ---------- */

.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-6);counter-reset:st}
@media (min-width:56rem){.steps{grid-template-columns:repeat(4,1fr);gap:var(--s-5)}}
.steps li{counter-increment:st;margin:0;max-width:none;padding-top:var(--s-4);border-top:1px solid var(--accent-text)}
.steps li::before{
  content:counter(st,decimal-leading-zero);
  display:block;font-family:var(--f-mono);font-size:var(--t-nano);color:var(--accent-text);margin-bottom:var(--s-3);
}
.steps h3{font-size:var(--t-sub);margin-bottom:var(--s-2)}
.steps p{font-size:var(--t-ui);color:var(--fg-muted);margin:0}

.obj{display:grid;gap:var(--s-6)}
@media (min-width:56rem){.obj{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-8)}}

.quote{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-raised);padding:var(--s-6);margin:0;
}
.quote blockquote{margin:0 0 var(--s-4);font-size:var(--t-fix);line-height:1.6}
.quote blockquote p:last-child{margin-bottom:0}
.quote figcaption{font-size:var(--t-small);color:var(--fg-muted);display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:baseline}
.quote figcaption b{color:var(--fg);font-weight:600}
.quotes{display:grid;gap:var(--s-5)}
@media (min-width:56rem){.quotes{grid-template-columns:1fr 1fr}}

.about{display:grid;gap:var(--s-6);align-items:start}
@media (min-width:56rem){.about{grid-template-columns:15rem 1fr;gap:var(--s-8)}}
.about .portrait{
  width:100%;margin:0;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-raised);
}
.creds{list-style:none;padding:0;margin:var(--s-5) 0 0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.creds li{
  margin:0;font-size:var(--t-micro);font-weight:600;letter-spacing:.03em;
  padding:.4rem .7rem;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--fg-muted);
}

/* ---------- 12. Formulaires ---------- */

.form{display:grid;gap:var(--s-5)}
.field{display:grid;gap:.45rem}
.field label{font-weight:600;font-size:var(--t-small)}
.field .hint{font-size:var(--t-micro);color:var(--fg-subtle);line-height:1.5;margin:0}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:var(--t-fix);color:var(--fg);
  background:var(--bg-sunken);
  border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:.85rem 1rem;min-height:52px;width:100%;
  transition:border-color var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.field textarea{min-height:9rem;resize:vertical;line-height:1.55}
.field select{
  appearance:none;cursor:pointer;padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23959DAD' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px 8px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent-text);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent-text) 32%,transparent);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)}
.err{color:var(--danger);font-size:var(--t-small);font-weight:600;margin:0;min-height:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{font-size:var(--t-small);color:var(--fg-subtle);margin:0}
.form-status{margin:0;font-weight:600}
.form-ok{
  border:1px solid var(--accent-text);border-radius:var(--radius);
  background:var(--bg-raised);padding:var(--s-6);
}
.form-ok h3{margin-bottom:var(--s-2)}
.form-ok p:last-child{margin-bottom:0}

.split{display:grid;gap:var(--s-7)}
@media (min-width:60rem){.split{grid-template-columns:1.1fr .9fr;gap:var(--s-8)}}

.alt-card{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s-6);background:var(--bg-raised);
}
.alt-card h3{font-size:var(--t-sub);margin-bottom:var(--s-3)}
.alt-card p{font-size:var(--t-ui);color:var(--fg-muted)}
.alt-card + .alt-card{margin-top:var(--s-5)}

/* ---------- 13. FAQ ---------- */

.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
/* Les objections de l'accueil vivent dans la pleine largeur : leurs questions
   faisaient 102 ch, contre 60 ch pour les memes questions sur /faq/, qui est
   deja en colonne etroite. C'est la seule difference entre les deux, et elle
   met la page d'accueil hors de la bande L-TYPE-2. La largeur retenue est
   celle de /faq/, jeton --wrap-narrow, ce qui aligne les deux surfaces sur
   60 ch au lieu d'inventer une valeur de plus. */
.obj-faq{max-width:var(--wrap-narrow)}
.faq summary{
  cursor:pointer;list-style:none;
  padding:var(--s-5) 3rem var(--s-5) 0;position:relative;
  font-family:var(--f-display);font-weight:600;font-size:1.1875rem;line-height:1.35;letter-spacing:-.012em;
  min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.75rem;top:50%;
  width:13px;height:13px;margin-top:-6px;
  border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);
  transform:rotate(45deg) translateY(-25%);
  transition:transform var(--d-mid) var(--e-out);
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-25%)}
.faq summary:hover{color:var(--accent-text)}
/* Le numero d'objection est une etiquette, pas le debut de la phrase.
   Sans cette regle il se collait au texte et "Objection 02" suivi de
   "400 euros" se lisait "02400". */
.faq summary .q{
  display:block;margin-bottom:var(--s-2);
  font-family:var(--f-body);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent-text);
}
.faq summary:hover .q{color:var(--fg-muted)}

/* Le chevron avait sa transition, le panneau s'ouvrait sec. Sur un navigateur
   sans ::details-content il continue de s'ouvrir sec, rien ne casse. */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{
    height:0;overflow:hidden;
    transition:height var(--d-mid) var(--e-out),
               content-visibility var(--d-mid) allow-discrete;
  }
  .faq details[open]::details-content{height:auto}
}
.faq .ans{padding:0 0 var(--s-5)}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- 14. Bandeau final et pied ---------- */

/* La bande finale utilise le systeme .band-klein, elle ne le double pas. */
.cta-band ::selection{background:var(--on-klein);color:var(--accent)}

.ftr{background:var(--bg-raised);border-top:1px solid var(--border);padding-block:var(--s-8) var(--s-6);font-size:var(--t-small)}
/* auto-fit plutot qu'un point de rupture : deux colonnes des que chacune
   tient 9,5 rem, une seule en dessous. Quatre blocs empiles faisaient
   1 013 px sur telephone, 334 de moins en deux colonnes, aucun contenu
   perdu. */
.ftr-grid{display:grid;gap:var(--s-6) var(--s-5);grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
@media (min-width:44rem){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.ftr-grid{grid-template-columns:1.5fr 1fr 1.1fr 1fr}}
.ftr h2{font-family:var(--f-body);font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:var(--s-4)}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:var(--s-3);max-width:none}
.ftr a{color:var(--fg-muted);text-decoration:none;padding-block:.3rem;display:inline-block}
.ftr a:hover{color:var(--accent-text);text-decoration:underline}
.ftr a:active{color:var(--fg)}
.ftr p{color:var(--fg-muted);font-size:var(--t-small)}
.ftr-legal{
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:baseline;
  color:var(--fg-muted);font-size:var(--t-micro);
}
.ftr-legal p{margin:0;color:var(--fg-muted);font-size:var(--t-micro)}

/* ---------- 14 bis. Barre d'action mobile ---------- */

.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-barre);
  /* 8 px de gouttiere entre les deux actions, et non 1. Mesure du 16 aout
     2026 : les deux cibles etaient a 1 px l'une de l'autre, en plein dans
     l'arc du pouce, et celle de gauche ouvre le composeur telephonique.
     Le seuil de 44 px les exempte du critere 2.5.8, c'est de l'ergonomie,
     pas de la conformite. */
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);
  padding:0 var(--s-2);
  background:var(--bg);
  border-top:1px solid var(--border-strong);
  transform:translateY(105%);
  transition:transform var(--d-slow) var(--e-out);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.mobile-bar.is-up{transform:none}
.mobile-bar.is-hidden{transform:translateY(105%)}
body.has-bar{padding-bottom:calc(56px + var(--s-4) + env(safe-area-inset-bottom,0px))}
@media (min-width:60rem){body.has-bar{padding-bottom:0}}
.mobile-bar a{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:56px;padding:.5rem .75rem;text-align:center;
  border-radius:var(--radius-sm);
  margin-block:var(--s-2) calc(var(--s-2) - 2px);
  text-decoration:none;font-weight:600;
  /* Le libelle est le meme que partout ailleurs sur le site. Plutot que de
     le raccourcir ici et de rouvrir l'incoherence, c'est la taille qui cede :
     la barre s'adapte au texte, le texte ne s'adapte pas a la barre. */
  font-size:clamp(.8125rem,.45rem + 1.7vw,1rem);
  line-height:1.25;
  background:var(--bg);color:var(--fg);
}
.mobile-bar a.is-primary{background:var(--accent);color:var(--on-klein)}
.mobile-bar a.is-primary:active{background:var(--accent-hover)}
.mobile-bar svg{width:18px;height:18px;flex:none}
@media (min-width:60rem){.mobile-bar{display:none}}

/* ---------- 15. Divers ---------- */

.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out)}
html:not(.js) .reveal{opacity:1;transform:none}

.page-head{padding-block:var(--s-8) var(--s-7)}
.page-head h1{margin-bottom:var(--s-4)}
.crumb{font-size:var(--t-small);color:var(--fg-subtle);margin-bottom:var(--s-5)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.crumb li{margin:0;display:flex;gap:.4rem;align-items:baseline}
.crumb li+li::before{content:"/";color:var(--border)}
.crumb a{color:var(--fg-muted)}

/* ---------- 16. Mouvement réduit ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .cf .cf-ctrl{display:none !important}
}

/* ---------- 17. Impression ---------- */

@media print{
  /* .mobile-bar manquait : etant en position fixe, la barre d'appel se
     reimprimait en haut de chaque feuille, sur les quinze pages. */
  .hdr,.drawer,.cf-ctrl,.cta-band,.skip,.desk,.burger,
  .mobile-bar,.est-act,.btn-row{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}

  /* Un bouton n'existe pas sur papier. Ceux qui restent (hors des rangees
     supprimees ci-dessus) redeviennent du texte encadre en noir, sinon
     .btn-primary sort en blanc sur blanc, donc invisible. */
  .btn{background:none !important;color:#000 !important;border:1px solid #000 !important}

  /* L'adresse n'est ecrite que pour les liens du corps de page, la ou elle
     porte l'argument : une source citee, un outil a verifier soi-meme. Sortie
     du corps, la regle produisait deux feuilles entieres de chemins, le pied
     de page etant un plan de site de dix-neuf liens. Personne n'imprime une
     page pour obtenir un plan de site. */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  main a[href^="/"]::after{content:" (mariusweb.fr" attr(href) ")";font-size:9pt;color:#444}
  main a[href^="#"]::after,a[href^="mailto:"]::after,a[href^="tel:"]::after{content:""}

  /* Le fil d'Ariane est une aide a la navigation, sans objet sur papier. Du
     pied, seule la premiere colonne survit : qui a ecrit ce document et
     comment le joindre. Une feuille imprimee sans coordonnees ne sert a rien,
     un plan de site imprime non plus. */
  .crumb{display:none !important}
  .ftr-grid > div:not(:first-child),.ftr-ailleurs{display:none !important}
  .ftr{break-before:avoid}

  /* break-inside:avoid sur les sections produisait une premiere feuille aux
     trois quarts vide et des titres coupes en deux : une section fait
     souvent plus d'une page, la regle etait donc inapplicable et le moteur
     cassait ou il pouvait. Le controle descend au niveau des blocs qui
     tiennent reellement sur une page. */
  section{padding-block:1rem}
  h1,h2,h3,h4{break-after:avoid;break-inside:avoid}
  .plan,.proj,.incl > div,.tech-grid > div,figure,table,blockquote,
  .est-doc,.klein-card,.alt-card,details{break-inside:avoid}
  p,li{orphans:3;widows:3}
}

/* ---------- 18. Page Réalisations ---------- */

.projs{display:grid;gap:var(--s-10)}
.proj{display:grid;gap:var(--s-6)}
@media (min-width:56rem){
  .proj{grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:start}
  .proj:nth-child(even) > a{order:2}
}
.proj > a{position:sticky;top:6rem}
@media (max-width:55.99rem){.proj > a{position:static}}
.proj h2{margin-bottom:var(--s-5)}
.proj h3{
  font-family:var(--f-body);font-size:var(--t-micro);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle);
  margin:var(--s-5) 0 var(--s-3);
}
.proj ul{list-style:none;padding:0}
.proj li{
  padding-left:1.4rem;position:relative;color:var(--fg-muted);font-size:var(--t-ui);
  margin-bottom:var(--s-3);
}
.proj li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--accent);border-radius:1px;
}
.proj p{color:var(--fg-muted)}
.proj-note{
  border-left:1px solid var(--border-strong);padding-left:var(--s-4);
  font-size:var(--t-small);color:var(--fg-subtle);margin:var(--s-5) 0 var(--s-6);
}

/* ---------- 19. Utilitaires ---------- */

.mt-0{margin-top:0}
.mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}
.mt-7{margin-top:var(--s-7)}
.mt-9{margin-top:var(--s-9)}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:var(--s-2)}
.mb-6{margin-bottom:var(--s-6)}
.mb-7{margin-bottom:var(--s-7)}
.pt-0{padding-top:0}
.m-0{margin:0}

.measure-sm{max-width:48ch}
.measure-md{max-width:54ch}
.measure-lg{max-width:58ch}

.band-raised{background:var(--bg-raised);border-block:1px solid var(--border)}
.h-sub{font-size:var(--t-h3)}
.h-card{font-size:var(--t-h3)}
.amt-soft{font-size:var(--t-h3);color:var(--fg-muted)}

/* ---------- 20. Tableaux et listes des pages d'intention ---------- */

.tbl-wrap:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tbl-wrap{
  overflow-x:auto;margin-top:var(--s-6);
  border:1px solid var(--border);border-radius:var(--radius);
  background:
    linear-gradient(to right,var(--bg) 30%,transparent),
    linear-gradient(to left,var(--bg) 30%,transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgb(0 0 0 / .5),transparent),
    radial-gradient(farthest-side at 100% 50%,rgb(0 0 0 / .5),transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:44px 100%,44px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-ui);min-width:44rem}
.tbl caption{
  caption-side:bottom;text-align:left;padding:var(--s-4) var(--s-5);
  max-width:var(--measure);
  font-size:var(--t-small);color:var(--fg-muted);border-top:1px solid var(--border);
}
.tbl th,.tbl td{padding:var(--s-4) var(--s-5);text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.tbl thead th{
  font-family:var(--f-body);font-size:var(--t-micro);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);
  background:var(--bg-sunken);border-bottom:1px solid var(--border-strong);
}
.tbl tbody th{font-weight:600;color:var(--fg);width:16rem}
.tbl tbody td{color:var(--fg-muted)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.is-mine th,.tbl tr.is-mine td{background:var(--accent-wash);color:var(--fg)}
.tbl tr.is-mine th{font-weight:700}

.steps-list{list-style:none;padding:0;margin:var(--s-6) 0 0;counter-reset:sl}
.steps-list li{
  counter-increment:sl;position:relative;padding-left:2.6rem;
  margin-bottom:var(--s-5);color:var(--fg-muted);max-width:var(--measure);
}
.steps-list li::before{
  content:counter(sl,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-family:var(--f-mono);font-size:var(--t-nano);color:var(--accent-text);
}
.steps-list strong{color:var(--fg)}

.check-list{list-style:none;padding:0;margin:var(--s-6) 0 0}
.check-list li{display:flex;gap:var(--s-3);margin-bottom:var(--s-4);color:var(--fg-muted);max-width:var(--measure)}
.check-list strong{color:var(--fg)}

.req{color:var(--accent-text);font-weight:700}
.opt{color:var(--fg-subtle);font-weight:400;font-size:var(--t-micro);letter-spacing:.04em;text-transform:uppercase}
.req-legend{font-size:var(--t-micro);color:var(--fg-muted);margin:0 0 var(--s-2)}

/* ---------- 22. Demonstration du poids ---------- */

.weigh{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg);overflow:hidden;
}
.wrow{
  display:grid;gap:var(--s-3) var(--s-5);align-items:center;
  padding:var(--s-5) var(--s-6);
  grid-template-columns:1fr;
}
@media (min-width:52rem){
  .wrow{grid-template-columns:minmax(15rem,22rem) 1fr auto}
}
.wrow + .wrow{border-top:1px solid var(--border)}
.wrow.is-mine{background:var(--accent-wash)}
.wlab b{display:block;font-weight:600;font-size:var(--t-fix);line-height:1.35}
.wlab span{display:block;margin-top:.3rem;font-size:var(--t-micro);color:var(--fg-muted);line-height:1.45}
.wbar{
  position:relative;height:14px;border-radius:99px;
  background:var(--bg-sunken);overflow:hidden;min-width:8rem;
}
.wbar i{
  position:absolute;inset:0 auto 0 0;display:block;border-radius:99px;
  /* A 2,8 pour cent la barre ferait trois pixels. Le minimum la garde
     lisible sans mentir sur la proportion, qui est donnee par le chiffre. */
  width:calc(var(--pct) * 1%);min-width:6px;
  background:var(--accent-text);
  transform-origin:left center;transform:scaleX(0);
  transition:transform var(--d-slow) var(--e-quart);
}
.wbar i.is-heavy{background:var(--border-strong)}
.weigh.is-in .wbar i,.reveal.is-in .wbar i{transform:scaleX(1)}
html:not(.js) .wbar i{transform:scaleX(1)}
.wval{
  font-family:var(--f-display);font-weight:700;font-size:1.375rem;
  letter-spacing:-.02em;white-space:nowrap;
}
.wrow.is-mine .wval{color:var(--accent-text)}
@media (prefers-reduced-motion:reduce){.wbar i{transition:none;transform:scaleX(1)}}

.obj-more{
  margin:var(--s-6) 0 0;padding-top:var(--s-5);border-top:1px solid var(--border);
  font-size:var(--t-small);color:var(--fg-muted);max-width:var(--measure);
}

/* ---------- 22b. Le tiers qui valide ---------- */

.tech{display:grid;gap:var(--s-6)}
.tech-grid{
  display:grid;gap:1px;margin:0;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;
}
@media (min-width:52rem){.tech-grid{grid-template-columns:1fr 1fr}}
.tech-grid > div{background:var(--bg);padding:var(--s-5) var(--s-6)}
.tech-grid dt{
  font-family:var(--f-body);font-size:var(--t-micro);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent-text);
  margin:0 0 var(--s-3);
}
.tech-grid dd{margin:0;font-size:var(--t-small);line-height:1.6;color:var(--fg-muted);max-width:56ch}
.tech-grid code{
  font-family:var(--f-mono);font-size:.9em;background:var(--bg-sunken);
  padding:.1em .35em;border-radius:var(--radius-sm);color:var(--fg);
}
.tech-act{
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  padding:var(--s-5) var(--s-6);
}
.tech-act-t{font-weight:600;color:var(--fg);margin:0 0 var(--s-4);max-width:none}
.tech-act .form-note{margin-top:var(--s-3);min-height:1.4em}

/* ---------- 23. La facture ouverte, moment signature ---------- */

.bill{display:grid;gap:var(--s-5)}
/* Geste propre au moment signature : les colonnes entrent decalees, puis les
   lignes se posent l'une apres l'autre. Rien d'autre sur le site n'a ce geste.
   Sans JS et sous prefers-reduced-motion, tout est deja en place. */
.js .bill.reveal .bill-col{opacity:0;transform:translateY(14px)}
.js .bill.reveal.is-in .bill-col{
  opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.js .bill.reveal.is-in .bill-col:nth-child(2){transition-delay:110ms}
.js .bill.reveal .bill-lines li{opacity:0}
.js .bill.reveal.is-in .bill-lines li{
  opacity:1;transition:opacity var(--d-mid) var(--e-out);
}
.js .bill.reveal.is-in .bill-lines li:nth-child(1){transition-delay:180ms}
.js .bill.reveal.is-in .bill-lines li:nth-child(2){transition-delay:225ms}
.js .bill.reveal.is-in .bill-lines li:nth-child(3){transition-delay:270ms}
.js .bill.reveal.is-in .bill-lines li:nth-child(4){transition-delay:315ms}
.js .bill.reveal.is-in .bill-lines li:nth-child(5){transition-delay:360ms}
.js .bill.reveal.is-in .bill-lines li:nth-child(6){transition-delay:405ms}
.js .bill.reveal.is-in .bill-lines li:nth-child(7){transition-delay:450ms}
@media (prefers-reduced-motion:reduce){
  .js .bill.reveal .bill-col,
  .js .bill.reveal .bill-lines li{opacity:1;transform:none;transition:none}
}
@media (min-width:60rem){.bill{grid-template-columns:1fr 1fr;gap:var(--s-6)}}

.bill-col{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg-raised);padding:var(--s-6);
  display:flex;flex-direction:column;
}
.bill-col.is-mine{border-color:var(--accent-text);background:var(--accent-wash)}

.bill-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding-bottom:var(--s-5);border-bottom:1px solid var(--border);margin-bottom:var(--s-2);
}
.bill-col.is-mine .bill-head{border-bottom-color:var(--accent-text)}
.bill-who{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted);
}
.bill-col.is-mine .bill-who{color:var(--accent-text)}
.bill-amt{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.75rem,1.3rem + 1.7vw,2.5rem);
  letter-spacing:-.03em;line-height:1;white-space:nowrap;
}

.bill-lines{list-style:none;padding:0;margin:0;flex:1}
.bill-lines li{
  display:grid;grid-template-columns:2.1rem minmax(0,1fr) auto;gap:var(--s-3);
  align-items:baseline;padding:var(--s-4) 0;
  border-bottom:1px solid var(--border);margin:0;max-width:none;
}
/* Sous 375 px, la valeur ne tient plus a cote du libelle : elle passe dessous
   plutot que d'elargir la colonne au-dela de l'ecran. Le libelle "Compris"
   reste insecable, c'est la mise en page qui cede, pas le mot. */
@media (max-width:23.4375rem){
  .bill-lines li{grid-template-columns:2.1rem minmax(0,1fr);gap:var(--s-2) var(--s-3)}
  .bl-v{grid-column:2;justify-self:start;margin-top:var(--s-2)}
  .bill-head{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
}
.bill-col.is-mine .bill-lines li{border-bottom-color:color-mix(in oklab,var(--accent-text) 22%,transparent)}
.bill-lines li:last-child{border-bottom:0}
.bl-n{
  font-size:var(--t-nano);font-weight:700;letter-spacing:.06em;
  color:var(--fg-subtle);font-variant-numeric:tabular-nums;
}
.bill-col.is-mine .bl-n{color:var(--accent-text)}
.bl-t{font-size:var(--t-ui);font-weight:600;line-height:1.35;color:var(--fg)}
.bl-t em{
  display:block;font-style:normal;font-weight:400;font-size:var(--t-small);
  line-height:1.45;color:var(--fg-muted);margin-top:.3rem;
}
.bl-v{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;color:var(--fg-subtle);
}
.bill-col.is-mine .bl-v{color:var(--accent-text)}
.bill-lines li.is-extra .bl-v{color:var(--danger)}
.bill-lines li.is-extra .bl-n{color:var(--danger)}

.bill-note{
  margin:var(--s-5) 0 0;padding-top:var(--s-5);
  border-top:1px solid var(--border);
  font-size:var(--t-small);line-height:1.55;color:var(--fg-muted);max-width:none;
}
.bill-col.is-mine .bill-note{border-top-color:color-mix(in oklab,var(--accent-text) 22%,transparent)}
.bill-lead{
  margin-top:var(--s-4);font-size:var(--t-fix);line-height:1.6;color:var(--fg-muted);
  border-left:0;padding-left:0;
}
.bill-lead strong{color:var(--fg)}
.bill-foot{margin-top:var(--s-5);font-size:var(--t-small);color:var(--fg-subtle)}
.bill-foot + .bill-foot{margin-top:var(--s-3)}
.steps-fold{
  margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--border);
}
.steps-fold h3{font-size:var(--t-h3);margin-bottom:var(--s-5)}
.steps-tight{
  display:grid;gap:var(--s-5);list-style:none;padding:0;margin:0;counter-reset:et;
}
@media (min-width:52rem){.steps-tight{grid-template-columns:repeat(4,1fr);gap:var(--s-5)}}
.steps-tight li{margin:0;max-width:none;counter-increment:et;position:relative;padding-top:var(--s-5)}
.steps-tight li::before{
  content:counter(et,decimal-leading-zero);position:absolute;top:0;left:0;
  font-size:var(--t-nano);font-weight:700;letter-spacing:.08em;color:var(--accent-text);
  font-variant-numeric:tabular-nums;
}
.steps-tight h4{
  font-family:var(--f-display);font-weight:700;font-size:var(--t-fix);line-height:1.25;
  letter-spacing:-.012em;margin:0 0 var(--s-2);
}
.steps-tight p{font-size:var(--t-small);line-height:1.55;color:var(--fg-muted);margin:0;max-width:none}

/* ---------- 24. Devis estimatif ---------- */

.est{display:grid;gap:var(--s-6);align-items:start}
@media (min-width:64rem){.est{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7)}}

.est-fs{border:0;padding:0;margin:0 0 var(--s-6)}
.est-fs legend{
  padding:0;margin-bottom:var(--s-4);
  font-family:var(--f-body);font-size:var(--t-micro);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent-text);
}
.est-opts{display:grid;gap:var(--s-3)}
.est-opt{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start;
  padding:var(--s-4) var(--s-5);cursor:pointer;
  background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.est-opt:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.est-opt input{
  width:22px;height:22px;margin:.15rem 0 0;flex:none;accent-color:var(--accent);cursor:pointer;
}
.est-opt:has(input:checked){border-color:var(--accent-text);background:var(--accent-wash)}
.est-opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.est-opt b{display:block;font-weight:600;font-size:var(--t-fix);line-height:1.3;color:var(--fg)}
.est-opt em{
  display:block;font-style:normal;font-size:var(--t-small);line-height:1.55;
  color:var(--fg-muted);margin-top:.35rem;
}

.est-num{
  display:grid;gap:var(--s-2);margin-top:var(--s-5);
  padding:var(--s-4) var(--s-5);
  background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);
}
.est-num label{font-weight:600;font-size:var(--t-ui);color:var(--fg)}
.est-num input{
  width:6rem;min-height:48px;padding:.6rem .8rem;
  background:var(--bg-sunken);color:var(--fg);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-family:var(--f-body);font-size:var(--t-fix);font-variant-numeric:tabular-nums;
}
.est-num .hint{font-size:var(--t-micro);color:var(--fg-subtle);line-height:1.5;margin:0}
/* La correction de saisie n'est pas une erreur de formulaire : rien n'est
   bloque, une valeur a seulement ete ramenee dans ses bornes. Elle emprunte
   l'encre d'erreur pour se distinguer de l'indication permanente au-dessus,
   sans le fond ni le filet qui signalent un envoi refuse. */
.est-num .hint-corr{color:var(--danger);font-weight:500}
.est-num .hint-corr[hidden]{display:none}

.est-cond{
  padding:var(--s-5) var(--s-5) var(--s-3);
  background:var(--accent-wash);border:1px solid var(--accent-text);border-radius:var(--radius-lg);
}
.est-cond legend{padding:0 .4rem;margin-left:-.4rem}
.est-cond-t{font-size:var(--t-small);color:var(--fg-muted);line-height:1.55;margin:0 0 var(--s-4);max-width:none}
.est-cond .est-opt{background:var(--bg)}
.est-cond .est-num{background:var(--bg)}

.est-stop{
  background:var(--bg-raised);border:1px solid var(--danger);
  border-radius:var(--radius-lg);padding:var(--s-6);
}
.est-stop-k{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--danger);margin:0 0 var(--s-3);
}
.est-stop h3{font-size:var(--t-h3);margin:0 0 var(--s-4)}
.est-stop p{font-size:var(--t-small);line-height:1.65;color:var(--fg-muted);max-width:none}
.est-stop-n{
  margin:var(--s-5) 0 0;padding-top:var(--s-4);border-top:1px solid var(--border);
  color:var(--fg-subtle);
}

/* Bandeau de resultat, telephone seulement. Sous 64 rem le devis complet est
   place apres le formulaire : mesure sur les neuf commandes a 375 px, une
   reponse changeait un chiffre situe entre 745 et 3 144 px sous le pli, donc
   l'ecran ne renvoyait rien. Le bandeau colle en tete de la colonne de
   formulaire, son bloc conteneur est le formulaire : il se retire de lui-meme
   quand le document arrive. Aucun ecouteur de defilement, aucun element fixe
   supplementaire, donc aucun conflit avec la barre d'action du bas.
   Il double une information deja lisible plus bas, d'ou aria-hidden ; la
   contrepartie pour les lecteurs d'ecran est aria-live sur le total. */
.est-live{
  /* +2px : le filet de progression de lecture est fixe a exactement
     var(--h-hdr) et traversait le coin arrondi de cette carte. Le decaler
     ici coute deux pixels et evite de toucher a l'echelle d'empilement, qui
     se comporte comme elle est ecrite. */
  position:sticky;top:calc(var(--h-hdr) + 2px);z-index:var(--z-collant);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);
  margin:0 0 var(--s-6);padding:var(--s-3) var(--s-4);
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--radius);
}
.est-live-k{
  flex:none;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-text);
}
.est-live-v{display:flex;align-items:baseline;gap:.5rem;justify-content:flex-end;
  flex-wrap:wrap;text-align:right;min-width:0}
.est-live-v b{
  font-family:var(--f-display);font-size:1.25rem;font-weight:700;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg);
  line-height:1.1;
}
.est-live-v span{font-size:var(--t-micro);color:var(--fg-muted);line-height:1.2}
@media (min-width:64rem){.est-live{display:none}}
/* Le bandeau s'ajoute a l'en-tete collee : sans cela une ancre depose sa
   cible derriere lui. */
@media (max-width:63.99rem){
  html:has(.est-live:not([hidden])){scroll-padding-top:9.5rem}
}

/* Accuse de reception d'un chiffre qui se substitue. Sans lui, un montant
   qui change se lit comme un montant qui n'a pas change. Chasse tabulaire
   pour que rien ne se decale pendant la substitution. */
.is-maj{animation:estMaj 200ms var(--e-out)}
@keyframes estMaj{
  from{opacity:.3;transform:translateY(-3px)}
  to{opacity:1;transform:none}
}

.est-out{position:sticky;top:5.5rem}
@media (max-width:63.99rem){.est-out{position:static}}

.est-doc{
  background:var(--bg-raised);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);padding:var(--s-6);
}
.est-head{
  display:flex;flex-wrap:wrap;gap:var(--s-5);justify-content:space-between;
  padding-bottom:var(--s-5);border-bottom:1px solid var(--border);margin-bottom:var(--s-5);
}
.est-kicker{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 var(--s-2);
}
.est-ref{font-size:var(--t-small);color:var(--fg-muted);margin:0}
.est-ref b{color:var(--fg);font-weight:600}
.est-brand{text-align:right;font-size:var(--t-micro);color:var(--fg-subtle);line-height:1.6}
.est-brand p{margin:0;max-width:none}
.est-brand b{color:var(--fg)}
@media (max-width:32rem){.est-brand{text-align:left}}

/* En-tete emetteur du devis. Le document sort du site par impression, il
   porte donc la marque en clair, sans dependre de l'en-tete de page. */
.est-lockup{
  display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
  margin:0 0 var(--s-3) !important;
}
.est-logo{width:24px;height:24px;flex:none}
.est-logo rect{fill:var(--brand-mark)}
.est-nom{
  font-family:var(--f-display);font-size:var(--t-ui);letter-spacing:-.008em;
  color:var(--fg);line-height:1;
}
.est-nom .bn-1{font-weight:500}
.est-nom .bn-2{font-weight:700}
@media (max-width:32rem){.est-lockup{justify-content:flex-start}}

.est-lines{list-style:none;padding:0;margin:0}
.est-lines li{
  display:grid;grid-template-columns:2rem 1fr auto;gap:var(--s-3) var(--s-4);
  align-items:start;padding:var(--s-4) 0;margin:0;max-width:none;
}
.est-lines li + li{border-top:1px solid var(--border)}
.el-n{
  font-size:var(--t-nano);font-weight:700;letter-spacing:.06em;
  color:var(--fg-subtle);font-variant-numeric:tabular-nums;padding-top:.25rem;
}
.el-t{font-size:var(--t-ui);font-weight:600;line-height:1.35;color:var(--fg)}
.el-t em{
  display:block;font-style:normal;font-weight:400;font-size:var(--t-small);
  line-height:1.45;color:var(--fg-muted);margin-top:.3rem;
}
.el-v{
  font-size:var(--t-small);font-weight:700;white-space:nowrap;color:var(--accent-text);
  font-variant-numeric:tabular-nums;padding-top:.15rem;
}

.est-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  margin-top:var(--s-5);padding-top:var(--s-5);border-top:2px solid var(--accent-text);
}
.est-total span{font-weight:600;color:var(--fg)}
.est-total b{
  font-family:var(--f-display);font-size:clamp(1.75rem,1.2rem + 1.8vw,2.5rem);
  font-weight:700;letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums;
}
.est-tva{font-size:var(--t-micro);color:var(--fg-muted);line-height:1.6;margin:var(--s-3) 0 0;max-width:none}
.est-tva b{color:var(--fg)}

.est-aside{
  margin-top:var(--s-5);padding:var(--s-4) var(--s-5);
  background:var(--bg-sunken);border-radius:var(--radius);
}
.est-aside-t{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--danger);margin:0 0 var(--s-3);
}
.est-aside ul{list-style:none;padding:0;margin:0}
.est-aside li{
  font-size:var(--t-small);line-height:1.55;color:var(--fg-muted);
  padding-left:1.1rem;position:relative;margin-bottom:var(--s-2);max-width:none;
}
.est-aside li::before{
  content:"";position:absolute;left:0;top:.6em;width:5px;height:2px;background:var(--danger);
}
.est-aside li:last-child{margin-bottom:0}

.est-legal{
  font-size:var(--t-micro);color:var(--fg-subtle);line-height:1.6;
  margin:var(--s-5) 0 0;padding-top:var(--s-4);border-top:1px solid var(--border);max-width:none;
}
.est-act{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.est-act .btn{flex:1 1 14rem}

/* Impression : seul le devis sort, en noir sur blanc */
@media print{
  body.printing-est > *:not(main){display:none !important}
  body.printing-est main > section:not(#estimation){display:none !important}
  body.printing-est #estimation > .wrap > *:not(.est){display:none !important}
  body.printing-est .est-form,
  body.printing-est .est-act,
  body.printing-est .est-out .form-note{display:none !important}

  body.printing-est #estimation{padding:0}
  body.printing-est .est{display:block}
  body.printing-est .est-out{position:static;top:auto}

  /* Tout le document repasse en noir. Les exceptions sont posees ensuite,
     jamais l'inverse : c'est ce qui avait laisse passer un devis illisible. */
  .est-doc,
  .est-doc *{color:#000 !important;background:transparent !important}
  .est-doc{
    border:1px solid #999;border-radius:0;padding:10mm;
    width:100%;max-width:100%;box-sizing:border-box;overflow:visible;
  }
  .est-doc a{color:#000 !important;text-decoration:underline}
  .est-doc .est-ref,
  .est-doc .est-brand,
  .est-doc .el-t em,
  .est-doc .est-tva,
  .est-doc .est-legal,
  .est-doc .est-aside li{color:#333 !important}
  .est-doc .est-head{border-bottom:1px solid #999}
  .est-doc .est-lines li + li{border-top:1px solid #ccc}
  .est-doc .est-total{border-top:2px solid #000}
  .est-doc .est-legal{border-top:1px solid #ccc}
  .est-doc .est-aside{background:#f2f2f2 !important;border:1px solid #ddd}
  .est-doc .est-aside li::before{background:#000 !important}
  .est-doc .est-brand{text-align:right;padding-left:6mm}
  /* Le bleu clair est calibre pour le fond sombre. Sur papier blanc, la
     marque reprend le Klein plein, 10,69:1. */
  .est-doc .est-logo rect{fill:#002FA7 !important}
  .est-doc .est-logo{width:9mm;height:9mm}
  .est-doc .est-nom{font-size:14pt}
  .est-lines li{break-inside:avoid}
  .est-doc .est-total b{font-size:20pt}
}
.cf-more{
  margin:var(--s-6) 0 0;text-align:center;font-size:var(--t-small);
  max-width:none;
}

/* ---------- 25. Aperçu du prix, accueil ----------
   Écrit pour quelqu'un qui n'est pas technophile : trois questions en mots
   ordinaires, cibles larges, montant affiché avant toute interaction. */

.ap{display:grid;gap:var(--s-6);align-items:start}
@media (min-width:60rem){.ap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-8)}}

.ap-form{display:grid;gap:var(--s-6)}
.ap-q{border:0;padding:0;margin:0}
.ap-q legend{
  padding:0;margin-bottom:var(--s-4);
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.3;
  letter-spacing:-.012em;color:var(--fg);
}
.ap-opts{display:grid;gap:var(--s-3)}
@media (min-width:32rem){.ap-opts{grid-template-columns:1fr 1fr}}
@media (min-width:32rem){.ap-opts-3{grid-template-columns:repeat(3,1fr)}}
.ap-opts-1{grid-template-columns:1fr}
/* Une limite annoncee n'est pas un choix parmi d'autres : elle porte le trait
   de l'erreur des qu'elle est cochee, pour qu'on ne la prenne pas pour une offre. */
.ap-opt.is-limite:has(input:checked){border-color:var(--danger);background:var(--bg-sunken)}
.ap-opt.is-limite input{accent-color:var(--danger)}
@media (max-width:47.99rem){.ap-opts-3{grid-template-columns:1fr}}

.ap-opt{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start;
  min-height:64px;padding:var(--s-4) var(--s-5);cursor:pointer;
  background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius);
  transition:border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.ap-opt:hover{background:var(--bg-hover)}
.ap-opt input{
  width:24px;height:24px;margin:.1rem 0 0;flex:none;
  accent-color:var(--accent);cursor:pointer;
}
.ap-opt:has(input:checked){border-color:var(--accent-text);background:var(--accent-wash)}
.ap-opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.ap-opt span{font-weight:600;font-size:var(--t-fix);line-height:1.35;color:var(--fg)}
.ap-opt em{
  display:block;font-style:normal;font-weight:400;font-size:var(--t-small);
  line-height:1.5;color:var(--fg-muted);margin-top:.3rem;
}

.ap-out{
  background:var(--bg);border:1px solid var(--accent-text);
  border-radius:var(--radius-lg);padding:var(--s-6);
  transition:border-color var(--d-mid) var(--e-out);
}
/* Un refus ne se presente pas dans le cadre d'une offre */
.ap-out:has([data-ap-refus]:not([hidden])){border-color:var(--danger)}
@media (min-width:60rem){.ap-out{position:sticky;top:6rem}}

.ap-lab{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 var(--s-3);
}
.ap-lab.is-no{color:var(--danger)}
.ap-montant{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(3rem,2rem + 4.5vw,4.5rem);line-height:1;letter-spacing:-.035em;
  color:var(--fg);margin:0 0 var(--s-4);font-variant-numeric:tabular-nums;
}
.ap-detail{font-size:var(--t-fix);line-height:1.6;color:var(--fg-muted);margin:0 0 var(--s-3);max-width:none}
.ap-delai{
  font-size:var(--t-small);font-weight:600;color:var(--fg);margin:0 0 var(--s-6);
  padding-top:var(--s-3);border-top:1px solid var(--border);max-width:none;
}

.ap-refus-t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);line-height:1.15;letter-spacing:-.02em;
  color:var(--fg);margin:0 0 var(--s-4);max-width:none;
}
.ap-refus p{font-size:var(--t-fix);line-height:1.6;color:var(--fg-muted);max-width:none}
.ap-refus{margin-bottom:var(--s-6)}

.ap-suite{width:100%}
.ap-note{
  font-size:var(--t-micro);line-height:1.6;color:var(--fg-subtle);
  margin:var(--s-4) 0 0;max-width:none;
}

@media print{
  .ap-form,.ap-suite,.ap-note{display:none}
}
/* ---------- 26. Sections en aplat Klein ----------
   REGLE D'EMPLOI, posee par Marius le 16 aout 2026 :
   le Klein plein ne va que sur des sections COURTES et SANS INTERACTION.
   Remplir un formulaire ou lire un tableau dense sur un aplat sature demande
   un effort que le principe "rien a decoder" interdit. L'essai du 16 aout
   avait pose l'apercu du prix et la facture ouverte en Klein : annule.

   Trois criteres avant de peindre : moins de 500 px de haut sur ordinateur,
   aucun champ ni case ni accordeon ni carrousel, texte suivi et non tableau.
   Une seule section du site les remplit, la bande d'appel finale.

   Une section .band-klein repeint tout ce qu'elle contient. Les regles
   couvrant la facture et l'apercu sont conservees, au cas ou une version
   courte de l'un ou l'autre reviendrait un jour sur Klein. */

.band-klein{
  background:var(--accent);
  color:var(--on-klein);
}
.band-klein h1,.band-klein h2,.band-klein h3,.band-klein h4{color:var(--on-klein)}
.band-klein p,.band-klein li,.band-klein dd{color:var(--on-klein-2)}
.band-klein .lede{color:var(--on-klein-2)}
.band-klein strong,.band-klein b{color:var(--on-klein)}

/* Le surtitre perd son bleu, il n'a plus de fond pour ressortir */
.band-klein .eyebrow{color:var(--on-klein)}
.band-klein .eyebrow::before{background:var(--on-klein)}

/* Liens : soulignes, pas colores. Sur un aplat il n'y a plus de teinte
   disponible qui tienne le contraste et se distingue du texte. */
.band-klein a{color:var(--on-klein);text-decoration-thickness:1.5px;text-underline-offset:.2em}
.band-klein a:hover{text-decoration-thickness:3px}
.band-klein :focus-visible{outline-color:var(--on-klein);outline-offset:4px}

/* Filets et surfaces */
.band-klein hr{border-top-color:var(--on-klein-line)}

/* Boutons : l'action primaire s'inverse, le fantome prend le trait blanc */
.band-klein .btn-primary{
  background:var(--on-klein);color:var(--accent);border-color:var(--on-klein);
}
.band-klein .btn-primary:hover{background:var(--on-klein-2);border-color:var(--on-klein-2)}
.band-klein .btn-ghost{color:var(--on-klein);border-color:var(--on-klein-line)}
.band-klein .btn-ghost:hover{background:var(--on-klein-sunk);border-color:var(--on-klein)}

/* --- La facture ouverte sur Klein --- */
.band-klein .bill-col{
  background:var(--on-klein-sunk);border-color:var(--on-klein-line);
}
.band-klein .bill-col.is-mine{
  background:var(--on-klein);border-color:var(--on-klein);
}
.band-klein .bill-col.is-mine .bill-who,
.band-klein .bill-col.is-mine .bill-amt,
.band-klein .bill-col.is-mine .bl-t{color:var(--accent)}
.band-klein .bill-col.is-mine .bl-n,
.band-klein .bill-col.is-mine .bl-v{color:var(--accent)}
.band-klein .bill-col.is-mine .bl-t em,
.band-klein .bill-col.is-mine .bill-note{color:var(--on-pale-2)}
.band-klein .bill-col.is-mine .bill-lines li + li,
.band-klein .bill-col.is-mine .bill-head{border-color:var(--on-pale-line)}
.band-klein .bill-col:not(.is-mine) .bill-who,
.band-klein .bill-col:not(.is-mine) .bill-amt,
.band-klein .bill-col:not(.is-mine) .bl-t{color:var(--on-klein)}
.band-klein .bill-col:not(.is-mine) .bl-n,
.band-klein .bill-col:not(.is-mine) .bl-v,
.band-klein .bill-col:not(.is-mine) .bl-t em,
.band-klein .bill-col:not(.is-mine) .bill-note{color:var(--on-klein-2)}
.band-klein .bill-lines li.is-extra .bl-v,
.band-klein .bill-lines li.is-extra .bl-n{color:var(--c-error-line)}
.band-klein .bill-lines li + li,
.band-klein .bill-head{border-color:var(--on-klein-line)}
.band-klein .bill-lead,.band-klein .bill-foot{color:var(--on-klein-2)}
.band-klein .steps-fold{border-top-color:var(--on-klein-line)}
.band-klein .steps-tight li::before{color:var(--on-klein)}
.band-klein .steps-tight p{color:var(--on-klein-2)}

/* --- L'apercu du prix sur Klein --- */
.band-klein .ap-opt{
  background:var(--on-klein-sunk);border-color:var(--on-klein-line);color:var(--on-klein);
}
.band-klein .ap-opt:hover{background:var(--c-klein-deep)}
.band-klein .ap-opt span{color:var(--on-klein)}
.band-klein .ap-opt em{color:var(--on-klein-2)}
.band-klein .ap-opt input{accent-color:var(--on-klein)}
/* Une fois cochee, l'option devient blanche : le point doit repasser en Klein,
   sinon il est blanc sur blanc et le choix ne se voit plus. */
.band-klein .ap-opt:has(input:checked) input{accent-color:var(--accent)}
.band-klein .ap-opt.is-limite:has(input:checked) input{accent-color:var(--on-klein)}
.band-klein .ap-opt:has(input:checked){background:var(--on-klein);border-color:var(--on-klein)}
.band-klein .ap-opt:has(input:checked) span{color:var(--accent)}
.band-klein .ap-opt:has(input:checked) em{color:var(--on-pale-2)}
.band-klein .ap-opt.is-limite:has(input:checked){background:var(--c-error-deep);border-color:var(--c-error-line)}
.band-klein .ap-opt.is-limite:has(input:checked) span{color:var(--on-klein)}
.band-klein .ap-opt.is-limite:has(input:checked) em{color:var(--c-error-2)}
.band-klein .ap-q legend{color:var(--on-klein)}

.band-klein .ap-out{
  background:var(--on-klein);border-color:var(--on-klein);
}
.band-klein .ap-out:has([data-ap-refus]:not([hidden])){border-color:var(--c-error-ink);background:var(--c-error-pale)}
.band-klein .ap-lab{color:var(--accent)}
.band-klein .ap-lab.is-no{color:var(--c-error-ink)}
.band-klein .ap-montant{color:var(--accent)}
.band-klein .ap-detail{color:var(--on-pale-2)}
.band-klein .ap-delai{color:var(--accent);border-top-color:var(--on-pale-line)}
.band-klein .ap-refus-t{color:var(--c-error-ink)}
.band-klein .ap-refus p{color:var(--c-error-body)}
.band-klein .ap-note{color:var(--on-pale-3)}
.band-klein .ap-out .btn-primary{
  background:var(--accent);color:var(--on-klein);border-color:var(--accent);
}
.band-klein .ap-out .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* --- Rythme vertical : trois respirations selon le role de la section --- */
/* Une seule valeur sur neuf sections etait de la monotonie, pas un systeme. */
section.air-lg{padding-block:var(--s-10)}   /* avant un moment */
section.air-sm{padding-block:var(--s-8)}    /* listes, questions */
@media (max-width:47.99rem){
  section.air-lg{padding-block:var(--s-9)}
  section.air-sm{padding-block:var(--s-7)}
}

/* --- Les chiffres montent au haut de l'echelle --- */
/* "Le chiffre remplace l'adjectif" : ce sont eux le spectacle, pas la
   mise en page. Le corps et les titres ne bougent pas. */
.ap-montant{font-size:clamp(3.25rem,2rem + 5.6vw,5.5rem);letter-spacing:-.04em}
.bill-amt{font-size:clamp(1.75rem,1.1rem + 2.4vw,2.75rem);letter-spacing:-.03em}
.wval{font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);letter-spacing:-.02em}
.est-total b{font-size:clamp(2rem,1.3rem + 2.6vw,3rem)}

/* ---------- 27. Cartes sombres posees sur un aplat Klein ----------
   Amendement du 16 aout 2026 a la regle de la section 26. Une section plus
   longue que 500 px peut passer en Klein a condition que sa densite soit
   portee par une carte sombre : le Klein tient le surtitre, le titre et le
   chapo, la carte tient le tableau, la liste ou le portrait.

   Une .klein-card est un morceau du theme sombre pose sur le bleu. Tous les
   jetons du site y reprennent leur valeur normale, ce qui evite d'avoir a
   redefinir chaque descendant une deuxieme fois. */

.band-klein .klein-card{
  background:var(--bg);
  border:1px solid var(--on-klein-line);
  border-radius:var(--radius-lg);
  padding:var(--s-6);
  color:var(--fg);
}
@media (min-width:48rem){.band-klein .klein-card{padding:var(--s-7)}}

.band-klein .klein-card h1,
.band-klein .klein-card h2,
.band-klein .klein-card h3,
.band-klein .klein-card h4{color:var(--fg)}
.band-klein .klein-card p,
.band-klein .klein-card li,
.band-klein .klein-card dd{color:var(--fg-muted)}
.band-klein .klein-card dt{color:var(--fg-subtle)}
.band-klein .klein-card strong,
.band-klein .klein-card b{color:var(--fg)}
.band-klein .klein-card a{color:var(--accent-text);text-decoration-thickness:1px}
.band-klein .klein-card a:hover{text-decoration-thickness:2px}
.band-klein .klein-card :focus-visible{outline-color:var(--focus)}
.band-klein .klein-card .btn-ghost{color:var(--fg);border-color:var(--border-strong)}
.band-klein .klein-card .btn-ghost:hover{background:var(--bg-raised);border-color:var(--fg-muted)}
.band-klein .klein-card .btn-primary{
  background:var(--accent);color:var(--on-klein);border-color:var(--accent);
}
.band-klein .klein-card .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* La liste des limites perd son cadre propre, la carte le porte deja */
.band-klein .klein-card .incl{margin-top:0;border:0;border-radius:0}
.band-klein .klein-card .incl > div{padding-inline:0}
.band-klein .klein-card .incl > div:first-child{padding-top:0}
.band-klein .klein-card .incl > div:last-child{padding-bottom:0}

/* Le portrait garde son propre fond, plus clair que la carte */
.band-klein .klein-card .portrait{background:var(--bg-raised);border-color:var(--border)}
.band-klein .klein-card .creds li{color:var(--fg-muted);border-color:var(--border-strong)}

/* ---------- 28. Effets. Amendement mouvement du 16 aout 2026 ----------
   Regle unique : une animation est permise si son etat arrete est dessine
   et ecrit sous prefers-reduced-motion, et si le contenu reste entier dans
   les deux cas. Chaque bloc porte son alternative juste en dessous. */

/* --- 28.1 Faisceau de bordure ---------------------------------------
   Un degrade conique tourne derriere un masque qui ne laisse voir que
   l'anneau de bordure. La rotation passe par un angle enregistre en
   @property, sans quoi un angle n'est pas interpolable. Sur un navigateur
   sans @property l'angle reste a sa valeur initiale : bordure degradee
   fixe, ce qui est exactement l'alternative reduced-motion. */
@property --beam-a{syntax:"<angle>";initial-value:135deg;inherits:false}

.beam{position:relative}
.beam::after{
  /* inset:0 et non -1px : a 375 px, deborder d'un pixel sur la carte mise en
     avant suffisait a produire un pixel de defilement horizontal sur /offre/. */
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;
  background:conic-gradient(from var(--beam-a),
    transparent 0 58%,
    color-mix(in oklab,var(--brand-mark) 45%,transparent) 70%,
    var(--brand-mark) 80%,
    var(--on-klein-hi) 85%,
    color-mix(in oklab,var(--brand-mark) 40%,transparent) 92%,
    transparent 97% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:beam-tour 8s linear infinite;
}
.beam-lent::after{animation-duration:11s}
@keyframes beam-tour{to{--beam-a:495deg}}
/* Alternative : l'angle s'arrete a 135 degres, le faisceau devient un filet
   Klein en diagonale sur le coin haut gauche. Une bordure, pas un manque. */
@media (prefers-reduced-motion:reduce){
  .beam::after{animation:none;--beam-a:135deg}
}
/* Le faisceau n'est un liseré que parce que le masque évide le centre. Sans
   composition de masque, le dégradé conique reste plein et recouvre toute la
   carte, texte compris : le seul cas du fichier où une fonctionnalité récente
   non gérée casse la lecture au lieu de la laisser inchangée. Le pseudo
   élément est alors retiré, la carte garde sa bordure ordinaire. */
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .beam::after{content:none}
}

/* --- 28.2 Compteur --------------------------------------------------- */
.tick{font-variant-numeric:tabular-nums}

/* --- 28.3 Bande a velocite de defilement -----------------------------
   Deux rangees en sens opposes. La vitesse suit la velocite de defilement
   et le sens s'inverse quand le lecteur remonte : la bande est accrochee
   au geste, elle ne tourne pas dans son coin. */
.vel{
  padding-block:var(--s-6);
  border-block:1px solid var(--border);
  background:var(--bg-raised);
  overflow:hidden;
}
.vel-k{
  max-width:var(--wrap);margin:0 auto var(--s-5);padding-inline:var(--s-5);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-text);
}
.vel-row{overflow:hidden;white-space:nowrap}
.vel-row + .vel-row{margin-top:var(--s-3)}
.vel-track{display:inline-flex;will-change:transform}
.vel-seq{
  display:inline-flex;align-items:center;gap:var(--s-6);padding-right:var(--s-6);
  font-family:var(--f-display);font-size:clamp(1.5rem,1rem + 2.4vw,2.5rem);
  font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--fg-muted);
}
.vel-seq i{font-style:normal;white-space:nowrap}
.vel-seq b{font-weight:700;color:var(--fg)}
.vel-seq span{
  width:7px;height:7px;flex:none;border-radius:1px;
  background:var(--brand-mark);
}
/* Alternative : plus aucun deplacement, la bande devient une liste qui
   revient a la ligne. Les mots restent lisibles, et ils restent tous la. */
@media (prefers-reduced-motion:reduce){
  .vel-row{overflow:visible;white-space:normal}
  .vel-track{display:block;transform:none !important;will-change:auto}
  .vel-seq{flex-wrap:wrap;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5)}
  .vel-seq[aria-hidden="true"]{display:none}
}
html:not(.js) .vel-row{overflow:visible;white-space:normal}
html:not(.js) .vel-track{display:block}
html:not(.js) .vel-seq{flex-wrap:wrap;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5)}

/* --- 28.4 Graisse animee par caractere -------------------------------
   Space Grotesk est deja chargee en fonte variable 300 a 700, un seul
   fichier : l'effet ne coute pas un octet de plus. Les caracteres sont des
   spans aria-hidden, le titre porte son texte intact en aria-label. */
/* La graisse animee par caractere n'existait que sur l'accroche de
   l'accueil. Les treize autres titres de page sont dans la meme police
   variable et n'en profitaient pas : l'effet appartient a la marque, pas
   a une page. */
.kin{cursor:default}
.kin .kc{
  /* inline et non inline-block. Une boite inline-block est un element de
     ligne atomique : chaque caractere devenait donc une occasion de coupure,
     et le titre de l'accueil se brisait au milieu d'un mot a 390 px, "400 EUR,
     et il est a vo" sur une ligne et "us." sur la suivante. Releve en
     regardant la capture, pas le code. En inline, la coupure retrouve les
     espaces et rien d'autre. Aucune transformation n'est appliquee ici, seule
     la graisse varie, donc inline-block n'apportait rien. */
  display:inline;
  transition:font-variation-settings var(--d-mid) var(--e-out),
             color var(--d-mid) var(--e-out);
  font-variation-settings:"wght" var(--kw,700);
}
/* Le titre est deja en 700. La graisse descend a 300 sur les caracteres
   voisins et remonte a 700 sous le pointeur : l'onde creuse le mot au lieu
   de l'epaissir, ce qui evite de pousser la ligne vers la droite. */
@media (hover:hover){
  .kin:hover .kc{--kw:340}
  .kin .kc:hover{--kw:700;color:var(--accent-text)}
  .kin .kc:hover + .kc,
  .kin .kc:has(+ .kc:hover){--kw:560}
  .kin .kc:hover + .kc + .kc,
  .kin .kc:has(+ .kc + .kc:hover){--kw:450}
}
/* Le geste ne survivait pas au telephone. Il ne se declenchait qu'au survol
   d'une souris, donc il etait invisible pour la persona que CHARTE.md declare
   dominante, celle qui lit sur un ecran tactile. Le geste le plus proche de
   l'idee du site (le poids qui tombe, la meme loi que les quatre lames du
   logo) n'atteignait pas la majorite de ses lecteurs.

   L'onde passe donc une fois toute seule, de gauche a droite, quand le titre
   entre a l'ecran. Meme creux, meme courbe, meme amplitude qu'au survol : ce
   n'est pas un second effet, c'est le meme joue sans pointeur. Une seule fois,
   jamais en boucle. Le survol reste par dessus la ou il existe.

   font-variation-settings s'interpole entre deux valeurs du meme axe, aucune
   propriete personnalisee n'a besoin d'etre enregistree. Sans fill-mode : a la
   fin, la declaration de base reprend la main sur la meme valeur, 700. */
@keyframes kin-onde{
  0%   {font-variation-settings:"wght" 700}
  38%  {font-variation-settings:"wght" 340}
  100% {font-variation-settings:"wght" 700}
}
.kin.is-onde .kc{
  animation:kin-onde .85s var(--e-out);
  animation-delay:calc(var(--i,0) * 18ms);
}

/* Alternative : aucune transition, aucune onde, le titre garde sa graisse
   d'origine et le survol ne fait plus rien. Le texte n'a jamais bouge de
   toute facon, c'est la graisse qui variait. */
@media (prefers-reduced-motion:reduce){
  .kin .kc{transition:none;--kw:700}
  .kin.is-onde .kc{animation:none}
  .kin:hover .kc,
  .kin .kc:hover{--kw:700;color:inherit}
}

/* --- 28.5 Revelation de la marque, synchronisee sur le symbole -------
   Les quatre lames se resserrent de 0 a 0,70 s (0,55 s de duree, decalages
   de 0,05 s). Le balayage part a 0,55 s, quand la premiere lame s'est posee.
   Le degrade fait trois fois la largeur du mot : son tiers droit est la
   couleur discrete (pas encore revele), son tiers gauche la couleur pleine
   (revele), la trainee Klein est entre les deux. Deplacer le fond de 100 a
   0 pour cent fait passer la frontiere sur le mot. L'etat d'arrivee est donc
   la couleur definitive, ce qui rend l'alternative reduced-motion identique
   au resultat final : elle se contente de partir a l'arrivee. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand-nom{
    /* Couleur pleine SOUS le degrade. Sans elle, si l'image ne couvre pas,
       le clip n'a plus rien a decouper et le nom disparait : meme mode
       d'echec que le bouton dont le fond et le texte pointaient vers le meme
       jeton. Trouve en regardant les pixels, pas le code. */
    background-color:var(--fg);
    background-image:linear-gradient(96deg,
      var(--fg) 0 30%,
      var(--on-brand-hi) 36%,
      var(--brand-mark) 41%,
      var(--fg-subtle) 48% 100%);
    background-size:300% 100%;
    background-position:0% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  @media (prefers-reduced-motion: no-preference){
    .brand-nom{animation:marque-revelation 1.2s .55s cubic-bezier(.16,1,.3,1) both}
  }
  @keyframes marque-revelation{
    from{background-position:100% 0}
    to{background-position:0% 0}
  }
  @media (prefers-reduced-motion:reduce){
    .brand-nom{animation:none;background-position:0% 0}
  }
}

/* ---------- 29. Moments ponctuels ----------
   Aucune boucle ici : le budget L-MOTION-2 est deja pris par les deux rangees
   de la bande et par les faisceaux. Ce qui suit se declenche une fois, sur un
   evenement que le visiteur a provoque. */

/* --- 29.1 Coche du succes -------------------------------------------
   Le formulaire envoye est le moment le plus rare du site. Il recoit une
   coche tracee, pas des confettis : PRODUCT.md decrit une marque directe et
   chiffree, elle ne fete rien. 520 ms, une seule fois. */
.ok-mark{
  width:44px;height:44px;flex:none;display:block;
  margin-bottom:var(--s-4);
  color:var(--accent-text);
}
.ok-mark circle,.ok-mark path{
  fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;
}
.ok-mark circle{stroke-width:2;opacity:.34}
.ok-mark path{stroke-width:3}
@media (prefers-reduced-motion: no-preference){
  .ok-mark circle{
    stroke-dasharray:132;stroke-dashoffset:132;
    animation:ok-cercle .42s var(--e-out) both;
  }
  .ok-mark path{
    stroke-dasharray:30;stroke-dashoffset:30;
    animation:ok-coche .30s .22s var(--e-out) both;
  }
}
@keyframes ok-cercle{to{stroke-dashoffset:0}}
@keyframes ok-coche{to{stroke-dashoffset:0}}
/* Alternative : la coche est deja tracee. Le trait n'est pas retire, il est
   simplement complet des la premiere image. */
@media (prefers-reduced-motion:reduce){
  .ok-mark circle,.ok-mark path{stroke-dashoffset:0;animation:none}
}

/* --- 29.2 Attente pendant l'envoi ------------------------------------
   Le visiteur vient de taper ses coordonnees. Un filet indetermine sous le
   bouton dit que quelque chose se passe, sans remplacer le libelle par un
   mot de plus. */
.btn.is-envoi{position:relative;overflow:hidden}
.btn.is-envoi::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--on-klein),transparent);
  transform:translateX(-100%);
  animation:envoi 1.05s linear infinite;
}
@keyframes envoi{to{transform:translateX(100%)}}
/* Alternative : un filet plein et immobile. L'etat "en cours" reste visible,
   c'est le mouvement qui disparait, et le libelle du bouton le dit deja. */
@media (prefers-reduced-motion:reduce){
  .btn.is-envoi::after{animation:none;transform:none;background:var(--on-klein);opacity:.55}
}

/* --- 29.3 Le refus n'est pas une erreur ------------------------------
   Le visiteur qui coche la vente en ligne n'a rien fait de mal, et
   PRODUCT.md compte sa sortie comme une reussite de qualification. Le rouge
   disait le contraire. Registre neutre, filet Klein, entree mesuree. */
.est-stop{
  background:var(--bg-raised);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);padding:var(--s-6);
}
/* .est-stop p pese plus qu'une classe seule : le surtitre restait gris. */
.est-stop p.est-stop-k{color:var(--accent-text)}
@media (prefers-reduced-motion: no-preference){
  .est-stop:not([hidden]){animation:refus-entree .34s var(--e-out) both}
}
@keyframes refus-entree{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .est-stop:not([hidden]){animation:none}
}

/* --- 29.4 Surfaces qui repondent au pointeur -------------------------
   Le budget de boucles decoratives est leve (decision du 16 aout 2026), mais
   ce qui suit n'est pas une boucle : rien ne bouge tant que personne ne
   touche. Une lueur suit le pointeur sur les surfaces que le visiteur
   manipule vraiment, et se retire des qu'il part. */
/* Corrige le 16 aout 2026 : le selecteur avait ete ecrit depuis le balisage
   de /offre/ et /devis/, et aucune de ces classes n'existe sur l'accueil.
   La lueur ne touchait donc pas la page la plus visitee. Les six options de
   l'apercu du prix la recoivent. Les cartes du carrousel restent exclues :
   elles sont pivotees en trois dimensions, une lueur qui suit le pointeur ne
   se poserait pas sur leur plan. */
.lueur{position:relative}
.lueur::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:var(--z-fond);
  background:radial-gradient(18rem 18rem at var(--mx,50%) var(--my,50%),
    color-mix(in oklab,var(--brand-mark) 16%,transparent),
    transparent 62%);
  opacity:0;transition:opacity var(--d-mid) var(--e-out);
}
.lueur.is-pres::before{opacity:1}
.lueur > *{position:relative;z-index:var(--z-contenu)}
/* Le doigt n'a pas de survol : sur ecran tactile la pression fait le meme
   travail, centree sur la carte. */
@media (hover:none){
  .lueur:active::before{opacity:1;--mx:50%;--my:50%}
}
/* Alternative : aucune lueur. La carte garde sa bordure et son fond, rien
   n'est perdu puisque la lueur ne portait aucune information. */
@media (prefers-reduced-motion:reduce){
  .lueur::before{display:none}
}

/* --- 29.5 Coches de la liste d'inclusion -----------------------------
   Les cinq coches se tracent quand la liste entre a l'ecran, decalees de
   70 ms, dans la bande L-MOTION-5. Sans JS et a l'arret, elles sont tracees. */
.js .trust ul li .tick path{stroke-dasharray:22;stroke-dashoffset:22}
.js .trust.is-in ul li .tick path{
  stroke-dashoffset:0;transition:stroke-dashoffset .42s var(--e-out);
}
.js .trust.is-in ul li:nth-child(2) .tick path{transition-delay:70ms}
.js .trust.is-in ul li:nth-child(3) .tick path{transition-delay:140ms}
.js .trust.is-in ul li:nth-child(4) .tick path{transition-delay:210ms}
.js .trust.is-in ul li:nth-child(5) .tick path{transition-delay:280ms}
@media (prefers-reduced-motion:reduce){
  .js .trust ul li .tick path{stroke-dashoffset:0;transition:none}
}

/* ---------- 30. Ce que la premiere passe delight avait laisse ----------
   Trois manques repris apres mesure, aucun n'ajoute de boucle. */

/* --- 30.1 Le Cover Flow ne disait pas qu'il se prend en main ---------
   La reference est explicite : l'element accuse la saisie. Il se manipulait
   au doigt et a la souris sans qu'aucun signe ne le laisse deviner. */
.cf.is-cf .cf-stage{cursor:grab}
.cf.is-cf .cf-stage.is-prise{cursor:grabbing}
.cf.is-cf .cf-stage.is-prise .cf-item[data-pos="0"] .cf-card{
  transform:scale(.985);
  box-shadow:var(--sh-lift);
}
.cf.is-cf .cf-card{
  transition:border-color var(--d-mid) var(--e-out),
             transform var(--d-fast) var(--e-out),
             box-shadow var(--d-fast) var(--e-out);
}
@media (prefers-reduced-motion:reduce){
  .cf.is-cf .cf-stage.is-prise .cf-item[data-pos="0"] .cf-card{transform:none}
}

/* --- 30.2 La lueur repond au doigt, au point de contact ---------------
   Sur ecran tactile elle se centrait au milieu de la carte, ce qui ne
   ressemble a rien : le doigt sait ou il a touche. Meme langage visuel que
   la lueur du pointeur, pas un nouvel idiome. */
.lueur.is-touche::before{opacity:1}
.lueur.is-relache::before{opacity:0;transition:opacity .42s var(--e-out)}
@media (hover:none){
  .lueur:active::before{opacity:1;--mx:50%;--my:50%}
  .lueur.is-touche:active::before{--mx:var(--tx,50%);--my:var(--ty,50%)}
}

/* --- 30.3 Progression de lecture -------------------------------------
   L'accueil fait 21,9 ecrans sur telephone. Un filet sous l'en-tete dit ou
   on en est. Pilote par animation-timeline: scroll(), donc aucun ecouteur de
   defilement, aucun JavaScript, et un calage lineaire sur le geste du
   lecteur, ce que demande L-MOTION-3. Sans le support, il n'apparait pas. */
@supports (animation-timeline: scroll()){
  .lecture{
    position:fixed;left:0;top:var(--h-hdr);z-index:var(--z-lecture);
    height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
    background:var(--brand-mark);
    animation:lecture linear;
    animation-timeline:scroll(root block);
    pointer-events:none;
  }
  @keyframes lecture{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* Le filet suit le doigt du lecteur, il n'anime rien de lui-meme : il
     reste sous prefers-reduced-motion, ou il devient un reperage sans
     mouvement propre. */
  @media (max-width:59.99rem){.lecture{top:var(--h-hdr)}}
}

/* ---------- 31. Replis de telephone ----------
   Le repli n'est pas l'etat de base : le HTML sort avec `open`, donc sans
   JavaScript et sur ordinateur tout est deplie, exactement comme avant. Le
   script referme sur telephone seulement, ou la page faisait vingt ecrans.
   Rien n'est supprime, tout est a un geste. */
.repli{border:0;padding:0;margin:0}
.repli > summary{
  cursor:pointer;list-style:none;position:relative;
  padding:var(--s-3) 2.5rem var(--s-3) 0;min-height:44px;
  display:flex;align-items:center;
  font-family:var(--f-display);font-weight:600;font-size:var(--t-sub);
  letter-spacing:-.01em;color:var(--fg);
}
.repli > summary::-webkit-details-marker{display:none}
.repli > summary::after{
  content:"";position:absolute;right:.5rem;top:50%;
  width:11px;height:11px;margin-top:-5px;
  border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);
  transform:rotate(45deg) translateY(-25%);
  transition:transform var(--d-mid) var(--e-out);
}
.repli[open] > summary::after{transform:rotate(-135deg) translateY(-25%)}
.repli > summary:hover{color:var(--accent-text)}
/* Sur ordinateur le resume disparait : la page ne fait que onze ecrans, elle
   n'a aucun probleme de hauteur et n'a rien a cacher. */
@media (min-width:64rem){
  .repli > summary{display:none}
}
/* Dans une bande Klein, le chevron et le resume reprennent les jetons du bleu */
.band-klein .repli > summary{color:var(--on-klein)}
.band-klein .repli > summary::after{border-color:var(--on-klein)}
.band-klein .klein-card .repli > summary{color:var(--fg)}
.band-klein .klein-card .repli > summary::after{border-color:var(--accent-text)}

/* Les limites remplacent la liste de definitions par des replis : les titres
   restent visibles, seul le detail se referme. Le principe 3 demande que les
   limites soient lisibles sans avoir a demander, un titre replie les montre
   encore, un titre efface non. */
.incl{display:grid;gap:var(--s-5)}
/* le premier repli d'une carte n'a rien a separer d'au-dessus */
.repli-incl{border-top:1px solid var(--border);padding-top:var(--s-2)}
.repli-incl:first-child{border-top:0;padding-top:0}
.repli-incl > summary{font-size:var(--t-h3)}
.incl-c p{margin:0 0 var(--s-3);color:var(--fg-muted);font-size:var(--t-fix)}
.incl-c p:last-child{margin-bottom:0}
.band-klein .repli-incl{border-top-color:var(--border)}

.repli-ftr > summary{
  font-family:var(--f-body);font-size:var(--t-micro);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);
  padding-block:var(--s-2);
}
@media (min-width:64rem){.repli-ftr > summary{display:none}}
.repli-cf > summary{font-size:var(--t-small);padding-block:var(--s-2)}
@media print{
  .repli > summary{display:none}
  .repli::details-content{content-visibility:visible;height:auto}
}
@media (min-width:64rem){.repli-cf > summary{display:none}}
.liens-cas{list-style:none;padding:0;margin:var(--s-5) 0 0;display:grid;gap:var(--s-4)}
.liens-cas li{
  max-width:var(--measure);padding-left:var(--s-5);position:relative;
  color:var(--fg-muted);font-size:var(--t-fix);line-height:1.6;
}
.liens-cas li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--accent);border-radius:1px;
}

/* ---------- 32. Plafond de securite sur la mesure ----------
   Une note de carte pose max-width:none parce que la carte tient la mesure a
   sa place. Cinq d'entre elles depassent 75 caracteres dans une fenetre etroite
   de largeur ou la carte s'elargit sans que la grille a deux colonnes ne soit
   encore active : 84 caracteres a 834 px pour les trois premieres, 76 a 800 px
   et 79 a 900 px pour les deux suivantes. Mesure du 17 aout 2026 sur l'avance
   reelle de la police, et non sur une estimation a 0,5 em.

   Le plafond est pose a 75ch et non a var(--measure), qui vaut 68ch : a 75ch
   la declaration ne mord que la ou la loi est enfreinte et reste sans effet
   partout ailleurs, filet de securite plutot que changement de maquette.
   Aucune de ces cinq regles n'est modifiee, le plafond s'ajoute par-dessus. */
.ap-note,.est-tva,.est-legal,.steps-tight p,.bill-note{max-width:75ch}

/* ---------- 33. Telephone en paysage ----------
   Aucune requete d'orientation ni de hauteur n'existait dans ce fichier : le
   telephone n'avait ete dessine qu'en portrait. Mesure du 17 aout 2026 sur
   812x375, 844x390 et 915x412 : l'en-tete colle (69 px) et la barre d'action
   fixe (71 px) occupent 140 px de haut, soit 37 % de l'ecran, et 188 px donc
   50 % sur /devis/ ou s'ajoute le total colle. Il restait 235 px pour lire.

   Rien n'est retire, tout est resserre. Les deux cibles de la barre gardent
   44 px, plancher de L-TOUCH-1, et le chrome tombe a 104 px, soit 28 %. La
   bande vise les telephones couches (moins de 480 px de haut, en paysage) et
   ne touche ni la tablette ni l'ordinateur, dont la hauteur suffit. */
@media (max-height:30rem) and (orientation:landscape){
  :root{--h-hdr:52px}
  .hdr-in{min-height:52px;padding-block:0}
  .mobile-bar a{min-height:44px;margin-block:4px}
  body.has-bar{padding-bottom:calc(44px + var(--s-3) + env(safe-area-inset-bottom,0px))}
  /* Le total colle du devis passe sur une ligne : le libelle et le montant
     etaient empiles, ce qui coutait 48 px pour deux informations courtes. */
  .est-live{padding-block:var(--s-2)}
  .est-live-k{font-size:var(--t-nano)}
  /* Une section pleine hauteur n'a plus de sens couche : la marge verticale
     des sections descend d'un cran pour que deux blocs entrent a l'ecran. */
  section{padding-block:var(--s-6)}
}

/* ---------- 34. Polarite claire ----------

   AMENDEMENT DU 17 AOUT 2026. CHARTE.md section « La regle du fond sombre »
   disait : « Le site etant entierement sombre, c'est la seule valeur employee
   a l'ecran. » Ce n'est plus vrai. Le site porte desormais deux polarites, et
   la regle de la charte devient conditionnelle : sur fond sombre le symbole
   est en Klein eclairci, sur fond papier il revient au Klein plein. C'est ce
   que le guide d'identite prescrit depuis le debut, personne ne l'appliquait
   faute de fond clair.

   Les valeurs claires viennent du guide : Papier #F4F2EC (« pas de blanc
   pur »), Encre #0E1116, Klein #002FA7. Les intermediaires sont derives pour
   tenir les memes rapports de contraste que la polarite sombre, mesures et
   non estimes, voir le tableau ci-dessous.

   MECANIQUE. Chaque jeton est declare deux fois : la valeur sombre seule,
   puis la forme light-dark(). Un navigateur qui ne connait pas light-dark()
   ignore la seconde et sert le site sombre d'aujourd'hui, sans rien casser.
   Un navigateur qui la connait lit color-scheme pour trancher. Le choix
   explicite du visiteur pose color-scheme sur :root et l'emporte donc sur
   la preference du systeme, sans une seule regle dupliquee.

   RAPPORTS MESURES EN CLAIR, sur le papier #F4F2EC
     texte      16,89:1      texte sur carte      18,12:1
     mute        7,18:1      mute sur carte        7,70:1
     dim         5,71:1      dim sur creux         5,17:1
     bordure     3,90:1      bordure sur creux     3,53:1
     Klein       9,55:1      Klein sur carte      10,24:1
     erreur      5,00:1      papier sur Klein      9,55:1
   ------------------------------------------------------------------ */

:root{
  color-scheme:light dark;

  --c-void:       light-dark(#F4F2EC, #0B0C0F);
  --c-surface:    light-dark(#FBFAF7, #14161B);
  --c-surface-2:  light-dark(#EAE7DE, #1E212A);
  --c-surface-3:  light-dark(#E0DCD1, #262A34);

  --c-line:       light-dark(#D7D3C7, #313642);
  --c-border:     light-dark(#71798B, #666F82);

  --c-text:       light-dark(#0E1116, #F4F5F7);
  --c-mute:       light-dark(#4B505F, #959DAD);
  --c-dim:        light-dark(#585F70, #828BA0);

  /* --c-klein ne bouge pas : le Klein plein reste la surface d'action dans
     les deux polarites. Seules ses declinaisons dependent du fond. */
  --c-klein-lift: light-dark(#002685, #2452E8);
  --c-klein-clair:light-dark(#002FA7, #3F6BFF);
  --c-klein-text: light-dark(#002FA7, #8AA6FF);
  --c-klein-dim:  light-dark(#E3E8F7, #17204A);

  --c-error:      light-dark(#C92323, #FF8080);

  /* Une ombre calee pour du noir sur du noir ecrase le papier. En clair elle
     s'allege et se teinte vers la marque plutot que vers le gris. */
  --sh-card: light-dark(
    0 12px 28px -14px rgb(14 17 22 / .18), 0 2px 6px -3px rgb(14 17 22 / .10),
    0 20px 44px -20px rgb(0 0 0 / .55),    0 3px 10px -4px rgb(0 0 0 / .40));
  --sh-lift: light-dark(
    0 18px 36px -16px rgb(14 17 22 / .24), 0 2px 6px -3px rgb(14 17 22 / .12),
    0 26px 52px -22px rgb(0 0 0 / .62),    0 3px 10px -4px rgb(0 0 0 / .40));
}

/* Le choix explicite du visiteur. Il n'y a rien d'autre a redefinir :
   light-dark() lit color-scheme, donc poser l'un repeint tout. */
:root[data-theme="clair"]{color-scheme:light}
:root[data-theme="sombre"]{color-scheme:dark}

/* Le selecteur n'a aucun sens sans JavaScript, puisque rien ne memoriserait
   le choix. Il n'apparait donc que si le script a pose la classe .js. */
.theme-btn{display:none}
.js .theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;
  background:transparent;color:var(--fg-muted);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background var(--d-fast) var(--e-out),
             color var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out);
}
/* Sous 60rem le menu et le bandeau de devis disparaissent, et le bouton se
   retrouvait seul au milieu de la barre, entre la marque et le burger. C'est
   la zone morte de l'en-tete : l'oeil va du logo au menu et saute le milieu.
   Signale par Marius le 18 aout 2026, apres un controle qui n'avait verifie
   que la presence du bouton et pas sa place. La marge automatique passe donc
   sur lui, et le burger le suit au lieu de la porter. */
/* Le bouton de theme et le burger forment un groupe, sinon l'en-tete etant en
   flex-wrap ils se separaient : a 320 px le burger tombait seul a la ligne, a
   960 px le bouton de theme partait a gauche sous la marque. Les envelopper
   fait d'eux un seul enfant flexible, qui se pousse a droite d'un bloc et
   passe a la ligne d'un bloc. Signale par Marius le 18 aout 2026, apres un
   controle qui n'avait verifie que la presence du bouton et pas sa place. */
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s-2);flex:none}
.burger{margin-left:0}
.theme-btn:hover{background:var(--bg-raised);color:var(--fg);border-color:var(--fg-muted)}
.theme-btn:active{transform:scale(.96)}
.theme-btn svg{width:20px;height:20px;display:block}
/* Une seule icone est visible a la fois, celle de la polarite qu'on obtient
   en cliquant. La bascule se fait en CSS, le script n'a pas a la piloter. */
.theme-btn .ico-clair{display:none}
.theme-btn .ico-sombre{display:block}
@media (prefers-color-scheme:light){
  :root:not([data-theme="sombre"]) .theme-btn .ico-clair{display:block}
  :root:not([data-theme="sombre"]) .theme-btn .ico-sombre{display:none}
}
:root[data-theme="clair"] .theme-btn .ico-clair{display:block}
:root[data-theme="clair"] .theme-btn .ico-sombre{display:none}
:root[data-theme="sombre"] .theme-btn .ico-clair{display:none}
:root[data-theme="sombre"] .theme-btn .ico-sombre{display:block}

/* Les deux instantanes de la transition ne doivent pas se fondre l'un dans
   l'autre : c'est le clip-path circulaire pose par le script qui porte tout
   le geste, un fondu par-dessus le rendrait laiteux. Le nouvel etat passe
   au-dessus, l'ancien reste fixe dessous. */
::view-transition-old(root),
::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}