/* ════════════════════════════════════════════════════════════════
   Melor — Thème « Luxe Éditorial », variante claire
   Chargé APRÈS css/theme.css. Retirer la balise <link> annule tout.

   Aucune couleur inventée : les huit rôles ci-dessous sont dérivés
   des couleurs déjà présentes sur le site (audit du 06/09/2026).
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Rôles ───────────────────────────────────────────────────
     bg        ivoire du site, inchangé
     bg-soft   rose #F5CBD9 demandé — toutes les surfaces roses du site
     ink       charcoal du site, inchangé (H344 S15 % L14 %)
     ink-soft  warm-gray du site, assombri de 4 pts pour rester lisible sur le rose
     muted     soft-gray du site, assombri pour atteindre 3:1
     accent    rose gold #D4909A assombri (L 70 → 38 %)
     accent-hi accent, L −7 (survol)
     accent-2  champagne #E8D5C4 assombri et désaturé (bronze)
     line      champagne, neutralisé — filets opaques
  */
  --bg:         #FFFBF7;
  --bg-soft:    #F5CBD9;
  --ink:        #2A1F22;
  --ink-soft:   #655558;
  --muted:      #9C8A8E;
  --accent:     #863C47;
  --accent-hi:  #6D313A;
  --accent-2:   #624E37;
  --line:       #E6DCDA;
  --panel:      rgba(42, 31, 34, 0.06);   /* --ink à 6 % */
  --hairline:   rgba(134, 60, 71, 0.20);  /* --accent à 20 % */
  --shade:      rgba(42, 31, 34, 0.05);   /* ombres, très retenues */

  /* Surfaces sombres (pied de page) : filets et voiles inversés */
  --hairline-invert:     rgba(230, 220, 218, 0.22);
  --panel-invert:        rgba(255, 251, 247, 0.07);
  --accent-soft-invert:  rgba(230, 220, 218, 0.45);
  --transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --danger:     #C2414E;                  /* rouge existant du site */
  --wa:         #25D366;

  /* Logo : même teinte que le rose des surfaces (H340), assombrie pour rester
     lisible sur l'ivoire — le rose clair y tomberait à 1,4:1. */
  --brand-rose:       #A63F62;
  --brand-rose-light: #C0597B;

  /* ── Alias : les anciennes variables pointent vers les rôles.
     Les 436 styles en ligne du JS passent par elles, donc tout se
     recolore sans toucher aux gabarits. ── */
  --ivory:            var(--bg);
  --cream:            var(--bg-soft);
  --blush:            var(--bg-soft);
  --powder:           var(--bg-soft);
  --rose-gold:        var(--accent);
  --rose-gold-deep:   var(--accent);
  --rose-gold-light:  var(--accent-hi);
  --burgundy:         var(--ink);
  --charcoal:         var(--ink);
  --warm-gray:        var(--ink-soft);
  --soft-gray:        var(--muted);
  --champagne:        var(--line);
  --radius:           18px;   /* cartes, images, conteneurs */
  --radius-sm:        12px;   /* petits contrôles, champs */
  --radius-pill:      100px;  /* boutons, badges, filtres */
  --shadow-soft:      none;

  /* Rythme vertical, réduit sur téléphone (voir la requête média en bas) */
  --section-y:        88px;
  --hero-y:           96px;
  --hero-min:         88vh;
}

/* ════ Matière : grain photographique global ════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Les halos flous d'origine sont supprimés : le grain porte la matière. */
#blobs { display: none !important; }

/* ════ Typographie ════
   Cormorant Garamond (titres) + Raleway (corps, interface, pied de page),
   Cinzel restant réservé à la barre du haut.
   Cinzel est retiré du site. */
/* `html` en tête de sélecteur : le Preflight de Tailwind est injecté par le CDN
   APRÈS cette feuille et remet h1–h6 à font-size/font-weight: inherit. */
html h1, html h2, html h3, html h4, html h5, html h6 {
  font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--ink);
}
html h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
html h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
html h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
html h4 { font-size: 1rem; }

em { font-style: italic; color: var(--accent-2); }

/* Corps de page et pied de page : Raleway, plus douce que l'Inter d'origine.
   `html body` passe devant la règle de css/theme.css et le Preflight Tailwind. */
html body { font-family: 'Raleway', system-ui, sans-serif; }
.admin-nav-item { font-family: inherit; }

/* Surtitre de section (classe existante du site) */
.melor-nav-label {
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 400;
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
}

