/* ==========================================================================
   iD.LYS — styles éditoriaux : article, liste des actualités, page 404
   Pages concernées : <html class="p-edito">
   Budget : < 30 Ko non minifié.

   DÉCOUPAGE CRITIQUE / ASYNC
   La zone entre >>> CRITIQUE >>> et <<< CRITIQUE <<< est INLINÉE dans le
   <head> des pages article (cible < 14 Ko) : elle couvre tout ce qui est
   visible avant défilement + tout ce qui stabilise la mise en page (CLS 0).
   Le fichier complet est ensuite chargé de façon non bloquante
   (media="print" basculé par JS, <noscript> en secours).
   Après toute modification de la zone critique, ré-extraire le bloc inline :
   `python3 tools/critique.py` (et `--check` pour détecter une copie périmée).

   THÈME : fond blanc en permanence, comme le reste du site — le mode sombre
   a été retiré à la demande du client (les pages éditoriales ne doivent pas
   basculer avec le réglage du visiteur). color-scheme: light le verrouille,
   y compris pour les contrôles de formulaire dessinés par le navigateur.

   CONTRASTES VÉRIFIÉS (WCAG 2.x, arrondi 2 décimales)
   #1c1c1e/#fff 17.01 · #3f3f45/#fff 10.46 · #3f3f45/#f7f6f4 9.68
   #6e6e77/#fff 5.05 · #6e6e77/#f7f6f4 4.67 · #c01034/#fff 6.24
   #c01034/#f7f6f4 5.78 · #fff/#df163c 4.86 · #fff/#b81031 6.65
   Tout texte ≥ 4,5:1.
   ========================================================================== */

/* >>> CRITIQUE >>> */

/* ---- Jetons éditoriaux — color-scheme: light verrouille aussi les widgets
   natifs (champ de recherche, ascenseurs) sur un rendu clair ---- */
html.p-edito {
  color-scheme: light;
  --ed-bg: #ffffff;
  --ed-surface: #f7f6f4;
  --ed-border: #e5e4e0;
  --ed-text: #1c1c1e;       /* titres */
  --ed-body: #3f3f45;       /* corps  */
  --ed-muted: #6e6e77;      /* méta   */
  --ed-accent: #df163c;     /* fonds/CTA uniquement (texte blanc dessus) */
  --ed-accent-text: #c01034;/* accent utilisé comme TEXTE (≥ 4,5:1) */
  --ed-accent-fonce: #b81031;
  --ed-ombre: 0 18px 40px rgb(27 27 28 / 8%);
}

/* ---- Base typographique lisible (68ch, corps fluide, interlignage 1.65) --- */
html.p-edito body {
  background: var(--ed-bg);
  color: var(--ed-body);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.65;
}

/* Le `:not()` protège le pied de page partagé : `html.p-edito :is(h1,h2,h3)`
   (0,1,2) l'emporte sinon sur `.ic-footer h2` (0,1,1) et repeint les titres du
   footer en #1c1c1e sur fond #141415, soit 1,08:1 au lieu de 18,41:1. */
html.p-edito :is(h1, h2, h3):not(.ic-footer *) {
  color: var(--ed-text);
  text-wrap: balance;
}

html.p-edito p { text-wrap: pretty; }

/* ---- Fil d'Ariane : peu de mots avant le H1, mais un contexte crawlable -- */
.fil {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 24px 0;
  font-size: 0.85rem;
  color: var(--ed-muted);
}

.fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chaque maillon est lui-même un flex centré : le chevron, les liens et le
   libellé de la page courante partagent la même ligne médiane. */
.fil li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fil li + li::before { content: "›"; line-height: 1; }

.fil a,
.fil [aria-current] {
  display: inline-block;
  padding: 4px 2px; /* cible ≥ 24 px de haut, identique sur les deux */
  color: var(--ed-muted);
  text-decoration: none;
  text-underline-offset: 2px;
}

.fil a:hover { color: var(--ed-accent-text); text-decoration: underline; }

