/* =====================================================================
   Bandeau de consentement — habillage
   ---------------------------------------------------------------------
   Reprend l'habillage de la pop-up plat (css/popup-plat.css) : feuille qui
   monte du bas sur mobile, carte centrée au-delà de 720px, voile flou, filet
   dégradé en tête et croix ronde discrète. Aux couleurs du restaurateur.

   ── Pourquoi ce n'est PAS un Swal.fire comme newPopPlat() ─────────────
   SweetAlert2 n'est pas disponible sur les six pages publiques :
   `restaurantWebSite.php` et `gallery.php` ne chargent que `sweetalert.min.js`,
   qui est SweetAlert **1** — une autre bibliothèque, sans `Swal.fire`. Un
   bandeau bâti dessus n'existerait donc pas sur le mini-site ni sur la galerie,
   c'est-à-dire nulle part où l'on en a le plus besoin (le mini-site est servi
   sur les domaines personnalisés).

   L'habillage est donc reproduit sur un DOM maison. Effet de bord bienvenu :
   aucun `!important` n'est nécessaire ici, alors que popup-plat.css doit en
   mettre partout pour battre la feuille que SweetAlert2 injecte depuis le JS.

   ── Correspondance des variables de thème ────────────────────────────
   Les trois familles de pages ne nomment pas leurs variables pareil :

     rôle              menu + mini-site + galerie   réservation
     ----------------  ---------------------------  --------------------
     titre             --titre                      --title-color
     police de titre   --police_titre               --title-font
     texte             --text                       --text-color
     police de texte   --police_texte               --text-font
     fond              --background                 --background-color
     bandeau           --bandeau                    --bandeau-color
     texte sur bandeau --text_dans_bandeau          --bandeau-text-color
     triplet d'ombre   --box_shadow_color           (absent)

   D'où la couche de jetons `--wc-*` ci-dessous, qui essaie les deux noms puis
   retombe sur une valeur neutre. `--box_shadow_color` (le triplet rgb de
   `--text`) n'est posé que par `js/theme.js`, donc uniquement sur les trois
   pages du menu : les autres prennent le repli.

   ⚠️ Ces variables sont posées APRÈS un appel réseau (`theme.js`,
   `restaurantWebSite.js`, `gallery.js`, `updateUI()`). La feuille s'affiche donc
   d'abord avec les replis neutres puis prend les couleurs du restaurant. La
   transition sur `background-color`/`color` est là pour que ce basculement soit
   un fondu et non un clignotement.
   ===================================================================== */

