/* ==========================================================================
   Template 3D — feuille de style unique
   Deux métiers, une seule interface : le service d’impression et la boutique
   de pièces détachées. Mise en page claire inspirée des grands sites de vente :
   en-tête blanc avec recherche et panier, barre de rubriques, cartes produits.
   Une seule famille de caractères : Archivo (axe de largeur pour les titres).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* Couleurs */
  --nuit: #14233a;           /* bandeau, pied de page, bandes sombres */
  --nuit-2: #0e1a2c;
  --encre: #172033;          /* texte */
  --papier: #f4f5f7;         /* fond général */
  --papier-2: #e9ecf1;       /* fonds secondaires, survols */
  --blanc: #ffffff;
  --trait: #d6dbe3;          /* filets */
  --trait-fort: #a9b1be;     /* bordures de champs */
  --gris: #566173;           /* texte secondaire (5,9:1 sur papier) */
  --magenta: #d1006f;        /* action principale (5,3:1 avec du blanc) */
  --magenta-fonce: #a6005a;
  --magenta-vif: #ff4d9e;    /* magenta lisible sur fond nuit */
  --magenta-pale: #fdeef5;
  --cyan: #0b8bd1;
  --cyan-fonce: #0a5f94;     /* liens et focus (6,6:1 sur papier) */
  --jaune: #ffd21f;
  --succes: #1d6b45;
  --succes-pale: #e8f4ed;
  --erreur: #b3261e;
  --erreur-pale: #fdf1f0;
  /* Valeurs contextuelles (redéfinies dans les zones sombres) */
  --sur-encre: #ffffff;
  --survol: var(--papier-2);

  /* Typographie */
  --police: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --t-base: 1.0625rem;       /* 17 px */
  --t-petit: 0.875rem;       /* 14 px */
  --t-mini: 0.8125rem;       /* 13 px */
  --t-h3: 1.1875rem;
  --t-h2: clamp(1.625rem, 1.15rem + 1.8vw, 2.375rem);
  --t-h1: clamp(2.125rem, 1.3rem + 3.4vw, 3.75rem);

  /* Espacements */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4.5rem; --e-9: 6.5rem;
  --gouttiere: clamp(1rem, 0.6rem + 2vw, 2rem);
  --largeur: 77rem;

  --rayon: 6px;
  --rayon-carte: 10px;
  --ombre: 0 1px 2px rgba(20, 35, 58, 0.06), 0 4px 14px rgba(20, 35, 58, 0.06);
  --ombre-forte: 0 18px 40px -12px rgba(20, 35, 58, 0.28);
  --entete: 4.5rem;          /* hauteur de la barre principale */
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 9rem; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font-family: var(--police); font-size: var(--t-base); line-height: 1.6;
  font-kerning: normal; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-fonce); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--encre); text-decoration-thickness: 2px; }
p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--t-h1); font-stretch: 122%; font-weight: 760; line-height: 1.04; letter-spacing: -0.012em; }
h2 { font-size: var(--t-h2); font-stretch: 114%; font-weight: 720; letter-spacing: -0.006em; }
h3 { font-size: var(--t-h3); font-weight: 680; line-height: 1.25; }
p { text-wrap: pretty; }
strong { font-weight: 680; }
::selection { background: var(--jaune); color: var(--encre); }
:focus-visible { outline: 3px solid var(--cyan-fonce); outline-offset: 2px; border-radius: 2px; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lien-evitement {
  position: absolute; left: var(--e-4); top: -4rem; z-index: 100;
  background: var(--encre); color: var(--blanc); padding: var(--e-3) var(--e-4);
  border-radius: var(--rayon); font-weight: 650;
}
.lien-evitement:focus { top: var(--e-4); color: var(--blanc); }

.wrap { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.mesure { max-width: 66ch; }
.nombres { font-variant-numeric: tabular-nums; }
.insecable { white-space: nowrap; }

/* Zones sombres */
.sombre {
  --encre: #ffffff; --gris: #b9c3d2; --trait: rgba(255, 255, 255, 0.16); --cyan-fonce: #8ccff5;
  --sur-encre: var(--nuit); --survol: rgba(255, 255, 255, 0.1);
  background: var(--nuit); color: var(--encre);
}

/* --- Boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 3rem; padding: 0.7rem 1.35rem;
  border: 2px solid var(--magenta); border-radius: var(--rayon);
  background: var(--magenta); color: var(--blanc);
  font: inherit; font-weight: 680; font-stretch: 106%; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--magenta-fonce); border-color: var(--magenta-fonce); color: var(--blanc); text-decoration: none; }
.btn .ico { width: 1.15em; height: 1.15em; }
.btn--petit { min-height: 2.5rem; padding: 0.45rem 0.95rem; font-size: 0.9375rem; }
.btn--ligne { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn--ligne:hover { background: var(--encre); border-color: var(--encre); color: var(--sur-encre); }
.btn--clair { background: var(--blanc); color: var(--nuit); border-color: var(--blanc); }
.btn--clair:hover { background: var(--jaune); border-color: var(--jaune); color: var(--nuit); }
.btn--plein { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .65; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.lien-bouton { border: 0; background: none; padding: 0.35rem 0; color: var(--cyan-fonce); font: inherit; font-size: var(--t-petit); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.lien-bouton:hover { color: var(--encre); }
.lien-discret { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-petit); color: var(--cyan-fonce); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; justify-self: start; }
.lien-discret:hover { color: var(--encre); }
.lien-fleche { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 650; text-decoration: none; color: var(--encre); }
.lien-fleche:hover { color: var(--magenta); text-decoration: underline; }
.lien-fleche .ico { width: 1.1rem; height: 1.1rem; transition: transform .15s; }
.lien-fleche:hover .ico { transform: translateX(3px); }
.lien-fleche--retour:hover .ico { transform: translateX(-3px); }

.surtitre { font-size: var(--t-mini); font-weight: 720; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta); }
.sombre .surtitre { color: var(--magenta-vif); }
.coches { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.coches li { display: flex; align-items: flex-start; gap: 0.55rem; }
.coches .ico { width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; color: var(--succes); stroke-width: 2.6; }
.pastille {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  border-radius: 999px; background: var(--magenta); color: var(--blanc); font-size: 0.75rem; font-weight: 760; line-height: 1;
}
.encre { width: 0.75rem; height: 0.75rem; border-radius: 50%; display: inline-block; flex: none; }
.encre--cyan { background: var(--cyan); } .encre--magenta { background: var(--magenta); } .encre--jaune { background: var(--jaune); box-shadow: inset 0 0 0 1px #c9a800; }
.encre--nuit { background: var(--nuit); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); } .encre--gris { background: var(--trait-fort); }
.picto .accent { stroke: var(--magenta); }
.sombre .picto .accent { stroke: var(--magenta-vif); }

/* --- Logo ---------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--encre); text-decoration: none; flex: none; }
.logo:hover { color: var(--encre); text-decoration: none; }
.logo__repere { width: 1.8rem; height: 1.8rem; flex: none; }
.logo__point { fill: var(--magenta); }
.logo__mot { font-size: 1.3rem; font-weight: 780; font-stretch: 122%; letter-spacing: -0.02em; line-height: 1; }
.logo__pla { color: var(--magenta); }
.sombre .logo__pla { color: var(--magenta-vif); }
.logo__3d {
  margin-left: 0.25rem; padding: 0.1rem 0.32rem 0.12rem; border: 2px solid currentColor; border-radius: 3px;
  font-size: 0.78rem; font-weight: 760; font-stretch: 112%; letter-spacing: 0.02em; line-height: 1;
}

/* --- Bandeau des engagements (tout en haut) ------------------------------ */
.bandeau { background: var(--nuit); color: #dfe5ee; font-size: var(--t-mini); }
.bandeau__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 2.25rem; }
.bandeau__atouts { list-style: none; padding: 0; display: flex; gap: var(--e-5); min-width: 0; }
.bandeau__atouts li { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.bandeau__atouts li:nth-child(n+2) { display: none; }
.bandeau .ico { width: 0.95rem; height: 0.95rem; color: var(--magenta-vif); }
.bandeau__contact { display: flex; align-items: center; gap: var(--e-4); flex: none; }
.bandeau__contact a { display: inline-flex; align-items: center; gap: 0.35rem; color: #ffffff; text-decoration: none; font-weight: 600; }
.bandeau__contact a:hover { text-decoration: underline; color: #ffffff; }
.bandeau__contact a:last-child { display: none; }
@media (min-width: 48rem) {
  .bandeau__atouts li:nth-child(2) { display: flex; }
  .bandeau__contact a:last-child { display: inline-flex; }
}
@media (min-width: 64rem) { .bandeau__atouts li:nth-child(3) { display: flex; } }

/* --- En-tête -------------------------------------------------------------- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--blanc); border-bottom: 1px solid var(--trait); }
.entete__barre { display: flex; align-items: center; gap: var(--e-2); min-height: var(--entete); }
.entete .logo { margin-right: auto; }
.entete__icone {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; flex: none;
  min-width: 2.75rem; height: 2.75rem; padding: 0 0.5rem; border: 0; border-radius: var(--rayon);
  background: none; color: var(--encre); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.entete__icone:hover { background: var(--survol); color: var(--encre); text-decoration: none; }
.entete__icone .ico { width: 1.5rem; height: 1.5rem; }
.entete__panier-texte { display: none; }
.entete__panier .pastille { position: absolute; top: 0.2rem; left: 1.65rem; }
.entete__panier[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--magenta); border-radius: 0; }
.entete__devis { display: none; }
.menu-btn { margin-left: -0.5rem; }

/* Recherche */
.recherche { position: relative; display: none; flex: 1; align-items: center; min-width: 0; }
.recherche__champ {
  width: 100%; height: 2.75rem; padding: 0 3rem 0 1rem; border: 1px solid var(--trait-fort); border-radius: 999px;
  background: var(--papier); color: var(--encre); font: inherit; font-size: 1rem;
  -webkit-appearance: none; appearance: none;
}
.recherche__champ::placeholder { color: #6c7686; }
.recherche__champ:focus { outline: none; border-color: var(--encre); background: var(--blanc); box-shadow: 0 0 0 3px rgba(10, 95, 148, 0.25); }
.recherche__champ::-webkit-search-cancel-button { -webkit-appearance: none; }
.recherche__bouton {
  position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px;
  background: var(--encre); color: var(--blanc); cursor: pointer;
}
.recherche__bouton:hover { background: var(--magenta); }
.recherche__bouton .ico { width: 1.1rem; height: 1.1rem; }
.entete.recherche-ouverte .recherche { display: flex; order: 10; flex-basis: 100%; margin: 0 0 var(--e-3); }
.entete.recherche-ouverte .entete__barre { flex-wrap: wrap; }

.suggestions {
  position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 60; list-style: none; margin: 0; padding: var(--e-2);
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); box-shadow: var(--ombre-forte);
  max-height: min(70vh, 28rem); overflow-y: auto;
}
.suggestions li { border-radius: var(--rayon); }
.suggestions a { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--e-3); padding: 0.55rem 0.7rem; color: var(--encre); text-decoration: none; border-radius: var(--rayon); }
.suggestions a[aria-selected="true"], .suggestions a:hover { background: var(--papier-2); }
.suggestions strong { font-weight: 620; }
.suggestions small { grid-column: 1; color: var(--gris); font-size: var(--t-mini); }
.suggestions .nombres { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 650; }
.suggestions .suggestions__tout a { color: var(--cyan-fonce); font-weight: 600; grid-template-columns: 1fr; }

/* Rubriques (ordinateur) */
.rubriques { display: none; border-top: 1px solid var(--trait); }
.rubriques__liste { list-style: none; padding: 0; display: flex; align-items: stretch; gap: var(--e-1); min-height: 3rem; }
.rubriques__lien {
  display: inline-flex; align-items: center; gap: 0.35rem; height: 100%; padding: 0 0.85rem;
  border: 0; background: none; color: var(--encre); font: inherit; font-weight: 620; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 -3px 0 transparent;
}
.rubriques__lien:hover, .rubriques__lien[aria-expanded="true"] { color: var(--magenta); text-decoration: none; box-shadow: inset 0 -3px 0 var(--magenta); }
.rubriques__lien[aria-current="page"], .rubriques__lien.est-actif { box-shadow: inset 0 -3px 0 var(--encre); }
.rubriques__lien .ico { width: 1rem; height: 1rem; transition: transform .15s; }
.rubriques__lien[aria-expanded="true"] .ico { transform: rotate(180deg); }
.rubriques__liste > li:first-child .rubriques__lien { padding-left: 0; }

/* Menus déroulants pleine largeur */
.deroulant {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 55;
  background: var(--blanc); border-top: 1px solid var(--trait); box-shadow: var(--ombre-forte);
  padding: var(--e-6) 0 var(--e-7);
}
.deroulant__grille { display: grid; gap: var(--e-6); }
.deroulant__grille--imprimer { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(15rem, 1.15fr); }
.deroulant__grille--pieces { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.deroulant__titre { font-size: var(--t-mini); font-weight: 720; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); margin-bottom: var(--e-3); }
.deroulant ul { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
.deroulant a { display: block; padding: 0.4rem 0; color: var(--encre); text-decoration: none; font-weight: 520; }
.deroulant a:hover { color: var(--magenta); text-decoration: underline; }
.deroulant a[aria-current="page"] { font-weight: 700; }
.deroulant .deroulant__matiere { display: flex; align-items: center; gap: 0.55rem; }
.deroulant__matiere .nombres { margin-left: auto; color: var(--gris); font-size: var(--t-petit); }
.deroulant__encart {
  display: grid; gap: var(--e-3); align-content: start; justify-items: start;
  padding: var(--e-5); border-radius: var(--rayon-carte); background: var(--papier);
}
.deroulant__encart .picto { width: 2.75rem; height: 2.75rem; }
.deroulant__encart p { font-size: 0.9375rem; color: var(--gris); }
.deroulant__encart strong { display: block; color: var(--encre); font-size: 1.0625rem; }
.deroulant .deroulant__encart .btn { color: var(--blanc); text-decoration: none; padding: 0.45rem 0.95rem; }
.deroulant__rayons { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); grid-auto-rows: 1fr; gap: var(--e-2) !important; }
.deroulant__rayons li { display: flex; }
.deroulant .deroulant__rayons li > a { flex: 1; }
.deroulant .deroulant__rayons a {
  display: flex; align-items: center; gap: var(--e-3); padding: 0.6rem 0.75rem;
  border: 1px solid var(--trait); border-radius: var(--rayon-carte); font-weight: 620;
}
.deroulant .deroulant__rayons a:hover { border-color: var(--encre); text-decoration: none; background: var(--papier); color: var(--encre); }
.deroulant__rayons .picto { width: 2.25rem; height: 2.25rem; flex: none; color: var(--encre); }
.deroulant__rayons small { display: block; font-size: var(--t-mini); font-weight: 450; color: var(--gris); }
.deroulant .deroulant__tout { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--e-4); font-weight: 680; }
.deroulant__tout .ico { width: 1.1rem; height: 1.1rem; }

@media (min-width: 48rem) {
  .entete__devis { display: inline-flex; }
}
@media (min-width: 64rem) {
  .menu-btn, .recherche-btn { display: none; }
  .recherche { display: flex; max-width: 34rem; margin: 0 var(--e-4); }
  .entete .logo { margin-right: 0; }
  .entete__barre { gap: var(--e-3); }
  .entete__devis { margin-left: auto; }
  .entete__panier-texte { display: inline; }
  .entete__panier .pastille { position: static; }
  .rubriques { display: block; }
}

/* --- Menu mobile : panneau latéral -------------------------------------- */
.tiroir { position: fixed; inset: 0; z-index: 80; }
.tiroir__fond { position: absolute; inset: 0; background: rgba(14, 26, 44, 0.55); }
.tiroir__panneau {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(23rem, 88vw);
  display: flex; flex-direction: column; background: var(--blanc); box-shadow: var(--ombre-forte);
  animation: tiroir .2s ease-out;
}
@keyframes tiroir { from { transform: translateX(-100%); } to { transform: none; } }
.tiroir__tete { display: flex; align-items: center; justify-content: space-between; padding: var(--e-2) var(--e-3) var(--e-2) var(--e-5); border-bottom: 1px solid var(--trait); }
.tiroir__titre { font-weight: 720; font-stretch: 112%; font-size: 1.125rem; }
.tiroir__corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--e-2) 0 var(--e-5); }
.tiroir__section { border-bottom: 1px solid var(--trait); }
.tiroir__section summary {
  display: flex; align-items: center; gap: var(--e-3); padding: 0.9rem var(--e-5);
  list-style: none; cursor: pointer; font-weight: 700; font-size: 1.125rem; font-stretch: 108%;
}
.tiroir__section summary::-webkit-details-marker { display: none; }
.tiroir__section summary .picto { width: 2rem; height: 2rem; }
.tiroir__section summary .ico { margin-left: auto; transition: transform .15s; }
.tiroir__section[open] summary .ico { transform: rotate(180deg); }
.tiroir__section ul { list-style: none; padding: 0 0 var(--e-3); }
.tiroir__section a { display: flex; justify-content: space-between; gap: var(--e-3); padding: 0.55rem var(--e-5) 0.55rem calc(var(--e-5) + 2.75rem); color: var(--encre); text-decoration: none; }
.tiroir__section a:hover { background: var(--papier); }
.tiroir__section a .nombres { color: var(--gris); font-size: var(--t-petit); }
.tiroir__liens { list-style: none; padding: var(--e-2) 0; border-bottom: 1px solid var(--trait); }
.tiroir__liens a { display: block; padding: 0.7rem var(--e-5); color: var(--encre); text-decoration: none; font-weight: 620; }
.tiroir__liens a:hover { background: var(--papier); }
.tiroir a[aria-current="page"] { color: var(--magenta); font-weight: 700; }
.tiroir__contact { display: grid; gap: 0.2rem; padding: var(--e-5); font-size: var(--t-petit); color: var(--gris); }
.tiroir__contact a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--encre); font-size: 1.0625rem; font-weight: 680; text-decoration: none; }
.tiroir__pied { padding: var(--e-3) var(--e-5) calc(var(--e-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); }
body.tiroir-ouvert { overflow: hidden; }

/* --- Sections ------------------------------------------------------------ */
.section { padding: clamp(3rem, 2.2rem + 3vw, 5.5rem) 0; }
.section--blanc { background: var(--blanc); }
.section--encre { background: var(--nuit); }
.section__tete { display: grid; gap: var(--e-3); margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); max-width: 52rem; }
.section__tete--ligne { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2) var(--e-5); }
.section__intro { color: var(--gris); font-size: 1.0625rem; max-width: 62ch; }

