@charset "UTF-8";
/* ==========================================================================
   🍯 LA RUCHE 31 🐝 — SYSTÈME VISUEL / DIRECTION ARTISTIQUE
   Toulouse — « SÉLECTION FINE, RÉCOLTES RARES. »
   --------------------------------------------------------------------------
   Univers    : le miel et la ruche. Noir profond + or liquide.
   Ton        : luxe artisanal, chaleureux, premium, mobile-first.
   Mascotte   : abeille cartoon à lunettes d'aviateur.
   --------------------------------------------------------------------------
   Ce fichier est chargé APRÈS assets/app.min.css : il gagne en cascade.
   Aucune image externe, aucun CDN, aucune police distante.
   Seuls transform et opacity sont animés. 3 animations infinies maximum.
   --------------------------------------------------------------------------
   SOMMAIRE
     01. Jetons de design (:root)
     02. Neutralisation de la palette héritée
     03. Fond de l'application (noir chaud, halos de miel, nid d'abeille)
     04. Bases typographiques et utilitaires
     05. Barre d'application et marque
     06. Bandeau héros
     07. Filtres, puces, recherche, note de catalogue
     08. Grille et cartes produit
     09. Fiche produit (galerie, slider, points, formats)
     10. Boutons — or liquide 3D
     11. Quantités et champs de formulaire
     12. Panier, lignes et totaux
     13. Feuilles glissantes (sheet / scrim / panel)
     14. Modales, toasts et alertes
     15. Cartes d'information
     16. Barre d'onglets basse — verre sombre
     17. Portail département (écran d'entrée)
     18. Accessibilité, focus et sélection
     19. Adaptations 320px → 480px et au-delà
     20. Animations infinies (3 max) et mouvement réduit
   ========================================================================== */


/* ==========================================================================
   01. JETONS DE DESIGN
   Toute la marque tient dans ce bloc : couleurs, dégradés d'or liquide,
   rayons, ombres, courbes d'accélération et durées.
   ========================================================================== */
:root{

  /* --- 01.1 Palette imposée ------------------------------------------- */
  --r-noir:#0B0A07;          /* fond principal — noir chaud, jamais bleuté  */
  --r-noir-2:#141109;        /* surfaces                                     */
  --r-or:#F5B31A;            /* or principal — couleur d'action              */
  --r-or-clair:#FFD966;      /* éclats                                       */
  --r-or-fonce:#B87A0B;      /* arêtes et reliefs 3D                         */
  --r-miel:#E8A317;          /* miel                                         */
  --r-creme:#F7EEDC;         /* texte principal                              */
  --r-brun:#3A2A12;          /* bordures chaudes                             */

  /* --- 01.2 Dérivés utiles -------------------------------------------- */
  --r-noir-3:#1C1710;                    /* surface surélevée               */
  --r-noir-4:#241D12;                    /* surface la plus haute           */
  --r-etincelle:#FFF7E2;                 /* point d'éclat quasi blanc       */
  --r-or-profond:#8A5A06;                /* ombre du métal                  */
  --r-creme-doux:rgba(247,238,220,.72);  /* texte secondaire                */
  --r-creme-faible:rgba(247,238,220,.48);/* texte tertiaire                 */
  --r-succes:#7BC96F;
  --r-alerte:#E4572E;

  /* --- 01.3 Voiles et bordures ---------------------------------------- */
  --r-voile-1:rgba(245,179,26,.08);
  --r-voile-2:rgba(245,179,26,.14);
  --r-voile-3:rgba(245,179,26,.22);
  --r-bord:rgba(184,122,11,.34);         /* bordure dorée fine              */
  --r-bord-fort:rgba(245,179,26,.62);    /* bordure dorée active            */
  --r-bord-chaud:var(--r-brun);
  --r-cloison:rgba(247,238,220,.07);     /* séparateur discret              */

  /* --- 01.4 Or liquide : dégradés multi-arrêts ------------------------- */
  /* Point d'éclat quasi blanc au tiers : c'est lui qui rend le métal.     */
  --r-or-liquide:linear-gradient(
      168deg,
      #FFE7A6 0%,
      var(--r-or-clair) 14%,
      var(--r-or) 30%,
      var(--r-etincelle) 44%,
      var(--r-miel) 58%,
      var(--r-or-fonce) 84%,
      var(--r-or-profond) 100%);

  --r-or-liquide-doux:linear-gradient(
      168deg,
      rgba(255,231,166,.92) 0%,
      rgba(245,179,26,.90) 34%,
      rgba(255,247,226,.96) 47%,
      rgba(232,163,23,.90) 62%,
      rgba(184,122,11,.92) 100%);

  --r-or-texte:linear-gradient(
      100deg,
      var(--r-or-clair) 0%,
      var(--r-etincelle) 26%,
      var(--r-or) 48%,
      var(--r-miel) 72%,
      var(--r-or-clair) 100%);

  --r-or-filet:linear-gradient(
      90deg,
      rgba(184,122,11,0) 0%,
      rgba(245,179,26,.55) 22%,
      rgba(255,247,226,.95) 50%,
      rgba(245,179,26,.55) 78%,
      rgba(184,122,11,0) 100%);

  /* Coulée de miel : utilisée sous les surfaces sombres */
  --r-coulee:radial-gradient(120% 90% at 50% 0%,
      rgba(245,179,26,.16) 0%,
      rgba(232,163,23,.06) 42%,
      rgba(11,10,7,0) 78%);

  /* --- 01.5 Surfaces composites --------------------------------------- */
  --r-surface:linear-gradient(180deg, rgba(245,179,26,.055), rgba(245,179,26,0) 46%), var(--r-noir-2);
  --r-surface-haute:linear-gradient(180deg, rgba(245,179,26,.09), rgba(245,179,26,0) 52%), var(--r-noir-3);
  --r-verre:linear-gradient(180deg, rgba(36,29,18,.86), rgba(11,10,7,.94));

  /* --- 01.6 Rayons ----------------------------------------------------- */
  --r-rayon-xs:8px;
  --r-rayon-sm:12px;
  --r-rayon-md:16px;
  --r-rayon:20px;            /* rayon de référence des cartes               */
  --r-rayon-lg:24px;
  --r-rayon-xl:30px;
  --r-rayon-plein:999px;

  /* --- 01.7 Ombres et lueurs ------------------------------------------ */
  --r-ombre-1:0 2px 8px rgba(0,0,0,.42);
  --r-ombre-2:0 10px 26px rgba(0,0,0,.50);
  --r-ombre-3:0 18px 44px rgba(0,0,0,.58);
  --r-ombre-encart:inset 0 1px 0 rgba(255,247,226,.10);
  --r-lueur-or:0 0 0 1px rgba(245,179,26,.22), 0 10px 30px rgba(184,122,11,.20);
  --r-lueur-or-forte:0 0 0 1px rgba(245,179,26,.42), 0 12px 34px rgba(245,179,26,.26);
  --r-relief-bas:inset 0 -3px 0 0 var(--r-or-fonce);      /* arête 3D       */
  --r-relief-bas-fort:inset 0 -4px 0 0 var(--r-or-profond);

  /* --- 01.8 Courbes et durées ----------------------------------------- */
  --r-courbe:cubic-bezier(.22,.85,.26,1);        /* sortie douce            */
  --r-courbe-souple:cubic-bezier(.34,1.28,.44,1);/* léger rebond            */
  --r-courbe-nette:cubic-bezier(.4,0,.2,1);
  --r-t-court:120ms;
  --r-t:180ms;
  --r-t-long:280ms;
  --r-t-lent:460ms;

  /* --- 01.9 Rythme et gabarits ---------------------------------------- */
  --r-esp-1:4px;
  --r-esp-2:8px;
  --r-esp-3:12px;
  --r-esp-4:16px;
  --r-esp-5:22px;
  --r-esp-6:30px;
  --r-touche:44px;           /* zone tactile minimale                       */
  --r-champ:16px;            /* taille de police des champs (anti-zoom iOS) */
  --r-nid:46px;              /* pas de la trame nid d'abeille               */

  /* --- 01.10 Typographie ---------------------------------------------- */
  --r-police:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-titrage:.02em;
  --r-capitale:.14em;
}


/* ==========================================================================
   02. NEUTRALISATION DE LA PALETTE HÉRITÉE
   app.js peut injecter les thèmes Telegram en style inline sur <html>.
   On reprend la main avec !important, uniquement sur ces jetons hérités.
   ========================================================================== */
