/* =========================================================================
   mecaniques-precisions.fr — famille V15-studio HABILLÉE.
   Direction figée par la fiche d'habillage du 11/09 : elle se consomme,
   elle ne se re-décide pas. Police Supreme, teinte 290, rayons nuls,
   grille modulaire VISIBLE, accent réservé au marqueur de donnée.

   Préfixes régénérés pour ce NDD (anti-empreinte de parc) :
     mcp-  structure et composants
     tlr-  module signature « le plan coté »
     mic-  blocs de contrôle et de mesure
   Le kit de comportements (gen_kit_components.py, graine = domaine) pose
   de son côté .mcp-is-solid, .mcp-is-open et html.mcp-scroll-locked : ils
   sont stylés ici, jamais redéfinis ailleurs.
   ========================================================================= */

/* Police unique du rôle typo V15 (grotesque néo-helvétique), auto-hébergée.
   Axe variable réel 100→800, ce qui couvre le contraste 200/800 imposé.
   AUCUN appel à un service de polices distant. */
@font-face{
  font-family:'Supreme';
  src:url('/fonts/supreme-variable.woff2') format('woff2');
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --- Palette OKLCH, matériau du métier : acier bleui au revenu, papier
         de plan, graphite. Teinte 290 réservée à ce NDD. --- */
  --ink:        oklch(19% 0.015 290);
  --ink-2:      oklch(31% 0.013 290);
  --ink-3:      oklch(52% 0.011 290);
  --paper:      oklch(97.6% 0.004 290);
  --surface:    oklch(94.5% 0.007 290);
  --surface-2:  oklch(91% 0.010 290);
  --accent:     oklch(50% 0.150 290);
  --accent-ink: oklch(99% 0.003 290);
  --line:       oklch(86% 0.010 290);
  --line-soft:  oklch(91% 0.008 290);
  --line-ink:   oklch(99% 0.003 290 / 0.30);
  --field-line: oklch(48% 0.030 290);

  --font:"Supreme","Helvetica Neue",Helvetica,system-ui,sans-serif;

  --hdr:71px;
  --wrap:1280px;
  --wrap-sm:900px;
  --pad:clamp(20px,4vw,64px);
  --g:clamp(20px,2.4vw,32px);
  --sec-y:clamp(56px,7vw,116px);
  --mcp-callbar-h:0px;
}

/* ============================ RÉINITIALISATION ========================= */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;overflow-x:clip;hyphens:manual;
  background:var(--paper);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:17px;line-height:1.62;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;text-wrap:pretty;
  padding-bottom:var(--mcp-callbar-h);
}
input[type=checkbox],input[type=radio],progress{accent-color:var(--accent)}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure,table{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mcp-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
        clip-path:inset(50%);white-space:nowrap;border:0}
.mcp-skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
          padding:12px 18px;z-index:200}
.mcp-skip:focus{left:0}

/* ============================= TYPOGRAPHIE =============================
   Contraste de graisse 200/800 dans le même titre : c'est la signature
   typographique de la direction. .mcp-thin porte le 200. */
h1,.mcp-h1{font-size:clamp(34px,5.4vw,74px);line-height:1.03;letter-spacing:-0.035em;
           font-weight:800;overflow-wrap:break-word;hyphens:auto}
h2,.mcp-h2{font-size:clamp(27px,3.4vw,47px);line-height:1.07;letter-spacing:-0.03em;
           font-weight:800;overflow-wrap:break-word;hyphens:auto}
h3{font-size:clamp(19px,1.5vw,24px);line-height:1.22;letter-spacing:-0.015em;font-weight:800}
h4{font-size:17px;line-height:1.3;font-weight:800}
.mcp-thin{font-weight:200;letter-spacing:-0.045em}
.mcp-lede{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--ink-2);font-weight:400;
          max-width:60ch;margin-top:20px}
.mcp-maj{font-size:13px;color:var(--ink-3);margin-top:20px}
.mcp-num{font-variant-numeric:tabular-nums}

