/* ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ
   APOG├ëE CONCEPT ÔÇö FEUILLE DE STYLE DU SITE ┬½ JEU DE PLANS ┬╗
   ÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇÔöÇ
   Principe : le site EST un jeu de plans broch├® sur le c├┤t├® gauche.
   On ne d├®file pas, on tourne les pages. Chaque feuille tient dans l'├®cran.

   Sommaire
     1.  Jetons et bases
     2.  Menu rapide (onglets) et Espace client
     3.  Le paquet, les broches, la rotation de page
     4.  Structure d'une feuille
     5.  Composants de contenu (tableaux, chiffres, vues, comparatifs)
     6.  Cartouche (identit├® + navigation)
     7.  Modals (projet, emploi, d├®tail de service, commande 3D)
     8.  Calculateur d'impression 3D
     9.  Adaptatif
     10. Accessibilit├® et impression
   ÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉÔòÉ */

/* ÔòÉÔòÉÔòÉ 1. JETONS ÔòÉÔòÉÔòÉ */
:root{
  --paper:#FFFFFF;
  --paper-2:#F6F7F8;
  --paper-3:#EDEFF1;
  --ink:#0E1013;
  --ink-2:#464C54;
  --ink-3:#8A9199;
  --line:#DCE0E4;
  --line-2:#ECEEF0;
  --acc:#1550E0;            /* bleu d'annotation, d├®riv├® du #003da5 du badge */
  --acc-2:#0A3FB8;
  --acc-soft:rgba(21,80,224,.07);
  --rev:#C0392B;            /* r├®visions seulement */
  --ok:#2F6B45;
  --warn:#96541F;

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

  --cart:78px;              /* cartouche */
  --tabs:46px;              /* onglets */
  --inset:clamp(10px,1.6vw,26px);
  --bind:22px;              /* marge de reliure */
  --pad:clamp(20px,3.4vw,54px);
}

*{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. */
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{
  background:var(--paper-3);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;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--acc);color:#fff}
: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}

/* ÔòÉÔòÉÔòÉ 2. MENU RAPIDE ÔòÉÔòÉÔòÉ */
.tabs{position:fixed;left:0;right:0;top:0;height:var(--tabs);z-index:50;
  background:var(--paper);border-bottom:1px solid var(--ink);display:flex;align-items:stretch}
.tabs-brand{display:flex;align-items:center;gap:10px;padding:0 clamp(14px,1.6vw,22px) 0 var(--pad);
  border-right:1px solid var(--line);flex:0 0 auto}
.tabs-brand .bm{width:22px}
.tabs-brand b{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap}
.tabs-list{display:flex;align-items:stretch;flex:1 1 auto;min-width:0;overflow:hidden}
.tabs-list button{background:none;border:0;border-right:1px solid var(--line);cursor:pointer;
  padding:0 clamp(10px,1.1vw,18px);white-space:nowrap;display:flex;align-items:center;gap:7px;
  font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);transition:background .16s,color .16s}
.tabs-list button:hover{background:var(--paper-2);color:var(--ink)}
.tabs-list button.on{background:var(--ink);color:var(--paper)}
.tabs-list button i{font-style:normal;font-size:9.5px;opacity:.55}
.tabs-list button.on i{opacity:.7}

.cli{display:flex;align-items:center;gap:9px;padding:0 clamp(14px,1.6vw,22px);flex:0 0 auto;
  background:var(--acc);color:#fff;border-left:1px solid var(--acc);
  font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .18s}
