/* Giffre Info - feuille de style unique, sans dependance ni CDN */

/* ==========================================================================
   0. Polices, servies depuis le site (aucun appel a Google Fonts)
   Fichiers variables pour Instrument Sans et Bricolage Grotesque : un seul
   fichier par sous ensemble couvre toutes les graisses. Seuls latin et
   latin-ext sont embarques ; le francais a besoin de latin-ext pour le oe.
   ========================================================================== */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. Jetons de style
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Encres */
  --encre: #141414;
  --encre-2: #4c4a45;
  --encre-3: #6d6a64;
  --encre-4: #8b8880;

  /* Rouge de marque : liens, rubriques, ce qui accroche l'oeil */
  --brand: #c9342a;
  --brand-fonce: #8e1f17;
  --brand-clair: #fbeae8;
  --brand-ligne: #f0cbc7;
  --brand-vif: #f0705f;   /* la meme famille, lisible sur fond sombre */

  /* Accent structurel : l'encre presque noire des blocs et des pastilles */
  --accent: #141414;
  --accent-fonce: #000000;
  --accent-clair: #f4f3f0;

  /* Papier */
  --papier: #ffffff;
  --papier-2: #f7f6f3;
  --papier-3: #f4f3f0;
  --blanc: #ffffff;
  --bord: #e6e5e2;
  --bord-fort: #c6c4be;

  --ombre: none;
  --ombre-forte: 0 10px 30px rgba(20, 20, 20, .10), 0 2px 6px rgba(20, 20, 20, .06);

  --r: 6px;
  --r-l: 8px;

  --titre: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --largeur: 1280px;
  --mesure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #f2f0ec;
    --encre-2: #c9c6c0;
    --encre-3: #a5a29b;
    --encre-4: #8b8880;

    --brand: #f0705f;
    --brand-fonce: #ff9384;
    --brand-clair: #33201d;
    --brand-ligne: #4a2b26;
    --brand-vif: #f0705f;

    --accent: #f2f0ec;
    --accent-fonce: #ffffff;
    --accent-clair: #22221f;

    --papier: #141414;
    --papier-2: #1b1b19;
    --papier-3: #201f1d;
    --blanc: #1a1a18;
    --bord: #2d2c29;
    --bord-fort: #43413c;

    --ombre: none;
    --ombre-forte: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-fonce); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 {
  font-family: var(--titre);
  line-height: 1.14;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(1.95rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 2.5vw, 1.8rem); margin-top: 1.7em; }
h3 { font-size: 1.18rem; margin-top: 1.4em; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }
li { margin-bottom: .35em; }
strong { font-weight: 700; }
hr { border: none; border-top: 1px solid var(--bord); margin: 2.4em 0; }
::selection { background: var(--brand-clair); color: var(--brand-fonce); }

.ico { flex: none; vertical-align: -.15em; }

.wrap { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.wrap-etroit { max-width: 800px; margin: 0 auto; padding: 0 24px; }

.saut { position: absolute; left: -9999px; }
.saut:focus { left: 8px; top: 8px; z-index: 999; background: var(--blanc); padding: 10px 16px; border-radius: var(--r); box-shadow: var(--ombre-forte); }

/* Surtitre en petites capitales : la signature typographique du site */
.kicker, .titre-sous, .pied h4 {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--encre-3);
}

/* Heures, compteurs, mentions techniques */
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: 0; color: var(--encre-4); }

/* ==========================================================================
   2. En-tete
   ========================================================================== */

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--bord);
  position: sticky;
  top: 0;
  z-index: 60;
}
.entete .wrap { display: flex; align-items: center; gap: 26px; min-height: 76px; }

