/* Bandeau de consentement aux cookies (@Core/site_parametrage/frontend/_cookies.html.twig).

   Servie en feuille autonome depuis base_frontend.html.twig, comme copyright.css : elle n'est
   pas concaténée dans le CSS figé à la publication, donc elle s'applique aussi aux pages
   publiées avant l'ajout du bandeau.

   PARTI PRIS VISUEL — « carte d'angle », la forme retenue par les références actuelles
   (Stripe, Vercel, et le gestionnaire de consentement du DSFR sur service-public.gouv.fr) :
   une carte compacte posée dans un angle, sans voile qui bloque la page. La barre pleine
   largeur et la fenêtre centrée restent disponibles (réglage « Position du bandeau »), mais
   ce n'est plus la forme par défaut : un bandeau qui barre l'écran se lit comme un obstacle,
   et fait cliquer « Tout accepter » pour s'en débarrasser.

   Volontairement autonome de la charte du site : le bandeau doit rester lisible quel que soit
   le fond de la page (image, dégradé, couleur sombre). Il pose donc ses propres couleurs, et
   n'hérite que de la police. L'accent par défaut est une encre neutre, jamais une couleur de
   marque : elle ne peut pas jurer avec la palette du site qui l'accueille. Les variables
   --ws-cookies-* permettent à un site de tout reprendre sans toucher à cette feuille. */

:root {
    /* Opacité haute (.94) et non .85 : la carte se pose au-dessus de n'importe quoi — un aplat
       corail, une photo. En dessous, le texte secondaire perd son contraste dès que le fond est
       vif (RGAA 3.2). Le flou suffit à donner la profondeur, la transparence n'a pas à la payer. */
    --ws-cookies-fond: rgba(255, 255, 255, .94);
    --ws-cookies-fond-opaque: #ffffff;
    --ws-cookies-texte: #18181b;
    --ws-cookies-texte-doux: #52525b;
    --ws-cookies-bordure: rgba(9, 9, 11, .10);
    --ws-cookies-trait: rgba(9, 9, 11, .07);
    --ws-cookies-accent: #18181b;
    --ws-cookies-accent-texte: #ffffff;
    --ws-cookies-survol: rgba(9, 9, 11, .05);
    --ws-cookies-voile: rgba(9, 9, 11, .45);
    --ws-cookies-rayon: 16px;
    --ws-cookies-ombre:
        0 1px 2px rgba(9, 9, 11, .04),
        0 12px 32px -8px rgba(9, 9, 11, .18),
        0 2px 8px -2px rgba(9, 9, 11, .08);
}

/* Thème sombre suivi automatiquement : une carte blanche posée sur un site sombre est un
   projecteur en pleine figure, et c'est la première chose qu'un visiteur voit du site. */
@media (prefers-color-scheme: dark) {
    :root {
        --ws-cookies-fond: rgba(24, 24, 27, .94);
        --ws-cookies-fond-opaque: #18181b;
        --ws-cookies-texte: #fafafa;
        --ws-cookies-texte-doux: #a1a1aa;
        --ws-cookies-bordure: rgba(255, 255, 255, .12);
        --ws-cookies-trait: rgba(255, 255, 255, .08);
        --ws-cookies-accent: #fafafa;
        --ws-cookies-accent-texte: #18181b;
        --ws-cookies-survol: rgba(255, 255, 255, .07);
        --ws-cookies-voile: rgba(0, 0, 0, .6);
        --ws-cookies-ombre:
            0 1px 2px rgba(0, 0, 0, .3),
            0 12px 32px -8px rgba(0, 0, 0, .6);
    }
}

/* Le bandeau et le panneau passent au-dessus de tout, y compris d'un menu collant. */
.ws-cookies,
.ws-cookies-panneau {
    position: fixed;
    z-index: 10000;
    color: var(--ws-cookies-texte);
    font-size: .9375rem;
    line-height: 1.55;
    /* Les chiffres d'un texte de bandeau (durées, dates) doivent s'aligner. */
    font-variant-numeric: tabular-nums;
}

.ws-cookies[hidden],
.ws-cookies-panneau[hidden],
.ws-cookies-panneau__contexte[hidden] {
    display: none;
}

/* --- Position : carte d'angle (défaut) ------------------------------------

   Bas-gauche comme le DSFR : à droite, la carte entre en conflit avec les widgets de chat et
   les boutons « retour en haut », qui s'y logent presque toujours. */

