/* ============================================================
   Diag-Tertiaire Blog : styles differes communs a toutes les pages
   Charge en differe par src/layouts/Base.astro, avant la feuille du gabarit
   (article.css ou listing.css). Le premier ecran (base, classes communes,
   en-tete, cartes) est inline : src/styles/critical-site.css et
   critical-cartes.css. Jetons et polices : src/styles/jetons.css.
   Design : site/dt.css de la maquette de la refonte 2026-10.
   ============================================================ */

/* --- Bouton secondaire : contour, meme forme que le bouton principal --- */
.btn-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  border: 2px solid var(--dt-ink);
  color: var(--dt-ink);
  background: transparent;
  font: 700 17px/1 var(--display);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.btn-2:hover { background: var(--dt-surface-alt); }
.btn-2 svg { width: 20px; height: 20px; }

/* --- Pied du site (src/components/PiedDePage.astro) ---------- */
.pied {
  border-top: 3px solid var(--dt-ink);
  padding: 56px 0 40px;
  font-size: 15px;
}
.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr));
  gap: 32px;
}
.pied-titre {
  font: 700 16px var(--display);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.pied ul { list-style: none; }
.pied li a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  line-height: 1.25;
  padding: 4px 0;
  text-decoration: none;
  color: var(--dt-ink-2);
}
.pied li a:hover {
  color: var(--dt-ink);
  text-decoration: underline;
  text-decoration-color: var(--dt-accent);
  text-underline-offset: 4px;
}
.pied-bas {
  margin-top: 40px;
  color: var(--dt-ink-2);
  font-size: 14px;
}

/* Logos des partenaires : sur un cartouche blanc, chacun un lien de 44 px de haut */
.bic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  /* 10 px : sur le site, .pied .marque p (10 px) passe devant .pied .bic (18 px) */
  margin-top: 10px;
  font-size: 13px;
  color: var(--dt-ink-2);
}
.bic-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.bic-logos a {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  border-radius: 6px;
}
.bic img {
  height: 40px;
  width: auto;
  background: var(--dt-paper);
  padding: 4px 6px;
  border-radius: 6px;
  flex: none;
}

/* « Gestion des cookies » : un bouton (il ouvre le panneau des cookies) dessine
   comme les liens du pied ; copie de .pied li .pied-lien d'assets/site/dt.css */
.pied li .pied-lien {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  line-height: 1.25;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--dt-ink-2);
  cursor: pointer;
  text-align: left;
}
.pied li .pied-lien:hover {
  color: var(--dt-ink);
  text-decoration: underline;
  text-decoration-color: var(--dt-accent);
  text-underline-offset: 4px;
}