/* ---- Grille de la page article --------------------------------------------
   Le DOM place le sommaire APRÈS le corps (crawlers et lecteurs d'écran
   touchent le texte d'abord). La grille le repositionne :
   · mobile : ordre visuel entête → à retenir → sommaire → corps (order)
   · ≥ 1024px : aside sticky en colonne 2, sans changer le DOM        */
.art-page {
  display: grid;
  grid-template-columns: minmax(0, 68ch); /* mesure plafonnée dès la base (tablettes comprises) */
  gap: 0 clamp(32px, 4vw, 56px);
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px 56px;
  overflow-wrap: break-word;
}

.art-page > * { grid-column: 1; min-width: 0; }
.art-entete   { order: -3; }
.art-retenir  { order: -2; }
.art-sommaire { order: -1; }

@media (min-width: 1024px) {
  .art-page { grid-template-columns: minmax(0, 68ch) minmax(240px, 300px); }

  .art-sommaire {
    grid-column: 2;
    grid-row: 1 / span 40; /* couvre toutes les lignes implicites */
    align-self: start;
    position: sticky;
    top: calc(var(--ic-header-h) + 24px);
    max-height: calc(100vh - var(--ic-header-h) - 48px);
    overflow: auto;
  }
}

/* ---- Entête d'article : kicker, H1, chapô, réponse directe, ligne auteur -- */
.art-kicker {
  display: inline-block;
  margin: 18px 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ed-accent-text);
  text-decoration: none;
}

.art-kicker:hover { text-decoration: underline; text-underline-offset: 3px; }

.art-entete h1 {
  margin: 0 0 18px;
  font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.6rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.01em;
}

.art-chapo {
  margin: 0 0 18px;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ed-text);
  font-weight: 500;
}

/* Ligne auteur compacte (la bio complète est en fin d'article) */
.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ed-border);
  font-size: 0.88rem;
  color: var(--ed-muted);
}

.art-meta a { color: inherit; font-weight: 700; text-underline-offset: 2px; }
.art-meta a:hover { color: var(--ed-accent-text); }

/* Les 200 premiers mots : réponse complète, avant toute illustration */
.art-reponse p { margin: 0 0 14px; }

/* ---- Bloc « À retenir » ---------------------------------------------------- */
.art-retenir {
  margin: 10px 0 26px;
  padding: 22px 24px;
  background: var(--ed-surface);
  border-left: 4px solid var(--ed-accent);
  border-radius: 0 12px 12px 0;
}

.art-retenir h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.art-retenir ul { margin: 0; padding: 0; list-style: none; }

.art-retenir li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 22px;
  font-size: 0.97rem;
}

.art-retenir li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 12px;
  height: 5px;
  border-radius: 3px;
  background: var(--ed-accent);
}

/* ---- Sommaire (details natif : fonctionne sans JS via les ancres) -------- */
.art-sommaire { margin: 0 0 26px; font-size: 0.92rem; }

.art-sommaire details {
  border: 1px solid var(--ed-border);
  border-radius: 12px;
  background: var(--ed-surface);
}

.art-sommaire summary {
  padding: 14px 18px;
  font-weight: 700;
  color: var(--ed-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.art-sommaire summary::-webkit-details-marker { display: none; }

.art-sommaire summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.art-sommaire details[open] summary::after { transform: rotate(-135deg); }

.art-sommaire ol {
  margin: 0;
  padding: 4px 10px 12px;
  list-style: none;
}

.art-sommaire ol a {
  display: block;
  padding: 7px 10px;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  color: var(--ed-body);
  text-decoration: none;
  line-height: 1.4;
}

.art-sommaire ol a:hover { color: var(--ed-accent-text); background: var(--ed-bg); }

/* État posé par JS (scrollspy) — simple surlignage, aucun layout */
.art-sommaire ol a[aria-current="true"] {
  border-left-color: var(--ed-accent);
  color: var(--ed-accent-text);
  font-weight: 700;
}

/* ---- Barre de progression de lecture --------------------------------------
   transform: scaleX() uniquement (ni width ni layout). Version CSS pure via
   animation-timeline quand le navigateur la connaît ; sinon article.js prend
   le relais (rAF + scroll passif). Décorative → aria-hidden dans le HTML.  */
.art-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1200;
  pointer-events: none;
}

.art-progress b {
  display: block;
  height: 100%;
  background: var(--ed-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@supports (animation-timeline: scroll()) {
  .art-progress b {
    animation: art-prog linear both;
    animation-timeline: scroll(root);
  }

  @keyframes art-prog {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-progress { display: none; }
}

/* ---- Amorce du corps : reprises minimales pour que l'arrivée de la feuille
   asynchrone ne déplace rien dans le premier écran desktop (CLS 0) ---- */
.art-corps { overflow-wrap: break-word; hyphens: auto; }

.art-corps h2 {
  margin: 2.4em 0 0.6em;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
  font-weight: 700;
  line-height: 1.25;
}

.art-corps p { margin: 0 0 1em; }

.art-rd {
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--ed-border);
  color: var(--ed-text);
  font-weight: 500;
}

.art-corps figure { margin: 1.8em 0; }

.art-corps figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--ed-surface);
}

.art-corps figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--ed-muted);
}

