/* ============================================================
   DOMAINE BÉTHANIA — BANDEAU & PANNEAU DE CONSENTEMENT
   ------------------------------------------------------------
   Chargé en chemin ABSOLU sur toutes les pages, comme prefs.css,
   pour fonctionner aussi depuis /activites/.

   Ordre des feuilles : tokens → base → components → pages →
   prefs → consent. Cette feuille est donc la dernière : elle
   n'a besoin de forcer aucune spécificité.

   Empilement : le bandeau est à 10000, au-dessus du pop-up promo
   (9999), du panneau de préférences (9996) et de la bulle Sika
   (9500). Tant qu'aucun choix n'est fait, il reste la seule
   chose sur laquelle on peut cliquer en bas d'écran.
   ============================================================ */

.consent-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10000;
  padding: var(--space-s) var(--gutter) calc(var(--space-s) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line-dark);
  box-shadow: 0 -18px 50px -30px rgba(11, 36, 48, .5);
  color: var(--on-light);
  transform: translateY(110%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.consent-bar.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .consent-bar { transition: none; } }

.consent-bar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
}
.consent-copy { flex: 1 1 22rem; min-width: 0; }
.consent-copy h2 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin: 0 0 .25em;
  line-height: 1.2;
}
.consent-copy p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--on-light-soft);
  max-width: 62ch;
}
.consent-copy a { color: var(--heartwood-deep); }

.consent-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.consent-actions .btn { white-space: nowrap; }

/* Les trois boutons du bandeau ont le MÊME poids visuel : « refuser » aussi
   accessible qu'« accepter », c'est ce qu'exige un consentement libre. */
.consent-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .6em 1.35em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--on-light);
  font: inherit; font-size: var(--step--1); font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.consent-btn:hover { background: var(--bg-alt); }
.consent-btn.is-primary {
  background: var(--heartwood); border-color: var(--heartwood); color: var(--linen);
}
.consent-btn.is-primary:hover { background: var(--sienne-deep); border-color: var(--sienne-deep); }
.consent-btn.is-quiet { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.consent-btn.is-quiet:hover { background: transparent; color: var(--heartwood-deep); }

/* ---- panneau détaillé ------------------------------------------------- */

.consent-overlay {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-s);
  background: rgba(11, 36, 48, .55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.consent-overlay.is-open { opacity: 1; visibility: visible; }

.consent-panel {
  width: min(38rem, 100%);
  max-height: min(88vh, 46rem);
  overflow-y: auto;
  background: var(--surface);
  color: var(--on-light);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lift);
  padding: var(--space-m);
  transform: translateY(12px) scale(.985);
  transition: transform var(--dur-fast) var(--ease-out);
}
.consent-overlay.is-open .consent-panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .consent-overlay, .consent-panel { transition: none; }
}

.consent-panel-head { display: flex; align-items: flex-start; gap: var(--space-s); margin-bottom: var(--space-s); }
.consent-panel-head h2 { font-family: var(--font-display); font-size: var(--step-2); margin: 0; line-height: 1.15; }
.consent-panel-head p { margin: .4em 0 0; font-size: var(--step--1); color: var(--on-light-soft); line-height: 1.55; }
.consent-close {
  margin-left: auto; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-dark); background: transparent; color: var(--on-light);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.consent-close:hover { background: var(--bg-alt); }

.consent-group {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-m);
  padding: var(--space-s);
  margin-bottom: .75rem;
}
.consent-group-head { display: flex; align-items: flex-start; gap: var(--space-s); }
.consent-group h3 { font-size: var(--step-0); margin: 0; font-weight: 700; }
.consent-group p { margin: .45em 0 0; font-size: var(--step--1); color: var(--on-light-soft); line-height: 1.55; }
.consent-group .always {
  font-size: var(--step--1); font-weight: 600; color: var(--foliage); white-space: nowrap; margin-left: auto;
}
.consent-detail { margin-top: .7em; font-size: var(--step--1); color: var(--on-light-soft); }
.consent-detail summary { cursor: pointer; font-weight: 600; color: var(--on-light); }
.consent-detail table { width: 100%; border-collapse: collapse; margin-top: .6em; font-size: .92em; }
.consent-detail th, .consent-detail td { text-align: left; padding: .4em .5em; border-bottom: 1px solid var(--line-dark); vertical-align: top; }
.consent-detail th { font-weight: 600; color: var(--on-light); }
.consent-detail tr:last-child td { border-bottom: 0; }

