{{--
    Banniere de consentement aux cookies (RGPD / ePrivacy).

    Le site ne pose par defaut QUE des cookies strictement necessaires (session
    Laravel + CSRF), qui ne requierent pas de consentement. Cette banniere gere
    le consentement des cookies NON essentiels (categorie "mesure d'audience"),
    prete pour le jour ou un traceur (ex. Google Analytics) sera ajoute.

    Mecanisme : tout script non essentiel doit etre depose sous la forme
      <script type="text/plain" data-cookie-categorie="mesure"> ... </script>
    Il ne s'execute QUE si le visiteur a consenti a la categorie. Voir
    public/js/cookies-consent.js. Le choix est memorise dans un cookie
    first-party "biome_consentement" (180 jours). Le lien "Cookies" du footer
    rouvre le panneau (window.biomeCookies.ouvrir()).

    Conforme : "Tout refuser" est aussi accessible et visible que "Tout
    accepter" (meme niveau, meme importance).
--}}
<div id="biome-cookies" class="biome-cookies" data-banniere-cookies role="dialog" aria-modal="false" aria-label="Gestion des cookies" aria-live="polite" hidden>
    <div class="biome-cookies__carte">
        <div class="biome-cookies__corps">
            <h2 class="biome-cookies__titre">Votre vie priv&eacute;e</h2>
            <p class="biome-cookies__texte">Ce site utilise des cookies strictement n&eacute;cessaires &agrave; son fonctionnement (session, s&eacute;curit&eacute; des formulaires). Avec votre accord, nous pourrons aussi mesurer l'audience du site de mani&egrave;re anonyme pour l'am&eacute;liorer. Vous pouvez accepter, refuser ou personnaliser vos choix.</p>

            <div class="biome-cookies__categories" data-cookies-categories hidden>
                <label class="biome-cookies__cat">
                    <span class="biome-cookies__cat-texte"><strong>N&eacute;cessaires</strong><small>Indispensables au fonctionnement (session, formulaires, s&eacute;curit&eacute;). Toujours actifs.</small></span>
                    <input type="checkbox" checked disabled aria-label="Cookies necessaires (toujours actifs)">
                </label>
                <label class="biome-cookies__cat">
                    <span class="biome-cookies__cat-texte"><strong>Mesure d'audience</strong><small>Statistiques de fr&eacute;quentation anonymis&eacute;es pour am&eacute;liorer le site. D&eacute;sactiv&eacute; par d&eacute;faut.</small></span>
                    <input type="checkbox" data-cookie-categorie="mesure" aria-label="Cookies de mesure d'audience">
                </label>
            </div>
        </div>

        <div class="biome-cookies__actions">
            <button type="button" class="biome-cookies__btn biome-cookies__btn--secondaire" data-cookies-refuser>Tout refuser</button>
            <button type="button" class="biome-cookies__btn biome-cookies__btn--lien" data-cookies-personnaliser>Personnaliser</button>
            <button type="button" class="biome-cookies__btn biome-cookies__btn--secondaire" data-cookies-enregistrer hidden>Enregistrer mes choix</button>
            <button type="button" class="biome-cookies__btn biome-cookies__btn--principal" data-cookies-accepter>Tout accepter</button>
        </div>
    </div>
</div>

<style>
    .biome-cookies {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 9999;
        width: min(540px, calc(100% - 40px));
        font-family: var(--police-texte, "Mulish", sans-serif);
    }
    .biome-cookies[hidden] { display: none; }
    .biome-cookies__carte {
        background: #fff;
        border: 1px solid var(--couleur-bordure-carte, #E4EAF2);
        border-radius: var(--rayon-carte-grande, 16px);
        box-shadow: 0 18px 50px rgba(14, 36, 64, .22);
        padding: 22px 24px;
    }
    .biome-cookies__titre {
        font-family: var(--police-titres, "Poppins", sans-serif);
        font-size: 17px;
        font-weight: 700;
        color: var(--couleur-texte-fonce, #0E2440);
        margin: 0 0 8px;
    }
    .biome-cookies__texte {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--couleur-texte-attenue, #52617A);
        margin: 0;
    }
    .biome-cookies__categories {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-top: 1px solid var(--couleur-bordure-carte, #E4EAF2);
        padding-top: 16px;
    }
    .biome-cookies__cat {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        cursor: pointer;
    }
    .biome-cookies__cat-texte { display: flex; flex-direction: column; gap: 3px; }
    .biome-cookies__cat-texte strong {
        font-family: var(--police-titres, "Poppins", sans-serif);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--couleur-texte-fonce, #0E2440);
    }
    .biome-cookies__cat-texte small { font-size: 12px; line-height: 1.45; color: var(--couleur-texte-attenue, #52617A); }
    .biome-cookies__cat input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--couleur-bleu-principal, #1C5BB8); cursor: pointer; }
    .biome-cookies__cat input:disabled { cursor: default; opacity: .6; }
    .biome-cookies__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin-top: 18px;
    }
    .biome-cookies__btn {
        font-family: var(--police-titres, "Poppins", sans-serif);
        font-size: 13.5px;
        font-weight: 600;
        border-radius: var(--rayon-bouton, 9px);
        padding: 11px 18px;
        cursor: pointer;
        border: 1.5px solid transparent;
        line-height: 1;
        transition: background .15s, border-color .15s;
    }
    /* "Accepter" et "Refuser" : meme taille / meme importance (exigence RGPD) */
    .biome-cookies__btn--principal { background: var(--couleur-bleu-principal, #1C5BB8); color: #fff; flex: 1 1 auto; }
    .biome-cookies__btn--principal:hover { background: var(--couleur-bleu-fonce, #0E2440); }
    .biome-cookies__btn--secondaire { background: #fff; color: var(--couleur-texte-fonce, #0E2440); border-color: var(--couleur-bordure-carte, #DCE3EC); flex: 1 1 auto; }
    .biome-cookies__btn--secondaire:hover { border-color: var(--couleur-bleu-principal, #1C5BB8); }
    .biome-cookies__btn--lien { background: transparent; color: var(--couleur-bleu-principal, #1C5BB8); padding: 11px 10px; text-decoration: underline; flex: 0 0 auto; }
    @media (max-width: 480px) {
        .biome-cookies { left: 0; right: 0; bottom: 0; width: 100%; }
        .biome-cookies__carte { border-radius: 16px 16px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); }
        .biome-cookies__btn { flex: 1 1 100%; text-align: center; }
        .biome-cookies__btn--lien { order: 5; }
    }
</style>