@media (max-width: 760px) {
  .btn-2 { white-space: normal; line-height: 1.15; text-align: center; padding-top: 10px; padding-bottom: 10px; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .pied .marque { grid-column: 1 / -1; }
}
@media (forced-colors: active) {
  .btn-2 { border-color: ButtonText; }
}

/* --- Mouvement reduit ---------------------------------------- */
/* Transitions et animations ramenees a l'instant pour qui le demande ; le
   defilement doux est deja conditionne dans critical-site.css. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- Impression ----------------------------------------------- */
/* En-tete, pied et lien d'evitement masques sur toutes les pages (bandeau et
   panneau de cookies : leur section, plus bas) ; la mise en page imprimee de
   l'article est dans article.css. */
@media print {
  .skip,
  .top,
  .pied {
    display: none !important;
  }
  body {
    background: var(--dt-paper);
    color: var(--dt-ink);
  }
}

/* ============================================================
   Bandeau et panneau des cookies : copie a l'identique de la section
   « Bandeau et panneau des cookies » d'assets/site/dt.css du site de la refonte
   (depot v3-maquette, 2026-10-14, commit 2cecd0e ; meme texte que
   design/refonte-2026-10/integration/design/bandeau-cookies/bandeau-cookies.css).
   Ne pas la retoucher ici : la remplacer en bloc quand le site change. Seule
   l'adaptation qui la suit est propre au blog.
   ============================================================ */
/* ========== Bandeau et panneau des cookies (habillage de cookie-consent.js, qui n'est jamais modifié) ==========
   Le script crée #dt-cb (bandeau), #dt-panel-bg et #dt-panel (préférences) et injecte en fin de <head> sa feuille
   #dt-cb-style (bleue, Inter). Toutes les règles ci-dessous commencent par « html body » : elles passent devant la feuille
   injectée sans !important. Couleurs : jetons --dt-* seulement (le mode nuit suit tout seul).
   Obligation CNIL (JOURNAL-DECISIONS.md, 2026-10-05) : « Tout refuser » et « Tout accepter » ont partout la même taille,
   le même style de bouton plein et le même niveau. Le côté ludique tient au ton, au cookie croqué et à l'explication,
   jamais à une asymétrie : aucune règle ne vise l'un des deux boutons seul.
   Le cookie croqué : quatre couches de papier découpé empilées (ombre, biscuit, pépites, pépite framboise), dessinées
   par des masques SVG sans couleur et peintes avec les jetons. Bandeau : #dt-cb::before et ::after, #dt-cb-inner::before
   et ::after ; panneau : #dt-panel-head et #dt-panel-title. Il est posé à cheval sur le bord du bandeau.
   Ombre décalée : seulement sur le cookie (un objet) ; le bandeau et le panneau (des conteneurs) n'ont qu'un contour. */
:root {
  --cb-biscuit: var(--dt-il-vitre); --cb-pepite: var(--dt-il-encre); --cb-framboise: var(--dt-il-chaud);
  --cb-corps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='8.5,53.0 8.8,43.0 12.5,34.0 19.3,26.0 27.4,19.0 36.8,14.3 46.0,11.4 57.7,12.7 59.9,15.6 61.4,19.4 63.2,21.6 65.1,23.1 67.2,24.1 69.7,24.7 71.3,26.5 72.2,29.0 73.4,31.0 74.8,32.7 76.6,34.2 78.9,35.5 81.3,36.9 81.5,39.5 82.1,41.8 83.3,43.9 85.2,46.0 88.9,48.1 90.8,50.7 90.9,53.6 91.1,56.4 89.2,67.7 84.7,77.1 76.9,84.6 67.5,91.8 57.5,94.5 46.4,95.8 35.3,91.8 24.9,85.5 16.2,79.1 11.7,70.1 8.3,61.0'/%3E%3Cpolygon points='92.4,18.6 94.7,21.6 93.7,25.4 89.5,24.5 88.8,20.5'/%3E%3Cpolygon points='97.3,38.0 95.5,36.7 95.7,34.6 98.1,33.6 99.1,36.5'/%3E%3Cpolygon points='90.3,7.9 88.6,9.4 86.9,9.0 86.4,6.8 88.5,6.3'/%3E%3C/svg%3E");
  --cb-pepites: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='23.9,33.8 29.6,30.1 34.9,33.0 36.0,39.1 30.4,42.1 26.5,39.5'/%3E%3Cpolygon points='48.5,26.7 53.6,27.0 57.0,30.6 54.7,34.0 50.6,34.2 46.7,31.4'/%3E%3Cpolygon points='27.1,66.3 23.6,62.6 22.3,56.9 26.9,53.7 30.9,57.5 31.2,63.1'/%3E%3Cpolygon points='50.5,72.8 49.5,77.5 44.5,79.9 41.1,75.1 42.1,70.2 47.5,67.0'/%3E%3Cpolygon points='64.0,56.6 69.7,58.8 72.5,62.9 68.4,67.9 62.8,66.0 61.8,61.1'/%3E%3Cpolygon points='64.5,47.1 62.4,49.2 59.9,47.6 59.3,44.9 61.6,43.4 65.5,43.7'/%3E%3Cpolygon points='39.7,52.5 36.7,52.5 34.0,50.5 36.0,47.3 39.0,47.6 41.1,49.7'/%3E%3C/svg%3E");
  --cb-framb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='48.1,50.3 52.0,53.1 49.4,57.5 45.8,59.3 41.0,57.5 40.6,52.7 44.1,49.9'/%3E%3C/svg%3E");
}
[data-theme="dark"] { --cb-biscuit: var(--dt-il-pap2); }

/* Bandeau. Ordinateur : une feuille posée en bas de l'écran, le cookie à cheval sur son bord gauche ; le texte prend toute
   la largeur, les trois boutons sont dessous, dans l'ordre du script (clavier compris). */
html body #dt-cb { --cb-t: 104px; --cb-x: 32px; --cb-y: -34px; --cb-r: -14deg;
  left: var(--g); right: var(--g); bottom: var(--esp-4); max-width: 1120px; margin: 0 auto; background: var(--dt-paper); color: var(--dt-ink); border: 0; border-radius: var(--r-panel); box-shadow: 0 0 0 2px var(--dt-ink); backdrop-filter: none; font: 400 16px/1.5 var(--text); transform: translateY(calc(100% + 64px)); transition: transform 280ms var(--ease); }
