/* ==========================================================================
   BB Outdoor Sports — le média du sport en Ariège
   Feuille de style unique, partagée par toutes les pages.
   Sommaire :
     1. Tokens (couleurs, typo, espacements) + thème sombre
     2. Base & utilitaires
     3. Composants d'interface (boutons, chips, champs)
     4. Chrome du site (barre du haut, masthead, nav, recherche, pied de page)
     5. Composants éditoriaux (cartes article, une, brèves, agenda, classement)
     6. Gabarit article
     7. Gabarit rubrique
     8. Responsive
   ========================================================================== */

/* ══════════════════════════════════════════════════ 1. Tokens ══════════ */
:root {
  /* Marque */
  --foret:        #0e3b2e;
  --foret-2:      #165844;
  --foret-pale:   #e8f1ee;
  --safran:       #d9740c;
  --safran-2:     #b35f07;
  --safran-pale:  #fdf1e3;

  /* Surfaces & texte (thème clair) */
  --papier:       #ffffff;
  --papier-2:     #f7f6f3;
  --papier-3:     #efeeea;
  --ligne:        #e2e0da;
  --ligne-forte:  #c9c6bd;
  --encre:        #14181c;
  --encre-2:      #474f58;
  --encre-3:      #6f7883;
  --sur-foret:    #ffffff;

  /* Couleurs de rubrique */
  --rub-rando:     #1e6f52;
  --rub-trail:     #d9740c;
  --rub-cyclisme:  #b93b2d;
  --rub-montagne:  #2f6d8f;
  --rub-escalade:  #8a5a2b;
  --rub-rugby:     #1e6f52;
  --rub-eaux:      #0e7f80;

  /* Typographie */
  --ff-titre: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --ff-texte: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Échelle */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-full: 999px;

  --ombre-sm: 0 1px 2px rgba(20, 24, 28, .05), 0 2px 6px rgba(20, 24, 28, .04);
  --ombre-md: 0 4px 12px rgba(20, 24, 28, .07), 0 10px 28px rgba(20, 24, 28, .07);
  --ombre-lg: 0 10px 28px rgba(20, 24, 28, .10), 0 28px 64px rgba(20, 24, 28, .12);

  --largeur: 1280px;
  --largeur-lecture: 720px;
  --gouttiere: clamp(1rem, 3.5vw, 2.25rem);

  --masthead-h: 68px;
  --transition: 200ms cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
}

/* Thème sombre — appliqué par l'attribut data-theme, posé par le JS */
[data-theme="sombre"] {
  --papier:       #0f1215;
  --papier-2:     #15191d;
  --papier-3:     #1c2126;
  --ligne:        #272d33;
  --ligne-forte:  #3a424a;
  --encre:        #eef1f4;
  --encre-2:      #b3bcc5;
  --encre-3:      #8b959f;
  --foret:        #123f31;
  --foret-2:      #1b6b52;
  --foret-pale:   #16241f;
  --safran:       #f08f2a;
  --safran-2:     #ffa54a;
  --safran-pale:  #2a1d0e;

  --rub-rando:     #3ea77e;
  --rub-trail:     #f08f2a;
  --rub-cyclisme:  #e05a49;
  --rub-montagne:  #5aa3c6;
  --rub-escalade:  #c08b52;
  --rub-rugby:     #3ea77e;
  --rub-eaux:      #2fb3b4;

  --ombre-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --ombre-md: 0 6px 20px rgba(0, 0, 0, .45);
  --ombre-lg: 0 16px 48px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* ══════════════════════════════════════════ 2. Base & utilitaires ══════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ff-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  overflow-x: hidden;
  transition: background-color var(--transition), color var(--transition);
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--ff-titre);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .004em;
  margin: 0 0 .45em;
  text-transform: uppercase;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--safran);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--safran);
  color: #fff;
  font-weight: 700;
  padding: .8rem 1.3rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top var(--transition);
}
.skip:focus { top: 0; }

.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bloc { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bloc--pale { background: var(--papier-2); }

/* Titre de section éditoriale : filet + libellé */
.titre-bloc {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .75rem;
  margin-bottom: 1.75rem;
  border-bottom: 3px solid var(--encre);
}
.titre-bloc h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}
.titre-bloc__lien {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-2);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color var(--transition);
}
.titre-bloc__lien:hover { color: var(--safran); }
.titre-bloc__lien svg { transition: transform var(--transition); }
.titre-bloc__lien:hover svg { transform: translateX(3px); }

