@charset "utf-8";
/* ==========================================================================
   SWADCOIFF · Académie du Lissage Brésilien — Rouen
   Feuille de style unique. Direction artistique figée dans /DESIGN.md.
   Toute valeur ici doit correspondre à un token de ce fichier.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Couleur — §3.2 DESIGN.md */
  --noir:            #050505;
  --encre:           #0B0B0B;
  --os:              #F5F5F0;
  --os-attenue:      #8E8B84;   /* 7.3:1 sur --noir */
  --champagne:       #B9A88A;   /* accent unique */
  --champagne-sourd: #6E6552;
  --buriti:          #5E1A17;   /* aplat de section uniquement */

  --prisme: linear-gradient(90deg, #B9A88A, #6E7F8D, #8A6E7F, #B9A88A);

  /* Typographie — §3.1 */
  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --texte:   "Jost", "Futura", "Century Gothic", sans-serif;

  --t-display: clamp(3.2rem, 11vw, 9.5rem);
  --t-h1:      clamp(2.4rem, 6.5vw, 5.2rem);
  --t-h2:      clamp(1.9rem, 4vw, 3.1rem);
  --t-h3:      clamp(1.35rem, 2.2vw, 1.75rem);
  --t-body:    clamp(0.95rem, 1.05vw, 1.05rem);
  --t-label:   0.7rem;

  /* Grille — §3.3 */
  --bord: clamp(1.25rem, 5vw, 5.5rem);

  /* Rythme — §3.4 : deux régimes opposés, jamais uniforme */
  --air-campagne: clamp(9rem, 22vh, 15rem);
  --air-document: clamp(4rem, 8vh, 6rem);

  /* Mouvement */
  --transition: 900ms cubic-bezier(.16, 1, .3, 1);
  --transition-court: 320ms cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   2. SOCLE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--os);
  font-family: var(--texte);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.85;
  overflow-x: hidden;            /* aucun défilement horizontal — §5 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain argentique — §3.5. Évite le noir plat numérique. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--champagne); color: var(--noir); }

:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--champagne);
  color: var(--noir);
  padding: .9rem 1.4rem;
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .32em;
  text-transform: uppercase;
  z-index: 10000;
}
.saut-contenu:focus { left: var(--bord); top: .75rem; }

.invisible {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  line-height: 1.02;
}

.display {
  font-size: var(--t-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: .92;
}

h1, .h1 {
  font-size: var(--t-h1);
  text-transform: uppercase;
  letter-spacing: .1em;
}

h2, .h2 {
  font-size: var(--t-h2);
  text-transform: uppercase;
  letter-spacing: .14em;
}

h3, .h3 {
  font-size: var(--t-h3);
  letter-spacing: .06em;
}

p { margin: 0 0 1.35em; }

.mesure  { max-width: 38ch; }   /* mesure bloquée — §3.3 */
.mesure-large { max-width: 54ch; }

.attenue { color: var(--os-attenue); }

/* Sur-titre : le geste signature en préfixe — §3.7-1 */
.surtitre {
  font-family: var(--texte);
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 1.6rem;
  display: block;
}
.surtitre::before {
  content: "···";
  letter-spacing: .18em;
  margin-right: .85em;
  color: var(--champagne-sourd);
}

/* Chiffres romains des prestations — §3.7-7
   Le chiffre est du contenu (il numérote la prestation) : il lui faut 4.5:1.
   --champagne-sourd ne donne que 3.54:1 sur le noir, on le réserve donc au
   « ··· » décoratif qui le précède. */
.romain {
  font-family: var(--display);
  font-size: var(--t-label);
  letter-spacing: .3em;
  color: var(--os-attenue);      /* 5.99:1 sur --noir */
  font-variant-numeric: normal;
}
.romain::before { content: "··· "; color: var(--champagne-sourd); }

/* Lien : soulignement pointillé qui se densifie — §3.7-5 */
.lien {
  text-decoration: none;
  border-bottom: 1px dotted var(--champagne-sourd);
  padding-bottom: .18em;
  color: var(--champagne);
  transition: border-color var(--transition-court), color var(--transition-court);
}
.lien:hover, .lien:focus-visible {
  border-bottom-style: solid;
  border-bottom-color: var(--champagne);
  color: var(--os);
}

/* --------------------------------------------------------------------------
   4. GESTE SIGNATURE — le filet pointillé — §3.7
   -------------------------------------------------------------------------- */
.filet {
  height: 1px;
  border: 0;
  margin: 0;
  background-image: radial-gradient(circle, var(--champagne-sourd) 0 1px, transparent 1.2px);
  background-size: 9px 1px;
  background-repeat: repeat-x;
  background-position: 0 50%;
}

/* Le filet se trace de gauche à droite quand il entre à l'écran — §4 */
.filet.tracer {
  background-size: 0 1px;
  transition: background-size 1600ms cubic-bezier(.16, 1, .3, 1);
}
.filet.tracer.vu { background-size: 9px 1px; }

.filet-prisme {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--prisme);
  opacity: .55;
}

/* Puces — §3.7-4 */
.liste-points { list-style: none; margin: 0; padding: 0; }
.liste-points li {
  position: relative;
  padding-left: 2.1em;
  margin-bottom: .7em;
}
.liste-points li::before {
  content: "···";
  position: absolute;
  left: 0;
  color: var(--champagne-sourd);
  letter-spacing: .16em;
}

/* --------------------------------------------------------------------------
   5. GRILLE — §3.3
   -------------------------------------------------------------------------- */
.grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.2vw, 2rem);
  padding-inline: var(--bord);
}

/* Décalage éditorial : le titre démarre en colonne 2, jamais en 1 */
.col-titre { grid-column: 2 / span 6; }
.col-texte { grid-column: 7 / span 5; }
.col-plein { grid-column: 1 / -1; }
.col-large { grid-column: 2 / span 10; }

@media (max-width: 900px) {
  .grille { grid-template-columns: 1fr; }
  .col-titre, .col-texte, .col-large { grid-column: 1 / -1; }
}

.section-campagne { padding-block: var(--air-campagne); }
.section-document { padding-block: var(--air-document); }

