/*
 * CALI PLATES — système visuel.
 *
 * Direction : Californie urbaine, street premium, foil holographique.
 * Univers ÉVOQUÉ, jamais copié : aucune typographie, aucun logo, aucun
 * personnage, aucun toponyme appartenant à une licence tierce. Les palmiers,
 * le coucher de soleil et le béton sont des motifs culturels génériques,
 * redessinés ici en SVG original.
 *
 * Contrainte tenue : zéro JavaScript, zéro image bitmap dans le rendu critique.
 * L'holographie est produite par des dégradés CSS — donc gratuite en octets,
 * nette à toutes les résolutions, et sans coût de chargement.
 */

:root {
  /* Nuit béton — le fond de l'univers */
  --nuit: #0d0716;
  --nuit-2: #150c26;
  --panneau: #1c1030;
  --bordure: #2e1d4d;

  /* Coucher de soleil californien */
  --sunset-1: #ff2e7e;   /* magenta néon */
  --sunset-2: #ff7a3d;   /* orange */
  --sunset-3: #ffc93c;   /* ambre */
  --cyan: #35e6ff;
  --violet: #a855f7;

  --craie: #f6f1ff;
  --craie-douce: #b9a9d6;

  --rayon: 18px;
  --max: 1120px;
  --texte: 1.0625rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--craie);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--texte);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Le halo de coucher de soleil, fixé derrière tout le site. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(255, 122, 61, 0.30), transparent 62%),
    radial-gradient(760px 460px at 10% 4%, rgba(168, 85, 247, 0.28), transparent 64%),
    radial-gradient(1000px 700px at 50% 108%, rgba(53, 230, 255, 0.10), transparent 70%);
  pointer-events: none;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--craie); }

.enveloppe { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; }

/* ── Typographie ─────────────────────────────────────────────────────── */
h1, h2, h3, .titre {
  font-family: Anton, "Arial Narrow", Impact, system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 0.98;
  margin: 0 0 0.4em;
}
h1 { font-size: clamp(2.4rem, 8.5vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 5vw, 2.6rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.15rem, 3.2vw, 1.5rem); margin-top: 1.8em; }
p { margin: 0 0 1.1em; }
p, li { max-width: 68ch; }

.degrade {
  background: linear-gradient(96deg, var(--sunset-3), var(--sunset-1) 46%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.chapo { font-size: clamp(1.05rem, 2.6vw, 1.3rem); color: var(--craie-douce); }
.discret { color: var(--craie-douce); font-size: 0.92rem; }

/* ── En-tête ─────────────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(13, 7, 22, 0.82);
  border-bottom: 1px solid var(--bordure);
}
.entete .enveloppe { display: flex; align-items: center; gap: 18px; min-height: 62px; }
.marque {
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  font-size: 1.32rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--craie); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center;
}
/* Hauteur imposée, largeur libre : le logo garde ses proportions quel que
   soit le recadrage de l'original. */
.marque img { height: 40px; width: auto; display: block; }
.marque span { display: inline-block; }
.nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--craie-douce); text-decoration: none; font-size: 0.9rem;
  padding: 7px 11px; border-radius: 999px; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--craie); background: rgba(255, 255, 255, 0.07); }

/*
 * Le bouton d'action de l'en-tête.
 *
 * Il vit HORS de `.nav` : la rangée de navigation défile latéralement sur
 * téléphone, et un lien placé dedans aurait disparu hors écran — soit
 * exactement le sort qu'il ne faut pas réserver au seul geste possible du
 * site. Ici, il reste visible à toutes les largeurs.
 */
.nav-action {
  flex: none; margin-left: 4px;
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.86rem; text-decoration: none; white-space: nowrap;
  color: #14071c; padding: 9px 16px; border-radius: 999px;
  background: linear-gradient(100deg, var(--sunset-3), var(--sunset-1) 70%);
  box-shadow: 0 6px 18px -8px rgba(255, 46, 126, 0.8);
}
.nav-action:hover { color: #14071c; filter: brightness(1.08); }
.nav-action-courante { box-shadow: none; filter: saturate(0.8); }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase; letter-spacing: 0.045em; font-size: 1.02rem;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-height: 48px;
}
.bouton-principal {
  color: #14071c;
  background: linear-gradient(100deg, var(--sunset-3), var(--sunset-1) 60%, var(--violet));
  box-shadow: 0 10px 30px -10px rgba(255, 46, 126, 0.75);
}
.bouton-secondaire {
  color: var(--craie); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--bordure);
}
.bouton:hover { transform: translateY(-2px); }
.bouton:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 3px;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(46px, 9vw, 96px) 0 clamp(38px, 7vw, 72px); }
.hero-grille { display: grid; gap: clamp(30px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .hero-grille { grid-template-columns: 1.08fr 0.92fr; } }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
  border: 1px solid var(--bordure); background: rgba(255, 255, 255, 0.04);
  font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--craie-douce);
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
}