/* En-tête des pages intérieures */
.tete { background: var(--blanc); border-bottom: 1px solid var(--trait); padding: var(--e-4) 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.tete--compacte { padding-bottom: var(--e-6); }
.tete h1 { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); margin-top: var(--e-4); }
.tete__chapo { margin-top: var(--e-3); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); color: var(--gris); max-width: 58ch; }
.tete__grille { display: grid; gap: var(--e-6); align-items: start; }
.tete__texte .actions { margin-top: var(--e-5); }
@media (min-width: 64rem) { .tete__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--e-8); } }
.fil { font-size: var(--t-petit); }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0; margin: 0; color: var(--gris); }
.fil li + li::before { content: "›"; margin-right: 0.5rem; color: var(--trait-fort); }
.fil a { color: var(--gris); display: inline-block; min-height: 24px; line-height: 24px; } /* cible de 24 px (WCAG 2.5.8) */
.fil a:hover { color: var(--encre); }
.maj { color: var(--gris); font-size: var(--t-petit); margin-top: var(--e-2); }

/* Fiche d’informations (en bref, comment faire, et ensuite) */
.fiche { background: var(--papier); border-radius: var(--rayon-carte); padding: var(--e-5); display: grid; gap: var(--e-4); }
.fiche__titre { display: flex; justify-content: space-between; align-items: baseline; font-weight: 720; font-stretch: 110%; }
.fiche__titre .nombres { color: var(--magenta); }
.fiche ol.suite, .bloc ol.suite { list-style: none; padding: 0; counter-reset: s; display: grid; }
.fiche ol.suite li, .bloc ol.suite li { counter-increment: s; display: grid; grid-template-columns: 2.25rem 1fr; padding: 0.6rem 0; border-top: 1px solid var(--trait); }
.fiche ol.suite li::before, .bloc ol.suite li::before { content: counter(s); font-weight: 780; font-stretch: 125%; color: var(--magenta); font-variant-numeric: tabular-nums; }