.pleine-largeur {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   6. IMAGE — §3.6 : deux traitements strictement séparés
   -------------------------------------------------------------------------- */

/* Zone campagne : la photo émerge du noir.
   La COULEUR est conservée. Seul le hero reste en noir et blanc (règle propre
   à .hero-media, §9) : c'est le moment « affiche » du site. Partout ailleurs,
   les visuels Amaxxon gardent leur rouge buriti, leur vert forêt et leurs
   reflets prismatiques — les désaturer privait le site de sa seule chaleur. */
.img-campagne {
  filter: contrast(1.06) saturate(1.04);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cadre-campagne {
  position: relative;
  overflow: hidden;
  background: var(--noir);
}
/* Vignettage — §3.5 */
.cadre-campagne::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5,5,5,.72) 100%);
}

/* Image placée EN FOND de section, avec du texte par-dessus.
   Le cadrage change à chaque largeur d'écran : sans voile fixe, une zone
   claire de la photo peut passer sous le texte et faire tomber le contraste
   sous le seuil AA. Le voile est donc calculé pour le pire cas. */
.cadre-campagne.fond .img-campagne {
  filter: contrast(1.04) saturate(.92) brightness(.46);
}
.cadre-campagne.fond::after {
  background:
    linear-gradient(rgba(5, 5, 5, .82), rgba(5, 5, 5, .88)),
    radial-gradient(120% 90% at 50% 45%, transparent 30%, rgba(5, 5, 5, .6) 100%);
}

/* Fondu vers le noir sur un bord : la photo n'est jamais un rectangle posé */
/* Fondu d'un bord vers le noir de la page.
   ATTENTION : réalisé en calque ::after et NON avec mask-image. Le masque fait
   disparaître l'image entière sur certains moteurs de rendu — vérifié sur ce
   projet. La classe se pose sur le CADRE, pas sur l'<img>. */
.cadre-campagne.fondu-droite::after {
  background:
    linear-gradient(to right, transparent 52%, rgba(5,5,5,.6) 80%, var(--noir) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5,5,5,.72) 100%);
}
.cadre-campagne.fondu-gauche::after {
  background:
    linear-gradient(to left, transparent 52%, rgba(5,5,5,.6) 80%, var(--noir) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5,5,5,.72) 100%);
}
.cadre-campagne.fondu-bas::after {
  background:
    linear-gradient(to bottom, transparent 48%, rgba(5,5,5,.6) 78%, var(--noir) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5,5,5,.72) 100%);
}

/* Sur mobile les blocs s'empilent : un fondu latéral n'a plus de sens,
   il masquerait un tiers de l'image. */
@media (max-width: 900px) {
  .cadre-campagne.fondu-droite::after,
  .cadre-campagne.fondu-gauche::after {
    background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(5,5,5,.6) 100%);
  }
}

/* Boutique : couleur intacte, aucun filtre — lisibilité commerciale */
/* Cadre carré : les packshots fournis sont en 700×500 (paysage). Un cadre
   portrait 4/5 en rognerait près de la moitié de la largeur et couperait les
   flacons ; le carré ne prend qu'environ 20 % et garde le produit entier. */
.img-produit {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition);
}

/* --------------------------------------------------------------------------
   7. EN-TÊTE
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(5, 5, 5, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(110, 101, 82, .28);
}

/* L'en-tête porte logo + 8 liens + panier + téléphone + bouton. Il n'a pas la
   même marge de bord que le contenu, sinon il déborde dès 1440px. */
.entete-interne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.75rem, 1.5vw, 1.5rem);
  padding: .95rem clamp(1.25rem, 2.5vw, 2.75rem);
}

/* Logotype : didone trackée + le ··· du sous-texte — M1/M2 */
.logo {
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  flex-shrink: 0;
}
.logo-nom {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  display: block;
  color: var(--os);
}
/* Pas de « ··· » ici : le geste signature reste réservé au contenu
   (sur-titres, séparateurs de section). Sur le logo et dans la navigation,
   il surchargeait une zone déjà dense. */
.logo-sous {
  font-family: var(--texte);
  font-size: .5rem;
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--os-attenue);
  display: block;
  margin-top: .42em;
}

.logo::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: .5em;
  background: var(--prisme);
  opacity: 0;
  transition: opacity var(--transition-court);
}
.logo:hover::after, .logo:focus-visible::after { opacity: .75; }

/* Navigation — séparateur ··· entre les items — §3.7-2 */
.nav { display: flex; align-items: center; gap: 0; }

.nav a {
  font-family: var(--texte);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--os-attenue);
  padding: .95rem clamp(.4rem, .8vw, .85rem);   /* cible ≥ 44px de haut */
  position: relative;
  white-space: nowrap;
  transition: color var(--transition-court);
}

/* Entre 1280 et 1600px, on resserre le tracking de la navigation pour que
   la barre tienne sans renvoyer les portables vers le menu burger. */
@media (min-width: 1280px) and (max-width: 1600px) {
  .nav a { letter-spacing: .16em; }
  .entete-actions { gap: .35rem; }
  .tel-entete { letter-spacing: .1em; }
  .panier-entete { letter-spacing: .12em; }
  .entete-actions .bouton { padding: .95rem 1.3rem; letter-spacing: .18em; }
}
.nav a:hover, .nav a:focus-visible { color: var(--os); }

/* Aucun séparateur « ··· » entre les items : l'espacement suffit à les
   distinguer, et le motif reste ainsi le marqueur du CONTENU. */

/* Filet prismatique sous l'onglet actif — §3.7-6 */
.nav a[aria-current="page"] { color: var(--os); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: .55rem;
  height: 1px;
  background: var(--prisme);
}

.entete-actions { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }

/* Téléphone toujours visible — §5 */
.tel-entete {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-decoration: none;
  color: var(--os);
  white-space: nowrap;
  padding: .8rem .5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px dotted var(--champagne-sourd);
}
.tel-entete:hover { border-bottom-style: solid; border-bottom-color: var(--champagne); }

/* --------------------------------------------------------------------------
   8. BOUTONS
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .95rem 2.1rem;
  font-family: var(--texte);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--champagne);
  background: transparent;
  color: var(--champagne);
  cursor: pointer;
  border-radius: 0;              /* zéro arrondi — §3.5 */
  transition: background var(--transition-court), color var(--transition-court);
}
.bouton:hover, .bouton:focus-visible {
  background: var(--champagne);
  color: var(--noir);
}

/* Micro-interactions — le retour au clic.
   Rien ne doit paraître inerte : chaque élément actionnable s'enfonce
   légèrement quand on appuie, ce qui confirme la prise en compte du geste
   avant même que la page ne réagisse. Amplitude volontairement faible :
   le registre du site est retenu. */
