@import url("polices.css");

/* ═══════════════════════════════════════════════════════════════
   AFAYAN — système de design
   Retenue éditoriale : l'image parle, la typographie chuchote.
   L'or n'apparaît JAMAIS en aplat — uniquement en filet et en signe.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Couleurs */
  --ivoire:      #FBFAF7;
  --blanc:       #FFFFFF;
  --encre:       #14110E;
  --encre-douce: #3A342D;
  --grege:       #7A736A;
  --sable:       #E8E2D6;
  --or:          #A67C2E;
  --or-clair:    #C9A961;
  --filet:       rgba(20, 17, 14, .13);
  --filet-clair: rgba(20, 17, 14, .07);
  --voile:       rgba(20, 17, 14, .55);

  /* Typographie */
  --lapidaire: "Marcellus", "Times New Roman", serif;
  --courant:   "Jost", -apple-system, "Segoe UI", sans-serif;

  --t-micro: .625rem;
  --t-mini:  .6875rem;
  --t-petit: .8125rem;
  --t-base:  .9375rem;
  --t-moyen: 1.0625rem;
  --t-grand: clamp(1.5rem, 2.6vw, 2rem);
  --t-titre: clamp(1.9rem, 4vw, 3rem);
  --t-geant: clamp(2.4rem, 6.5vw, 4.75rem);

  /* Interlettrage — la signature du luxe : les capitales respirent */
  --ls-large: .34em;
  --ls-moyen: .19em;
  --ls-fin:   .09em;

  /* Rythme */
  --marge:    clamp(1.25rem, 5vw, 4.5rem);
  --section:  clamp(4.5rem, 10vw, 10rem);
  --contenu:  1600px;
  --texte:    68ch;

  --transition: .55s cubic-bezier(.22, .61, .36, 1);
}

/* ── Socle ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--courant);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 1px solid var(--or);
  outline-offset: 3px;
}

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--encre); color: var(--ivoire);
  padding: .75rem 1.25rem; z-index: 200;
  font-size: var(--t-mini); letter-spacing: var(--ls-moyen); text-transform: uppercase;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* ── Typographie utilitaire ───────────────────────────────────── */
.lapidaire { font-family: var(--lapidaire); font-weight: 400; }

.surtitre {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-large);
  text-transform: uppercase;
  color: var(--grege);
  font-weight: 400;
  margin: 0 0 1.5rem;
}

.titre-section {
  font-family: var(--lapidaire);
  font-size: var(--t-titre);
  line-height: 1.15;
  letter-spacing: .01em;
}

.chapeau {
  color: var(--encre-douce);
  font-size: var(--t-moyen);
  line-height: 1.85;
  max-width: 52ch;
}

.prix { font-variant-numeric: tabular-nums; letter-spacing: var(--ls-fin); }
.prix-barre { color: var(--grege); text-decoration: line-through; margin-inline-end: .6rem; }

/* ── Khatim — l'étoile à huit branches, signature du site ─────── */
.khatim { width: 9px; height: 9px; flex: none; fill: var(--or); }

.filet-khatim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 0 auto;
  max-width: 340px;
}
.filet-khatim::before,
.filet-khatim::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--filet));
}
.filet-khatim::after { background: linear-gradient(90deg, var(--filet), transparent); }

/* ── Boutons ──────────────────────────────────────────────────── */
.bouton, .bouton-filaire, .bouton-clair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.15rem 2.75rem;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-large);
  text-transform: uppercase;
  font-weight: 400;
  border: 1px solid var(--encre);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bouton { background: var(--encre); color: var(--ivoire); }
.bouton:hover { background: transparent; color: var(--encre); }

.bouton-filaire { background: transparent; color: var(--encre); }
.bouton-filaire:hover { background: var(--encre); color: var(--ivoire); }

.bouton-clair { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.65); }
.bouton-clair:hover { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }

.bouton[disabled], .bouton-filaire[disabled] { opacity: .35; pointer-events: none; }

.lien-souligne {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-moyen);
  text-transform: uppercase;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--filet);
  transition: border-color var(--transition);
}
.lien-souligne:hover { border-color: var(--or); }

/* ═══ EN-TÊTE ═════════════════════════════════════════════════ */
.bandeau {
  background: var(--encre);
  color: var(--ivoire);
  text-align: center;
  padding: .7rem 1rem;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-moyen);
  text-transform: uppercase;
}

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ivoire);
  border-bottom: 1px solid var(--filet-clair);
}

.entete-haut {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem var(--marge) 1.1rem;
}

.entete-service, .entete-outils {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-moyen);
  text-transform: uppercase;
}
.entete-outils { justify-content: flex-end; }
.entete-service a:hover, .entete-outils a:hover { color: var(--or); }

.marque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.marque-nom {
  font-family: var(--lapidaire);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing: var(--ls-large);
  text-indent: var(--ls-large);
  line-height: 1;
}
.marque-baseline {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-moyen);
  text-transform: uppercase;
  color: var(--grege);
}

.navigation { border-top: 1px solid var(--filet-clair); }
.navigation ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  padding: 1.1rem var(--marge);
}
.navigation a {
  font-size: var(--t-mini);
  letter-spacing: var(--ls-moyen);
  text-transform: uppercase;
  padding-bottom: .3rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.navigation a:hover, .navigation a[aria-current="page"] { border-color: var(--or); }

.burger { display: none; }

/* ═══ HÉROS ═══════════════════════════════════════════════════ */
.heros {
  position: relative;
  min-height: min(84vh, 780px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--encre);
}
.heros-fond { position: absolute; inset: 0; }
.heros-fond img, .heros-fond svg { width: 100%; height: 100%; object-fit: cover; }
.heros-fond::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,14,.42) 0%, rgba(20,17,14,.18) 45%, rgba(20,17,14,.62) 100%);
}

.heros-texte {
  position: relative;
  text-align: center;
  color: var(--blanc);
  padding: var(--marge);
  max-width: 46rem;
}
.heros-surtitre {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-large);
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 1.6rem;
}
.heros-titre {
  font-family: var(--lapidaire);
  font-size: var(--t-geant);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}
.heros-chapeau {
  color: rgba(255,255,255,.88);
  max-width: 34rem;
  margin: 0 auto 2.75rem;
  line-height: 1.9;
}