/* ═════════════════════════════════════ 3. Composants d'interface ═══════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  padding: .7rem 1.4rem;
  font-family: var(--ff-texte);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--safran);
  border: 2px solid var(--safran);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}
.btn:hover { background: var(--safran-2); border-color: var(--safran-2); transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--foret { background: var(--foret); border-color: var(--foret); }
.btn--foret:hover { background: var(--foret-2); border-color: var(--foret-2); }

.btn--ligne {
  background: transparent;
  color: var(--encre);
  border-color: var(--ligne-forte);
}
.btn--ligne:hover { background: var(--encre); border-color: var(--encre); color: var(--papier); }

.btn--sm { min-height: 38px; padding: .45rem 1rem; font-size: .78rem; }

/* Pastille de rubrique */
.rubrique {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teinte, var(--safran));
  transition: color var(--transition);
}
.rubrique::before {
  content: "";
  width: 7px; height: 7px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}
.rubrique--plein {
  padding: .28rem .6rem;
  color: #fff;
  background: var(--teinte, var(--safran));
  border-radius: var(--r-sm);
}
.rubrique--plein::before { display: none; }

/* Teintes par rubrique, posées via la classe data */
[data-rub="rando"]    { --teinte: var(--rub-rando); }
[data-rub="trail"]    { --teinte: var(--rub-trail); }
[data-rub="cyclisme"] { --teinte: var(--rub-cyclisme); }
[data-rub="velo"]     { --teinte: var(--rub-cyclisme); }
[data-rub="montagne"] { --teinte: var(--rub-montagne); }
[data-rub="escalade"] { --teinte: var(--rub-escalade); }
[data-rub="rugby"]    { --teinte: var(--rub-rugby); }
[data-rub="eaux"]     { --teinte: var(--rub-eaux); }

/* Méta d'article : date, temps de lecture */
.meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--encre-3);
}
.meta__sep { width: 3px; height: 3px; background: currentColor; border-radius: 50%; flex: none; }

/* Formulaire (page contact) */
.formulaire { display: grid; gap: 1.15rem; margin-top: 1.75rem; }
.champ { display: grid; gap: .4rem; }
.champ > label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.champ > label .requis { color: var(--safran); }
.champ input,
.champ textarea,
.champ select {
  width: 100%;
  padding: .75rem .9rem;
  font-family: var(--ff-texte);
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier);
  border: 2px solid var(--ligne);
  border-radius: var(--r-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 190px; resize: vertical; line-height: 1.6; }
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: var(--foret-2);
  box-shadow: 0 0 0 3px var(--foret-pale);
}
.champ__aide { font-size: .85rem; color: var(--encre-3); }

/* Piège à robots : invisible pour l'humain, laissé vide. Ni display:none ni
   hidden, que certains robots savent détecter et ignorer. */
.leurre {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formulaire__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: .35rem;
}
.formulaire__pied .champ__aide { flex: 1 1 12rem; margin: 0; }

/* Bandeaux de retour après envoi */
.message {
  display: flex;
  gap: .8rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1.75rem;
  border-radius: var(--r-md);
  border-left: 4px solid;
  font-size: .95rem;
}
.message p { margin: 0; }
.message strong { display: block; margin-bottom: .15rem; }
/* La couleur sémantique passe par le fond et la bordure : le texte garde
   l'encre courante, sans quoi le contraste casse en thème sombre. */
.message--ok     { background: var(--foret-pale);  border-color: var(--foret-2);  color: var(--encre); }
.message--erreur { background: var(--safran-pale); border-color: var(--safran-2); color: var(--encre); }

/* ═══════════════════════════════════════════ 4. Chrome du site ═════════ */