.bouton,
.produit-ajouter,
.qte-bouton,
.config-onglet,
.variante-bouton {
  transition:
    background var(--transition-court),
    color var(--transition-court),
    border-color var(--transition-court),
    transform 140ms cubic-bezier(.16, 1, .3, 1);
}
.bouton:active,
.produit-ajouter:active,
.qte-bouton:active,
.config-onglet:active,
.variante-bouton:active { transform: translateY(1px) scale(.985); }

/* Les tuiles produit se soulèvent d'un cheveu au survol : c'est ce qui
   signale qu'elles sont vivantes, sans ombre portée (interdite au §3.5). */
.produit {
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
}
.produit:hover,
.produit:focus-within { transform: translateY(-4px); }

.bouton-plein {
  background: var(--champagne);
  color: var(--noir);
}
.bouton-plein:hover, .bouton-plein:focus-visible {
  background: var(--os);
  border-color: var(--os);
  color: var(--noir);
}

/* --------------------------------------------------------------------------
   9. HERO — asymétrique, texte ancré en bas à gauche. Jamais centré. — §9
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--noir);
}

.hero-media {
  position: absolute;
  inset: -8% 0 -8% 0;            /* marge pour le parallax */
  z-index: 0;
  will-change: transform;
}
.hero-media img, .hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 30%;
  filter: grayscale(1) contrast(1.2) brightness(.8);
  /* Ken Burns : 1 % d'amplitude sur 40 secondes, aller-retour. À cette
     lenteur l'œil ne suit pas le mouvement, il perçoit seulement que
     l'image n'est pas figée. Au-delà, ça devient un diaporama. */
  animation: respiration 40s ease-in-out infinite alternate;
  transform-origin: 52% 35%;
}

@keyframes respiration {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,   rgba(5,5,5,.94) 0%, rgba(5,5,5,.35) 48%, rgba(5,5,5,.55) 100%),
    linear-gradient(to right, rgba(5,5,5,.9) 0%, transparent 62%);
}

.hero-contenu {
  position: relative;
  z-index: 2;
  padding: 0 var(--bord) clamp(3.5rem, 9vh, 7rem);
  max-width: 58rem;
}

.hero-titre {
  font-family: var(--display);
  font-size: var(--t-display);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: .9;
  margin: 0 0 1.6rem;
}
.hero-titre em {
  display: block;
  font-style: italic;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--champagne);
  font-size: .46em;
  line-height: 1.1;
  margin-top: .35em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2.4rem;
}

.hero-bas {
  position: absolute;
  z-index: 2;
  right: var(--bord);
  bottom: clamp(3.5rem, 9vh, 7rem);
  text-align: right;
  font-size: var(--t-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--os-attenue);
  line-height: 2.1;
}
@media (max-width: 1100px) { .hero-bas { display: none; } }

/* --------------------------------------------------------------------------
   10. RÉGIME DOCUMENT — tableau éditorial des prestations — §3.4
   -------------------------------------------------------------------------- */
.tableau-prestations { border-top: 1px solid rgba(110,101,82,.3); }

.ligne-prestation {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  background-image: radial-gradient(circle, var(--champagne-sourd) 0 1px, transparent 1.2px);
  background-size: 9px 1px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  transition: padding-inline var(--transition), color var(--transition-court);
}
.ligne-prestation:hover,
.ligne-prestation:focus-visible { padding-inline: .9rem; }
.ligne-prestation:hover .ligne-nom { color: var(--champagne); }

.ligne-nom {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.05;
  transition: color var(--transition-court);
}
.ligne-note {
  display: block;
  font-family: var(--texte);
  font-size: var(--t-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--os-attenue);
  margin-top: .6rem;
  max-width: 46ch;
  line-height: 1.7;
}
.ligne-prix {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champagne);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .ligne-prestation { grid-template-columns: 1fr; gap: .5rem; }
  .ligne-prestation:hover { padding-inline: 0; }
}

/* Tableau de tarifs / horaires — dense, filets pointillés */
.tableau-info { width: 100%; border-collapse: collapse; text-align: left; }
.tableau-info caption {
  text-align: left;
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--champagne);
  padding-bottom: 1.4rem;
}
.tableau-info th, .tableau-info td {
  padding: .95rem 0;
  font-weight: 300;
  vertical-align: baseline;
  background-image: radial-gradient(circle, var(--champagne-sourd) 0 1px, transparent 1.2px);
  background-size: 9px 1px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}
.tableau-info th {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--os-attenue);
  padding-right: 1.5rem;
}
.tableau-info td { color: var(--os); }
.tableau-info td.prix { text-align: right; color: var(--champagne); white-space: nowrap; }

/* --------------------------------------------------------------------------
   11. BOUTIQUE
   -------------------------------------------------------------------------- */
.gamme-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
  margin: 0 0 var(--air-document);
  padding: 0;
  list-style: none;
}

.produit { display: flex; flex-direction: column; }

.produit-media {
  overflow: hidden;
  background: var(--encre);
  margin-bottom: 1.1rem;
}
.produit:hover .img-produit,
.produit:focus-within .img-produit { transform: scale(1.04); }

.produit-nom {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: .05em;
  margin: 0 0 .35rem;
  line-height: 1.25;
}
.produit-format {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--os-attenue);
  margin: 0 0 .85rem;
}

/* Description : mesure courte, interlignage serré — c'est du texte de
   catalogue, pas du texte de lecture. */
.produit-desc {
  font-size: .85rem;
  line-height: 1.65;
  color: var(--os-attenue);
  margin: 0 0 1rem;
}

/* Le prix est l'information que l'œil cherche : didone, pas de capitales. */
.produit-prix {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: .04em;
  color: var(--os);
  margin: 0 0 .5rem;
}
.produit-prix::before {
  content: "···";
  display: block;
  font-family: var(--texte);
  font-size: .6rem;
  letter-spacing: .2em;
  color: var(--champagne-sourd);
  margin-bottom: .5rem;
}
.produit-lien {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--champagne);
  border-bottom: 1px dotted var(--champagne-sourd);
  padding: .5rem 0;
  margin-top: auto;
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: border-color var(--transition-court), color var(--transition-court);
}
.produit-lien:hover, .produit-lien:focus-visible {
  border-bottom-style: solid;
  border-bottom-color: var(--champagne);
  color: var(--os);
}

