/* consentement.css : le bandeau de consentement (src/components/chrome/Consentement.astro) et le bouton « Cookies » du
   pied (BoutonDesCookies.astro), repris du code du bandeau de Website (lot local pages-legales, code seul ; spec site-astro,
   REQ-10), passés aux jetons de /assets/charte.css. Le script /assets/consentement.js retire `hidden`. Liée par les pages
   qui ont le bandeau, après la feuille de la famille. */

/* Dernier enfant du cadre de la page, après le pied (le cadre lui donne variables, police, interligne) ; fixé en bas à
   gauche, sans voile. */
.pb-consent { position: fixed; left: 2rem; bottom: 2rem; z-index: 400; width: 370px; max-width: calc(100% - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1rem 1.2rem; background: var(--white); border: 1px solid var(--ink-10); border-radius: 16px; box-shadow: var(--shadow-lg); }
.pb-consent p { margin: 0 0 1rem; color: var(--ink-70); font-size: .88rem; line-height: 1.5; }
.pb-consent p a { color: var(--teal); text-decoration: underline; }
/* Les trois catégories : « nécessaires » (état verrouillé), « mesure » et « publicité » (cases). */
.pb-consent-cats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.pb-consent-cat { padding: .6rem .75rem; background: var(--cream, var(--white)); border: 1px solid var(--ink-10); border-radius: 10px; }
.pb-consent-catHead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; cursor: pointer; }
.pb-consent-cat:first-child .pb-consent-catHead { cursor: default; }
.pb-consent-catTitre { color: var(--ink-90, var(--ink-70)); font-size: .88rem; font-weight: 600; }
.pb-consent-catEtat { color: var(--ink-40); font-size: .75rem; }
.pb-consent-catTexte { margin: .35rem 0 0; color: var(--ink-70); font-size: .8rem; line-height: 1.45; }
.pb-consent-case { flex: none; width: 2.6rem; height: 1.45rem; margin: 0; appearance: none; -webkit-appearance: none; background: var(--ink-10); border-radius: 999px; position: relative; cursor: pointer; transition: background .15s; }
.pb-consent-case::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.45rem - 4px); height: calc(1.45rem - 4px); background: var(--white); border-radius: 50%; transition: transform .15s; }
.pb-consent-case:checked { background: var(--teal); }
.pb-consent-case:checked::after { transform: translateX(calc(2.6rem - 1.45rem)); }
.pb-consent-case:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
/* Les deux écrans finissent par la même barre bord à bord, collée en bas du bandeau (comme Axeptio) : parts égales, choix
   clairs et le bouton d'accord (« OK pour moi ») plein teal, bouton principal de la charte. Les marges négatives annulent le
   padding du bandeau pour aller jusqu'aux bords ; seuls les coins du bas sont arrondis, au rayon de la carte (16px).
   Écran 1 : « Non merci » / « Je choisis » / « OK pour moi ». Écran 2 : le détail des catégories, puis « Enregistrer » / « OK pour moi ». */
.pb-consent-barre { display: flex; align-items: stretch; margin: 1rem -1.2rem -1rem; border-top: 1px solid var(--ink-10); border-radius: 0 0 16px 16px; overflow: hidden; }
.pb-consent-barre[hidden] { display: none; }
.pb-consent-barre .pb-consent-btn { flex: 1 1 0; min-height: 52px; min-width: 0; padding: 0 .5rem; border: 0; border-radius: 0; background: var(--white); color: var(--ink); font-weight: 600; white-space: nowrap; }
.pb-consent-barre .pb-consent-btn + .pb-consent-btn { border-left: 1px solid var(--ink-10); }
.pb-consent-barre .pb-consent-btn:hover { background: var(--cream); color: var(--teal); }
.pb-consent-barre .pb-consent-plein { background: var(--bouton-plein-fond); color: var(--bouton-plein-texte); }
.pb-consent-barre .pb-consent-plein:hover { background: var(--teal-mid); color: var(--bouton-plein-texte); }
.pb-consent-detail[hidden] { display: none; }
.pb-consent-perso { text-decoration: none; }
.pb-consent-btn { flex: 1; min-height: 44px; padding: 0 1.2rem; color: var(--bouton-contour-texte); background: var(--white); border: 1.5px solid var(--bouton-contour-bordure); border-radius: var(--bouton-rayon); font-family: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; }
.pb-consent-btn:hover { color: var(--bouton-contour-accent); border-color: var(--bouton-contour-accent); }
.pb-cookies { display: block; position: relative; margin: 0 auto 1.5rem; padding: 0 .25rem; color: var(--ink-70); background: none; border: 0; font: inherit; font-size: .82rem; cursor: pointer; }
.pb-cookies[hidden] { display: none; }
.pb-cookies::after { content: ""; position: absolute; inset: -12px 0; }
.pb-cookies:hover, .pb-cookies:focus-visible { text-decoration: underline; }
/* Anneau d'Hugo (pages.css:62-68), que la famille hp n'a pas ; la pilule garde sa forme. */
.pb-consent p a:focus-visible, .pb-consent .pb-consent-btn:focus-visible, .pb-cookies:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.pb-consent .pb-consent-btn:focus-visible { border-radius: var(--bouton-rayon); }
.pb-consent-barre .pb-consent-btn:focus-visible { border-radius: 0; outline-offset: -2px; }
/* Encart ouvert : le pied et le focus passent au-dessus de lui (WCAG 2.4.11) ; 11rem, la carte à 320 px et 1rem. */
:root:has(.pb-consent:not([hidden])) { padding-bottom: 11rem; scroll-padding-bottom: 11rem; }
@media (max-width: 900px) { .pb-consent { left: 1rem; bottom: 1rem; } }
/* Sous 560 px, la réserve du pied (celle du sélecteur de langue, blog.css) s'étend à « Cookies » : la pile flottante
   d'Hugo ne le recouvre pas ; sur toutes les pages, le pied y étant le même (D-29). */
@media (max-width: 560px) { .hp-footer:has(.pb-cookies) { padding-bottom: 8rem; } }