/* --- Barre du haut ------------------------------------------------- */
.barre-haut {
  background: var(--foret);
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
}
.barre-haut__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 36px;
  flex-wrap: wrap;
}
.barre-haut__date { text-transform: capitalize; letter-spacing: .02em; }
.barre-haut__droite { display: flex; align-items: center; gap: .9rem; }
.barre-haut a { color: inherit; transition: color var(--transition); }
.barre-haut a:hover { color: #fff; }

/* Ruban de démonstration — SUPPRIMER à la mise en ligne (voir README) */
.demo {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .15rem .55rem;
  background: rgba(255, 255, 255, .14);
  border: 1px dashed rgba(255, 255, 255, .45);
  border-radius: var(--r-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .68rem;
}

/* Bouton de thème */
.theme {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-full);
  color: inherit;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.theme:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.theme__clair { display: none; }
[data-theme="sombre"] .theme__sombre { display: none; }
[data-theme="sombre"] .theme__clair { display: block; }

/* --- Masthead ------------------------------------------------------ */
.masthead {
  background: var(--papier);
  border-bottom: 1px solid var(--ligne);
}
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

.logo { display: inline-flex; align-items: center; gap: .7rem; }
.logo img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.logo__mots { display: block; line-height: 1; }
.logo__nom {
  display: block;
  font-family: var(--ff-titre);
  font-size: 1.6rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--encre);
}
.logo__nom em { font-style: normal; color: var(--safran); }
.logo__base {
  display: block;
  margin-top: .22rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.masthead__actions { display: flex; align-items: center; gap: .6rem; }

/* --- Recherche ----------------------------------------------------- */
.recherche { position: relative; }
.recherche input {
  width: 210px;
  min-height: 42px;
  padding: .5rem 1rem .5rem 2.4rem;
  font-family: inherit;
  font-size: .92rem;
  color: var(--encre);
  background: var(--papier-2);
  border: 2px solid transparent;
  border-radius: var(--r-full);
  transition: width var(--transition), border-color var(--transition), background-color var(--transition);
}
.recherche input::placeholder { color: var(--encre-3); }
.recherche input:focus {
  outline: none;
  width: 260px;
  background: var(--papier);
  border-color: var(--safran);
}
.recherche svg {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--encre-3);
  pointer-events: none;
}

/* --- Navigation des rubriques -------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--papier);
  border-bottom: 1px solid var(--ligne);
  transition: box-shadow var(--transition);
}
.nav.est-colle { box-shadow: var(--ombre-md); }
.nav__in {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--masthead-h);
}

/* Logo compact, révélé quand la nav est collée */
.nav__logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--transition), opacity var(--transition);
}
.nav.est-colle .nav__logo { max-width: 200px; opacity: 1; }
.nav__logo img { width: 30px; height: 30px; border-radius: 8px; }
.nav__logo span { font-family: var(--ff-titre); font-size: 1.1rem; text-transform: uppercase; white-space: nowrap; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: .15rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav__liste::-webkit-scrollbar { display: none; }

.nav__lien {
  position: relative;
  display: block;
  padding: .55rem .8rem;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--encre-2);
  white-space: nowrap;
  border-radius: var(--r-sm);
  transition: color var(--transition), background-color var(--transition);
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem;
  bottom: -1px;
  height: 3px;
  background: var(--teinte, var(--safran));
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav__lien:hover { color: var(--encre); background: var(--papier-2); }
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after { transform: scaleX(1); }
.nav__lien[aria-current="page"] { color: var(--encre); font-weight: 700; }

.nav__fin { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.burger {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-md);
  color: var(--encre);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  margin: 4.5px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Pied de page -------------------------------------------------- */
.pied {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--foret);
  color: rgba(255, 255, 255, .72);
  font-size: .92rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.pied h3 {
  font-family: var(--ff-texte);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff;
  margin-bottom: 1rem;
}
.pied ul { display: grid; gap: .55rem; }
.pied a { transition: color var(--transition); }
.pied a:hover { color: var(--safran-2); }
.pied .logo__nom { color: #fff; }
.pied .logo__base { color: rgba(255, 255, 255, .6); }
.pied__baseline { margin-top: 1rem; max-width: 40ch; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .82rem;
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ══════════════════════════════════ 5. Composants éditoriaux ══════════ */

/* --- Fil de brèves -------------------------------------------------- */
.fil {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--papier-2);
  border-bottom: 1px solid var(--ligne);
}
.fil__etiquette {
  flex: none;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1rem;
  background: var(--safran);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fil__pastille {
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.fil__liste {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.fil__liste::-webkit-scrollbar { display: none; }
.fil__liste li { flex: none; }
.fil__liste a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.1rem;
  font-size: .88rem;
  white-space: nowrap;
  border-right: 1px solid var(--ligne);
  transition: background-color var(--transition);
}
.fil__liste a:hover { background: var(--papier-3); }
.fil__heure {
  font-size: .74rem;
  font-weight: 700;
  color: var(--safran);
  font-variant-numeric: tabular-nums;
}

/* --- Bloc « À la une » --------------------------------------------- */
.une {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 4vw, 3rem);
}
.une__cote { display: grid; gap: 1.25rem; align-content: start; }

/* --- Carte article (le composant central, réutilisé partout) -------- */
.art { display: block; }
.art__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--papier-3);
  margin-bottom: .85rem;
}
.art__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.4, 0, .2, 1);
}
.art:hover .art__media img { transform: scale(1.04); }