/* <<< CRITIQUE <<< */

/* ==========================================================================
   [ASYNC] Tout ce qui suit arrive sous la ligne de flottaison : chargé en
   non-bloquant, sans risque de CLS (aucune règle ne déplace le viewport
   initial).
   ========================================================================== */

/* ---- Corps de l'article ---------------------------------------------------- */
.art-corps {
  overflow-wrap: break-word;
  hyphens: auto;
}

.art-corps h2 {
  margin: 2.4em 0 0.6em;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
  font-weight: 700;
  line-height: 1.25;
}

.art-corps h3 {
  margin: 1.8em 0 0.5em;
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.25rem);
  font-weight: 700;
}

.art-corps p { margin: 0 0 1em; }

/* Réponse autoportante placée immédiatement sous chaque H2 */
.art-rd {
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--ed-border);
  color: var(--ed-text);
  font-weight: 500;
}

.art-corps a {
  color: var(--ed-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.art-corps a:hover { color: var(--ed-accent-fonce); }

.art-corps :is(ul, ol) { margin: 0 0 1.2em; padding-left: 22px; }
.art-corps li { margin-bottom: 6px; }
.art-corps li::marker { color: var(--ed-accent); }

/* ---- Figures / images ------------------------------------------------------ */
.art-corps figure { margin: 1.8em 0; }

.art-corps figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--ed-surface); /* zone réservée avant décodage */
}

.art-corps figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--ed-muted);
}

/* ---- Encadré définition ---------------------------------------------------- */
.art-def {
  margin: 1.6em 0;
  padding: 20px 22px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: 12px;
}

.art-def h3 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-accent-text);
}

.art-def p { margin: 0; font-size: 0.97rem; }

/* ---- Bloc chiffre clé (avec source datée) ---------------------------------- */
.art-chiffre {
  margin: 1.6em 0;
  padding: 22px 24px;
  border: 1px solid var(--ed-border);
  border-radius: 12px;
  text-align: left;
}

.art-chiffre strong {
  display: block;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--ed-accent-text);
}

.art-chiffre p { margin: 6px 0 0; color: var(--ed-text); }

.art-chiffre small {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--ed-muted);
}

/* ---- Citation --------------------------------------------------------------- */
.art-corps blockquote {
  margin: 1.8em 0;
  padding: 6px 0 6px 22px;
  border-left: 4px solid var(--ed-accent);
}

.art-corps blockquote p {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--ed-text);
  font-weight: 500;
}

.art-corps blockquote footer { font-size: 0.85rem; color: var(--ed-muted); }

/* ---- Tableau comparatif (défilement horizontal propre sur mobile) ---------- */
.art-table-scroll {
  margin: 1.8em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ed-border);
  border-radius: 12px;
}

.art-table-scroll table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.art-table-scroll caption {
  padding: 14px 16px 4px;
  text-align: left;
  font-weight: 700;
  color: var(--ed-text);
}

.art-table-scroll :is(th, td) {
  padding: 10px 16px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--ed-border);
}

