/* ============================================================
   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.
   ============================================================ */

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

  display: flex;
  flex-direction: column;
  gap: 12px;

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

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

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

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

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

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

/* ------------------------------------------------------------
   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: 32px;
  padding: 4px 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: 12px;
  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 se pose en bas a droite
   ------------------------------------------------------------ */
@media (min-width: 700px) {
  .cookie-consent {
    left: auto;
    right: clamp(16px, 3vw, 34px);
    bottom: clamp(16px, 3vw, 34px);

    width: min(680px, calc(100vw - 32px));
    padding: 20px 22px;
    gap: 14px;
  }

  .cookie-consent__title {
    font-size: 1.35rem;
  }

  .cookie-consent p:not(.cookie-consent__title) {
    font-size: 0.95rem;
  }

  .cookie-consent__actions {
    /* Les deux boutons restent de largeur egale et n'occupent plus toute
       la carte : ils se rangent a droite, cote a cote. */
    justify-content: end;
    grid-template-columns: repeat(2, minmax(150px, auto));
  }
}

/* `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;
  }
}