/* ══════════════════════════════════════════════════════════════════════════
   APOGÉE CONCEPT — FEUILLE DE STYLE DU SITE
   ──────────────────────────────────────────────────────────────────────────
   Page verticale classique, fond sombre, accent cyan électrique.
   L'ADN de dessin technique est gardé : Archivo Narrow en capitales pour les
   libellés, filets d'un pixel, chiffres tabulaires, numéros de section.

   Sommaire
     1.  Jetons et bases
     2.  En-tête collant et navigation
     3.  Héros
     4.  Rythme vertical des sections
     5.  Composants de contenu        — repris de l'ancienne feuille
     6.  Modals                       — repris, plus la fenêtre plein écran du devis
     7.  Calculateur d'impression 3D  — repris tel quel (balisage de print3d.js)
     8.  Modal de commande 3D         — repris tel quel
     9.  Corrections pour fond sombre
     10. Pied de page
     11. Adaptatif
     12. Accessibilité et impression

   ⚠ Ne renomme pas les identifiants de #quote3d ni ceux de #print3dModal :
     js/print3d.js les cherche par leur nom.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. JETONS ═══ */
:root{
  --paper:#0d1418;          /* fond de page */
  --paper-2:#131e23;        /* panneaux */
  --paper-3:#0a1013;        /* creux */
  --panel-deep:#060c0f;     /* colonne de gauche des modals */
  --ink:#e8f4f3;
  --ink-2:#9fb5b6;
  --ink-3:#6b8286;
  --line:#22353a;           /* filet discret */
  --line-2:#1a2a2e;         /* filet de tableau */
  --rule:#3a5b62;           /* filet de règle — remplace l'ancien trait d'encre */
  --acc:#22d3ee;            /* cyan électrique */
  --acc-2:#67e8f9;
  --acc-soft:rgba(34,211,238,.10);
  --acc-line:rgba(34,211,238,.30);
  --rev:#ff7a5c;            /* révisions et erreurs */
  --ok:#4ade80;
  --warn:#fbbf24;
  --tint-rev:rgba(255,122,92,.10);
  --tint-warn:rgba(251,191,36,.10);
  --tint-ok:rgba(74,222,128,.09);
  --chip:rgba(6,12,15,.82);

  --disp:'Archivo Narrow',system-ui,sans-serif;
  --ui:'Switzer','Helvetica Neue',Arial,sans-serif;

  --hdr:64px;
  --wrap:1340px;
  --gut:clamp(18px,5vw,64px);
  --sec-y:clamp(64px,9vw,132px);
}

*{box-sizing:border-box;margin:0;padding:0}
/* Indispensable : plusieurs blocs sont masqués par l'attribut [hidden] depuis
   le JavaScript. Sans « !important », une règle de classe comme
   .q3d-loading{display:flex} l'emporte sur la feuille du navigateur et le bloc
   reste visible en permanence. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
/* Sous 430 px, la barre n'a plus de marge : on resserre le bouton de devis
   plutôt que de le laisser pousser le menu hors de l'écran. */
@media(max-width:430px){
  .hdr-cta{padding:0 10px;gap:6px;margin-left:6px}
  .hdr-cta b{font-size:10.5px;letter-spacing:.05em}
  .hdr-cta svg{width:17px;height:17px}
  .hdr-cli{margin-left:5px;padding:0 10px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{height:auto;min-height:100%}
body{
  overflow-x:hidden;
  background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* Fond de page : deux halos et une trame de plan. En position fixe, donc ils ne
   défilent pas et ne créent aucun conteneur de défilement supplémentaire. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 12% -4%,rgba(34,211,238,.13),transparent 34rem),
    radial-gradient(circle at 92% 18%,rgba(255,122,92,.07),transparent 28rem),
    linear-gradient(165deg,#0a1216 0%,#0f1b20 48%,#080f12 100%)}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(58,91,98,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(58,91,98,.11) 1px,transparent 1px);
  background-size:76px 76px}
/* Le défilement de la page est gelé pendant qu'une popup est ouverte.
   Deux voies volontairement : js/print3d.js retire « modal-open » en fermant sa
   fenêtre de commande, même si la popup du devis est encore ouverte derrière.
   La règle :has() garde alors le verrou, sans toucher à son script. */
body.modal-open{overflow:hidden}
body:has(.modal.open),body:has(.modal-overlay.open){overflow:hidden}

a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%;height:auto}
::selection{background:var(--acc);color:#04191d}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.lbl{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.lbl.acc{color:var(--acc)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* La marque. Le PNG fait 1442 × 301 : le losange occupe les 274 premiers pixels,
   le reste est le mot « APOGÉE CONCEPT ». L'aspect-ratio 274/301 découpe donc
   exactement le losange, pleine hauteur — sans lui on voit « APOG » coupé.
   Le tracé est NOIR sur transparent : sur fond sombre il faut l'inverser, sinon
   il n'apparaît pas du tout. */
/* display:block est obligatoire : la marque est portée par des <span>, et sur un
   élément inline ni aspect-ratio ni height ne s'appliquent — le logo se retrouve
   écrasé dans l'en-tête et absent du héros.
   max-width:none aussi : la règle globale img{max-width:100%} ramènerait l'image à
   la largeur du cadre découpé (≈ 24 px), donc écraserait le tracé. */
.bm{display:block;position:relative;aspect-ratio:274/301;overflow:hidden;flex-shrink:0}
.bm img{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none;display:block;
  filter:brightness(0) invert(1)}
.bm.full{aspect-ratio:1442/301}
.bm.inv img{opacity:.55}

/* ═══ 2. EN-TÊTE COLLANT ═══ */
.hdr{position:sticky;top:0;z-index:300;height:var(--hdr);
  background:rgba(8,15,18,.82);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);transition:border-color .3s,background .3s}
.hdr.is-stuck{background:rgba(6,12,15,.94);border-bottom-color:var(--acc-line)}
.hdr-in{height:100%;display:flex;align-items:stretch;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.hdr-brand{display:flex;align-items:center;gap:11px;padding-right:22px;flex-shrink:0}
.hdr-brand .bm{height:26px}
.hdr-brand b{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap}
.hdr-nav{display:flex;align-items:stretch;margin-left:auto}
/* white-space:nowrap est indispensable : sans lui « Impression 3D » se casse sur
   deux lignes dès que la barre est serrée, et la nav pousse le bouton de devis
   hors de la marge de la page. */
.hdr-nav{min-width:0}
.hdr-nav a{display:flex;align-items:center;padding:0 clamp(8px,.95vw,13px);position:relative;
  white-space:nowrap;
  font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);transition:color .2s}
.hdr-nav a::after{content:'';position:absolute;left:clamp(8px,.95vw,13px);right:clamp(8px,.95vw,13px);
  bottom:15px;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;
  transition:transform .25s}
.hdr-nav a:hover{color:var(--ink)}
.hdr-nav a.on{color:var(--acc)}
.hdr-nav a.on::after,.hdr-nav a:hover::after{transform:scaleX(1)}
/* Bouton de devis 3D — la porte d'entrée commerciale du site.
   Volontairement plus grand et plus haut que la nav : deux lignes de texte,
   une icône de pièce imprimée, et un halo qui respire pour qu'on le voie
   avant tout le reste de la barre. Le libellé dit « impression 3D » en
   toutes lettres : « devis en ligne » seul ne disait pas de quoi. */
.hdr-cta{display:flex;align-items:center;gap:10px;margin:9px 0 9px 16px;padding:0 17px;flex-shrink:0;
  background:var(--acc);color:#04191d;border:1px solid var(--acc);cursor:pointer;
  border-radius:2px;text-align:left;
  box-shadow:0 0 0 0 var(--acc-soft),0 6px 18px -8px rgba(0,0,0,.55);
  transition:background .2s,box-shadow .25s,transform .2s}
.hdr-cta:hover{background:var(--acc-2);transform:translateY(-1px);
  box-shadow:0 0 0 4px var(--acc-soft),0 10px 24px -10px rgba(0,0,0,.6)}
.hdr-cta:active{transform:translateY(0)}
.hdr-cta svg{flex-shrink:0;opacity:.92}
.hdr-cta span{display:flex;flex-direction:column;gap:3px;line-height:1}
.hdr-cta b{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap}
.hdr-cta em{font-style:normal;font-family:var(--disp);font-weight:500;font-size:8.5px;
  letter-spacing:.13em;text-transform:uppercase;opacity:.74;white-space:nowrap}
.hdr-cta i{font-style:normal;font-family:var(--disp);font-weight:700;font-size:7.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 5px;
  border:1px solid currentColor;flex-shrink:0}
/* Le halo pulse deux fois après le chargement, puis se tait : assez pour
   attirer l'oeil, pas assez pour agacer. Muet si le visiteur limite les
   animations. */
@media(prefers-reduced-motion:no-preference){
  .hdr-cta{animation:cta-pulse 2.4s ease-out 1.4s 2}
}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 0 0 0 var(--acc-soft),0 6px 18px -8px rgba(0,0,0,.55)}
  50%{box-shadow:0 0 0 8px transparent,0 6px 18px -8px rgba(0,0,0,.55)}
}
.hdr-cli{display:flex;align-items:center;gap:7px;margin:13px 0 13px 8px;padding:0 14px;flex-shrink:0;
  border:1px solid var(--line);color:var(--acc);
  font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,color .2s,border-color .2s}
