@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   LE CARNET DU CHINEUR — système de design V17 « Éditorial »
   ───────────────────────────────────────────────────────────────────────
   Direction : luxe contemporain, minimalisme sophistiqué, magazine
   international. Noir dominant, ivoire, graphite, champagne en accent rare.

   ━━━ LA CONTRAINTE QUI FONDE TOUT ━━━
   Il n'existe AUCUNE photographie. Pas une : `events` n'a pas de colonne
   image, le flux DataTourisme national n'en fournit pas (ses 15 colonnes
   ont été relues), le site n'héberge que ses favicons. Coller des photos
   génériques de brocante sur 72 547 événements qui n'ont rien à voir
   serait une fabrication. On fait donc du luxe TYPOGRAPHIQUE — la vraie
   tradition du haut de gamme imprimé — et chaque événement reçoit une
   identité générée depuis ses propres données (app/Cover.php).

   ━━━ TYPOGRAPHIE ━━━
   Bodoni Moda : un vrai didone, à fort contraste, territoire des
   couvertures de magazine. Réservé au titrage et aux chiffres.
   Jost : géométrique et précise, dans la lignée des maisons de mode.
   Interface, libellés, textes.

   ━━━ PRINCIPE DE RETENUE ━━━
   Le champagne n'apparaît QUE sur les filets, les petites capitales et un
   accent par écran. S'il est partout, il ne vaut rien.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. Jetons ─────────────────────────── */

:root {
  /* Noir dominant, dans les deux thèmes. Parti pris : une plateforme de
     découverte se regarde comme une salle plongée dans le noir, pas comme
     une page de papier. */
  --noir:         #0a0a0b;
  --noir-2:       #121214;
  --noir-3:       #1a1a1d;
  --graphite:     #26262a;
  --graphite-2:   #35353b;

  --ivoire:       #f2efe9;
  --ivoire-2:     #b8b4ac;
  --ivoire-3:     #827e76;

  /* Champagne : l'accent rare. Jamais en aplat plein. */
  --champagne:    #c9a227;
  --champagne-lo: #9d7d1c;
  --champagne-hi: #e0bf5c;

  /* Surfaces claires, réservées à la lecture longue */
  --papier:       #f4f1ea;
  --papier-2:     #e7e3da;
  --encre:        #15151a;

  --filet:        rgba(242, 239, 233, .13);
  --filet-fort:   rgba(242, 239, 233, .3);

  --focus:        #e0bf5c;

  --display: "Bodoni Moda", Didot, "Bodoni MT", Georgia, serif;
  --sans:    "Jost", Futura, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle fluide. L'écart entre niveaux est volontairement grand : c'est
     ce contraste d'échelle qui fait l'éditorial. */
  --t-xs:   .6875rem;
  --t-sm:   .8125rem;
  --t-md:   .9375rem;
  --t-lg:   clamp(1.0625rem, .3vw + 1rem, 1.25rem);
  --t-xl:   clamp(1.4rem,   1vw   + 1.1rem, 2rem);
  --t-2xl:  clamp(2rem,     2.6vw + 1.2rem, 3.4rem);
  --t-3xl:  clamp(2.8rem,   5.5vw + 1.1rem, 6.5rem);
  --t-4xl:  clamp(3.2rem,   8.5vw + .8rem,  8.5rem);

  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2.25rem; --s7: 3.5rem;  --s8: 5.5rem;  --s9: 8rem;

  --wrap:      1340px;
  --wrap-text: 64ch;
  --header-h:  72px;
  --nav-h:     64px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Thème clair : on n'inverse PAS le site. Il reste une scène sombre ;
   seules les zones de lecture longue passent sur papier. Un visiteur en
   mode clair ne doit pas recevoir un autre site, juste une autre lumière. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --papier: #faf8f4; --papier-2: #efece4; }
}

/* ─────────────────────────── 2. Socle ─────────────────────────── */

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

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

