/* Page cookies : texte juridique recopié du site ; seule la mise en page est propre à la page.
   Règles communes aux quatre pages légales (en-tête, sommaire à gauche, repères, fiche d'identité) : dt.css, .lecture-legale.
   Propre à la page : le tableau des traceurs (une fiche par traceur quand sa zone est étroite) et le réglage des
   préférences (les boutons rouvrent le panneau de cookie-consent.js). */

/* Tableau des traceurs (style de <code> : dt.css). Dans la première colonne, chaque identifiant est une étiquette sur sa ligne. */
.prose .tableau-zone { margin-top: var(--esp-5); }
.cookies-traceurs td { font-size: 15px; line-height: 1.5; }
.cookies-traceurs td:first-child > code { font-size: 0.8em; display: block; width: fit-content; margin-bottom: 6px; padding: 2px 7px; border-radius: 6px; background: var(--dt-surface-alt); }
.cookies-traceurs small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--dt-ink-2); }
/* Le tableau à cinq colonnes demande 800 px environ (identifiants et pastilles ne se coupent pas).
   Quand sa zone est plus étroite (tablette, portable de 1024 à 1279 px, téléphone), chaque traceur devient une fiche :
   sur deux rangées tant qu'il y a la place, puis en une seule colonne. Requête de conteneur : c'est la largeur
   de la colonne de texte qui compte, pas celle de l'écran. */
.cookies-traceurs-zone { container: traceurs / inline-size; }
@container traceurs (max-width: 859px) {
  .cookies-traceurs, .cookies-traceurs tbody, .cookies-traceurs tr, .cookies-traceurs td { display: block; }
  .cookies-traceurs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cookies-traceurs tr { padding: var(--esp-4) var(--esp-4) var(--esp-2); border-radius: var(--r-panel); background: var(--dt-paper); box-shadow: 0 0 0 2px var(--dt-ink); }
  .cookies-traceurs tr + tr { margin-top: var(--esp-4); }
  .cookies-traceurs td, .cookies-traceurs tbody tr:last-child td { border: 0; padding: 0 0 10px; }
  .cookies-traceurs td:first-child { font-size: 17px; }
  .cookies-traceurs td:not(:first-child)::before { content: attr(data-l); display: block; font: 600 13px/1.4 var(--text); color: var(--dt-ink-2); }
}
@container traceurs (min-width: 600px) and (max-width: 859px) {
  .cookies-traceurs tr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); grid-template-areas: "nom finalite finalite" "statut origine duree"; column-gap: var(--esp-5); }
  .cookies-traceurs td:nth-child(1) { grid-area: nom; }
  .cookies-traceurs td:nth-child(2) { grid-area: origine; }
  .cookies-traceurs td:nth-child(3) { grid-area: finalite; }
  .cookies-traceurs td:nth-child(4) { grid-area: duree; }
  .cookies-traceurs td:nth-child(5) { grid-area: statut; }
}

/* Gérer vos préférences : un encart de réglage, les deux boutons puis l'état du choix (démonstration) */
.prose .cookies-reglage { display: grid; gap: var(--esp-3); margin-top: var(--esp-5); padding: var(--esp-5); border-radius: var(--r-panel); background: var(--dt-encart); }
.cookies-preferences { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-4); align-items: center; }
.cookies-preferences .btn { min-height: 52px; padding: 0 24px; }
.cookies-preferences .btn svg { width: 20px; height: 20px; }
.cookies-etat { font-size: 15px; line-height: 1.45; color: var(--dt-ink-2); }
.cookies-etat:empty { display: none; }
@media (max-width: 560px) {
  .prose .cookies-reglage { padding: var(--esp-4); }
  .cookies-preferences > * { flex: 1 1 100%; }
  .cookies-preferences .btn, .cookies-preferences .btn-2 { padding: 0 14px; font-size: 16px; }
}