/* Surtitre : petites capitales espacées, filet accent. */
.mcp-kicker{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:800;
            letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.mcp-kicker::before{content:"";width:34px;height:1px;background:var(--accent);flex:none}
.mcp-ink .mcp-kicker,.mcp-ink2 .mcp-kicker,.mcp-hero-txt .mcp-kicker{color:var(--paper);opacity:.86}

/* Une norme citée : jamais un lien, aucune n'est en accès libre. */
.mcp-norme{font-weight:800;letter-spacing:0.02em;white-space:nowrap;
           border-bottom:1px solid var(--accent)}

/* ========================== FONDS ET SECTIONS ==========================
   Quatre fonds seulement. Toute section sombre porte .mcp-ink ou
   .mcp-ink2 : c'est ce qui rend l'inversion des boutons fiable. */
.mcp-sec{padding:var(--sec-y) 0}
.mcp-paper{background:var(--paper);color:var(--ink)}
.mcp-paper2{background:var(--surface);color:var(--ink)}
.mcp-ink{background:var(--ink);color:var(--paper)}
.mcp-ink2{background:oklch(24% 0.015 290);color:var(--paper)}
.mcp-ink p,.mcp-ink2 p,.mcp-ink li,.mcp-ink2 li{color:var(--paper);opacity:.82}
.mcp-ink a,.mcp-ink2 a,.mcp-hero-txt a{color:oklch(84% 0.10 290)}
.mcp-ink a:hover,.mcp-ink2 a:hover,.mcp-hero-txt a:hover{color:var(--paper)}
.mcp-ink .mcp-lede,.mcp-ink2 .mcp-lede{color:var(--paper);opacity:.86}
.mcp-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* GRILLE MODULAIRE VISIBLE — le trait de la famille. Les filets de
   colonne et de section ne sont pas décoratifs : ils SONT la grille. */
.mcp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--g)}
.mcp-off{grid-column:1 / span 8}
.mcp-off-wide{grid-column:1 / span 12}
.mcp-sechead{padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:36px}
.mcp-ink .mcp-sechead,.mcp-ink2 .mcp-sechead{border-color:var(--line-ink)}
.mcp-lined{display:grid;gap:var(--g)}
.mcp-lined > * + *{border-left:1px solid var(--line);padding-left:var(--g)}
.mcp-ink .mcp-lined > * + *,.mcp-ink2 .mcp-lined > * + *{border-left-color:var(--line-ink)}

/* Groupes courts : filets 1px entre cellules, jamais de carte à ombre. */
.mcp-tight{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
           background:var(--line);border:1px solid var(--line)}
.mcp-tight > *{background:var(--paper);padding:clamp(18px,2vw,28px)}
.mcp-paper2 .mcp-tight > *{background:var(--surface)}
.mcp-ink .mcp-tight,.mcp-ink2 .mcp-tight{background:var(--line-ink);border-color:var(--line-ink)}
.mcp-ink .mcp-tight > *{background:var(--ink)}
.mcp-ink2 .mcp-tight > *{background:oklch(24% 0.015 290)}
.mcp-tight-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mcp-tight b{display:block;font-size:clamp(22px,2vw,31px);font-weight:200;letter-spacing:-0.04em;
             line-height:1;font-variant-numeric:tabular-nums}
.mcp-tight span{display:block;font-size:11.5px;font-weight:800;letter-spacing:0.14em;
                text-transform:uppercase;color:var(--ink-3);margin-top:9px}
.mcp-ink .mcp-tight span,.mcp-ink2 .mcp-tight span{color:var(--paper);opacity:.6}

.mcp-list{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.mcp-list li{position:relative;padding-left:26px;color:var(--ink-2);
             min-width:0;overflow-wrap:break-word}
.mcp-list li::before{content:"";position:absolute;left:0;top:13px;
                     width:8px;height:1.5px;background:var(--accent)}
.mcp-ink .mcp-list li,.mcp-ink2 .mcp-list li{color:var(--paper);opacity:.82}
.mcp-sec p + p{margin-top:1em}

/* Étapes numérotées, filets de colonne, chiffre maigre. */
.mcp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:0;margin-top:32px}
.mcp-steps > *{padding:0 clamp(14px,1.8vw,28px);border-left:1px solid var(--line)}
.mcp-steps > *:first-child{border-left:0;padding-left:0}
.mcp-ink .mcp-steps > *,.mcp-ink2 .mcp-steps > *{border-left-color:var(--line-ink)}
.mcp-steps h3{margin-bottom:8px;min-width:0;overflow-wrap:break-word;hyphens:auto}
.mcp-steps p{font-size:14.5px;line-height:1.5}