/* Toute animation est une COURTOISIE, jamais une condition d'accès au
   contenu : si l'utilisateur demande moins de mouvement, tout s'affiche
   immédiatement et rien ne reste caché. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--ivoire);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.65;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
@media (min-width: 960px) { body { padding-bottom: 0; } }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  margin: 0 0 var(--s4);
  letter-spacing: -.02em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); letter-spacing: -.01em; }
h4 { font-size: var(--t-lg); letter-spacing: 0; }
p  { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; height: auto; }

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

.ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.17em; color: inherit; }
.ico--lg { width: 1.45em; height: 1.45em; }

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 300;
  padding: var(--s3) var(--s5);
  background: var(--champagne); color: var(--noir);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--t-xs);
}
.skip:focus { top: var(--s4); }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }
@media (min-width: 900px) { .wrap { padding-inline: var(--s7); } }
.prose { max-width: var(--wrap-text); }

/* Petite capitale espacée : le repère de niveau du système. Un filet
   champagne la précède — seul endroit où l'or est permanent, et il ne
   fait qu'un trait de 26 px. */
.eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ivoire-2); margin: 0 0 var(--s4);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--champagne); flex: none; }

/* ───────── 3. Apparitions au défilement ─────────
   Opacité + 14 px. Au-delà, le mouvement se remarque lui-même au lieu de
   servir la lecture. */
[data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ─────────────────────────── 4. En-tête ─────────────────────────── */

.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
/* L'en-tête ne se pose qu'une fois le haut de page quitté : sur le hero il
   flotte et laisse la composition respirer. */
.hdr.is-stuck {
  background: color-mix(in srgb, var(--noir) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: var(--filet);
}
.hdr__in {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--header-h);
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5);
}
@media (min-width: 900px) { .hdr__in { padding-inline: var(--s7); } }

.brand {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--display); font-size: 1.05rem;
  letter-spacing: .01em; color: var(--ivoire); white-space: nowrap;
}
.brand .ico { color: var(--champagne); width: 1.3em; height: 1.3em; }
/* Le nom reste TOUJOURS visible. Une version précédente le masquait sous
   560 px : un téléphone n'affichait qu'une boussole, sans marque. */
.brand__text { font-size: .92em; }
@media (min-width: 560px) { .brand__text { font-size: 1em; } }

.hdr__spacer { flex: 1; }
.hdr__links { display: none; gap: var(--s5); align-items: center; }
@media (min-width: 960px) { .hdr__links { display: flex; } }

/* Lien de menu : petite capitale et filet champagne qui se déploie. Pas de
   pastille, pas de fond — le luxe se signale par le trait. */
.hdr__link {
  position: relative; padding: var(--s2) 0;
  /* flex + gap : sans cela l'icône venait coller au libellé, et
     « ⊞EXPLORER » se lisait comme un seul mot. */
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivoire-2); transition: color .3s var(--ease);
}
.hdr__link .ico { opacity: .6; width: 1em; height: 1em; }
.hdr__link:hover .ico, .hdr__link[aria-current="page"] .ico { opacity: 1; }
.hdr__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--champagne);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.hdr__link:hover { color: var(--ivoire); }
.hdr__link:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr__link[aria-current="page"] { color: var(--ivoire); }
.hdr__link[aria-current="page"]::after { transform: scaleX(1); }

.hdr__icon {
  display: grid; place-items: center; min-width: 44px; min-height: 44px;
  color: var(--ivoire-2); transition: color .3s var(--ease);
}
.hdr__icon:hover { color: var(--champagne); }

/* ─────────────────────────── 5. Boutons ─────────────────────────── */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s3); min-height: 52px; padding: var(--s3) var(--s6);
  border: 1px solid var(--filet-fort); background: transparent; color: var(--ivoire);
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
/* Le fond se remplit par la gauche : un geste, pas un clignotement. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ivoire);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.btn:hover { color: var(--noir); border-color: var(--ivoire); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }

.btn--primary { background: var(--ivoire); color: var(--noir); border-color: var(--ivoire); }
.btn--primary::before { background: var(--champagne); }
.btn--primary:hover { color: var(--noir); border-color: var(--champagne); }

.btn--gold { border-color: var(--champagne-lo); color: var(--champagne); }
.btn--gold::before { background: var(--champagne); }
.btn--gold:hover { color: var(--noir); border-color: var(--champagne); }

.btn--block { width: 100%; }
.btn--sm { min-height: 42px; padding-inline: var(--s4); }

/* ───────── 6. Le hero : l'impact immédiat ───────── */

