/* ==========================================================================
   imprimerie.ma — styles de pages
   Sections de contenu réutilisées par plusieurs pages (en-têtes de section,
   héros, étapes, engagements, références, chiffres). Les styles propres à
   une seule page sont regroupés plus bas, par page, au fil de la phase 2.
   ========================================================================== */

/* ------------------------------------------------- En-tête de section */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap;
  margin-bottom: var(--s-10);
}
.section-head > div { display: flex; flex-direction: column; gap: var(--s-2); }
.section-head p { color: var(--ink-3); font-size: var(--t-h5-size); letter-spacing: var(--t-h5-ls); max-width: 56ch; }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center p { margin-inline: auto; }
.section-head .more { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-body-size); font-weight: var(--w-medium); white-space: nowrap; }
.section-head .more svg { width: 1rem; height: 1rem; }
@media (max-width: 47.9375rem) { .section-head { margin-bottom: var(--s-6); } .section-head p { font-size: var(--t-body-size); } }

/* ------------------------------------------------------------------ Héros */
.hero {
  background: var(--bg-2);
  padding-block: var(--s-24) var(--s-20);
}
.hero__inner { display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: center; }
.hero__copy { flex: 1 1 32rem; min-width: 0; display: flex; flex-direction: column; gap: var(--s-6); }
.hero__copy h1 { font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); max-width: 14ch; }
.hero__copy .t-lead { max-width: 34rem; }
.hero__acts { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); }
.hero__proofs { display: flex; gap: var(--s-6); flex-wrap: wrap; font-size: var(--t-caption-size); color: var(--ink-3); margin-top: var(--s-2); }
.hero__proofs span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__proofs svg { width: 1rem; height: 1rem; color: var(--accent); }
.hero__aside { flex: 0 1 25rem; min-width: min(100%, 18rem); }
@media (max-width: 63.9375rem) { .hero { padding-block: var(--s-12) var(--s-10); } }
@media (max-width: 47.9375rem) { .hero { padding-block: var(--s-8) var(--s-8); } .hero__inner { gap: var(--s-8); } }

/* Carte matérielle (devis express, encarts flottants) */
.material {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--s-7, 1.75rem);
  box-shadow: var(--shadow-material);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.material__title { font-size: var(--t-h4-size); letter-spacing: var(--t-h4-ls); font-weight: var(--w-bold); }
.material__sub { font-size: var(--t-caption-size); color: var(--ink-3); }
.material__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--s-1); }
.material__total strong { font-size: var(--t-h3-size); letter-spacing: var(--t-h3-ls); font-variant-numeric: tabular-nums; }
.material__foot { font-size: var(--t-tag-size); letter-spacing: 0; text-transform: none; color: var(--ink-3); text-align: center; }

/* --------------------------------------------------------------- Étapes */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: etape; }
.step { background: var(--bg-2); border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.step__n { width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--w-bold); font-size: var(--t-small-size); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--t-h5-size); letter-spacing: var(--t-h5-ls); }
.step p { font-size: var(--t-small-size); color: var(--ink-3); }
@media (max-width: 63.9375rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 35.9375rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- Engagements */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
.feature { display: flex; gap: var(--s-3); align-items: flex-start; }
.feature svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--accent); margin-top: 0.1rem; }
.feature strong { display: block; font-size: var(--t-small-size); font-weight: var(--w-semibold); }
.feature span { display: block; font-size: var(--t-caption-size); color: var(--ink-3); }
@media (max-width: 63.9375rem) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 35.9375rem) { .features { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }

/* -------------------------------------------------------------- Chiffres */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.stat { padding: var(--s-6) 0; border-top: 1px solid var(--line-2); }
.stat strong { display: block; font-size: var(--t-h2-size); letter-spacing: var(--t-h2-ls); line-height: 1.1; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: var(--s-2); font-size: var(--t-caption-size); color: var(--ink-3); }
@media (max-width: 47.9375rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ----------------------------------------------------------- Références */
.refs { overflow: hidden; }
.refs__viewport { display: flex; overflow: hidden; margin-top: var(--s-8); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.refs__track { display: flex; gap: var(--s-12); flex: none; padding-right: var(--s-12); align-items: center; animation: refs 60s linear infinite; }
.refs__track img { height: 2.5rem; width: auto; opacity: 0.7; filter: grayscale(1); transition: opacity var(--dur-hover) var(--ease-hover), filter var(--dur-hover) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .refs__track img:hover { opacity: 1; filter: none; } }
@keyframes refs { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .refs__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .refs__track[aria-hidden] { display: none; }
  .refs__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ======================================================================
   Kit de composants (kit.html — page de travail)
   ====================================================================== */
.kit > .container > .t-lead { margin-top: var(--s-3); margin-bottom: var(--s-12); }
.kit h2 { margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid var(--line-2); }
.kit h2:first-of-type { margin-top: 0; border: 0; padding-top: 0; }
.kit__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }
.kit__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.kit__swatch { border-radius: var(--r-sm); border: 1px solid var(--line-2); overflow: hidden; font-size: var(--t-micro-size); }
.kit__swatch i { display: block; height: 3.5rem; }
.kit__swatch span { display: block; padding: var(--s-2) var(--s-3); }
.kit__type > * + * { margin-top: var(--s-4); }
.kit__type small { display: block; color: var(--ink-4); font-family: var(--font-mono); font-size: 0.75rem; margin-bottom: 0.25rem; }

/* ======================================================================
   Briques partagées ajoutées avec l'accueil
   ====================================================================== */
.section-head--row { align-items: flex-end; }
.section-head .more, .more {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-body-size); font-weight: var(--w-medium); color: var(--accent); white-space: nowrap;
}
.more svg { width: 1rem; height: 1rem; transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .more:hover svg { transform: translateX(2px); } }

/* Bouton secondaire sur fond marine (bandeau d'appel) */
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.btn--on-dark:active { background: rgba(255, 255, 255, 0.12); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn--on-dark:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } }

/* Bouton rond cerclé (navigation de rail) */
.ibtn--ring { border: 1px solid var(--line-3); background: var(--bg); }
.ibtn--ring[disabled] { opacity: 0.35; pointer-events: none; }
.rail-nav { display: flex; gap: var(--s-2); }
@media (pointer: coarse) { .rail-nav { display: none; } }

/* Engagements : titre + texte (h3/p) */
.feature h3 { font-size: var(--t-small-size); font-weight: var(--w-semibold); letter-spacing: -0.005em; line-height: 1.3; }
.feature p { margin-top: var(--s-1); font-size: var(--t-caption-size); color: var(--ink-3); line-height: 1.45; }

/* Étapes en liste ordonnée */
ol.steps { list-style: none; padding: 0; margin: 0; }
.steps__more { margin-top: var(--s-8); text-align: center; }

/* ======================================================================
   Accueil
   ====================================================================== */
.hero__copy .t-kicker { font-size: var(--t-kicker-size); line-height: 1.3; letter-spacing: var(--t-kicker-ls); color: var(--ink-3); font-weight: var(--w-semibold); }
.hero__title {
  font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls);
  font-weight: var(--w-bold); color: var(--ink); text-wrap: balance; max-width: 15ch;
}
/* La 2e ligne du titre (balise <em> du back-office) en accent, sans italique. */
.hero__title em, .offer__title em { font-style: normal; color: var(--accent); }
.hero__title br, .offer__title br { display: block; }