/* ============================== BOUTONS ================================ */
.mcp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
         min-height:52px;padding:0 26px;font-size:14px;font-weight:800;letter-spacing:0.09em;
         text-transform:uppercase;border:1px solid transparent;border-radius:0;text-align:center;
         background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
         transition:background .18s ease,color .18s ease,letter-spacing .18s ease,border-color .18s ease}
.mcp-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);letter-spacing:0.15em}
.mcp-btn-ghost{background:transparent;color:var(--ink);border-color:var(--field-line)}
/* Sur la photo du hero, le fantôme doit s'inverser : sinon encre sombre sur image sombre. */
.mcp-hero-txt .mcp-btn-ghost{color:var(--paper);border-color:oklch(99% 0.003 290 / 0.62);
                             background:oklch(19% 0.015 290 / 0.38)}
.mcp-hero-txt .mcp-btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.mcp-btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mcp-ink .mcp-btn,.mcp-ink2 .mcp-btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.mcp-ink .mcp-btn:hover,.mcp-ink2 .mcp-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mcp-ink .mcp-btn-ghost,.mcp-ink2 .mcp-btn-ghost{background:transparent;color:var(--paper);
                                                 border-color:oklch(99% 0.003 290 / 0.60)}
.mcp-ink .mcp-btn-ghost:hover,.mcp-ink2 .mcp-btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.mcp-btn-block{width:100%}

/* ============================== EN-TÊTE ================================
   Le kit pose .mcp-is-solid au défilement (état correct dès le 1er rendu). */
.mcp-band{background:var(--ink);color:var(--paper);font-size:12.5px}
.mcp-band .mcp-wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
                    justify-content:space-between;padding-top:9px;padding-bottom:9px}
.mcp-band a{color:var(--paper);border-bottom:1px solid var(--line-ink)}
.mcp-hdr{position:sticky;top:0;z-index:80;background:var(--paper);
         border-bottom:1px solid transparent}
.mcp-hdr::before{content:"";display:block;height:3px;background:var(--accent)}
.mcp-hdr.mcp-is-solid{border-bottom-color:var(--line);box-shadow:0 1px 0 var(--line)}
.mcp-hdr .mcp-wrap{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);min-height:68px}
.mcp-mark{display:flex;flex-direction:column;justify-content:center;line-height:1;
          color:var(--ink);flex:none}
.mcp-mark{min-width:0;flex:0 1 auto;overflow:hidden}
.mcp-mark b{font-size:19px;font-weight:800;letter-spacing:-0.03em;white-space:nowrap;
            max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mcp-mark b i{font-style:normal;font-weight:200}
.mcp-mark span{font-size:9.5px;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;
               color:var(--ink-3);margin-top:4px}
.mcp-nav{margin-left:auto}
.mcp-nav > ul{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px)}
.mcp-nav summary{list-style:none;cursor:pointer;font-size:16px;font-weight:700;
                 letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:7px;
                 padding:8px 0}
