/* ============================================================
   BANNIERE DE CONSENTEMENT — feuille AUTONOME
   ------------------------------------------------------------
   Pourquoi un fichier a part, et pas une rallonge de `zellij-ui.css` :

   L'accueil (`Experiments/.../index.html`) ne charge NI `styles.css` NI
   `zellij-ui.css` — seulement `accueil.css` et `site-menu.css`. Jusqu'ici la
   banniere n'existait tout simplement pas sur l'accueil ; le jour ou on l'y
   ajoute, elle sortirait sans aucun style. Cette feuille se suffit donc a
   elle-meme : elle ne suppose que les variables de couleur et de police, que
   `accueil.css` et `tokens.css` definissent l'un comme l'autre.

   Chargee APRES `zellij-ui.css` dans `base.njk`, elle reprend la main sur les
   regles heritees de `styles.css` (fichier de prod, en lecture seule).

   MOBILE D'ABORD : les fondatrices arrivent au telephone. Les tailles de base
   sont celles du petit ecran, le desktop est la surcouche en fin de fichier.

   14/08 — LOOP 01 / T1 : la carte flottante (680 px, bas droite) recouvrait
   le CTA « Commencer » du hero de l'accueil et ~35 % du fold mobile. Elle
   devient une BARRE BASSE pleine largeur : une ligne sur grand ecran, deux
   au plus entre 900 et 1440 px (le wording legal reste entier, jamais
   tronque), colonne compacte au telephone. Ni le texte, ni les trois choix,
   ni la logique JS (`analytics-consent.js`) ne changent : seule la forme.
   ============================================================ */

.cookie-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 120;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;

  /* `width: auto` reprend la main sur le `width: min(720px, …)` herite de
     `styles.css` (prod) : sans lui, la barre restait une carte de 720 px
     collee a gauche sur les 74 pages Eleventy (l'accueil, qui ne charge pas
     styles.css, etait deja pleine largeur). */
  width: auto;
  max-width: none;

  max-height: calc(100svh - 24px);
  padding: 12px 14px;
  overflow-y: auto;

  border: 0;
  border-top: 1px solid rgba(123, 44, 63, 0.22);
  border-radius: 0;
  background: var(--paper, #FFFFFF);
  box-shadow: 0 -12px 32px rgba(36, 23, 34, 0.14);

  font-family: var(--sans, -apple-system, sans-serif);
}

.cookie-consent__copy {
  display: grid;
  gap: 4px;
}

