/* ============================================================
   Localo — consent-screen.css  v3
   Fix principal : calcul max-height tenant compte de la bottom nav
   + Palette premium alignée avec landing & premium.css
   ============================================================ */

:root {
  /* Safe areas iOS */
  --consent-safe-top:    env(safe-area-inset-top,    0px);
  --consent-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ⚠️ FIX CLÉ : hauteur de la bottom nav à exclure du calcul */
  /* Doit correspondre à --footer-height de styles.min.css     */
  --consent-nav-height:  80px;

  /* Palette premium (vert forêt + ivoire + ambre) */
  --consent-bg:          oklch(0.14 0.03 155 / 0.68);
  --consent-card:        oklch(0.995 0.006 85);
  --consent-card-alt:    oklch(0.97 0.014 82);
  --consent-text:        oklch(0.22 0.025 265);
  --consent-muted:       oklch(0.48 0.022 265);
  --consent-subtle:      oklch(0.65 0.016 260);
  --consent-border:      oklch(0.88 0.02 80);
  --consent-border-soft: oklch(0.92 0.012 82);
  --consent-brand:       oklch(0.36 0.09 152);
  --consent-brand-mid:   oklch(0.44 0.1  158);
  --consent-brand-pale:  oklch(0.96 0.025 152);
  --consent-cta:         oklch(0.69 0.17  60);
  --consent-cta-2:       oklch(0.62 0.19  44);
  --consent-cta-hover:   oklch(0.72 0.17  62);
}

/* ── Overlay ────────────────────────────────────────────────── */
.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--consent-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;

  /* ⚠️ FIX : padding-bottom inclut la bottom nav pour ne pas
     que la bannière se glisse dessous et soit rognée          */
  padding-top:    max(12px, calc(var(--consent-safe-top) + 10px));
  padding-right:  max(10px, env(safe-area-inset-right, 0px));
  padding-bottom: max(
    calc(var(--consent-nav-height) + 8px),
    calc(var(--consent-nav-height) + var(--consent-safe-bottom) + 8px)
  );
  padding-left:   max(10px, env(safe-area-inset-left, 0px));

  overscroll-behavior: contain;
}

.consent-overlay.hidden {
  display: none;
}

/* ── Bannière ───────────────────────────────────────────────── */
.consent-banner {
  width: min(680px, 100%);

  /* ⚠️ FIX : max-height soustrait aussi la bottom nav         */
  max-height: calc(
    100svh
    - var(--consent-safe-top)
    - var(--consent-safe-bottom)
    - var(--consent-nav-height)
    - 28px
  );
  max-height: calc(
    100dvh
    - var(--consent-safe-top)
    - var(--consent-safe-bottom)
    - var(--consent-nav-height)
    - 28px
  );

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: var(--consent-card);
  border-radius: 18px;
  border: 1px solid var(--consent-border-soft);
  box-shadow:
    0 1px 0 oklch(0.99 0 0 / 0.8) inset,
    0 24px 56px oklch(0.14 0.03 155 / 0.32);
}

/* ── Header de la bannière (optionnel) ──────────────────────── */
.consent-header {
  padding: 0.8rem 0.9rem 0.15rem;
  flex: 0 0 auto;
}

.consent-header h2 {
  margin: 0;
  color: var(--consent-text);
  font-size: 1.12rem;
  letter-spacing: 0.01em;
}

/* ── Zone scrollable ────────────────────────────────────────── */
.consent-content {
  padding: 0.55rem 0.9rem 0.5rem;
  color: var(--consent-text);
  line-height: 1.38;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  /* Scrollbar discrète */
  scrollbar-width: thin;
  scrollbar-color: oklch(0.84 0.02 80) transparent;
}

.consent-content::-webkit-scrollbar       { width: 4px; }
.consent-content::-webkit-scrollbar-track { background: transparent; }
.consent-content::-webkit-scrollbar-thumb { background: oklch(0.84 0.02 80); border-radius: 4px; }

.consent-content p {
  margin: 0.34rem 0;
}

/* ── Bloc cookies ───────────────────────────────────────────── */
.consent-cookie-box {
  margin-top: 0.6rem;
  padding: 0.62rem 0.7rem;
  border-radius: 12px;
  border: 1px solid oklch(0.62 0.06 152 / 0.2);
  background: linear-gradient(180deg, var(--consent-brand-pale) 0%, oklch(0.975 0.018 152) 100%);
  box-shadow: inset 0 1px 0 oklch(0.99 0 0 / 0.6);
}

.consent-cookie-text {
  margin: 0.1rem 0 0.45rem;
  color: var(--consent-muted);
  font-size: 0.88rem;
  line-height: 1.3;
}

.consent-cookie-effects {
  margin: 0 0 0.46rem;
  padding: 0.46rem 0.54rem;
  border-radius: 8px;
  background: oklch(0.97 0.014 82);
  border: 1px solid var(--consent-border-soft);
}