html body #dt-cb.dt-in { transform: none; }
html body #dt-cb-inner { position: static; max-width: none; margin: 0; padding: var(--esp-5) var(--esp-6) var(--esp-6) 158px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--esp-4); }
html body #dt-cb-text { min-width: 0; }
html body #dt-cb-text h2 { margin: 0 0 6px; font: 800 23px/1.15 var(--display); letter-spacing: -0.02em; color: var(--dt-ink); }
html body #dt-cb-text p { max-width: none; margin: 0; font-size: 15px; line-height: 1.5; color: var(--dt-ink-2); }
html body #dt-cb-text a { color: var(--dt-ink); text-decoration: underline; text-decoration-color: var(--dt-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html body #dt-cb-text a:hover { color: var(--dt-ink); text-decoration-thickness: 3px; }
/* Refuser et accepter dans deux colonnes égales, de part et d'autre de « Personnaliser » */
html body #dt-cb-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--esp-3); }

/* Le cookie croqué (couches communes au bandeau et au panneau) */
html body #dt-cb::before, html body #dt-cb::after, html body #dt-cb-inner::before, html body #dt-cb-inner::after,
html body #dt-panel-head::before, html body #dt-panel-head::after, html body #dt-panel-title::before, html body #dt-panel-title::after {
  content: ""; position: absolute; left: var(--cb-x); top: var(--cb-y); width: var(--cb-t); height: var(--cb-t); rotate: var(--cb-r); pointer-events: none;
  -webkit-mask: var(--cb-forme) center / contain no-repeat; mask: var(--cb-forme) center / contain no-repeat; }
html body #dt-cb::before, html body #dt-panel-head::before { --cb-forme: var(--cb-corps); z-index: 0; translate: 3px 5px; background: var(--dt-shadow); opacity: 0.22; }
html body #dt-cb::after, html body #dt-panel-head::after { --cb-forme: var(--cb-corps); z-index: 1; background: var(--cb-biscuit); }
html body #dt-cb-inner::before, html body #dt-panel-title::before { --cb-forme: var(--cb-pepites); z-index: 2; background: var(--cb-pepite); }
html body #dt-cb-inner::after, html body #dt-panel-title::after { --cb-forme: var(--cb-framb); z-index: 3; background: var(--cb-framboise); }
/* Il se pose en tournant quand le bandeau monte */
@keyframes cb-pose { from { rotate: -80deg; scale: 0.3; } 65% { rotate: calc(var(--cb-r) + 9deg); scale: 1.06; } to { rotate: var(--cb-r); scale: 1; } }
html body #dt-cb.dt-in::before, html body #dt-cb.dt-in::after, html body #dt-cb.dt-in #dt-cb-inner::before, html body #dt-cb.dt-in #dt-cb-inner::after { animation: cb-pose 560ms var(--ease) 180ms backwards; }