.mcp-nav summary::-webkit-details-marker{display:none}
.mcp-nav summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
                        border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.mcp-nav details[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.mcp-nav summary:hover{color:var(--accent)}
.mcp-panel{position:absolute;margin-top:10px;background:var(--paper);border:1px solid var(--line);
           min-width:320px;z-index:90;display:flex;flex-direction:column}
.mcp-panel a{display:block;padding:13px 18px;color:var(--ink);
             border-bottom:1px solid var(--line-soft)}
.mcp-panel a:last-child{border-bottom:0}
.mcp-panel a small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.mcp-panel a:hover{background:var(--surface);color:var(--accent)}
.mcp-cta-hdr{flex:none}
.mcp-burger{display:none;margin-left:auto;min-height:44px;padding:0 12px;font-size:13px;
            font-weight:800;letter-spacing:0.1em;text-transform:uppercase;flex:none;
            border:1px solid var(--field-line)}

/* ================================ HERO =================================
   MODE B — hero éditorial sur photo, SANS formulaire (archétype
   « no-form-hero » réservé à ce NDD). Le bouton primaire ouvre le volet :
   le formulaire est atteignable sans défiler. */
.mcp-hero{position:relative;isolation:isolate;min-height:min(84vh,760px);display:flex;
          align-items:flex-end;padding-top:clamp(48px,7vw,104px);
          padding-bottom:clamp(40px,5vw,72px);overflow:hidden;background:var(--ink)}
.mcp-hero-photo{position:absolute;inset:0;z-index:0}
.mcp-hero-photo img{width:100%;height:100%;object-fit:cover}
.mcp-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--ink) 88%,transparent) 0%,
      color-mix(in srgb,var(--ink) 72%,transparent) 44%,
      color-mix(in srgb,var(--ink) 26%,transparent) 100%),
    linear-gradient(0deg,
      color-mix(in srgb,var(--ink) 58%,transparent) 0%,
      color-mix(in srgb,var(--ink) 10%,transparent) 56%);
}
.mcp-hero-txt{position:relative;z-index:2;width:100%;color:var(--paper)}
.mcp-hero-txt h1{font-weight:800;max-width:17ch}
.mcp-hero-txt .mcp-lede{color:var(--paper);opacity:.9;max-width:56ch}
.mcp-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.mcp-hero-sm{min-height:min(44vh,380px);padding-top:clamp(30px,4vw,60px);
             padding-bottom:clamp(24px,2.6vw,40px)}
.mcp-hero-sm h1{font-size:clamp(29px,3.5vw,48px)}
.mcp-hero-sm .mcp-lede{margin-top:14px;max-width:52ch}
.mcp-hero-sm .mcp-hero-btns{margin-top:22px}
.mcp-crumb{font-size:12.5px;color:var(--ink-2);margin-bottom:16px}
.mcp-hero .mcp-crumb{color:var(--paper);opacity:.78}
.mcp-crumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.mcp-crumb li + li::before{content:"/";margin-right:8px;opacity:.5}
.mcp-crumb a{color:inherit}

/* ============ MODULE SIGNATURE « LE PLAN COTÉ » (tlr-) =================
   Dessin d'une pièce de révolution avec cotes annotées ; chaque tolérance
   ouvre ce qu'elle demande à l'atelier. Marqueur mesurable : tlr-. */
.tlr-plan{border:1px solid var(--line);background:var(--paper);margin-top:36px}
.mcp-ink .tlr-plan,.mcp-ink2 .tlr-plan{border-color:var(--line-ink);background:transparent}
.tlr-tete{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--g);align-items:end;
          padding:clamp(18px,2vw,26px);border-bottom:1px solid var(--line)}
.mcp-ink .tlr-tete,.mcp-ink2 .tlr-tete{border-bottom-color:var(--line-ink)}
.tlr-piece{padding:clamp(20px,3vw,40px);border-bottom:1px solid var(--line);
           display:flex;justify-content:center;background:var(--surface)}
.mcp-ink .tlr-piece,.mcp-ink2 .tlr-piece{background:oklch(28% 0.015 290);border-bottom-color:var(--line-ink)}
.tlr-piece{overflow-x:auto}
.tlr-piece svg{width:100%;min-width:520px;max-width:620px;height:auto}
.tlr-trait{stroke:var(--ink);fill:none;stroke-width:1.5}
.mcp-ink .tlr-trait,.mcp-ink2 .tlr-trait{stroke:var(--paper)}
.tlr-cote{stroke:var(--accent);fill:none;stroke-width:1}
.tlr-txt{fill:var(--ink);font-size:22px;font-weight:800;font-family:var(--font)}
.mcp-ink .tlr-txt,.mcp-ink2 .tlr-txt{fill:var(--paper)}
.tlr-axe{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:14 4 3 4}
/* Chaque cote est une ligne dépliable : la tolérance, puis ce qu'elle demande. */
.tlr-lignes{display:flex;flex-direction:column}
.tlr-ligne{border-bottom:1px solid var(--line-soft)}
.mcp-ink .tlr-ligne,.mcp-ink2 .tlr-ligne{border-bottom-color:var(--line-ink)}
.tlr-ligne:last-child{border-bottom:0}
.tlr-ligne summary{list-style:none;cursor:pointer;display:grid;
                   grid-template-columns:auto minmax(0,1fr) 22px;gap:18px;align-items:center;
                   padding:18px clamp(18px,2vw,26px)}
