/*
Theme Name: MESA
Theme URI: https://www.mesa.lu/
Description: Theme editorial sur mesure pour MESA, magazine luxembourgeois. Mouvement motive : bande defilante des mises a jour, apparitions en escalier, compteurs des chiffres verifies, sommaire de guide colle. Fond pierre chaud, Archivo en graisses lourdes, angles arrondis, ombres douces, couleur dans le titre. Compose autour de la recherche, de la fraicheur et des chiffres verifies.
Author: MESA
Version: 3.4.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: mesa
*/

/* ==========================================================================
   1. Jetons de design
   ========================================================================== */

:root {
  /* Fonds : pierre chaude plutot que blanc d'ecran. Les surfaces sont blanches
     et flottent au-dessus, c'est ce contraste qui porte l'identite. */
  --fond:        #F7F5F0;
  --surface:     #FFFFFF;
  --surface-2:   #F2F0EA;
  --bordure:     #E7E3DA;

  --encre:       #16181A;
  --encre-2:     #6B6F72;
  --encre-3:     #9A9EA1;

  /* Vert mesa en couleur principale, terre cuite en secondaire. */
  --vert:        #16785C;
  --vert-fonce:  #0F5943;
  --vert-pale:   #E8F3EF;
  --terre:       #D9613F;

  --sponsor:     #8A5A12;
  --sponsor-pale:#F6EEDF;

  /* Accent de rubrique : ecrase par les classes rub-*. */
  --accent:      #16785C;
  --accent-fort: #0F5943;
  --accent-pale: #E8F3EF;

  /* Une seule famille pour le chrome et les titres. Newsreader reste pour le
     corps des articles : huit cents mots de guide se lisent mieux en serif. */
  --ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texte:   "Newsreader", Georgia, serif;

  --colonne:   42rem;
  --large:     80rem;
  --gouttiere: 1rem;

  --rayon:     15px;
  --rayon-lg:  22px;
  --rayon-pilule: 999px;

  --ombre:     rgba(0, 0, 0, .05) 0 8px 26px 0;
  --ombre-lg:  rgba(0, 0, 0, .06) 0 12px 40px 0;
  --ombre-flottante: rgba(0, 0, 0, .05) 0 0 40px 0, rgba(0, 0, 0, .04) 0 2px 8px 0;
}

@media (min-width: 48rem) { :root { --gouttiere: 1.75rem; } }
@media (min-width: 72rem) { :root { --gouttiere: 2.5rem; } }

/* Dix teintes de rubrique. Elles servent aux pastilles et aux etiquettes,
   plus aux aplats de tuile quand un article n'a pas de visuel. */