.logo { display: flex; align-items: center; flex: none; }
.logo:hover { text-decoration: none; }
.logo img { height: 40px; width: auto; }
@media (prefers-color-scheme: dark) {
  /* le logo porte son propre fond papier : on le pose sur un carton blanc */
  .logo img { background: #fff; padding: 5px 8px; border-radius: var(--r); }
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav > .item { position: relative; }
.nav > .item > a {
  display: block; padding: 9px 12px; border-radius: var(--r);
  color: var(--encre); font-weight: 600; font-size: .94rem; white-space: nowrap;
}
.nav > .item > a:hover { color: var(--brand); background: var(--papier-2); text-decoration: none; }
.nav > .item.actif > a { color: var(--brand); }

.sous {
  position: absolute; top: 100%; left: 0; min-width: 262px; margin-top: 10px;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r-l);
  box-shadow: var(--ombre-forte); padding: 10px; display: none; z-index: 70;
}
/* Pont invisible au dessus du panneau. Sans lui, la souris traverse les 10 px de
   vide qui separent l'onglet du panneau, le survol se perd et le menu se referme
   avant d'etre atteint. Le pont appartient a .sous, donc l'onglet reste survole. */
.sous::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav > .item:hover .sous, .nav > .item:focus-within .sous { display: block; }
.sous a { display: block; padding: 7px 12px; border-radius: var(--r); color: var(--encre-2); font-size: .92rem; }
.sous a:hover { background: var(--papier-2); color: var(--brand); text-decoration: none; }
.sous .sep { height: 1px; background: var(--bord); margin: 8px 8px; }
.sous .titre-sous { padding: 9px 12px 5px; }

.btn-menu { display: none; margin-left: auto; background: none; border: 1px solid var(--bord-fort); border-radius: var(--r); padding: 8px 10px; cursor: pointer; color: var(--encre); }

.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.btn-entete { padding: 10px 18px; font-size: .84rem; }

.recherche-entete {
  display: flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 5px 6px 5px 16px; background: var(--papier-3);
  border: 1px solid transparent;
}
.recherche-entete:focus-within { border-color: var(--encre); background: var(--blanc); }
.recherche-entete input { border: none; background: none; font: inherit; font-size: .88rem; width: 150px; outline: none; color: var(--encre); }
.recherche-entete input::placeholder { color: var(--encre-3); }
.recherche-entete button { border: none; background: none; color: var(--encre-3); border-radius: 999px; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; }
.recherche-entete button:hover { color: var(--brand); }

/* Bandeau noir des alertes, sous l'entete */
.bandeau {
  background: var(--accent);
  color: #f2f0ec;
  font-size: .81rem;
}
@media (prefers-color-scheme: dark) {
  .bandeau { background: #000; color: #f2f0ec; border-bottom: 1px solid var(--bord); }
}
.bandeau .wrap { display: flex; align-items: center; gap: 0; padding: 0 24px; }
.bandeau .etiquette-live {
  background: var(--brand); color: #fff; padding: 10px 18px; font-weight: 700;
  letter-spacing: .06em; font-size: .72rem; text-transform: uppercase; flex: none;
}
.bandeau .defile {
  display: flex; gap: 24px; align-items: center; padding: 0 20px;
  overflow: hidden; white-space: nowrap; min-width: 0;
}
.bandeau a { color: #f2f0ec; text-decoration: none; border-bottom: 1px solid rgba(242, 240, 236, .3); }
.bandeau a:hover { color: #fff; border-bottom-color: #fff; }
.bandeau .sep-point { color: var(--encre-4); }
.bandeau .date-jour::first-letter { text-transform: uppercase; }

/* ==========================================================================
   3. Boutons, etiquettes, fil d'ariane
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--papier); padding: 11px 20px; border-radius: 999px;
  font-weight: 700; font-size: .88rem; border: none; cursor: pointer; font-family: inherit;
  transition: background .14s ease;
}
.btn:hover { background: var(--brand); color: #fff; text-decoration: none; }
.btn-ligne { background: none; color: var(--encre); border: 1px solid var(--bord-fort); }
.btn-ligne:hover { background: none; color: var(--brand); border-color: var(--brand); }
.btn-accent { background: var(--brand); color: #fff; }
.btn-accent:hover { background: var(--brand-fonce); color: #fff; }

/* Etiquette de rubrique : capitales rouges, sans pastille, comme la maquette */
.etiq {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--brand); background: none; padding: 0;
}
a.etiq:hover { text-decoration: none; color: var(--brand-fonce); }
.etiq-accent { color: var(--brand); }
.etiq-neutre { color: var(--encre-3); }
/* Etiquette pleine, quand il faut vraiment une pastille (filtres, types du fil) */
.etiq-pastille {
  background: var(--papier-3); color: var(--encre-2); padding: 4px 10px; border-radius: 999px;
  letter-spacing: .06em;
}

.ariane { font-size: .81rem; color: var(--encre-3); padding: 16px 0 0; }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ariane li::after { content: "›"; margin-left: 6px; color: var(--bord-fort); }
.ariane li:last-child::after { content: ""; }
.ariane a { color: var(--encre-3); }

/* ==========================================================================
   4. Sections et grilles

   ========================================================================== */

.section { padding: 42px 0; }
.section-sombre { background: var(--papier-2); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }

/* Titre de section : capitales espacees et filet, comme la maquette. La grille
   garantit que l'intro passe sous le titre au lieu de se tasser a droite. */
.section-titre {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 18px;
  margin-bottom: 22px; padding-bottom: 10px; border-bottom: 1px solid var(--bord);
}
.section-titre h2 {
  grid-column: 1; margin: 0; font-size: .95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; line-height: 1.3;
}
.section-titre .lien-plus { grid-column: 2; justify-self: end; font-size: .88rem; font-weight: 600; white-space: nowrap; }
.section-titre > span { grid-column: 2; justify-self: end; font-size: .84rem; color: var(--encre-3); }
.section-titre .intro { grid-column: 1 / -1; margin: 10px 0 0; color: var(--encre-2); font-size: .94rem; max-width: 78ch; }

.grille { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.carte {
  background: var(--papier-2); border: 1px solid transparent; border-radius: var(--r);
  padding: 20px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
.carte h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.015em; }
.carte h3 a { color: var(--encre); }
.carte p { margin: 0; color: var(--encre-2); font-size: .94rem; line-height: 1.55; }
.carte .meta { font-size: .82rem; color: var(--encre-4); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.carte-lien { text-decoration: none; color: inherit; transition: border-color .14s ease, background .14s ease; }
.carte-lien:hover { text-decoration: none; border-color: var(--bord-fort); }
.carte-lien:hover h3 { color: var(--brand); }

/* Carte de une : bandeau image en tete, titre large */
.carte-une { padding: 0; }
/* 16/9 et non 16/10 : c'est le format des visuels a la une et des cartes fabriques
   par _scripts/visuel_une.py. Toute autre proportion rognerait le logo et le
   cartouche du titre, qui sont poses dans les angles. */
.carte-une .visuel { display: block; aspect-ratio: 16 / 9; background: var(--bord); overflow: hidden; }
.carte-une .visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-une .corps { padding: 20px; display: flex; flex-direction: column; gap: 11px; }
.carte-une h3 { font-size: 1.5rem; line-height: 1.12; }

/* Liste d'articles */
.liste-actus { display: flex; flex-direction: column; }
.item-actu { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--bord); align-items: flex-start; }
.item-actu:first-child { padding-top: 0; }
.item-actu:last-child { border-bottom: none; }
.item-actu .corps { flex: 1; min-width: 0; }
.item-actu h3 { margin: 5px 0 6px; font-size: 1.18rem; line-height: 1.25; letter-spacing: -.01em; }
.item-actu h3 a { color: var(--encre); }
.item-actu h3 a:hover { color: var(--brand); }
.item-actu p { margin: 0; color: var(--encre-2); font-size: .94rem; }
.item-actu .date { font-family: var(--mono); font-size: .78rem; color: var(--encre-4); }

/* Communes */
.grille-communes { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 12px; }
.commune-vignette {
  background: var(--papier-2); border: 1px solid transparent; border-radius: var(--r);
  padding: 15px 17px; display: block; color: inherit;
  transition: border-color .14s ease, background .14s ease;
}
.commune-vignette:hover { text-decoration: none; border-color: var(--bord-fort); }
.commune-vignette b { font-family: var(--titre); font-size: 1.14rem; display: block; letter-spacing: -.015em; }
.commune-vignette:hover b { color: var(--brand); }
.commune-vignette span { font-size: .82rem; color: var(--encre-3); }

/* Bloc sombre a pastilles */
.bloc-sombre {
  background: var(--accent); color: #f2f0ec; border-radius: var(--r-l);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 16px;
}
.bloc-sombre .kicker { color: var(--brand-vif); }
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille {
  border: 1px solid #4a4741; border-radius: 999px; padding: 9px 16px;
  font-size: .88rem; color: #f2f0ec;
}
.pastille:hover { text-decoration: none; background: var(--brand); border-color: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) {
  .bloc-sombre { background: #000; border: 1px solid var(--bord); }
}

/* Illustration avec son credit : les licences Creative Commons l'imposent */
.illustration { margin: 0 0 30px; }
.illustration img {
  width: 100%; height: auto; max-height: 420px; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: var(--r-l); background: var(--papier-2);
}
@media (max-width: 760px) { .illustration img { aspect-ratio: 4 / 3; max-height: 300px; } }
.illustration figcaption { margin-top: 8px; font-size: .8rem; color: var(--encre-4); }
.illustration figcaption a { color: var(--encre-3); }
.illustration figcaption a:hover { color: var(--brand); }

/* Colonne de titres : deux rubriques cote a cote sous le fil */
.liste-titres { display: flex; flex-direction: column; }
.liste-titres a {
  font-family: var(--titre); font-size: 1.06rem; font-weight: 600; line-height: 1.3;
  color: var(--encre); padding: 12px 0; border-bottom: 1px solid var(--bord);
}
.liste-titres a:last-child { border-bottom: none; }
.liste-titres a:hover { color: var(--brand); text-decoration: none; }

/* Emplacement publicitaire : rien ne s'affiche tant que PUB_ACCUEIL n'est pas defini */
.emplacement-pub { border-radius: var(--r-l); overflow: hidden; }
.emplacement-pub :is(img, iframe, ins) { display: block; margin: 0 auto; max-width: 100%; }

/* Liens rapides */
.liens-rapides { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
.lien-rapide {
  display: flex; align-items: center; gap: 11px; background: var(--papier-2);
  border: 1px solid transparent; border-radius: var(--r); padding: 13px 15px;
  font-size: .92rem; font-weight: 600; color: var(--encre); line-height: 1.3;
}
.lien-rapide:hover { text-decoration: none; border-color: var(--bord-fort); color: var(--brand); }
.lien-rapide .ico { color: var(--brand); }

/* ==========================================================================
   5. Contenu editorial
   ========================================================================== */

.page { padding: 26px 0 60px; }

.contenu { font-size: 1.06rem; line-height: 1.68; }
.contenu > * { max-width: var(--mesure); }
.contenu > .tableau-scroll, .contenu > figure, .contenu > .encart, .contenu > .saisons, .contenu > table { max-width: none; }
.contenu h2 { border-bottom: 1px solid var(--bord); padding-bottom: .28em; }
.contenu > p:first-of-type { font-size: 1.1rem; }
.contenu a { border-bottom: 1px solid var(--brand-ligne); }
.contenu a:hover { text-decoration: none; border-bottom-color: var(--brand); background: var(--brand-clair); }
.contenu img { border-radius: var(--r); margin: 1.4em 0; }
.contenu blockquote { margin: 1.5em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--accent); color: var(--encre-2); font-family: var(--titre); font-size: 1.14rem; font-style: italic; }
.contenu table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .93rem; font-variant-numeric: tabular-nums; }
.contenu th, .contenu td { border-bottom: 1px solid var(--bord); padding: 9px 12px; text-align: left; vertical-align: top; }
.contenu thead th { background: var(--papier-2); border-bottom: 2px solid var(--bord-fort); font-family: var(--sans); font-size: .77rem; text-transform: uppercase; letter-spacing: .07em; color: var(--encre-2); }
.contenu tbody tr:hover { background: var(--papier-2); }
.contenu tbody td:first-child { font-weight: 600; }
.tableau-scroll { overflow-x: auto; margin: 1.5em 0; }
.tableau-scroll table { margin: 0; }

.chapo { font-size: 1.2rem; line-height: 1.5; color: var(--encre-2); margin-bottom: 1.3em; max-width: 62ch; font-family: var(--titre); }

.article-entete { margin-bottom: 24px; }
.article-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: .84rem; color: var(--encre-3); margin-bottom: 10px; }

/* Encarts editoriaux : les modules qui portent la valeur ajoutee */
.encart {
  background: var(--blanc); border: 1px solid var(--bord); border-left: 3px solid var(--brand);
  border-radius: var(--r); padding: 17px 21px; margin: 1.7em 0;
}
.encart h3 { margin-top: 0; margin-bottom: .5em; font-size: 1.06rem; }
.encart p:last-child, .encart ul:last-child, .encart ol:last-child { margin-bottom: 0; }
.encart p, .encart li { font-size: .97rem; }

.encart-alerte, .encart-attention { border-left-color: var(--accent); background: var(--accent-clair); }
.encart-conseil { border-left-color: var(--accent); }
.encart-repere { background: var(--brand-clair); border-color: var(--brand-ligne); border-left-color: var(--brand); }

/* Le repere : les chiffres cles en cle / valeur */
.repere-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 26px; }
.repere-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dotted var(--bord-fort); margin: 0; font-size: .93rem; }
.repere-liste b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ligne du temps saisonniere */
.saisons { list-style: none; margin: 1.5em 0; padding: 0; border-top: 1px solid var(--bord); }
.saisons li { display: grid; grid-template-columns: 158px 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--bord); margin: 0; }
.saisons .quand { font-family: var(--sans); font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); padding-top: 4px; }
.saisons .quoi { color: var(--encre-2); font-size: .97rem; }
.saisons .quoi strong { color: var(--encre); }