.ws-cookies--coin {
    inset: auto auto 1.25rem 1.25rem;
    max-width: min(26rem, calc(100vw - 2.5rem));
}

.ws-cookies--coin .ws-cookies__voile {
    display: none;
}

/* --- Position : barre pleine largeur -------------------------------------- */

.ws-cookies--bas {
    inset: auto 0 0 0;
}

.ws-cookies--bas .ws-cookies__voile {
    display: none;
}

.ws-cookies--bas .ws-cookies__boite {
    max-width: 64rem;
    margin: 0 auto;
    border-radius: var(--ws-cookies-rayon) var(--ws-cookies-rayon) 0 0;
}

/* --- Position : fenêtre centrée sur voile --------------------------------- */

.ws-cookies--centre {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ws-cookies--centre .ws-cookies__boite {
    max-width: 32rem;
}

.ws-cookies__voile {
    position: fixed;
    inset: 0;
    background: var(--ws-cookies-voile);
    backdrop-filter: blur(2px);
}

/* --- La carte -------------------------------------------------------------

   `backdrop-filter` : la carte laisse deviner la page derrière elle plutôt que de la masquer —
   elle se lit comme posée sur le site, pas comme un écran intercalé. Repli automatique sur le
   fond opaque là où le filtre n'existe pas (@supports plus bas). */

.ws-cookies__boite {
    position: relative;
    padding: 1.5rem;
    background: var(--ws-cookies-fond-opaque);
    border: 1px solid var(--ws-cookies-bordure);
    border-radius: var(--ws-cookies-rayon);
    box-shadow: var(--ws-cookies-ombre);
    max-height: 85vh;
    overflow-y: auto;
    /* Corrige le crénelage des angles arrondis sur fond translucide (Safari). */
    isolation: isolate;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .ws-cookies__boite,
    .ws-cookies-panneau__boite {
        background: var(--ws-cookies-fond);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
    }
}

.ws-cookies__titre {
    margin: 0 0 .5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ws-cookies-texte);
}

.ws-cookies__message {
    margin: 0 0 1rem;
    color: var(--ws-cookies-texte-doux);
}

.ws-cookies__lien {
    margin: -.5rem 0 1rem;
}

.ws-cookies__lien a {
    color: var(--ws-cookies-texte);
    text-decoration: underline;
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ws-cookies-bordure);
    font-size: .875rem;
}

.ws-cookies__lien a:hover {
    text-decoration-color: currentColor;
}

/* --- Boutons -------------------------------------------------------------

   « Tout accepter » et « Tout refuser » partagent exactement le même style : refuser doit être
   aussi simple — et aussi visible — qu'accepter (délibération CNIL n° 2020-092). Seul
   « Personnaliser » est en retrait : il ouvre un choix au lieu de le clore. */

.ws-cookies__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.ws-cookies__btn {
    flex: 1 1 auto;
    padding: .5625rem 1.125rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ws-cookies__btn {
        transition: none;
    }
}

.ws-cookies__btn--principal {
    background: var(--ws-cookies-accent);
    color: var(--ws-cookies-accent-texte);
}

.ws-cookies__btn--principal:hover {
    /* Assombrit/éclaircit l'accent sans en coder une seconde valeur : le voile suit le thème. */
    background-image: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12));
}

/* Variante « contour » — utilisée dans le panneau de réglages, où l'action principale devient
   « Enregistrer mes choix » : le visiteur y est venu pour trancher finalité par finalité. Tout
   accepter et tout refuser y restent possibles, **au même poids l'un que l'autre**, mais en
   retrait du geste que le panneau sert. */
.ws-cookies__btn--contour {
    background: transparent;
    color: var(--ws-cookies-texte);
    border-color: var(--ws-cookies-bordure);
}

.ws-cookies__btn--contour:hover {
    background: var(--ws-cookies-survol);
}

/* Troisième action, en retrait assumé : rendue comme un lien de texte aligné sur le contenu,
   et non comme un troisième bouton. Trois pastilles côte à côte donneraient trois poids égaux
   là où seuls « accepter » et « refuser » doivent en avoir un. */
.ws-cookies__btn--secondaire {
    flex: 0 0 auto;
    padding-inline: 0;
    background: transparent;
    color: var(--ws-cookies-texte-doux);
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
    text-decoration-color: transparent;
}

