/**
 * Consentement aux cookies (eu_cookie_compliance).
 *
 * La présentation reprend celle de terdegypt.com : un panneau posé dans
 * l'angle inférieur gauche plutôt qu'un bandeau en travers de l'écran. Le
 * panneau laisse voir la page derrière lui, ce qui vaut mieux qu'une barre
 * qui la coupe en deux — et il tient la comparaison entre les deux sites, qui
 * partagent le même module et les mêmes textes.
 *
 * La typographie et les couleurs restent celles d'ici : le fond est
 * `--tc-night` et non un noir pur, les corps viennent de l'échelle du thème.
 * C'est la disposition qui est commune, pas l'identité.
 *
 * Les sélecteurs passent par `#sliding-popup`, le conteneur du module. Les
 * règles d'origine ont la même spécificité que les classes seules, et l'ordre
 * de chargement des feuilles ne se gouverne pas depuis le thème.
 */

/* Le biscuit repris de terdegypt.com, pour que les deux sites se répondent.
   Le fichier est copié plutôt que référencé chez le voisin : ce thème est
   autonome, il n'emprunte rien au précédent.

   Peint en masque et non en image de fond comme là-bas : le dessin est noir
   sur transparent, il prend ainsi `currentColor` et suit le survol. */
#sliding-popup {
  --tc-cookie-glyph: url("../../images/cookies-icon.png");
}

#sliding-popup.sliding-popup-bottom {
  /* Le conteneur du module n'a qu'un `left: 0`. Sans largeur ni `right`, un
     élément en position fixe se réduit à son contenu et le panneau prenait
     une largeur au hasard du texte. */
  left: 0;
  right: auto;
  bottom: 0;
  width: min(500px, 100%);

  /* Hauteur de la barre d'actions, réservée en bas du panneau : elle y est
     posée en absolu, donc hors du flux. */
  --tc-cookie-actions: 42px;
}

/* --- Le panneau ------------------------------------------------------------ */

#sliding-popup .eu-cookie-compliance-banner,
#sliding-popup .eu-cookie-withdraw-banner {
  /* Volontairement non positionné : la barre d'actions doit se caler sur le
     conteneur fixe, pas sur le panneau, pour rester collée au bas de l'écran
     même quand le contenu défile. */
  max-height: min(80svh, 680px);
  overflow-y: auto;
  padding: var(--tc-space-5) var(--tc-space-5) calc(var(--tc-cookie-actions) + var(--tc-space-3));
  background: var(--tc-night);
  color: var(--tc-surface);
  font-family: var(--tc-sans);
  font-size: var(--tc-fs-sm);
}

#sliding-popup .eu-cookie-compliance-content {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: start;
}

/* Le module fait flotter le message à gauche et les catégories à droite : sur
   un panneau de 500 px, cela donne deux colonnes de 180 px illisibles. On les
   remet l'un sous l'autre. */
#sliding-popup .eu-cookie-compliance-message,
#sliding-popup .eu-cookie-compliance-categories {
  float: none;
  width: auto;
  max-width: none;
}

/* --- Le message ------------------------------------------------------------ */

#sliding-popup .eu-cookie-compliance-message {
  padding-bottom: var(--tc-space-5);
}

#sliding-popup .eu-cookie-compliance-message h2 {
  margin: 0 0 var(--tc-space-2);
  font-family: var(--tc-sans);
  font-size: var(--tc-fs-lg);
  font-weight: 700;
  line-height: 1.3;
}

#sliding-popup .eu-cookie-compliance-message p {
  margin: 0;
  font-size: var(--tc-fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}

/* « En savoir plus » et « Enregistrer les préférences » sont des boutons dans
   le balisage, mais des liens dans l'intention : rien ne justifie de leur
   donner le poids d'une action principale. */
#sliding-popup .find-more-button,
#sliding-popup .eu-cookie-compliance-categories-buttons button {
  display: inline-block;
  margin-top: var(--tc-space-3);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--tc-fs-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#sliding-popup .find-more-button:hover,
#sliding-popup .eu-cookie-compliance-categories-buttons button:hover {
  color: var(--tc-title-on-image);
}

/* --- Les catégories -------------------------------------------------------- */

#sliding-popup .eu-cookie-compliance-categories {
  display: grid;
  gap: var(--tc-space-4);
}

#sliding-popup .eu-cookie-compliance-category > div:first-child {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
}