.tlr-ligne summary::-webkit-details-marker{display:none}
.tlr-ligne summary::after{content:"";width:13px;height:1.5px;background:var(--accent);
                          justify-self:end;position:relative}
.tlr-ligne[open] summary::after{background:var(--ink-3)}
.tlr-val{font-size:clamp(17px,1.5vw,22px);font-weight:200;letter-spacing:-0.03em;
         font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap;max-width:100%;overflow-wrap:anywhere}
.tlr-quoi{font-size:15px;font-weight:700}
.tlr-det{padding:0 clamp(18px,2vw,26px) 22px;color:var(--ink-2);font-size:15px;max-width:74ch}
.mcp-ink .tlr-det,.mcp-ink2 .tlr-det{color:var(--paper);opacity:.82}
.tlr-note{padding:14px clamp(18px,2vw,26px);border-top:1px solid var(--line);
          font-size:12.5px;color:var(--ink-3)}
.mcp-ink .tlr-note,.mcp-ink2 .tlr-note{border-top-color:var(--line-ink);color:var(--paper);opacity:.6}

/* ============== BLOCS DE CONTRÔLE ET DE MESURE (mic-) ================== */
.mic-preuve{border:1px solid var(--line);padding:clamp(20px,2.2vw,32px);margin-top:32px}
.mcp-ink .mic-preuve,.mcp-ink2 .mic-preuve{border-color:var(--line-ink)}
.mic-preuve h3{margin-bottom:14px}
.mic-preuve ul{margin-top:14px}
.mic-objection{border-left:2px solid var(--accent);padding:4px 0 4px 22px;margin-top:12px}
.mic-objection p:first-child{font-weight:800;font-size:17px}
.mic-objection p + p{margin-top:10px;color:var(--ink-2)}
.mcp-ink .mic-objection p + p,.mcp-ink2 .mic-objection p + p{color:var(--paper);opacity:.82}
.mic-relance{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--g);align-items:center;
             border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:26px 0}
.mcp-ink .mic-relance,.mcp-ink2 .mic-relance{border-color:var(--line-ink)}
.mic-relance p{font-size:clamp(18px,1.6vw,24px);font-weight:200;letter-spacing:-0.025em;
               line-height:1.25;max-width:44ch}

/* TABLEAU PLEINE LAIZE — rupture de symétrie assumée : c'est le SEUL
   élément large de la composition. */
.mic-tab{margin-top:36px;font-variant-numeric:tabular-nums}
.mic-tab caption{text-align:left;font-size:12.5px;color:var(--ink-3);padding-bottom:14px}
.mic-tab th,.mic-tab td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);
                        vertical-align:top}
.mic-tab thead th{font-size:10.5px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
                  color:var(--ink-3);border-bottom:1px solid var(--ink)}
.mic-tab td:first-child{font-weight:800}
.mcp-ink .mic-tab th,.mcp-ink .mic-tab td,.mcp-ink2 .mic-tab th,.mcp-ink2 .mic-tab td{border-bottom-color:var(--line-ink)}

/* ============================ FORMULAIRES ============================== */
.mcp-f{display:flex;flex-direction:column;gap:16px}
.mcp-f-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mcp-f label{display:block;font-size:10.5px;font-weight:800;letter-spacing:0.18em;
             text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.mcp-f input[type=text],.mcp-f input[type=email],.mcp-f select,.mcp-f textarea{
  width:100%;min-height:52px;padding:0 14px;font-size:16px;background:var(--paper);
  color:var(--ink);border:1px solid var(--field-line);border-radius:0;
  transition:border-color .16s ease,box-shadow .16s ease}
.mcp-f textarea{min-height:110px;padding:14px;line-height:1.5;resize:vertical}
.mcp-f select{appearance:none;
  background-image:linear-gradient(45deg,transparent 49%,var(--ink) 50%),
                   linear-gradient(-45deg,transparent 49%,var(--ink) 50%);
  background-size:7px 7px;background-position:right 18px center,right 25px center;
  background-repeat:no-repeat;padding-right:44px}
.mcp-f :is(input,select,textarea):focus{border-color:var(--accent);outline:none;
                                        box-shadow:inset 0 0 0 1px var(--accent)}
.mcp-ftitre{font-size:clamp(20px,1.8vw,26px);font-weight:800;letter-spacing:-0.02em}
.mcp-fsub{font-size:14.5px;color:var(--ink-3)}
.mcp-req{color:var(--accent)}
.mcp-consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-3);
             line-height:1.45}