:root,
html{
  --bg:var(--r-noir) !important;
  --surface:var(--r-noir-2) !important;
  --surface2:var(--r-noir-3) !important;
  --text:var(--r-creme) !important;
  --muted:var(--r-creme-doux) !important;
  --border:var(--r-bord) !important;
  --accent:var(--r-or) !important;
  --danger:var(--r-alerte) !important;
  --success:var(--r-succes) !important;
  --radius:var(--r-rayon) !important;
  --radius-sm:var(--r-rayon-sm) !important;
  --shadow:var(--r-ombre-2) !important;
  color-scheme:dark;
}


/* ==========================================================================
   03. FOND DE L'APPLICATION
   Noir chaud + deux halos de miel très diffus + trame nid d'abeille pure CSS.
   ========================================================================== */
html{
  background:var(--r-noir);
}

body{
  background:
    radial-gradient(140% 70% at 50% -12%, rgba(245,179,26,.10) 0%, rgba(11,10,7,0) 62%),
    radial-gradient(110% 60% at 100% 108%, rgba(184,122,11,.09) 0%, rgba(11,10,7,0) 60%),
    var(--r-noir);
  color:var(--r-creme);
  font-family:var(--r-police);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:rgba(245,179,26,.14);
}

/* 03.1 — Trame NID D'ABEILLE : trois trames linéaires croisées à 60°.
   Aucune image, opacité maintenue sous 0.05 pour rester un simple grain. */
body::before{
  content:"";
  position:fixed;
  inset:-10% -10% -10% -10%;
  width:auto;
  height:auto;
  border-radius:0;
  filter:none;
  z-index:-2;
  pointer-events:none;
  opacity:.045;
  background-color:transparent;
  background-image:
    repeating-linear-gradient(0deg,   rgba(245,179,26,.9) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(60deg,  rgba(245,179,26,.9) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(-60deg, rgba(245,179,26,.9) 0 1px, transparent 1px 100%);
  background-size:var(--r-nid) calc(var(--r-nid) * 1.732);
  animation:none;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,.35) 58%, transparent 88%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,.35) 58%, transparent 88%);
}

/* 03.2 — Halo de miel principal, très diffus, seule pièce mobile du fond. */
body::after{
  content:"";
  position:fixed;
  left:50%;
  top:-24vh;
  right:auto;
  bottom:auto;
  width:min(120vw, 640px);
  height:min(120vw, 640px);
  margin-left:calc(min(120vw, 640px) / -2);
  border-radius:var(--r-rayon-plein);
  background:radial-gradient(circle at 50% 50%,
      rgba(245,179,26,.30) 0%,
      rgba(232,163,23,.16) 34%,
      rgba(184,122,11,.06) 58%,
      rgba(11,10,7,0) 74%);
  filter:blur(64px);
  opacity:.55;
  z-index:-1;
  pointer-events:none;
  will-change:transform;
}

/* 03.3 — On désactive les décors bleu/vert animés du thème de base. */
.appbar::after,
.tabs::before,
.hero::before,
.hero::after,
.info-card::after,
.info-icon{
  animation:none !important;
}


/* ==========================================================================
   04. BASES TYPOGRAPHIQUES ET UTILITAIRES
   ========================================================================== */
.page{
  padding-left:calc(var(--r-esp-3) + var(--safe-left, 0px));
  padding-right:calc(var(--r-esp-3) + var(--safe-right, 0px));
  padding-bottom:calc(112px + var(--safe-bottom, 0px));
  position:relative;
  z-index:1;
}

h1,h2,h3{
  color:var(--r-creme);
  letter-spacing:var(--r-titrage);
}

p{color:var(--r-creme-doux)}
b,strong{color:var(--r-creme)}
hr{border:0;height:1px;background:var(--r-or-filet);opacity:.5}

/* 04.1 — Texte doré : dégradé métallique appliqué au glyphe. */
.card-price,
.brand-title,
.detail-title,
.total-line b,
.total-line strong{
  background-image:var(--r-or-texte);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* 04.2 — Filet doré réutilisable (séparateur haut de section). */
.filters::after,
.info-card::before,
.panel::before{
  background:var(--r-or-filet) !important;
  opacity:.6 !important;
}

/* 04.3 — Signature de marque, posée en bas du catalogue. */
.catalog-note{
  margin:var(--r-esp-5) 0 var(--r-esp-3);
  padding:var(--r-esp-4) var(--r-esp-4);
  border:1px solid var(--r-bord);
  border-radius:var(--r-rayon);
  background:var(--r-surface);
  box-shadow:var(--r-ombre-1), var(--r-ombre-encart);
  color:var(--r-creme-doux);
  font-size:12.5px;
  font-weight:700;
  line-height:1.6;
  text-align:center;
}
.catalog-note::before{
  content:"SÉLECTION FINE, RÉCOLTES RARES.";
  display:block;
  margin-bottom:var(--r-esp-2);
  font-size:11px;
  font-weight:900;
  letter-spacing:var(--r-capitale);
  background-image:var(--r-or-texte);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}


/* ==========================================================================
   05. BARRE D'APPLICATION ET MARQUE
   ========================================================================== */
.appbar{
  padding:calc(var(--r-esp-3) + var(--safe-top, 0px)) var(--r-esp-4) var(--r-esp-3);
  background:linear-gradient(180deg, rgba(20,17,9,.94), rgba(11,10,7,.86));
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--r-bord);
  box-shadow:0 12px 30px rgba(0,0,0,.42);
}
.appbar::after{
  left:0;
  right:0;
  height:1px;
  background:var(--r-or-filet);
  opacity:.75;
  transform:none;
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--r-esp-3);
  min-width:0;
}

/* 05.1 — Logo dans un jeton hexagonal doré. */
.brand-logo{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:var(--r-rayon-md);
  object-fit:cover;
  background:var(--r-noir);
  border:1px solid var(--r-bord-fort);
  box-shadow:
    0 0 0 3px rgba(245,179,26,.10),
    var(--r-ombre-2),
    inset 0 1px 0 rgba(255,247,226,.18);
  will-change:transform;
}

.brand-title{
  font-size:17px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand-sub{
  margin-top:4px;
  color:var(--r-creme-faible);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 05.2 — Bouton d'icône : pastille sombre cerclée d'or. */
.icon-btn{
  width:var(--r-touche);
  height:var(--r-touche);
  min-width:var(--r-touche);
  border-radius:var(--r-rayon-md);
  background:var(--r-surface-haute);
  border:1px solid var(--r-bord);
  color:var(--r-or-clair);
  font-size:18px;
  line-height:1;
  text-decoration:none;
  box-shadow:var(--r-ombre-1), var(--r-ombre-encart);
  transition:transform var(--r-t) var(--r-courbe),
             border-color var(--r-t) var(--r-courbe),
             box-shadow var(--r-t) var(--r-courbe);
}
.icon-btn:active{
  transform:scale(.94);
  border-color:var(--r-bord-fort);
  box-shadow:var(--r-lueur-or);
}
@media (hover:hover){
  .icon-btn:hover{
    border-color:var(--r-bord-fort);
    background:var(--r-surface-haute);
    box-shadow:var(--r-lueur-or);
  }
}


/* ==========================================================================
   06. BANDEAU HÉROS
   Coulée de miel diffuse sous la barre d'application, sans image.
   ========================================================================== */
.hero{
  padding:var(--r-esp-4) 0 var(--r-esp-1);
}
.hero::before{
  inset:-40% -20% auto -20%;
  height:240px;
  background-image:none;
  background:
    radial-gradient(60% 100% at 22% 10%, rgba(245,179,26,.28), transparent 62%),
    radial-gradient(55% 100% at 78% 0%, rgba(232,163,23,.20), transparent 66%);
  filter:blur(28px);
  opacity:.85;
  transform:none;
}
.hero::after{
  inset:-50% -25% auto -25%;
  height:300px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,247,226,.10), transparent 58%),
    radial-gradient(circle at 20% 60%, rgba(184,122,11,.16), transparent 60%);
  filter:blur(22px);
  opacity:.8;
  transform:none;
}


/* ==========================================================================
   07. FILTRES, PUCES, RECHERCHE
   ========================================================================== */
.filters{
  position:relative;
  padding:var(--r-esp-3) 0 var(--r-esp-4);
  display:grid;
  gap:var(--r-esp-3);
}
.filters::after{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  bottom:0;
  height:1px;
}

.filter-row{
  display:grid;
  gap:var(--r-esp-3);
}