/* ── La plaque holographique (SVG + CSS, aucune image) ───────────────── */
.plaque-scene { position: relative; perspective: 1200px; }
.plaque {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
  transform: rotateX(6deg) rotateZ(-2deg);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(150deg, #6b4423, #402614 42%, #7a5029 78%, #2e1a0e);
}
/* microtexture de résine pressée — bruit déterministe, pas une photo */
.plaque::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image:
    radial-gradient(rgba(255, 220, 170, 0.16) 0.8px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.30) 0.8px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 4px;
}
.etiquette {
  position: absolute; inset: 12% 10%;
  border-radius: 9px;
  display: grid; place-content: center; text-align: center; gap: 3px;
  color: #0b0510;
  background:
    conic-gradient(from 210deg at 30% 20%,
      #ffd9f2, #b6f7ff 12%, #d8ffd0 24%, #fff3b0 36%,
      #ffc7e8 50%, #b8e4ff 64%, #e6d0ff 78%, #ffe1c9 90%, #ffd9f2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    inset 0 2px 10px rgba(255, 255, 255, 0.7),
    inset 0 -3px 12px rgba(0, 0, 0, 0.22),
    0 8px 22px -8px rgba(0, 0, 0, 0.7);
}
/* le balayage de foil */
.etiquette::after {
  content: ""; position: absolute; inset: 0; border-radius: 9px;
  background: linear-gradient(115deg,
    transparent 28%, rgba(255, 255, 255, 0.78) 45%, rgba(255, 255, 255, 0.1) 55%, transparent 70%);
  mix-blend-mode: overlay;
  animation: foil 7s ease-in-out infinite;
}
@keyframes foil { 0%, 100% { transform: translateX(-28%); } 50% { transform: translateX(28%); } }
.etiquette-nom {
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(1.5rem, 4.6vw, 2.5rem); line-height: 0.95;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}
.etiquette-sous {
  font-size: clamp(0.6rem, 1.5vw, 0.76rem);
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  color: #3a1f4d;
}
.plaque-legende { margin-top: 12px; font-size: 0.82rem; color: var(--craie-douce); text-align: center; }

/* palmiers — silhouettes originales, décoratives */
.palmiers { position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1; opacity: 0.55; }

/* ── Blocs de contenu ────────────────────────────────────────────────── */
section { scroll-margin-top: 80px; }
.bandeau {
  border-block: 1px solid var(--bordure);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  padding: clamp(38px, 6vw, 64px) 0;
}
.cartes { display: grid; gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cartes-3 { grid-template-columns: repeat(3, 1fr); } }
.carte {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: linear-gradient(180deg, var(--panneau), var(--nuit-2));
  padding: 22px;
}
.carte h3 { margin-top: 0; }
.carte p { margin-bottom: 0; }
.carte-lien { text-decoration: none; color: inherit; display: block; transition: transform 0.15s ease, border-color 0.15s ease; }
.carte-lien:hover { transform: translateY(-3px); border-color: var(--sunset-1); }
.carte-lien .fleche { color: var(--sunset-3); font-family: Anton, sans-serif; }

/* Encart de renvoi — présent, jamais criard.
   `.pont` a servi aux renvois vers l'autre marque ; `.suite` sert aux renvois
   internes qui les ont remplacés. Même habillage, deux intentions distinctes :
   on garde les deux noms pour que le jour où le pont rouvre, l'un ne se
   confonde pas avec l'autre. */
.pont, .suite {
  margin: 34px 0; padding: 24px;
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background:
    linear-gradient(180deg, rgba(255, 46, 126, 0.10), rgba(168, 85, 247, 0.06));
}
.pont p, .suite p { margin-bottom: 14px; }
.pont .discret, .suite .discret { margin: 12px 0 0; font-size: 0.86rem; }
.suite .reperes { margin: 0; }
.suite .reperes li { font-size: 0.97rem; color: var(--craie-douce); }
.suite .reperes li a { font-weight: 700; }
.suite-action .bouton { margin-top: 2px; }

/* Bandeau de clarté — les trois lignes qui répondent, avant tout le reste,
   à « qu'est-ce que c'est », « qu'est-ce qui est proposé », « pourquoi y
   croire ». Trois colonnes sur grand écran, trois lignes sur téléphone. */
.clarte {
  list-style: none; padding: 0; margin: 0 0 30px;
  display: grid; gap: 14px;
  border-block: 1px solid var(--bordure); padding-block: 20px;
}
@media (min-width: 860px) { .clarte { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.clarte li { max-width: none; font-size: 0.95rem; color: var(--craie-douce); line-height: 1.55; }
.clarte strong { display: block; color: var(--craie); font-size: 1rem; margin-bottom: 3px; }
.clarte .statut { margin-right: 4px; }

/* ─── BOUTIQUE ────────────────────────────────────────────────────────────
 * Sélection, fiches, panier. Même grammaire visuelle que le reste du site :
 * cartes sombres, liseré, dégradé coucher de soleil pour l'action. Rien de
 * neuf n'est inventé — une boutique qui ne ressemble pas à son site est une
 * boutique qui inspire moins confiance.
 */
.selection { margin: 8px 0 40px; }

.selection-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.selection-entete h2 { margin: 0; }

.grille-produits { display: grid; gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .grille-produits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grille-produits { grid-template-columns: repeat(3, 1fr); } }
.carte-produit a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden;
  background: linear-gradient(180deg, var(--panneau), var(--nuit-2));
  transition: transform .15s ease, border-color .15s ease;
}
.carte-produit a:hover { transform: translateY(-3px); border-color: var(--sunset-1); }
.carte-produit-image { display: block; aspect-ratio: 1; background: var(--nuit-2); }
.carte-produit-image img { width: 100%; height: 100%; object-fit: cover; }
.carte-produit-sansphoto {
  display: block; height: 100%;
  background: radial-gradient(circle at 50% 40%, rgba(255,201,60,.16), transparent 62%);
}
.carte-produit-corps { display: grid; gap: 3px; padding: 16px 18px 18px; }
.carte-produit-texture {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan);
}
.carte-produit-nom { font-family: Anton, Impact, sans-serif; font-size: 1.2rem; text-transform: uppercase; }
.carte-produit-prix { color: var(--sunset-3); font-weight: 700; }
.carte-produit-formats { font-size: .86rem; color: var(--craie-douce); }
.carte-produit-epuise a { opacity: .55; }

.produit-photo { margin: 0 0 26px; }
.produit-photo img {
  width: 100%; border-radius: var(--rayon); border: 1px solid var(--bordure);
  aspect-ratio: 1; object-fit: cover;
}

/* Achat : formats, option d'étiquette, bouton. */
.achat {
  border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 20px;
  background: rgba(255, 255, 255, .025); margin: 0 0 30px;
}
.achat fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.achat legend {
  padding: 0; margin-bottom: 10px; font-family: Anton, Impact, sans-serif;
  text-transform: uppercase; letter-spacing: .06em; font-size: .95rem;
}
.formats { display: grid; gap: 9px; }
.format { display: block; cursor: pointer; }
.format input { position: absolute; opacity: 0; pointer-events: none; }
.format-corps {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--bordure); border-radius: 12px; padding: 13px 15px;
  transition: border-color .15s ease, background .15s ease;
}
.format input:checked + .format-corps { border-color: var(--sunset-1); background: rgba(255, 46, 126, .09); }
.format input:focus-visible + .format-corps { outline: 2px solid var(--cyan); outline-offset: 2px; }
.format-poids { font-family: Anton, Impact, sans-serif; font-size: 1.05rem; text-transform: uppercase; }
.format-prix { color: var(--sunset-3); font-weight: 700; margin-left: auto; }
.format-dispo { flex: 1 0 100%; font-size: .82rem; color: var(--craie-douce); }
.format-epuise .format-corps { opacity: .5; }

