/* ============================================================
   THEME.CSS — Feuille de style UNIQUE du site
   Fusion des anciens fichiers (style.css, header.css,
   site-effects.css, timeline.css, rdv.css) + thème centralisé.

   Ordre des sections (préserve la cascade d'origine) :
     1. Palette violet/or + surcharges Bootstrap (source unique des couleurs)
     2. style.css        — base commune des pages publiques
     3. header.css       — hero accueil (pierres & aimants)
     4. site-effects.css — effets & animations
     5. timeline.css     — frise « À propos »
     6. rdv.css          — page « Prendre rendez-vous »

   NB : bootstrap.min.css (dépendance tierce) reste un fichier séparé.
   Les scripts check-theme.js / check-css-dead.js scannent ce fichier.
   ============================================================ */

/* ============================================================
   THÈME CENTRALISÉ — violet/or (#4e2a84 → #7b3fa0)
   Source unique des couleurs du thème. Ce fichier (theme.css) est
   désormais la feuille de style UNIQUE du site : toutes les pages
   publiques (public/*.html) et les vues (views/*.ejs) le chargent
   directement via <link>, aux côtés de bootstrap.min.css.
   ============================================================ */

/* --- Palette du thème (source unique des couleurs violet/or) --- */
:root {
  /* Violets principaux */
  --theme-violet-dark: #4e2a84;
  --theme-violet: #7b3fa0;
  --theme-violet-hover: #6a3fa0;
  --theme-violet-hover-light: #9264cd;
  --theme-violet-deep: #2b163f;
  --theme-violet-dark-hover: #3f2170;
  --theme-violet-card-hover: #6a3591;
  --theme-violet-card-hover-light: #9a63c9;
  --theme-violet-title-start: #3a1b63; /* dégradé de titre (.title) — arrêt 0% */
  --theme-violet-title-mid: #6a2f9e;   /* dégradé de titre (.title) — arrêt 38% */
  --theme-lavande: #b18cd9;

  /* Or / accents */
  --theme-gold: #d4af37;
  --theme-gold-soft: #c9a86a;
  --theme-gold-deep: #b8912a;
  --theme-gold-light: #ffe9a8;
  --theme-gold-bronze: #9a6b2f;

  /* Triplets RGB (pour rgba() avec opacité) */
  --theme-violet-dark-rgb: 78, 42, 132;
  --theme-violet-rgb: 123, 63, 160;
  --theme-violet-hover-rgb: 106, 63, 160;
  --theme-violet-hover-light-rgb: 146, 100, 205;
  --theme-gold-rgb: 212, 175, 55;

  /* Dégradés signature du thème (violet → violet / survol) — factorisés pour
     une source unique : boutons, badges, onglets, menu, bandeaux CTA… */
  --theme-gradient: linear-gradient(135deg, var(--theme-violet-dark) 0%, var(--theme-violet) 100%);
  --theme-gradient-hover: linear-gradient(135deg, var(--theme-violet-hover) 0%, var(--theme-violet-hover-light) 100%);

  /* Palette Bootstrap alignée sur le thème violet (remplace le bleu
     #0d6efd par défaut : liens, focus, checkboxes/switches…) */
  --bs-primary: var(--theme-violet-dark);
  --bs-primary-rgb: var(--theme-violet-dark-rgb);
  --bs-link-color: var(--theme-violet-dark);
  --bs-link-color-rgb: var(--theme-violet-dark-rgb);
  --bs-link-hover-color: var(--theme-violet);
  --bs-link-hover-color-rgb: var(--theme-violet-rgb);
  --bs-focus-ring-color: rgba(var(--theme-violet-rgb), 0.25);
  --bs-form-check-input-checked-bg-color: var(--theme-violet);
  --bs-form-check-input-checked-border-color: var(--theme-violet);
  --bs-form-check-input-focus-border-color: var(--theme-lavande);
  --bs-form-check-input-focus-box-shadow: 0 0 0 0.25rem rgba(var(--theme-violet-rgb), 0.25);
}

/* --- Liens et text-primary : violet --- */
.text-primary {
  color: var(--theme-violet-dark) !important;
}

/* --- Champs de formulaire : bordure violette au focus (au lieu du bleu
        Bootstrap #86b7fe). NB : sur les pages publiques, style.css
        conserve son box-shadow:none !important pour les formulaires. --- */
.form-control:active, .form-control:focus {
  border-color: var(--theme-lavande);
  -webkit-box-shadow: 0 0 0 0.25rem rgba(var(--theme-violet-rgb), 0.25);
  box-shadow: 0 0 0 0.25rem rgba(var(--theme-violet-rgb), 0.25);
}

/* --- Boutons btn-primary : dégradé violet/or --- */
.btn.btn-primary {
  background: var(--theme-gradient);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.6);
  color: #fff;
  box-shadow: 0 8px 24px rgba(var(--theme-violet-dark-rgb), 0.45);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:focus-visible {
  background: var(--theme-gradient-hover);
  border-color: rgba(var(--theme-gold-rgb), 0.9);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(var(--theme-violet-rgb), 0.55);
}

/* --- Bouton outline violet : visible sur fond clair (ex. section avis) --- */
.btn.btn-outline-violet {
  background: transparent;
  border: 1px solid rgba(var(--theme-violet-rgb), 0.55);
  color: var(--theme-violet-dark);
  box-shadow: 0 8px 24px rgba(var(--theme-violet-dark-rgb), 0.14);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.btn.btn-outline-violet:hover, .btn.btn-outline-violet:focus, .btn.btn-outline-violet:focus-visible {
  background: var(--theme-gradient);
  border-color: rgba(var(--theme-gold-rgb), 0.9);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(var(--theme-violet-rgb), 0.45);
}

/* --- Badges bg-primary : dégradé violet/or --- */
.badge.bg-primary {
  background: var(--theme-gradient);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.45);
  color: #fff;
}

/* --- Onglets nav-pills : onglet actif en dégradé --- */
.nav-pills .nav-link { color: var(--theme-violet-dark); }
.nav-pills .nav-link.active {
  background: var(--theme-gradient);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.6);
  box-shadow: 0 6px 18px rgba(var(--theme-violet-dark-rgb), 0.35);
}
.nav-pills .nav-link.active:hover, .nav-pills .nav-link.active:focus-visible {
  background: var(--theme-gradient-hover);
  border-color: rgba(var(--theme-gold-rgb), 0.9);
}

/* --- Menu offcanvas (admin) : élément actif en dégradé --- */
.offcanvas-menu-item.active {
  background: var(--theme-gradient);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.6);
  color: #fff;
  box-shadow: 0 6px 18px rgba(var(--theme-violet-dark-rgb), 0.35);
}
.offcanvas-menu-item.active:hover, .offcanvas-menu-item.active:focus-visible {
  background: var(--theme-gradient-hover);
  border-color: rgba(var(--theme-gold-rgb), 0.9);
}

/* ============================================================
   SECTION 2 — style.css : base commune des pages publiques
   ============================================================ */

/* Thème centralisé (violet/or) : variables Bootstrap, boutons, onglets,
   badges, menu offcanvas… voir css/theme.css */

/* Base */
html {
  overflow-x: hidden; }

/* Anti-CLS (SEO/Core Web Vitals) : les <img> portent width/height natifs ;
   height:auto préserve le ratio quand le CSS redimensionne la largeur (ex.
   .univers-img, .img-fluid) sans forcer la hauteur native. Les règles plus
   spécifiques (ex. .creation-media img { height:280px }) gardent la priorité. */
img {
  height: auto; }

body {
  line-height: 1.7;
  color: #364d59 !important;
  font-size: 1rem; }

::-moz-selection {
  background: #000;
  color: #fff; }

::selection {
  background: #000;
  color: #fff; }

a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
  text-decoration: none; }
  a:hover {
    text-decoration: none; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-weight: 300;
  color: #364d59; }

.text-black {
  color: #000 !important; }

.btn {
  border-radius: 30px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  padding: 10px 20px;
  text-decoration: none; }
  .btn:active, .btn:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none; }
  
    

.form-control {
  height: 55px;
  background: #fff !important;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* Bordure : fusionnée depuis l'ancienne 2e règle .form-control (plus bas). */
  border: 1px solid #e6e6e6; }
  .form-control:hover, .form-control:active, .form-control:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important; }
  /* bordure violette au focus : voir css/theme.css */

/* (padding .site-section : la règle « 7rem / 3rem » plus bas fait foi) */
  

/* Section « Mes créations » (index) : cartes soignées */



/* Écrin de l'image : anneau conique violet→or (langage visuel du site) */

/* Encadré identique aux blocs Aimants / Cool Toutou (.univers-img) :
   liseré violet + anneau blanc + coins arrondis, halo doré au survol. */


/* Badge catégorie : dégradé violet/or, plaqué sur l'image */


/* Pastille zoom (lightbox) : apparaît au survol */






  

/* Navbar */
/* Le titre « L'âme des pierres » (barre fixe + menu mobile) est en blanc :
   le h5.offcanvas-title hériterait sinon de la couleur sombre h1-h5 (#364d59)
   et deviendrait illisible sur le fond sombre du navbar/offcanvas. */
.site-navbar .navbar-brand, .site-navbar .offcanvas-title {
  color: #fff; }
/* Liens du menu burger (offcanvas) : la navbar ne porte ni `navbar-dark` ni
   data-bs-theme="dark", donc Bootstrap résout --bs-navbar-color en
   rgba(0,0,0,.65) et l'état actif en #000 → liens quasi noirs, l'actif
   carrément illisible sur le fond sombre du panneau. On les passe en BLANC
   (l'actif en gras, l'accent or réservé au survol comme le menu desktop
   .d-menu). Les sous-menus (.dropdown-menu-dark) étaient déjà lisibles et ne
   sont pas touchés. */
.site-navbar .offcanvas .nav-link {
  color: #fff; }
.site-navbar .offcanvas .nav-link:hover, .site-navbar .offcanvas .nav-link:focus-visible {
  color: var(--theme-gold); }
.site-navbar .offcanvas .nav-link.active {
  color: #fff;
  font-weight: 600; }
/* Entrée de sous-menu correspondant à la page courante (menu mobile) : même or que
   dans les panneaux desktop, sur un fond légèrement éclairci. */
.site-navbar .offcanvas .dropdown-item.active {
  color: var(--theme-gold);
  background: rgba(255, 255, 255, 0.07); }
.site-navbar {
  margin-bottom: 0px;
  z-index: 1999;
  position: absolute;
  top: 0;
  width: 100%;
  padding: 1rem; }
  @media (max-width: 991.98px) {
    .site-navbar {
      padding-top: 3rem;
      padding-bottom: 3rem; } }
  
  
    
    
  
  
    
    
    
      
        
      
    
      
        
      
        
          
          
        
          
        
          
            
          
          
          
      
      
        

/* Blocks */
/* Badge Ouvert / Fermé (accueil) — horaires 9h-12h / 14h-18h lun→sam */
/* Badge Ouvert / Fermé (accueil) — restylé pour le thème Collage 3D : petite
   ligne majuscule façon « m-open » du thème (plus de pilule), le dot pulsant
   vert/rouge reste piloté par site-effects.js (is-open/is-closed). */
.open-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  box-shadow: none;
}
.open-badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9ca3af;
  flex-shrink: 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.open-badge.is-open .open-badge-dot {
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.22), 0 0 12px rgba(74, 222, 128, 0.6);
  animation: openBadgePulse 2s ease-in-out infinite;
}
.open-badge.is-closed .open-badge-dot {
  background: #f87171;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18);
}
.open-badge-hours {
  opacity: 0.75;
  font-weight: 400;
}
@keyframes openBadgePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .open-badge.is-open .open-badge-dot {
    animation: none;
  }
}
@media (max-width: 575.98px) {
  .open-badge {
    font-size: 0.56rem;
  }
  .open-badge-hours {
    display: none;
  }
}

/* Hero header (index, cgv, mentions légales, politique de confidentialité) :
   le fond (header.webp) est posé ICI en CSS plutôt qu'en style inline pour
   permettre la bascule mobile header-mobile.webp (voir media query plus bas,
   ~5800). Chaque variante est déclarée dans une media query symétrique des
   <link rel="preload"> du <head> (desktop : min-width 576 px, mobile :
   max-width 575.98 px) : ainsi le navigateur ne TÉLÉCHARGE que la variante du
   viewport courant (sinon la règle desktop ferait partir header.webp même en
   mobile, doublant le poids du hero). Chemin ABSOLU : cette règle vit dans
   /css/theme.css, une URL relative serait résolue depuis /css/ → image
   introuvable. */

  
  

.site-section {
  padding: 7rem 0; }
  @media (max-width: 991.98px) {
    .site-section {
      padding: 3rem 0; } }

.bg-light {
  background-color: #f6f5f5 !important; }

/* (règle .post-entry-1 .post-entry-1-contents déplacée en fin de fichier,
   section « HÉRITAGE TEMPLATE ») */
.service-1 {
  text-align: center; }

/* ============================================================
   RÉSEAUX SOCIAUX — icônes SVG officielles (Facebook, Instagram)
   ============================================================ */
.social-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.social-icons .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  text-decoration: none;
  -webkit-transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  -o-transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.social-icons .social-link svg {
  display: block;
  fill: currentColor;
}

.social-icons .social-link:hover, .social-icons .social-link:focus {
  transform: translateY(-5px) scale(1.08);
  color: #fff;
}

.social-icons .social-link:focus-visible {
  outline: 3px solid #dc3545;
  outline-offset: 3px;
}

/* Facebook : bleu officiel */
.social-icons .social-link.facebook:hover, .social-icons .social-link.facebook:focus {
  background-color: #1877f2;
  border-color: #1877f2;
  box-shadow: 0 10px 24px rgba(24, 119, 242, 0.45);
}

/* Instagram : dégradé officiel */
.social-icons .social-link.instagram:hover, .social-icons .social-link.instagram:focus {
  border-color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  box-shadow: 0 10px 24px rgba(214, 36, 159, 0.45);
}

/* Icônes sociales dans la navbar (menu offcanvas) */
.navbar-social .social-link {
  width: 42px;
  height: 42px;
}

.navbar-social .social-link svg {
  width: 19px;
  height: 19px;
}

/* ============================================================
   CARTES ÉVÉNEMENTS — page « Événements à venir »
   ============================================================ */
.event-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
  -webkit-box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.12);
  -webkit-transition: transform .3s ease, box-shadow .3s ease, top .3s ease;
  -o-transition: transform .3s ease, box-shadow .3s ease, top .3s ease;
  transition: transform .3s ease, box-shadow .3s ease, top .3s ease;
}

.event-card:hover {
  top: -6px;
  -webkit-box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.2);
  border-color: #dc3545;
}

.event-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Affiche photo de l'événement (associée dans le panel admin) :
   image en haut de la carte, bords arrondis, ratio 16/9 recadré */
.event-card-img-wrap {
  margin: -30px -30px 20px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #f1f3f5;
}
.event-card-img {
  display: block;
  width: 100%;
  height: auto;
  /* Proportion d'origine conservée (pas de recadrage) : l'affiche s'affiche
     telle que conçue, aussi bien en portrait qu'en paysage, desktop et mobile. */
}

.event-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #dc3545;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 6px 14px;
  border-radius: 30px;
}

.event-badge .event-day {
  font-size: 18px;
  font-weight: 700;
}

.countdown-badge {
  display: inline-block;
  background: #f1f3f5;
  border: 1px solid #dee2e6;
  color: #495057;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 30px;
  white-space: nowrap;
}

.countdown-badge.soon {
  background: #fff3cd;
  border-color: #ffc107;
  color: #856404;
  -webkit-animation: countdownPulse 2s infinite;
  animation: countdownPulse 2s infinite;
}

@keyframes countdownPulse {
  0%, 100% { -webkit-transform: scale(1); transform: scale(1); }
  50% { -webkit-transform: scale(1.06); transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .countdown-badge.soon {
    -webkit-animation: none;
    animation: none;
  }
}

.event-card h3 {
  font-size: 20px;
  color: #364d59;
  margin-bottom: 10px;
}

.event-card .event-location {
  font-size: 14px;
  color: #dc3545;
  font-weight: 500;
  margin-bottom: 12px;
}

.event-card .event-time {
  font-size: 14px;
  color: #7b3fa0;
  font-weight: 600;
  margin-bottom: 8px;
}

.event-card p {
  font-size: 14px;
  color: #6c757d;
}            /* Cadenas « rendez-vous privé » : remplace le bouton de pré-inscription */
            .event-card .event-lock {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              background: rgba(var(--theme-gold-rgb), 0.10);
              border: 1px solid rgba(var(--theme-gold-rgb), 0.45);
              color: var(--theme-gold);
              border-radius: 999px;
              padding: 7px 16px;
              font-size: 0.88rem;
              font-weight: 600;
              cursor: default;
            }
            .event-card .event-lock .event-lock-label {
              letter-spacing: .02em;
            }
            .event-card .event-cta {

  margin-top: auto;
  align-self: flex-start;
  padding-top: 10px;
}

.event-card .event-cta:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* Page « événements à venir » : bouton « Je viens… » centré dans la carte
   (ciblé via #eventsGrid, propre à cette page — l'agenda garde l'alignement gauche) */
#eventsGrid .event-card .event-cta {
  align-self: center;
}

/* Page « événements à venir » : mois sans événement légèrement estompés
   dans la barre de filtres combinée (toujours affichés) */
.agenda-filter-btn.is-empty {
  opacity: .45;
}

/* Jauge de chargement indéterminée (page événements à venir) : barre fine
   dégradé violet → or qui défile sous le texte « Chargement des événements… */
.events-loading-bar {
  width: 260px;
  max-width: 80%;
  height: 6px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
  position: relative;
}
.events-loading-bar span {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--theme-violet), var(--theme-gold));
  -webkit-animation: eventsLoadingSlide 1.1s ease-in-out infinite;
  animation: eventsLoadingSlide 1.1s ease-in-out infinite;
}
@keyframes eventsLoadingSlide {
  0% { left: -40%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .events-loading-bar span {
    -webkit-animation: none;
    animation: none;
    left: 0;
    width: 100%;
  }
}

/* ============================================================
   AGENDA VISUEL — page « Agenda » (calendrier mensuel)
   ============================================================ */
.agenda-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 25px 20px 20px;
  -webkit-box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.12);
}

.agenda-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}

.agenda-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #364d59;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

.agenda-nav-btn:hover, .agenda-nav-btn:focus {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.agenda-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #364d59;
  text-transform: capitalize;
}

.agenda-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.agenda-weekdays span {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #868e96;
  padding: 6px 0;
}

.agenda-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.agenda-day {
  aspect-ratio: 1 / 1;
  /* min-width: 0 → la cellule ne peut pas pousser sa colonne grid au-delà
     de la largeur figée (un long libellé n'élargit jamais la colonne) */
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #f1f3f5;
  border-radius: 8px;
  font-size: 14px;
  color: #495057;
  background: #fff;
  -webkit-transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  -o-transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.agenda-day.empty {
  border-color: transparent;
  background: transparent;
}

.agenda-day .day-num {
  line-height: 1;
  font-weight: 500;
}

.agenda-day .event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc3545;
  margin-top: 5px;
}

.agenda-day.has-event {
  cursor: pointer;
  border-color: #f5c2cb;
}

.agenda-day.has-event:hover {
  background: #fdeef1;
  border-color: #dc3545;
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 12px -4px rgba(220, 53, 69, 0.4);
  box-shadow: 0 4px 12px -4px rgba(220, 53, 69, 0.4);
}

.agenda-day.today .day-num {
  color: #dc3545;
  font-weight: 800;
}

.agenda-day.today {
  border-color: #dc3545;
}

.agenda-day.selected {
  background: #dc3545;
  border-color: #dc3545;
}

.agenda-day.selected .day-num {
  color: #fff;
  font-weight: 800;
}

.agenda-day.selected .event-dot {
  background: #fff;
}

.agenda-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 13px;
  color: #6c757d;
}

.agenda-legend .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc3545;
  display: inline-block;
  margin-right: 4px;
}

.agenda-legend .legend-today-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #dc3545;
  display: inline-block;
  margin-right: 4px;
}

.agenda-legend .legend-today {
  color: #dc3545;
  font-weight: 700;
}

/* Légende des agendas sources (page Agenda, multi-agendas Google) */
.agenda-calendar-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #dee2e6;
  font-size: 13px;
  color: #6c757d;
}

.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* Badge « agenda source » sur les cartes d'événements */
.event-calendar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #6c757d;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 4px 11px;
  border-radius: 30px;
  white-space: nowrap;
  max-width: 100%;
}

.event-calendar .cal-dot {
  width: 9px;
  height: 9px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.agenda-on-demand-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #adb5bd;
  margin: 22px 0 12px;
  border-top: 1px dashed #dee2e6;
  padding-top: 18px;
}

/* Colonne latérale : liste des événements du mois */
.agenda-sidebar {
  position: sticky;
  top: 120px;
}

.agenda-sidebar-title {
  font-size: 18px;
  font-weight: 600;
  color: #364d59;
  margin-bottom: 16px;
}

.agenda-sidebar .agenda-event {
  margin-bottom: 15px;
}

.agenda-empty {
  background: #f8f9fa;
  border: 1px dashed #ced4da;
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  color: #6c757d;
}

/* Surbrillance d'une carte après clic sur le calendrier */
.event-card.flash {
  -webkit-box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.35);
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.35);
  border-color: #dc3545;
}

/* ============================================================
   PAGE AGENDA — refonte desktop (≥ 992 px)
   Calendrier aussi large que le filtre d'agendas (pleine largeur
   du conteneur, figée — indépendante des libellés), cellules de
   largeur identique (samedi/dimanche légèrement réduits) et
   événements du mois affichés SOUS le calendrier, regroupés par
   mois en grille de 3 colonnes — comme la page « événements à
   venir ». Le mobile (< 992 px) garde l'affichage historique
   (calendrier puis liste empilée) : les titres de mois y sont
   masqués.
   ============================================================ */
.agenda-month-title {
  display: none; /* visible uniquement en desktop (regroupement par mois) */
}

@media (min-width: 992px) {
  /* Cellules plus hautes : les mini-événements sur 2 lignes respirent
     (le badge « +N encore » n'est pas rogné) */
  .bg-dark .agenda-day, .bg-dark .agenda-day.empty {
    min-height: 120px;
  }

  /* Calendrier : même largeur que le filtre d'agendas (pleine
     largeur du conteneur — aucune largeur max figée en-deçà) */
  .agenda-page-row .col-lg-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }

  /* Liste des événements : pleine largeur, sous le calendrier */
  .agenda-page-row .col-lg-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    margin-top: 44px;
  }

  .agenda-sidebar {
    position: static;
  }

  /* Le titre global « Événements du mois » est remplacé par les titres de mois */
  .agenda-sidebar-title {
    display: none;
  }

  /* Largeur FIXE et identique pour tous les jours ; samedi/dimanche
     légèrement réduits. minmax(0, …) garantit que le contenu (libellé
     trop long) ne peut jamais élargir une colonne au-delà de sa part. */
  .agenda-weekdays, .agenda-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 0.82fr) minmax(0, 0.82fr);
  }

  /* Regroupement par mois : titre + grille de 3 colonnes
     (couleur du thème : or — titre agrandi et mis en valeur) */
  .agenda-month-title {
    display: block;
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--theme-gold);
    text-shadow: 0 2px 14px rgba(var(--theme-gold-rgb), 0.28);
    margin: 36px 0 22px;
    padding-top: 20px;
    border-top: 1px dashed rgba(var(--theme-gold-rgb), 0.5);
  }

  .agenda-month-events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .agenda-sidebar .agenda-event {
    margin-bottom: 0;
  }
}

/* Responsive : très petits écrans */
@media (max-width: 575.98px) {
  .agenda-card {
    padding: 15px 10px 15px;
  }
  .agenda-weekdays {
    gap: 3px;
  }
  .agenda-weekdays span {
    font-size: 10px;
    padding: 4px 0;
  }
  .agenda-grid {
    gap: 3px;
  }
  .agenda-day {
    font-size: 12px;
    border-radius: 6px;
  }
  .agenda-day .event-dot {
    width: 5px;
    height: 5px;
    margin-top: 3px;
  }
  .agenda-nav-btn {
    width: 36px;
    height: 36px;
  }
  .agenda-title {
    font-size: 18px;
  }
  .agenda-sidebar {
    position: static;
  }
}

/* ldp */
.title {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 10px;
  font-size: 3rem; }
  @media (max-width: 991.98px) {
    .title {
      font-size: 2rem; } }

/* ============================================================
   PAGE D'ACCUEIL — sections professionnelles
   ============================================================ */

/* Sur-titre discret au-dessus des titres de section */
.section-eyebrow {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--theme-violet);
  background: rgba(var(--theme-violet-rgb), 0.10);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.22);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 14px;
}
/* Variante claire pour fonds sombres (ex. section bg-dark « L'essence des
   pierres ») : texte doré sur halo sombre, lisible sur #212529. */
.section-eyebrow-dark {
  color: #e9d08b;
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(var(--theme-gold-rgb), 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ---- Page concours : cartes et panneaux sur le modèle de rendez-vous.html
   (rdv-card translucide, bordure violette ; tableau, alertes et preuve
   adaptés au fond sombre uniforme rdv-body) ---- */
.rdv-card .table {
  --bs-table-bg: transparent;
  color: rgba(255, 255, 255, 0.85);
}
.rdv-card .table thead th {
  color: var(--theme-gold);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.rdv-card .table td {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.rdv-card .table-hover tbody tr:hover {
  background: rgba(var(--theme-violet-rgb), 0.18);
}
.rdv-card .alert {
  border-radius: 12px;
}
.rdv-card .alert-warning {
  background: rgba(var(--theme-gold-rgb), 0.14);
  border-color: rgba(var(--theme-gold-rgb), 0.35);
  color: #f2e2ae;
}
.rdv-card .alert-success {
  background: rgba(90, 210, 140, 0.14);
  border-color: rgba(90, 210, 140, 0.35);
  color: #bfeccb;
}
.rdv-card .alert-danger {
  background: rgba(230, 100, 100, 0.14);
  border-color: rgba(230, 100, 100, 0.35);
  color: #f5c6c6;
}
.rdv-card details summary:hover {
  color: var(--theme-gold);
}

/* Introduction sous le titre de section */
.section-intro {
  margin-top: 10px;
  color: #6b6580;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 5 univers : vignettes cliquables (Pierres, Aimants,
   Cool Toutou, Mystic Cristal, Soins & oracles) en grille uniforme ---------- */
.univers-card {
  display: block;
  border-radius: 22px;
}
.univers-card:focus-visible {
  outline: 3px solid rgba(var(--theme-gold-rgb), 0.7);
  outline-offset: 3px;
}
.univers-media {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
}

.univers-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 22px;
  box-shadow:
    0 22px 50px rgba(var(--theme-violet-dark-rgb), 0.28),
    0 0 0 1px rgba(var(--theme-violet-rgb), 0.14),
    0 0 0 6px rgba(255, 255, 255, 0.9),
    0 0 0 7px rgba(var(--theme-violet-rgb), 0.18);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
}
.univers-media:hover .univers-img {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 30px 60px rgba(var(--theme-violet-dark-rgb), 0.35),
    0 0 0 1px rgba(165, 110, 220, 0.30),
    0 0 0 6px rgba(255, 255, 255, 0.9),
    0 0 0 7px rgba(var(--theme-gold-rgb), 0.35);
}
.univers-badge {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--theme-gradient);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(var(--theme-gold-rgb), 0.5);
  border-radius: 999px;
  padding: 9px 20px;
  box-shadow: 0 10px 24px rgba(var(--theme-violet-dark-rgb), 0.4);
  white-space: nowrap;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.univers-badge i {
  color: var(--theme-gold);
  font-size: 0.95rem;
}
.univers-media:hover .univers-badge {
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 14px 30px rgba(var(--theme-violet-rgb), 0.5);
}
@media (max-width: 991.98px) {
  .univers-badge { bottom: 18px; }
}
@media (max-width: 575.98px) {
  /* Mobile : vignettes empilées une sous l'autre, image limitée et centrée
     (même comportement que les cartes « bienfaits des pierres »). */
  .univers-media { max-width: 240px; margin-left: auto; margin-right: auto; }
  .univers-img { width: 100%; }
  .univers-card { margin-bottom: 1.25rem; }
  .univers-card:last-child { margin-bottom: 0; }
}

/* ---------- Cartes « créations sur demande » : mise en page identique aux
   cartes « bienfaits » (photo en rond + anneau or/violet, titre, description) */
/* Fond : même gris que les cartes « bienfaits ». Celles-ci héritent du gris
   sombre de leur section bg-dark (#212529) via le dégradé blanc translucide
   de .pierre-card ; ici la section est claire (bg-light), on pose donc le même
   dégradé sur un fond sombre explicite pour un rendu identique. */





.img-years {
  position: relative;
  display: block; }
  .img-years .year {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #dc3545;
    position: absolute;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%); }
    @media (max-width: 991.98px) {
      .img-years .year {
        position: relative;
        -webkit-transform: translate(0%, 0%);
        -ms-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        margin: -30px auto 0 auto; } }
    .img-years .year > span {
      width: 100%;
      color: #fff;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 3rem;
      display: block;
      line-height: 1;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      .img-years .year > span > span {
        line-height: 1.2;
        display: block;
        font-size: .8rem; }


/* ============================================================
   TYPOGRAPHIE PROFESSIONNELLE
   Titres en Playfair Display (serif élégant), corps en DM Sans.
   Le poids du corps passe de 300 à 400 pour une lecture affirmée.
   ============================================================ */
body {
  font-weight: 400; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif;
  font-weight: 600; }

/* Titres de section : un peu plus de présence + couleur violet/or */
.title {
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.01em; }

/* Cartes pierres : nom en Playfair */
.pierre-card-name {
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif;
  font-weight: 700; }

/* Cartes créations : titre en Playfair */


/* Auteur des témoignages : Playfair léger pour la signature */
.testimonial-author {
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif;
  font-weight: 600; }

/* Titres de cartes événements */
.event-card h3 {
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif;
  font-weight: 700; }

/* Badges & libellés : restent en DM Sans (petites capitales lisibles) */
.pierre-badge, .section-eyebrow {
  font-family: 'DM Sans', sans-serif; }

/* Sur petit écran, le corps reste lisible (400, pas 300) */
@media (max-width: 575.98px) {
  body { font-weight: 400; }
}

/* ============================================================
   ZONES D'INTERVENTION (SEO local — communes autour de Reyrieux)
   Section visible en fin de page d'accueil : liste des communes
   d'intervention groupées par distance, style « puces ».
   ============================================================ */
.zones-section {
  /* Padding revu à la baisse (7rem par défaut via .site-section) : la section
     est une simple liste de communes, 224px de marge verticale lui donnait
     bien trop d'importance en fin de page. */
  background: #fff;
  padding: 4rem 0; }
@media (max-width: 991.98px) {
  .zones-section { padding: 2.5rem 0; } }
.zones-group {
  margin-bottom: 1.25rem; }
.zones-group:last-child {
  margin-bottom: 0; }
.zones-group-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--theme-gold-deep);
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 0.45rem; }
.zones-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  list-style: none; }
/* Puces compactes : la liste des communes est dense (plus de 80 noms), chaque
   gagné sur le padding/gap se multiplie sur les ~8 rangées. */
.zone-chip {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-or);
  color: #364d59;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.zone-chip:hover {
  border-color: var(--theme-violet);
  color: var(--theme-violet);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--theme-violet-rgb), 0.18); }