/* --- Accueil -------------------------------------------------------------- */
.accueil { background: var(--blanc); padding: clamp(2rem, 1.4rem + 2.5vw, 3.5rem) 0 clamp(2.5rem, 1.8rem + 3vw, 4.5rem); border-bottom: 1px solid var(--trait); }
.accueil__texte { max-width: 50rem; margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }
.accueil h1 { font-size: clamp(2.125rem, 1.25rem + 3.6vw, 3.875rem); }
.accueil__chapo { margin-top: var(--e-4); font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem); color: var(--gris); max-width: 52ch; }
.portes { display: grid; gap: var(--e-4); }
@media (min-width: 56rem) { .portes { grid-template-columns: 1fr 1fr; gap: var(--e-5); } }
.porte {
  display: grid; gap: var(--e-4); align-content: start; padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  background: var(--papier); border: 1px solid var(--trait); border-radius: 14px;
}
.porte--boutique { background: var(--nuit); border-color: var(--nuit); --encre: #ffffff; --gris: #c3ccd9; color: var(--encre); }
.porte--boutique .surtitre { color: var(--magenta-vif); }
.porte--boutique .picto .accent { stroke: var(--magenta-vif); }
.porte--boutique .coches .ico { color: #7fd6a4; }
.porte--boutique .btn--ligne { color: #ffffff; border-color: #ffffff; }
.porte--boutique .btn--ligne:hover { background: #ffffff; color: var(--nuit); }
.porte__tete { display: flex; align-items: center; gap: var(--e-3); }
.porte__tete .picto { width: 3rem; height: 3rem; flex: none; }
.porte h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem); }
.porte > p { color: var(--gris); }
.porte .actions { margin-top: var(--e-2); }

/* Rayons (tuiles) */
.rayons { list-style: none; padding: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .rayons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .rayons { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.rayon-tuile {
  display: grid; justify-items: center; align-content: start; gap: 0.35rem; height: 100%; padding: var(--e-5) var(--e-3) var(--e-4);
  border: 1px solid var(--trait); border-radius: var(--rayon-carte); background: var(--blanc);
  color: var(--encre); text-align: center; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.rayon-tuile:hover { border-color: var(--encre); box-shadow: var(--ombre); color: var(--encre); text-decoration: none; }
.rayon-tuile .picto { width: 3.25rem; height: 3.25rem; margin-bottom: var(--e-2); }
.rayon-tuile strong { font-weight: 650; line-height: 1.25; }
.rayon-tuile span { font-size: var(--t-mini); color: var(--gris); }
.rayons--compacts { margin-bottom: var(--e-6); }
.rayons--compacts .rayon-tuile { padding: var(--e-4) var(--e-2) var(--e-3); font-size: 0.9375rem; }
.rayons--compacts .rayon-tuile .picto { width: 2.5rem; height: 2.5rem; margin-bottom: 0; }
@media (min-width: 64rem) { .rayons--compacts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .rayons--compacts { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* Service d’impression sur l’accueil */
.impression { display: grid; gap: var(--e-7); align-items: start; }
.impression__texte { display: grid; gap: var(--e-4); }
.impression__texte .actions { margin-top: var(--e-2); }
@media (min-width: 64rem) { .impression { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-8); } }
.etapes { list-style: none; padding: 0; margin: var(--e-2) 0 0; counter-reset: etape; display: grid; gap: 0; }
.etape { counter-increment: etape; display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.1rem var(--e-3); padding: var(--e-4) 0; border-top: 1px solid var(--trait); }
.etape::before {
  content: counter(etape); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--magenta-pale); color: var(--magenta-fonce); font-weight: 760; font-variant-numeric: tabular-nums;
}
.etape h3 { font-size: 1.0625rem; }
.etape p { color: var(--gris); font-size: 0.975rem; grid-column: 2; }

/* Photos de pièces imprimées */
.photos { display: grid; gap: var(--e-4); grid-template-columns: repeat(2, 1fr); }
.photo { display: grid; gap: var(--e-2); align-content: start; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--papier-2); border-radius: var(--rayon-carte); }
.photo figcaption { font-size: var(--t-petit); color: var(--gris); line-height: 1.45; }
.photo--grande { grid-column: 1 / -1; }
@media (min-width: 64rem) {
  .photos { grid-template-columns: repeat(4, 1fr); }
  .photo--grande { grid-column: span 2; grid-row: span 2; }
  .photo--grande img { aspect-ratio: auto; height: 100%; max-height: 32rem; }
}

/* Questions fréquentes */
.faq-grille { display: grid; gap: var(--e-5); }
@media (min-width: 64rem) { .faq-grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-8); } .faq-grille .section__tete { margin-bottom: 0; align-content: start; } }
.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-4) 0; font-weight: 650; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; font-weight: 400; flex: none; color: var(--magenta); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--magenta); }
.faq details p { padding: 0 0 var(--e-5); color: var(--gris); max-width: 64ch; }

/* --- Engagements et pied de page ---------------------------------------- */
.engagements { background: var(--blanc); border-top: 1px solid var(--trait); }
.engagements__liste { list-style: none; padding: var(--e-5) 0; display: grid; gap: var(--e-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64rem) { .engagements__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.engagements li { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-petit); color: var(--gris); }
.engagements .ico { width: 2rem; height: 2rem; padding: 0.4rem; border-radius: 50%; background: var(--magenta-pale); color: var(--magenta-fonce); stroke-width: 1.8; flex: none; }
.engagements strong { display: block; color: var(--encre); font-size: 0.9375rem; }
.engagements a { color: var(--gris); }

.pied { background: var(--nuit-2); color: #dfe5ee; padding: var(--e-8) 0 var(--e-5); font-size: 0.9375rem;
  --encre: #ffffff; --gris: #b9c3d2; --trait: rgba(255, 255, 255, 0.14); }
.pied__grille { display: grid; gap: var(--e-6); }
@media (min-width: 48rem) { .pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pied .logo { color: #ffffff; }
.pied .logo__pla { color: var(--magenta-vif); }
.pied__marque p { color: var(--gris); margin: var(--e-3) 0; }
.pied address { font-style: normal; display: grid; gap: 0.25rem; }
.pied h2 { font-size: 0.9375rem; font-stretch: 100%; font-weight: 700; color: #ffffff; margin-bottom: var(--e-3); }
.pied ul { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
.pied a { color: #dfe5ee; text-decoration: none; }
.pied a:hover { color: #ffffff; text-decoration: underline; }
.pied li a { display: inline-block; padding: 0.25rem 0; }
.pied__bas { margin-top: var(--e-7); padding-top: var(--e-4); border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2) var(--e-5); color: var(--gris); font-size: var(--t-petit); }
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 0 var(--e-4); }

/* --- Boutique -------------------------------------------------------------- */
.boutique { padding-top: var(--e-6); }
.boutique__grille { display: grid; gap: var(--e-6); align-items: start; }
@media (min-width: 64rem) { .boutique__grille { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e-7); } .boutique__cote { position: sticky; top: calc(var(--entete) + 4rem); } }
.boutique__cote { display: none; }
@media (min-width: 64rem) { .boutique__cote { display: grid; gap: var(--e-5); } }
.boutique__cote-titre { font-size: var(--t-mini); font-weight: 720; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.cote-rayons { list-style: none; padding: 0; display: grid; margin-top: calc(-1 * var(--e-3)); }
.cote-rayons a { display: flex; justify-content: space-between; gap: var(--e-3); padding: 0.45rem 0.6rem; margin-inline: -0.6rem; border-radius: var(--rayon); color: var(--encre); text-decoration: none; }
.cote-rayons a:hover { background: var(--papier); }
.cote-rayons a[aria-current="page"] { background: var(--papier-2); font-weight: 700; }
.cote-rayons .nombres { color: var(--gris); font-size: var(--t-petit); }
.cote-aide { display: grid; gap: var(--e-2); padding: var(--e-4); border-radius: var(--rayon-carte); background: var(--papier); font-size: var(--t-petit); color: var(--gris); }
.cote-aide strong { color: var(--encre); }
.cote-aide a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--encre); font-weight: 700; font-size: 1rem; text-decoration: none; }
.cote-aide .ico { width: 1.05rem; height: 1.05rem; }

.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-4); padding: var(--e-3) 0 var(--e-4); margin-bottom: var(--e-5); border-bottom: 1px solid var(--trait); }
.filtres__champ { display: grid; gap: 0.2rem; }
.filtres label { font-size: var(--t-mini); font-weight: 650; color: var(--gris); }
.filtres select {
  min-height: 2.5rem; padding: 0 2rem 0 0.75rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172033' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 1rem;
  font: inherit; font-size: 0.9375rem; color: var(--encre); -webkit-appearance: none; appearance: none;
}
.filtres .filtres__case { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.5rem; font-size: 0.9375rem; color: var(--encre); font-weight: 500; }
.filtres__case input { width: 1.1rem; height: 1.1rem; accent-color: var(--encre); }
.filtres__compte { margin-left: auto; font-size: var(--t-petit); color: var(--gris); align-self: center; }

.grille-produits { list-style: none; padding: 0; display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.grille-produits > li { display: flex; }
@media (min-width: 64rem) { .grille-produits--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.produit {
  position: relative; flex: 1; display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.produit:hover { border-color: var(--trait-fort); box-shadow: var(--ombre); }
.produit__image { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--papier); border-bottom: 1px solid var(--trait); }
.produit__image .picto { width: 34%; height: auto; color: var(--encre); opacity: .9; }
.produit__image img { width: 100%; height: 100%; object-fit: cover; }
.produit__corps { display: grid; gap: 0.3rem; align-content: start; padding: var(--e-4) var(--e-4) 0; }
.produit__rayon { font-size: var(--t-mini); color: var(--gris); font-weight: 600; }
.produit__rayon a { color: inherit; }
.produit__nom { font-size: 1.0625rem; font-stretch: 100%; font-weight: 680; line-height: 1.3; letter-spacing: 0; }
.produit__nom a { color: var(--encre); text-decoration: none; }
.produit__nom a::after { content: ""; position: absolute; inset: 0; }
.produit:hover .produit__nom a { color: var(--magenta); }
.produit__nom a:focus-visible { outline: none; }
.produit:has(.produit__nom a:focus-visible) { outline: 3px solid var(--cyan-fonce); outline-offset: 2px; }
.produit__contenu { font-size: var(--t-petit); font-weight: 650; color: var(--magenta-fonce); }
.produit__points { list-style: none; padding: 0; display: grid; gap: 0.1rem; font-size: var(--t-mini); color: var(--gris); }
.produit__points li::before { content: "·"; margin-right: 0.35rem; font-weight: 700; }
.produit__pied { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-3); padding: var(--e-4); }
.produit__ajout { position: relative; z-index: 1; }
.prix { font-size: 1.25rem; font-weight: 760; font-stretch: 108%; line-height: 1.1; }
.prix--grand { font-size: 2rem; }
.prix--avenir { font-size: 0.9375rem; font-weight: 650; color: var(--gris); }
.dispo { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; font-size: var(--t-mini); font-weight: 600; color: var(--succes); }
.dispo::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.dispo--non { color: var(--erreur); }
.vide { padding: var(--e-6) 0; color: var(--gris); }
.mention-prix { margin-top: var(--e-6); font-size: var(--t-petit); color: var(--gris); }

/* Fiche produit */
.fiche-produit { padding-top: var(--e-4); }
.fiche-produit__grille { display: grid; gap: var(--e-6); margin-top: var(--e-5); }
@media (min-width: 56rem) { .fiche-produit__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); } }
.fiche-produit__visuel {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; background: var(--papier); overflow: hidden;
}
.fiche-produit__visuel .picto { width: 40%; height: auto; }
.fiche-produit__visuel img { width: 100%; height: 100%; object-fit: cover; }
.fiche-produit__sans-photo { position: absolute; bottom: var(--e-4); font-size: var(--t-mini); color: var(--gris); }
.fiche-produit__achat { display: grid; gap: var(--e-3); align-content: start; }
.fiche-produit__achat h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-stretch: 112%; }
.fiche-produit__contenu { font-weight: 680; color: var(--magenta-fonce); }
.fiche-produit__resume { font-size: 1.125rem; color: var(--gris); }
.encart-achat { display: grid; gap: var(--e-4); margin-top: var(--e-3); padding: var(--e-5); border: 1px solid var(--trait); border-radius: 14px; }
.encart-achat__prix { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2) var(--e-4); }
.encart-achat__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.encart-achat__actions .btn { flex: 1; min-width: 12rem; }
.encart-achat__atouts { list-style: none; padding: var(--e-4) 0 0; border-top: 1px solid var(--trait); display: grid; gap: 0.45rem; font-size: var(--t-petit); color: var(--gris); }
.encart-achat__atouts li { display: flex; align-items: center; gap: 0.55rem; }
.encart-achat__atouts .ico { width: 1.15rem; height: 1.15rem; color: var(--encre); }
.fiche-produit__infos { display: grid; gap: var(--e-6); margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--trait); }
@media (min-width: 56rem) { .fiche-produit__infos { grid-template-columns: 1fr 1fr; gap: var(--e-8); } }
.fiche-produit__infos h2 { font-size: 1.375rem; margin-bottom: var(--e-3); }
.liste-carac { list-style: none; padding: 0; border-top: 1px solid var(--trait); }
.liste-carac li { padding: 0.55rem 0; border-bottom: 1px solid var(--trait); }
.liste-compat { list-style: none; padding: 0; display: grid; gap: 0.35rem; margin-bottom: var(--e-3); }
.liste-compat li { display: flex; align-items: flex-start; gap: 0.5rem; }
.liste-compat .ico { width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; color: var(--succes); stroke-width: 2.6; }