.option-choix { display: block; cursor: pointer; margin-bottom: 9px; }
.option-choix input { position: absolute; opacity: 0; pointer-events: none; }
.option-choix span {
  display: block; border: 1px solid var(--bordure); border-radius: 12px; padding: 13px 15px;
}
.option-choix input:checked + span { border-color: var(--sunset-1); background: rgba(255, 46, 126, .09); }
.option-choix input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.option-choix small { display: block; margin-top: 3px; color: var(--craie-douce); font-size: .86rem; }
.option-note { margin: 10px 0 0; font-size: .88rem; color: var(--craie-douce); }
.achat .bouton { width: 100%; justify-content: center; }
.achat-message { margin: 12px 0 0; min-height: 1.2em; font-size: .92rem; }
.achat-succes { color: #7ee0a0; font-weight: 700; }
.achat-erreur { color: #ff9a9a; font-weight: 700; }
.achat-ferme { background: rgba(255, 201, 60, .06); border-color: rgba(255, 201, 60, .4); }

/* Panier de l'en-tête. */
.nav-panier {
  flex: none; order: 2; position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; color: var(--craie); text-decoration: none;
  border: 1px solid var(--bordure);
}
.nav-panier:hover { color: var(--craie); border-color: var(--sunset-1); }
.nav-panier-compteur[hidden] { display: none; }
.nav-panier-compteur {
  position: absolute; top: -2px; right: -2px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--sunset-1); color: #fff;
  font-size: .7rem; font-weight: 700; display: grid; place-items: center;
}

/* Pages panier et commande. */
.panier-lignes { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.panier-ligne {
  display: flex; gap: 14px; align-items: flex-start; max-width: none;
  border: 1px solid var(--bordure); border-radius: 12px; padding: 15px 17px;
  background: rgba(255, 255, 255, .02);
}
.panier-ligne-corps { flex: 1; }
.panier-ligne-nom { margin: 0 0 3px; font-weight: 700; }
.panier-ligne-nom a { color: inherit; text-decoration: none; }
.panier-ligne-nom a:hover { color: var(--sunset-3); }
.panier-ligne-option { margin: 0 0 8px; font-size: .88rem; }
.panier-ligne-prix { margin: 0; font-weight: 700; color: var(--sunset-3); white-space: nowrap; }
.panier-quantite { display: flex; align-items: center; gap: 10px; font-size: .9rem; flex-wrap: wrap; }
.panier-quantite button {
  min-width: 40px; min-height: 40px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--bordure); background: rgba(255, 255, 255, .05); color: var(--craie);
  font-size: 1.05rem; line-height: 1;
}
.panier-quantite button:hover { border-color: var(--sunset-1); }
.panier-retirer { font-size: .84rem !important; padding: 0 12px; color: var(--craie-douce) !important; }
.panier-total, .commande-total {
  border-top: 1px solid var(--bordure); padding-top: 18px; display: grid; gap: 10px;
}
.panier-total p, .commande-total { display: flex; justify-content: space-between; gap: 16px; margin: 0; }
.panier-total strong, .commande-total strong { color: var(--sunset-3); font-size: 1.2rem; }
.panier-total .bouton { justify-content: center; }
.panier-vide { text-align: center; padding: 30px 0; }
.recap .panier-ligne { padding: 11px 14px; }
.commande h2 { margin-top: 1.6em; }
.commande .bouton { width: 100%; justify-content: center; margin-top: 8px; }

/* ─── AVANTAGES — code de la roue et grammes offerts ────────────────────── */
.avantages { display: grid; gap: 12px; margin: 22px 0; }
.avantage-code { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.avantage-code .perso-champ { flex: 1 1 200px; margin: 0; }
.avantage-code input { text-transform: uppercase; letter-spacing: .06em; }
.avantage-code .bouton { min-height: 46px; }
.avantage-ok, .avantage-refus, .avantage-attente {
  margin: 0; font-size: .92rem; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--bordure); background: rgba(255, 255, 255, .04);
}
.avantage-ok { color: var(--sunset-3); border-color: rgba(255, 201, 60, .4); }
.avantage-refus { color: var(--sunset-1); border-color: rgba(255, 46, 126, .4); }

/* Le bloc cadeau se voit : c'est l'argument commercial, pas une mention. */
.cadeau {
  padding: clamp(14px, 3vw, 20px); border-radius: 16px;
  border: 1px solid rgba(255, 201, 60, .35);
  background: linear-gradient(160deg, rgba(255, 201, 60, .09), rgba(255, 46, 126, .05));
  display: grid; gap: 12px;
}
.cadeau-titre { margin: 0; font-weight: 700; font-size: 1.06rem; color: var(--sunset-3); }
.cadeau-detail { font-size: .88rem; color: var(--craie-douce); }
.cadeau-varietes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cadeau-variete {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 13px; border-radius: 11px;
  border: 1px solid var(--bordure); background: rgba(0, 0, 0, .22);
}
.cadeau-nom { font-size: .95rem; }
.cadeau-reglage { display: flex; align-items: center; gap: 10px; }
/* 40 px : la cible tactile minimale. Ces boutons sont les plus cliqués du
   tunnel sur mobile, et un « + » de 24 px se rate une fois sur trois. */
.cadeau-reglage button {
  min-width: 40px; min-height: 40px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--bordure); background: rgba(255, 255, 255, .05);
  color: var(--craie); font-size: 1.05rem; line-height: 1;
}
.cadeau-reglage button:hover:not(:disabled) { border-color: var(--sunset-3); }
.cadeau-reglage button:disabled { opacity: .35; cursor: not-allowed; }
.cadeau-valeur { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.cadeau-reste { margin: 0; font-size: .9rem; color: var(--sunset-2); }
.cadeau-complet { color: var(--sunset-3); }
.cadeau-appel {
  margin: 0; font-size: .93rem; padding: 11px 15px; border-radius: 11px;
  border: 1px dashed rgba(255, 201, 60, .35); color: var(--craie-douce);
}

.panier-remise strong { color: var(--sunset-1) !important; }
.commande-montants { border-top: 1px solid var(--bordure); padding-top: 16px; display: grid; gap: 9px; }
.commande-montant { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-size: .96rem; }
.commande-remise strong, .commande-cadeau strong { color: var(--sunset-1); }
.commande-a-payer { padding-top: 9px; border-top: 1px solid var(--bordure); }
.commande-a-payer strong { color: var(--sunset-3); font-size: 1.24rem; }

/* ─── BACK-OFFICE — tableau de bord ─────────────────────────────────────── */
.admin-bord { margin-bottom: 40px; }
.admin-chiffres { display: grid; gap: 12px; margin: 16px 0 26px; }
@media (min-width: 640px) { .admin-chiffres { grid-template-columns: repeat(4, 1fr); } }
.admin-chiffres p {
  margin: 0; display: grid; gap: 3px; padding: 15px 17px;
  border: 1px solid var(--bordure); border-radius: 12px; background: rgba(255,255,255,.03);
}
.admin-chiffres span { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--craie-douce); }
.admin-chiffres strong { font-family: Anton, Impact, sans-serif; font-size: 1.5rem; color: var(--sunset-3); }
.admin-entonnoir { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 6px; }
.admin-entonnoir li {
  display: flex; align-items: baseline; gap: 12px; max-width: none;
  padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,.03);
}
.admin-entonnoir span { flex: 1; }
.admin-entonnoir strong { font-family: Anton, Impact, sans-serif; font-size: 1.1rem; }
.admin-entonnoir em { font-style: normal; color: var(--craie-douce); min-width: 4.5em; text-align: right; }
.admin-portes { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.admin-portes li { max-width: none; padding: 5px 12px; border-radius: 999px; font-size: .86rem; }
.porte-ok { color: #7ee0a0; background: rgba(126,224,160,.12); }
.porte-ko { color: #ff9a9a; background: rgba(255,154,154,.10); }
li.porte-ok, li.porte-ko { font-weight: 700; }

/* Repères factuels */
.reperes { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; }
.reperes li {
  padding-left: 30px; position: relative; max-width: 70ch;
}
.reperes li::before {
  content: ""; position: absolute; left: 6px; top: 0.62em;
  width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--sunset-3), var(--sunset-1));
}

/* Une liste ORDONNÉE porte son rang comme information : le losange générique
   l'effacerait. Le compteur remplace la puce, sans changer l'alignement. */
ol.reperes { counter-reset: repere; padding-left: 0; }
ol.reperes li { counter-increment: repere; padding-left: 34px; }
ol.reperes li::before {
  content: counter(repere); position: absolute; left: 0; top: 0.06em;
  width: 22px; height: 22px; border-radius: 999px; transform: none;
  background: linear-gradient(135deg, var(--sunset-3), var(--sunset-1));
  color: #14071c; font-family: Anton, Impact, sans-serif; font-size: 0.85rem;
  display: grid; place-items: center; line-height: 1;
}

table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 0.95rem; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
th { font-family: Anton, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 400; color: var(--craie); }
.tableau-defile { overflow-x: auto; }

details {
  border: 1px solid var(--bordure); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.02);
}
summary { cursor: pointer; font-weight: 700; }
details p { margin: 10px 0 0; }

/* Étiquette de statut : FAIT / USAGE / HYPOTHÈSE — la colonne vertébrale
   éditoriale du site. Le lecteur sait toujours ce qu'il lit. */
.statut {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  margin-right: 8px; vertical-align: middle; font-weight: 700;
}
.statut-fait { background: rgba(53, 230, 255, 0.16); color: var(--cyan); border: 1px solid rgba(53, 230, 255, 0.4); }
.statut-usage { background: rgba(255, 201, 60, 0.14); color: var(--sunset-3); border: 1px solid rgba(255, 201, 60, 0.4); }
.statut-hypothese { background: rgba(168, 85, 247, 0.16); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.45); }

.alerte {
  border: 1px solid rgba(255, 46, 126, 0.5); border-left-width: 4px;
  background: rgba(255, 46, 126, 0.07);
  border-radius: 12px; padding: 16px 18px; margin: 24px 0;
}
.alerte strong { color: #ffb3d0; }

/* ── Fil d'Ariane, pied de page ──────────────────────────────────────── */
.fil { font-size: 0.85rem; color: var(--craie-douce); padding-top: 22px; }
.fil a { color: var(--craie-douce); }
.fil span { opacity: 0.5; margin: 0 6px; }

.article-meta { color: var(--craie-douce); font-size: 0.88rem; margin: -0.4em 0 1.6em; }

.pied {
  border-top: 1px solid var(--bordure); margin-top: 68px;
  padding: 44px 0 60px; background: rgba(0, 0, 0, 0.35);
}
.pied-grille { display: grid; gap: 26px; }
@media (min-width: 760px) { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied h4 { font-family: Anton, sans-serif; text-transform: uppercase; font-weight: 400; font-size: 0.95rem; letter-spacing: 0.08em; margin: 0 0 12px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied a { color: var(--craie-douce); text-decoration: none; font-size: 0.92rem; }
.pied a:hover { color: var(--craie); }
.mentions-legales { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--bordure); font-size: 0.8rem; color: var(--craie-douce); }
.mentions-legales p { max-width: none; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--craie); color: var(--nuit); padding: 12px 18px; border-radius: 0 0 10px 0; z-index: 99;
}
.saut-contenu:focus { left: 0; top: 0; position: fixed; }

/* ── Correctifs mobile ───────────────────────────────────────────────── */
/*
 * À 375 px, la navigation passait sur trois lignes et repoussait la marque.
 * Une rangée unique qui défile latéralement tient sur un écran de téléphone
 * sans rien masquer et sans imposer un menu déroulant à ouvrir.
 */
@media (max-width: 760px) {
  .entete .enveloppe { gap: 12px; padding-inline: 14px; }
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: auto;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 9px; font-size: 0.86rem; }
  .nav-action { padding: 12px 15px; font-size: 0.82rem; min-height: 44px; display: inline-flex; align-items: center; }

  /*
   * Deux rangées plutôt qu'une.
   * Sur une seule ligne, le bouton d'action et la marque laissaient 150 px à
   * six entrées de menu : deux et demie étaient visibles, le reste demandait
   * un balayage que rien n'annonçait. En renvoyant la navigation sur sa
   * propre ligne, elle récupère toute la largeur de l'écran — quatre entrées
   * visibles au lieu de deux, et le dégradé de fin de rangée redevient
   * l'indice qu'il est censé être.
   */
  .entete .enveloppe { flex-wrap: wrap; row-gap: 2px; padding-block: 6px; }
  .marque { order: 1; }
  .nav-panier { order: 2; margin-left: auto; width: 40px; height: 40px; }
  .nav-action { order: 3; margin-left: 0; }
  .nav { order: 4; flex: 1 0 100%; margin-left: 0; margin-inline: -4px; padding-inline: 4px; }
  .marque { font-size: 1.08rem; }
  .marque img { height: 32px; }

  /* Cibles tactiles du pied de page. La hauteur mesurée était de 17 px, soit
     moins de la moitié d'un contact de pouce : deux entrées voisines
     tombaient dans la même surface. On rend la zone cliquable, pas le texte
     plus gros — l'espacement de la liste absorbe la différence. */
  .pied ul { gap: 0; }
  .pied ul a { display: block; padding-block: 11px; }

  /* Les trente et une questions de la FAQ s'ouvrent au doigt : 32 px de haut
     mesurés sur une question qui tient en une ligne, c'est court pour la
     principale interaction de la page. Le repli du bloc n'a pas besoin de
     bouger, seule la zone qui reçoit le contact. */
  details summary { padding-block: 5px; }
}

