/* 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 ). 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); } .ckb-ok { height: 44px; padding: 0 20px; border: 1px solid var(--ard-rule-strong); border-radius: 2px; background: transparent; 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), background-color var(--ard-tr), transform .1s ease; } .ckb-ok:hover { border-color: var(--ard-gold-text); background-color: var(--hn-gold-08); } .ckb-ok:active { transform: translateY(1px); border-color: var(--ard-gold-text); background-color: var(--hn-gold-18); } .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); } } /* Toast de notification (#toast-container, base.css) : son bottom fixe (24px bureau, 68px sous 768px - les 56px de la barre basse membre plus 12px d'air, visiteur compris) 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 (bureau : bottom 0 ; mobile : posées sur la barre basse) : « Valider ma semaine » de l'atelier FMS, « Publier ma recette » de la validation des corrections par son auteur. */ :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); } /* « Modifier / Valider ma semaine » du wizard FMS (bottom 0, affichée jusqu'à 1024px). Son padding-bottom ajoute la zone sûre de l'encoche parce qu'elle touche le bord de l'écran ; posée sur la réserve, qui compte déjà cette zone, elle la peindrait à vide (~34px sur iPhone) - on revient au padding sec, comme .ex-selbar dans extras.css. */ :is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .fms-result-sticky { bottom: var(--ckb-reserve); padding-bottom: 16px; } /* Feuille de suggestions du wizard FMS, en mobile : fais_ma_semaine.js pose bottom: 0 en style inline, qu'aucune feuille ne bat sans !important. Une marge basse sur un élément fixe le décale d'autant vers le haut. La feuille n'a pas de hauteur maximale : en paysage (360 à 375px de haut), remontée de la réserve, elle sortait par le haut - bornée à la place restante, elle défile. */ :is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .fms-suggestions-dropdown--mobile { margin-bottom: var(--ckb-reserve); max-height: calc(100vh - var(--ckb-reserve) - 16px); max-height: calc(100dvh - var(--ckb-reserve) - 16px); overflow-y: auto; } /* 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 (recette_detail.css) : calée AU-DESSUS du toast, lui-même à réserve + 12 (règle ci-dessus). 92px = 12 d'écart du toast + 68 de sa hauteur + 12 d'air - les 104px bureau (24 + 68 + 12) et 148px mobile (68 + 68 + 12) d'origine, rebasés sur le toast à réserve + 12. */ :is(html:not(.ckb-mesure), html.ckb-on):has(.ckb:not([hidden])) .rd-timers-bar { bottom: calc(var(--ckb-reserve) + 92px); } /* 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); } @media (max-width: 767px) { /* 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); } }