/* L'unique moment orchestré : l'interlettrage du titre s'ouvre au chargement */
@media (prefers-reduced-motion: no-preference) {
  .heros-titre { animation: ouverture 1.5s cubic-bezier(.19,1,.22,1) both; }
  .heros-surtitre { animation: montee .9s ease-out .35s both; }
  .heros-chapeau { animation: montee .9s ease-out .55s both; }
  .heros-texte .bouton-clair { animation: montee .9s ease-out .75s both; }
}
@keyframes ouverture {
  from { opacity: 0; letter-spacing: .34em; }
  to   { opacity: 1; letter-spacing: .01em; }
}
@keyframes montee {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ═══ SECTIONS ════════════════════════════════════════════════ */
.section { padding: var(--section) var(--marge); }
.section-serree { padding: clamp(3rem, 6vw, 5rem) var(--marge); }
.section-pleine { padding: 0; }
.section-sable { background: var(--sable); }

.contenu { max-width: var(--contenu); margin: 0 auto; }
.contenu-etroit { max-width: 62rem; margin: 0 auto; }

.entete-section { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.entete-section .titre-section { margin-bottom: 1.25rem; }
.entete-section .chapeau { margin: 0 auto; }

/* ── Bloc éditorial plein cadre ───────────────────────────────── */
.editorial { position: relative; min-height: min(72vh, 660px); display: grid; background: var(--encre); }
.editorial-visuel { grid-area: 1/1; position: relative; }
.editorial-visuel img, .editorial-visuel svg { width: 100%; height: 100%; object-fit: cover; }
/* Voile indispensable : sans lui, le texte blanc devient illisible sur un visuel clair */
.editorial-visuel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(20,17,14,.15) 0%, rgba(20,17,14,.45) 55%, rgba(20,17,14,.78) 100%);
}
.editorial--droite .editorial-visuel::after {
  background: linear-gradient(200deg, rgba(20,17,14,.15) 0%, rgba(20,17,14,.45) 55%, rgba(20,17,14,.78) 100%);
}
.editorial-texte {
  grid-area: 1/1;
  align-self: end;
  /* Indispensable : .editorial-visuel est positionné, il passerait sinon par-dessus */
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 6vw, 5rem);
  max-width: 40rem;
  color: var(--blanc);
  text-shadow: 0 1px 24px rgba(20,17,14,.45);
}
.editorial-texte .titre-section { margin-bottom: 1rem; }
.editorial-texte p { color: rgba(255,255,255,.9); margin-bottom: 2rem; }
.editorial--droite .editorial-texte { justify-self: end; text-align: right; }

/* ── Duo d'images ─────────────────────────────────────────────── */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.duo-carte { position: relative; display: block; overflow: hidden; }
.duo-carte figure { margin: 0; overflow: hidden; }
.duo-carte img, .duo-carte svg {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.duo-carte:hover img, .duo-carte:hover svg { transform: scale(1.035); }
.duo-legende { padding: 1.75rem .25rem 0; }
.duo-legende h3 { font-family: var(--lapidaire); font-size: var(--t-grand); margin-bottom: .5rem; }
.duo-legende p { color: var(--grege); font-size: var(--t-petit); margin-bottom: 1.1rem; }

/* ═══ GRILLE PRODUITS ═════════════════════════════════════════ */
.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(2rem, 3.5vw, 3.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
}

.produit-carte { display: block; position: relative; }
.produit-visuel {
  position: relative;
  overflow: hidden;
  background: var(--blanc);
  margin-bottom: 1.4rem;
}
.produit-visuel img, .produit-visuel svg {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.produit-carte:hover .produit-visuel img,
.produit-carte:hover .produit-visuel svg { transform: scale(1.04); }

/* Le filet d'or se trace depuis le centre au survol — rappel du khatim */
.produit-visuel::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: 0;
  height: 1px; background: var(--or);
  transition: left var(--transition), right var(--transition);
}
.produit-carte:hover .produit-visuel::after { left: 0; right: 0; }

.produit-etiquette {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--ivoire);
  padding: .4rem .8rem;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-moyen);
  text-transform: uppercase;
}
.produit-etiquette--rupture { background: var(--encre); color: var(--ivoire); }

.produit-nom {
  font-size: var(--t-mini);
  letter-spacing: var(--ls-moyen);
  text-transform: uppercase;
  margin-bottom: .55rem;
}
.produit-resume {
  font-family: var(--lapidaire);
  font-size: var(--t-petit);
  color: var(--grege);
  line-height: 1.6;
  margin-bottom: .7rem;
}
.produit-prix { font-size: var(--t-petit); }

/* ═══ PAGE CATÉGORIE ══════════════════════════════════════════ */
.entete-categorie {
  text-align: center;
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--marge) clamp(2.5rem, 5vw, 4rem);
}
.entete-categorie .titre-section { margin: 1rem 0 1.5rem; }

/* Hero photo de catégorie — bannière plein cadre + voile encre + texte ivoire */
.hero-categorie {
  position: relative;
  min-height: clamp(280px, 44vh, 480px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.hero-categorie-fond { position: absolute; inset: 0; z-index: 0; }
.hero-categorie .media-hero-cat {
  width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto;
  transform: scale(1.04);
}
.hero-categorie::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,17,14,.12) 0%, rgba(20,17,14,.5) 62%, rgba(20,17,14,.8) 100%);
}
.hero-categorie-texte {
  position: relative; z-index: 2; width: 100%;
  padding: clamp(2rem, 5vw, 3.75rem) var(--marge);
  text-align: center; color: var(--ivoire);
}
.hero-categorie-texte .titre-section { color: var(--ivoire); margin: .7rem 0 1rem; }
.hero-categorie-texte .chapeau { color: rgba(251,250,247,.9); margin: 0 auto; max-width: 60ch; }
.fil-ariane--clair, .fil-ariane--clair a { color: rgba(251,250,247,.82); }
.fil-ariane--clair a:hover { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .hero-categorie .media-hero-cat { animation: cat-zoom 18s ease-out both; }
  @keyframes cat-zoom { from { transform: scale(1.12); } to { transform: scale(1.02); } }
}

.fil-ariane {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-moyen);
  text-transform: uppercase;
  color: var(--grege);
}
.fil-ariane a:hover { color: var(--or); }
.fil-ariane span { margin: 0 .55rem; }

.barre-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--filet-clair);
  border-bottom: 1px solid var(--filet-clair);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-moyen);
  text-transform: uppercase;
  color: var(--grege);
}
.barre-filtres select {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--encre); background: transparent;
  border: 0; border-bottom: 1px solid var(--filet);
  padding: .35rem 1.5rem .35rem 0; cursor: pointer;
}

/* ═══ PAGE PRODUIT ════════════════════════════════════════════ */
.produit-page {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3.5rem) var(--marge) var(--section);
  max-width: var(--contenu);
  margin: 0 auto;
}

.produit-galerie { display: grid; gap: 1rem; }
.produit-galerie > * { background: var(--blanc); }
.produit-galerie img, .produit-galerie svg { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.produit-vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.produit-infos { position: sticky; top: 9rem; }
.produit-titre { font-family: var(--lapidaire); font-size: var(--t-titre); line-height: 1.15; margin: .75rem 0 1rem; }
.produit-infos .produit-resume { font-size: var(--t-moyen); margin-bottom: 1.75rem; }
.produit-tarif { font-size: 1.3rem; margin-bottom: .4rem; }
.produit-tva { font-size: var(--t-micro); letter-spacing: var(--ls-fin); color: var(--grege); text-transform: uppercase; }

.produit-achat { margin: 2.5rem 0; padding: 2.25rem 0; border-top: 1px solid var(--filet-clair); border-bottom: 1px solid var(--filet-clair); }
.champ-libelle { display: block; font-size: var(--t-micro); letter-spacing: var(--ls-moyen); text-transform: uppercase; color: var(--grege); margin-bottom: .9rem; }

.choix-tailles { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.75rem; }
.choix-tailles input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix-tailles label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.4rem; padding: .7rem .9rem;
  border: 1px solid var(--filet);
  font-size: var(--t-petit); cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.choix-tailles label:hover { border-color: var(--encre); }
.choix-tailles input:checked + label { background: var(--encre); color: var(--ivoire); border-color: var(--encre); }
.choix-tailles input:focus-visible + label { outline: 1px solid var(--or); outline-offset: 3px; }

.produit-achat .bouton { width: 100%; }

/* ── Achat immédiat ───────────────────────────────────────────────
   Le formulaire s'ouvre avec <details> et bascule en prépaiement avec
   :checked — aucun JavaScript, donc rien ne casse s'il est désactivé. */
.achat-direct { margin-bottom: 1rem; }
.achat-direct > summary {
  width: 100%;
  list-style: none;
  cursor: pointer;
}
.achat-direct > summary::-webkit-details-marker { display: none; }
.achat-direct > summary .ouvert,
.achat-direct[open] > summary .ferme { display: none; }
.achat-direct[open] > summary .ouvert { display: inline; }
.achat-direct[open] > summary {
  background: transparent;
  color: var(--encre);
  border-bottom-color: transparent;
}

.achat-express {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--encre);
  border-top: 0;
}