.cli:hover{background:var(--ink)}
.cli svg{flex-shrink:0}
.quote-menu{display:flex;align-items:center;gap:7px;padding:0 clamp(12px,1.4vw,20px);border:0;
  border-left:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.quote-menu:hover{background:var(--acc);color:#fff}
.quote-menu span{font-size:8px;letter-spacing:.08em;color:var(--rev);border:1px solid currentColor;padding:3px 4px}
.quote-menu:hover span{color:#fff}
.tabs-menu{display:none;background:none;border:0;border-left:1px solid var(--line);padding:0 16px;
  cursor:pointer;font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);flex:0 0 auto}

.drop{position:fixed;left:0;right:0;top:var(--tabs);z-index:49;background:var(--paper);
  border-bottom:1px solid var(--ink);display:none;max-height:72vh;overflow:auto}
.drop.open{display:block}
.drop button{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:baseline;width:100%;
  text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);padding:12px var(--pad);
  cursor:pointer;font-family:var(--ui);font-size:15px;color:var(--ink)}
.drop button:hover{background:var(--paper-2)}
.drop button.on{background:var(--paper-3)}
.drop .d-n{font-family:var(--disp);font-size:10.5px;color:var(--acc)}
.drop .d-t{font-family:var(--disp);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.01em}
.drop .d-d{font-size:13px;color:var(--ink-3)}

/* ÔòÉÔòÉÔòÉ 3. LE PAQUET ÔòÉÔòÉÔòÉ */
.bundle{position:fixed;left:0;right:0;top:var(--tabs);bottom:var(--cart);
  perspective:2200px;perspective-origin:34% 46%}
.bundle:has(.quote-modal.open){top:0;bottom:0;z-index:1001;perspective:none}
.sheet{position:absolute;inset:var(--inset);transform-style:preserve-3d;
  transform-origin:left center;
  transition:transform .9s cubic-bezier(.32,.04,.2,1),opacity .5s ease;will-change:transform}
.leaf{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;
  transition:transform 1.15s cubic-bezier(.38,.03,.24,1),box-shadow .9s ease;
  box-shadow:0 16px 40px -20px rgba(14,16,19,.32), 1px 0 0 rgba(14,16,19,.06)}
/* Le conteneur .sheet ne pivote pas, seule la feuille (.leaf) le fait : sans ceci,
   une feuille deja tournee garde sa boite pleine taille par-dessus la feuille
   courante et intercepte tous les clics. */
.sheet.is-back{pointer-events:none}
.sheet.turned .leaf{transform:rotateY(-177deg);box-shadow:-8px 14px 34px -20px rgba(14,16,19,.26)}
.sheet.turning{z-index:400!important}
.sheet.turning .leaf{box-shadow:-6px 34px 80px -26px rgba(14,16,19,.5)}

.leaf .shade{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(10,12,15,.34) 0%,rgba(10,12,15,.14) 22%,
    rgba(10,12,15,.04) 46%,transparent 68%)}
.sheet.turning .shade{animation:curl 1.15s ease-in-out}
@keyframes curl{0%{opacity:0}30%{opacity:1}62%{opacity:.55}100%{opacity:0}}

/* les broches : couronne verticale, parall├¿le au bord broch├® */
.staples{position:absolute;left:var(--inset);top:var(--inset);bottom:var(--inset);
  width:calc(var(--bind) + 16px);z-index:300;pointer-events:none}
.staples::before{content:'';position:absolute;left:0;top:0;bottom:0;width:9px;
  background:linear-gradient(90deg,rgba(14,16,19,.16),rgba(14,16,19,.05) 45%,transparent)}