/* 07.1 — Sélecteur de catégorie. */
.chip-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--r-esp-3);
  width:100%;
  min-height:52px;
  padding:10px var(--r-esp-4);
  border-radius:var(--r-rayon-md);
  border:1px solid var(--r-bord);
  background:var(--r-surface);
  color:var(--r-creme);
  font-weight:800;
  text-align:left;
  box-shadow:var(--r-ombre-1), var(--r-ombre-encart);
  transition:transform var(--r-t) var(--r-courbe),
             border-color var(--r-t) var(--r-courbe),
             box-shadow var(--r-t) var(--r-courbe);
}
.chip-btn small{
  display:block;
  margin-bottom:2px;
  color:var(--r-creme-faible);
  font-size:10px;
  font-weight:900;
  letter-spacing:var(--r-capitale);
  text-transform:uppercase;
}
.chip-btn > div:last-child{
  color:var(--r-or);
  font-size:16px;
  line-height:1;
}
.chip-btn:active{
  transform:scale(.985);
  border-color:var(--r-bord-fort);
}
@media (hover:hover){
  .chip-btn:hover{
    border-color:var(--r-bord-fort);
    background:var(--r-surface-haute);
    box-shadow:var(--r-lueur-or);
  }
}

/* 07.2 — Champ de recherche. */
.search{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 var(--r-esp-4);
  border-radius:var(--r-rayon-md);
  border:1px solid var(--r-bord);
  background:var(--r-noir-2);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.45);
  transition:border-color var(--r-t) var(--r-courbe), box-shadow var(--r-t) var(--r-courbe);
}
.search .k{
  color:var(--r-or);
  font-size:15px;
  line-height:1;
  opacity:.9;
}
.search input{
  flex:1;
  min-width:0;
  height:48px;
  border:0;
  background:transparent;
  color:var(--r-creme);
  font-size:var(--r-champ);   /* 16px : évite le zoom automatique iOS */
  font-weight:700;
  letter-spacing:.01em;
  outline:none;
}
.search input::placeholder{
  color:var(--r-creme-faible);
  font-weight:600;
}
.search input::-webkit-search-cancel-button{
  filter:sepia(1) saturate(4) hue-rotate(2deg);
}
.search:focus-within{
  border-color:var(--r-bord-fort);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.45), var(--r-lueur-or);
}


/* ==========================================================================
   08. GRILLE ET CARTES PRODUIT
   Bordure dorée fine, coins généreux, photo encadrée, prix en or.
   ========================================================================== */
.grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--r-esp-3);
  padding:var(--r-esp-3) 0 var(--r-esp-5);
}

.card{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--r-rayon-lg);
  border:1px solid var(--r-bord);
  background:var(--r-surface);
  color:var(--r-creme);
  text-decoration:none;
  box-shadow:var(--r-ombre-2), var(--r-ombre-encart);
  transform:translateZ(0);
  transition:transform var(--r-t) var(--r-courbe),
             border-color var(--r-t) var(--r-courbe),
             box-shadow var(--r-t) var(--r-courbe);
}

/* 08.1 — Coulée de miel dans le haut de la carte (remplace le halo bleu). */
.card::after{
  inset:0 0 auto 0;
  height:70%;
  background:var(--r-coulee);
  opacity:.9;
  transform:none;
  transition:opacity var(--r-t-long) var(--r-courbe);
}

.card:active{
  transform:scale(.98);
  border-color:var(--r-bord-fort);
}
@media (hover:hover){
  .card:hover{
    transform:translateY(-3px);
    border-color:var(--r-bord-fort);
    box-shadow:var(--r-ombre-3), var(--r-lueur-or);
  }
  .card:hover::after{opacity:1;transform:none}
}

/* 08.2 — Média encadré : la photo est posée dans un cadre doré intérieur. */
.card-media{
  position:relative;
  z-index:1;
  display:block;
  width:calc(100% - 12px);
  margin:6px 6px 0;
  aspect-ratio:4/3;
  border-radius:var(--r-rayon-md);
  border:1px solid var(--r-bord);
  background:var(--r-noir);
  object-fit:cover;
  box-shadow:0 6px 18px rgba(0,0,0,.46);
}
.card-media.is-placeholder{
  object-fit:contain;
  padding:18%;
  opacity:.55;
  filter:sepia(.7) saturate(1.6) hue-rotate(-4deg);
}

.card-body{
  position:relative;
  z-index:1;
  padding:var(--r-esp-3) var(--r-esp-3) var(--r-esp-4);
  display:grid;
  gap:5px;
}

.card-title{
  color:var(--r-creme);
  font-size:14px;
  font-weight:900;
  line-height:1.22;
  letter-spacing:.005em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.card-sub{
  color:var(--r-creme-faible);
  font-size:11.5px;
  font-weight:700;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 08.3 — Prix : or métallique, lisible, légèrement plus grand que le titre. */
.card-price{
  margin-top:var(--r-esp-1);
  font-size:15px;
  font-weight:950;
  letter-spacing:.01em;
  line-height:1.2;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45));
}


/* ==========================================================================
   09. FICHE PRODUIT
   ========================================================================== */
.detail,
.detail-wrap{
  padding-top:var(--r-esp-3);
}

.detail-card{
  display:block;
  overflow:hidden;
  border-radius:var(--r-rayon-xl);
  border:1px solid var(--r-bord);
  background:var(--r-surface);
  box-shadow:var(--r-ombre-3), var(--r-ombre-encart);
}

.detail-body{
  padding:var(--r-esp-4);
}

.detail .eyebrow,
.eyebrow{
  color:var(--r-or);
  font-size:10.5px;
  font-weight:900;
  letter-spacing:var(--r-capitale);
  text-transform:uppercase;
}

.detail h1,
.detail-title{
  margin:var(--r-esp-2) 0 var(--r-esp-2);
  font-size:23px;
  font-weight:950;
  line-height:1.16;
  letter-spacing:.005em;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5));
}

.detail .desc,
.detail-text{
  margin:0 0 var(--r-esp-4);
  color:var(--r-creme-doux);
  font-size:14.5px;
  font-weight:600;
  line-height:1.62;
}

/* 09.1 — Slider et galerie. */
.slider,
.media-gallery-viewport{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-rayon-lg);
  border:1px solid var(--r-bord);
  background:var(--r-noir);
  box-shadow:inset 0 0 0 1px rgba(255,247,226,.05), var(--r-ombre-2);
}
.slides,
.media-gallery-track{
  display:flex;
  will-change:transform;
  transition:transform var(--r-t-lent) var(--r-courbe);
}
.slides > *,
.media-gallery-slide{
  min-width:100%;
}
.detail-media{
  display:block;
  width:100%;
  max-height:64vh;
  object-fit:cover;
  background:var(--r-noir);
}

/* 09.2 — Boutons de navigation de la galerie. */
.slider-btn,
.media-nav,
.media-fullscreen-btn{
  width:var(--r-touche);
  height:var(--r-touche);
  min-width:var(--r-touche);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-rayon-plein);
  border:1px solid var(--r-bord-fort);
  background:rgba(11,10,7,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--r-or-clair);
  font-size:20px;
  font-weight:900;
  line-height:1;
  box-shadow:var(--r-ombre-2);
  transition:transform var(--r-t) var(--r-courbe), box-shadow var(--r-t) var(--r-courbe);
}
.slider-btn:active,
.media-nav:active,
.media-fullscreen-btn:active{
  transform:translateY(-50%) scale(.94);
  box-shadow:var(--r-lueur-or);
}
.media-fullscreen-btn:active{transform:scale(.94)}

/* 09.3 — Points de pagination. */
.dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--r-esp-2);
  margin:var(--r-esp-3) 0 var(--r-esp-1);
}
.dot{
  width:7px;
  height:7px;
  padding:0;
  border:1px solid var(--r-bord);
  border-radius:var(--r-rayon-plein);
  background:rgba(247,238,220,.16);
  box-shadow:none;
  transition:transform var(--r-t) var(--r-courbe-souple),
             background-color var(--r-t) var(--r-courbe);
}
.dot.active{
  background:var(--r-or);
  border-color:var(--r-or-clair);
  transform:scale(1.5);
  box-shadow:0 0 10px rgba(245,179,26,.7);
}

/* 09.4 — Vignettes de la galerie. */
.media-gallery-thumbs{
  display:flex;
  gap:var(--r-esp-2);
  overflow-x:auto;
  padding:var(--r-esp-3) 2px 2px;
  scrollbar-width:none;
}
.media-gallery-thumbs::-webkit-scrollbar{display:none}
.media-thumb{
  position:relative;
  flex:0 0 auto;
  width:60px;
  height:60px;
  padding:0;
  overflow:hidden;
  border-radius:var(--r-rayon-sm);
  border:1px solid var(--r-bord);
  background:var(--r-noir);
  transition:transform var(--r-t) var(--r-courbe), border-color var(--r-t) var(--r-courbe);
}
.media-thumb img,
.media-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.media-thumb.active{
  border-color:var(--r-or);
  box-shadow:var(--r-lueur-or-forte);
}
.media-thumb:active{transform:scale(.95)}

