/* ============================================================
   Bandeau de consentement et page de gestion des cookies

   Deux exigences de la CNIL sont ici des regles de style, pas des details
   d'apparence :

   1. **Refuser doit etre aussi simple qu'accepter.** Les deux boutons du
      bandeau partagent une seule classe, `.cookies-bandeau-bouton` : meme
      fond, meme bordure, meme taille, meme graisse, meme endroit. Il n'existe
      aucune regle qui distingue l'un de l'autre, et il ne doit jamais en
      exister. Un "Accepter" en couleur face a un "Parametrer" en lien gris est
      exactement ce que la CNIL sanctionne.

   2. **Le bandeau ne bloque pas la navigation.** Pas de voile plein ecran,
      pas de blocage du defilement, pas de capture du clavier. C'est une barre
      posee en bas de la fenetre, que l'on peut ignorer pour lire la page.

   Les couleurs viennent des variables de style.css : le bandeau suit le theme
   clair et le theme sombre sans regle en double.
   ============================================================ */

/* ----------------------------------------------------------- le bandeau */

.cookies-bandeau {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--surface);
  color: var(--texte);
  border-top: 3px solid var(--magenta);
  box-shadow: 0 -6px 24px rgba(53, 55, 62, .16);
  padding: 1.1rem 20px 1.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "texte actions" "lien actions";
  align-items: center;
  gap: .35rem 2rem;
  font-size: .93rem;
  line-height: 1.55;
  animation: cookies-monte .28s ease-out;
}

@keyframes cookies-monte {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Une animation d'entree n'est jamais indispensable. */
@media (prefers-reduced-motion: reduce) {
  .cookies-bandeau { animation: none; }
}

.cookies-bandeau-texte { grid-area: texte; max-width: 78ch; }

.cookies-bandeau-titre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .3rem;
}

.cookies-bandeau-corps { margin: 0; color: var(--texte-doux); }

.cookies-bandeau-lien { grid-area: lien; margin: .4rem 0 0; }
.cookies-bandeau-lien a { color: var(--magenta); }

/* Les deux boutons, strictement identiques. Ne pas ajouter de selecteur qui
   n'en viserait qu'un seul. */
.cookies-bandeau-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.cookies-bandeau-bouton {
  font: inherit;
  font-family: var(--titre);
  font-weight: 500;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  min-width: 11.5rem;
  padding: .72rem 1.4rem;
  border: 2px solid var(--magenta);
  border-radius: 2px;
  background: var(--magenta);
  color: #FFFFFF;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.cookies-bandeau-bouton:hover,
.cookies-bandeau-bouton:focus-visible {
  background: var(--magenta-fonce);
  border-color: var(--magenta-fonce);
}

.cookies-bandeau-bouton:focus-visible {
  outline: 3px solid var(--anthracite);
  outline-offset: 2px;
}

/* En dessous de 720 px la barre passe en colonne, et les boutons prennent
   toute la largeur : deux blocs de meme taille, l'un au-dessus de l'autre.
   `min-width` en `auto` sinon les 11,5rem debordent en 375 px. */
@media (max-width: 720px) {
  .cookies-bandeau {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "texte" "actions" "lien";
    gap: .9rem;
    max-height: 82vh;
    overflow-y: auto;
    padding: 1rem 16px 1.1rem;
  }
  .cookies-bandeau-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cookies-bandeau-bouton { min-width: 0; width: 100%; }
  .cookies-bandeau-lien { margin: 0; }
}

/* --------------------------------------------- la page de gestion */

/* Rien ici ne redefinit les titres, les paragraphes ni les listes : la page
   porte `.page-contenu` comme /page/cgv/ ou /page/mentions-legales/, et doit
   leur ressembler. Ce fichier n'ajoute que ce qui n'existe pas ailleurs sur le
   site : le bandeau, le tableau des depots et le panneau de commandes.

   Le tableau des cookies. Il doit rester lisible en 375 px : la mise en
   colonne cassait la lecture ligne par ligne, on le laisse donc en tableau et
   on le fait defiler dans son propre conteneur. Le corps de la page, lui, ne
   defile jamais horizontalement. */
.cookies-tableau-cadre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0 1.4rem;
  border: 1px solid var(--bordure);
}

.cookies-tableau {
  border-collapse: collapse;
  width: 100%;
  min-width: 42rem;
  font-size: .93rem;
}