.maj { font-size: .82rem; color: var(--encre-3); margin-top: 2.2em; padding-top: 1em; border-top: 1px solid var(--bord); }

.sources { font-size: .85rem; color: var(--encre-3); border-top: 1px solid var(--bord); margin-top: 2.4em; padding-top: 1.1em; }
.sources strong { display: block; font-family: var(--sans); font-size: .69rem; text-transform: uppercase; letter-spacing: .13em; color: var(--encre-3); margin-bottom: .6em; font-weight: 700; }
.sources ul { margin: 0; padding-left: 1.1em; columns: 2; column-gap: 34px; }
.sources li { margin-bottom: .3em; break-inside: avoid; }
.sources a { color: var(--encre-2); }

/* ==========================================================================
   6. Colonnes et blocs lateraux
   ========================================================================== */

.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; }
.bloc-aside { background: var(--papier-3); border: 1px solid transparent; border-radius: var(--r-l); padding: 20px; }
.bloc-aside h3 {
  margin: 0 0 14px; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--encre-3); display: flex; align-items: center; gap: 8px;
}
.bloc-aside h3 .ico { color: var(--encre-3); }
.bloc-aside ul { list-style: none; margin: 0; padding: 0; }
.bloc-aside li { margin-bottom: 9px; font-size: .93rem; line-height: 1.4; }
.bloc-aside li:last-child { margin-bottom: 0; }
.bloc-aside p { font-size: .93rem; }
.bloc-aside .btn { width: 100%; justify-content: center; margin-top: 4px; }
.bloc-aside-nu { background: none; border: none; padding: 0; }
/* Colonne laterale etroite : la prevision se limite a quatre jours */
.aside .meteo-jour:nth-child(n+5) { display: none; }