.art__titre {
  font-family: var(--ff-titre);
  font-size: 1.25rem;
  line-height: 1.12;
  text-transform: uppercase;
  margin: .35rem 0 .4rem;
  transition: color var(--transition);
}
.art:hover .art__titre { color: var(--teinte, var(--safran)); }
.art__chapo {
  font-size: .95rem;
  color: var(--encre-2);
  margin-bottom: .5rem;
}

/* Variante « une » : grande carte */
.art--une .art__media img { aspect-ratio: 16 / 9; }
.art--une .art__titre { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-top: .5rem; }
.art--une .art__chapo { font-size: 1.1rem; max-width: 60ch; }

/* Variante horizontale : image à gauche, texte à droite */
.art--h {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: .9rem;
  align-items: start;
}
.art--h .art__media { margin-bottom: 0; }
.art--h .art__media img { aspect-ratio: 1 / 1; }
.art--h .art__titre { font-size: 1.02rem; margin: .3rem 0 .35rem; }

/* Variante texte seul : liste compacte */
.art--txt { padding-block: .9rem; border-top: 1px solid var(--ligne); }
.art--txt:first-child { border-top: none; padding-top: 0; }
.art--txt .art__titre { font-size: 1.05rem; margin: .3rem 0 .3rem; }

/* Grilles d'articles */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Bloc rubrique -------------------------------------------------- */
.rub-bloc + .rub-bloc { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.rub-bloc .titre-bloc { border-bottom-color: var(--teinte, var(--encre)); }
.rub-bloc .titre-bloc h2 { color: var(--teinte, var(--encre)); }

.rub-bloc__grille {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* --- Colonne latérale (agenda + les plus lus) ---------------------- */
.colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.encart {
  background: var(--papier);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.encart + .encart { margin-top: 1.5rem; }
.encart__tete {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.25rem;
  background: var(--papier-2);
  border-bottom: 1px solid var(--ligne);
}
.encart__tete h2, .encart__tete h3 {
  margin: 0;
  font-size: 1.05rem;
}
.encart__tete svg { color: var(--safran); flex: none; }
.encart__corps { padding: .5rem 1.25rem 1.25rem; }

/* Agenda */
.agenda li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 1rem;
  align-items: start;
  padding-block: .95rem;
  border-top: 1px solid var(--ligne);
}
.agenda li:first-child { border-top: none; }
.agenda__date {
  display: grid;
  place-items: center;
  padding: .4rem .2rem;
  background: var(--foret-pale);
  border-radius: var(--r-md);
  line-height: 1;
}
.agenda__jour {
  font-family: var(--ff-titre);
  font-size: 1.4rem;
  color: var(--foret-2);
}
.agenda__mois {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-top: .15rem;
}
.agenda__titre { font-weight: 600; line-height: 1.3; margin-bottom: .15rem; }
.agenda__lieu { font-size: .84rem; color: var(--encre-3); display: flex; align-items: center; gap: .3rem; }

/* Les plus lus — la grille est portée par le lien, qui contient les deux cellules */
.top li { border-top: 1px solid var(--ligne); }
.top li:first-child { border-top: none; }
.top li > a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: .85rem;
  align-items: baseline;
  padding-block: .85rem;
}

/* Liste des rubriques : un seul élément par ligne, pas de colonne de rang */
.liste-rub li { border-top: 1px solid var(--ligne); }
.liste-rub li:first-child { border-top: none; }
.liste-rub a {
  display: block;
  padding-block: .7rem;
  transition: opacity var(--transition);
}
.liste-rub a:hover { opacity: .65; }
.top__rang {
  font-family: var(--ff-titre);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ligne-forte);
}
.top__titre { font-weight: 600; line-height: 1.3; transition: color var(--transition); }
.top a:hover .top__titre { color: var(--safran); }

/* --- Newsletter ----------------------------------------------------- */
.infolettre {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--foret);
  color: #fff;
  border-radius: var(--r-lg);
}
.infolettre h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: .35rem; }
.infolettre p { color: rgba(255, 255, 255, .78); max-width: 52ch; margin: 0; }
.infolettre form { display: flex; gap: .6rem; flex-wrap: wrap; }
.infolettre input {
  min-width: 240px;
  min-height: 46px;
  padding: .7rem 1.1rem;
  font-family: inherit;
  font-size: .98rem;
  color: var(--encre);
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--r-full);
}
.infolettre input:focus { outline: none; border-color: var(--safran); }
.infolettre .mention {
  flex: 1 0 100%;
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
}