.mcp-consent input{margin-top:2px;width:16px;height:16px;flex:none}
.mcp-consent label{font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;
                   color:var(--ink-3);margin:0}
.mcp-reassure{font-size:13px;color:var(--ink-3);line-height:1.5}
.mcp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mcp-formcard{border:1px solid var(--line);padding:clamp(22px,2.4vw,36px);background:var(--paper)}
.mcp-paper2 .mcp-formcard{background:var(--paper)}
.mcp-ink .mcp-formcard,.mcp-ink2 .mcp-formcard{background:var(--paper);color:var(--ink)}
.mcp-ink .mcp-formcard p,.mcp-ink2 .mcp-formcard p{color:var(--ink-3);opacity:1}

/* ====================== VOLET LATÉRAL (kit : data-drawer) ==============
   Le kit pose .mcp-is-open et html.mcp-scroll-locked. Ne pas les
   redéfinir : seul le rendu visuel est décrit ici. */
[data-drawer]{background:var(--paper);border-left:1px solid var(--line);
              display:flex;flex-direction:column;visibility:hidden}
[data-drawer].mcp-is-open{visibility:visible}
.mcp-drawer-h{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line);
              padding:20px var(--pad);display:flex;align-items:flex-start;gap:16px;z-index:2}
.mcp-drawer-b{padding:26px var(--pad) 48px}
.mcp-drawer-close{min-height:44px;padding:0 14px;margin-left:auto;font-size:12px;font-weight:800;
                  letter-spacing:0.14em;text-transform:uppercase;border:1px solid var(--field-line)}
.mcp-tab-v{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;
           background:var(--accent);color:var(--accent-ink);writing-mode:vertical-rl;
           font-size:12px;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;
           padding:20px 12px}
.mcp-tab-v:hover{background:var(--ink);color:var(--paper)}

/* ================== BARRE MOBILE (kit : data-mbar) ===================== */
[data-mbar]{display:none;background:var(--ink);border-top:1px solid var(--ink);
            transition:transform .22s ease,opacity .22s ease}
[data-mbar][data-barre-effacee]{transform:translateY(100%);opacity:0;pointer-events:none}
[data-mbar] .mcp-btn{min-height:58px;width:100%;border:0}

/* ================================ FAQ ================================== */
.mcp-faq{border-top:1px solid var(--ink);margin-top:32px}
.mcp-ink .mcp-faq,.mcp-ink2 .mcp-faq{border-top-color:var(--line-ink)}
.mcp-faq details{border-bottom:1px solid var(--line)}
.mcp-ink .mcp-faq details,.mcp-ink2 .mcp-faq details{border-bottom-color:var(--line-ink)}
.mcp-faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
                 font-size:clamp(17px,1.3vw,20px);font-weight:700;letter-spacing:-0.015em}
.mcp-faq summary::-webkit-details-marker{display:none}
.mcp-faq summary::after,.mcp-faq summary::before{content:"";position:absolute;right:6px;top:50%;
  background:var(--accent);transition:opacity .2s ease,transform .2s ease}
.mcp-faq summary::after{width:15px;height:1.5px;margin-top:-0.75px}
.mcp-faq summary::before{width:1.5px;height:15px;margin-top:-7.5px;right:12.75px}
.mcp-faq details[open] summary::before{opacity:0;transform:rotate(90deg)}
.mcp-faq .mcp-a{padding:0 clamp(20px,4vw,64px) 24px 0;color:var(--ink-2);max-width:78ch}
.mcp-ink .mcp-faq .mcp-a,.mcp-ink2 .mcp-faq .mcp-a{color:var(--paper);opacity:.82}

/* ============================ CARTES DE LIEN =========================== */
.mcp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
           background:var(--line);border:1px solid var(--line);margin-top:32px}
.mcp-cards a{background:var(--paper);padding:clamp(20px,2vw,28px);display:flex;
             flex-direction:column;gap:10px;color:var(--ink)}