.art-table-scroll thead th {
  border-top: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

.art-table-scroll tbody th { font-weight: 700; color: var(--ed-text); }
.art-table-scroll tbody tr:nth-child(even) { background: var(--ed-surface); }

/* ---- Façade vidéo (l'iframe n'est injectée qu'au clic, voir article.js) ---- */
.art-video { margin: 2.2em 0; }

.art-video-btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9; /* hauteur réservée : zéro CLS à l'injection */
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #141415;
}

.art-video-btn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-video-btn .art-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

.art-video-btn .art-play svg {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 6px 18px rgb(0 0 0 / 45%));
  transition: transform 0.2s ease;
}

.art-video-btn:hover .art-play svg { transform: scale(1.08); }

.art-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
}

.art-video figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--ed-muted);
}

/* ---- Note de mise à jour ---------------------------------------------------- */
.art-maj {
  margin: 2.4em 0 0;
  padding: 14px 18px;
  border: 1px dashed var(--ed-border);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--ed-muted);
}

/* ---- Bio auteur complète ---------------------------------------------------- */
.art-bio {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 2.6em 0 0;
  padding: 24px;
  background: var(--ed-surface);
  border-radius: 14px;
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

/* Le portrait est enveloppé dans <picture> : c'est le <picture> qui est
   l'élément flex, donc c'est lui qui doit porter flex-shrink. */
.art-bio picture { flex-shrink: 0; }

.art-bio img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
}

.art-bio h2 { margin: 0; font-size: 1.05rem; }
.art-bio .art-bio-role { margin: 2px 0 8px; font-size: 0.85rem; color: var(--ed-muted); }
.art-bio p { margin: 0 0 10px; font-size: 0.95rem; }

.art-bio nav {
  display: flex;
  gap: 16px;
  font-size: 0.88rem;
  font-weight: 700;
}

.art-bio nav a { color: var(--ed-accent-text); text-underline-offset: 2px; }

/* ---- Sources ----------------------------------------------------------------- */
.art-sources {
  margin: 2.6em 0 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}

.art-sources h2 { margin: 0 0 12px; font-size: 1.1rem; }
.art-sources ol { margin: 0; padding-left: 22px; font-size: 0.92rem; }
.art-sources li { margin-bottom: 8px; }
.art-sources a { color: var(--ed-accent-text); text-underline-offset: 2px; }
.art-sources span { color: var(--ed-muted); }

/* ---- Articles liés + cartes de la liste (styles partagés) -------------------- */
.art-lies {
  margin: 2.8em 0 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.art-lies h2 { margin: 0 0 18px; font-size: 1.25rem; }

.al-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Carte d'article : même anatomie que .ic-actu de l'accueil — vignette
   (première image de l'article) puis corps. Ratio réservé, donc CLS nul. */
.al-carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ed-border);
  border-radius: 12px;
  background: var(--ed-bg);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* height: auto est INDISPENSABLE. Les attributs width/height d'un <img> sont
   des « hints de présentation » : ils alimentent les propriétés CSS width et
   height, à une spécificité que n'importe quelle règle d'auteur dépasse. Sans
   height: auto ici, height="270" restait la hauteur utilisée, les deux
   dimensions étaient donc définies, et `aspect-ratio` était purement ignoré —
   la vignette faisait 354×270 (ratio 1,31) au lieu du 16/9 annoncé.
   Les attributs restent obligatoires : c'est eux qui réservent la place avant
   le décodage de l'image, donc le CLS à zéro. */
.al-vignette {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--ed-surface);
}

.al-corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
  padding: 22px 24px 24px;
}

.al-carte:hover {
  transform: translateY(-4px);
  border-color: var(--ed-accent);
  box-shadow: var(--ed-ombre);
}

/* Méta de carte : la CATÉGORIE porte le signal (elle classe l'article et
   correspond aux filtres), la DATE reste volontairement discrète — gris de
   texte secondaire, poids normal, ni capitales ni interlettrage. */
.al-carte .al-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.al-carte .al-cat {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-accent-text);
}

.al-carte .al-meta time {
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ed-muted); /* #6e6e77 — 5,05:1 sur blanc */
  font-variant-numeric: tabular-nums;
}