/*
 * RÉPONSE RAPIDE — la définition tenue en deux lignes, juste sous le titre.
 * Elle sert deux lecteurs à la fois : celui qui veut la réponse tout de suite,
 * et le moteur qui cherche un passage court et autonome à citer.
 */
.reponse-rapide {
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--sunset-1);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
}
.reponse-rapide p { margin: 0; font-size: 1.05rem; }
.reponse-rapide .etiquette-reponse {
  display: block; font-family: Anton, sans-serif; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.72rem; color: var(--sunset-3); margin-bottom: 6px;
}

/* ── Visuels ─────────────────────────────────────────────────────────── */
/*
 * La bannière est l'élément le plus lourd de la page d'accueil : elle est donc
 * la SEULE image en chargement prioritaire, dimensionnée en dur pour ne
 * provoquer aucun décalage de mise en page.
 */
.hero-affiche { margin: 0; }
.hero-affiche img {
  width: 100%; height: auto; display: block;
  border-radius: var(--rayon); border: 1px solid var(--bordure);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.hero-affiche figcaption {
  margin-top: 10px; font-size: 0.78rem; color: var(--craie-douce); text-align: center;
}

/* ─── LE SCEAU 90U ────────────────────────────────────────────────────────
 *
 * Le fichier porte déjà sa transparence : la règle `border` et le `box-shadow`
 * de `.hero-affiche img` lui colleraient un cadre et une ombre carrée autour
 * du disque. On les annule ici, sinon le sceau ressemble à une vignette collée
 * au lieu d'un tampon.
 *
 * L'ombre portée suit la forme (`drop-shadow`, pas `box-shadow`) : c'est ce
 * qui donne l'impression d'un relief posé sur la photo.
 */
.sceau {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
  user-select: none;
  -webkit-user-drag: none;
}

/* Hero — deux placements, un seul fichier.
 *
 * MOBILE : le hero empile le texte PUIS l'affiche. Un sceau posé sur l'affiche
 * tombe donc sous la ligne de flottaison, et le visiteur ne le voit jamais.
 * Vérifié en local le 2026-09-05 sur 375 x 812. Il est donc placé en tête du
 * bloc de texte, au-dessus du badge : c'est le seul endroit vu sans défiler.
 *
 * DESKTOP : le texte et l'affiche sont côte à côte. Le sceau reprend sa place
 * naturelle, en chevauchement sur le coin de l'affiche — `position: absolute`
 * le sort du flux, donc la hauteur du hero ne bouge pas et rien ne saute. */
.hero-texte { position: relative; }
/* MOBILE : hors du flux, dans l'espace vide à droite du badge.
 *
 * Posé DANS le flux, le sceau coûtait 184 px de hauteur et repoussait le
 * bouton « Voir les 4 pollens » 19 px sous la ligne de flottaison — mesuré
 * sur 375 x 812. Un sceau qui fait disparaître le bouton d'achat travaille
 * contre la vente qu'il est censé servir. En absolu, il ne coûte rien en
 * hauteur : le CTA reste entier.
 *
 * En HAUT à droite, il recouvrait le titre « Pollen US 90U » — également
 * proscrit. Il est donc ancré en BAS à droite, dans la bande libre à côté des
 * boutons : les deux CTA s'arrêtent à 219 px de large, le sceau commence à
 * 217 px. Aucun recouvrement, et il reste dans le premier écran. */
.hero-sceau {
  position: absolute;
  width: 150px; height: 150px;
  right: -8px; bottom: 4px;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 359px) {
  .hero-sceau { width: 120px; height: 120px; right: -4px; bottom: 2px; }
}
@media (min-width: 900px) {
  .hero-sceau {
    position: absolute;
    width: 250px; height: 250px;
    right: -130px; top: -18px;
    margin: 0;
    z-index: 2;
    pointer-events: none;
  }
}

/* Fiche produit : en chevauchement sur le coin de l'affiche.
 *
 * Posé dans le flux, le sceau héritait de `.flyer-affiche img { width: 100% }`
 * — plus spécifique que `.sceau-fiche` — et prenait toute la colonne, en
 * repoussant le visuel produit hors de l'écran. Vérifié sur 375 x 812. Le
 * sélecteur est donc porté au même niveau, et le sceau sort du flux : il ne
 * déplace plus rien et ne peut plus voler la place du produit. */
.flyer-affiche { position: relative; }
.flyer-affiche .sceau-fiche {
  position: absolute;
  width: 118px; height: 118px;
  /* En BAS À GAUCHE : le bouton d'aide flotte en permanence en bas à droite
   * et passait par-dessus le sceau. Vérifié sur 375 x 812. */
  left: -6px; bottom: -10px;
  z-index: 2;
  pointer-events: none;
}
@media (min-width: 900px) {
  .flyer-affiche .sceau-fiche { width: 156px; height: 156px; left: -14px; bottom: -14px; }
}

/* Respect de « animations réduites » : rien ne bouge, mais on le dit. */
@media (prefers-reduced-motion: reduce) { .sceau { filter: none; } }

.illustration { margin: 26px 0; }
.illustration img { width: 100%; height: auto; border-radius: var(--rayon); border: 1px solid var(--bordure); }
.illustration figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--craie-douce); }

/*
 * FAQ — <details> natif plutôt qu'un accordéon en JavaScript. Le contenu
 * replié reste dans le HTML, donc lisible par un moteur, et la page ne gagne
 * pas une dépendance pour une fonction que le navigateur sait déjà faire.
 */
.faq-item {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 14px 18px; margin: 10px 0; background: var(--nuit-2);
}
.faq-item summary {
  cursor: pointer; font-weight: 700; color: var(--craie);
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; color: var(--cyan); font-size: 1.15em; }
.faq-item[open] summary::before { content: "–"; }
.faq-item summary::marker { content: ""; }
.faq-item > div { margin-top: 10px; }
.faq-item > div p:last-child { margin-bottom: 0; }

/* ─── PERSONNALISATION ────────────────────────────────────────────────────
 * Le parcours reprend les codes du site — dorures, holographique, contraste
 * fort — sans rien ajouter à la feuille de style globale : tout ce qui suit
 * ne sert qu'à deux pages sur vingt et une.
 */