.achat-express .champ-libelle { margin-bottom: .55rem; }
.achat-express .facultatif { text-transform: none; letter-spacing: 0; }
.achat-express input[type="text"],
.achat-express input[type="tel"],
.achat-express textarea {
  width: 100%;
  font: inherit;
  color: var(--encre);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--filet);
  padding: .65rem 0;
}
.achat-express textarea {
  border: 1px solid var(--filet);
  padding: .75rem;
  resize: vertical;
}
.achat-express input:focus, .achat-express textarea:focus {
  outline: 0;
  border-color: var(--or);
}

/* Case « c'est un cadeau » */
.bascule-cadeau { position: absolute; opacity: 0; width: 0; height: 0; }
.etiquette-cadeau {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-top: .25rem;
  font-size: var(--t-petit);
  cursor: pointer;
}
.etiquette-cadeau .coche {
  flex: none;
  width: 17px; height: 17px;
  border: 1px solid var(--encre);
  position: relative;
}
.bascule-cadeau:checked + .etiquette-cadeau .coche { background: var(--encre); }
.bascule-cadeau:checked + .etiquette-cadeau .coche::after {
  content: "";
  position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--ivoire);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.bascule-cadeau:focus-visible + .etiquette-cadeau .coche { outline: 1px solid var(--or); outline-offset: 3px; }

/* Bascule cadeau → prépaiement (tout en CSS) */
.cadeau-bloc { display: none; gap: 1.5rem; }
.bascule-cadeau:checked ~ .cadeau-bloc { display: grid; }

.note-paiement {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: var(--t-petit);
  line-height: 1.65;
  color: var(--encre-douce);
  padding-top: .5rem;
  border-top: 1px solid var(--filet-clair);
}
.note-paiement .khatim { margin-top: .5rem; }
/* Choix du règlement — masqué pour un cadeau, où la carte est imposée */
.radio-paiement { position: absolute; opacity: 0; width: 0; height: 0; }
.etiquette-paiement {
  display: flex; align-items: center; gap: .8rem;
  font-size: var(--t-petit); cursor: pointer; margin-top: -.6rem;
}
.etiquette-paiement .pastille {
  flex: none; width: 15px; height: 15px;
  border: 1px solid var(--encre); border-radius: 50%;
  position: relative;
}
.radio-paiement:checked + .etiquette-paiement .pastille::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--encre); border-radius: 50%;
}
.radio-paiement:focus-visible + .etiquette-paiement .pastille { outline: 1px solid var(--or); outline-offset: 3px; }

/* Les trois bandeaux de règlement s'excluent — l'ordre des règles fait foi,
   les règles « cadeau » passent en dernier car elles priment sur le choix manuel. */
.note-carte, .note-cadeau { display: none; }
#pay-carte:checked ~ .note-cod   { display: none; }
#pay-carte:checked ~ .note-carte { display: flex; }

.bascule-cadeau:checked ~ .libelle-reglement,
.bascule-cadeau:checked ~ .radio-paiement,
.bascule-cadeau:checked ~ .etiquette-paiement { display: none; }
.bascule-cadeau:checked ~ .note-cod,
.bascule-cadeau:checked ~ .note-carte { display: none; }
.bascule-cadeau:checked ~ .note-cadeau { display: flex; }

.rappel-adresse {
  display: flex; gap: .8rem; align-items: flex-start;
  font-size: var(--t-petit); color: var(--grege); line-height: 1.6;
}
.rappel-adresse .khatim { margin-top: .5rem; }

.libelle-payer { display: none; }
#pay-carte:checked ~ .bouton .libelle-cod   { display: none; }
#pay-carte:checked ~ .bouton .libelle-payer { display: inline; }
.bascule-cadeau:checked ~ .bouton .libelle-cod   { display: none; }
.bascule-cadeau:checked ~ .bouton .libelle-payer { display: inline; }

.bouton-panier { width: 100%; }

.produit-rassurance { display: grid; gap: 1.1rem; margin-top: 2rem; }
.rassurance-ligne { display: flex; gap: .9rem; align-items: flex-start; font-size: var(--t-petit); color: var(--encre-douce); }
.rassurance-ligne .khatim { margin-top: .55rem; }

.produit-details { margin-top: 2.5rem; }
.detail-bloc { border-bottom: 1px solid var(--filet-clair); }
.detail-bloc summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-size: var(--t-micro); letter-spacing: var(--ls-moyen); text-transform: uppercase;
}
.detail-bloc summary::-webkit-details-marker { display: none; }
.detail-bloc summary::after { content: "+"; font-size: 1rem; color: var(--or); }
.detail-bloc[open] summary::after { content: "–"; }
.detail-bloc-corps { padding-bottom: 1.6rem; color: var(--encre-douce); font-size: var(--t-petit); }
.detail-bloc-corps dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.5rem; margin: 0; }
.detail-bloc-corps dt { color: var(--grege); }
.detail-bloc-corps dd { margin: 0; }

/* ═══ PAGES LÉGALES ═══════════════════════════════════════════ */
.page-legale { padding: clamp(3rem, 6vw, 5.5rem) var(--marge) var(--section); }
.prose { max-width: var(--texte); margin: 0 auto; }
.prose h1 { font-family: var(--lapidaire); font-size: var(--t-titre); line-height: 1.2; margin-bottom: 1rem; }
.prose .maj-le { font-size: var(--t-micro); letter-spacing: var(--ls-moyen); text-transform: uppercase; color: var(--grege); margin-bottom: 3rem; }
.prose h2 {
  font-family: var(--lapidaire); font-size: var(--t-grand);
  margin: 3.25rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--filet-clair);
}
.prose h3 { font-size: var(--t-moyen); margin: 2rem 0 .6rem; }
.prose p, .prose li { color: var(--encre-douce); margin-bottom: 1.1rem; }
.prose ul { margin: 0 0 1.5rem; }
.prose li { position: relative; padding-left: 1.6rem; }
.prose li::before {
  content: ""; position: absolute; left: 0; top: .75em;
  width: 5px; height: 5px; background: var(--or);
  transform: rotate(45deg);
}
.prose a { border-bottom: 1px solid var(--filet); }
.prose a:hover { border-color: var(--or); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.75rem; font-size: var(--t-petit); }
.prose th, .prose td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--filet-clair); }
.prose th { font-size: var(--t-micro); letter-spacing: var(--ls-moyen); text-transform: uppercase; color: var(--grege); font-weight: 400; }
.prose .a-completer { background: #FFF4D6; border-bottom: 1px solid var(--or-clair); padding: 0 .25rem; }

.sommaire-legal {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--filet-clair);
  border: 1px solid var(--filet-clair); margin-bottom: 3.5rem;
}
.sommaire-legal a { background: var(--ivoire); padding: 1.5rem 1.25rem; transition: background var(--transition); }
.sommaire-legal a:hover { background: var(--blanc); }
.sommaire-legal strong { display: block; font-size: var(--t-mini); letter-spacing: var(--ls-moyen); text-transform: uppercase; font-weight: 400; margin-bottom: .35rem; }
.sommaire-legal span { font-size: var(--t-petit); color: var(--grege); }