.ws-cookies__btn--secondaire:hover {
    color: var(--ws-cookies-texte);
    text-decoration-color: currentColor;
}

.ws-cookies__btn:active {
    transform: scale(.985);
}

/* Contour de focus propre au composant : le bandeau ne peut pas compter sur celui du site,
   ses couleurs lui étant étrangères (RGAA 10.7). */
.ws-cookies__btn:focus-visible,
.ws-cookies-panneau__fermer:focus-visible,
.ws-cookies__lien a:focus-visible,
.ws-cookies-finalite__case:focus-visible {
    outline: 2px solid var(--ws-cookies-texte);
    outline-offset: 2px;
}

/* --- Panneau de réglages -------------------------------------------------- */

.ws-cookies-panneau {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ws-cookies-panneau__boite {
    position: relative;
    width: 100%;
    max-width: 34rem;
    max-height: min(85vh, 46rem);
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--ws-cookies-fond-opaque);
    border: 1px solid var(--ws-cookies-bordure);
    border-radius: var(--ws-cookies-rayon);
    box-shadow: var(--ws-cookies-ombre);
}

.ws-cookies-panneau__entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ws-cookies-panneau__fermer {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 1.375rem;
    line-height: 1;
    color: var(--ws-cookies-texte-doux);
    cursor: pointer;
}

.ws-cookies-panneau__fermer:hover {
    background: var(--ws-cookies-survol);
    color: var(--ws-cookies-texte);
}

/* Ouverture ciblée : le panneau a été appelé par un contenu bloqué (« Lire la vidéo »),
   pas par le lien du pied de page. Deux repères, parce qu'ils ne répondent pas à la même
   question : cette note dit POURQUOI le panneau s'est ouvert, la finalité désignée
   ci-dessous dit OÙ agir. Sans le second, le visiteur relit cinq finalités pour trouver
   celle qui débloque ce qu'il vient de demander. */
.ws-cookies-panneau__contexte {
    margin: 1rem 0 0;
    padding: .75rem .875rem;
    background: var(--ws-cookies-survol);
    border-left: 3px solid var(--ws-cookies-accent);
    border-radius: 8px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--ws-cookies-texte);
}