.hdr-cli:hover{background:var(--acc);border-color:var(--acc);color:#04191d}
.hdr-burger{display:none;align-items:center;justify-content:center;width:42px;margin:12px 0 12px 6px;
  background:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;flex-shrink:0}
.hdr-burger span{display:block;width:17px;height:1px;background:currentColor;position:relative}
.hdr-burger span::before,.hdr-burger span::after{content:'';position:absolute;left:0;width:17px;
  height:1px;background:currentColor;transition:transform .25s,top .25s}
.hdr-burger span::before{top:-5px}
.hdr-burger span::after{top:5px}
.hdr-burger[aria-expanded=true] span{background:transparent}
.hdr-burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.hdr-burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

/* liste déroulante, seule navigation en dessous de 1180 px */
.hdr-drop{position:fixed;left:0;right:0;top:var(--hdr);z-index:290;display:none;
  background:rgba(6,12,15,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--acc-line);
  max-height:calc(100dvh - var(--hdr));overflow-y:auto;overscroll-behavior:contain}
.hdr-drop.open{display:block}
.hdr-drop a{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;
  padding:14px var(--gut);border-bottom:1px solid var(--line-2)}
.hdr-drop a>span{font-family:var(--disp);font-size:10px;letter-spacing:.14em;color:var(--acc)}
.hdr-drop a b{display:block;font-family:var(--disp);font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.02em}
.hdr-drop a em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.hdr-drop a:hover{background:var(--acc-soft)}

/* ═══ 3. HÉROS ═══ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
/* Halo cyan derrière la marque. On n'utilise PAS og-cover.jpg ici : c'est la
   carte de partage social, avec du texte incrusté — il devenait lisible en
   filigrane et son bord gauche faisait une couture verticale nette. */
.hero::after{content:'';position:absolute;right:-10%;top:-18%;width:56%;height:136%;z-index:0;
  background:radial-gradient(ellipse at 58% 50%,rgba(34,211,238,.14),transparent 64%);
  pointer-events:none}
.hero-in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:clamp(52px,9vh,116px) var(--gut) clamp(56px,8vh,92px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:clamp(26px,5vw,80px);align-items:center;
  min-height:min(760px,calc(100dvh - var(--hdr)))}
.hero-kicker{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:600;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:22px}
.hero-kicker::before{content:'';width:clamp(24px,4vw,58px);height:1px;background:var(--acc)}
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(48px,9.2vw,136px);line-height:.84;
  letter-spacing:-.04em;text-transform:uppercase}
.hero h1 span{display:block;color:var(--acc)}
.hero-sub{font-size:clamp(16.5px,1.5vw,21px);line-height:1.45;font-weight:300;max-width:44ch;
  margin-top:26px;color:var(--ink-2)}
.hero-sub b{color:var(--ink);font-weight:500}
.hero-meta{display:flex;flex-wrap:wrap;gap:clamp(16px,2.6vw,38px);margin-top:28px;padding-top:20px;
  border-top:1px solid var(--line)}
.hero-meta div{display:flex;flex-direction:column;gap:3px}
.hero-meta dt{font-family:var(--disp);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3)}
.hero-meta dd{font-family:var(--disp);font-weight:600;font-size:14.5px;letter-spacing:.02em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-proof{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,30px);margin-top:24px;padding-top:16px;
  border-top:1px solid var(--line);font-family:var(--disp);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.hero-proof span{display:flex;gap:7px;align-items:baseline}
.hero-proof b{font-size:17px;color:var(--acc)}
/* La colonne droite porte la planche animée (section 13). Le losange seul y était
   avant ; le mot « Apogée Concept » est déjà dans le <h1>, on ne le répète pas. */
.hero .ap-hero-plate{justify-self:center;align-self:center}

/* ═══ 4. RYTHME VERTICAL DES SECTIONS ═══ */
.sec{position:relative;padding:var(--sec-y) 0;scroll-margin-top:var(--hdr);
  border-bottom:1px solid var(--line)}
.sec.alt{background:rgba(19,30,35,.5)}
.sec-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,2vw,26px);
  align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.sec-n{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.22em;color:var(--acc)}
.sec-t{font-family:var(--disp);font-weight:700;font-size:clamp(23px,3.5vw,46px);line-height:.96;
  letter-spacing:-.025em;text-transform:uppercase}
.sec-x{font-family:var(--disp);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);text-align:right}
.sec-body{position:relative;z-index:1;padding-top:clamp(24px,3.6vw,48px)}
/* Filigrane : seulement le losange. Avec le logo complet, le mot « APOGÉE
   CONCEPT » restait lisible en haut de la section suivante, sous l'en-tête. */
.sec-wm{position:absolute;right:var(--gut);bottom:clamp(10px,2vw,26px);z-index:0;
  width:clamp(70px,8vw,120px);aspect-ratio:274/301;height:auto;
  object-fit:cover;object-position:left center;
  opacity:.06;pointer-events:none;filter:brightness(0) invert(1)}
/* ═══ 5. COMPOSANTS DE CONTENU ═══ */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,3.4vw,60px)}
h2.big{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,42px);text-transform:uppercase;
  line-height:1.02;letter-spacing:-.02em;margin-bottom:18px}
h2.big span{display:block;font-weight:500;color:var(--ink-2)}
p.lede{font-size:17px;color:var(--ink-2);font-weight:300;max-width:56ch}
p.lede b{color:var(--ink);font-weight:500}
p+p{margin-top:13px}

.figs{border-top:1px solid var(--rule);margin-top:22px}
.fig{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line-2)}
.fig-v{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1;
  letter-spacing:-.02em;min-width:3.4em}
.fig-v em{font-style:normal;color:var(--acc)}
.fig-k{font-size:14px;color:var(--ink-2)}

.quote{margin-top:20px;padding:16px 20px;background:var(--paper-2);border-left:2px solid var(--acc)}
.quote q{font-size:17px;line-height:1.5;quotes:'«\00a0' '\00a0»'}
.quote cite{display:block;margin-top:9px;font-family:var(--disp);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-style:normal;color:var(--ink-3)}

