/**
 * Ad'on Consent — feuille de style.
 *
 * Toutes les couleurs passent par les variables de la charte Dungeon Styler,
 * avec un repli sur les valeurs de la coquille. Le plugin s'aligne donc sur
 * la charte du client sans reglage, et sans jamais poser de couleur en dur
 * dans un module.
 *
 * @package Adon Consent
 * @since   1.0.0
 */

/* -----------------------------------------------------------------------------
 * Texte sur accent — voir PC-44
 *
 * L'accent de la coquille, #008996, mesure 4,18:1 sur blanc et 3,67:1 sur
 * --clair. Le seuil RGAA 4.1 pour du texte courant est de 4,5:1 : posé comme
 * couleur de texte, l'accent de la charte ne passe donc pas. Il passe très bien
 * en aplat, en bordure et en grande taille.
 *
 * On applique la voie 2 de PC-44, déjà en service dans le thème
 * d'administration depuis sa 1.0.6 : assombrir l'accent d'une part de --fonce
 * pour le texte seulement. La teinte de la charte est conservée, le calcul suit
 * le client, et rien n'est écrit en dur. Mesures après correction : 5,58:1 sur
 * blanc, 4,89:1 sur --clair.
 *
 * Les aplats et les bordures continuent d'utiliser --accent1 tel quel.
 * -------------------------------------------------------------------------- */

