/**
 * Bandeau de consentement — CDOS 30
 * Remplace Axeptio.
 */

.consentement {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1000;
  padding: var(--e-s);
  background-color: var(--couleur-fond-inverse);
  color: var(--couleur-texte-inverse);
  box-shadow: 0 -4px 24px rgb(10 31 71 / 0.28);
}

.consentement[hidden] { display: none; }

.consentement__boite {
  display: grid;
  gap: var(--e-xs);
  align-items: center;
  max-width: var(--largeur-contenu);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .consentement__boite {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "titre   actions"
      "texte   actions";
    column-gap: var(--e-l);
  }

  .consentement__titre   { grid-area: titre; }
  .consentement__texte   { grid-area: texte; }
  .consentement__actions { grid-area: actions; }
}

.consentement__titre {
  margin: 0;
  color: var(--couleur-texte-inverse);
  font-size: var(--t-h5);
  font-weight: var(--graisse-forte);
}

.consentement__texte {
  margin: 0;
  max-width: 70ch;
  font-size: var(--t-petit);
  line-height: 1.5;
}

.consentement__texte a {
  color: var(--c-bleu-pale);
  text-decoration: underline;
}

.consentement__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2xs);
}

/*
 * Les deux boutons sont identiques, volontairement : la CNIL exige que
 * refuser soit aussi simple qu'accepter. Ne pas ajouter de variante
 * « primaire » sur « Tout accepter ».
 */
.consentement__bouton {
  flex: 1 1 auto;
  min-width: 9rem;
  min-height: 2.75rem; /* cible tactile ≥ 44 px */
  padding: var(--e-2xs) var(--e-m);
  border: 2px solid var(--couleur-texte-inverse);
  border-radius: var(--rayon-bouton);
  background-color: transparent;
  color: var(--couleur-texte-inverse);
  font-family: var(--police-titre);
  font-size: var(--t-petit);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color var(--transition), color var(--transition);
}

.consentement__bouton:hover,
.consentement__bouton:focus-visible {
  background-color: var(--couleur-texte-inverse);
  color: var(--couleur-fond-inverse);
}

.consentement__bouton:focus-visible {
  outline: var(--focus-epaisseur) solid var(--c-ambre);
  outline-offset: var(--focus-decalage);
}

/* Lien « Gérer mes cookies » — un bouton déguisé en lien. */
.lien-consentement {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}