.al-carte :is(h2, h3) {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.al-carte p {
  margin: 0;
  flex-grow: 1;
  font-size: 0.92rem;
  color: var(--ed-body);
}

.al-carte .al-suite { font-size: 0.84rem; font-weight: 700; color: var(--ed-text); }
.al-carte .al-suite::after { content: " \2192"; }

/* ---- Bouton retour en haut (révélé par JS après l'entête) --------------------- */
.art-haut {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1100;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ed-accent);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--ed-ombre);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* `visibility` est transitionnée en 0 s (palier, pas interpolation) : elle
     ne peut pas être animée par le compositeur, et une durée non nulle force
     Chrome à animer sur le thread principal — Lighthouse le signale en
     « animation non composée ». On la garde malgré tout, car opacity seule
     laisserait le bouton focusable au clavier alors qu'il est invisible.
     Le délai au retour n'intervient qu'après le fondu de sortie. */
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.art-haut.est-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

/* ==========================================================================
   Liste des actualités (/actualites/)
   ========================================================================== */
.al-hero {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 64px) 24px 8px;
}

.al-hero h1 {
  margin: 6px 0 12px;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.5rem);
  font-weight: 900;
}

.al-hero > p { max-width: 62ch; margin: 0 0 8px; color: var(--ed-body); }

/* Outils de recherche : invisibles tant que JS n'est pas là (hidden dans le
   HTML) mais l'espace est réservé — la révélation ne décale rien (CLS 0),
   et sans JS aucun contrôle inopérant n'est montré */
.al-outils[hidden] {
  display: flex;
  visibility: hidden;
}

.al-outils {
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 24px 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: flex-end;
}

.al-champ label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

.al-champ input {
  min-width: min(340px, 72vw);
  padding: 11px 14px;
  border: 1.5px solid var(--ed-border);
  border-radius: 8px;
  background: var(--ed-bg);
  color: var(--ed-text);
  font: inherit;
  font-size: 0.95rem;
}

.al-champ input:focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: 2px;
  border-color: var(--ed-accent);
}

.al-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.al-chip {
  padding: 9px 16px; /* cible ≥ 24×24 px */
  border: 1.5px solid var(--ed-border);
  border-radius: 999px;
  background: var(--ed-bg);
  color: var(--ed-body);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.al-chip:hover { border-color: var(--ed-accent); color: var(--ed-accent-text); }

.al-chip[aria-pressed="true"] {
  background: var(--ed-accent);
  border-color: var(--ed-accent);
  color: #fff;
}

.al-compte {
  max-width: 1160px;
  margin: 0 auto;
  padding: 4px 24px 14px;
  font-size: 0.88rem;
  color: var(--ed-muted);
}

.al-liste {
  max-width: 1160px;
  margin: 0 auto;
  padding: 6px 24px 64px;
}

.al-vide {
  padding: 32px 0;
  color: var(--ed-muted);
}

.al-vide a { color: var(--ed-accent-text); }

/* ==========================================================================
   Page 404
   ========================================================================== */
.nf-page {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 9vw, 110px) 24px 80px;
}

.nf-page h1 { margin: 0 0 14px; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 900; }
.nf-page > p { margin: 0 0 22px; }
.nf-page h2 { margin: 32px 0 12px; font-size: 1.05rem; }
.nf-page ul { margin: 0 0 8px; padding-left: 22px; }
.nf-page li { margin-bottom: 8px; }
.nf-page a { color: var(--ed-accent-text); text-underline-offset: 2px; }

/* ==========================================================================
   Impression : contenu seul, URLs des liens en clair
   ========================================================================== */
@media print {
  #idh-desktop,
  #idh-mobile,
  .art-progress,
  .art-sommaire,
  .art-haut,
  .art-video,
  .art-lies,
  .al-outils,
  .ic-footer { display: none !important; }

  html.p-edito body { background: #fff; color: #000; font-size: 11pt; }
  .art-page { display: block; max-width: none; padding: 0; }
  .art-entete h1 { font-size: 20pt; }

  .art-corps a[href^="http"]::after,
  .art-sources a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
  }

  .art-retenir, .art-def, .art-chiffre, .art-table-scroll { break-inside: avoid; }
}