table{width:100%;border-collapse:collapse;font-size:14.5px}
thead th{font-family:var(--disp);font-weight:600;font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:0 11px 8px;border-bottom:1px solid var(--rule);white-space:nowrap}
thead th:first-child{padding-left:0}
thead th.r{text-align:right}
tbody td{padding:12px 11px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ink-2)}
tbody td:first-child{padding-left:0}
tbody tr:hover td{background:var(--paper-2)}
td.n{font-family:var(--disp);font-size:10.5px;color:var(--acc);width:46px}
td.d strong{display:block;font-family:var(--disp);font-weight:600;font-size:16px;text-transform:uppercase;
  letter-spacing:.005em;line-height:1.15;margin-bottom:3px;color:var(--ink)}
/* « > » indispensable : sinon la règle attrape le badge de révision dans le <strong> */
td.d > span{display:block;font-size:13.5px;line-height:1.45;color:var(--ink-2);max-width:44ch}
td.m{font-family:var(--disp);font-size:11px;line-height:1.65;white-space:nowrap}
td.r{text-align:right;font-family:var(--disp);font-size:11px;line-height:1.65;white-space:nowrap;color:var(--ink)}
td.step{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--acc);width:56px}
.rev{display:inline-block;max-width:max-content;font-family:var(--disp);font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rev);border:1px solid var(--rev);padding:1px 5px;
  margin-left:6px;vertical-align:2px}
.more{background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;padding:2px 0;
  font-family:var(--disp);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);
  transition:border-color .2s}
.more:hover{border-color:var(--acc)}

.sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));border-top:1px solid var(--rule)}
.sector{display:flex;gap:11px;align-items:baseline;padding:13px 16px 13px 0;border-bottom:1px solid var(--line-2)}
.sector span{font-family:var(--disp);font-size:10px;color:var(--acc)}
.sector b{font-family:var(--disp);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.005em}
.nda{display:flex;gap:10px;margin-top:20px;padding:13px 16px;background:var(--paper-2);
  font-size:14px;color:var(--ink-2);max-width:78ch;align-items:flex-start}
.nda svg{flex-shrink:0;margin-top:3px;color:var(--acc)}

/* vues eDrawings */
.views{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.view{background:var(--paper);display:flex;flex-direction:column;min-width:0}
.view-f{position:relative;aspect-ratio:4/3;background:var(--paper-2);display:grid;place-items:center;overflow:hidden}
.view-f iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;
  transition:opacity .6s ease;background:var(--paper)}
.view-f.loaded iframe{opacity:1}
.view-ph{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s ease}
.view-f.loaded .view-ph{opacity:0;pointer-events:none}
.view-ph svg{width:74%;height:auto}
.view-l{position:absolute;left:9px;top:8px;z-index:2;font-family:var(--disp);font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.view-load{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;
  background:var(--paper);border:1px solid var(--rule);color:var(--ink);cursor:pointer;padding:8px 13px;
  font-family:var(--disp);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s,color .2s}
.view-load:hover{background:var(--ink);color:var(--paper)}
.view-msg{position:absolute;inset:auto 10px 10px;z-index:4;background:var(--paper);
  border:1px solid var(--rev);color:var(--rev);padding:8px 10px;font-size:12px;line-height:1.4}
.view-m{padding:12px 14px;border-top:1px solid var(--line)}
.view-m b{display:block;font-family:var(--disp);font-weight:600;font-size:14px;text-transform:uppercase}
.view-m span{font-size:12.5px;color:var(--ink-3)}

/* comparatif machines */
.compare{width:100%;border-collapse:collapse;font-size:14px}
.compare th{font-family:var(--disp);font-weight:600;font-size:15px;text-transform:uppercase;
  text-align:left;padding:0 12px 10px;border-bottom:1px solid var(--rule)}
.compare th:first-child{width:180px;font-size:9px;letter-spacing:.15em;color:var(--ink-3);padding-left:0}
.compare th em{display:block;font-family:var(--disp);font-style:normal;font-size:9.5px;
  letter-spacing:.13em;color:var(--acc);text-transform:uppercase;margin-top:3px;font-weight:600}
.compare td{padding:9px 12px;border-bottom:1px solid var(--line-2);color:var(--ink-2);font-size:13.5px}
.compare td:first-child{padding-left:0;font-family:var(--disp);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.compare tr:hover td{background:var(--paper-2)}
.mats{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.mat{font-family:var(--disp);font-size:10.5px;letter-spacing:.06em;border:1px solid var(--line);
  padding:6px 11px;color:var(--ink)}
.mat em{font-style:normal;color:var(--ink-3);margin-left:6px}

.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line)}
.cta-note{font-size:14px;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;background:var(--ink);
  color:var(--paper);border:1px solid var(--rule);cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.btn svg{flex-shrink:0;opacity:.9}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.line:hover{border-color:var(--acc);color:var(--acc);background:transparent}
.btn[disabled]{opacity:.4;pointer-events:none}
/* Variante « grand appel » — réservée au devis d'impression 3D. Deux lignes :
   l'action en gros, ce qu'on obtient en dessous. Le but est qu'on ne puisse pas
   confondre ce bouton avec une simple demande de soumission par courriel. */
.btn.big{gap:13px;padding:17px 28px;font-size:13.5px;letter-spacing:.09em;border-radius:2px;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.5)}
.btn.big span.t{display:flex;flex-direction:column;gap:4px;line-height:1;text-align:left}
.btn.big span.t em{font-style:normal;font-weight:500;font-size:9.5px;letter-spacing:.12em;opacity:.76}
.btn.big:hover{box-shadow:0 12px 26px -12px rgba(0,0,0,.55)}

/* coordonnées + formulaire de la feuille contact */
.coord{border-top:1px solid var(--rule)}
.coord a,.coord div{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line-2);font-size:15.5px}
.coord dt,.coord .k{font-family:var(--disp);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding-top:4px}
.coord a:hover dd{color:var(--acc)}

/* ═══ 6. MODALS ═══ */
.modal{position:fixed;inset:0;z-index:200;display:none;padding:clamp(12px,3vh,40px)}
.modal.open{display:grid;place-items:center}
.modal-bg{position:absolute;inset:0;background:rgba(2,6,8,.74);backdrop-filter:blur(3px)}
.modal-box{position:relative;background:var(--paper);border:1px solid var(--rule);width:100%;
  max-width:1000px;max-height:calc(100dvh - clamp(24px,6vh,80px));display:grid;
  grid-template-columns:300px 1fr;grid-template-rows:minmax(0,1fr);overflow:hidden;overflow:clip;box-shadow:0 40px 90px -30px rgba(0,0,0,.60);
  animation:modalIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-box.solo{grid-template-columns:1fr;max-width:760px}
.modal-side{background:var(--ink);color:var(--paper);padding:30px 26px;display:flex;
  flex-direction:column;justify-content:space-between;gap:20px;
  min-height:0;overflow-y:auto;overscroll-behavior:contain}
.modal-side .lbl{color:rgba(255,255,255,.55)}
.modal-side h2{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.4vw,30px);
  text-transform:uppercase;line-height:1.04;letter-spacing:-.02em;margin:14px 0 12px}
.modal-side p{font-size:14.5px;color:rgba(255,255,255,.7);font-weight:300}
.modal-side ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.modal-side li{display:flex;gap:9px;font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.45}
.modal-side li svg{flex-shrink:0;margin-top:2px;color:var(--acc)}
.modal-side .bm{width:34px;opacity:.9}
.modal-main{padding:30px 30px 26px;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.modal-x{position:absolute;right:10px;top:10px;z-index:5;width:34px;height:34px;display:grid;
  place-items:center;background:var(--paper);border:1px solid var(--line);cursor:pointer;color:var(--ink);
  transition:background .2s,color .2s,transform .3s}
.modal-x:hover{background:var(--ink);color:var(--paper);transform:rotate(90deg)}
.modal-h{margin-bottom:20px}
.modal-h h3{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2vw,25px);
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px}
.modal-h p{font-size:14.5px;color:var(--ink-2)}

