/* ============================================================================
   hb-consent.css — Bandeau de consentement aux traceurs, Hélène B
   ----------------------------------------------------------------------------
   Mécanisme UNIQUE du site vitrine. Remplace le bandeau Finsweet (fs-cc) et le
   bandeau maison inline qui coexistaient auparavant.

   Palette imposée : navy #2A2A41, navy profond #1F1F30, or #CDAF76,
   or clair #E0C896, blanc #FFFFFF, crème #FAF7F1. Aucune autre teinte.

   Exigences CNIL couvertes ici, côté visuel :
     - « Tout accepter » et « Tout refuser » ont EXACTEMENT le même style,
       la même taille, le même contraste et le même niveau de clic.
       Aucun bouton grisé, aucun bouton secondaire pour le refus.
     - Cibles tactiles de 44 px minimum.
     - Contrastes : blanc sur navy 13,9:1, navy sur or 6,6:1, or sur navy 6,6:1.
   ========================================================================== */

.hb-cc,
.hb-cc__manager {
    --hb-cc-navy: #2a2a41;
    --hb-cc-navy-deep: #1f1f30;
    --hb-cc-gold: #cdaf76;
    --hb-cc-gold-light: #e0c896;
    --hb-cc-white: #ffffff;
    --hb-cc-paper: #faf7f1;
    --hb-cc-body: 'Inter', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hb-cc-title: 'Lora', Georgia, 'Times New Roman', serif;
}

/* --------------------------------------------------------------------------
   Conteneur. Position fixe en bas, sur toute la largeur.
   Le fond de page reste visible, lisible et défilable : le bandeau ne bloque
   jamais la consultation du site.
   -------------------------------------------------------------------------- */
.hb-cc {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 2147483000;
    display: flex;
    justify-content: center;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    font-family: var(--hb-cc-body);
}

.hb-cc[hidden] {
    display: none;
}

/* LA CAPSULE, et pourquoi ce n'est plus un bandeau.
   Verdict du 15 août 2026 : « un gros rectangle agressif ». La conformité était
   bonne, la forme ne l'était pas. Un panneau de 1 080 px qui barre le bas de
   l'écran est un mur ; on le subit avant de le lire. La capsule dit la même
   chose, avec la même rigueur CNIL, mais elle se pose au lieu de barrer.

   La matière est celle de la nouvelle porte : verre nuit translucide, liseré or
   d'un seul pixel, coins très arrondis. La translucidité n'est pas décorative :
   elle laisse voir que la page continue derrière, ce qu'un aplat opaque nie.

   Ce qui NE bouge pas : la capsule ne défile jamais elle même, seule la liste
   des catégories défile. Les deux réponses restent donc toujours visibles
   ensemble, y compris sur un petit écran avec le détail ouvert. Sans cela,
   refuser demanderait un défilement qu'accepter n'exige pas, et c'est
   exactement le déséquilibre que la CNIL sanctionne. */
.hb-cc__panel {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: min(82vh, 720px);
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px 24px 18px;
    background: linear-gradient(
        135deg,
        rgba(42, 42, 65, 0.9),
        rgba(31, 31, 48, 0.94)
    );
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    color: var(--hb-cc-white);
    /* UN liseré, et un seul. La première version ajoutait un anneau blanc en
       ombre intérieure par dessus la bordure or : à l'écran les deux se
       lisaient comme un double encadrement, et la capsule reprenait l'air
       cerné qu'on venait de lui retirer. Il ne reste que le trait or d'un
       pixel, plus un reflet en haut qui donne l'épaisseur du verre. */
    border: 1px solid rgba(205, 175, 118, 0.38);
    border-radius: 26px;
    box-shadow:
        0 24px 48px rgba(31, 31, 48, 0.42),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
    /* Le composant ne DOIT rien hériter de la page qui l'accueille : sans cet
       alignement explicite, la capsule s'affichait centrée sur une page centrée
       et à gauche sur une autre. Une garde de conformité qui change de forme
       selon la page n'inspire pas confiance. */
    text-align: left;
    /* 300 ms en décélération : elle GLISSE depuis le bas, elle ne rebondit pas.
       Le ressort de la maison sert aux gestes que l'utilisatrice déclenche ;
       ici c'est le site qui s'invite, donc il entre discrètement. */
    animation: hb-cc-rise 300ms cubic-bezier(0, 0, 0.2, 1) both;
}