.consent-cookie-effects p {
  margin: 0.1rem 0;
  color: var(--consent-muted);
  font-size: 0.82rem;
  line-height: 1.28;
}

/* Boutons choix cookies — 3 colonnes */
.consent-cookie-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
}

.cookie-choice {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.14s ease, filter 0.14s ease;
}

.cookie-choice:hover    { transform: translateY(-1px); filter: brightness(1.04); }
.cookie-choice:active   { transform: translateY(0); }

.cookie-choice-primary {
  background: linear-gradient(135deg, var(--consent-cta), var(--consent-cta-2));
  color: oklch(0.99 0 0);
  border: 1px solid oklch(0.62 0.18 48 / 0.45);
  box-shadow: inset 0 1px 0 oklch(0.99 0 0 / 0.2), 0 2px 8px oklch(0.48 0.16 55 / 0.2);
}

.cookie-choice-secondary {
  background: var(--consent-card-alt);
  color: var(--consent-muted);
  border: 1px solid var(--consent-border);
}

.cookie-choice-neutral {
  background: oklch(0.99 0.003 85);
  color: oklch(0.38 0.05 258);
  border: 1px solid var(--consent-border);
}

.cookie-choice-selected {
  box-shadow: 0 0 0 2px var(--consent-brand) inset;
  transform: translateY(-1px);
}

/* ── Personnalisation avancée ───────────────────────────────── */
.cookie-customize {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--consent-border-soft);
}

.cookie-customize.hidden { display: none; }

.cookie-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin: 0.28rem 0;
  font-size: 0.86rem;
  color: var(--consent-text);
}

.cookie-toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--consent-brand);
  flex-shrink: 0;
}

#cookieSavePrefs {
  margin-top: 0.45rem;
  width: 100%;
}

/* ── Liens légaux ───────────────────────────────────────────── */
.legal-links {
  margin-top: 0.52rem;
  font-size: 0.82rem;
  color: var(--consent-subtle);
}

.legal-links a {
  color: var(--consent-brand);
  text-decoration: none;
}

.legal-links a:hover { text-decoration: underline; }

/* ── Zone post-cookies (règles du tchat) ────────────────────── */
.consent-post-cookie.hidden { display: none; }

.consent-post-cookie-hint {
  margin-top: 0.55rem;
  color: oklch(0.28 0.06 155);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.4rem 0.52rem;
  border-left: 3px solid var(--consent-brand);
  background: var(--consent-brand-pale);
  border-radius: 0 8px 8px 0;
  line-height: 1.32;
}

/* ── Bloc règles du tchat ───────────────────────────────────── */
.consent-rules-box {
  margin-top: 0.55rem;
  padding: 0.62rem 0.7rem;
  border-radius: 12px;
  border: 1px solid oklch(0.62 0.06 152 / 0.2);
  background: linear-gradient(180deg, var(--consent-brand-pale) 0%, oklch(0.97 0.02 155) 100%);
}

.consent-rules-title {
  margin: 0 0 0.28rem;
  color: var(--consent-text);
  font-size: 0.95rem;
}

.consent-rules-list {
  margin: 0;
  padding-left: 0.96rem;
  color: var(--consent-muted);
  font-size: 0.88rem;
  line-height: 1.38;
}

.consent-rules-list li { margin: 0.2rem 0; }

/* ⚠️ FIX : la case à cocher est la dernière chose visible avant
   le bouton — elle doit toujours être accessible au scroll     */
.consent-rules-check {
  display: flex;
  align-items: flex-start;
  gap: 0.52rem;
  margin-top: 0.5rem;
  padding: 0.52rem 0.6rem;
  border-radius: 10px;
  border: 1px solid oklch(0.62 0.06 152 / 0.25);
  background: oklch(0.99 0.004 85);
  color: var(--consent-text);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.28;
}

.consent-rules-check input {
  margin-top: 0.15rem;
  width: 18px;
  height: 18px;
  accent-color: var(--consent-brand);
  flex-shrink: 0;
}

/* ── Boutons d'action principaux (Activer / Lecture seule) ──── */
/* NB : display:none est écrasé ici — ces boutons sont pilotés
   par le JS ; on les expose correctement dans la zone sticky  */
.consent-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.62rem;

  /* ⚠️ FIX : collés en bas de la bannière, toujours visibles  */
  flex: 0 0 auto;
  padding: 0.62rem 0.9rem 0.72rem;
  border-top: 1px solid var(--consent-border-soft);
  background: var(--consent-card);
}

/* Bouton principal "Activer les interactions" */
#acceptConsent.cookie-button {
  background: linear-gradient(135deg, var(--consent-cta), var(--consent-cta-2));
  color: oklch(0.99 0 0);
  border: 1px solid oklch(0.62 0.18 48 / 0.45);
  box-shadow: inset 0 1px 0 oklch(0.99 0 0 / 0.18), 0 3px 10px oklch(0.48 0.16 55 / 0.22);
  font-family: inherit;
}