.zones-note {
  font-size: 0.9rem;
  color: #8a8a8a; }

/* ============================================================
   TITRES DE SECTION — dégradé violet→or + filet doré ✦
   Texte en dégradé (background-clip: text), filet doré fin avec
   losange central centré sous chaque titre. Variante claire
   automatique sur fonds sombres (footer noir, sections bg-dark).
   ============================================================ */
.title {
  /* Couleur pleine de secours : s'applique si background-clip: text est
     non supporté (l'ancien rouge #dc3545 de la ligne ~2207 est écrassé). */
  color: var(--theme-violet);
  padding-bottom: 20px;
}

/* Dégradé violet → or UNIQUEMENT si le navigateur supporte le clip texte.
   (Sans ce garde @supports, un navigateur gérant -webkit-text-fill-color
   mais pas background-clip: text rendrait le titre INVISIBLE.) */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .title {
    background: linear-gradient(115deg, var(--theme-violet-title-start) 0%, var(--theme-violet-title-mid) 38%, var(--theme-gold-bronze) 72%, var(--theme-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Filet doré fin à deux segments (trou central pour le losange).
   ALIGNEMENT : couplé à padding-bottom: 20px (sur .title) et à
   top: calc(100% - 14px) du ::before ci-dessous — si l'une de ces
   valeurs change, ajuster les autres ensemble. */
.title::after {
  content: "";
  display: block;
  width: 180px;
  max-width: 100%; /* ne déborde jamais d'une cartouche rétrécie */
  height: 1px;
  margin: 6px auto 0;
  background: linear-gradient(90deg, transparent 12%, var(--theme-gold) 32%, var(--theme-gold) 42%, transparent 47%, transparent 53%, var(--theme-gold) 58%, var(--theme-gold) 68%, transparent 88%);
  opacity: 0.9;
}

/* Losange ✦ centré sur le filet (cf. commentaire d'alignement ci-dessus) */
.title::before {
  content: "✦";
  position: absolute;
  left: 50%;
  top: calc(100% - 14px);
  transform: translate(-50%, -50%);
  color: var(--theme-gold);
  font-size: 11px;
  line-height: 1;
  -webkit-text-fill-color: var(--theme-gold); /* réactive la couleur (héritée transparente) */
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
}

/* Variante claire sur fonds sombres (lisibilité) */
.bg-dark .title, .text-white.title {
  color: #efe6fd;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .bg-dark .title, .text-white.title {
    background: linear-gradient(115deg, #efe6fd 0%, #d3b4f5 40%, #e9cd85 75%, #f2dfa4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Fond violet profond : deux sections SOMBRES adjacentes ne se lisaient plus
   qu'en une masse (ex. accueil : « Bienfaits et vertus » en .bg-dark #212529
   puis « Soins & accompagnement »). Ce fond délimite visuellement la deuxième,
   sans sortir de la famille sombre du thème. Contenu compatible à l'identique
   que .bg-dark : titres via .text-white.title (dégradé clair), eyebrow
   .section-eyebrow-dark (dorée), boutons .btn-outline-light, cartes
   .pierre-card translucides. */
.bg-violet-deep {
  background: linear-gradient(165deg, var(--theme-violet-dark) 0%, var(--theme-violet-deep) 100%);
}

/* ============================================================
   SECTION 3 — header.css : hero accueil (pierres & aimants)
   ============================================================ */

/* (règles .ftco-blocks-cover-1 de cette section déplacées en fin de
   fichier, section « HÉRITAGE TEMPLATE ») */

.boutique-highlight {
  padding: 20px 30px;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;                 /* alignement vertical */
  flex-direction: column;        /* texte sous l'image */
  align-items: center;           /* centre horizontal */
  justify-content: center;       /* centre vertical */
  text-align: center;
  text-decoration: none;
  /* Même violet que le titre d'en-tête (cartouche) et les icônes
     « créations personnalisées » : var(--theme-violet-dark) → var(--theme-violet), liseré or. */
  background: linear-gradient(135deg, rgba(var(--theme-violet-dark-rgb), 0.78) 0%, rgba(var(--theme-violet-rgb), 0.78) 100%);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  min-width: 210px;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.boutique-highlight img {
  width: 60px;                   /* taille uniforme */
  height: 60px;
  object-fit: contain;           /* évite la déformation */
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

/* Mobile : boutons e-Boutique compactés pour que le bouton ebook reste
   visible dans la hauteur d'écran (les 2 cartes s'empilent). */
@media (max-width: 575.98px) {
  .boutique-highlight {
    padding: 14px 20px;
    border-radius: 18px;
    min-width: 200px;
  }
  .boutique-highlight img {
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
  }
}

.boutique-highlight:hover {
  transform: scale(1.06);
  background: linear-gradient(135deg, rgba(var(--theme-violet-hover-rgb), 0.9) 0%, rgba(var(--theme-violet-hover-light-rgb), 0.9) 100%);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38);
  border-color: rgba(var(--theme-gold-rgb), 0.9);
}

.boutique-highlight:hover img {
  transform: scale(1.1);
}

/* -------- Version mobile : 2 cartes compactes côte à côte -------- */
@media (max-width: 767.98px) {
  .boutique-highlight {
    flex: 1 1 40%;
    min-width: 0;
    max-width: 47%;
    padding: 14px 8px;
    border-radius: 18px;
  }
  .boutique-highlight img {
    width: 42px;
    height: 42px;
    margin-bottom: 6px;
  }
}

/* ============================================================
   SECTION 4 — site-effects.css : effets & animations
   ============================================================ */

/* ============================================================
   site-effects.css — Effets & objets professionnels
   (animations de défilement, particules, hover, lightbox, ...)
   ============================================================ */

/* ---------- Accessibilité : libellé invisible (conserve le design) ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---------- Hover magique sur les pierres ---------- */
/* Survol réservé aux appareils à souris : sur mobile, le « tap » ne
   déclenche plus de zoom qui perturbe l'affichage du texte. */
.service-1 {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
/* Images fluides : ne débordent plus de leur colonne sur mobile */
.service-1 > img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease;
}
@media (hover: hover) and (pointer: fine) {
  .service-1 {
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease;
  }
  .service-1:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(var(--theme-violet-dark-rgb), 0.22), 0 0 0 1px rgba(var(--theme-violet-rgb), 0.15);
  }
  .service-1:hover > img {
    transform: scale(1.09) translateY(-4px);
    filter: drop-shadow(0 10px 22px rgba(var(--theme-violet-rgb), 0.45));
  }
  /* Halo lumineux qui suit le survol */
  .service-1::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--theme-violet-rgb), 0.16), transparent 45%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
  }
  .service-1:hover::after { opacity: 1; }
}

/* ---------- Carte pierre professionnelle (page bienfaits) ---------- */
.pierre-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(var(--theme-violet-rgb), 0.32);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.35s ease, border-color 0.35s ease;
}
.pierre-card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 38px 20px 16px;
  /* Halo divisé par 2 : simple voile quasi invisible, la pierre occupe tout */
  background: radial-gradient(circle at 50% 32%, rgba(var(--theme-violet-rgb), 0.03), transparent 26%);
}
.pierre-card-img img {
  max-width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Photo en rond : pierre agrandie (190 px) + anneau fin or/violet, halo réduit.
   Les photos uploadées passent par le pipeline (carré 800×800 centré),
   le cercle est donc parfait quel que soit le format d'origine. */
.pierre-card:not(.presta-card) .pierre-card-img img {
  width: 190px;
  height: 190px;
  max-height: none;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(#160d26, #160d26) padding-box,
    conic-gradient(from 210deg, var(--theme-violet), var(--theme-gold-soft), var(--theme-gold), var(--theme-violet)) border-box;
  filter: none;
  /* Halo rose divisé par 2 : lueur violette réduite, l'anneau or/violet reste
     plaqué sur le bord du cercle (photo désormais découpée en cercle parfait) */
  box-shadow:
    0 0 0 1px rgba(var(--theme-violet-rgb), 0.18),
    0 14px 28px rgba(0, 0, 0, 0.42),
    0 0 16px rgba(var(--theme-violet-rgb), 0.14),
    0 0 16px rgba(var(--theme-gold-rgb), 0.20);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.45s ease;
}
.pierre-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 22px 24px;
}
.pierre-card-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.25;
  color: #fff;
  text-align: center;
  margin-bottom: 2px;
  letter-spacing: 0.8px;
  text-transform: capitalize;
  text-shadow: 0 2px 10px rgba(var(--theme-violet-rgb), 0.5);
}
/* Fiches pierre dédiées (pierre-*.html) : nom en Tangerine comme le titre
   des bienfaits (même police calligraphique que le hero/logo). */
.pierre-page-card .pierre-card-name {
  font-family: 'Tangerine', 'Playfair Display', serif;
  font-weight: 700;
  /* Aligné sur le titre Tangerine du modal bienfaits (2.2rem) avec une
     croissance fluide jusqu'à ~2.8rem sur grands écrans (le hero h1, lui,
     grimpe jusqu'à 3.9rem) — jamais trop grand, jamais écrasé. */
  font-size: clamp(2.1rem, 2.2vw + 1.1rem, 2.8rem);
  line-height: 1.2;
  color: var(--theme-gold);
  letter-spacing: 0.4px;
  text-transform: none;
  text-shadow: 0 2px 14px rgba(var(--theme-violet-rgb), 0.55);
}
@media (max-width: 575.98px) {
  .pierre-page-card .pierre-card-name {
    font-size: 1.9rem;
  }
}
.pierre-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 999px;
  margin-bottom: 6px;
  color: #fff;
}
.badge-mental { background: rgba(var(--theme-violet-rgb), 0.60); }
.badge-physique { background: rgba(165, 110, 220, 0.62); }
.badge-purif { background: rgba(var(--theme-gold-rgb), 0.55); color: #2b1d05; }
.badge-rech { background: rgba(230, 130, 70, 0.62); color: #2b1d05; }
/* Surbrillance du mot recherché dans les cartes : or translucide, lisible sur carte sombre */
.pierre-card mark {
  background: rgba(var(--theme-gold-rgb), 0.32);
  color: #fff;
  border-radius: 3px;
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pierre-section p {
  margin: 0;
  text-align: left;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  line-height: 1.65;
}
.pierre-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (hover: hover) and (pointer: fine) {
  .pierre-card:hover {
    transform: translateY(-6px);
    border-color: rgba(165, 110, 220, 0.6);
    box-shadow: 0 18px 40px rgba(var(--theme-violet-dark-rgb), 0.35);
  }
  .pierre-card:hover .pierre-card-img img { transform: scale(1.06); }
  /* Hover : l'anneau dégradé s'illumine (couleurs or/violet) */
  .pierre-card:not(.presta-card):hover .pierre-card-img img {
    box-shadow:
      0 0 0 1px rgba(165, 110, 220, 0.50),
      0 16px 32px rgba(0, 0, 0, 0.50),
      0 0 32px rgba(var(--theme-gold-rgb), 0.45);
  }
}
@media (max-width: 575.98px) {
  /* Mobile : la pierre reste grande mais tient dans la carte */
  .pierre-card:not(.presta-card) .pierre-card-img img {
    width: 160px;
    height: 160px;
  }
}
@media (max-width: 575.98px) {
  .pierre-row { grid-template-columns: 1fr; }
  .pierre-card-body { padding: 10px 16px 20px; }
  .pierre-card-name { font-size: 1.2rem; }
}

/* ---------- Fiches pierre dédiées : image principale + sections rédigées ---------- */
/* L'image de la fiche dédiée s'agrandit en carré arrondi (au lieu du petit cercle
   190 px des cartes de bienfaits) : rapport 1:1 + recadrage cover = aucune
   déformation, anneau dégradé or/violet conservé. */
.pierre-page-card .pierre-card-img img {
  width: min(52%, 360px);
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  object-fit: cover;
  border-radius: 22px;
  border: 3px solid transparent;
  background:
    linear-gradient(#160d26, #160d26) padding-box,
    conic-gradient(from 210deg, var(--theme-violet), var(--theme-gold-soft), var(--theme-gold), var(--theme-violet)) border-box;
  filter: none;
  box-shadow:
    0 0 0 1px rgba(var(--theme-violet-rgb), 0.22),
    0 16px 34px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(var(--theme-violet-rgb), 0.16),
    0 0 22px rgba(var(--theme-gold-rgb), 0.22);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}
.pierre-page-card:hover .pierre-card-img img { transform: scale(1.03); }
@media (max-width: 575.98px) {
  .pierre-page-card .pierre-card-img img { width: min(62%, 260px); }
  .pierre-page-card .pierre-card-name { font-size: 1.7rem; }
}
/* Séparateur or entre les infos techniques (mental/physique/purif/rech) et
   les sections rédigées des fiches pierre dédiées. */
.pierre-sep {
  margin: 28px 0 6px;
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--theme-gold-rgb), 0.40), var(--theme-gold), rgba(var(--theme-gold-rgb), 0.40), transparent);
}

/* Étiquettes des sections rédigées : pilule fine or (contour + texte or),
   cohérente avec la charte du thème, sur carte sombre. */
.pierre-badge.seo-label {
  background: rgba(var(--theme-gold-rgb), 0.12);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.5);
  color: var(--theme-gold);
  margin-bottom: 10px;
}
/* Grille des pierres associées : vignettes compactes centrées, image ronde
   assortie (anneau or), nom discret — sans reprise du grand .pierre-card-name. */
.pierre-rel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding-top: 14px;
}
.pierre-rel-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.pierre-rel-link:focus-visible {
  outline: 2px solid var(--theme-gold);
  outline-offset: 4px;
  border-radius: 14px;
}
.pierre-rel-link img {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(var(--theme-gold-rgb), 0.55);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), 0 0 14px rgba(var(--theme-gold-rgb), 0.12);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s ease;
}
.pierre-rel-link:hover img { transform: scale(1.07); border-color: var(--theme-gold); }
.pierre-rel-name {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.94);
  text-align: center;
  letter-spacing: 0.4px;
  line-height: 1.35;
  text-transform: capitalize;
}
@media (max-width: 575.98px) {
  .pierre-rel-link img { width: 84px; height: 84px; }
  .pierre-rel-name { font-size: 0.72rem; }
}
/* Variante « fond clair » (bloc pierres populaires de l'accueil) : les noms des
   vignettes rondes passent en violet sombre, lisibles sur fond clair (le défaut
   est prévu pour les fiches pierre en fond sombre). */


/* ---------- Cartes prestations (page prestations) ---------- */
.presta-card .pierre-card-body { gap: 14px; }
.presta-card .pierre-card-name { text-transform: none; }
/* Photos des prestations agrandies : la hauteur monte à 300 px (les images
   source sont en 250×375, l'affichage reste donc net) et le padding vertical
   est réduit pour que la photo occupe la carte, comme sur les cartes pierres. */
.presta-card .pierre-card-img { padding: 22px 20px 10px; }
.presta-card .pierre-card-img img { max-height: 300px; }
.presta-infos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}
.presta-info {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
}
.presta-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--theme-gold-soft);
  margin-bottom: 3px;
}
.presta-value {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.presta-note {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  font-style: italic;
}
.presta-btn {
  margin-top: auto;
  width: 100%;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 10px 16px;
}
.presta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--theme-violet-dark-rgb), 0.4); }
@media (max-width: 575.98px) {
  .presta-infos { grid-template-columns: 1fr; }
}
/* Centrage desktop : 1 à 3 cartes → centrées dans la grille, taille identique
   à la version 3 cartes (col-lg-4 conservé sur lg, col-md-6 sur tablette). */
@media (min-width: 768px) {
  #prestationsRow { justify-content: center; }
}
/* (zoom .post-entry-1 des cartes créations déplacé en fin de fichier,
   section « HÉRITAGE TEMPLATE ») */

/* Cartes événements */
.event-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}

/* ---------- Bouton retour en haut + barre de progression ---------- */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--theme-violet), var(--theme-gold));
  z-index: 9999;
  transition: width 0.1s linear;
}
#backToTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--theme-gradient);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(var(--theme-violet-dark-rgb), 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 9990;
  cursor: pointer;
}
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover { background: linear-gradient(135deg, var(--theme-violet-dark-hover), var(--theme-violet-card-hover)); transform: translateY(-3px); }

/* ---------- Bouton PWA « Installer l'application » ----------
   Bas DROITE, AU-DESSUS du #backToTop (bottom: 20px) pour éviter tout conflit :
   - le bas GAUCHE est occupé par le bouton 🍪 de révocation du consentement
     (#ldp-cookie-reopen, z-index 9998) — une collision y rendrait le bouton
     inutilisable ;
   - la bannière cookies (z-index 9999, pleine largeur, bottom: 0) passe
     AU-DESSUS de tout : tant qu'elle est visible, on masque le bouton PWA
     (body:has) — on ne propose pas d'installer l'app avant le consentement.
   Caché quand l'app est déjà installée (display-mode standalone) — géré en JS. */
#ldp-pwa-install-host {
  position: fixed;
  right: 20px;
  bottom: 78px; /* au-dessus du #backToTop (46px) */
  z-index: 9990;
  display: flex;
  align-items: center;
}
/* Bannière cookies visible → bouton PWA masqué (priorité au consentement). */
body:has(#ldp-cookie-banner.ldp-visible) #ldp-pwa-install-host {
  display: none;
}
#ldp-pwa-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid rgba(var(--theme-gold-rgb), 0.45);
  border-radius: 32px;
  background: var(--theme-gradient);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(var(--theme-violet-dark-rgb), 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
#ldp-pwa-install-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--theme-violet-dark-rgb), 0.55);
  background: linear-gradient(135deg, var(--theme-violet-dark-hover), var(--theme-violet-card-hover));
}
#ldp-pwa-install-btn:focus-visible {
  outline: 3px solid rgba(var(--theme-gold-rgb), 0.7);
  outline-offset: 2px;
}
#ldp-pwa-install-close {
  margin-left: 8px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
#ldp-pwa-install-close:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(90deg);
}
/* Mini-aide iOS (Partager → Ajouter à l'écran d'accueil) */
.ldp-pwa-help-card {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  width: min(340px, calc(100vw - 40px));
  padding: 22px 24px 20px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--theme-violet-deep), var(--theme-violet-dark));
  border: 1px solid rgba(var(--theme-gold-rgb), 0.4);
  color: #f5e9ff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  z-index: 9995;
}
.ldp-pwa-help-card h3 {
  margin: 0 0 12px;
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif;
  font-size: 1.25rem;
  color: var(--theme-gold);
}
.ldp-pwa-help-card ol {
  margin: 0 0 10px;
  padding-left: 20px;
  line-height: 1.7;
  font-size: 0.95rem;
}
.ldp-pwa-help-note {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}
.ldp-pwa-help-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 575.98px) {
  #ldp-pwa-install-host { right: 12px; bottom: 66px; }
  #ldp-pwa-install-btn { padding: 10px 16px; font-size: 0.85rem; }
}

/* ---------- Lightbox (galerie) ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 8, 24, 0.94);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }
.lightbox-overlay img.lightbox-img {
  max-width: min(92vw, 1100px);
  max-height: 78vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.lightbox-caption { color: #e6e0f5; margin-top: 14px; font-size: 1.05rem; }
.lightbox-count { color: #9d93b8; margin-top: 6px; font-size: 0.85rem; }
.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 10001;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 30px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 10001;
}
[data-lightbox] { cursor: zoom-in; }
/* Lightbox avec une seule image : pas de navigation (flèches + compteur masqués) */
.lightbox-overlay.lightbox-single .lightbox-btn, .lightbox-overlay.lightbox-single .lightbox-count { display: none; }

/* ---------- Bouton « Photos » des cartes événements passés ----------
   Même gabarit que le CTA « Je viens ! » : dégradé violet, liseré or.
   La marge supérieure le sépare du texte de la carte. */
.event-card .gallery-open-btn {
  margin-top: 16px;
  width: 100%;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* ---------- Lightbox galerie photos (événements passés) ----------
   Fond sombre violet quasi opaque, image centrée (object-fit: contain),
   flèches latérales, compteur, légende et vignettes cliquables en bas.
   Navigation clavier (← → Échap) + balayage tactile. Plein écran sur
   mobile comme sur desktop. */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 16px 20px;
  background: rgba(10, 6, 20, 0.96);
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lb-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
.gallery-lb-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
}
.gallery-lb-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 10051;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gallery-lb-close:hover { background: rgba(255, 255, 255, 0.22); transform: rotate(90deg); }
.gallery-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 10051;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gallery-lb-nav:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-50%) scale(1.08); }
.gallery-lb-prev { left: 14px; }
.gallery-lb-next { right: 14px; }
.gallery-lb-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: 1000px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  min-height: 22px;
}
.gallery-lb-count {
  color: var(--theme-gold);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 0.82rem;
}
.gallery-lb-thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
}
.gallery-lb-thumb {
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.gallery-lb-thumb img {
  display: block;
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}
.gallery-lb-thumb:hover { transform: translateY(-2px); border-color: rgba(var(--theme-gold-rgb), 0.6); }
.gallery-lb-thumb.is-active { border-color: var(--theme-gold); }
.gallery-lb-open { overflow: hidden; }
@media (max-width: 575.98px) {
  .gallery-lightbox { padding: 54px 8px 14px; gap: 10px; }
  .gallery-lb-nav { width: 40px; height: 40px; font-size: 16px; }
  .gallery-lb-prev { left: 6px; }
  .gallery-lb-next { right: 6px; }
  .gallery-lb-thumb img { width: 52px; height: 40px; }
}

/* ---------- Bandeau de statistiques (compteurs) ---------- */
.stats-band {
  background: linear-gradient(135deg, var(--theme-violet-deep), var(--theme-violet-dark) 55%, var(--theme-violet));
  color: #fff;
  padding: 46px 0;
}




/* ---------- Avis clients (carrousel) ---------- */
.testimonials-section { background: #f8f6fd; }
.testimonials-track { overflow: hidden; }
.testimonials-inner {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.testimonial-slide {
  flex: 0 0 100%;
  padding: 10px;
}
.testimonial-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(var(--theme-violet-dark-rgb), 0.10);
  padding: 30px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #eee8f7;
}
.testimonial-stars { color: var(--theme-gold); font-size: 1.25rem; letter-spacing: 3px; margin-bottom: 12px; }
.testimonial-text { font-size: 1.1rem; font-style: italic; color: #433b52; line-height: 1.7; }
.testimonial-author { margin-top: 16px; font-weight: 700; color: var(--theme-violet-dark); }
.testimonial-role { color: #8a83a0; font-size: 0.9rem; }

/* Récapitulatif des avis Google : note moyenne + jauge de répartition par étoiles */
.avis-recap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: #fff;
  border: 1px solid #eee8f7;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(var(--theme-violet-dark-rgb), 0.08);
  padding: 18px 26px;
  max-width: 760px;
  margin: 0 auto 30px;
}
.avis-recap-note {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--theme-violet-dark);
  font-family: 'DM Sans', sans-serif;
}
.avis-recap-note span { font-size: 0.95rem; font-weight: 600; color: #8a83a0; margin-left: 2px; }
.avis-recap-stars {
  color: var(--theme-gold);
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin: 6px 0 2px;
  text-shadow: 0 1px 0 rgba(212, 175, 55, 0.35);
}
.avis-recap-count { color: #8a83a0; font-size: 0.82rem; }
.avis-recap-count strong { color: var(--theme-violet-dark); }
.avis-recap-bars { flex: 1 1 300px; min-width: 240px; display: grid; gap: 5px; }
.avis-recap-row {
  display: grid;
  grid-template-columns: 30px 1fr 40px;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #6b6480;
}
.avis-recap-row .avis-recap-label { font-weight: 600; }
.avis-recap-row .avis-recap-label .star { color: var(--theme-gold); }
.avis-recap-track {
  height: 8px;
  border-radius: 999px;
  background: #efeaf8;
  overflow: hidden;
}
.avis-recap-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--theme-violet-dark), var(--theme-violet));
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15);
  width: 0;
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.avis-recap-row .avis-recap-pct { text-align: right; font-weight: 600; color: #6b6480; }
.avis-recap.is-visible .avis-recap-fill { width: var(--fill, 0%); }
@media (max-width: 640px) {
  .avis-recap { gap: 18px; padding: 16px 16px; }
  .avis-recap-note { font-size: 1.8rem; }
}
.testimonial-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.testimonial-counter {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  color: #8a83a0;
  font-weight: 500;
}
.testimonial-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  background: #d5cbe8;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  padding: 0;
}
.testimonial-dot.active { background: var(--theme-violet); transform: scale(1.25); }
.testimonials-carousel { position: relative; }

/* Flèches précédent / suivant (desktop) */
.testimonial-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #e6def4;
  background: #fff;
  color: var(--theme-violet-dark);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(var(--theme-violet-dark-rgb), 0.12);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial-prev { left: -10px; }
.testimonial-next { right: -10px; }
.testimonial-nav:hover {
  background: var(--theme-violet);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 24px rgba(var(--theme-violet-rgb), 0.32);
}
.testimonial-nav:focus-visible {
  outline: 3px solid rgba(var(--theme-violet-rgb), 0.45);
  outline-offset: 2px;
}

/* Animation d'entrée de l'avis actif : fondu + légère élévation, rejouée à chaque
   changement de slide (appliquée au wrapper .testimonial-slide pour ne pas entrer
   en conflit avec l'animation de défilement data-reveal des cartes) */
@keyframes testimonial-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.testimonial-slide.is-entering {
  animation: testimonial-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-slide.is-entering { animation: none; }
}

/* Mobile / tablette : les flèches disparaissent (balayage tactile + points suffisent) */
@media (max-width: 767.98px) {
  .testimonial-nav { display: none; }
}

@media (max-width: 575.98px) {
  
  #backToTop { width: 40px; height: 40px; right: 14px; bottom: 14px; }
}

/* ---------- Filtre alphabétique A–Z (page bienfaits) ----------
   Barre discrète au-dessus de la recherche : « Tous » + lettres A à Z.
   Lettres sans pierre désactivées, lettre active soulignée or. */
.alpha-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 4px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.alpha-btn {
  min-width: 30px;
  padding: 5px 2px 4px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.alpha-btn:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
.alpha-btn:disabled {
  color: rgba(255, 255, 255, 0.16);
  cursor: default;
}
.alpha-btn.is-active {
  color: var(--theme-gold);
  border-bottom-color: var(--theme-gold);
  background: rgba(var(--theme-gold-rgb), 0.10);
}
.alpha-btn:focus-visible {
  outline: 2px solid rgba(var(--theme-gold-rgb), 0.6);
  outline-offset: 2px;
}
/* ---------- Compteur de pierres (page bienfaits) ----------
   Total référencé ou « X sur Y » quand un filtre est actif. Discret,
   petites capitales, chiffres en or. */
.pierres-count {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
.pierres-count strong {
  color: var(--theme-gold);
  font-weight: 700;
}

/* « Tous » : pastille discrète détachée de l'alphabet */
.alpha-btn-all {
  min-width: 0;
  margin-right: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.7);
}
.alpha-btn-all.is-active {
  color: var(--theme-gold);
  border-color: rgba(var(--theme-gold-rgb), 0.55);
  background: rgba(var(--theme-gold-rgb), 0.14);
}
@media (max-width: 575.98px) {
  .alpha-bar { gap: 1px 3px; padding: 7px 8px; }
  .alpha-btn { min-width: 27px; font-size: 0.74rem; }
  .alpha-btn-all { margin-right: 4px; padding: 5px 10px; }
}
/* Desktop (≥ 992 px) : l'alphabet tient sur UNE SEULE ligne — les lettres se
   répartissent uniformément sur toute la largeur (« Tous » + A–Z alignés). */
@media (min-width: 992px) {
  .alpha-bar {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0 1px;
    padding: 8px 6px;
  }
  .alpha-btn {
    flex: 1 1 0;
    min-width: 0;
  }
  .alpha-btn-all {
    flex: 0 0 auto;
    margin-right: 6px;
  }
}

/* ---------- Filtre par agenda (pages agenda / événements) ----------
   Barre de pastilles discrète : « Tous » + un bouton par agenda source,
   chacun avec la pastille de couleur de son agenda. Actif = contour or. */
.agenda-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 26px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.agenda-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.agenda-filter-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10);
}

/* Filtres (page événements) : pastille violette des mois — même présentation
   que les pastilles de couleur des agendas. */
.agenda-filter-dot-violet {
  background: var(--theme-violet);
  box-shadow: 0 0 0 2px rgba(var(--theme-violet-rgb), 0.25);
}

/* Séparateur vertical entre groupes (ex. liste déroulante | mois) */
.agenda-filter-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 3px;
  flex: 0 0 auto;
}

/* Liste déroulante d'année (filtres événements) : même esprit que les pastilles
   d'agenda, chevron or personnalisé, options sur fond sombre */
.ym-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d4af37' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 7px 32px 7px 15px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.ym-select:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background-color: rgba(255, 255, 255, 0.10);
}
.ym-select:focus-visible {
  outline: 2px solid rgba(var(--theme-gold-rgb), 0.6);
  outline-offset: 2px;
}
.ym-select option {
  background: #14101f;
  color: #fff;
}

/* Grille des pastilles de mois (filtres événements) : 6 par ligne sur desktop,
   4 sur tablette, 2 sur mobile — le nombre de colonnes est adapté pour que les
   pastilles ne débordent jamais du conteneur (les noms longs comme « Septembre »
   + compteur dépassent ~150 px). */
.ym-pills {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(6, max-content);
  gap: 8px;
  justify-content: center;
}
@media (max-width: 991.98px) {
  .ym-pills {
    grid-template-columns: repeat(4, max-content);
  }
}
@media (max-width: 767.98px) {
  .ym-pills {
    grid-template-columns: repeat(2, max-content);
  }
  .ym-pills .agenda-filter-btn {
    padding: 6px 11px;
    font-size: 0.76rem;
  }
}
.agenda-filter-btn:hover:not(.is-active) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.07);
}
.agenda-filter-btn.is-active {
  color: var(--theme-gold);
  border-color: rgba(var(--theme-gold-rgb), 0.55);
  background: rgba(var(--theme-gold-rgb), 0.12);
  box-shadow: 0 0 0 1px rgba(var(--theme-gold-rgb), 0.25);
}
.agenda-filter-btn:focus-visible {
  outline: 2px solid rgba(var(--theme-gold-rgb), 0.6);
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .agenda-filter { gap: 6px; padding: 8px; margin-bottom: 20px; }
  .agenda-filter-btn { padding: 6px 12px; font-size: 0.76rem; }
}

/* ---------- Cartes événements colorées par agenda ----------
   Chaque carte reprend la couleur de son agenda source (variable --cal-color
   posée en inline par le JS) : liseré supérieur + léger voile en haut de carte,
   cohérent avec le calendrier et la légende. */
.event-card-accent {
  --cal-color: #7c5cbf;
  border-top: 4px solid var(--cal-color);
  position: relative;
  overflow: hidden;
}
/* Voile dégradé de la couleur d'agenda en haut de carte (fondit vers transparent).
   color-mix est supporté par les navigateurs récents ; sans lui, seul le liseré
   supérieur reste visible (dégradation propre). */
.event-card-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cal-color) 12%, transparent),
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.event-card-accent > * {
  position: relative;
  z-index: 1;
}

/* ---------- Page Agenda en fond sombre (thème bienfaits) ----------
   La section .bg-dark reçoit les composants du calendrier : on adapte les
   textes et cartes pour rester lisibles sur fond sombre (cohérence visuelle
   avec la page « Bienfaits et vertus des pierres »). */