.mcp-cards a:hover{background:var(--surface)}
.mcp-cards a em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:0.18em;
                text-transform:uppercase;color:var(--accent)}
.mcp-cards a strong{font-size:17.5px;font-weight:800;letter-spacing:-0.02em}
.mcp-cards a span{font-size:14px;color:var(--ink-3);line-height:1.45}

/* ============================== ARTICLE ================================ */
.mcp-art{max-width:74ch}
.mcp-art h2{margin-top:1.9em;padding-top:.7em;border-top:1px solid var(--line);font-weight:200}
.mcp-art h3{margin-top:1.6em}
.mcp-art p{margin-top:1.1em;color:var(--ink-2)}
.mcp-art figure{margin-top:1.5em}
.mcp-art figcaption{font-size:13px;color:var(--ink-3);margin-top:10px}
.mcp-bloglist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
              background:var(--line);border:1px solid var(--line)}
.mcp-bloglist a{background:var(--paper);display:flex;flex-direction:column;color:var(--ink)}
.mcp-bloglist a:hover{background:var(--surface)}
.mcp-bloglist img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mcp-bloglist div{padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:9px}
.mcp-bloglist strong{font-size:17.5px;font-weight:800;letter-spacing:-0.02em;line-height:1.3}
.mcp-bloglist span{font-size:14px;color:var(--ink-3);line-height:1.45}

.mcp-fig{margin-top:32px}
.mcp-fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mcp-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--g);
           align-items:start}

/* ============================= PIED DE PAGE ============================ */
.mcp-ft{background:var(--surface);color:var(--ink);border-top:3px solid var(--accent)}
.mcp-ft-cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
             gap:var(--g);padding:clamp(44px,5vw,72px) 0}
.mcp-ft h3{font-size:10.5px;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;
           color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--line);
           margin-bottom:14px}
.mcp-ft li a{display:block;padding:7px 0;font-size:15px;color:var(--ink)}
.mcp-ft li a:hover{color:var(--accent)}
.mcp-ft-normes{font-size:12.5px;color:var(--ink-3);line-height:1.55;padding:18px 0;
               border-top:1px solid var(--line);max-width:92ch}
.mcp-ft-end{font-size:12.5px;color:var(--ink-3);padding:16px 0 28px;border-top:1px solid var(--line)}

/* ======================================================================= */
/*  MOBILE — composition testée à 390px, pas un empilement subi.           */
/* ======================================================================= */
@media (max-width:1080px){
  .mcp-off{grid-column:1 / span 12}
  .mcp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mcp-ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--hdr:63px}
  .mcp-hdr .mcp-wrap{min-height:60px}
  .mcp-cta-hdr{display:none}
  .mcp-burger{display:inline-flex;align-items:center}
  .mcp-nav{position:fixed;inset:var(--hdr) 0 0 0;background:var(--paper);z-index:70;
           overflow-y:auto;padding:10px var(--pad) 48px;display:block;margin-left:0}
  .mcp-nav[hidden]{display:none}
  .mcp-nav > ul{flex-direction:column;align-items:stretch;gap:0}
  .mcp-nav summary{padding:16px 0;border-bottom:1px solid var(--line);font-size:18px}
  .mcp-panel{position:static;border:0;border-bottom:1px solid var(--line);min-width:0;
             padding-left:12px;background:var(--surface)}
  [data-mbar]{display:block}
  body{--mcp-callbar-h:64px}
  .mcp-tab-v{display:none}
  [data-drawer]{width:100vw}
  .mcp-steps{grid-template-columns:minmax(0,1fr)}
  .mcp-steps > *{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}
  .mcp-steps > *:first-child{border-top:0;padding-top:0}
  .mcp-lined > * + *{border-left:0;padding-left:0;border-top:1px solid var(--line);
                     padding-top:22px;margin-top:22px}
  .mcp-split,.mcp-f-2,.mic-relance{grid-template-columns:minmax(0,1fr)}
  .tlr-tete{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  :root{--sec-y:clamp(44px,11vw,64px)}
  .mcp-mark b{font-size:16px}
  .mcp-mark span{font-size:8.5px;letter-spacing:0.14em}
  .mcp-band{font-size:11.5px}

  .mcp-hero{min-height:76vh;padding-top:clamp(36px,9vw,64px)}
  /* Le texte remonte dans le dégradé : rampe verticale plus dense, calibrée
     contre une photo d'atelier claire. */
  .mcp-hero::after{background:
    linear-gradient(0deg,
      color-mix(in srgb,var(--ink) 93%,transparent) 0%,
      color-mix(in srgb,var(--ink) 86%,transparent) 48%,
      color-mix(in srgb,var(--ink) 66%,transparent) 100%)}
  /* Items courts : 2 par ligne, jamais un par un pleine largeur. */
  .mcp-tight,.mcp-tight-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mcp-tight-3 > :last-child{grid-column:1 / -1}
  .mcp-cards,.mcp-bloglist{grid-template-columns:minmax(0,1fr)}
  .mcp-ft-cols{grid-template-columns:minmax(0,1fr);gap:28px;padding:34px 0}
  .tlr-ligne summary{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .tlr-ligne summary::after{display:none}
  /* Tableau dense : cartes empilées, étiquette par cellule. */
  .mic-tab,.mic-tab tbody,.mic-tab tr,.mic-tab td{display:block;width:100%}
  .mic-tab thead{display:none}
  .mic-tab tr{border:1px solid var(--line);margin-bottom:12px;padding:6px 14px 10px}
  .mic-tab td{border:0;padding:9px 0;border-bottom:1px solid var(--line-soft)}
  .mic-tab td:last-child{border-bottom:0}
  .mic-tab td::before{content:attr(data-l);display:block;font-size:10px;font-weight:800;
                      letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);
                      margin-bottom:4px}
  .mic-tab td:first-child{font-size:17px}
}
@media print{.mcp-hdr,[data-mbar],.mcp-tab-v,[data-drawer],[data-drawer-scrim]{display:none !important}}