#acceptConsent.cookie-button:hover:not([disabled]) {
  filter: brightness(1.06);
}

#acceptConsent.cookie-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cookie-button {
  min-height: 46px;
  border: 1px solid var(--consent-border);
  border-radius: 11px;
  background: var(--consent-card-alt);
  color: var(--consent-muted);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  transition: filter 0.14s ease;
}

.cookie-button:hover:not([disabled]) { filter: brightness(0.97); }

/* ── Résumé générique ───────────────────────────────────────── */
.consent-summary {
  margin-top: 0.62rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: var(--consent-card-alt);
  color: var(--consent-muted);
  font-size: 0.88rem;
}

/* ── Lien cookie interne ────────────────────────────────────── */
.consent-cookie-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--consent-brand);
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.84rem;
  font-family: inherit;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Mobile < 560px */
@media (max-width: 560px) {
  .consent-overlay {
    align-items: flex-start;
    /* Légèrement moins de padding en haut sur petits écrans */
    padding-top: max(8px, calc(var(--consent-safe-top) + 6px));
  }

  .consent-banner {
    width: 100%;
    border-radius: 14px;
    /* ⚠️ FIX mobile : recalcul strict avec bottom nav         */
    max-height: calc(
      100svh
      - var(--consent-safe-top)
      - var(--consent-safe-bottom)
      - var(--consent-nav-height)
      - 16px
    );
    max-height: calc(
      100dvh
      - var(--consent-safe-top)
      - var(--consent-safe-bottom)
      - var(--consent-nav-height)
      - 16px
    );
  }

  .consent-content {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem 0.45rem;
  }

  /* Cookies : 1 bouton par ligne sur très petit écran */
  .consent-cookie-actions {
    grid-template-columns: 1fr;
  }

  .consent-buttons {
    grid-template-columns: 1fr;
    padding: 0.55rem 0.75rem 0.65rem;
  }

  .consent-rules-check {
    font-size: 0.88rem;
  }

  .cookie-choice {
    font-size: 0.84rem;
    min-height: 44px;
  }

  .cookie-button {
    min-height: 48px;
  }
}

/* Très petits écrans (iPhone SE, Galaxy A) */
@media (max-width: 380px) {
  .consent-content {
    font-size: 0.86rem;
    padding: 0.45rem 0.65rem 0.4rem;
  }

  .consent-rules-list {
    font-size: 0.84rem;
  }

  .consent-rules-check {
    font-size: 0.84rem;
    padding: 0.46rem 0.52rem;
  }
}

/* Tablette / desktop — centrage vertical normal */
@media (min-width: 561px) {
  .consent-overlay {
    align-items: center;
  }

  .consent-banner {
    /* Sur desktop la bottom nav n'est pas présente : on réduit la soustraction */
    --consent-nav-height: 0px;
  }
}

/* ── UX : friction minimale ─────────────────────────────────── */

/* La case cochée active immédiatement (via JS onchange).
   Le bouton "Activer" est donc redondant — on le masque.       */
#acceptConsent.cookie-button {
  display: none !important;
}

/* Aide contextuelle sous la case à cocher */
.consent-rules-check::after {
  content: 'La case cochée active immédiatement le tchat.';
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--consent-subtle, oklch(0.65 0.016 260));
  margin-top: 0.3rem;
  width: 100%;
}

/* "Rester en lecture seule" : lien discret, pas un bouton plein */
#refuseConsent.cookie-button {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--consent-subtle, oklch(0.65 0.016 260));
  font-size: 0.82rem;
  font-weight: 500;
  min-height: 36px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#refuseConsent.cookie-button:hover {
  color: var(--consent-muted, oklch(0.48 0.022 265));
  filter: none;
}

/* Zone boutons : colonne unique centrée, plus de grille 1fr 1fr */
.consent-buttons {
  grid-template-columns: 1fr;
  justify-items: center;
  border-top: none;
  padding-top: 0.3rem;
}

/* ── Hint i18n (remplace le ::after en dur) ─────────────────── */
.consent-rules-check::after { content: none !important; }

.consent-rules-hint {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--consent-subtle, oklch(0.65 0.016 260));
  margin-top: 0.2rem;
}

/* ── Règles : label + description sur deux lignes ───────────── */
.consent-rules-list li {
  list-style: none;
  padding: 0.52rem 0.6rem;
  border-radius: 9px;
  background: oklch(0.99 0.004 85);
  border: 1px solid oklch(0.62 0.06 152 / 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.consent-rules-list li strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--consent-brand, oklch(0.36 0.09 152));
  display: block;
}

.consent-rules-list li span {
  font-size: 0.83rem;
  color: var(--consent-muted, oklch(0.48 0.022 265));
  line-height: 1.35;
  display: block;
}