.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:14px}
.f{background:var(--paper);padding:9px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font-family:var(--disp);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.f label b{color:var(--rev);font-weight:600}
.f input,.f select,.f textarea{border:0;background:transparent;font-family:var(--ui);font-size:15px;
  color:var(--ink);padding:2px 0;width:100%;resize:none}
.f input:focus,.f select:focus,.f textarea:focus{outline:none}
.f:focus-within{background:var(--paper-2)}
.f.err{background:var(--tint-rev)}
.f.err label{color:var(--rev)}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:14px}
.chk{background:var(--paper);padding:11px 12px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-size:13.5px;color:var(--ink-2);transition:background .18s}
.chk:hover{background:var(--paper-2)}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk-box{width:15px;height:15px;flex-shrink:0;margin-top:2px;border:1px solid var(--ink-3);
  background:var(--paper);position:relative;transition:background .18s,border-color .18s}
.chk-box::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .18s}
.chk input:checked ~ .chk-box{background:var(--acc);border-color:var(--acc)}
.chk input:checked ~ .chk-box::after{transform:rotate(45deg) scale(1)}
.chk input:focus-visible ~ .chk-box{outline:2px solid var(--acc);outline-offset:2px}
.chk b{display:block;color:var(--ink);font-weight:500;font-size:14px}
.drop-file{position:relative;border:1.5px dashed var(--line);background:var(--paper-2);padding:20px 16px;
  text-align:center;margin-bottom:14px;transition:border-color .2s,background .2s}
.drop-file:hover,.drop-file.over{border-color:var(--acc);background:var(--acc-soft)}
.drop-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-file b{display:block;font-family:var(--disp);font-weight:600;font-size:13px;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:4px}
.drop-file span{font-family:var(--disp);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.f-list{list-style:none;margin-bottom:14px}
.f-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);
  margin-bottom:5px;font-size:13.5px}
.f-list li span{margin-left:auto;font-family:var(--disp);font-size:10px;color:var(--ink-3)}
.f-list button{background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:17px;line-height:1}
.f-list button:hover{color:var(--rev)}
.f-bar{display:flex;gap:12px;align-items:center;margin-top:auto;padding-top:18px;
  border-top:1px solid var(--line)}
.f-bar .note{font-size:12.5px;color:var(--ink-3)}
.alert{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;margin-bottom:14px;
  border:1px solid var(--rev);background:var(--tint-rev);color:var(--rev);font-size:13.5px;line-height:1.45}
.alert svg{flex-shrink:0;margin-top:2px}
.done{text-align:center;padding:24px 10px}
.done svg{margin-bottom:18px}
.done h3{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.2vw,28px);
  text-transform:uppercase;margin-bottom:12px}
.done p{font-size:15px;color:var(--ink-2);max-width:46ch;margin:0 auto 8px}
.done .ref{font-family:var(--disp);font-size:12px;letter-spacing:.14em;color:var(--acc)}

/* détail d'un service */
.svc-detail h2{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.6vw,34px);
  text-transform:uppercase;line-height:1.05;letter-spacing:-.02em;margin-bottom:12px}
.svc-detail .sum{font-size:16px;color:var(--ink-2);margin-bottom:22px;max-width:60ch}
.svc-detail section{margin-bottom:20px}
.svc-detail h4{font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.svc-detail ul{list-style:none;border-top:1px solid var(--line)}
.svc-detail li{padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14.5px;color:var(--ink-2)}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px}
.svc-tags span{font-family:var(--disp);font-size:10.5px;letter-spacing:.06em;border:1px solid var(--line);
  padding:5px 10px;color:var(--ink)}

/* ═══ 7. CALCULATEUR D'IMPRESSION 3D ═══
   Le balisage et les identifiants sont ceux attendus par js/print3d.js :
   on ne change que l'habillage. */
.quote3d{border:1px solid var(--rule)}
.quote3d-header{padding:18px 20px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.quote3d-pill{display:inline-block;font-family:var(--disp);font-weight:600;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.quote3d-header h3{font-family:var(--disp);font-weight:700;font-size:clamp(18px,2vw,26px);
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;margin-bottom:8px}
.quote3d-header h3 em{font-style:normal;color:var(--acc)}
.quote3d-header p{font-size:14px;color:var(--ink-2);max-width:70ch;font-weight:300}
.q3d-loading{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--acc-soft);
  border-bottom:1px solid var(--line);font-family:var(--disp);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc)}
.q3d-spinner{width:13px;height:13px;border:2px solid var(--acc-line);border-top-color:var(--acc);
  border-radius:50%;animation:q3dSpin .8s linear infinite;flex-shrink:0}
@keyframes q3dSpin{to{transform:rotate(360deg)}}
.q3d-banner{padding:11px 20px;font-size:13.5px;border-bottom:1px solid var(--line)}
.q3d-banner.is-info{background:var(--acc-soft);color:var(--acc-2)}
.q3d-banner.is-warn{background:var(--tint-warn);color:var(--warn)}
.q3d-banner.is-error{background:var(--tint-rev);color:var(--rev)}

.q3d-drop{position:relative}
.q3d-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.q3d-drop-big{margin:18px 20px 0;padding:30px 18px;border:1.5px dashed var(--line);
  background:var(--paper-2);text-align:center;transition:border-color .2s,background .2s}
.q3d-drop-big:hover,.q3d-drop-big.dragover{border-color:var(--acc);background:var(--acc-soft)}
.q3d-drop-content{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.q3d-drop-content svg{color:var(--acc)}
.q3d-drop-title{font-size:14.5px;color:var(--ink-2)}
.q3d-drop-title strong{color:var(--ink);font-weight:600}
.q3d-drop-hint{font-family:var(--disp);font-size:9.5px;letter-spacing:.1em;color:var(--ink-3)}
.q3d-drop-compact{margin:12px 0 0;padding:12px;border:1px dashed var(--line);background:var(--paper-2);
  text-align:center;font-family:var(--disp);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc)}
.q3d-drop-compact em{font-style:normal;color:var(--ink-3)}
.q3d-drop-compact:hover{border-color:var(--acc)}

.q3d-empty{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:20px}
.q3d-step{border-top:2px solid var(--line);padding-top:12px}
.q3d-step-num{display:block;font-family:var(--disp);font-size:10px;letter-spacing:.16em;color:var(--acc);margin-bottom:6px}
.q3d-step h4{font-family:var(--disp);font-weight:600;font-size:14px;text-transform:uppercase;margin-bottom:5px}
.q3d-step p{font-size:13px;color:var(--ink-2);line-height:1.45}
.q3d-empty-error{grid-column:1/-1;font-size:14.5px;color:var(--ink-2)}
.q3d-empty-error a{color:var(--acc)}