.cookie-consent__title {
  margin: 0;
  color: var(--bordeaux-dark, #5E2231);
  font-family: var(--serif, Georgia, serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
}

.cookie-consent p:not(.cookie-consent__title) {
  margin: 0;
  color: var(--ink-soft, #5F4C5A);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* ------------------------------------------------------------
   LES DEUX DECISIONS — strictement equivalentes
   ------------------------------------------------------------
   « Tout refuser » et « Tout accepter » ont la MEME largeur, la meme
   hauteur, la meme forme et le meme poids typographique. Seule la couleur
   de fond differe, et c'est le maximum tolere.

   Ce n'est pas un detail d'esthetique : c'est le point precis sur lequel la
   CNIL sanctionne (150 M€ a Google pour un refus rendu plus couteux que
   l'acceptation). Ne pas retablir ici une hierarchie visuelle.
   ------------------------------------------------------------ */
.cookie-consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cookie-consent__actions .button,
.cookie-consent__detail .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 44 px : la cible minimale confortable au pouce. */
  min-height: 44px;
  padding: 10px 12px;

  border: 1px solid var(--bordeaux, #7B2C3F);
  border-radius: 999px;

  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  transition: background-color 160ms var(--ease, ease), color 160ms var(--ease, ease);
}

.cookie-consent__actions .button.primary {
  color: var(--paper, #FFFFFF);
  background: var(--bordeaux, #7B2C3F);
}

.cookie-consent__actions .button.secondary,
.cookie-consent__detail .button {
  color: var(--bordeaux-dark, #5E2231);
  background: transparent;
}

.cookie-consent .button:hover,
.cookie-consent .button:focus-visible {
  color: var(--paper, #FFFFFF);
  background: var(--bordeaux-dark, #5E2231);
  outline: none;
}

/* ------------------------------------------------------------
   « Personnaliser » — troisieme voie, volontairement discrete
   ------------------------------------------------------------
   Discrete parce qu'elle est FACULTATIVE : les deux decisions completes
   sont deja accessibles en un clic au-dessus. Ce lien n'est pas un
   detour impose vers le refus, il ouvre le detail pour qui le veut.
   ------------------------------------------------------------ */
.cookie-consent__lien {
  /* `align-self` et non `justify-self` : la carte est un conteneur flex en
     colonne, ou `justify-self` n'a aucun effet — le lien restait centre, donc
     visuellement a egalite avec les deux decisions au-dessus. Il doit rester
     en retrait, cale a gauche. */
  align-self: flex-start;

  min-height: 28px;
  padding: 2px 0;

  border: 0;
  background: none;

  color: var(--ink-soft, #5F4C5A);
  font-family: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;

  cursor: pointer;
}

.cookie-consent__lien:hover,
.cookie-consent__lien:focus-visible {
  color: var(--bordeaux, #7B2C3F);
  outline: none;
}

/* ------------------------------------------------------------
   LE DETAIL PAR FINALITE
   ------------------------------------------------------------ */
.cookie-consent__detail {
  display: grid;
  gap: 10px;

  padding-top: 10px;
  border-top: 1px solid rgba(123, 44, 63, 0.16);
}

.cookie-consent__detail[hidden] {
  display: none;
}

.cookie-consent__choix {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;

  color: var(--ink-soft, #5F4C5A);
  font-size: 0.8rem;
  line-height: 1.4;

  cursor: pointer;
}

.cookie-consent__choix input {
  /* Une case a cocher native : elle est comprise de tous, accessible au
     clavier et aux lecteurs d'ecran sans une ligne de JavaScript. */
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--bordeaux, #7B2C3F);
  cursor: pointer;
}

.cookie-consent__choix strong {
  display: block;
  margin-bottom: 1px;
  color: var(--ink, #241722);
  font-weight: 700;
}

/* ------------------------------------------------------------
   LE RAPPEL PERMANENT — « Modifier mes choix »
   ------------------------------------------------------------
   Obligatoire : un consentement doit etre retirable aussi facilement
   qu'il a ete donne. Discret mais toujours atteignable.
   ------------------------------------------------------------ */
.cookie-preferences {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 110;

  min-height: 36px;
  padding: 7px 12px;

  border: 1px solid rgba(123, 44, 63, 0.22);
  border-radius: 999px;
  background: var(--paper, #FFFFFF);
  box-shadow: 0 8px 24px rgba(36, 23, 34, 0.12);

  color: var(--bordeaux-dark, #5E2231);
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;

  cursor: pointer;
}

.cookie-preferences:hover,
.cookie-preferences:focus-visible {
  border-color: var(--bordeaux, #7B2C3F);
  outline: none;
}

/* ------------------------------------------------------------
   DESKTOP — la carte devient une BARRE basse d'une ligne
   ------------------------------------------------------------
   14/08 — LOOP 01 / T1. Pleine largeur, collee au bas de l'ecran : elle ne
   peut plus recouvrir le CTA du hero (il est au centre) ni le resultat du
   quiz. Le titre et le texte sortent de leur conteneur (`display: contents`)
   pour s'aligner sur la meme ligne que les deux decisions.

   Le wording legal reste ENTIER et visible : s'il ne tient pas sur une
   ligne (entre ~900 et ~1440 px), il passe sur deux lignes courtes plutot
   que d'etre tronque. La barre fait alors ~60 px de haut, toujours sous le
   seuil ou elle genait.
   ------------------------------------------------------------ */
@media (min-width: 900px) {
  .cookie-consent {
    flex-direction: row;
    align-items: center;
    gap: 10px 20px;

    padding: 8px clamp(16px, 3vw, 34px);
  }

  .cookie-consent__copy {
    /* Le titre et le paragraphe deviennent des enfants directs de la barre :
       ils s'alignent avec les boutons sans changer le HTML (le detail, lui,
       garde son conteneur replie). */
    display: contents;
  }

  .cookie-consent__title {
    font-size: 1.05rem;
    white-space: nowrap;
  }

  .cookie-consent p:not(.cookie-consent__title) {
    /* Prend la place restante entre le titre et les boutons ; le texte
       s'enroule sur deux lignes maximum de lui-meme, jamais coupe. */
    flex: 1 1 30ch;
    min-width: 0;
    font-size: 0.8rem;
  }

  .cookie-consent__actions {
    /* Les deux boutons restent de largeur egale, a taille de leur texte. */
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(120px, auto));
  }

  .cookie-consent__actions .button,
  .cookie-consent__detail .button {
    /* 38 px suffisent a la souris ; les 44 px restent la regle au pouce. */
    min-height: 38px;
    padding: 7px 14px;
    font-size: 0.85rem;
  }

  .cookie-consent__lien {
    align-self: center;
  }

  /* « Personnaliser » ouvert : le detail passe en pleine largeur SOUS la
     ligne (la barre grandit vers le haut, elle ne deplace rien). */
  .cookie-consent__detail {
    flex: 0 0 100%;
  }
}

/* `prefers-reduced-motion` est respecte partout ailleurs sur le site : la
   banniere ne fait pas exception. */
@media (prefers-reduced-motion: reduce) {
  .cookie-consent .button {
    transition: none;
  }
}

/* Le rappel « Modifier mes choix » rangé dans le pied de page : un lien comme les autres */
.cookie-preferences--pied { position: static; z-index: auto; min-height: 30px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #cdbbc9; font-family: var(--sans, sans-serif); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.05em; opacity: 0.78; transition: color 0.3s, opacity 0.3s; }
.cookie-preferences--pied:hover, .cookie-preferences--pied:focus-visible { color: #fff; opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px), (pointer: coarse) { .cookie-preferences--pied { min-height: 44px; } }