.hero {
  position: relative; min-height: min(94vh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + var(--s8)) 0 var(--s7);
  overflow: hidden;
}
/* Deux halos très diffus : de la profondeur dans le noir, sans jamais
   devenir un « dégradé de fond » reconnaissable. */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 92%;
  background:
    radial-gradient(42% 58% at 18% 32%, rgba(201,162,39,.14), transparent 70%),
    radial-gradient(38% 52% at 82% 16%, rgba(140,120,200,.10), transparent 70%);
  pointer-events: none;
}
.hero__in { position: relative; width: 100%; }

.hero__title {
  font-size: var(--t-4xl); line-height: .93; letter-spacing: -.035em;
  margin: 0 0 var(--s5); max-width: 15ch;
}
.hero__title em { font-style: italic; color: var(--champagne-hi); }
.hero__lede {
  font-size: var(--t-lg); color: var(--ivoire-2);
  max-width: 48ch; margin-bottom: var(--s6); font-weight: 300;
}

/* Compteurs : chiffres en display sur une ligne de filets. La preuve de
   l'échelle du catalogue, posée comme un ours de revue. */
.hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7);
  padding-top: var(--s5); border-top: 1px solid var(--filet);
}
.hero__stat { display: flex; flex-direction: column; gap: 3px; }
.hero__num {
  font-family: var(--display); font-size: var(--t-xl); color: var(--ivoire);
  font-variant-numeric: tabular-nums lining-nums; line-height: 1;
}
.hero__lbl {
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ivoire-3);
}

/* ───────── 7. Recherche ─────────
   Une ligne, un filet, rien d'autre. Sur une plateforme de découverte, le
   champ doit ressembler à une invitation, pas à un formulaire. */
.search {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--filet-fort);
  transition: border-color .4s var(--ease); max-width: 680px;
}
.search:focus-within { border-bottom-color: var(--champagne); }
.search__field {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ivoire);
  font-family: var(--display); font-size: var(--t-xl); padding: var(--s3) 0;
  letter-spacing: -.01em;
}
.search__field::placeholder { color: var(--ivoire-3); font-style: italic; }
/* `outline:none` supprimait tout repère clavier : seul le filet du
   conteneur changeait, ce qui ne suffit pas. On rend l'anneau au champ
   lui-même, décalé pour ne pas écraser le filet. */
.search__field:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.search__go {
  display: grid; place-items: center; min-width: 52px;
  background: transparent; border: 0; color: var(--ivoire-2);
  cursor: pointer; transition: color .3s var(--ease);
}
.search__go:hover { color: var(--champagne); }

/* ───────── 8. Pastilles de filtre ───────── */

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.chips--scroll {
  flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
  margin-inline: calc(-1 * var(--s5)); padding-inline: var(--s5); padding-bottom: var(--s3);
  scrollbar-width: none;
}
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll > li { scroll-snap-align: start; }
@media (min-width: 900px) {
  .chips--scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0; }
}
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 42px; padding: var(--s2) var(--s4);
  border: 1px solid var(--filet); color: var(--ivoire-2);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.chip:hover { color: var(--ivoire); border-color: var(--filet-fort); }
.chip[aria-current="page"] { background: var(--ivoire); color: var(--noir); border-color: var(--ivoire); }
.chip .ico { opacity: .7; }
.chip[aria-current="page"] .ico { opacity: 1; }
.chip__n { font-variant-numeric: tabular-nums; opacity: .55; }

/* ───────── 9. Couverture générée ─────────
   Pas de photo. Chaque événement reçoit une composition déterministe
   tirée de sa catégorie et de son identifiant : six variantes, une
   rotation et un décalage propres. Voir app/Cover.php. */
