/**
 * LA_Consent — bandeau de consentement.
 *
 * Dimensions en unites relatives au viewport, jamais de px fixes : le bandeau
 * doit recouvrir du contenu reel en 1920x1080 et occuper une part substantielle
 * de l'ecran sur mobile. Palette Culterreux (brun #5a3a22, brique #ad5c35,
 * fond creme), aucune variable CSS sur ce site.
 *
 * @author HENRA Mathieu - L'Autre | Instant
 */

.la-consent {
    position: fixed;
    right: 1.5vw;
    bottom: 1.5vw;
    z-index: 99990;
    /* clamp et non min : sur une tablette, 42vw donnerait une boite etriquee.
       ~800 px de large en 1920, ~575 px en 1366, jamais moins de 24 rem. */
    width: clamp(24rem, 42vw, 56rem);
    max-width: calc(100vw - 3vw);
    box-sizing: border-box;
    padding: clamp(1.5rem, 1.8vw, 2.5rem);
    /* Fond gris translucide : on laisse voir la page derriere.
       Le gris est VOLONTAIREMENT plus soutenu que le #f0f4f8 du theme, et
       l'opacite basse : un gris tres clair a 82 % sur une page blanche donne
       #F3F6F9, soit exactement l'aspect d'un fond opaque — la transparence
       existe mais ne se voit pas. Ici, sur blanc on lit un vrai gris, et sur du
       contenu on voit au travers. Le flou garde le texte lisible dans les deux cas. */
    background: rgba(251, 247, 235, .8);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: #5a3a22;
    border: 2px solid #5a3a22;
    border-radius: 3px;
    box-shadow: 0 1rem 2.5rem rgba(90, 58, 34, .2);
    font-size: clamp(1.05rem, 1.15vw, 1.35rem);
    line-height: 1.45;
}

/* Navigateur sans backdrop-filter : on opacifie, sinon le texte devient illisible
   sur une image de fond. Mieux vaut moins de transparence qu'un bandeau qu'on ne
   peut pas lire. */
@supports not ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    .la-consent {
        background: rgba(251, 247, 235, .96);
    }
}

.la-consent[hidden] {
    display: none;
}

.la-consent__title {
    margin: 0 0 .6em;
    font-size: 1.2em;
    font-weight: 700;
    color: #5a3a22;
}

.la-consent__intro {
    margin: 0 0 .6em;
}

/* Mention « outil interne, pas de tiers ». Legerement en retrait du texte
   principal, mais pas reduite au rang de note de bas de page : c'est un
   argument, pas une precaution juridique. */
.la-consent__trust {
    margin: 0 0 .6em;
    padding-left: .7em;
    border-left: 3px solid #5a3a22;
    font-size: .95em;
}

.la-consent__note {
    margin: 0 0 1em;
    font-size: .9em;
    /* Meme navy que le reste, juste plus petit. A ce niveau de transparence, un
       gris secondaire tomberait sous le seuil de 4,5:1 des qu'une image sombre
       passe derriere ; le navy tient 4,7:1 dans ce pire cas. */
    color: #5a3a22;
}

.la-consent__link {
    color: #5a3a22;
    text-decoration: underline;
}

.la-consent__link:hover,
.la-consent__link:focus {
    color: #3e2716;
}

/* Deux boutons rigoureusement identiques : meme largeur, meme fond, meme
   contraste, meme graisse. Aucun ne doit orienter le choix. */
.la-consent__actions {
    display: flex;
    gap: .75rem;
}

.la-consent__btn {
    flex: 1 1 0;
    min-width: 0;
    padding: .7em 1em;
    background: #ad5c35;
    color: #fff;
    border: 2px solid #ad5c35;
    border-radius: 3px;
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease;
}

.la-consent__btn:hover,
.la-consent__btn:focus {
    background: #8f4a2a;
    border-color: #8f4a2a;
    color: #fff;
}

.la-consent__btn:focus-visible {
    outline: 3px solid #e8a86a;
    outline-offset: 2px;
}

/* Mobile : bloc bas pleine largeur, part substantielle de l'ecran, texte grand. */
@media (max-width: 767px) {
    .la-consent {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        padding: 1.4rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
        border-width: 2px 0 0;
        border-radius: 0;
        font-size: 1.1rem;
    }

    .la-consent__actions {
        gap: .6rem;
    }

    .la-consent__btn {
        padding: .85em .6em;
    }
}

/* Lien permanent de modification du choix, en pied de page. */
.la-consent-footer {
    text-align: center;
    padding: .5rem 0;
}

.la-consent-footer__link {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* =========================================================================
   PAGE DE CONFIDENTIALITE
   -------------------------------------------------------------------------
   La mise en forme vit ICI et non dans le contenu CMS : le back-office fait
   passer les pages CMS par HTMLPurifier, qui supprime les balises <style> et
   les attributs data-*. Un premier enregistrement depuis l'editeur aurait
   donc silencieusement depouille la page. Des CLASSES, elles, survivent.
   ========================================================================= */

.la-pc { max-width: 56rem; margin: 0 auto; line-height: 1.65; }
.la-pc h2 { margin: 2.4rem 0 .8rem; font-size: 1.35rem; border-bottom: 2px solid #5a3a22; padding-bottom: .4rem; }
.la-pc h3 { margin: 1.6rem 0 .5rem; font-size: 1.08rem; color: #5a3a22; }
.la-pc p, .la-pc li { font-size: .97rem; }
.la-pc ul { margin: .5rem 0 1rem 1.2rem; }
.la-pc li { margin-bottom: .35rem; }
.la-pc table { width: 100%; margin: 1rem 0 1.4rem; border-collapse: collapse; font-size: .9rem; }
.la-pc th, .la-pc td { border: 1px solid #eadfce; padding: .5rem .6rem; text-align: left; vertical-align: top; }
.la-pc th { background: #fbf7eb; font-weight: 600; }

.la-pc .la-pc-choix { background: rgba(251, 247, 235, .8); border: 1px solid #eadfce; border-radius: .6rem; padding: 1.2rem 1.4rem; margin: 0 0 2rem; }
.la-pc .la-pc-choix p { margin: 0 0 .8rem; }
.la-pc .la-pc-choix p:last-child { margin: 0; }
.la-pc .la-consent-state { font-weight: 600; color: #5a3a22; }

.la-pc .la-consent-reopen { display: inline-block; background: #ad5c35; color: #fff; border: 0; border-radius: .4rem; padding: .55rem 1.1rem; font-size: .95rem; cursor: pointer; }
.la-pc .la-consent-reopen:hover { background: #8f4a2a; }

.la-pc .la-pc-note { font-size: .88rem; color: #7a6a5a; }
.la-pc .la-pc-maj { font-style: italic; color: #7a6a5a; font-size: .9rem; }

/* Le tableau deborde sur telephone : on le fait defiler plutot que casser la page. */
@media (max-width: 600px) {
    .la-pc table { display: block; overflow-x: auto; white-space: nowrap; font-size: .82rem; }
    .la-pc th, .la-pc td { padding: .4rem; }
}