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

/* Pas de croix de fermeture ici, contrairement à la pop-up plat dont cet
   habillage est repris : la feuille n'offre que trois sorties explicitement
   libellées (refuser, accepter, personnaliser). Voir le commentaire de
   `construire()` dans js/consent.js pour le raisonnement.

   Conséquence de mise en page : l'en-tête n'a plus à réserver 44px à droite
   pour dégager la croix, le titre occupe donc toute la largeur. */
.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;
  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;
}

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