/* --------------------------------------------------------------------------
   12. CONFIGURATEUR — trois textures — M5 / §4
   -------------------------------------------------------------------------- */
.configurateur { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .configurateur { grid-template-columns: 1fr 1fr; align-items: center; }
}

.config-onglets {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(110,101,82,.3);
}

.config-onglet {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  color: var(--os-attenue);
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  min-height: 48px;
  background-image: radial-gradient(circle, var(--champagne-sourd) 0 1px, transparent 1.2px);
  background-size: 9px 1px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  transition: color var(--transition-court), padding-left var(--transition);
}
.config-onglet:hover { color: var(--os); padding-left: .8rem; }
.config-onglet[aria-selected="true"] { color: var(--champagne); padding-left: .8rem; }
.config-onglet[aria-selected="true"]::before {
  content: "···";
  margin-right: .6em;
  letter-spacing: .14em;
}

.config-panneau[hidden] { display: none; }
.config-visuel { position: relative; overflow: hidden; }
.config-visuel img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* --------------------------------------------------------------------------
   13. FORMULAIRE — libellés visibles, jamais de placeholder seul — §5
   -------------------------------------------------------------------------- */
.champ { margin-bottom: 1.9rem; }

.champ label {
  display: block;
  font-family: var(--texte);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: .75rem;
}
.champ .aide {
  display: block;
  font-size: .8rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--os-attenue);
  margin-top: .4rem;
  line-height: 1.6;
}

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  min-height: 48px;
  background: var(--encre);
  border: 1px solid rgba(110,101,82,.42);
  border-radius: 0;
  color: var(--os);
  font-family: var(--texte);
  font-weight: 300;
  font-size: var(--t-body);
  padding: .85rem 1rem;
  transition: border-color var(--transition-court);
}
.champ textarea { min-height: 10rem; resize: vertical; line-height: 1.7; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  border-color: var(--champagne);
  outline: none;
}
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
}

.champ-case {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1.9rem;
}
.champ-case input {
  width: 20px; height: 20px;
  margin: .25rem 0 0;
  min-height: 0;
  accent-color: var(--champagne);
  flex-shrink: 0;
}
.champ-case label {
  font-family: var(--texte);
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--os-attenue);
  line-height: 1.65;
  margin: 0;
}

.form-etat {
  border-left: 1px solid var(--champagne);
  padding: 1rem 0 1rem 1.3rem;
  color: var(--champagne);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

/* Précision contextuelle, révélée selon le choix du formulaire */
.form-note {
  border-left: 1px solid var(--champagne-sourd);
  padding: .2rem 0 .2rem 1.3rem;
  color: var(--os-attenue);
  font-size: .85rem;
  line-height: 1.7;
  margin: -.6rem 0 1.9rem;
}

/* --------------------------------------------------------------------------
   14. PIED DE PAGE
   -------------------------------------------------------------------------- */
.pied { padding: var(--air-document) 0 3rem; border-top: 1px solid rgba(110,101,82,.28); }

.pied-grille {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-inline: var(--bord);
}

.pied h3 {
  font-family: var(--texte);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 1.5rem;
}
.pied h3::before { content: "··· "; color: var(--champagne-sourd); }

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .2rem; }
.pied a {
  text-decoration: none;
  color: var(--os-attenue);
  font-size: .9rem;
  padding: .55rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-court);
}
.pied a:hover, .pied a:focus-visible { color: var(--os); }
.pied address { font-style: normal; color: var(--os-attenue); font-size: .9rem; }

.pied-bas {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: 2rem var(--bord) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--os-attenue);
}

/* --------------------------------------------------------------------------
   15. BANDEAU COOKIES — refuser aussi simple qu'accepter (CNIL)
   -------------------------------------------------------------------------- */
.cookies {
  position: fixed;
  left: var(--bord);
  right: var(--bord);
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 9000;
  background: var(--encre);
  border: 1px solid rgba(110,101,82,.5);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: none;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 62rem;
  margin-inline: auto;
}
.cookies[data-visible="true"] { display: flex; }
.cookies p { margin: 0; max-width: 46ch; font-size: .88rem; line-height: 1.7; color: var(--os-attenue); }
.cookies-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.cookies-actions .bouton { padding: .8rem 1.5rem; min-height: 44px; }

/* --------------------------------------------------------------------------
   16. RÉVÉLATION AU DÉFILEMENT — §4
   Mouvements distincts par section. Jamais un fondu uniforme.
   -------------------------------------------------------------------------- */
/* Sécurité : l'état masqué n'est appliqué QUE si le JS a démarré (classe .js
   posée sur <html>). Sans JavaScript, tout le contenu reste visible. */
.js [data-anim] { opacity: 0; will-change: transform, opacity; }
.js [data-anim].vu { opacity: 1; }

.js [data-anim="monter"]   { transform: translateY(24px); transition: opacity 1000ms ease, transform 1000ms cubic-bezier(.16,1,.3,1); }
.js [data-anim="glisser"]  { transform: translateY(18px); transition: opacity 760ms ease, transform 760ms cubic-bezier(.16,1,.3,1); }
.js [data-anim="zoom"]     { transform: scale(1.06);      transition: opacity 1400ms ease, transform 1400ms cubic-bezier(.16,1,.3,1); }
.js [data-anim="rideau"]   { clip-path: inset(0 0 100% 0); transition: opacity 900ms ease, clip-path 1200ms cubic-bezier(.16,1,.3,1); }

.js [data-anim].vu { transform: none; clip-path: inset(0 0 0 0); }

/* --------------------------------------------------------------------------
   17. ACCESSIBILITÉ — mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .filet.tracer { background-size: 9px 1px !important; }
  .hero-media { transform: none !important; }

  /* Ambiance et micro-interactions neutralisées : le Ken Burns du hero et la
     pulsation du compteur sont du confort, jamais de l'information. Le toast
     reste affiché, lui — c'est un retour fonctionnel, pas une animation. */
  .hero-media img, .hero-media video { animation: none !important; transform: none !important; }
  .panier-nombre.pulse { animation: none !important; }
  .produit:hover, .produit:focus-within { transform: none !important; }
  .toast { transition: none !important; }
}

/* --------------------------------------------------------------------------
   18. NAVIGATION MOBILE
   -------------------------------------------------------------------------- */