.rub-impots-patrimoine   { --accent: #6E3DAE; --accent-fort: #59309B; --accent-pale: #F1EBFA; }
.rub-banque-credit       { --accent: #2D8070; --accent-fort: #216257; --accent-pale: #E6F2EF; }
.rub-emploi-entreprise   { --accent: #B66C2B; --accent-fort: #935620; --accent-pale: #FAF0E4; }
.rub-immobilier-habitat  { --accent: #3468AD; --accent-fort: #28528B; --accent-pale: #EAF2FA; }
.rub-famille-education   { --accent: #B5417A; --accent-fort: #943363; --accent-pale: #FBECF3; }
.rub-loisirs-decouverte  { --accent: #2E8A47; --accent-fort: #226B36; --accent-pale: #E8F4EB; }
.rub-auto-mobilite       { --accent: #C93A44; --accent-fort: #A22C35; --accent-pale: #FBEBEC; }
.rub-luxembourg-pratique { --accent: #8C3FA8; --accent-fort: #71318A; --accent-pale: #F5EBF9; }
.rub-maison-art-de-vivre { --accent: #A3892B; --accent-fort: #836D20; --accent-pale: #F8F3E2; }
.rub-sante-bien-etre     { --accent: #2E7E92; --accent-fort: #226173; --accent-pale: #E7F2F5; }

/* ==========================================================================
   2. Socle
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--vert); }

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

h1, h2, h3, h4 {
  font-family: var(--ui);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.025em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.enveloppe { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere); }
.colonne   { max-width: var(--colonne); margin-inline: auto; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--encre); color: var(--surface);
  padding: .75rem 1.25rem; font-size: .875rem; border-radius: var(--rayon-pilule);
}
.saut-contenu:focus { left: 1rem; top: 1rem; z-index: 200; }

/* Pastille : la brique de base du site. Etiquette, filtre, bouton, compteur. */
.pastille {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: var(--rayon-pilule);
  padding: .5rem .9rem;
  font-size: .8125rem; font-weight: 600;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--bordure);
}
.pastille--pleine { background: var(--vert); color: var(--surface); border-color: var(--vert); font-weight: 700; }
.pastille--pleine:hover { background: var(--vert-fonce); color: var(--surface); }
.pastille--rubrique { background: var(--accent-pale); color: var(--accent); border-color: transparent; font-weight: 700; }
/* Une pastille de rubrique garde sa teinte au survol : le vert global la
   ferait basculer sur une couleur qui n'est pas la sienne. */
a.pastille--rubrique:hover { background: var(--accent); color: var(--surface); }
.pastille--maj { background: var(--vert-pale); color: var(--vert); border-color: transparent; font-weight: 700; }
.pastille__point { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.pastille__compte { color: var(--encre-3); font-weight: 500; }

/* ==========================================================================
   3. En-tete flottant
   ========================================================================== */


.entete-barre {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--ombre-flottante);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  padding: .8rem 1.1rem .8rem 1.5rem;
}

.marque-lien { display: flex; align-items: center; gap: .55rem; }
.marque-logo { flex: none; display: block; }

/* Les deux lignes de la marque sont empilees et calees sur la meme largeur :
   c'est le nom qui fixe la mesure, le sous-titre s'y repartit. */
.marque-bloc { display: flex; flex-direction: column; gap: .13rem; }
.marque-mot { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1; }
.marque-pays {
  display: flex; justify-content: space-between;
  font-size: .5rem; font-weight: 600; color: var(--encre-2);
  text-transform: uppercase; line-height: 1;
}

/* Texte reserve aux lecteurs d'ecran : le sous-titre visuel est decoupe en
   lettres, qui seraient epelees une a une sans cette doublure.
   `screen-reader-text` est le nom attendu par WordPress et par les gabarits de
   formulaire, il doit rester couvert : sans lui les libelles s'affichent. */
.lecteur-ecran,
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Formulaire de recherche generique (404, recherche, archive vide). */
.recherche {
  display: flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon-pilule);
  padding: .35rem .35rem .35rem 1.1rem;
  max-width: 26rem;
}
.recherche input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: var(--ui); font-size: .95rem; color: var(--encre);
}
.recherche input::placeholder { color: var(--encre-3); }
.recherche button {
  flex: none; border: 0; cursor: pointer;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--vert); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.recherche button:hover { background: var(--vert-fonce); }

.nav-rubriques ul { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.nav-rubriques a { font-size: .875rem; font-weight: 500; }
.nav-rubriques a:hover { color: var(--accent); }
.nav-rubriques .current-menu-item > a,
.nav-rubriques .courant > a { color: var(--accent); font-weight: 700; }

.entete-recherche {
  display: flex; align-items: center; gap: .5rem;
  background: var(--surface-2); border-radius: var(--rayon-pilule);
  padding: .3rem .3rem .3rem .9rem;
  flex: 0 1 15rem; min-width: 9rem;
}
.entete-recherche svg { flex: none; }
.entete-recherche input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: var(--ui); font-size: .8125rem; font-weight: 500; color: var(--encre);
  -webkit-appearance: none;
}
.entete-recherche input::placeholder { color: var(--encre-2); }
.entete-recherche button {
  flex: none; border: 0; cursor: pointer;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  background: var(--vert); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.entete-recherche button:hover { background: var(--vert-fonce); }

.entete-burger {
  display: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--vert); border: 0; cursor: pointer;
  align-items: center; justify-content: center;
}

@media (max-width: 62rem) {
  .nav-rubriques { display: none; }
  .entete-burger { display: flex; }
}

/* ==========================================================================
   4. Accueil : la question d'entree
   ========================================================================== */

.accroche { text-align: center; padding: clamp(2.25rem, 6vw, 3.5rem) 0 0; }
.accroche h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.1; letter-spacing: -.03em;
  max-width: 20ch; margin: 0 auto .8rem;
}
.accroche h1 em { font-style: normal; color: var(--vert); }
.accroche__sous {
  font-size: 1rem; line-height: 1.6; color: var(--encre-2);
  max-width: 56ch; margin: 0 auto 1.6rem;
}

.champ-recherche {
  max-width: 41rem; margin: 0 auto 1rem;
  background: var(--surface); border-radius: var(--rayon-pilule);
  box-shadow: rgba(0, 0, 0, .06) 0 10px 34px 0;
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .5rem .5rem 1.4rem;
}
.champ-recherche svg { flex: none; }
.champ-recherche input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: var(--ui); font-size: 1rem; color: var(--encre);
}
.champ-recherche input::placeholder { color: var(--encre-3); }
.champ-recherche button {
  flex: none; border: 0; cursor: pointer;
  background: var(--vert); color: var(--surface);
  border-radius: var(--rayon-pilule); padding: .8rem 1.6rem;
  font-family: var(--ui); font-size: .875rem; font-weight: 700;
}
.champ-recherche button:hover { background: var(--vert-fonce); }

.suggestions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.suggestions a:hover { border-color: var(--vert); color: var(--vert); }

@media (max-width: 40rem) {
  .champ-recherche { padding-left: 1rem; }
  .champ-recherche button { padding: .75rem 1.1rem; font-size: .8125rem; }
}

/* ==========================================================================
   5. Bande des rubriques
   ========================================================================== */

.bande-rubriques {
  display: flex; gap: .5rem; flex-wrap: wrap;
  padding: clamp(1.75rem, 4vw, 2.9rem) 0 0;
}
.bande-rubriques .pastille {
  padding-left: .75rem;
  box-shadow: rgba(0, 0, 0, .04) 0 3px 12px 0;
  border-color: transparent;
}
.bande-rubriques .pastille:hover { color: var(--accent); }

/* ==========================================================================
   6. Le guide du moment
   ========================================================================== */

.vedette {
  margin-top: clamp(1.75rem, 4vw, 2.9rem);
  background: var(--surface); border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-lg);
  display: grid; grid-template-columns: 1fr; overflow: hidden;
}
@media (min-width: 56rem) {
  .vedette { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
}
.vedette__media { background: var(--surface-2); }
.vedette__media img { width: 100%; height: 100%; min-height: 15rem; object-fit: cover; }
.vedette__corps { padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.15rem); display: flex; flex-direction: column; justify-content: center; }
.vedette__etiquettes { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.vedette h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .6rem; }
.vedette__chapeau { font-size: .95rem; line-height: 1.6; color: var(--encre-2); max-width: 54ch; margin: 0 0 1.25rem; }

/* Les chiffres d'un guide, en pave. Le premier prend le vert. */
.chiffres { display: flex; gap: .75rem; flex-wrap: wrap; }
.chiffre {
  background: var(--surface-2); border-radius: var(--rayon);
  padding: .95rem 1.25rem; min-width: 6.5rem;
}
.chiffre--fort { background: var(--vert); color: var(--surface); }
.chiffre__valeur { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.chiffre__libelle { display: block; font-size: .75rem; color: var(--encre-2); margin-top: .35rem; }
.chiffre--fort .chiffre__libelle { color: rgba(255, 255, 255, .85); }

/* ==========================================================================
   7. Sections et grilles
   ========================================================================== */

.section { padding-top: clamp(1.75rem, 4vw, 2.9rem); }
.section__tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.15rem;
}
.section__tete h2 { font-size: clamp(1.25rem, 2.6vw, 1.65rem); margin: 0; }
.section__lien { font-size: .8125rem; font-weight: 600; color: var(--vert); }

.grille { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 40rem) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   8. Carte d'article
   ========================================================================== */

.carte {
  background: var(--surface); border-radius: 18px;
  box-shadow: var(--ombre);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.carte:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, .09) 0 16px 38px 0; }

.carte__media { background: var(--surface-2); overflow: hidden; }
.carte__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.carte__corps { padding: .95rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1 1 auto; }
.carte__date { font-size: .6875rem; font-weight: 700; color: var(--vert); }
.carte__titre { font-size: 1rem; font-weight: 700; line-height: 1.24; margin: 0; letter-spacing: -.01em; }
.carte__meta { font-size: .75rem; color: var(--encre-3); margin-top: auto; padding-top: .35rem; }
.carte__extrait { font-size: .8125rem; line-height: 1.5; color: var(--encre-2); }

/* Sans visuel, la carte devient un aplat de la couleur de sa rubrique.
   C'est ce qui fait qu'un article sans photo ne creuse plus la grille. */
.carte--sans-media { background: var(--accent); }
.carte--sans-media .carte__corps { padding: 1.25rem 1.15rem 1.35rem; gap: .6rem; }
.carte--sans-media .carte__titre { color: var(--surface); font-size: 1.15rem; font-weight: 800; }
.carte--sans-media .carte__date { color: rgba(255, 255, 255, .78); }
.carte--sans-media .carte__meta { color: rgba(255, 255, 255, .7); }
.carte--sans-media .carte__extrait { color: rgba(255, 255, 255, .88); }
/* Sur un aplat de couleur, le lien doit rester en reserve au survol. Sans cela
   le vert global s'applique et donne du vert sur bleu, illisible. Le survol se
   signale par un soulignement, pas par un changement de teinte. */
.carte--sans-media .carte__titre a,
.carte--phare .carte__titre a {
  color: var(--surface);
}
.carte--sans-media .carte__titre a:hover,
.carte--phare .carte__titre a:hover {
  color: var(--surface);
  text-decoration: underline;
  text-underline-offset: .16em;
  text-decoration-thickness: 2px;
}

/* Variante mise en avant, pour le plus consulte. */
.carte--phare { background: var(--terre); }
.carte--phare .carte__corps { padding: 1.25rem 1.15rem 1.35rem; }
.carte--phare .carte__titre { color: var(--surface); font-size: 1.25rem; font-weight: 800; }
.carte--phare .carte__date, .carte--phare .carte__meta { color: rgba(255, 255, 255, .78); }
.carte--phare .carte__extrait { color: rgba(255, 255, 255, .9); }
.carte--phare .carte__sur {
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .8);
}

/* Carte horizontale, pour les listes secondaires. */
.carte--ligne { flex-direction: row; align-items: center; gap: .85rem; padding: .7rem; }
.carte--ligne .carte__media { flex: none; width: 5.5rem; border-radius: 12px; }
.carte--ligne .carte__media img { aspect-ratio: 7 / 6; }
.carte--ligne .carte__corps { padding: 0; }

/* ==========================================================================
   9. Bande des chiffres verifies
   ========================================================================== */

.bande-chiffres {
  margin-top: clamp(1.75rem, 4vw, 2.9rem);
  background: var(--vert); border-radius: var(--rayon-lg);
  padding: clamp(1.5rem, 3vw, 1.9rem) clamp(1.5rem, 3vw, 2.15rem);
  color: var(--surface);
}
.bande-chiffres__tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.35rem; flex-wrap: wrap;
}
.bande-chiffres h2 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); margin: 0; color: var(--surface); }
.bande-chiffres__note { font-size: .75rem; color: rgba(255, 255, 255, .72); }
.bande-chiffres__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
@media (min-width: 56rem) { .bande-chiffres__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bande-chiffres .chiffre { background: rgba(255, 255, 255, .14); color: var(--surface); }
.bande-chiffres .chiffre__libelle { color: rgba(255, 255, 255, .82); }
.bande-chiffres a.chiffre:hover { background: rgba(255, 255, 255, .22); color: var(--surface); }

/* ==========================================================================
   10. Archives, recherche, pagination
   ========================================================================== */

.archive-entete { padding: clamp(1.75rem, 4vw, 2.75rem) 0 0; }
.archive-entete__tete { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.archive-entete h1 { font-size: clamp(1.75rem, 4.4vw, 2.6rem); margin: 0; }
.archive-entete .description { color: var(--encre-2); max-width: 60ch; margin: .5rem 0 0; font-size: .95rem; }

.liste-archive { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1.5rem; }
@media (min-width: 40rem) { .liste-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 64rem) {
  .liste-archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Les proportions d'image alternent, pour que les cartes ne s'alignent pas
     toutes sur la meme ligne d'horizon. */
  .liste-archive > .carte:nth-child(3n + 2) .carte__media img { aspect-ratio: 4 / 3; }
  .liste-archive > .carte:nth-child(3n) .carte__media img { aspect-ratio: 3 / 2; }

  /* Une carte sur cinq occupe deux colonnes et prend un visuel panoramique.
     Le cycle de cinq remplit exactement deux rangees de trois (2+1+1+1+1), donc
     le pavage se referme sans trou. Toute exception a cette regle, comme
     rendre une carte a une colonne, decale tout ce qui suit et fabrique les
     espacements irreguliers. Cette regle passe apres les precedentes pour
     l'emporter sur elles. */
  .liste-archive > .carte:nth-child(5n + 1) { grid-column: span 2; }
  .liste-archive > .carte:nth-child(5n + 1) .carte__media img { aspect-ratio: 2 / 1; }
  .liste-archive > .carte:nth-child(5n + 1) .carte__titre { font-size: 1.3rem; }
  .liste-archive > .carte:nth-child(5n + 1) .carte__corps { padding: 1.15rem 1.25rem 1.3rem; }

  /* Sans visuel, la carte large reste sur deux colonnes mais devient une
     banniere de couleur : le titre s'aere au lieu de flotter dans un pave. */
  .liste-archive > .carte--sans-media:nth-child(5n + 1) .carte__corps {
    padding: 1.6rem 1.5rem 1.7rem;
    justify-content: center;
  }
  .liste-archive > .carte--sans-media:nth-child(5n + 1) .carte__titre { font-size: 1.5rem; }
}

/* Les cartes s'etirent sur la hauteur de leur rangee, et leur pied se cale en
   bas : sans cela chaque carte garde sa hauteur naturelle et les bas de
   rangee deviennent irreguliers. */
.liste-archive > .carte, .grille > .carte, .rubrique-grille > .carte { height: 100%; }

.pagination { display: flex; gap: .5rem; flex-wrap: wrap; padding: 2rem 0 0; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding-inline: .75rem;
  background: var(--surface); border-radius: var(--rayon-pilule);
  font-size: .875rem; font-weight: 600; box-shadow: var(--ombre);
}
.pagination .page-numbers.current { background: var(--vert); color: var(--surface); }

.vide { padding: 3rem 0; max-width: 46rem; }

/* ==========================================================================
   11. Article
   ========================================================================== */

.article-entete { padding: 1.5rem 0 0; }
.article-entete h1 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.08; margin: 0 0 .7rem;
}
.article-chapeau { font-size: 1.1rem; line-height: 1.6; color: var(--encre-2); margin: 0 0 1.1rem; }
.article-signature {
  display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center;
  font-size: .8125rem; color: var(--encre-2);
  padding-bottom: 1.25rem;
}
.article-signature strong { color: var(--encre); font-weight: 700; }
.mention-sponsorise {
  background: var(--sponsor-pale); color: var(--sponsor);
  border-radius: var(--rayon-pilule); padding: .35rem .8rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.article-visuel { margin: 2rem auto 0; max-width: 52rem; }
.article-visuel img { width: 100%; border-radius: var(--rayon-lg); box-shadow: var(--ombre); }
.visuel-credit { font-size: .75rem; color: var(--encre-3); margin-top: .6rem; line-height: 1.5; }
.visuel-credit a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--accent); }
.visuel-credit a:hover { color: var(--accent); }