/* ═══ NEWSLETTER ══════════════════════════════════════════════ */
.lettre { text-align: center; }
.lettre-formulaire { display: flex; gap: 0; max-width: 30rem; margin: 2rem auto 0; }
.lettre-formulaire input {
  flex: 1; min-width: 0; font: inherit;
  background: transparent; color: var(--encre);
  border: 0; border-bottom: 1px solid var(--filet);
  padding: .95rem .25rem;
}
.lettre-formulaire input::placeholder { color: var(--grege); }
.lettre-formulaire input:focus { outline: 0; border-color: var(--or); }
.lettre-formulaire .bouton { padding-inline: 1.75rem; }

/* ═══ PIED DE PAGE ════════════════════════════════════════════ */
.pied { border-top: 1px solid var(--filet-clair); padding: var(--section) var(--marge) 2.5rem; }
.pied-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: var(--contenu); margin: 0 auto;
}
.pied-colonnes h4 {
  font-size: var(--t-micro); letter-spacing: var(--ls-moyen);
  text-transform: uppercase; margin-bottom: 1.5rem;
}
.pied-colonnes li { margin-bottom: .85rem; }
.pied-colonnes a { font-size: var(--t-petit); color: var(--encre-douce); }
.pied-colonnes a:hover { color: var(--or); }

.pied-bas {
  max-width: var(--contenu); margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-top: 2rem; border-top: 1px solid var(--filet-clair);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: var(--t-micro); letter-spacing: var(--ls-fin); color: var(--grege);
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .produit-page { grid-template-columns: 1fr; }
  .produit-infos { position: static; }
  .editorial-texte, .editorial--droite .editorial-texte { max-width: none; text-align: left; justify-self: start; }
}

