/**
 * Jetons de design — source unique des valeurs visuelles.
 *
 * Toute couleur, police ou gouttière utilisée ailleurs vient d'ici. Une valeur
 * en dur dans styles.css ou dans une feuille de module est un bug : voir la
 * règle de source unique dans docs/CONVENTIONS.md.
 *
 * Chargé avant styles.css, qui en dépend.
 */
/* Échelle d'empilement. Les couches se nomment, elles ne se devinent pas :
   `.bo` était à 90 parce que le back-office se posait alors sur le site
   public, ce qui a obligé huit surcouches à se relever au-dessus de lui, une
   règle chacune. Un nombre choisi dans son coin finit toujours par en appeler
   un autre.

   ⚠️ Ajouter une couche, c'est l'ajouter ici — pas dans une règle isolée. */
:root{
  --z-app: 1;          /* shell d'une application : /admin, /pro */
  --z-sticky: 40;      /* barres collantes, bouton panier */
  --z-overlay: 70;     /* surcouches modales : .ov */
  --z-page: 72;        /* pages légales par-dessus une surcouche */
  --z-drawer: 73;      /* tiroirs latéraux */
  /* Le calendrier de saisie sort de son conteneur — il est en `fixed`, posé
     sur le corps, sans quoi le premier parent qui rogne son débordement lui
     coupe sa dernière semaine. Il doit donc passer au-dessus des tiroirs et
     des surcouches, puisqu'il s'ouvre depuis un formulaire qui y vit. Sous le
     bandeau de consentement et sous les messages : ceux-là priment sur tout. */
  --z-popover: 80;     /* calendrier de saisie, par-dessus une modale */
  /* ⚠️ **Le bandeau de mode test passe SOUS les modales, pas au-dessus.** Il
     empruntait `--z-cookies`, donc il recouvrait pages légales et tiroirs — et
     il **interceptait les clics** sur leur bouton de fermeture, toujours placé
     en haut. Une modale doit pouvoir se refermer ; un bandeau d'information,
     non. Il reste au-dessus de tout le reste : en-tête collant compris. */
  --z-mode-test: 60;   /* bandeau « mode test » : au-dessus du site, sous les modales */
  --z-cookies: 95;     /* bandeau de consentement, au-dessus de tout */
  --z-toast: 100;      /* messages : rien ne doit les masquer */

  /* Hauteur du bandeau « mode test ». Nulle en mode réel : tout ce qui se
     positionne par rapport au haut de la fenêtre l'ajoute, et rien n'est à
     corriger le jour où le bandeau disparaît. J'ai oublié deux surfaces en
     décalant à la main — une variable ne s'oublie pas. */
  /* ⚠️ **La hauteur de l'en-tête se nomme, elle ne se recopie pas.** Elle était
     écrite `76px` en dur à deux endroits — l'ancrage de la barre d'ancres et son
     variant mobile — alors que l'en-tête en fait **79** : la barre se collait
     3 px sous lui en grand format, et **33 px** en petit, où la règle laissait en
     plus tomber `--h-mode-test`. Un nombre recopié dérive ; nommé, il se corrige
     une fois. `tests/bandeaux.spec.js` vérifie qu'il vaut toujours la hauteur
     réellement mesurée. */
  --h-entete: 79px;

  --h-mode-test: 0px;
}

:root{
  /* Palette — validée par la cliente, ne pas modifier sans son accord */
  --creme:#F7EFE6; --creme-2:#F2E7D9; --peche:#F2D9C9; --rose:#E8B7AF;
  --sauge:#A6B09C; --terracotta:#C47A53; --terracotta-2:#B88058;
  --encre:#222221; --encre-60:rgba(34,34,33,.62); --blanc:#FDFAF5;
  /* ⚠️ `--or` a été retiré : il n'était employé nulle part et ne faisait que
     dupliquer la teinte du Kundalini, qui est une **donnée de pratique** et vit
     dans sa ligne. Les jetons d'ici sont les couleurs du décor ; une teinte qui
     appartient à une entité n'en est pas une. */
  /* Le refus : bouton dangereux, code promo rejeté. Elle était écrite en dur
     à trois endroits, dont un `element.style` dans le module boutique. */
  --brique:#B4543B;
  --accent:var(--terracotta); --accent-soft:#F6E3D6;

  /* Teintes de hero — les six pages fonctionnent par paires (CONTEXTE.md §13).
     Ces trois nuances complètent la palette, elles n'en font pas partie. */
  --sable-profond:#C9A98F;
  --sauge-clair:#E7E6DA;
  --sauge-profond:#C8CFBE;

  /* Typographies */
  --font-serif:'Cormorant Garamond',serif;
  --font-sans:'Montserrat',sans-serif;

  /* Gouttière horizontale des conteneurs */
  --gout:28px;
}