/* Le corps de l'article reste en serif : huit cents mots de guide se lisent
   mieux ainsi, et le chrome sans-serif suffit a porter l'identite. */
.article-corps {
  font-family: var(--texte);
  font-size: 1.15rem; line-height: 1.68;
  padding-block: 2rem 2.5rem;
}
.article-corps > * { max-width: var(--colonne); margin-inline: auto; }
.article-corps h2 {
  font-family: var(--ui); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -.02em;
  margin: 2.2rem auto .8rem;
}
.article-corps h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: 1.2rem; margin: 1.7rem auto .6rem;
}
.article-corps ul, .article-corps ol { padding-left: 1.3rem; }
.article-corps li { margin-bottom: .45rem; }
.article-corps a { color: var(--vert); text-decoration: underline; text-underline-offset: .18em; }
.article-corps a:hover { color: var(--vert-fonce); }
.article-corps img { border-radius: var(--rayon); }
.article-corps figcaption, .article-corps .wp-element-caption {
  font-family: var(--ui); font-size: .8125rem; color: var(--encre-3);
  margin-top: .6rem; line-height: 1.5;
}
.article-corps table { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: .95rem; }
.article-corps th, .article-corps td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--bordure); }
.article-corps th { font-weight: 700; }
.article-corps tbody tr:nth-child(odd) td { background: var(--accent-pale); }
.article-corps code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: var(--surface-2);
  border-radius: 6px; padding: .12em .4em;
}

/* Encart de mise a jour, signature editoriale du site. */
.bandeau-maj {
  font-family: var(--ui); font-size: .9rem; color: var(--encre-2);
  background: var(--surface); border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1rem 1.15rem; margin-bottom: 1.75rem; line-height: 1.55;
}
.bandeau-maj strong { color: var(--encre); }

.article-pied { padding-bottom: 3rem; }
.article-pied h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.rubrique-grille { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 46rem) { .rubrique-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   12. Barre de progression, pied de page
   ========================================================================== */



.pied {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--surface);
  border-radius: var(--rayon-lg) var(--rayon-lg) 0 0;
  padding: clamp(2rem, 4vw, 2.75rem) 0 2rem;
}
.pied-grille { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 48rem) { .pied-grille { grid-template-columns: 1.2fr 1fr 1fr; } }
.pied h2 { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); font-weight: 700; margin-bottom: .8rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.pied a { font-size: .875rem; color: var(--encre-2); }
.pied a:hover { color: var(--vert); }
.pied-bas {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--bordure);
  font-size: .75rem; color: var(--encre-3);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

.pied-mot { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: .6rem; }
.pied-blurb { font-size: .875rem; line-height: 1.6; color: var(--encre-2); max-width: 42ch; margin: 0; }

.pied-mot { display: flex; align-items: center; gap: .55rem; }

/* ==========================================================================
   14. Pages simples
   ========================================================================== */

.page-entete { padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(1.25rem, 3vw, 2rem); }
.page-entete h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); margin: 0; }

/* Les blocs de page-builder gerent leur propre largeur : on ne contraint que le
   texte courant, sinon les conteneurs Spectra sont ecrases dans la colonne de
   lecture et la page se replie sur elle-meme. */
.page-corps { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

/* Tout est ramene dans la colonne de lecture par defaut, et seuls les blocs qui
   gerent leur propre largeur en sortent. Lister les balises a contraindre ne
   marchait pas : la sortie d'un shortcode, un formulaire par exemple, ne
   correspondait a aucune d'elles et debordait sur toute la largeur. */
.page-corps > * {
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.page-corps > .wp-block-uagb-container,
.page-corps > .alignfull,
.page-corps > .alignwide {
  max-width: none;
  padding-inline: 0;
}
.page-corps > h2 { font-size: 1.5rem; margin-top: 2rem; }
.page-corps > h3 { font-size: 1.2rem; margin-top: 1.6rem; }
.page-corps > ul, .page-corps > ol { padding-left: calc(var(--gouttiere) + 1.3rem); }
.page-corps a { color: var(--vert); text-decoration: underline; text-underline-offset: .18em; }
.page-corps a:hover { color: var(--vert-fonce); }
.page-corps img { border-radius: var(--rayon); }

/* Le titre de page se cale sur la meme colonne que le corps, sinon il flotte
   seul contre le bord gauche pendant que le texte est centre. */
.page-entete .enveloppe { max-width: var(--colonne); }

/* Champs de formulaire. SureForms se pilote par variables CSS : les poser sur
   le conteneur est la voie prevue, et evite une surenchere de selecteurs contre
   ses chaines a quatre niveaux. La feuille du theme est chargee en priorite 5,
   donc avant celles des extensions, et perdrait a specificite egale.
   Ancien commentaire : SureForms livre des champs sans bordure ni fond, donc
   invisibles sur le papier du site : c'est au theme de les habiller. Les
   selecteurs doublent la classe du greffon pour passer devant sa feuille. */
.page-corps input[type="text"],
.page-corps input[type="email"],
.page-corps input[type="tel"],
.page-corps input[type="url"],
.page-corps input[type="number"],
.page-corps textarea,
.page-corps select,
.page-corps .srfm-input-common,
.page-corps .srfm-input-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: .7rem .95rem;
  font-family: var(--ui); font-size: .95rem; color: var(--encre);
  transition: border-color .25s ease;
}
.page-corps input:focus,
.page-corps textarea:focus,
.page-corps select:focus { border-color: var(--vert); outline: none; }
.page-corps ::placeholder { color: var(--encre-3); }

.page-corps button[type="submit"],
.page-corps .srfm-button {
  background: var(--vert); color: var(--surface);
  border: 0; border-radius: var(--rayon-pilule);
  padding: .8rem 1.7rem;
  font-family: var(--ui); font-size: .9rem; font-weight: 700;
  cursor: pointer;
}
.page-corps button[type="submit"]:hover,
.page-corps .srfm-button:hover { background: var(--vert-fonce); }

.page-corps label { font-size: .8125rem; font-weight: 600; color: var(--encre-2); }

/* Variables SureForms, calees sur les jetons du theme. */
.page-corps .srfm-form-container {
  --srfm-color-input-background: var(--surface);
  --srfm-color-input-border: var(--bordure);
  --srfm-color-input-text: var(--encre);
  --srfm-color-input-label: var(--encre-2);
  --srfm-color-input-description: var(--encre-3);
  --srfm-input-field-border-radius: var(--rayon);
  --srfm-btn-border-radius: var(--rayon-pilule);
  --srfm-color-primary: var(--vert);
  --srfm-primary-color: var(--vert);
}

/* Filet de securite, si une version du greffon cesse d'honorer ses variables. */
.page-corps .srfm-form-container .srfm-form .srfm-block-wrap .srfm-input-common,
.page-corps .srfm-form-container .srfm-form .srfm-block-wrap textarea {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.page-corps .srfm-form-container .srfm-form .srfm-block-wrap .srfm-input-common:focus,
.page-corps .srfm-form-container .srfm-form .srfm-block-wrap textarea:focus {
  border-color: var(--vert);
}
.page-corps .srfm-form-container .srfm-form .srfm-button,
.page-corps .srfm-form-container .srfm-form button[type="submit"] {
  background: var(--vert); color: var(--surface);
  border: 0; border-radius: var(--rayon-pilule);
}

/* ==========================================================================
   15. Mouvement : reglages communs
   --------------------------------------------------------------------------
   Le vocabulaire du theme est fait d'aplats, de pilules et d'ombres douces,
   jamais de degrades. Le mouvement suit la meme regle : ce sont des formes
   pleines qui glissent et des masques qui s'ouvrent, pas des fondus de couleur.
   Une seule courbe pour tout le site, une seule echelle de durees.
   ========================================================================== */

:root {
  --sortie:   cubic-bezier(.22, .61, .36, 1);
  --ressort:  cubic-bezier(.34, 1.36, .64, 1);
  --vite:     .18s;
  --moyen:    .34s;
  --ample:    .62s;
  --pas:      58ms;          /* decalage d'un rang a l'autre dans une grille */
  --entete-h: 4.5rem;
}

/* ==========================================================================
   16. Apparitions au defilement
   --------------------------------------------------------------------------
   Le rang vient de --i, pose par le script sur chaque bloc. Ecrire une regle
   nth-child par position ne tenait que pour les quatre premieres cartes ; les
   pages de rubrique en alignent vingt et arrivaient toutes ensemble.
   ========================================================================== */

.js-la .au-defilement {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--ample) var(--sortie),
              transform var(--ample) var(--sortie);
  transition-delay: calc(var(--i, 0) * var(--pas));
  will-change: opacity, transform;
}
.js-la .au-defilement.vu { opacity: 1; transform: none; will-change: auto; }

/* Les visuels s'ouvrent par un volet plutot que par un fondu : sur un aplat de
   couleur un fondu se voit a peine, un volet se lit tout de suite. */
.js-la .au-defilement--volet {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--ample) var(--sortie);
  transition-delay: calc(var(--i, 0) * var(--pas));
}
.js-la .au-defilement--volet.vu { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   17. En-tete collant
   --------------------------------------------------------------------------
   Le script posait deja `entete--repliee`, mais aucune regle ne la lisait et
   l'en-tete ne collait pas : le retrait annonce par la charte n'existait pas.
   ========================================================================== */

.entete {
  position: sticky;
  top: 0; z-index: 100;
  padding: 1rem 0 .5rem;
  transition: transform var(--moyen) var(--sortie);
}
.entete-barre {
  transition: box-shadow var(--moyen) ease,
              padding var(--moyen) var(--sortie),
              border-radius var(--moyen) var(--sortie);
}
.entete--posee .entete-barre {
  box-shadow: rgba(0, 0, 0, .09) 0 10px 30px 0, rgba(0, 0, 0, .04) 0 2px 6px 0;
  padding-block: .6rem;
}
.entete--repliee { transform: translate3d(0, calc(-100% - 1rem), 0); }
body.menu-ouvert .entete--repliee { transform: none; }

/* Le logo respire, tres legerement. C'est le seul mouvement permanent du
   chrome : au dela, l'en-tete deviendrait une distraction sur chaque page. */
@keyframes mesa-flotte {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-1.5px) rotate(-1.2deg); }
}
.marque-logo { animation: mesa-flotte 6s ease-in-out infinite; }
.marque-lien:hover .marque-logo { animation-duration: 2.2s; }