.bg-dark .agenda-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-color: rgba(var(--theme-violet-rgb), 0.32);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.bg-dark .agenda-nav-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e9e4f7;
}
.bg-dark .agenda-nav-btn:hover, .bg-dark .agenda-nav-btn:focus {
  background: var(--theme-violet);
  border-color: var(--theme-violet);
  color: #fff;
}
.bg-dark .agenda-title {
  color: #fff;
}
.bg-dark .agenda-weekdays span {
  color: rgba(255, 255, 255, 0.55);
}
.bg-dark .agenda-day {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.9);
}
/* (règle .bg-dark .agenda-day.empty fusionnée plus bas avec box-shadow: none) */
.bg-dark .agenda-day .event-dot {
  background: var(--theme-gold);
}
.bg-dark .agenda-day.has-event {
  border-color: rgba(var(--theme-gold-rgb), 0.5);
}
.bg-dark .agenda-day.has-event:hover {
  background: rgba(var(--theme-violet-rgb), 0.25);
  border-color: var(--theme-gold);
  box-shadow: 0 4px 12px -4px rgba(var(--theme-gold-rgb), 0.4);
}
.bg-dark .agenda-day.today .day-num {
  color: var(--theme-gold);
}
.bg-dark .agenda-day.today {
  border-color: var(--theme-gold);
}
.bg-dark .agenda-day.selected {
  background: var(--theme-violet);
  border-color: var(--theme-violet);
}
.bg-dark .agenda-day.selected .event-dot {
  background: #fff;
}
.bg-dark .agenda-legend, .bg-dark .agenda-calendar-legend {
  color: rgba(255, 255, 255, 0.7);
}
/* Cohérence : la légende doit refléter les points du calendrier (or) */
.bg-dark .agenda-legend .legend-dot {
  background: var(--theme-gold);
}
.bg-dark .agenda-legend .legend-today-dot {
  border-color: var(--theme-gold);
}
.bg-dark .agenda-legend .legend-today {
  color: var(--theme-gold);
}
.bg-dark .agenda-calendar-legend {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.bg-dark .agenda-sidebar-title {
  color: #fff;
}
.bg-dark .agenda-on-demand-title {
  color: rgba(255, 255, 255, 0.45);
  border-top-color: rgba(255, 255, 255, 0.14);
}
.bg-dark .agenda-empty {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.6);
}
/* Bloc « invitation » en bas de page : carte translucide sur fond sombre */
.invitation-dark {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(var(--theme-violet-rgb), 0.32);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
/* Les cartes événement adoptent le MÊME fond que les cartes pierres de la
   page « Bienfaits » : dégradé violet translucide, liseré violet, coins
   arrondis 18px, ombre douce. S'applique partout où une section est sombre
   (page Agenda, Événements à venir, Événements passés). Le liseré supérieur
   coloré de l'agenda source (border-top 4px var(--cal-color)) est conservé
   par .event-card-accent. */
.bg-dark .event-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-color: rgba(var(--theme-violet-rgb), 0.32);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
/* Textes adaptés au fond sombre (même traitement que les cartes pierres) */
.bg-dark .event-card h3 {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(var(--theme-violet-rgb), 0.5);
}
.bg-dark .event-card p {
  color: rgba(255, 255, 255, 0.82);
}
.bg-dark .event-card .event-location {
  color: var(--theme-gold);
}
.bg-dark .event-card .event-time {
  color: #c9b3ef;
}
/* Badge « agenda source » : verre dépoli sombre + texte clair */
.bg-dark .event-card .event-calendar {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
}
/* Badge « compte à rebours » : adapté au fond sombre */
.bg-dark .event-card .countdown-badge {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.bg-dark .event-card .countdown-badge.soon {
  background: rgba(var(--theme-gold-rgb), 0.22);
  border-color: rgba(var(--theme-gold-rgb), 0.55);
  color: var(--theme-gold-light);
}
/* Hover : le liseré violet s'illumine comme les cartes pierres */
.bg-dark .event-card:hover {
  border-color: rgba(165, 110, 220, 0.6);
  box-shadow: 0 18px 40px rgba(var(--theme-violet-dark-rgb), 0.35);
}
/* Le liseré supérieur coloré de l'agenda source doit survivre au
   border-color générique de la carte (spécificité identique, ordre) */
.bg-dark .event-card.event-card-accent {
  border-top: 4px solid var(--cal-color);
}
/* Effet « flash » au clic sur un jour du calendrier : on rétablit la
   bordure rouge de surbrillance que le border-color générique écrasait,
   en préservant le liseré supérieur coloré de l'agenda source */
.bg-dark .event-card.flash {
  border-color: #dc3545;
  border-top-color: var(--cal-color, #dc3545);
}

/* Palette violet/or des cartes événements : variables partagées entre le
   CTA, le badge de date et le badge compte à rebours (DRY). */
.bg-dark .event-card {
  /* Dégradé principal : aliasé sur la variable globale du thème (source unique). */
  --grad-violet: var(--theme-gradient);
  --grad-violet-hover: linear-gradient(135deg, var(--theme-violet-card-hover), var(--theme-violet-card-hover-light));
  --border-or: rgba(var(--theme-gold-rgb), 0.45);
  --or: var(--theme-gold);
}

/* Boutons CTA « Je viens ! » (cartes événements) : alignés sur le thème
   violet/or du site (dégradé violet 4e2a84→7b3fa0, liseré or, reflet
   lumineux au survol). Remplace le bleu bootstrap par défaut. */
.event-card .event-cta {
  background: var(--grad-violet);
  border: 1px solid var(--border-or);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--theme-violet-dark-rgb), 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease,
              border-color 0.3s ease, background 0.3s ease;
}
.event-card .event-cta:hover, .event-card .event-cta:focus {
  background: var(--grad-violet-hover);
  border-color: var(--or);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--theme-gold-rgb), 0.35);
}
.event-card .event-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(var(--theme-violet-dark-rgb), 0.3);
}

/* Badge de date des cartes événements : aligné sur le thème violet/or
   (dégradé violet comme le CTA, liseré or, jour en doré). Remplace le
   rouge bootstrap par défaut sur les pages sombres (Agenda, à venir,
   passés). */
.bg-dark .event-badge {
  background: var(--grad-violet);
  border: 1px solid var(--border-or);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--theme-violet-dark-rgb), 0.3);
}
.bg-dark .event-badge .event-day {
  color: var(--or);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ---------- Calendrier « Liquid Glass » (inspiration iOS 26) ----------
   Une image de fond (thème événements) est placée derrière la carte ; un
   voile sombre violet garantit la lisibilité des textes, et chaque case du
   calendrier devient une pastille de « verre dépoli » (translucide + blur
   + liseré lumineux en haut). Sur mobile, on garde le même effet mais avec
   un blur léger pour la fluidité. */
.bg-dark .agenda-card {
  position: relative;
  overflow: hidden;
  /* L'image de fond est pilotée par --cal-bg (définie en JS selon le mois
     affiché) : une image saisonnière différente par mois, en verre dépoli. */
  background-image:
    linear-gradient(180deg, rgba(20, 11, 36, 0.55) 0%, rgba(20, 11, 36, 0.70) 100%),
    var(--cal-bg, url('../images/header-evenements-futurs.webp'));
  background-size: cover;
  background-position: center 35%;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Reflet « verre » : liseré lumineux en haut de la carte */
.bg-dark .agenda-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  z-index: 2;
}
/* Cases en verre dépoli : translucides + reflet (le blur est activé en
   desktop ≥768px via la media query ci-dessous, pour préserver la fluidité
   sur mobile où les 42 cases seraient trop coûteuses à flouter) */
.bg-dark .agenda-day {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.bg-dark .agenda-day.empty {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.bg-dark .agenda-day.has-event {
  border-color: rgba(var(--theme-gold-rgb), 0.45);
}
.bg-dark .agenda-day.has-event:hover {
  background: rgba(var(--theme-violet-rgb), 0.28);
  border-color: var(--theme-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 16px -6px rgba(var(--theme-gold-rgb), 0.45);
}
.bg-dark .agenda-day.today {
  border-color: rgba(var(--theme-gold-rgb), 0.8);
}
/* La couleur or du numéro du jour est gérée par la règle précédente ;
   ici on n'ajoute que l'ombre portée (sans toucher à color, pour ne pas
   entrer en conflit avec le cercle or + texte sombre du mode desktop). */
.bg-dark .agenda-day.today .day-num {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.bg-dark .agenda-day.selected {
  background: rgba(var(--theme-violet-rgb), 0.55);
  border-color: rgba(179, 157, 219, 0.9);
}
/* Boutons de navigation + « Aujourd'hui » : verre dépoli */
.bg-dark .agenda-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
}
.bg-dark .agenda-today-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
}
/* Jours de semaine + titre : ombre portée pour rester lisibles sur l'image */
.bg-dark .agenda-weekdays span {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.bg-dark .agenda-title {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.bg-dark .agenda-legend, .bg-dark .agenda-calendar-legend {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
/* Mini-événements : pastilles sombres translucides (lisibles sur l'image) */
.mini-event {
  background: rgba(16, 9, 30, 0.55);
  border-left: 3px solid var(--ev, var(--theme-gold));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.mini-event:hover {
  background: rgba(16, 9, 30, 0.7);
}

/* ---------- Calendrier « pro » desktop (page Agenda) ----------
   En ≥ 768px, chaque cellule devient spacieuse et affiche les
   mini-événements colorés de la journée (pastille d'agenda + titre
   tronqué) au lieu du simple point. Le numéro du jour est mis en
   évidence (cercle or pour aujourd'hui), les week-ends sont teintés,
   et un bouton « Aujourd'hui » apparaît dès qu'on quitte le mois
   courant. Sur mobile, on conserve le point simple, compact et lisible. */
.agenda-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.agenda-today-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #e9e4f7;
  border-radius: 999px;
  padding: 3px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
.agenda-today-btn:hover, .agenda-today-btn:focus {
  background: var(--theme-violet);
  border-color: var(--theme-violet);
  color: #fff;
}
/* Les mini-événements ne sont affichés qu'en desktop (mobile : point simple) */
.agenda-mini-events {
  display: none;
}

@media (min-width: 768px) {
  .bg-dark .agenda-day {
    aspect-ratio: auto;
    min-height: 96px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px 10px 10px;
    gap: 6px;
    border-radius: 10px;
  }
  .bg-dark .agenda-day.empty {
    min-height: 96px;
  }
  .bg-dark .agenda-day .day-num {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
  }
  .bg-dark .agenda-day.today .day-num {
    background: var(--theme-gold);
    color: #241a30;
    font-weight: 800;
    box-shadow: 0 0 0 3px rgba(var(--theme-gold-rgb), 0.22);
  }
  /* Le point simple est remplacé par les mini-événements en desktop */
  .bg-dark .agenda-day .event-dot {
    display: none;
  }
  .bg-dark .agenda-day {
    -webkit-backdrop-filter: blur(8px) saturate(1.25);
    backdrop-filter: blur(8px) saturate(1.25);
  }
  .bg-dark .agenda-nav-btn, .bg-dark .agenda-today-btn {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .bg-dark .agenda-day.selected {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .bg-dark .agenda-day.weekend {
    background: rgba(255, 255, 255, 0.06);
  }
  .bg-dark .agenda-day.has-event:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 8px 18px -6px rgba(var(--theme-gold-rgb), 0.35);
    box-shadow: 0 8px 18px -6px rgba(var(--theme-gold-rgb), 0.35);
  }
  .agenda-mini-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    overflow: hidden;
  }
  .mini-event {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-size: 10.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--ev, var(--theme-gold));
    border-radius: 4px;
    padding: 3px 6px;
    max-width: 100%;
    min-width: 0;
  }
  .mini-event:hover {
    background: rgba(255, 255, 255, 0.14);
  }
  /* Ligne 1 : heure de début, seule (jamais tronquée) — laisse tout l'espace
     de la ligne 2 au libellé */
  .mini-event-time-start {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: .02em;
    color: var(--ev, var(--theme-gold));
    white-space: nowrap;
  }
  /* Ligne 2 : heure de fin + titre (le titre prend la largeur restante) */
  .mini-event-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    width: 100%;
  }
  .mini-event-time-end {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: .02em;
    color: var(--ev, var(--theme-gold));
    white-space: nowrap;
  }
  /* Séparateur « – » entre l'heure de fin et le titre : discret mais visible */
  .mini-event-sep {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
    font-size: 9px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    padding: 0 2px;
    margin: 0 -1px;
  }
  /* Titre tronqué avec « … » quand il est trop long */
  .mini-event-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mini-more {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    padding-left: 4px;
  }
}


/* ============================================================
   TYPOGRAPHIE (surcharge de fin de cascade — À GARDER EN DERNIER)
   Ce fichier est chargé APRÈS style.css, donc toute règle DM Sans
   de ce fichier écrase le Playfair du bloc « TYPOGRAPHIE
   PROFESSIONNELLE » de style.css (même spécificité, ordre gagne).
   → Si vous ajoutez une règle font-family sur un TITRE ici,
     ajoutez aussi le sélecteur correspondant dans cette surcharge.
   NB : le font-weight reste piloté par style.css (600/700) — ne pas
   le redéclarer ici pour préserver la hiérarchie des titres.
   ============================================================ */
.pierre-card-name {
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif; }

/* ============================================================
   SECTION 5 — timeline.css : frise chronologique « À propos »
   ============================================================ */

/* ============================================================
   TIMELINE — page « À propos » (Mon histoire)
   Frise chronologique professionnelle et responsive.
   Desktop : année dans une colonne à gauche + ligne verticale.
   Mobile  : année en badge au-dessus + ligne à gauche.
   ============================================================ */
.timeline_area {
    position: relative;
    z-index: 1;
}
.single-timeline-area {
    position: relative;
    z-index: 1;
    padding-left: 180px;
}
@media only screen and (max-width: 991.98px) {
    .single-timeline-area {
        padding-left: 140px;
    }
}
@media only screen and (max-width: 575px) {
    .single-timeline-area {
        padding-left: 24px;
    }
}
.single-timeline-area .timeline-date {
    position: absolute;
    width: 180px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-right: 60px;
}
@media only screen and (max-width: 991.98px) {
    .single-timeline-area .timeline-date {
        width: 140px;
    }
}
.single-timeline-area .timeline-date::after {
    position: absolute;
    width: 3px;
    height: 100%;
    content: "";
    background-color: #ebebeb;
    top: 0;
    right: 30px;
    z-index: 1;
}
.single-timeline-area .timeline-date::before {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #dc3545;
    content: "";
    top: 50%;
    right: 26px;
    z-index: 5;
    margin-top: -5.5px;
}
.single-timeline-area .timeline-date p {
    margin-bottom: 0;
    color: #020710;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
}
.single-timeline-area .single-timeline-content {
    position: relative;
    z-index: 1;
    padding: 30px 30px 25px;
    border-radius: 12px;
    margin-bottom: 15px;
    margin-top: 15px;
    background-color: #fff;
    -webkit-box-shadow: 0 0.25rem 1rem 0 rgba(2, 7, 16, 0.10);
    box-shadow: 0 0.25rem 1rem 0 rgba(2, 7, 16, 0.10);
    border: 1px solid #ebebeb;
}
.single-timeline-area .single-timeline-content:hover {
    border-color: #dc3545;
}
@media only screen and (max-width: 575px) {
    .single-timeline-area .single-timeline-content {
        padding: 20px;
    }
}

/* ---- Version mobile (≤ 575px) : année en badge au-dessus ---- */
@media only screen and (max-width: 575px) {
    .single-timeline-area .timeline-date {
        position: static;
        width: auto;
        height: auto;
        display: block;
        padding-right: 0;
        margin-bottom: 14px;
    }
    .single-timeline-area .timeline-date::after {
        display: none;
    }
    .single-timeline-area .timeline-date::before {
        display: none;
    }
    .single-timeline-area .timeline-date p {
        display: inline-block;
        background-color: #dc3545;
        color: #fff;
        font-size: 12px;
        letter-spacing: 0.12em;
        padding: 4px 14px;
        border-radius: 30px;
    }
}
.single-timeline-area .single-timeline-content .timeline-icon {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    width: 30px;
    height: 30px;
    background-color: #dc3545;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 30px;
    flex: 0 0 30px;
    text-align: center;
    max-width: 30px;
    border-radius: 50%;
    margin-right: 15px;
}
.single-timeline-area .single-timeline-content .timeline-icon i {
    color: #ffffff;
    line-height: 30px;
}
.single-timeline-area .single-timeline-content .timeline-text h6 {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
.single-timeline-area .single-timeline-content .timeline-text p {
    font-size: 13px;
    margin-bottom: 0;
}
.single-timeline-area .single-timeline-content:hover .timeline-icon, .single-timeline-area .single-timeline-content:focus .timeline-icon {
    background-color: #020710;
}
.single-timeline-area .single-timeline-content:hover .timeline-text h6, .single-timeline-area .single-timeline-content:focus .timeline-text h6 {
    color: #dc3545;
}
/* ============================================================
   SECTION 6 — rdv.css : page « Prendre rendez-vous »
   ============================================================ */

/* ============================================================
   rdv.css — Page « Prendre rendez-vous »
   Thème sombre or/violet cohérent avec le reste du site.
   ============================================================ */

.rdv-body {
  background: #0b0b12;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
}

/* ---------- Étapes « comment ça marche » ---------- */
.rdv-steps { padding: 10px 0 34px; }
.rdv-step {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px 18px;
  height: 100%;
  text-align: center;
}
.rdv-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--theme-violet), var(--theme-violet-dark));
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(var(--theme-violet-dark-rgb), 0.4);
}
.rdv-step h3 { font-size: 1.05rem; color: #fff; font-weight: 700; margin-bottom: 6px; }
.rdv-step p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; margin: 0; }

/* ---------- Carte formulaire ---------- */
.rdv-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(var(--theme-violet-rgb), 0.35);
  border-radius: 18px;
  padding: 26px 24px;
  height: 100%;
}
.rdv-card-title {
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 4px;
}
.rdv-card-sub { color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; margin-bottom: 20px; }

/* ---- Page concours : titre — la partie « — x lots à gagner » passe
   sur la ligne du dessous en mobile ---- */
@media (max-width: 575.98px) {
  .co-title-line2 {
    display: block;
  }
}

/* ---- Page concours : zone de promotion des lots à gagner ---- */
.co-lots-promo {
  margin-top: 14px;
  margin-bottom: 18px;
}
.co-lots-title {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}
.co-carousel {
  position: relative;
}
.co-carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px;
}
.co-carousel-track::-webkit-scrollbar {
  display: none;
}
.co-carousel-track .co-lot-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 168px;
}
.co-lot-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.3);
  border-radius: 14px;
  padding: 8px;
  text-align: center;
}
/* Badge du rang du prix (1er prix, 2e prix…) posé sur la photo du lot */
.co-lot-prix-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1b1026;
  background: linear-gradient(135deg, #f4d488, #e0b45a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.co-lot-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.co-lot-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-gold-soft);
  font-size: 1.6rem;
}
.co-lot-label {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #fff;
  line-height: 1.25;
}
.co-carousel-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(var(--theme-gold-rgb), 0.55);
  background: rgba(10, 5, 22, 0.72);
  color: var(--theme-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.co-carousel-arrow:hover {
  background: rgba(var(--theme-gold-rgb), 0.25);
}
.co-carousel-prev { left: 6px; }
.co-carousel-next { right: 6px; }
@media (max-width: 575px) {
  .co-carousel-track .co-lot-card {
    width: 132px;
  }
  .co-carousel-arrow {
    width: 30px;
    height: 30px;
  }
}

.rdv-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-gold-soft);
  margin-bottom: 6px;
}
.rdv-input, .rdv-select, .rdv-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  padding: 11px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rdv-input::placeholder, .rdv-textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.rdv-input:focus, .rdv-select:focus, .rdv-textarea:focus {
  outline: none;
  border-color: var(--theme-gold);
  box-shadow: 0 0 0 3px rgba(var(--theme-gold-rgb), 0.18);
  background: rgba(255, 255, 255, 0.08);
}
.rdv-select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--theme-gold) 50%), linear-gradient(135deg, var(--theme-gold) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.rdv-select option { background: #160d26; color: #fff; }
.rdv-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }

/* ---------- Créneaux (chips radio) ---------- */
.rdv-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.rdv-slot { position: relative; }
.rdv-slot input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rdv-slot span {
  display: inline-block;
  min-width: 74px;
  text-align: center;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.rdv-slot input:focus-visible + span { outline: 2px solid rgba(var(--theme-gold-rgb), 0.7); outline-offset: 2px; }
.rdv-slot input:checked + span {
  background: rgba(var(--theme-gold-rgb), 0.18);
  border-color: var(--theme-gold);
  color: var(--theme-gold);
  box-shadow: 0 0 0 1px var(--theme-gold) inset;
}
.rdv-slot input:disabled + span {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}
.rdv-slots-empty {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
  padding: 6px 0;
}

/* ---------- Case RGPD + bouton ---------- */
.rdv-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  cursor: pointer;
}
.rdv-check input { margin-top: 3px; accent-color: var(--theme-violet); width: 18px; height: 18px; flex: 0 0 auto; }
.rdv-check a { color: var(--theme-gold); }

.rdv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--theme-violet), var(--theme-violet-dark));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  padding: 14px 20px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 8px 22px rgba(var(--theme-violet-dark-rgb), 0.45);
}
.rdv-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--theme-violet-dark-rgb), 0.55); }
.rdv-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.rdv-btn-gold { background: linear-gradient(135deg, var(--theme-gold), var(--theme-gold-deep)); color: #2b1d05; box-shadow: 0 8px 22px rgba(var(--theme-gold-rgb), 0.35); }
.rdv-btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: none; color: #fff; }

/* ---------- Panneau latéral (infos) ---------- */
.rdv-info {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 18px;
}
.rdv-info h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme-gold);
  margin-bottom: 12px;
}
.rdv-info ul { list-style: none; padding: 0; margin: 0; }
.rdv-info li { padding: 6px 0; color: rgba(255, 255, 255, 0.78); font-size: 0.94rem; display: flex; gap: 10px; }
.rdv-info li i { color: var(--theme-gold); width: 18px; text-align: center; flex: 0 0 auto; margin-top: 3px; }

/* ---------- Confirmation ---------- */
.rdv-confirm {
  display: none;
  background: linear-gradient(165deg, rgba(var(--theme-gold-rgb), 0.12), rgba(var(--theme-violet-rgb), 0.10));
  border: 1px solid rgba(var(--theme-gold-rgb), 0.4);
  border-radius: 18px;
  padding: 34px 24px;
  text-align: center;
  margin-bottom: 30px;
}
.rdv-confirm.show { display: block; }
.rdv-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(var(--theme-gold-rgb), 0.16);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.5);
  color: var(--theme-gold);
  font-size: 1.7rem;
  margin-bottom: 14px;
}
.rdv-confirm h2 { font-size: 1.35rem; color: #fff; font-weight: 700; }
.rdv-confirm .rdv-code {
  display: inline-block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--theme-gold);
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed rgba(var(--theme-gold-rgb), 0.6);
  border-radius: 12px;
  padding: 12px 26px;
  margin: 10px 0 6px;
}
.rdv-confirm p { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; max-width: 560px; margin: 8px auto 0; }

/* ---------- Gestion des rendez-vous ---------- */
.rdv-section-title {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.rdv-section-sub { text-align: center; color: rgba(255, 255, 255, 0.55); margin-bottom: 26px; }
.rdv-appt {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.rdv-appt-date { font-size: 1.05rem; font-weight: 700; color: #fff; }
.rdv-appt-date small { display: block; font-weight: 400; color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; }
.rdv-appt-presta { flex: 1 1 160px; color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; }
.rdv-appt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rdv-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rdv-badge-confirmé { background: rgba(113, 188, 66, 0.2); color: #a5e07f; border: 1px solid rgba(113, 188, 66, 0.45); }
.rdv-badge-en-attente { background: rgba(var(--theme-gold-rgb), 0.2); color: var(--theme-gold-light); border: 1px solid rgba(var(--theme-gold-rgb), 0.55); }
.rdv-badge-annulé { background: rgba(220, 53, 69, 0.18); color: #f0a0a8; border: 1px solid rgba(220, 53, 69, 0.45); }
.rdv-badge-terminé { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); }
.rdv-appt-info {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--theme-gold-light);
  background: rgba(var(--theme-gold-rgb), 0.08);
  border: 1px dashed rgba(var(--theme-gold-rgb), 0.35);
  border-radius: 10px;
  padding: 8px 12px;
}
/* Message personnalisé de l'administrateur (validation / refus) */
.rdv-admin-msg {
  margin: 12px 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(var(--theme-violet-rgb), 0.16);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.45);
  border-left: 4px solid var(--theme-gold);
  border-radius: 10px;
  padding: 10px 14px;
  white-space: pre-line;
}
.rdv-admin-msg-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-gold);
  margin-bottom: 4px;
}

/* Formulaire de modification inline */
.rdv-modify { display: none; width: 100%; border-top: 1px dashed rgba(255, 255, 255, 0.14); padding-top: 14px; margin-top: 4px; }
.rdv-modify.show { display: block; }
.rdv-modify .rdv-label { margin-top: 10px; }

/* Messages */
.rdv-msg {
  display: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.rdv-msg.show { display: block; }
.rdv-msg-error { background: rgba(220, 53, 69, 0.15); border: 1px solid rgba(220, 53, 69, 0.45); color: #f0a0a8; }
.rdv-msg-success { background: rgba(113, 188, 66, 0.13); border: 1px solid rgba(113, 188, 66, 0.45); color: #a5e07f; }

/* ---------- Bandeau CTA « Faire le quiz » (bienfaits.html) ---------- */
.quiz-cta-banner {
  background: rgba(43, 22, 63, 0.6);
  border: 1px solid rgba(177, 140, 217, 0.25);
  border-radius: 16px;
  padding: 28px 24px;
  color: #fff;
}
.quiz-cta-emoji { font-size: 2.2rem; display: block; margin-bottom: 6px; }
.quiz-cta-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  color: var(--theme-gold-light);
  margin-bottom: 8px;
}
.quiz-cta-text { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }

/* ---------- Quiz « Trouvez vos pierres » (quiz.html) ---------- */
.quiz-card {
  background: rgba(43, 22, 63, 0.6);
  border: 1px solid rgba(177, 140, 217, 0.25);
  border-radius: 16px;
  padding: 28px 24px;
  color: #fff;
}
.quiz-emoji { font-size: 2.6rem; display: block; margin-bottom: 8px; }
.quiz-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
  color: var(--theme-gold-light);
  margin-bottom: 10px;
}
.quiz-sub { color: rgba(255, 255, 255, 0.75); font-size: 1rem; line-height: 1.6; }
.quiz-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.quiz-note { color: rgba(255, 255, 255, 0.45); }

/* Barre de progression */
.quiz-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 14px;
}
.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--theme-violet), var(--theme-gold));
  border-radius: 99px;
  transition: width 0.3s ease;
}
.quiz-step { margin-bottom: 4px; }

/* Options de réponse */
.quiz-options { display: grid; gap: 10px; margin-top: 14px; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #fff;
  padding: 12px 16px;
  font-size: 1rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.quiz-option:hover {
  background: rgba(123, 63, 160, 0.35);
  border-color: var(--theme-lavande);
  transform: translateY(-1px);
}
.quiz-option:focus-visible { outline: 2px solid var(--theme-gold-light); outline-offset: 2px; }
.quiz-option.selected {
  background: rgba(123, 63, 160, 0.5);
  border-color: var(--theme-gold);
}
.quiz-option-emoji { font-size: 1.4rem; flex-shrink: 0; }
.quiz-option-label { flex: 1; }

/* Navigation */
.quiz-nav { display: flex; gap: 10px; align-items: center; }

/* Résultats */
.quiz-result-card { position: relative; }
.quiz-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--theme-violet), var(--theme-violet-deep));
  border: 1px solid var(--theme-gold);
  color: var(--theme-gold-light);
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.quiz-match { color: var(--theme-gold-light); font-weight: 600; margin-bottom: 8px; }
.quiz-excerpt { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; line-height: 1.55; }
.quiz-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.quiz-card-actions .btn { flex: 1; min-width: 120px; }
.quiz-card mark { background: rgba(212, 175, 55, 0.4); color: #fff; border-radius: 3px; padding: 0 2px; }

@media (max-width: 575.98px) {
  .quiz-card { padding: 22px 16px; }
  .quiz-title { font-size: 1.35rem; }
  .quiz-option { padding: 11px 12px; font-size: 0.95rem; }
}

/* ============================================================
   STYLES DE PAGES CONSOLIDÉS (ex-blocs <style> de public/*.html)
   Règles extraites des pages et centralisées ici pour que theme.css
   reste la feuille de style unique. Source : parrainage.html,
   espace-client.html, contact.html, 7-chakras.html, cooltoutou.html,
   mystique-cristal.html, chemin-de-vie.html.
   Déclarations inchangées ; les doublons EXACTS sont fusionnés
   (sélecteurs multiples) : .punch-list, .section-lead, bandeaux CTA,
   encadrés photo — et les classes quasi identiques partagent une règle
   commune (cartes .ck-card / .promo-avantage / .cv-avantage / .cv-bracelet).
   ============================================================ */

/* ---------- Espace client & Parrainage (fond sombre) ---------- */
.client-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 28px 26px;
  height: 100%;
}
.client-card h2 {
  color: var(--theme-gold);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 6px;
}
/* Cartes pleine largeur (hors rangée d'égalité de hauteur) : le height:100%
   global de .client-card (conçu pour les rangées de cartes égales, ex. espace
   client) fige la carte à la hauteur de son conteneur et les blocs suivants
   débordent SOUS le pied de page. À appliquer aux cartes autonomes. */
.client-card-auto {
  height: auto !important;
}
.client-card .lead-note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  margin-bottom: 20px;
}
/* Panel concours : rangées de lots avec photo (miniature + bouton caméra) */
.co-lot-thumb-wrap {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
}
.co-lot-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
/* Panel concours — table des gagnants : sur mobile, les boutons
   « Accepter » / « Refuser » passent en icônes seules (compactes). */
@media (max-width: 767.98px) {
  .co-btn-label {
    display: none;
  }
  /* Panel concours — formulaire (création/édition) : boutons d'action
     compacts sur mobile (« Enregistrer les modifications », « Annuler
     l'édition ») — le style global .btn (majuscules + letter-spacing) les
     rend trop gros sur petits écrans. L'info passe sur sa propre ligne. */
  #coCreateFormEl .btn {
    padding: 6px 13px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
  #coFormHint {
    flex-basis: 100%;
    margin-left: 0 !important;
  }
}
/* Panel concours — table des gagnants : en mobile (< 576 px), les lignes
   deviennent des cartes empilées (plus de scroll horizontal). */
@media (max-width: 575.98px) {
  #coManageBody .co-winners-table thead {
    display: none;
  }
  #coManageBody .co-winners-table, #coManageBody .co-winners-table tbody {
    display: block;
    width: 100%;
  }
  #coManageBody .co-winners-table tbody {
    display: grid;
    gap: 8px;
  }
  #coManageBody .co-winners-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "nom actions" "lot lot" "statut statut";
    align-items: center;
    gap: 4px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 0;
    background: rgba(0, 0, 0, 0.02);
  }
  #coManageBody .co-winners-table td {
    border: 0;
    padding: 0;
  }
  #coManageBody .co-winners-table td[data-label="Gagnant"] {
    grid-area: nom;
    font-size: 0.85rem;
  }
  #coManageBody .co-winners-table td[data-label="Lot"] {
    grid-area: lot;
    font-size: 0.78rem;
    color: #555;
  }
  #coManageBody .co-winners-table td[data-label="Lot"]::before {
    content: 'Lot : ';
    font-weight: 600;
    color: #6c757d;
  }
  #coManageBody .co-winners-table td[data-label="Lot"] span {
    max-width: none !important;
  }
  #coManageBody .co-winners-table td[data-label="Statut"] {
    grid-area: statut;
  }
  #coManageBody .co-winners-table td[data-label="Actions"] {
    grid-area: actions;
  }
}

.client-card .form-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 600;
}
/* !important : override du fond blanc forcé par .form-control
   (background:#fff !important) — sans lui, texte blanc sur fond blanc. */
.client-card .form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.client-card .form-control::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.client-card .form-control:focus {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: var(--theme-gold);
  box-shadow: 0 0 0 3px rgba(var(--theme-gold-rgb), 0.15);
  color: #fff;
}
.client-msg {
  min-height: 22px;
  font-size: 0.9rem;
  margin-top: 12px;
}
.client-msg.ok { color: #7fd88a; }
.client-msg.err { color: #ff8f8f; }

/* Fiche client */
.fiche-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 32px 30px;
}
.fiche-card .fiche-title {
  color: var(--theme-gold);
  font-weight: 700;
  letter-spacing: .02em;
}
.fiche-num {
  display: inline-block;
  background: rgba(var(--theme-gold-rgb), 0.15);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.45);
  color: var(--theme-gold);
  border-radius: 999px;
  padding: 5px 16px;
  font-weight: 700;
  letter-spacing: .06em;
}
.fiche-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.fiche-item .k {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 3px;
}
.fiche-item .v {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  word-break: break-word;
}

