:root{
  --bg:#080808;
  --panel:#111009;
  --panel2:#17140f;
  --line:#3b3020;
  --gold:#d6aa55;
  --gold2:#f2d28c;
  --pink:#c65f91;
  --text:#fff7e8;
  --muted:#b9ac96;
  --accent: var(--gold);
  --radius:16px;
  --shadow:0 18px 50px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 85% 0%, rgba(214,170,85,.10), transparent 30%),
    var(--bg);
  transition:background-color .6s ease;
  color:var(--text);
  font:16px/1.55 "Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
h1,h2,h3,.script{
  font-family:"Playfair Display",Georgia,serif;
  letter-spacing:.02em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{color:var(--gold2);text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:600}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  background:rgba(8,8,8,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:44px;width:auto}
.main-nav{display:flex;gap:26px;align-items:center}
.main-nav a{color:var(--muted);font-size:14px;font-weight:600;letter-spacing:.03em;transition:color .2s}
.main-nav a:hover{color:var(--gold2)}
.header-actions{display:flex;align-items:center;gap:18px}
.icon-link{position:relative;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.icon-link:hover{color:var(--gold2)}
.badge{
  position:absolute;top:-8px;right:-12px;background:var(--pink);color:#fff;
  font-size:11px;font-weight:700;border-radius:99px;padding:1px 6px;
}

/* HERO */
.hero{
  /* Marge de recadrage de la photo du thème. Certaines images ont un cadre
     décoratif incrusté (bandes noires) : on repousse ces bandes hors du bloc
     au lieu de les afficher. 0 = photo utilisée telle quelle. */
  --hero-crop-y:0%;
  --hero-crop-x:0%;
  position:relative;
  margin:18px 24px 0;
  border-radius:24px;
  overflow:hidden;
  min-height:480px;
  display:flex;align-items:center;
  background:linear-gradient(135deg,#1a1610,#0d0b08);
  border:1px solid var(--line);
}
/* Couche photo */
.hero::after{
  content:"";
  position:absolute;
  inset:calc(-1 * var(--hero-crop-y)) calc(-1 * var(--hero-crop-x));
  background:var(--hero-img, none) center/cover no-repeat;
  z-index:0;
}
/* Voile dégradé : assez dense à gauche pour que le texte reste lisible,
   quasi transparent à droite pour laisser voir le décor de la photo. */
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  /* Dégradé seul, sans cadre ni flou : la photo reste visible partout,
     le texte tient sur l'assombrissement progressif + ses ombres portées. */
  background:linear-gradient(100deg,
    rgba(8,2,4,.90) 0%,
    rgba(8,2,4,.74) 24%,
    rgba(8,2,4,.44) 48%,
    rgba(8,2,4,.16) 76%,
    rgba(8,2,4,.04) 100%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2}
.hero-inner{padding:48px 46px;max-width:620px}
.hero .eyebrow{text-shadow:0 2px 10px rgba(0,0,0,.8)}
.hero h1{
  font-size:clamp(32px,4.6vw,50px);line-height:1.12;margin:0 0 10px;
  text-shadow:0 3px 20px rgba(0,0,0,.85);
}
.hero h1 .accent{
  color:var(--accent);display:block;
  text-shadow:0 3px 22px rgba(0,0,0,.9), 0 0 26px color-mix(in srgb, var(--accent) 40%, transparent);
}
.hero p.tagline{
  color:#e7dbc6;font-style:italic;margin:0 0 26px;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.hero .btn{
  padding:16px 32px;font-size:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#241a08;font-weight:700;padding:14px 26px;border-radius:99px;border:0;
  box-shadow:0 10px 24px rgba(214,170,85,.28);
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold2);box-shadow:none}
/* Bandeau d'arguments, placé entre le décompte et le hero — il ne recouvre
   plus la photo, donc plus besoin d'ombres ni de voile pour le lire. */
.hero-perks{
  margin:18px 24px 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.perk{
  display:flex;gap:10px;align-items:center;
  color:var(--gold2);font-size:13px;font-weight:600;line-height:1.35;
  padding:13px 16px;border-radius:12px;
  background:linear-gradient(180deg, rgba(18,4,8,.55), rgba(18,4,8,.32));
  border:1px solid var(--line);
}
.perk svg{flex:none;margin-top:2px}

/* ─────────────────────────────────────────────────────────────────────────
   GABARIT COMMUN AUX THÈMES SAISONNIERS
   Tout est dérivé de --bg (couleur_fond) et --accent (couleur_accent), les
   deux valeurs que themes.json fournit. Un nouveau thème n'a donc rien à
   écrire ici : il hérite du dégradé de fond, du bandeau sombre cerné de son
   accent et de la pastille de décompte en aplat d'accent.

   Spécificité volontairement égale à celle des blocs par thème qui suivent
   (html[data-theme="x"]), et placé AVANT eux : Noël et Halloween, réglés à
   la main, continuent donc de l'emporter.
   ───────────────────────────────────────────────────────────────────────── */
html[data-theme]{
  background:var(--bg);
  /* --gold/--gold2 sont la couleur de marque par défaut : boutons (dont
     .btn-mini du catalogue), prix, titres du footer, survol du menu. Sans ça,
     tous les thèmes gardaient des boutons dorés quelle que soit leur palette.
     Noël et le thème par défaut les réépinglent à leur valeur d'origine. */
  --gold:var(--accent);
  --gold2:color-mix(in srgb, var(--accent) 70%, #fff);
}
html[data-theme] .btn,
html[data-theme] .card .btn-mini,
html[data-theme] .btn-avertir.done{color:#17100a}
html[data-theme] body{background:transparent}
html[data-theme] body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 115% 82% at 50% 26%,
    color-mix(in srgb, var(--bg) 62%, var(--accent)) 0%,
    color-mix(in srgb, var(--bg) 82%, var(--accent)) 28%,
    var(--bg) 60%,
    color-mix(in srgb, var(--bg) 45%, #000) 100%);
}
html[data-theme] .site-header{background:color-mix(in srgb, var(--bg) 60%, #000)}
html[data-theme] .theme-banner{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 50%, #000),
    color-mix(in srgb, var(--bg) 22%, #000));
  border:1px solid var(--accent);
  box-shadow:0 0 24px color-mix(in srgb, var(--accent) 22%, transparent),
             0 10px 30px rgba(0,0,0,.45);
}
html[data-theme] .theme-banner strong{
  color:color-mix(in srgb, var(--accent) 62%, #fff);
  font-weight:400;font-style:italic;letter-spacing:.015em;
}
html[data-theme] .countdown .num{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent));
  border:1px solid color-mix(in srgb, var(--accent) 45%, #fff);
  box-shadow:0 0 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
html[data-theme] .countdown .num b{color:#100a06}
html[data-theme] .countdown .num span{color:#2c1c0d;font-weight:700}

/* Le thème par défaut n'est pas saisonnier : il garde le fond quasi noir et
   le halo doré d'origine, sans dégradé coloré. */
/* ─── MODE CLAIR (Pâques, fête des mères) ────────────────────────────────
   Le site est conçu en sombre : texte crème sur fond noir. Un fond pastel
   impose donc d'inverser texte, cartes, en-tête et vignettes, sinon plus
   rien n'est lisible. Porté par data-clair, indépendant de l'id du thème.
   ──────────────────────────────────────────────────────────────────────── */
html[data-clair]{
  --text:#3a2a33;
  --muted:#6d5a64;
  --panel:#ffffff;
  --panel2:#fbf4f8;
  --line:#e6d6df;
  --gold2:color-mix(in srgb, var(--accent) 78%, #000);
  --shadow:0 18px 40px rgba(120,90,105,.16);
}
/* Le hero fait exception : il reste sombre même en mode clair, que ce soit le
   voile posé sur la photo du thème ou le dégradé de repli quand il n'y en a
   pas. Son texte doit donc rester clair. Sans ces trois règles, le titre
   passait en gris foncé sur fond foncé — illisible sur Printemps et Pâques. */
html[data-clair] .hero h1{color:#fff7e8}
html[data-clair] .hero p.tagline{color:#e7dbc6}
html[data-clair] .hero .eyebrow{color:color-mix(in srgb, var(--accent) 55%, #fff)}
/* « Voir plus » est écrit dans la couleur d'accent, calibrée pour un fond
   sombre. Posée sur les cartes blanches du mode clair, elle disparaît :
   2,4:1 mesurés sur Printemps, pour un minimum de 4,5. On assombrit l'accent
   juste ce qu'il faut pour repasser le seuil sans perdre sa teinte. */
html[data-clair] .card .voir-plus{color:color-mix(in srgb, var(--accent) 55%, #000)}
html[data-clair] body::before{
  background:radial-gradient(ellipse 120% 92% at 50% 16%,
    #ffffff 0%,
    color-mix(in srgb, var(--bg) 45%, #fff) 40%,
    var(--bg) 74%,
    color-mix(in srgb, var(--bg) 74%, var(--accent)) 100%);
}
/* Le bandeau de saison et les quatre encadrés d'arguments étaient blancs en
   mode clair : posés sur un fond déjà pâle, ils s'effaçaient. Ils reprennent
   la couleur du thème, très assombrie — un aplat profond qui les détache du
   fond et répond au voile sombre du hero juste en dessous. La teinte reste
   dérivée de --accent : un thème clair vert donnera des panneaux vert foncé,
   sans rien avoir à écrire ici. */
html[data-clair] .theme-banner{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 62%, #2a1103),
    color-mix(in srgb, var(--accent) 40%, #2a1103));
  border:1px solid color-mix(in srgb, var(--accent) 72%, #000);
  box-shadow:0 8px 26px rgba(60,40,20,.24);
}
html[data-clair] .theme-banner strong{color:color-mix(in srgb, var(--accent) 30%, #fff)}
html[data-clair] .card .thumb{background:linear-gradient(135deg,#f4ecf1,#e9dfe6)}
html[data-clair] .perk{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 58%, #2a1103),
    color-mix(in srgb, var(--accent) 38%, #2a1103));
  border:1px solid color-mix(in srgb, var(--accent) 66%, #000);
  color:color-mix(in srgb, var(--accent) 26%, #fff);
}
html[data-clair] footer{background:rgba(255,255,255,.45)}

html[data-theme="defaut"]{
  --gold:#d6aa55;
  --gold2:#f2d28c;
  --line:#4c6642;
  --panel:#1f2c1a;
  --panel2:#273620;
  /* --muted sert de texte à même le vert, bien plus clair qu'un noir : le
     beige d'origine y tombait à 2,4 de contraste, et #f2eddf encore à 4,31
     sur le haut du dégradé. Il faut ce quasi-blanc pour dépasser 4,5. */
  --muted:#faf7ef;
}
/* Le voile du hero est calibré pour les photos de soirée, très sombres. La
   photo de mariage est en plein jour : mesurée sur la zone du texte, sa
   luminance moyenne est de 0,28, et 45 % de voile suffisent à faire passer
   le texte blanc au-dessus de 4,5 de contraste. À 90 % on écrasait une
   photo lumineuse pour rien. */
html[data-theme="defaut"] .hero::before{
  background:linear-gradient(100deg,
    rgba(10,7,4,.62) 0%,
    rgba(10,7,4,.50) 26%,
    rgba(10,7,4,.28) 52%,
    rgba(10,7,4,.10) 78%,
    rgba(10,7,4,.02) 100%);
}
/* Le fond était un quasi-noir sans dégradé, d'où un thème terne. Ce vert
   feuillage reprend la végétation de la photo de mariage et fait ressortir
   l'or, qui reste l'accent de marque.
   La teinte la plus claire est plafonnée à #59774a : au-delà d'une luminance
   de 0,168, le texte crème passe sous 4,5 de contraste. Le vert ne peut donc
   pas être plus clair sans basculer le texte en sombre. */
html[data-theme="defaut"] body::before{
  background:radial-gradient(ellipse 118% 84% at 50% 22%,
    #59774a 0%, #47603a 32%, var(--bg) 62%, #1b2416 100%);
}
html[data-theme="defaut"] .site-header{background:rgba(24,32,20,.93)}

/* ─── SAINT-VALENTIN — rose-rouge vif, accent rose pastel ───────────────
   Le gabarit générique éclaircit le fond vers le centre en y mélangeant
   l'accent. Impossible ici : #e00951 est déjà à 4,56 de contraste avec le
   texte crème, l'éclaircir ferait passer la page sous le seuil lisible. */
html[data-theme="saint-valentin"]{
  --line:#a8244a;
  --panel:#3a0d18;
  --panel2:#471220;
  /* --muted sert de texte à même le fond. Mesuré sur le rose-rouge pur du
     haut de page, un gris même clair tombait à 3,9 de contraste : il faut
     quasiment du blanc pour repasser au-dessus de 4,5. */
  --muted:#fff0f4;
}
/* Le rose-rouge de la charte est donc le point le plus clair : il occupe le
   haut de page, puis on descend vers un bordeaux profond. */
html[data-theme="saint-valentin"] body::before{
  background:radial-gradient(ellipse 120% 76% at 50% 16%,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 72%, #000) 36%,
    color-mix(in srgb, var(--bg) 45%, #000) 68%,
    color-mix(in srgb, var(--bg) 26%, #000) 100%);
}
html[data-theme="saint-valentin"] .site-header{background:rgba(58,6,26,.93)}

/* ─── NOUVEL AN — blanc, noir et or ─────────────────────────────────────
   Le gabarit générique teinterait le fond avec l'accent doré. Ici on garde
   un noir franc, et le blanc arrive par la pastille du décompte. */
html[data-theme="nouvel-an"] body::before{
  background:radial-gradient(ellipse 115% 82% at 50% 24%,
    #1c1a1f 0%, #131215 34%, var(--bg) 66%, #000 100%);
}
html[data-theme="nouvel-an"] .theme-banner{
  background:linear-gradient(90deg,#111013,#050506);
  border:1px solid var(--accent);
}
html[data-theme="nouvel-an"] .theme-banner strong{color:#fff}
html[data-theme="nouvel-an"] .countdown .num{
  background:linear-gradient(180deg,#fff,#efe9dc);
  border:1px solid var(--accent);
  box-shadow:0 0 20px color-mix(in srgb, var(--accent) 38%, transparent);
}
html[data-theme="nouvel-an"] .countdown .num b{color:#0a0a0c}
html[data-theme="nouvel-an"] .countdown .num span{color:#6a5a33}

/* ─── 14 JUILLET — bleu, blanc, rouge ───────────────────────────────────
   Le blanc manquait : il arrive par le titre du bandeau et la pastille. */
html[data-theme="14-juillet"] .theme-banner{
  background:linear-gradient(90deg,#0a0f26,#050813);
  border:1px solid #fff;
  box-shadow:0 0 22px rgba(255,255,255,.16), 0 10px 30px rgba(0,0,0,.45);
}
html[data-theme="14-juillet"] .theme-banner strong{color:#fff}
html[data-theme="14-juillet"] .countdown .num{
  background:linear-gradient(180deg,#fff,#eef1f8);
  border:1px solid var(--accent);
  box-shadow:0 0 20px rgba(255,255,255,.30);
}
html[data-theme="14-juillet"] .countdown .num b{color:#c2322b}
html[data-theme="14-juillet"] .countdown .num span{color:#16214d}

/* ─── ÉTÉ — coucher de soleil jaune > orange > rouge ────────────────────
   Le cœur jaune est volontairement calé au-dessus du haut de l'écran :
   mesuré en plein cadre, le texte crème tombait à 1,9 de contraste sur le
   jaune, donc illisible. Repoussé ainsi, il se lit comme une lueur en haut
   et le contenu retombe sur les rouges profonds. */
/* Ciel d'été : soleil jaune au-dessus de l'horizon, puis bleu ciel qui se
   fonce en descendant. Le jaune reste tout en haut, largement masqué par
   l'en-tête : c'est voulu. Étalé plus bas sur le bleu il tournait au vert, et
   éclaircir le fond aurait fait tomber le texte crème sous le seuil de
   lisibilité. Le jaune de la palette vit donc dans les accents — boutons,
   prix, liens « Voir plus » — où il ressort franchement.
   Contraste mesuré du texte courant sur le fond réel : 7,8:1. */
html[data-theme="ete"] body::before{
  background:linear-gradient(135deg,
    #4aa2d8 0%, #56abdd 16%, #6db8e2 32%, #92c8e7 46%, #c2d6d2 58%, #e8d3a2 70%,
    #eeb84e 82%, #e29524 92%, #d4820f 100%);
}

/* ─── ANNIVERSAIRE — arc-en-ciel ────────────────────────────────────────
   Un fond arc-en-ciel plein serait illisible : les couleurs passent par un
   halo diffus et par la bordure du bandeau. */
html[data-theme="anniversaire"] body::before{
  background:
    radial-gradient(circle at 12% 8%, rgba(255,86,86,.30), transparent 26%),
    radial-gradient(circle at 38% 4%, rgba(255,183,60,.28), transparent 24%),
    radial-gradient(circle at 62% 6%, rgba(88,220,140,.26), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(90,160,255,.30), transparent 26%),
    radial-gradient(circle at 50% 96%, rgba(200,110,255,.26), transparent 34%),
    radial-gradient(ellipse 115% 82% at 50% 30%, #2c1a5c 0%, var(--bg) 58%, #0a0518 100%);
}
html[data-theme="anniversaire"] .theme-banner{
  background:linear-gradient(90deg,#150c2e,#0a0518) padding-box,
             linear-gradient(90deg,#ff5656,#ffb73c,#58dc8c,#5aa0ff,#c86eff) border-box;
  border:2px solid transparent;
}
html[data-theme="anniversaire"] .theme-banner strong{color:#ffd9ec}

/* AMBIANCE NOËL — rouge costume du Père Noël, accents dorés.
   Le fond de page (--bg) vient de themes.json ; les cartes restent sombres
   pour se détacher du rouge, et --muted est éclairci car il sert aussi de
   couleur de texte à même le fond rouge (sous-titres, footer). */
html[data-theme="noel"]{
  --line:#7d2331;
  --panel:#2a0a11;
  --panel2:#35101a;
  --muted:#f0dcc6;
  /* réépinglés à l'or d'origine : le rendu de Noël est validé et en ligne,
     il ne doit pas bouger avec la généralisation du gabarit */
  --gold:#d6aa55;
  --gold2:#f2d28c;
}
/* Dégradé de fond : rouge plus clair au centre, plus sombre vers les bords.
   Porté par une couche fixe plutôt que par le fond du body, pour que le
   dégradé reste calé sur l'écran au lieu de s'étirer sur toute la hauteur
   de la page (sinon il devient invisible sur les pages longues). */
html[data-theme="noel"]{background:var(--bg)}
html[data-theme="noel"] body{background:transparent}
html[data-theme="noel"] body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 8% 6%, rgba(24,96,54,.22), transparent 26%),
    radial-gradient(ellipse 115% 82% at 50% 26%,
      color-mix(in srgb, var(--bg) 30%, #e01818) 0%,
      color-mix(in srgb, var(--bg) 60%, #c41111) 28%,
      var(--bg) 60%,
      color-mix(in srgb, var(--bg) 45%, #000) 100%);
}
html[data-theme="noel"] .site-header{background:rgba(42,10,17,.92)}
html[data-theme="noel"] footer{background:rgba(42,10,17,.45)}

/* Bandeau + décompte de Noël : bordeaux profond cerné d'or, et pastille
   dorée pleine pour le nombre de jours. Le bandeau translucide par défaut
   se noyait dans le fond rouge, quelle que soit la nuance choisie. */
html[data-theme="noel"] .theme-banner{
  background:linear-gradient(90deg,#2b0509,#180204);
  border:1px solid #e3b544;
  box-shadow:0 0 22px rgba(227,181,68,.18), 0 10px 30px rgba(0,0,0,.38);
}
html[data-theme="noel"] .theme-banner strong{
  color:#ffd97a;
  font-weight:400;
  font-style:italic;
  letter-spacing:.015em;
}
html[data-theme="noel"] .countdown .num{
  background:linear-gradient(135deg,#f2d28c,#d6aa55);
  border:1px solid #f6e0aa;
}
html[data-theme="noel"] .countdown .num b{color:#5c0a10}
html[data-theme="noel"] .countdown .num span{color:#6d1a1a;font-weight:600}

/* ─────────────────────────────────────────────────────────────────────────
   AMBIANCE HALLOWEEN — violet sorcière, accents orange citrouille.
   Même mécanique que Noël : le fond vient de couleur_fond (themes.json), le
   dégradé en est dérivé, et les cartes restent sombres pour s'en détacher.
   ───────────────────────────────────────────────────────────────────────── */
html[data-theme="halloween"]{
  --line:#6a3a94;
  --panel:#1d0b30;
  --panel2:#26103d;
  --muted:#e9dcf5;
  /* --gold/--gold2 sont la couleur de marque par défaut : ils alimentent les
     boutons (y compris .btn-mini du catalogue), les prix, les titres du
     footer, le survol du menu… Les redéfinir bascule tout le site en orange
     d'un coup, plutôt que de reprendre chaque règle une par une. */
  --gold:#ff8c32;
  --gold2:#ffbb70;
  background:var(--bg);
}
html[data-theme="halloween"] body{background:transparent}
html[data-theme="halloween"] body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    /* lueur de citrouille, en bas à droite */
    radial-gradient(circle at 88% 92%, rgba(255,140,50,.20), transparent 30%),
    radial-gradient(ellipse 115% 82% at 50% 26%,
      color-mix(in srgb, var(--bg) 34%, #8b3ade) 0%,
      color-mix(in srgb, var(--bg) 62%, #6a1fb5) 28%,
      var(--bg) 60%,
      color-mix(in srgb, var(--bg) 42%, #000) 100%);
}
html[data-theme="halloween"] .site-header{background:rgba(24,8,40,.92)}
html[data-theme="halloween"] footer{background:rgba(24,8,40,.45)}

/* Bandeau et décompte en noir & orange : sur le violet, le noir tranche
   nettement mieux qu'un violet plus sombre, qui s'y fondait. */
html[data-theme="halloween"] .theme-banner{
  background:linear-gradient(90deg,#171018,#0b070c);
  border:1px solid #ff8c32;
  box-shadow:0 0 24px rgba(255,140,50,.22), 0 10px 30px rgba(0,0,0,.45);
}
html[data-theme="halloween"] .theme-banner strong{
  color:#ffb066;
  font-weight:400;
  font-style:italic;
  letter-spacing:.015em;
}
/* pastille orange pleine sur le bandeau noir : c'est le nombre de jours
   qu'on veut voir en premier, il porte donc le seul aplat de couleur */
html[data-theme="halloween"] .countdown .num{
  background:linear-gradient(135deg,#ffa347,#ff7a12);
  border:1px solid #ffc98f;
  box-shadow:0 0 20px rgba(255,140,50,.45);
}
html[data-theme="halloween"] .countdown .num b{color:#0a0507}
html[data-theme="halloween"] .countdown .num span{color:#2a1405;font-weight:700}
/* La photo d'Halloween porte un panneau en bois écrit (PHOTOBOOTH, KARAOKÉ…)
   pile à l'endroit du titre. Le voile standard ne suffit pas à l'effacer :
   deux textes se superposaient. */
html[data-theme="halloween"] .hero::before{
  background:linear-gradient(100deg,
    rgba(10,2,18,.95) 0%,
    rgba(10,2,18,.90) 30%,
    rgba(10,2,18,.55) 54%,
    rgba(10,2,18,.20) 78%,
    rgba(10,2,18,.06) 100%);
}
/* le dégradé des boutons suit désormais --gold/--gold2 : il ne reste qu'à
   foncer le texte pour qu'il tienne sur l'orange */
html[data-theme="halloween"] .btn,
html[data-theme="halloween"] .card .btn-mini,
html[data-theme="halloween"] .btn-avertir.done{color:#2b0b06}
html[data-theme="halloween"] .btn.ghost{background:transparent;color:var(--gold2)}

/* ─────────────────────────────────────────────────────────────────────────
   BARRE DE NAVIGATION — NOIRE EN TOUTE SAISON
   Elle suivait le thème : verte au mariage, blanche en mode clair, violette
   à Halloween. Demande explicite d'Angélique : ce bandeau ne change jamais,
   quel que soit le thème. C'est le repère fixe du site, celui où le visiteur
   revient chercher « Animations », « Mon compte » ou son panier.

   Placé APRÈS tous les blocs par thème, à spécificité égale : c'est donc
   celui-ci qui l'emporte, y compris sur Noël, Halloween et le mode clair.
   Les libellés sont réépinglés en clair : sans ça, le mode clair les faisait
   passer en brun foncé, invisibles sur le noir.
   ───────────────────────────────────────────────────────────────────────── */
html[data-theme] .site-header,
html[data-clair] .site-header{
  background:rgba(8,8,8,.92);
  border-bottom:1px solid rgba(255,255,255,.10);
}
html[data-theme] .main-nav a,
html[data-clair] .main-nav a,
html[data-theme] .icon-link,
html[data-clair] .icon-link{color:#b9ac96}
html[data-theme] .main-nav a:hover,
html[data-clair] .main-nav a:hover,
html[data-theme] .icon-link:hover,
html[data-clair] .icon-link:hover{color:#f2d28c}

/* THEME BANNER (Noël / Halloween) */
.theme-banner{
  margin:18px 24px 0;padding:18px 28px;border-radius:16px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 3%, transparent));
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.theme-banner strong{font-family:"Playfair Display",serif;font-size:20px;color:var(--gold2)}
.countdown{display:flex;gap:10px}
.countdown .num{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;text-align:center;min-width:54px}
.countdown .num b{display:block;font-size:20px;color:var(--accent)}
.countdown .num span{font-size:10px;color:var(--muted);text-transform:uppercase}

/* SECTIONS */
section{padding:56px 0}
.section-title{text-align:center;margin:0 0 8px}
.section-sub{text-align:center;color:var(--muted);margin:0 0 34px;font-size:14px}

/* Mention légale sous les grilles de photos d'animations. Discrète mais lisible :
   elle doit être vue sans détourner l'attention des animations elles-mêmes. */
.mention-photos{
  margin:18px 0 0;text-align:center;
  color:var(--muted);font-size:12px;font-style:italic;line-height:1.5;
}

/* Réservations fermées : bandeau d'information et boutons d'achat neutralisés.
   Purement visuel — c'est le serveur qui refuse réellement les commandes. */
.bandeau-reservations{
  padding:12px 24px;text-align:center;
  background:#3a2410;border-bottom:1px solid #7a5a25;color:#ffe0a5;
  font-size:14px;font-weight:600;line-height:1.45;
}
html[data-reservations="fermees"] .btn-mini,
html[data-reservations="fermees"] .formule-card .btn{
  opacity:.45;filter:grayscale(1);cursor:not-allowed;
}

/* Filtres par univers du catalogue. Défilables horizontalement sur téléphone
   plutôt que repliés sur plusieurs lignes, pour ne pas repousser les animations
   trop bas. */
.filtres-univers{
  display:flex;gap:9px;justify-content:center;flex-wrap:wrap;
  margin:0 0 28px;padding:0 4px;
}
.filtre-univers{
  border:1px solid var(--line);border-radius:99px;background:transparent;
  color:var(--muted);padding:9px 18px;font-size:13px;font-weight:600;
  white-space:nowrap;transition:color .15s,border-color .15s,background .15s;
}
.filtre-univers:hover{color:var(--gold2);border-color:var(--accent)}
.filtre-univers.actif{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  border-color:transparent;color:#241a08;
}
.filtre-vide{margin:24px 0 0}
/* .card impose display:flex, ce qui l'emporte sur la règle [hidden]{display:none}
   du navigateur : sans cette ligne, les cartes filtrées restent visibles. */
.card[hidden],.avenir-card[hidden]{display:none}
@media(max-width:720px){
  .filtres-univers{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filtres-univers::-webkit-scrollbar{display:none}
}

/* GRID CARDS (nouveautés / catalogue) */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s, border-color .2s;
}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card .thumb{aspect-ratio:4/3;background:linear-gradient(135deg,#1c1710,#0d0b08);position:relative}
/* Vignette d'animation : la photo recouvre la case ; si elle n'existe pas encore
   (fichier absent), le script la retire et l'icône colorée du dessous apparaît. */
.thumb{overflow:hidden}
/* La carte est une colonne flex étirée à la hauteur de sa rangée : sans ceci, la
   vignette absorbe l'espace restant et n'a plus la même hauteur d'une carte à
   l'autre selon la longueur du texte. */
.card>.thumb,.avenir-card>.thumb{flex:0 0 auto;height:auto}
/* Photo et icône sont toutes deux en position absolue : la hauteur de la case
   reste dictée par son seul aspect-ratio, quelle que soit la longueur du texte. */
.thumb .thumb-icone{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(38px,7vw,54px);line-height:1;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));opacity:.92}
.thumb .thumb-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb .tag{z-index:2}
/* Teinte de fond par catégorie, visible tant qu'aucune photo n'est déposée */
.thumb.souvenirs{background:linear-gradient(135deg,#241a12,#0d0b08)}
.thumb.ambiance{background:linear-gradient(135deg,#1a1c24,#0d0b08)}
.thumb.gourmandises{background:linear-gradient(135deg,#2a1a1f,#0d0b08)}
.thumb.photo{background:linear-gradient(135deg,#122024,#0d0b08)}
.thumb.decoration{background:linear-gradient(135deg,#241f12,#0d0b08)}
.thumb.jeux{background:linear-gradient(135deg,#16241a,#0d0b08)}
.thumb.enfants{background:linear-gradient(135deg,#241624,#0d0b08)}
.card .thumb .tag{position:absolute;top:10px;left:10px;background:var(--pink);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;text-transform:uppercase}
.card .body{padding:14px}
.card h3{margin:0 0 4px;font-size:15px;font-family:Inter,sans-serif;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text)}
.card p{margin:0 0 12px;color:var(--muted);font-size:13px}
.card .voir-plus{color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* FORMULES */
.formules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.formule-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;
  display:flex;flex-direction:column;gap:12px;position:relative;
}
.formule-card.coup-de-coeur{border-color:var(--accent)}
.formule-badge{
  position:absolute;top:-12px;right:18px;background:var(--accent);color:#241a08;
  font-size:11px;font-weight:800;padding:5px 12px;border-radius:99px;
}
.formule-card h3{margin:0;font-size:19px}
.formule-card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;flex:1}
.formule-card li{font-size:13px;color:var(--muted);padding-left:16px;position:relative}
.formule-card li::before{content:"•";color:var(--accent);position:absolute;left:0}
.formule-price{display:flex;align-items:baseline;gap:10px}
.formule-price .now{font-size:26px;font-weight:800;color:var(--gold2)}
.formule-price .was{font-size:13px;color:var(--muted);text-decoration:line-through}
.formule-eco{font-size:11px;color:#72c58e;font-weight:700}

/* COMBINAISONS BANNER */
.combi-banner{
  margin:0 24px;padding:30px;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(90deg, rgba(198,95,145,.10), rgba(214,170,85,.05));
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
}
.combi-count{font-family:"Playfair Display",serif;font-size:44px;color:var(--accent);line-height:1}
.combi-count small{display:block;font-size:12px;color:var(--muted);font-family:Inter}

/* COMPOSER STEPS */
.composer-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.step-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#241a08;font-weight:800;font-size:13px;display:grid;place-items:center;margin-bottom:12px}
.step-card h4{margin:0 0 4px;font-size:14px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:1px solid var(--line);background:var(--panel2);color:var(--muted);padding:8px 14px;border-radius:99px;font-size:13px}
.chip.active{border-color:var(--accent);color:var(--gold2)}

/* À VENIR */
.avenir-track{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.avenir-card{
  flex:0 0 160px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
}
.avenir-card .thumb{aspect-ratio:4/5;background:linear-gradient(135deg,#1c1710,#0d0b08);position:relative}
.avenir-card .thumb .tag{position:absolute;top:8px;left:8px;background:transparent;border:1px solid var(--accent);color:var(--gold2);font-size:9px;font-weight:700;padding:2px 6px;border-radius:99px}
.avenir-card .body{padding:10px}
.avenir-card h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.btn-avertir{width:100%;border:1px solid var(--gold);background:transparent;color:var(--gold2);font-size:11px;font-weight:700;padding:8px;border-radius:99px}
.btn-avertir.done{background:var(--gold);color:#241a08}

/* AVIS */
.avis-wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:stretch}
.avis-score{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center;min-width:180px}
.avis-score .big{font-family:"Playfair Display",serif;font-size:38px;color:var(--accent)}
.avis-list{display:flex;gap:14px;flex:1;flex-wrap:wrap}
.avis-card{flex:1;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.avis-card p{color:var(--muted);font-size:13px;font-style:italic}
.avis-card .who{color:var(--gold2);font-weight:700;font-size:13px}
.avis-verified{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#72c58e;margin-top:6px}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:36px 0;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.footer-grid h5{color:var(--gold2);font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.footer-grid a{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.footer-grid a:hover{color:var(--gold2)}
.footer-bottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:12px}

/* Paliers nets pour les arguments : 4 de front, puis 2x2, puis 1 par ligne.
   En auto-fit, les largeurs intermédiaires laissaient un orphelin (3 + 1). */
@media (max-width:960px){
  .hero-perks{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:470px){
  .hero-perks{grid-template-columns:1fr}
}

@media (max-width:760px){
  .hero{min-height:420px}
  .hero-perks{margin:14px 16px 0;gap:8px}
  .perk{padding:11px 13px;font-size:12.5px}
  .hero-inner{padding:30px 24px;max-width:none}
  .site-header{flex-wrap:wrap;gap:10px}
  .main-nav{order:3;width:100%;justify-content:space-between;overflow-x:auto}
}

@keyframes fb-neige-tombe{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(110vh) translateX(24px) rotate(360deg);opacity:.85}
}

/* Traversée d'écran des chauves-souris, avec un louvoiement vertical pour
   éviter la ligne droite. Le battement d'ailes est sur l'élément enfant. */
@keyframes fb-chauve-souris-vol{
  0%{transform:translateX(-14vw) translateY(0);opacity:0}
  7%{opacity:.9}
  25%{transform:translateX(16vw) translateY(-34px)}
  50%{transform:translateX(48vw) translateY(22px)}
  75%{transform:translateX(80vw) translateY(-26px)}
  93%{opacity:.9}
  100%{transform:translateX(116vw) translateY(0);opacity:0}
}
@keyframes fb-chauve-souris-ailes{
  0%,100%{transform:scaleX(1) scaleY(1)}
  50%{transform:scaleX(.68) scaleY(1.08)}
}

@keyframes fb-brume-derive{
  0%{transform:translateX(-7%)}
  100%{transform:translateX(7%)}
}

/* Pluie d'emojis : cœurs (qui remontent), œufs de Pâques, cadeaux. */
@keyframes fb-pluie-tombe{
  0%{transform:translateY(-10vh) translateX(0) rotate(-8deg);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(115vh) translateX(30px) rotate(12deg);opacity:.9}
}
@keyframes fb-pluie-monte{
  0%{transform:translateY(10vh) translateX(0) scale(.85);opacity:0}
  12%{opacity:1}
  100%{transform:translateY(-115vh) translateX(26px) scale(1.05);opacity:.85}
}

/* Un éclat de gerbe part du centre vers sa position finale, portée par les
   variables --dx/--dy que le JS calcule pour répartir les éclats en cercle. */
/* Un pétale ne tombe pas droit : il vire d'un côté puis de l'autre en
   tournant sur lui-même. */
@keyframes fb-petale-tombe{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg);opacity:0}
  8%{opacity:1}
  35%{transform:translateY(32vh) translateX(34px) rotate(150deg)}
  65%{transform:translateY(68vh) translateX(-22px) rotate(290deg)}
  100%{transform:translateY(118vh) translateX(18px) rotate(430deg);opacity:.8}
}

@keyframes fb-feu-eclat{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.25);opacity:0}
}

/* Papillons de l'été. Trois animations superposées, chacune sur son élément :
   la traversée de l'écran, le chaloupé vertical, et le battement des ailes.
   Les séparer permet des durées sans rapport entre elles — un papillon bat
   des ailes bien plus vite qu'il n'avance —, ce qu'un seul keyframe ne
   saurait pas faire. */
@keyframes fb-papillon-traverse{
  0%{transform:translateX(-12vw);opacity:0}
  6%{opacity:1}
  94%{opacity:1}
  100%{transform:translateX(112vw);opacity:0}
}
/* Sens inverse : la moitié des papillons vient de la droite. */
@keyframes fb-papillon-traverse-retour{
  0%{transform:translateX(112vw) scaleX(-1);opacity:0}
  6%{opacity:1}
  94%{opacity:1}
  100%{transform:translateX(-12vw) scaleX(-1);opacity:0}
}
/* Le vol d'un papillon n'est pas une ligne : il monte, redescend, hésite. */
@keyframes fb-papillon-chaloupe{
  0%{transform:translateY(0) rotate(-6deg)}
  20%{transform:translateY(-26px) rotate(5deg)}
  45%{transform:translateY(12px) rotate(-8deg)}
  70%{transform:translateY(-18px) rotate(7deg)}
  100%{transform:translateY(0) rotate(-6deg)}
}
/* Les ailes se replient vers le corps : c'est une rotation en perspective,
   pas un simple aplatissement, sinon le battement paraît mécanique. */
@keyframes fb-papillon-aile-gauche{
  0%,100%{transform:rotateY(12deg)}
  50%{transform:rotateY(74deg)}
}
@keyframes fb-papillon-aile-droite{
  0%,100%{transform:rotateY(-12deg)}
  50%{transform:rotateY(-74deg)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .card:hover, .btn:hover{transform:none}
  #effet-neige{display:none}
}