/* ==========================================================================
   18. Menu mobile
   --------------------------------------------------------------------------
   Le bouton pointait sur #pied-rubriques, une ancre qui n'existe nulle part :
   sous 62rem le menu ne menait a rien. Il ouvre desormais un vrai panneau.
   ========================================================================== */

.entete-burger {
  border: 0; padding: 0; flex: none;
  transition: transform var(--vite) var(--ressort), background var(--vite) ease;
}
.entete-burger:hover { transform: scale(1.08); }
.entete-burger--actif { background: var(--encre); }
.entete-burger { position: relative; }

/* Trois traits plutot qu un pictogramme fige : le bouton se referme en croix,
   ce qui dit que le panneau est ouvert sans avoir a le lire. */
.entete-burger__trait {
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 2px; border-radius: 2px;
  background: var(--surface);
  transition: transform var(--moyen) var(--ressort), opacity var(--vite) ease;
}
.entete-burger__trait:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
.entete-burger__trait:nth-child(2) { transform: translate(-50%, -50%); }
.entete-burger__trait:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
.entete-burger--actif .entete-burger__trait:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.entete-burger--actif .entete-burger__trait:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(.2); }
.entete-burger--actif .entete-burger__trait:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

.menu-mobile {
  display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--moyen) var(--sortie), opacity var(--vite) ease;
}
.menu-mobile.ouvert { max-height: 44rem; opacity: 1; }
.menu-mobile__boite {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--ombre-flottante);
  margin-top: .6rem;
  padding: .85rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}
.menu-mobile__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.menu-mobile__liste a {
  display: flex; align-items: center; gap: .6rem;
  padding: .62rem .75rem; border-radius: 12px;
  font-size: .9375rem; font-weight: 600;
  transform: translateX(-8px); opacity: 0;
  transition: background var(--vite) ease, transform var(--moyen) var(--sortie), opacity var(--moyen) ease;
}
.menu-mobile.ouvert .menu-mobile__liste a { transform: none; opacity: 1; }
.menu-mobile__liste li:nth-child(1) a { transition-delay: 30ms; }
.menu-mobile__liste li:nth-child(2) a { transition-delay: 60ms; }
.menu-mobile__liste li:nth-child(3) a { transition-delay: 90ms; }
.menu-mobile__liste li:nth-child(4) a { transition-delay: 120ms; }
.menu-mobile__liste li:nth-child(5) a { transition-delay: 150ms; }
.menu-mobile__liste li:nth-child(6) a { transition-delay: 180ms; }
.menu-mobile__liste li:nth-child(7) a { transition-delay: 210ms; }
.menu-mobile__liste li:nth-child(8) a { transition-delay: 240ms; }
.menu-mobile__liste li:nth-child(9) a { transition-delay: 270ms; }
.menu-mobile__liste li:nth-child(10) a { transition-delay: 300ms; }
.menu-mobile__liste a:hover { background: var(--accent-pale); color: var(--accent); }
.menu-mobile__liste .pastille__point { width: 8px; height: 8px; }
.menu-mobile__compte { margin-left: auto; font-size: .75rem; color: var(--encre-3); font-weight: 500; }

@media (max-width: 62rem) {
  .menu-mobile { display: block; }
  /* Panneau ouvert, la page dessous ne doit plus glisser : sinon un geste
     destine au panneau emmene le magazine entier. */
  body.menu-ouvert { overflow: hidden; }
}

/* ==========================================================================
   19. Bande defilante des derniers guides
   --------------------------------------------------------------------------
   La charte l'annoncait, le script l'attendait (fonction `bandeau`, qui
   cherchait un `.bandeau-piste` jamais construit). Elle porte la promesse du
   site : ce qui vient d'etre verifie, en mouvement permanent.
   ========================================================================== */

.bandeau {
  margin-top: clamp(1.5rem, 3.5vw, 2.4rem);
  background: var(--surface);
  border-radius: var(--rayon-pilule);
  box-shadow: var(--ombre);
  display: flex; align-items: stretch;
  overflow: hidden;
}

.bandeau__cle {
  flex: none;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.15rem;
  background: var(--vert); color: var(--surface);
  font-size: .75rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  border-radius: var(--rayon-pilule);
  z-index: 2;
}
.bandeau__vif {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); flex: none;
  animation: mesa-vif 2.4s ease-in-out infinite;
}
@keyframes mesa-vif {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.72); }
}

.bandeau__fenetre {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2.5rem), transparent);
}

.bandeau-piste {
  display: flex; align-items: center;
  flex: none;
  gap: 0;
  animation: mesa-defile 60s linear infinite;
}
@keyframes mesa-defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.bandeau:hover .bandeau-piste,
.bandeau:focus-within .bandeau-piste { animation-play-state: paused; }

/* La copie de la piste doit produire exactement les memes boites de flex que
   l originale, sinon les deux moities different de quelques pixels et le
   raccord de la boucle se voit. display:contents efface le conteneur sans
   toucher au aria-hidden qu il porte. */
.bandeau-piste > span { display: contents; }

.bandeau-piste a {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.05rem;
  font-size: .8125rem; font-weight: 600;
  white-space: nowrap;
  color: var(--encre-2);
  transition: color var(--vite) ease;
}
.bandeau-piste a:hover { color: var(--accent); }
.bandeau-piste a::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
  transition: transform var(--vite) var(--ressort);
}
.bandeau-piste a:hover::before { transform: scale(1.55); }
.bandeau-piste .bandeau-date { color: var(--encre-3); font-weight: 500; }

@media (max-width: 40rem) {
  .bandeau__cle { padding: .55rem .7rem; font-size: .625rem; letter-spacing: .04em; gap: .4rem; }
  .bandeau__vif { width: 6px; height: 6px; }
  .bandeau-piste a { padding: .65rem .8rem; font-size: .75rem; }
  .bandeau__fenetre {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.5rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.5rem), transparent);
  }
}

/* ==========================================================================
   20. Accroche : entree du titre, champ de recherche vivant
   ========================================================================== */

.accroche-anime .mot {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .5em, 0);
  transition: opacity .5s var(--sortie), transform .5s var(--sortie);
  transition-delay: calc(var(--m, 0) * 42ms + 60ms);
}
.accroche-anime.entre .mot { opacity: 1; transform: none; }

.accroche__sous, .champ-recherche, .suggestions {
  animation: mesa-monte .7s var(--sortie) both;
}
.accroche__sous  { animation-delay: .26s; }
.champ-recherche { animation-delay: .34s; }
.suggestions     { animation-delay: .42s; }
@keyframes mesa-monte {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
.js-absent .accroche__sous,
.js-absent .champ-recherche,
.js-absent .suggestions { animation: none; }

.champ-recherche {
  transition: box-shadow var(--moyen) ease, transform var(--moyen) var(--sortie);
}
.champ-recherche:focus-within {
  box-shadow: rgba(22, 120, 92, .18) 0 0 0 4px, rgba(0, 0, 0, .08) 0 14px 40px 0;
  transform: translateY(-2px);
}
.champ-recherche button {
  transition: background var(--vite) ease, transform var(--vite) var(--ressort);
}
.champ-recherche button:hover { transform: scale(1.04); }
.champ-recherche button:active { transform: scale(.97); }

/* ==========================================================================
   21. Pastilles : remplissage au survol
   --------------------------------------------------------------------------
   Un aplat plein qui monte depuis le bas, pas un fondu de couleur. Le point
   de rubrique bat doucement dans la bande d'accueil, ce qui suffit a rendre
   la rangee vivante sans la faire clignoter.
   ========================================================================== */

.pastille { position: relative; overflow: hidden; isolation: isolate; }
.pastille::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent-pale);
  transform: translate3d(0, 101%, 0);
  transition: transform var(--moyen) var(--sortie);
}
a.pastille:hover::after { transform: none; }
.pastille { transition: color var(--vite) ease, transform var(--vite) var(--ressort), box-shadow var(--moyen) ease; }
a.pastille:hover { transform: translateY(-2px); }
a.pastille:active { transform: translateY(0); }
.pastille--pleine::after, .pastille--rubrique::after, .pastille--maj::after { display: none; }

.bande-rubriques .pastille:hover { box-shadow: rgba(0, 0, 0, .1) 0 8px 20px 0; }
.bande-rubriques .pastille__point { animation: mesa-bat 3.4s ease-in-out infinite; }
.bande-rubriques .pastille:nth-child(2n) .pastille__point  { animation-delay: .45s; }
.bande-rubriques .pastille:nth-child(3n) .pastille__point  { animation-delay: .9s; }
.bande-rubriques .pastille:nth-child(5n) .pastille__point  { animation-delay: 1.35s; }
@keyframes mesa-bat {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: .68; }
}
.bande-rubriques .pastille:hover .pastille__point { animation-duration: 1.1s; }

.suggestions .pastille::after { background: var(--vert-pale); }
.suggestions a:hover { border-color: transparent; color: var(--vert); }

/* ==========================================================================
   22. Cartes : zoom du visuel, filet d'accent, titre souligne
   ========================================================================== */