.cover {
  position: relative; display: block; overflow: hidden;
  background: var(--ink, var(--graphite)); isolation: isolate;
}
/* Grain très fin : empêche l'aplat de paraître plat en grand format. */
.cover::after {
  content: ""; position: absolute; inset: 0; z-index: 2; opacity: .5; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 0);
  background-size: 3px 3px;
}
.cover__motif {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  color: var(--accent, var(--ivoire-3)); opacity: .22;
  transform: rotate(var(--angle, 0deg)) translateX(var(--shift, 0));
  transition: transform 1.1s var(--ease), opacity .6s var(--ease);
}
.cover__glyph { width: 68%; height: 68%; }
.cover--v1 .cover__motif { opacity: .17; }
.cover--v2 .cover__glyph { width: 108%; height: 108%; }
.cover--v3 .cover__motif { justify-items: end; opacity: .14; }
.cover--v3 .cover__glyph { width: 92%; height: 92%; }
.cover--v4 .cover__glyph { width: 52%; height: 52%; }
.cover--v5 .cover__motif { align-items: end; opacity: .19; }
.cover--v5 .cover__glyph { width: 86%; height: 86%; }

/* La date, posée comme un folio de magazine.
   `line-height: 1` tronquait le chiffre : les chiffres bas-de-casse de
   Bodoni Moda débordent de leur boîte de ligne, et le bas du « 7 » était
   sectionné. On donne de l'air à la boîte et on force les chiffres
   capitales, qui s'alignent sur la hauteur de capitale. */
.cover__date {
  position: absolute; z-index: 3; left: var(--s4); bottom: var(--s3);
  display: flex; align-items: baseline; gap: var(--s2);
  color: var(--ivoire); line-height: 1.12;
}
.cover__day {
  font-family: var(--display); font-size: 2.4rem; letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.05; display: block;
}
.cover__mon {
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--ivoire-2);
}
.cover--xl { aspect-ratio: 16 / 10; }
.cover--xl .cover__day { font-size: clamp(3.4rem, 7vw, 6rem); }
.cover--xl .cover__date { left: var(--s6); bottom: var(--s5); }
/* 16/10 et non 4/3 : sur deux colonnes, un format 4/3 produisait un
   champ vide d'une hauteur démesurée. */
.cover--lg { aspect-ratio: 16 / 10; }
.cover--lg .cover__day { font-size: 3.2rem; }
.cover--sm { aspect-ratio: 3 / 2; }

/* ───────── 10. Cartes d'événement ─────────
   Plusieurs formats, un seul composant. Le format suit la place disponible
   et l'importance éditoriale, pas le type de données. */

.feed { display: grid; gap: var(--s5); padding: 0; margin: 0; list-style: none; }
@media (min-width: 700px)  { .feed { grid-template-columns: repeat(2, 1fr); gap: var(--s6); } }
@media (min-width: 1100px) { .feed { grid-template-columns: repeat(3, 1fr); } }

/* Grille asymétrique : la première carte prend deux colonnes et deux
   rangées — la hiérarchie d'une double page de magazine. */
@media (min-width: 700px) {
  .feed--editorial > li:first-child { grid-column: span 2; grid-row: span 2; }
  /* La carte de tête occupe deux rangées : sans cela, `margin-top:auto`
     sur les métadonnées creusait un vide de 200 px entre le titre et le
     bas de carte. On fait absorber la hauteur excédentaire par la
     couverture, qui est précisément faite pour ça. */
  .feed--editorial > li:first-child .card__media { flex: 1; display: flex; min-height: 0; }
  .feed--editorial > li:first-child .card__media .cover { aspect-ratio: auto; flex: 1; min-height: 320px; }
}

.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__link { position: absolute; inset: 0; z-index: 5; }

.card__media { position: relative; overflow: hidden; margin-bottom: var(--s4); }
/* Zoom photographique très léger : 1,04. Au-delà, l'effet se voit. */
.card__media .cover { transition: transform 1.2s var(--ease); }
.card:hover .card__media .cover { transform: scale(1.04); }
.card:hover .cover__motif { opacity: .32; }

.card__kicker {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--champagne); margin-bottom: var(--s2);
}
.card__kicker .ico { width: 1.15em; height: 1.15em; }

.card__title {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 400;
  line-height: 1.14; letter-spacing: -.015em; margin: 0 0 var(--s3);
  color: var(--ivoire);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .3s var(--ease);
}
.card:hover .card__title { color: var(--champagne-hi); }

.feed--editorial > li:first-child .card__title { font-size: var(--t-2xl); }
.feed--editorial > li:first-child .card__excerpt { display: -webkit-box; }