.quantite { display: inline-flex; align-items: stretch; flex: none; min-height: 3rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc); }
.quantite:focus-within { border-color: var(--encre); }
.quantite button { display: grid; place-items: center; width: 2.75rem; border: 0; background: none; color: var(--encre); cursor: pointer; border-radius: var(--rayon); }
.quantite button:hover { background: var(--papier-2); }
.quantite button .ico { width: 1rem; height: 1rem; }
.quantite input {
  width: 2.75rem; border: 0; background: none; text-align: center; color: var(--encre);
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.quantite input::-webkit-inner-spin-button, .quantite input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantite--petite { min-height: 2.5rem; }
.quantite--petite button, .quantite--petite input { width: 2.25rem; }

/* Avis « ajouté au panier » */
.avis-panier {
  position: fixed; z-index: 70; left: 50%; bottom: var(--e-5); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--e-4); width: min(30rem, calc(100% - 2rem)); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  background: var(--nuit); color: #ffffff; border-radius: var(--rayon-carte); box-shadow: var(--ombre-forte);
  animation: avis .2s ease-out;
}
@keyframes avis { from { opacity: 0; transform: translate(-50%, 0.75rem); } to { opacity: 1; transform: translate(-50%, 0); } }
.avis-panier .ico { color: #7fd6a4; stroke-width: 2.6; }
.avis-panier p { flex: 1; font-size: 0.9375rem; line-height: 1.35; }
.avis-panier a { flex: none; color: #ffffff; font-weight: 700; padding: 0.4rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--rayon); text-decoration: none; }
.avis-panier a:hover { background: #ffffff; color: var(--nuit); }

/* Panier */
.panier { display: grid; gap: var(--e-6); align-items: start; }
@media (min-width: 64rem) { .panier { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--e-7); } .recap { position: sticky; top: calc(var(--entete) + 4rem); } }
.lignes { list-style: none; padding: 0; border-top: 1px solid var(--trait); margin-bottom: var(--e-5); }
.ligne { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--e-2) var(--e-4); align-items: center; padding: var(--e-4) 0; border-bottom: 1px solid var(--trait); }
.ligne__image { grid-row: span 2; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: var(--rayon); background: var(--papier); overflow: hidden; }
.ligne__image img { width: 100%; height: 100%; object-fit: cover; }
.ligne__image svg { width: 60%; height: auto; }
.ligne__nom a { color: var(--encre); font-weight: 650; text-decoration: none; }
.ligne__nom a:hover { text-decoration: underline; }
.ligne__nom small { display: block; color: var(--gris); font-size: var(--t-mini); }
.ligne__total { font-weight: 720; text-align: right; }
.ligne__actions { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.ligne__actions .lien-bouton { display: inline-flex; align-items: center; gap: 0.3rem; }
.ligne__actions .lien-bouton .ico { width: 1rem; height: 1rem; }
.recap { display: grid; gap: var(--e-4); padding: var(--e-5); border: 1px solid var(--trait); border-radius: 14px; background: var(--papier); }
.recap__titre { font-size: 1.25rem; }
.recap__livraison { display: grid; gap: var(--e-2); }
.recap__livraison legend { font-weight: 680; margin-bottom: var(--e-2); }
.option-livraison { position: relative; }
.option-livraison input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.option-livraison label { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc); cursor: pointer; }
.option-livraison label small { display: block; font-size: var(--t-mini); color: var(--gris); }
.option-livraison input:checked + label { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.option-livraison input:focus-visible + label { outline: 3px solid var(--cyan-fonce); outline-offset: 2px; }
.recap__montants { display: grid; gap: 0.35rem; padding: var(--e-3) 0; border-block: 1px solid var(--trait); }
.recap__montants div { display: flex; justify-content: space-between; gap: var(--e-3); }
.recap__montants dd { margin: 0; font-weight: 650; }
.recap__total { padding-top: 0.35rem; font-size: 1.25rem; font-weight: 760; }
.recap__note { font-size: var(--t-mini); color: var(--gris); }
.panier-vide { display: grid; gap: var(--e-3); justify-items: start; padding: var(--e-5) 0; }
.panier-vide__titre { font-size: 1.375rem; font-weight: 720; }
.panier-vide .actions { margin-top: var(--e-3); }

/* Confirmation de commande */
.confirmation { display: grid; gap: var(--e-4); justify-items: start; max-width: 44rem; }
.confirmation__icone { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--succes-pale); color: var(--succes); }
.confirmation__icone .ico { width: 2rem; height: 2rem; stroke-width: 2.6; }
.confirmation h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
.suite-commande { list-style: none; padding: 0; display: grid; gap: 0.5rem; border-left: 3px solid var(--magenta); padding-left: var(--e-4); }

/* Tarifs et livraison */
.tarifs { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-carte); overflow: hidden; }
.tarifs th, .tarifs td { text-align: left; padding: var(--e-4) var(--e-5); vertical-align: top; border-bottom: 1px solid var(--trait); }
.tarifs thead th { background: var(--papier); font-size: var(--t-petit); font-weight: 680; color: var(--gris); }
.tarifs tbody th { font-size: 1.1875rem; font-weight: 760; font-stretch: 118%; white-space: nowrap; }
.tarifs tbody th .encre { margin-right: 0.45rem; vertical-align: 0.1em; }
.tarifs tbody th a { color: var(--encre); }
.tarifs .prix-cellule { font-size: 1.1875rem; font-weight: 720; white-space: nowrap; }
.tarifs tr:last-child > * { border-bottom: 0; }
@media (max-width: 47.99rem) {
  .tarifs thead { display: none; }
  .tarifs, .tarifs tbody, .tarifs tr, .tarifs th, .tarifs td { display: block; }
  .tarifs tr { padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--trait); }
  .tarifs tr:last-child { border-bottom: 0; }
  .tarifs th, .tarifs td { padding: 0.15rem 0; border: 0; }
  .tarifs td[data-label]::before { content: attr(data-label) " : "; font-weight: 650; color: var(--encre); }
}
.regles { list-style: none; padding: 0; display: grid; gap: 0.45rem; margin-top: var(--e-5); color: var(--gris); }
.regles li { display: flex; align-items: flex-start; gap: 0.55rem; }
.regles .ico { width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; color: var(--succes); stroke-width: 2.6; }
.estimer { display: grid; gap: var(--e-6); align-items: start; }
.estimer__texte { display: grid; gap: var(--e-4); justify-items: start; }
@media (min-width: 64rem) { .estimer { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e-8); } }
.livraisons { list-style: none; padding: 0; display: grid; gap: var(--e-3); margin-bottom: var(--e-4); max-width: 46rem; }
.livraisons li { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-4); border: 1px solid var(--trait); border-radius: var(--rayon-carte); background: var(--blanc); }
.livraisons li > .ico { width: 1.75rem; height: 1.75rem; color: var(--magenta); }
.livraisons li > span:first-of-type { flex: 1; }
.livraisons strong { display: block; }
.livraisons .nombres { font-weight: 720; }
.livraisons--simple li { padding: var(--e-3) 0; border: 0; border-bottom: 1px solid var(--trait); border-radius: 0; background: none; font-size: 0.9375rem; }
.livraisons--simple strong { font-size: 1rem; }