/* Le détail par catégorie a besoin de place : la capsule s'élargit alors, au
   lieu de forcer un défilement dans une fenêtre trop étroite. */
.hb-cc__panel:has(.hb-cc__prefs:not([hidden])) {
    max-width: 640px;
}

@keyframes hb-cc-rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Le mouvement est un confort, jamais une condition d'accès. */
@media (prefers-reduced-motion: reduce) {
    .hb-cc__panel {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
/* Le titre reste en Lora italique or : c'est la signature de la maison, et le
   seul endroit de la capsule où la marque parle. */
.hb-cc__title {
    margin: 0 0 6px;
    font-family: var(--hb-cc-title);
    font-style: italic;
    font-weight: 500;
    font-size: 1.12rem;
    line-height: 1.25;
    color: var(--hb-cc-gold);
    text-align: center;
}

/* UNE phrase, et elle tient sur une ligne ou deux. Le détail complet n'a pas
   disparu : il vit dans le panneau « Personnaliser », à un clic, catégorie par
   catégorie. Une capsule qui récite trois phrases redevient le mur qu'on vient
   de retirer. */
.hb-cc__text {
    margin: 0 0 14px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    max-width: 62ch;
}

.hb-cc__link {
    color: var(--hb-cc-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hb-cc__link:hover,
.hb-cc__link:focus-visible {
    color: var(--hb-cc-gold-light);
}

/* --------------------------------------------------------------------------
   Panneau de catégories. Cases NON cochées par défaut, sauf la catégorie
   strictement nécessaire qui est cochée et désactivée.
   -------------------------------------------------------------------------- */
.hb-cc__prefs {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 0 20px;
    border-top: 1px solid rgba(205, 175, 118, 0.22);
    padding-top: 18px;
}

.hb-cc__prefs[hidden] {
    display: none;
}

.hb-cc__group {
    margin: 0;
    padding: 0;
    border: 0;
}

.hb-cc__legend {
    padding: 0;
    margin: 0 0 12px;
    font-family: var(--hb-cc-title);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--hb-cc-gold);
}

.hb-cc__cat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    min-height: 44px;
}

.hb-cc__cat:last-child {
    border-bottom: 0;
}

.hb-cc__cat input[type='checkbox'] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--hb-cc-gold);
    cursor: pointer;
}

.hb-cc__cat input[type='checkbox']:disabled {
    cursor: default;
}

.hb-cc__cat-body {
    flex: 1 1 auto;
    min-width: 0;
}

.hb-cc__cat-name {
    display: block;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--hb-cc-white);
    margin-bottom: 3px;
}

.hb-cc__cat-desc {
    display: block;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--hb-cc-paper);
    opacity: 0.86;
}

/* --------------------------------------------------------------------------
   Boutons. « Tout accepter » et « Tout refuser » partagent la classe
   .hb-cc__btn sans aucun modificateur : leur apparence est identique, à la
   couleur près du bord jamais. C'est la contrainte CNIL centrale.
   -------------------------------------------------------------------------- */
.hb-cc__title,
.hb-cc__text,
.hb-cc__actions,
.hb-cc__more {
    flex: 0 0 auto;
}

.hb-cc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* DEUX PASTILLES VERRE-OR FANTÔMES, ET STRICTEMENT IDENTIQUES.
   L'égalité visuelle d'« Accepter » et « Refuser » n'est pas un réglage
   d'ambiance, c'est la contrainte CNIL centrale : même taille, même matière,
   même contraste, même nombre de clics. Elles partagent donc `.hb-cc__btn` sans
   le moindre modificateur, et il ne faut JAMAIS en dériver une variante
   « primaire ». Ce qui doit donner envie de dire oui, c'est l'élégance de
   l'ensemble, jamais un déséquilibre entre les deux réponses.
   Le fantôme remplace l'aplat or : sur du verre nuit, deux pavés or pleins
   pesaient autant qu'un mur, ce qui était exactement le reproche fait à
   l'ancien bandeau. */