/* Devis express */
.quickquote { padding: 1.75rem; gap: var(--s-4); }
.quickquote__price {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) 0 var(--s-1); border-top: 1px solid var(--line-2);
}
.quickquote__price .quickbar__from { font-size: var(--t-caption-size); color: var(--ink-3); margin-right: auto; }
.quickquote__price s { color: var(--ink-4); font-size: var(--t-small-size); }
.quickquote__price strong { font-size: var(--t-h3-size); letter-spacing: var(--t-h3-ls); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }

/* Offres du moment : rail à accrochage */
.offers__rail { padding-bottom: var(--s-2); }
.offer {
  flex: 0 0 min(40rem, 86%);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--s-6);
  min-height: 19rem; padding: var(--s-8);
  background: var(--bg-2); border-radius: var(--r-xl);
  overflow: hidden;
}
.offer--c { background: var(--accent-soft); }
.offer__copy { display: flex; flex-direction: column; gap: var(--s-3); }
.offer__title { font-size: var(--t-h3-size); line-height: 1.15; letter-spacing: var(--t-h3-ls); font-weight: var(--w-bold); }
.offer__text { font-size: var(--t-small-size); color: var(--ink-2); max-width: 36ch; }
.offer__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.offer__acts .btn--link svg { width: 0.875rem; height: 0.875rem; }
.offer__art svg, .offer__art img { width: 100%; height: auto; }
@media (max-width: 47.9375rem) {
  .offer { grid-template-columns: minmax(0, 1fr); padding: var(--s-6); gap: var(--s-4); min-height: 0; }
  .offer__art { order: -1; max-width: 16rem; }
}

/* Familles : tuiles */
.tile { gap: var(--s-4); padding: var(--s-5); min-height: 0; }
.tile__media { aspect-ratio: 4 / 3; margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) 0; border-radius: var(--r-md); overflow: hidden; }
.tile__media svg, .tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__title { font-size: var(--t-h5-size); line-height: var(--t-h5-lh); letter-spacing: var(--t-h5-ls); font-weight: var(--w-semibold); }
.tile__sub { font-size: var(--t-caption-size); color: var(--ink-3); margin-top: var(--s-1); }
@media (max-width: 35.9375rem) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .tile { padding: var(--s-3); border-radius: var(--r-md); }
  .tile__media { margin: 0; border-radius: var(--r-sm); }
  .tile__title { font-size: var(--t-small-size); }
}

/* Produits : cartes */
.products .card__media { background: var(--bg-2); }
.card__flag { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1; }
.pmedia { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 35.9375rem) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .products .card__body { padding: var(--s-3); }
  .products .card__desc { display: none; }
  .products .card__foot { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .products .card__foot .btn { width: 100%; }
}

/* Chiffres sur l'accueil */
.stats strong { color: var(--accent); }
.hero__copy h1.t-kicker { max-width: none; font-size: var(--t-kicker-size); line-height: 1.3; letter-spacing: var(--t-kicker-ls); }
.section-head > .rail-nav { flex-direction: row; align-self: flex-end; }
/* Tuiles : le titre reste à la même hauteur, avec ou sans sous-titre */
.tile { justify-content: flex-start; }
.tile > div:last-child { min-height: 3.1rem; }
/* Cartes sur fond gris : visuel sur blanc pour détacher la carte */
.section--alt .card__media { background: var(--bg); }
.section--alt .card { border-color: transparent; }
/* Références : logos visibles, en gris, nets */
.refs__track { list-style: none; margin: 0; }
.refs__track li { flex: none; }
.refs__track img { height: 3rem; width: auto; max-width: 9rem; object-fit: contain; }

/* ======================================================================
   Touche orange (retour de Said, 19/10) — l'orange se mérite
   ====================================================================== */
/* Héros : la 2e ligne du titre (le <em> saisi au back-office) en orange. */
.hero__title em { color: var(--pop-display); }
.hero__proofs svg { color: var(--pop-display); }
/* Offres : kicker orange, titre en orange sur la 2e ligne (le prix) */
.offer .t-kicker { color: var(--pop-ink); }
.offer__title em { color: var(--pop-display); }
.offer--b { background: var(--pop-soft); }
/* Étapes : pastilles numérotées orange */
.step__n { background: var(--pop); color: var(--accent-strong); }
/* Familles : le ruban (« Prix dégressifs », « Sans minimum »…) en orange */
.tile__sub { color: var(--pop-ink); font-weight: var(--w-medium); }
/* Engagements : icônes orange */
.feature svg { color: var(--pop-display); }
/* Prix dans les cartes produit : le montant reste marine, « à partir de » neutre */
/* Chiffres : filet orange au-dessus de chaque valeur */
.stat { border-top: 2px solid var(--pop); }
/* Photos réelles : remplissent le cadre, coins du cadre conservés */
.card__media picture, .tile__media picture { display: block; width: 100%; height: 100%; }
.card__media picture img, .tile__media picture img, .tile__media img.pmedia { width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   PAGES INTERNES — composants de l’ancien site (configurateur, prix, panier,
   tunnel de commande, espace client, dépôt, BAT, avis, guides, gabarits…)
   repris sur les jetons du kit. Mêmes classes que celles émises par
   app.js et shop.js : aucun changement de JavaScript.
   ========================================================================== */

.section--dark {
  background: var(--accent);
  color: var(--accent-soft);
}

.section--dark h2,
.section--dark h3 {
  color: var(--bg);
}

.flex {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.field-label .hint {
  font-weight: var(--w-medium);
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

.feature__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: var(--s-3);
}

.feature__icon svg {
  width: 22px;
  height: 22px;
}

.stat__num {
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--s-1);
}

.stat__label {
  font-size: var(--t-caption-size);
  color: var(--ink-3);
}

.section--dark .stat__label {
  color: var(--accent-soft);
}

.step__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: var(--t-body-size);
  margin-bottom: var(--s-3);
}