/* 09.5 — Formats (chips) : liste de choix, sélection en or. */
.chips{
  display:grid;
  gap:var(--r-esp-2);
  margin:var(--r-esp-3) 0;
}
.chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--r-esp-3);
  min-height:var(--r-touche);
  padding:11px var(--r-esp-4);
  border-radius:var(--r-rayon-md);
  border:1px solid var(--r-bord);
  background:var(--r-noir-2);
  color:var(--r-creme);
  font-size:14px;
  font-weight:800;
  box-shadow:var(--r-ombre-encart);
  transition:transform var(--r-t) var(--r-courbe),
             border-color var(--r-t) var(--r-courbe),
             box-shadow var(--r-t) var(--r-courbe);
}
.chip strong,
.chip b{
  color:var(--r-or-clair);
  font-weight:950;
  letter-spacing:.01em;
}
.chip input[type="radio"]{
  width:18px;
  height:18px;
  accent-color:var(--r-or);
  vertical-align:-3px;
}
.chip:active{transform:scale(.99)}
.chip:focus-within,
.chip:has(input:checked),
.chip.active{
  border-color:var(--r-bord-fort);
  background:linear-gradient(180deg, rgba(245,179,26,.12), rgba(245,179,26,.03));
  box-shadow:var(--r-lueur-or), inset 0 0 0 1px rgba(245,179,26,.18);
}

.label{
  display:block;
  margin-bottom:var(--r-esp-2);
  color:var(--r-creme-faible);
  font-size:10.5px;
  font-weight:900;
  letter-spacing:var(--r-capitale);
  text-transform:uppercase;
}

.small-note{
  color:var(--r-creme-faible);
  font-size:12.5px;
  font-weight:700;
  line-height:1.55;
}

.detail-buy-card{
  margin-top:var(--r-esp-4);
  padding:var(--r-esp-4);
  border-radius:var(--r-rayon-lg);
  border:1px solid var(--r-bord);
  background:var(--r-noir-2);
  box-shadow:inset 0 1px 0 rgba(255,247,226,.08), 0 -1px 0 rgba(0,0,0,.4);
}

.detail-actions{
  display:grid;
  gap:var(--r-esp-2);
}


/* ==========================================================================
   10. BOUTONS — OR LIQUIDE 3D
   Dégradé métallique, arête basse plus foncée, enfoncement au toucher.
   ========================================================================== */
.btn,
.cta,
.info-btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--r-esp-2);
  min-height:var(--r-touche);
  padding:12px var(--r-esp-4);
  border:0;
  border-radius:var(--r-rayon-md);
  font-family:var(--r-police);
  font-size:15px;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.15;
  text-decoration:none;
  cursor:pointer;
  isolation:isolate;
  transition:transform var(--r-t-court) var(--r-courbe-nette),
             box-shadow var(--r-t-court) var(--r-courbe-nette),
             filter var(--r-t) var(--r-courbe);
}

/* 10.1 — Variante pleine (or liquide). */
.btn,
.btn.primary,
.cta,
.info-btn.primary{
  background:var(--r-or-liquide);
  color:#2A1B04;
  text-shadow:0 1px 0 rgba(255,247,226,.42);
  box-shadow:
    var(--r-relief-bas),
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 20px rgba(184,122,11,.30),
    0 2px 0 rgba(0,0,0,.35);
}

/* 10.2 — CTA principal : pleine largeur, plus haut, plus lumineux. */
.cta{
  display:flex;
  width:100%;
  min-height:54px;
  padding:16px var(--r-esp-4);
  border-radius:var(--r-rayon);
  font-size:16px;
  font-weight:950;
  letter-spacing:.015em;
  box-shadow:
    var(--r-relief-bas-fort),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 12px 28px rgba(184,122,11,.34),
    0 3px 0 rgba(0,0,0,.4);
}

/* 10.3 — Variante secondaire : sombre, cerclée d'or. */
.btn.secondary,
.info-btn,
.info-btn.secondary{
  background:var(--r-surface-haute);
  border:1px solid var(--r-bord);
  color:var(--r-or-clair);
  text-shadow:none;
  box-shadow:var(--r-ombre-1), var(--r-ombre-encart);
}

/* 10.4 — Variante danger. */
.btn.danger,
.btn-inline.danger{
  background:linear-gradient(168deg, #F0855A 0%, #E4572E 45%, #A33418 100%);
  color:#FFF3EC;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:inset 0 -3px 0 0 #8B2C12, var(--r-ombre-1);
}

/* 10.5 — Enfoncement : le bouton descend, l'arête basse se réduit. */
.btn:active,
.cta:active,
.info-btn:active{
  transform:translateY(2px) scale(.99);
  box-shadow:
    inset 0 -1px 0 0 var(--r-or-fonce),
    inset 0 2px 6px rgba(90,58,4,.42),
    0 2px 10px rgba(0,0,0,.4);
}
.btn.secondary:active,
.info-btn.secondary:active{
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5);
  border-color:var(--r-bord-fort);
}

@media (hover:hover){
  .btn:hover,
  .cta:hover{filter:brightness(1.06) saturate(1.04)}
  .btn.secondary:hover,
  .info-btn:hover{
    border-color:var(--r-bord-fort);
    box-shadow:var(--r-lueur-or);
  }
}

.btn[disabled],
.cta[disabled],
.cta:disabled{
  filter:grayscale(.55) brightness(.72);
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}

/* 10.6 — Petits boutons en ligne du panier. */
.btn-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--r-touche);
  min-height:var(--r-touche);
  padding:0 14px;
  border-radius:var(--r-rayon-sm);
  border:1px solid var(--r-bord);
  background:var(--r-surface-haute);
  color:var(--r-or-clair);
  font-size:17px;
  font-weight:950;
  line-height:1;
  text-decoration:none;
  transition:transform var(--r-t-court) var(--r-courbe-nette), border-color var(--r-t) var(--r-courbe);
}
.btn-inline:active{transform:translateY(1px) scale(.96);border-color:var(--r-bord-fort)}


/* ==========================================================================
   11. QUANTITÉS ET CHAMPS DE FORMULAIRE
   ========================================================================== */
.qty-inline,
.qty-picker,
.gram-input-row{
  display:flex;
  align-items:center;
  gap:var(--r-esp-2);
  flex-wrap:wrap;
}

.qty-btn{
  width:var(--r-touche);
  height:var(--r-touche);
  min-width:var(--r-touche);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-rayon-sm);
  border:1px solid var(--r-bord);
  background:var(--r-surface-haute);
  color:var(--r-or-clair);
  font-size:23px;
  font-weight:950;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--r-ombre-encart);
  transition:transform var(--r-t-court) var(--r-courbe-nette),
             border-color var(--r-t) var(--r-courbe),
             box-shadow var(--r-t) var(--r-courbe);
}
.qty-btn:active{
  transform:translateY(1px) scale(.95);
  border-color:var(--r-bord-fort);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}

.qty-value{
  min-width:var(--r-touche);
  text-align:center;
  color:var(--r-creme);
  font-size:18px;
  font-weight:950;
}

/* 11.1 — Champs : 16px minimum pour bloquer le zoom automatique iOS. */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea,
.qty-mobile-input,
.qty-picker input,
.gram-input-row input{
  min-height:48px;
  padding:12px 14px;
  border-radius:var(--r-rayon-sm);
  border:1px solid var(--r-bord);
  background:var(--r-noir-2);
  color:var(--r-creme);
  font-family:var(--r-police);
  font-size:var(--r-champ);
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.45);
  outline:none;
  transition:border-color var(--r-t) var(--r-courbe), box-shadow var(--r-t) var(--r-courbe);
}
textarea{min-height:110px;line-height:1.55;font-weight:600;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:34px}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--r-bord-fort);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.45), var(--r-lueur-or);
}
input::placeholder,
textarea::placeholder{color:var(--r-creme-faible);font-weight:600}

.qty-mobile-input,
.qty-picker input[data-qty-input]{
  max-width:96px;
  text-align:center;
  font-size:17px;
  font-weight:950;
  color:var(--r-or-clair);
}

.form,
.form-grid{
  display:block;
  padding:var(--r-esp-4);
  margin:var(--r-esp-3) 0;
  border-radius:var(--r-rayon-lg);
  border:1px solid var(--r-bord);
  background:var(--r-surface);
  box-shadow:var(--r-ombre-2), var(--r-ombre-encart);
}
.form-grid{
  display:grid;
  gap:var(--r-esp-3);
  border:0;
  background:none;
  box-shadow:none;
  padding:0;
  margin:var(--r-esp-3) 0 0;
}
.form-grid-two{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--r-esp-3);
}
.form h2,
.form h3{
  margin:0 0 var(--r-esp-2);
  font-size:16px;
  font-weight:950;
  letter-spacing:.01em;
}