.burger {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(110,101,82,.5);
  border-radius: 0;
  color: var(--os);
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  min-height: 44px;
  padding: .7rem 1rem;
  cursor: pointer;
}

@media (max-width: 1279px) {
  .burger { display: inline-block; }

  /* IMPORTANT : un ancêtre porteur de backdrop-filter devient bloc conteneur
     des descendants en position:fixed. Le panneau de navigation resterait
     alors enfermé dans la hauteur de l'en-tête. On retire donc le flou en
     mobile — l'en-tête y est opaque, ce qui préserve aussi le contraste. */
  .entete {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--noir);
  }

  .nav {
    position: fixed;
    inset: 0;
    background: var(--noir);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;   /* jamais center : le contenu déborderait
                                      vers le haut, hors d'atteinte */
    gap: .2rem;
    padding: 5.5rem var(--bord) 3rem;
    transform: translateY(-100%);
    transition: transform 620ms cubic-bezier(.16,1,.3,1);
    z-index: 950;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav[data-ouvert="true"] { transform: translateY(0); }

  .nav a {
    font-family: var(--display);
    font-size: clamp(1.5rem, 7vw, 2.4rem);
    letter-spacing: .1em;
    padding: .55rem 0;
    color: var(--os);
    width: 100%;
  }
  /* Panneau mobile : pas de « ··· » non plus, seulement de l'espacement. */
  .nav a { padding-block: .7rem; }
  .nav a[aria-current="page"]::after { left: 0; right: auto; width: 4rem; bottom: .3rem; }

  .nav-fermer {
    position: absolute;
    top: 1rem; right: var(--bord);
    background: transparent;
    border: 1px solid rgba(110,101,82,.5);
    border-radius: 0;
    color: var(--os);
    font-family: var(--texte);
    font-size: var(--t-label);
    letter-spacing: .26em;
    text-transform: uppercase;
    min-height: 44px;
    padding: .7rem 1rem;
    cursor: pointer;
  }
}
@media (min-width: 1280px) { .nav-fermer { display: none; } }

/* CTA « Réserver » et lien « Panier » à l'intérieur du panneau de navigation
   mobile. Masqués en desktop, où l'en-tête les porte déjà. */
.nav-reserver,
.nav-panier { display: none; }

@media (max-width: 1279px) {
  .nav-panier { display: block; }

  .nav-reserver {
    display: inline-flex;
    margin-top: 2rem;
    width: auto;
    font-family: var(--texte);
    font-size: var(--t-label);
    letter-spacing: .3em;
    color: var(--noir);
  }
  .nav a.nav-reserver + a::before,
  .nav a + a.nav-reserver::before { content: none; }
  .nav-reserver:hover, .nav-reserver:focus-visible { color: var(--noir); }
}

/* En dessous de 680px, l'en-tête ne peut plus tenir logo + téléphone + menu
   + bouton sans déborder. Le bouton passe dans le panneau de navigation ;
   le téléphone, lui, reste visible en permanence (exigence du §5). */
@media (max-width: 680px) {
  .entete-actions .bouton { display: none; }
}

@media (max-width: 520px) {
  .tel-entete { font-size: .66rem; letter-spacing: .08em; }
  .panier-entete { font-size: .66rem; letter-spacing: .08em; padding-inline: .35rem; }
  .logo-sous { display: none; }
  .logo-nom { font-size: 1rem; letter-spacing: .22em; }
  .burger { padding: .7rem .8rem; letter-spacing: .18em; }
}

/* ==========================================================================
   ADAPTATION MOBILE
   Le trafic d'un salon vient majoritairement du téléphone : ces règles ne
   sont pas un repli, elles définissent la mise en page de référence.
   ========================================================================== */
@media (max-width: 760px) {

  /* La boutique doit ressembler à une boutique : deux colonnes de produits,
     comme sur n'importe quelle application d'achat. */
  .grille-produits {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 2.2rem) clamp(.8rem, 3vw, 1.2rem);
  }
  .produit-nom { font-size: .95rem; }
  .produit-format { font-size: .58rem; letter-spacing: .14em; }
  .produit-prix { font-size: 1.1rem; }
  .produit-prix::before { font-size: .5rem; margin-bottom: .35rem; }
  .produit-ajouter { font-size: .58rem; letter-spacing: .12em; padding: .8rem .4rem; }

  /* La description détaillée alourdit une grille à deux colonnes sur 375px.
     Elle reste dans le HTML pour le référencement et les lecteurs d'écran. */
  .produit-desc { display: none; }

  /* Titres : on desserre le tracking, sinon les mots se coupent mal */
  h1, .h1 { letter-spacing: .05em; }
  h2, .h2 { letter-spacing: .07em; }
  .hero-titre { letter-spacing: .02em; }
  .bloc-citation { max-width: none; }

  /* Tableaux d'information : libellé au-dessus de la valeur */
  .tableau-info th,
  .tableau-info td { display: block; width: 100%; }
  .tableau-info th { padding-bottom: .2rem; background-image: none; }
  .tableau-info td { padding-top: 0; }
  .tableau-info td.prix { text-align: left; }

  /* Deux colonnes d'avis deviennent une seule */
  .avis-liste { columns: 1; }

  .panier-recap { padding-top: 1.5rem; }

  /* Les blocs image + texte s'empilent avec l'image d'abord */
  .duo.inverse > :first-child { order: 0; }

  /* Respiration : on réduit les grands aplats, coûteux en scroll sur mobile */
  .section-campagne { padding-block: clamp(5rem, 14vh, 8rem); }
}

/* Les téléphones courants font 390 à 430 px de large : ils gardent les deux
   colonnes, comme n'importe quelle application d'achat. La colonne unique est
   réservée aux écrans vraiment étroits, où deux tuiles seraient illisibles. */