/* Boutons : ceux du système (.btn plein pour refuser et accepter, .btn-2 contour pour personnaliser) */
html body .dt-btn { min-height: 48px; padding: 0 var(--esp-5); border-radius: 999px; font: 700 16px/1.15 var(--display); letter-spacing: -0.005em; text-align: center; white-space: nowrap; transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease); }
html body .dt-btn:focus-visible, html body #dt-panel-close:focus-visible { outline: 3px solid var(--dt-accent); outline-offset: 3px; }
html body .dt-btn-primary, html body .dt-btn-dark { background: var(--dt-action); border: 2px solid var(--dt-action); color: var(--dt-on-action); box-shadow: 0 4px 0 var(--dt-action-shadow); }
html body .dt-btn-primary:hover, html body .dt-btn-dark:hover { background: var(--dt-action); border-color: var(--dt-action); transform: translateY(-2px); box-shadow: 0 6px 0 var(--dt-action-shadow); }
html body .dt-btn-primary:active, html body .dt-btn-dark:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dt-action-shadow); }
html body .dt-btn-outline { background: transparent; border: 2px solid var(--dt-ink); color: var(--dt-ink); box-shadow: none; }
html body .dt-btn-outline:hover { background: var(--dt-surface-alt); border-color: var(--dt-ink); }

/* Panneau de préférences : une feuille sur un voile, un contour comme les fenêtres du site ; le cookie dans l'en-tête */
html body #dt-panel-bg { padding: var(--esp-4); background: color-mix(in srgb, var(--dt-il-dedans) 55%, transparent); }
html body #dt-panel { --cb-t: 60px; --cb-x: 26px; --cb-y: 18px; --cb-r: -12deg;
  max-width: 540px; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--dt-paper); color: var(--dt-ink); border-radius: var(--r-panel); box-shadow: 0 0 0 2px var(--dt-ink); font: 400 16px/1.5 var(--text); }
html body #dt-panel-head { position: relative; min-height: 96px; padding: var(--esp-5) var(--esp-5) var(--esp-3) 104px; border-bottom: 0; align-items: flex-start; gap: var(--esp-4); }
html body #dt-panel-head h2 { position: static; padding-top: 6px; font: 800 26px/1.1 var(--display); letter-spacing: -0.025em; color: var(--dt-ink); }
html body #dt-panel-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-control); background: var(--dt-surface-alt); color: var(--dt-ink); font-size: 18px; }
html body #dt-panel-close:hover { background: var(--dt-surface-alt-2); color: var(--dt-ink); }
html body #dt-panel-body { padding: 0 var(--esp-6); gap: 0; }
html body .dt-cat { align-items: center; gap: var(--esp-4); padding: var(--esp-4) 0; background: none; border: 0; border-top: 2px dotted var(--dt-surface-alt-2); border-radius: 0; }
html body .dt-cat-info strong { margin-bottom: 2px; font: 700 18px/1.25 var(--display); letter-spacing: -0.01em; color: var(--dt-ink); }
html body .dt-cat-info p { font-size: 15px; line-height: 1.45; color: var(--dt-ink-2); }
/* Interrupteurs : 44 px de haut pour le doigt. Éteint : un contour ; allumé : bleu-vert, et la pastille devient un petit
   cookie ; toujours actif : pétrole plein. */
html body .dt-toggle { width: 56px; height: 44px; margin: 0; }
html body .dt-toggle-track { inset: 6px 0; background: var(--dt-surface-alt); box-shadow: inset 0 0 0 2px var(--dt-ink-3); transition: background 180ms var(--ease); }
html body .dt-toggle-track::before { top: 5px; left: 5px; width: 22px; height: 22px; background: var(--dt-ink-3); box-shadow: none; transition: transform 180ms var(--ease); }
html body .dt-toggle input:checked + .dt-toggle-track { background: var(--dt-il-cadre); box-shadow: inset 0 0 0 2px var(--dt-il-cadre); }
html body .dt-toggle input:checked + .dt-toggle-track::before { transform: translateX(24px); box-shadow: 0 0 0 2px var(--dt-il-encre);
  background: radial-gradient(circle at 34% 36%, var(--dt-il-encre) 2.4px, transparent 2.9px), radial-gradient(circle at 66% 42%, var(--dt-il-encre) 1.8px, transparent 2.3px), radial-gradient(circle at 48% 70%, var(--dt-il-encre) 2.1px, transparent 2.6px), var(--dt-il-pap); }