.wiic-consent {
  /* --- Couleurs du restaurateur, avec repli --- */
  --wc-titre: var(--titre, var(--title-color, #1f2937));
  --wc-text: var(--text, var(--text-color, #374151));
  --wc-fond: var(--background, var(--background-color, #ffffff));
  --wc-bandeau: var(--bandeau, var(--bandeau-color, #368212));
  --wc-sur-bandeau: var(--text_dans_bandeau, var(--bandeau-text-color, #ffffff));
  --wc-police-titre: var(--police_titre, var(--title-font, inherit));
  --wc-police-texte: var(--police_texte, var(--text-font, inherit));

  /* Triplet rgb servant aux surfaces, filets et ombres. Dérivé de la couleur
     de texte du thème (et non du noir) : c'est ce qui rend la feuille lisible
     sur un thème clair comme sur un thème sombre. */
  --wc-rgb: var(--box_shadow_color, 55, 65, 81);

  --wc-marge: 22px;
  --wc-surface: rgba(var(--wc-rgb), .045);
  --wc-surface-forte: rgba(var(--wc-rgb), .085);
  --wc-filet: rgba(var(--wc-rgb), .17);
  --wc-filet-fin: rgba(var(--wc-rgb), .09);
  --wc-ombre: 0 1px 2px rgba(var(--wc-rgb), .06),
              0 20px 44px -22px rgba(var(--wc-rgb), .42);

  display: none;
}

/* ------------------------------------------------------------------ */
/* Voile                                                               */
/* ------------------------------------------------------------------ */

.wiic-consent--visible {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: flex-end;
  justify-content: center;
  /* Voile volontairement sombre et non dérivé du thème : il doit assombrir la
     carte du restaurant, y compris sur un thème à texte clair. Même choix que
     la pop-up plat. */
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(4px) saturate(130%);
  backdrop-filter: blur(4px) saturate(130%);
  animation: wiicConsentVoile .3s ease;
}

@keyframes wiicConsentVoile {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Feuille                                                             */
/* ------------------------------------------------------------------ */

.wiic-consent__feuille {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 92vh;
  border-radius: 24px 24px 0 0;
  background: var(--wc-fond);
  color: var(--wc-text);
  font-family: var(--wc-police-texte);
  font-size: 1rem;
  line-height: 1.5;
  text-align: start;
  box-shadow: var(--wc-ombre);
  overflow: hidden;
  transition: background-color .25s ease, color .25s ease;
  animation: wiicConsentFeuilleIn .34s cubic-bezier(.2, .75, .3, 1);
}

/* dvh : sur iOS la barre d'URL fait varier vh, la feuille dépassait. */
@supports (max-height: 92dvh) {
  .wiic-consent__feuille { max-height: 92dvh; }
}

/* Filet dégradé en tête de feuille. Il doit ressortir sur DEUX fonds à la fois :
   le voile sombre au-dessus et la feuille claire en dessous. D'où les deux
   extrémités opposées --bandeau (couleur de marque, souvent claire) et --titre
   (une couleur de texte, donc contrastée avec la feuille par construction) :
   quelle que soit la palette, une moitié du filet tranche. */
.wiic-consent__feuille::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--wc-bandeau), var(--wc-titre));
  z-index: 3;
}

@keyframes wiicConsentFeuilleIn {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* ------------------------------------------------------------------ */
/* En-tête                                                             */
/* ------------------------------------------------------------------ */

.wiic-consent__entete {
  flex: 0 0 auto;
  padding: var(--wc-marge) var(--wc-marge) 12px;
  border-bottom: 1px solid var(--wc-filet-fin);
}

.wiic-consent__titre {
  margin: 0;
  padding: 0;
  /* Dégage la croix. `inset-inline` et non `right` : en hébreu et en arabe la
     feuille passe en `dir="rtl"`, la croix bascule à gauche et c'est de ce
     côté-là que le titre doit alors s'arrêter. */
  padding-inline-end: 44px;
  color: var(--wc-titre);
  font-family: var(--wc-police-titre);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Croix de fermeture                                                  */
/* ------------------------------------------------------------------ */

/* Reprise de la croix de la pop-up plat (`css/popup-plat.css`), aux jetons de
   thème près. Elle ferme EN ENREGISTRANT « tout sauf la publicité » — le
   raisonnement complet est dans `construire()`, js/consent.js.

   Volontairement discrète : elle ne doit pas concurrencer « Tout refuser », qui
   reste la sortie franche. Mais pas invisible non plus — une croix qu'on ne
   trouve pas ne vaut pas mieux que pas de croix, et le visiteur qui la cherche
   est justement celui qui n'a pas envie de lire.

   Positionnée par rapport à la FEUILLE (déjà `position: relative`) et non à
   l'en-tête : elle doit rester au même endroit quand l'en-tête change de hauteur
   en passant sur le titre du panneau de préférences. */
.wiic-consent__croix {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  inset-inline-start: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wc-surface-forte);
  color: var(--wc-text);
  font-family: var(--wc-police-texte);
  /* Le glyphe « × » est nettement plus petit que sa boîte : 25px de police pour
     une cible de 38px. C'est la cible qui compte pour le critère WCAG 2.5.8
     (24px minimum), pas le dessin. */
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.wiic-consent__croix:hover {
  background: rgba(var(--wc-rgb), .16);
  color: var(--wc-titre);
}

.wiic-consent__croix:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--wc-rgb), .2);
}

/* ------------------------------------------------------------------ */
/* Corps (seule zone qui défile)                                       */
/* ------------------------------------------------------------------ */

.wiic-consent__corps {
  flex: 1 1 auto;
  padding: 16px var(--wc-marge);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wiic-consent__texte {
  margin: 0 0 10px;
  padding: 0;
  color: var(--wc-text);
  font-family: var(--wc-police-texte);
  font-size: .95rem;
}

.wiic-consent__lien {
  display: inline-block;
  color: var(--wc-titre);
  font-size: .95rem;
  text-decoration: underline;
}

.wiic-consent__lien:hover,
.wiic-consent__lien:focus {
  color: var(--wc-titre);
  opacity: .75;
}

/* ------------------------------------------------------------------ */
/* Préférences — dépliées dans la MÊME feuille                          */
/* ------------------------------------------------------------------ */

.wiic-consent__prefs {
  display: none;
  margin-top: 18px;
  border-top: 1px solid var(--wc-filet);
}

.wiic-consent--prefs .wiic-consent__prefs {
  display: block;
}

.wiic-consent__categorie {
  padding: 14px 0;
  border-bottom: 1px solid var(--wc-filet-fin);
}

.wiic-consent__categorie:last-child {
  border-bottom: 0;
}

.wiic-consent__categorie-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.wiic-consent__categorie-titre {
  color: var(--wc-titre);
  font-family: var(--wc-police-titre);
  font-size: 1rem;
  font-weight: 700;
}

.wiic-consent__categorie-texte {
  margin: 0;
  padding: 0;
  color: var(--wc-text);
  font-family: var(--wc-police-texte);
  font-size: .875rem;
  opacity: .82;
}

.wiic-consent__toujours {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--wc-surface-forte);
  color: var(--wc-titre);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Pied : actions                                                      */
/* ------------------------------------------------------------------ */

.wiic-consent__pied {
  flex: 0 0 auto;
  padding: 14px var(--wc-marge) calc(var(--wc-marge) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--wc-filet-fin);
  background: var(--wc-surface);
}

.wiic-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* « Tout refuser » et « Tout accepter » partagent cette classe unique : même
   taille, même remplissage, même graisse, refuser rendu en premier. Refuser
   doit être aussi simple qu'accepter — c'est le premier motif de sanction de la
   CNIL. Ne pas réserver la couleur de marque au seul bouton d'acceptation. */
.wiic-consent__btn {
  flex: 1 1 150px;
  min-height: 46px;
  padding: 12px 18px;
  border: 2px solid var(--wc-bandeau);
  border-radius: 10px;
  background: var(--wc-bandeau);
  color: var(--wc-sur-bandeau);
  font-family: var(--wc-police-texte);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: opacity .16s ease;
}

.wiic-consent__btn:hover {
  opacity: .85;
}

.wiic-consent__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--wc-rgb), .35);
}

/* « Personnaliser » n'accorde aucune finalité : il ne fait que déplier le
   détail. Il est donc volontairement plus discret que les deux précédents. */
.wiic-consent__perso {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--wc-text);
  font-family: var(--wc-police-texte);
  font-size: .875rem;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  opacity: .8;
}

.wiic-consent__perso:hover {
  opacity: 1;
}

.wiic-consent--prefs .wiic-consent__perso {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Bascule                                                             */
/* ------------------------------------------------------------------ */

/* La case native est conservée (et non remplacée par un <div> cliquable) :
   elle reste focalisable au clavier et annoncée par les lecteurs d'écran. Elle
   est rendue transparente au-dessus de sa piste plutôt que masquée. */
.wiic-consent__bascule {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 28px;
  margin: 0;
}

.wiic-consent__bascule input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.wiic-consent__bascule-piste {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(var(--wc-rgb), .22);
  transition: background-color .15s ease;
  pointer-events: none;
}

.wiic-consent__bascule-piste::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wc-fond);
  box-shadow: 0 1px 3px rgba(var(--wc-rgb), .45);
  transition: transform .15s ease;
}

.wiic-consent__bascule input:checked + .wiic-consent__bascule-piste {
  background: var(--wc-bandeau);
}

.wiic-consent__bascule input:checked + .wiic-consent__bascule-piste::after {
  transform: translateX(22px);
}

.wiic-consent__bascule input:focus-visible + .wiic-consent__bascule-piste {
  box-shadow: 0 0 0 3px rgba(var(--wc-rgb), .35);
}

/* Sens de lecture : seul le déplacement du curseur doit être inversé, le reste
   est porté par `dir` et les propriétés logiques. */
.wiic-consent[dir="rtl"] .wiic-consent__bascule-piste::after {
  left: auto;
  right: 3px;
}

.wiic-consent[dir="rtl"] .wiic-consent__bascule input:checked + .wiic-consent__bascule-piste::after {
  transform: translateX(-22px);
}

/* ------------------------------------------------------------------ */
/* Écrans larges : carte centrée                                       */
/* ------------------------------------------------------------------ */

@media (min-width: 720px) {
  .wiic-consent--visible {
    align-items: center;
    padding: 20px;
  }

  .wiic-consent {
    --wc-marge: 32px;
  }

  .wiic-consent__feuille {
    width: min(560px, 100%);
    max-height: 88vh;
    border-radius: 20px;
    animation: wiicConsentCarteIn .3s cubic-bezier(.2, .75, .3, 1);
  }

  @supports (max-height: 88dvh) {
    .wiic-consent__feuille { max-height: 88dvh; }
  }

  .wiic-consent__btn {
    flex: 1 1 0;
  }
}

@keyframes wiicConsentCarteIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* Animations réduites                                                 */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .wiic-consent--visible,
  .wiic-consent__feuille {
    animation-duration: .01s;
  }

  .wiic-consent__feuille,
  .wiic-consent__btn,
  .wiic-consent__croix,
  .wiic-consent__bascule-piste,
  .wiic-consent__bascule-piste::after {
    transition: none;
  }
}