/* Bloc rouge d'appel */
.bloc-rouge { background: var(--brand); color: #fff; border-radius: var(--r-l); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.bloc-rouge h3 { font-family: var(--titre); font-size: 1.35rem; font-weight: 700; line-height: 1.15; margin: 0; color: #fff; text-transform: none; letter-spacing: -.015em; border: none; padding: 0; }
.bloc-rouge p { margin: 0; font-size: .93rem; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.bloc-rouge a { color: #fff; }
.bloc-rouge .btn { background: var(--accent); color: #fff; }
.bloc-rouge .btn:hover { background: #000; color: #fff; }

/* Meteo en tete de colonne */
.meteo-resume { display: flex; justify-content: space-between; align-items: baseline; }
.meteo-resume b { font-family: var(--titre); font-size: 2.7rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.meteo-resume span { font-size: .88rem; color: var(--encre-2); text-align: right; }

.fiche-id { list-style: none; margin: 0; padding: 0; }
.fiche-id li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bord); font-size: .91rem; }
.fiche-id li:last-child { border-bottom: none; }
.fiche-id .k { color: var(--encre-3); }
.fiche-id .v { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* Carte de situation, fiche evenement (partials/carte-evenement.php) */
.carte-situation { margin: 22px 0; }
.carte-situation h3 { margin: 0 0 10px; font-size: 1.15rem; letter-spacing: -.015em; }
.carte-situation-cadre { position: relative; height: 300px; overflow: hidden; border: 1px solid var(--bord); border-radius: var(--r); background: #f2efe9; }
.carte-situation-tuiles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.carte-situation-tuiles img { position: absolute; width: 256px; height: 256px; max-width: none; display: block; }
.carte-situation-repere {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--brand), 0 2px 6px rgba(0,0,0,.35);
}
.carte-situation-credit { position: absolute; right: 0; bottom: 0; padding: 2px 7px; font-size: .7rem; color: #333; background: rgba(255,255,255,.82); }
.carte-situation-legende { margin: 8px 0 0; font-size: .84rem; color: var(--encre-3); }
@media (max-width: 760px) { .carte-situation-cadre { height: 240px; } }

/* Temps de trajet, fiche evenement (partials/trajet.php) */
.trajet { margin: 22px 0; padding: 20px; border: 1px solid var(--bord); border-left: 3px solid var(--brand); border-radius: var(--r); background: var(--papier); }
.trajet h3 { margin: 0 0 6px; font-size: 1.15rem; letter-spacing: -.015em; }
.trajet-intro { margin: 0 0 12px; font-size: .92rem; color: var(--encre-2); }
.trajet-label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 6px; color: var(--encre-3); }
.trajet-ligne { display: flex; gap: 8px; }
.trajet-champ {
  flex: 1; min-width: 0; font: inherit; font-size: .95rem; padding: 10px 12px; border: 1px solid var(--bord-fort);
  border-radius: var(--r); background: var(--blanc); color: var(--encre);
}
.trajet-champ:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.trajet-ligne .btn { white-space: nowrap; }
.trajet-raccourcis { margin: 10px 0 0; font-size: .84rem; color: var(--encre-3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.trajet-raccourci {
  font: inherit; font-size: .82rem; padding: 4px 11px; border: 1px solid var(--bord-fort); border-radius: 999px;
  background: none; color: var(--encre); cursor: pointer;
}
.trajet-raccourci:hover { border-color: var(--brand); color: var(--brand); }
.trajet-etat { margin: 12px 0 0; font-size: 1rem; min-height: 1.4em; }
.trajet-etat strong { font-family: var(--titre); font-size: 1.15rem; }
.trajet-mention { margin: 10px 0 0; font-size: .78rem; color: var(--encre-3); }

/* ==========================================================================
   7. Annuaire
   ========================================================================== */

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filtre { padding: 7px 14px; border: 1px solid var(--bord-fort); border-radius: 999px; font-size: .87rem; background: var(--blanc); color: var(--encre-2); }
.filtre:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.filtre.actif { background: var(--brand); border-color: var(--brand); color: #fff; }

.liste-entreprises { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; }
.ent { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ent b { font-size: 1rem; line-height: 1.3; }
.ent b a { color: var(--encre); }
.ent .adr { font-size: .85rem; color: var(--encre-2); }
.ent .cat { font-size: .73rem; color: var(--encre-3); text-transform: uppercase; letter-spacing: .06em; }

.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.pagination a, .pagination span { padding: 8px 13px; border: 1px solid var(--bord-fort); border-radius: 7px; font-size: .89rem; background: var(--blanc); color: var(--encre-2); }
.pagination a:hover { text-decoration: none; border-color: var(--brand); color: var(--brand); }
.pagination .actuelle { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }

@media (prefers-color-scheme: dark) {
  .filtre.actif, .pagination .actuelle { color: #0c1512; }
}

/* ==========================================================================
   8. Evenements
   ========================================================================== */

.evt {
  display: flex; gap: 14px; align-items: center;
  background: var(--papier); border: 1px solid var(--bord); border-radius: var(--r);
  padding: 12px; color: inherit; transition: border-color .14s ease;
}
.evt:hover { text-decoration: none; border-color: var(--encre); }
.evt-date {
  flex: none; width: 46px; height: 46px; border-radius: 4px; background: var(--accent); color: var(--papier);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.evt-date b { font-family: var(--titre); font-size: 1.18rem; font-weight: 700; }
.evt-date span { font-size: .62rem; text-transform: uppercase; margin-top: 2px; }
.evt-corps { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.evt-titre { font-weight: 700; font-size: .96rem; line-height: 1.3; color: var(--encre); }
.evt:hover .evt-titre { color: var(--brand); }
.evt-meta { font-size: .84rem; color: var(--encre-4); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.evt-lieu { display: inline-flex; align-items: center; gap: 4px; }
.evt-lieu .ico { color: var(--encre-4); }

/* Cinébus : la prochaine séance, puis une carte par séance */
.cine-prochaine { gap: 8px; }
.cine-prochaine h2 { margin: 0; color: #fff; font-size: 1.7rem; line-height: 1.15; }
.cine-prochaine .cine-quand { margin: 0; font-family: var(--titre); font-size: 1.15rem; color: #f2f0ec; }
.cine-prochaine .cine-detail { margin: 0; font-size: .93rem; color: #c9c6bf; }
.cine-prochaine .lien-plus { color: var(--brand-vif); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.cine-note { font-size: .9rem; color: var(--encre-3); margin-top: -.4em; }
.cine-mois {
  font-family: var(--sans); font-size: .74rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--encre-3); margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--bord);
}
.cine-seance {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px;
  padding: 18px 0; border-bottom: 1px solid var(--bord); scroll-margin-top: 100px;
}
.cine-seance:target { background: var(--brand-clair); }
.cine-date {
  background: var(--accent); color: var(--papier); border-radius: 4px; padding: 8px 4px 0;
  display: flex; flex-direction: column; align-items: center; line-height: 1; align-self: start; overflow: hidden;
}
.cine-date span { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; }
.cine-date b { font-family: var(--titre); font-size: 1.45rem; font-weight: 700; margin: 3px 0; }
.cine-heure {
  display: block; width: 100%; text-align: center; margin-top: 7px; padding: 5px 0;
  background: var(--brand); color: #fff; font-family: var(--mono); font-size: .78rem; font-weight: 600;
}
.cine-corps { min-width: 0; }
.cine-etiq { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; }
.cine-titre { font-family: var(--titre); font-size: 1.28rem; line-height: 1.2; margin: 0 0 6px; }
.cine-generique { margin: 0 0 3px; font-size: .88rem; color: var(--encre-3); }
.cine-texte { margin: 10px 0 0; font-size: .97rem; line-height: 1.55; color: var(--encre-2); max-width: 66ch; }
.cine-mentions { margin: 8px 0 0; font-size: .84rem; color: var(--encre-3); font-style: italic; }
.cine-lien { margin: 8px 0 0; font-size: .9rem; font-weight: 600; }
.cine-ailleurs { margin-top: 12px; padding: 10px 14px; background: var(--papier-2); border-left: 3px solid var(--brand); border-radius: 0 var(--r) var(--r) 0; }
.cine-ailleurs b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--encre-3); margin-bottom: 4px; }
.cine-ailleurs ul { list-style: none; margin: 0; padding: 0; }
.cine-ailleurs li { font-size: .9rem; margin: 3px 0; }
.cine-route { color: var(--encre-4); font-size: .84rem; white-space: nowrap; }
.cine-source { margin: 10px 0 0; font-size: .84rem; }
.cine-source a { color: var(--encre-3); }
.cine-liste { padding-left: 1.1em; }
.cine-liste li { margin-bottom: 6px; font-size: .95rem; }
@media (max-width: 760px) {
  .cine-seance { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; }
  .cine-titre { font-size: 1.14rem; }
  .cine-prochaine h2 { font-size: 1.4rem; }
}

/* ==========================================================================
   9. Fil d'activite
   ========================================================================== */

.fil { list-style: none; margin: 0; padding: 0; }
.fil-item {
  display: flex; gap: 20px; padding: 16px; margin: 0; align-items: center;
  border-radius: var(--r); border-bottom: 1px solid var(--bord);
}
.fil-item:last-child { border-bottom: none; }
.fil-item:hover { background: var(--papier-2); }
.fil-heure { flex: none; width: 74px; font-family: var(--mono); font-size: .78rem; color: var(--encre-4); }
.fil-puce { display: none; }
.fil-corps { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.fil-haut { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fil-date { display: none; }
.fil-titre { margin: 0; font-family: var(--titre); font-weight: 600; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em; }
.fil-titre a { color: var(--encre); }
.fil-titre a:hover { color: var(--brand); }
.fil-resume { margin: 0; font-size: .92rem; color: var(--encre-2); }
.fil-source { margin: 0; font-size: .8rem; color: var(--encre-4); }
.fil-alerte .fil-heure { color: var(--brand); font-weight: 700; }

.fil-compact .fil-item { padding: 12px 0; gap: 12px; border-radius: 0; }
.fil-compact .fil-item:hover { background: none; }
.fil-compact .fil-heure { width: 58px; font-size: .74rem; }
.fil-compact .fil-titre { font-size: .96rem; }
.fil-compact .fil-resume, .fil-compact .fil-source { display: none; }

/* ==========================================================================
   10. Riviere et meteo
   ========================================================================== */

.riviere { margin-top: 36px; }
.riviere-carte { gap: 6px; }
.riviere-valeur { font-family: var(--titre); font-size: 2.15rem; line-height: 1; margin: 4px 0 2px; color: var(--brand); letter-spacing: -.02em; }
.riviere-valeur span { font-size: 1rem; color: var(--encre-3); font-family: var(--sans); letter-spacing: 0; }
.riviere-courbe { width: 100%; height: 42px; color: var(--brand); margin: 4px 0 2px; display: block; }

.meteo-jours { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; }
.meteo-jour { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r); padding: 12px 10px; text-align: center; }
.meteo-jour .j { font-size: .76rem; color: var(--encre-3); text-transform: capitalize; }
.meteo-jour .t { font-family: var(--titre); font-size: 1.28rem; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.meteo-jour .tmin { color: var(--encre-3); font-size: .85rem; }
.meteo-jour .desc { font-size: .75rem; color: var(--encre-2); margin-top: 6px; min-height: 2.2em; line-height: 1.3; }
.meteo-maj { font-size: .79rem; color: var(--encre-3); margin-top: 12px; }

/* ==========================================================================
   11. Formulaires
   ========================================================================== */

.form { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-weight: 600; font-size: .89rem; }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: .96rem; padding: 11px 13px; border: 1px solid var(--bord-fort);
  border-radius: var(--r); background: var(--blanc); color: var(--encre); width: 100%;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.champ textarea { min-height: 150px; resize: vertical; }
.champ .aide { font-size: .79rem; color: var(--encre-3); }
.pot { position: absolute; left: -9999px; }
.message { padding: 14px 18px; border-radius: var(--r); margin-bottom: 20px; }
.message-ok { background: var(--brand-clair); border: 1px solid var(--brand-ligne); color: var(--brand-fonce); }
.message-ko { background: var(--accent-clair); border: 1px solid var(--accent); color: var(--accent-fonce); }

/* ==========================================================================
   12. Pied de page
   ========================================================================== */

.pied {
  background: var(--papier-3); color: var(--encre-2); border-top: 1px solid var(--bord);
  margin-top: 64px; padding: 40px 0 24px; font-size: .9rem;
}
.pied h4 { color: var(--encre-4); margin: 0 0 12px; }
.pied a { color: var(--encre); }
.pied a:hover { color: var(--brand); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 8px; }
.pied p { font-size: .9rem; line-height: 1.6; color: var(--encre-3); }
.pied-lettre { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.pied-lettre label { font-weight: 600; font-size: .86rem; }
.pied-lettre-ligne { display: flex; gap: 8px; }
.pied-lettre-ligne input {
  flex: 1; min-width: 0; font: inherit; font-size: .9rem; padding: 9px 11px; border: 1px solid var(--bord-fort);
  border-radius: var(--r); background: var(--blanc); color: var(--encre);
}
.pied-lettre-ligne input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.pied-lettre-ligne .btn { padding: 9px 14px; font-size: .84rem; white-space: nowrap; }
.pied-grille { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.pied-bas {
  border-top: 1px solid var(--bord); margin-top: 32px; padding-top: 18px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: .82rem; color: var(--encre-4);
}
.pied-logo { display: inline-flex; align-self: flex-start; background: #fff; padding: 8px 12px; border-radius: var(--r); margin-bottom: 12px; }
.pied-logo img { height: 32px; width: auto; }
.pied-social { display: flex; gap: 14px; font-weight: 600; margin-top: 4px; }

/* ==========================================================================
   13. Responsive et impression
   ========================================================================== */

@media (max-width: 1240px) {
  .nav > .item > a { padding: 9px 9px; font-size: .89rem; }
  .recherche-entete input { width: 96px; }
}

@media (max-width: 1080px) {
  .recherche-entete { display: none; }
}

@media (max-width: 980px) {
  .colonnes { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .aside { position: static; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .pied-grille { grid-template-columns: repeat(2, 1fr); }
  .sources ul { columns: 1; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .btn-menu { display: block; }
  .entete .wrap { min-height: 64px; gap: 14px; }
  .logo img { height: 30px; }
  .entete-actions { display: none; }
  .bandeau .etiquette-live { padding: 9px 12px; font-size: .66rem; }
  .bandeau .wrap { padding: 0; }
  .bandeau .defile { padding: 0 14px; font-size: .78rem; }
  .fil-item { gap: 12px; padding: 14px 0; }
  .fil-heure { width: 54px; }
  .bloc-sombre { padding: 20px; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--blanc); border-bottom: 1px solid var(--bord);
    flex-direction: column; align-items: stretch; padding: 10px; gap: 2px;
    box-shadow: var(--ombre-forte); max-height: 78vh; overflow-y: auto;
  }
  .nav.ouvert { display: flex; }
  .nav > .item > a { padding: 12px; font-size: .96rem; }
  .nav > .item.actif > a { box-shadow: none; background: var(--brand-clair); color: var(--brand-fonce); }
  .sous { position: static; display: none; box-shadow: none; border: none; border-left: 2px solid var(--bord); border-radius: 0; margin: 0 0 6px 12px; padding: 0 0 0 6px; }
  .nav > .item.deplie .sous { display: block; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .item-actu { flex-direction: column; gap: 8px; }
  .section-titre { grid-template-columns: 1fr; row-gap: 6px; }
  .section-titre .lien-plus, .section-titre > span { grid-column: 1; justify-self: start; }
  .pied-grille { grid-template-columns: 1fr; gap: 24px; }
  .saisons li { grid-template-columns: 1fr; gap: 3px; }
  .contenu { font-size: 1.02rem; }
  .repere-liste { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .entete, .bandeau, .pied, .aside, .btn, .filtres, .nav, .saut { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .colonnes { display: block; }
  a { color: #000; }
  .contenu a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}

/* ==========================================================================
   « Aujourd'hui dans la vallée » : tête de l'accueil (partials/aujourdhui.php)
   ========================================================================== */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aujourdhui { padding: 22px 0 6px; }
.ajd-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; border-bottom: 1px solid var(--bord); padding-bottom: 8px; margin-bottom: 14px; }
.ajd-tete h2 { margin: 0; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; }
.ajd-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ajd-case { display: flex; flex-direction: column; gap: 4px; background: var(--papier-2); border: 1px solid transparent; border-radius: var(--r); padding: 14px 16px; color: var(--encre); }
.ajd-case:hover { text-decoration: none; border-color: var(--bord-fort); }
.ajd-k { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .74rem; color: var(--brand); text-transform: uppercase; }
.ajd-v { font-family: var(--titre); font-size: 1.12rem; line-height: 1.25; }
.ajd-case:hover .ajd-v { color: var(--brand); }
.ajd-d { font-size: .86rem; color: var(--encre-3); line-height: 1.4; }
.ajd-recherche { display: flex; gap: 8px; margin-top: 16px; }
.ajd-recherche input { flex: 1 1 auto; min-width: 0; }
.ajd-recherche select { flex: 0 0 210px; }
.ajd-recherche :is(input, select) { font: inherit; padding: 11px 13px; border: 1px solid var(--bord-fort); border-radius: var(--r); background: var(--papier); color: var(--encre); }
.ajd-raccourcis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: .9rem; }
@media (max-width: 980px) { .ajd-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .ajd-grille { grid-template-columns: minmax(0, 1fr); }
  .ajd-recherche { flex-wrap: wrap; }
  .ajd-recherche select { flex: 1 1 100%; }
  .ajd-recherche .btn { flex: 1 1 100%; justify-content: center; }
}