.melor-logo {
  font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
  font-weight: 300;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Aucune graisse lourde nulle part */
strong, b { font-weight: 500; }

/* ════ Boutons ════
   Forme pilule conservée (signature Melor) — arbitrage assumé §11. */
.grad-btn {
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background .25s var(--transition), border-color .25s var(--transition), color .25s var(--transition);
}
.grad-btn:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  box-shadow: none;
  transform: none;
}
.grad-btn:disabled { opacity: .35; }

.ghost-btn {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: border-color .25s var(--transition), color .25s var(--transition), background .25s var(--transition);
}
.ghost-btn:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.wa-btn { font-weight: 400; box-shadow: none; }
.wa-btn:hover { box-shadow: none; background: #20BD5C; }

/* ════ Surfaces ════ */
.glass {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: none;
}
.glass-hover:hover {
  transform: none;
  border-color: var(--accent);
  box-shadow: none;
}

.glass-input {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 400;
}
.glass-input:focus {
  border-color: var(--accent);
  box-shadow: none;
}
.glass-input::placeholder { color: var(--muted); }

/* ════ Carte produit ════ */
.melor-product-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: none;
}
.melor-product-card .img-wrap { background: var(--bg-soft); }
.product-card { transition: border-color .3s var(--transition); }
.product-card:hover { transform: none; border-color: var(--accent); }
.product-card .img-wrap img { transition: transform .6s var(--transition); }
.product-card:hover .img-wrap img { transform: scale(1.05); }
.melor-heart { color: var(--muted); }
.melor-heart:hover { color: var(--accent); }

.badge-grad {
  background: var(--accent);
  color: var(--bg);
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 400;
  font-size: .55rem;
  letter-spacing: .25em;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}
.badge-2 { background: var(--accent-2); }

/* ════ Filtres, sélecteurs, tableau ════ */
.pill {
  border-radius: var(--radius-pill);
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 400;
  font-size: .65rem;
  letter-spacing: .2em;
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.pill.active { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: none; }
.pill.inactive { background: transparent; color: var(--ink-soft); }
.pill.inactive:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

.qty-stepper { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: transparent; }
.qty-btn { color: var(--ink); }
.qty-btn:hover { background: var(--panel); }
.qty-val { font-weight: 400; font-size: 1rem; }

.data-table th {
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .2em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--accent);
  border-bottom: 1px solid var(--hairline);
}
.data-table td { border-bottom: 1px solid var(--hairline); }
.data-table tr:hover td { background: var(--panel); }

.admin-nav-item { border-radius: var(--radius-sm); font-weight: 400; }
.admin-nav-item.active { background: var(--panel); color: var(--ink); border: 1px solid var(--hairline); box-shadow: none; }

/* Dégradés de texte hérités → accent plein */
.grad-text, .grad-text-primary {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--accent);
}

/* ════ Hero : la photo des coffrets, estompée sous un voile rose poudré ════
   Le dégradé est cuit dans l'image (voile plus dense au centre, sous le texte) ;
   la couleur de fond reste en secours si l'image ne charge pas. */
.hero-visual {
  background-color: var(--bg-soft);
  background-image: url('gloss/hero-collection.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-visual .melor-nav-label { color: var(--accent-hi); }

/* ════ Navbar ════
   Exception assumée à la règle « deux familles » : la barre du haut garde
   la typographie d'origine du site (Cinzel), à la demande. */
.navbar .melor-logo {
  font-family: 'Cinzel', ui-serif, Georgia, serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: .5em;
  color: var(--brand-rose);
  position: relative;
  display: inline-block;
  transition: color .35s var(--transition);
}
/* Filet qui se déploie du centre au survol ; la largeur retranche l'interlettrage
   final, sinon le trait dépasserait de 10 px après le R. */
.navbar .melor-logo::after {
  content: '';
  position: absolute;
  left: 0; bottom: -7px;
  width: calc(100% - .5em); height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--transition);
}
.navbar button:hover .melor-logo { color: var(--brand-rose-light); }
.navbar button:hover .melor-logo::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .navbar .melor-logo, .navbar .melor-logo::after { transition: none; }
}
.navbar .melor-nav-label {
  font-family: 'Cinzel', ui-serif, Georgia, serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .4em;
}