@media(max-width:680px){
  :root{--gout:22px}
}

/* Bandeau « mode test » (REFERENCE-ADMIN.md §49). Dans les jetons parce que
   les trois applications le partagent et qu'il précède leur feuille. */
/* ⚠️ `sticky`, pas `fixed`. En `fixed`, il fallait réserver sa place par
   `body{padding-top}` — et `body.locked{overflow:hidden}`, posé dès qu'une
   modale s'ouvre, fait alors du corps un conteneur de défilement : le décalage
   s'appliquait **deux fois** à l'en-tête collant, qui descendait de soixante
   pixels et recouvrait le tiroir des filtres. En `sticky`, le bandeau prend sa
   place dans le flux : il n'y a plus rien à réserver, donc plus rien à
   compenser. */
.mode-test{
  position:sticky;top:0;z-index:var(--z-mode-test);
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:30px;padding:0 14px;
  background:repeating-linear-gradient(135deg,#4A4A45,#4A4A45 12px,#3E3E39 12px,#3E3E39 24px);
  color:#F7EFE6;font-size:11px;letter-spacing:.06em;
  font-family:var(--font-sans,system-ui,sans-serif);
}
.mode-test b{letter-spacing:.18em;text-transform:uppercase;font-weight:600;font-size:10px}
.mode-test span{opacity:.82;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.avec-mode-test{--h-mode-test:30px}
/* ⚠️ **Toutes** les surfaces fixées partent sous le bandeau, pas seulement
   l'en-tête. Je n'avais décalé que le header et le shell : les pages légales
   et les tiroirs passaient dessous, et leur bouton de fermeture — en haut,
   toujours — devenait inatteignable. Un bandeau qui ne recouvre rien doit
   décaler tout ce qui pourrait se retrouver dessous. */
/* Les surfaces **fixées** ignorent le flux : elles gardent un décalage complet
   (`top`) et une hauteur réduite.

   ⚠️ **Ce commentaire disait autrefois que l'en-tête n'en avait pas besoin
   « puisqu'il est collant ». C'était faux.** Une barre collante quitte le flux
   dès qu'elle est épinglée : le bandeau occupe alors le haut de la fenêtre, et
   un en-tête épinglé à `top:0` vient se poser dessus. L'en-tête porte donc
   `top:var(--h-mode-test)` dans `styles.css` — le décalage ne s'applique qu'une
   fois épinglé, donc rien ne bouge avant. */
body.avec-mode-test .bo,
body.avec-mode-test .ov,
body.avec-mode-test .page,
body.avec-mode-test .drawer,
body.avec-mode-test .drawer-scrim,
body.avec-mode-test .ps-scrim{top:var(--h-mode-test)}
body.avec-mode-test .bo,
body.avec-mode-test .page,
body.avec-mode-test .drawer{height:calc(100% - var(--h-mode-test))}

/* ⚠️ **Une modale ouverte, et le bandeau n'est plus là où on le croit.**
   Il est `sticky` : son épinglage dépend d'un conteneur qui défile. Or
   `body.locked{overflow:hidden}` — posé par chaque surface modale — retire au
   corps cette qualité. Le bandeau retombe alors à sa position de flux, en haut
   du **document**, c'est-à-dire hors de l'écran dès qu'on a défilé — pendant
   que le voile, lui, continue de lui réserver ses trente pixels.

   Résultat : une bande claire en haut de l'écran, à travers laquelle on lit la
   page en clair sous une fenêtre modale. Ce n'est pas un décalage discret, ça
   se lit comme un défaut d'affichage.

   Tant qu'une modale est ouverte, il n'y a donc rien à réserver. Le bandeau
   est momentanément couvert — exactement comme le bandeau cookies l'est déjà,
   et pour la même raison : masquer n'est pas retirer, il revient intact à la
   fermeture. */
body.avec-mode-test.locked .ov,
body.avec-mode-test.locked .page,
body.avec-mode-test.locked .drawer,
body.avec-mode-test.locked .drawer-scrim,
body.avec-mode-test.locked .ps-scrim{top:0}
body.avec-mode-test.locked .page,
body.avec-mode-test.locked .drawer{height:100%}
@media(max-width:600px){
  .mode-test span{display:none}
}