/* Bandeau d'information sur les cookies (23/09/2026). Aucun choix à faire :
   TopPopote ne dépose que des cookies exemptés de consentement, le bandeau
   informe et se ferme, il ne demande rien. Jetons --ard-* / --hn-gold-* déjà
   posés sur body par night_kitchen.css, chargé sur toutes les pages.
   Maquette : .claude/design-drafts/2026-09-23-cookies/cookies.css l.157-241. */
.ckb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; /* sous la barre basse (150) et les toasts */
  background: var(--ard-bg-2); color: var(--ard-ink);
  border-top: 1px solid var(--ard-rule-strong);
  font-family: var(--ard-sans);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Pas d'animation d'entrée : le bandeau revient à chaque page tant qu'il
     n'est pas fermé, une glissade répétée à chaque navigation fatiguerait. */
}
.ckb[hidden] { display: none; }

/* Réserve (WCAG 2.4.11, focus non masqué), en deux couches :
   1) un repli CSS pur, actif tant que le script n'a pas mesuré (html sans
      .ckb-mesure : sans JS, ou au premier rendu) dès que le bandeau existe
      et n'est pas [hidden]. Sans cette couche, le dernier lien du pied de
      page ou le dernier champ d'un formulaire recevait, sans JS, le focus
      sous le bandeau fixe ;
   2) la mesure du script (ResizeObserver → --ckb-h sur <html>). Dès sa
      première mesure, même nulle, il pose .ckb-mesure et le repli ne
      s'applique plus : seule .ckb-on (hauteur > 0) dit que le bandeau
      occupe le bas. Une garde plein écran (Mode Cuisine, mode magasin des
      courses, animation de grade, modale trophée) le masque en display:none
      sans [hidden] : il mesure 0, et la réserve comme les éléments rehaussés
      (section en fin de fichier) retrouvent leur place de bandeau fermé.
      Repli et mesure s'excluent (:not(.ckb-mesure) / .ckb-on) : aucun ordre
      de règles entre blocs @media ne peut les départager au hasard.
   Condition « bandeau affiché » de toutes les règles qui en dépendent :
   :is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])).
   Valeurs du repli : 69 px en bureau, 115 px sous 768 px, +56 px avec la
   barre basse membre (ci-dessous, § mobile). */
html:not(.ckb-mesure):has(.ckb:not([hidden])) { --ckb-reserve: 69px; }
html.ckb-on:has(.ckb:not([hidden])) { --ckb-reserve: var(--ckb-h, 0px); }
:is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) { scroll-padding-bottom: var(--ckb-reserve); }
:is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) body { padding-bottom: var(--ckb-reserve); }

.ckb-in {
  max-width: 1280px; margin: 0 auto; padding: 12px 32px;
  display: flex; align-items: center; gap: 28px;
}
.ckb-k {
  flex: none; margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; line-height: 1;
  color: var(--ard-gold-text);
}
.ckb-k::before { content: ""; width: 18px; height: 1px; background: var(--ard-gold-text); opacity: .75; }
.ckb-t { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ard-ink-2); }
.ckb-t-court { display: none; }
.ckb-actions { flex: none; display: flex; align-items: center; gap: 22px; }
/* .ckb .ckb-lien (pas .ckb-lien seul) : (0,2,0) résiste aux resets de lien
   des feuilles de page. Un lien distingué par la seule couleur échoue
   WCAG 1.4.1. */
.ckb .ckb-lien {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 500; color: var(--ard-ink);
  text-decoration: underline; text-decoration-color: var(--ard-rule-strong);
  text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color var(--ard-tr);
}
.ckb-lien:hover { text-decoration-color: var(--ard-gold-text); }
/* « J'ai compris » : le kraft, le liseré or et l'encre du bouton secondaire ; le
   survol et l'appui tracent le bord à l'encre, le fond ne bouge pas (D21 du lot
   « boutons qui tranchent », décision de Freddy du 10/11). */