html body .dt-toggle input:disabled + .dt-toggle-track { opacity: 1; background: var(--dt-ink); box-shadow: inset 0 0 0 2px var(--dt-ink); }
html body .dt-toggle input:disabled + .dt-toggle-track::before { background: var(--dt-paper); box-shadow: none; }
html body .dt-toggle:focus-within .dt-toggle-track { outline: 3px solid var(--dt-accent); outline-offset: 3px; }
/* Refuser et accepter côte à côte, à égalité ; enregistrer ses choix en dessous, dans le même bouton plein */
html body #dt-panel-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-4) var(--esp-3); margin-top: var(--esp-2); padding: var(--esp-5) var(--esp-6) var(--esp-6); border-top: 3px solid var(--dt-ink); }
html body #dt-panel-footer .dt-btn { flex: none; }
html body #dt-panel-footer .dt-btn-dark { grid-column: 1 / -1; }

/* Pied de page : « Gestion des cookies » est un bouton (il ouvre le panneau) ; un petit cookie le distingue des liens */
.pied li .pied-lien[data-dt-cookies-ouvrir] { gap: var(--esp-2); }
.pied li .pied-lien[data-dt-cookies-ouvrir]::before { content: ""; flex: none; width: 20px; height: 20px; rotate: -14deg; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpolygon points='23.9,33.8 29.6,30.1 34.9,33.0 36.0,39.1 30.4,42.1 26.5,39.5' fill='black'/%3E%3Cpolygon points='48.5,26.7 53.6,27.0 57.0,30.6 54.7,34.0 50.6,34.2 46.7,31.4' fill='black'/%3E%3Cpolygon points='27.1,66.3 23.6,62.6 22.3,56.9 26.9,53.7 30.9,57.5 31.2,63.1' fill='black'/%3E%3Cpolygon points='50.5,72.8 49.5,77.5 44.5,79.9 41.1,75.1 42.1,70.2 47.5,67.0' fill='black'/%3E%3Cpolygon points='64.0,56.6 69.7,58.8 72.5,62.9 68.4,67.9 62.8,66.0 61.8,61.1' fill='black'/%3E%3Cpolygon points='64.5,47.1 62.4,49.2 59.9,47.6 59.3,44.9 61.6,43.4 65.5,43.7' fill='black'/%3E%3Cpolygon points='39.7,52.5 36.7,52.5 34.0,50.5 36.0,47.3 39.0,47.6 41.1,49.7' fill='black'/%3E%3Cpolygon points='48.1,50.3 52.0,53.1 49.4,57.5 45.8,59.3 41.0,57.5 40.6,52.7 44.1,49.9' fill='black'/%3E%3C/mask%3E%3Cg mask='url%28%23m%29'%3E%3Cpolygon points='8.5,53.0 8.8,43.0 12.5,34.0 19.3,26.0 27.4,19.0 36.8,14.3 46.0,11.4 57.7,12.7 59.9,15.6 61.4,19.4 63.2,21.6 65.1,23.1 67.2,24.1 69.7,24.7 71.3,26.5 72.2,29.0 73.4,31.0 74.8,32.7 76.6,34.2 78.9,35.5 81.3,36.9 81.5,39.5 82.1,41.8 83.3,43.9 85.2,46.0 88.9,48.1 90.8,50.7 90.9,53.6 91.1,56.4 89.2,67.7 84.7,77.1 76.9,84.6 67.5,91.8 57.5,94.5 46.4,95.8 35.3,91.8 24.9,85.5 16.2,79.1 11.7,70.1 8.3,61.0'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpolygon points='23.9,33.8 29.6,30.1 34.9,33.0 36.0,39.1 30.4,42.1 26.5,39.5' fill='black'/%3E%3Cpolygon points='48.5,26.7 53.6,27.0 57.0,30.6 54.7,34.0 50.6,34.2 46.7,31.4' fill='black'/%3E%3Cpolygon points='27.1,66.3 23.6,62.6 22.3,56.9 26.9,53.7 30.9,57.5 31.2,63.1' fill='black'/%3E%3Cpolygon points='50.5,72.8 49.5,77.5 44.5,79.9 41.1,75.1 42.1,70.2 47.5,67.0' fill='black'/%3E%3Cpolygon points='64.0,56.6 69.7,58.8 72.5,62.9 68.4,67.9 62.8,66.0 61.8,61.1' fill='black'/%3E%3Cpolygon points='64.5,47.1 62.4,49.2 59.9,47.6 59.3,44.9 61.6,43.4 65.5,43.7' fill='black'/%3E%3Cpolygon points='39.7,52.5 36.7,52.5 34.0,50.5 36.0,47.3 39.0,47.6 41.1,49.7' fill='black'/%3E%3Cpolygon points='48.1,50.3 52.0,53.1 49.4,57.5 45.8,59.3 41.0,57.5 40.6,52.7 44.1,49.9' fill='black'/%3E%3C/mask%3E%3Cg mask='url%28%23m%29'%3E%3Cpolygon points='8.5,53.0 8.8,43.0 12.5,34.0 19.3,26.0 27.4,19.0 36.8,14.3 46.0,11.4 57.7,12.7 59.9,15.6 61.4,19.4 63.2,21.6 65.1,23.1 67.2,24.1 69.7,24.7 71.3,26.5 72.2,29.0 73.4,31.0 74.8,32.7 76.6,34.2 78.9,35.5 81.3,36.9 81.5,39.5 82.1,41.8 83.3,43.9 85.2,46.0 88.9,48.1 90.8,50.7 90.9,53.6 91.1,56.4 89.2,67.7 84.7,77.1 76.9,84.6 67.5,91.8 57.5,94.5 46.4,95.8 35.3,91.8 24.9,85.5 16.2,79.1 11.7,70.1 8.3,61.0'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }

/* Téléphone (600 px et moins) : le bandeau s'arrime au bas de l'écran, le cookie à cheval sur son bord haut, à côté du
   titre. Il ne dépasse pas 36 % de la hauteur (300 px au plus) : à 390 x 844, le bouton principal de l'accueil reste
   visible au-dessus ; le script réserve sa hauteur sous la page. Le titre et les trois boutons restent visibles, le texte
   défile entre eux s'il est trop long (une ombre en bas le signale). */
@media (max-width: 600px) {
  html body #dt-cb { --cb-t: 58px; --cb-x: 12px; --cb-y: -22px; --cb-r: -14deg;
    left: 0; right: 0; bottom: 0; max-width: none; max-height: none; overflow: visible; border-radius: var(--r-panel) var(--r-panel) 0 0; transform: translateY(calc(100% + 32px)); }
  html body #dt-cb-inner { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-height: min(36dvh, 300px); gap: var(--esp-2); padding: var(--esp-3) var(--g) calc(var(--esp-3) + env(safe-area-inset-bottom, 0px)); }
  html body #dt-cb-text { display: contents; }
  html body #dt-cb-text h2 { flex: none; min-height: 36px; margin: 0; padding-left: 62px; font-size: 19px; line-height: 1.2; }
  html body #dt-cb-text p { flex: 1 1 auto; min-height: 44px; overflow-y: auto; overscroll-behavior: contain; font-size: 14.5px; line-height: 1.45;
    background: linear-gradient(var(--dt-paper), var(--dt-paper)) bottom / 100% 14px no-repeat local, radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--dt-ink) 22%, transparent), transparent) bottom / 100% 10px no-repeat scroll; }
  html body #dt-cb-btns { flex: none; width: 100%; margin-top: var(--esp-1); gap: var(--esp-2); }
  html body #dt-cb-btns .dt-btn { width: 100%; padding: 0 var(--esp-3); font-size: 15px; line-height: 1.1; white-space: normal; }
  html body #dt-panel-bg { padding: var(--esp-3); }
  html body #dt-panel { --cb-t: 48px; --cb-x: 18px; --cb-y: 16px; max-height: calc(100dvh - 24px); }
  html body #dt-panel-head { min-height: 80px; padding: var(--esp-4) var(--esp-4) var(--esp-2) 80px; }
  html body #dt-panel-head h2 { font-size: 22px; }
  html body #dt-panel-body { padding: 0 var(--esp-5); }
  html body #dt-panel-footer { padding: var(--esp-4) var(--esp-5) var(--esp-5); }
  html body #dt-panel-footer .dt-btn { padding: 0 var(--esp-3); font-size: 15px; line-height: 1.1; white-space: normal; }
}
/* 420 px et moins : les trois boutons tiennent sur une ligne (« Tout refuser » et « Tout accepter » sur deux lignes) */
@media (max-width: 420px) {
  html body #dt-cb-btns { gap: 6px; }
  html body #dt-cb-btns .dt-btn { padding: 0 6px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #dt-cb, html body #dt-panel-bg, html body #dt-panel, html body .dt-btn, html body .dt-toggle-track, html body .dt-toggle-track::before { transition: none; }
  html body #dt-cb, html body #dt-panel { transform: none; }
  html body #dt-cb.dt-in::before, html body #dt-cb.dt-in::after, html body #dt-cb.dt-in #dt-cb-inner::before, html body #dt-cb.dt-in #dt-cb-inner::after { animation: none; }
  html body .dt-btn-primary:hover, html body .dt-btn-primary:active, html body .dt-btn-dark:hover, html body .dt-btn-dark:active { transform: none; }
}
@media (forced-colors: active) {
  html body #dt-cb, html body #dt-panel { border: 2px solid CanvasText; }
  html body .dt-btn { border: 2px solid ButtonText; }
  html body #dt-cb::before, html body #dt-cb::after, html body #dt-cb-inner::before, html body #dt-cb-inner::after,
  html body #dt-panel-head::before, html body #dt-panel-head::after, html body #dt-panel-title::before, html body #dt-panel-title::after { display: none; }
  html body .dt-toggle-track { outline: 2px solid CanvasText; outline-offset: -2px; }
  html body .dt-toggle-track::before { forced-color-adjust: none; background: CanvasText; }
  html body .dt-toggle input:checked + .dt-toggle-track { forced-color-adjust: none; background: Highlight; }
  html body .dt-toggle input:checked + .dt-toggle-track::before { background: HighlightText; }
}
@media print {
  html body #dt-cb, html body #dt-panel-bg { display: none; }
}

