/* =========================================================
   La Bouillante — les deux thèmes
   =========================================================

   Les couleurs de TOUT le site vivent ici, et nulle part ailleurs.
   Les deux pages du projet — le vitrine complet et la page « en
   construction » — chargent ce fichier. Une seule definition, donc
   pas de derives entre les deux.

   Ce fichier doit etre charge AVANT la feuille de style de la page :
   elle sappuie sur ces variables.
   ========================================================= */


/* =========================================================
   THÈMES
   ------------------------------------------------------------
   Deux ambiances, deux Azrael. Le site bascule de l'une à
   l'autre à chaque ouverture : le thème de la page précédente
   est peint dès la première image, puis remplacé 700 ms plus
   tard. On voit donc le site se métamorphoser.

   Tout ce qui porte la couleur passe par une variable. Les
   teintes ci-dessous sont donc listées deux fois — une fois
   par thème — plutôt que d'être écrites en dur dans les règles.
   ========================================================= */

:root {
  /* ---- Ambiance « braise » : le thème de référence -------- */
  --ink:      #17110f;
  --ink-2:    #1f1715;
  --ink-3:    #2a201c;
  --line:     rgba(246, 231, 214, 0.12);
  --cream:    #f6e7d6;
  --cream-dim:#cbb4a4;
  --cr:       #a3163b;
  --cr-light: #d4294f;
  --or:       #f2620f;
  --gold:     #f9c22e;
  --olive:    #7d8352;

  --header-bg: rgba(23, 17, 15, .78);
  --footer-bg: #120d0b;
  --panel-bg:  rgba(10, 6, 5, .66);
  --overlay-bg:rgba(23, 17, 15, .98);

  /* ---- Teintes dérivées ------------------------------------ */
  /* Le fond d'un texte posé sur une pastille dorée : très sombre,
     il doit l'être dans les deux thèmes. */
  --on-accent: #24120a;

  --cream-28: rgba(246, 231, 214, .28);
  --cream-22: rgba(246, 231, 214, .22);
  --cream-18: rgba(246, 231, 214, .18);
  --cream-16: rgba(246, 231, 214, .16);
  --cream-08: rgba(246, 231, 214, .08);
  --cream-07: rgba(246, 231, 214, .07);
  --cream-06: rgba(246, 231, 214, .06);

  --dim-75: rgba(203, 180, 164, .75);
  --dim-70: rgba(203, 180, 164, .70);
  --dim-65: rgba(203, 180, 164, .65);
  --dim-60: rgba(203, 180, 164, .60);
  --dim-30: rgba(203, 180, 164, .30);

  --or-50: rgba(242, 98, 15, .50);
  --or-45: rgba(242, 98, 15, .45);
  --or-35: rgba(242, 98, 15, .35);
  --or-34: rgba(242, 98, 15, .34);
  --or-30: rgba(242, 98, 15, .30);
  --or-28: rgba(242, 98, 15, .28);
  --or-22: rgba(242, 98, 15, .22);
  --or-18: rgba(242, 98, 15, .18);
  --or-12: rgba(242, 98, 15, .12);

  --cr-35: rgba(163, 22, 59, .35);
  --cr-28: rgba(163, 22, 59, .28);
  --cr-16: rgba(163, 22, 59, .16);

  --gold-45: rgba(249, 194, 46, .45);
  --gold-40: rgba(249, 194, 46, .40);
  --gold-30: rgba(249, 194, 46, .30);
  --gold-14: rgba(249, 194, 46, .14);
  --gold-10: rgba(249, 194, 46, .10);

  /* ---- L'échelle de feu ne change jamais ------------------- */
  /* Le chaud d'un piment reste du chaud, quel que soit Azrael
     qui regarde. Ces couleurs-là ne sont pas des couleurs de marque. */
  --heat-1: #f9c22e;
  --heat-2: #f2940f;
  --heat-3: #f2620f;
  --heat-4: #d4291f;
  --heat-5: #8b1030;

  /* ---- L'échelle du stock ------------------------------------ */
  /* Elle suit le thème : chaude en braise, bleue en Azrael. Un
     élément bleu sur un fond de braise, ça se voit immédiatement et
     donne l'impression d'un bug.
     Même marche de lecture dans les deux : plus il reste, plus c'est clair. */
  --stock-haut-tx:   #f6e7d6;
  --stock-haut-bg:   transparent;
  --stock-haut-bd:   rgba(246, 231, 214, .45);

  --stock-moyen-tx:  #f9c22e;
  --stock-moyen-bg:  rgba(249, 194, 46, .14);
  --stock-moyen-bd:  rgba(249, 194, 46, .40);

  --stock-faible-tx: #fff2e8;
  --stock-faible-bg: #a3163b;
  --stock-faible-bd: #d4294f;

  /* ---- Bouton principal et compteur du panier ---------------- */
  --cta-debut:  #f9c22e;
  --cta-fin:    #f2620f;
  --on-cta:     #24120a;
  --cta-ombre:  rgba(242, 98, 15, .28);

  /* ---- Bouton « Ajouter » de la sauce la plus forte ---------- */
  --hot-debut:  #ff8a3d;
  --hot-fin:    #a3163b;
  --hot-texte:  #fff2e8;
  --hot-ombre:  rgba(163, 22, 59, .35);

  /* ---- Autocollants du hero : legere transparence ----------- */
  /* Assez clair pour qu'on distingue Azrael au travers. */
  --sticker-bg: rgba(31, 23, 21, .72);

  /* ---- La fiche « Azrael bleu » ------------------------------ */
  /* Cette fiche reste bleue dans LES DEUX thèmes : elle accueille
     l'autre Azrael. Ses couleurs lui sont propres et ne suivent donc
     pas le thème. C'était des valeurs en dur dans les règles — elles
     ne bougeaient plus si le thème bleu changeait. D'où ces variables. */
  --az-fond-haut:  #0a2038;
  --az-fond:       #061527;
  --az-bordure:    rgba(0, 191, 230, .38);
  --az-bordure-vif:rgba(0, 191, 230, .62);
  --az-halo:       rgba(0, 191, 230, .22);
  --az-halo-doux:  rgba(0, 191, 230, .16);
  --az-ombre:      rgba(0, 120, 170, .38);
  --az-txt:        #7fd4ee;

  /* ---- Le flacon dessiné dans les fiches --------------------- */
  /* Bouchon, col, étiquette : du gris chaud en braise, du gris bleuté
     en thème bleu. Seule la sauce garde sa couleur de feu : c'est le
     produit, pas l'ambiance. */
  --flacon-bouchon: #241a17;
  --flacon-col:     #2f231f;
  --flacon-etiquette:#f4e7d6;
  --flacon-trait:   rgba(36, 18, 10, .28);
  --flacon-trait-fin:rgba(36, 18, 10, .16);

  /* ---- Bandes et reflets ------------------------------------- */
  --bande-bg: rgba(0, 0, 0, .25);
  --reflet:   rgba(255, 255, 255, .06);

  --radius:   18px;
  --radius-s: 10px;
  --shadow:   0 24px 60px rgba(0, 0, 0, 0.45);
  --max:      1180px;
  --gutter:   clamp(1.15rem, 4vw, 2.5rem);

  /* J Audio Cassette : l'unique fonte du site, du logotype au pied de page */
  --font-body: 'J Audio Cassette', 'Trebuchet MS', 'Segoe UI', sans-serif;
}