/* Interrupteur : c'est une vraie case à cocher, seule son apparence change —
   le clavier, les lecteurs d'écran et les formulaires y retrouvent leurs
   petits sans qu'on ait à réécrire quoi que ce soit. */
.consent-switch { margin-left: auto; flex: none; display: inline-flex; align-items: center; }
.consent-switch input {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
}
.consent-switch span {
  display: block; width: 52px; height: 30px; border-radius: 999px;
  background: var(--line-dark); position: relative; cursor: pointer;
  transition: background .18s var(--ease-out);
}
.consent-switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(11, 36, 48, .3);
  transition: transform .18s var(--ease-out);
}
.consent-switch input:checked + span { background: var(--foliage); }
.consent-switch input:checked + span::after { transform: translateX(22px); }
.consent-switch input:focus-visible + span { outline: 2px solid var(--atlantide); outline-offset: 3px; }
.consent-switch input:disabled + span { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .consent-switch span, .consent-switch span::after { transition: none; }
}

.consent-panel-foot {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  margin-top: var(--space-s); padding-top: var(--space-s);
  border-top: 1px solid var(--line-dark);
}
.consent-panel-foot .sep { flex: 1; }
.consent-panel-foot small { display: block; width: 100%; color: var(--on-light-soft); font-size: var(--step--1); }

/* ---- écran d'attente à la place d'un contenu tiers --------------------- */

/* Un lecteur YouTube/TikTok/Matterport dépose ses propres traceurs dès qu'il
   se charge. Tant que les contenus externes ne sont pas acceptés, on montre
   ce carton plutôt que l'iframe : le visiteur choisit, contenu par contenu. */
.consent-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-xs); text-align: center;
  width: 100%; height: 100%; min-height: 14rem;
  padding: var(--space-m);
  background: var(--bg-alt); color: var(--on-light);
  border-radius: var(--radius-m);
}
.consent-placeholder p { margin: 0; font-size: var(--step--1); color: var(--on-light-soft); max-width: 44ch; line-height: 1.55; }
.consent-placeholder strong { font-size: var(--step-0); }
.consent-placeholder .consent-btn { margin-top: .2em; }

/* ---- lien discret de reprise en pied de page --------------------------- */

.consent-reopen { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.consent-reopen:hover { text-decoration: underline; }

/* ---- petits écrans ------------------------------------------------------ */

@media (max-width: 720px) {
  .consent-bar-inner { flex-direction: column; align-items: stretch; gap: var(--space-s); }
  .consent-actions { flex-direction: column-reverse; align-items: stretch; }
  .consent-actions .consent-btn { width: 100%; }
  .consent-panel { padding: var(--space-s); border-radius: var(--radius-m); }
  .consent-panel-foot { flex-direction: column-reverse; align-items: stretch; }
  .consent-panel-foot .consent-btn { width: 100%; }
  .consent-panel-foot .sep { display: none; }
}

/* ---- mode sombre --------------------------------------------------------
   Les rôles sémantiques (--surface, --on-light, --line-dark) sont déjà
   basculés par prefs.css : il ne reste que les valeurs écrites en dur. */
:root[data-theme="dark"] .consent-bar { box-shadow: 0 -18px 50px -30px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .consent-overlay { background: rgba(0, 0, 0, .66); }
:root[data-theme="dark"] .consent-switch span::after { background: var(--bg); }
/* Le vert forêt de la charte n'est pas surchargé la nuit : sur la surface
   nocturne il tomberait sous le seuil, aussi bien comme texte que comme
   marque colorée. On prend la déclinaison éclaircie, prévue pour ça. */
:root[data-theme="dark"] .consent-group .always { color: var(--foliage-lit); }
:root[data-theme="dark"] .consent-switch input:checked + span { background: var(--foliage-lit); }