.pagehead__grid {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

.pagehead--photo .pagehead__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
}

.pagehead__media {
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-edge);
}

.pagehead__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.configurator {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: var(--s-8);
  align-items: start;
}

.config-panel {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
}

.config-step {
  border-bottom: 1px solid var(--line-2);
  padding: var(--s-5) var(--s-6);
}

.config-step:last-child {
  border-bottom: 0;
}

.config-step__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.config-step__n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: var(--t-tag-size);
  font-weight: var(--w-bold);
}

.config-step__head h3 {
  margin: 0;
  font-size: var(--t-body-size);
}

.config-step__head .hint {
  font-size: var(--t-micro-size);
  color: var(--ink-3);
  margin-left: auto;
  font-weight: var(--w-medium);
}

.pricebox {
  position: sticky;
  top: calc(var(--header-h) + 14px);
  background: var(--bg);
  border: 1.5px solid var(--line-3);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card-hover);
  overflow: hidden;
}

.pricebox__head {
  background: var(--accent);
  color: var(--accent-soft);
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pricebox__head h3 {
  color: var(--bg);
  margin: 0;
  font-size: var(--t-small-size);
}

.pricebox__status {
  font-size: var(--t-tag-size);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.pricebox__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bg-4);
  box-shadow: 0 0 0 0 rgba(76,195,138,.7);
  animation: pulse 2s infinite;
}

.pricebox__status[data-state="live"]::before {
  background: var(--success);
}

.pricebox__status[data-state="local"]::before {
  background: var(--pop);
  animation: none;
}

.pricebox__status[data-state="loading"]::before {
  background: var(--line-3);
}

.pricebox__body {
  padding: var(--s-5);
}

.pricebox__amount {
  font-family: var(--font);
  font-weight: var(--w-bold);
  font-size: var(--t-h3-size);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.03em;
}

.pricebox__amount .cur {
  font-size: var(--t-body-size);
  color: var(--ink-2);
  font-weight: var(--w-bold);
  margin-left: var(--s-1);
}

.pricebox__ht {
  font-size: var(--t-micro-size);
  color: var(--ink-3);
  margin: var(--s-1) 0 var(--s-4);
}

.pricebox__unit {
  font-size: var(--t-micro-size);
  color: var(--accent-strong);
  font-weight: 650;
}

.pricelines {
  list-style: none;
  margin: var(--s-4) 0;
  padding: var(--s-4) 0 0;
  border-top: 1px dashed var(--line-3);
  font-size: var(--t-caption-size);
}

.pricelines li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  color: var(--ink-2);
}

.pricelines li span:last-child {
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
}

.pricelines li.is-total {
  border-top: 1px solid var(--line-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  color: var(--accent);
  font-weight: var(--w-bold);
}

.pricebox__foot {
  padding: 0 var(--s-5) var(--s-5);
}

.pricebox__meta {
  font-size: var(--t-tag-size);
  color: var(--ink-3);
  text-align: center;
  margin: var(--s-3) 0 0;
}

.pricebox__meta code {
  background: var(--bg-2);
  padding: var(--s-1) var(--s-1);
  border-radius: var(--r-xs);
  font-size: .95em;
}

.qty-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-caption-size);
}

.qty-table th,
.qty-table td {
  padding: var(--s-2) var(--s-2);
  text-align: left;
  border-bottom: 1px solid var(--line-2);
}

.qty-table th {
  font-size: var(--t-tag-size);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}

.qty-table tbody tr {
  cursor: pointer;
  transition: background .12s var(--ease-out);
}

.qty-table tbody tr:hover {
  background: var(--accent-soft);
}

.qty-table tbody tr.is-active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.qty-table td:last-child,
.qty-table th:last-child {
  text-align: right;
  font-weight: var(--w-bold);
  color: var(--accent);
}

.note--gold {
  border-color: var(--pop);
  background: var(--pop-soft);
  color: var(--pop-ink);
}

.filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.filterbar .flex {
  gap: var(--s-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.pricebox__old {
  font-size: var(--t-caption-size);
  margin-bottom: var(--s-1);
}

.pricebox__old s {
  color: var(--ink-3);
  margin-right: var(--s-2);
}

.pricebox__save {
  color: var(--pop-ink);
  font-weight: var(--w-bold);
}

.pricelines li.is-discount span:last-child {
  color: var(--pop-ink);
}

.qty-table td.is-old {
  color: var(--ink-3);
  font-weight: var(--w-medium);
}

.qty-table th:nth-child(2),
.qty-table td:nth-child(2),
.qty-table th:nth-child(3),
.qty-table td:nth-child(3) {
  text-align: right;
}

.modal.is-on {
  opacity: 1;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.modal.is-on .modal__box {
  transform: none;
}

.modal__body {
  padding: var(--s-8);
}

.modal__body h2 {
  margin-bottom: .6em;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: var(--t-lead-size);
  line-height: 1;
  cursor: pointer;
}

.modal__close:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.quotesum {
  background: var(--bg-2);
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-4);
  margin-bottom: var(--s-5);
}

.quotesum b {
  display: block;
  font-family: var(--font);
  color: var(--accent);
  font-size: var(--t-body-size);
}

.quotesum span {
  display: block;
  font-size: var(--t-micro-size);
  color: var(--ink-2);
  margin-top: var(--s-1);
}

.quotesum__price {
  margin-top: var(--s-2);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.quotesum__price s {
  color: var(--ink-3);
  font-size: var(--t-caption-size);
}

.quotesum__price strong {
  font-family: var(--font);
  font-size: var(--t-h4-size);
  color: var(--accent);
}

.quotesum__price em {
  font-style: normal;
  font-size: var(--t-tag-size);
  color: var(--ink-2);
}

.quotedone {
  text-align: center;
  padding: var(--s-3) 0;
}

.quotedone__check {
  width: 58px;
  height: 58px;
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: var(--t-h3-size);
  font-weight: var(--w-bold);
}

.quotedone__price {
  font-family: var(--font);
  font-size: var(--t-h4-size);
  font-weight: var(--w-bold);
  color: var(--accent-strong);
  margin: var(--s-1) 0 var(--s-3);
}

.cartgrid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--s-6);
  align-items: start;
}

.cartlist {
  display: grid;
  gap: var(--s-3);
}

.cartline {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}

.cartline__img {
  background: var(--bg-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}

.cartline__img svg {
  width: 100%;
  height: 100%;
}

.cartline__main h3 {
  margin: 0 0 var(--s-1);
  font-size: var(--t-body-size);
}

.cartline__cfg {
  margin: 0;
  font-size: var(--t-micro-size);
  color: var(--ink-2);
}

.cartline__qty {
  margin: var(--s-1) 0 0;
  font-size: var(--t-micro-size);
  font-weight: 650;
  color: var(--ink);
}

.cartline__acts {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.cartline__acts a,
.cartline__acts button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--t-micro-size);
  font-weight: 650;
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cartline__acts button {
  color: var(--ink-2);
}

.cartline__price {
  text-align: right;
  display: grid;
  gap: var(--s-1);
  min-width: 120px;
}

.cartline__price s {
  color: var(--ink-3);
  font-size: var(--t-micro-size);
}

.cartline__price strong {
  font-family: var(--font);
  font-size: var(--t-h5-size);
  color: var(--accent);
}

.cartline__price em {
  font-style: normal;
  font-size: var(--t-tag-size);
  color: var(--ink-2);
}

.cartsum {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-5);
  position: sticky;
  top: 16px;
}

.cartsum h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-body-size);
}

.cartsum__items {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0 0 var(--s-3);
  border-bottom: 1px dashed var(--line-2);
  display: grid;
  gap: var(--s-2);
}

.cartsum__items li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-caption-size);
}

.cartsum__items em {
  display: block;
  font-style: normal;
  font-size: var(--t-tag-size);
  color: var(--ink-2);
}

.cartsum__lines {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.cartsum__lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-caption-size);
  color: var(--ink);
}

.cartsum__lines .is-discount {
  color: var(--pop-ink);
  font-weight: 650;
}

.cartsum__lines .is-small {
  font-size: var(--t-tag-size);
  color: var(--ink-2);
}

.cartsum__lines .is-total {
  border-top: 1px solid var(--line-2);
  margin-top: var(--s-1);
  padding-top: var(--s-3);
  font-family: var(--font);
  font-size: var(--t-h5-size);
  color: var(--accent);
  font-weight: var(--w-bold);
}

.cartsum__note {
  font-size: var(--t-tag-size);
  color: var(--ink-2);
  margin: var(--s-3) 0 0;
}

.checkout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--s-6);
  align-items: start;
}

.checkout__main {
  display: grid;
  gap: var(--s-4);
}

.cbox__n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: var(--t-small-size);
  font-weight: var(--w-bold);
}

.idcard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  background: var(--bg-2);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-small-size);
}

.idcard--col {
  display: grid;
  gap: var(--s-1);
  text-align: left;
  margin-bottom: var(--s-3);
}

.idcard--col span {
  font-size: var(--t-micro-size);
}

.checkout .tabs {
  gap: var(--s-1);
  margin-bottom: var(--s-5);
}

.checkout .tabs button {
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font: inherit;
  font-size: var(--t-caption-size);
  font-weight: 650;
  color: var(--ink-2);
  cursor: pointer;
  margin-bottom: calc(-1 * var(--s-1));
  white-space: nowrap;
}

.checkout .tabs button.is-on {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.paychoice {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}

.paydetail p {
  margin: var(--s-1) 0 var(--s-4);
  font-size: var(--t-caption-size);
}

.paynote {
  margin: var(--s-2) 0 0;
  font-size: var(--t-micro-size);
}

.link {
  color: var(--accent-strong);
  font-weight: 650;
  font-size: var(--t-caption-size);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quotedone--page {
  max-width: 620px;
  margin: 0 auto;
}

.quotedone--page h1 {
  margin: 0 0 var(--s-2);
}

.quotedone__acts {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-5);
  flex-wrap: wrap;
}

.authgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
}

.authbox {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-6) 28px;
  max-width: 560px;
}

.authbox--alt {
  background: var(--bg-2);
}

.authbox h1,
.authbox h2 {
  margin: 0 0 var(--s-4);
  font-size: var(--t-h5-size);
}

.acct {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-6);
  align-items: start;
}

.acct--rev {
  grid-template-columns: 1fr 340px;
}

.acct__side {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-4);
  position: sticky;
  top: 16px;
}

.acct__main {
  min-width: 0;
}

.acct__main h1 {
  margin: 0 0 var(--s-4);
}

.acct .cartsum {
  position: static;
}

.otable {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
}

.otable th,
.otable td {
  padding: var(--s-3) var(--s-3);
  text-align: left;
  font-size: var(--t-caption-size);
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}

.otable th {
  background: var(--bg-2);
  font-size: var(--t-tag-size);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
}

.otable tr:last-child td {
  border-bottom: 0;
}

.otable .ta-r {
  text-align: right;
}

.otable__prod {
  color: var(--ink-2);
  max-width: 300px;
}

.filelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.filelist li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-caption-size);
}

.filelist__n {
  font-weight: 650;
  color: var(--ink);
  flex: 1 1 200px;
}

.upload {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: var(--s-4) 0 var(--s-1);
}

.upload input[type=file] {
  position: absolute;
  left: -9999px;
}

.upload label {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
  border: 1.5px dashed var(--line-3);
  border-radius: var(--r-sm);
  font-size: var(--t-caption-size);
  font-weight: 650;
  color: var(--ink);
}