/* --- Résultat de recherche ------------------------------------------ */
.recherche-etat {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .85rem 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--safran-pale);
  border: 1px solid var(--safran);
  border-radius: var(--r-md);
  font-size: .92rem;
}
.recherche-etat.est-actif { display: flex; }
.recherche-etat b { color: var(--safran-2); }

.art.est-masque, .rub-bloc.est-masque, .bloc.est-masque { display: none; }

/* Crédit photo : obligation des licences Creative Commons, discret mais lisible */
.credit {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--encre-3);
}

/* Titre principal de l'accueil */
.accueil-tete { padding-top: 1.75rem; }
.accueil-tete h1 {
  font-family: var(--ff-titre);
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
.accueil-tete p {
  max-width: 62ch;
  margin: 0;
  color: var(--encre-2);
  font-size: 1.02rem;
}

/* Fiche pratique en tête d'article */
.fiche {
  margin: 0 0 2rem;
  padding: 1.15rem 1.35rem;
  background: var(--foret);
  color: var(--sur-foret);
  border-radius: var(--r-md);
}
.fiche__titre {
  margin: 0 0 .75rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}
.fiche dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .7rem 1.5rem;
  margin: 0;
}
.fiche__ligne dt {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}
.fiche__ligne dd {
  margin: .1rem 0 0;
  font-weight: 600;
  font-size: 1.02rem;
}

/* Sources : discrètes, mais présentes — c'est ce qui rend les chiffres vérifiables */
.sources {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ligne);
}
.sources h2 {
  font-size: .8rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: .6rem;
}
.sources ul { margin: 0; padding-left: 1.1rem; }
.sources li { font-size: .85rem; word-break: break-word; }
.sources a { color: var(--encre-3); }
.sources a:hover { color: var(--safran); }

/* Renvoi contextuel inséré au fil de l'article */
.renvoi {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  background: var(--papier-2);
  border-left: 4px solid var(--teinte, var(--safran));
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.renvoi__titre {
  margin: 0 0 .5rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.renvoi ul { margin: 0; padding-left: 1.1rem; }
.renvoi li + li { margin-top: .3rem; }

/* ══════════════════════════════════════════ 6. Gabarit article ════════ */
.article { padding-block: clamp(1.75rem, 4vw, 2.75rem); }

.fil-ariane {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font-size: .82rem;
  color: var(--encre-3);
}
.fil-ariane a:hover { color: var(--safran); }
.fil-ariane svg { flex: none; opacity: .5; }

.article__tete { max-width: var(--largeur-lecture); margin-inline: auto; text-align: left; }
.article__tete h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  margin: .6rem 0 .7rem;
}
.article__chapo {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.5;
  color: var(--encre-2);
  margin-bottom: 1.25rem;
}
.article__signature {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding-block: 1rem;
  border-block: 1px solid var(--ligne);
  font-size: .88rem;
  color: var(--encre-2);
}
.article__auteur { font-weight: 700; color: var(--encre); }

.partage { margin-left: auto; display: flex; gap: .4rem; }
.partage a, .partage button {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  background: var(--papier-2);
  border: 1px solid var(--ligne);
  border-radius: var(--r-full);
  color: var(--encre-2);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.partage a:hover, .partage button:hover { background: var(--safran); border-color: var(--safran); color: #fff; }

.article__illu { margin-block: 1.75rem; }
.article__illu img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 16 / 9; object-fit: cover; }
.article__illu figcaption {
  margin-top: .6rem;
  font-size: .82rem;
  color: var(--encre-3);
  line-height: 1.45;
}

/* Corps de texte : c'est ici que se joue le confort de lecture */
.corps {
  max-width: var(--largeur-lecture);
  margin-inline: auto;
  font-size: 1.17rem;
  line-height: 1.75;
}
.corps > * + * { margin-top: 1.25em; }
.corps h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin-top: 2em;
  margin-bottom: .1em;
}
.corps h3 {
  font-family: var(--ff-texte);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 1.75em;
  margin-bottom: .1em;
}
.corps a { color: var(--safran-2); text-decoration: underline; text-underline-offset: 3px; }
.corps a:hover { color: var(--safran); }
.corps ul, .corps ol { padding-left: 1.3em; }
.corps ul { list-style: disc; }
.corps ol { list-style: decimal; }
.corps li + li { margin-top: .5em; }
.corps strong { font-weight: 700; }

.corps blockquote {
  margin-inline: 0;
  padding-left: 1.4rem;
  border-left: 4px solid var(--safran);
  font-size: 1.3rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--encre);
}
.corps blockquote cite {
  display: block;
  margin-top: .6rem;
  font-size: .88rem;
  font-style: normal;
  font-weight: 600;
  color: var(--encre-3);
}