.q3d-parts-wrap{padding:18px 20px 0}
.q3d-parts-head{display:grid;grid-template-columns:112px minmax(150px,1.4fr) minmax(140px,1.1fr) 70px 128px 84px;
  gap:12px;padding:0 10px 8px;border-bottom:1px solid var(--rule);
  font-family:var(--disp);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.q3d-part{border-bottom:1px solid var(--line-2)}
.q3d-part:hover{background:var(--paper-2)}
.q3d-part.is-blocked{background:var(--tint-rev)}
.q3d-part-row{display:grid;
  grid-template-columns:112px minmax(150px,1.4fr) minmax(140px,1.1fr) 70px 128px 84px;
  gap:12px;align-items:center;padding:12px 10px}
.q3d-part-thumb{position:relative;aspect-ratio:4/3;border:1px solid var(--line);background:var(--paper-2);overflow:hidden}
.q3d-part-thumb canvas{display:block;width:100%;height:100%}
.q3d-part-index{position:absolute;left:4px;top:3px;font-family:var(--disp);font-size:8.5px;
  color:var(--ink-3);background:var(--chip);padding:0 4px}
.q3d-part-id{display:flex;flex-direction:column;gap:4px;min-width:0}
.q3d-part-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q3d-part-dims{font-family:var(--disp);font-size:10px;color:var(--ink-3);line-height:1.4}
.q3d-dfm-badge{align-self:flex-start;font-family:var(--disp);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 7px;border:1px solid}
.q3d-dfm-badge.is-ok{color:var(--ok);border-color:rgba(74,222,128,.40);background:var(--tint-ok)}
.q3d-dfm-badge.is-warn{color:var(--warn);border-color:rgba(251,191,36,.40);background:var(--tint-warn)}
.q3d-dfm-badge.is-error{color:var(--rev);border-color:rgba(255,122,92,.45);background:var(--tint-rev)}
.q3d-part-config{display:flex;flex-direction:column;gap:2px;min-width:0}
.q3d-part-config span{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q3d-part-config span:first-child{color:var(--ink);font-weight:600}
.q3d-part-qty{display:flex;flex-direction:column;align-items:center;gap:4px}
.q3d-part-qty label{font-family:var(--disp);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.q3d-part-qty input{width:100%;text-align:center;font-family:var(--disp);font-size:14px;
  border:1px solid var(--line);background:var(--paper);padding:7px 4px}
.q3d-part-price{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right}
.q3d-part-price strong{font-family:var(--disp);font-weight:700;font-size:18px}
.q3d-part-price span{font-family:var(--disp);font-size:9.5px;color:var(--ink-3)}
.q3d-part-actions{display:flex;flex-direction:column;gap:5px}
.q3d-part-toggle{font-family:var(--disp);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acc);background:none;border:1px solid var(--line);padding:7px 5px;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.q3d-part-toggle:hover{border-color:var(--acc)}
.q3d-part-toggle[aria-expanded=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.q3d-part-remove{font-size:16px;line-height:1;color:var(--ink-3);background:none;border:1px solid transparent;
  cursor:pointer;padding:3px}
.q3d-part-remove:hover{color:var(--rev);border-color:rgba(255,122,92,.35)}

.q3d-part-panel{padding:2px 10px 18px;border-top:1px dashed var(--line)}
.q3d-panel-grid{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(240px,1fr);
  gap:18px;padding-top:16px}
.q3d-panel-viewer{grid-column:1/-1;position:relative;border:1px solid var(--line);background:var(--paper-2)}
.q3d-panel-viewer canvas{display:block;width:100%;height:clamp(420px,72vh,860px);
  /* pan-y et non none : au doigt, le glissement vertical fait défiler la page,
     l’horizontal fait tourner la pièce — sinon on reste coincé dans le cadre */
  touch-action:pan-y;cursor:grab}
/* lecture de la simulation : machine, plateau, encombrement */
.q3d-plate-hud{position:absolute;left:13px;top:12px;z-index:2;display:flex;flex-direction:column;gap:2px;
  pointer-events:none;max-width:48%}
.q3d-plate-machine{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink)}
.q3d-plate-line{font-family:var(--disp);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.q3d-plate-note{margin-top:5px;font-family:var(--disp);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--acc)}
.q3d-plate-bad{margin-top:5px;font-family:var(--disp);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--rev)}
.q3d-plate-tools{position:absolute;right:10px;top:10px;z-index:2;display:flex;align-items:center;gap:2px;
  background:var(--paper);border:1px solid var(--line);padding:3px}
.q3d-plate-tools button{font-family:var(--disp);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);background:none;border:0;padding:6px 8px;cursor:pointer;
  line-height:1;transition:background .16s,color .16s}
.q3d-plate-tools button:hover{background:var(--paper-2);color:var(--ink)}
.q3d-plate-tools button.on{background:var(--ink);color:var(--paper)}
.q3d-plate-tools button[data-zoom]{font-size:14px;padding:3px 9px}
.q3d-plate-sep{width:1px;align-self:stretch;background:var(--line);margin:0 3px}
.q3d-panel-viewer canvas.dragging{cursor:grabbing}
.q3d-panel-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-top:1px solid var(--line);background:var(--paper);
  font-family:var(--disp);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.q3d-unit{display:flex;gap:9px}
.q3d-unit label{display:inline-flex;align-items:center;gap:4px;color:var(--ink);cursor:pointer}
.q3d-unit input{accent-color:var(--acc)}
.q3d-panel-config{display:flex;flex-direction:column;gap:11px}
.q3d-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.q3d-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.q3d-field label{font-family:var(--disp);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.q3d-field label em{font-style:normal;color:var(--acc)}
.q3d-field label .optional{text-transform:none;letter-spacing:0;color:var(--ink-3)}
.q3d-field select,.q3d-field input[type=text],.q3d-field input[type=number]{
  font-family:var(--ui);font-size:13.5px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);padding:8px 10px;width:100%}
.q3d-field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8286' stroke-width='1.7'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;padding-right:30px}
.q3d-field select:hover,.q3d-field input:hover{border-color:var(--acc)}
.q3d-field input[type=range]{width:100%;accent-color:var(--acc)}
.q3d-field-hint{font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.q3d-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-2);cursor:pointer}
.q3d-check input{position:absolute;opacity:0;pointer-events:none}
.q3d-check-box{width:15px;height:15px;flex-shrink:0;margin-top:2px;border:1px solid var(--ink-3);
  background:var(--paper);position:relative}
.q3d-check-box::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .18s}
.q3d-check input:checked ~ .q3d-check-box{background:var(--acc);border-color:var(--acc)}
.q3d-check input:checked ~ .q3d-check-box::after{transform:rotate(45deg) scale(1)}
.q3d-panel-analysis{background:var(--paper-2);border:1px solid var(--line);padding:14px 16px}
.q3d-panel-analysis h5{font-family:var(--disp);font-weight:600;font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.q3d-dfm-list{list-style:none;margin-bottom:12px}
.q3d-dfm-list li{position:relative;padding-left:17px;font-size:12px;line-height:1.45;margin-bottom:7px;color:var(--ink-2)}
.q3d-dfm-list li::before{position:absolute;left:0;top:0;font-family:var(--disp);font-size:11px}
.q3d-dfm-list li.is-error{color:var(--rev)}
.q3d-dfm-list li.is-error::before{content:'×';color:var(--rev);font-size:14px;line-height:1.05}
.q3d-dfm-list li.is-warn::before{content:'!';color:var(--warn)}
.q3d-dfm-list li.is-info::before{content:'i';color:var(--acc)}
.q3d-dfm-none{font-size:12px;line-height:1.45;color:var(--ok);margin-bottom:12px}
.q3d-panel-metrics{border-top:1px solid var(--line)}
.q3d-panel-metrics > div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--line-2)}
.q3d-panel-metrics dt{font-family:var(--disp);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);flex-shrink:0}
.q3d-panel-metrics dd{font-family:var(--disp);font-size:11px;text-align:right}

.q3d-order{display:grid;grid-template-columns:1.5fr 1fr;border-top:1px solid var(--rule);margin-top:18px}
.q3d-order-main{padding:18px 20px;border-right:1px solid var(--line)}
.q3d-block{margin-bottom:20px}
.q3d-block:last-child{margin-bottom:0}
.q3d-block h4{font-family:var(--disp);font-weight:700;font-size:15px;text-transform:uppercase;margin-bottom:4px}
.q3d-block-sub{font-size:12.5px;color:var(--ink-3);margin-bottom:12px}
.q3d-lead-rows,.q3d-delivery{display:flex;flex-direction:column;gap:7px}
.q3d-lead-row,.q3d-delivery-opt{display:flex;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid var(--line);background:var(--paper);cursor:pointer;transition:border-color .2s,background .2s}
.q3d-lead-row:hover,.q3d-delivery-opt:hover{border-color:var(--acc)}
.q3d-lead-row.is-selected,.q3d-delivery-opt:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.q3d-lead-row.is-disabled{opacity:.45;cursor:not-allowed;background:var(--paper-2)}
.q3d-lead-row input,.q3d-delivery-opt input{position:absolute;opacity:0;pointer-events:none}
.q3d-lead-radio{width:14px;height:14px;flex-shrink:0;border:1px solid var(--ink-3);border-radius:50%;
  background:var(--paper);position:relative}
