/* ==========================================================================
   THÈME SAISONNIER — « Halloween, nuit au jardin »

   Chargé UNIQUEMENT quand le thème est actif (cf. components/Layout.tsx) :
   le HTML porte alors data-theme="halloween" sur <html>. Tout est donc porté
   par [data-theme="halloween"], sauf la bascule .theme-toggle, qui doit
   rester utilisable quand le visiteur revient au thème habituel (le script
   retire l'attribut sans rechargement serveur).

   Ce fichier n'est PAS compilé par Tailwind : il est écrit à la main et
   chargé après tailwind.css. Comme il n'est pas dans une @layer, ses règles
   gagnent sur les couches base/components/utilities de Tailwind. C'est ce qui
   permet de surcharger les couleurs figées en dur (#fff, vert) sans toucher
   aux composants.

   Palette reprise des maquettes desktop / tablette / mobile :
     fond page   #111a16      bandeaux    #0a100d
     carte       #1c2b24      filets      #2c3e35
     texte       #f4ecdd      secondaire  #c9c0ae
     accent      #e8742a      accent clair #f08a3c    sur accent : #1a120b
   ========================================================================== */

[data-theme="halloween"] {
  color-scheme: dark;

  /* --- Jetons « Carnet d'atelier » remappés ------------------------------ */
  --color-paper: #111a16;
  --color-kraft: #0d1511;
  --color-mint: #16241d;
  --color-card: #1c2b24;
  --color-ink: #f4ecdd; /* 13.7:1 sur le fond nuit */
  --color-muted: #c9c0ae; /* 9.0:1 */
  --color-line: #2c3e35;

  /* Action principale : l'orange de la maquette. Le texte posé dessus passe
     en brun très sombre (#1a120b), pas en blanc : 8.9:1 au lieu de 2.5:1. */
  --color-green: #e8742a;
  --color-green-hover: #f08a3c;

  /* --color-forest reste SOMBRE : il sert de fond aux bandeaux (.order,
     footer, citation d'atelier). Les titres et prix qui l'utilisaient comme
     COULEUR DE TEXTE sont repris plus bas. */
  --color-forest: #0a100d;

  --color-rose: #f08a3c; /* focus, tampon, badge Nouveauté */
  --color-kraft-ink: #e9c48a;
  --color-retired: #e08681;

  /* Liens et texte d'accent sur fond sombre : l'orange pur (#e8742a) donne
     5.9:1, un peu juste pour du texte ; #f0a05a monte à 7.9:1. */
  --color-link: #f0a05a;
  --color-brand: #f08a3c;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="halloween"] body:not(.admin-body) {
  background-color: var(--color-paper);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Titres et textes d'accent
   `.text-forest` est un utilitaire Tailwind : il poserait du presque-noir sur
   le fond nuit (prix, compte de produits, etc.). On le remonte dans la même
   passe que les titres.
   -------------------------------------------------------------------------- */
[data-theme="halloween"] body:not(.admin-body) h1,
[data-theme="halloween"] body:not(.admin-body) h2 {
  color: var(--color-ink);
}
[data-theme="halloween"] .text-forest {
  color: var(--color-ink);
}
[data-theme="halloween"] .cat-card h3 {
  color: var(--color-ink);
}
[data-theme="halloween"] .price {
  color: var(--color-green-hover);
}
[data-theme="halloween"] .offer b {
  color: var(--color-green-hover);
}
[data-theme="halloween"] .cal {
  background: var(--color-card);
  border-color: var(--color-line);
}
[data-theme="halloween"] .cal b {
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Bandeau d'édition + bascule de thème
   -------------------------------------------------------------------------- */
[data-theme="halloween"] .theme-notice {
  color: var(--color-green-hover);
  font-weight: 700;
}

.theme-toggle {
  border: 1px solid #3a4c42;
  background: transparent;
  color: #f08a3c;
  border-radius: 999px;
}
.theme-toggle:hover {
  background: rgba(240, 138, 60, 0.14);
}

/* Logo : la signature habituelle est écrite en sombre, illisible sur le fond
   nuit. Le logo crème la remplace ; le portrait rond disparaît. Sans
   [data-theme] (visiteur revenu au thème habituel), c'est l'inverse. */
.theme-logo {
  display: none;
}
[data-theme="halloween"] .theme-logo {
  display: block;
}
[data-theme="halloween"] .theme-avatar,
[data-theme="halloween"] .theme-logo-default {
  display: none;
}

/* Sur mobile, le bandeau ne garde que l'annonce de l'édition (maquette). */
@media (max-width: 767.98px) {
  [data-theme="halloween"] .theme-trust {
    display: none;
  }
  [data-theme="halloween"] .theme-notice {
    font-size: 0.875rem;
  }
  /* Icône seule, sans pastille encadrée (maquette mobile). */
  .theme-toggle {
    border-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   En-tête : surfaces et boutons
   -------------------------------------------------------------------------- */
[data-theme="halloween"] header.sticky {
  background: rgba(17, 26, 22, 0.97);
  border-color: #24342c;
}
/* Le CTA de l'en-tête (desktop et panneau mobile) est un lien .bg-green.
   `.btn-primary` a le même problème : blanc sur orange. */
[data-theme="halloween"] header .bg-green,
[data-theme="halloween"] header .bg-green:hover,
[data-theme="halloween"] .btn-primary,
[data-theme="halloween"] .btn-primary:hover {
  color: #1a120b;
}
[data-theme="halloween"] .btn-primary:hover,
[data-theme="halloween"] header .bg-green:hover {
  background: var(--color-green-hover);
}

/* --------------------------------------------------------------------------
   Héros : puce, boutons secondaires, portraits
   -------------------------------------------------------------------------- */
[data-theme="halloween"] .hero {
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(239, 227, 200, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #16241d 0%, var(--color-paper) 100%);
}
[data-theme="halloween"] .chip {
  background: var(--color-card);
  border-color: #3a4c42;
  color: #efe3c8;
}
[data-theme="halloween"] .chip svg {
  color: var(--color-green-hover);
}
[data-theme="halloween"] .trust img,
[data-theme="halloween"] .trust .ico {
  border-color: #3a4c42;
}
[data-theme="halloween"] .trust .ico {
  background: #1a2a22;
  color: var(--color-green-hover);
}
[data-theme="halloween"] .btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-green-hover);
}
[data-theme="halloween"] .btn-secondary:hover {
  background: rgba(240, 138, 60, 0.12);
  color: var(--color-ink);
}
[data-theme="halloween"] .btn-light {
  background: var(--color-card);
  color: var(--color-ink);
}
[data-theme="halloween"] .btn-light:hover {
  background: #24372d;
  color: var(--color-ink);
}

/* Tampon « Réalisé en atelier » : version nuit de la maquette. */
[data-theme="halloween"] .stamp {
  background: rgba(17, 26, 22, 0.94);
  border-color: var(--color-green-hover);
  color: var(--color-green-hover);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Décor du héros ({{photo-atelier}})

   Le balisage n'est émis que si le thème est actif, mais ces éléments restent
   dans le HTML de la page : ils sont masqués par défaut, et n'apparaissent
   que sous [data-theme="halloween"] — donc jamais pour un visiteur revenu au
   thème habituel, même sur une page servie depuis le cache Varnish.
   -------------------------------------------------------------------------- */
.hh-web,
.hh-glow,
.hh-bat,
.hh-pumpkin {
  display: none;
}
[data-theme="halloween"] .hero-visual {
  isolation: isolate;
}
[data-theme="halloween"] .hero-visual .photo {
  position: relative;
  z-index: 1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
[data-theme="halloween"] .hero-visual .photo img {
  filter: saturate(0.92) brightness(0.92);
}

[data-theme="halloween"] .hh-web {
  display: block;
  position: absolute;
  left: -14px;
  top: -18px;
  width: clamp(96px, 24%, 160px);
  aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;
  opacity: 0.7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='%233a4c42' stroke-width='1.4'%3E%3Cpath d='M0 0L220 0M0 0L204 82M0 0L156 156M0 0L82 204M0 0L0 220M34 0Q27 5 32 13Q23 15 24 24Q15 23 13 32Q5 27 0 34M70 0Q56 11 65 26Q48 32 49 49Q32 48 26 65Q11 56 0 70M110 0Q89 17 102 41Q75 50 78 78Q50 75 41 102Q17 89 0 110M155 0Q125 24 144 58Q106 70 110 110Q70 106 58 144Q24 125 0 155M200 0Q161 31 185 75Q137 91 141 141Q91 137 75 185Q31 161 0 200'/%3E%3C/svg%3E") center / contain no-repeat;
}

[data-theme="halloween"] .hh-glow {
  display: block;
  position: absolute;
  right: -6%;
  top: 1%;
  width: clamp(130px, 30%, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #efe3c8;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  animation: hh-glow 5s ease-in-out infinite;
}
[data-theme="halloween"] .hh-glow::before,
[data-theme="halloween"] .hh-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #dccfaf;
}
[data-theme="halloween"] .hh-glow::before {
  width: 14%;
  aspect-ratio: 1;
  right: -18%;
  top: 40%;
}
[data-theme="halloween"] .hh-glow::after {
  width: 9%;
  aspect-ratio: 1;
  right: -30%;
  top: 68%;
}

[data-theme="halloween"] .hh-bat {
  display: block;
  position: absolute;
  z-index: 3;
  fill: #050908;
  pointer-events: none;
  animation: hh-fly 4s ease-in-out infinite;
}
[data-theme="halloween"] .hh-bat-1 {
  width: clamp(56px, 17%, 96px);
  left: -7%;
  top: -5%;
}
[data-theme="halloween"] .hh-bat-2 {
  width: clamp(36px, 11%, 60px);
  right: 16%;
  top: -8%;
  animation-duration: 5.5s;
}

[data-theme="halloween"] .hh-pumpkin {
  display: block;
  position: absolute;
  z-index: 3;
  right: -3%;
  bottom: 10%;
  width: clamp(46px, 12%, 72px);
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

/* Quand le heros porte le carrousel des creations, la carte ajoute un corps
   (date + titre + bouton) et la barre de navigation sous la photo. Pour que la
   citrouille reste posee sur le coin bas-droit de la photo, comme dans
   l'habillage d'origine, on remonte de la hauteur de ces deux blocs :
   nav 102 px (deux rangs sous 768 px) + marge 14 px + corps ~155 px = 270 px.
   Regle ici et non dans input.css : les feuilles de theme sont hors couche et
   gagnent sur les regles mises en couche par Tailwind. */
[data-theme="halloween"] .hero-visual:has(.slider) .hh-pumpkin {
  bottom: calc(10% + 270px);
}
@media (min-width: 768px) {
  [data-theme="halloween"] .hero-visual:has(.slider) .hh-pumpkin {
    /* nav 48 px + marge 14 px + corps ~140 px = 200 px */
    bottom: calc(10% + 200px);
  }
}

@keyframes hh-glow {
  0%, 100% { box-shadow: 0 0 60px 10px rgba(239, 227, 200, 0.18); }
  50% { box-shadow: 0 0 90px 22px rgba(239, 227, 200, 0.28); }
}
@keyframes hh-fly {
  0% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(-26px, -14px) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(-4deg); }
}

/* --------------------------------------------------------------------------
   Cartes, rails et produits
   -------------------------------------------------------------------------- */
[data-theme="halloween"] .path.primary {
  background: var(--color-green);
  border-color: var(--color-green);
  color: #1a120b;
}
[data-theme="halloween"] .path.primary small {
  color: rgba(26, 18, 11, 0.82);
}
[data-theme="halloween"] .path.primary .ic {
  background: rgba(26, 18, 11, 0.14);
  color: #1a120b;
}
[data-theme="halloween"] .path.primary .go {
  color: #1a120b;
}
[data-theme="halloween"] .path.primary:hover {
  background: var(--color-green-hover);
  border-color: var(--color-green-hover);
  color: #1a120b;
}

[data-theme="halloween"] .dates {
  background: #22352b;
  color: var(--color-ink);
}

[data-theme="halloween"] .badge-new,
[data-theme="halloween"] .badge-promo {
  background: var(--color-green);
  color: #1a120b;
}
[data-theme="halloween"] .badge-love {
  background: #22352b;
  color: var(--color-kraft-ink);
}
[data-theme="halloween"] .badge-retired {
  background: #22352b;
  color: var(--color-retired);
}
[data-theme="halloween"] .badge-cat {
  background: #22352b;
  color: var(--color-link);
}

[data-theme="halloween"] .potm-list img,
[data-theme="halloween"] .prod .img,
[data-theme="halloween"] .prod .img img,
[data-theme="halloween"] .w-24.h-24.bg-white {
  /* Les visuels produits Stampin'Up! sont détourés sur blanc : on garde un
     fond clair, sinon les stamps et papier blancs disparaissent. */
  background: #fff;
}

/* --------------------------------------------------------------------------
   Blocs sombres et formulaires
   -------------------------------------------------------------------------- */
[data-theme="halloween"] .order {
  background: var(--color-forest);
}
[data-theme="halloween"] .order .lead {
  color: #cdd8cf;
}
[data-theme="halloween"] .order .eyebrow {
  color: var(--color-green-hover);
}
[data-theme="halloween"] .steps li::before {
  background: var(--color-green-hover);
  color: #1a120b;
}
[data-theme="halloween"] .atelier-quote {
  background: #0a100d;
}
[data-theme="halloween"] .checks svg {
  color: var(--color-green-hover);
}

[data-theme="halloween"] .news {
  background: var(--color-mint);
}
[data-theme="halloween"] .news input[type="email"] {
  background: #0d1511;
  border-color: #3a4c42;
  color: var(--color-ink);
}
[data-theme="halloween"] .news input[type="email"]::placeholder {
  color: #9cae9f;
}
[data-theme="halloween"] .news input[type="email"]:focus {
  border-color: var(--color-green-hover);
  outline-color: rgba(240, 138, 60, 0.35);
}

[data-theme="halloween"] .prose blockquote {
  background: #16241d;
  border-left-color: var(--color-green-hover);
}
[data-theme="halloween"] .prose ol > li::before {
  background: var(--color-green);
  color: #1a120b;
}
[data-theme="halloween"] .article-palette {
  /* La palette de couleurs d'un article reste sur fond clair : les pastilles
     sont des échantillons de papier, pas des surfaces du site. */
  color: #2b2a26;
}

/* Les visuels « marque blanche » (bannières Stampin'Up! détourées) gardent
   leur fond clair d'origine, quelle que soit la carte qui les entoure. */
[data-theme="halloween"] .slide.wide img,
[data-theme="halloween"] .slide picture {
  background: #f9e7cb;
}

/* --------------------------------------------------------------------------
   Accessibilité : aucune animation pour qui a demandé à en être dispensé.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-theme="halloween"] .hh-bat,
  [data-theme="halloween"] .hh-glow {
    animation: none;
  }
}