/* -----------------------------------------------------------------
   Ambiance « Azrael bleu » — les teintes relevées dans Azrael2.svg :
   bleu nuit, bleu roi, turquoise, or, vert d'eau.
   ----------------------------------------------------------------- */
:root[data-theme="azrael"] {
  --ink:      #061527;
  --ink-2:    #0a2038;
  --ink-3:    #10304f;
  --line:     rgba(154, 205, 240, .16);
  --cream:    #e7f1fb;
  --cream-dim:#a6c2db;
  --cr:       #0056a6;
  --cr-light: #5fd0f0;
  --or:       #2f8fd0;
  /* En thème bleu, l'or du dessin laisse la place a un bleu clair :
     c'est lui qui colore les surtitres, les chiffres cles, les tags. */
  --gold:     #8ad8f5;
  --olive:    #0aaa6c;

  --header-bg: rgba(6, 21, 39, .80);
  --footer-bg: #04101d;
  --panel-bg:  rgba(3, 13, 26, .68);
  --overlay-bg:rgba(6, 21, 39, .98);

  --on-accent: #08203a;

  --cream-28: rgba(198, 228, 250, .30);
  --cream-22: rgba(198, 228, 250, .24);
  --cream-18: rgba(198, 228, 250, .20);
  --cream-16: rgba(198, 228, 250, .17);
  --cream-08: rgba(198, 228, 250, .09);
  --cream-07: rgba(198, 228, 250, .08);
  --cream-06: rgba(198, 228, 250, .07);

  --dim-75: rgba(166, 194, 219, .78);
  --dim-70: rgba(166, 194, 219, .72);
  --dim-65: rgba(166, 194, 219, .68);
  --dim-60: rgba(166, 194, 219, .62);
  --dim-30: rgba(166, 194, 219, .32);

  --or-50: rgba(47, 143, 208, .52);
  --or-45: rgba(47, 143, 208, .46);
  --or-35: rgba(47, 143, 208, .36);
  --or-34: rgba(47, 143, 208, .35);
  --or-30: rgba(47, 143, 208, .30);
  --or-28: rgba(47, 143, 208, .28);
  --or-22: rgba(47, 143, 208, .22);
  --or-18: rgba(47, 143, 208, .18);
  --or-12: rgba(47, 143, 208, .12);

  --cr-35: rgba(0, 86, 166, .38);
  --cr-28: rgba(0, 86, 166, .30);
  --cr-16: rgba(0, 86, 166, .18);

  --gold-45: rgba(138, 216, 245, .48);
  --gold-40: rgba(138, 216, 245, .42);
  --gold-30: rgba(138, 216, 245, .32);
  --gold-14: rgba(138, 216, 245, .15);
  --gold-10: rgba(138, 216, 245, .11);

  /* ---- L'échelle du stock : la même marche, en bleu ---------- */
  --stock-haut-tx:   #ffffff;
  --stock-haut-bg:   transparent;
  --stock-haut-bd:   rgba(255, 255, 255, .45);

  --stock-moyen-tx:  #d8f0fb;
  --stock-moyen-bg:  rgba(93, 208, 240, .22);
  --stock-moyen-bd:  rgba(93, 208, 240, .50);

  --stock-faible-tx: #ffffff;
  --stock-faible-bg: #0b6ea8;
  --stock-faible-bd: #4fbde8;

  /* ---- Bouton principal et compteur du panier ---------------- */
  --cta-debut:  #ffffff;
  --cta-fin:    #2fa9dc;
  --on-cta:     #072a45;
  --cta-ombre:  rgba(47, 169, 220, .30);

  /* Le bouton « Ajouter » de la Caroline Reaper, en bleu. */
  --hot-debut:  #7fd4ee;
  --hot-fin:    #00508f;
  --hot-texte:  #062844;
  --hot-ombre:  rgba(0, 80, 143, .40);

  --sticker-bg: rgba(10, 32, 56, .72);

  /* ---- Le flacon --------------------------------------------- */
  --flacon-bouchon: #14243a;
  --flacon-col:     #0d1f33;
  --flacon-etiquette:#eaf4fd;
  --flacon-trait:   rgba(4, 16, 29, .30);
  --flacon-trait-fin:rgba(4, 16, 29, .18);

  --bande-bg: rgba(0, 0, 0, .30);
  --reflet:   rgba(180, 225, 255, .07);
}