/* ==========================================================================
   12. PANIER, LIGNES ET TOTAUX
   ========================================================================== */
.cart,
.cart-section{
  display:block;
}

.cart-item,
.admin-list .card{
  display:block;
  margin-bottom:var(--r-esp-3);
  padding:0;
  border-radius:var(--r-rayon-md);
  border:1px solid var(--r-bord);
  background:var(--r-noir-2);
  box-shadow:var(--r-ombre-1), var(--r-ombre-encart);
}
.cart-item .card-title,
.admin-list .card .card-title{
  font-size:15px;
  -webkit-line-clamp:3;
}
.cart-item .card-body,
.admin-list .card .card-body{
  padding:var(--r-esp-3) var(--r-esp-4) var(--r-esp-4);
  gap:var(--r-esp-2);
}

/* 12.1 — Ligne de total : cartouche pointillé doré. */
.total-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--r-esp-3);
  min-height:56px;
  padding:var(--r-esp-4);
  margin:var(--r-esp-3) 0;
  border-radius:var(--r-rayon-md);
  border:1px dashed var(--r-bord-fort);
  background:linear-gradient(180deg, rgba(245,179,26,.08), rgba(245,179,26,.02));
  color:var(--r-creme);
  font-size:15px;
  font-weight:900;
}
.total-line b,
.total-line strong{
  font-size:19px;
  font-weight:950;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45));
}

/* 12.2 — Barre d'actions collée au-dessus des onglets. */
.cart-actions,
.sticky-actions{
  display:grid;
  gap:var(--r-esp-2);
  margin-top:var(--r-esp-4);
  padding-top:var(--r-esp-3);
  border-top:1px solid var(--r-cloison);
}
.cart-actions .btn,
.sticky-actions .btn{width:100%}


/* ==========================================================================
   13. FEUILLES GLISSANTES (SHEET)
   ========================================================================== */
.scrim{
  background:radial-gradient(120% 90% at 50% 100%, rgba(58,42,18,.55), rgba(0,0,0,.74) 60%);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

.panel{
  padding:var(--r-esp-5) var(--r-esp-4) calc(var(--r-esp-5) + var(--safe-bottom, 0px));
  border-radius:var(--r-rayon-xl) var(--r-rayon-xl) 0 0;
  border:1px solid var(--r-bord);
  border-bottom:0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(245,179,26,.13), rgba(20,17,9,0) 62%),
    var(--r-noir-2);
  box-shadow:0 -20px 60px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,247,226,.10);
}

/* 13.1 — Poignée dorée en haut du panneau. */
.panel::before{
  content:"";
  position:absolute;
  left:50%;
  top:10px;
  width:52px;
  height:4px;
  margin-left:-26px;
  border-radius:var(--r-rayon-plein);
}

.panel h3{
  margin:var(--r-esp-2) 0 var(--r-esp-4);
  font-size:16px;
  font-weight:950;
  letter-spacing:.02em;
  color:var(--r-creme);
}
.panel p{color:var(--r-creme-doux)}
.panel a{color:var(--r-or-clair);font-weight:900;text-decoration:none}

/* 13.2 — Bouton de fermeture. */
.close{
  position:absolute;
  top:var(--r-esp-3);
  right:var(--r-esp-3);
  min-height:36px;
  padding:8px 14px;
  border-radius:var(--r-rayon-plein);
  border:1px solid var(--r-bord);
  background:var(--r-surface-haute);
  color:var(--r-creme-doux);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform var(--r-t-court) var(--r-courbe-nette), border-color var(--r-t) var(--r-courbe);
}
.close:active{transform:scale(.94);border-color:var(--r-bord-fort)}

/* 13.3 — Liste de liens de la feuille. */
.sheet-links{
  display:grid;
  gap:var(--r-esp-2);
  margin-top:var(--r-esp-3);
}
.sheet-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--r-esp-3);
  min-height:52px;
  padding:12px var(--r-esp-4);
  border-radius:var(--r-rayon-md);
  border:1px solid var(--r-bord);
  background:var(--r-noir-3);
  color:var(--r-creme);
  font-size:14.5px;
  font-weight:850;
  text-decoration:none;
  box-shadow:var(--r-ombre-encart);
  transition:transform var(--r-t-court) var(--r-courbe-nette),
             border-color var(--r-t) var(--r-courbe),
             box-shadow var(--r-t) var(--r-courbe);
}
.sheet-links a span[aria-hidden]{color:var(--r-or);font-size:17px;line-height:1}
.sheet-links a:active{transform:scale(.99)}
.sheet-links a.active{
  border-color:var(--r-bord-fort);
  background:linear-gradient(180deg, rgba(245,179,26,.14), rgba(245,179,26,.03));
  box-shadow:var(--r-lueur-or);
}
.sheet-links a.active span:first-child{color:var(--r-or-clair)}
.sheet-links .btn{width:100%;justify-content:flex-start}


/* ==========================================================================
   14. MODALES, TOASTS ET ALERTES
   ========================================================================== */
.modal-backdrop{
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

.modal-card{
  padding:var(--r-esp-5) var(--r-esp-4);
  border-radius:var(--r-rayon-lg);
  border:1px solid var(--r-bord-fort);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245,179,26,.16), rgba(20,17,9,0) 64%),
    var(--r-noir-2);
  box-shadow:var(--r-ombre-3), var(--r-lueur-or), inset 0 1px 0 rgba(255,247,226,.12);
  text-align:center;
}
.modal-card h3{
  margin:0 0 var(--r-esp-2);
  font-size:17px;
  font-weight:950;
  letter-spacing:.01em;
}
.modal-card p{
  margin:0 0 var(--r-esp-4);
  color:var(--r-creme-doux);
  font-size:14px;
  line-height:1.55;
}
.modal-actions{
  display:grid;
  gap:var(--r-esp-2);
  margin-bottom:var(--r-esp-2);
}
.modal-actions .btn{width:100%}
.modal-close{width:100%;margin-top:var(--r-esp-2)}

/* 14.1 — Toast. */
.toast{
  padding:12px var(--r-esp-4);
  border-radius:var(--r-rayon-plein);
  border:1px solid var(--r-bord-fort);
  background:linear-gradient(180deg, rgba(36,29,18,.97), rgba(11,10,7,.97));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--r-creme);
  font-size:13.5px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:var(--r-ombre-3), var(--r-lueur-or);
}

/* 14.2 — Alertes. */
.alert{
  margin:var(--r-esp-3) 0;
  padding:12px var(--r-esp-4);
  border-radius:var(--r-rayon-md);
  border:1px solid var(--r-bord);
  border-left:3px solid var(--r-or);
  background:var(--r-noir-3);
  color:var(--r-creme);
  font-size:13.5px;
  font-weight:800;
  line-height:1.5;
}
.alert.success{border-left-color:var(--r-succes);background:rgba(123,201,111,.08)}
.alert.error{border-left-color:var(--r-alerte);background:rgba(228,87,46,.09)}


/* ==========================================================================
   15. CARTES D'INFORMATION
   ========================================================================== */
.info-wrap{padding-top:var(--r-esp-3)}
.info-stack{display:grid;gap:var(--r-esp-3)}

.info-card{
  position:relative;
  overflow:hidden;
  padding:var(--r-esp-5) var(--r-esp-4);
  border-radius:var(--r-rayon-lg);
  border:1px solid var(--r-bord);
  background:var(--r-surface);
  box-shadow:var(--r-ombre-2), var(--r-ombre-encart);
}
/* Filet doré en tête de carte. */
.info-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
}
/* Coulée de miel diffuse, statique. */
.info-card::after{
  content:"";
  position:absolute;
  inset:-40% -20% auto -20%;
  height:220px;
  background:var(--r-coulee);
  opacity:.9;
  transform:none;
  pointer-events:none;
}

.info-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:var(--r-rayon-md);
  border:1px solid var(--r-bord-fort);
  background:var(--r-noir-3);
  font-size:22px;
  line-height:1;
  box-shadow:var(--r-lueur-or), inset 0 1px 0 rgba(255,247,226,.14);
  transform:none;
}

.info-title{
  position:relative;
  z-index:1;
  margin:0;
  text-align:center;
  color:var(--r-creme);
  font-size:16px;
  font-weight:950;
  letter-spacing:.02em;
}
.info-title .n{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  margin-right:var(--r-esp-2);
  border-radius:var(--r-rayon-plein);
  background:var(--r-or-liquide);
  color:#2A1B04;
  font-size:12px;
  font-weight:950;
  vertical-align:-4px;
  box-shadow:inset 0 -2px 0 rgba(138,90,6,.85), 0 4px 12px rgba(184,122,11,.28);
}