.ckb-ok {
  height: 44px; padding: 0 20px; border: 1px solid var(--ard-gold-text); border-radius: 2px;
  background: var(--hn-btn-fond); color: var(--ard-ink); cursor: pointer;
  font-family: var(--ard-sans); font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1;
  white-space: nowrap;
  transition: border-color var(--ard-tr), transform .1s ease;
}
.ckb-ok:hover { border-color: var(--ard-ink); }
.ckb-ok:active { transform: translateY(1px); border-color: var(--ard-ink); }
.ckb-lien:focus-visible, .ckb-ok:focus-visible { outline: 2px solid var(--ard-gold-text); outline-offset: 3px; border-radius: 0; }

/* Sortie après « J'ai compris » : bandeau_cookies.js pose la classe puis hidden. */
.ckb--sort { opacity: 0; transform: translateY(12px); transition: opacity .22s ease, transform .22s ease; }
@media (prefers-reduced-motion: reduce) {
  .ckb--sort { transition: none; }
}

/* Mobile : bandeau court (~115 px). Le surtitre part (l'aria-label « Cookies »
   de la zone le remplace), la phrase courte prend le relais. */
@media (max-width: 767px) {
  .ckb-in { flex-wrap: wrap; gap: 8px 16px; padding: 10px 20px; }
  .ckb-k, .ckb-t-long { display: none; }
  .ckb-t-court { display: inline; }
  .ckb-t { flex-basis: 100%; }
  .ckb-actions { width: 100%; justify-content: space-between; }
  .ckb-actions:not(:has(.ckb-lien)) { justify-content: flex-end; }
  /* Membre : au-dessus de la barre basse, et la réserve compte ses 56 px. */
  body:has(#mob-bottom-nav) .ckb { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: 0; }
  /* Repli CSS (sans JS ou avant mesure) : 115 px, +56 px côté membre. La
     variante membre pèse un id de plus que le repli visiteur, qui lui-même
     suit, à poids égal, le repli bureau en tête de fichier. */
  html:not(.ckb-mesure):has(.ckb:not([hidden])) { --ckb-reserve: 115px; }
  html:not(.ckb-mesure):has(#mob-bottom-nav):has(.ckb:not([hidden])) { --ckb-reserve: calc(115px + 56px + env(safe-area-inset-bottom, 0px)); }
  /* Mesure JS, côté membre : l'id de #mob-bottom-nav la fait l'emporter sur
     la mesure visiteur en tête de fichier ; le repli, lui, est exclu. */
  html.ckb-on:has(#mob-bottom-nav):has(.ckb:not([hidden])) { --ckb-reserve: calc(var(--ckb-h, 0px) + 56px + env(safe-area-inset-bottom, 0px)); }
  /* Menu mobile ouvert : base.css masque la barre basse, le bandeau redescend.
     .mob-menu-open est collé à body:has() : la règle du dessus pèse un id, il faut la battre. */
  body:has(#mob-bottom-nav).mob-menu-open .ckb { bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* base_garde.html (les pages du compte) ne charge pas styles.css (Tailwind) :
   sans cette règle, « sur les cookies » s'afficherait en clair sur ces pages. */
.ckb .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0;
}

/* ══ Éléments fixés en bas, rehaussés au-dessus du bandeau ══
   Tout nouvel élément fixé en bas doit être ajouté ici. Sans règle, il ignore
   la réserve : sous le bandeau (z-index < 140) il y cache ses boutons, au-dessus
   il en cache le texte. --ckb-reserve compte déjà la barre basse membre :
   chaque règle ne rajoute que l'écart d'origine de l'élément AU-DESSUS de cette
   barre, jamais ses 56px. Chaque règle commence par la condition « bandeau
   affiché » (en tête de fichier) : bandeau fermé ou masqué par une garde plein
   écran, l'élément retrouve ses valeurs d'origine. Spécificité (0,4,1),
   ou (1,3,1) quand un id remplace la classe (#toast-container) :
   elle bat chaque règle d'origine ; les variantes mobiles viennent en fin de
   section, après leur version bureau. Le placard du frigo, positionné en JS,
   se borne au bandeau dans frigo.js (Placard.placer), qu'il ignore lui aussi
   quand une garde le masque (hauteur nulle). */

/* Barre d'action mobile de la page de création (.nr-dock, saisie_recette.css) :
   collée au bas de l'écran, elle passerait sous le bandeau - on la pose sur
   la réserve. */
:is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .nr-dock {
  bottom: var(--ckb-reserve);
}
/* Le dernier bouton de la page passerait sous .nr-dock, elle-même remontée
   sur la réserve : son padding mobile (76px, saisie_recette.css) grandit
   d'autant. Même seuil que .nr-dock, masquée dès 1024px (saisie_recette.css) :
   sans lui, la réserve bureau ajouterait un vide inutile en bas de page. */
@media (max-width: 1023.98px) {
  :is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) body.nr-body {
    padding-bottom: calc(var(--ckb-reserve) + 76px);
  }
  /* Le toast de cette page se pose au-dessus de .nr-dock, pas de la réserve. */
  :is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) body:has(.nr-dock) #toast-container {
    bottom: calc(var(--ckb-reserve) + var(--nr-dock-h) + 12px);
  }
}

/* Toast de notification (#toast-container, base.css) : son bottom fixe
   (24px bureau et visiteur, 68px sous 768px pour un membre - les 56px de sa
   barre basse plus 12px d'air) ignore le bandeau et tombe sur son texte -
   on le remonte à la réserve, même écart de 12px que la barre basse. */
:is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) #toast-container {
  bottom: calc(var(--ckb-reserve) + 12px);
}