/* Contact */
.contacts { list-style: none; padding: 0; display: grid; gap: var(--e-4); }
@media (min-width: 56rem) { .contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact-carte { display: grid; gap: var(--e-2); align-content: start; padding: var(--e-5); border: 1px solid var(--trait); border-radius: 14px; scroll-margin-top: 10rem; }
.contact-carte > .ico { width: 2.25rem; height: 2.25rem; padding: 0.45rem; border-radius: 50%; background: var(--magenta-pale); color: var(--magenta-fonce); }
.contact-carte h2 { font-size: 1.25rem; font-stretch: 108%; }
.contact-carte > p:not(.aide) { font-size: 1.125rem; font-weight: 680; }

/* Recherche (page) */
.recherche--page { display: flex; max-width: 40rem; margin-top: var(--e-5); }
.recherche--page .recherche__champ { height: 3.25rem; font-size: 1.0625rem; }
.recherche--page .recherche__bouton { width: 2.75rem; height: 2.75rem; }
.resultats__compte { color: var(--gris); margin-bottom: var(--e-4); }
.resultats { list-style: none; padding: 0; border-top: 1px solid var(--trait); max-width: 52rem; }
.trouve a { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem var(--e-4); padding: var(--e-4) 0; border-bottom: 1px solid var(--trait); color: var(--encre); text-decoration: none; }
.trouve a:hover strong { color: var(--magenta); text-decoration: underline; }
.trouve small { color: var(--magenta-fonce); font-weight: 650; font-size: var(--t-mini); text-transform: uppercase; letter-spacing: 0.05em; }
.trouve strong { font-size: 1.0625rem; }
.trouve span { grid-column: 1; color: var(--gris); font-size: 0.9375rem; }
.trouve .nombres { grid-row: 1 / span 3; grid-column: 2; align-self: center; font-weight: 720; color: var(--encre); }
.resultats__aide { margin-top: var(--e-5); color: var(--gris); }

/* --- Pages de service ------------------------------------------------------ */
.contenu { display: grid; gap: var(--e-8); }
.bloc { display: grid; gap: var(--e-4); max-width: 46rem; }
.bloc h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); }
.bloc p { max-width: 66ch; }
.bloc ul { padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.bloc ul li::marker { color: var(--magenta); }
.bloc--large { max-width: none; }
.connexes { display: grid; gap: var(--e-4); }
.connexes ul { list-style: none; padding: 0; display: grid; gap: var(--e-3); }
.connexes li a { display: grid; gap: 0.15rem; height: 100%; padding: var(--e-4) var(--e-5); border: 1px solid var(--trait); border-radius: var(--rayon-carte); text-decoration: none; color: var(--encre); background: var(--blanc); }
.connexes li a strong { font-size: 1.0625rem; }
.connexes li a span { color: var(--gris); font-size: 0.95rem; }
.connexes li a:hover { border-color: var(--encre); box-shadow: var(--ombre); }
.connexes li a:hover strong { color: var(--magenta); }
@media (min-width: 48rem) { .connexes ul { grid-template-columns: repeat(3, 1fr); } }

.appel { display: grid; gap: var(--e-5); align-items: center; }
.appel h2 { color: var(--encre); max-width: 20ch; }
.appel p { color: var(--gris); margin-top: var(--e-2); }
@media (min-width: 64rem) { .appel { grid-template-columns: 1fr auto; } }

/* Plateformes de modèles */
.plateformes { list-style: none; padding: 0; display: grid; gap: var(--e-3); }
.plateforme a { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem var(--e-4); height: 100%; padding: var(--e-4) var(--e-5); border: 1px solid var(--trait); border-radius: var(--rayon-carte); color: var(--encre); text-decoration: none; background: var(--blanc); }
.plateforme strong { font-size: 1.125rem; font-stretch: 112%; }
.plateforme span { grid-column: 1; color: var(--gris); font-size: 0.95rem; }
.plateforme .ico { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 1.1rem; height: 1.1rem; }
.plateforme a:hover { border-color: var(--encre); box-shadow: var(--ombre); }
.plateforme a:hover strong { color: var(--magenta); }
@media (min-width: 48rem) { .plateformes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .plateformes { grid-template-columns: repeat(3, 1fr); } }

/* Textes juridiques */
.page-legale { padding-top: var(--e-7); padding-bottom: var(--e-9); }
.prose { max-width: 46rem; }
.prose > * + * { margin-top: var(--e-4); }
.prose h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-stretch: 110%; margin-top: var(--e-7); }
.prose h3 { margin-top: var(--e-5); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.3rem; }
.prose blockquote { margin: var(--e-4) 0 0; padding: var(--e-4) var(--e-5); background: var(--blanc); border-left: 4px solid var(--encre); }
.prose table { border-collapse: collapse; width: 100%; background: var(--blanc); font-size: 0.95rem; }
.prose th, .prose td { border: 1px solid var(--trait); padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
.prose th { background: var(--papier-2); }

/* --- Estimateur de prix ------------------------------------------------------ */
.bat { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre); }
.bat__tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--trait); }
.bat__titre { font-size: 1.0625rem; font-weight: 740; font-stretch: 116%; }
.bat__ref { font-size: var(--t-petit); color: var(--gris); }
.bat__corps { padding: var(--e-5); display: grid; gap: var(--e-5); }
.bat__pied { padding: var(--e-4) 0 0; border-top: 1px dashed var(--trait); display: grid; gap: var(--e-3); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.etiquette { display: block; font-weight: 650; margin-bottom: var(--e-2); }
.matieres-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.puce { position: relative; }
.puce input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.puce label { display: grid; gap: 0.1rem; padding: 0.6rem 0.7rem 0.55rem; min-height: 3.75rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon); cursor: pointer; background: var(--blanc); }
.puce__nom { font-weight: 760; font-stretch: 112%; display: flex; align-items: center; gap: 0.4rem; }
.puce__prix { font-size: var(--t-petit); color: var(--gris); font-variant-numeric: tabular-nums; }
.puce input:checked + label { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre), inset 0 -4px 0 var(--encre); }
.puce input:focus-visible + label { outline: 3px solid var(--cyan-fonce); outline-offset: 2px; }
@media (max-width: 22.49rem) {
  .bat__corps { padding: var(--e-4); }
  .puce label { padding-inline: 0.5rem; }
  .puce__prix { font-size: 0.8125rem; }
}
.duree { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.champ-unite { display: flex; align-items: center; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc); }
.champ-unite:focus-within { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.champ-unite input { width: 100%; min-width: 0; border: 0; background: none; padding: 0.65rem 0.75rem; font: inherit; font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--encre); }
.champ-unite input:focus { outline: none; }
.champ-unite span { padding-right: 0.75rem; color: var(--gris); font-weight: 560; }
.aide { font-size: var(--t-petit); color: var(--gris); margin-top: var(--e-1); }
.resultat { display: grid; gap: 0.2rem; }
.resultat__label { font-size: var(--t-petit); color: var(--gris); font-weight: 560; }
.resultat__prix { font-size: clamp(2.5rem, 2rem + 2.5vw, 3.25rem); font-weight: 780; font-stretch: 122%; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.resultat__detail { font-size: var(--t-petit); color: var(--gris); font-variant-numeric: tabular-nums; }

/* --- Formulaire de devis ------------------------------------------------- */
.devis { display: grid; gap: var(--e-7); align-items: start; }
@media (min-width: 64rem) { .devis { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .devis__aside { position: sticky; top: calc(var(--entete) + 4rem); } }
.formulaire { display: grid; gap: var(--e-5); }
.formulaire__intro { color: var(--gris); font-size: var(--t-petit); }
.etape-form { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: var(--e-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.etape-form > *, .champ > *, .depot > * { min-width: 0; }
.etape-form > legend { float: left; width: 100%; display: flex; align-items: center; gap: var(--e-3); font-size: 1.1875rem; font-weight: 740; font-stretch: 112%; padding-bottom: var(--e-3); border-bottom: 1px solid var(--trait); }
.etape-form > legend + * { clear: both; }
.etape-form__num { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 50%; background: var(--magenta-pale); color: var(--magenta-fonce); font-size: 1rem; font-stretch: 100%; }
.grille-2 { display: grid; gap: var(--e-4); }
@media (min-width: 40rem) { .grille-2 { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: 0.35rem; }
.champ label, .champ .etiquette { font-weight: 650; margin: 0; }
.champ .facultatif, .facultatif { font-weight: 400; color: var(--gris); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ input[type="url"],
.champ input[type="number"], .champ select, .champ textarea {
  width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem; font: inherit; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: var(--rayon);
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(10, 95, 148, 0.25); }
.champ [aria-invalid="true"], .case [aria-invalid="true"] { border-color: var(--erreur); outline: 2px solid var(--erreur); outline-offset: 1px; }
.champ__erreur { color: var(--erreur); font-weight: 600; font-size: var(--t-petit); }
.champ__erreur:empty { display: none; }
.choix-parcours { display: grid; gap: var(--e-3); }
@media (min-width: 40rem) { .choix-parcours { grid-template-columns: 1fr 1fr; } }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.option label { display: grid; gap: 0.2rem; height: 100%; padding: var(--e-4); border: 1px solid var(--trait-fort); border-radius: var(--rayon); cursor: pointer; }
.option label strong { font-size: 1.0625rem; }
.option label span { color: var(--gris); font-size: 0.95rem; }
.option input:checked + label { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre), inset 5px 0 0 var(--magenta); }
.option input:focus-visible + label { outline: 3px solid var(--cyan-fonce); outline-offset: 2px; }
.depot { display: grid; gap: var(--e-2); padding: var(--e-5); border: 2px dashed var(--trait-fort); border-radius: var(--rayon-carte); background: var(--papier); }
.depot.survol { border-color: var(--magenta); background: var(--magenta-pale); }
.depot input[type="file"] { font: inherit; font-size: var(--t-petit); width: 100%; max-width: 100%; }
.depot__liste { list-style: none; padding: 0; display: grid; gap: var(--e-1); font-size: var(--t-petit); }
.depot__liste li { display: flex; justify-content: space-between; gap: var(--e-3); padding: 0.4rem 0.6rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); font-variant-numeric: tabular-nums; }
.separateur { display: flex; align-items: center; gap: var(--e-3); color: var(--gris); font-size: var(--t-petit); font-weight: 650; }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.case { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--e-3); align-items: start; }
.case input { width: 1.25rem; height: 1.25rem; margin: 0.2rem 0 0; accent-color: var(--encre); }
.case label { font-weight: 450; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.resume-erreurs { border: 1px solid var(--erreur); background: var(--erreur-pale); padding: var(--e-4) var(--e-5); border-radius: var(--rayon-carte); }
.resume-erreurs h2 { font-size: 1.125rem; font-stretch: 100%; color: var(--erreur); margin-bottom: var(--e-2); }
.resume-erreurs ul { margin: 0; padding-left: 1.2rem; }
.resume-erreurs a { color: var(--erreur); font-weight: 600; }
.message { border: 1px solid var(--trait); background: var(--blanc); padding: var(--e-5); border-radius: var(--rayon-carte); display: grid; gap: var(--e-3); }
.message--succes { border-color: var(--succes); background: var(--succes-pale); }
.message--alerte { border-color: var(--erreur); background: var(--erreur-pale); }
.message--info { border-color: var(--cyan-fonce); background: #eaf4fb; margin-bottom: var(--e-5); }
.message h2 { font-size: 1.375rem; font-stretch: 108%; }
.envoi { display: grid; gap: var(--e-3); }
.aside-devis ol { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.aside-devis p, .aside-devis li { font-size: 0.975rem; }
.formulaire:has(#parcours-sans:checked) .si-fichier { display: none; }
.formulaire:not(:has(#parcours-sans:checked)) .si-sans { display: none; }

/* --- Page 404 ------------------------------------------------------------ */
.introuvable { padding: var(--e-9) 0; display: grid; gap: var(--e-5); }

/* --- Préférences --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .bandeau, .entete, .tiroir, .engagements, .pied, .actions, .avis-panier { display: none !important; }
  body { background: #fff; }
}

/* Aperçu de démonstration (build.py --demo) */
.demo p { margin: 0; }
.demo { margin: 0; padding: 0.5rem var(--gouttiere); background: var(--jaune); color: #172033; font-size: var(--t-petit); font-weight: 600; text-align: center; }

/* Boutique sur téléphone : rayons en bande défilante, deux articles par ligne (comme les grands sites) */
@media (max-width: 39.99rem) {
  .rayons--compacts {
    display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) var(--e-1); margin-bottom: var(--e-5);
  }
  .rayons--compacts::-webkit-scrollbar { display: none; }
  .rayons--compacts li { flex: none; }
  .rayons--compacts .rayon-tuile { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem 0.45rem 0.55rem; border-radius: 999px; white-space: nowrap; font-size: 0.9375rem; }
  .rayons--compacts .rayon-tuile .picto { width: 1.6rem; height: 1.6rem; }
  .grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .produit__corps { padding: var(--e-3) var(--e-3) 0; }
  .produit__nom { font-size: 0.9375rem; }
  .produit__points { display: none; }
  .produit__pied { flex-direction: column; align-items: stretch; gap: var(--e-2); padding: var(--e-3); }
  .produit__pied .btn { width: 100%; }
  .fiche-produit__visuel { aspect-ratio: 4 / 3; }
}
@media (min-width: 64rem) { .rayons--compacts { display: none; } }
.boutique__liste { min-width: 0; }
@media (max-width: 39.99rem) {
  .filtres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtres select { width: 100%; }
}
/* Très petits écrans (320 px) : en-tête resserré */
@media (max-width: 23.99rem) {
  .entete__barre { gap: 0.15rem; }
  .entete__icone { min-width: 2.4rem; padding: 0 0.3rem; }
  .entete .logo { gap: 0.35rem; }
  .entete .logo__repere { width: 1.45rem; height: 1.45rem; }
  .entete .logo__mot { font-size: 1.08rem; }
  .entete .logo__3d { font-size: 0.68rem; margin-left: 0.1rem; }
}
.envoi > * { min-width: 0; } .envoi .btn { white-space: normal; text-align: center; }
@media (max-width: 23.99rem) { .btn { white-space: normal; text-align: center; } }
.prose table { width: 100%; } .prose th, .prose td { overflow-wrap: anywhere; }

/* ==========================================================================
   Pièces documentées : menu, accueil, fiche, page par imprimante, diagnostic
   ========================================================================== */
.deroulant__grille--pieces { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(14rem, 1fr); }
.deroulant .deroulant__encart .btn--ligne { color: var(--encre); }
.deroulant .deroulant__encart .btn--ligne:hover { color: var(--sur-encre); }
.tiroir__section .tiroir__sous-titre { padding: var(--e-3) var(--e-5) 0.2rem calc(var(--e-5) + 2.75rem); font-size: var(--t-mini); font-weight: 720; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }

/* Colonne de la boutique : accès au diagnostic */
.cote-diagnostic { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: 1px solid var(--trait); border-radius: var(--rayon-carte); color: var(--gris); font-size: var(--t-petit); text-decoration: none; }
.cote-diagnostic:hover { border-color: var(--encre); background: var(--papier); color: var(--gris); }
.cote-diagnostic .picto { width: 2.25rem; height: 2.25rem; flex: none; color: var(--encre); }
.cote-diagnostic strong { display: block; color: var(--encre); font-size: 0.9375rem; }

/* Guide d’achat en bas d’un rayon */
.guide-rayon { display: grid; gap: var(--e-3); justify-items: start; margin-top: var(--e-7); padding: var(--e-5); border-radius: var(--rayon-carte); background: var(--papier); }
.guide-rayon h2 { font-size: 1.375rem; }
.guide-rayon ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; max-width: 72ch; }
.guide-rayon li::marker { color: var(--magenta); }

/* Pastilles de liens (imprimantes, sommaire) */
.puces-liens { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.puces-liens a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.25rem; padding: 0.3rem 0.85rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc); color: var(--encre); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.puces-liens a:hover { border-color: var(--encre); background: var(--papier); color: var(--encre); }
.puces-liens .nombres { color: var(--gris); font-weight: 500; }

/* Accueil : deux autres façons d’entrer dans la boutique */
.acces-pieces { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
@media (min-width: 56rem) { .acces-pieces { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.acces-pieces > div { padding: var(--e-4) var(--e-5); border: 1px solid var(--trait); border-radius: var(--rayon-carte); background: var(--blanc); }
.acces-pieces__titre { font-size: var(--t-mini); font-weight: 720; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); margin-bottom: var(--e-3); }
.acces-pieces__panne { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-4) var(--e-5); border-radius: var(--rayon-carte); background: var(--nuit); color: #dfe5ee; font-size: var(--t-petit); text-decoration: none; }
.acces-pieces__panne:hover { color: #ffffff; background: var(--nuit-2); }
.acces-pieces__panne strong { display: block; margin-bottom: 0.15rem; color: #ffffff; font-size: 1.0625rem; }
.acces-pieces__panne .picto { width: 2.75rem; height: 2.75rem; flex: none; color: #ffffff; }
.acces-pieces__panne > .ico { flex: none; width: 1.25rem; height: 1.25rem; margin-left: auto; color: var(--magenta-vif); transition: transform .15s; }
.acces-pieces__panne:hover > .ico { transform: translateX(3px); }

/* Fiche produit documentée */
.doc-produit { display: grid; gap: var(--e-6); margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--trait); }
@media (min-width: 56rem) { .doc-produit { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--e-8); align-items: start; } }
.doc-produit__principal, .doc-produit__cote { display: grid; gap: var(--e-6); align-content: start; min-width: 0; }
.doc-produit h2 { font-size: 1.375rem; margin-bottom: var(--e-3); }
.doc-produit__principal p { max-width: 68ch; }
.signes { padding-left: 1.2rem; display: grid; gap: 0.45rem; max-width: 68ch; }
.signes li::marker { color: var(--magenta); }
.conseils { list-style: none; padding: 0; display: grid; gap: 0.45rem; max-width: 68ch; }
.conseils li { position: relative; padding-left: 1.6rem; }
.conseils li::before { content: ""; position: absolute; left: 0.1rem; top: 0.38em; width: 0.8rem; height: 0.42rem; border-left: 2.5px solid var(--succes); border-bottom: 2.5px solid var(--succes); transform: rotate(-45deg); }
.pas-a-pas { list-style: none; padding: 0; counter-reset: pas; display: grid; gap: var(--e-3); max-width: 68ch; }
.pas-a-pas li { counter-increment: pas; position: relative; min-height: 1.8rem; padding-left: 2.6rem; }
.pas-a-pas li::before { content: counter(pas); position: absolute; left: 0; top: -0.05rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--nuit); color: #ffffff; font-size: var(--t-petit); font-weight: 720; font-variant-numeric: tabular-nums; }
.attention { display: flex; align-items: flex-start; gap: var(--e-3); max-width: 68ch; margin-top: var(--e-4); padding: var(--e-3) var(--e-4); border: 1px solid #ecd06a; border-radius: var(--rayon); background: #fff7d9; color: var(--encre); font-size: 0.9375rem; }
.attention .ico { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: #7a5200; }
.carac { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.carac th, .carac td { padding: 0.55rem 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.carac tr:first-child > * { border-top: 1px solid var(--trait); }
.carac th { width: 42%; padding-right: var(--e-4); color: var(--gris); font-weight: 560; }
.carac td { font-weight: 620; }
.liste-compat a { color: var(--encre); font-weight: 620; }
.compat-standard { margin-bottom: var(--e-2); font-size: 0.9375rem; }
.associes { border-top: 1px solid var(--trait); }

/* Page « Pièces pour une imprimante » */
.fiche-machine { max-width: 52rem; margin-top: var(--e-5); padding: var(--e-4) var(--e-5); border-radius: var(--rayon-carte); background: var(--papier); }
.fiche-machine__titre { margin-bottom: var(--e-2); font-weight: 700; }
.fiche-machine ul { list-style: none; padding: 0; display: grid; gap: 0.3rem var(--e-5); }
@media (min-width: 40rem) { .fiche-machine ul { grid-template-columns: 1fr 1fr; } }
.fiche-machine li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9375rem; }
.fiche-machine .ico { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; color: var(--succes); stroke-width: 2.6; }
.sommaire-rayons { margin-bottom: var(--e-6); }
.groupe-rayon { scroll-margin-top: calc(var(--entete) + 4rem); }
.groupe-rayon + .groupe-rayon { margin-top: var(--e-7); }
.groupe-rayon__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); margin-bottom: var(--e-4); padding-bottom: var(--e-3); border-bottom: 1px solid var(--trait); }
.groupe-rayon h2 { display: flex; align-items: center; gap: var(--e-3); font-size: 1.5rem; }
.groupe-rayon h2 .picto { flex: none; width: 2.25rem; height: 2.25rem; }
.aide--encadre { margin-top: var(--e-7); padding: var(--e-4); border-left: 3px solid var(--cyan-fonce); border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--papier); }

/* Page « Quelle pièce changer ? » */
.diagnostic { padding-top: var(--e-6); }
.diagnostic__index { margin-bottom: var(--e-6); padding: var(--e-5); border-radius: var(--rayon-carte); background: var(--papier); }
.diagnostic__index-titre { margin-bottom: var(--e-3); font-size: var(--t-mini); font-stretch: 100%; font-weight: 720; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.diagnostic__index ol { padding-left: 1.6rem; }
@media (min-width: 48rem) { .diagnostic__index ol { columns: 2; column-gap: var(--e-7); } }
.diagnostic__index li { padding: 0.2rem 0; break-inside: avoid; }
.diagnostic__index li::marker { color: var(--gris); font-variant-numeric: tabular-nums; }
.diagnostic__index a { color: var(--encre); font-weight: 600; }
.panne { padding: var(--e-6) 0; border-top: 1px solid var(--trait); scroll-margin-top: calc(var(--entete) + 4rem); }
.panne h2 { display: flex; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-4); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }
.panne__num { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: 0.05rem; border-radius: 50%; background: var(--magenta-pale); color: var(--magenta-fonce); font-size: 0.9375rem; font-weight: 760; }
.panne__grille { display: grid; gap: var(--e-5); }
@media (min-width: 56rem) { .panne__grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-7); } }
.panne h3 { margin-bottom: var(--e-3); font-size: var(--t-mini); font-stretch: 100%; font-weight: 720; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.pieces-liees { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
.pieces-liees a { display: flex; align-items: center; gap: var(--e-3); padding: 0.55rem 0.75rem; border: 1px solid var(--trait); border-radius: var(--rayon-carte); color: var(--encre); text-decoration: none; }
.pieces-liees a:hover { border-color: var(--encre); background: var(--papier); color: var(--encre); }
.pieces-liees .picto { flex: none; width: 2.25rem; height: 2.25rem; }
.pieces-liees strong { display: block; font-weight: 650; line-height: 1.3; }
.pieces-liees small { display: block; font-size: var(--t-mini); color: var(--gris); }
.pieces-liees a > .ico { flex: none; width: 1.1rem; height: 1.1rem; margin-left: auto; color: var(--gris); }
.diagnostic__fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); margin-top: var(--e-4); padding: var(--e-5); border-radius: var(--rayon-carte); background: var(--papier); }
.diagnostic__fin p { max-width: 62ch; }
.aide--haut { margin: 0 0 var(--e-5); }
@media (max-width: 55.99rem) { .doc-produit__cote { order: -1; } }

/* ==========================================================================
   Marques, modèles, origine et variantes
   ========================================================================== */
/* Menu : liste des marques */
.deroulant .deroulant__marques a { display: flex; justify-content: space-between; gap: var(--e-3); }
.deroulant__marques .nombres { color: var(--gris); font-size: var(--t-mini); font-weight: 450; }

/* Badge « D’origine » / « Compatible » */
.produit__image { position: relative; }
.badge-origine { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--blanc); border: 1px solid var(--trait); color: var(--gris); font-size: 0.75rem; font-weight: 650; line-height: 1.4; }
.badge-origine--origine { background: var(--nuit); border-color: var(--nuit); color: #ffffff; }
.produit__image .badge-origine { position: absolute; top: var(--e-2); left: var(--e-2); }
.badge-origine--fiche { justify-self: start; font-size: var(--t-mini); }
.note-origine { margin-top: var(--e-3); font-size: 0.9375rem; color: var(--gris); }
.prix__des { font-size: 0.8125rem; font-weight: 600; font-stretch: 100%; color: var(--gris); }
.produit__choisir { pointer-events: none; }

/* Choix des variantes */
.choix-variantes { display: grid; gap: var(--e-4); padding-bottom: var(--e-4); border-bottom: 1px solid var(--trait); }
.choix { border: 0; padding: 0; margin: 0; min-width: 0; }
.choix legend { padding: 0; margin-bottom: var(--e-2); font-size: 0.9375rem; font-weight: 650; }
.choix legend span { font-weight: 450; color: var(--gris); }
.choix__options { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.choix__option { position: relative; display: inline-flex; }
.choix__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix__option span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.35rem 0.85rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc); font-size: 0.9375rem; font-weight: 600; }
.choix__option input:hover + span { border-color: var(--encre); }
.choix__option input:checked + span { border: 2px solid var(--encre); padding: calc(0.35rem - 1px) calc(0.85rem - 1px); background: var(--papier); }
.choix__option input:focus-visible + span { outline: 3px solid var(--cyan-fonce); outline-offset: 2px; }
.choix__option.est-indispo span { color: var(--gris); border-style: dashed; text-decoration: line-through; }
.encart-achat__actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.carac--choix thead th { color: var(--gris); font-size: var(--t-mini); font-weight: 650; padding-top: 0; }
.carac--choix tbody th { color: var(--encre); font-weight: 620; }
.carac--choix small { display: block; font-size: var(--t-mini); font-weight: 450; color: var(--gris); }
.carac--choix td { white-space: nowrap; }
.compat-variante { margin: var(--e-3) 0 var(--e-1); font-weight: 680; }
.compat-variante:first-of-type { margin-top: 0; }

/* Page d’une marque */
.modeles { margin-bottom: var(--e-7); }
.modeles__titre, .marque__sous-titre { font-size: 1.5rem; margin-bottom: var(--e-4); }
.modeles__grille { list-style: none; padding: 0; display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); margin-bottom: var(--e-4); }
.modeles__grille li { display: flex; }
.modele-tuile { flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--e-2); padding: 0.75rem 0.9rem; border: 1px solid var(--trait); border-radius: var(--rayon-carte); background: var(--blanc); color: var(--encre); text-decoration: none; }
.modele-tuile:hover { border-color: var(--encre); background: var(--papier); color: var(--encre); }
.modele-tuile strong { font-weight: 680; }
.modele-tuile span { grid-row: 2; font-size: var(--t-mini); color: var(--gris); }
.modele-tuile .ico { grid-row: 1 / 3; grid-column: 2; width: 1.1rem; height: 1.1rem; color: var(--gris); }
.marque__pieces { padding-top: var(--e-6); border-top: 1px solid var(--trait); }
.groupe-rayon h3 { display: flex; align-items: center; gap: var(--e-3); font-size: 1.375rem; }
.groupe-rayon h3 .picto { flex: none; width: 2.1rem; height: 2.1rem; }
.boutique__cote .lien-fleche { font-size: var(--t-petit); margin-top: calc(-1 * var(--e-3)); }

/* ==========================================================================
   Prix immédiat : dépôt du fichier, choix, paiement (page /commander)
   ========================================================================== */
.commande { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 64rem) { .commande { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--e-6); } .commande__recap { position: sticky; top: calc(var(--entete) + 4rem); } }
.commande__etapes { display: grid; gap: var(--e-5); min-width: 0; }
.depot--grand { padding: var(--e-6) var(--e-5); }
.champ--court { max-width: 24rem; }
/* Choix des pièces d’un ZIP (Thingiverse, Printables…) */
.zip-choix { border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: var(--e-3) var(--e-4) var(--e-4); margin: 0 0 var(--e-4); min-width: 0; display: grid; gap: var(--e-2); background: var(--blanc); }
.zip-choix > legend { padding: 0 var(--e-1); font-weight: 650; overflow-wrap: anywhere; }
.zip-choix__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-1); max-height: 18rem; overflow-y: auto; }
.zip-choix__liste li { display: flex; align-items: flex-start; gap: var(--e-2); padding: 0.45rem 0.6rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--papier); }
.zip-choix__liste input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--magenta); }
.zip-choix__liste label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--e-3); flex: 1; min-width: 0; font-size: var(--t-petit); cursor: pointer; }
.zip-choix__liste label span { overflow-wrap: anywhere; }
.zip-choix__liste small { color: var(--gris); white-space: nowrap; }
.conversion { margin: 0 0 var(--e-3); }
.analyse { display: grid; gap: var(--e-4); align-items: start; }
@media (min-width: 48rem) { .analyse { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.analyse__apercu { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--rayon-carte); background: var(--papier); border: 1px solid var(--trait); }
.analyse__nom { font-weight: 680; overflow-wrap: anywhere; margin-bottom: var(--e-2); }
.mesures { display: grid; gap: 0.3rem; margin: 0 0 var(--e-3); font-size: 0.9375rem; }
.mesures div { display: flex; justify-content: space-between; gap: var(--e-3); padding-bottom: 0.3rem; border-bottom: 1px solid var(--trait); }
.mesures dt { color: var(--gris); }
.mesures dd { margin: 0; font-weight: 650; text-align: right; }
.avertissements { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
.avertissement { padding: var(--e-2) var(--e-3); border-radius: var(--rayon); border: 1px solid #ecd06a; background: #fff7d9; font-size: var(--t-petit); }
.avertissement--erreur { border-color: var(--erreur); background: var(--erreur-pale); color: var(--erreur); font-weight: 600; }
.groupe-options { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--e-2); }
.groupe-options > legend { padding: 0; margin-bottom: var(--e-2); font-weight: 650; }
.options-cartes { display: grid; gap: var(--e-2); }
@media (min-width: 40rem) { .options-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .options-cartes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.options-cartes .option-livraison label { height: 100%; }
.options-ligne { display: grid; gap: var(--e-4); }
@media (min-width: 40rem) { .options-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recap__attente { color: var(--gris); font-size: 0.9375rem; }
.recap__source { display: flex; align-items: flex-start; gap: var(--e-2); margin-top: calc(-1 * var(--e-1)); font-size: var(--t-petit); color: var(--gris); }
.recap__source--attente::before { content: ""; flex: none; width: 0.85rem; height: 0.85rem; margin-top: 0.2rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne 0.9s linear infinite; }
.recap__source--exact { color: var(--succes); }
.recap__source--echec { color: var(--erreur); display: block; }
.recap__source--echec a { color: inherit; font-weight: 650; }
.demande-atelier { display: grid; gap: var(--e-3); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--trait); }
.demande-atelier__titre { margin: 0; font-size: var(--t-base); }
.demande-atelier__etat { margin: 0; font-size: var(--t-petit); }
.demande-atelier__etat--ok { color: var(--succes); font-weight: 650; }
.demande-atelier__etat--erreur { color: var(--erreur); }
.option-prioritaire { margin-top: var(--e-3); }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .recap__source--attente::before { animation: none; border-right-color: currentColor; opacity: 0.5; } }
.commande__recap [data-chiffrage] { display: grid; gap: var(--e-3); }
.commande__recap [data-chiffrage][hidden] { display: none; }
.recap__garantie { display: flex; align-items: flex-start; gap: var(--e-2); font-size: var(--t-petit); }
.recap__garantie .ico { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--succes); stroke-width: 2.6; }
.commande__recap .btn:disabled { opacity: .45; cursor: not-allowed; }
.commande__infos { display: grid; gap: var(--e-7); }
@media (min-width: 56rem) { .commande__infos { grid-template-columns: 1fr 1fr; } }
.commande__infos h2 { font-size: 1.5rem; margin-bottom: var(--e-3); }
.commande__infos .coches { margin: var(--e-4) 0; }
/* Couleurs : par zone (filament du fichier ou objet), un bouton qui ouvre la gamme puis ses couleurs */
.couleurs__aide { margin: 0; }
.zones-couleur { display: grid; gap: var(--e-3); }
.zone-couleur { display: grid; gap: var(--e-1); min-width: 0; }
.zone-couleur__titre { display: flex; align-items: center; gap: var(--e-2); min-width: 0; margin: 0; font-size: var(--t-petit); font-weight: 650; }
.zone-couleur__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-couleur__origine { flex: none; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--teinte); box-shadow: inset 0 0 0 1px rgba(20, 35, 58, 0.3); }
.choix-couleur { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 3.25rem; padding: var(--e-2) var(--e-3); border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc); color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.choix-couleur:hover { border-color: var(--encre); }
.choix-couleur:focus-visible { outline: 3px solid var(--cyan-fonce); outline-offset: 2px; }
.choix-couleur[aria-expanded="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.choix-couleur__texte { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.choix-couleur__texte strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choix-couleur__texte small { color: var(--gris); font-size: var(--t-mini); }
.choix-couleur__changer { flex: none; color: var(--cyan-fonce); font-size: var(--t-petit); font-weight: 650; text-decoration: underline; text-underline-offset: 0.18em; }
.panneau-couleur { display: grid; gap: var(--e-3); padding: var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--papier); }
.panneau-couleur[hidden] { display: none; }
.panneau-couleur .champ { margin: 0; }
.panneau-couleur__nom { min-height: 1.4em; margin: 0; font-size: var(--t-petit); color: var(--gris); }
.nuancier { position: relative; display: grid; grid-template-columns: repeat(auto-fill, 2.5rem); gap: var(--e-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.nuancier input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.teinte { display: block; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--teinte); box-shadow: inset 0 0 0 1px rgba(20, 35, 58, 0.25); cursor: pointer; transition: box-shadow 0.12s; }
.teinte--bouton { flex: none; width: 2rem; height: 2rem; cursor: inherit; }
.nuancier .teinte:hover { box-shadow: inset 0 0 0 1px rgba(20, 35, 58, 0.25), 0 0 0 2px var(--blanc), 0 0 0 3px var(--trait-fort); }
.nuancier input:checked + .teinte { box-shadow: inset 0 0 0 1px rgba(20, 35, 58, 0.25), 0 0 0 3px var(--blanc), 0 0 0 5px var(--encre); }
.nuancier input:focus-visible + .teinte { outline: 3px solid var(--cyan-fonce); outline-offset: 6px; }
.couleurs__compte { margin: 0; font-size: var(--t-petit); color: var(--gris); }
.couleurs__compte--trop { color: var(--erreur); font-weight: 650; }
.commande__recap [data-changements], .commande__recap [data-purge] { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .teinte { transition: none; } }

/* Peinture des couleurs : bloc sur la page, puis fenêtre plein écran */
.peindre { display: grid; gap: var(--e-2); padding: var(--e-3) var(--e-4); border: 1px dashed var(--trait-fort); border-radius: var(--rayon); }
.peindre[hidden] { display: none; }
.peindre__texte { margin: 0; font-size: var(--t-petit); }
.peindre__boutons, .peintre__boutons { display: flex; flex-wrap: wrap; gap: var(--e-2); }
body.peintre-ouvert { overflow: hidden; }
.peintre { position: fixed; inset: 0; z-index: 90; display: flex; background: rgba(20, 35, 58, 0.55); }
.peintre__fenetre { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--blanc); }
@media (min-width: 64rem) { .peintre { padding: var(--e-5); } .peintre__fenetre { border-radius: 14px; overflow: hidden; box-shadow: var(--ombre-forte); } }
.peintre__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-4); border-bottom: 1px solid var(--trait); }
.peintre__tete h2 { margin: 0; font-size: 1.125rem; }
.peintre__fermer { min-height: 2.5rem; padding: 0 var(--e-3); border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc); color: var(--encre); font: inherit; font-size: var(--t-petit); cursor: pointer; }
.peintre__corps { display: grid; grid-template-rows: minmax(16rem, 55vh) 1fr; flex: 1; min-height: 0; }
@media (min-width: 64rem) { .peintre__corps { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 22rem; } }
.peintre__vue { position: relative; min-height: 0; background: #f4f5f7; }
.peintre__vue canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.peintre__vue canvas:focus-visible { outline: 3px solid var(--cyan-fonce); outline-offset: -3px; }
.peintre__statut { position: absolute; left: var(--e-3); right: var(--e-3); bottom: var(--e-2); margin: 0; padding: var(--e-1) var(--e-2); border-radius: var(--rayon); background: rgba(255, 255, 255, 0.88); font-size: var(--t-petit); pointer-events: none; }
.peintre__statut:empty { display: none; }
.peintre__outils { display: grid; align-content: start; gap: var(--e-4); padding: var(--e-4); overflow-y: auto; border-top: 1px solid var(--trait); }
@media (min-width: 64rem) { .peintre__outils { border-top: 0; border-left: 1px solid var(--trait); } }
.peintre__groupe { display: grid; gap: var(--e-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.peintre__groupe > legend { padding: 0; margin-bottom: var(--e-2); font-weight: 650; }
.peintre__groupe .aide { margin: 0; }
.peintre__groupe .champ { margin: 0; }
.peintre__groupe input[type="range"] { width: 100%; }
.peintre [hidden] { display: none !important; }
.peintre__tete-boutons { display: flex; gap: var(--e-2); }
.peintre__bouton-aide { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.5rem; padding: 0 var(--e-3); border: 1px solid var(--cyan-fonce); border-radius: var(--rayon); background: var(--blanc); color: var(--cyan-fonce); font: inherit; font-size: var(--t-petit); font-weight: 650; cursor: pointer; }
.peintre__rond { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--cyan-fonce); color: var(--blanc); font-size: 0.8125rem; font-weight: 800; }
.peintre__bouton-aide:hover { background: #eaf4fb; }
.peintre__curseur { position: absolute; top: 0; left: 0; border: 2px solid rgba(23, 32, 51, 0.85); border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.85); pointer-events: none; }
.peintre__curseur--sphere { background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.35), rgba(23, 32, 51, 0.12)); }
.peintre__curseur--gomme { border-style: dashed; border-color: var(--erreur); }
.peintre__vue canvas.peintre__canvas--tourner { cursor: grab; }
.peintre__astuce { position: absolute; top: var(--e-2); left: var(--e-3); right: var(--e-3); margin: 0; padding: var(--e-1) var(--e-2); border-radius: var(--rayon); background: rgba(255, 255, 255, 0.85); color: var(--gris); font-size: var(--t-mini); pointer-events: none; justify-self: start; width: fit-content; max-width: calc(100% - 1.5rem); }
@media (hover: none) { .peintre__astuce { display: none; } }
.peintre__groupe h3 { margin: 0; font-size: 1rem; font-weight: 650; }
.peintre__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.peintre__petits { display: flex; gap: var(--e-1); }
.peintre__icone { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc); color: var(--encre); font: inherit; font-size: 1.25rem; font-weight: 700; line-height: 1; cursor: pointer; }
.peintre__icone:disabled { opacity: 0.4; cursor: not-allowed; }
.peintre__filaments { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.peintre__filament { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--rayon); background: var(--teinte); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(20, 35, 58, 0.3); cursor: pointer; }
.peintre__filament--clair { color: var(--encre); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); }
.peintre__filament[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(20, 35, 58, 0.3), 0 0 0 2px var(--blanc), 0 0 0 4px #00ae42; }
.peintre__choisi { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-3); font-size: var(--t-petit); }
.peintre__choisi > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.peintre__lien { min-height: 2rem; padding: 0; border: 0; background: none; color: var(--cyan-fonce); font: inherit; font-size: var(--t-petit); font-weight: 650; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; justify-self: start; }
.peintre__mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--trait-fort); border-radius: var(--rayon); overflow: hidden; }
.peintre__mode button { min-height: 2.5rem; padding: var(--e-1); border: 0; border-left: 1px solid var(--trait-fort); background: var(--blanc); color: var(--encre); font: inherit; font-size: var(--t-mini); font-weight: 650; cursor: pointer; }
.peintre__mode button:first-child { border-left: 0; }
.peintre__mode button[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); }
.peintre__types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.peintre__types input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.peintre__types label { display: grid; justify-items: center; align-content: center; gap: 0.125rem; min-height: 3.5rem; padding: var(--e-1); border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--blanc); font-size: var(--t-mini); font-weight: 650; line-height: 1.15; text-align: center; cursor: pointer; }
.peintre__types label:hover { border-color: var(--encre); }
.peintre__types input:checked + label { border-color: #00ae42; background: #dcfce8; box-shadow: inset 0 0 0 1px #00ae42; }
.peintre__types input:focus-visible + label { outline: 3px solid var(--cyan-fonce); outline-offset: 2px; }
.peintre__reglages { display: grid; gap: var(--e-2); }
.peintre__cases, .peintre__radios { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); font-size: var(--t-petit); }
.peintre__cases label, .peintre__radios label { display: inline-flex; align-items: center; gap: var(--e-1); min-height: 2rem; cursor: pointer; }
.peintre__ligne { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-2); }
.peintre__ligne .champ { flex: 1 1 8rem; }
.peintre__ligne input[type="number"] { width: 100%; }
.peintre__filament:focus-visible, .peintre__icone:focus-visible, .peintre__lien:focus-visible, .peintre__mode button:focus-visible, .peintre__fermer:focus-visible, .peintre__bouton-aide:focus-visible { outline: 3px solid var(--cyan-fonce); outline-offset: 2px; }
/* Aide dans l’outil : par-dessus la vue et les outils */
.peintre__fenetre { position: relative; }
.peintre__aide { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: var(--blanc); }
.peintre__aide-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-2) var(--e-4); border-bottom: 1px solid var(--trait); }
.peintre__aide-tete h2 { margin: 0; font-size: 1.125rem; }
.peintre__aide-corps { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e-4) var(--e-4) var(--e-6); }