.carte { position: relative; }
.carte__media img { transition: transform .7s var(--sortie); }
.carte:hover .carte__media img, .carte:focus-within .carte__media img { will-change: transform; }
.carte:hover .carte__media img { transform: scale(1.055); }

/* Filet de rubrique qui se tire au survol, du bord gauche vers la droite. */
.carte::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--moyen) var(--sortie);
  z-index: 3;
}
.carte:hover::after { transform: scaleX(1); }
.carte--sans-media::after, .carte--phare::after { background: rgba(255, 255, 255, .55); }

.carte__titre a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--moyen) var(--sortie), color var(--vite) ease;
  padding-bottom: 1px;
}
.carte:hover .carte__titre a { background-size: 100% 1.5px; }
.carte--sans-media .carte__titre a, .carte--phare .carte__titre a { background-image: none; }

.carte__date { transition: color var(--vite) ease; }

/* ==========================================================================
   23. Sections : marque d'accent sur le titre
   ========================================================================== */

.section__tete h2, .bande-chiffres h2, .article-pied h2 {
  position: relative;
  padding-left: .9rem;
}
.section__tete h2::before, .article-pied h2::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .12em;
  width: 4px; border-radius: 2px;
  background: var(--vert);
  transform: scaleY(0); transform-origin: top;
  animation: mesa-tire .5s var(--sortie) .12s forwards;
}
.bande-chiffres h2::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .12em;
  width: 4px; border-radius: 2px; background: var(--surface);
  transform: scaleY(0); transform-origin: top;
  animation: mesa-tire .5s var(--sortie) .12s forwards;
}
@keyframes mesa-tire { to { transform: scaleY(1); } }

.section__lien {
  display: inline-flex; align-items: center; gap: .35rem;
  transition: gap var(--vite) var(--sortie);
}
.section__lien::after {
  content: "\2192";
  transition: transform var(--moyen) var(--ressort);
}
.section__lien:hover::after { transform: translateX(4px); }

/* ==========================================================================
   24. Guide du moment : appel a lire
   ========================================================================== */

.vedette__media img { transition: transform .8s var(--sortie); }
.vedette:hover .vedette__media img { transform: scale(1.04); }
.vedette__media { overflow: hidden; }

.vedette h2 a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--moyen) var(--sortie);
}
.vedette h2 a:hover { color: inherit; background-size: 100% 2px; }

.vedette__lire {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .35rem;
  padding: .72rem 1.35rem;
  border-radius: var(--rayon-pilule);
  background: var(--accent); color: var(--surface);
  font-size: .8125rem; font-weight: 700;
  transition: background var(--vite) ease, transform var(--vite) var(--ressort),
              box-shadow var(--moyen) ease;
}
.vedette__lire:hover {
  color: var(--surface);
  transform: translateY(-2px);
  box-shadow: rgba(0, 0, 0, .14) 0 8px 22px 0;
}
.vedette__lire svg { transition: transform var(--moyen) var(--ressort); }
.vedette__lire:hover svg { transform: translateX(4px); }

.chiffre { transition: transform var(--moyen) var(--sortie), background var(--vite) ease; }
.vedette .chiffre:hover { transform: translateY(-3px); }

/* ==========================================================================
   25. Bande des chiffres verifies
   ========================================================================== */

.bande-chiffres a.chiffre {
  position: relative;
  transition: transform var(--moyen) var(--ressort), background var(--vite) ease;
}
.bande-chiffres a.chiffre:hover { transform: translateY(-4px); }
.bande-chiffres .chiffre__valeur { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   26. Sommaire d'article
   --------------------------------------------------------------------------
   Les guides font quinze cents mots et huit sections. Sans plan, le lecteur qui
   cherche le bareme parcourt tout. Le sommaire est construit par le script a
   partir des titres : le contenu stocke n'est jamais reecrit, il porte des
   liens vendus.
   ========================================================================== */

.article-sommaire {
  margin: 1.75rem 0 0;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1rem 1.15rem 1.1rem;
}
.article-sommaire[hidden] { display: none; }

.sommaire-titre {
  margin: 0 0 .6rem;
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-3);
}
.sommaire-liste {
  list-style: none; margin: 0; padding: 0;
  counter-reset: sommaire;
  display: grid; gap: .1rem;
}
.sommaire-item a {
  display: block;
  padding: .34rem 0 .34rem .85rem;
  font-size: .8125rem; line-height: 1.4;
  color: var(--encre-2);
  border-left: 2px solid var(--bordure);
  transition: color var(--vite) ease, border-color var(--vite) ease,
              padding-left var(--moyen) var(--sortie);
}
.sommaire-item--h3 a { padding-left: 1.6rem; font-size: .78125rem; }
.sommaire-item a:hover { color: var(--accent); border-color: var(--accent); padding-left: 1.1rem; }
.sommaire-item--h3 a:hover { padding-left: 1.85rem; }
.sommaire-item.actif > a {
  color: var(--accent); font-weight: 700;
  border-color: var(--accent);
}

@media (min-width: 76rem) {
  /* Le sommaire prend la gouttiere de gauche, restee vide jusqu'ici. La
     colonne de lecture ne bouge pas d'un pixel : elle reste centree dans ce
     qui reste. */
  body.a-sommaire .article-page > .enveloppe {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  body.a-sommaire .article-page > .enveloppe > * { grid-column: 2; }

  body.a-sommaire .article-page > .enveloppe > .article-sommaire {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: calc(var(--entete-h) + 1.5rem);
    margin: 5.5rem 0 0;
    max-height: calc(100vh - var(--entete-h) - 4rem);
    overflow-y: auto;
    scrollbar-width: thin;
    background: none;
    box-shadow: none;
    padding: 0;
  }
  body.a-sommaire .article-page > .enveloppe > .article-sommaire::-webkit-scrollbar { width: 3px; }
  body.a-sommaire .article-page > .enveloppe > .article-sommaire::-webkit-scrollbar-thumb {
    background: var(--bordure); border-radius: 2px;
  }
}

/* Les titres du corps se laissent viser par une ancre sans passer sous
   l'en-tete collant. */
.article-corps h2, .article-corps h3 { scroll-margin-top: calc(var(--entete-h) + 1.5rem); }

/* Petit repere d'accent devant chaque h2 : la rubrique se rappelle tout au
   long de la lecture, sans repeter son nom. */
.article-corps h2 { position: relative; }
.article-corps h2::before {
  content: ""; position: absolute;
  left: -1.1rem; top: .28em;
  width: 5px; height: .78em; border-radius: 3px;
  background: var(--accent);
}
@media (max-width: 48rem) { .article-corps h2::before { display: none; } }

/* ==========================================================================
   27. Article : entete, visuel, corps
   ========================================================================== */

.article-visuel { overflow: hidden; }
.article-visuel img {
  transition: transform .9s var(--sortie);
}

/* La photo de une ne depend plus du defilement. Elle portait
   `au-defilement--volet`, donc un clip-path ferme que seul l'observateur
   levait : sur un ecran d'ordinateur elle commence sous la ligne de
   flottaison, l'ouverture d'un guide laissait un trou et la photo n'arrivait
   qu'au premier defilement. Le volet reste, mais il se joue au chargement.
   L'etat de repos de la figure est l'image entiere, et l'animation ne porte
   pas de `both` : si elle ne tourne pas du tout (onglet en arriere-plan,
   transition de page, mouvement reduit), la photo est la quand meme. */
.article-visuel { animation: mesa-volet .55s var(--sortie); }
.js-absent .article-visuel { animation: none; }
@keyframes mesa-volet {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.article-entete h1 { animation: mesa-monte .6s var(--sortie) both; }
.article-chapeau   { animation: mesa-monte .6s var(--sortie) .08s both; }
.article-signature { animation: mesa-monte .6s var(--sortie) .16s both; }
.js-absent .article-entete h1,
.js-absent .article-chapeau,
.js-absent .article-signature { animation: none; }

.article-surtitre { animation: mesa-monte .5s var(--sortie) both; }
.js-absent .article-surtitre { animation: none; }

.article-signature { gap: .8rem 1.1rem; }
.article-signature > span {
  display: inline-flex; align-items: center; gap: .4rem;
}
.article-signature > span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .55; flex: none;
}
.article-signature .mention-sponsorise::before { display: none; }

/* Les images du corps s'ouvrent au defilement, comme les visuels de carte. */
.article-corps figure { overflow: hidden; border-radius: var(--rayon); }
.article-corps figure img { transition: transform .7s var(--sortie); }
.article-corps figure:hover img { transform: scale(1.03); }
.article-corps figure figcaption { padding: 0 .1rem; }

.article-corps table { display: block; overflow-x: auto; }
@media (min-width: 48rem) { .article-corps table { display: table; } }

.article-corps a { transition: color var(--vite) ease; }

/* Le bandeau de mise a jour porte le filet de sa rubrique. */
.bandeau-maj {
  border-left: 4px solid var(--accent);
  animation: mesa-monte .6s var(--sortie) .2s both;
}
.js-absent .bandeau-maj { animation: none; }

/* ==========================================================================
   28. Barre de progression
   --------------------------------------------------------------------------
   En transformation plutot qu'en largeur : animer `width` relance la mise en
   page a chaque trame de defilement.
   ========================================================================== */

.barre-lecture {
  position: fixed; inset: 0 auto auto 0;
  height: 3px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  z-index: 150;
  transition: none;
}

/* ==========================================================================
   29. Retour en haut
   ========================================================================== */

.haut-page {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 120;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--encre); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
  box-shadow: rgba(0, 0, 0, .18) 0 8px 24px 0;
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.85);
  pointer-events: none;
  transition: opacity var(--moyen) ease, transform var(--moyen) var(--ressort),
              background var(--vite) ease;
}
.haut-page--visible { opacity: 1; transform: none; pointer-events: auto; }
.haut-page:hover { background: var(--vert); }
.haut-page:active { transform: scale(.93); }