.q3d-lead-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--acc);
  transform:scale(0);transition:transform .2s}
input:checked ~ .q3d-lead-radio{border-color:var(--acc)}
input:checked ~ .q3d-lead-radio::after{transform:scale(1)}
.q3d-lead-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.q3d-lead-name{font-family:var(--disp);font-weight:600;font-size:14px;text-transform:uppercase}
.q3d-lead-when{font-family:var(--disp);font-size:10px;color:var(--acc)}
.q3d-lead-row.is-disabled .q3d-lead-when{color:var(--ink-3)}
.q3d-lead-note{font-size:11.5px;color:var(--ink-3)}
.q3d-lead-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right}
.q3d-lead-truck{font-family:var(--disp);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ok)}
.q3d-lead-price{font-family:var(--disp);font-weight:700;font-size:17px}
.q3d-lead-tax{font-family:var(--disp);font-size:8.5px;color:var(--ink-3)}
.q3d-delivery-text{display:flex;flex-direction:column;gap:2px}
.q3d-delivery-text strong{font-family:var(--disp);font-weight:600;font-size:13.5px;text-transform:uppercase}
.q3d-delivery-text span{font-size:12px;color:var(--ink-3);line-height:1.4}
.q3d-postal-field{display:flex;align-items:center;gap:10px;padding:10px 13px;margin-top:4px;
  border:1px dashed var(--line);background:var(--paper-2)}
.q3d-postal-field label{font-family:var(--disp);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.q3d-postal-field input{width:90px;border:1px solid var(--line);background:var(--paper);padding:7px 8px;
  font-family:var(--ui);font-size:14px;text-transform:uppercase}
.q3d-postal-field span{font-size:11.5px;color:var(--ink-3)}

.q3d-summary{padding:18px 20px;background:var(--paper-2);display:flex;flex-direction:column}
.q3d-summary-label{font-family:var(--disp);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.q3d-summary-total{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3vw,38px);
  line-height:1.05;color:var(--acc)}
.q3d-summary-tax{font-family:var(--disp);font-size:10px;color:var(--ink-3);margin-bottom:14px}
.q3d-summary-body{border-top:1px solid var(--line);margin-bottom:14px}
.q3d-sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--line-2);font-size:12.5px;color:var(--ink-2)}
.q3d-sum-row strong{font-family:var(--disp);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.q3d-sum-row.is-sub{color:var(--ink)}
.q3d-sum-row.is-sub strong{font-size:13.5px}
.q3d-sum-row.is-note,.q3d-sum-row.is-note strong{color:var(--warn)}
.q3d-sum-row.is-muted,.q3d-sum-row.is-muted strong{color:var(--ink-3)}
.q3d-summary-empty{font-size:13px;color:var(--ink-3);padding:10px 0}
.q3d-summary-blocked{font-size:12.5px;line-height:1.45;color:var(--rev);background:var(--tint-rev);
  border:1px solid rgba(255,122,92,.35);padding:10px 12px;margin-bottom:12px}
.q3d-order-btn{width:100%;justify-content:center}
/* pas de flex ici : le paragraphe contient des <strong> qui deviendraient
   chacun un élément flex, ce qui disloque la phrase */
.q3d-summary-note{position:relative;padding-left:21px;font-size:11.5px;line-height:1.45;
  color:var(--ink-3);margin-top:12px}
.q3d-summary-note svg{position:absolute;left:0;top:2px;color:var(--acc)}
.q3d-summary-note strong{color:var(--ink-2)}
.q3d-summary-grid{font-family:var(--disp);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-top:8px}

/* récapitulatif de commande dans le modal */
.print3d-recap{flex:1;overflow:auto;margin:16px 0}
.print3d-recap-ref{font-family:var(--disp);font-size:10.5px;letter-spacing:.16em;color:var(--acc);
  padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.16)}
.print3d-recap-part{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.print3d-recap-part-name{font-size:12.5px;color:rgba(255,255,255,.95);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.print3d-recap-part-cfg{grid-column:1;font-size:11px;color:rgba(255,255,255,.5)}
.print3d-recap-part-price{grid-row:1/span 2;grid-column:2;align-self:center;
  font-family:var(--disp);font-size:12px;color:var(--acc-2)}
.print3d-recap-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;
  font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.07)}
.print3d-recap-row span{color:rgba(255,255,255,.55)}
.print3d-recap-row strong{font-weight:500;color:rgba(255,255,255,.95);text-align:right}
.print3d-recap-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2)}
.print3d-recap-total span{font-family:var(--disp);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
.print3d-recap-total strong{font-family:var(--disp);font-weight:700;font-size:24px;color:#fff}
.print3d-recap-sub{font-family:var(--disp);font-size:10px;color:rgba(255,255,255,.5);
  text-align:right;margin-top:3px}
.modal-shipping-mode{display:flex;flex-direction:column;gap:4px;padding:11px 13px;margin-bottom:14px;
  background:var(--paper-2);border:1px solid var(--line)}
.modal-shipping-label{font-family:var(--disp);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.modal-shipping-value{font-size:14px}
.modal-shipping-hint{font-size:12px;line-height:1.4;color:var(--ink-2)}

/* ═══ 8. MODAL DE COMMANDE 3D ═══
   Ce modal reprend le balisage d'origine, piloté par js/print3d.js.
   On le rhabille ici dans le langage du jeu de plans, sans toucher au script :
   les classes .modal-overlay / .modal-step / .modal-field lui sont nécessaires. */
.modal-overlay{position:fixed;inset:0;z-index:20000;display:none;padding:0}
.modal-overlay.open{display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,8,.74);backdrop-filter:blur(3px)}
.modal-container{position:fixed;inset:0;background:var(--paper);border:0;width:100vw;height:100dvh;
  max-width:none;max-height:none;min-width:0;min-height:0;display:grid;
  grid-template-columns:300px 1fr;grid-template-rows:minmax(0,1fr);overflow:hidden;overflow:clip;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.60);animation:modalIn .4s cubic-bezier(.2,.8,.2,1)}
.modal-close{position:absolute;right:10px;top:10px;z-index:5;width:34px;height:34px;display:grid;
  place-items:center;background:var(--paper);border:1px solid var(--line);cursor:pointer;color:var(--ink);
  transition:background .2s,color .2s,transform .3s}
.modal-close:hover{background:var(--ink);color:var(--paper);transform:rotate(90deg)}
.modal-aside{background:var(--ink);color:var(--paper);padding:30px 26px;display:flex;
  flex-direction:column;justify-content:space-between;gap:18px;
  min-height:0;overflow-y:auto;overscroll-behavior:contain}
.modal-pill{display:inline-block;font-family:var(--disp);font-weight:600;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:12px}
.modal-aside h2{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.3vw,28px);
  text-transform:uppercase;line-height:1.05;letter-spacing:-.02em;margin-bottom:10px}
.modal-aside h2 em{font-style:normal;color:var(--acc-2)}
.modal-aside p{font-size:14px;color:rgba(255,255,255,.7);font-weight:300}
.modal-aside-footer{border-top:1px solid rgba(255,255,255,.14);padding-top:14px}
.modal-direct{font-size:12.5px;color:rgba(255,255,255,.5);margin-bottom:4px}
.modal-direct-link{font-family:var(--disp);font-size:12px;letter-spacing:.06em;color:#fff}
.modal-direct-link:hover{color:var(--acc-2)}
.modal-content{padding:30px 30px 26px;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
  height:100%;max-height:100%;padding-bottom:80px}
.modal-form{display:flex;flex-direction:column;flex:1;min-height:0}
.modal-step{display:none}
.modal-step.active{display:block}
.modal-step-header{margin-bottom:18px}
.modal-step-header h3{font-family:var(--disp);font-weight:700;font-size:clamp(18px,2vw,24px);
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:5px}
.modal-step-header p{font-size:14px;color:var(--ink-2)}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:14px}
.modal-field{background:var(--paper);padding:9px 12px;display:flex;flex-direction:column;gap:2px;
  min-width:0;margin-bottom:14px;border:1px solid var(--line)}
