/* =====================================================================
 * BANNIÈRE DE CONSENTEMENT À LA MESURE D'AUDIENCE — composant partagé
 * =====================================================================
 *
 * EXTRAIT DE styles/site.css LE 25/09/2026, POUR CORRIGER UN DÉFAUT : la
 * bannière était incluse dans clone.njk depuis le 22/09, mais ses règles
 * vivaient dans site.css, que l'accueil ne charge pas. Elle s'affichait
 * donc SANS AUCUN STYLE sur la page la plus visitée du site — position
 * statique au milieu du flux, fond transparent, boutons par défaut du
 * navigateur. Constaté au rendu, pas déduit : le défaut n'était visible
 * qu'avec GA_ID renseigné, ce qui n'était encore le cas d'aucun
 * environnement.
 *
 * UNE SEULE DÉFINITION, DEUX GABARITS : chargé par partials/tete.njk
 * (pages intérieures) et par clone.njk (accueil), et dans les deux cas
 * SEULEMENT si la mesure est configurée — sans GA_ID, le partiel n'émet
 * rien et cette feuille n'aurait aucun élément à habiller.
 *
 * IL N'EMPLOIE QUE DES JETONS DE LA CHARTE, présents dans
 * tokens/cogemob-tokens.css : c'est la condition pour qu'il fonctionne
 * sur l'accueil, qui ne charge rien d'autre.
 *
 * LES BOUTONS SONT AUTONOMES, et ne portent plus la classe `.bouton` du
 * site : cette classe-là n'existe que dans site.css, donc pas sur
 * l'accueil, et la bannière aurait eu deux apparences selon la page.
 * Elles sont recopiées ici, une fois, pour les deux.
 * ------------------------------------------------------------------- */

/* LA BANNIÈRE RESTAIT À L'ÉCRAN APRÈS UN CLIC, SUR L'ACCUEIL SEULEMENT
 * (signalé par le client le 27/09/2026, reproduit au navigateur).
 *
 * `consentement.js` faisait bien son travail : l'attribut `hidden` était
 * posé, le choix enregistré, la mesure d'audience chargée en cas d'accord.
 * Mais `hidden` ne masque un élément que si AUCUNE règle d'auteur ne fixe
 * son `display` — et la règle ci-dessous en fixe un (`flex`). Une règle
 * d'auteur, même peu spécifique, l'emporte sur le `display: none` de la
 * feuille du navigateur.
 *
 * POURQUOI SUR L'ACCUEIL SEULEMENT : `site.css` porte une règle générale
 * `[hidden] { display: none !important }`, écrite pour un défaut identique
 * sur le carrousel. L'accueil est un clone et NE CHARGE PAS site.css.
 * C'est la troisième fois que cette asymétrie produit un défaut visible,
 * après les styles de la bannière elle-même et ceux du cadre photo.
 *
 * LA RÈGLE VOYAGE DONC AVEC LE COMPOSANT, et non dans site.css : une
 * feuille chargée par clone.njk doit être autonome, y compris pour ce
 * qu'elle attend d'une règle générale. */
.consentement[hidden] {
  display: none !important;
}

/* Posée en bas de l'écran et non en plein milieu : elle informe, elle ne
 * barre pas la route. Le visiteur peut lire la page et l'ignorer — auquel
 * cas rien n'est mesuré.
 *
 * `z-index` AU-DESSUS DE L'EN-TÊTE COLLANT, qui est à 50 dans la feuille
 * du clone : sans quoi la bannière passerait dessous sur un petit écran. */
.consentement {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  padding: clamp(16px, 2vw, 24px) var(--gutter-fluide);
  background: var(--brand-petrole);
  color: var(--neutral-blanc);
  border-top: 3px solid var(--brand-jaune);
}

.consentement__texte {
  flex: 1 1 380px;
  min-width: 0;
}

.consentement__titre {
  font-family: var(--font-display);
  font-size: var(--type-small);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-1);
}

.consentement__explication {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: var(--type-small);
  line-height: var(--leading-body);
  max-width: var(--measure-body);
  margin: 0;
}

/* Le lien vers la page Confidentialité est en jaune sur le pétrole :
   5,89:1, le seul endroit du site où le jaune fait du texte et tient. */
.consentement__explication a {
  color: var(--brand-jaune);
  text-underline-offset: 3px;
}

.consentement__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* LES DEUX BOUTONS ONT LE MÊME POIDS VISUEL, à la couleur de fond près :
 * un « refuser » minuscule à côté d'un « accepter » voyant est un
 * consentement extorqué, et les autorités de protection des données le
 * refusent. Mêmes dimensions, même graisse, même rayon — seul l'aplat
 * distingue celui qui engage. */
.consentement__bouton {
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--type-small);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: 2px solid var(--neutral-blanc);
  background: transparent;
  color: var(--neutral-blanc);
}

.consentement__bouton--accepter {
  border-color: var(--brand-jaune);
  background: var(--brand-jaune);
  color: var(--brand-petrole);
}

/* Le contour de focus doit se voir sur le pétrole comme sur le jaune :
   le blanc tient sur les deux, la couleur d'accent non. */
.consentement__bouton:focus-visible {
  outline: 3px solid var(--neutral-blanc);
  outline-offset: 3px;
}