@media (max-width: 359px) {
  .grille-produits { grid-template-columns: 1fr; }
  .produit-desc { display: block; }
  .produit-nom { font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   19. BLOCS ÉDITORIAUX DIVERS
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   PANIER
   -------------------------------------------------------------------------- */

/* Lien panier dans l'en-tête, au même gabarit que le téléphone */
.panier-entete {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--os);
  white-space: nowrap;
  padding: .8rem .5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px dotted var(--champagne-sourd);
  transition: border-color var(--transition-court);
}
.panier-entete:hover, .panier-entete:focus-visible {
  border-bottom-style: solid;
  border-bottom-color: var(--champagne);
}

.panier-nombre {
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: 0;
  color: var(--champagne);
  min-width: 1.4em;
  text-align: center;
}
.panier-nombre[data-vide="true"] { color: var(--os-attenue); }

/* Bouton « Ajouter au panier » sur les fiches produits */
.produit-ajouter {
  appearance: none;
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  padding: .85rem 1rem;
  border: 1px solid var(--champagne);
  border-radius: 0;
  background: transparent;
  color: var(--champagne);
  font-family: var(--texte);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-court), color var(--transition-court);
}
.produit-ajouter:hover, .produit-ajouter:focus-visible {
  background: var(--champagne);
  color: var(--noir);
}
.produit-ajouter[data-ajoute="true"] {
  background: var(--champagne);
  color: var(--noir);
  border-color: var(--champagne);
}

/* Liste du panier */
.panier-liste { list-style: none; margin: 0; padding: 0; }

.panier-ligne {
  display: grid;
  grid-template-columns: 88px 1fr auto auto auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  background-image: radial-gradient(circle, var(--champagne-sourd) 0 1px, transparent 1.2px);
  background-size: 9px 1px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}

.panier-visuel { background: var(--encre); }
.panier-visuel img { width: 88px; height: 88px; object-fit: cover; }

.panier-nom {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  margin: 0 0 .3rem;
  line-height: 1.3;
}
.panier-format,
.panier-pu {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--os-attenue);
  margin: 0;
}

.panier-qte { display: flex; align-items: center; gap: .3rem; }

.qte-bouton {
  appearance: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(110, 101, 82, .5);
  border-radius: 0;
  background: transparent;
  color: var(--os);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-court), color var(--transition-court);
}
.qte-bouton:hover, .qte-bouton:focus-visible {
  border-color: var(--champagne);
  color: var(--champagne);
}

.qte-champ {
  width: 3.5rem;
  min-height: 44px;
  text-align: center;
  background: var(--encre);
  border: 1px solid rgba(110, 101, 82, .5);
  border-radius: 0;
  color: var(--os);
  font-family: var(--texte);
  font-size: .95rem;
}

.panier-ligne-total {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--os);
  margin: 0;
  white-space: nowrap;
}

.panier-retirer {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--champagne-sourd);
  border-radius: 0;
  color: var(--os-attenue);
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .5rem 0;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--transition-court), border-color var(--transition-court);
}
.panier-retirer:hover, .panier-retirer:focus-visible {
  color: var(--os);
  border-bottom-style: solid;
  border-bottom-color: var(--champagne);
}

@media (max-width: 760px) {
  .panier-ligne {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "visuel infos"
      "qte    total"
      "retirer retirer";
    row-gap: 1rem;
  }
  .panier-visuel { grid-area: visuel; }
  .panier-visuel img { width: 72px; height: 72px; }
  .panier-infos { grid-area: infos; }
  .panier-qte { grid-area: qte; }
  .panier-ligne-total { grid-area: total; text-align: right; align-self: center; }
  .panier-retirer { grid-area: retirer; justify-self: start; }
}

/* Récapitulatif */
.panier-recap { border-top: 1px solid rgba(110, 101, 82, .35); padding-top: 2rem; }

.panier-total-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: .8rem 0;
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--os-attenue);
}
.panier-total-ligne span:last-child { color: var(--os); }

.panier-total-ligne.majeur {
  border-top: 1px solid rgba(110, 101, 82, .35);
  margin-top: .8rem;
  padding-top: 1.4rem;
}
.panier-total-ligne.majeur span:last-child {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: .03em;
  text-transform: none;
  color: var(--champagne);
}

.panier-franco {
  font-family: var(--texte);
  font-size: .82rem;
  color: var(--champagne);
  margin: 1rem 0 0;
}

/* ==========================================================================
   MARQUE AMAXXON
   Le logotype réel est une didone capitale à très large tracking, suivie de
   « ···PREMIUM COSMETICS ». On le rejoue en HTML plutôt qu'en image : net à
   toute taille, sélectionnable, et lisible par un moteur de recherche.
   ========================================================================== */
/* Visuel de campagne, seul et sans voile : la photo est déjà sur fond noir et
   porte le logotype de la marque. Un fondu du bas la raccorde à la page. */
.marque-visuel {
  position: relative;
  background: var(--noir);
  overflow: hidden;
}
/* Le visuel source fait 1080×1350. Étiré sur toute la largeur d'un écran de
   1440px, il était agrandi d'un tiers — d'où le flou. On le présente donc à
   sa taille native, centré sur le noir : jamais d'agrandissement, et le
   cadrage complet reste visible au lieu d'être rogné. */
.marque-visuel img {
  width: 100%;
  max-width: 1080px;      /* = largeur native, plafond absolu */
  margin-inline: auto;
  height: auto;
  aspect-ratio: 1080 / 1350;
  object-fit: contain;
  filter: contrast(1.04) saturate(1.04);
}

/* Fondu vers le noir de la page. Réalisé avec un calque en surimpression et
   non avec mask-image : le masque fait disparaître l'image entière sur
   certains moteurs de rendu. */
.marque-visuel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(5,5,5,0) 0%, rgba(5,5,5,.7) 60%, var(--noir) 100%);
}

.marque-intro {
  text-align: center;
  padding: clamp(2.5rem, 6vh, 4rem) var(--bord) clamp(3rem, 7vh, 5rem);
  margin-top: -6vh;              /* remonte dans le fondu de l'image */
  position: relative;
  z-index: 2;
}

.marque-logo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 11vw, 8rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  /* Le tracking pousse la dernière lettre : on recentre optiquement. */
  text-indent: .18em;
  color: var(--os);
}

.marque-sous {
  font-family: var(--texte);
  font-weight: 400;
  font-size: clamp(.6rem, 1.4vw, .8rem);
  letter-spacing: .52em;
  text-transform: uppercase;
  color: var(--os-attenue);
  margin: clamp(1rem, 2.5vw, 1.8rem) 0 0;
  text-indent: .52em;
}
.marque-sous::before { content: "··· "; color: var(--champagne); }

.marque-accroche {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  line-height: 1.4;
  color: var(--champagne);
  max-width: 34ch;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
}

/* Bandeau de preuves — remplace les « 3 cartes à icônes » par une ligne
   typographique séparée par des filets pointillés verticaux. */