.upload label:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.upload__state {
  font-size: var(--t-micro-size);
  color: var(--ink-2);
}

.batbox {
  margin-top: var(--s-5);
  background: var(--pop-soft);
  border: 1.5px solid var(--pop);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
}

.batbox h2 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-body-size);
}

.batbox p {
  font-size: var(--t-caption-size);
}

.batbox__acts {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

.timeline {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-4);
}

.timeline h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--t-small-size);
}

.timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.timeline li {
  font-size: var(--t-micro-size);
  color: var(--ink-2);
}

.timeline b {
  color: var(--accent);
  margin-right: var(--s-1);
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.seo-list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-2) var(--s-5);
}

.seo-list li {
  font-size: var(--t-caption-size);
}

.seo-list a {
  font-weight: 650;
  color: var(--accent-strong);
}

.seo-list span {
  display: block;
  font-size: var(--t-micro-size);
  color: var(--ink-2);
}

.dlcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.dlcard:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-edge);
  transform: translateY(-1px);
}

.dlcard__fmt {
  font-weight: var(--w-bold);
  color: var(--accent);
  font-size: var(--t-body-size);
}

.dlcard__mm {
  font-size: var(--t-caption-size);
  color: var(--ink);
}

.dlcard__note {
  font-size: var(--t-tag-size);
  color: var(--ink-2);
}

.dlcard__pdf {
  margin-top: var(--s-2);
  font-size: var(--t-tag-size);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}

.offercard {
  position: relative;
  padding: var(--s-6) var(--s-6) var(--s-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg);
}

.offercard__tag {
  display: inline-block;
  margin-bottom: var(--s-2);
  font-size: var(--t-tag-size);
  font-weight: var(--w-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-2);
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
}

.offercard__tag--paid {
  background: var(--bg-2);
  color: var(--ink);
}

.offercard h2 {
  margin: 0 0 .5em;
}

.cartline__img .pmedia {
  aspect-ratio: 4 / 3;
}

.prodtop {
  display: grid;
  gap: var(--s-8);
  align-items: start;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}

.prodtop__side {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.pinfo {
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: var(--s-4) var(--s-4) var(--s-4);
}

.pinfo__title {
  margin: 0 0 var(--s-3);
  font-size: var(--t-small-size);
}

.pinfo__list {
  margin: 0;
}

.pinfo__list > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line-3);
}

.pinfo__list > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.pinfo__list dt {
  margin: 0;
  font-size: var(--t-tag-size);
  color: var(--ink-2);
}

.pinfo__list dd {
  margin: 0;
  font-size: var(--t-micro-size);
  line-height: 1.45;
}

.pinfo__note {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-3);
  font-size: var(--t-tag-size);
  color: var(--ink-2);
}

.gallery {
  display: block;
}

.gallery__main {
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  background: var(--bg);
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-2);
}

.gallery__main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: var(--s-2);
}

.gallery__thumb {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--line-3);
  border-radius: var(--r-xs);
  background: var(--bg);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery__thumb:hover {
  border-color: var(--bg-4);
}

.gallery__thumb.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.legal h2 {
  margin: var(--s-8) 0 var(--s-3);
  font-size: var(--t-h5-size);
}

.legal p,
.legal li {
  line-height: 1.72;
}

.legal ul {
  margin: 0 0 var(--s-3) var(--s-5);
}

.legal li {
  margin-bottom: var(--s-2);
}

.legal code {
  background: var(--bg-2);
  padding: var(--s-1) var(--s-1);
  border-radius: var(--r-xs);
  font-size: .88em;
}

.legal .t {
  width: 100%;
  margin: var(--s-2) 0 var(--s-5);
}

.config-note {
  margin: var(--s-3) 0 0;
  font-size: var(--t-micro-size);
  color: var(--ink-2);
  line-height: 1.5;
}

.cartsum__min {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
  background: var(--pop-soft);
  border: 1px solid var(--pop);
  color: var(--pop-ink);
  font-size: var(--t-micro-size);
  line-height: 1.5;
}

.cartsum__lines .is-franco span:first-child {
  color: var(--pop-ink);
  font-weight: var(--w-semibold);
}

.designjoint {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
  background: var(--bg-2);
  border: 1px solid var(--line-3);
}

.designjoint img {
  width: 100%;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-3);
  background: var(--bg);
}

.designjoint b {
  display: block;
  font-size: var(--t-micro-size);
}

.designjoint span {
  display: block;
  font-size: var(--t-tag-size);
  color: var(--ink-2);
  margin-bottom: var(--s-1);
}

.designjoint a {
  font-size: var(--t-tag-size);
}

.cartline__design {
  margin: var(--s-1) 0 0;
  font-size: var(--t-micro-size);
  color: var(--pop-ink);
}

.config-mesure {
  margin: calc(-1 * var(--s-1)) 0 var(--s-5);
  padding: var(--s-4) var(--s-4);
  background: var(--bg-2);
  border-radius: var(--r-sm);
}

.config-mesure__champs {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.config-mesure__champs label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-caption-size);
  font-weight: 650;
  color: var(--ink);
}

.config-mesure__champs input {
  width: 110px;
  padding: var(--s-2) var(--s-3);
  font: inherit;
  border: 1.5px solid var(--line-3);
  border-radius: var(--r-xs);
  background: var(--bg);
}

.config-mesure__champs input:focus {
  outline: none;
  border-color: var(--accent);
}

.config-mesure__champs span {
  color: var(--ink-3);
  font-weight: var(--w-medium);
}

.config-mesure__note {
  margin: var(--s-3) 0 0;
  font-size: var(--t-micro-size);
  color: var(--ink-2);
  line-height: 1.5;
}

.config-mesure__note.is-ok {
  color: var(--ink);
}

.config-mesure__note.is-devis {
  color: var(--danger);
}

.pricebox [data-action="cart"][disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.ribbox {
  margin: var(--s-2) 0;
  padding: var(--s-3) var(--s-3);
  background: var(--line-2);
  border: 1px solid var(--line-3);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--t-caption-size);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}

.qty-table tr[data-qty] {
  cursor: pointer;
}

.qty-table tr[data-qty]:focus-visible {
  outline-offset: -3px;
}