.info-text{
  position:relative;
  z-index:1;
  margin:var(--r-esp-3) 0 0;
  color:var(--r-creme-doux);
  font-size:14px;
  font-weight:650;
  line-height:1.6;
  text-align:center;
}

.info-bullets{
  position:relative;
  z-index:1;
  margin:var(--r-esp-3) 0 0;
  padding-left:var(--r-esp-5);
  color:var(--r-creme-doux);
  font-size:13.5px;
  font-weight:700;
  line-height:1.65;
  list-style:none;
}
.info-bullets li{
  position:relative;
  margin:var(--r-esp-2) 0;
}
/* Puce hexagonale dorée. */
.info-bullets li::before{
  content:"";
  position:absolute;
  left:calc(var(--r-esp-5) * -1 + 4px);
  top:.55em;
  width:9px;
  height:10px;
  background:var(--r-or-liquide);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow:0 0 8px rgba(245,179,26,.35);
}

.info-rich-lines{
  position:relative;
  z-index:1;
  display:grid;
  gap:var(--r-esp-2);
  margin-top:var(--r-esp-4);
}
.info-rich-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--r-esp-3);
  padding:10px var(--r-esp-3);
  border-radius:var(--r-rayon-sm);
  border:1px solid var(--r-cloison);
  background:rgba(11,10,7,.5);
  font-size:13px;
}
.info-rich-line span{
  color:var(--r-creme-faible);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:10.5px;
}
.info-rich-line strong{color:var(--r-or-clair);font-weight:900}

.info-actions{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--r-esp-2);
  margin-top:var(--r-esp-4);
}
.info-btn{flex:1 1 auto;min-width:130px}


/* ==========================================================================
   16. BARRE D'ONGLETS BASSE — VERRE SOMBRE
   ========================================================================== */
.tabs{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  display:flex;
  gap:2px;
  padding:var(--r-esp-2) var(--r-esp-2) calc(var(--r-esp-2) + var(--safe-bottom, 0px));
  background:var(--r-verre);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border-top:1px solid var(--r-bord);
  box-shadow:0 -14px 34px rgba(0,0,0,.6);
}
/* Filet doré statique sur l'arête haute. */
.tabs::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:var(--r-or-filet);
  opacity:.7;
  transform:none;
}

.tab{
  position:relative;
  flex:1 1 0;
  min-width:0;
  min-height:var(--r-touche);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:6px 2px;
  border:1px solid transparent;
  border-radius:var(--r-rayon-sm);
  background:transparent;
  color:var(--r-creme-faible);
  font-size:10px;
  font-weight:850;
  letter-spacing:.02em;
  text-decoration:none;
  transition:transform var(--r-t-court) var(--r-courbe-nette),
             color var(--r-t) var(--r-courbe),
             background-color var(--r-t) var(--r-courbe);
}
.tab span{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tab .icon{
  position:relative;
  font-size:18px;
  line-height:1;
  filter:grayscale(.35) opacity(.8);
  transform:none;
  transition:transform var(--r-t) var(--r-courbe-souple), filter var(--r-t) var(--r-courbe);
}
.tab:active{transform:scale(.95)}

/* 16.1 — Onglet actif : socle doré discret + barre d'or au-dessus. */
.tab.active{
  color:var(--r-or-clair);
  border-color:var(--r-bord);
  background:linear-gradient(180deg, rgba(245,179,26,.15), rgba(245,179,26,.03));
  box-shadow:inset 0 1px 0 rgba(255,247,226,.12);
}
.tab.active .icon{
  filter:none;
  transform:translateY(-1px) scale(1.06);
}
.tab.active::before{
  content:"";
  position:absolute;
  left:26%;
  right:26%;
  top:-1px;
  height:2px;
  border-radius:var(--r-rayon-plein);
  background:var(--r-or-liquide);
  box-shadow:0 0 10px rgba(245,179,26,.7);
}

/* 16.2 — Pastille de badge du panier. */
.icon-badge{position:relative}
.badge{
  position:absolute;
  top:-7px;
  right:-11px;
  min-width:19px;
  height:19px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-rayon-plein);
  border:1px solid rgba(255,247,226,.35);
  background:var(--r-or-liquide);
  color:#2A1B04;
  font-size:10px;
  font-weight:950;
  line-height:1;
  box-shadow:0 4px 12px rgba(184,122,11,.5), inset 0 -1px 0 rgba(138,90,6,.8);
}

@media (hover:hover){
  .tab:hover{background:rgba(245,179,26,.07);color:var(--r-creme)}
  .tab:hover .icon{transform:translateY(-1px);filter:none}
}


/* ==========================================================================
   17. PORTAIL DÉPARTEMENT (écran d'entrée)
   ========================================================================== */
.department-gate-card{
  padding:var(--r-esp-5) var(--r-esp-4) var(--r-esp-6);
  border-radius:var(--r-rayon-xl);
  border:1px solid var(--r-bord);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(245,179,26,.14), rgba(20,17,9,0) 60%),
    var(--r-noir-2);
  box-shadow:var(--r-ombre-3), var(--r-lueur-or), inset 0 1px 0 rgba(255,247,226,.10);
}

.department-gate-media{
  width:100%;
  aspect-ratio:16/10;
  margin-bottom:var(--r-esp-5);
  overflow:hidden;
  border-radius:var(--r-rayon-lg);
  border:1px solid var(--r-bord-fort);
  box-shadow:var(--r-ombre-2);
}

.department-gate-title{
  margin:0 0 var(--r-esp-4);
  text-align:center;
  font-size:20px;
  font-weight:950;
  letter-spacing:.02em;
  color:var(--r-creme);
}
.department-gate-title::after{
  content:"SÉLECTION FINE, RÉCOLTES RARES.";
  display:block;
  margin-top:var(--r-esp-2);
  font-size:10px;
  font-weight:900;
  letter-spacing:var(--r-capitale);
  color:var(--r-or);
  -webkit-text-fill-color:currentColor;
}

.department-gate-option{
  min-height:64px;
  display:flex;
  align-items:center;
  border-radius:var(--r-rayon-md);
  border:1px solid var(--r-bord);
  background:var(--r-surface-haute);
}
.department-gate-option .card-body{padding:var(--r-esp-4)}
.department-gate-option .card-title{
  font-size:16px;
  -webkit-line-clamp:1;
  color:var(--r-or-clair);
}
.department-gate-option:active{transform:scale(.98);border-color:var(--r-bord-fort)}


/* ==========================================================================
   18. ACCESSIBILITÉ, FOCUS ET SÉLECTION
   ========================================================================== */
:focus-visible{
  outline:2px solid var(--r-or);
  outline-offset:2px;
  border-radius:var(--r-rayon-xs);
}
::selection{background:rgba(245,179,26,.32);color:var(--r-etincelle)}

/* 18.1 — Barres de défilement discrètes et chaudes. */
*{scrollbar-color:rgba(245,179,26,.34) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{
  background:rgba(245,179,26,.3);
  border-radius:var(--r-rayon-plein);
}
::-webkit-scrollbar-track{background:transparent}

/* 18.2 — Toute zone tactile garde 44px de haut minimum. */
a[class],
button,
[role="button"],
input[type="submit"]{
  touch-action:manipulation;
}


/* ==========================================================================
   19. ADAPTATIONS 320px → 480px ET AU-DELÀ
   Le socle ci-dessus vise 320px. On élargit progressivement.
   ========================================================================== */

/* 19.1 — Très petits écrans (320–359px) : on resserre tout. */
@media (max-width:359px){
  .page{
    padding-left:calc(10px + var(--safe-left, 0px));
    padding-right:calc(10px + var(--safe-right, 0px));
  }
  .grid{gap:10px}
  .card-body{padding:10px 10px var(--r-esp-3)}
  .card-title{font-size:13px}
  .card-price{font-size:14px}
  .brand-logo{width:40px;height:40px;flex-basis:40px}
  .brand-title{font-size:15px}
  .brand-sub{font-size:10px;letter-spacing:.04em}
  .appbar{padding-left:var(--r-esp-3);padding-right:var(--r-esp-3)}
  .tab{font-size:9px}
  .tab .icon{font-size:16px}
  .detail-title{font-size:20px}
  .cta{font-size:15px;min-height:50px}
}

/* 19.2 — Écrans mobiles courants (360–429px). */
@media (min-width:360px){
  .grid{gap:var(--r-esp-3)}
  .card-title{font-size:14px}
  .card-price{font-size:15.5px}
}

/* 19.3 — Grands mobiles (430–479px). */
@media (min-width:430px){
  .page{
    padding-left:calc(var(--r-esp-4) + var(--safe-left, 0px));
    padding-right:calc(var(--r-esp-4) + var(--safe-right, 0px));
  }
  .grid{gap:var(--r-esp-4)}
  .card-title{font-size:15px}
  .card-price{font-size:16px}
  .detail-title{font-size:25px}
  .detail-actions{grid-template-columns:1fr;gap:var(--r-esp-3)}
}

/* 19.4 — Petites tablettes et fenêtres larges. */
@media (min-width:560px){
  .grid{grid-template-columns:repeat(3, minmax(0,1fr))}
  .filter-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .cart-actions,
  .sticky-actions,
  .modal-actions,
  .detail-actions{grid-auto-flow:column;grid-auto-columns:1fr}
}

@media (min-width:820px){
  .grid{grid-template-columns:repeat(4, minmax(0,1fr))}
  .page{
    max-width:1120px;
    margin:0 auto;
  }
  .detail-card{max-width:860px;margin:0 auto}
  .info-stack{
    grid-template-columns:repeat(2, minmax(0,1fr));
    max-width:920px;
    margin:0 auto;
  }
}

/* 19.5 — Écrans très courts (clavier ouvert, petits appareils paysage). */
@media (max-height:560px){
  .hero{display:none}
  .panel{padding-top:var(--r-esp-4)}
  .detail-media{max-height:52vh}
}

/* 19.6 — Rendu sur écrans à forte densité : l'or reste net. */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .card-price,
  .detail-title,
  .brand-title{filter:drop-shadow(0 .5px 0 rgba(0,0,0,.5))}
}