.card__excerpt {
  display: none; color: var(--ivoire-2); font-size: var(--t-sm);
  font-weight: 300; margin-bottom: var(--s3);
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ivoire-3); margin-top: auto;
  padding-top: var(--s3); border-top: 1px solid var(--filet);
}
.card__meta .ico { width: 1.1em; height: 1.1em; opacity: .7; }
.card__meta b { font-weight: 500; color: var(--ivoire-2); }
.card__tags { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }

.tag {
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ivoire-3); padding: 3px var(--s2); border: 1px solid var(--filet);
}
.tag--now  { color: var(--champagne); border-color: var(--champagne-lo); }
.tag--soon { color: var(--ivoire-2); }
.tag--off  { color: var(--ivoire-3); text-decoration: line-through; }

.fav {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 10;
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 0; background: color-mix(in srgb, var(--noir) 55%, transparent);
  backdrop-filter: blur(8px); color: var(--ivoire); cursor: pointer;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), color .25s;
}
.card:hover .fav, .fav:focus-visible, .fav[aria-pressed="true"] { opacity: 1; transform: none; }
.fav:hover, .fav[aria-pressed="true"] { color: var(--champagne); }
.fav[aria-pressed="true"] .ico { fill: currentColor; }
@media (hover: none) { .fav { opacity: 1; transform: none; } }

/* Format horizontal — sélections secondaires */
.card--row { flex-direction: row; gap: var(--s4); align-items: flex-start; }
.card--row .card__media { flex: 0 0 120px; margin-bottom: 0; }
.card--row .card__media .cover { aspect-ratio: 1; }
.card--row .card__title { font-size: var(--t-md); -webkit-line-clamp: 2; }
.card--row .card__meta { border-top: 0; padding-top: var(--s2); }
.card--row .fav { display: none; }

/* ───────── 11. Sections ───────── */

.sec { padding-block: var(--s8); }
.sec--tight { padding-block: var(--s6); }
.sec--rule { border-top: 1px solid var(--filet); }
/* Une section qui suit immédiatement un hero de hub n'a pas à rouvrir
   un intervalle complet : le hero a déjà posé la respiration. */
.ev-hero + .sec { padding-top: var(--s6); }

.sec__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s5); margin-bottom: var(--s6); flex-wrap: wrap;
}
.sec__title { margin: 0; }
.sec__more {
  display: inline-flex; align-items: center; gap: var(--s2);
  /* 44 px de haut : le lien faisait 23 px, sous le seuil tactile. */
  min-height: 44px;
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivoire-2); padding-bottom: var(--s1);
  border-bottom: 1px solid var(--filet-fort);
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.sec__more:hover { color: var(--champagne); border-color: var(--champagne); gap: var(--s3); }
.sec__count {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivoire-3); font-variant-numeric: tabular-nums;
}

/* « En bref » : l'encart factuel que les moteurs de réponse peuvent citer. */
.brief {
  padding: var(--s4) 0 var(--s4) var(--s5);
  border-left: 1px solid var(--champagne);
  max-width: 60ch; margin-bottom: var(--s6);
}
.brief__t {
  font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase;
  color: var(--champagne); margin: 0 0 var(--s3);
}
.brief p { margin: 0; color: var(--ivoire-2); font-size: var(--t-lg); font-weight: 300; line-height: 1.5; }
.brief strong { color: var(--ivoire); font-weight: 400; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: calc(var(--header-h) + var(--s5)) 0 0; margin: 0; list-style: none;
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ivoire-3);
}
.crumbs li { display: flex; align-items: center; gap: var(--s2); }
.crumbs li + li::before { content: "—"; color: var(--filet-fort); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ivoire-2); }
.crumbs a:hover { color: var(--champagne); }
.crumbs [aria-current] { color: var(--ivoire); }

/* Index de liens — le maillage interne, traité comme un sommaire de revue */
.links { display: grid; padding: 0; margin: 0; list-style: none; }
@media (min-width: 700px)  { .links { grid-template-columns: repeat(2, 1fr); column-gap: var(--s7); } }
@media (min-width: 1100px) { .links { grid-template-columns: repeat(3, 1fr); } }
.links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 56px; padding: var(--s3) 0;
  border-bottom: 1px solid var(--filet);
  color: var(--ivoire-2); font-size: var(--t-sm);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.links a:hover { color: var(--champagne); padding-left: var(--s3); }