/* -----------------------------------------------------------------
   La métamorphose
   -----------------------------------------------------------------
   La classe .morphing n'est posée que pendant la bascule. Elle force
   une transition sur tout ce qui porte de la couleur, puis elle est
   retirée : les survols gardent ensuite leurs propres transitions, qui
   sont plus courtes.
   ----------------------------------------------------------------- */
html.morphing, html.morphing body, html.morphing *::before, html.morphing *::after {
  transition:
    background-color .95s ease,
    background-image .95s ease,
    color .95s ease,
    border-color .95s ease,
    box-shadow .95s ease,
    fill .95s ease,
    stroke .95s ease,
    opacity .95s ease !important;
  transition-delay: 0s !important;
}

/* -----------------------------------------------------------------
   Le fondu
   -----------------------------------------------------------------
   Une seconde, pendant laquelle la page s'assombrit puis revient.

   Sans lui, une transition de couleur est un changement global et
   simultane : on voit chaque element passer au ralenti, un par un.
   Le fondu fait disparaitre le basculement dans le noir, et le
   visiteur ne voit que le fondu.

   On ne l'applique pas au tiroir du panier : il est en position fixe,
   et une opacite inferieure a 1 sur un ancetre le ferait dependre du
   document entier plutot que de la fenetre.
   ----------------------------------------------------------------- */
@keyframes fondu-theme {
  0%   { opacity: 1; }
  46%  { opacity: .16; }
  100% { opacity: 1; }
}
html.morphing .site-header,
html.morphing main,
html.morphing .site-footer {
  animation: fondu-theme 1s ease-in-out;
}