.staple{position:absolute;left:10px;width:5px;height:38px;border-radius:2px;
  background:linear-gradient(90deg,#fdfdfe 0%,#e4e8ec 20%,#bcc3ca 50%,#8d949c 76%,#5f666e 100%);
  box-shadow:2px 2px 3px rgba(14,16,19,.34), 0 0 0 .5px rgba(70,76,84,.5),
    inset .5px 0 0 rgba(255,255,255,.95), inset -.5px 0 0 rgba(0,0,0,.22)}
.staple::before,.staple::after{content:'';position:absolute;left:-1px;width:7px;height:4px;
  border-radius:1px;background:linear-gradient(90deg,#a7aeb6,#646b73 65%,#41474e);
  box-shadow:1px 1px 2px rgba(14,16,19,.34)}
.staple::before{top:-1px}
.staple::after{bottom:-1px}
.staple.s1{top:10%;transform:rotate(-1.4deg)}
.staple.s2{top:48.6%;transform:rotate(1deg)}
.staple.s3{top:87%;transform:rotate(-.6deg)}

.face{position:absolute;inset:0;background:var(--paper);backface-visibility:hidden;
  overflow:hidden;overflow:clip}
.face.back{transform:rotateY(180deg);display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,var(--paper-2) 0 7px,var(--paper) 7px 14px)}
.face.back .bm{width:min(30vh,240px);opacity:.10}

/* ÔòÉÔòÉÔòÉ 4. STRUCTURE D'UNE FEUILLE ÔòÉÔòÉÔòÉ */
.frame{position:absolute;inset:14px;left:calc(var(--bind) + 12px);
  border:1px solid var(--line);pointer-events:none}
.inner{position:absolute;inset:26px;left:calc(var(--bind) + 24px);
  display:flex;flex-direction:column;overflow:hidden;overflow:clip}
.sh-top{display:flex;align-items:baseline;gap:14px;padding-bottom:11px;
  border-bottom:1px solid var(--ink);flex-shrink:0}
.sh-n{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--acc)}
.sh-t{font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.9vw,26px);
  text-transform:uppercase;letter-spacing:-.008em;line-height:1}
.inner.sc-up .sh-top{box-shadow:0 9px 13px -11px rgba(14,16,19,.45)}
.sh-x{margin-left:auto;font-family:var(--disp);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);text-align:right}
.body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:clamp(16px,2.2vw,30px) 2px 6px;scrollbar-width:thin}
.sheet:not(.quote-sheet) .body{overflow-y:hidden}
.body::-webkit-scrollbar{width:7px}
.body::-webkit-scrollbar-thumb{background:var(--line)}
/* indice de defilement : un degrade discret quand il reste du contenu sous le pli */
.inner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;z-index:3;
  background:linear-gradient(to top,var(--paper) 14%,rgba(255,255,255,0));
  opacity:0;transition:opacity .3s;pointer-events:none}
