/* Alignement des pages internes sur la homepage V3. */
:root {
  --noir: #17201c;
  --ardoise: #3f4a44;
  --craie: #f6f3ec;
  --parchemin: #e8e2d7;
  --laiton: #c6a268;
  --laiton-fonce: #9b7445;
  --gris-service: #69736d;
  --filet: color-mix(in srgb, #17201c 13%, transparent);
  --serif: "Manrope", sans-serif;
  --sans: "Manrope", sans-serif;
  --transition: .55s cubic-bezier(.32, .72, 0, 1);
}

html { scroll-behavior: smooth; }
body {
  background: #ffffff;
  color: var(--noir);
  font-family: var(--sans);
}
h1, h2, h3, h4, .marque {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -.045em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
.enveloppe { width: min(1320px, calc(100% - 64px)); }

/* Le bloc de navigation en pilule (.site-*) a été retiré : les pages
   internes reprennent désormais l'en-tête de la homepage (.bandeau +
   .entete--centre), et plus aucune page ne portait ces classes. */

/* Catalogue */
.banniere {
  min-height: 390px;
  color: #fff;
  background: #17201c;
  isolation: isolate;
}
.banniere__media {
  background: url("assets/hero-cellar-night.png") 60% 48% / cover no-repeat;
  transform: none;
  opacity: 1;
}
.banniere__voile {
  background: linear-gradient(90deg, rgba(12, 14, 12, .9), rgba(12, 14, 12, .28) 65%, transparent);
}
.banniere__inner { min-height: 390px; padding-block: 62px; }
.banniere h1 {
  max-width: 780px;
  margin: 28px 0 20px;
  font-size: clamp(48px, 6vw, 78px);
  line-height: .98;
}
.fil { font-size: 11px; }
.rail-gabarits { padding-block: 34px; }
.gabarit__vignette, .cercle__media {
  background: #101310 url("assets/product-service-compact.png") center / contain no-repeat;
}
.gabarit__vignette svg, .cercle__media svg { opacity: 0; }
.outils {
  background: color-mix(in srgb, #ffffff 92%, transparent);
  box-shadow: inset 0 -1px var(--filet);
}
.puce, .format, .atout, .guide-lien {
  border-color: transparent;
  background: #e5e0d6;
  transition: transform var(--transition), background-color var(--transition);
}
/* .atout sorti du groupe : ce sont des mentions, pas des boutons. Le
   survol ne doit rien surligner, il ouvre seulement la bulle. */
.puce:hover, .format:hover, .guide-lien:hover {
  border-color: transparent;
  background: #d8d1c5;
  transform: translateY(-2px);
}
.grille-produits { gap: 42px 14px; padding-block: 48px 80px; }
.carte { border-radius: 26px; overflow: hidden; }
.carte__media {
  /* Pas de hauteur plancher : elle entre en conflit avec le ratio
     339/424 posé dans catalogue.css. Sous 312px de colonne, le plancher
     l'emporte et le ratio regonfle la largeur, ce qui fait déborder la
     carte. Le ratio donne déjà 376px de haut sur une colonne de 301px. */
  border-radius: 24px;
  background: #0c0f0d url("assets/product-aging-tall.png") center / contain no-repeat;
}
.grille-produits > .carte:nth-of-type(4n + 2) .carte__media,
.associes > .carte:nth-of-type(4n + 2) .carte__media {
  background-image: url("assets/product-service-compact.png");
}
.grille-produits > .carte:nth-of-type(4n + 3) .carte__media,
.associes > .carte:nth-of-type(4n + 3) .carte__media {
  background-image: url("assets/product-dual-zone.png");
}
.grille-produits > .carte:nth-of-type(4n) .carte__media,
.associes > .carte:nth-of-type(4n) .carte__media {
  background-image: url("assets/product-slim-tall.png");
}
.carte__media > svg { opacity: 0; }
.carte__corps { padding: 18px 4px 8px; }
.carte__nom { font-size: 17px; }
.carte__note { display: none; }
.carte__formats { background: rgba(13, 17, 14, .93); }
.encart { margin-block: 18px 36px; }
.collection-tuile { border: 0; border-radius: 24px; background: #e4ded3; }
.collection-tuile__media { background: #173226; }
.reassurance { border-radius: 28px; background: #e5dfd4; }
.reassurance > div:first-child { display: none; }
.reassurance { grid-template-columns: repeat(3, 1fr); }

/* Fiche produit */
.fiche { gap: clamp(38px, 6vw, 88px); padding-top: 34px; }
.mosaique { gap: 8px; }
.mosaique__col { gap: 8px; }
.mosaique__vue {
  border-radius: 24px;
  background: #0d100e url("assets/product-aging-tall.png") center / contain no-repeat !important;
}
.mosaique__col:first-child .mosaique__vue:nth-child(2n) {
  background-image: url("assets/product-slim-tall.png") !important;
}
.mosaique__col:nth-child(2) .mosaique__vue:nth-child(2n + 1) {
  background-image: url("assets/product-dual-zone.png") !important;
}
.mosaique__vue svg { opacity: 0; }
.achat { padding-top: 18px; }
.achat__note { display: none; }
.achat h1 {
  margin-top: 0;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.02;
}
.achat h1 .modele { display: block; margin-top: 8px; color: #7b847e; }
.achat__prix { margin-top: 26px; font-size: 24px; }
.achat .bouton {
  min-height: 54px;
  border-radius: 999px;
  background: #18382a;
  transition: transform var(--transition), background-color var(--transition);
}
.achat .bouton:hover {
  transform: translateY(-2px);
  background: #244c3a;
}
.achat__livraison { border-radius: 16px; background: #e6e0d5; }
.garanties > div { padding-block: 16px; }
.bloc { padding-block: 92px; }
.bloc__surtitre {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
}
.bloc__titre { font-size: clamp(36px, 4.8vw, 64px); letter-spacing: -.055em; }
.associes { gap: 14px; }
.compare, .panneau-detail__media { border-radius: 28px; }
.compare__volet--avant { background: url("assets/hero-modern-kitchen.png") left center / cover no-repeat; }
.compare__volet--apres { background: url("assets/hero-cellar-night.png") center / cover no-repeat; }
.compare__volet > svg { opacity: 0; }
.comm__rail { display: none; }
.comm__nav { display: none; }

/* Footer commun */
.pied { background: #101310; }
.pied .marque { font-size: 24px; }
.pied__haut { padding-block: 74px; }
.pied__bas { border-color: rgba(255, 255, 255, .08); }

@media (max-width: 800px) {
  .enveloppe { width: calc(100% - 32px); }
  .banniere, .banniere__inner { min-height: 330px; }
  .banniere__inner { padding-block: 44px; }
  .banniere h1 { font-size: 44px; }
  .grille-produits { gap: 34px 10px; }
  .reassurance { grid-template-columns: 1fr; text-align: left; }
  .reassurance > div { justify-items: start; }
  /* Galerie produit : la mosaïque passait en une seule colonne et masquait la
     seconde, donc cinq des dix visuels n'étaient jamais affichés en mobile.
     Elle devient un rail qui glisse, avec les dix vues.

     display: contents sur les colonnes : leurs vues deviennent les éléments
     du rail sans toucher au balisage. */
  .mosaique {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mosaique::-webkit-scrollbar { display: none; }
  .mosaique__col,
  .mosaique__col:nth-child(2) { display: contents; }
  .mosaique__vue,
  .mosaique__vue--carre {
    flex: 0 0 84%;
    aspect-ratio: 4 / 5;
    scroll-snap-align: center;
    border-radius: 18px;
  }
  .mosaique__compteur { display: block; }
  .fiche { gap: 30px; }
  .bloc { padding-block: 70px; }
}

/* ---------- Visuels réels dans les pages catalogue ----------
   Les conteneurs étaient calibrés pour des gabarits SVG posés au
   centre. Avec de vraies photos on remplit le cadre : la page prend
   le même grain que la homepage. */
.gabarit__vignette img,
.carte__media img,
.collection-tuile__media img,
.cercle__media img,
.mosaique__vue img,
.comm__vue img,
.panneau-detail__media img,
.compare__volet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Le visuel produit du catalogue est détouré sur fond sombre :
   on le contient au lieu de le rogner, sinon la cave est coupée. */
.carte__media img,
.gabarit__vignette img,
.carte__media { padding: 0; }
.carte__media img { transition: transform 1s var(--transition, .55s ease); }
.carte:hover .carte__media img { transform: scale(1.035); }

/* Le comparateur porte désormais des photos, plus des aplats */
.compare__volet { padding: 0; }
.compare__volet--avant { background: #241f1a; }
.compare__volet--apres { background: #14201b; }

/* ---------- Graisses alignées sur la homepage ----------
   Manrope n'est chargée qu'en 400, 500 et 600, et styles.css pose
   font-synthesis-weight: none : le navigateur ne peut donc PAS simuler
   les graisses manquantes. Les 450 et 700 hérités du clone Casemira,
   qui tournait sur une police variable, retombaient silencieusement sur
   un autre fichier et cassaient la cohérence avec l'accueil.
   450 -> 500, 700 -> 600, les seules valeurs qu'emploie la homepage. */
.achat h1 { font-weight: 500; }
.achat__mensualite strong,
.achat__format strong,
.faq__corps strong { font-weight: 600; }
.format { font-weight: 600; }
.comm__nav button { font-weight: 600; }

/* ---------- Colonne d'achat : retour à la séquence du clone ----------
   Le clone ouvre la colonne par la disponibilité puis la note boutique,
   et met ses intitulés de sélecteur en capitales. Trois écarts corrigés. */

/* La note était masquée alors que le clone l'affiche en tête de colonne. */
.achat__note { display: flex; margin-bottom: 14px; }

.achat__dispo {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #3f6b52;
}
.achat__dispo::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* Intitulés en capitales, 12/600, comme « COULEUR · 2 » du clone */
.achat__label > span:first-child {
  text-transform: uppercase;
  letter-spacing: .1em;
}
/* Le décompte reste en bas de casse : « DIMENSIONS · 5 formats ». */
.achat__label .compte { text-transform: none; letter-spacing: .01em; }

/* =========================================================
   Colonne d'achat : densité du clone
   La couche d'harmonisation avait porté le titre à 48px sur 3 lignes
   (155px de haut) avec le modèle sur sa propre ligne. Le clone tient en
   28px/450, modèle en gris sur la même ligne. Toute la sensation de
   « bloc d'achat » vient de cette densité.
   ========================================================= */

.achat h1 {
  margin: 6px 0 14px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.02em;
}
.achat h1 .modele { display: inline; margin: 0; color: #8b918a; }
.achat__prix { margin-top: 0; font-size: 24px; }
.achat__format { margin-top: 4px; }
.achat__mensualite { margin-top: 8px; }
.achat__label { margin: 20px 0 8px; }
.garanties > div { padding-block: 12px; }
.achat .bouton { margin-top: 14px; }

/* ---------- Atouts dépliants ---------- */

.atouts { gap: 6px; }
.atout-bloc { position: relative; }
.atout { font-size: 13px; }
.atout[aria-expanded="true"] { background: #d8d1c5; }
.atout__panneau {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  max-width: 78vw;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fbf8f2;
  box-shadow: 0 18px 50px rgba(23, 32, 28, .18);
}
.atout__panneau[hidden] { display: none; }
.atout__panneau b { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.atout__panneau p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gris-service); }
/* Le dernier atout de la rangée déborderait à droite */
.atout-bloc:last-child .atout__panneau { left: auto; right: 0; }

/* ---------- Nuanciers en photos ---------- */

.finition { background: transparent; }
.finition img {
  width: 48px;
  height: 48px;
  border-radius: 9px;
  object-fit: cover;
  background: #0d100e;
}

/* ---------- Modale du guide ---------- */

.modale { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.modale[hidden] { display: none; }
.modale__fond { position: absolute; inset: 0; background: rgba(15, 18, 15, .58); }
.modale__boite {
  position: relative;
  width: min(1000px, 100%);
  max-height: 86vh;
  overflow: auto;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 40px 90px rgba(15, 18, 15, .34);
}
.modale__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px 0;
}
.modale__titre { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.modale__fermer {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #e5e0d6;
  font-size: 20px; line-height: 1; color: var(--noir);
  cursor: pointer;
}
.modale__fermer:hover { background: #d8d1c5; }
.modale__corps { padding: 16px 26px 26px; font-size: 14px; color: var(--ardoise); }
.modale__corps > p { margin: 0 0 16px; max-width: 78ch; }

.guide-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.guide-table th, .guide-table td { padding: 10px 12px; text-align: left; }
.guide-table thead th {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris-service);
  border-bottom: 1px solid var(--filet);
}
.guide-table tbody td { border-bottom: 1px solid var(--filet); }
.guide-table tbody tr:last-child td { border-bottom: 0; }
.guide-table tbody td:first-child { font-weight: 600; color: var(--noir); }
.guide-note { margin: 14px 0 0; font-size: 13px; color: var(--gris-service); }

@media (max-width: 700px) {
  .guide-table { font-size: 13px; }
  .guide-table th, .guide-table td { padding: 8px 6px; }
}

/* =========================================================
   Colonne d'achat — calage sur la référence Casemira
   (captures fournies : notation 5 étoiles, prix et format sur
   une ligne, pilule de paiement, rangée d'atouts filetée,
   nuanciers encadrés, formats en 2 colonnes, carte de livraison,
   CTA portant le prix, bouton PayPal, réassurance à pastilles)
   ========================================================= */

/* ---------- Notation ---------- */
.achat__note { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 15px; }
.achat__etoiles { display: inline-flex; gap: 2px; color: #c6a268; }
.achat__etoiles svg { width: 15px; height: 15px; }
.achat__note b { font-weight: 600; font-variant-numeric: tabular-nums; }
.achat__note a { color: #5b6570; text-decoration: underline; text-underline-offset: 3px; }
.achat__note a:hover { color: var(--noir); }
.achat__info {
  width: 15px; height: 15px;
  display: grid; place-items: center;
  border: 1px solid #b9bfc4; border-radius: 50%;
  font-size: 10px; font-style: italic; font-weight: 600; color: #8b929a;
  cursor: help;
}

/* ---------- Titre : modèle en italique clair ---------- */
.achat h1 { margin: 0 0 18px; font-size: 28px; font-weight: 500; line-height: 1.22; letter-spacing: -.02em; }
.achat h1 .modele { display: inline; font-style: italic; color: #a09584; }

/* ---------- Prix et format sur la même ligne ---------- */
.achat__ligne-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; }
.achat__prix { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.achat__format { font-size: 14px; color: var(--gris-service); }
.achat__format strong { font-weight: 600; color: #3a4654; }

/* ---------- Pilule de paiement fractionné ---------- */
.achat__mensualite {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px 0 0; padding: 7px 14px 7px 7px;
  border: 1px solid var(--filet); border-radius: 999px;
  font-size: 13px; color: var(--gris-service);
}
.achat__mensualite strong { font-weight: 700; color: #333; }
.marque-paiement {
  padding: 3px 9px; border-radius: 999px;
  background: #ffb3c7; color: #17120f;
  font-size: 12px; font-weight: 700; letter-spacing: -.01em;
}

/* ---------- Rangée d'atouts filetée, séparateurs verticaux ---------- */
.atouts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  margin: 20px 0 0; padding: 14px 0;
  border-block: 1px solid var(--filet);
}
.atout {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 2px 14px;
  border: 0; background: none; border-radius: 0;
  font-size: 13px; font-weight: 400; color: var(--noir);
}
.atout:first-child { padding-left: 0; }
.atout + .atout { box-shadow: inset 1px 0 var(--filet); }
.atout svg { width: 18px; height: 18px; color: var(--noir); opacity: .75; }

/* ---------- Intitulé de sélecteur ---------- */
.achat__label {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 22px 0 10px;
  font-size: 12px; font-weight: 600; color: #8b919a;
}
.achat__label strong { font-size: 14px; font-weight: 500; color: #3a4654; }

/* ---------- Nuanciers encadrés ---------- */
.finitions { gap: 8px; }
.finition {
  width: 72px; height: 72px;
  padding: 4px;
  border: 1px solid var(--filet); border-radius: 12px;
  background: #fff;
}
.finition img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; background: #0d100e; }
.finition[aria-pressed="true"] { border: 2px solid var(--noir); padding: 3px; }

/* ---------- Lien guide, avec picto ---------- */
.guide-lien {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none;
  font-size: 14px; font-weight: 600; color: var(--noir);
  text-transform: none; letter-spacing: 0;
}
.guide-lien svg { width: 17px; height: 17px; }
.guide-lien:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Formats : deux colonnes, pastilles hautes ---------- */
.formats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.format {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 56px; padding: 0 16px;
  border: 1px solid var(--filet); border-radius: 14px;
  background: transparent;
  font-size: 15px; font-weight: 600;
}
.format:hover { border-color: #b6bcc2; background: transparent; transform: none; }
.format[aria-pressed="true"] { border: 2px solid var(--noir); background: #faf8f4; padding: 0 15px; }
.format__lab { font-size: 15px; font-weight: 600; color: var(--noir); }
.format__prix { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.format:disabled { opacity: .4; }
.format:disabled .format__lab { text-decoration: line-through; }

/* ---------- Carte de livraison ---------- */
.achat__livraison {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid var(--filet); border-radius: 14px;
  background: transparent;
}
.achat__livraison-icone {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px; background: #eceae4;
}
.achat__livraison-icone svg { width: 22px; height: 22px; color: var(--noir); }
.achat__livraison-txt { display: grid; gap: 3px; }
.achat__livraison-txt b { font-size: 15px; font-weight: 400; color: var(--noir); }
.achat__livraison-txt b strong { font-weight: 700; }
.achat__livraison-txt small { font-size: 14px; color: var(--gris-service); }
.achat__livraison-txt small strong { font-weight: 700; color: #3a4654; }

/* ---------- Boutons d'achat ---------- */
/* Spécificité : .achat .bouton (2 classes) plus haut dans ce fichier
   l'emportait sur .achat__cta (1 classe) et rendait le bouton vert en
   pilule. On se met au même niveau. */
.achat .achat__cta {
  width: 100%; min-height: 62px;
  margin-top: 18px;
  border-radius: 12px;
  background: #141c2b;
  font-size: 16px; font-weight: 700;
}
.achat .achat__cta:hover { background: #202a3d; transform: none; }
.achat__cta-sep { opacity: .45; }
.bouton-paypal {
  width: 100%; min-height: 62px;
  margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px;
  background: #f5be3a;
  color: #142433;
  font: 500 16px/1 var(--sans);
  cursor: pointer;
  transition: background-color var(--transition);
}
.bouton-paypal:hover { background: #efb428; }
.paypal { font-style: italic; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.paypal i { color: #172c70; font-style: italic; }
.paypal em { color: #2b9ade; font-style: italic; }

/* ---------- Réassurance à pastilles ---------- */
.garanties { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--filet); }
.garanties > div {
  display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 14px;
  padding-block: 12px; border: 0;
}
.garanties__icone {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%; background: #eceae4;
}
.garanties__icone svg { width: 21px; height: 21px; color: var(--noir); margin: 0; }
.garanties b { font-size: 15px; font-weight: 600; }
.garanties small { font-size: 14px; color: var(--gris-service); }

/* ---------- Accordéons au signe + ---------- */
.accordeon { border-top: 0; border-bottom: 1px solid var(--filet); }
.accordeon:first-of-type { border-top: 1px solid var(--filet); }
.accordeon summary { padding: 20px 0; font-size: 19px; font-weight: 600; }
.accordeon__signe { position: relative; width: 16px; height: 16px; flex: none; }
.accordeon__signe::before,
.accordeon__signe::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.6px; margin-top: -.8px; background: var(--noir);
  transition: transform var(--transition);
}
.accordeon__signe::after { transform: rotate(90deg); }
.accordeon[open] .accordeon__signe::after { transform: rotate(0); }

@media (max-width: 560px) {
  .formats { grid-template-columns: 1fr; }
  .atout { padding-inline: 10px; font-size: 12px; }
}

/* =========================================================
   Cadrage des visuels insérés
   Les cadres sont en « display: grid; place-items: center ». Une image
   en height:100% y résout son pourcentage contre une piste dont la
   hauteur dépend d'elle-même : le cycle est indécidable, le navigateur
   retombe sur auto et l'image reprend son ratio natif (1024×1536).
   Résultat : 16 images débordaient de leur cadre, jusqu'à 183 px, et
   celles des nuanciers, sans overflow:hidden, recouvraient l'intitulé.
   On passe les cadres en « stretch » : la piste tient alors sa hauteur
   du cadre lui-même, et le pourcentage se résout.
   ========================================================= */

.mosaique__vue,
.carte__media,
.gabarit__vignette,
.cercle__media,
.comm__vue,
.collection-tuile__media,
.panneau-detail__media,
.compare__volet,
.finition {
  position: relative;
  overflow: hidden;
}

.mosaique__vue > img,
.carte__media > img,
.gabarit__vignette > img,
.cercle__media > img,
.comm__vue > img,
.collection-tuile__media > img,
.panneau-detail__media > img,
.compare__volet > img,
.finition > img {
  /* En grille, un height:100% sur une image ne se résout pas : la piste
     est dimensionnée par l'image elle-même. En absolu contre un cadre
     positionné et de taille définie, le calage est toujours défini. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Le nuancier garde son arrondi intérieur, plus serré que le cadre */
.finition > img { border-radius: 8px; }
/* Les silhouettes SVG d'origine restent neutralisées sous les photos */
.mosaique__vue > svg,
.carte__media > svg,
.compare__volet > svg { display: none; }

/* Le nuancier garde un liseré visible entre son cadre et sa photo :
   un enfant absolu se cale sur la boîte de remplissage, donc recouvre
   le padding. On réintroduit l'écart via inset. */
/* Pour une image, « auto » avec des décalages reprend la taille
   intrinsèque : on dimensionne donc explicitement, en retirant le
   liseré. Les pourcentages se résolvent sur la boîte de remplissage. */
.finition > img {
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 8px;
}
.finition[aria-pressed="true"] > img {
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}

/* ---------- En-tête : calage exact sur celui de la homepage ----------
   La homepage embarque ses propres jetons dans son style en ligne. Quatre
   valeurs divergeaient de la couche d'harmonisation. On reprend les
   siennes, elle fait référence. */
.bandeau { background: #1b1917; }
.entete { background: color-mix(in srgb, #f7f3ec 88%, transparent); }
.marque { font-weight: 600; }
/* Les pages internes héritent du line-height 1.6 du body de styles.css,
   que la homepage n'applique pas à sa nav : 5 px d'écart sur l'en-tête. */
.nav-principale a { line-height: normal; }

/* =========================================================
   Fonds de surface en blanc pur
   Toutes les surfaces de page et de section passent en #ffffff,
   en-tête compris. Les remplissages crème des puces et pastilles
   deviennent transparents : c'est d'ailleurs ce que fait le clone,
   dont les filtres n'ont ni fond ni bordure.
   Restent volontairement colorés, et signalés comme tels :
   le bandeau de service et le pied (sombres, texte clair dessus),
   les cadres de visuels, et les pastilles d'icônes grises de la
   colonne d'achat, qui sont un parti pris de la référence.
   ========================================================= */

.entete { background: #ffffff; }
.outils { background: color-mix(in srgb, #ffffff 94%, transparent); }
.gabarit { background: #ffffff; }
.collection-tuile { background: #ffffff; }
.reassurance { background: #ffffff; box-shadow: inset 0 0 0 1px var(--filet); }
.atout__panneau { background: #ffffff; }
.modale__boite { background: #ffffff; }

/* Puces et sélecteurs : plus de remplissage, la bordure ou le survol suffisent */
.puce, .atout, .guide-lien { background: transparent; }
.puce:hover, .guide-lien:hover { background: color-mix(in srgb, var(--noir) 5%, transparent); }
.format { background: #ffffff; }
.format[aria-pressed="true"] { background: #ffffff; }
.format:hover { background: #ffffff; }

/* Fil d'Ariane hors bannière : il collait 34 px sous lui via le padding
   de .fiche, plus son propre padding. On resserre l'ensemble. */
.fil--page {
  margin: 0;
  padding: 14px 0 6px;
  color: var(--gris-service);
}
.fil--page a:hover { color: var(--noir); }
.fiche { padding-top: 10px; }

/* =========================================================
   Atouts : bulles d'information au survol
   Le clic ouvrait un panneau via un script qui, sur des <span> sans
   aria-controls, appelait .hidden sur null et levait une exception.
   On passe au survol, en CSS : rien à exécuter, et l'animation est
   fluide. Le repli sur `visibility` plutôt que `display` est ce qui
   rend la transition possible.
   ========================================================= */

.atout-bloc { position: relative; }
.atout-bloc + .atout-bloc .atout { box-shadow: inset 1px 0 var(--filet); }
.atout { cursor: default; }
.atout:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; border-radius: 4px; }

.atout__panneau {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  left: 0;
  display: block;
  width: 300px;
  max-width: 76vw;
  padding: 18px 20px;
  border: 1px solid var(--filet);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(20, 28, 43, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  pointer-events: none;
}
.atout-bloc:hover .atout__panneau,
.atout:focus-visible + .atout__panneau {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.atout__panneau b { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700; color: var(--noir); }
.atout__panneau > span { display: block; font-size: 15px; line-height: 1.5; color: var(--gris-service); }

/* Les deux dernières bulles se recalent à droite pour ne pas sortir de la colonne */
.atout-bloc:nth-last-child(-n+2) .atout__panneau { left: auto; right: 0; }

@media (prefers-reduced-motion: reduce) {
  .atout__panneau { transition: opacity .01ms, visibility 0s; transform: none; }
}

/* Pas de filet au-dessus de la rangée de navigation : home.css en posait
   un, la homepage aussi dans son style en ligne. Retiré des deux côtés. */
.nav-principale { border-top: 0; }

/* La rangée de nav porte la classe .enveloppe, mais le « margin: 0 » de
   .nav-principale__liste dans home.css écrasait son margin-inline: auto :
   la liste était collée à gauche, décalée de 60 px du centre. */
.nav-principale__liste { margin-inline: auto; }

/* ---------- Sélecteur de pays ----------
   À gauche du compte et du panier, dans la même rangée d'actions. Le bouton
   reprend .icone-bouton mais s'élargit pour porter drapeau, code et chevron. */

.pays { position: relative; }
.pays__bouton {
  width: auto;
  height: 42px;
  padding-inline: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
}
.pays__bouton .chevron {
  width: 12px;
  height: 12px;
  opacity: .5;
  transition: transform var(--transition);
}
.pays__bouton[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.pays__code {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
}
/* Les drapeaux sont dessinés en 24×18, pas en 24×24 comme le reste de la
   sprite : leur <svg> porte donc un viewBox explicite dans le balisage.
   Le filet interne les détache d'un en-tête blanc, sinon le blanc du drapeau
   français et celui du fond se confondent. */
/* Deux classes : .icone-bouton svg impose 20×20 et l'emporterait sur une
   sélection à classe unique. */
.pays .pays__drapeau,
.pays__liste .pays__drapeau {
  width: 22px;
  height: 16.5px;
  flex: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--noir) 16%, transparent);
}

.pays__liste {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 196px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: 14px;
  box-shadow: var(--ombre-m);
}
.pays__liste[hidden] { display: none; }
.pays__liste li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: .875rem;
  cursor: pointer;
  transition: background-color var(--transition);
}
.pays__liste li:hover,
.pays__liste li:focus-visible {
  background: color-mix(in srgb, var(--noir) 5%, transparent);
  outline: none;
}
.pays__liste li[aria-selected="true"] { font-weight: 600; }

@media (max-width: 560px) {
  .pays__code { display: none; }
  .pays__bouton { padding-inline: .4rem; }
}

/* Le fil d'Ariane porte aria-current="page" : c'est lui, la page courante.
   La nav ne marque que la section, en aria-current="true". Le sélecteur de
   home.css ne visait que "page" : le soulignement ne s'allumait plus. */
.nav-principale a[aria-current]::after { transform: scaleX(1); }

/* Repli mobile : la liste passait sur deux lignes, ce qui portait l'en-tête
   collant à 180 px. Une seule ligne qui défile, et le décalage des blocs
   collants suit dans --entete-h. */
/* ---------- Menu hamburger sous 1000 px ----------
   Mesuré : la liste repassait sur deux lignes dès 780 px et jusqu'à ~950 px,
   ce qui portait l'en-tête collant à 204 px. Sous ce seuil elle devient un
   panneau déroulant, et le champ de recherche libère la première colonne de
   la grille pour le bouton.

   Le panneau est en position absolue et non dans le flux : il ne change donc
   pas la hauteur de l'en-tête quand il s'ouvre, sinon --entete-h bougerait et
   tous les blocs collants sauteraient. */

.burger { display: none; }
.burger__fermer { display: none; }
.burger[aria-expanded="true"] .burger__ouvrir { display: none; }
.burger[aria-expanded="true"] .burger__fermer { display: block; }

@media (min-width: 1001px) {
  /* Si le panneau a été fermé en mobile puis la fenêtre élargie, l'attribut
     hidden resterait posé et la nav disparaîtrait. */
  .nav-principale[hidden] { display: block; }
}

@media (max-width: 1000px) {
  .burger { display: grid; grid-column: 1; justify-self: start; }
  .recherche { display: none; }

  .nav-principale {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--filet);
    border-bottom: 1px solid var(--filet);
    box-shadow: var(--ombre-m);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-principale[hidden] { display: none; }

  .nav-principale__liste {
    display: block;
    width: min(100% - 2.5rem, var(--page));
    margin-inline: auto;
    padding-block: .4rem 1rem;
  }
  .nav-principale li + li { border-top: 1px solid var(--filet); }
  .nav-principale a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 1rem .2rem;
    font-size: .95rem;
  }
  /* Le soulignement glissant n'a pas de sens sur une liste verticale. */
  .nav-principale a::after { display: none; }
  .nav-principale a[aria-current] { color: var(--laiton-fonce); }
  .nav-principale .chevron { opacity: .4; }
}

/* =========================================================
   Bloc de marque : monogramme, nom, filet, signature
   Reproduit le lockup fourni. Le monogramme est reconstruit à partir
   du canal alpha du PNG d'origine, qui portait environ 12 000 pixels
   parasites rouges et jaunes issus du détourage : couleur plate posée
   sur l'alpha nettoyé, donc plus aucun bruit.
   ========================================================= */

/* Lockup horizontal : monogramme à gauche, nom et signature à droite */
.entete .marque {
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1;
  text-decoration: none;
  letter-spacing: normal;
}
.marque__texte {
  display: grid;
  justify-items: center;
}
.marque__monogramme {
  width: 46px;
  height: 46px;
  display: block;
  flex: none;
}
.marque__nom {
  margin-top: 0;
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-indent: .17em;            /* compense l'interlettrage sur la dernière lettre */
  color: var(--noir);
  white-space: nowrap;
}
.marque__filet {
  position: relative;
  width: 96px;
  height: 1px;
  margin: 8px 0 7px;
  background: linear-gradient(90deg, transparent, var(--laiton) 20%, var(--laiton) 80%, transparent);
}
.marque__filet::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--laiton);
}
.marque__baseline {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-indent: .2em;
  color: var(--laiton-fonce);
  white-space: nowrap;
}

/* Le bloc est plus haut qu'un simple mot : la rangée respire */
.entete--centre .entete__grille { min-height: 104px; }

/* Le pied reprend le même lockup, en version claire et calé à gauche.
   Les fichiers champagne et craie sont les mêmes tracés que les versions
   sombres, recolorés : mêmes 42 837 et 19 275 pixels opaques. */
.pied .marque {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  line-height: 1;
  text-decoration: none;
  letter-spacing: normal;
}
.pied .marque__texte { justify-items: stretch; }
/* Calé à gauche : le filet part plein et s'éteint à droite, au lieu de
   s'éteindre des deux côtés comme sous un nom centré. */
.pied .marque__filet {
  width: 100%;
  background: linear-gradient(90deg, var(--laiton-cl) 0%, var(--laiton-cl) 62%, transparent);
}
.pied .marque__filet::after { left: auto; right: 0; transform: translate(50%, -50%) rotate(45deg); background: var(--laiton-cl); }
.pied .marque__baseline { color: var(--laiton-cl); }

@media (max-width: 800px) {
  .entete .marque { gap: 10px; }
  .marque__monogramme { width: 36px; height: 36px; }
  .marque__nom { font-size: 17px; letter-spacing: .12em; text-indent: .12em; }
  .marque__filet { width: 72px; margin: 5px 0 4px; }
  .marque__baseline { font-size: 7px; letter-spacing: .16em; text-indent: .16em; }
  .entete--centre .entete__grille { min-height: 84px; }
}

/* Aucun état visuel sur l'atout lui-même au survol */
.atout, .atout:hover, .atout:focus { background: transparent; transform: none; }

/* La marge basse de la fiche (72 px) et la marge haute de la première
   section (92 px) s'additionnaient : 164 px de vide sous la galerie. */
.fiche { padding-bottom: 8px; }
.fiche + * .bloc:first-of-type,
main > .enveloppe + .bloc { padding-top: 20px; }

/* Le lien d'avis cumulait un soulignement et une bordure basse héritée
   de catalogue.css : deux traits superposés. On ne garde que l'un. */
.achat__note a { border-bottom: 0; }

/* Cinq onglets au lieu de deux : la rangée doit pouvoir défiler
   plutôt que se replier sur deux lignes. */
.onglets-detail {
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.onglets-detail::-webkit-scrollbar { display: none; }
.onglet-detail { flex: none; white-space: nowrap; font-size: 17px; }
@media (max-width: 700px) { .onglet-detail { font-size: 15px; } .onglets-detail { gap: 16px; } }

/* Espacement des sections basses
   Chaque .bloc portait 92 px en haut ET en bas : 184 px entre deux
   sections. Le modificateur .bloc--serre existait pour annuler la marge
   haute mais était écrasé par la règle .bloc de ce fichier, déclarée
   après lui à spécificité égale. On resserre et on lui rend son effet. */
.bloc { padding-block: 20px 16px; }
.bloc.bloc--serre { padding-top: 20px; }
/* La dernière section respire avant le pied de page */
main > .bloc:last-of-type { padding-bottom: 56px; }

/* La FAQ était plafonnée à 830 px, repris du clone où elle occupe la
   colonne droite d'une mise en page à deux colonnes. Ici il n'y a pas de
   seconde colonne : le plafond laissait les chevrons 490 px avant le bord
   droit du titre. On rend la colonne pleine largeur. */
.faq { max-width: none; }
/* La question garde une longueur de ligne lisible, seul le chevron va au bord */
.faq summary > span,
.faq summary { column-gap: 2rem; }
.faq__corps { max-width: 92ch; }

/* Le nom de marque est désormais une image détourée, plus du texte :
   on le dimensionne par la hauteur, la largeur suit le ratio 7,95.
   Les propriétés typographiques n'ont plus d'objet. */
.marque__nom {
  display: block;
  height: 26px;
  width: auto;
  margin: 0;
  text-indent: 0;
  letter-spacing: normal;
}
/* La variante claire est portée par l'attribut src dans le balisage du pied,
   pas par un content: url() qui la dupliquerait. */
@media (max-width: 800px) { .marque__nom { height: 20px; } }

/* =========================================================
   Colonne d'achat collante
   Elle mesurait 1288 px pour une fenêtre de 1000. Un élément sticky
   plus haut que la fenêtre épingle son sommet et ne redescend jamais :
   le haut de la colonne — note, titre, prix — devenait inatteignable.
   On ne rend collant que le bloc qui tient dans la fenêtre (799 px,
   de la note au bouton PayPal). Garanties et accordéons défilent
   normalement en dessous.
   ========================================================= */

/* La colonne occupe toute la hauteur de la rangée : c'est ce qui donne
   au bloc collant sa course, sinon il s'arrêterait au bas de la colonne. */
.achat { position: static; align-self: stretch; }

/* Le bloc fait 1243 px : plus haut que la plupart des fenêtres. Un sticky
   plus haut que la fenêtre épingle son sommet et rend son bas inatteignable.
   On le plafonne à la hauteur disponible et on lui donne son propre
   défilement : tout reste accessible, quelle que soit la taille d'écran.
   Le garde-fou min-height qui désactivait le sticky sous 900 px n'a plus
   lieu d'être — c'est lui qui le faisait disparaître sur les écrans courts. */
.achat__sticky { position: static; }
@media (min-width: 1000px) {
  .achat__sticky {
    position: sticky;
    top: 88px;
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--noir) 20%, transparent) transparent;
    padding-right: 4px;
  }
  .achat__sticky::-webkit-scrollbar { width: 6px; }
  .achat__sticky::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: color-mix(in srgb, var(--noir) 20%, transparent);
  }
}

/* Réassurance et accordéons reviennent dans la colonne, sous le bloc
   d'achat. Le bloc collant est confiné à sa propre piste : il ne peut
   donc plus glisser par-dessus ce qui le suit — c'était la cause du
   recouvrement de 1530 px. La piste prend la hauteur restante, ce qui
   donne au bloc sa course. */
.achat { display: flex; flex-direction: column; }
.achat__piste { flex: 1 1 auto; min-height: 0; }

/* FAQ : le marqueur natif de <details> survivait à list-style:none et,
   la summary étant en grille, occupait une seconde rangée de 11 px —
   d'où le chevron doré isolé sous la question. On le supprime et on
   met le vrai chevron en laiton, sur la ligne de la question. */
.faq summary::marker,
.faq summary::-webkit-details-marker { content: none; display: none; }
/* Chrome ne respecte list-style:none que si la summary reste en display
   block ; dès qu'on la passe en flex ou en grille, il fabrique une boîte
   de marqueur qui devient un item et décale tout. On laisse donc la
   summary en block et on met la mise en page dans un enfant. */
.faq summary { display: block; grid-template-rows: none; }
.faq__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.faq__q { flex: 1; min-width: 0; }
.faq__ligne > svg { flex: none; color: var(--laiton); opacity: 1; }
.faq details[open] .faq__ligne > svg { transform: rotate(180deg); }

/* =========================================================
   Décalage des éléments collants sous l'en-tête
   L'en-tête est collant sur 154 px. Tout ce qui s'épingle plus haut
   passe dessous : le bloc d'achat perdait 66 px (la note et la première
   ligne du titre), et la barre de filtres de la collection était
   entièrement masquée. Une seule variable pilote les deux.
   ========================================================= */
:root { --entete-h: 154px; }

.outils { top: var(--entete-h); }

@media (min-width: 1000px) {
  .achat__sticky {
    top: calc(var(--entete-h) + 16px);
    max-height: calc(100dvh - var(--entete-h) - 40px);
  }
}

/* Mesurée à 180 px sous 800 px de large, pas 126 : le bloc de marque
   et la rangée de nav y prennent plus de place qu'estimé. */
@media (max-width: 800px) { :root { --entete-h: 180px; } }

/* Compteur du rail de la galerie produit : masqué au-dessus du seuil, où la
   mosaïque reprend ses deux colonnes et où tout est visible d'un coup. */
.mosaique__compteur {
  margin: 10px 0 0;
  text-align: center;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gris-service);
  font-variant-numeric: tabular-nums;
}

/* Declare apres la regle de base, sinon celle-ci l'emporte a specificite egale.
   Le compteur n'a de sens que quand la galerie est un rail. */
.mosaique__compteur { display: none; }
@media (max-width: 800px) { .mosaique__compteur { display: block; } }

/* ---------- En-tete sur petits ecrans ----------
   Mesure a 375 px : la rangee d'actions passait a 138 px avec le selecteur de
   pays, et l'ensemble burger + marque + actions demandait 385 px pour 343
   disponibles. La page debordait alors horizontalement de 31 px. */
@media (max-width: 560px) {
  .entete__actions { gap: 0; }
  .icone-bouton { width: 38px; height: 38px; }
  .pays__bouton { width: auto; height: 38px; padding-inline: .3rem; gap: .25rem; }
  .pays .pays__drapeau { width: 20px; height: 15px; }
  .entete .marque { gap: 8px; }
  .marque__monogramme { width: 30px; height: 30px; }
  .marque__nom { height: 16px; }
  .marque__filet { width: 60px; margin: 4px 0 3px; }
  .marque__baseline { font-size: 6px; letter-spacing: .12em; text-indent: .12em; }
}

/* Sous 400 px la rangee reclamait 325 px pour 288 disponibles, dont 32 px de
   seule gouttiere de grille. On resserre gouttiere, boutons et nom de marque. */
@media (max-width: 400px) {
  .entete--centre .entete__grille { gap: .35rem; }
  .icone-bouton { width: 34px; height: 34px; }
  .pays__bouton { height: 34px; padding-inline: .25rem; }
  .marque__nom { height: 14px; }
  .marque__baseline { font-size: 5.5px; letter-spacing: .1em; text-indent: .1em; }
}