@media (min-width: 76rem) { .haut-page { right: 2rem; bottom: 2rem; } }

/* ==========================================================================
   30. Pages de rubrique
   --------------------------------------------------------------------------
   Une page de rubrique se lisait comme toutes les autres : titre noir, pastille
   pale. Les dix teintes existent, elles doivent s'y voir.
   ========================================================================== */

.archive-entete { position: relative; }
.archive-entete__tete { align-items: baseline; }
.archive-entete h1 { position: relative; padding-bottom: .3rem; }
.archive-entete h1::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 5px; width: 100%; border-radius: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  animation: mesa-souligne .65s var(--sortie) .15s forwards;
}
@keyframes mesa-souligne { to { transform: scaleX(1); } }
.js-absent .archive-entete h1::after { transform: scaleX(1); animation: none; }

.archive-entete .description { animation: mesa-monte .6s var(--sortie) .22s both; }
.js-absent .archive-entete .description { animation: none; }

/* Les rubriques voisines, en pied d'archive : la navigation laterale manquait
   completement, et c'est aussi du maillage interne. */
.rubriques-voisines {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordure);
}
.rubriques-voisines h2 {
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-3); margin-bottom: .9rem;
}
.rubriques-voisines__liste { display: flex; flex-wrap: wrap; gap: .5rem; }

/* La carte large des grilles de rubrique garde son visuel ouvert. */
.liste-archive > .carte { position: relative; }

/* ==========================================================================
   31. Pagination et divers
   ========================================================================== */

.pagination .page-numbers {
  transition: transform var(--vite) var(--ressort), background var(--vite) ease,
              color var(--vite) ease;
}
.pagination a.page-numbers:hover { transform: translateY(-2px); background: var(--vert); color: var(--surface); }

.pied a { transition: color var(--vite) ease, transform var(--vite) var(--sortie); display: inline-block; }
.pied a:hover { transform: translateX(3px); }

.entete-recherche { transition: box-shadow var(--moyen) ease, background var(--vite) ease; }
.entete-recherche:focus-within {
  background: var(--surface);
  box-shadow: rgba(22, 120, 92, .16) 0 0 0 3px;
}

/* ==========================================================================
   32. Mouvement reduit
   --------------------------------------------------------------------------
   Un seul bloc qui coupe tout, plutot que des exceptions dispersees : c'est ce
   qui garantit qu'un ajout futur ne passe pas au travers.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .au-defilement { opacity: 1 !important; transform: none !important; }
  .au-defilement--volet { clip-path: none !important; }
  .accroche-anime .mot { opacity: 1 !important; transform: none !important; }
  .bandeau-piste { animation: none !important; transform: none !important; }
  .bandeau__fenetre { overflow-x: auto; }
  .marque-logo { animation: none !important; }
  .carte:hover .carte__media img,
  .vedette:hover .vedette__media img { transform: none !important; }
  .archive-entete h1::after { transform: scaleX(1) !important; }
  .section__tete h2::before, .article-pied h2::before, .bande-chiffres h2::before {
    transform: scaleY(1) !important;
  }
}

@media print {
  .bandeau, .haut-page, .article-sommaire, .menu-mobile { display: none !important; }
}

/* ==========================================================================
   33. Presentation : echelle, couleur dans le titre, asymetrie
   --------------------------------------------------------------------------
   Trois exigences de la charte v3 n'etaient pas tenues :
   « titres en 700 et 800, interlettrage serre » avec un fort contraste de
   taille, « la couleur va dans le titre, pas seulement sur des etiquettes »,
   et « grille asymetrique plutot que colonnes regulieres » sur l'accueil.
   Le rapport entre le plus grand et le plus petit titre etait de 2 pour 1 :
   tout se valait, donc rien ne ressortait.
   ========================================================================== */

/* --- L'echelle. Du simple au quadruple, et l'interlettrage se resserre a
       mesure que le corps grandit : a 80 px, l'espacement normal fait des
       trous entre les lettres. --------------------------------------------- */

.accroche h1 {
  font-size: clamp(2.5rem, 7.4vw, 5rem);
  line-height: .94;
  letter-spacing: -.045em;
  max-width: 17ch;
  margin: 0 auto .9rem;
}
.accroche { padding-top: clamp(2rem, 5vw, 3rem); }
.accroche__sous {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  max-width: 52ch;
  margin-bottom: 1.9rem;
}

.archive-entete h1 { font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -.04em; line-height: .98; }
.article-entete h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.035em; line-height: 1.02; }
.vedette h2        { font-size: clamp(1.5rem, 3.4vw, 2.4rem); letter-spacing: -.03em; line-height: 1.06; }
.section__tete h2  { font-size: clamp(1.35rem, 3vw, 2.1rem); letter-spacing: -.03em; }
.bande-chiffres h2 { font-size: clamp(1.25rem, 2.8vw, 1.9rem); letter-spacing: -.03em; }
.article-pied h2   { font-size: clamp(1.25rem, 2.6vw, 1.7rem); letter-spacing: -.03em; }
.article-corps h2  { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }

/* --- La couleur dans le titre ------------------------------------------
   Le point vert final : la marque signe la question d'accueil au lieu de la
   laisser finir sur un point d'interrogation noir. */

.accroche h1 em {
  font-style: normal;
  color: var(--vert);
}
.accroche h1::after {
  content: "";
  display: inline-block;
  width: .22em; height: .22em;
  border-radius: 50%;
  background: var(--terre);
  margin-left: .12em;
  vertical-align: baseline;
}

/* Le nom de la rubrique, ecrit dans sa teinte, est ce qui identifie une page
   de rubrique au premier coup d'oeil. Un titre noir souligne de couleur ne le
   faisait qu'a moitie. */
.archive-entete h1 { color: var(--accent); }
.archive-entete h1::after { height: 6px; opacity: .22; }

.archive-entete__tete { gap: 1.1rem; }
.archive-entete .pastille--rubrique {
  font-size: .875rem;
  padding: .55rem 1rem;
  align-self: center;
}

/* Surtitre d'article : la rubrique passe devant le titre, en couleur et en
   capitales, calee sur la colonne de lecture. */
.article-surtitre {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: .85rem;
  color: var(--accent);
  font-size: .8125rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  transition: gap var(--vite) var(--sortie), color var(--vite) ease;
}
.article-surtitre:hover { color: var(--accent-fort); gap: .8rem; }
.article-surtitre__puce {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* Le titre d'article reste a l'encre, mais sa premiere ligne est tiree par un
   filet de rubrique : la couleur entre dans le bloc de titre sans rendre les
   longs titres illisibles, ce qu'un titre entierement colore ferait. */
.article-entete h1 {
  position: relative;
  padding-top: 1.1rem;
}
.article-entete h1::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 3.5rem; height: 5px; border-radius: 3px;
  background: var(--accent);
  transform-origin: left;
  animation: mesa-tire-x .55s var(--sortie) .1s both;
}
@keyframes mesa-tire-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js-absent .article-entete h1::before { animation: none; }

/* --- Grille asymetrique de l'accueil -------------------------------------
   La premiere carte, celle du plus consulte, occupe deux colonnes sur deux
   rangees ; les quatre suivantes remplissent les deux colonnes restantes. Le
   compte tombe juste, donc le pavage se referme sans trou. La classe n'est
   posee par le gabarit que lorsque les cinq cartes sont la : a quatre, on
   retombe sur les colonnes egales plutot que de laisser une case vide. */

@media (min-width: 64rem) {
  .grille--asym { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grille--asym > .carte:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .grille--asym > .carte:first-child .carte__corps {
    padding: 1.6rem 1.6rem 1.7rem;
    justify-content: center;
    gap: .7rem;
  }
  .grille--asym > .carte:first-child .carte__titre { font-size: 1.9rem; line-height: 1.1; }
  .grille--asym > .carte:first-child .carte__extrait { font-size: .9375rem; max-width: 42ch; }
  .grille--asym > .carte:first-child .carte__sur { font-size: .75rem; }
  .grille--asym > .carte:first-child .carte__date { font-size: .8125rem; }
}

/* --- Tuiles de rubrique ---------------------------------------------------
   Les dix teintes n'apparaissaient qu'en points de 9 px : de loin, la rangee
   de pastilles etait grise. Ici chaque rubrique porte son nom dans sa couleur
   et son compte en gros, et le survol retourne la tuile en aplat. */

.tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 40rem) { .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .tuiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.tuile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.15rem 1.15rem 1.05rem;
  min-height: 5.5rem;
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.tuile::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--accent);
}
.tuile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translate3d(0, 101%, 0);
  transition: transform var(--moyen) var(--sortie);
}
.tuile:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, .11) 0 14px 32px 0; }
.tuile:hover::after { transform: none; }

.tuile__nom {
  color: var(--accent);
  font-size: .9375rem; font-weight: 800;
  letter-spacing: -.015em; line-height: 1.2;
  transition: color var(--vite) ease;
}
.tuile__compte {
  flex: none;
  color: var(--encre-3);
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--vite) ease;
}
.tuile:hover .tuile__nom, .tuile:hover .tuile__compte { color: var(--surface); }

.section__note { font-size: .8125rem; color: var(--encre-3); }

/* --- Corps d'article : le rythme de lecture ------------------------------
   Un guide de quinze cents mots avait la meme graisse du premier au dernier
   mot. Le paragraphe d'attaque prend du corps, ce qui donne un point d'entree
   a l'oeil apres le bandeau de mise a jour. */

/* Le paragraphe d attaque prend du corps, ce qui donne un point d entree a
   l oeil. Attention : le premier <p> du corps est le bandeau de mise a jour,
   qui est lui aussi un paragraphe. Le viser le faisait crier plus fort que
   l article. On cible donc le premier paragraphe qui suit le bandeau, et le
   premier tout court seulement quand il n y a pas de bandeau. */