.inner.sc-more::after{opacity:1}
.inner::before{content:'Ôåô';position:absolute;left:0;right:0;bottom:8px;z-index:4;text-align:center;
  font-family:var(--disp);font-size:13px;line-height:1;color:var(--acc);
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.inner.sc-more::before{opacity:1;animation:hintDown 1.9s ease-in-out infinite}
@keyframes hintDown{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.inner.sc-more::before{animation:none}}

/* la marque : d├®coupe exacte (274 px sur 1442, pleine hauteur) */
.bm{position:relative;aspect-ratio:274/301;overflow:hidden;flex-shrink:0}
.bm img{position:absolute;left:0;top:0;height:100%;width:auto;display:block}
.bm.inv img{filter:invert(1)}
/* filigrane : hors du flux ÔÇö le s├®lecteur doit rester .bm.wm */
.bm.wm{position:absolute;right:-3%;bottom:-6%;width:32%;opacity:.038;pointer-events:none;z-index:0}

/* feuille de titre */
.title-sheet{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(24px,5vw,80px);align-items:center;height:100%;padding:clamp(10px,2vw,26px) 0}
.title-mark{width:clamp(150px,26vw,340px)}
.title-txt h1{font-family:var(--disp);font-weight:700;font-size:clamp(38px,6.6vw,104px);
  line-height:.9;letter-spacing:-.025em;text-transform:uppercase}
.title-txt h1 span{display:block;font-weight:500;color:var(--ink-2)}
.title-sub{font-size:clamp(16px,1.4vw,20px);color:var(--ink-2);margin-top:22px;max-width:44ch;font-weight:300}
.title-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.title-meta div{display:flex;flex-direction:column;gap:3px}
.title-meta dt{font-family:var(--disp);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.title-meta dd{font-size:15px}
.start{display:inline-flex;align-items:center;gap:11px;margin-top:32px;background:none;
  border:0;border-bottom:1px solid var(--ink);padding-bottom:5px;cursor:pointer;
  font-family:var(--disp);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  transition:color .2s,border-color .2s}
.start:hover{color:var(--acc);border-color:var(--acc)}
.start i{display:block;width:18px;height:1px;background:currentColor;position:relative}
.start i::after{content:'';position:absolute;right:0;top:-3px;width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.how{margin-top:18px;font-family:var(--disp);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}

/* index */
.index{border-top:1px solid var(--ink)}
.index button{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:baseline;width:100%;
  text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);padding:9px 4px 9px 0;
  cursor:pointer;font-family:var(--ui);font-size:15px;color:var(--ink);
  transition:background .15s,padding-left .25s}
.index button:hover{background:var(--paper-2);padding-left:8px}
.index .i-n{font-family:var(--disp);font-size:10.5px;color:var(--acc)}
.index .i-t{font-family:var(--disp);font-weight:600;font-size:14.5px;text-transform:uppercase;letter-spacing:.005em}
.index .i-d{font-size:13px;color:var(--ink-3);font-weight:300}

/* ÔòÉÔòÉÔòÉ 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(--ink);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(--ink);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(--ink)}
.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(--ink);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(--ink)}
.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(--ink);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(--ink)}
.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. CARTOUCHE ÔòÉÔòÉÔòÉ */
.cartouche{position:fixed;left:0;right:0;bottom:0;height:var(--cart);z-index:40;
  background:var(--paper);border-top:1px solid var(--ink);display:flex;align-items:stretch}
.cc{padding:0 clamp(12px,1.4vw,20px);border-right:1px solid var(--line);flex:0 0 auto;
  display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.cc.title{flex:1 1 auto}
.cc:last-child{border-right:0}
.cc-k{font-family:var(--disp);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.cc-v{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cc.brand{flex-direction:row;align-items:center;gap:11px;padding-left:var(--pad)}
.cc.brand .bm{width:34px}
.cc.brand b{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:uppercase}
.cc.title .cc-v{font-size:15px;text-transform:uppercase}
.prog{position:absolute;left:0;top:-1px;height:2px;background:var(--acc);
  transition:width .5s cubic-bezier(.3,0,.2,1)}
.dots{display:flex;align-items:center;gap:5px;padding:0 clamp(10px,1.2vw,18px);
  border-right:1px solid var(--line);flex:0 0 auto}
.dot{width:7px;height:7px;border:1px solid var(--ink-3);background:none;padding:0;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s}
.dot:hover{border-color:var(--acc);transform:scale(1.25)}
.dot.on{background:var(--acc);border-color:var(--acc)}
.nav{display:flex;align-items:stretch;flex:0 0 auto;margin-left:auto}
.nav button{width:clamp(52px,4.4vw,72px);background:none;border:0;border-left:1px solid var(--line);
  cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:background .18s,color .18s}
.nav button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.nav button:disabled{color:var(--line);cursor:default}
.nav svg{width:20px;height:20px}

/* ÔòÉÔòÉÔòÉ 7. 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(14,16,19,.55);backdrop-filter:blur(3px)}
.modal-box{position:relative;background:var(--paper);border:1px solid var(--ink);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(14,16,19,.5);
  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}
.quote-modal-box{max-width:none;width:100%;height:100dvh;max-height:100dvh;border:0}
.quote-modal{z-index:1000!important;padding:0}
.quote-modal.open{display:block;overflow:hidden}
.quote-modal-box{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important}
.quote-modal .quote-sheet{position:absolute;inset:0;width:100%;height:100%}
.quote-modal .quote-sheet .leaf{inset:0}
.quote-modal .quote-sheet .inner{inset:26px;left:calc(var(--bind) + 24px)}
.quote-modal .quote-sheet .body{overflow-y:auto;overscroll-behavior:contain}
.quote-modal{z-index:10000!important}
.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:#FDF2F1}
.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:#FDF2F1;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)}

/* ÔòÉÔòÉÔòÉ 8. 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(--ink)}
.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 rgba(21,80,224,.25);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:#FDF6EE;color:var(--warn)}
.q3d-banner.is-error{background:#FDF2F1;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(--ink);
  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:#FDF2F1}
.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:rgba(255,255,255,.85);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(47,107,69,.4);background:rgba(47,107,69,.06)}
.q3d-dfm-badge.is-warn{color:var(--warn);border-color:rgba(150,84,31,.4);background:#FDF6EE}
.q3d-dfm-badge.is-error{color:var(--rev);border-color:rgba(192,57,43,.4);background:#FDF2F1}
.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(192,57,43,.3)}

.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='%238A9199' 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(--ink);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-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:#FDF2F1;
  border:1px solid rgba(192,57,43,.3);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:#9EB6FF}
.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)}

/* ÔòÉÔòÉÔòÉ 8b. 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:10000;display:none;padding:0}
.modal-overlay.open{display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(14,16,19,.55);backdrop-filter:blur(3px)}
.modal-container{position:relative;background:var(--paper);border:0;width:100%;height:100dvh;
  max-width:none;max-height:none;display:grid;
  grid-template-columns:300px 1fr;grid-template-rows:minmax(0,1fr);overflow:hidden;overflow:clip;
  box-shadow:0 40px 90px -30px rgba(14,16,19,.5);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:#9EB6FF}
.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:#9EB6FF}
.modal-content{padding:30px 30px 26px;min-height:0;overflow-y:auto;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:#FDF2F1}
.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(--ink);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:#FDF2F1;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. ADAPTATIF ÔòÉÔòÉÔòÉ */
@media(max-width:1360px){
  .tabs-list{display:none}
  .tabs-menu{display:flex;align-items:center}
}
@media(max-width:1180px){
  .q3d-panel-grid{grid-template-columns:minmax(180px,1fr) minmax(220px,1.1fr)}
  .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){
  .title-sheet,.two{grid-template-columns:1fr}
  .title-mark{width:clamp(120px,22vw,200px)}
  td.m,thead th.m{display:none}
  .cc.title,.dots{display:none}
  .modal-box{grid-template-columns:1fr;max-width:720px}
  .modal-side{display:none}
  .modal-container{grid-template-columns:1fr;max-width:720px}
  .modal-aside{display:none}
  .q3d-empty{grid-template-columns:1fr}
}
@media(max-width:760px){
  :root{--cart:64px;--tabs:44px;--bind:14px;--inset:8px}
  body{font-size:15px}
  .tabs-brand{padding-left:14px}
  .tabs-brand b{display:none}
  .cli{padding:0 12px;font-size:10px;letter-spacing:.08em}
  .tabs-menu{padding:0 12px;font-size:10px}
  .drop button{padding:11px 16px;grid-template-columns:36px 1fr auto}
  .staple{left:6px;width:4px;height:26px}
  .staple::before,.staple::after{width:6px;height:3px;left:-1px}
  .staples::before{width:6px}
  .inner{inset:16px;left:calc(var(--bind) + 14px)}
  .frame{inset:8px;left:calc(var(--bind) + 6px)}
  .cc.brand b{display:none}
  .cc.brand{padding-left:14px}
  .cc:nth-child(4),.cc:nth-child(5),.cc:nth-child(6){display:none}
  .nav button{width:48px}
  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}
  .title-txt h1{font-size:clamp(34px,11vw,52px)}
  .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}
  .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}
}

/* ÔòÉÔòÉÔòÉ 10. ACCESSIBILIT├ë ET IMPRESSION ÔòÉÔòÉÔòÉ */
.skip{position:fixed;left:12px;top:-60px;z-index:500;background:var(--ink);color:var(--paper);
  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{
  html,body{height:auto;overflow:visible;background:#fff}
  .tabs,.drop,.cartouche,.staples,.modal,.skip{display:none!important}
  .bundle{position:static;inset:auto;perspective:none}
  .sheet{position:static;inset:auto;transform:none!important;opacity:1!important;
    display:block!important;page-break-after:always;margin-bottom:20mm}
  .leaf{position:static;box-shadow:none;transform:none!important}
  .face.back,.shade{display:none}
  .face{position:static}
  .inner{position:static;inset:auto;left:auto;overflow:visible}
  .frame{display:none}
  .body{overflow:visible}
}