.marque-preuves {
  list-style: none;
  margin: 0;
  padding: clamp(2rem, 4vw, 3rem) var(--bord);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  border-block: 1px solid rgba(110, 101, 82, .3);
}
.marque-preuves li {
  text-align: center;
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--os-attenue);
  line-height: 1.9;
  position: relative;
}
.marque-preuves li + li::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(.5rem, 1vw, 1rem));
  top: 10%; bottom: 10%;
  width: 1px;
  background-image: radial-gradient(circle, var(--champagne-sourd) 0 1px, transparent 1.2px);
  background-size: 1px 9px;
  background-repeat: repeat-y;
}
.marque-preuves strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--champagne);
  margin-bottom: .4rem;
}
/* En dessous de 700px la ligne devient une grille 2×2 : les filets verticaux
   n'ont plus de sens (ils tomberaient en bord de grille), l'espacement suffit. */
@media (max-width: 700px) {
  .marque-preuves {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.6rem, 5vw, 2.2rem) 1rem;
  }
  .marque-preuves li + li::before { display: none; }
}

/* Bandeau d'ouverture de gamme : image pleine largeur + nom en surimpression */
.gamme-banniere {
  position: relative;
  overflow: hidden;
  min-height: clamp(220px, 32vw, 380px);
  display: flex;
  align-items: flex-end;
  /* <figure> porte une marge latérale de 40px par défaut : elle rétrécirait
     la bannière de 80px et casserait le plein cadre. */
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}
.gamme-banniere img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.02) brightness(.62);
  transition: transform 1400ms cubic-bezier(.16, 1, .3, 1);
}
.gamme-banniere:hover img { transform: scale(1.04); }
.gamme-banniere::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,.94) 0%, rgba(5,5,5,.25) 70%);
}
.gamme-banniere-texte {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
}
.gamme-banniere-nom {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5.5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1;
  margin: 0;
  color: var(--os);
}
.gamme-banniere-tag {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: .9rem 0 0;
}
.gamme-banniere-tag::before { content: "··· "; color: var(--champagne-sourd); }

/* ==========================================================================
   FICHE PRODUIT — contenance, quantité, ajout
   ========================================================================== */

/* Boutons de contenance. Un seul actif, signalé par le champagne plein —
   pas de coche ni d'icône, le site n'en utilise aucune. */
.variantes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.variante-bouton {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(110, 101, 82, .5);
  border-radius: 0;
  color: var(--os-attenue);
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .6rem .85rem;
  min-height: 40px;
  cursor: pointer;
}
.variante-bouton:hover { border-color: var(--champagne); color: var(--os); }
.variante-bouton[aria-pressed="true"] {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--noir);
}
/* Une seule contenance : le bouton devient une simple étiquette, non cliquable */
.variantes[data-unique="true"] .variante-bouton {
  cursor: default;
  pointer-events: none;
  background: transparent;
  border-color: rgba(110, 101, 82, .35);
  color: var(--os-attenue);
}

/* Ligne quantité + ajout */
.produit-achat {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  margin-top: auto;
}
.produit-achat .produit-ajouter { margin-top: 0; flex: 1 1 auto; }

.qte-groupe {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid rgba(110, 101, 82, .5);
}
.qte-groupe .qte-bouton {
  width: 36px;
  height: auto;
  min-height: 48px;
  border: 0;
  background: transparent;
}
.qte-groupe .qte-champ {
  width: 2.6rem;
  min-height: 48px;
  border: 0;
  border-inline: 1px solid rgba(110, 101, 82, .5);
  background: transparent;
  font-size: .9rem;
  -moz-appearance: textfield;
}
.qte-groupe .qte-champ::-webkit-outer-spin-button,
.qte-groupe .qte-champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 760px) {
  .produit-achat { flex-wrap: wrap; }
  .qte-groupe { flex: 1 1 100%; justify-content: center; }
  .produit-achat .produit-ajouter { flex: 1 1 100%; }
  .variante-bouton { font-size: .58rem; letter-spacing: .1em; padding: .55rem .6rem; }
}

/* ==========================================================================
   VALIDATION DE COMMANDE — choix du mode de remise
   Pas de cartes à ombre : la même liste à filets pointillés que les
   prestations, le choix actif se signalant par le champagne.
   ========================================================================== */
.modes-remise {
  list-style: none;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding: 0;
  border-top: 1px solid rgba(110, 101, 82, .3);
}

.mode-remise { position: relative; }

/* Le bouton radio natif reste présent pour le clavier et les lecteurs
   d'écran, mais il est masqué visuellement : c'est le libellé entier qui
   devient la cible, bien plus large que 44px. */
.mode-remise input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}

.mode-remise label {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: baseline;
  gap: clamp(.8rem, 2vw, 1.4rem);
  padding: clamp(1.3rem, 3vw, 1.9rem) 0;
  cursor: pointer;
  background-image: radial-gradient(circle, var(--champagne-sourd) 0 1px, transparent 1.2px);
  background-size: 9px 1px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  transition: padding-inline var(--transition);
}
.mode-remise label:hover { padding-inline: .7rem; }

/* Pastille de sélection, dessinée en CSS — aucune icône sur ce site */
.mode-remise label::before {
  content: "";
  width: 14px; height: 14px;
  border: 1px solid var(--champagne-sourd);
  border-radius: 50%;
  transform: translateY(.15em);
  transition: background var(--transition-court), border-color var(--transition-court);
}
.mode-remise input:checked + label::before {
  background: var(--champagne);
  border-color: var(--champagne);
  box-shadow: inset 0 0 0 3px var(--noir);
}
.mode-remise input:focus-visible + label {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}
.mode-remise input:checked + label { padding-inline: .7rem; }

.mode-nom {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  letter-spacing: .05em;
  color: var(--os-attenue);
  transition: color var(--transition-court);
}
.mode-remise input:checked + label .mode-nom { color: var(--os); }

.mode-detail {
  display: block;
  font-family: var(--texte);
  font-size: .85rem;
  line-height: 1.65;
  color: var(--os-attenue);
  margin-top: .45rem;
  max-width: 46ch;
}

.mode-prix {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--champagne);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .mode-remise label { grid-template-columns: 1.2rem 1fr; row-gap: .5rem; }
  .mode-prix { grid-column: 2; }
}