/* ==========================================================================
   20. ANIMATIONS
   Règle de performance : uniquement transform et opacity.
   TROIS animations infinies dans tout le fichier, amplitudes discrètes :
     1) rucheHalo   — dérive lente du halo de miel du fond
     2) rucheReflet — reflet d'or qui traverse le CTA principal
     3) rucheAbeille— léger flottement du logo de marque
   Les entrées de page (finies) restent celles de la feuille de base.
   ========================================================================== */

/* 20.1 — Halo de miel du fond (1/3). */
@media (prefers-reduced-motion: no-preference){
  body::after{
    animation:rucheHalo 22s ease-in-out infinite;
  }
}
@keyframes rucheHalo{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.5}
  50%    {transform:translate3d(0,26px,0) scale(1.05);opacity:.62}
}

/* 20.2 — Reflet d'or liquide traversant le CTA (2/3). */
.cta::after,
.btn.primary::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-40%;
  bottom:-40%;
  left:-42%;
  width:34%;
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,0,0) rotate(14deg);
  background:linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.62) 50%,
      rgba(255,255,255,0) 100%);
}
@media (prefers-reduced-motion: no-preference){
  .cta::after,
  .btn.primary::after{
    animation:rucheReflet 6.5s var(--r-courbe-nette) infinite;
  }
}
@keyframes rucheReflet{
  0%   {transform:translate3d(0,0,0) rotate(14deg);opacity:0}
  8%   {opacity:.5}
  38%  {transform:translate3d(420%,0,0) rotate(14deg);opacity:.5}
  46%  {transform:translate3d(420%,0,0) rotate(14deg);opacity:0}
  100% {transform:translate3d(420%,0,0) rotate(14deg);opacity:0}
}

/* 20.3 — Flottement de l'abeille / du logo (3/3). */
@media (prefers-reduced-motion: no-preference){
  .brand-logo{
    animation:rucheAbeille 7s ease-in-out infinite;
  }
}
@keyframes rucheAbeille{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-2px,0)}
}

/* 20.4 — Entrées finies (ne comptent pas dans le budget infini). */
@media (prefers-reduced-motion: no-preference){
  .modal-card{animation:rucheEntree var(--r-t-long) var(--r-courbe-souple) both}
  .toast{animation:rucheEntree var(--r-t-long) var(--r-courbe-souple) both}
}
@keyframes rucheEntree{
  from{transform:translate3d(0,10px,0) scale(.98);opacity:0}
  to  {transform:translate3d(0,0,0) scale(1);opacity:1}
}


/* ==========================================================================
   20 bis. MOUVEMENT RÉDUIT
   Coupe net toutes les animations, y compris celles de la feuille de base.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:1ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  body::after,
  .brand-logo,
  .cta::after,
  .btn.primary::after{
    animation:none !important;
    transform:none !important;
  }
  .cta::after,
  .btn.primary::after{opacity:0 !important}
  body::after{opacity:.5}
  .slides,
  .media-gallery-track{transition:none !important}
}

/* ══════════════════════════════════════════════════════════════════════
   MODES DE COMMANDE  —  livraison · meet-up · envoi postal
   ══════════════════════════════════════════════════════════════════════ */

.r-modes{
  display:grid;
  gap:10px;
  margin:2px 0 6px;
}

.r-modes .r-mode{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:12px 14px;
  border:1px solid var(--r-bord);
  border-radius:var(--r-rayon-md);
  background:var(--r-surface);
  color:var(--r-creme);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s ease, background .18s ease, transform .12s ease;
}
.r-modes .r-mode:active{transform:scale(.988)}

/* La vraie case reste accessible au clavier, mais invisible */
.r-modes .r-mode input{
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  cursor:pointer;
}
.r-modes .r-mode input:focus-visible{
  outline:2px solid var(--r-or);
  outline-offset:2px;
  border-radius:var(--r-rayon-md);
}

.r-modes .r-mode__ico{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  font-size:20px;
  line-height:1;
  background:var(--r-noir-2, rgba(0,0,0,.35));
  border:1px solid var(--r-cloison);
  transition:background .18s ease, border-color .18s ease;
}