.qtylibre {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.qtylibre__pas {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--line-3);
  border-radius: var(--r-xs);
  background: var(--bg);
  color: var(--accent);
  font-size: var(--t-h5-size);
  line-height: 1;
  cursor: pointer;
  transition: background .12s var(--ease-out), border-color .12s var(--ease-out);
}

.qtylibre__pas:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.qtylibre__champ {
  width: 116px;
  height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-3);
  border-radius: var(--r-xs);
  font: inherit;
  font-size: var(--t-body-size);
  font-weight: var(--w-bold);
  color: var(--accent);
  text-align: center;
  background: var(--bg);
}

.qtylibre__champ:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.qtylibre__unite {
  color: var(--ink-3);
  font-size: var(--t-caption-size);
}

.qtylibre__note {
  margin: var(--s-2) 0 0;
  font-size: var(--t-caption-size);
  color: var(--ink-3);
}

.lienlike {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: var(--w-bold);
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.lienlike:hover {
  text-decoration: none;
}

.lienlike:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.catdoc__poids {
  font-size: var(--t-tag-size);
  color: var(--ink-3);
  font-weight: var(--w-medium);
}

.guide__meta {
  font-size: var(--t-micro-size);
  color: var(--ink-2);
  margin: 0 0 var(--s-2);
}

.guide__chapo {
  font-size: var(--t-body-size);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 720px;
}

.guide__toc {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: var(--t-caption-size);
}

.guide__toc strong {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--t-tag-size);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
}

.guide__toc ol {
  margin: 0;
  padding-left: var(--s-5);
  columns: 2;
  column-gap: 28px;
}

.guide__toc li {
  break-inside: avoid;
  margin: var(--s-1) 0;
}

.guide__corps h2 {
  margin: 36px 0 var(--s-3);
  font-size: var(--t-h4-size);
  scroll-margin-top: 90px;
}

.guide__corps h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--t-body-size);
}

.guide__corps p,
.guide__corps li {
  line-height: 1.7;
}

.guide__corps p {
  margin: 0 0 var(--s-3);
}

.tableau {
  overflow-x: auto;
  margin: var(--s-3) 0 var(--s-4);
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}

.tableau .table {
  min-width: 560px;
  margin: 0;
}

.tableau .table td,
.tableau .table th {
  white-space: nowrap;
}

.tableau .table td:last-child {
  white-space: normal;
  min-width: 220px;
}

.retenir {
  margin: 0;
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-10);
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.retenir li {
  margin: var(--s-1) 0;
}

.guide__rayons {
  margin: var(--s-4) 0 0;
  font-size: var(--t-caption-size);
  color: var(--ink-2);
}

.guide__rayons .chip {
  margin-left: var(--s-1);
}

.guidecard {
  text-align: left;
}

.guidecard .pcard__title {
  font-size: var(--t-h5-size);
  margin-top: var(--s-1);
}

.guidecard .pcard__sub {
  font-size: var(--t-caption-size);
  line-height: 1.55;
}

.depot {
  max-width: 720px;
  margin: var(--s-6) auto 0;
  background: var(--bg);
  border: 1px solid var(--line-3);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
}

.depot h1,
.depot h2 {
  margin-top: 0;
}

.depot__ok {
  color: var(--success);
  font-weight: var(--w-bold);
  font-size: var(--t-micro-size);
}

.depot__bar {
  height: 8px;
  border-radius: 99px;
  background: var(--line-2);
  overflow: hidden;
  margin: var(--s-1) 0 var(--s-2);
}

.depot__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .2s;
}

.upload__state.is-bad {
  color: var(--danger);
}

.pricebox__min {
  margin: .7em 0 0;
  font-size: var(--t-micro-size);
  line-height: 1.5;
  color: var(--ink-2);
}

.pricebox__min.is-warn {
  color: var(--danger);
}

.pricebox__min b {
  font-weight: var(--w-bold);
}