.cookies-tableau th, .cookies-tableau td {
  border-bottom: 1px solid var(--bordure);
  padding: .7rem .9rem;
  text-align: left;
  vertical-align: top;
}

.cookies-tableau thead th {
  background: var(--fond-alt);
  font-family: var(--titre);
  font-weight: 500;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .04em;
}

.cookies-tableau tbody tr:last-child th,
.cookies-tableau tbody tr:last-child td { border-bottom: 0; }

.cookies-tableau code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--fond-alt);
  padding: .1rem .35rem;
}

/* Le panneau de commandes. */
.cookies-reglages {
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--magenta);
  background: var(--surface);
  padding: 1.3rem 1.4rem 1.5rem;
  margin: 1.2rem 0 2rem;
  box-shadow: var(--ombre);
}

.cookies-etat {
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  padding: .9rem 1rem;
  margin-bottom: 1.3rem;
  font-size: .93rem;
}

.cookies-etat-vide { margin: 0; color: var(--texte-doux); }

.cookies-etat-liste {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .35rem 1.2rem;
  margin: 0;
}

.cookies-etat-liste dt { font-weight: 700; color: var(--texte-doux); }
.cookies-etat-liste dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .cookies-etat-liste { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .cookies-etat-liste dd { margin: 0 0 .6rem; }
}

.cookies-liste { list-style: none; margin: 0; padding: 0; }

.cookies-choix {
  border-top: 1px solid var(--bordure);
  padding: .95rem 0;
}
.cookies-choix:first-child { border-top: 0; padding-top: 0; }

.cookies-choix-etiquette {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
}

.cookies-choix-impose .cookies-choix-etiquette { cursor: default; }

.cookies-choix-etiquette input {
  width: 1.15rem; height: 1.15rem;
  accent-color: var(--magenta);
  flex: 0 0 auto;
}

.cookies-choix-titre {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.cookies-choix-texte {
  margin: .35rem 0 0 1.75rem;
  color: var(--texte-doux);
  font-size: .93rem;
}

.cookies-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.4rem;
}

/* Memes regles que dans le bandeau : accepter et refuser ne se distinguent
   par rien. "Enregistrer mes choix" est le troisieme bouton, et il est traite
   exactement pareil : aucun des trois n'est mis en avant. */
.cookies-actions button {
  font: inherit;
  font-family: var(--titre);
  font-weight: 500;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex: 1 1 12rem;
  padding: .72rem 1.2rem;
  border: 2px solid var(--magenta);
  border-radius: 2px;
  background: var(--magenta);
  color: #FFFFFF;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.cookies-actions button:hover,
.cookies-actions button:focus-visible {
  background: var(--magenta-fonce);
  border-color: var(--magenta-fonce);
}

.cookies-actions button:focus-visible {
  outline: 3px solid var(--anthracite);
  outline-offset: 2px;
}

/* Le retrait du consentement est une action a part : elle annule tout, y
   compris la trace du choix. Elle est en retrait visuel, mais reste un vrai
   bouton, atteignable au clavier, jamais cache derriere un menu. */
.cookies-retrait { margin: 1.2rem 0 0; }

.cookies-retrait button {
  font: inherit;
  font-family: var(--titre);
  font-weight: 400;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .6rem 1.1rem;
  border: 2px solid var(--bordure);
  border-radius: 2px;
  background: transparent;
  color: var(--texte);
  cursor: pointer;
}

.cookies-retrait button:hover,
.cookies-retrait button:focus-visible { border-color: var(--texte-doux); }

.cookies-message {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  font-size: .93rem;
  color: var(--texte);
  background: var(--fond-alt);
  border-left: 3px solid var(--magenta);
}

.cookies-message:empty { display: none; }

/* Sans JavaScript, les commandes n'existent pas : le visiteur est renvoye au
   reglage de son navigateur, decrit plus bas dans la page. */
.cookies-sans-js {
  margin: 0;
  padding: .8rem 1rem;
  background: var(--fond-alt);
  border-left: 3px solid var(--magenta);
  font-size: .93rem;
}

.cookies-encadre {
  border: 1px solid var(--bordure);
  background: var(--fond-alt);
  padding: 1rem 1.1rem;
  margin: 1.2rem 0;
}

.cookies-encadre p:first-child { margin-top: 0; }
.cookies-encadre p:last-child { margin-bottom: 0; }

/* Le lien permanent du pied de page. */
.pied-menu a[data-cookies-rouvrir] { white-space: nowrap; }