.ws-cookies-panneau__liste {
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.ws-cookies-finalite {
    padding: 1rem 0;
    border-top: 1px solid var(--ws-cookies-trait);
}

.ws-cookies-finalite:last-child {
    border-bottom: 1px solid var(--ws-cookies-trait);
}

/* Finalité désignée. Repère de FOND et de bordure, jamais de couleur seule (RGAA 3.1) —
   et le focus part sur sa case, ce qui la nomme aussi au lecteur d'écran. La case reste
   décochée : montrer où cliquer n'est pas cliquer à la place du visiteur. */
.ws-cookies-finalite--cible {
    padding-left: .875rem;
    margin-left: calc(-.875rem - 3px);
    background: var(--ws-cookies-survol);
    border-left: 3px solid var(--ws-cookies-accent);
    border-radius: 8px;
}

.ws-cookies-finalite__ligne {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.ws-cookies-finalite__titre {
    flex: 1 1 auto;
    order: -1; /* libellé à gauche, interrupteur à droite : sens de lecture d'un réglage. */
    font-weight: 550;
    cursor: pointer;
}

/* --- L'interrupteur -------------------------------------------------------

   Un vrai <input type="checkbox"> repeint : clavier, lecteurs d'écran et `:checked` restent
   ceux de la case native. Une <div role="switch"> aurait exigé de tout réimplémenter en JS,
   pour le même rendu. */

.ws-cookies-finalite__case {
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    margin: 0;
    background: var(--ws-cookies-survol);
    border: 1px solid var(--ws-cookies-bordure);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}

.ws-cookies-finalite__case::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 1.125rem;
    height: 1.125rem;
    transform: translateY(-50%);
    background: var(--ws-cookies-fond-opaque);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(9, 9, 11, .25);
    transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}

.ws-cookies-finalite__case:checked {
    background: var(--ws-cookies-accent);
    border-color: var(--ws-cookies-accent);
}

.ws-cookies-finalite__case:checked::after {
    transform: translate(calc(1rem - 1px), -50%);
    background: var(--ws-cookies-accent-texte);
}

/* Finalité exemptée : verrouillée sur « activé ». Grisée mais pas effacée — l'état doit rester
   lisible, c'est le texte à côté qui explique pourquoi il ne bouge pas. */
.ws-cookies-finalite__case:disabled {
    opacity: .5;
    cursor: default;
}

.ws-cookies-finalite__case:disabled + .ws-cookies-finalite__titre,
.ws-cookies-finalite__case:disabled ~ .ws-cookies-finalite__titre {
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .ws-cookies-finalite__case,
    .ws-cookies-finalite__case::after {
        transition: none;
    }
}

.ws-cookies-finalite__description,
.ws-cookies-finalite__services {
    margin: .4rem 0 0;
    font-size: .875rem;
    color: var(--ws-cookies-texte-doux);
}

.ws-cookies-finalite__services {
    font-size: .8125rem;
}

.ws-cookies__actions--panneau {
    padding-top: .25rem;
}

/* L'enregistrement des choix est poussé à droite, isolé des deux actions en bloc : c'est un
   geste d'une autre nature, il ne s'aligne pas dans la même série. */
.ws-cookies__actions--panneau .ws-cookies__btn--principal {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* Fond figé pendant qu'une boîte modale est ouverte (bandeau centré ou panneau).
   La carte d'angle, elle, ne bloque rien : la page reste lisible et défilable. */
.ws-cookies-ouvert,
.ws-cookies-ouvert body {
    overflow: hidden;
}

/* --- Entrée en scène ------------------------------------------------------

   Une carte qui apparaît d'un coup se lit comme un défaut d'affichage ; qu'elle monte
   brièvement dit « je viens d'arriver, je ne suis pas la page ». Court (.28s) et coupé net
   pour qui a demandé moins d'animations. */

@keyframes ws-cookies-entree {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes ws-cookies-apparition {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
}

.ws-cookies__boite {
    animation: ws-cookies-entree .28s cubic-bezier(.16, 1, .3, 1) both;
}

.ws-cookies-panneau__boite {
    animation: ws-cookies-apparition .2s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .ws-cookies__boite,
    .ws-cookies-panneau__boite {
        animation: none;
    }
}

/* --- Contenu tiers bloqué ------------------------------------------------

   Encart posé par cookies.js à la place d'une iframe non consentie
   (<iframe data-websee-cookies-src="…" data-websee-cookies-finalite="contenus">). */

.ws-cookies-bloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 12rem;
    padding: 2rem 1.5rem;
    color: var(--ws-cookies-texte);
    background: var(--ws-cookies-survol);
    border: 1px solid var(--ws-cookies-bordure);
    border-radius: calc(var(--ws-cookies-rayon) - 4px);
    text-align: center;
}

.ws-cookies-bloque__texte {
    max-width: 34rem;
    margin: 0;
    font-size: .9375rem;
    color: var(--ws-cookies-texte-doux);
}

.ws-cookies-bloque .ws-cookies__btn {
    flex: 0 0 auto;
}

/* --- Petits écrans --------------------------------------------------------

   La carte d'angle devient une feuille collée en bas, arrondie sur le dessus seulement : la
   forme attendue d'un panneau mobile. `env(safe-area-inset-bottom)` évite que les boutons
   passent sous la barre de geste des iPhone. */

@media (max-width: 575.98px) {
    .ws-cookies--coin {
        inset: auto 0 0 0;
        max-width: none;
    }

    .ws-cookies--coin .ws-cookies__boite,
    .ws-cookies--bas .ws-cookies__boite {
        border-radius: var(--ws-cookies-rayon) var(--ws-cookies-rayon) 0 0;
        border-bottom: 0;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    .ws-cookies-panneau {
        padding: 0;
        align-items: flex-end;
    }

    .ws-cookies-panneau__boite {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--ws-cookies-rayon) var(--ws-cookies-rayon) 0 0;
        border-bottom: 0;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }

    /* Trois cibles côte à côte deviennent trop étroites pour être visées sans erreur. */
    .ws-cookies__btn {
        flex: 1 1 100%;
        padding: .6875rem 1.125rem;
    }

    .ws-cookies__btn--secondaire {
        flex: 1 1 100%;
    }
}

/* Écran court (mobile en paysage) : le panneau doit rester atteignable en entier. */
@media (max-height: 30rem) {
    .ws-cookies__boite,
    .ws-cookies-panneau__boite {
        max-height: 92vh;
        padding: 1rem 1.25rem;
    }
}