.config-edit {
  margin: 0 0 var(--s-2);
  padding: var(--s-2) var(--s-2);
  font-size: var(--t-caption-size);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.config-edit a {
  text-decoration: underline;
}

.config-mesure__champs label:has([data-pieces]) input {
  width: 5.5em;
}

.avisitem {
  border-top: 1px solid var(--line-2);
  padding: var(--s-4) 0;
}

.avisitem:first-of-type {
  border-top: 0;
}

.avisitem__nom {
  margin: 0 0 var(--s-2);
}

.avisitem__texte {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  margin: var(--s-2) 0;
  resize: vertical;
}

.avisitem__pied {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.avisnote {
  display: inline-flex;
  gap: var(--s-1);
}

.avisnote__etoile {
  font-size: var(--t-h3-size);
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--bg-4);
  padding: var(--s-1);
  transition: color .12s, transform .12s;
}

.avisnote__etoile:hover {
  transform: scale(1.12);
}

.avisnote__etoile.is-on {
  color: var(--pop-display);
}

@media (max-width: 860px) {
  .pagehead--photo .pagehead__grid {
    grid-template-columns: 1fr;
  }
  .pagehead__media img {
    max-height: 190px;
  }
  [data-cat-nav].flex-wrap,
  .chips[data-sub-nav] {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: var(--s-4);
  }
  [data-cat-nav].flex-wrap::-webkit-scrollbar,
  .chips[data-sub-nav]::-webkit-scrollbar {
    display: none;
  }
  [data-cat-nav].flex-wrap > *,
  .chips[data-sub-nav] > * {
    flex: none;
    white-space: nowrap;
  }
}

@media (max-width: 1080px) {
  .configurator {
    grid-template-columns: 1fr;
  }
  .pricebox {
    position: static;
  }
}

@media (max-width: 560px) {
  .modal__body {
    padding: var(--s-6) var(--s-4);
  }
}

@media (max-width: 980px) {
  .cartgrid,
  .checkout,
  .acct,
  .authgrid {
    grid-template-columns: 1fr;
  }
  .acct__side,
  .cartsum {
    position: static;
  }
}

@media (max-width: 620px) {
  .cartline {
    grid-template-columns: 76px 1fr;
  }
  .cartline__price {
    grid-column: 1 / -1;
    text-align: left;
  }
  .otable__prod {
    display: none;
  }
}

@media (max-width: 1180px) {
  .prodtop {
    grid-template-columns: 1fr;
  }
  .prodtop [data-p-gallery] {
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
  }
  .prodtop__side {
    display: contents;
  }
  .prodtop [data-p-gallery] {
    order: 1;
  }
  .configurator {
    order: 2;
  }
  .pinfo {
    order: 3;
  }
}

@media (max-width: 1340px) {
  .prodtop .configurator {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .gallery {
    grid-template-columns: 1fr;
  }
  .gallery__main {
    grid-column: 1;
    grid-row: 1;
  }
  .gallery__thumbs {
    grid-column: 1;
    grid-row: 2;
    grid-auto-flow: column;
    grid-auto-columns: 72px;
    overflow-x: auto;
  }
  .guide__toc ol {
    columns: 1;
  }
  .guide__corps h2 {
    font-size: var(--t-h5-size);
  }
}

@media (max-width: 640px) {
  .depot {
    padding: var(--s-4) var(--s-4);
  }
}

/* --- Fiche produit : configurateur ---------------------------------------- */
.option__box > span { font-weight: var(--w-regular); opacity: 0.72; }
.option:has(input:checked) .option__box > span { opacity: 0.85; }

/* --------------------------------------------------------------------------
   Pages internes — rythme de lecture et blocs génériques
   Le socle du kit remet toutes les marges à zéro ; les pages de contenu
   (légales, villes, l’imprimerie, gabarits, packaging…) écrivent des suites
   de titres, paragraphes et listes sans classe. :where() garde une
   spécificité nulle : tout composant du kit reste prioritaire.
   -------------------------------------------------------------------------- */
main :where(.section, .legal, .guide__corps) :where(p, ul, ol, table, .tableau, dl, blockquote) + :where(p, ul, ol, table, .tableau, dl, blockquote, .btn, .flex) { margin-top: var(--s-3); }
main :where(.section, .legal, .guide__corps) :where(p, ul, ol, table, .tableau, .grid, .flex, div) + :where(h2, h3, h4) { margin-top: var(--s-8); }
main :where(.section, .legal, .guide__corps) :where(h2, h3, h4) + :where(p, ul, ol, table, .tableau, .grid, .flex, dl) { margin-top: var(--s-3); }
main :where(.section, .legal) :where(ul:not([class]), ol:not([class])) { padding-left: var(--s-5); }
main :where(.section, .legal) :where(ul:not([class]) > li + li, ol:not([class]) > li + li) { margin-top: var(--s-1); }
main :where(.section) :where(p a:not([class]), li a:not([class])) { color: var(--accent); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.15em; }

.section-head h1 + .section__sub,
.section__sub { margin-top: var(--s-3); font-size: var(--t-lead-size); line-height: var(--t-lead-lh); color: var(--ink-2); max-width: 60ch; }
.section__title { font-size: var(--t-h2-size); }
.section-head + * { margin-top: var(--s-8); }

/* Tableaux de contenu (cookies, échantillons, délais, guides) */
.table, table.t, main :where(.section, .legal) table:not([class]) { width: 100%; border-collapse: collapse; }
table.t :where(th, td), main :where(.section, .legal) table:not([class]) :where(th, td) { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); font-size: var(--t-small-size); }
table.t th, main :where(.section, .legal) table:not([class]) th { font-size: var(--t-micro-size); color: var(--ink-3); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--t-tag-ls); }

/* Carte « avantage » sans icône (pages internes) : bloc lisible, pas une
   ligne icône + texte comme sur l’accueil. */
.feature:not(:has(> svg)) {
  display: block;
  padding: var(--s-5);
  background: var(--bg-2);
  border-radius: var(--r-md);
}
.grid > .feature:not(:has(> svg)) { height: 100%; }
.feature:not(:has(> svg)) h3 { font-size: var(--t-h5-size); }
.feature:not(:has(> svg)) p { margin-top: var(--s-2); font-size: var(--t-small-size); color: var(--ink-2); }
aside > .feature + .feature { margin-top: var(--s-4); }

/* Chiffres sur fond marine (l’imprimerie) */
.section--dark .stat__num, .section--dark .stat strong { color: var(--bg); }
.section--dark .stat__label, .section--dark .stat span { color: var(--accent-soft); }
.container--narrow .grid-2 h2 { font-size: var(--t-h3-size); }

/* Téléphone : tableaux et rubriques défilent dans leur propre cadre */
@media (max-width: 767px) {
  main table.table, main table.t, main :where(.section, .legal) table:not([class]) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  [data-cat-nav] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  [data-cat-nav]::-webkit-scrollbar { display: none; }
  [data-cat-nav] > * { flex: none; }
}
@media (max-width: 479px) {
  main .btn { max-width: 100%; white-space: normal; text-align: center; }
}

/* --- Tunnel de commande --------------------------------------------------
   shop.js écrit .cbox pour les blocs numérotés du tunnel (coordonnées,
   livraison, paiement) et de l’espace client, alors que le kit réserve ce
   nom aux cases à cocher en ligne. On rend au bloc son rôle de carte. */
.cbox {
  position: static; padding: var(--s-6); padding-left: var(--s-6);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  font-size: var(--t-body-size); color: var(--ink); cursor: auto; line-height: var(--t-body-lh);
}
.cbox input { position: static; width: auto; height: auto; margin: 0; }
.cbox h2 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-h4-size); margin-bottom: var(--s-5); }
.cbox a { text-decoration: none; }
.cbox .field-row + .field-row, .cbox .field + .field, .cbox .field-row + .field { margin-top: var(--s-4); }
.cbox .tabs { margin-bottom: var(--s-5); }
.cbox .paychoice { display: grid; gap: var(--s-2); }
.cbox .paychoice + * { margin-top: var(--s-4); }
.cbox .option--pay { border-radius: var(--r-sm); padding-block: var(--s-3); height: auto; }
.cbox .option--pay .option__box { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: baseline; }
.checkout__main > * + * { margin-top: 0; }
.cbox .checkline { margin-top: var(--s-4); }
.cbox .field-row > .field { margin-top: 0; }
.cbox .option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cbox .checkline input { position: absolute; left: 0; top: 0.05rem; width: 1.25rem; height: 1.25rem; }
.checkout { margin-top: var(--s-6); }
.depot h2, .depot h3 { font-size: var(--t-h4-size); }
.depot .muted + * { margin-top: var(--s-4); }