.links a > span { display: inline-flex; align-items: center; gap: var(--s3); min-width: 0; }
.links em {
  font-style: normal; font-size: var(--t-xs); color: var(--ivoire-3);
  font-variant-numeric: tabular-nums; letter-spacing: .1em;
}

/* ───────── 12. États vides ───────── */

.empty { padding: var(--s9) var(--s5); text-align: center; border: 1px solid var(--filet); }
.empty__icon { color: var(--filet-fort); margin-bottom: var(--s4); }
.empty__icon .ico { width: 2.4rem; height: 2.4rem; }
.empty__t { font-family: var(--display); font-size: var(--t-xl); margin-bottom: var(--s3); }
.empty p { color: var(--ivoire-2); max-width: 44ch; margin-inline: auto; font-weight: 300; }
.empty__actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s5); }

/* ───────── 13. Fiche événement ───────── */

.ev-hero { position: relative; padding-bottom: var(--s5); }
.ev-hero__cover { position: relative; margin-bottom: var(--s6); }
.ev-hero__cover .cover { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .ev-hero__cover .cover { aspect-ratio: 4 / 3; } }

.ev-hero__kicker {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--champagne); margin-bottom: var(--s4);
}
.ev-hero h1 { max-width: 20ch; margin-bottom: var(--s5); }
.ev-hero__lede { font-size: var(--t-lg); color: var(--ivoire-2); max-width: 54ch; font-weight: 300; }

/* Informations pratiques : une table de folio, pas des cartes. */
.facts { display: grid; margin: var(--s7) 0; padding: 0; border-top: 1px solid var(--filet); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); column-gap: var(--s6); } }
.fact {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4) 0; border-bottom: 1px solid var(--filet);
}
.fact__icon { color: var(--champagne); flex: none; padding-top: 3px; }
.fact dt {
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivoire-3); margin-bottom: var(--s1);
}
.fact dd { margin: 0; color: var(--ivoire); font-size: var(--t-md); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0; }
.actions .btn { flex: 1 1 auto; min-width: 190px; }

.credit {
  margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--filet);
  font-size: var(--t-xs); letter-spacing: .1em; color: var(--ivoire-3);
}
.credit a { color: var(--ivoire-2); border-bottom: 1px solid var(--filet); }
.credit a:hover { color: var(--champagne); }

/* ───────── 14. Carte géographique ───────── */

.map {
  height: min(72vh, 620px); position: relative; overflow: hidden;
  border: 1px solid var(--filet); background: var(--noir-2);
}
.map__ph {
  position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s3);
  color: var(--ivoire-3); text-align: center; padding: var(--s5);
}

/* ───────── 15. Pagination ───────── */

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s5); margin-top: var(--s8); }
.pager__state {
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivoire-3); font-variant-numeric: tabular-nums;
}

/* ───────── 16. Barre mobile ───────── */

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: flex;
  background: color-mix(in srgb, var(--noir) 92%, transparent);
  backdrop-filter: blur(18px); border-top: 1px solid var(--filet);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 960px) { .tabs { display: none; } }
.tabs__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: var(--nav-h); padding: var(--s2) var(--s1);
  color: var(--ivoire-3);
  font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-align: center;
}
.tabs__item .ico { width: 1.2rem; height: 1.2rem; }
.tabs__item[aria-current="page"] { color: var(--champagne); }

/* ───────── 17. Pied de page ───────── */

.ftr { margin-top: var(--s9); padding: var(--s8) 0 var(--s6); border-top: 1px solid var(--filet); }
.ftr__cols { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ftr h2 {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em; color: var(--champagne); margin-bottom: var(--s4);
}
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; }
.ftr a {
  display: inline-flex; align-items: center; min-height: 38px;
  color: var(--ivoire-2); font-size: var(--t-sm); font-weight: 300;
  transition: color .3s var(--ease);
}
.ftr a:hover { color: var(--champagne); }
.ftr__legal {
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--filet);
  color: var(--ivoire-3); font-size: var(--t-xs); letter-spacing: .08em;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: center;
}
.ftr__legal a { min-height: 38px; }

