/* ══════════════════════════════════════════════════════════════════════════
   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}
@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)}
.hdr-cta{display:flex;align-items:center;gap:8px;margin:13px 0 13px 14px;padding:0 15px;flex-shrink:0;
  background:var(--acc);color:#04191d;border:1px solid var(--acc);cursor:pointer;
  font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s,box-shadow .2s}
.hdr-cta:hover{background:var(--acc-2);box-shadow:0 0 0 3px var(--acc-soft)}
.hdr-cta i{font-style:normal;font-size:7.5px;letter-spacing:.1em;padding:2px 4px;
  border:1px solid currentColor}
.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.35fr) minmax(200px,.65fr);
  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)}
/* Seul le losange, en grand : le mot « Apogée Concept » est déjà dans le <h1>,
   reprendre le logo complet le dirait deux fois. */
.hero-mark{justify-self:center;width:clamp(120px,16vw,230px)}
.hero-mark .bm{width:100%;height:auto}
.hero-mark img{opacity:.92;filter:brightness(0) invert(1) drop-shadow(0 0 34px rgba(34,211,238,.32))}

/* ═══ 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.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}

/* 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:1340px){
  .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:26px;min-height:0}
  .hero-mark{display:none}
  .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}
  .hdr-cta{padding:0 11px;letter-spacing:.1em}
  .hdr-cli span{display:none}
  .hdr-cli{padding:0 12px}
  .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}
}