.encadre {
  padding: 1.25rem 1.5rem;
  background: var(--papier-2);
  border-left: 4px solid var(--foret-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1rem;
  line-height: 1.6;
}
.encadre h3 { margin-top: 0 !important; font-size: 1.02rem; }

/* Barre de progression de lecture */
.progression {
  position: fixed;
  top: 0; left: 0;
  z-index: 95;
  height: 3px;
  width: 0;
  background: var(--safran);
  transition: width 80ms linear;
}

/* ═══════════════════════════════════════════ 7. Gabarit rubrique ══════ */
.rub-tete {
  padding-block: clamp(2rem, 4vw, 3rem);
  background: var(--papier-2);
  border-bottom: 1px solid var(--ligne);
}
.rub-tete h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--teinte, var(--encre));
  margin-bottom: .3rem;
}
.rub-tete p { max-width: 60ch; color: var(--encre-2); font-size: 1.05rem; margin: 0; }

.filtres { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.filtre {
  min-height: 38px;
  padding: .4rem 1rem;
  background: var(--papier);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--encre-2);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.filtre:hover { border-color: var(--encre); color: var(--encre); }
.filtre[aria-pressed="true"] {
  background: var(--teinte, var(--safran));
  border-color: var(--teinte, var(--safran));
  color: #fff;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 2.5rem;
}
.pagination a, .pagination span {
  display: grid;
  place-items: center;
  min-width: 42px; height: 42px;
  padding-inline: .6rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  font-size: .92rem;
  font-weight: 600;
  transition: background-color var(--transition), border-color var(--transition);
}
.pagination a:hover { background: var(--papier-2); border-color: var(--ligne-forte); }
.pagination [aria-current="page"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }

/* ══════════════════════════════════════════════ 8. Responsive ═════════ */
@media (max-width: 1080px) {
  .une { grid-template-columns: 1fr; }
  .une__cote { grid-template-columns: repeat(3, 1fr); }
  .rub-bloc__grille { grid-template-columns: 1fr 1fr; }
  .rub-bloc__grille .art:nth-child(3) { display: none; }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .colonnes { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .masthead__in { padding-block: .9rem; }
  .masthead .recherche { display: none; }
  .masthead__actions .btn { display: none; }

  .burger { display: block; }
  .nav__liste {
    position: fixed;
    inset: calc(var(--masthead-h)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--ligne);
    box-shadow: var(--ombre-lg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms cubic-bezier(.4, 0, .2, 1);
  }
  .nav__liste.est-ouvert { max-height: 75vh; overflow-y: auto; padding-block: .5rem; }
  .nav__lien {
    padding: .95rem var(--gouttiere);
    border-radius: 0;
    border-bottom: 1px solid var(--ligne);
    font-size: 1rem;
  }
  .nav__lien::after { left: 0; right: auto; bottom: auto; top: 0; width: 4px; height: 100%; border-radius: 0; }
  .nav__logo { max-width: 200px; opacity: 1; }
  .nav__in { justify-content: space-between; }
  .nav__fin { margin-left: 0; }

  .une__cote { grid-template-columns: 1fr; }
  .rub-bloc__grille { grid-template-columns: 1fr; }
  .rub-bloc__grille .art:nth-child(3) { display: block; }
  .infolettre { grid-template-columns: 1fr; }
  .article__signature { font-size: .84rem; }
  .partage { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
  .grille--3, .grille--4, .grille { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr; }
  .pied__bas { justify-content: center; text-align: center; }
  .pied__bas ul { justify-content: center; }
  .barre-haut__in { justify-content: center; }
  .barre-haut__date { display: none; }
  .infolettre input { min-width: 0; flex: 1; }
  .infolettre form .btn { flex: 1; }
  .art--une .art__titre { font-size: 1.85rem; }
  .logo__nom { font-size: 1.35rem; }
  .logo img { width: 38px; height: 38px; }
}

/* ═══════════════════════════════════════════════ Mouvement réduit ═════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════ Impression ════ */
@media print {
  .barre-haut, .nav, .fil, .partage, .infolettre, .progression, .pied__grille { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .corps { max-width: none; }
}