.modal-row .modal-field{margin-bottom:0;border:0}
.modal-field label{font-family:var(--disp);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.modal-field label span{color:var(--rev)}
.modal-field label .optional{color:var(--ink-3);text-transform:none;letter-spacing:0}
.modal-field input,.modal-field select,.modal-field textarea{border:0;background:transparent;
  font-family:var(--ui);font-size:15px;color:var(--ink);padding:2px 0;width:100%;resize:none}
.modal-field input:focus,.modal-field select:focus,.modal-field textarea:focus{outline:none}
.modal-field:focus-within{background:var(--paper-2)}
.modal-field input.error,.modal-field select.error,.modal-field textarea.error{color:var(--rev)}
.modal-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:13.5px;
  color:var(--ink-2);padding:11px 12px;border:1px solid var(--line);background:var(--paper)}
.modal-check.modal-check-inline{margin-bottom:14px}
.modal-check:hover{background:var(--paper-2)}
.modal-check.error{border-color:var(--rev);background:var(--tint-rev)}
.modal-check input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.modal-check-box{width:15px;height:15px;flex-shrink:0;margin-top:2px;border:1px solid var(--ink-3);
  background:var(--paper);position:relative}
.modal-check-box::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .18s}
.modal-check input:checked ~ .modal-check-box{background:var(--acc);border-color:var(--acc)}
.modal-check input:checked ~ .modal-check-box::after{transform:rotate(45deg) scale(1)}
.modal-check-content strong{display:block;color:var(--ink);font-weight:600;font-size:13.5px;margin-bottom:2px}
.modal-check-content strong span{color:var(--rev)}
.modal-check-content > span{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.modal-nav{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:18px;
  border-top:1px solid var(--line)}
.modal-step-counter{font-family:var(--disp);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.modal-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--rule);background:var(--ink);color:var(--paper);transition:background .2s}
.modal-btn:hover{background:var(--acc);border-color:var(--acc)}
.modal-btn[disabled]{opacity:.45;pointer-events:none}
.modal-btn-back{background:transparent;color:var(--ink);border-color:var(--line)}
.modal-success{text-align:center;padding:20px 6px}
.modal-success-icon{margin-bottom:16px}
.modal-success h3{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.2vw,26px);
  text-transform:uppercase;margin-bottom:10px}
.modal-success p{font-size:15px;color:var(--ink-2);max-width:46ch;margin:0 auto 8px}
.modal-success-note{font-family:var(--disp);font-size:11px;letter-spacing:.08em;color:var(--acc)}
.form-error-banner{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;margin-bottom:14px;
  border:1px solid var(--rev);background:var(--tint-rev);color:var(--rev);font-size:13.5px;line-height:1.45}
.form-error-banner svg{flex-shrink:0;margin-top:2px}
.p3d-payment-note{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;
  color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);padding:11px 13px}
.p3d-payment-note svg{color:var(--acc);flex-shrink:0;margin-top:2px}
.p3d-payment-note strong{color:var(--ink);font-weight:600}


/* ═══ 9. CORRECTIONS POUR FOND SOMBRE ═══
   Les blocs 5 à 8 viennent de la feuille claire du jeu de plans. Presque tout
   suit les jetons, sauf les endroits où l'ancienne feuille utilisait --ink comme
   FOND (encre noire sur papier blanc) : sur fond sombre, --ink est clair, donc
   ces blocs deviendraient des pavés blancs. On les reprend ici en accent. */
:root{color-scheme:dark}

.modal{z-index:9000}          /* au-dessus de l'en-tête collant (300) */
.modal-bg,.modal-backdrop{backdrop-filter:blur(5px)}

/* .btn-primary n'avait aucune règle dans l'ancienne feuille : le bouton
   « Commander et payer » du calculateur s'affichait donc en bouton brut du
   navigateur. Il reprend ici l'habillage des boutons pleins. */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;cursor:pointer;font-family:var(--disp);font-weight:700;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;
  background:var(--acc);border:1px solid var(--acc);color:#04191d;
  transition:background .2s,border-color .2s,box-shadow .2s}
.btn-primary:hover:not([disabled]){background:var(--acc-2);border-color:var(--acc-2);
  box-shadow:0 0 0 3px var(--acc-soft)}
.btn-primary[disabled]{opacity:.4;pointer-events:none}

/* boutons pleins : accent cyan, texte sombre */
.btn,.modal-btn{background:var(--acc);border-color:var(--acc);color:#04191d}
.btn:hover,.modal-btn:hover{background:var(--acc-2);border-color:var(--acc-2);color:#04191d;
  box-shadow:0 0 0 3px var(--acc-soft)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--rule);box-shadow:none}
.btn.line:hover{background:transparent;border-color:var(--acc);color:var(--acc);box-shadow:none}
.modal-btn-back{background:transparent;color:var(--ink);border-color:var(--rule);box-shadow:none}
.modal-btn-back:hover{background:transparent;border-color:var(--acc);color:var(--acc);box-shadow:none}

.view-load{background:var(--paper-2)}
.view-load:hover{background:var(--acc);border-color:var(--acc);color:#04191d}
.view-msg{background:var(--paper-2)}
.modal-x,.modal-close{background:var(--paper-2)}
.modal-x:hover,.modal-close:hover{background:var(--acc);border-color:var(--acc);color:#04191d}
.q3d-part-toggle[aria-expanded=true]{background:var(--acc);border-color:var(--acc);color:#04191d}
.q3d-plate-tools button.on{background:var(--acc);color:#04191d}

/* colonne de gauche des modals : panneau très sombre, pas l'inverse du papier */
.modal-side,.modal-aside{background:var(--panel-deep);color:var(--ink);
  border-right:1px solid var(--line)}
.modal-side p,.modal-aside p{color:var(--ink-2)}
.modal-side li{color:var(--ink-2)}
.modal-side .bm.inv img,.modal-aside .bm.inv img{opacity:.4}

/* le sélecteur natif hérite de color-scheme:dark, mais on force le fond des
   listes déroulantes : certains navigateurs gardent du blanc sinon */
.q3d-field select option,.modal-field select option,.f select option{
  background:var(--paper-2);color:var(--ink)}

/* ═══ FENÊTRE PLEIN ÉCRAN DU DEVIS ═══
   Le calculateur vit dans une popup qui couvre tout l'écran et défile seule.
   Elle est enfant direct de <body> : aucun conteneur de la page ne peut donc
   la rogner ni la passer derrière un autre calque. */
.quote-modal{padding:0}
.quote-modal.open{display:block}
.quote-modal-box{position:fixed;inset:0;display:block;width:100vw;height:100dvh;
  max-width:none;max-height:none;border:0;background:var(--paper);box-shadow:none}
.quote-modal .modal-x{right:14px;top:14px}
.quote-modal-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(56px,8vh,78px) clamp(12px,3vw,40px) clamp(48px,9vh,90px)}
.quote-modal-scroll .quote3d{max-width:1280px;margin:0 auto;background:var(--paper-2)}

/* ═══ CONTENU LARGE ═══
   Le comparatif des machines fait ~520 px au minimum : sur téléphone il élargissait
   tout le document, ce qui décalait le héros et les paragraphes vers la droite.
   Il défile maintenant dans son propre cadre, et .sec coupe tout débordement
   résiduel — overflow-x:clip et non hidden, pour ne pas créer de conteneur de
   défilement qui casserait le collage de l'en-tête. */
.table-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:540px}
.sec{overflow-x:clip}

/* ═══ 10. PIED DE PAGE ═══ */
.ftr{background:var(--paper-3);border-top:1px solid var(--rule);
  padding:clamp(44px,6vw,84px) 0 clamp(24px,3vw,38px)}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px)}