.r-modes .r-mode__txt{min-width:0;display:grid;gap:2px}
.r-modes .r-mode__txt b{
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
}
.r-modes .r-mode__txt small{
  font-size:12px;
  color:var(--r-creme-faible);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.r-modes .r-mode__min{
  font-size:11px;
  line-height:1.35;
  text-align:right;
  color:var(--r-creme-doux);
  white-space:nowrap;
}

/* État sélectionné : filet doré + pastille de validation */
.r-modes .r-mode.is-on{
  border-color:var(--r-bord-fort);
  background:var(--r-surface-haute);
}
.r-modes .r-mode.is-on .r-mode__ico{
  background:rgba(245,179,26,.14);
  border-color:var(--r-bord-fort);
}
.r-modes .r-mode.is-on .r-mode__txt b{
  background:var(--r-or-texte);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.r-modes .r-mode.is-on::after{
  content:"✓";
  position:absolute;
  top:-7px;
  right:12px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800;
  color:var(--r-noir);
  background:var(--r-or-liquide);
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
}

/* ── Récapitulatif ─────────────────────────────────────────────────── */

.r-recap{
  margin:14px 0;
  padding:14px 16px;
  border:1px solid var(--r-bord);
  border-radius:var(--r-rayon-md);
  background:var(--r-verre);
}

.r-recap__line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:5px 0;
  font-size:14px;
  color:var(--r-creme-doux);
}
.r-recap__line b{color:var(--r-creme);font-weight:600}

.r-recap__total{
  margin-top:6px;
  padding-top:11px;
  border-top:1px solid var(--r-cloison);
  font-size:15px;
  color:var(--r-creme);
}
.r-recap__total b{
  font-size:22px;
  font-weight:800;
  letter-spacing:-.01em;
  background:var(--r-or-texte);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.r-recap__warn{
  margin:10px 0 0;
  padding:9px 11px;
  border-radius:10px;
  font-size:12.5px;
  line-height:1.45;
  color:#FFD9CC;
  background:rgba(228,87,46,.13);
  border:1px solid rgba(228,87,46,.34);
}

/* Bouton désactivé tant que le minimum n'est pas atteint */
.cta.is-off{
  opacity:.42;
  filter:grayscale(.55);
  cursor:not-allowed;
  pointer-events:none;
}

/* Écrans très étroits : le minimum passe sous le libellé */
@media (max-width:359px){
  .r-modes .r-mode{grid-template-columns:38px minmax(0,1fr);row-gap:6px}
  .r-modes .r-mode__ico{width:38px;height:38px;font-size:18px}
  .r-modes .r-mode__min{grid-column:1 / -1;text-align:left}
}

/* ==========================================================================
   LECTEUR VIDÉO DE LA FICHE PRODUIT
   ==========================================================================
   L'attribut `controls` a été retiré : le lecteur natif d'iOS se
   superposait au nôtre. On masque en plus ses éléments par CSS, au cas où
   un navigateur les réafficherait de son propre chef. */

.detail-video::-webkit-media-controls,
.detail-video::-webkit-media-controls-enclosure,
.detail-video::-webkit-media-controls-panel,
.detail-video::-webkit-media-controls-start-playback-button,
.detail-video::-webkit-media-controls-overlay-play-button{
  display:none !important;
  -webkit-appearance:none;
  opacity:0 !important;
}

.media-gallery-slide.is-video{ position:relative; }
.detail-video{ cursor:pointer; }

/* ── La couche de commandes ──────────────────────────────────────────── */

.v-lect{
  position:absolute;
  inset:0;
  pointer-events:none;   /* seuls les boutons captent le doigt */
  z-index:3;
}

/* ── Le gros bouton central ──────────────────────────────────────────── */

.v-lect__gros{
  position:absolute;
  top:50%;
  left:50%;
  width:68px;
  height:68px;
  margin:-34px 0 0 -34px;
  padding:0;
  display:grid;
  place-items:center;

  border:1.5px solid rgba(255,217,102,.7);
  border-radius:50%;
  background:rgba(11,10,7,.56);
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;

  box-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:transform .16s ease, opacity .22s ease;
}
.v-lect__gros:active{ transform:scale(.92); }

/* Le triangle de lecture, dessiné en CSS */
.v-lect__triangle{
  width:0;
  height:0;
  margin-left:5px;
  border-left:19px solid var(--r-or-clair, #FFD966);
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
}

/* Pendant la lecture : le triangle devient deux barres, et le bouton
   s'efface pour laisser voir l'image. */
.v-lect.is-lecture .v-lect__gros{ opacity:0; transform:scale(.86); }
.v-lect.is-lecture .v-lect__gros:focus-visible{ opacity:1; transform:none; }
.media-gallery-slide:hover .v-lect.is-lecture .v-lect__gros{ opacity:.85; transform:none; }

.v-lect.is-lecture .v-lect__triangle{
  margin-left:0;
  width:17px;
  height:20px;
  border:0;
  background:
    linear-gradient(var(--r-or-clair, #FFD966) 0 0) 0    0 / 5px 100% no-repeat,
    linear-gradient(var(--r-or-clair, #FFD966) 0 0) 100% 0 / 5px 100% no-repeat;
}

/* ── La barre du bas ─────────────────────────────────────────────────── */

.v-lect__bas{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  display:flex;
  align-items:center;
  gap:10px;
  padding:22px 12px 11px;

  background:linear-gradient(0deg, rgba(6,5,2,.78) 0%, rgba(6,5,2,0) 100%);
  pointer-events:auto;
}

.v-lect__son,
.v-lect__plein{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;

  border:1px solid rgba(245,179,26,.34);
  border-radius:10px;
  background:rgba(11,10,7,.55);
  color:var(--r-or-clair, #FFD966);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease, border-color .18s ease;
}
.v-lect__son:active,
.v-lect__plein:active{ transform:scale(.9); }

/* Son activé : le bouton s'allume, pour qu'on sache d'un coup d'œil */
.v-lect.is-sonore .v-lect__son{
  border-color:rgba(245,179,26,.8);
  background:rgba(245,179,26,.20);
}

.v-lect__son-ico{ font-size:14px; line-height:1; }

/* ── La progression ──────────────────────────────────────────────────── */

.v-lect__rail{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  height:4px;
  border-radius:999px;
  background:rgba(247,238,220,.22);
  cursor:pointer;
}
/* Zone de touche élargie : 4 px, c'est trop fin pour un doigt */
.v-lect__rail::before{
  content:"";
  position:absolute;
  inset:-13px 0;
}

.v-lect__jauge{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  border-radius:999px;
  background:linear-gradient(90deg,
    var(--r-or, #F5B31A), var(--r-or-clair, #FFD966));
}

/* ── Écrans étroits ──────────────────────────────────────────────────── */

@media (max-width:359px){
  .v-lect__gros{ width:58px; height:58px; margin:-29px 0 0 -29px; }
  .v-lect__bas{ gap:8px; padding:20px 9px 9px; }
  .v-lect__son,
  .v-lect__plein{ width:31px; height:31px; }
}

@media (prefers-reduced-motion:reduce){
  .v-lect__gros,
  .v-lect__son,
  .v-lect__plein{ transition:none; }
}

/* ==========================================================================
   POP-UP — CENTRAGE
   ==========================================================================
   La carte était centrée par `left:50%; top:50%; transform:translate(-50%,-50%)`.
   Or l'animation d'entrée anime elle aussi `transform` : elle écrasait la
   translation de centrage. Résultat mesuré sur un écran de 375×812 :
   172 px hors centre horizontalement, 168 px verticalement. En prime, sous
   640 px, une règle collait la carte en bas de l'écran.

   On centre désormais par flexbox : le centrage ne dépend plus d'aucun
   `transform`, donc plus aucune animation ne peut le casser. */

.modal.open{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  /* Sous les encoches et la barre système du téléphone */
  padding-top:calc(18px + env(safe-area-inset-top));
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
}

.modal .modal-card{
  position:relative;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  margin:0;
  transform:none;

  width:100%;
  max-width:420px;
  /* Une pop-up plus haute que l'écran défile à l'intérieur d'elle-même,
     elle ne pousse jamais la page. */
  max-height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.modal .modal-backdrop{
  position:absolute;
  inset:0;
}

/* On garde l'animation d'entrée : elle ne peut plus casser le centrage,
   puisque celui-ci ne passe plus par transform. */
.modal.open .modal-card{
  animation:ruchePop 260ms var(--r-courbe-souple, cubic-bezier(.22,.61,.36,1)) both;
}

@keyframes ruchePop{
  from{ opacity:0; transform:scale(.94); }
  to  { opacity:1; transform:scale(1);   }
}

/* La règle qui collait la carte en bas sur téléphone est neutralisée. */
@media (max-width:640px){
  .modal .modal-card{
    top:auto;
    bottom:auto;
    transform:none;
    width:100%;
    max-width:420px;
  }
}

@media (prefers-reduced-motion:reduce){
  .modal.open .modal-card{ animation:none; }
}

/* Cibles tactiles de la pop-up : 41 px, c'était sous le minimum confortable
   au pouce. On passe à 48. */
.modal .modal-card .btn{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
}
.modal .modal-actions{ gap:10px; }
.modal .modal-close{ margin-top:2px; }

/* Vignette vidéo dans le catalogue : plus de lecture automatique (elle
   téléchargeait plusieurs Mo par carte). Un badge signale qu'il y a une
   vidéo, et elle se lira sur la fiche du produit. */
.card-video-badge{
  position:absolute;
  top:8px;
  right:8px;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  font-size:10px;
  color:var(--r-or-clair, #FFD966);
  background:rgba(11,10,7,.78);
  border:1px solid rgba(245,179,26,.5);
  pointer-events:none;
  z-index:2;
}
.card{ position:relative; }

/* ── Blocs de champs propres à chaque mode de commande ───────────────── */

.r-bloc{
  display:grid;
  gap:11px;
  padding:14px;
  border:1px solid var(--r-bord);
  border-radius:var(--r-rayon-md);
  background:rgba(245,179,26,.045);
  animation:rucheEntree 220ms var(--r-courbe-souple, cubic-bezier(.22,.61,.36,1)) both;
}
.r-bloc[hidden]{ display:none; }

.r-bloc__mot{
  margin:2px 0 0;
  padding-left:20px;
  position:relative;
  font-size:12.5px;
  line-height:1.5;
  color:var(--r-creme-doux);
}
.r-bloc__mot::before{
  content:"💬";
  position:absolute;
  left:0;
  top:0;
  font-size:12px;
}
.r-bloc__mot b{ color:var(--r-or-clair); font-weight:650; }

/* « facultatif » dans un libellé */
.r-bloc label i{
  font-style:normal;
  font-weight:400;
  font-size:11.5px;
  color:var(--r-creme-faible);
}

@media (prefers-reduced-motion:reduce){
  .r-bloc{ animation:none; }
}

/* ==========================================================================
   CORRECTIF — `hidden` doit toujours l'emporter
   ==========================================================================
   `[hidden]` vaut `display:none`, mais cette règle vient de la feuille du
   navigateur : la moindre déclaration `display:` de notre côté la bat.

   La ligne « Frais d'envoi » en faisait les frais : `.r-recap__line` la
   met en `display:flex`, donc elle restait affichée en permanence. Sur
   livraison et meet-up on lisait « Frais d'envoi +30 € » — alors que le
   total, lui, était correct.

   Ce filet couvre tout ce qu'on masque par `hidden` dans cette feuille. */

.r-recap__line[hidden],
.r-recap__warn[hidden],
.r-bloc[hidden],
.r-modes [hidden],
.v-lect [hidden]{
  display:none !important;
}