/* ════ Navbar évolutive ════ */
.navbar {
  background: linear-gradient(to bottom, rgba(255,251,247,.85), rgba(255,251,247,0));
  border-bottom: 1px solid transparent;
  transition: background .35s var(--transition), border-color .35s var(--transition), backdrop-filter .35s var(--transition);
}
.navbar.is-scrolled {
  background: rgba(255, 251, 247, .97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.navbar nav button { position: relative; }
.navbar nav button::after {
  content: '';
  position: absolute;
  left: 0; bottom: 4px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .35s var(--transition);
}
.navbar nav button:hover::after { width: 100%; }

/* ════ Filets et séparateurs ════ */
.rule-accent {
  width: 48px; height: 1px;
  background: var(--accent);
  margin: 0 auto;
}

/* ════ Révélation au scroll ════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--transition), transform .8s var(--transition);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ════ Curseur personnalisé ════ */
@media (hover: hover) and (pointer: fine) {
  body.luxe-cursor, body.luxe-cursor * { cursor: none !important; }
}
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.cursor-dot, .cursor-ring { opacity: 0; }   /* invisibles tant que la souris n'a pas bougé */
/* Masqué au doigt seulement — la largeur d'écran n'entre pas en compte :
   un téléphone ou une tablette avec souris garde le curseur personnalisé. */
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }
.cursor-dot  { width: 6px;  height: 6px;  background: var(--accent); margin: -3px 0 0 -3px; }
.cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid var(--hairline);
  margin: -16px 0 0 -16px;
  transition: width .3s var(--transition), height .3s var(--transition), margin .3s var(--transition), border-color .3s var(--transition);
}
.cursor-ring.is-hover {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-color: var(--accent);
}

/* ════ Loader ════ */
#luxe-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity .6s var(--transition), visibility .6s var(--transition);
}
#luxe-loader.is-done { opacity: 0; visibility: hidden; }
#luxe-loader .luxe-loader-name {
  font-family: 'Cinzel', ui-serif, Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  letter-spacing: .5em;
  text-indent: .5em;
  text-transform: uppercase;
  color: var(--brand-rose);
}
#luxe-loader .luxe-loader-bar { width: 200px; height: 1px; background: rgba(166, 63, 98, .25); overflow: hidden; }
#luxe-loader .luxe-loader-bar span { display: block; width: 0; height: 100%; background: var(--accent); animation: luxe-fill 1.3s var(--transition) forwards; }
@keyframes luxe-fill { to { width: 100%; } }

/* ════ Bouton flottant WhatsApp ════ */
#wa-fab {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 90;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .25);
  transition: transform .25s var(--transition);
}
#wa-fab:hover { transform: translateY(-2px); }
@media (max-width: 700px) { #wa-fab { right: 16px; bottom: 16px; width: 46px; height: 46px; } }

/* ════ Toast ════ */
.toast-item {
  background: var(--bg) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  font-weight: 300 !important;
  letter-spacing: .08em;
}
#toast-root { right: 50% !important; transform: translateX(50%); align-items: center; }

/* ════ Barre de défilement ════ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }

/* ════ Focus visible ════ */
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* ════ Accessibilité : mouvement réduit ════ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .fade-up, .modal-content, .toast-item { animation: none !important; }
  .cursor-dot, .cursor-ring, #luxe-loader { display: none !important; }
  body.luxe-cursor, body.luxe-cursor * { cursor: auto !important; }
  * { scroll-behavior: auto !important; }
}

/* ════════════════════════════════════════════════════════════════
   Téléphone — le site est majoritairement consulté au doigt
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  :root { --section-y: 56px; --hero-y: 68px; --hero-min: 74vh; --radius: 16px; }

  body { overflow-x: hidden; }

  html h1 { font-size: 2rem; }
  html h2 { font-size: 1.7rem; }

  /* Cibles tactiles : 44 px minimum sur les icônes de la barre */
  .navbar button { min-width: 44px; min-height: 44px; }

  /* Cartes produit en deux colonnes : on resserre la typographie */
  .melor-product-card h3 { font-size: 1rem; }
  .melor-product-card .melor-add-btn { opacity: 1; transform: none; font-size: .6rem; letter-spacing: .12em; }
  .badge-grad { font-size: .5rem; padding: 4px 9px; }

}

@media (max-width: 560px) {
  .grad-btn, .ghost-btn { font-size: .65rem; letter-spacing: .14em; }
  /* « Ajouter au panier » doit tenir sur une ligne dans une carte demi-largeur */
  .melor-product-card .melor-add-btn { font-size: .55rem; letter-spacing: .06em; padding: 12px 6px !important; }
}