/* Fenêtre de demande de devis : shop.js/app.js posent .is-on (le kit dit .is-open) */
.modal.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal.is-on .modal__box { transform: none; filter: none; }

/* En-tête marine du résumé de prix : statut lisible */
.pricebox__head .pricebox__status { color: var(--accent-soft); }
.modal__box { position: relative; z-index: 1; }
.modal__close { position: absolute; top: var(--s-3); right: var(--s-3); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--bg-2); color: var(--ink); font-size: var(--t-h5-size); display: grid; place-items: center; }
.modal__body h2 { font-size: var(--t-h3-size); padding-right: var(--s-12); }
.modal__body .field-row + .field-row, .modal__body .field-row + .field, .modal__body .field + .field, .modal__body * + .checkline, .modal__body * + .btn { margin-top: var(--s-4); }
.modal__body .field-row > .field { margin-top: 0; }

/* Fiche produit : la rangée de pastilles (Promo, Best-seller…) est écrite
   par le script. On lui réserve sa hauteur pour que le titre ne saute pas
   au chargement (CLS). */
[data-p-badges] { min-height: 1.625rem; }
.configurator:empty, .configurator:has(> [data-seo-summary]) { min-height: 56rem; }

/* --- Contenu servi par seo.php (fiches, catégories, avis) — repris sur les jetons --- */
.seo-texte {
  max-width: 760px;
  margin: 0 0 var(--s-5);
}

.seo-texte h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--t-body-size);
}

.seo-texte p {
  margin: 0 0 var(--s-3);
  font-size: var(--t-small-size);
  line-height: 1.65;
  color: var(--ink-700, inherit);
}

.seo-texte__titre {
  max-width: 760px;
  margin: 0 0 var(--s-3);
  font-size: var(--t-h5-size);
  color: var(--ink-700, inherit);
}

.seo-summary {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
}

.note--suggestion {
  margin: var(--s-1) 0 0;
  font-size: var(--t-micro-size);
  color: var(--ink-600, var(--ink-2));
}

.catdoc {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
}

.avisbloc .avis {
  border-top: 1px solid var(--line-2);
  padding: var(--s-3) 0 var(--s-1);
}

.avis__tete {
  margin: 0 0 var(--s-1);
  font-size: var(--t-small-size);
}

.avis__etoiles {
  color: var(--pop);
  letter-spacing: 2px;
}

.avis__verifie {
  color: var(--success);
  font-size: var(--t-micro-size);
  font-weight: var(--w-semibold);
}

.avis__texte {
  margin: 0 0 var(--s-2);
}

[data-cat-seo]:empty { display: none; }
[data-cat-seo] { border-top: 1px solid var(--line-2); }

/* Contraste AA (Lighthouse) : le héros est posé sur --bg-2, où --pop-display
   descend sous 3:1 ; la note de newsletter en --ink-4 était sous 4,5:1. */
.hero__title em { color: var(--pop-ink); }
.newsletter__note { color: var(--ink-3); }
.offer .offer__title em { color: var(--pop-ink); }

/* En-tête entre 1280 et 1440 px : si la police de repli est plus large que
   SF Pro (Windows, Linux), la liste ne déborde pas sur le logo. */
.nav__list { justify-content: safe center; }
@media (max-width: 95.9375rem) { .nav__link { padding-inline: 0.25rem; } .header__actions { gap: 0; } }

/* En-tête de catégorie avec photo : app.js écrit une grille texte + figure
   (.pagehead__grid / .pagehead__media), pas le bandeau plein cadre que le
   kit prévoit pour .pagehead--photo. On garde donc la grille, sur fond clair,
   pour que le titre reste lisible. */
.pagehead--photo:has(.pagehead__grid) {
  display: block; min-height: 0; color: var(--ink); background: transparent;
  border-radius: 0; overflow: visible;
}
.pagehead--photo:has(.pagehead__grid) .container { padding-bottom: 0; }
.pagehead--photo .pagehead__media img {
  position: static; opacity: 1; inset: auto;
  width: 100%; height: 100%; max-height: 16.25rem; object-fit: cover; aspect-ratio: 16 / 9;
}
.pagehead__media { border-radius: var(--r-lg); box-shadow: none; background: var(--bg-2); }
.pagehead--photo h1 { color: var(--ink); }
.pagehead--photo p { color: var(--ink-2); }

/* Catalogue (produits.html) : les cartes de catégorie reçoivent leur photo
   par app.js. Même rendu que les tuiles « familles » de l’accueil : photo
   en tête, au format 4:3, puis le nom et le nombre de produits. */
.pcard:has(.pcard__media img) { gap: var(--s-4); padding: var(--s-5); justify-content: flex-start; }
.pcard:has(.pcard__media img) .pcard__media {
  order: -1; width: auto; height: auto; aspect-ratio: 4 / 3;
  margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) 0;
  border-radius: var(--r-md); overflow: hidden;
}
.pcard:has(.pcard__media img) .pcard__media img { display: block; border-radius: 0; }
.pcard:has(.pcard__media img) .pcard__sub { margin-top: calc(-1 * var(--s-3)); }

/* Cartes produit étroites (deux colonnes sur téléphone, partout : catégories,
   catalogue, guides, villes, « même catégorie ») : le prix et le bouton
   « Configurer » ne tiennent plus côte à côte et le prix se brisait mot à
   mot. Requête de conteneur : la règle suit la largeur de la carte, quelle
   que soit la grille qui la contient. */
.card { container-type: inline-size; }
.price__label, .price__qty { white-space: nowrap; }
.price__now { white-space: nowrap; }
@container (max-width: 16rem) {
  .card__body { padding: var(--s-3); }
  .card__title { font-size: var(--t-small-size); }
  .card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-micro-size); }
  .card__foot { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .card__foot .btn { width: 100%; }
  .price__row { flex-wrap: wrap; }
}

/* Offres du moment : photos détourées (fond transparent) posées sur la carte */
.offer__art img { display: block; max-height: 16rem; width: 100%; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(22, 41, 79, 0.18)); }