/* Mes rendez-vous & pré-inscriptions */
.mes-rdv-empty {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
  padding: 18px 0;
}
.mes-block-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--theme-gold);
  font-weight: 700;
  margin: 24px 0 10px;
}
.mes-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px 18px;
  margin-bottom: 12px;
}
.mes-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mes-item-title {
  font-weight: 600;
  color: #fff;
}
.mes-item-info {
  margin-top: 6px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}
.mes-item-foot {
  margin-top: 10px;
  text-align: right;
}
.mes-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.mes-badge-ok {
  background: rgba(74, 222, 128, 0.15);
  color: #7fd88a;
  border: 1px solid rgba(74, 222, 128, 0.4);
}
.mes-badge-wait {
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  border: 1px solid rgba(250, 204, 21, 0.35);
}
.mes-badge-no {
  background: rgba(248, 113, 113, 0.12);
  color: #ff9c9c;
  border: 1px solid rgba(248, 113, 113, 0.35);
}
.mes-badge-muted {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------- Contact ---------- */
#contact-section {
  background: linear-gradient(160deg, var(--theme-violet-dark) 0%, var(--theme-violet-deep) 100%);
}
#contact-section .section-title, #contact-section h2 {
  color: var(--theme-gold);
}
.contact-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 22px 20px;
}
.contact-panel .panel-title {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 12px;
}
#contact-section .form-control {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
#contact-section .form-control::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
#contact-section .form-control:focus {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: var(--theme-gold);
  box-shadow: 0 0 0 3px rgba(var(--theme-gold-rgb), 0.15);
  color: #fff;
}
/* Checkboxes : pastilles sombres, coche dorée */
#contact-section .form-check-input {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}
#contact-section .form-check-input:checked {
  background-color: var(--theme-gold);
  border-color: var(--theme-gold);
}
#contact-section .form-check-label {
  color: rgba(255, 255, 255, 0.9);
}
/* Carte réseaux sociaux : panneau sombre translucide */
#contact-section .social-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}
#contact-section .social-panel h2, #contact-section .social-panel h3, #contact-section .social-panel .h4 {
  color: var(--theme-gold);
}
#contact-section .social-panel .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ---------- Pages univers (7 Chakras / Chemin de vie / Nouveautés / Mystic Cristal) ---------- */
.ck-section, .cv-section, .promo-section, .mc-section { padding: 60px 0; }
.promo-section h2.title { margin-bottom: 10px; }

/* Sous-titre de section — lisible sur fond sombre (scopé aux pages qui le
   définissaient : 7 Chakras et Chemin de vie ; la variante Nouveautés
   .promo-section .section-lead ci-dessous garde son style propre). */
.ck-section .section-lead, .cv-section .section-lead {
  color: rgba(255, 255, 255, 0.85);
  max-width: 720px;
  margin: 0 auto 36px;
  font-size: 1.02rem;
  line-height: 1.7;
}
.promo-section .section-lead { color: rgba(255, 255, 255, 0.72); max-width: 720px; margin: 0 auto 36px; }

/* Liste punch — étoiles dorées ✦ (identique sur les 4 pages univers) */
.punch-list { list-style: none; padding: 0; margin: 0 0 22px; }
.punch-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  line-height: 1.5;
}
.punch-list li::before {
  content: '✦';
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--theme-gold);
  font-size: 1.1rem;
}
.punch-list strong { color: var(--theme-gold-light); }

/* Encadré visuel produit — anneau dégradé conique violet→or + halo lumineux
   (mêmes déclinaisons que .pierre-card-img img). */
.ck-photo, .cv-photo, .mc-logo, .promo-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--theme-violet-deep), var(--theme-violet-deep)) padding-box,
    conic-gradient(from 210deg, var(--theme-violet), var(--theme-gold-soft), var(--theme-gold), var(--theme-violet)) border-box;
  box-shadow:
    0 0 0 1px rgba(var(--theme-violet-rgb), 0.18),
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 0 16px rgba(var(--theme-violet-rgb), 0.14),
    0 0 16px rgba(var(--theme-gold-rgb), 0.20);
}
.ck-photo, .cv-photo { max-width: 520px; }
.mc-logo { max-width: 440px; }

/* Carte « univers » partagée — style identique aux cartes pierres
   (page bienfaits). Squelette COMMUN aux cartes avantage (7 Chakras
   .ck-card, Nouveautés .promo-avantage, Chemin de vie .cv-avantage)
   ET aux cartes bracelet (Chemin de vie .cv-bracelet) ; les différences
   réelles (fond, bordure, alignement, padding) restent en surcharges
   ci-dessous. */
.ck-card, .promo-avantage, .cv-avantage, .cv-bracelet {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.35s ease, border-color 0.35s ease;
}
.ck-card:hover, .promo-avantage:hover, .cv-avantage:hover, .cv-bracelet:hover {
  transform: translateY(-6px);
  border-color: rgba(165, 110, 220, 0.6);
  box-shadow: 0 18px 40px rgba(var(--theme-violet-dark-rgb), 0.35);
}
/* Cartes avantage (défaut) : fond dégradé translucide + bordure violette +
   texte centré. */
.ck-card, .promo-avantage, .cv-avantage {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(var(--theme-violet-rgb), 0.32);
  text-align: center;
}
/* Cartes bracelet : fond uni translucide + bordure dorée, sans padding
   (la photo remplit le cadre). */
.cv-bracelet {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.28);
  padding: 0;
}
.cv-bracelet:hover { border-color: rgba(var(--theme-gold-rgb), 0.6); }
/* Variantes padding : Nouveautés / Chemin de vie = enfants centrés + padding
   plus aéré ; 7 Chakras garde son padding d'origine. */
.promo-avantage, .cv-avantage {
  align-items: center;
  padding: 38px 22px 30px;
}
.ck-card { padding: 28px 22px 26px; }
/* Médaille circulaire façon photo de pierre : anneau conique violet→or + halo */
.promo-avantage-icon, .cv-avantage-icon {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--theme-violet-deep), var(--theme-violet-deep)) padding-box,
    conic-gradient(from 210deg, var(--theme-violet), var(--theme-gold-soft), var(--theme-gold), var(--theme-violet)) border-box;
  box-shadow:
    0 0 0 1px rgba(var(--theme-violet-rgb), 0.18),
    0 14px 28px rgba(0, 0, 0, 0.42),
    0 0 16px rgba(var(--theme-violet-rgb), 0.14),
    0 0 16px rgba(var(--theme-gold-rgb), 0.20);
  margin-bottom: 20px;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.45s ease;
}
.promo-avantage:hover .promo-avantage-icon, .cv-avantage:hover .cv-avantage-icon {
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px rgba(165, 110, 220, 0.50),
    0 16px 32px rgba(0, 0, 0, 0.50),
    0 0 32px rgba(var(--theme-gold-rgb), 0.45);
}
.promo-avantage h3, .cv-avantage h3 {
  font-family: 'DM Sans', sans-serif;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
  text-shadow: 0 2px 10px rgba(var(--theme-violet-rgb), 0.5);
}
.promo-avantage p, .cv-avantage p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}

/* Bandeau CTA final — partagé par les 4 pages univers */
.ck-cta-banner, .promo-cta-banner, .cv-cta-banner, .mc-coming {
  border-radius: 20px;
  background: var(--theme-gradient);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.45);
  padding: 48px 28px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30);
}
.ck-cta-banner h2, .promo-cta-banner h2, .cv-cta-banner h2, .mc-coming h2 {
  color: #fff;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 800;
  margin-bottom: 10px;
}
.ck-cta-banner p, .promo-cta-banner p, .cv-cta-banner p, .mc-coming p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 auto 24px;
}
.ck-note, .cv-note { font-size: 0.82rem; color: rgba(255, 255, 255, 0.72); margin-top: 14px; }
.promo-note { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); margin-top: 14px; }

/* Lisibilité : le .text-white-50 de Bootstrap (blanc 50 %) est trop faible
   sur fond sombre — renforcé UNIQUEMENT dans les sections sombres des pages
   concernées (7 Chakras, Chemin de vie) pour ne pas modifier les autres
   pages qui l'utilisent (footer, navbar, agenda…). */
.ck-section .text-white-50, .cv-section .text-white-50 {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ---------- Page 7 Chakras ---------- */
/* .ck-card (et son survol) : règle partagée avec .promo-avantage /
   .cv-avantage — voir « Carte avantage partagée » plus haut. */
/* Pastille colorée : couleur du chakra */
.ck-dot {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 16px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 10px 22px rgba(0, 0, 0, 0.35);
}
.ck-card h3 {
  font-family: 'DM Sans', sans-serif;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 2px;
}
.ck-sanskrit {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ck-punch {
  color: var(--theme-gold-light);
  font-weight: 700;
  font-size: 1rem;
  margin: 8px 0 10px;
}
.ck-card p { color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; line-height: 1.6; margin: 0 0 12px; }
.ck-stones-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 8px;
}
.ck-stones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.ck-stone {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.30);
  border-radius: 999px;
  padding: 4px 11px;
}

@media (max-width: 575.98px) {
  /* Boutons de la section intro centrés sur mobile (comme Chemin de vie) */
  .ck-actions { justify-content: center; }
}

/* ---------- Page Chemin de vie ---------- */
/* .cv-bracelet (et son survol) : squelette partagé avec les cartes avantage
   (.ck-card / .promo-avantage / .cv-avantage) — voir « Carte univers
   partagée » plus haut ; la bordure dorée et le padding 0 restent en
   surcharge. Les règles suivantes concernent le contenu de la carte. */
/* Emplacement photo : vide tant que l'artisane n'a pas ajouté la photo */
.cv-bracelet-photo {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--theme-violet-rgb), 0.22), rgba(255, 255, 255, 0.03) 55%, transparent 78%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border-bottom: 1px dashed rgba(var(--theme-gold-rgb), 0.45);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cv-bracelet-photo i { font-size: 2rem; color: rgba(var(--theme-gold-rgb), 0.55); }
/* Photos originales (fond conservé) : remplissage carré plein cadre. */
img.cv-bracelet-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  border-bottom: none;
}
.cv-bracelet-body { padding: 22px 20px 26px; text-align: center; }
.cv-bracelet-body h3 {
  font-family: 'DM Sans', sans-serif;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.cv-bracelet-body p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}
.cv-bracelet-tag {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-gold-light);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.4);
  border-radius: 999px;
  padding: 4px 12px;
}
@media (max-width: 575.98px) {
  /* Boutons « Calculer le mien » / « Découvrir les 7 chakras » : centrés
     sur mobile (sur desktop, alignés à gauche avec le texte de la colonne). */
  .cv-actions { justify-content: center; }
}

/* ---------- Page Nouveautés (Cool Toutou) ---------- */
/* Grille tailles & prix */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}
.pricing-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.28);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.pricing-card:hover { transform: translateY(-3px); border-color: rgba(var(--theme-gold-rgb), 0.6); }
.pricing-card .size { color: rgba(255, 255, 255, 0.85); font-weight: 600; font-size: 0.95rem; }
.pricing-card .price { color: var(--theme-gold-light); font-weight: 800; font-size: 1.45rem; margin-top: 4px; }
.pricing-card .price small { font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.65); }
.pricing-card.is-hot { border-color: rgba(var(--theme-gold-rgb), 0.75); background: rgba(var(--theme-gold-rgb), 0.10); }

