/* ============================================================
   Altus Conseil — design-system/consent.css
   ------------------------------------------------------------
   Consentement cookies (mesure d'audience). Couplé à consent.js.
     1. Bandeau — barre fine flottante, ancrée en bas à gauche :
        une phrase + deux boutons de MÊME niveau (Refuser = Accepter,
        exigence CNIL : refuser aussi simple qu'accepter).
     2. Lien de réouverture — posé dans le pied du footer.

   « Architecture du calme » : charbon + filet de séparation, aucun
   radius, aucun bronze (la conformité reste neutre, cf. footer).
   Entrée : fondu + translateY (easeOutCubic) ; sortie : easeInOutCubic.
   Reduced-motion : apparition/disparition immédiates.

   Requiert : colors_and_type.css, altus-motion.css (tokens),
              hero.css (.altus-btn / .altus-btn-secondary).
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1 — Bandeau
   ────────────────────────────────────────────────────────── */
.altus-consent {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90; /* sous le header fixe (100) et son menu mobile */
  box-sizing: border-box;
  width: calc(100vw - 40px);
  max-width: 760px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 28px;
  row-gap: 14px;
  padding: 14px 16px 14px 22px;
  background: var(--altus-bg);
  color: var(--altus-fg1);
  border: 1px solid var(--altus-sep);
  box-shadow: var(--altus-lift-shadow, none);
  font-family: var(--altus-font);
  font-weight: var(--altus-w-light);
}
.altus-consent[hidden] { display: none; }

.altus-consent-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--altus-fg1);
  text-wrap: pretty;
}

.altus-consent-actions {
  display: flex;
  gap: 8px;
}
/* Variante compacte du bouton DS — mêmes règles, gabarit réduit. */
.altus-consent .altus-consent-btn {
  padding: 10px 18px;
  font-size: 13px;
}

/* États d'affichage pilotés par consent.js (data-state="in" | "out"). */
.altus-consent[data-state="out"] {
  opacity: 0;
  transform: translateY(var(--altus-translateY));
  pointer-events: none;
}
.altus-consent[data-state="in"] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* Sortie (interaction) — easeInOutCubic. */
  .altus-consent {
    transition:
      opacity   var(--altus-fade-out) var(--altus-ease-inout),
      transform var(--altus-fade-out) var(--altus-ease-inout);
  }
  /* Entrée — easeOutCubic. */
  .altus-consent[data-state="in"] {
    transition-duration: var(--altus-fade-in);
    transition-timing-function: var(--altus-ease);
  }
}

/* Mobile — pleine largeur (gouttières 12 px), boutons côte à côte. */
@media (max-width: 640px) {
  .altus-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
    padding: 14px 16px;
  }
  .altus-consent-text { font-size: 13px; line-height: 1.45; }
  .altus-consent .altus-consent-btn { flex: 1 1 0; }
}

/* ──────────────────────────────────────────────────────────
   2 — Lien de réouverture (pied du footer)
   Hérite de la typo du pied (majuscules, interlettrage) ; même
   signal de survol que les liens du footer (filet fg2).
   ────────────────────────────────────────────────────────── */
.altus-consent-open {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: text-decoration-color 180ms var(--altus-ease);
}
.altus-consent-open[hidden] { display: none; }
/* Séparateur « · » — inline-block : n'est pas souligné au survol. */
.altus-consent-open::before {
  content: "\00B7";
  display: inline-block;
  margin-inline: 0.5em 0.35em;
}
.altus-consent-open:hover,
.altus-consent-open:focus-visible {
  text-decoration-color: var(--altus-fg2);
}
.altus-consent-open:focus-visible {
  outline: 1px solid var(--altus-fg2);
  outline-offset: 4px;
}