.perso { margin: 26px 0; }
.perso-fil {
  display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 22px;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.perso-fil li {
  flex: 1; display: flex; align-items: center; gap: 7px;
  color: var(--craie-douce); opacity: 0.5;
  padding: 9px 4px; border-top: 2px solid var(--bordure);
}
.perso-fil li span {
  display: grid; place-items: center; width: 21px; height: 21px;
  border-radius: 50%; background: var(--nuit-2); font-size: 0.72rem; flex: none;
}
.perso-fil .actif { opacity: 1; color: var(--craie); border-top-color: var(--cyan); }
.perso-fil .actif span { background: var(--cyan); color: #09040f; font-weight: 700; }
.perso-fil .fait { opacity: 0.85; border-top-color: rgba(255,255,255,0.3); }

.perso-corps {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--nuit-2); padding: clamp(18px, 4vw, 28px);
}
.perso-corps h3 { margin-top: 0; }
.perso-corps h3 small { font-weight: 400; opacity: 0.6; font-size: 0.6em; }

/* Zone de dépôt : cible tactile large, parce que l'essentiel du trafic
   arrivera d'un téléphone et qu'un petit bouton s'y rate. */
.perso-depot {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  border: 2px dashed var(--bordure); border-radius: var(--rayon);
  padding: 26px 20px; margin: 18px 0; min-height: 108px;
  background: rgba(255,255,255,0.02); transition: border-color .15s, background .15s;
}
.perso-depot:hover, .perso-depot.survol { border-color: var(--cyan); background: rgba(255,255,255,0.05); }
.perso-depot-icone {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 50%; background: var(--cyan); color: #09040f;
  font-size: 1.6rem; line-height: 1; font-weight: 700;
}
.perso-depot small { color: var(--craie-douce); }

.perso-champ { display: block; margin: 16px 0; font-weight: 700; font-size: 0.9rem; }
/* Tous les champs de saisie, pas une liste de types à tenir à jour : le champ
   téléphone du checkout est arrivé en blanc, non stylé, parce que « tel » ne
   figurait pas dans le sélecteur. Un champ oublié se voit tout de suite sur un
   formulaire sombre — et c'est celui-là qu'on remplit juste avant de payer. */
.perso-champ input[type="text"], .perso-champ input[type="email"],
.perso-champ input[type="tel"], .perso-champ input[type="number"],
.perso-champ input:not([type]) {
  display: block; width: 100%; margin-top: 7px; padding: 13px 14px;
  font: inherit; font-weight: 400; color: var(--craie);
  background: var(--nuit); border: 1px solid var(--bordure); border-radius: 12px;
}
.perso-champ input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.perso-champ input[type="range"] { width: 100%; margin-top: 10px; accent-color: var(--cyan); }
.perso-champ small { display: block; margin-top: 6px; font-weight: 400; color: var(--craie-douce); }

/* L'aperçu porte le ratio EXACT du gabarit d'impression : un aperçu au
   mauvais ratio promet un cadrage qui ne sera pas celui du produit. */
.perso-apercu { display: grid; place-items: center; margin: 20px 0; }
.perso-etiquette {
  position: relative; width: min(392px, 92vw); aspect-ratio: 7 / 4; overflow: hidden;
  border-radius: 14px; background: #000; cursor: grab; touch-action: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1), 0 18px 44px rgba(0,0,0,0.55);
}
.perso-etiquette:active { cursor: grabbing; }
/* Le canvas fait 826 × 472 — les dimensions d'impression. Le CSS ne fait que
   le réduire : ce que le client regarde EST le fichier. */
.perso-etiquette canvas {
  display: block; width: 100%; height: 100%;
  user-select: none; pointer-events: none;
}
.perso-etiquette::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.26) 0%, transparent 26%,
    rgba(255,120,220,.16) 44%, rgba(120,240,255,.16) 58%, transparent 78%);
  mix-blend-mode: screen;
}
/* L'écart exact est posé en ligne depuis le gabarit : en paysage, un même
   pourcentage sur les deux axes ne décrirait pas la même marge physique. */
.perso-securite {
  position: absolute; inset: 7.5% 4.3%; border: 1px dashed rgba(255,255,255,0.42);
  border-radius: 6px; pointer-events: none;
}
.perso-texte-rendu {
  position: absolute; left: 0; right: 0; bottom: 11%; z-index: 2;
  text-align: center; pointer-events: none;
  font-family: Anton, Impact, "Arial Narrow", sans-serif;
  font-size: clamp(15px, 4vw, 25px); color: #fff; letter-spacing: 0.02em;
  text-shadow: 0 0 5px rgba(0,0,0,.95), 0 2px 5px rgba(0,0,0,.85);
}

.perso-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }
.perso-actions .bouton { flex: 1 1 165px; text-align: center; }
.perso-note { font-size: 0.82rem; color: var(--craie-douce); margin-top: 14px; }
.perso-message p { margin: 14px 0 0; padding: 11px 14px; border-radius: 11px; font-size: 0.9rem; }
.perso-erreur { background: rgba(255,90,90,0.13); border: 1px solid rgba(255,90,90,0.4); }
.perso-alerte { background: rgba(255,200,60,0.13); border: 1px solid rgba(255,200,60,0.4); }
.perso-info   { background: rgba(255,255,255,0.06); border: 1px solid var(--bordure); }
.perso-fini { border: 1px solid var(--cyan); border-radius: var(--rayon);
  background: var(--nuit-2); padding: clamp(20px, 5vw, 32px); }