/* Adaptation au script du blog (public/cookie-consent.js, consentement v2, non
   modifie), qui differe de celui du site (v3) : sous 600 px, sa feuille injectee
   masque le titre du bandeau (lot 1 du 2026-10-05) et garde des boutons de 44 px.
   L'habillage du site suppose le titre visible, le cookie pose a cote : sans lui,
   le cookie mordait sur le texte. On rend le titre et la hauteur des boutons du
   site. A retirer quand le blog prendra le script v3. */
@media (max-width: 600px) {
  html body #dt-cb-btns .dt-btn { min-height: 48px; }
}
/* Bandeau compact sur téléphone (validé par Yannis le 20/10/2026) : il couvrait 25 % du premier
   écran à 390 x 844 et 36 % à 360 x 640. Le titre reste dans le DOM et à l'oreille (lecteurs d'écran) mais ne
   s'affiche plus ; le cookie, réduit, se pose à gauche du texte au lieu de mordre dessus ; marges resserrées.
   Obligation CNIL inchangée : « Tout refuser » et « Tout accepter » gardent la même taille, le même style et le
   même niveau, et le texte d'information reste en premier niveau. Même règle dans le site : assets/site/dt.css de V3, section « Bandeau et panneau des cookies ». */
@media (max-width: 600px) {
  html body #dt-cb { --cb-t: 46px; --cb-x: 10px; --cb-y: 10px; bottom: var(--esp-2); }
  html body #dt-cb-inner { gap: var(--esp-2); padding-top: var(--esp-2); }
  html body #dt-cb-text h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html body #dt-cb-text p { min-height: 46px; padding-left: 52px; font-size: 14px; line-height: 1.4; }
  html body #dt-cb-btns { margin-top: 0; }
  html body #dt-cb-btns .dt-btn { min-height: 44px; }
}
/* Le CSS critique (src/styles/critical-site.css) masque le bandeau jusqu'a l'arrivee de cette feuille,
   pour qu'il n'apparaisse que dans sa forme finale (lot G de performance) : elle le rend visible. */
html body #dt-cb { visibility: visible; }