.article-corps > .bandeau-maj + p,
.article-corps > p:first-of-type:not(.bandeau-maj) {
  font-size: 1.28rem;
  line-height: 1.56;
  color: var(--encre);
}
.article-corps > .bandeau-maj + p + p { font-size: 1.15rem; }

.article-corps th {
  background: var(--accent-pale);
  color: var(--accent-fort);
  font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
}
.article-corps tbody tr:nth-child(odd) td { background: var(--surface); }
.article-corps tbody tr:hover td { background: var(--accent-pale); }
.article-corps table {
  background: var(--surface);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.article-corps th:first-child, .article-corps td:first-child { padding-left: 1.1rem; }
.article-corps th:last-child, .article-corps td:last-child { padding-right: 1.1rem; }

/* La liste des sources ferme l'article : c'est la piece qui distingue mesa
   d'un contenu aspire, elle merite d'etre posee et pas noyee. */
.article-corps h2:last-of-type + ul {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.1rem 1.25rem 1.15rem 2.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .article-entete h1::before { animation: none !important; transform: none !important; }
  .tuile:hover { transform: none !important; }
}

/* ==========================================================================
   34. Alternance des cartes sans visuel
   --------------------------------------------------------------------------
   La regle « une carte sans visuel devient un aplat de sa rubrique » sauve la
   grille quand il manque une photo. Mais Impots & Patrimoine compte quarante
   guides dont la moitie sans visuel : la page devenait un edredon de six paves
   violets a la suite, tous du meme ton, tous du meme poids.
   Une carte sur deux passe donc en aplat pale avec l'encre de la rubrique.
   La couleur reste, la respiration revient, et la grille retrouve un rythme
   au lieu d'une masse.
   ========================================================================== */

.carte--sans-media:nth-child(2n) { background: var(--accent-pale); }
.carte--sans-media:nth-child(2n) .carte__titre { color: var(--accent-fort); }
.carte--sans-media:nth-child(2n) .carte__date { color: var(--accent); }
.carte--sans-media:nth-child(2n) .carte__meta { color: var(--encre-3); }
.carte--sans-media:nth-child(2n) .carte__extrait { color: var(--encre-2); }

/* Sur un aplat pale, le filet de survol blanc disparaitrait. */
.carte--sans-media:nth-child(2n)::after { background: var(--accent); }

/* Le piege du survol sur aplat vaut aussi ici : le lien doit avoir sa propre
   regle, sinon le vert global s'applique sur du violet pale. Sur un aplat, le
   survol se signale par un soulignement, jamais par un changement de teinte. */
.carte--sans-media:nth-child(2n) .carte__titre a { color: var(--accent-fort); }
.carte--sans-media:nth-child(2n) .carte__titre a:hover {
  color: var(--accent-fort);
  text-decoration: underline;
  text-underline-offset: .16em;
  text-decoration-thickness: 2px;
}

/* La carte large sans visuel, en tete de cycle sur les pages de rubrique,
   garde l'aplat plein : c'est elle qui porte la couleur de la page. */
@media (min-width: 64rem) {
  .liste-archive > .carte--sans-media:nth-child(5n + 1) {
    background: var(--accent);
  }
  .liste-archive > .carte--sans-media:nth-child(5n + 1) .carte__titre,
  .liste-archive > .carte--sans-media:nth-child(5n + 1) .carte__titre a { color: var(--surface); }
  .liste-archive > .carte--sans-media:nth-child(5n + 1) .carte__date { color: rgba(255, 255, 255, .78); }
  .liste-archive > .carte--sans-media:nth-child(5n + 1) .carte__meta { color: rgba(255, 255, 255, .7); }
  .liste-archive > .carte--sans-media:nth-child(5n + 1) .carte__extrait { color: rgba(255, 255, 255, .88); }
  .liste-archive > .carte--sans-media:nth-child(5n + 1)::after { background: rgba(255, 255, 255, .55); }
}

/* ==========================================================================
   35. Continuite d'une page a l'autre
   --------------------------------------------------------------------------
   Un magazine se parcourt : on ouvre un guide, on revient, on en ouvre un
   autre. Le rechargement blanc entre deux pages casse ce geste et rappelle a
   chaque clic qu'on est sur un site. Les transitions de vue le suppriment :
   l'en-tete reste pose, le contenu monte, et le visuel de la carte cliquee
   devient le visuel de l'article.

   Tout est en amelioration progressive. Un navigateur qui ne connait pas la
   regle navigue exactement comme avant, et la regle elle-meme est enfermee
   dans `no-preference` : sous mouvement reduit, rien ne s'arme.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* La page sortante s'efface vite, l'entrante monte : le sens de lecture est
   celui du site entier, du bas vers le haut. */
::view-transition-old(root) { animation: mesa-vt-sort 130ms var(--sortie) both; }
::view-transition-new(root) { animation: mesa-vt-entre 320ms var(--sortie) both; }
@keyframes mesa-vt-sort  { to   { opacity: 0; } }
@keyframes mesa-vt-entre { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* L'en-tete est extrait du fondu : il garde sa place d'une page a l'autre,
   comme la barre d'une application. C'est ce detail qui fait disparaitre la
   sensation de chargement. */
.entete-barre { view-transition-name: mesa-entete; }
::view-transition-group(mesa-entete) { animation-duration: 300ms; }

/* Le visuel partage. Le script pose `mesa-morph` sur la vignette de la carte
   cliquee, l'article porte le meme nom sur sa photo de une : les deux boites
   n'en font plus qu'une, qui grandit. */
.mesa-morph,
.article-visuel img { view-transition-name: mesa-visuel; }
/* Un nom doit rester unique dans le document. Quand une vignette de la liste
   « A lire aussi » prend le relais au bas d'un article, la une de cet article
   doit rendre le sien, sinon Chrome abandonne toute la transition. */
.mesa-morph-actif .article-visuel img { view-transition-name: none; }

::view-transition-group(mesa-visuel) {
  animation-duration: 380ms;
  animation-timing-function: var(--sortie);
}
/* La vignette est en 16/10, la une en 14/9 : sans `cover`, la photo s'ecrase
   pendant le trajet au lieu de se recadrer. */
::view-transition-old(mesa-visuel),
::view-transition-new(mesa-visuel) {
  height: 100%; width: 100%;
  object-fit: cover;
  border-radius: var(--rayon);
}

/* ==========================================================================
   36. Le repere glissant de la navigation
   --------------------------------------------------------------------------
   Les six rubriques de la barre changeaient de couleur au survol, et rien ne
   reliait la rubrique visee a son systeme de teintes. Une pilule pleine glisse
   maintenant d'un nom a l'autre et prend sa couleur. Sans script, le survol
   garde le comportement d'avant.
   ========================================================================== */

.nav-rubriques { position: relative; }
.nav-rubriques ul { position: relative; z-index: 1; gap: .15rem; align-items: stretch; }
.nav-rubriques li { display: flex; }
.nav-rubriques a {
  position: relative;
  display: flex; align-items: center;
  padding: .38rem .6rem;
  border-radius: var(--rayon-pilule);
}

.nav-rubriques__pilule {
  position: absolute;
  left: 0; top: 50%;
  height: var(--h, 2.1rem);
  width: var(--w, 0px);
  border-radius: var(--rayon-pilule);
  background: var(--accent-pale);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--x, 0px), -50%, 0);
  transition: transform var(--moyen) var(--sortie),
              width var(--moyen) var(--sortie),
              opacity var(--vite) ease,
              background var(--vite) ease;
}
.nav-rubriques__pilule--visible { opacity: 1; }
/* Au premier affichage la pilule ne traverse pas la barre depuis la gauche :
   elle apparait deja en place. */
.nav-rubriques__pilule--pose { transition: opacity var(--vite) ease; }

/* ==========================================================================
   37. Rubriques : un rail sur telephone
   --------------------------------------------------------------------------
   Dix pastilles qui passent a la ligne occupaient quatre rangees et
   repoussaient tout le magazine sous la ligne de flottaison. En rail
   horizontal, elles tiennent sur une ligne et se parcourent au pouce.
   ========================================================================== */

@media (max-width: 48rem) {
  .bande-rubriques {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--gouttiere) * -1);
    padding-inline: var(--gouttiere);
    padding-bottom: .3rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
  }
  .bande-rubriques::-webkit-scrollbar { display: none; }
  .bande-rubriques .pastille { flex: none; scroll-snap-align: start; }

  /* Le champ de la barre etait reduit a un mot coupe entre la marque et le
     burger. Il descend dans le panneau, ou il a toute la largeur. */
  .entete-barre > .entete-recherche { display: none; }
  .entete-barre { padding: .7rem .75rem .7rem 1rem; gap: .7rem; }
}

.menu-mobile__recherche {
  flex: 1 1 auto; width: 100%;
  margin-bottom: .55rem;
  padding: .35rem .35rem .35rem 1rem;
}
.menu-mobile__recherche input[type="search"] { font-size: .9375rem; }
.menu-mobile__recherche button { width: 2.1rem; height: 2.1rem; }

/* ==========================================================================
   38. Sommaire : un curseur qui glisse
   --------------------------------------------------------------------------
   La section courante se signalait par un filet qui changeait de couleur d'un
   coup. Un curseur plein qui descend d'un titre a l'autre donne la position
   dans le guide au lieu de la designer.
   ========================================================================== */

.sommaire-liste { position: relative; }
.sommaire-curseur {
  position: absolute;
  left: 0; top: 0;
  width: 2px; border-radius: 2px;
  height: var(--h, 0px);
  background: var(--accent);
  transform: translate3d(0, var(--y, 0px), 0);
  opacity: 0;
  transition: transform var(--moyen) var(--sortie),
              height var(--moyen) var(--sortie),
              opacity var(--vite) ease;
}
.sommaire-curseur--visible { opacity: 1; }
/* Le filet de l'element actif s'efface sous le curseur, sinon les deux se
   superposent et le trait double d'epaisseur. */