#sliding-popup .eu-cookie-compliance-category-checkbox {
  width: 15px;
  height: 15px;
  margin: 0;
  flex: none;
  /* La case reprend la couleur de titre sur image : l'accent du thème est un
     vert très sombre, invisible sur ce fond. */
  accent-color: var(--tc-title-on-image);
}

#sliding-popup .eu-cookie-compliance-category label {
  font-size: var(--tc-fs-sm);
  font-weight: 600;
}

#sliding-popup .eu-cookie-compliance-category-description {
  margin-top: var(--tc-space-1);
  font-size: var(--tc-fs-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}

/* --- La barre d'actions ----------------------------------------------------
   Posée en absolu au pied du conteneur : les deux boutons se partagent la
   largeur du panneau, sans gouttière, comme sur terdegypt. */

#sliding-popup .eu-cookie-compliance-buttons {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  gap: 0;
  /* Le module pose `float: right; max-width: 40%` : la barre ne faisait que
     200 px sur 500, et ses deux libellés se cassaient sur trois lignes. */
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
}

#sliding-popup .eu-cookie-compliance-buttons button {
  flex: 1 1 auto;
  min-height: var(--tc-cookie-actions);
  padding: var(--tc-space-2) var(--tc-space-4);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tc-surface);
  font-family: var(--tc-sans);
  font-size: var(--tc-fs-sm);
  cursor: pointer;
  transition: background-color 160ms ease;
}

#sliding-popup .eu-cookie-compliance-buttons button:hover,
#sliding-popup .eu-cookie-compliance-buttons button:focus-visible {
  background: rgba(255, 255, 255, .12);
}

/* L'acceptation et le retrait sont les gestes conclusifs : seuls eux portent
   un aplat. Le refus reste lisible sans être un bouton plein — on ne le
   déguise pas, on ne le met pas en avant non plus. */
#sliding-popup .eu-cookie-compliance-buttons .agree-button,
#sliding-popup .eu-cookie-compliance-buttons .eu-cookie-withdraw-button:not(.visually-hidden) {
  flex: 2 1 auto;
  background: #FFF;
  color: var(--tc-night);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#sliding-popup .eu-cookie-compliance-buttons .agree-button:hover,
#sliding-popup .eu-cookie-compliance-buttons .agree-button:focus-visible,
#sliding-popup .eu-cookie-compliance-buttons .eu-cookie-withdraw-button:not(.visually-hidden):hover {
  background: var(--tc-title-on-image);
}

/* --- L'onglet de retrait ---------------------------------------------------
   Une pastille ronde, posée dans l'angle. Le libellé « Confidentialité »
   reste dans le balisage — c'est le nom accessible du bouton — mais cesse
   d'être vu : `font-size: 0` le retire de l'affichage sans le retirer de
   l'arbre d'accessibilité, ce qu'un `display: none` aurait fait.

   L'icône est peinte en masque plutôt qu'en image de fond : elle prend ainsi
   `currentColor` et suit le survol sans qu'il faille deux fichiers. */

#sliding-popup .eu-cookie-withdraw-tab {
  left: var(--tc-gutter);
  right: auto;
  width: 48px;
  height: 48px;
  padding: 0;
  /* Décollée du bas : une pastille ronde collée au bord se lirait comme une
     forme coupée, là où l'onglet rectangulaire y trouvait son assise. */
  transform: translateY(calc(-100% - var(--tc-space-4)));
  border: 1px solid var(--tc-border);
  border-radius: 50%;
  background: var(--tc-surface);
  color: var(--tc-ink-soft);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* L'icône couvre tout le bouton et se centre par son masque, plutôt que
   d'être un élément à placer. Le libellé, invisible mais toujours dans le
   balisage, reste un noeud de texte : en disposition normale comme en
   grille, il compte comme contenu et poussait l'icône hors du centre. Hors
   du flux, elle ne dépend plus de lui. */
#sliding-popup .eu-cookie-withdraw-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--tc-cookie-glyph) center / 68% no-repeat;
  mask: var(--tc-cookie-glyph) center / 68% no-repeat;
}

#sliding-popup .eu-cookie-withdraw-tab:hover,
#sliding-popup .eu-cookie-withdraw-tab:focus-visible {
  background: var(--tc-night);
  color: var(--tc-surface);
  transform: translateY(calc(-100% - var(--tc-space-4))) scale(1.06);
}