.adon-consent-placeholder,
.adon-consent-preferences,
.adon-consent-modale,
.adon-consent-module {
    --adon-consent-texte-accent: color-mix(in srgb, var(--accent1, #008996) 80%, var(--fonce, #181b24));
}

.adon-consent-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
 * Gabarit de blocage
 * ------------------------------------------------------------------------ */

.adon-consent-placeholder {
    --adon-consent-ratio: 16 / 9;

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: var(--adon-consent-ratio);
    min-height: 14rem;
    padding: 1.5rem;
    background-color: var(--clair, rgb(240, 240, 240));
    border: 1px solid var(--moyen, #666666);
    color: var(--fonce, #181b24);
    font-family: var(--fonttextes, sans-serif);
}

/*
 * Une iframe tres haute et etroite — un formulaire de demarche, un agenda —
 * donnerait un gabarit disproportionne. Au-dela d'une certaine hauteur, on
 * laisse le contenu dicter la taille plutot que le ratio.
 */
.adon-consent-placeholder__inner {
    max-width: 34rem;
    text-align: center;
}

/*
 * Même correctif de spécificité que sur le bandeau : les règles du socle et
 * du thème ciblent l'élément en plus d'une classe (« body.adon p ») et
 * l'emportent sur un sélecteur à classe unique. Sur fond clair la
 * conséquence est moins spectaculaire que sur le bandeau, mais un thème qui
 * force ses paragraphes en blanc rendrait l'encart illisible de la même
 * façon.
 */
.adon-consent-placeholder .adon-consent-placeholder__title {
    margin: 0 0 0.5rem;
    font-family: var(--fonttitres, sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fonce, #181b24);
}

.adon-consent-placeholder .adon-consent-placeholder__note,
.adon-consent-placeholder .adon-consent-placeholder__transfert,
.adon-consent-placeholder .adon-consent-placeholder__remember,
.adon-consent-placeholder .adon-consent-placeholder__remember label {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--moyen, #666666);
}

.adon-consent-placeholder .adon-consent-placeholder__remember label {
    margin: 0;
    font-size: inherit;
}

.adon-consent-placeholder__transfert {
    font-style: italic;
}

.adon-consent-placeholder__actions {
    margin: 0 0 0.75rem;
}

/*
 * Bouton conforme a la convention du socle : contour, fond transparent,
 * rayon de 50px. Voir la section « boutons » de la feuille Dungeon Styler.
 */
.adon-consent-placeholder .adon-consent-accept {
    display: inline-block;
    padding: 0.6rem 1.6rem;
    background-color: transparent;
    border: 1px solid var(--accent1, #008996);
    border-radius: 50px;
    color: var(--adon-consent-texte-accent, #05737f);
    font-family: var(--fonttextes, sans-serif);
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.adon-consent-placeholder .adon-consent-accept:hover,
.adon-consent-placeholder .adon-consent-accept:focus {
    background-color: var(--accent1, #008996);
    color: var(--blanc, #ffffff);
}

.adon-consent-placeholder__remember {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--moyen, #666666);
}

.adon-consent-placeholder__remember label {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
    cursor: pointer;
}

.adon-consent-placeholder__remember input {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.adon-consent-placeholder__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    margin: 0;
    font-size: 0.8125rem;
}

.adon-consent-placeholder .adon-consent-placeholder__links a {
    color: var(--moyen, #666666);
    text-decoration: underline;
}

.adon-consent-placeholder .adon-consent-placeholder__links a:hover,
.adon-consent-placeholder .adon-consent-placeholder__links a:focus {
    color: var(--adon-consent-texte-accent, #05737f);
}

/*
 * Le conteneur injecte apres consentement porte tabindex="-1" pour recevoir
 * le focus. Sans cette regle, le navigateur y dessine un contour permanent,
 * ce qui n'a aucun sens sur un element non interactif.
 */
.adon-consent-unlocked:focus {
    outline: none;
}

.adon-consent-unlocked iframe {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Panneau de preferences
 * ------------------------------------------------------------------------ */

.adon-consent-preferences {
    border: 1px solid var(--moyen, #666666);
    padding: 1.5rem;
}

.adon-consent-preferences__list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.adon-consent-preferences__item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--clair, rgb(240, 240, 240));
}

.adon-consent-preferences__item:last-child {
    border-bottom: 0;
}

.adon-consent-preferences__item label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.adon-consent-preferences .adon-consent-preferences__name {
    font-weight: 700;
    color: var(--fonce, #181b24);
}

.adon-consent-preferences .adon-consent-preferences__note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--moyen, #666666);
}

.adon-consent-preferences .adon-consent-preferences__date {
    display: block;
    margin: 0 0 1rem;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--moyen, #666666);
}

.adon-consent-preferences .adon-consent-preferences__save {
    display: inline-block;
    padding: 0.6rem 1.6rem;
    background-color: transparent;
    border: 1px solid var(--accent1, #008996);
    border-radius: 50px;
    color: var(--adon-consent-texte-accent, #05737f);
    font-size: 1rem;
    cursor: pointer;
}

.adon-consent-preferences .adon-consent-preferences__save:hover,
.adon-consent-preferences .adon-consent-preferences__save:focus {
    background-color: var(--accent1, #008996);
    color: var(--blanc, #ffffff);
}

/* ---------------------------------------------------------------------------
 * Bandeau conditionnel
 *
 * Il ouvre le corps de page, pour arriver en premier dans l'ordre de
 * tabulation, et se repositionne visuellement en bas de fenêtre.
 * ------------------------------------------------------------------------ */

.adon-consent-banner {
    /*
     * Palette locale, pour pouvoir retourner le bandeau en clair sur une
     * charte claire sans toucher au reste :
     *
     *     .adon-consent-banner {
     *         --adon-consent-banner-fond: var(--clair);
     *         --adon-consent-banner-texte: var(--fonce);
     *     }
     */
    --adon-consent-banner-fond: var(--fonce, #181b24);
    --adon-consent-banner-texte: var(--blanc, #ffffff);
    --adon-consent-banner-accent: var(--accent1, #008996);

    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    box-sizing: border-box;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.25rem;
    background-color: var(--adon-consent-banner-fond);
    border-top: 3px solid var(--adon-consent-banner-accent);
    color: var(--adon-consent-banner-texte);
    font-family: var(--fonttextes, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.5;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

/*
 * Cette règle n'est pas une redondance, c'est un correctif de spécificité.
 *
 * Le bandeau est posé sur un fond sombre, alors que la charte colore ses
 * titres et paragraphes en --fonce. Les règles du socle et du thème ciblent
 * l'élément en plus d'une classe — « body.adon h2 », « .fl-page p » — et
 * pèsent donc plus lourd qu'un sélecteur à classe unique : le texte du
 * bandeau repassait en foncé sur foncé, donc invisible.
 *
 * On monte au-dessus en enchaînant deux classes et l'élément, et surtout on
 * ne compte plus sur l'héritage : chaque élément susceptible d'être reciblé
 * par le thème reçoit explicitement la couleur du bandeau.
 */
.adon-consent-banner .adon-consent-banner__inner,
.adon-consent-banner .adon-consent-banner__inner h2,
.adon-consent-banner .adon-consent-banner__inner p,
.adon-consent-banner .adon-consent-banner__inner span,
.adon-consent-banner .adon-consent-banner__inner label,
.adon-consent-banner .adon-consent-banner__inner li,
.adon-consent-banner .adon-consent-banner__inner strong {
    color: var(--adon-consent-banner-texte);
}

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

.adon-consent-banner__inner {
    max-width: 1020px;
    margin: 0 auto;
}

.adon-consent-banner .adon-consent-banner__title {
    margin: 0 0 0.5rem;
    font-family: var(--fonttitres, sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
}

.adon-consent-banner .adon-consent-banner__text,
.adon-consent-banner .adon-consent-banner__services {
    margin: 0 0 0.75rem;
}

.adon-consent-banner .adon-consent-banner__services {
    font-size: 0.875rem;
    opacity: 0.85;
}

.adon-consent-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/*
 * Refuser et accepter partagent exactement le même style. Un bouton de refus
 * plus discret que le bouton d'acceptation est le grief le plus constamment
 * retenu par la CNIL contre les bandeaux : le choix doit être aussi simple
 * dans un sens que dans l'autre.
 */
.adon-consent-banner .adon-consent-banner__actions button {
    padding: 0.6rem 1.6rem;
    background-color: transparent;
    border: 1px solid var(--adon-consent-banner-texte);
    border-radius: 50px;
    color: var(--adon-consent-banner-texte);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.adon-consent-banner .adon-consent-banner__actions button:hover,
.adon-consent-banner .adon-consent-banner__actions button:focus {
    background-color: var(--adon-consent-banner-texte);
    color: var(--adon-consent-banner-fond);
}

.adon-consent-banner__customise {
    margin-left: auto;
}

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

.adon-consent-banner__list {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.adon-consent-banner__item {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.adon-consent-banner__item label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.adon-consent-banner__name {
    font-weight: 700;
}

.adon-consent-banner__note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 400;
    opacity: 0.85;
}

.adon-consent-banner .adon-consent-banner__save {
    padding: 0.6rem 1.6rem;
    background-color: var(--adon-consent-banner-accent);
    border: 1px solid var(--adon-consent-banner-accent);
    border-radius: 50px;
    color: var(--adon-consent-banner-texte);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.adon-consent-banner__link {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
}

.adon-consent-banner .adon-consent-banner__link a {
    color: var(--adon-consent-banner-texte);
    text-decoration: underline;
}

.adon-consent-banner :focus-visible {
    outline: 2px solid var(--accent2, #84dade);
    outline-offset: 2px;
}

/*
 * Le bandeau est en position fixe : sans cette réserve, il masque la fin du
 * contenu, et notamment les liens de pied de page.
 */
html.adon-consent-has-banner body {
    padding-bottom: 14rem;
}

@media (max-width: 768px) {
    .adon-consent-banner__customise {
        margin-left: 0;
    }

    .adon-consent-banner__actions button {
        flex: 1 1 100%;
    }

    html.adon-consent-has-banner body {
        padding-bottom: 22rem;
    }
}

/* ---------------------------------------------------------------------------
 * Modale de gestion des préférences
 * ------------------------------------------------------------------------ */

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

.adon-consent-modale {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.adon-consent-modale__fond {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.adon-consent-modale__boite {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 46rem;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2rem;
    background-color: var(--blanc, #ffffff);
    border-top: 3px solid var(--accent1, #008996);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/*
 * La boîte porte tabindex="-1" pour recevoir le focus quand elle ne contient
 * aucun élément focalisable. Le contour permanent que le navigateur y
 * dessinerait n'aurait alors aucun sens.
 */
.adon-consent-modale__boite:focus {
    outline: none;
}

.adon-consent-modale .adon-consent-modale__fermer {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--moyen, #666666);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.adon-consent-modale .adon-consent-modale__fermer:hover,
.adon-consent-modale .adon-consent-modale__fermer:focus {
    border-color: var(--accent1, #008996);
    color: var(--adon-consent-texte-accent, #05737f);
}

/* La modale se suffit à elle-même : le cadre du panneau ferait un double
   encadrement. */
.adon-consent-modale .adon-consent-preferences {
    border: none;
    padding: 0;
}

/*
 * Verrou de défilement. Sans lui, la molette fait défiler la page derrière la
 * modale, ce qui donne à croire qu'elle n'est pas modale.
 */
html.adon-consent-modale-ouverte,
html.adon-consent-modale-ouverte body {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Déclencheur et module Ad'on Builder
 * ------------------------------------------------------------------------ */

.adon-consent-module {
    margin: 0;
}

/* Variante « lien souligné », pour un pied de page. Le déclencheur peut être
   un <button> : on lui retire son apparence de bouton sans toucher à sa
   sémantique, qui reste la bonne. */
.adon-consent-module .adon-consent-lien {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Sections du panneau
 * ------------------------------------------------------------------------ */

.adon-consent-preferences .adon-consent-preferences__section {
    margin: 1.5rem 0 0.5rem;
    font-family: var(--fonttitres, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--fonce, #181b24);
}

.adon-consent-preferences .adon-consent-preferences__actions {
    margin: 1.25rem 0 0;
}

/* ---------------------------------------------------------------------------
 * Version accessible
 *
 * Le mode contraste eleve du socle neutralise les fonds et force le
 * soulignement. Le gabarit doit suivre, sinon il devient le seul bloc
 * colore d'une page en noir et blanc.
 * ------------------------------------------------------------------------ */

body.contraste-eleve .adon-consent-modale__boite {
    background-color: #ffffff;
    border-color: #000000;
    color: #000000;
}

body.contraste-eleve .adon-consent-modale .adon-consent-modale__fermer {
    color: #000000;
    border-color: #000000;
}

body.contraste-eleve .adon-consent-modale :focus {
    outline: 3px solid #ff0;
    outline-offset: 2px;
}

body.contraste-eleve .adon-consent-placeholder,
body.contraste-eleve .adon-consent-preferences {
    background-color: #ffffff;
    border-color: #000000;
    color: #000000;
}

body.contraste-eleve .adon-consent-placeholder__title,
body.contraste-eleve .adon-consent-placeholder__note,
body.contraste-eleve .adon-consent-placeholder__transfert,
body.contraste-eleve .adon-consent-placeholder__remember,
body.contraste-eleve .adon-consent-preferences__note,
body.contraste-eleve .adon-consent-preferences__date {
    color: #000000;
}

body.contraste-eleve .adon-consent-placeholder__links a {
    color: #000000;
    text-decoration: underline;
}

body.contraste-eleve .adon-consent-placeholder .adon-consent-accept,
body.contraste-eleve .adon-consent-preferences .adon-consent-preferences__save {
    background-color: #ffffff;
    border-color: #000000;
    color: #000000;
}

body.contraste-eleve .adon-consent-placeholder .adon-consent-accept:hover,
body.contraste-eleve .adon-consent-placeholder .adon-consent-accept:focus,
body.contraste-eleve .adon-consent-preferences .adon-consent-preferences__save:hover,
body.contraste-eleve .adon-consent-preferences .adon-consent-preferences__save:focus {
    background-color: #000000;
    color: #ffffff;
}

body.contraste-eleve .adon-consent-placeholder :focus,
body.contraste-eleve .adon-consent-preferences :focus,
body.contraste-eleve .adon-consent-banner :focus {
    outline: 3px solid #ff0;
    outline-offset: 2px;
}

body.contraste-eleve .adon-consent-banner {
    background-color: #000000;
    border-top-color: #ffffff;
    color: #ffffff;
    box-shadow: none;
}

body.contraste-eleve .adon-consent-banner__title,
body.contraste-eleve .adon-consent-banner__text,
body.contraste-eleve .adon-consent-banner__services,
body.contraste-eleve .adon-consent-banner__note {
    color: #ffffff;
    opacity: 1;
}

body.contraste-eleve .adon-consent-banner__actions button,
body.contraste-eleve .adon-consent-banner__save {
    background-color: #000000;
    border-color: #ffffff;
    color: #ffffff;
}

body.contraste-eleve .adon-consent-banner__actions button:hover,
body.contraste-eleve .adon-consent-banner__actions button:focus,
body.contraste-eleve .adon-consent-banner__save:hover,
body.contraste-eleve .adon-consent-banner__save:focus {
    background-color: #ffffff;
    color: #000000;
}

/* ---------------------------------------------------------------------------
 * Sobriete d'animation
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .adon-consent-placeholder .adon-consent-accept {
        transition: none;
    }
}