/* kit de comportements (gen_kit_components.py, graine = domaine) */
/* Bloc CSS minimal à coller dans theme.css du site — généré par gen_kit_components.py.
   mcp est déjà substitué par le préfixe du site dans le fichier livré ; ce gabarit
   reste en clair ici pour qu'on sache ce qui a été injecté. */

/* --- en-tête (data-hdr) --- */
/* .mcp-is-solid est ajoutée quand la page a défilé au-delà du seuil — l'état est
   TOUJOURS correct dès le premier rendu (les 3 variantes du générateur synchronisent
   immédiatement, jamais seulement au prochain scroll). Adapter le rendu visuel à la
   direction du site : */
[data-hdr] { transition: background-color .2s ease, box-shadow .2s ease; }
[data-hdr].mcp-is-solid { /* ex. background:var(--paper); box-shadow:0 1px 0 var(--line); */ }

/* --- callbar mobile (data-mbar) --- */
:root { --mcp-callbar-h: 64px; } /* repli no-JS, écrasé en direct par le générateur */
[data-mbar] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; }
/* Exemple d'usage — à poser sur le bouton d'envoi du hero pour ne jamais être recouvert :
   .hero-submit { margin-bottom: var(--mcp-callbar-h); } */

/* --- volet latéral (data-drawer) --- */
[data-drawer] {
  position: fixed; inset: 0 0 0 auto; width: min(468px, 100vw); z-index: 90;
  transform: translateX(101%); transition: transform .28s ease; overflow-y: auto;
}
[data-drawer].mcp-is-open { transform: translateX(0); }
[data-drawer-scrim] {
  position: fixed; inset: 0; z-index: 85; opacity: 0; pointer-events: none;
  transition: opacity .22s ease; background: oklch(0.22 0.03 250 / .5);
}
/* :has() plutôt qu'une classe posée en plus par le JS sur le scrim — un point de moins à
   maintenir en cohérence entre script et CSS. */
body:has([data-drawer].mcp-is-open) [data-drawer-scrim] { opacity: 1; pointer-events: auto; }

/* verrouillage du scroll body pendant que le volet est ouvert */
html.mcp-scroll-locked { overflow: hidden; }
html.mcp-scroll-locked body { position: fixed; left: 0; right: 0; width: 100%; }

/* --- simulateur (data-sim) --- */
[data-sim-result] { font-variant-numeric: tabular-nums; }