.ftr-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ftr-brand .bm{height:30px}
.ftr-brand b{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase}
.ftr p{font-size:14px;color:var(--ink-2);max-width:44ch;font-weight:300}
.ftr h3{font-family:var(--disp);font-weight:600;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ftr ul a,.ftr ul span{font-size:14px;color:var(--ink-2);transition:color .2s}
.ftr ul a:hover{color:var(--acc)}
.ftr-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-top:clamp(30px,4vw,56px);padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--disp);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.ftr-bar a:hover{color:var(--acc)}

/* ═══ 11. ADAPTATIF ═══ */
@media(max-width:1460px){
  .hdr-nav{display:none}
  .hdr-burger{display:flex}
  .q3d-panel-grid{grid-template-columns:1fr}
  .q3d-panel-analysis{grid-column:1/-1}
  .q3d-order{grid-template-columns:1fr}
  .q3d-order-main{border-right:0;border-bottom:1px solid var(--line)}
  .q3d-parts-head{display:none}
  .q3d-part-row{grid-template-columns:80px 1fr auto;
    grid-template-areas:"thumb id actions" "thumb config config" "qty price price";row-gap:10px}
  .q3d-part-thumb{grid-area:thumb}
  .q3d-part-id{grid-area:id}
  .q3d-part-config{grid-area:config}
  .q3d-part-qty{grid-area:qty;flex-direction:row;align-items:center;gap:8px}
  .q3d-part-qty input{width:66px}
  .q3d-part-price{grid-area:price}
  .q3d-part-actions{grid-area:actions;flex-direction:row}
}
@media(max-width:1100px){
  .hero-in{grid-template-columns:1fr;gap:30px;min-height:0}
  /* La planche est gardée, empilée sous le texte : c'est la pièce maîtresse.
     Son cartouche est du HTML en px, il ne rétrécit donc pas avec la toile. */
  .hero .ap-hero-plate{justify-self:start}
  .hero::after{right:-16%;width:86%;opacity:.1}
  .two{grid-template-columns:1fr}
  .sec-head{grid-template-columns:auto minmax(0,1fr)}
  .sec-x{display:none}
  td.m,thead th.m{display:none}
  .modal-box{grid-template-columns:1fr;max-width:720px}
  .modal-side{display:none}
  .modal-container{grid-template-columns:1fr;max-width:none}
  .modal-aside{display:none}
  .q3d-empty{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr 1fr}
  .ftr-brand{grid-column:1/-1}
}
@media(max-width:760px){
  :root{--hdr:56px}
  body{font-size:15px}
  body::after{background-size:52px 52px}
  .hdr-brand b{display:none}
  /* Sur mobile, bouton compact mais toujours dominant : on laisse tomber
     la sous-ligne et le badge, jamais le mot « 3D ». */
  .hdr-cta{padding:0 13px;gap:8px;margin:8px 0 8px 8px}
  .hdr-cta b{font-size:11.5px}
  .hdr-cta em,.hdr-cta i{display:none}
  .hdr-cta svg{width:19px;height:19px}
  .hdr-cli span{display:none}
  .hdr-cli{padding:0 12px}
  /* Le grand bouton de devis prend toute la largeur : c'est l'action qu'on veut
     voir en premier sur un téléphone. */
  .btn.big{width:100%;justify-content:center;padding:16px 20px;font-size:12.5px}
  .hero h1{font-size:clamp(38px,12vw,60px)}
  .hero-meta{gap:14px}
  .hero-proof{gap:12px;font-size:8.5px}
  .hero-proof b{font-size:14px}
  .sec{padding:clamp(46px,11vw,74px) 0}
  td.r,thead th.r{display:none}
  td.d>span{max-width:none}
  td.d strong{font-size:15px}
  tbody td{padding:11px 8px}
  tbody td:first-child{padding-left:0}
  table{width:100%;table-layout:auto}
  .fig-v{min-width:2.6em}
  .f-row,.checks{grid-template-columns:1fr}
  .modal,.modal-overlay{padding:0}
  .modal-box,.modal-container{max-height:100dvh;height:100dvh;border:0}
  .modal-main,.modal-content{padding:22px 18px 18px}
  .modal-row{grid-template-columns:1fr}
  .quote-modal-scroll{padding:52px 0 44px}
  .quote-modal-scroll .quote3d{border-left:0;border-right:0}
  .q3d-part-row{grid-template-columns:68px 1fr;
    grid-template-areas:"thumb id" "config config" "qty price" "actions actions"}
  .q3d-field-row{grid-template-columns:1fr}
  .q3d-panel-viewer canvas{height:clamp(300px,54vh,620px)}
  .q3d-plate-hud{max-width:100%;position:static;padding:10px 12px 0}
  .q3d-plate-tools{position:static;flex-wrap:wrap;border:0;border-bottom:1px solid var(--line);
    padding:8px 10px;justify-content:flex-start}
  .q3d-drop-big{margin:14px 14px 0;padding:22px 14px}
  .q3d-parts-wrap,.q3d-order-main,.q3d-summary,.quote3d-header{padding-left:14px;padding-right:14px}
  .ftr-top{grid-template-columns:1fr}
  .ftr-brand{grid-column:auto}
}

/* ═══ 12. ACCESSIBILITÉ ET IMPRESSION ═══ */
.skip{position:fixed;left:12px;top:-60px;z-index:9500;background:var(--acc);color:#04191d;
  padding:10px 16px;font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  transition:top .2s}
.skip:focus{top:12px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

@media print{
  body{background:#fff;color:#000}
  body::before,body::after{display:none}
  .hdr,.hdr-drop,.modal,.modal-overlay,.skip,.hero-mark,.sec-wm{display:none!important}
  .sec{border-bottom:1px solid #999;page-break-inside:avoid}
  .sec-head{border-bottom:1px solid #000}
  a{color:#000}
}

/* ═══ 13. HÉROS ANIMÉ — CHARPENTE 24-018-001-000-000 ═══
   Repris tel quel de hero-apogee.css livré avec le moteur js/hero-apogee.js.
   Ne pas retoucher ici : en cas de nouvelle livraison, remplacer ce bloc en bloc.
   Le repère interne de la toile est 480 × 560 ; le CSS la met à l'échelle de la
   colonne, et le cartouche est du HTML — donc sélectionnable et indexable. */

/* Apogée Concept — héros, colonne de droite.
   Le cartouche est du HTML : il reste sélectionnable, traduisible et indexable.
   La toile est mise à l'échelle par le CSS ; son repère interne reste 480 × 560. */

.ap-hero-plate {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 480 / 560;
  color: #e8f4f3;
  font-family: 'Archivo Narrow', 'Arial Narrow', sans-serif;
}

.ap-hero-plate canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ap-cartouche {
  position: absolute;
  left: 5%; right: 5%; top: 2.85%;
  display: flex;
  flex-direction: column;
}

.ap-rule { height: 1px; background: #22353a; }

.ap-org {
  font-weight: 600; font-size: 8px; letter-spacing: .16em;
  color: #6b8286; padding-bottom: 6px;
}

.ap-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0 8px;
}
.ap-num { font-weight: 700; font-size: 17px; letter-spacing: .04em; color: #e8f4f3; }
.ap-vue { font-weight: 700; font-size: 11px; letter-spacing: .14em; color: #22d3ee; }

.ap-meta {
  display: flex; justify-content: space-between;
  padding: 7px 0 0;
  font-weight: 600; font-size: 8px; letter-spacing: .14em;
}
.ap-meta .a { color: #9fb5b6; }
.ap-meta .b { color: #6b8286; }
.ap-meta .c { color: #ff7a5c; }

.ap-foot {
  position: absolute;
  left: 5%; right: 5%; bottom: 2.5%;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-weight: 600; font-size: 8px; letter-spacing: .14em; line-height: 1.7;
  color: #6b8286;
  pointer-events: none;
}
.ap-foot .sig { color: #3a5b62; text-align: right; }