.hb-cc__btn {
    flex: 1 1 140px;
    min-height: 44px;
    padding: 11px 22px;
    border: 1px solid rgba(205, 175, 118, 0.55);
    border-radius: 999px;
    background: rgba(205, 175, 118, 0.08);
    color: var(--hb-cc-gold-light);
    font-family: var(--hb-cc-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition:
        background 200ms cubic-bezier(0.2, 0, 0, 1),
        border-color 200ms cubic-bezier(0.2, 0, 0, 1),
        color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.hb-cc__btn:hover,
.hb-cc__btn:focus-visible {
    background: rgba(205, 175, 118, 0.18);
    border-color: var(--hb-cc-gold-light);
    color: var(--hb-cc-white);
}

.hb-cc__btn[hidden] {
    display: none;
}

.hb-cc__more {
    /* Cible tactile de 44 px, mais le texte est centré DEDANS : en bloc simple
       il se collait en haut de sa boîte et laissait un vide sous la capsule
       qu'on lisait comme une marge ratée. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 6px;
    min-height: 44px;
    padding: 4px;
    border: 0;
    background: none;
    color: var(--hb-cc-gold);
    font-family: var(--hb-cc-body);
    font-size: 0.88rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.hb-cc__more:hover,
.hb-cc__more:focus-visible {
    color: var(--hb-cc-gold-light);
}

.hb-cc :focus-visible {
    outline: 2px solid var(--hb-cc-gold-light);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Point d'entrée permanent, injecté en fin de page quand aucun déclencheur
   n'existe déjà dans le pied de page.
   -------------------------------------------------------------------------- */
.hb-cc__manager {
    display: block;
    width: 100%;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border: 0;
    background: var(--hb-cc-navy-deep);
    color: var(--hb-cc-gold);
    font-family: var(--hb-cc-body);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    min-height: 44px;
}

.hb-cc__manager:hover,
.hb-cc__manager:focus-visible {
    color: var(--hb-cc-gold-light);
}

.hb-cc__manager--inline {
    display: inline-block;
    width: auto;
    padding: 11px 0;
    background: none;
}

/* --------------------------------------------------------------------------
   Sens de lecture droite vers gauche (arabe)
   -------------------------------------------------------------------------- */
.hb-cc--rtl .hb-cc__panel {
    direction: rtl;
    text-align: right;
}

.hb-cc--rtl .hb-cc__cat {
    text-align: right;
}

/* --------------------------------------------------------------------------
   Mobile. Boutons pleine largeur, empilés, cibles tactiles généreuses.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Pleine largeur moins les marges, et la capsule se pose AU DESSUS de la
       zone sûre, jamais dessous : sur un iPhone, le bas de l'écran appartient
       à la barre de navigation du système, pas à nous. */
    .hb-cc {
        padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .hb-cc__panel {
        max-width: none;
        padding: 18px 18px 16px;
        border-radius: 22px;
        max-height: 86vh;
    }

    .hb-cc__title {
        font-size: 1.06rem;
    }

    .hb-cc__text {
        font-size: 0.86rem;
        margin-bottom: 14px;
    }

    /* Les deux réponses restent CÔTE À CÔTE et de largeur égale. Les empiler
       donnerait au premier bouton la place du pouce et au second le reste :
       c'est un déséquilibre que la CNIL regarde, même quand les styles sont
       identiques. 44 px de haut, la cible minimale. */
    .hb-cc__btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        padding: 11px 12px;
        font-size: 0.86rem;
    }

    /* Le détail ouvert amène un TROISIÈME bouton, « Enregistrer mes choix ».
       À trois de front sur 390 px, les libellés se cassent en deux lignes et
       les deux réponses cessent d'être lisibles d'un coup d'œil. Le bouton
       d'enregistrement prend donc sa propre ligne : « Accepter » et
       « Refuser » gardent leur largeur égale et leur voisinage, ce qui est la
       seule chose que la CNIL exige ici. */
    .hb-cc__btn[data-hb-act='save']:not([hidden]) {
        flex: 1 1 100%;
        order: 1;
        margin-top: 2px;
    }
}

/* --------------------------------------------------------------------------
   Anciens bandeaux neutralisés. Le markup Finsweet subsiste sur quelques pages
   et sa bibliothèque n'est plus chargée : on garantit qu'il reste invisible.
   -------------------------------------------------------------------------- */
[fs-cc='banner'],
.fs-cc-banner_component,
#hb-cookie-banner {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hb-cc__panel {
        animation: none;
    }

    .hb-cc__btn {
        transition: none;
    }

    .hb-cc__btn:hover {
        transform: none;
    }
}