/* Cordes colorées */
.cordes-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 10px; }
.corde {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.30);
  border-radius: 999px;
  padding: 8px 16px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  font-weight: 600;
}
.corde .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); }
.corde-fuchsia .dot { background: #e91e8c; }
.corde-bleu .dot { background: #2f6fd6; }
.corde-rouge .dot { background: #c83232; }
.corde-parme .dot { background: #9b7bd6; }
.corde-prune .dot { background: #5d2a63; }

/* ============================================================
   VUES ADMIN — login admin & page téléchargement ebook
   Styles extraits de views/login.ejs et views/success.ejs
   (ces pages chargent déjà theme.css). Les règles de niveau
   body sont scopées via une classe dédiée sur <body> pour ne
   pas toucher le site public.
   ============================================================ */

/* ---------- Login admin (views/login.ejs) ---------- */
/* Fond de page : dégradé violet sombre du thème (identique à la dominante
   sombre de la page « Bienfaits »). Scopé à la page de login. */
body.admin-login {
  background: linear-gradient(160deg, var(--theme-violet-deep) 0%, var(--theme-violet-dark) 45%, var(--theme-violet) 100%) fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;   /* repli : navigateurs sans 100dvh */
  min-height: 100dvh;  /* hauteur dynamique (barre d'URL, foldables) */
  position: relative;
}

/* Carte de connexion */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.95); /* Blanc légèrement transparent */
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  backdrop-filter: blur(5px); /* Effet de flou si supporté */
}

/* Style du token pour qu'il ressorte bien */
#token pre {
  word-break: break-all;
  background-color: #f8f9fa;
}

/* ---------- Page présentation ebook lithothérapie (views/access-pdf.ejs) ----------
   Page « Mon ebook lithothérapie » : hero dédié, chiffres clés, sommaire et
   formulaire — dans le langage visuel du site (violet/or, cartes arrondies).
   Scopée via body.ebook-page pour ne toucher que cette vue. */
/* Chiffres clés */
body.ebook-page .ebook-stats { margin-top: 10px; }
body.ebook-page .ebook-stat {
  height: 100%;
  padding: 26px 16px;
  background: linear-gradient(165deg, #ffffff, #fcfaff);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.18);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(var(--theme-violet-dark-rgb), 0.10);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
body.ebook-page .ebook-stat-n {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  line-height: 1;
  background: var(--theme-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.ebook-page .ebook-stat-l {
  font-size: 0.85rem;
  font-weight: 600;
  color: #5c5470;
  letter-spacing: 0.02em;
}

/* Sommaire : liste numérotée façon livre (mêmes tons que le guide PDF) */
body.ebook-page .ebook-toc {
  background: #fff;
  border: 1px solid rgba(var(--theme-violet-rgb), 0.18);
  border-radius: 18px;
  padding: 26px 30px;
  box-shadow: 0 10px 30px rgba(var(--theme-violet-dark-rgb), 0.08);
  column-count: 2;
  column-gap: 40px;
}
@media (max-width: 767.98px) {
  body.ebook-page .ebook-toc { column-count: 1; }
}
body.ebook-page .ebook-toc-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(var(--theme-violet-rgb), 0.22);
  break-inside: avoid;
}
body.ebook-page .ebook-toc-item:last-child { border-bottom: none; }
body.ebook-page .ebook-toc-n {
  font-weight: 700;
  color: var(--theme-gold);
  font-size: 0.95rem;
  min-width: 26px;
}
body.ebook-page .ebook-toc-t {
  font-weight: 600;
  color: var(--theme-violet-dark);
  font-size: 0.98rem;
}
body.ebook-page .ebook-toc-note {
  margin-top: 22px;
  font-size: 0.88rem;
  color: #6b6580;
}

/* Carte formulaire */
body.ebook-page .ebook-form-card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 20px;
  padding: 36px 34px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
}
body.ebook-page .ebook-form-title {
  font-size: 1.6rem;
  color: var(--theme-violet-dark);
  margin-bottom: 8px;
}
body.ebook-page .ebook-form-sub {
  color: #6b6580;
  margin-bottom: 22px;
}
body.ebook-page .ebook-form-card .form-label {
  display: block;
  text-align: left;
  font-weight: 600;
  color: var(--theme-violet-dark);
}
body.ebook-page .ebook-form-card .form-check-label a {
  text-decoration: underline;
}

/* ---------- Page téléchargement ebook (views/success.ejs) ---------- */
.message { padding: 10px; border-radius: 4px; margin-bottom: 20px; }
.success { background: #e8f5e9; color: green; }
.error { background: #ffebee; color: red; }

/* ============================================================
   PANNEAU D'ADMINISTRATION (views/partials/panel/head.ejs)
   Styles du panel admin (configuration du site, CRM, pierres…).
   Classes et ids spécifiques au panel : sans collision avec le
   site public. Les règles sur sélecteurs génériques (body,
   .form-control, .card-body…) sont scopées via body.admin-panel.
   ============================================================ */
body.admin-panel { background-color: #f6f7fb; }
.admin-header { background: var(--theme-gradient); }
/* Le h4 est ciblé par la règle legacy h1..h5 { color:#364d59 } de theme.css
   (spécificité d'élément > héritage de .text-white) → titre gris-bleu sur le
   bandeau. On force la couleur du thème (blanc) sur le titre du header. */
.admin-header h4 { color: #fff; }
.tab-link { font-weight: 600; }
.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; border: 2px solid #e6def4; background: #fff; }
/* Aperçu en rond avec anneau dégradé (même rendu que le site) */
.stone-avatar-preview {
  width: 110px; height: 110px; object-fit: cover; border-radius: 50%;
  border: 4px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              conic-gradient(from 210deg, var(--theme-violet), var(--theme-gold-soft), var(--theme-gold), var(--theme-violet)) border-box;
  box-shadow: 0 8px 18px rgba(var(--theme-violet-dark-rgb), 0.28);
}
.stone-row:hover { background-color: #f8f9ff; }
/* Produits (onglet Produits) : dans la cellule « Produit », le titre reste à
   gauche et le badge de statut est poussé à droite — il fait face à la
   vignette. La méta (collections / type) occupe la ligne du dessous. */
/* Produit fraîchement créé : fond doré + liseré à gauche, le temps de le
   repérer (classe retirée automatiquement au bout de 10 s). */
.boutique-row.is-nouveau td { background-color: #fff6d8; }
.boutique-row.is-nouveau td:first-child { box-shadow: inset 4px 0 0 var(--theme-gold); }
.boutique-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.boutique-name-text { min-width: 0; }
/* Ligne du dessous : méta (collections / type) à gauche, alerte stock à droite
   (« Stock faible · N », « Rupture », « Numérique »). Le badge ne se comprime
   jamais, la méta cède la place et passe à la ligne si besoin. */
/* Fiche produit (modale d'édition) : le statut commercial fait face au champ
   Stock, poussé à droite, un peu plus lisible que les pastilles de la liste.
   La hauteur de l'en-tête vaut celle d'un .form-label (1lh, repli 1.7em = la
   line-height du site) afin que le champ Stock reste aligné sur les autres
   champs de la même ligne. */
.ep-stock-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; min-height: 1.7em; margin-bottom: 0.5rem; }
/* Le badge de statut (« Précommande », ≈ 110 px) peut dépasser d'une étroite :
   il passe alors sur la ligne suivante au lieu de sortir du cadre. La hauteur
   reste celle d'un libellé (1.7em) quand tout tient, donc l'alignement avec les
   autres champs de la ligne est conservé. */
.ep-stock-head .badge { margin-left: auto; }
.ep-stock-head .form-label { margin-bottom: 0; }
.ep-statut-badge { font-size: 0.9rem; padding: 0.35em 0.7em; }
/* Checklist « prêt à publier » de la fiche produit : encadré discret, vert
   quand tout est prêt, ambre sinon ; la liste montre chaque critère coché ou
   manquant. */
.ep-checklist { border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 0.4rem 0.6rem; background: #f8f9fa; }
.ep-checklist.is-ready { border-color: #badbcc; background: #d1e7dd; }
.ep-checklist.is-incomplete { border-color: #ffe69c; background: #fff3cd; }
.ep-checklist-head { font-size: 0.88rem; margin-bottom: 0.15rem; }
.ep-checklist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 0.7rem; font-size: 0.85rem; }
.ep-check-item { white-space: nowrap; }
.ep-check-item.is-ok { color: #146c43; }
/* Chaque critère de la checklist est un bouton : un clic ouvre l'onglet de la
   fiche qui contient le champ concerné (voir renderChecklistFiche + le
   délégué sur #ep-checklist dans admin-boutique.js). Style « texte » pur :
   la couleur hérite de l'item (vert si coché, gris sinon). */
.ep-check-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ep-check-btn:hover { text-decoration: underline; }
/* Fiche produit en ONGLETS INTERNES (27/10/2026) : la fiche empilait ~10 blocs
   sur un unique défilement. 4 onglets (Identité — dont les photos · Prix & stock · Précommande ·
   Variantes · Photos) bornent chaque groupe de champs. La barre borde la carte
   (marges négatives = pleine largeur, comme le bord du .card-body) et devient
   COLLANTE sous l'en-tête en desktop (règles dans le bloc ≥ 992 px plus bas, 
   offset --ep-head-h mesuré en JS par majStickyFiche). */
#editProductPanel { position: relative; }
/* ============ FICHE PRODUIT : CHAMPS ET BOUTONS COMPACTS (27/10/2026) =======
   Le site public impose `.form-control { height: 55px }` et `.btn { padding:
   10px 20px }` (grandes cibles tactiles du site vitrine). Dans la fiche, chaque
   ligne de champ coûtait donc 90 px : c'était la PREMIÈRE cause de défilement de
   l'onglet Identité. Ici on revient à des champs d'environ 37 px et à des
   boutons de taille normale — la fiche est un formulaire dense, pas une page du
   site public. Les textarea reprennent leur hauteur naturelle (rows). */
#editProductPanel .form-control, #editProductPanel .form-select { height: auto; }
#editProductPanel .btn { padding: .35rem .8rem; letter-spacing: 0; font-size: .9rem; }
#editProductPanel .btn-sm { padding: .25rem .6rem; font-size: .82rem; }
.ep-nav {
  margin: 0 -1rem;
  padding: .25rem 1rem 0;
  background-color: #fff;
}
.ep-nav .nav-link {
  white-space: nowrap;
  font-size: .92rem;
  padding: .4rem .85rem;
}
/* Compteurs (gris : nombre de photos / de variantes) et alerte (rouge « ! » :
   au moins un champ de l'onglet reste à compléter) posés dans le libellé de
   chaque onglet. Le détail est en infobulle sur l'onglet (majAlerteOnglet). */
.ep-nav .nav-link .badge {
  margin-left: .35rem;
  vertical-align: middle;
  font-size: .7rem;
  font-weight: 600;
  padding: .32em .5em;
}
.ep-tab-content { padding-top: .25rem; }
/* Champ Collections (formulaire d'ajout + fiche produit) : liste déroulante à
   cases à cocher. Le bouton doit ressembler à un champ, pas au style global
   `.btn` (majuscules, lettres espacées à .2rem, pilule) : le résumé serait
   illisible et le libellé tronqué. Le menu est plafonné en hauteur et défile. */
.collection-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: #212529;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem; }
.collection-toggle:hover, .collection-toggle:focus, .collection-toggle:active, .collection-toggle.show {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #86b7fe; }
.collection-toggle .collection-summary {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }
/* Largeur posée par JS sur celle du champ (voir initCollectionPickers) : le menu
   étant en position fixe, un `width: 100%` se résolvait contre la FENÊTRE et non
   contre le champ — soit une liste pleine largeur sur téléphone. Le plafond
   ci-dessous garantit qu'elle ne déborde jamais de l'écran. */
.collection-menu { max-width: calc(100vw - 16px); max-height: 280px; overflow-y: auto; padding: 0.25rem 0; }
/* Chaque ligne est en flex : la case à cocher est un élément flex, donc sans le
   `margin-left: -1.5em` hérité de `.form-check` (pensé pour un padding de
   1.5em). Avec un padding plus faible, ce margin la faisait sortir du menu par
   la gauche : case invisible dès que le menu est étroit (mobile). */
.collection-menu .collection-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 0.75rem;
  min-height: 36px; }
.collection-menu .collection-item .form-check-input { margin-left: 0; float: none; flex: 0 0 auto; }
.collection-menu .collection-item .form-check-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Fiche produit : affichée en PAGE dans l'onglet Produits (plus une modale
   depuis le 27/10/2026) — l'ancienne règle d'ouverture de la modale sur la
   plage 768-991 px n'a donc plus d'objet et a été retirée. */
.boutique-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; row-gap: 2px; }
.boutique-sub-row .boutique-meta { flex: 1 1 auto; min-width: 0; }
.boutique-sub-row .badge { flex: 0 0 auto; }
.boutique-meta { display: block; color: #6c757d; }
/* Boutons Modifier / Supprimer de la liste produits : icônes seules, donc
   compacts. Le style global `.btn` (padding 10px 20px + lettres espacées à
   .2rem) les portait à 58×41 px : dans la colonne Actions (96 px) les deux ne
   tenaient pas sur une ligne et s'empilaient, ce qui doublait la hauteur de
   chaque ligne du tableau. */
.boutique-cell-actions { white-space: nowrap; }
.boutique-cell-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  font-size: 0.75rem;
  letter-spacing: 0;
}

/* ============ ONGLET PRODUITS — confort DESKTOP (27/10/2026) ============ */
/* 1. En-têtes cliquables : tri titre / prix / stock / mise à jour (3e clic
      revient à l'ordre du fichier). */
.boutique-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.boutique-th-sort:hover { background-color: #343a40; }
.boutique-th-sort[aria-sort="ascending"] i::before { content: "\f0de"; } /* fa-sort-up */
.boutique-th-sort[aria-sort="descending"] i::before { content: "\f0dd"; } /* fa-sort-down */
.boutique-th-sort[aria-sort="ascending"] i, .boutique-th-sort[aria-sort="descending"] i { color: #d4af37; }
/* 2. En-tête COLLANT + zone de défilement : sur ~180 lignes, les intitulés
      disparaissaient dès le premier scroll (et le tableau passait sous la
      navbar au défilement). */
/* 2. UN SEUL défilement vertical + ZÉRO défilement horizontal (≥ 992 px).
      Avant : `.table-responsive` avait son propre `max-height: 62vh` (2ᵉ barre
      de défilement sous celle de la page) et des largeurs fixes de colonnes
      (52+150+170+110+130 = 612 px) qui faisaient défiler le tableau EN
      HORIZONTAL dès que la carte rétrécissait (surtout en deux colonnes).
      Maintenant : la page est l'unique zone de défilement, le tableau est
      `table-layout: fixed` (100 % du conteneur, titre tronqué) et l'en-tête de
      colonnes reste collant sous la barre d'outils elle-même collante. */
@media (min-width: 992px) {
  #productsListCard .table-responsive { max-height: none; overflow: visible; }
  #productsListCard .table { table-layout: fixed; width: 100%; }
  #productsListCard > .card-header {
    position: sticky; top: 0; z-index: 4;
    background-color: #fff; border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
  }
  #productsListCard #produitsToolbar {
    position: sticky; top: var(--ph-h, 46px); z-index: 3;
    background-color: #fff; box-shadow: 0 1px 0 rgba(33, 37, 41, .08);
  }
  #productsListCard thead th {
    position: sticky; top: var(--stick-h, 140px); z-index: 2;
    background-color: #212529;
  }
  /* Cellules : le titre est tronqué (…) au lieu de pousser les colonnes, le
     prix peut revenir à la ligne, la date reste sur une ligne courte et les 4
     boutons d'action tiennent sur une seule rangée compacte. */
  .boutique-name-row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
  .boutique-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Prix : colonne ALIGNÉE À DROITE (chiffres comparables d'une ligne à l'autre),
     en-tête de colonne compris. La saisie en ligne hérite de l'alignement. */
  .boutique-cell-price { white-space: normal; text-align: right; }
  /* Le champ de prix est un `.form-control` (display: block) : `text-align` sur la
     cellule n'aligne QUE ses chiffres À L'INTÉRIEUR de sa boîte de 110 px, pas la
     boîte elle-même — le champ restait collé à gauche (63 px de vide à droite).
     `margin-left: auto` pousse la boîte à droite : les prix finissent tous sur le
     MÊME bord, et les mentions sous le prix (prix barré, « N var. ») suivent,
     alignées à droite. */
  #productsTableBody .boutique-inline-price { margin-left: auto; }
  #productsListCard thead th[data-sort="price"] { text-align: right; }
  .boutique-cell-stock { white-space: normal; }
  .boutique-cell-updated { white-space: nowrap; font-size: .78rem; color: #6c757d; }
  /* LIGNES ALTERNÉES (zébrures) : fond lavande très clair sur une ligne sur deux,
     pour suivre un œil sur 180 lignes. On passe par `--bs-table-bg-type` — le
     mécanisme du zébrage de Bootstrap 5.3 : la couleur est posée en calque
     (`box-shadow`) sur la cellule, donc le SURVOL (`--bs-table-bg-state`,
     prioritaire) continue de fonctionner. Aucune règle en mobile : sous 768 px
     la liste est en cartes (`.table-cards`), pas en tableau. */
  #productsTableBody > tr.boutique-row:nth-child(even) > * {
    --bs-table-bg-type: #f6f2fc;
  }
  /* Actions CENTRÉES, horizontalement ET verticalement, dans la ligne entière.
     ATTENTION : la cellule était en `display: flex`, ce qui lui fait PERDRE son
     statut de cellule de tableau — le navigateur l'enveloppe alors dans une
     cellule anonyme et la boîte flex (42 px) reste collée EN HAUT de la ligne :
     sur les articles à deux lignes (titre + badges), les boutons apparaissaient
     sur la PREMIÈRE ligne. On garde donc une vraie `table-cell` :
       - `text-align: center` → boutons (inline-block) centrés horizontalement ;
       - `vertical-align: middle` (via `.align-middle` du tableau) → centrés
         verticalement, la cellule épousant toute la hauteur de la ligne.
     Et l'en-tête « Actions » est centré au-dessus d'eux. */
  .boutique-cell-actions { text-align: center; white-space: nowrap; }
  #productsListCard thead th.boutique-th-actions { width: 18%; text-align: center; }
  .boutique-cell-actions .btn { padding: .2rem .35rem; font-size: .82rem; }
  /* Pied de formulaire COLLANT de la fiche : « Enregistrer » reste visible
     pendant tout le défilement du formulaire. */
  #editProductPanel .card-footer {
    position: sticky; bottom: 0; z-index: 3;
    background-color: #fff;
  }
  /* La fiche aussi défile : son en-tête (Retour + titre) et sa barre d'onglets
     restent COLLANTS, la barre se posant juste sous l'en-tête (offset mesuré :
     --ep-head-h). On peut donc changer d'onglet à tout moment, sans remonter
     le défilement de la fiche — même mécanique que la liste (en-tête + barre
     d'outils + th collants). */
  #editProductPanel > .card-header {
    position: sticky; top: 0; z-index: 5;
    background-color: #fff;
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
  }
  #editProductPanel .ep-nav {
    position: sticky; top: var(--ep-head-h, 58px); z-index: 4;
    box-shadow: 0 1px 0 rgba(33, 37, 41, .08);
  }
}
/* 3. En-tête du formulaire d'ajout : repliable (barre « Nouveau produit »). */
#addProductToggle { border: 0; width: 100%; text-align: left; cursor: pointer; box-shadow: none; }
#addProductToggle .fa-chevron-down { transition: transform .15s ease; }
#addProductToggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
/* 4. Édition EN LIGNE du prix et du stock dans la ligne. */
.boutique-inline-price, .boutique-inline-stock {
  max-width: 110px;
  min-width: 84px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.boutique-inline-price:focus, .boutique-inline-stock:focus { border-color: #7b3fa0; box-shadow: 0 0 0 .15rem rgba(123, 63, 160, .25); }
/* 5. Maître-détaile en DEUX COLONNES (≥ 1200 px) : la liste garde ses filtres
      pendant l'édition ; plus étroit, la fiche remplace la liste.

      AUCUN défilement INTERNE aux colonnes (choix du 28/10/2026) : les deux
      colonnes gardent leur hauteur NATURELLE — rien n'est plafonné, rien n'est
      figé — et c'est LA PAGE qui défile, comme sur le reste du site. Les
      en-têtes collants (barre d'outils et th de la liste, en-tête et onglets de
      la fiche) se posent sous le haut de la fenêtre pendant ce défilement,
      donc on garde les onglets et le bouton « Enregistrer » sous la main. */
@media (min-width: 1200px) {
  #produitsLayout { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
  /* Ratio INVERSÉ : la liste avait moins de largeur que la fiche (1fr / 1.25fr)
     alors que c'est elle qui a besoin de place (≈ 560 px pour ses 6 colonnes).
     La fiche, elle, tient dans ~480 px (champs col-md-6 / col-md-3). */
  #produitsLayout.has-fiche { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  /* `!important` INDISPENSABLE : `.mb-4` est une utility Bootstrap écrite en
     !important — sans cela la marge de 24 px déborde SOUS la grille (overflow
     visible). */
  #produitsLayout > .card { margin-bottom: 0 !important; }
  /* Colonne « Actions » ÉLARGIE quand la liste partage la largeur avec la fiche :
     18 % ne faisaient que 132 px pour 141 px de boutons — ils débordaient de
     13 px et ne pouvaient donc pas être centrés. 164 px = 148 px utiles. */
  #produitsLayout.has-fiche #productsListCard thead th.boutique-th-actions { width: 164px; }
}
/* Colonne « Stock » de la liste produits : en LECTURE SEULE sauf produit à
   variante unique hors précommande (saisie en ligne, Entrée/Échap) — la
   quantité d'un produit à variantes et le quota de précommande se règlent
   dans la fiche, ouverte par le crayon. Même gabarit qu'un champ pour
   garder la colonne alignée. */
.boutique-stock-total { display: inline-block; min-width: 90px; color: #495057; font-variant-numeric: tabular-nums; }
.boutique-stock-total small { color: #6c757d; font-size: 0.75rem; }
/* Étiquette « Qte : » devant le chiffre : utile en mobile seulement, où l'en-tête
   de colonne (« Stock ») n'est pas affiché. Dans le tableau desktop, la colonne
   est déjà nommée — l'étiquette y ferait doublon, donc elle y est masquée. */
.boutique-stock-label { display: none; }
/* Collections (onglet Catégories) : les boutons Renommer / Supprimer sont
   alignés À DROITE de la colonne Actions et restent sur une seule ligne.
   Le style global `.btn` (padding 10px 20px + lettres espacées .2rem) les
   rendait si larges qu'ils remplissaient toute la cellule — l'alignement à
   droite n'aurait donc rien changé et les deux boutons s'empilaient (ligne de
   tableau à 130 px). On les resserre, sans retirer leurs libellés. */
.boutique-col-actions { text-align: right; white-space: nowrap; }
.boutique-col-actions .btn { padding: 0.5rem 0.75rem; letter-spacing: 0.06rem; }
.status-ok { color: #166534; }
.status-ko { color: #991b1b; }
.code-block { background: #1e1e2e; color: #cdd6f4; padding: 12px 14px; border-radius: 8px; font-size: 0.85rem; }
.event-row { border-left: 4px solid #dc3545; }
.toast-host { position: fixed; top: 20px; right: 20px; z-index: 2000; min-width: 300px; }
/* (boutons btn-primary, onglets nav-pills, badges bg-primary et menu
    offcanvas actif : styles centralisés dans /css/theme.css) */
/* Badges CRM bleus → lavande du thème */
.badge-appel, .badge-email, .badge-seg-nouveau, .statut-en-cours { background-color: #f3e8ff; color: var(--theme-violet-dark); border: 1px solid #d8b4fe; }
.badge-demande { background-color: #fee2e2; color: #991b1b; padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; border: 1px solid #fca5a5; }
/* ===== Galeries photos événements passés ===== */
.gallery-photo-thumb { width: 90px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e4ea; background: #f3f4f6; }
.gallery-thumb-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.gallery-thumb-strip .gallery-photo-thumb { width: 64px; height: 48px; }
.gallery-move-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #e2e4ea; background: #fff; color: var(--theme-violet-dark); }
.gallery-move-btn:hover { background: #f3effa; }
.badge-envoi { background-color: #dcfce7; color: #166534; padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; border: 1px solid #86efac; }
.badge-rdv-confirme { background-color: #dcfce7; color: #166534; border: 1px solid #86efac; }
.badge-rdv-en-attente { background-color: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-rdv-annule { background-color: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-rdv-termine { background-color: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }

/* ===== CRM – Clients ===== */
.crm-kpi { border: none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.crm-kpi .kpi-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.crm-row:hover { background-color: #f8f9ff; }

/* Barre alpha claire (panel admin) — l'alpha-bar du thème est prévue pour fond sombre */
.crm-alpha-bar { background: #f8f9fc; border: 1px solid #e2e4ea; }
.crm-alpha-bar .alpha-btn { color: #6b7280; min-width: 28px; }
.crm-alpha-bar .alpha-btn:hover:not(:disabled) { color: var(--theme-violet-dark); background: rgba(var(--theme-violet-rgb), 0.08); }
.crm-alpha-bar .alpha-btn:disabled { color: #d1d5db; }
.crm-alpha-bar .alpha-btn.is-active { color: var(--theme-violet-dark); border-bottom-color: var(--theme-violet); background: rgba(var(--theme-violet-rgb), 0.10); }
.crm-alpha-bar .alpha-btn-all { border-color: #c9cdd6; color: #4b5563; }
.crm-name-btn { font-weight: 700; color: var(--theme-violet-dark); text-decoration: none; }
.crm-name-btn:hover { text-decoration: underline; color: var(--theme-violet); }
.crm-name-btn:focus-visible { outline: 2px solid rgba(var(--theme-violet-rgb), 0.5); outline-offset: 2px; border-radius: 4px; }

/* Surbrillance <mark> du mot recherché (panel clair) : or translucide,
   texte violet foncé — même esprit que .pierre-card mark du site public
   mais adapté au fond clair. */
.table-cards mark {
  background: rgba(var(--theme-gold-rgb), 0.35);
  color: var(--theme-violet-dark);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 700;
}
.badge-actions { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.78rem; font-weight: 600; }
.badge-achat { background-color: #dcfce7; color: #166534; border: 1px solid #86efac; }
.badge-appel { background-color: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.badge-email { background-color: #e0f2fe; color: #0c4a6e; border: 1px solid #7dd3fc; }
.badge-rdv { background-color: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-devis { background-color: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.badge-note { background-color: #fae8ff; color: #86198f; border: 1px solid #f0abfc; }
.badge-cdv { background-color: #fdf3d8; color: #7a5b00; border: 1px solid #e6c65c; }
.chemin-crm-pierres { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.chemin-crm-pierre { font-size: 0.8rem; }
.bg-purple { background-color: #9333ea !important; }
.chip-pref { display: inline-flex; align-items: center; gap: 6px; background: #f3e8ff; color: var(--theme-violet-dark); border: 1px solid #d8b4fe; border-radius: 999px; padding: 3px 12px; font-size: 0.82rem; font-weight: 600; margin: 2px; }
.timeline { position: relative; padding-left: 44px; }
.timeline::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: #e9e7ef; }
.timeline-item { position: relative; margin-bottom: 18px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-icon { position: absolute; left: -44px; top: 2px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.statut-terminé { background-color: #dcfce7; color: #166534; }
.statut-en-cours { background-color: #dbeafe; color: #1e40af; }
.statut-en-attente { background-color: #fef3c7; color: #92400e; }
.statut-annulé { background-color: #fee2e2; color: #991b1b; }

/* ===== Navigation par menu hamburger (toutes tailles d'écran) ===== */
/* Sur mobile/tablette, le menu hamburger reste l'unique navigation (inchangé). */
#configTabs { display: none; }

/* ===== Commandes : colonnes calibrées (panel admin, ≥768px) ===== */
/* N°/date/total/expédition insécables, total aligné à droite, e-mail client
   coupé proprement : chaque colonne prend la juste largeur de son contenu.
   Mobile (<768px) : cartes empilées — AUCUNE règle ci-dessous ne s'y applique. */
@media (min-width: 768px) {
  #pane-commandes .order-row > td:first-child, #pane-commandes .cell-date, #pane-commandes .cell-total, #pane-commandes .cell-expedition { white-space: nowrap; }
  #pane-commandes .cell-total { text-align: right; }
  #pane-commandes .cell-client small { overflow-wrap: anywhere; }
}

/* ===== Navigation DESKTOP à deux niveaux (panel admin, ≥992px) ===== */
/* Niveau 1 : rubriques (violet du thème) ; niveau 2 : onglets (or actif). */
@media (min-width: 992px) {
  #configTabs.admin-desktop-nav { display: block; }
  .admin-groups { gap: 6px; background: #fff; border: 1px solid #e7e2f2; border-radius: 14px; padding: 8px 10px; box-shadow: 0 1px 4px rgba(var(--theme-violet-dark-rgb), 0.08); }
  .admin-groups .admin-group { color: var(--theme-violet-dark); font-weight: 700; border-radius: 10px; padding: 8px 14px; }
  .admin-groups .admin-group:hover { background: #f3effa; color: var(--theme-violet-dark); }
  .admin-groups .admin-group.active { background: var(--theme-violet-dark); color: #fff; box-shadow: 0 2px 8px rgba(var(--theme-violet-dark-rgb), 0.35); }
  .admin-groups .admin-group.active i { color: var(--theme-gold); }
  .admin-subnav { background: linear-gradient(180deg, #faf8ff, #f3effa); border: 1px solid #e7e2f2; border-top: none; border-radius: 0 0 14px 14px; padding: 8px 10px; margin: -8px 8px 0; }
  .admin-subnav .nav { gap: 4px; }
  .admin-subnav .tab-link { color: #4a4460; font-size: 0.85rem; border-radius: 999px; padding: 5px 12px; }
  .admin-subnav .tab-link:hover { background: #fff; color: var(--theme-violet-dark); }
  .admin-subnav .tab-link.active { background: var(--theme-gold); color: #2b163f; font-weight: 700; }
}
@media (min-width: 768px) {
  #adminMenuOffcanvas { width: 320px; }
}

/* ===== Carte de fidélité (timbres) ===== */
.fid-card {
  background: var(--theme-gradient);
  border-radius: 16px;
  color: #fff;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(var(--theme-violet-dark-rgb), 0.35);
}
.fid-card::after { content: '✧'; position: absolute; right: -14px; bottom: -34px; font-size: 120px; line-height: 1; opacity: 0.10; transform: rotate(15deg); pointer-events: none; }
.fid-card .fid-brand { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--theme-gold-soft); font-weight: 700; }
.fid-card .fid-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.06em; word-break: break-all; }
.fid-card .fid-timbres { font-size: 2.3rem; font-weight: 800; line-height: 1; color: var(--theme-gold); }
.fid-progress { height: 10px; background: rgba(255,255,255,0.22); border-radius: 999px; overflow: hidden; }
.fid-progress > div { height: 100%; background: linear-gradient(90deg, var(--theme-gold-soft), var(--theme-gold)); border-radius: 999px; transition: width 0.4s ease; }
.fid-palier { border: 1px solid #e2e4ea; border-radius: 10px; }
.fid-palier.is-reached { border-color: #d8b4fe; background: #faf5ff; }
.fid-mvt-icon { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #fff; }
.fid-badge-carte { display: inline-flex; align-items: center; gap: 5px; background: #f3e8ff; color: var(--theme-violet-dark); border: 1px solid #d8b4fe; border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 700; }

/* ===== Segments clients ===== */
.badge-seg { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.78rem; font-weight: 600; }
.badge-seg-nouveau { background-color: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.badge-seg-fidele { background-color: #dcfce7; color: #166534; border: 1px solid #86efac; }
.badge-seg-vip { background-color: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-seg-relancer { background-color: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-seg-none { background-color: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }

/* ===== Sauvegardes ===== */
.backup-row:hover { background-color: #f8f9ff; }
.backup-file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; word-break: break-all; }

/* ===== Menu burger mobile (offcanvas) ===== */
.offcanvas-menu-title { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: #8a8fa3; font-weight: 700; margin: 1.15rem 0 0.35rem; }
.offcanvas-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: none; text-align: left; padding: 11px 12px; border-radius: 10px; color: #2d2a3a; font-weight: 600; transition: background-color 0.15s ease, color 0.15s ease; }
.offcanvas-menu-item:hover { background-color: #f3effa; color: var(--theme-violet-dark); }
/* (état actif .offcanvas-menu-item.active : style centralisé dans /css/theme.css) */
.offcanvas-menu-item i { width: 20px; text-align: center; color: var(--theme-violet-dark); }
.offcanvas-menu-item.active i { color: #fff; }
#adminMenuOffcanvas { width: 290px; }

/* ===== Optimisations mobile ===== */
/* Le toast ne doit jamais déborder de l'écran */
.toast-host { max-width: calc(100vw - 30px); }
/* Scroll fluide (inertie iOS) pour les tableaux */
body.admin-panel .table-responsive { -webkit-overflow-scrolling: touch; }

/* ===== Correctif scroll modale d'édition =====
   Structure : .modal-content > form > (header+body+footer).
   En Bootstrap, .modal-content est un flex-column et c'est
   .modal-body (enfant direct) qui doit porter overflow-y:auto.
   Le <form> intercalé casse ce layout : le body ne défile pas
   et le footer (Annuler/Enregistrer) sort de l'écran.
   display:contents retire la boîte du form : header, body et
   footer redeviennent enfants directs du flex. Fonctionne
   sur mobile comme sur desktop. */
#editStoneForm, #editTimelineForm {
  display: contents;
}
/* Même correctif pour les formulaires des modales CRM et des modales
   d'édition restantes (prestation, photos événement passé) */
#crmClientForm, #crmFicheForm, #crmActionForm, #crmNotesForm, #rdvModalForm, #editPrestationForm, #eventsPassesForm {
  display: contents;
}

@media (max-width: 767.98px) {
  /* En-tête compact */
  .admin-header { padding: 0.75rem 0; }
  .admin-header h4 { font-size: 1.05rem; }
  .admin-header .badge { font-size: 0.72rem; }
  .admin-header .container { gap: 0.5rem; }

  /* (les onglets classiques sont masqués globalement, voir CSS principal) */

  /* Filtres : pleine largeur, étirés, cible tactile confortable */
  #pane-demandes .btn-group { width: 100%; display: flex; }
  #pane-demandes .btn-group .btn { flex: 1; white-space: nowrap; padding: 0.6rem 0.25rem; font-size: 0.88rem; }
  #pane-demandes .card-header .btn { min-height: 42px; }

  /* Modale : boutons empilés en pleine largeur */
  #editStoneModal .modal-footer { flex-wrap: wrap; }
  #editStoneModal .modal-footer .btn { width: 100%; min-height: 46px; }

  /* Guide : le bloc de code défile horizontalement */
  .code-block { overflow-x: auto; white-space: pre; font-size: 0.72rem; padding: 10px 12px; }

  /* Champs de formulaire : 16px = pas de zoom auto iOS + cible tactile */
  body.admin-panel .form-control, body.admin-panel .form-select, body.admin-panel .form-check-input { font-size: 16px; }
  /* Champs MOINS HAUTS en mobile : la hauteur du site (55px, héritée du template)
     est disproportionnée sur téléphone. L'ancien `min-height: 46px` était sans
     effet — une `height` fixe l'emporte toujours sur un `min-height`. On rend
     donc la main au calcul naturel (padding + interligne = 38px) et on plafonne
     à 44px, la cible tactile recommandée : 55 → 44px (−20 %).
     `:not(textarea)` : les zones de texte gardent leur hauteur, elles suivent
     leur nombre de lignes. */
  body.admin-panel .form-control:not(textarea), body.admin-panel .form-select {
    height: auto;
    min-height: 44px; }
  /* Le bouton Collections ouvre la même ligne que les champs : il s'aligne sur
     leur hauteur en mobile (38px par défaut, la hauteur naturelle du bouton). */
  body.admin-panel .collection-toggle { min-height: 44px; }

  /* ===== Tableaux transformés en cartes empilées ===== */
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; }
  .table-cards tbody tr.table-card-row {
    border: 1px solid #e2e4ea;
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .table-cards td { border: none; padding: 3px 0; }

  /* Commandes : le n° de commande et les preuves (CGV / RGPD / e-mails) sur
     UNE MÊME LIGNE, preuves alignées à droite. Toutes les autres cellules
     occupent leur propre ligne (`flex: 1 1 100%`), ce qui préserve la mise en
     page verticale d'origine. Sans ce bloc, la colonne Preuves s'empilait sous
     le montant : la ligne « #1042 » restait seule à gauche, peu lisible. */
  /* La règle générale « .table-cards td { display: block } » ci-dessus est plus
     spécifique que `display: flex` sur la ligne : on redéclare explicitement
     `display: block` pour chaque cellule, et le flex de la LIGNE fait le reste. */
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) { display: flex; flex-wrap: wrap; align-items: flex-start; }
  /* Les cellules `d-none` (Client, Paiement, Expédition) sont masquées sur
     mobile mais conservaient `flex-basis: 100%` : en flex-wrap, une base de
     100% force un saut de ligne même si la cellule est en `display: none`
     visuellement — d'où les preuves repoussées deux lignes plus bas.
     `flex: none` + `display: none` les sort réellement du flux. */
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > td { display: block; flex: 1 1 100%; }
  /* --- COMMANDES : carte mobile en 4 lignes ------------------------------
     1) Nom du client .................... n° de commande
     2) CGV (avec statut) ............... date de la commande
     3) RGPD (avec statut) .............. montant
     4) E-mails envoyés (pleine largeur)
     [Bouton « Détail »]
     ---------------------------------------------------------------------
     Une GRILLE CSS remplace l'empilement. Point clé : `display: contents` sur
     la cellule « Preuves » fait remonter ses 3 blocs (CGV / RGPD / e-mails)
     au niveau de la ligne — sans quoi ils resteraient groupés dans une seule
     cellule, impossible à poser sur des lignes différentes.

     Les statuts Paiement et Expédition restent masqués ici : ils sont déjà
     dans la fiche « Détail », et les afficher surchargeait la ligne des
     e-mails. Bootstrap les masque via `d-none d-md-table-cell` (avec
     `!important`), rien à neutraliser pour eux. */
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) {
    display: grid;
    grid-template-columns: 1fr auto;   /* gauche flexible / droite ajustée */
    gap: 3px 10px;
    align-items: center;
  }
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > td { display: block; padding: 0; }

  /* Ligne 1 — client à gauche, n° de commande à droite (en gras). */
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > td:first-child {
    grid-row: 1; grid-column: 2; text-align: right; font-weight: 700; font-size: 1rem;
  }
  /* `.d-none` de Bootstrap est en `!important` : on le neutralise pour le client. */
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > td.cell-client {
    display: block !important; grid-row: 1; grid-column: 1;
    font-size: .95rem; line-height: 1.35; min-width: 0;
  }

  /* Ligne 2 — CGV à gauche, date à droite. */
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > .cell-date {
    grid-row: 2; grid-column: 2; text-align: right;
    font-size: .8rem; color: #6c757d; white-space: nowrap;
  }

  /* Ligne 3 — RGPD à gauche, montant à droite. `align-self` garantit que le
     montant est centré verticalement sur la ligne du badge RGPD. */
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > .cell-total {
    grid-row: 3; grid-column: 2; text-align: right;
    font-size: .95rem; white-space: nowrap; align-self: center;
  }

  /* Ligne 4 — e-mails envoyés, sur toute la largeur. */
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > .cell-preuves { display: contents; }
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > .cell-preuves > .pv-cgv {
    grid-row: 2; grid-column: 1; min-width: 0;
  }
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > .cell-preuves > .pv-rgpd {
    grid-row: 3; grid-column: 1; min-width: 0;
  }
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > .cell-preuves > .pv-mails {
    grid-row: 4; grid-column: 1 / -1; min-width: 0;
    overflow-wrap: anywhere; font-size: .74rem; color: #6c757d;
  }

  /* Bouton « Détail » : dernière ligne, pleine largeur. */
  .table-cards tbody tr.table-card-row:has(> .cell-preuves) > td:last-child {
    grid-row: 5; grid-column: 1 / -1; padding-top: 8px;
  }

  /* Pierre : vignette + nom côte à côte, actions en dessous */
  .stone-row { display: flex; flex-wrap: wrap; align-items: center; }
  .stone-cell-thumb { flex: 0 0 auto; margin-right: 12px; }
  .stone-cell-name { flex: 1 1 auto; font-size: 1rem; }
  .table-cards .stone-cell-actions { flex: 0 0 100%; display: flex; gap: 8px; border-top: 1px solid #eef0f4; margin-top: 10px; padding-top: 10px; }
  .table-cards .stone-cell-actions .btn { flex: 1; min-height: 44px; }

  /* Produit : GRILLE explicite plutôt que flex — le placement est déterministe,
     quel que soit la longueur du titre. 3 lignes :
       1) vignette | nom + statut (commercial, puis alerte stock en dessous) ;
       2) « Qte : N » À GAUCHE et le prix À DROITE, sur la même ligne ;
       3) actions.
      La 1re colonne est figée sur la largeur de la vignette (40 + 12 de marge)
      pour que le nom et la quantité restent alignés sur elle.
     NB : sélecteurs `.table-cards …` OBLIGATOIRES — `.table-cards tr/td`
     (0,1,1) est plus spécifique que `.boutique-row` (0,1,0) et impose
     `display: block` ; sans cela, chaque cellule repasse sur sa propre ligne
     et le badge se retrouve sous la vignette. */
  .table-cards .boutique-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
  }
  .table-cards .boutique-cell-thumb { grid-area: 1 / 1 / 2 / 2; margin-right: 12px; }
  .table-cards .boutique-cell-name { grid-area: 1 / 2 / 2 / 4; font-size: 1rem; }
  .table-cards .boutique-cell-stock { grid-area: 2 / 1 / 3 / 3; }
  .table-cards .boutique-cell-price { grid-area: 2 / 3 / 3 / 4; text-align: right; margin-top: 2px; }
  
  .table-cards .boutique-stock-label { display: inline; }
  /* Boutons alignés à droite (et non étirés sur toute la largeur) : la ligne
     n'occupe plus qu'une trentaine de pixels au lieu de 58. */
  .table-cards .boutique-cell-actions { grid-area: 3 / 1 / 4 / 4; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid #eef0f4; margin-top: 8px; padding-top: 8px; }
  .table-cards .boutique-cell-actions .btn { width: 36px; height: 36px; min-height: 0; flex: 0 0 auto; }

  /* Collections : libellé et boutons sur LA MÊME LIGNE — libellé aligné à GAUCHE,
     boutons collés À DROITE. Par défaut `.table-cards td { display: block; }`
     empilait les deux cellules (carte de 102 px de haut pour un simple titre).
     NB : sélecteur `.table-cards .collection-row …` (0,3,0) obligatoire pour
     battre `.table-cards td` (0,1,1) qui impose `display: block`. */
  .table-cards .collection-row { display: flex; align-items: center; gap: 10px; }
  .table-cards .collection-row .boutique-col-title { flex: 1 1 auto; min-width: 0; padding: 0; }
  .table-cards .collection-row .boutique-col-actions { flex: 0 0 auto; padding: 0; text-align: right; }

  /* Version & qualité — modules Node.js : carte compacte sur 2 lignes.
       1) module (gras) .................... état (À jour / Écart / Absent)
       2) [prod]  Déclaré ^x.y.z .......... Installé x.y.z
     Sans ce bloc, les 5 cellules s'empilaient sans libellé (thead masqué) :
     « express / ^5.2.1 / 5.2.1 / prod / À jour » illisible.
     `display: grid` sur la LIGNE (0,2,1) bat `.table-cards td { display:block }`
     (0,1,1) : les cellules restent des blocs, placés par la grille.
     3 colonnes : badge de type (auto) | Déclaré (flexible) | Installé (auto) ;
     la ligne 1 fait s'étendre le nom sur les deux premières. */
  .table-cards .ver-deps-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2px 8px;
    align-items: center;
  }
  .table-cards .ver-deps-row > td { padding: 0; }
  .table-cards .ver-deps-row .ver-dep-name { grid-column: 1 / 3; grid-row: 1; font-size: 1rem; }
  .table-cards .ver-deps-row .ver-dep-state { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
  .table-cards .ver-deps-row .ver-dep-kind { grid-column: 1; grid-row: 2; }
  .table-cards .ver-deps-row .ver-dep-declared { grid-column: 2; grid-row: 2; font-size: 0.8rem; }
  .table-cards .ver-deps-row .ver-dep-installed { grid-column: 3; grid-row: 2; text-align: right; font-size: 0.8rem; white-space: nowrap; }
  .table-cards .ver-deps-row .ver-dep-declared::before { content: "Déclaré "; color: #6b7280; }
  .table-cards .ver-deps-row .ver-dep-installed::before { content: "Installé "; color: #6b7280; }

  /* Demande : e-mail, date, type, puis actions alignées à droite */
  .demande-row { display: flex; flex-wrap: wrap; align-items: center; }
  .demande-cell-email { flex: 1 1 100%; font-size: 0.95rem; }
  .demande-cell-date { flex: 1 1 100%; }
  .demande-cell-type { flex: 1 1 100%; }
  .demande-cell-client { flex: 1 1 100%; }
  .table-cards .demande-cell-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; border-top: 1px solid #eef0f4; margin-top: 8px; padding-top: 8px; }
  .table-cards .demande-cell-actions .btn { min-height: 44px; min-width: 44px; }

  /* Client CRM : n° compte + nom, contact/achats dessous, actions alignées à droite */
  .crm-row { display: flex; flex-wrap: wrap; align-items: center; }
  .crm-cell-numero { display: none; } /* carte simplifiée : Nom + Prénom + N° Tél */
  .crm-cell-name { flex: 1 1 auto; font-size: 1.05rem; }
  .crm-cell-contact, .crm-cell-achats { flex: 1 1 100%; }
  .crm-name-btn { font-size: 1.05rem; }
  .crm-mobile-tel { margin-top: 2px; }
  .table-cards .crm-cell-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #eef0f4; margin-top: 8px; padding-top: 8px; }
  .table-cards .crm-cell-actions .btn { flex: 1; min-height: 44px; }

  /* Rendez-vous : même présentation en cartes que les autres tableaux */
  .rdv-row { display: flex; flex-wrap: wrap; align-items: center; }
  .rdv-row .rdv-cell-nom { flex: 1 1 auto; font-size: 1.05rem; }
  .rdv-row .rdv-cell-prestation, .rdv-row .rdv-cell-date, .rdv-row .rdv-cell-statut { flex: 1 1 100%; }
  .table-cards .rdv-cell-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #eef0f4; margin-top: 8px; padding-top: 8px; }
  .table-cards .rdv-cell-actions .btn-group { width: 100%; }
  .table-cards .rdv-cell-actions .btn { flex: 1; min-height: 44px; }

  /* Fiche client CRM : boutons d'action pleine largeur + COLLANTS en bas de
     la modale : le bouton « Enregistrer l'achat » reste visible à l'écran
     même quand le formulaire dépasse la hauteur du téléphone (sinon il est
     invisible sans défilement). */
  #crm-pane-actions .form-row-actions { display: flex; gap: 8px; }
  #crm-pane-actions .form-row-actions .btn { flex: 1; min-height: 46px; }
  #crm-pane-actions .form-row-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #fff;
    padding-top: 10px;
    border-top: 1px solid #eef0f4;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.06);
  }

  /* Cartes d'événements : contenu aéré */
  .event-row { padding: 0.9rem !important; }
  .event-row .btn { width: 100%; margin-top: 4px; min-height: 44px; }
}

@media (max-width: 575.98px) {
  /* Toast centré sur très petits écrans */
  .toast-host { top: 12px; right: 12px; left: 12px; min-width: 0; }
  .toast-host .toast { max-width: none; }

  .thumb { width: 44px; height: 44px; }
  body.admin-panel .card-body { padding: 0.75rem; }
  body.admin-panel .card-header { padding: 0.75rem; }
  body.admin-panel .card-header > span.fw-bold { font-size: 0.9rem; }

  /* Lignes « ajouter » et boutons pleine largeur */
  #addStoneForm .btn { min-height: 46px; }
}


/* ============================================================
   HÉRITAGE TEMPLATE — ftco-* & post-entry-1
   ============================================================
   Classes héritées du template HTML d'origine (nom de fichier
   inconnu, préfixe « ftco » = wrapper de la section hero, et
   « post-entry-1 » = cartes du blog). Elles sont conservées
   telles quelles car le markup des pages publiques les utilise
   encore :
   - .ftco-blocks-cover-1 : conteneur de la section hero (index,
     concours, espace client…) ; les règles ci-dessous calent les
     badges ebook et la largeur du bloc centré. La media query
     mobile gère le plein-écran + centrage vertical sous la navbar.
   - .post-entry-1 : cartes « créations » de la page d'accueil
     (zoom doux à l'hover, contenu sur fond blanc).
   ⚠ Ne PAS supprimer : ces classes sont référencées dans les
     pages HTML et vérifiées par check:css-dead.
   ============================================================ */

/* ---------- .ftco-blocks-cover-1 : hero accueil (index, aimants) ---------- */

.ftco-blocks-cover-1 .hero-ebook {
  max-width: 440px;              /* = stack 210 + gap 20 + energetix 210 : mêmes colonnes que les cartes */
  margin: 0 auto;
  text-align: center;
  display: grid !important;      /* 2 colonnes alignées sur les 2 colonnes de cartes */
  grid-template-columns: 210px 210px;
  column-gap: 20px !important;
  row-gap: 8px;
  justify-items: center;         /* chaque badge centré dans sa colonne, sous sa carte */
}
@media (max-width: 575.98px) {
  .ftco-blocks-cover-1 .hero-ebook {
    grid-template-columns: 1fr;  /* mobile : badges empilés pleine largeur */
    max-width: 100%;
  }
}
.hero-ebook .btn svg {
  vertical-align: -2px;   /* aligne l'icône livre avec le texte */
  margin-right: 4px;
}
.hero-ebook .btn {
  white-space: nowrap;              /* icône + texte sur une seule ligne */
  letter-spacing: 0.1rem;           /* réduit pour tenir dans la colonne de 210px */
  padding: 10px 14px;
}

.ftco-blocks-cover-1 .col-md-10.mx-auto {
  max-width: 860px;
}

/* Hero LCP mobile : header.webp fait 1600×674 (~105 Ko) alors que le hero
   s'affiche en ~390 px de large sur mobile — servir la source complète gâche
   de la bande passante et retarde le LCP. On bascule sous 576 px sur la
   variante header-mobile.webp (800 px, ~31 Ko, générée par
   scripts/gen-hero-mobile.js). `!important` requis : le background est posé
   en style inline dans les pages (classe hero-header = index, cgv, mentions,
   politique). Le <head> précharge la variante adaptée au viewport via
   `media` sur le <link rel="preload">. */


/* ---------- .post-entry-1 : cartes « créations » (page d'accueil) ---------- */



/* Zoom doux des créations */
.post-entry-1 { overflow: hidden; border-radius: 16px; }
.post-entry-1 img {
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.post-entry-1:hover img { transform: scale(1.06); }

/* ===================================================================== */
/* BOUTIQUE EN LIGNE (public/boutique.html — catalogue interne)            */
/* ===================================================================== */

.shop-toolbar {
  background: rgba(var(--theme-violet-dark-rgb), 0.45);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.25);
  border-radius: 14px;
  padding: 16px;
}

.shop-toolbar .input-group-text {
  background: rgba(var(--theme-violet-rgb), 0.15);
  border-color: rgba(var(--theme-violet-rgb), 0.3);
  color: var(--theme-lavande);
}

.shop-toolbar .form-control, .shop-toolbar .form-select {
  /* !important : override du fond blanc forcé par la règle globale
     .form-control { background:#fff !important } (héritée du template) */
  background: #1d1330 !important;
  border-color: rgba(var(--theme-violet-rgb), 0.3);
  color: #fff;
}

.shop-toolbar .form-control::placeholder { color: rgba(255, 255, 255, 0.45); }

.shop-count {
  color: var(--theme-lavande);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* --- Filtre prix : curseur double --- */
.shop-price-filter {
  padding: 2px 4px 0;
}
.shop-price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.shop-price-values {
  color: var(--theme-gold);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.shop-price-reset {
  background: rgba(var(--theme-violet-rgb), 0.15);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.3);
  color: var(--theme-lavande);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 0.75rem;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.shop-price-reset:hover {
  color: #fff;
  border-color: var(--theme-gold);
  background: rgba(var(--theme-violet-rgb), 0.3);
}
.shop-price-track {
  position: relative;
  height: 22px;
}
.shop-price-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 5px;
}
.shop-price-fill {
  position: absolute;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--theme-violet), var(--theme-gold));
  border-radius: 5px;
  pointer-events: none;
}
.shop-price-input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}
.shop-price-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--theme-gold-soft), var(--theme-gold) 55%, var(--theme-gold-deep));
  border: 2px solid #2b1d05;
  box-shadow: 0 0 0 3px rgba(var(--theme-gold-rgb), 0.35), 0 3px 8px rgba(0, 0, 0, 0.5);
  cursor: grab;
  transition: box-shadow 0.15s;
}
.shop-price-input::-webkit-slider-thumb:hover { box-shadow: 0 0 0 5px rgba(var(--theme-gold-rgb), 0.45), 0 3px 8px rgba(0, 0, 0, 0.5); }
.shop-price-input::-webkit-slider-thumb:active { cursor: grabbing; }
.shop-price-input::-moz-range-thumb {
  pointer-events: auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--theme-gold-soft), var(--theme-gold) 55%, var(--theme-gold-deep));
  border: 2px solid #2b1d05;
  box-shadow: 0 0 0 3px rgba(var(--theme-gold-rgb), 0.35), 0 3px 8px rgba(0, 0, 0, 0.5);
  cursor: grab;
}
.shop-price-extremes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  gap: 8px;
}
.shop-price-extreme {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.shop-price-count-range {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.btn-gold {
  background: linear-gradient(135deg, var(--theme-gold), var(--theme-gold-deep));
  color: #2b1d05;
  border: none;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(var(--theme-gold-rgb), 0.3);
}
.btn-gold:hover, .btn-gold:focus {
  background: linear-gradient(135deg, var(--theme-gold-soft), var(--theme-gold));
  color: #2b1d05;
}

.shop-badge {
  vertical-align: middle;
  margin-left: 2px;
  font-size: 0.75rem;
}
.shop-badge.shop-badge-pop { animation: shop-badge-pop 0.4s ease; }
@keyframes shop-badge-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* --- Filtres collections --- */
.shop-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.shop-cat-btn {
  background: rgba(var(--theme-violet-rgb), 0.12);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.35);
  color: var(--theme-lavande);
  border-radius: 50rem;
  padding: 6px 16px;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.shop-cat-btn:hover {
  background: rgba(var(--theme-violet-rgb), 0.28);
  color: #fff;
  border-color: var(--theme-violet-hover-light);
}
.shop-cat-btn.active {
  background: var(--theme-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(var(--theme-violet-rgb), 0.4);
}
/* Filtre « Bientôt disponible » (produits brouillons) : actif en or du
   thème, cohérent avec le badge .shop-badge-bientot sur les cartes. */
.shop-cat-btn-draft.active {
  background: linear-gradient(135deg, #b8912a, #d4af37);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}
.shop-cat-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.75;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50rem;
  padding: 1px 8px;
  vertical-align: 1px;
}

/* Liste déroulante des collections (dropdown Bootstrap, thème sombre) */
.shop-cat-dropdown { position: relative; }
.shop-cat-dropdown .dropdown-toggle::after {
  margin-left: 8px;
  vertical-align: 2px;
}
.shop-cat-dropdown-menu {
  background: #1d1330;
  border: 1px solid rgba(var(--theme-gold-rgb), 0.35);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.shop-cat-dropdown-menu .shop-cat-option {
  color: var(--theme-lavande);
  border-radius: 9px;
  padding: 7px 14px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: background 0.15s, color 0.15s;
}
.shop-cat-dropdown-menu .shop-cat-option:hover, .shop-cat-dropdown-menu .shop-cat-option:focus {
  background: rgba(var(--theme-violet-rgb), 0.28);
  color: #fff;
}
.shop-cat-dropdown-menu .shop-cat-option.active {
  background: linear-gradient(135deg, #b8912a, #d4af37);
  color: #fff;
  font-weight: 600;
}
.shop-cat-dropdown-menu .shop-cat-option .shop-cat-count {
  margin-left: 0;
  flex-shrink: 0;
  opacity: 0.8;
}
/* Mobile : le menu déroulant ne doit jamais déborder de l'écran */
@media (max-width: 576px) {
  .shop-cat-dropdown-menu {
    max-width: min(92vw, 340px);
  }
}

/* --- Grille produits --- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.shop-card {
  background: #1d1330;
  border: 1px solid rgba(var(--theme-violet-rgb), 0.22);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.shop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  border-color: rgba(var(--theme-violet-hover-light), 0.6);
}

.shop-card-media {
  position: relative;
}
.shop-card-img {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #120a20;
}
.shop-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.shop-card:hover .shop-card-img img { transform: scale(1.05); }

.shop-card-img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--theme-violet-rgb), 0.4);
  font-size: 2.2rem;
}

.shop-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.shop-card-type {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: var(--theme-gold);
  font-weight: 600;
}

.shop-card-title {
  font-size: 1.02rem;
  margin: 0;
  line-height: 1.3;
}
.shop-card-title, .shop-card-title a {
  color: #fff;
  text-decoration: none;
}
.shop-card-title a:hover { color: var(--theme-lavande); }

.shop-card-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--theme-gold-light);
}

.shop-card .shop-variant-select {
  background: #120a20;
  border-color: rgba(var(--theme-violet-rgb), 0.35);
  color: #fff;
  font-size: 0.85rem;
}

/* Bloc variantes : label + sélecteur, cohérent avec le thème violet/or */
.shop-variant-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shop-variant-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--theme-gold);
  font-weight: 600;
  opacity: 0.9;
}

/* Sélecteur de variantes REPLIABLE (cartes) : ligne « Variante ▾ » qui
   déplie/replie les chips au clic. La fiche produit garde les chips ouverts. */
.shop-variant-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.35);
  border-radius: 10px;
  color: var(--theme-lavande);
  padding: 6px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.shop-variant-toggle:hover, .shop-variant-toggle:focus {
  background: rgba(var(--theme-violet-rgb), 0.15);
  border-color: rgba(var(--theme-violet-hover-light), 0.6);
  color: #fff;
}
.shop-variant-toggle-label { display: inline-flex; align-items: center; }
.shop-variant-toggle .shop-variant-current { color: var(--theme-gold); font-weight: 600; }
.shop-variant-chevron {
  font-size: 0.7rem;
  color: var(--theme-gold);
  transition: transform 0.25s ease;
}
.shop-variant-block.is-open .shop-variant-chevron { transform: rotate(180deg); }
/* Collapse animé (grid-rows) : contenu masqué par défaut, déplié à l'ouverture */
.shop-variant-chips-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.shop-variant-block.is-open .shop-variant-chips-collapse { grid-template-rows: 1fr; }
.shop-variant-chips-inner {
  overflow: hidden;
  min-height: 0;
}
.shop-variant-chips-inner .shop-variant-chips {
  padding-top: 8px;
}

/* Sélecteur de variantes en boutons cliquables (chips radio) */
.shop-variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.shop-variant-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.8rem;
  border-radius: 50rem;
  border: 1px solid rgba(var(--theme-violet-hover-light-rgb), 0.45);
  background: rgba(var(--theme-violet-rgb), 0.12);
  color: var(--theme-lavande);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.shop-variant-chip:hover:not(:disabled) {
  background: rgba(var(--theme-violet-rgb), 0.28);
  color: #fff;
  border-color: var(--theme-violet-hover-light);
  transform: translateY(-1px);
}
.shop-variant-chip:active:not(:disabled) {
  transform: translateY(0);
}
.shop-variant-chip.is-active {
  background: var(--theme-gradient);
  color: #fff;
  border-color: var(--theme-gold);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(var(--theme-gold-rgb), 0.55), 0 3px 10px rgba(var(--theme-violet-rgb), 0.45);
}
.shop-variant-chip.is-active:hover {
  background: var(--theme-gradient-hover);
  border-color: var(--theme-gold);
}
.shop-variant-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.shop-chip-label {
  line-height: 1.2;
}
.shop-variant-chip:disabled .shop-chip-label {
  text-decoration: line-through;
}
.shop-chip-price {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--theme-gold-light);
  opacity: 0.95;
}
.shop-variant-chip.is-active .shop-chip-price {
  color: #ffe9a8;
}
.shop-chip-rupture {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f0a0a8;
  background: rgba(220, 53, 69, 0.18);
  border: 1px solid rgba(220, 53, 69, 0.4);
  border-radius: 50rem;
  padding: 1px 7px;
}
.shop-chip-check {
  display: none;
  font-size: 0.7rem;
  color: var(--theme-gold-light);
}
.shop-variant-chip.is-active .shop-chip-check {
  display: inline-flex;
}

.shop-card-action {
  margin-top: auto;
  padding-top: 6px;
}

/* Bouton « Ajouter » SUPERPOSÉ sur l'image (style quick-add) :
   par défaut : simple icône panier (pastille ronde) en bas de la photo.
   Au survol de l'icône : le bouton s'AGRANDIT et affiche « panier + Ajouter ».
   NB : la carte porte aussi .shop-add-btn (même spécificité, défini après) :
   on cible .shop-add-btn.shop-add-overlay pour gagner la cascade. */
.shop-add-btn.shop-add-overlay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(29, 19, 48, 0.9);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.6);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: width 0.25s ease, border-radius 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, padding 0.25s ease;
}
.shop-add-btn.shop-add-overlay .shop-add-overlay-text {
  display: none;
}
.shop-add-btn.shop-add-overlay:hover, .shop-add-btn.shop-add-overlay:focus {
  width: auto;
  height: 44px;
  padding: 0 16px;
  border-radius: 24px;
  background: rgba(43, 22, 63, 0.95);
  border-color: rgba(var(--theme-gold-rgb), 0.95);
  color: #ffe9a8;
}
.shop-add-btn.shop-add-overlay:hover .shop-add-overlay-text, .shop-add-btn.shop-add-overlay:focus .shop-add-overlay-text {
  display: inline;
}
.shop-add-btn.shop-add-overlay:disabled { opacity: 0.75; }

/* Le badge promo reste superposé en haut à gauche de la photo. */
.shop-card-media .shop-badge-promo {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* Badge « Bientôt disponible » (produits brouillons) : même
   positionnement superposé que le badge promo, en or du thème. Les brouillons
   n'ont ni prix ni bouton d'achat — voir public/js/boutique.js. */
.shop-card-media .shop-badge-bientot {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.shop-badge-bientot {
  display: inline-block;
  background: linear-gradient(135deg, #b8912a, #d4af37);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 50rem;
  padding: 3px 9px;
  vertical-align: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
/* Dans la fiche produit (modale), le badge est un peu plus grand. */
.shop-modal-pricing .shop-badge-bientot {
  font-size: 0.8rem;
  padding: 4px 12px;
}

/* ---------- Précommande ----------
   Produit publié et vendu AVANT sa disponibilité : badge dédié (les brouillons
   gardent « Bientôt disponible »), date d'expédition sous le prix, et rappel
   dans le panier / la fiche. Couleurs du thème uniquement. */
.shop-badge-precommande {
  display: inline-block;
  background: linear-gradient(135deg, var(--theme-violet), var(--theme-lavande));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.3;
  vertical-align: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
/* Sur la vignette : à droite, pour ne pas recouvrir le badge promo (à gauche). */
.shop-card-media .shop-badge-precommande {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 2;
}
.shop-card-precommande {
  color: var(--theme-gold-light);
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 4px;
}
.shop-modal-precommande {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: rgba(var(--theme-gold-rgb), 0.1);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.4);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 0;
  color: var(--theme-lavande);
  font-size: 0.82rem;
  line-height: 1.55;
}
.shop-modal-precommande strong { color: var(--theme-gold-light); }
.shop-cart-line-precommande {
  color: var(--theme-gold-light);
  font-size: 0.75rem;
  line-height: 1.4;
  margin-top: 2px;
}

.shop-add-btn {
  background: var(--theme-gradient);
  border: none;
  font-weight: 600;
}
.shop-add-btn:disabled { opacity: 0.75; }

.shop-soldout {
  font-size: 0.85rem;
  width: 100%;
  padding: 6px 10px;
}

.shop-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--theme-lavande);
}

.shop-empty { font-size: 1.05rem; }

/* --- Pagination --- */
.shop-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--theme-violet-rgb), 0.22);
}
.shop-page-btn {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--theme-violet-rgb), 0.35);
  background: rgba(var(--theme-violet-dark-rgb), 0.35);
  color: var(--theme-lavande);
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.shop-page-btn:hover:not(:disabled) {
  background: rgba(var(--theme-violet-rgb), 0.45);
  border-color: rgba(var(--theme-gold-rgb), 0.55);
  color: #fff;
  transform: translateY(-2px);
}
.shop-page-btn.is-active {
  background: var(--theme-gradient);
  border-color: rgba(var(--theme-gold-rgb), 0.6);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--theme-violet-dark-rgb), 0.45);
  cursor: default;
}
.shop-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.shop-page-nav { padding: 0 16px; }
.shop-page-ellipsis {
  color: var(--theme-lavande);
  opacity: 0.6;
  padding: 0 2px;
  user-select: none;
}
.shop-page-total {
  margin-left: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .shop-page-total { width: 100%; justify-content: center; text-align: center; margin-left: 0; }
}

/* --- Skeleton de chargement --- */
.shop-grid-loading { pointer-events: none; }
.shop-skeleton { min-height: 360px; }
.shop-skeleton-img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(110deg, #1d1330 8%, #2a1c46 18%, #1d1330 33%);
  background-size: 200% 100%;
  animation: shop-skeleton-shine 1.3s linear infinite;
}
.shop-skeleton-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(110deg, #241736 8%, #35234f 18%, #241736 33%);
  background-size: 200% 100%;
  animation: shop-skeleton-shine 1.3s linear infinite;
  margin-bottom: 12px;
}
.shop-skeleton-line.w-40 { width: 40%; }
.shop-skeleton-line.w-60 { width: 60%; }
.shop-skeleton-line.w-80 { width: 80%; }
@keyframes shop-skeleton-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Badge promo (prix barré + −X %) --- */
.shop-price-compare {
  color: var(--theme-lavande);
  text-decoration: line-through;
  opacity: 0.75;
  font-size: 0.92em;
  margin-right: 4px;
}
.shop-badge-promo {
  display: inline-block;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 50rem;
  padding: 3px 9px;
  vertical-align: 2px;
  box-shadow: 0 3px 10px rgba(192, 57, 43, 0.45);
}

/* --- Carte cliquable (fiche produit) --- */
.shop-card-img-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: #120a20;
  cursor: pointer;
}
.shop-card-title-btn {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.shop-card-title-btn:hover { color: var(--theme-gold); }

/* Contrôle de quantité compact (cartes) : pilule fine, petits boutons.
   NB : le bouton « Ajouter » est désormais superposé sur l'image
   (.shop-add-overlay, défini plus haut) — la quantité reste seule dans le
   corps de la carte. */
.shop-card .shop-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--theme-violet-rgb), 0.4);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
.shop-card .shop-qty-btn {
  background: none;
  border: none;
  color: var(--theme-lavande);
  padding: 0 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  height: 26px;
  transition: background 0.15s, color 0.15s;
}
.shop-card .shop-qty-btn:hover, .shop-card .shop-qty-btn:focus {
  background: rgba(var(--theme-violet-rgb), 0.3);
  color: #fff;
}
.shop-card .shop-qty-input {
  width: 30px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--theme-gold);
  text-align: center;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
  border-radius: 0;
}
.shop-card .shop-qty-input::-webkit-outer-spin-button, .shop-card .shop-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-card .shop-qty-input:focus { box-shadow: none; background: rgba(var(--theme-violet-rgb), 0.12); }
/* Contrôle de quantité GRAND (fiche produit) : pilule horizontale autonome.
   NB : ne dépend PAS du scope `.shop-card` — la fiche produit de la modale
   l'utilise hors des cartes de la grille. Avant, sans `display: flex` ici, les
   boutons et l'input s'empilaient verticalement (~110px au lieu de ~40px). */
.shop-qty-lg {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--theme-violet-rgb), 0.4);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  flex: 0 0 auto;
}
.shop-qty-lg .shop-qty-btn {
  background: none;
  border: none;
  color: var(--theme-lavande);
  padding: 0 13px;
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  transition: background 0.15s, color 0.15s;
}
.shop-qty-lg .shop-qty-btn:hover, .shop-qty-lg .shop-qty-btn:focus {
  background: rgba(var(--theme-violet-rgb), 0.3);
  color: #fff;
}
.shop-qty-lg .shop-qty-input {
  width: 52px;
  height: 38px;
  background: transparent;
  border: none;
  color: var(--theme-gold);
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
  border-radius: 0;
}

/* --- Modale fiche produit (dimensionnée compacte) --- */
.shop-product-modal-dialog {
  max-width: 640px;
}
.shop-product-modal-content {
  background: linear-gradient(160deg, var(--theme-violet-deep) 0%, var(--theme-violet-dark) 55%, var(--theme-violet) 100%);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.4);
  color: #f5e9ff;
  border-radius: 16px;
  overflow: hidden;
}
.shop-product-modal-header {
  /* Fond distinct (plus sombre que le corps) pour que le titre ressorte
     clairement, y compris sur mobile. */
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(var(--theme-gold-rgb), 0.3);
  padding: 0.9rem 1.25rem;
}
.shop-product-modal-title {
  font-family: 'Tangerine', serif;
  font-size: 1.9rem;
  color: var(--theme-gold);
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  line-height: 1.2;
}
.shop-product-modal-footer {
  border-top: 1px solid rgba(var(--theme-gold-rgb), 0.25);
  padding: 0.7rem 1.25rem;
}
.shop-modal-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
/* Les enfants de la grille ne doivent JAMAIS déborder de leur piste : sans
   min-width: 0, l'attribut width="900" de l'image force les items à ne pas
   rétrécir (min-width: auto) et la photo s'étire à ~1400 px sur mobile. */
.shop-modal-layout > * { min-width: 0; }
.shop-modal-media .shop-card-img-placeholder { min-height: 220px; }
.shop-modal-main {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--theme-violet-rgb), 0.3);
  background: #120a20;
}
.shop-modal-main img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* Indicateur « zoom » sur la photo principale de la fiche : loupe en bas à
   droite, le clic sur la photo ouvre le lightbox (data-lightbox). */
.shop-modal-main { position: relative; }
.shop-modal-zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(18, 10, 32, 0.85);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.5);
  color: var(--theme-gold);
  font-size: 14px;
  pointer-events: none; /* le clic traverse vers l'image (data-lightbox) */
  z-index: 2;
}
.shop-modal-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.shop-modal-thumb {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid rgba(var(--theme-violet-rgb), 0.35);
  border-radius: 8px;
  overflow: hidden;
  background: #120a20;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.shop-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-modal-thumb:hover { transform: translateY(-2px); }
.shop-modal-thumb.is-active {
  border-color: var(--theme-gold);
  box-shadow: 0 0 0 2px rgba(var(--theme-gold-rgb), 0.35);
}
.shop-modal-title {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 4px;
}
.shop-modal-pricing { margin: 4px 0 10px; font-size: 1.05rem; }
.shop-modal-price { color: var(--theme-gold); font-weight: 700; font-size: 1.15rem; }
.shop-modal-desc {
  color: var(--theme-lavande);
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 10px 0;
}
.shop-modal-desc p { margin-bottom: 6px; }
.shop-modal-buy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  /* Le libellé de stock (« En stock » / « Plus que 2 en stock ») partage la
     rangée avec le groupe « - quantité + » et le bouton « Ajouter » : on
     l'enveloppe toujours sur une seconde rangée, SOUS les boutons — à
     l'identique de la présentation mobile. */
  flex-wrap: wrap;
}
.shop-modal-buy .shop-modal-add-btn { flex: 1; }
.shop-modal-note {
  color: var(--theme-lavande);
  font-size: 0.75rem;
  margin: 12px 0 2px;
}
/* Libellé de stock (« En stock » / « Plus que 2 en stock ») : la classe
   Bootstrap `text-muted` (#212529 à 75 %) était presque illisible sur le
   dégradé violet de la fiche (`.shop-product-modal-content`). On passe en or
   clair : ≥ 5,7:1 sur TOUS les arrêts du dégradé (#2b163f → #4e2a84 → #7b3fa0)
   et légèrement distinct du blanc des titres.
   Pleine largeur → il se place toujours sous la rangée quantité/Ajouter.
   `:empty` : pas de libellé (stock illimité, e-books) → aucun rang vide. */
#shopProductModal .shop-modal-stock {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 2px;
  color: var(--theme-gold-light);
  font-weight: 600;
}
#shopProductModal .shop-modal-stock:empty { display: none; }
@media (max-width: 767.98px) {
  .shop-modal-layout { grid-template-columns: 1fr; gap: 12px; }
  /* Sur mobile : titre de la modale plus grand et bien détaché du fond. */
  .shop-product-modal-title {
    font-size: 2rem;
    color: #f5e9ff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  }

  /* --- Correctif mobile (iOS / petits écrans) ---
     La combinaison Bootstrap `modal-dialog-centered` + `modal-dialog-scrollable`
     fait sortir le haut de la modale (titre) hors de l'écran quand le contenu
     est trop haut : le centrage (`align-items: center`) déborde symétriquement
     en haut et en bas, et sur iOS le haut n'est pas atteignable au scroll.
     On repasse en « feuille » pleine hauteur alignée en haut, avec le corps
     (`modal-body`) qui défile à l'intérieur — le titre et le pied restent
     toujours visibles. `100dvh` = hauteur dynamique du viewport (barre d'URL
     iOS incluse), avec repli `100%` pour les anciens navigateurs. */
  #shopProductModal .modal-dialog, #shopCartModal .modal-dialog {
    margin: 0;
    max-width: 100%;
    width: 100%;
    /* La modale démarre SOUS la barre fixe mobile (--mobile-navbar-h, mesurée
       par navbar.js) : le wrapper .site-navbar (z-index 1999) recouvrirait
       sinon le titre et le haut de la photo de la fiche produit. */
    top: var(--mobile-navbar-h, 114px);
    height: calc(100% - var(--mobile-navbar-h, 114px));
    min-height: calc(100% - var(--mobile-navbar-h, 114px));
    height: calc(100dvh - var(--mobile-navbar-h, 114px));
    min-height: calc(100dvh - var(--mobile-navbar-h, 114px));
    display: flex;
    align-items: stretch;
  }
  #shopProductModal .modal-content, #shopCartModal .modal-content {
    max-height: 100%;
    border-radius: 0;
  }

  /* --- Compaction mobile : l'essentiel tient à l'écran sans scroller ---
     Photo plus petite (32vh), vignettes compactes, paddings resserrés,
     variantes en une seule rangée défilable et description longue clampée. */
  #shopProductModal .modal-body {
    padding: 12px 16px 16px;
  }
  #shopProductModal .shop-modal-layout { gap: 10px; }
  /* Photo nettement plus petite en mobile : 150 px max (au lieu de 230).
     `min(22dvh, 150px)` : s'adapte aussi quand la barre d'URL Safari est
     visible (le viewport réel est ~660-720 px, pas les 844 px nominaux). */
  /* Photo en vedette : PLEINE LARGEUR (aucun fond noir à gauche/droite) avec
     hauteur maîtrisée — toute la fiche (photo + infos) tient AU-DESSUS du
     bouton « Fermer » du pied de modale et sous la navbar. */
  #shopProductModal .shop-modal-main img {
    aspect-ratio: auto;
    width: 100%;
    height: min(30vh, 220px);
    min-height: 150px;
    object-fit: cover;
  }
  #shopProductModal .shop-modal-thumb { width: 40px; height: 40px; }
  #shopProductModal .shop-modal-thumbs { gap: 6px; margin-top: 8px; }
  #shopProductModal .shop-modal-title { font-size: 1.1rem; margin-bottom: 3px; }
  #shopProductModal .shop-modal-pricing { margin: 3px 0 8px; font-size: 1.05rem; }
  #shopProductModal .shop-modal-desc {
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 10px 0;
  }
  #shopProductModal .shop-modal-buy { margin-top: 4px; }
  /* Le passage à la ligne du libellé de stock est désormais la règle à toutes
     les largeurs (voir règle de base `.shop-modal-buy`). */
  #shopProductModal .shop-qty-lg .shop-qty-btn { padding: 0 11px; font-size: 0.85rem; }
  #shopProductModal .shop-qty-lg .shop-qty-input { width: 44px; font-size: 0.95rem; }
  #shopProductModal .shop-modal-add-btn {
    font-size: 0.85rem;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
  }
  #shopProductModal .shop-modal-note { font-size: 0.7rem; margin: 10px 0 2px; }
  /* Variantes : une seule rangée défilable horizontalement — évite les
     multiples lignes enveloppées qui dépassent l'écran (orgonites…). */
  #shopProductModal .shop-variant-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--theme-gold-rgb), 0.5) rgba(255, 255, 255, 0.06);
  }
  #shopProductModal .shop-variant-chips::-webkit-scrollbar { height: 4px; }
  #shopProductModal .shop-variant-chips::-webkit-scrollbar-thumb {
    background: rgba(var(--theme-gold-rgb), 0.5);
    border-radius: 4px;
  }
  #shopProductModal .shop-variant-chip {
    padding: 4px 10px;
    font-size: 0.74rem;
    white-space: nowrap;
  }
  /* Description longue : clampée à 4 lignes, dépliée via le bouton JS. */
  .shop-modal-desc.shop-modal-desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .shop-desc-toggle {
    display: inline-block;
    background: none;
    border: none;
    color: var(--theme-gold);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: underline;
    padding: 0;
    margin: -4px 0 8px;
    cursor: pointer;
  }
  .shop-desc-toggle:hover { color: #ffe9a8; }
}

/* --- Petit mobile (< 576px, ex. iPhone SE) : resserrage supplémentaire pour
   que la fiche tienne à l'écran sans scroller même sur les plus petits écrans. */
@media (max-width: 575.98px) {
  #shopProductModal .modal-body {
    padding: 5px 12px 8px;
  }
  #shopProductModal .shop-modal-main img {
    height: min(25vh, 180px);
    min-height: 130px;
  }
  #shopProductModal .shop-modal-thumb { width: 36px; height: 36px; }
  #shopProductModal .shop-modal-thumbs { gap: 5px; margin-top: 5px; }
  #shopProductModal .shop-modal-title { font-size: 1.05rem; margin-bottom: 3px; }
  #shopProductModal .shop-card-type { font-size: 0.75rem; }
  #shopProductModal .shop-modal-pricing { margin: 2px 0 5px; font-size: 1.05rem; }
  /* Sur petit écran la description est clampée à 3 lignes (4 sur tablette) :
     le bouton « Voir la description complète » reste disponible. */
  #shopProductModal .shop-modal-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 6px 0;
  }
  #shopProductModal .shop-modal-note { font-size: 0.72rem; margin: 8px 0 3px; }
  #shopProductModal .shop-modal-add-btn { font-size: 0.88rem; padding: 0.45rem 0.8rem; }
  #shopProductModal .shop-modal-desc.shop-modal-desc-clamp {
    -webkit-line-clamp: 3;
  }
  #shopProductModal .shop-desc-toggle { margin: -2px 0 6px; }
  #shopProductModal .shop-qty-lg .shop-qty-btn { padding: 0 10px; }
  #shopProductModal .shop-qty-lg .shop-qty-input { width: 40px; }
  #shopProductModal .shop-variant-chip { padding: 3px 8px; font-size: 0.72rem; }
  /* En-tête et pied plus compacts : libèrent de la hauteur pour le corps. */
  #shopProductModal .shop-product-modal-header { padding: 0.55rem 1rem; }
  #shopProductModal .shop-product-modal-title { font-size: 1.5rem;
  }
  #shopProductModal .shop-product-modal-footer { padding: 0.3rem 0.9rem; }
  /* Bouton « Fermer » compact (le .btn du thème est très large : 10px 20px +
     letter-spacing) — le pied doit laisser toute la place à la fiche. */
  #shopProductModal .shop-product-modal-footer .btn {
    padding: 5px 14px;
    font-size: 0.7rem;
    letter-spacing: 0.08rem;
    text-transform: none;
  }
}

@media (max-width: 575.98px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
  .shop-card-body { padding: 10px 12px 12px; }
  .shop-card-title { font-size: 0.92rem; }
  /* La ligne repliable ne garde que l'icône (et son espace me-1) puis la
     variante : « Variante : » mangeait une place précieuse sur une carte
     étroite. Le repli lui-même n'est pas touché (un clic déplie les chips). */
  .shop-variant-toggle-prefix { display: none; }
  /* Mobile : bouton « Ajouter » sur l'image — pastille compacte. */
  .shop-add-btn.shop-add-overlay { width: 38px; height: 38px; bottom: 8px; font-size: 0.78rem; }
  .shop-add-btn.shop-add-overlay:hover, .shop-add-btn.shop-add-overlay:focus { width: auto; padding: 0 12px; border-radius: 20px; height: 38px; }
}

/* --- Modale panier --- */
/* --- Panier latéral (drawer) --- */
.shop-cart-drawer {
  /* 88vw sur mobile : laisse une bande de fond sombre visible et cliquable
     pour fermer le panier en tapant à côté ; 420px max sur desktop. */
  width: min(420px, 88vw) !important;
  /* La navbar est dans `HEADER.site-navbar` (z-index 1999) ; le tiroir est
     dans `.site-wrap` (z-index auto, static). Sans ce `z-index` explicite, le
     tiroir était piégé dans la pile de `.site-wrap` — son z-index 1045 (valeur
     Bootstrap) ne pouvait pas dépasser le 1999 du header, et la navbar
     recouvrait le haut du panier : titre « Mon panier » tronqué et bouton de
     fermeture recouvert par le burger. 2100 passe au-dessus du header. */
  z-index: 2100;
  background: linear-gradient(160deg, var(--theme-violet-deep) 0%, var(--theme-violet-dark) 55%, var(--theme-violet) 100%);
  border-left: 1px solid rgba(var(--theme-gold-rgb), 0.4);
  color: #f5e9ff;
  /* ex .shop-cart-modal-content — supprimé : le drawer a son propre fond */
}
.shop-cart-drawer-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}
/* 1rem (16px) au lieu de 1.25rem (20px) : le tiroir fait 88vw, soit 282px
     sur un écran de 320px. À 20px de padding, le bouton « Commander » débordait
     de 7px hors du tiroir. */
  .shop-cart-drawer .offcanvas-footer {
    border-top: 1px solid rgba(var(--theme-gold-rgb), 0.25);
    padding: 0.9rem 1rem 1.1rem;
    flex-shrink: 0;
  }
  .shop-cart-drawer-body { padding-left: 1rem; padding-right: 1rem; }
  /* Les 2 boutons du footer (« Vider » + « Commander ») totalisent 260px dans
     249px disponibles sur 320px : le second débordait de 3px. `flex-grow: 1`
     exige que le conteneur puisse rétrécir plus que la base flexible. */
  .shop-cart-drawer .shop-cart-actions { min-width: 0; }
  .shop-cart-drawer .shop-cart-actions .btn { min-width: 0; padding-left: .5rem; padding-right: .5rem; }
.shop-cart-modal-header {
  border-bottom: 1px solid rgba(var(--theme-gold-rgb), 0.25);
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  /* Le tiroir passe SOUS la navbar en mobile (navbar-theme = 48px de haut) :
     le header du panier est ainsi entièrement visible, titre « Mon panier »
     compris, et son bouton de fermeture n'est plus recouvert par le burger.
     `top` vaut la hauteur réelle de la navbar + 1px pour éviter que le trait
     de séparation du header ne colle au bord inférieur de la navbar.
     Au-delà de 991.98px la navbar n'est pas fixed-top : on ne décale rien. */
  /* `!important` nécessaire : Bootstrap pose `top: 0` / `height: 100%` sur
     `.offcanvas` avec une spécificité plus forte que la nôtre, la media query
     seule était sans effet (mesuré : `top` restait à 0px). */
  .shop-cart-drawer {
    top: 49px !important;
    height: calc(100% - 49px) !important;
  }
}
.shop-cart-modal-title {
  font-family: 'Tangerine', serif;
  font-size: 2.2rem;
  color: var(--theme-gold);
  margin: 0;
}
/* Panier mixte (précommande + article en stock) : commande bloquée — toute la
   commande partirait en une seule livraison, à la date de sortie. */
.shop-cart-mixte {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--theme-gold-rgb), .45);
  border-radius: 10px;
  background: rgba(var(--theme-gold-rgb), .12);
  color: rgba(255, 255, 255, .85);
  font-size: .78rem;
  line-height: 1.5;
}
.shop-cart-mixte i {
  color: var(--theme-gold);
  margin-top: 2px;
}
/* Rassurance avant paiement */
.shop-cart-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 0.78rem;
  color: var(--theme-lavande);
}
.shop-reass-item i {
  color: var(--theme-gold);
  margin-right: 4px;
}
@media (max-width: 575.98px) {
  /* Les 3 mentions de reassurance sur UNE SEULE ligne en mobile.
     En flex simple elles totalisaient 323 px dans 310 px disponibles (390 px de
     viewport) et passaient donc sur 2 rangs — la hauteur du tiroir en gagnait
     une rangée pour rien.
     Réduire la police seule ne suffit PAS : à 320 px il faudrait descendre à
     8,5 px, illisible. On compacte donc les 4 leviers ensemble :
     police 0.78rem → 0.62rem, gap horizontal 14px → 6px, marge des icônes
     4px → 2px, et icônes réduites via `font-size` (les <i> FontAwesome
     héritent de la taille du parent). `white-space: nowrap` empêche un titre
     unique de se couper ; `flex-wrap: nowrap` garantit une seule ligne.
     Au-delà de 575.98px la disposition d'origine (police 0.78rem, 2 rangées
     possibles) est conservée à l'identique. */
  .shop-cart-reassurance {
    flex-wrap: nowrap;
    /* `flex-basis: 100%` : le footer est un flex `wrap`, le bloc reassurance
       était donc dimensionné par son contenu (251 px) et `space-between` n'avait
       aucun écart à distribuer — les 3 mentions se touchaient. En occupant
       toute la largeur, l'espace se répartit réellement entre elles. */
    flex: 1 0 100%;
    justify-content: space-between;
    align-items: center;
    /* `space-between` colle les mentions aux bords ; ce gap garantit un minimum
       entre elles, y compris si une mention s'avère plus longue. 6px et non 8 :
       à 320px (tiroir 282px, 251px de texte) 2 gaps de 8px débordaient de 2px. */
    gap: 0 6px;
    font-size: 0.62rem;
    margin-bottom: 8px;
  }
  .shop-cart-reassurance .shop-reass-item {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }
  .shop-reass-item i {
    margin-right: 2px;
    font-size: 0.58rem;
    line-height: 1;
  }
}
.shop-cart-actions .btn-gold {
  white-space: nowrap;
}
/* `flex-basis: 100%` : le footer du panier est un flex `wrap`, ce <p> prenait
   donc la largeur de son texte (151px) et son `text-center` ne centrait le
   lien que dans CE <p> — mesuré, le lien était décalé de 79px vers la gauche
   par rapport au centre du tiroir. En occupant toute la largeur, le centrage
   est réel. */
.shop-cart-track {
  flex: 1 0 100%;
  text-align: center;
}
.shop-cart-track a {
  color: var(--theme-lavande);
  font-size: 0.8rem;
  text-decoration: none;
}
.shop-cart-track a:hover {
  color: var(--theme-gold);
}
/* Ventes croisées dans le panier */
.shop-cart-crosssell {
  margin-top: 18px;
  border-top: 1px dashed rgba(var(--theme-gold-rgb), 0.3);
  padding-top: 14px;
}
.shop-crosssell-title {
  font-family: 'Tangerine', serif;
  font-size: 1.6rem;
  color: var(--theme-gold);
  margin-bottom: 10px;
}
.shop-crosssell-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shop-crosssell-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(18, 10, 32, 0.55);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.25);
  border-radius: 12px;
  padding: 8px 10px;
}
.shop-crosssell-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 52px;
  background: #120a20;
}
.shop-crosssell-info {
  flex: 1;
  min-width: 0;
}
.shop-crosssell-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-crosssell-price {
  font-size: 0.82rem;
  color: var(--theme-gold-light);
  font-weight: 600;
}
.shop-crosssell-add {
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Toast d'ajout au panier */
.shop-toast {
  background: linear-gradient(135deg, var(--theme-violet-deep), var(--theme-violet-dark));
  border: 1px solid rgba(var(--theme-gold-rgb), 0.5);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.shop-toast-check {
  color: #4ade80;
  font-size: 1.15rem;
}
.shop-toast #shop-toast-msg {
  font-size: 0.88rem;
  font-weight: 600;
}
.shop-toast .btn-outline-light {
  --bs-btn-font-size: 0.72rem;
  --bs-btn-padding-y: 0.2rem;
  --bs-btn-padding-x: 0.6rem;
  border-radius: 8px;
}
/* Mini-panier dans la navbar (boutique uniquement) */
.navbar-cart-btn {
  display: none;
  position: relative;
  color: #fff;
  background: rgba(var(--theme-violet-rgb), 0.3);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.35);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 1rem;
  line-height: 1;
  transition: border-color 0.2s, background 0.2s;
}
.navbar-cart-btn:hover {
  background: rgba(var(--theme-violet-rgb), 0.55);
  border-color: var(--theme-gold);
}
.navbar-cart-btn .shop-badge {
  position: absolute;
  top: -7px;
  right: -8px;
  font-size: 0.62rem;
  background: var(--theme-gold);
  color: #1a0b2e;
  border-radius: 50px;
  padding: 2px 6px;
}
.navbar-cart-btn.is-boutique { display: inline-block; }
/* Le caddie se cale juste à gauche du burger à toutes les tailles
   (sans `margin-left: auto` en desktop, il flottait au milieu de l'écran
   entre le nom du site et le menu hamburger). */
.navbar-cart-btn { margin-left: auto; margin-right: 10px; }
/* Mobile : logo réduit + panier compact pour que brand + cart + burger
   tiennent sur une seule ligne (iPhone 16 = 393 px). */
@media (max-width: 575.98px) {
  .navbar .navbar-brand {
    font-size: 50px !important;
    white-space: nowrap;
  }
  .navbar .navbar-brand span { font-size: 15px !important; }
  .navbar .container-fluid {
    flex-wrap: nowrap;
    padding-left: 8px;
    padding-right: 8px;
  }
  .navbar-cart-btn {
    padding: 4px 8px;
    font-size: 1.15rem;
    font-weight: 700;
    margin-right: 4px;
    flex-shrink: 0;
  }
}
.shop-cart-empty {
  text-align: center;
  padding: 30px 10px;
  color: var(--theme-lavande);
}
.shop-cart-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shop-cart-line {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 10, 32, 0.55);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.25);
  border-radius: 12px;
  padding: 10px 12px;
}
.shop-cart-line-img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #120a20;
}
.shop-cart-line-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-cart-line-ph {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--theme-violet-rgb), 0.45);
  font-size: 1.4rem;
}
.shop-cart-line-info {
  flex: 1;
  min-width: 0;
}
.shop-cart-line-title {
  font-weight: 600;
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.25;
}
.shop-cart-line-variant {
  font-size: 0.82rem;
  color: var(--theme-lavande);
}
/* `.shop-cart-line-price` (prix unitaire) a été SUPPRIMÉ : il occupait une
   ligne entière sous le nom, alors que le total de ligne est déjà affiché à
   droite avec la quantité et la corbeille. */
.shop-cart-line-total {
  font-weight: 700;
  color: var(--theme-gold-light);
  white-space: nowrap;
}
.shop-cart-line-remove {
  flex: 0 0 auto;
  color: #f0a0a8;
  border-color: rgba(220, 53, 69, 0.45);
}
.shop-cart-line-remove:hover {
  background: rgba(220, 53, 69, 0.15);
  color: #fff;
}
/* Lien secondaire de la fiche produit (« Voir toute la boutique ») : discret,
   sous le bouton d'ajout au panier, pour ne pas concurrencer le CTA. */
.shop-modal-alt-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--theme-gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-modal-alt-link:hover, .shop-modal-alt-link:focus { color: #fff; }
.shop-cart-qty {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.shop-cart-qty-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #fff;
  background: rgba(var(--theme-violet-rgb), 0.25);
  border: 1px solid rgba(var(--theme-violet-rgb), 0.45);
  border-radius: 8px;
}
.shop-cart-qty-btn:hover {
  background: rgba(var(--theme-violet-rgb), 0.45);
  color: var(--theme-gold-light);
}
.shop-cart-qty-btn:disabled {
  opacity: 0.55;
}
.shop-cart-qty-value {
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--theme-gold-light);
  font-size: 0.95rem;
}
/* Wrapper ajouté dans le HTML de la ligne panier pour regrouper les contrôles
   (total / quantité / poubelle). `display: contents` fait disparaître le
   wrapper du flux : ses 3 enfants restent desENFANTS DIRECTS de `.shop-cart-line`,
   donc le rendu desktop est strictement inchangé. La media query ci-dessous
   annule ce `contents` sur mobile pour obtenir une 2ᵉ ligne. */
.shop-cart-line-controls { display: contents; }
@media (max-width: 575.98px) {
  /* Panier mobile : la ligne passe sur 2 rangs. En flex simple les 5 blocs
     demandent ~368 px dans 302 px disponibles sur 390 px de viewport ; le manque
     était absorbé par `.shop-cart-line-info { min-width: 0 }`, qui écrasait le
     titre (« Boucles Athéna » : 27 px visibles pour 60 px de texte).
     `min-width: 0` est CONSERVÉ ici : sans lui le conteneur déborderait, ce qui
     serait pire qu'un titre tronqué. */
  .shop-cart-line { flex-wrap: wrap; row-gap: 8px; }
  /* 1ʳᵉ rangée : image + NOM CÔTÉ À CÔTÉ. `flex: 1 1 100%` est INTERDIT ici —
     il forcerait le nom à passer sur un nouveau rang sous la vignette.
     On garde `flex: 1` + `min-width: 0` (règle de base) pour que le nom prenne
     la place restante et puisse se réduire plutôt que de déborder.
     Seuls les CONTRÔLES passent au rang du dessous. */
  .shop-cart-line-info { flex: 1; min-width: 0; }
  .shop-cart-line-controls {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid rgba(var(--theme-violet-rgb), 0.2);
  }
  /* Boutons quantité conservés à 30 px : c'est la cible tactile minimale.
     Hauteur forcée à 32px pour TOUS les blocs du rang 2 (prix, quantité,
     corbeille) : sans cela la corbeille (btn-sm, plus basse) se désaligne
     verticalement des boutons quantité. */
  .shop-cart-line-controls > * { align-self: center; }
  .shop-cart-qty-btn { width: 32px; height: 32px; }
  .shop-cart-line-remove { height: 32px; display: inline-flex; align-items: center; justify-content: center; }
}
.shop-cart-modal-footer {
  border-top: 1px solid rgba(var(--theme-gold-rgb), 0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-cart-total {
  margin-right: auto;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--theme-gold-light);
}
@media (max-width: 575.98px) {
  .shop-cart-line { flex-wrap: wrap; }
  .shop-cart-line-total { margin-left: auto; }
}

/* ============================================================
   SAFE-AREA (encoches, bords arrondis, écrans pliables)
   Actif uniquement avec viewport-fit=cover dans les metas viewport.
   env() vaut 0 sur les écrans classiques → aucun impact visuel.
   ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .navbar, .site-navbar {
    padding-left: calc(env(safe-area-inset-left, 0px) + 0.5rem);
    padding-right: calc(env(safe-area-inset-right, 0px) + 0.5rem);
  }
}

/* ============================================================
   TRANCHÉE « SMARTPHONE DÉPLIÉ » (576–767 px)
   Largeurs des foldables dépliés (Z Fold ≈ 717, Pixel Fold ≈ 673,
   Duo 540 px) : entre le mobile (≤ 575) et la tablette (≥ 768).
   Grilles maintenues à 2 colonnes + aération intermédiaire.
   ============================================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
  .pierre-row, .presta-infos { grid-template-columns: 1fr 1fr; }
  .pierre-card-body { padding: 14px 18px 22px; }
  .shop-grid { gap: 16px; }
}

/* ============================================================
   ÉCRANS PLIABLES DOUBLE (Surface Duo…) : la charnière
   Actif uniquement sur les appareils à double écran (Chromium).
   Content le contenu hors de la zone centrale de la charnière.
   ============================================================ */
@media (horizontal-viewport-segments: 2), (spanning: single-fold-vertical) {
  body {
    padding-left: max(env(safe-area-inset-left, 0px), 12px);
    padding-right: max(env(safe-area-inset-right, 0px), 12px);
  }
  .site-navbar, .navbar { padding-left: 16px; padding-right: 16px; }
  .shop-grid { padding-inline: 6px; }
}
@media (spanning: single-fold-horizontal) {
  body { padding-top: 8px; padding-bottom: 8px; }
}

/* ============================================================
   ONGLET CHEMIN DE VIE — timeline numérotée (8 étapes)
   Ordre du fichier Excel conservé (base → sommet → chemin de vie
   → appel → personnalité → expression → touche → vœux).
   Mobile-first : fil doré vertical reliant les étapes.
   ============================================================ */
.chemin-timeline {
  position: relative;
  padding: 6px 0;
}
.chemin-timeline::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--theme-gold) 0%, rgba(212, 175, 55, 0.12) 100%);
}
.chemin-etape {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
}
.chemin-rond {
  position: relative;
  z-index: 1;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #3a2b00;
  background: linear-gradient(135deg, #f7dd7c 0%, var(--theme-gold) 100%);
  box-shadow: 0 0 0 4px #fff, 0 4px 12px rgba(0, 0, 0, 0.18);
}
.chemin-contenu {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.chemin-contenu:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.chemin-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.8rem;
  color: var(--theme-violet);
  background: rgba(123, 63, 160, 0.12);
}
.chemin-nom {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--theme-violet-deep);
  line-height: 1.3;
}
.chemin-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #3a2b00;
  background: linear-gradient(135deg, #f7dd7c, var(--theme-gold));
  border-radius: 999px;
  padding: 3px 10px;
}
.chemin-valeur {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.chemin-numero {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--theme-gold);
}
.chemin-pierre {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--theme-violet-dark);
}

/* Étape principale (pierre chemin de vie, n°3) mise en avant */
.chemin-etape.principale .chemin-rond {
  flex-basis: 54px;
  width: 54px;
  height: 54px;
  font-size: 1.25rem;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(212, 175, 55, 0.45), 0 6px 16px rgba(0, 0, 0, 0.2);
}
.chemin-etape.principale .chemin-contenu {
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: linear-gradient(180deg, #fffdf4 0%, #fff8e0 100%);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.28);
}
.chemin-etape.principale .chemin-numero {
  color: var(--theme-violet);
  font-size: 2.1rem;
}

@media (min-width: 768px) {
  .chemin-etape {
    padding: 14px 0;
  }
  .chemin-contenu {
    padding: 14px 18px;
  }
}

/* ============================================================
   THÈME COLLAGE 3D — hero, navbar, footer
   Intégré depuis theme-bootstrap-hero-mobile.html (m5) et
   theme-bootstrap-hero-collage-desktop.html (d5) — même langage
   visuel : violet profond (--theme-violet-deep), or (--theme-gold),
   papier/cream, Fraunces (titres serif) + Space Grotesk (corps).
   Responsive : mobile (< 992 px) = dispositions m5, desktop = d5.
   ============================================================ */

/* --- Variables du thème (nouvelles couleurs + polices) --- */
:root {
  --theme-paper: #f2ede3;
  --theme-cream: #fbf7ef;
  --theme-ink: #1d1626;
  --theme-ink-soft: rgba(29, 22, 38, 0.62);
  --theme-serif: 'Fraunces', 'Fraunces-fallback', Georgia, serif;
  --theme-sans: 'Space Grotesk', 'SpaceGrotesk-fallback', system-ui, sans-serif;
}
/* Corps du thème : Space Grotesk par défaut (hérité partout) */
body { font-family: var(--theme-sans); }
.hero-collage ::selection { background: var(--theme-violet); color: #fff; }
.hero-collage em { font-style: italic; font-family: var(--theme-serif); color: var(--theme-violet); }


/* --- Sur-titre éditorial du thème (✦ + or) --- */
.eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--theme-gold);
  font-weight: 600;
  /* Anti-CLS (PageSpeed 0.657) : en police de secours (fallback plus large que
     Space Grotesk), ce texte tient sur 2 lignes (33px) puis 1 ligne (16px) à
     l'arrivée de la webfont → shift du h5-text. Une seule ligne réservée. */
  white-space: nowrap;
}
.eyebrow::before { content: '✦ '; }

/* ===== SCÈNE COLLAGE 3D (hero plein écran) ===== */
.hero-collage { position: relative; overflow: hidden; background: var(--theme-violet-deep); }
/* Colonne (et non rangée) : le héro n'a que 2 éléments « en flux » — le panneau
   texte et l'indicateur « Défiler » (photo, voile et cartes sont en position
   absolue). En rangée, l'indicateur était posé en absolu et finissait SOUS le
   bord du panneau dès que celui-ci grandissait (pastille Qualité, ebooks,
   badge). En colonne, l'indicateur est dans le flux SOUS le panneau : un
   chevauchement devient impossible, quelle que soit la hauteur du contenu.
   60 px en haut = navbar fixe mobile (48 px) + 12 px d'air ; le desktop
   redéfinit 78 px (navbar 66 px) dans son propre bloc. */
/* Centrage vertical du panneau (v1.3.4) : le bloc « Défiler » reste EN FLUX
   sous le panneau (il ne bouge pas), mais il ne doit plus décaler le centrage.
   `margin-block:auto` centre le panneau dans l'espace restant, donc
   padding-top = padding-bottom + marge (14 px) + hauteur du bloc Défiler
   (67 mobile / 90 desktop) → panneau pile au milieu du héro.
   99 = 18 + 14 + 67 ; 122 = 18 + 14 + 90 (voir le media ≥992 px). */
.hero-collage.h5-stage { min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 99px 0 18px; }
.h5-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* scale(1) au repos : le hero montre TOUT le fichier de variante mobile, donc
     le champ maximal possible en couverture totale (la fenêtre de `cover` est
     déjà toute la hauteur de la photo : 370 px de large sur les 1900 du
     panorama, soit 19,5 %). Un scale > 1 ne ferait que raboter ce champ (1,04
     → 18,7 %) sans jamais l'élargir. */
  transform: scale(1);
  animation: h5slow 26s ease-in-out infinite alternate;
}
/* NB : la variante mobile du hero passe par <picture><source media> dans le
   HTML (cf. index.html / 7-chakras.html), plus par une classe CSS. Une seule
   URL est ainsi choisie et téléchargée par le navigateur ; l'ancien montage à
   deux <img> (dont une masquée) faisait télécharger les deux à toutes les
   largeurs. L'<img> reste la seule cible du style ci-dessus. */
/* L'animation ne descend jamais sous scale(1) : `cover` garantit que la boîte
   est couverte à cette échelle, donc aucune bande ne peut apparaître. */
@keyframes h5slow { from { transform: scale(1) translateX(0); } to { transform: scale(1.06) translateX(-1.5%); } }
@keyframes h5slowd { from { transform: scale(1.03) translateX(0); } to { transform: scale(1.1) translateX(-1.2%); } }
.h5-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20, 10, 30, 0.52), rgba(20, 10, 30, 0.32) 35%, rgba(20, 10, 30, 0.64) 72%, rgba(20, 10, 30, 0.86));
}
/* Couches flottantes (photos produits) */
.h5-layer { position: absolute; will-change: transform; z-index: 2; }
.h5-card { border-radius: 0.9rem; overflow: hidden; border: 4px solid var(--theme-cream); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55); }
.h5-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Panneau texte : verre fumé + texte blanc, toujours lisible.
   flex: 0 0 auto : sans lui, le flex-shrink du stage réduit le panneau à la
   largeur de son contenu (206 px au lieu des 354 px du thème m5). */
.h5-text {
  position: relative; z-index: 3; width: 100%; max-width: 354px; margin-inline: auto;
  flex: 0 0 auto; text-align: center;
  /* margin-block: auto : centre le panneau dans la bande visible (navbar
     déduite, indicateur réservé). Aucun translateY : il ferait mordre le
     panneau sur l'indicateur, désormais en flux sous lui. */
  padding: 1.1rem 1.15rem; border-radius: 1.2rem; margin-block: auto;
  background: rgba(18, 10, 28, 0.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}
.h5-text .eyebrow { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.h5-title { font-family: var(--theme-serif); font-weight: 400; line-height: 1.08; font-size: clamp(1.65rem, 6.2vw, 2rem); color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.55); }
.h5-title em { color: var(--theme-gold); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
.h5-sub { font-size: 0.8rem; line-height: 1.5; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65); }

/* Boutons fantômes (btn-ghost-dark du thème) */
.btn-ghost-dark {
  border-radius: 999px; padding: 0.85em 1.6em; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; color: #fff;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.9); position: relative;
  transition: all 0.35s; text-decoration: none; display: inline-block; text-align: center;
  line-height: 1.5;
}
.btn-ghost-dark:hover { color: var(--theme-violet-deep); background: var(--theme-gold); border-color: var(--theme-gold); transform: translateY(-3px); }
/* Indicateur « Défiler » — en flux sous le panneau (voir .h5-stage en colonne).
   14 px de blanc garanti entre le bord du cadre et le mot. */
.h5-scroll { z-index: 5; flex: 0 0 auto; margin-top: 14px; text-align: center; color: var(--theme-cream); }
.h5-scroll span { letter-spacing: 0.45em; font-size: 0.6rem; text-transform: uppercase; }
.h5-scroll .line { width: 1px; height: 30px; background: rgba(255, 255, 255, 0.5); margin: 0.6rem auto 0; position: relative; overflow: hidden; }
.h5-scroll .line::after { content: ''; position: absolute; inset: 0; background: var(--theme-gold); transform: translateY(-100%); animation: h5drop 2.2s ease-in-out infinite; }
@keyframes h5drop { to { transform: translateY(100%); } }

/* Positions des couches : mobile (autour du panneau texte, hors zone de texte) */
/* Le « top: 6 % » du cadre m5 ne tenait pas compte de la navbar FIXE (48 px)
   qui recouvre le haut du hero sur le vrai site : à 6 % de 100svh la carte
   cooltoutou passait DERRIÈRE elle et son bord blanc supérieur restait
   invisible (d'autant plus sur un écran bas, où 6 % diminue alors que la
   navbar garde ses 48 px). On réserve donc la navbar + ~12 px de marge :
   max() conserve la proportion du thème sur les très grands écrans. */
.hero-collage .h5-a { width: 74px; aspect-ratio: 3/4; top: max(64px, 6%); left: auto; right: 5%; transform: rotate(-6deg); }
.hero-collage .h5-b { width: 54px; aspect-ratio: 1/1; top: auto; bottom: 5%; left: auto; right: 7%; transform: rotate(7deg); }
.hero-collage .h5-c { width: 60px; aspect-ratio: 3/4; top: 10%; left: 5%; transform: rotate(5deg); }

/* Écrans BAS (petits téléphones en portrait, barres d'URL déployées) : la
   bande libre entre la navbar (48 px fixes) et le haut du panneau se réduit
   d'autant, alors que la carte fait toujours ~102 px de haut une fois pivotée
   (74 × 4/3 → bbox 1,43 × largeur). Sans ce garde-fou, descendre la carte pour
   dégager la navbar masquerait son bord INFÉRIEUR derrière le panneau (verre
   fumé, z-index 3 > 2) : on la réduit donc proportionnellement pour que le
   cadre blanc reste entièrement visible dans la bande disponible. */
@media (max-width: 991.98px) and (max-height: 780px) {
  .hero-collage .h5-a { width: 56px; }
}
@media (max-width: 991.98px) and (max-height: 700px) {
  .hero-collage .h5-a { width: 48px; }
}

/* Écrans BAS en PAYSAGE (téléphones couchés : 844×390, 667×375…). Le panneau
   mobile (354 px) devenait plus haut que la fenêtre sur les contenus longs
   (accueil : 441 px pour 390 px de haut ; fiches pierre à intro longue :
   364 px) : il débordait sous le bord bas et sa tête passait DERRIÈRE la
   navbar fixe (48 px), qui recouvre le haut du hero.
   On réserve donc la hauteur de la navbar et on ÉLARGIT le panneau : la
   largeur est libre (844 − 354 = 490 px inutilisés), des lignes plus longues
   raccourcissent le texte et le hero tient en entier. Les écrans ≥ 992 px
   (desktop, y compris fenêtres basses) et le portrait ne sont pas touchés. */
@media (min-width: 576px) and (max-width: 991.98px) and (max-height: 560px) {
  .hero-collage.h5-stage { padding-top: 60px; }
  .hero-collage .h5-text { max-width: min(680px, 88vw); }
}

/* ===== NAVBAR DU THÈME (barre violet profond) ===== */
.navbar-theme {
  background: var(--theme-violet-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 48px; padding: 0;
}
.navbar-theme .theme-navbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; height: 48px; min-height: 48px; padding: 0 14px;
}
/* Menu burger : le CSS critique de head.js neutralise l'offcanvas au 1er rendu
   (`.theme-navbar-inner>.offcanvas{visibility:hidden}`) pour qu'il ne s'affiche
   pas en bloc statique avant Bootstrap. Cette règle-là fait 0,2,0, EXACTEMENT
   comme le `.offcanvas.show/.showing{visibility:visible}` de Bootstrap : c'est
   donc l'ORDRE des feuilles qui décide. Si le critique arrive après theme.css
   (cas d'un head.js encore en cache qui l'injectait après les feuilles), le
   panneau restait invisible → « le hamburger ne fait rien ». On rend l'ouverture
   INDÉPENDANTE de l'ordre : 0,3,0 l'emporte dans les deux cas. */
.navbar-theme .theme-navbar-inner > .offcanvas.show, .navbar-theme .theme-navbar-inner > .offcanvas.showing {
  visibility: visible;
}
/* Le panneau mobile s'ouvre SOUS la barre : `.site-navbar` a un z-index 1999,
   l'offcanvas 1045. Sans décalage, le titre (Tangerine 52 px) et le haut de la
   croix de fermeture passaient DERRIÑRE la navbar — mesuré 390×844 : 32 px du
   titre et 9 px de la croix recouverts par la barre opaque. Même correctif que
   le tiroir du panier (`.shop-cart-drawer`) : `top` = hauteur réelle de la
   navbar (`--mobile-navbar-h`, posée par navbar.js), `height` d'autant réduite. */
@media (max-width: 991.98px) {
  .navbar-theme .theme-navbar-inner > .offcanvas {
    top: var(--mobile-navbar-h, 49px) !important;
    height: calc(100% - var(--mobile-navbar-h, 49px)) !important;
  }
}
.theme-brand {
  font-family: 'Tangerine', cursive; font-size: 1.85rem; line-height: 1; color: #fff; text-decoration: none;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap;
  /* Filet de sécurité : la marque peut se réduire (au lieu de pousser le
     caddie et le burger hors de l'écran) si la police est agrandie par le
     navigateur (taille de texte système) ou si un écran est très étroit. */
  min-width: 0; overflow: hidden;
  /* Bootstrap pose `margin-right: 1rem` sur `.navbar-brand` : inutile ici (la
     barre est en flex avec `gap`), et c'est 16 px perdus qui poussaient le
     burger hors de l'écran dès 360 px une fois la police agrandie. */
  margin-right: 0;
}
/* Barre mobile ÉTROITE (≤ 360 px) : à l'échelle mobile, la marque mesure 226 px
   et la rangée caddie + burger 78 px — soit 352 px de contenu pour 320 px
   d'écran. Le burger sortait donc ENTIÈREMENT de l'écran (x = 320 → 352) sur
   un iPhone SE 1re gén. / Android étroit : le menu devenait inatteignable.
   On resserre la barre et on réduit la marque pour que le burger reste visible
   et cliquable, sans tronquer le nom du site. */
@media (max-width: 359.98px) {
  .navbar-theme .theme-navbar-inner { padding: 0 8px; gap: 8px; }
  .d-nav-right { gap: 6px; }
  /* `!important` + même spécificité que la règle mobile `font-size: 50px`
     ci-dessus (§ « Mobile : logo réduit »), qui l'emporte sinon. */
  .navbar .theme-brand { font-size: 38px !important; }
  .navbar .theme-brand span { font-size: 13px !important; }
}
.theme-brand span { font-family: var(--theme-sans); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); }
.theme-brand:hover { color: #fff; }
.d-nav-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* Caddie rond (boutique : le badge est géré par boutique.js via #navbar-cart-badge) */
.theme-cart {
  position: relative; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.1); color: #fff; display: grid; place-items: center;
}
.theme-cart svg { width: 15px; height: 15px; fill: currentColor; }
/* Compte client : pastille ronde à droite du caddie. Desktop seulement — sous 992 px
   l'entrée « Mon espace » de l'offcanvas sert de porte d'entrée et la barre mobile
   n'a pas la place pour une 3ᵉ pastille. */
.theme-account {
  position: relative; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.1); color: #fff; display: none; place-items: center;
}
.theme-account svg { width: 15px; height: 15px; fill: currentColor; }
.theme-account:hover { background: var(--theme-violet); color: #fff; }
/* Pages « Mon espace » (espace-client, mes-commandes, suivre-commande) */
.theme-account.is-active { color: var(--theme-gold); box-shadow: inset 0 0 0 1px rgba(var(--theme-gold-rgb), 0.75); }
.theme-cart .shop-badge {
  position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 999px; background: var(--theme-gold); color: var(--theme-violet-deep);
  font-size: 0.55rem; font-weight: 700; display: grid; place-items: center;
}
/* Burger personnalisé (3 lignes) */
.m-burger {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 0;
}
.m-burger span { width: 15px; height: 1.8px; border-radius: 2px; background: #fff; display: block; }
/* Menu inline desktop (d-menu) — les sous-menus `.d-sub` sont plus bas, après les
   paliers d'espacement. Plus de CTA « Contacte moi… » dans la barre : l'entrée
   « Contact » du menu le remplace (le pied de page garde ses CTA `.d-foot-contact`). */
.d-menu { display: none; margin: 0; padding: 0; list-style: none; }

/* ===== FOOTER DU THÈME ===== */
.theme-footer { background: var(--theme-violet-deep); color: rgba(251, 247, 239, 0.85); }
.theme-footer .container { max-width: 1140px; }
/* Footer mobile : compact */
.m-foot { text-align: center; padding: 10px 12px 12px; }
.m-foot-eng { display: flex; justify-content: space-around; gap: 4px; }
.m-fe-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.48rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(251, 247, 239, 0.7); }
.m-fe-item svg { width: 13px; height: 13px; stroke: var(--theme-gold); fill: none; }
.m-foot-social { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.m-foot-social a.soc { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; color: #fff; }
.m-foot-social a.soc svg { width: 13px; height: 13px; fill: currentColor; }
.m-foot-contact {
  font-size: 0.54rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600;
  background: var(--theme-violet); color: #fff; text-decoration: none; padding: 0.55em 1.1em; border-radius: 999px;
}
.m-foot-contact:hover { background: var(--theme-violet-dark); color: #fff; }
.m-foot-copy { font-size: 0.52rem; color: rgba(251, 247, 239, 0.6); margin: 8px 0 2px; }
.m-foot-links { font-size: 0.48rem; color: rgba(251, 247, 239, 0.45); margin: 0; letter-spacing: 0.02em; }
.m-foot-links a { color: rgba(251, 247, 239, 0.6); text-decoration: none; }
.m-foot-links a:hover { color: #fff; }
/* Footer desktop : détaillé (masqué par défaut, affiché ≥ 768 px) */
.d-foot { display: none; text-align: center; padding: 22px 36px 24px; }
.d-foot-eng { display: flex; justify-content: center; gap: 56px; }
.d-fe-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.d-fe-item svg { width: 20px; height: 20px; stroke: var(--theme-gold); fill: none; }
.d-fe-label { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(251, 247, 239, 0.85); }
.d-fe-detail { font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(251, 247, 239, 0.5); }
.d-foot-social { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.d-foot-social a.soc { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; color: #fff; transition: background 0.25s, transform 0.25s; }
.d-foot-social a.soc:hover { background: var(--theme-violet); transform: translateY(-2px); }
.d-foot-social a.soc svg { width: 16px; height: 16px; fill: currentColor; }
.d-foot-contact {
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600;
  background: var(--theme-violet); color: #fff; text-decoration: none; padding: 0.8em 1.8em; border-radius: 999px;
}
.d-foot-contact:hover { background: var(--theme-violet-dark); color: #fff; }
.d-foot-copy { font-size: 0.62rem; color: rgba(251, 247, 239, 0.6); margin: 16px 0 4px; }
.d-foot-links { font-size: 0.56rem; color: rgba(251, 247, 239, 0.45); letter-spacing: 0.03em; }
.d-foot-links a { color: rgba(251, 247, 239, 0.6); text-decoration: none; }
.d-foot-links a:hover { color: #fff; }

/* Pastille QUALITÉ — dans le pied de page de toutes les pages, et aussi dans le
   héro de l'accueil (sous le badge Ouvert/Fermé), en lien vers la page publique
   /qualite. Le point suit la note (A→E) et la lettre reste toujours affichée
   (jamais la couleur seule). Hors production (dev, recette) la bordure devient
   pointillée et l'environnement ne vit que dans le title/aria-label (voir
   js/footer.js) : la note reste lisible, mais une capture de recette reste
   discrètement identifiable. */
.foot-quality { margin: 8px 0 0; }
.hero-quality { margin: 10px 0 0; }
/* v1.3.4 : la pastille qualité est passée SOUS les boutons e-book de l'accueil.
   Deux classes obligatoires : le critical CSS de js/head.js impose
   « .h5-text p { margin-top:0; margin-bottom:.5rem } » (0,1,1), qui écrase
   « .hero-quality » seule (0,1,0). */
.h5-text .hero-quality { text-align: center; margin: 14px 0 0; }

/* CTA principal du héro : MÊME gabarit que .btn-ghost-dark (déjà mirroré dans
   le critical CSS → aucun CLS) mais rempli aux couleurs du thème. */
.btn-ghost-dark.is-primary {
  background: var(--theme-gradient);
  border-color: rgba(var(--theme-gold-rgb), 0.6);
  color: #fff;
  box-shadow: 0 8px 24px rgba(var(--theme-violet-dark-rgb), 0.45);
}
.btn-ghost-dark.is-primary:hover, .btn-ghost-dark.is-primary:focus-visible {
  background: var(--theme-gradient-hover);
  border-color: rgba(var(--theme-gold-rgb), 0.9);
  color: #fff;
}
.quality-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: rgba(251, 247, 239, 0.9); text-decoration: none;
  border: 1px solid rgba(251, 247, 239, 0.3); border-radius: 999px; padding: 0.35em 0.85em;
}
.quality-pill:hover { color: #fff; border-color: rgba(251, 247, 239, 0.55); background: rgba(255, 255, 255, 0.08); }
.quality-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(251, 247, 239, 0.45); flex: none; }
.quality-pill[data-grade="A"] .quality-dot { background: #4cc47f; }
.quality-pill[data-grade="B"] .quality-dot { background: #9bd24c; }
.quality-pill[data-grade="C"] .quality-dot { background: #e6b422; }
.quality-pill[data-grade="D"] .quality-dot { background: #e08a2b; }
.quality-pill[data-grade="E"] .quality-dot { background: #d9534f; }
.quality-pill[data-env="dev"], .quality-pill[data-env="recette"] { border-style: dashed; }
/* Variante héro : même graisse et interlignage que le badge Ouvert/Fermé, avec
   l'ombre portée nécessaire à la lisibilité sur la photo plein cadre. */
.quality-pill-hero {
  font-size: 0.56rem; font-weight: 400; letter-spacing: 0.12em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}
.d-foot .quality-pill { font-size: 0.56rem; }

/* ===== PAGE QUALITÉ PUBLIQUE (/qualite) =====
   Même grammaire que les pages de contenu : surtitre violet (.section-eyebrow),
   titre Playfair (.title), cartes blanches à halo violet/or calquées sur
   .nl-card, dégradé violet signature pour la note et les barres. Aucune couleur
   propre : uniquement des variables du thème (check:theme). */
.quality-page { padding-top: 9rem; }
@media (max-width: 991.98px) {
  .quality-page { padding-top: 6.5rem; }
}
.quality-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.quality-card {
  background: #fff; border: 1px solid rgba(var(--theme-violet-rgb), 0.16); border-radius: 22px;
  padding: 22px; height: 100%;
  box-shadow:
    0 18px 40px rgba(var(--theme-violet-dark-rgb), 0.10),
    0 0 0 1px rgba(var(--theme-violet-rgb), 0.12);
}
.quality-card-eyebrow {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #6b6580; margin-bottom: 6px;
}
.quality-card-value {
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif; font-weight: 700;
  font-size: 1.5rem; color: var(--theme-violet-dark); margin-bottom: 0;
}
/* Note globale : bloc centré (pastille de note, puis libellés empilés dessous)
   — les catégories restent alignées à gauche, séparées par un filet. */
.quality-score-block { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.quality-score {
  width: 108px; height: 108px; border-radius: 50%; flex: none;
  background: var(--theme-gradient); color: #fff;
  display: grid; place-items: center;
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif; font-size: 2.4rem; font-weight: 700;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.92),
    0 0 0 7px rgba(var(--theme-gold-rgb), 0.45),
    0 18px 40px rgba(var(--theme-violet-dark-rgb), 0.25);
}
.quality-score.is-na { background: #efedf5; color: var(--theme-violet); }
.quality-score-num {
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif; font-weight: 700;
  font-size: 2rem; color: var(--theme-violet-dark); line-height: 1;
}
.quality-bar { height: 8px; border-radius: 999px; background: rgba(var(--theme-violet-rgb), 0.14); overflow: hidden; }
.quality-bar-fill { height: 100%; border-radius: 999px; background: var(--theme-gradient); }
.quality-bar-fill.is-low { background: linear-gradient(135deg, var(--theme-gold-deep) 0%, var(--theme-gold) 100%); }
.quality-release { border-left: 3px solid rgba(var(--theme-gold-rgb), 0.6); padding-left: 16px; margin-bottom: 22px; }
.quality-release:last-child { margin-bottom: 0; }
.quality-release-version {
  font-family: 'Playfair Display', 'DM Sans', Georgia, serif; font-weight: 700;
  color: var(--theme-violet-dark);
}
.quality-release-date { font-size: 0.8rem; color: #6b6580; }
.quality-release ul { margin: 8px 0 0; padding-left: 18px; color: #6b6580; }

/* ===== RÉASSURANCE ACHAT & CONTACT (accueil, entre les avis et la newsletter) =====
   4 cartes de confiance (paiement, livraison, rétractation, fait main) suivies
   d'un bandeau contact : on lève les derniers doutes du visiteur juste avant
   de lui demander son inscription à la newsletter.
   Grille fluide : 4 cartes en desktop, 2 en tablette, 1 en mobile. */
/* Un peu moins airy que .site-section (7rem) : le bloc s'insère entre deux
   sections claires et supportait mal 7rem + 7rem d'empilement de marges. */
.reassure-section { padding: 5rem 0; }
@media (max-width: 991.98px) {
  .reassure-section { padding: 3rem 0; }
}
.reassure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 991.98px) {
  .reassure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .reassure-grid { grid-template-columns: minmax(0, 1fr); }
}
.reassure-card {
  background: #faf8fd;
  border: 1px solid rgba(var(--theme-violet-rgb), 0.14);
  border-radius: 22px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 18px 40px rgba(var(--theme-violet-dark-rgb), 0.10);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.reassure-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--theme-gold-rgb), 0.5);
  box-shadow: 0 26px 50px rgba(var(--theme-violet-dark-rgb), 0.16);
}
.reassure-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--theme-gradient);
  color: var(--theme-gold);
  font-size: 1.25rem;
  margin-bottom: 0.9rem;
  box-shadow: 0 10px 24px rgba(var(--theme-violet-dark-rgb), 0.35);
}
.reassure-card h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-violet-dark);
  margin: 0 0 0.5rem;
}
.reassure-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #6b6580;
  margin: 0;
}
/* Bandeau contact : dégradé violet signature + liseré or (CTA de fin de page) ;
   boutons or + outline light, seules lisibles sur fond sombre. */
.reassure-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: 1.5rem;
  padding: 1.75rem 2rem;
  border-radius: 22px;
  background: var(--theme-gradient);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.45);
  box-shadow: 0 22px 50px rgba(var(--theme-violet-dark-rgb), 0.25);
}
.reassure-contact-txt { flex: 1 1 420px; }
.reassure-contact h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--theme-gold-light);
  margin: 0 0 0.4rem;
}
.reassure-contact h3 i { color: var(--theme-gold); margin-right: 6px; }
.reassure-contact-txt p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
  max-width: 72ch;
}
.reassure-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (max-width: 575.98px) {
  .reassure-contact { padding: 1.5rem 1.25rem; }
  .reassure-contact-actions { width: 100%; }
  .reassure-contact-actions .btn { flex: 1 1 100%; }
}

/* ===== LETTRE MENSUELLE (bloc unique, sous le héro de l'accueil) =====
   Même mise en forme que la section « 5 univers complémentaires » qui suit :
   surtitre, titre Playfair souligné, intro centrée, puis une carte (rayon
   22 px et ombre violette des vignettes). Le pied de page n'en contient plus. */
.nl-section { padding: 4rem 0 1rem; }
.nl-card {
  background: #fff; border: 1px solid rgba(var(--theme-violet-rgb), 0.16); border-radius: 22px;
  padding: 22px 22px 16px;
  /* Même halo que les vignettes des « 4 univers » (ombre violette + anneau doré). */
  box-shadow:
    0 22px 50px rgba(var(--theme-violet-dark-rgb), 0.14),
    0 0 0 1px rgba(var(--theme-violet-rgb), 0.14),
    0 0 0 6px rgba(255, 255, 255, 0.9),
    0 0 0 7px rgba(var(--theme-gold-rgb), 0.28);
}
.nl-signup-form { margin: 0; }
.nl-signup-form input[type="email"] { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(var(--theme-violet-rgb), 0.28); background: #faf8fd; color: #364d59; font-size: 0.95rem; box-sizing: border-box; }
.nl-signup-form input[type="email"]::placeholder { color: #8a84a0; }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Consentement : texte lisible (14 px) et case confortable. En mobile, le lien
   vers la politique passe sur sa PROPRE ligne (dans une cartouche) : dans la
   phrase, il se coupait en deux sur 360-390 px (« politique de / confidentialité »). */
.nl-consent { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 14px; font-size: 0.86rem; line-height: 1.5; color: #6b6580; text-align: left; }
.nl-consent input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--theme-violet); }
.nl-consent-txt { display: block; }
.nl-consent-lien { color: var(--theme-violet); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 576px) {
  .nl-consent-lien { display: inline; }
}
@media (max-width: 575.98px) {
  .nl-consent { gap: 12px; padding: 12px; background: #faf8fd; border: 1px solid rgba(var(--theme-violet-rgb), 0.14); border-radius: 12px; }
  .nl-consent-lien { display: flex; align-items: center; min-height: 32px; margin-top: 2px; }
}
/* Le bouton « S'inscrire » reprend le bouton primaire du thème (.btn.btn-primary :
   dégradé violet signature + liseré or) — seules la hauteur tactile et la
   largeur pleine sont ajoutées ici. */
.nl-signup-form .btn { min-height: 46px; font-size: 0.95rem; border-radius: 10px; }
.nl-signup-form .btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.nl-msg { font-size: 0.8rem; margin: 10px 0 0; min-height: 1.15em; }
@media (max-width: 991.98px) {
  .nl-section { padding: 2.5rem 0 0.5rem; }
}
@media (max-width: 575.98px) {
  .nl-card { padding: 18px 16px 14px; border-radius: 18px; }
}

/* Ebooks dans le panneau du hero Collage 3D : flex repliable centré. La grille
   fixe 2×210px de l'ancien hero (ftco-blocks-cover-1) déborderait du panneau
   étroit (354 px) entre 576 et 991 px — le flex se replie proprement. */
.hero-collage .hero-ebook {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  margin: 14px 0 0;
}
.hero-collage .hero-ebook .btn { margin: 0; }
/* v1.3.4 : les 2 accès e-book doivent se LIRE comme des boutons. Sur la photo
   du héro, le contour blanc translucide de Bootstrap (.btn-outline-light) se
   perdait dans le voile et le fond restait transparent : les deux liens
   passaient pour du simple texte. On matérialise une pastille crème pleine,
   texte violet, liseré or et ombre douce — assez présentes pour être vues,
   mais toujours secondaires par rapport au CTA plein « Voir la boutique ». */
.hero-collage .hero-ebook .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* Gabarit compact : 2 pastilles secondaires sous le CTA plein. 38 px de
     haut, assez pour rester cliquables au doigt sans concurrencer le bouton
     principal (46 px). */
  padding: 7px 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  background: rgba(251, 247, 239, 0.95);
  color: var(--theme-violet-deep);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.7);
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(20, 10, 30, 0.32);
  font-weight: 600;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hero-collage .hero-ebook .btn:hover, .hero-collage .hero-ebook .btn:focus-visible {
  background: var(--theme-gold-light);
  color: var(--theme-violet-deep);
  border-color: var(--theme-gold-deep);
  box-shadow: 0 10px 24px rgba(20, 10, 30, 0.45);
  transform: translateY(-2px);
}
.hero-collage .hero-ebook .btn:focus-visible {
  outline: 2px solid rgba(251, 247, 239, 0.9);
  outline-offset: 2px;
}

/* ===== Breakpoints ===== */
/* ≥ 768 px : footer desktop détaillé */
@media (min-width: 768px) {
  .m-foot { display: none; }
  .d-foot { display: block; }
}
@media (max-width: 767.98px) {
  /* (footer mobile affiché par défaut) */
}
/* ≥ 992 px : hero desktop (Collage 3D d5) + navbar desktop (menu inline + CTA) */
@media (min-width: 992px) {
  /* Hero desktop : déclinaison d5 du thème (photo 1.03/30 s, voile, panneau,
     cartes et boutons différents du mobile) */
  .hero-collage .h5-ph { transform: scale(1.03); animation: h5slowd 30s ease-in-out infinite alternate; }
  .hero-collage .h5-veil {
    background: linear-gradient(180deg, rgba(20, 10, 30, 0.5), rgba(20, 10, 30, 0.28) 38%, rgba(20, 10, 30, 0.58) 72%, rgba(20, 10, 30, 0.82));
  }
  .hero-collage .h5-card { border-radius: 1.2rem; border-width: 6px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
  .hero-collage .h5-text {
    max-width: 720px; padding: 2.3rem 2.5rem; border-radius: 1.5rem;
    /* Aucun décalage vertical : c'est la mise en colonne ci-dessous (marges
       auto) qui place le panneau, sinon son `translateY` le ferait mordre sur
       l'indicateur, qui est désormais en flux. */
    transform: none;
    background: rgba(18, 10, 28, 0.44);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  }
  .hero-collage .h5-title { font-size: clamp(2.5rem, 4.2vw, 3.7rem); line-height: 1.05; text-shadow: 0 3px 24px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.55); }
  .hero-collage .h5-sub { font-size: 1.02rem; line-height: 1.6; max-width: 52ch; margin-inline: auto; }
  .hero-collage .eyebrow { font-size: 0.66rem; letter-spacing: 0.28em; }
  .hero-collage .open-badge { margin-top: 8px; }
  .hero-collage .btn-ghost-dark { padding: 1em 2.2em; font-size: 0.76rem; border-width: 1.5px; border-color: rgba(255, 255, 255, 0.55); }
  /* Panneau et indicateur « Défiler » passent en COLONNE (au lieu d'un
     indicateur superposé en position absolue) : le panneau grandit avec son
     contenu (pastille Qualité, ebooks, badge Ouvert/Fermé) et, au-delà d'une
     certaine hauteur de fenêtre, le mot « Défiler » venait se poser SUR le
     bord du cadre — mesuré à 1280×800 (3 px), 1024×768 (8 px) et 1280×650
     (79 px). En flux, l'indicateur ne peut plus jamais recouvrir le cadre :
     les marges auto centrent le panneau dans la bande visible (navbar fixe
     déduite, indicateur réservé) et l'indicateur se pose juste au-dessus du
     bas du héro. Sur une fenêtre trop basse pour les deux, le héro s'allonge
     de quelques pixels (léger défilement) au lieu de les faire se chevaucher. */
  /* 78 px en haut : la navbar fixe (66 px) + 12 px d'air, pour que le cadre ne
     colle pas à la barre sur une fenêtre basse (c'est le seul cas où les
     marges auto ne laissent plus de jeu au-dessus). */
  .hero-collage.h5-stage { padding: 122px 0 18px; }
  .hero-collage .h5-scroll span { font-size: 0.64rem; }
  .hero-collage .h5-scroll .line { height: 52px; margin-top: 0.7rem; }
  /* Couches flottantes desktop : grands coins hors zone de texte */
  .hero-collage .h5-a { width: 230px; top: 11%; right: 3%; }
  .hero-collage .h5-b { width: 180px; bottom: 6%; right: 7%; }
  .hero-collage .h5-c { width: 200px; top: 9%; left: 5%; }
  /* Navbar desktop : menu inline, barre 66 px */
  .navbar-theme { height: 66px; }
  /* flex-wrap explicite : Bootstrap applique `flex-wrap: inherit` (donc `wrap`)
     au .container-fluid enfant d'une .navbar. Sans cela, sous ~1050 px la barre
     passait sur deux lignes et la rangée panier/CTA débordait du bandeau 66 px. */
  .navbar-theme .theme-navbar-inner { height: 66px; min-height: 66px; padding: 0 36px; flex-wrap: nowrap; }
  .theme-brand { font-size: 2.4rem; }
  .theme-brand span { font-size: 0.7rem; }
  /* 0,2,0 : le `.d-menu{display:none}` du CSS critique (0,1,0) ne peut plus
     masquer le menu desktop, même s'il est injecté après theme.css. */
  .navbar-theme .d-menu { display: flex; align-items: center; gap: 2px; }
  /* Chaque entrée occupe toute la hauteur de la barre : le sous-menu (.d-sub),
     ancré sur le <li>, démarre alors exactement sous le bandeau. */
  .d-menu > li { display: flex; align-items: center; height: 66px; position: relative; }
  .d-caret { margin-left: 0.35em; font-size: 0.9em; opacity: 0.7; }
  .d-menu a {
    font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82);
    text-decoration: none; padding: 0.5em 0.7em; border-radius: 8px; position: relative; transition: color 0.25s; white-space: nowrap;
  }
  .d-menu a::after {
    content: ''; position: absolute; left: 0.7em; right: 0.7em; bottom: 0.3em; height: 1.5px;
    background: var(--theme-gold); transform: scaleX(0); transform-origin: right; transition: transform 0.35s;
  }
  .d-menu a:hover { color: #fff; }
  .d-menu a:hover::after { transform: scaleX(1); transform-origin: left; }
  /* Page courante (classe posée par navbar.js) : pilule « verre fumé », le langage
     du panneau du hero. Le filet doré du survol est neutralisé pour ne pas faire
     deux repères à la fois. */
  .d-menu > li > a.is-active {
    color: rgba(255, 255, 255, 0.98);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    padding: 0.5em 0.95em;
  }
  .d-menu > li > a.is-active::after { content: none; }
  .d-menu > li > a.is-active:hover { color: #fff; }
  .theme-cart { width: 38px; height: 38px; }
  .theme-cart svg { width: 17px; height: 17px; }
  .theme-account { display: grid; width: 38px; height: 38px; }
  .theme-account svg { width: 17px; height: 17px; }
  .theme-cart .shop-badge { min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.6rem; }
  /* Burger (offcanvas) réservé au mobile/tablette : en desktop le menu inline
     .d-menu le remplace. Sans cette règle les deux cohabitaient et la barre
     affichait deux menus (l'inline + le burger). */
  .m-burger { display: none; }
}
/* Desktop étroit (992–1139 px) : le menu inline + la marque + le panier tiennent
   à peine sur une ligne. On resserre les espacements de la barre (aucune entrée
   n'est retirée) au lieu de laisser la rangée de droite sortir de l'écran. */
@media (min-width: 992px) and (max-width: 1139.98px) {
  .navbar-theme .theme-navbar-inner { padding: 0 26px; gap: 14px; }
  .d-menu a { font-size: 0.6rem; letter-spacing: 0.1em; padding: 0.5em; }
  .d-menu a::after { left: 0.5em; right: 0.5em; }
  .theme-brand { font-size: 2.2rem; }
}
/* Sous-menus du menu inline desktop (.d-menu). CSS pur : le panneau s'ouvre au
   survol et au focus clavier (:focus-within), sans JS. Le burger étant masqué
   ≥ 992 px, le menu inline remplace l'offcanvas et doit donc donner accès à
   TOUTES ses entrées (sinon des liens ne seraient atteignables qu'en mobile). */
.d-sub {
  position: absolute; top: 100%; left: 0; z-index: 6;
  min-width: 212px; margin: 0; padding: 6px; list-style: none;
  background: var(--theme-violet-deep);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.75);
  display: none;
}
.d-menu-has-sub:hover > .d-sub, .d-menu-has-sub:focus-within > .d-sub { display: block; }
/* Les dernières entrées sont proches du bord droit de la barre : leur panneau
   s'ancre à droite (il s'ouvre vers la gauche) pour ne pas sortir de l'écran
   quand la barre est juste assez large (992 px). */
.d-menu > li:nth-last-child(-n+2) > .d-sub { left: auto; right: 0; }
.d-sub a {
  display: block; padding: 0.55em 0.75em; border-radius: 8px;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82); text-decoration: none; white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.d-sub a::after { content: none; } /* pas de filet doré dans le panneau */
.d-sub a:hover, .d-sub a:focus { background: rgba(255, 255, 255, 0.09); color: #fff; }
/* Entrée correspondant à la page courante dans le panneau — placée après le :hover
   pour rester en or même survolée. */
.d-sub a.is-active { color: var(--theme-gold); background: rgba(255, 255, 255, 0.07); }

/* ---------------------------------------------------------------- Message ---
   Bandeau défilant de la page d'accueil — rubrique « Message » du groupe
   « Site » du panel admin (services/message.js + public/js/message.js).
   Le bloc existe en statique mais reste sur `hidden` : il ne se déplie que si
   le serveur confirme que le message est actif et dans sa fenêtre. */
.site-message {
  /* Surimposition, HORS flux : le bandeau se pose sur le haut du hero sans
     ajouter la moindre hauteur au document. En flux, il repoussait tout le
     contenu vers le bas — et le hero (.h5-stage en `align-items: center`,
     min-height: 100svh) perdait son centrage vertical, surtout en mobile.
     Aucun ancêtre n'est positioned (body et .site-wrap sont static) : le
     bloc se positionne donc par rapport à l'origine du document, à l'identique
     du wrapper .site-navbar. */
  position: absolute;
  left: 0;
  right: 0;
  top: var(--mobile-navbar-h, 66px);
  /* 7 : au-dessus des calques du hero (.h5-veil 1, .h5-layer 2, .h5-text 3,
     .h5-scroll 5) mais très en deçà du wrapper .site-navbar (1999) — le bandeau
     passe donc SOUS la barre fixe quand on remonte la page. */
  z-index: 7;
  padding: 11px 60px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(18, 10, 28, 0.97), rgba(58, 30, 84, 0.97), rgba(18, 10, 28, 0.97));
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
/* `hidden` perdrait le combat contre `display` : sans cette règle le bandeau
   serait visible avant même que /api/message ait répondu. */
.site-message[hidden] { display: none !important; }
/* Voiles sur les deux bords : le texte entre/sort en fondu et le bouton pause
   posé au-dessus reste lisible. */
.site-message::before, .site-message::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 1;
  pointer-events: none;
}
.site-message::before { left: 0; background: linear-gradient(90deg, rgba(18, 10, 28, 0.97), rgba(18, 10, 28, 0)); }
.site-message::after { right: 0; background: linear-gradient(270deg, rgba(18, 10, 28, 0.97), rgba(18, 10, 28, 0)); }
/* width: max-content : la largeur du track est EXACTEMENT la somme de ses deux
   moitiés identiques, seule condition pour un translateX(-50%) sans trou ni
   saccade. Un flex/fill la déformerait. */
.site-message__track {
  display: block;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: site-message-scroll 30s linear infinite;
}
.site-message__item { display: inline-block; padding-right: 1.5rem; }
.site-message:hover .site-message__track, .site-message--paused .site-message__track { animation-play-state: paused; }
.site-message__toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(18, 10, 28, 0.7);
  color: var(--theme-gold);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.site-message__toggle:hover, .site-message__toggle:focus-visible { background: var(--theme-gold); color: #140a1c; }
@keyframes site-message-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 575.98px) {
  .site-message { padding: 9px 50px; font-size: 0.78rem; }
}

/* Photo hero : la bascule mobile/desktop se fait dans le HTML via
   <picture><source media="(max-width: 575.98px)"> — mêmes media que les
   preloads du <head>. Rien à masquer en CSS : les 123 autres pages n'ont
   qu'une image, elles ne sont pas concernées. */
/* Accessibilité : désactiver les animations.
   NB : animation-iteration-count: 1 est INDISPENSABLE avec animation-duration
   réduite. Sans lui, une animation `infinite` (h5slow/h5slowd sur .h5-ph,
   h5drop sur .h5-scroll) boucle à des centaines de milliers de fois par
   seconde : la photo d'en-tête saute à chaque image entre scale(1.03) et
   scale(1.1) — c'est le « tremblement zoom/dézoom » constaté sous Windows +
   Edge quand les animations système sont désactivées. */
@media (prefers-reduced-motion: reduce) {
  .hero-collage *, .hero-collage *::before, .hero-collage *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Bandeau « Message » : son défilement est une animation `infinite`. Raccourcir
     l'animation (comme ci-dessus) la ferait SAUTER à -50 % puis s'arrêter, texte
     coupé en plein milieu : on la supprime entièrement et le conteneur devient
     un défilement horizontal manuel. Le bouton pause n'a plus d'objet. */
  .site-message__track { animation: none !important; transform: none !important; }
  .site-message { overflow-x: auto; }
  .site-message::before, .site-message::after, .site-message__toggle { display: none !important; }
}

/* ---------------------------------------------------------------- Partage ---
   Bloc de partage social (public/js/partage.js). Il vit DANS la carte (fiches
   pierre) ou sous la fiche produit — jamais en pleine largeur sous la page.
   Reprend le langage du thème : fond transparent, anneau or, libellé doré en
   capitales espacées (à l'identique de .pierre-badge.seo-label). Les deux
   contextes (fiche pierre sombre, modale violet) sont sombres : une seule
   variante suffit. */
.partage-share-slot {
  margin: 24px 0 2px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--theme-gold-rgb), 0.22);
}

.partage-label {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--theme-gold);
  background: rgba(var(--theme-gold-rgb), 0.12);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.5);
  border-radius: 999px;
  padding: 3px 11px;
  margin-bottom: 12px;
}

.partage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.partage-bar .partage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(var(--theme-gold-rgb), 0.10);
  border: 1px solid rgba(var(--theme-gold-rgb), 0.45);
  color: var(--theme-gold);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Icônes inline (v1.3.5) : la barre de partage n'utilise plus Font Awesome,
   pour fonctionner aussi sur /products/<handle> qui ne charge pas cette fonte. */
.partage-bar .partage-btn .partage-ico { display: inline-flex; align-items: center; justify-content: center; }
.partage-bar .partage-btn svg { width: 18px; height: 18px; display: block; }
.partage-bar .partage-btn:hover, .partage-bar .partage-btn:focus-visible {
  transform: translateY(-2px);
  background: var(--theme-gold);
  border-color: var(--theme-gold);
  color: var(--theme-violet-deep);
  box-shadow: 0 6px 18px rgba(var(--theme-gold-rgb), 0.28);
}

/* Confirmateur « lien copié » : le vert WhatsApp se lit sans ambiguïté. */
.partage-bar .partage-btn.is-copied {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

/* Le libellé long ne doit pas pousser les boutons hors écran sur petit mobile. */
@media (max-width: 400px) {
  .partage-bar { gap: 8px; }
  .partage-bar .partage-btn { width: 42px; height: 42px; font-size: 0.95rem; }
}

/* Lien vers la page partageable d'un événement (cartes agenda / événements). */
.event-page-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--theme-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--theme-gold-rgb), 0.4);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.event-page-link:hover, .event-page-link:focus-visible {
  color: #fff;
  border-color: #fff;
}

/* ------------------------------------------------- Modale de recadrage ---
   Outil « recadrer la photo » du panel boutique (Cropper.js). Le cadre carré
   correspond au format affiché sur le site (pipeline imagePipeline). Cibles
   tactiles larges (≥ 44 px) pour un usage confortable sur mobile. */
.crop-stage {
  position: relative;
  width: 100%;
  height: min(60vh, 520px);
  overflow: hidden;
  background: #1b1b1b;
  border-radius: 10px;
}

.crop-stage > img {
  display: block;
  max-width: 100%;
}

.crop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.crop-toolbar .crop-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.crop-toolbar .crop-sep {
  width: 1px;
  height: 26px;
  margin: 0 4px;
  background: rgba(0, 0, 0, 0.15);
}

.crop-straighten {
  margin-top: 10px;
}

.crop-straighten .form-range {
  width: 100%;
}

/* ============================================================================
   SÉLECTION PRODUITS DE L'ACCUEIL (v1.3.4)
   Réutilise .shop-card (boutique) : seule la PALETTE change, jamais la
   géométrie (aspect-ratio 1/1, grille Bootstrap) — les squelettes de
   index.html réservent donc exactement la hauteur des vraies cartes (anti-CLS).
   Rendu : public/js/home-selection.js.
   ============================================================================ */
.home-selection .shop-card {
  background: #fff;
  border-color: rgba(var(--theme-violet-rgb), 0.18);
  box-shadow: 0 10px 30px rgba(var(--theme-violet-dark-rgb), 0.08);
}
.home-selection .shop-card:hover { border-color: rgba(var(--theme-violet-rgb), 0.4); }
.home-selection .shop-card-img { background: rgba(var(--theme-violet-rgb), 0.06); }
.home-selection .shop-card-title, .home-selection .shop-card-title a { color: var(--theme-violet-dark); }
.home-selection .shop-card-title a:hover { color: var(--theme-violet); }
.home-selection .shop-card-price { color: var(--theme-violet-dark); font-size: 1.05rem; }

.home-selection-skeleton {
  height: 14px;
  border-radius: 7px;
  background: rgba(var(--theme-violet-rgb), 0.12);
}
.home-selection-skeleton.is-short { width: 55%; }