/* Mode d’emploi de la peinture (fenêtre de la page et aide de l’outil) */
.aide-peinture { display: grid; gap: var(--e-4); max-width: 46rem; font-size: var(--t-petit); line-height: 1.5; }
.aide-peinture h3 { margin: var(--e-2) 0 0; font-size: 1rem; }
.aide-peinture p, .aide-peinture ol, .aide-peinture ul { margin: 0; }
.aide-peinture ol, .aide-peinture ul { display: grid; gap: var(--e-2); padding-left: 1.25rem; }
.aide-peinture__outils { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.aide-peinture__outils li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--e-2) var(--e-3); align-items: start; padding: var(--e-2) var(--e-3); border: 1px solid var(--trait); border-radius: var(--rayon); }
.aide-peinture__outils svg { width: 1.75rem; height: 1.75rem; color: var(--encre); }
.aide-peinture table { width: 100%; border-collapse: collapse; }
.aide-peinture th, .aide-peinture td { padding: var(--e-2) var(--e-2) var(--e-2) 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.aide-peinture th { width: 42%; font-weight: 600; white-space: nowrap; }
@media (max-width: 30rem) { .aide-peinture th { white-space: normal; } }
.aide-peinture kbd { display: inline-block; min-width: 1.5em; padding: 0.05em 0.4em; border: 1px solid var(--trait-fort); border-bottom-width: 2px; border-radius: 4px; background: var(--papier); font: inherit; font-size: 0.8125rem; font-weight: 650; text-align: center; }
.aide-dialogue { width: min(48rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 14px; box-shadow: var(--ombre-forte); color: var(--encre); }
.aide-dialogue::backdrop { background: rgba(20, 35, 58, 0.55); }
.aide-dialogue__tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--trait); background: var(--blanc); }
.aide-dialogue__tete h2 { margin: 0; font-size: 1.125rem; }
.aide-dialogue__corps { padding: var(--e-4) var(--e-4) var(--e-5); }

