/*
 * Banniere de consentement RGPD.
 * Habillage aligne sur la DA du site (tokens de css/main.css, charge avant) :
 *   - fond bleu nuit (--navy), texte sable (--sand), accent cuivre (--copper),
 *   - polices Inter (corps) et boutons arrondis facon .btn du design system.
 * Selecteurs prefixes .cookie-* : aucun impact sur le reste de la page.
 * Logique JS : js/consent.js.
 */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080; /* au-dessus du header sticky (100) et de la barre contact mobile (90) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--container-px);
  background-color: var(--navy);
  color: var(--sand);
  border-top: 1px solid color-mix(in srgb, var(--copper) 40%, transparent);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  /* etat initial pour la transition d'apparition */
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.cookie-banner-visible {
  transform: translateY(0);
}

.cookie-banner-hidden {
  transform: translateY(100%);
}

.cookie-banner-text {
  margin: 0;
  flex: 1 1 320px;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: color-mix(in srgb, var(--sand) 90%, transparent);
}

.cookie-banner-text a {
  color: var(--copper-light);
  font-weight: 500;
  background-image: linear-gradient(var(--copper-light), var(--copper-light));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--transition-base), color var(--transition-fast);
}

.cookie-banner-text a:hover,
.cookie-banner-text a:focus-visible {
  color: var(--white);
  background-size: 100% 2px;
}

.cookie-banner-actions {
  display: flex;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* Boutons : memes formes que .btn de la maquette (pilule, Inter 600). */
.cookie-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.2;
  padding: var(--space-3) var(--space-6);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-base),
    border-color var(--transition-base), color var(--transition-base);
}

.cookie-btn:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* Accepter et Refuser ont le meme poids visuel (exigence RGPD) :
   meme taille, meme typo. Seuls fond/contour distinguent. */
.cookie-btn-accept {
  /* Fond --copper-deep (et non --copper) pour que le texte blanc
     atteigne le contraste WCAG AA (4.98:1). Defini dans main.css. */
  background-color: var(--copper-deep);
  color: var(--white);
  border-color: var(--copper-deep);
}

.cookie-btn-accept:hover,
.cookie-btn-accept:focus-visible {
  background-color: color-mix(in srgb, var(--copper-deep) 85%, black);
  border-color: color-mix(in srgb, var(--copper-deep) 85%, black);
}

/* Refuser, Personnaliser, Enregistrer : meme style sobre (contour sable),
   meme poids visuel qu'Accepter (exigence RGPD : pas de bouton minimise). */
.cookie-btn-refuse,
.cookie-btn-customize,
.cookie-btn-save {
  background-color: transparent;
  color: var(--sand);
  border-color: color-mix(in srgb, var(--sand) 50%, transparent);
}

.cookie-btn-refuse:hover,
.cookie-btn-refuse:focus-visible,
.cookie-btn-customize:hover,
.cookie-btn-customize:focus-visible,
.cookie-btn-save:hover,
.cookie-btn-save:focus-visible {
  background-color: color-mix(in srgb, var(--sand) 12%, transparent);
  border-color: var(--sand);
  color: var(--white);
}

/* --- Panneau de personnalisation (RGPD-03) : deux categories. --- */
.cookie-details {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--sand) 16%, transparent);
}

/* display:flex ci-dessus ecraserait l'attribut [hidden] (display:none du
   navigateur, faible specificite). On retablit le masquage explicitement. */
.cookie-details[hidden] {
  display: none;
}

.cookie-cat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Label = ligne titre + interrupteur, cliquable en entier. */
.cookie-cat-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: 600;
  color: var(--sand);
}

.cookie-cat-toggle {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--copper);
  cursor: pointer;
}

.cookie-cat-toggle:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

.cookie-cat-title {
  font-size: var(--text-sm);
}

.cookie-cat-desc {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: color-mix(in srgb, var(--sand) 75%, transparent);
  /* aligne la description sous le titre (largeur de l'interrupteur + gap). */
  padding-left: calc(18px + var(--space-3));
}

@media (max-width: 575px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  /* En colonne, flex-grow etirait le texte verticalement (grand vide avant
     les boutons). On le ramene a sa hauteur naturelle. */
  .cookie-banner-text {
    flex: 0 0 auto;
  }
  .cookie-banner-actions {
    justify-content: center;
  }
}