.sommaire-liste--curseur .sommaire-item.actif > a { border-color: transparent; }

/* ==========================================================================
   39. Le ruban des rubriques
   --------------------------------------------------------------------------
   Dix segments, un par rubrique, larges a proportion du nombre de guides. Ce
   n'est pas un ornement : le ruban dit d'un coup d'oeil de quoi le magazine est
   fait, et il pose les dix teintes cote a cote la ou elles se lisent le mieux,
   sur le fond blanc du pied de page.
   ========================================================================== */

.ruban-rubriques {
  display: flex; align-items: center;
  gap: 3px; height: 8px;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.ruban-rubriques span {
  display: block; height: 100%;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
}
/* Le ruban se remplit quand on l'atteint, pas au chargement d'une page dont il
   occupe le tout dernier ecran. Comme ailleurs, l'etat cache est accroche a
   `js-la` : si le script ne se charge pas, le garde-fou du head retire la
   classe et le ruban reste plein. */
.js-la .ruban-rubriques span { transform: scaleX(0); transform-origin: left; }
.js-la .ruban-rubriques.vu span { animation: mesa-ruban .55s var(--sortie) both; }
@keyframes mesa-ruban { to { transform: scaleX(1); } }

/* ==========================================================================
   40. Pied de page : de la presence
   --------------------------------------------------------------------------
   Le pied fermait le site en 13 px gris. Il porte maintenant la marque a sa
   taille, et les rubriques y gardent leur point de couleur : la meme grammaire
   qu'en haut de page, jusqu'au dernier bloc.
   ========================================================================== */

.pied-mot { font-size: 1.55rem; margin-bottom: .75rem; }
.pied-blurb { font-size: .9375rem; }
.pied-rubriques a { display: inline-flex; align-items: center; gap: .5rem; }
.pied-rubriques .pastille__point { width: 7px; height: 7px; transition: transform var(--vite) var(--ressort); }
.pied-rubriques a:hover { color: var(--accent); }
.pied-rubriques a:hover .pastille__point { transform: scale(1.5); }

/* ==========================================================================
   41. Page 404 et pages vides
   --------------------------------------------------------------------------
   Le gabarit portait des classes heritees de la v2 que la feuille ne
   connaissait plus : le zero decoratif s'affichait brut et l'etiquette
   d'erreur passait en texte courant. Le bloc des derniers guides est repasse
   au vocabulaire commun ; seule l'etiquette meritait une regle.
   ========================================================================== */

.etiquette {
  display: inline-block;
  margin: 0 0 .6rem;
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--terre);
}
.vide h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); }
.vide .recherche { margin-top: 1.5rem; }

/* ==========================================================================
   42. Matiere
   --------------------------------------------------------------------------
   Les details qu'on ne regarde pas et qui font la difference entre un site
   monte et un site fini : la selection, l'ascenseur, les chiffres qui
   s'alignent, le texte qui ne laisse pas un mot seul en fin de paragraphe.
   ========================================================================== */

:root { accent-color: var(--vert); }
::selection { background: var(--accent); color: var(--surface); }

html { scrollbar-color: var(--encre-3) transparent; scrollbar-width: thin; }
body { -webkit-tap-highlight-color: transparent; }

p, li, dd, figcaption,
.accroche__sous, .article-chapeau, .carte__extrait, .vedette__chapeau {
  text-wrap: pretty;
}

/* Un tableau de chiffres se lit en colonne : sans chasse fixe, les milliers ne
   s'alignent pas d'une ligne a l'autre. */
.article-corps td, .article-corps th,
.chiffre__valeur, .tuile__compte, .pastille__compte, .menu-mobile__compte {
  font-variant-numeric: tabular-nums;
}
/* Empecher un montant de se couper en deux lignes demanderait `nowrap` sur les
   cellules, ce qui ferait deborder la colonne de lecture des que l'une d'elles
   porte une phrase. La chasse fixe suffit a aligner les colonnes. */

/* Les chiffres verifies portent la promesse du site : ils meritent le corps
   qui va avec, et un filet qui detache la tuile de l'aplat vert. */
.bande-chiffres .chiffre__valeur { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.bande-chiffres .chiffre { border: 1px solid rgba(255, 255, 255, .12); }

/* Le point terre cuite de la question d'accueil arrive apres les mots, comme
   une signature qu'on pose a la fin. */
.js-la .accroche h1::after {
  transform: scale(0);
  animation: mesa-point .5s var(--ressort) .55s forwards;
}
@keyframes mesa-point { to { transform: scale(1); } }

/* ==========================================================================
   43. Mouvement reduit : les ajouts de la v3.4
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Ceinture et bretelles : la regle @view-transition est deja enfermee dans
     `no-preference`, mais si un navigateur venait a ignorer la condition, les
     durees tombent a rien plutot que de faire glisser une page a quelqu'un qui
     a demande le contraire. Les noms sont enumeres : `::view-transition-*(*)`
     n'est pas compris partout. */
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-group(mesa-entete), ::view-transition-old(mesa-entete), ::view-transition-new(mesa-entete),
  ::view-transition-group(mesa-visuel), ::view-transition-old(mesa-visuel), ::view-transition-new(mesa-visuel) {
    animation-duration: 1ms !important;
  }

  .nav-rubriques__pilule { display: none; }
  .sommaire-curseur { transition: none !important; }
  .js-la .ruban-rubriques span { animation: none !important; transform: none !important; }
  .js-la .accroche h1::after { animation: none !important; transform: none !important; }
  .entete-burger__trait { transition: none !important; }
}

/* ==========================================================================
   44. Barre des rubriques : les dix, et « Plus » pour le reste
   --------------------------------------------------------------------------
   Il n'en tenait que six, sur deux lignes, et quatre rubriques n'etaient
   accessibles de nulle part sur ordinateur. La barre porte maintenant les dix
   en libelles courts ; quand la largeur manque, le script range les dernieres
   sous « Plus ». Sans script, la liste passe a la ligne : rien ne se perd.
   ========================================================================== */

/* Base nulle : la barre prend exactement la place laissee par la marque et la
   recherche, quelle que soit la longueur de son contenu. C'est cette largeur
   que le script mesure. */
.nav-rubriques {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  gap: .15rem;
}
.nav-rubriques__liste { flex-wrap: wrap; justify-content: center; }
.nav-rubriques__liste a { white-space: nowrap; }
/* Avant le calcul, le surplus est coupe plutot que superpose a la recherche,
   et coupe a droite seulement : centree, la liste perdait aussi sa premiere
   rubrique. Les 3 px rendent la place prise par l'anneau de focus. */
.js-la .nav-rubriques__liste {
  flex-wrap: nowrap; min-width: 0;
  justify-content: flex-start;
  overflow: hidden;
  padding: 3px; margin: -3px;
}
.nav-rubriques .nav-deborde { display: none; }

.nav-plus { position: relative; flex: none; display: flex; }
.nav-plus[hidden] { display: none; }

.nav-plus__bouton {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .3rem;
  padding: .38rem .6rem;
  border: 0; border-radius: var(--rayon-pilule);
  background: none; cursor: pointer;
  font-family: var(--ui); font-size: .875rem; font-weight: 500; color: var(--encre);
  white-space: nowrap;
}
.nav-plus__bouton:hover,
.nav-plus.ouvert .nav-plus__bouton { color: var(--accent); }
.nav-plus.courant .nav-plus__bouton { color: var(--accent); font-weight: 700; }
.nav-plus__chevron { transition: transform var(--moyen) var(--ressort); }
.nav-plus.ouvert .nav-plus__chevron { transform: rotate(180deg); }

.nav-rubriques .nav-plus__panneau {
  position: absolute; z-index: 5;
  top: calc(100% + 1.15rem); right: -.5rem;
  display: grid; gap: .1rem;
  min-width: 16.5rem;
  margin: 0; padding: .5rem;
  list-style: none;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, .1) 0 14px 40px 0, rgba(0, 0, 0, .05) 0 2px 8px 0;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, -6px, 0);
  transition: opacity var(--vite) ease, transform var(--moyen) var(--sortie),
              visibility 0s linear var(--moyen);
}
/* Pont invisible entre le bouton et le panneau : sans lui, la souris qui
   descend traverse un vide, quitte le menu, et le referme. */
.nav-rubriques .nav-plus__panneau::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.3rem;
}
.nav-plus.ouvert .nav-plus__panneau {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--vite) ease, transform var(--moyen) var(--sortie), visibility 0s;
}
.nav-rubriques .nav-plus__panneau li { display: block; }
.nav-rubriques .nav-plus__panneau li[hidden] { display: none; }
.nav-rubriques .nav-plus__panneau a {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem; border-radius: 12px;
  font-size: .9rem; font-weight: 600;
  transition: background var(--vite) ease, color var(--vite) ease;
}
.nav-rubriques .nav-plus__panneau a:hover,
.nav-rubriques .nav-plus__panneau a:focus-visible { background: var(--accent-pale); color: var(--accent); }
.nav-rubriques .nav-plus__panneau .courant > a { color: var(--accent); }
.nav-plus__panneau .pastille__point { width: 8px; height: 8px; }
.nav-plus__compte {
  margin-left: auto; padding-left: 1.25rem;
  font-size: .75rem; font-weight: 500; color: var(--encre-3);
}

/* Menu ouvert, l'en-tete ne se replie pas sous la souris. */
body.nav-plus-ouvert .entete--repliee { transform: none; }

/* La regle d'affichage ci-dessus ne doit pas rallumer la barre sous 62rem,
   ou c'est le panneau mobile qui porte les rubriques. */
@media (max-width: 62rem) {
  .nav-rubriques { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-plus__chevron,
  .nav-rubriques .nav-plus__panneau { transition: none !important; }
}