/* ─── Back-office ───────────────────────────────────────────────────────── */
.admin-connexion { max-width: 380px; }
.admin-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.admin-grille { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); }
.admin-carte {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--nuit-2); padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.admin-carte header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.admin-etat {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,0.09); white-space: nowrap;
}
.admin-etat-completed { background: rgba(90,255,140,0.17); }
.admin-etat-blocked   { background: rgba(255,90,90,0.2); }
.admin-vignette {
  width: 100%; aspect-ratio: 7/4; object-fit: cover;
  border-radius: 11px; border: 1px solid var(--bordure); background: #000;
}
.admin-carte dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 0.85rem; }
.admin-carte dt { color: var(--craie-douce); }
.admin-carte dd { margin: 0; }
.admin-alerte { color: #ffc83c; font-weight: 700; }
.admin-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.admin-bloquer { border: 1px solid rgba(255,90,90,0.5); color: #ff9a9a; background: transparent; }

/* Indicateur de qualité d'impression. Il mesure les pixels source réellement
   consommés par l'étiquette — pas la taille du fichier, qui ne dit rien une
   fois l'image zoomée. */
.perso-qualite {
  display: flex; align-items: center; gap: 11px; margin: 14px 0 0;
  font-size: 0.86rem; color: var(--craie-douce);
}
.perso-jauge {
  flex: none; width: 62px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.13); overflow: hidden;
}
.perso-jauge i { display: block; height: 100%; border-radius: 999px; transition: width .18s; }
.perso-qualite-excellente .perso-jauge i { background: #5aff8c; }
.perso-qualite-bonne      .perso-jauge i { background: #9bff5a; }
.perso-qualite-correcte   .perso-jauge i { background: #ffc83c; }
.perso-qualite-limite     .perso-jauge i { background: #ff6b6b; }
.perso-qualite-limite { color: #ff9a9a; }

.perso-bascule {
  display: flex; align-items: flex-start; gap: 11px; margin: 16px 0 0;
  padding: 13px 15px; border: 1px solid var(--bordure); border-radius: 12px;
  background: rgba(255,255,255,0.03); cursor: pointer; font-size: 0.9rem;
}
.perso-bascule input { margin-top: 3px; accent-color: var(--cyan); flex: none; width: 17px; height: 17px; }
.perso-bascule small { display: block; color: var(--craie-douce); font-size: 0.84em; }

/* Le cadre qui dit ce qui va se passer, juste avant le bouton d'envoi.
   Il est placé LÀ et pas plus haut : « est-ce que je paie ? » et « et
   après ? » se posent au moment de laisser son adresse, pas trois écrans
   avant. */
.perso-contexte {
  margin: 0 0 14px; padding: 11px 15px; font-size: .92rem;
  border: 1px solid rgba(255,201,60,.4); border-radius: 999px;
  background: rgba(255,201,60,.07); color: var(--craie-douce);
}
.perso-cadre {
  margin: 18px 0 4px; padding: 16px 18px;
  border: 1px solid var(--bordure); border-left: 3px solid var(--sunset-3);
  border-radius: 12px; background: rgba(255, 201, 60, 0.05);
}
.perso-cadre strong { color: var(--craie); }
.perso-apres { list-style: none; padding: 0; margin: 12px 0 10px; display: grid; gap: 7px; }
.perso-apres li { position: relative; padding-left: 20px; font-size: 0.93rem; color: var(--craie-douce); }
.perso-apres li::before {
  content: ""; position: absolute; left: 3px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--sunset-3);
}

/* Classes utilitaires. Elles remplacent des attributs `style=""` que la
   politique de sécurité bloque : `style-src 'self'` interdit le style en
   ligne, et un attribut bloqué ne prévient personne — il ne s'applique
   simplement pas. */
.sans-marge-bas { margin-bottom: 0; }
.centre { text-align: center; }
.etroit { max-width: 34ch; }
.marque-pied { font-size: 1.15rem; }

/* ─── Jauge du seuil de THC ───────────────────────────────────────────────
 * SVG en ligne plutôt qu'une image : le texte reste sélectionnable et lisible
 * par un lecteur d'écran, la jauge suit le thème du site, elle ne coûte aucune
 * requête et aucun octet d'image — et surtout, une valeur réglementaire écrite
 * en dur dans des pixels serait à refaire au premier changement de texte.
 * Les couleurs sont posées ici et non en attributs : `style-src 'self'`
 * interdit le style en ligne, et les classes restent modifiables d'un endroit.
 */
.jauge-seuil { margin: 26px 0; }
.jauge-seuil svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--nuit-2); padding: 8px 0;
}
.jauge-conforme { fill: #2f7d4f; }
.jauge-hors { fill: #6b2233; }
.jauge-seuil-trait { stroke: var(--sunset-3); stroke-width: 2.5; }
.jauge-seuil-point { fill: var(--sunset-3); }
.jauge-valeur {
  fill: var(--sunset-3); font-family: Anton, Impact, "Arial Narrow", sans-serif;
  font-size: 25px; letter-spacing: 0.02em;
}
.jauge-echelle { fill: var(--craie-douce); font-family: inherit; font-size: 17px; }
.jauge-zone {
  font-family: inherit; font-size: 16px; font-weight: 700;
  letter-spacing: 0.02em;
}
.jauge-zone-ok { fill: #7ee0a0; }
.jauge-zone-ko { fill: #e08a9a; }
.jauge-seuil figcaption {
  margin-top: 10px; font-size: 0.85rem; color: var(--craie-douce);
}

/* Sur mobile, les libellés de zone deviennent illisibles à cette échelle :
   on les efface plutôt que de les laisser se chevaucher. L'aria-label, lui,
   porte l'information complète quelle que soit la largeur. */
@media (max-width: 520px) {
  .jauge-zone { font-size: 21px; }
  .jauge-echelle { font-size: 21px; }
  .jauge-valeur { font-size: 30px; }
}


/* ─── VITRINE, ÉCHELLE DE PRIX ET FICHE PRODUIT ────────────────────────────
 *
 * Mobile d'abord : une colonne, puis deux, puis quatre. Aucune requête média
 * pour la grille — `auto-fit` et `minmax` suffisent, et un point de rupture
 * de moins est un bogue de moins.
 */
.grille-produits {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.carte-produit > a {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--panneau); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.carte-produit > a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.carte-produit > a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.carte-produit-image { display: block; aspect-ratio: 1; background: #000; }
.carte-produit-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-produit-sansphoto { display: block; width: 100%; aspect-ratio: 1; background: var(--nuit-2); }
.carte-produit-corps { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.carte-produit-texture {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sunset-3);
}
.carte-produit-nom { font-size: 1.08rem; font-weight: 600; }
.carte-produit-prix { font-size: 1rem; }
.carte-produit-bientot {
  display: inline-block; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .12em .55em; border-radius: 999px;
  border: 1px solid var(--bordure-vive, #432a6e); color: var(--craie-douce);
}
.carte-produit-formats { font-size: .82rem; color: var(--craie-douce); }
.carte-produit-attente .carte-produit-image img { opacity: .82; }

/* L'échelle de dégressivité : la seule « offre » du site, et elle est
 * calculée. Elle défile horizontalement sur téléphone plutôt que de
 * s'empiler sur six lignes illisibles. */
.degressivite {
  margin: 0 0 26px; padding: 20px 22px;
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: linear-gradient(160deg, var(--panneau), var(--nuit-2));
}
.degressivite-titre { margin: 0 0 14px; font-weight: 600; }
.degressivite-echelle {
  list-style: none; margin: 0 0 12px; padding: 0 0 4px;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
}
.degressivite-palier {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--bordure); background: var(--nuit);
  font-variant-numeric: tabular-nums;
}
.degressivite-signature { border-color: var(--sunset-3); }
.degressivite-poids { font-size: .95rem; font-weight: 600; }
.degressivite-gramme { font-size: 1.18rem; color: var(--sunset-3); font-weight: 600; }
.degressivite-prix { font-size: .88rem; color: var(--craie-douce); }
.degressivite-eco { font-size: .76rem; color: var(--cyan); }

/* Fiche produit */
.produit-gamme {
  margin: 0 0 14px; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sunset-3);
}
.galerie { display: grid; gap: 10px; margin: 0 0 24px; }
.galerie-vue { margin: 0; border-radius: var(--rayon); overflow: hidden; background: #000; }
.galerie-vue img { width: 100%; height: auto; display: block; }
.galerie-attente {
  padding: 26px; border: 1px dashed var(--bordure);
  border-radius: var(--rayon); background: var(--nuit-2);
}
.galerie-note { margin: 0; color: var(--craie-douce); font-size: .95rem; }

/* Le sélecteur de format : chaque option porte son prix au gramme et son
 * économie. C'est ce qui doit se comprendre en une seconde. */
.formats { display: grid; gap: 8px; border: 0; padding: 0; margin: 0 0 18px; }
.formats > legend { padding: 0 0 10px; font-weight: 600; }
.format { display: block; cursor: pointer; }
.format input { position: absolute; opacity: 0; width: 0; height: 0; }
.format-corps {
  display: grid; align-items: center; gap: 4px 14px;
  grid-template-columns: 1fr auto auto;
  padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--bordure); background: var(--nuit-2);
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, background .15s ease;
}
.format:hover .format-corps { border-color: var(--bordure-vive, #432a6e); }
.format input:checked + .format-corps { border-color: var(--cyan); background: var(--panneau); }
.format input:focus-visible + .format-corps { outline: 2px solid var(--cyan); outline-offset: 2px; }
.format-poids { font-weight: 600; display: flex; flex-direction: column; }
.format-role { font-size: .72rem; font-weight: 400; color: var(--craie-douce); letter-spacing: .02em; }
.format-prix { font-weight: 600; }
.format-gramme { color: var(--sunset-3); font-size: .88rem; white-space: nowrap; }
.format-eco { grid-column: 3; font-size: .76rem; color: var(--cyan); text-align: right; }
.format-eco-vide { visibility: hidden; }
.format-dispo { grid-column: 1 / -1; font-size: .76rem; color: var(--craie-douce); }
.format-epuise .format-corps { opacity: .55; }
.achat-ferme .format-corps { cursor: default; }

@media (max-width: 420px) {
  .format-corps { grid-template-columns: 1fr auto; }
  .format-gramme { grid-column: 1; }
  .format-eco { grid-column: 2; }
}

/* ─── DÉSIR D'ABORD : arôme, bouton, réassurance ───────────────────────────
 *
 * L'ordre de la fiche est photo → nom → arôme → prix → bouton → réassurance.
 * Ces trois règles servent cet ordre et rien d'autre.
 */
.produit-arome {
  margin: -6px 0 20px;
  font-size: 1.32rem;
  line-height: 1.25;
  color: var(--craie);
}
.produit-arome small {
  display: block; margin-top: 4px;
  font-size: .74rem; letter-spacing: .04em;
  color: var(--craie-douce); text-transform: none;
}

/* Le bouton d'achat est le seul élément de la page à cette taille. */
.bouton-achat {
  width: 100%;
  padding: 16px 22px;
  font-size: 1.05rem;
}

.reassurance {
  list-style: none; margin: 18px 0 30px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 9px;
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--nuit-2);
  font-size: .9rem; color: var(--craie-douce);
}
.reassurance strong { color: var(--craie); }

/* ─── VITRINE D'ACCUEIL — la boutique en haut de page ──────────────────────
 *
 * Réutilise .grille-produits et .carte-produit déjà stylés. Ces règles ne
 * couvrent que l'habillage propre à l'accueil : l'en-tête et la rangée de
 * gages de confiance sous les produits.
 */
.vitrine-accueil { margin: 8px 0 40px; }
.vitrine-entete { margin: 0 0 20px; }
.vitrine-eyebrow {
  margin: 0 0 6px; font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sunset-3); font-weight: 600;
}
.vitrine-titre {
  font-family: Anton, "IBM Plex Sans", sans-serif; font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.05;
  letter-spacing: .015em; text-transform: uppercase; margin: 0 0 8px;
}
.vitrine-sous { margin: 0; color: var(--craie-douce); font-size: 1rem; }

.vitrine-gages {
  list-style: none; margin: 20px 0 0; padding: 18px 20px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--nuit-2);
}
.vitrine-gages li { display: flex; flex-direction: column; gap: 2px; }
.vitrine-gages strong { font-size: .95rem; }
.vitrine-gages span { font-size: .82rem; color: var(--craie-douce); }

/* Sur mobile, le hero va droit au but : texte, boutons, puis les produits.
 * La plaque-emblème n'apparaît qu'à partir de 900 px, là où la grille du hero
 * passe à deux colonnes et où elle équilibre réellement la mise en page. */
@media (max-width: 899px) {
  .hero .plaque-scene { display: none; }
}

/* ─── AFFICHE PRODUIT — poster californien en CSS ──────────────────────────
 *
 * La photo réelle de la galette au centre, le décor peint autour. Chaque
 * variété passe ses couleurs par --flyer-haut / --flyer-bas / --flyer-lueur.
 * Aucune allégation d'effet : le texte est écrit par le site.
 */
.flyer {
  position: relative;
  margin: 0 0 24px;
  padding: 26px 22px 22px;
  border-radius: var(--rayon);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--bordure);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Coucher de soleil par défaut ; chaque .flyer--<variété> le surcharge. */
  --flyer-lueur: #ff2e7e33;
  background:
    radial-gradient(58% 42% at 50% 18%, #fff3c4 0%, #ff2e7e 26%, transparent 60%),
    linear-gradient(180deg, #ff2e7e 0%, #ff7a3d 34%, #150c26 74%, #0d0716 100%);
}
/* Le ciel : coucher de soleil de la variété, du haut vers le bas. */
/* Le soleil, disque bas et brumeux comme sur les affiches de la baie. */
.flyer-soleil {
  position: absolute; z-index: 0;
  top: 10%; left: 50%; transform: translateX(-50%);
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, #fff7d6 0%, #ffdf7e 55%, transparent 72%);
  opacity: .9; filter: blur(2px);
}
.flyer-palmiers { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .55; }
.flyer-galette {
  position: relative; z-index: 1;
  display: block;
  width: min(78%, 320px);
  height: auto;
  margin: 10px auto 16px;
  filter: drop-shadow(0 20px 38px rgba(0,0,0,.6));
}
.flyer-texte { margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.flyer-gamme {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.flyer-nom {
  font-family: Anton, "IBM Plex Sans", sans-serif; font-weight: 400;
  font-size: clamp(2.1rem, 8vw, 3.4rem); line-height: .92;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 2px rgba(0,0,0,.55), 0 0 26px var(--flyer-lueur);
}
.flyer-arome {
  font-size: 1.05rem; color: #fff; font-style: italic;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 1px;
}
.flyer-arome small { font-style: normal; font-size: .68rem; letter-spacing: .04em; color: rgba(255,255,255,.72); }
.flyer-gages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2px; }
.flyer-gages span {
  font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; color: #fff;
  padding: .28em .7em; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
}
.flyer-prix {
  margin-top: 8px;
  font-family: Anton, sans-serif; font-size: 1.55rem; letter-spacing: .02em;
  color: #1a1204;
  padding: .32em 1.1em; border-radius: 999px;
  /* Or/ambre fixe : la couleur du coucher de soleil, lisible sur toute
     variété — un texte sombre sur un violet sombre disparaissait. */
  background: linear-gradient(120deg, #ffd453, #ff8a3d);
  box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

/* Affiche produit fournie : poster complet, jamais recadré (contain naturel). */
.flyer-affiche {
  margin: 0 0 24px;
  display: flex;
  justify-content: center;
}
.flyer-affiche img {
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .7);
}

/* Étiquette personnalisée — cadeau du grand format. */
.option-cadeau {
  display: inline-block;
  background: linear-gradient(120deg, #ffd453, #ff8a3d);
  color: #1a1204;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .82em;
}
.option-choix-inactive { opacity: .5; }
.option-note-bloc { color: var(--accent, #ffb300); }

/* Image héros fournie : bannière premium, visible partout (mobile compris). */
.hero-affiche { margin: 0; display: flex; justify-content: center; align-items: center; }
.hero-affiche img {
  width: 100%;
  max-width: 1040px;
  height: auto;
  border-radius: var(--rayon);
  border: 1px solid var(--bordure);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .75);
}
@media (max-width: 899px) { .hero-affiche { margin-top: 8px; } }
/* Héros agrandi : la bannière passe en pleine largeur sous le texte. */
@media (min-width: 900px) {
  .hero .hero-grille { grid-template-columns: 1fr; }
  .hero .hero-affiche { grid-column: 1 / -1; }
}

/* ─── SIGNATURE CALIPLATES — une devise par page, discrète et premium ─────── */
.signature {
  margin: 44px 0 4px;
  padding: 24px 16px 0;
  border-top: 1px solid var(--bordure);
  text-align: center;
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .005em;
  color: var(--craie-douce);
  text-wrap: balance;
}
.signature b {
  font-weight: 800;
  letter-spacing: .04em;
  background: linear-gradient(96deg, var(--sunset-3), var(--sunset-1) 46%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Aperçu « sur ta plaquette » — l'étiquette imprimée posée sur le produit. */
.perso-mockup { margin: 20px 0 0; text-align: center; }
.perso-mockup-titre {
  margin: 0 0 8px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sunset-3); font-weight: 700;
}
.perso-mockup canvas {
  width: 100%; max-width: 440px; height: auto; display: inline-block;
}
.perso-mockup .perso-note { margin-top: 8px; }

/* Le taux de THC mesuré, mis en avant sur la fiche produit. */
.analyse-chiffre {
  margin: 14px 0 12px; padding: 16px 18px;
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: linear-gradient(160deg, var(--panneau), var(--nuit-2));
}
.analyse-valeur { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 1.15rem; }
.analyse-valeur small { font-weight: 400; font-size: .85rem; color: var(--craie-douce); }
.analyse-date { margin: 6px 0 0; font-size: .88rem; color: var(--craie-douce); }

/* ─── ASSISTANT — bulle flottante, panneau, réponses issues du site ───────── */
.assistant { position: fixed; right: 16px; bottom: 16px; z-index: 60; }
.assistant-bulle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 800; color: #1a1204;
  background: linear-gradient(120deg, var(--sunset-3), var(--sunset-1) 55%, var(--violet));
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7);
}
.assistant-bulle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.assistant-panneau {
  position: absolute; right: 0; bottom: 60px; width: min(92vw, 400px);
  max-height: min(70vh, 560px); overflow-y: auto;
  padding: 18px; border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--nuit); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .85);
}
.assistant-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.assistant-titre { margin: 0; font-weight: 800; }
.assistant-fermer {
  border: 0; background: none; color: var(--craie-douce);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.assistant-note { margin: 6px 0 14px; font-size: .85rem; color: var(--craie-douce); }
.assistant-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.assistant-forme { display: flex; flex-wrap: wrap; gap: 8px; }
.assistant-champ {
  flex: 1 1 12rem; min-width: 0; padding: 11px 13px;
  border: 1px solid var(--bordure); border-radius: 12px;
  background: var(--nuit-2); color: var(--craie); font: inherit; font-size: 1rem;
}
.assistant-champ:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.assistant-envoi { flex: 0 0 auto; }
.assistant-reponses { margin-top: 14px; }
.assistant-reponse { padding: 12px 0; border-top: 1px solid var(--bordure); }
.assistant-question { margin: 0 0 6px; font-size: 1rem; }
.assistant-texte { font-size: .93rem; color: var(--craie-douce); }
.assistant-texte p { margin: 0 0 8px; }
.assistant-source { margin: 8px 0 0; font-size: .85rem; }
.assistant-rien { margin: 14px 0 0; font-size: .93rem; color: var(--craie-douce); }
@media (max-width: 520px) { .assistant-bulle-texte { display: none; } }

/* ─── BANDEAU D'APPELLATION « POLLEN US » ──────────────────────────────────
 *
 * Placé après le hero, hors de la zone couverte par l'expérience SEO en
 * cours. Volontairement court : trois mentions sur une ligne, pour annoncer
 * la nature commerciale du nom et le délai sans repousser la vitrine produit.
 *
 * Les séparateurs sont dessinés en CSS et non écrits dans le texte : un
 * lecteur d'écran énoncerait « point milieu » à chaque fois.
 */
.bandeau-us {
  margin: 18px 0 26px;
  padding: 14px 18px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  text-align: center;
}
.bandeau-us-titre {
  margin: 0;
  font-family: var(--police-titre, inherit);
  font-size: clamp(1.05rem, 4.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: linear-gradient(92deg, #ffd479, #ff5f9e 55%, #a06bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bandeau-us-detail {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 0.86rem;
  color: var(--craie-douce);
}
/* Le point milieu est décoratif : il sépare à l'œil, jamais à la voix. */
.bandeau-us-detail span + span::before {
  content: "·";
  margin-right: 14px;
  opacity: 0.55;
}
@media (min-width: 900px) {
  .bandeau-us { padding: 16px 24px; }
  .bandeau-us-detail { font-size: 0.95rem; }
}

/* ======================================================================
   LA ROUE — univers Cali Plates : nuit béton, néons sunset.
   Mobile d'abord. Elle occupe l'écran quand elle s'ouvre, et se ferme
   d'un geste : croix, fond, ou Échap.
   ⚠️ CSP style-src 'self' : aucun style en ligne, tout vit ici. Seule
   `--angle` est posée par le script, ce qu'une variable CSS autorise.
   ====================================================================== */
body.roue-ouverte { overflow: hidden; }

.roue-fond {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 16px;
  background: rgba(8, 4, 16, .82);
  backdrop-filter: blur(6px);
  animation: roue-apparait .25s ease both;
}
@keyframes roue-apparait { from { opacity: 0 } to { opacity: 1 } }

.roue-boite {
  position: relative; width: min(440px, 100%);
  max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: clamp(20px, 5vw, 30px);
  background: linear-gradient(165deg, var(--panneau), var(--nuit));
  border: 1px solid var(--bordure); border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 46, 126, .18);
  text-align: center;
  animation: roue-monte .3s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes roue-monte { from { transform: translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }

.roue-fermer {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .07); color: var(--craie);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.roue-fermer:hover { background: rgba(255, 255, 255, .14); }

.roue-surtitre {
  margin: 0 0 4px; font-size: .72rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--sunset-3);
}
.roue-titre { margin: 0 0 16px; font-size: clamp(1.5rem, 5.5vw, 1.95rem); line-height: 1.12; color: var(--craie); }
.roue-gain {
  background: linear-gradient(92deg, var(--sunset-3), var(--sunset-1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* La scène : un disque en secteurs, une flèche fixe, un moyeu. */
.roue-scene { position: relative; width: min(280px, 74vw); aspect-ratio: 1; margin: 0 auto 18px; }
.roue-disque {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--sunset-3);
  box-shadow: 0 0 30px rgba(255, 201, 60, .28), inset 0 0 24px rgba(0, 0, 0, .5);
  overflow: hidden; transform: rotate(0deg);
}
.roue-disque.roue-tourne {
  animation: roue-tourner 4s cubic-bezier(.15, .85, .2, 1) forwards;
}
@keyframes roue-tourner { to { transform: rotate(var(--angle, 1800deg)) } }

/* Le disque : un dégradé conique posé par le script selon le nombre de lots. */
.roue-disque { background: var(--parts, conic-gradient(var(--sunset-1), var(--sunset-3))); }

/* Chaque étiquette est posée au centre de sa part, par rotation autour du
   moyeu. `--tour` est calculé par le script : la roue s'adapte donc au nombre
   de lots réellement offerts, qui varie avec le stock cadeau. */
.roue-etiquette {
  position: absolute; z-index: 1;
  top: var(--y, 50%); left: var(--x, 50%);
  width: 82px; transform: translate(-50%, -50%);
  pointer-events: none; text-align: center;
}
.roue-etiquette b {
  display: block;
  font-size: .62rem; font-weight: 900; line-height: 1.12;
  text-transform: uppercase; letter-spacing: .01em;
  color: #150c26; text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

.roue-fleche {
  position: absolute; top: -10px; left: 50%; z-index: 2;
  width: 0; height: 0; transform: translateX(-50%);
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 22px solid var(--craie);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
}
.roue-moyeu {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 58px; height: 58px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--nuit); border: 3px solid var(--craie);
  color: var(--craie); font-weight: 900; letter-spacing: .06em;
}

.roue-form { display: grid; gap: 10px; text-align: left; }
.roue-form label { font-size: .82rem; color: var(--craie-douce); }
.roue-form input[type="email"] {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--nuit); color: var(--craie);
  border: 1px solid var(--bordure); border-radius: 12px; font-size: 16px;
}
.roue-form input[type="email"]:focus { outline: 2px solid var(--sunset-1); outline-offset: 1px; }
.roue-case { display: flex; gap: 9px; align-items: flex-start; font-size: .76rem; line-height: 1.4; }
.roue-case input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--sunset-1); }
.roue-leurre { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.roue-bouton {
  display: block; width: 100%; min-height: 54px; margin-top: 4px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(92deg, var(--sunset-1), var(--sunset-2));
  color: #fff; font-size: 1.02rem; font-weight: 800; text-align: center;
  text-decoration: none; line-height: 54px;
}
.roue-bouton:hover { filter: brightness(1.08); }
.roue-bouton[disabled] { opacity: .65; cursor: progress; }
.roue-plus-tard {
  width: 100%; min-height: 44px; margin-top: 8px; border: 0;
  background: none; color: var(--craie-douce); font-size: .85rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.roue-erreur { margin: 0; color: #ff8fae; font-size: .82rem; }
.roue-mentions { margin: 6px 0 0; font-size: .7rem; line-height: 1.45; color: var(--craie-douce); }
.roue-mentions a { color: var(--craie-douce); }
.roue-gain-detail { margin: 0 0 12px; color: var(--craie); font-size: .95rem; }
.roue-code {
  margin: 0 0 8px; padding: 12px; border-radius: 12px;
  background: var(--nuit); border: 1px dashed var(--sunset-3);
  color: var(--craie); letter-spacing: .05em;
}
.roue-code strong { font-size: 1.15rem; color: var(--sunset-3); }
.roue-actions { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .roue-fond, .roue-boite { animation: none; }
  .roue-disque.roue-tourne { animation-duration: .6s; }
}

/* Affiches par variété (générées) */
.flyer--banana-kush{background:radial-gradient(58% 42% at 50% 18%, #fff3c4 0%, #a6e22e 26%, transparent 60%),linear-gradient(180deg, #a6e22e 0%, #ffb300 34%, #150c26 74%, #0d0716 100%);--flyer-lueur:#7dd83133;}
.flyer--manali{background:radial-gradient(58% 42% at 50% 18%, #fff3c4 0%, #a855f7 26%, transparent 60%),linear-gradient(180deg, #a855f7 0%, #ff8a3d 34%, #150c26 74%, #0d0716 100%);--flyer-lueur:#a855f733;}
.flyer--og-kush{background:radial-gradient(58% 42% at 50% 18%, #fff3c4 0%, #6dd400 26%, transparent 60%),linear-gradient(180deg, #6dd400 0%, #ffc93c 34%, #150c26 74%, #0d0716 100%);--flyer-lueur:#6dd40033;}
.flyer--cali-berry{background:radial-gradient(58% 42% at 50% 18%, #fff3c4 0%, #c026d3 26%, transparent 60%),linear-gradient(180deg, #c026d3 0%, #7c3aed 34%, #150c26 74%, #0d0716 100%);--flyer-lueur:#c026d333;}
.flyer--piatella{background:radial-gradient(58% 42% at 50% 18%, #fff3c4 0%, #f5c451 26%, transparent 60%),linear-gradient(180deg, #f5c451 0%, #c8842a 34%, #150c26 74%, #0d0716 100%);--flyer-lueur:#f5c45133;}