/* Barres d'action collées au bas : « Valider ma semaine » de l'atelier FMS
   (bottom 0 à toutes les largeurs : la page, en mode focus, n'a pas de barre
   basse), « Publier ma recette » de la validation des corrections par son
   auteur (bureau : bottom 0 ; mobile : posée sur la barre basse). */
:is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .fms2-actionbar,
:is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .vc-footbar {
  bottom: var(--ckb-reserve);
}

/* Barre de sélection des notifications : 24px d'écart d'origine (16px en
   mobile, en fin de section). */
:is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .nn-select-toolbar {
  bottom: calc(var(--ckb-reserve) + 24px);
}

/* Barre des minuteurs de la fiche recette (mode_cuisine.css) : calée
   AU-DESSUS du toast, lui-même à réserve + 12 (règle ci-dessus). 96px = 12
   d'écart du toast + 72 de sa hauteur + 12 d'air, rebasés sur le toast à
   réserve + 12 ; les 108px bureau (24 + 72 + 12) et 152px mobile (68 + 72 + 12)
   de mode_cuisine.css en sont le calage sans bandeau. */
:is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .rd-timers-bar {
  bottom: calc(var(--ckb-reserve) + 96px);
}

/* Barre de sélection des extras, en sticky : bottom 0 en bureau, 68px
   (barre basse + 12px d'air) en mobile, en fin de section. */
:is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .ex-selbar {
  bottom: var(--ckb-reserve);
}

/* Le toast de l'atelier Fais ma semaine se pose au-dessus de .fms2-actionbar,
   elle-même remontée sur la réserve : 86px de barre d'action
   (fais_ma_semaine_atelier.css) puis 12px d'air. Sans elle, la règle générale
   du toast (réserve + 12) le posait sur « Valider ma semaine » (spec passer
   outre, D19). Même seuil que la règle sans bandeau de
   fais_ma_semaine_atelier.css : la barre existe tant que la coquille de
   l'atelier n'atteint pas 1180 px. La page, en mode focus, n'a pas de barre
   basse : la réserve n'est que le bandeau, une seule formule pour toutes les
   largeurs. Spécificité (1,4,2) : elle bat la règle générale (1,3,1). */
@media (max-width: 1263.98px) {
  :is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) body:has(.fms2-actionbar) #toast-container { bottom: calc(var(--ckb-reserve) + 86px + 12px); }
}

@media (max-width: 767px) {
  /* Barre d'action de l'atelier : sous 768 px, elle porte la zone de sécurité
     (fais_ma_semaine_atelier.css). Posée sur le bandeau, qui la porte déjà
     (padding-bottom de .ckb, compté dans la réserve), elle retrouve ses 20 px
     de pied et ses 86 px, ceux que compte la règle du toast ci-dessus. */
  :is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .fms2-actionbar { padding-bottom: 20px; }
  /* Barre de sélection des extras : ses 12px d'air au-dessus de la barre basse. */
  :is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .ex-selbar { bottom: calc(var(--ckb-reserve) + 12px); }
  /* Barre de sélection des notifications : ses 16px d'écart mobile. */
  :is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .nn-select-toolbar { bottom: calc(var(--ckb-reserve) + 16px); }
}