/* =========================================================================
   LE BANDEAU DES COOKIES (templates/_bandeau_cookies.html)
   =========================================================================
   Une feuille a part, et non un <style> dans la page : les pages publiques
   (dont « Etat du service ») ne portent ainsi aucun caractere qui ne soit pas
   le leur.

   RIEN NE RESTE CACHE SOUS LE BANDEAU. Tant qu'il est ouvert, le script pose
   sa hauteur dans --bp-cookies-h et la classe « bp-cookies-ouvert » sur
   <html> : la page gagne un espace de cette hauteur en bas (le dernier bouton
   peut remonter au-dessus du bandeau), et un element mis en vue - au clavier
   comme au doigt - s'arrete au-dessus de lui (scroll-padding ; WCAG 2.4.11,
   le focus n'est pas masque).
   ========================================================================= */
.bp-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
    display: flex; justify-content: center; padding: 0 12px calc(12px + env(safe-area-inset-bottom));
    pointer-events: none; transform: translateY(110%); transition: transform .35s ease-out;
    font-family: Inter, system-ui, -apple-system, sans-serif; }
.bp-cookies.bp-cookies-visible { transform: translateY(0); }
.bp-cookies[hidden] { display: none; }
.bp-cookies-boite { pointer-events: auto; max-width: 880px; width: 100%; box-sizing: border-box;
    background: #18181b; color: #f4f4f5; border: 1px solid #3f3f46; border-radius: 16px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .45); padding: 16px 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.bp-cookies-texte { flex: 1 1 320px; margin: 0; font-size: .9rem; line-height: 1.55; color: #d4d4d8; }
.bp-cookies-texte strong { color: #f4f4f5; }
.bp-cookies-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bp-cookies-lien { color: #93c5fd; font-size: .88rem; text-decoration: underline;
    min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
/* « Accepter » et « Refuser » : LA MEME apparence, la meme taille, le meme poids (CNIL) -
   refuser n'est ni plus discret ni plus difficile qu'accepter. */
.bp-cookies-choix { min-height: 44px; min-width: 112px; padding: 0 20px; border: 1px solid #e4e4e7;
    border-radius: 10px; background: #f4f4f5; color: #18181b; font-weight: 700; font-size: .95rem;
    font-family: inherit; cursor: pointer; }
.bp-cookies-choix:hover, .bp-cookies-choix:focus-visible { background: #ffffff; }
.bp-cookies-choix:focus-visible, .bp-cookies-lien:focus-visible { outline: 2px solid #f4f4f5;
    outline-offset: 2px; }

html.bp-cookies-ouvert { scroll-padding-bottom: var(--bp-cookies-h, 0px); }
html.bp-cookies-ouvert body::after { content: ""; display: block; flex: none;
    height: var(--bp-cookies-h, 0px); }

/* LE CHOIX D'ABORD (data-bp-cookies-bloquant="oui") : un voile couvre toute la page tant
   que le visiteur n'a ni accepte ni refuse ; rien ne se clique ni ne defile dessous, et le
   script rend le reste de la page inerte (le clavier reste dans le bandeau). */
.bp-cookies.bp-cookies-bloquant { top: 0; align-items: center; pointer-events: auto;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: rgba(9, 9, 11, .62);
    transform: none; opacity: 0; transition: opacity .25s ease-out; touch-action: none;
    overscroll-behavior: contain; }
.bp-cookies.bp-cookies-bloquant.bp-cookies-visible { opacity: 1; }
.bp-cookies-bloquant .bp-cookies-boite { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    overflow-y: auto; touch-action: pan-y; box-shadow: 0 16px 48px rgba(0, 0, 0, .55); }
html.bp-cookies-bloque, html.bp-cookies-bloque body { overflow: hidden; }

/* Au telephone, les deux choix cote a cote, de la meme largeur. */
@media (max-width: 560px) {
    .bp-cookies-boutons { width: 100%; }
    .bp-cookies-lien { flex: 1 1 100%; justify-content: center; }
    .bp-cookies-choix { flex: 1 1 0; }
    .bp-cookies.bp-cookies-bloquant { align-items: flex-end; }
}

/* LA PUBLICITE LINKEDIN (data-bp-publicite="oui") : le premier niveau et le panneau
   « Gérer mes préférences », l'un a la place de l'autre, dans la meme boite. Les trois
   boutons du premier niveau, comme ceux du panneau, ont la regle .bp-cookies-choix. */
.bp-cookies-niveau { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center;
    gap: 12px 18px; min-width: 0; }
.bp-cookies-niveau[hidden] { display: none; }
.bp-cookies-categories { list-style: none; margin: 0; padding: 0; flex: 1 1 100%;
    display: grid; gap: 10px; }
.bp-cookies-categorie { border: 1px solid #3f3f46; border-radius: 12px; padding: 8px 12px 10px; }
.bp-cookies-categorie p { margin: 4px 0 0; font-size: .85rem; line-height: 1.5; color: #d4d4d8; }
.bp-cookies-categorie-tete { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; min-height: 44px; }
.bp-cookies-categorie-nom { font-weight: 700; color: #f4f4f5; font-size: .92rem; cursor: pointer; }
.bp-cookies-toujours { font-size: .8rem; font-weight: 700; color: #86efac; text-align: right; }
/* L'interrupteur : une case a cocher (role="switch"), desactivee par defaut. */
.bp-cookies-interrupteur { -webkit-appearance: none; appearance: none; flex: none; position: relative;
    width: 46px; height: 28px; margin: 0; border-radius: 14px; border: 1px solid #a1a1aa;
    background: #3f3f46; cursor: pointer; transition: background .2s; }
.bp-cookies-interrupteur::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px;
    height: 20px; border-radius: 50%; background: #f4f4f5; transition: transform .2s; }
.bp-cookies-interrupteur:checked { background: #2563eb; border-color: #93c5fd; }
.bp-cookies-interrupteur:checked::before { transform: translateX(18px); }
.bp-cookies-interrupteur:focus-visible { outline: 2px solid #f4f4f5; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .bp-cookies, .bp-cookies.bp-cookies-bloquant { transition: none; } }