/* Happy hour : bandeau du site et remise dans le récapitulatif */
.happy { background: var(--jaune); color: var(--encre); }
.happy[hidden] { display: none; }
.happy__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-1) var(--e-4); padding-top: var(--e-2); padding-bottom: var(--e-2); text-align: center; }
.happy__texte { margin: 0; font-size: var(--t-petit); }
.happy__lien { color: var(--encre); font-size: var(--t-petit); font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; white-space: nowrap; }
.recap__happy { margin: calc(-1 * var(--e-2)) 0 var(--e-2); padding: var(--e-1) var(--e-2); border-radius: var(--rayon); background: #fff4c2; font-size: var(--t-petit); font-weight: 650; }
.recap__happy[hidden] { display: none; }
.recap__happy s { color: var(--gris); font-weight: 400; }
.recap__ligne-happy dd { color: var(--succes); font-weight: 700; }

/* Prix de chaque option sur sa carte */
.option-prix { align-self: center; font-weight: 700; color: var(--encre); }
.option-prix:empty { display: none; }
/* Barre de prix en bas de l'écran (téléphone et tablette) */
.barre-prix {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  background: var(--nuit); color: #dfe5ee; box-shadow: 0 -6px 20px -8px rgba(20, 35, 58, 0.35);
}
.barre-prix[hidden] { display: none; }
.barre-prix__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); margin: 0; font-size: var(--t-petit); }
.barre-prix__prix span:first-child { flex-basis: 100%; }
.barre-prix__prix strong { color: #ffffff; font-size: 1.375rem; font-weight: 760; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .barre-prix__prix strong.maj { animation: prix-maj 0.6s ease-out; }
  @keyframes prix-maj { from { background: rgba(255, 255, 255, 0.28); } to { background: transparent; } }
}
@media (max-width: 63.99rem) { body.avec-barre-prix { padding-bottom: 5.5rem; } }
@media (min-width: 64rem) { .barre-prix { display: none !important; } }
.option-livraison .nombres { white-space: nowrap; }
.confirmation__titre { font-size: 1.5rem; margin-bottom: var(--e-5); }