/* Groupe de champs révélé selon le mode choisi */
.champs-conditionnels[hidden] { display: none; }
.champs-conditionnels {
  border-left: 1px solid var(--champagne-sourd);
  padding-left: clamp(1.2rem, 3vw, 1.8rem);
  margin-bottom: 2rem;
}

/* Récapitulatif compact de la commande */
.recap-ligne {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .7rem 0;
  font-size: .9rem;
  color: var(--os-attenue);
  background-image: radial-gradient(circle, var(--champagne-sourd) 0 1px, transparent 1.2px);
  background-size: 9px 1px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}
.recap-ligne span:last-child { color: var(--os); white-space: nowrap; }

/* ==========================================================================
   RETOUR VISUEL À L'AJOUT AU PANIER
   ========================================================================== */
.toast {
  position: fixed;
  z-index: 9500;
  left: var(--bord);
  right: var(--bord);
  bottom: clamp(1rem, 3vh, 2rem);
  max-width: 26rem;
  margin-left: auto;            /* ancré à droite en desktop */
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1rem;
  background: var(--encre);
  border: 1px solid var(--champagne-sourd);
  /* Le filet prismatique signe l'événement, sans introduire de couleur vive */
  border-top: 1px solid transparent;
  border-image: var(--prisme) 1;
  border-image-slice: 1;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}
.toast[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.toast img {
  width: 48px; height: 48px;
  object-fit: cover;
  background: var(--noir);
  flex-shrink: 0;
}
.toast-corps { flex: 1 1 auto; min-width: 0; }
.toast-titre {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 .25rem;
}
.toast-produit {
  font-family: var(--display);
  font-size: .95rem;
  color: var(--os);
  margin: 0;
  line-height: 1.3;
}
.toast-lien {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champagne);
  text-decoration: none;
  border-bottom: 1px dotted var(--champagne-sourd);
  padding: .5rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.toast-lien:hover { border-bottom-style: solid; border-bottom-color: var(--champagne); }

.toast-fermer {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--os-attenue);
  font-size: 1.1rem;
  line-height: 1;
  width: 44px; height: 44px;
  cursor: pointer;
  flex-shrink: 0;
}
.toast-fermer:hover { color: var(--os); }

@media (max-width: 560px) {
  .toast { flex-wrap: wrap; }
  .toast-lien { flex: 1 1 100%; }
}

/* Pulsation du compteur : il grossit brièvement, sans changer de couleur */
.panier-nombre.pulse { animation: pulse-panier 620ms cubic-bezier(.16, 1, .3, 1); }
@keyframes pulse-panier {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); color: var(--os); }
  100% { transform: scale(1); }
}

.aplat-buriti { background: var(--buriti); }

/* --------------------------------------------------------------------------
   AVIS CLIENTS
   Pas de cartes à ombre : chaque avis est séparé par le filet pointillé, et
   la note se lit en didone comme un prix. Colonnes en maçonnerie sur desktop.
   -------------------------------------------------------------------------- */
.avis-liste { columns: 1; }
@media (min-width: 900px) { .avis-liste { columns: 2; column-gap: clamp(2rem, 5vw, 4rem); } }

.avis {
  break-inside: avoid;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  background-image: radial-gradient(circle, var(--champagne-sourd) 0 1px, transparent 1.2px);
  background-size: 9px 1px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}

.avis-tete { margin-bottom: 1.4rem; }

.avis-note {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: .06em;
  color: var(--champagne);
  margin: 0 0 .5rem;
}

.avis-auteur {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--os);
  margin: 0 0 .35rem;
}

.avis-meta {
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--os-attenue);
  margin: 0;
}

.avis-texte {
  margin: 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--champagne-sourd);
  color: var(--os-attenue);
  font-size: .92rem;
  line-height: 1.8;
}
.avis-texte p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   TRIPTYQUE — bande d'images en couleur, pleine largeur.
   Sert à combler les grands aplats noirs entre deux sections et à réintroduire
   la couleur des visuels Amaxxon (vert forêt, rouge buriti, reflets prismatiques).
   -------------------------------------------------------------------------- */
.triptyque {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;                       /* un filet de noir, pas une gouttière */
  margin: 0;
  padding: 0;
  list-style: none;
}

.triptyque li { position: relative; overflow: hidden; background: var(--encre); }

.triptyque img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
  transition: transform 1200ms cubic-bezier(.16, 1, .3, 1);
}
.triptyque li:hover img { transform: scale(1.05); }

/* Légende posée sur l'image, lisible grâce au dégradé du bas */
.triptyque figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3.5rem 1.4rem 1.2rem;
  font-family: var(--texte);
  font-size: var(--t-label);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--os);
  background: linear-gradient(to top, rgba(5,5,5,.92), transparent);
}
.triptyque figcaption::before { content: "··· "; color: var(--champagne); }

@media (max-width: 700px) {
  .triptyque { grid-template-columns: 1fr 1fr; }
  .triptyque li:first-child { grid-column: 1 / -1; }
  .triptyque img { aspect-ratio: 1 / 1; }
  .triptyque li:first-child img { aspect-ratio: 4 / 3; }
  .triptyque figcaption { padding: 2.5rem 1rem .9rem; font-size: .6rem; letter-spacing: .2em; }
}

.bloc-citation {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: .02em;
  font-style: italic;
  max-width: 22ch;
  margin: 0;
}

.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo.inverse > :first-child { order: 2; }
}

.encart {
  border-left: 1px solid var(--champagne-sourd);
  padding-left: clamp(1.2rem, 3vw, 2.2rem);
}

.carte-plan {
  width: 100%;
  min-height: 380px;
  border: 1px solid rgba(110,101,82,.35);
  filter: grayscale(1) contrast(1.05) invert(.92);
}

.etat-vide {
  border: 1px dashed rgba(110,101,82,.55);
  padding: clamp(2rem, 5vw, 3.5rem);
  color: var(--os-attenue);
}

/* Contenu légal : lecture longue, mesure large */
.texte-legal { max-width: 68ch; }
.texte-legal h2 { margin-top: 3.2rem; margin-bottom: 1.2rem; font-size: var(--t-h3); letter-spacing: .1em; }
.texte-legal h3 { margin-top: 2.2rem; margin-bottom: .8rem; font-size: 1.05rem; letter-spacing: .08em; color: var(--champagne); }
.texte-legal p, .texte-legal li { color: var(--os-attenue); }
.texte-legal strong { color: var(--os); font-weight: 400; }