/* ───────── 18. Publicité ───────── */

.ad {
  margin-block: var(--s8); min-height: 110px;
  display: flex; flex-direction: column; gap: var(--s2);
  align-items: center; justify-content: center;
  border: 1px solid var(--filet); overflow: hidden;
}
.ad__label {
  align-self: flex-start; padding: var(--s2) var(--s3);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivoire-3);
}
.ad--inline { min-height: 250px; }

/* ───────── 19. Contenu rédactionnel ─────────
   Seul endroit qui passe sur papier : un article de 1 500 mots en ivoire
   sur noir fatigue, et ces guides sont faits pour être lus. */

.reading { background: var(--papier); color: var(--encre); }
.reading h1, .reading h2, .reading h3 { color: var(--encre); }
.reading .eyebrow { color: #6b6256; }
.reading .crumbs { color: #7c7468; }
.reading .crumbs a { color: #5c554b; }
.reading .crumbs a:hover { color: #7d5f0e; }
.reading .crumbs [aria-current] { color: var(--encre); }
.reading .crumbs li + li::before { color: rgba(21,21,26,.25); }
.reading .article a { color: #7d5f0e; border-bottom: 1px solid rgba(125,95,14,.38); }
.reading .article a:hover { border-bottom-color: #7d5f0e; }
.reading .sec__title, .reading .sec__count { color: var(--encre); }
.reading .faq summary { color: var(--encre); }
.reading .pill { color: #5c554b; border-color: rgba(21,21,26,.2); }

.article { max-width: var(--wrap-text); font-size: 1.0625rem; line-height: 1.78; }
.article > p:first-of-type { font-size: 1.2rem; line-height: 1.6; font-weight: 300; }
.article h2 { margin-top: var(--s8); font-size: var(--t-xl); }
.article h3 { margin-top: var(--s6); font-size: var(--t-lg); }
.article ul, .article ol { padding-left: var(--s5); margin-bottom: var(--s5); }
.article li { margin-bottom: var(--s2); }
.article table { width: 100%; border-collapse: collapse; margin-bottom: var(--s6); font-size: var(--t-sm); }
.article th, .article td {
  padding: var(--s3); text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(21,21,26,.14);
}
.article th { font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: var(--t-xs); }
.article blockquote {
  margin: var(--s6) 0; padding-left: var(--s5); border-left: 1px solid #c9a227;
  font-family: var(--display); font-size: var(--t-lg); font-style: italic;
}
.article dl dt { font-weight: 600; margin-top: var(--s4); }
.article dl dd { margin: 0 0 var(--s3); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* FAQ visible — et donc balisable sans enfreindre les règles Google */
.faq { display: grid; max-width: var(--wrap-text); border-top: 1px solid var(--filet); }
.reading .faq, .reading .faq details { border-color: rgba(21,21,26,.14); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary {
  padding: var(--s4) var(--s5) var(--s4) 0; cursor: pointer;
  font-family: var(--display); font-size: var(--t-lg);
  min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--champagne); font-family: var(--sans);
  font-size: 1.3em; line-height: 1; flex: none; transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 var(--s6) var(--s5) 0; color: var(--ivoire-2); font-weight: 300; }
.reading .faq__a { color: #4a4338; }

/* ───────── 20. Divers ───────── */

.note {
  padding: var(--s4) var(--s5); border-left: 1px solid var(--champagne);
  color: var(--ivoire-2); margin-bottom: var(--s5); font-weight: 300;
}
.reading .note { color: #4a4338; }
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 3px var(--s3); border: 1px solid var(--filet);
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ivoire-3);
}
.staging {
  position: relative; z-index: 400;
  background: var(--champagne); color: var(--noir); text-align: center;
  padding: var(--s1) var(--s3); font-size: 10px;
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}

@media print {
  .hdr, .tabs, .ftr, .ad, .fav, .skip, .staging, .cover { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  a[href^="/"]::after { content: " (lecarnetduchineur.fr" attr(href) ")"; font-size: .8em; }
}