@media (max-width: 760px) {
  .entete-haut { grid-template-columns: auto 1fr auto; padding: 1rem var(--marge); }
  .entete-service { display: none; }
  .entete-outils { gap: 1.1rem; }
  .marque { align-items: flex-start; }

  .burger {
    display: flex; flex-direction: column; gap: 5px;
    padding: .5rem; margin-left: -.5rem;
  }
  .burger span { display: block; width: 22px; height: 1px; background: var(--encre); transition: transform var(--transition), opacity var(--transition); }

  .navigation {
    position: fixed; inset: 0; top: auto; bottom: 0; height: 0;
    background: var(--ivoire); overflow: hidden;
    transition: height var(--transition); z-index: 99;
  }
  .navigation[data-ouvert="true"] { height: calc(100dvh - 4.5rem); overflow-y: auto; }
  .navigation ul { flex-direction: column; align-items: flex-start; gap: 0; padding: 1.5rem var(--marge) 4rem; }
  .navigation li { width: 100%; border-bottom: 1px solid var(--filet-clair); }
  .navigation a { display: block; padding: 1.3rem 0; font-size: var(--t-petit); border: 0; }

  .grille-produits { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .produit-vignettes { grid-template-columns: repeat(3, 1fr); }
  .lettre-formulaire { flex-direction: column; gap: 1.25rem; }
}

@media (max-width: 420px) {
  .grille-produits { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ BACK-OFFICE ═════════════════════════════════════════════ */
.admin { max-width: 1320px; margin: 0 auto; padding: clamp(2rem,4vw,3.5rem) var(--marge) var(--section); }

.admin-tete { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:flex-end; justify-content:space-between; }
.admin-etat { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; }

.admin-onglets { display:flex; flex-wrap:wrap; gap:2rem; margin:2.5rem 0 2rem;
  border-bottom:1px solid var(--filet-clair); }
.admin-onglets a { padding-bottom:.9rem; font-size:var(--t-micro); letter-spacing:var(--ls-moyen);
  text-transform:uppercase; border-bottom:1px solid transparent; margin-bottom:-1px; }
.admin-onglets a.actif { border-color:var(--or); }
.admin-onglets a:hover { color:var(--or); }

.admin-note { padding:1rem 1.25rem; margin-bottom:2rem; font-size:var(--t-petit); border-left:2px solid; }
.admin-note--ok { border-color:var(--or); background:var(--sable); }
.admin-note--ko { border-color:#B3261E; background:#FDF0EF; color:#7A1C15; }

.admin-titre { font-size:var(--t-micro); letter-spacing:var(--ls-moyen); text-transform:uppercase;
  color:var(--grege); font-weight:400; margin:0 0 1rem; }

.admin-chiffres { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px; background:var(--filet-clair); border:1px solid var(--filet-clair); margin-bottom:3rem; }
.chiffre { background:var(--ivoire); padding:1.75rem 1.5rem; display:grid; gap:.5rem; }
.chiffre-val { font-family:var(--lapidaire); font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.1; }
.chiffre-lib { font-size:var(--t-micro); letter-spacing:var(--ls-fin); text-transform:uppercase; color:var(--grege); }

.admin-duo { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(2rem,4vw,3.5rem); }
.admin-table { width:100%; border-collapse:collapse; font-size:var(--t-petit); }
.admin-table td { padding:.8rem 0; border-bottom:1px solid var(--filet-clair); }

.admin-vide { text-align:center; padding:clamp(3rem,7vw,6rem) 1rem; color:var(--encre-douce); }
.admin-vide .khatim { width:14px; height:14px; margin:0 auto 1.5rem; }
.admin-vide p { margin-bottom:.75rem; font-size:var(--t-petit); line-height:1.8; }

.badge { display:inline-block; padding:.35rem .7rem; font-size:var(--t-micro);
  letter-spacing:var(--ls-fin); text-transform:uppercase; border:1px solid var(--filet); }
.badge--payee { border-color:#2F6E4E; color:#2F6E4E; }
.badge--a_confirmer, .badge--attente { border-color:var(--or); color:var(--or); }
.badge--en_attente_paiement { border-color:var(--or); color:var(--or); }
.badge--paiement_echoue, .badge--annulee { border-color:#B3261E; color:#B3261E; }
.badge--cb_abandonnee { border-color:#B3261E; color:#B3261E; background:#FDF0EF; }
.badge--cadeau { background:var(--encre); color:var(--ivoire); border-color:var(--encre); }

.cmd { border:1px solid var(--filet-clair); margin-bottom:1.5rem; }
.cmd-tete { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding:1.1rem 1.5rem; background:var(--sable); }
.cmd-ref { font-family:var(--lapidaire); font-size:var(--t-moyen); margin-right:.75rem; }
.cmd-date { font-size:var(--t-micro); letter-spacing:var(--ls-fin); color:var(--grege); text-transform:uppercase; }
.cmd-corps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem); padding:1.75rem 1.5rem; font-size:var(--t-petit); }
.cmd-corps p { line-height:1.8; }

.admin-barre { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; justify-content:space-between;
  padding-bottom:1.5rem; margin-bottom:2rem; border-bottom:1px solid var(--filet-clair); }

.admin-grille { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:2rem 1.5rem; }
.fiche { border:1px solid var(--filet-clair); display:flex; flex-direction:column; }
.fiche-visuel { display:block; background:var(--blanc); }
.fiche-visuel img, .fiche-visuel svg { width:100%; aspect-ratio:1/1; object-fit:cover; }
.fiche-corps { padding:1.25rem; display:grid; gap:.6rem; }
.fiche-corps h3 { font-family:var(--lapidaire); font-size:var(--t-moyen); }
.fiche-meta { font-size:var(--t-petit); color:var(--grege); }
.fiche-badges { display:flex; flex-wrap:wrap; gap:.4rem; }
.fiche-actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:.4rem; }
.fiche-actions form { display:inline; }
.lien-danger { color:#B3261E; }
.lien-danger:hover { border-color:#B3261E; }

.admin-form { display:grid; gap:2rem; max-width:52rem; }
.admin-form-duo { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; }
.admin-form-trio { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem; }
.admin-form input[type=text], .admin-form input:not([type]), .admin-form textarea, .admin-select {
  width:100%; font:inherit; color:var(--encre); background:transparent;
  border:0; border-bottom:1px solid var(--filet); padding:.65rem 0; }
.admin-form textarea { border:1px solid var(--filet); padding:.85rem; resize:vertical; }
.admin-form input:focus, .admin-form textarea:focus, .admin-select:focus { outline:0; border-color:var(--or); }
.admin-select { padding-right:1.5rem; cursor:pointer; }
.admin-form input[type=file] { font-size:var(--t-petit); padding:.65rem 0; }
.aide { display:block; margin-top:.5rem; font-size:var(--t-micro); color:var(--grege); line-height:1.6;
  letter-spacing:0; text-transform:none; }
.apercu { max-width:180px; margin-bottom:1rem; }
.apercu img, .apercu svg { width:100%; aspect-ratio:1/1; object-fit:cover; }

@media (max-width:640px) {
  .cmd-tete { flex-direction:column; align-items:flex-start; }
  .admin-onglets { gap:1.25rem; }
}

/* ═══ HABILLAGE DU BACK-OFFICE ════════════════════════════════
   Volontairement distinct de la boutique : ni en-tête, ni navigation
   de collections, ni newsletter, ni pied de page. On ne confond pas
   un outil de travail avec une vitrine. */
.corps-gestion { background:#F4F3F0; }

/* Conteneur du back-office.
   Surtout PAS --marge : cette variable sert aux pages pleine largeur de la
   boutique et vaut jusqu'à 4.5rem, ce qui produisait une largeur utile de
   1320 px — jamais atteinte sur un écran courant, donc un rendu collé aux
   bords. Ici : une largeur de lecture fixe, centrée, avec la même gouttière
   à toutes les tailles. Tout le contenu s'aligne sur ce même axe. */
.gestion {
  --gouttiere: 2rem;
  width: 100%;
  max-width: calc(1040px + 2 * var(--gouttiere));
  margin-inline: auto;
  padding: 2.5rem var(--gouttiere) 5rem;
}
@media (max-width: 700px) { .gestion { --gouttiere: 1.25rem; padding-top: 1.5rem; } }

.gestion-tete { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; justify-content:space-between;
  padding-bottom:1.5rem; border-bottom:1px solid var(--filet); }
.gestion-marque { display:flex; align-items:baseline; gap:.9rem; }
.gestion-nom { font-family:var(--lapidaire); font-size:1.35rem; letter-spacing:var(--ls-large); text-indent:var(--ls-large); }
.gestion-role { font-size:var(--t-micro); letter-spacing:var(--ls-moyen); text-transform:uppercase; color:var(--grege); }
.gestion-outils { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; }

/* Porte d'entrée : rien d'autre à l'écran que le champ */
.gestion-porte { min-height:100dvh; display:grid; place-items:center; padding:var(--marge); }
.porte { width:min(100%,22rem); display:grid; gap:1.1rem; text-align:center; }
.porte h1 { font-family:var(--lapidaire); font-size:1.6rem; letter-spacing:var(--ls-large);
  text-indent:var(--ls-large); margin-top:2rem; }
.porte-sous { font-size:var(--t-micro); letter-spacing:var(--ls-moyen); text-transform:uppercase;
  color:var(--grege); margin-bottom:1.5rem; }
.porte .champ-libelle { text-align:left; margin-bottom:-.5rem; }
.porte input { width:100%; font:inherit; background:transparent; color:var(--encre);
  border:0; border-bottom:1px solid var(--filet); padding:.7rem 0; }
.porte input:focus { outline:0; border-color:var(--or); }
.porte .bouton { margin-top:.75rem; }
.porte-erreur { font-size:var(--t-petit); color:#B3261E; }

/* Décompte du montant dans l'achat immédiat — la livraison doit être visible
   AVANT la validation, jamais découverte sur la page de paiement. */
.recap-montant { display:grid; gap:.5rem; padding:1.1rem 0; border-top:1px solid var(--filet-clair); }
.recap-montant p { display:flex; justify-content:space-between; gap:1rem; font-size:var(--t-petit); color:var(--encre-douce); }
.recap-montant .recap-total { padding-top:.6rem; border-top:1px solid var(--filet-clair); color:var(--encre); font-size:var(--t-base); }
.recap-montant .recap-total .prix { font-size:1.05rem; }
.recap-montant .recap-note { display:block; font-size:var(--t-micro); color:var(--grege); letter-spacing:0; }

/* ═══ LISIBILITÉ DU BACK-OFFICE ═══════════════════════════════
   La typographie de la boutique (10 px, interlettrage .19em) est faite pour
   une vitrine, pas pour un outil qu'on utilise tous les jours. Tout est ici
   redéfini SOUS .corps-gestion — le site public n'est pas touché. */
.corps-gestion {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: #2A251F;
}
.corps-gestion .champ-libelle,
.corps-gestion .admin-titre,
.corps-gestion .chiffre-lib,
.corps-gestion .admin-onglets a,
.corps-gestion .badge,
.corps-gestion .lien-souligne,
.corps-gestion .bouton,
.corps-gestion .bouton-filaire {
  font-size: .75rem;
  letter-spacing: .06em;
}
.corps-gestion .champ-libelle,
.corps-gestion .admin-titre { color: #6A625A; font-weight: 500; }
.corps-gestion .aide { font-size: .75rem; color: #7A736A; line-height: 1.6; }

/* Onglets plus francs */
.corps-gestion .admin-onglets { gap: 2.25rem; margin: 2rem 0 2.25rem; }
.corps-gestion .admin-onglets a { padding-bottom: .8rem; border-bottom-width: 2px; color: #6A625A; }
.corps-gestion .admin-onglets a.actif { color: var(--encre); border-color: var(--or); }

/* Chiffres : la valeur domine, le libellé accompagne */
.corps-gestion .admin-chiffres { background: var(--filet); }
.corps-gestion .chiffre { background: #fff; padding: 1.5rem 1.35rem; gap: .35rem; }
.corps-gestion .chiffre-val { font-family: var(--courant); font-weight: 400;
  font-size: 1.75rem; letter-spacing: -.01em; color: var(--encre); line-height: 1.15; }
.corps-gestion .chiffre-lib { text-transform: none; letter-spacing: .01em; font-size: .8125rem; color: #6A625A; }

/* Champs de formulaire : plus hauts, plus contrastés */
.corps-gestion .admin-form input,
.corps-gestion .admin-form textarea,
.corps-gestion .admin-select {
  font-size: .9375rem; padding: .8rem .9rem;
  border: 1px solid var(--filet); background: #fff;
}
.corps-gestion .admin-form input:focus,
.corps-gestion .admin-form textarea:focus,
.corps-gestion .admin-select:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(166,124,46,.12); }
.corps-gestion .admin-form input[type=file] { border: 0; background: none; padding-left: 0; }
.corps-gestion .etiquette-cadeau { font-size: .9375rem; }

/* Réglages : des blocs nettement séparés */
.reglages { max-width: 46rem; gap: 0; }
.bloc { background: #fff; border: 1px solid var(--filet); padding: 1.75rem; margin-bottom: 1.25rem; }
.bloc-titre { font-family: var(--lapidaire); font-size: 1.15rem; letter-spacing: 0;
  text-transform: none; color: var(--encre); margin: 0 0 .5rem; }
.bloc-aide { font-size: .8125rem; color: #6A625A; margin-bottom: 1.5rem; line-height: 1.6; }
.bloc .admin-form-duo { gap: 1.5rem; }
.bloc .champ + .champ { margin-top: 0; }

/* Cartes commande et produit : fond blanc sur gris, la structure se lit seule */
.corps-gestion .cmd, .corps-gestion .fiche { background: #fff; border-color: var(--filet); }
.corps-gestion .cmd-tete { background: #FAF9F7; }
.corps-gestion .cmd-corps { font-size: .875rem; }
.corps-gestion .admin-table { font-size: .875rem; }
.corps-gestion .admin-vide { background: #fff; border: 1px solid var(--filet); }
.corps-gestion .admin-vide p { font-size: .9375rem; }
.corps-gestion .admin-note { font-size: .875rem; background: #fff; }

/* Champ e-mail : n'apparaît que si le règlement par carte est retenu
   (choisi via la pastille, ou imposé par la case cadeau). */
.champ-email { display: none; }
#pay-carte:checked ~ .champ-email,
.bascule-cadeau:checked ~ .champ-email { display: block; }
.champ-email input {
  width: 100%; font: inherit; color: var(--encre); background: transparent;
  border: 0; border-bottom: 1px solid var(--filet); padding: .65rem 0;
}
.champ-email input:focus { outline: 0; border-color: var(--or); }

/* ═══ PAGE DE RETOUR DE PAIEMENT ══════════════════════════════
   Une seule carte centrée qui porte tout : état, récapitulatif, suite. */
.retour { min-height: 60vh; display: grid; place-items: start center;
  padding: clamp(2.5rem, 6vw, 5rem) var(--marge) var(--section); }
.retour-carte { width: min(100%, 34rem); text-align: center; }
.retour-carte .titre-section { margin: 2rem 0 .75rem; }
.retour-sous { color: var(--grege); font-size: var(--t-petit); margin-bottom: 2.25rem; }
.retour-recap { text-align: left; border: 1px solid var(--filet);
  padding: 1.75rem; margin-bottom: 2rem; background: var(--blanc); }
.retour-recap p { display: flex; justify-content: space-between; gap: 1.25rem;
  padding: .55rem 0; font-size: var(--t-petit); color: var(--encre-douce);
  border-bottom: 1px solid var(--filet-clair); }
.retour-recap p:last-child { border-bottom: 0; }
.retour-recap .cle { color: var(--grege); flex: none; }
.retour-recap .val { text-align: right; }
.retour-recap .retour-total { font-size: var(--t-base); color: var(--encre); }
.retour-recap .retour-total .val { font-size: 1.1rem; }
.retour-suite { text-align: left; margin-bottom: 2.5rem; }
.retour-suite li { position: relative; padding: .45rem 0 .45rem 1.6rem;
  font-size: var(--t-petit); color: var(--encre-douce); line-height: 1.7; }
.retour-suite li::before { content: ""; position: absolute; left: 0; top: 1.05em;
  width: 5px; height: 5px; background: var(--or); transform: rotate(45deg); }
.retour-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Galerie du formulaire produit (back-office) */
.galerie-admin { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:1rem; margin-bottom:1.5rem; }
.galerie-item { margin:0; display:grid; gap:.4rem; }
.galerie-item img { width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--filet); }
.galerie-item figcaption { font-size:.6875rem; color:var(--grege); letter-spacing:.04em; text-transform:uppercase; }

/* Permalien avec préfixe non éditable */
.permalien-ligne { display:flex; align-items:center; gap:.15rem; }
.permalien-prefixe { font-size:.8125rem; color:var(--grege); white-space:nowrap; }
.permalien-ligne input { flex:1; min-width:0; }

/* ═══ TABLEAU DE BORD — signaux et graphique ═════════════════ */

/* Signaux d'action : ce qui attend un geste, toujours en premier */
.signaux { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem; margin-bottom:1.75rem; }
.signal { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.35rem;
  background:#fff; border:1px solid var(--filet); border-left:3px solid var(--grege);
  transition:border-color var(--transition); }
.signal:hover { border-left-color:var(--encre); }
.signal-n { font-size:1.6rem; font-weight:400; line-height:1; color:var(--encre);
  font-variant-numeric:tabular-nums; }
.signal-lib { font-size:.8125rem; color:#5A544C; line-height:1.45; }
.signal--action { border-left-color:var(--or); }
.signal--urgent { border-left-color:#B3261E; background:#FDF6F5; }

/* Graphique en barres — une seule teinte (magnitude), marques fines,
   étiquette directe sur le maximum seulement, table cachée en secours */
.graphe-bloc { background:#fff; border:1px solid var(--filet);
  padding:1.5rem 1.5rem 1rem; margin-bottom:2.5rem; }
.graphe { display:flex; align-items:flex-end; gap:2px; height:150px; padding-top:1.4rem; }
.graphe-col { flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; height:100%; position:relative; min-width:0; }
.graphe-barre { width:100%; max-width:34px; background:var(--or);
  border-radius:4px 4px 0 0; min-height:0; }
.graphe-col:hover .graphe-barre { background:#8A6624; }
.graphe-etiquette { position:absolute; top:-1.35rem; font-size:.6875rem; color:var(--encre);
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.graphe-jour { font-size:.625rem; color:var(--grege); margin-top:.45rem; height:1em;
  white-space:nowrap; }

/* Mini-jauge des classements : longueur = part du max, encre discrète */
.mini-jauge { display:block; height:3px; background:var(--filet-clair);
  border-radius:2px; margin-top:.45rem; max-width:180px; }
.mini-jauge span { display:block; height:100%; background:var(--or); border-radius:2px; }

.visuellement-cache { position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }

/* Pastille de score SEO dans la liste des produits */
.seo-pastille { display:inline-block; padding:.3rem .55rem; font-size:.625rem;
  letter-spacing:.06em; text-transform:uppercase; border-radius:3px; }
.seo-bon    { background:#E7F1EA; color:#2F6E4E; }
.seo-moyen  { background:#FBF3E0; color:#8A6624; }
.seo-faible { background:#FDF0EF; color:#B3261E; }

/* ═══ TABLEAU DE BORD COD — plages, taux, entonnoir ═══════════ */

/* Sélecteur de plage de dates */
.plages { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.75rem; }
.plages a { padding:.5rem .9rem; font-size:.75rem; letter-spacing:.04em;
  border:1px solid var(--filet); color:#6A625A; background:#fff; }
.plages a:hover { border-color:var(--encre); color:var(--encre); }
.plages a.actif { background:var(--encre); color:var(--ivoire); border-color:var(--encre); }

/* Rangée de taux — les 4 indicateurs clés du COD */
.taux-rangee { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem; margin-bottom:2.5rem; }
.taux { background:#fff; border:1px solid var(--filet); border-top:3px solid var(--grege);
  padding:1.25rem 1.35rem; display:grid; gap:.3rem; }
.taux--bon    { border-top-color:#2F6E4E; }
.taux--moyen  { border-top-color:var(--or); }
.taux--faible { border-top-color:#B3261E; }
.taux-val { font-size:1.9rem; line-height:1; color:var(--encre); font-variant-numeric:tabular-nums; }
.taux-lib { font-size:.8125rem; color:#4A443C; font-weight:500; }
.taux-det { font-size:.6875rem; color:var(--grege); letter-spacing:.02em; }

/* Entonnoir : barres décroissantes centrées */
.entonnoir { display:grid; gap:.7rem; padding:.5rem 0; }
.entonnoir-etape { display:flex; align-items:center; gap:1rem; }
.entonnoir-barre { background:linear-gradient(90deg,var(--or),#8A6624); height:34px;
  border-radius:4px; display:flex; align-items:center; padding:0 .8rem; min-width:2.5rem;
  transition:width .5s cubic-bezier(.22,.61,.36,1); }
.entonnoir-n { color:#fff; font-size:.9rem; font-variant-numeric:tabular-nums; }
.entonnoir-lib { font-size:.8125rem; color:#4A443C; white-space:nowrap; }
.entonnoir-lib b { color:var(--encre); }

/* Graphe à double barre commandé/livré */
.graphe-paire { display:flex; align-items:flex-end; gap:2px; height:100%; width:100%;
  justify-content:center; }
.graphe-paire .graphe-barre { max-width:15px; }
.graphe-commande { background:var(--or); }
.graphe-livre    { background:var(--encre); }
.graphe-legende { font-size:.75rem; color:var(--grege); margin-top:.75rem; display:flex;
  align-items:center; gap:.4rem; }
.pastille-or, .pastille-encre { display:inline-block; width:10px; height:10px; border-radius:2px; }
.pastille-or { background:var(--or); }
.pastille-encre { background:var(--encre); margin-left:1rem; }

/* Badges des nouveaux statuts */
.badge--confirmee { border-color:#2F6E4E; color:#2F6E4E; }
.badge--expediee  { border-color:#2563EB; color:#2563EB; }
.badge--livree    { border-color:#2F6E4E; color:#fff; background:#2F6E4E; }
.badge--retournee { border-color:#B3261E; color:#B3261E; background:#FDF0EF; }

/* ═══ CARROUSEL HÉROS (home) ═══════════════════════════════════
   Slides en fondu enchaîné, vidéo ou photo plein cadre, autoplay + contrôles.
   Réutilise .heros-texte / .heros-titre du héros d'origine. */
.carrousel {
  position: relative;
  min-height: min(88vh, 820px);
  overflow: hidden;
  background: var(--encre);
  display: grid;
}
.carrousel-slide {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  z-index: 1;
}
.carrousel-slide.actif { opacity: 1; visibility: visible; z-index: 2; }

.carrousel-fond { position: absolute; inset: 0; }
.carrousel-fond .media-video,
.carrousel-fond .media-photo,
.carrousel-fond svg { width: 100%; height: 100%; object-fit: cover; }
.carrousel-fond::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,14,.45) 0%, rgba(20,17,14,.25) 45%, rgba(20,17,14,.72) 100%);
}
.carrousel .heros-texte { position: relative; z-index: 2; }

/* Le texte de la slide active glisse en douceur */
@media (prefers-reduced-motion: no-preference) {
  .carrousel-slide.actif .heros-surtitre { animation: montee .9s ease-out .25s both; }
  .carrousel-slide.actif .heros-titre    { animation: montee 1s cubic-bezier(.19,1,.22,1) .1s both; }
  .carrousel-slide.actif .heros-chapeau  { animation: montee .9s ease-out .45s both; }
  .carrousel-slide.actif .bouton-clair   { animation: montee .9s ease-out .6s both; }
}
p.heros-titre { font-family: var(--lapidaire); font-weight: 400; }

/* Flèches */
.carrousel-fleche {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; display: grid; place-items: center;
  font-size: 1.8rem; line-height: 1; color: var(--blanc);
  background: rgba(20,17,14,.28); border: 1px solid rgba(255,255,255,.35);
  transition: background var(--transition); font-family: var(--courant);
}
.carrousel-fleche:hover { background: rgba(20,17,14,.6); }
.carrousel-prec { left: clamp(.75rem, 2vw, 1.75rem); }
.carrousel-suiv { right: clamp(.75rem, 2vw, 1.75rem); }

/* Points */
.carrousel-points {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: .6rem;
}
.carrousel-point {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.6);
  transition: background var(--transition), width var(--transition), border-radius var(--transition);
}
.carrousel-point.actif { background: var(--blanc); width: 22px; border-radius: 5px; }

@media (max-width: 600px) {
  .carrousel-fleche { display: none; }
  .carrousel { min-height: min(80vh, 640px); }
}
@media (prefers-reduced-motion: reduce) {
  .carrousel-slide { transition: none; }
}

/* ═══ EMPILEMENT AU SCROLL (home) ═══════════════════════════════
   Chaque panneau se fige en haut ; le suivant, en flux normal, glisse
   par-dessus — l'effet « une partie se plie sur l'autre ». Le coin arrondi
   et l'ombre portée font lire l'empilement comme des cartes qui se replient. */
.pile { position: relative; background: var(--encre); z-index: 1; }
.pile-panneau {
  position: sticky; top: 0;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(2rem, 6vw, 6rem);
  overflow: hidden;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -28px 70px rgba(0,0,0,.4);
}
.pile--gauche { justify-content: flex-start; }
.pile--droite { justify-content: flex-end; text-align: right; }
.pile-fond { position: absolute; inset: 0; }
.pile-fond img, .pile-fond video, .pile-fond svg { width: 100%; height: 100%; object-fit: cover; }
.pile-fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(20,17,14,.72) 0%, rgba(20,17,14,.38) 55%, rgba(20,17,14,.15) 100%);
}
.pile--droite .pile-fond::after {
  background: linear-gradient(245deg, rgba(20,17,14,.72) 0%, rgba(20,17,14,.38) 55%, rgba(20,17,14,.15) 100%);
}
.pile-texte {
  position: relative; z-index: 2; max-width: 34rem; color: var(--blanc);
  text-shadow: 0 1px 24px rgba(20,17,14,.4);
}
.pile-texte .titre-section { margin: 1rem 0; }
.pile-texte p { color: rgba(255,255,255,.9); margin-bottom: 2rem; line-height: 1.85; }

/* Le « pli » : chaque panneau rétrécit et s'assombrit en passant dessous le suivant.
   Progressif — les navigateurs sans scroll-timeline gardent l'empilement propre. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pile-panneau {
      animation: pile-plier linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 95%;
    }
    @keyframes pile-plier {
      to { transform: scale(.92); filter: brightness(.5); border-radius: 26px; }
    }
  }
}

@media (max-width: 640px) {
  .pile-panneau { min-height: 90vh; padding: 2rem 1.5rem; text-align: left; justify-content: flex-start; }
  .pile--droite { text-align: left; justify-content: flex-start; }
}

/* Révélation au scroll — sections et blocs qui montent en douceur */
.reveal, .reveal > * { }
.reveal-actif { }

/* ═══ MOBILE — corrections d'ergonomie (audit responsive) ═══════ */

/* 1. Aucun zoom auto iOS : tout champ de saisie ≥ 16px sous tablette/mobile.
   !important indispensable — panier.php pose `font:inherit` en style INLINE
   (specificité inline) et .achat-express input a une spécificité de classe :
   une règle simple serait ignorée sur les champs du tunnel, les plus importants. */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size: 16px !important; }
  .barre-filtres select { padding-block: .7rem; }
}

/* 2. Cibles tactiles ≥ 44px (menu, outils d'en-tête, tailles) */
@media (max-width: 760px) {
  .burger {
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    padding: 0; margin-left: -.55rem; box-sizing: border-box;
  }
  .entete-outils a { display: inline-flex; align-items: center; min-height: 44px; }
  .choix-tailles label { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Points du carrousel : zone tactile élargie sans grossir la pastille */
.carrousel-point { position: relative; }
.carrousel-point::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; }

/* 3. Tableaux : jamais de débordement de page (pages légales + panier) */
@media (max-width: 640px) {
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prose th, .prose td { padding: .6rem .7rem; }
  .prose td .lien-souligne { display: inline-block; padding: .55rem 0; }
}

/* 4. En-tête très étroit (≤ 400px) : on resserre l'interlettrage de la marque
   pour que « Panier » ne soit pas rogné à droite sur les écrans 360px. */
@media (max-width: 400px) {
  .entete-haut { gap: .5rem; }
  .entete-outils { gap: .85rem; }
  .marque-nom { letter-spacing: .22em; text-indent: .22em; }
}

/* 5. Empilement mobile : le voile suit le texte (repassé à gauche) */
@media (max-width: 640px) {
  .pile--droite .pile-fond::after {
    background: linear-gradient(115deg, rgba(20,17,14,.74) 0%, rgba(20,17,14,.42) 55%, rgba(20,17,14,.16) 100%);
  }
  .pile-texte { text-shadow: 0 1px 20px rgba(20,17,14,.6); }
}

/* ═══ ZOOM IMAGE PRODUIT — lightbox natif « façon Highslide » ════
   Sans jQuery ni dépendance : clic/entrée sur une photo → plein cadre,
   flèches + clavier + Échap, fond encre. Respecte prefers-reduced-motion. */
.produit-galerie img { cursor: zoom-in; }
.zoom-voile {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20,17,14,.93);
  opacity: 0; transition: opacity .35s ease;
}
.zoom-voile[data-ouvert="true"] { opacity: 1; }
.zoom-image {
  max-width: 100%; max-height: 100%; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: scale(.96); transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.zoom-voile[data-ouvert="true"] .zoom-image { transform: scale(1); }
.zoom-fermer, .zoom-nav {
  position: absolute; z-index: 2;
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--ivoire); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.3);
  font-family: var(--courant); line-height: 1; cursor: pointer;
  transition: background var(--transition);
}
.zoom-fermer:hover, .zoom-nav:hover { background: rgba(255,255,255,.2); }
.zoom-fermer { top: clamp(1rem,3vw,1.75rem); right: clamp(1rem,3vw,1.75rem); font-size: 1.6rem; }
.zoom-nav { top: 50%; transform: translateY(-50%); font-size: 2rem; }
.zoom-prec { left: clamp(.5rem,2vw,1.5rem); }
.zoom-suiv { right: clamp(.5rem,2vw,1.5rem); }
.zoom-compteur {
  position: absolute; bottom: clamp(1rem,3vw,1.75rem); left: 50%; transform: translateX(-50%);
  color: rgba(251,250,247,.8); font-size: var(--t-micro); letter-spacing: var(--ls-moyen);
}
@media (prefers-reduced-motion: reduce) {
  .zoom-voile, .zoom-image { transition: none; }
  .zoom-image { transform: none; }
}

/* ═══ BADGE PAIEMENT SÉCURISÉ (CMI) — pied de page ═════════════ */
.pied-paiement {
  max-width: var(--contenu); margin: clamp(2.5rem,5vw,4rem) auto 0;
  padding-top: 2rem; border-top: 1px solid var(--filet-clair);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
}
.pied-paiement-mention {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t-micro); letter-spacing: var(--ls-fin);
  text-transform: uppercase; color: var(--grege);
}
.pied-paiement-mention .khatim { width: 13px; height: 13px; fill: var(--or); flex: none; }
.pied-marques { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.marque-pai {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 30px; padding: 0 .7rem;
  border: 1px solid var(--filet); border-radius: 4px;
  background: var(--blanc); color: var(--encre-douce);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; line-height: 1;
}
.marque-cmi  { letter-spacing: .18em; color: var(--encre); }
.marque-visa { color: #1A1F71; letter-spacing: .14em; font-style: italic; }
.marque-mc   { text-transform: lowercase; letter-spacing: .01em; font-weight: 500; }
.mc-pastilles { display: inline-flex; }
.mc-pastilles i { width: 13px; height: 13px; border-radius: 50%; display: block; }
.mc-pastilles i:first-child { background: #EB001B; }
.mc-pastilles i:last-child  { background: #F79E1B; margin-left: -6px; mix-blend-mode: multiply; }
/* le badge trace déjà le séparateur : on retire celui du bas pour éviter le doublon */
.pied-paiement + .pied-bas { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 0; }
@media (max-width: 560px) {
  .pied-paiement { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .a-reveler { opacity: 0; transform: translateY(22px); }
  .reveler { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
}