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

:root {
  --rouge: #9f000e;
  --rouge-hover: #7a000a;
  --noir: #111010;
  --encre: #1c1a1a;
  --gris-fonce: #3a3636;
  --gris-moyen: #7a7474;
  --gris-clair: #c8c2c2;
  --beige: #f5f1ec;
  --blanc: #fdfbf9;
  --bleu: #2d3a7c;
  --bleu-hover: #1e2860;
  --serif: 'Crimson Pro', Georgia, serif;
  --sans: 'DM Sans', sans-serif;
}

body { background: var(--blanc); color: var(--encre); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
/* Ensure page fills viewport height for footer positioning */
html, body { min-height: 100%; }
body > .footer { margin-top: 0; }

/* ===== DARK MODE ===== */
body.dark-mode {
  --blanc: #181616;
  --beige: #201e1e;
  --encre: #f0ecec;
  --noir: #f5f2f0;
  --gris-fonce: #c8c2c2;
  --gris-moyen: #9a9494;
  --gris-clair: #4a4444;
  --bleu: #8b9de0;
  --bleu-hover: #a8b4e8;
}
body.dark-mode .masthead { background: #181616; border-bottom-color: #2e2a2a; }
body.dark-mode .primary-nav { border-top-color: #2e2a2a; }
body.dark-mode .dropdown { background: #201e1e; border-color: #2e2a2a; }
body.dark-mode .dropdown a:hover { background: #2a2626; color: var(--rouge); }
body.dark-mode .btn--ghost { border-color: #3a3636; color: #c8c2c2; }
body.dark-mode .hero { border-bottom-color: #2e2a2a; }
body.dark-mode .hero__divider { background: #2e2a2a; }
body.dark-mode .section-header { }
body.dark-mode .affiche-section { border-bottom-color: #2e2a2a; }
body.dark-mode .horiz-section { border-bottom-color: #2e2a2a; }
body.dark-mode .magazine-section { border-bottom-color: #2e2a2a; }
body.dark-mode .reco-section { border-bottom-color: #2e2a2a; }
body.dark-mode .rubrique-tabs { border-bottom-color: #2e2a2a; }
body.dark-mode .magazine-divider { background: #2e2a2a; }
body.dark-mode .magazine-item { border-bottom-color: #2e2a2a; }
body.dark-mode .reco-divider { background: #2e2a2a; }
body.dark-mode .goodnews-grid { background: #2e2a2a; border-color: #2e2a2a; }
body.dark-mode .goodnews-section { background: #201e1e; border-bottom-color: #2e2a2a; }
body.dark-mode .goodnews-card { background: #181616; }
body.dark-mode .goodnews-card:hover { background: #1e1c1c; }
body.dark-mode .tag--salle { border-color: var(--rouge); color: var(--rouge); background: transparent; }
body.dark-mode .tag--salle:hover { background: var(--rouge); color: #fff; }
body.dark-mode .tag--salle--on-img { background: var(--rouge-hover); color: #fff; }
body.dark-mode .tag--salle--on-img:hover { background: #600008; color: #fff; }
/* Fix platform tags in dark mode */
body.dark-mode .tag--platform { background: transparent; color: var(--rouge); border-color: var(--rouge); }
body.dark-mode .tag--platform:hover { background: var(--rouge); color: #fff; }
body.dark-mode .tag--platform--light { background: transparent; color: var(--rouge); border-color: var(--rouge); }
body.dark-mode .tag--platform--light:hover { background: var(--rouge); color: #fff; }

/* Dark mode newsletter band */
body.dark-mode .newsletter-band { background: #f5f1ec; }
body.dark-mode .newsletter-band__title { color: #1c1a1a; }
body.dark-mode .newsletter-band__desc { color: rgba(28,26,26,0.65); }
body.dark-mode .newsletter-band__input { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.18); color: #1c1a1a; }
body.dark-mode .newsletter-band__input::placeholder { color: rgba(28,26,26,0.4); }
body.dark-mode .newsletter-band__eyebrow { text-shadow: none; }

/* Dark mode readability */
body.dark-mode .section-title { color: #b0a8a8; }
body.dark-mode .dropdown__label { color: #9a9494; }
body.dark-mode .dropdown a .dropdown__desc { color: #9a9494; }
body.dark-mode .dropdown a { color: #c8c2c2; }
body.dark-mode .navlink { color: #c8c2c2; }
body.dark-mode .navlink:hover { color: var(--rouge); }
body.dark-mode .btn--ghost:hover { border-color: var(--rouge); color: var(--rouge); }

/* Dark mode toggle — sliding sun/moon */
.dark-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  background: #e0dbd5;
  border-radius: 12px;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  padding: 0 3px;
}
body.dark-mode .toggle-track { background: #3a3636; }
.toggle-thumb {
  position: absolute;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: left 0.25s cubic-bezier(.4,0,.2,1), background 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.dark-mode .toggle-thumb { left: 23px; background: #f0ecec; }
.toggle-icon-sun, .toggle-icon-moon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.2s;
  line-height: 1;
}
.toggle-icon-sun { left: 5px; font-size: 11px; opacity: 1; color: var(--gris-moyen); }
.toggle-icon-moon { right: 5px; font-size: 10px; opacity: 0.35; color: var(--gris-fonce); }
body.dark-mode .toggle-icon-sun { opacity: 0.35; color: var(--gris-fonce); }
body.dark-mode .toggle-icon-moon { opacity: 1; color: var(--gris-fonce); }

/* Social icons in masthead */
.masthead__socials { display: flex; align-items: center; gap: 10px; margin-right: 4px; }
.social-icon { color: var(--rouge); transition: color 0.15s; display: flex; align-items: center; padding: 2px; }
.social-icon:hover { color: var(--rouge-hover); }
a { color: inherit; text-decoration: none; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ===== MASTHEAD ===== */
.masthead {
  border-bottom: 1px solid #e0dbd5;
  background: var(--blanc);
  position: sticky;
  top: 0;
  z-index: 100;
}

.masthead__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 0 14px;
}
.masthead__top > .masthead__actions:last-child {
  justify-self: end;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

.logo__name {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--noir);
  text-transform: uppercase;
  line-height: 1;
}

.logo__slogan {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gris-moyen);
  letter-spacing: 0.02em;
  margin-top: -1px;
}

.masthead__actions { display: flex; align-items: center; gap: 16px; }

.masthead-inline-nav { display: flex; align-items: center; gap: 2px; }
.masthead-inline-nav__link { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gris-fonce); padding: 0 10px; white-space: nowrap; transition: color 0.15s; }
.masthead-inline-nav__link:hover { color: var(--rouge); }
.masthead-inline-nav__sep { width: 1px; height: 13px; background: #e0dbd5; flex-shrink: 0; }
body.dark-mode .masthead-inline-nav__sep { background: #2e2a2a; }
@media (max-width: 1024px) { .masthead-inline-nav { display: none; } }
@media (min-width: 1025px) {
  .primary-nav { display: none; }

  /* Header desktop legerement agrandi (~x1.15), elements internes reajustes en consequence */
  .masthead__top { padding: 21px 0 16px; }
  .masthead__actions { gap: 18px; }

  .logo__name { font-size: 36px; }
  .logo__slogan { font-size: 14px; }

  .masthead__socials { gap: 11px; margin-right: 5px; }
  .masthead__socials .social-icon svg { width: 20px; height: 20px; }
  .masthead__socials .social-icon[aria-label="Letterboxd"] svg { width: 25px; height: 16px; }

  .masthead-inline-nav__link { font-size: 13px; padding: 0 11px; }
  .masthead-inline-nav__sep { height: 15px; }

  .dark-toggle .toggle-track { width: 50px; height: 27px; padding: 0 3px; }
  .dark-toggle .toggle-thumb { width: 20px; height: 20px; left: 3px; }
  body.dark-mode .dark-toggle .toggle-thumb { left: 27px; }
  .dark-toggle .toggle-icon-sun { left: 6px; font-size: 12px; }
  .dark-toggle .toggle-icon-moon { right: 6px; font-size: 11px; }
}

.btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  transition: all 0.2s;
}
.btn--primary { background: var(--rouge); color: #fff; }
.btn--primary:hover { background: var(--rouge-hover); }
.btn--ghost { background: transparent; color: var(--encre); border: 1px solid #e0dbd5; }
.btn--ghost:hover { border-color: var(--rouge); color: var(--rouge); }
.btn--newsletter { background: var(--rouge); color: #fff; }
.btn--newsletter:hover { background: var(--rouge-hover); }

.masthead__search { background: none; border: none; cursor: pointer; color: var(--gris-moyen); padding: 4px; transition: color 0.15s; }
.masthead__search:hover { color: var(--rouge); }

/* ===== NAV ===== */
.primary-nav { border-top: 1px solid #e0dbd5; }

.primary-nav__inner {
  display: flex;
  align-items: center;
  height: 44px;
}
.nav-list { display: flex; list-style: none; align-items: center; width: 100%; justify-content: space-between; }

.nav-list li { position: relative; }

.navlink {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris-fonce);
  padding: 0 8px;
  line-height: 44px;
  transition: color 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.navlink:hover { color: var(--rouge); }

/* Dropdown arrow indicator */
.navlink--has-dropdown::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.navlink--has-dropdown:hover::after { opacity: 1; }

.nav-separator { width: 2px; height: 16px; background: #e0dbd5; margin: 0 10px; }

.nav-secondary .navlink { color: var(--gris-moyen); font-weight: 400; padding: 0 7px; }
.navlink--secondary { color: var(--gris-fonce) !important; font-weight: 500 !important; padding: 0 7px !important; }
.navlink--secondary:hover { color: var(--rouge) !important; }
.navlink--special { color: var(--rouge) !important; font-weight: 600 !important; }
.navlink--special:hover { color: var(--rouge-hover) !important; }

/* Dropdown standard */
.nav-list li:hover .dropdown { display: block; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--blanc);
  border: 1px solid #e0dbd5;
  border-top: 2px solid var(--rouge);
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 200;
}
.dropdown a {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris-fonce);
  padding: 10px 18px;
  transition: color 0.15s, background 0.15s;
}
.dropdown a:hover { color: var(--rouge); background: #faf7f4; }

/* Dropdown formats — 2 colonnes */
.nav-list li:hover .dropdown--formats { display: grid; }
.dropdown--formats {
  display: none;
  grid-template-columns: 1fr 1fr;
  min-width: 460px;
}
.dropdown--formats .dropdown__col { padding: 8px 0; }
.dropdown--formats .dropdown__col + .dropdown__col { border-left: 1px solid #e0dbd5; }
.dropdown--formats a { padding: 8px 12px; }
.dropdown__label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-moyen);
  padding: 6px 12px 4px;
  display: block;
  white-space: nowrap;
}
.dropdown a .dropdown__desc {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gris-moyen);
  margin-top: 1px;
}

/* ===== TAGS ===== */
.tag {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 1px;
}
.tag--rubrique { background: var(--rouge); color: #fff; }
.tag--rubrique:hover { background: var(--rouge-hover); }
.tag--platform { background: transparent; color: var(--rouge); border: 1px solid var(--rouge); cursor: pointer; }
.tag--platform:hover { background: var(--rouge); color: #fff; }
.tag--platform--light { background: #fff; color: var(--rouge); border: 1px solid var(--rouge); cursor: pointer; }
.tag--platform--light:hover { background: var(--rouge); color: #fff; }
.tag--salle { background: transparent; color: var(--rouge); border: 1px solid var(--rouge); cursor: pointer; }
.tag--salle:hover { background: var(--rouge); color: #fff; }
.tag--salle--on-img { background: var(--rouge); color: #fff; border: none; cursor: pointer; }
.tag--salle--on-img:hover { background: var(--rouge-hover); color: #fff; }
a.tag--platform, a.tag--salle, a.tag--salle--on-img { display: inline-block; }

/* ===== SECTION HEADERS ===== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.section-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-moyen);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::before { content: ''; display: block; width: 18px; height: 1px; background: var(--rouge); }
.section-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rouge);
  transition: color 0.15s;
}
.section-link:hover { color: var(--rouge-hover); }
/* Mobile-only section links (shown below grid on mobile, hidden on desktop/tablet) */
.section-link--mobile-only { display: none; }

/* ===== HERO ===== */
.hero { padding: 50px 0 0; border-bottom: 1px solid #e0dbd5; }

/* Grille 3 colonnes égales, séparation gérée par un border-right sur les cartes */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
}

/* Les dividers HTML ne sont plus utilisés — séparation via border */
.hero__divider { display: none; }

/* Grille 3 colonnes égales — column-gap gère l'espace entre articles */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 56px;
  align-items: start;
}

/* Dividers HTML masqués — filet via pseudo-élément */
.hero__divider { display: none; }

/* Cartes sans padding latéral — images pleine colonne, identiques pour les 3 */
.hero__card {
  padding: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

/* Filet vertical centré dans le gap, sur les 2 premières cartes */
.hero__card:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -28px;
  top: 0;
  bottom: 32px;
  width: 1px;
  background: #e0dbd5;
}
body.dark-mode .hero__card:not(:last-child)::after { background: #2e2a2a; }

/* Images pleine largeur de leur colonne — identiques pour les 3 */
.hero__img { aspect-ratio: 16/9; overflow: hidden; position: relative; display: block; width: 100%; }

/* Texte sans padding — aligné avec les bords de la photo */
.hero__meta { display: flex; align-items: center; gap: 8px; padding: 0; }
.hero__title { padding: 0; font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.22; color: var(--noir); transition: color 0.15s; }
.hero__excerpt { padding: 0; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--gris-fonce); flex: 1; cursor: pointer; }
.hero__author { padding: 0; font-family: var(--serif); font-style: italic; font-size: 15px; color: #2d3a7c; }
body.dark-mode .hero__author { color: #8b9de0; }
.hero__img-ph { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 10px 12px; }
.hero__img-caption { font-family: var(--sans); font-size: 10px; color: rgba(255,255,255,0.7); font-style: italic; }

.hero__card:has(.hero__img:hover) .hero__title,
.hero__card:has(> a:not(.hero__author):hover) .hero__title,
.hero__card:has(.hero__excerpt--link:hover) .hero__title { color: var(--rouge); }
.hero__excerpt--link { cursor: pointer; }
a.hero__excerpt { display: block; }
a.affiche-card__excerpt { display: block; }
a.horiz-card__excerpt { display: block; }
a.magazine-featured__excerpt { display: block; }
a.magazine-item__excerpt { display: block; }
a.goodnews-card__text { display: block; }
.goodnews-card__title a { color: inherit; transition: color 0.15s; }

a.hero__author { transition: color 0.15s; }
a.hero__author:hover { color: var(--rouge); }
a.reco-card__name { transition: color 0.15s; }
a.reco-card__name:hover { color: var(--rouge); }
a.reco-card__avatar { transition: opacity 0.15s; }
a.reco-card__avatar:hover { opacity: 0.8; }

/* ===== NEWSLETTER BANDEAU ===== */
.newsletter-band { background: var(--noir); padding: 32px 0; }
.newsletter-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.newsletter-band__text { display: flex; flex-direction: column; gap: 4px; }
.newsletter-band__eyebrow { font-family: var(--sans); font-size: 14px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rouge); text-shadow: 0 0 16px rgba(159,0,14,0.5); }
.newsletter-band__title { font-family: var(--serif); font-size: 32px; font-weight: 400; font-style: italic; color: #fff; line-height: 1.2; }
.newsletter-band__desc { font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5; max-width: 340px; }
.newsletter-band__form { display: flex; gap: 8px; flex-shrink: 0; align-items: stretch; }
.newsletter-band__input { font-family: var(--sans); font-size: 13px; padding: 11px 18px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.07); color: #fff; outline: none; width: 260px; transition: border-color 0.15s; }
.newsletter-band__input:focus { border-color: var(--rouge); }
.newsletter-band__input::placeholder { color: rgba(255,255,255,0.3); }
/* Newsletter button matches input height exactly */
.newsletter-band__form .btn--newsletter {
  font-size: 11px;
  padding: 0 20px;
  height: auto;
  align-self: stretch;
}

/* ===== TABS (films, séries, etc.) ===== */
.rubrique-tabs { display: flex; margin-bottom: 28px; border-bottom: 1px solid #e0dbd5; }
.rubrique-tab {
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 10px 20px; color: var(--gris-moyen);
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  background: none; border-top: none; border-left: none; border-right: none;
}
.rubrique-tab--active { color: var(--rouge); border-bottom-color: var(--rouge); }
.rubrique-tab:hover { color: var(--rouge); }

/* ===== LAYOUT AFFICHES : 4 colonnes ===== */
.affiche-section { padding: 56px 0; border-bottom: 1px solid #e0dbd5; }

.affiche-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}
.affiche-grid--3col { grid-template-columns: repeat(3, 1fr); }

.affiche-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.affiche-card__img { aspect-ratio: 16/9; display: block; position: relative; overflow: hidden; }
.affiche-card__inner { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 8px; }
.affiche-card__title { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--noir); transition: color 0.15s; display: block; }
.affiche-card:has(.affiche-card__img:hover) .affiche-card__title,
.affiche-card:has(> a:hover) .affiche-card__title,
.affiche-card:has(.affiche-card__excerpt:hover) .affiche-card__title { color: var(--rouge); }
.affiche-card__info {
  font-family: var(--sans);
  font-size: 12px;
  color: #2d3a7c;
  border-left: 2px solid var(--rouge);
  padding-left: 8px;
  line-height: 1.4;
}
body.dark-mode .affiche-card__info { color: #8b9de0; }
.affiche-card__excerpt { font-family: var(--sans); font-size: 12px; line-height: 1.55; color: var(--gris-fonce); cursor: pointer; }

.affiche-card__platforms { display: flex; flex-wrap: wrap; gap: 4px; }
.affiche-grid--livres .affiche-card__img { aspect-ratio: 2/3; }

/* ===== LAYOUT HORIZONTAL : 3 cartes paysage ===== */
.horiz-section { padding: 56px 0; border-bottom: 1px solid #e0dbd5; }

.horiz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.horiz-grid--2col { grid-template-columns: repeat(2, 1fr); }
/* Série : grille 2D — les cartes partagent les mêmes rangées entre colonnes */
.horiz-grid--series {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows: auto auto;
  align-items: start;
}
/* Les cartes dans horiz-grid--series n'utilisent plus horiz-col */
.horiz-grid--series .series-card {
  padding: 24px 0;
  border-bottom: 1px solid #e0dbd5;
}
.horiz-grid--series .series-card[style*="grid-row:1"] { padding-top: 0; }
.horiz-grid--series .series-card[style*="grid-row:2"] { border-bottom: none; padding-bottom: 0; }
/* Column padding — articles ont une marge interne, la bordure reste dans leur périmètre */
.horiz-grid--series .series-card[style*="grid-column:1"] { padding-left: 0; padding-right: 32px; }
.horiz-grid--series .series-card[style*="grid-column:3"] { padding-left: 32px; padding-right: 0; }
/* Desktop : raccourcir les filets horizontaux pour qu'ils s'arrêtent à la marge intérieure au lieu de toucher le séparateur central */
@media (min-width: 1025px) {
  .horiz-grid--series .series-card { border-bottom: none; position: relative; }
  .horiz-grid--series .series-card[style*="grid-row:1"]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: #e0dbd5;
  }
  body.dark-mode .horiz-grid--series .series-card[style*="grid-row:1"]::after { background: #2e2a2a; }
  .horiz-grid--series .series-card[style*="grid-column:1"]::after { right: 32px; }
  .horiz-grid--series .series-card[style*="grid-column:3"]::after { left: 32px; }
}
/* Séparateur vertical */
.horiz-series__divider { background: #e0dbd5; width: 1px; grid-column: 2; grid-row: 1 / 3; }
body.dark-mode .horiz-series__divider { background: #2e2a2a; }
body.dark-mode .horiz-grid--series .series-card { border-bottom-color: #2e2a2a; }
/* Retire les anciens styles horiz-col qui ne sont plus utilisés dans séries */
.horiz-col { display: flex; flex-direction: column; }
.horiz-col:first-child { padding-right: 28px; }
.horiz-col:last-child { padding-left: 28px; }
.horiz-col .horiz-card { padding: 24px 0; border-bottom: 1px solid #e0dbd5; }
.horiz-col .horiz-card:first-child { padding-top: 0; }
.horiz-col .horiz-card:last-child { border-bottom: none; padding-bottom: 0; }
body.dark-mode .horiz-col .horiz-card { border-bottom-color: #2e2a2a; }

.horiz-card { display: flex; gap: 18px; align-items: flex-start; }
.horiz-card__img { width: 160px; aspect-ratio: 16/9; flex-shrink: 0; display: block; }
/* Body en grid : meta + titre prennent l'espace variable, excerpt en bas */
.horiz-card__body {
  flex: 1;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 6px;
  align-content: start;
}
.horiz-card__meta { display: flex; align-items: center; gap: 6px; }
.horiz-card__title { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.25; color: var(--noir); transition: color 0.15s; }
.horiz-card:has(.horiz-card__img:hover) .horiz-card__title,
.horiz-card:has(.horiz-card__body > a:hover) .horiz-card__title,
.horiz-card:has(.horiz-card__excerpt:hover) .horiz-card__title { color: var(--rouge); }
.horiz-card__excerpt { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--gris-moyen); cursor: pointer; }

/* ===== LAYOUT LARGE : musées/expos ===== */
.magazine-section { padding: 56px 0; border-bottom: 1px solid #e0dbd5; }

/* colonnes : featured plus étroite pour resserrer la liste */
.magazine-grid { display: grid; grid-template-columns: 44fr 1px 56fr; gap: 0; }

.magazine-divider { background: #e0dbd5; }

.magazine-featured { padding-right: 36px; display: flex; flex-direction: column; gap: 10px; }
/* image featured en 16:9 mais réduite via la colonne plus étroite */
.magazine-featured__img { aspect-ratio: 16/9; display: block; overflow: hidden; }
.magazine-featured__img-inner { width: 100%; height: 100%; }
.magazine-featured__title { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.2; color: var(--noir); transition: color 0.15s; }
.magazine-featured:has(.magazine-featured__img:hover) .magazine-featured__title,
.magazine-featured:has(> a:hover) .magazine-featured__title,
.magazine-featured:has(.magazine-featured__excerpt:hover) .magazine-featured__title { color: var(--rouge); }
.magazine-featured__excerpt { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--gris-fonce); cursor: pointer; }

.magazine-list { padding-left: 36px; display: flex; flex-direction: column; gap: 0; justify-content: space-between; }
.magazine-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #e0dbd5; }
.magazine-item:first-child { padding-top: 0; }
.magazine-item:last-child { border-bottom: none; padding-bottom: 0; }
.magazine-item__img { width: 100px; aspect-ratio: 16/9; flex-shrink: 0; display: block; }
.magazine-item__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.magazine-item__meta { display: flex; align-items: center; gap: 6px; }
.magazine-item__title { font-family: var(--serif); font-size: 16px; font-weight: 500; line-height: 1.25; color: var(--noir); transition: color 0.15s; }
.magazine-item:has(.magazine-item__img:hover) .magazine-item__title,
.magazine-item:has(.magazine-item__body > a:hover) .magazine-item__title,
.magazine-item:has(.magazine-item__excerpt:hover) .magazine-item__title { color: var(--rouge); }
.magazine-item__excerpt { font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--gris-moyen); cursor: pointer; }

/* ===== MUSÉES — grille 3 colonnes avec filet rouge ===== */
.expo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.expo-card { display: flex; flex-direction: column; gap: 18px; }
.expo-card__img { aspect-ratio: 16/9; display: block; overflow: hidden; }
.expo-card__img-inner { width: 100%; height: 100%; }
.expo-card__body { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 2px solid #2d3a7c; }
body.dark-mode .expo-card__body { border-top-color: #8b9de0; }
.expo-card__title { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.25; color: var(--noir); transition: color 0.15s; }
.expo-card:has(.expo-card__img:hover) .expo-card__title,
.expo-card:has(.expo-card__body > a:hover) .expo-card__title { color: var(--rouge); }
.expo-card__meta { display: flex; align-items: center; gap: 6px; }

/* ===== BONNES NOUVELLES ===== */
.goodnews-section { padding: 45px 0; border-bottom: 1px solid #e0dbd5; background: var(--beige); }
.goodnews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #e0dbd5; border: 1px solid #e0dbd5; }
.goodnews-card { background: #faf7f4; padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; transition: background 0.15s; }
.goodnews-card:hover { background: #f5f1ec; }
.goodnews-card__icon { font-size: 18px; line-height: 1; }
.goodnews-card__title { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.25; color: var(--noir); transition: color 0.15s; }
.goodnews-card:has(.goodnews-card__title a:hover) .goodnews-card__title a,
a.goodnews-card__title:hover,
.goodnews-card:has(.goodnews-card__text:hover) .goodnews-card__title a { color: var(--rouge); }
.goodnews-card__text { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--gris-fonce); cursor: pointer; }
.goodnews-card__date { font-family: var(--sans); font-size: 11px; color: #2d3a7c; letter-spacing: 0.04em; }
body.dark-mode .goodnews-card__date { color: #8b9de0; }

/* ===== RECO DE LA SEMAINE ===== */
.reco-section { padding: 45px 0; border-bottom: 1px solid #e0dbd5; }
/* Subgrid-like approach: use align-items stretch + grid in card */
.reco-grid { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; align-items: stretch; }
.reco-divider { background: #e0dbd5; }
.reco-card {
  padding: 0 28px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px;
}
.reco-card:first-child { padding-left: 0; }
.reco-card:last-child { padding-right: 0; }
.reco-card__author { display: flex; align-items: center; gap: 10px; }
.reco-card__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 13px; font-weight: 600; color: #fff; flex-shrink: 0; }
.reco-card__byline { display: flex; flex-direction: column; gap: 1px; }
.reco-card__name { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--encre); }
.reco-card__role { font-family: var(--serif); font-style: italic; font-size: 12px; color: #2d3a7c; }
body.dark-mode .reco-card__role { color: #8b9de0; }
.reco-card__quote { font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.45; color: var(--gris-fonce); border-left: 2px solid var(--rouge); padding-left: 14px; }
.reco-card__title { font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--noir); transition: color 0.15s; }
.reco-card:has(.reco-card__avatar:hover) .reco-card__title,
.reco-card:has(.reco-card__name:hover) .reco-card__title,
.reco-card:has(.reco-card__quote:hover) .reco-card__title,
.reco-card:has(> a:hover) .reco-card__title { color: var(--rouge); }
.reco-card__tag-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; align-self: start; }

/* ===== ALTERNANCE FOND DES SECTIONS ===== */
/* Blanc : hero, séries, jeux, recos de la semaine, musées */
/* Beige teinté : films, bonnes nouvelles, musique, livres, théâtre */
.hero { background: var(--blanc); }
#films-section { background: var(--beige); }
.horiz-section:not(#musique-section):not(#theatre-section) { background: var(--blanc); }
.goodnews-section { background: var(--beige); }
#jeux-section { background: var(--blanc); }
#musique-section { background: var(--beige); }
.reco-section { background: var(--blanc); }
#livres-section { background: var(--beige); }
.magazine-section { background: var(--blanc); }
#theatre-section { background: var(--beige); }


.footer { padding: 32px 0; background: var(--rouge); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; }
/* ===== FOOTER (refondu) ===== */
.footer { padding: 22px 0 32px; background: var(--rouge); color: #fff; }
.footer .container { display: flex; flex-direction: column; align-items: center; }
.footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0; padding: 0;
}
.footer__link {
  font-family: var(--sans);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: color 0.15s;
}
.footer__link:hover { color: #fff; }
.footer__sep {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  margin: 24px 0 22px;
  width: 100%;
}
.footer__follow-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  color: #fff;
  margin-bottom: 16px;
  text-align: center;
}
.footer__nl-sep {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  margin: 24px 0 22px;
  width: 100%;
}
.footer__nl-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  color: #fff;
  margin-bottom: 14px;
  text-align: center;
}
.footer__nl-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 380px;
}
.footer__nl-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  outline: none;
  border-radius: 1px;
}
.footer__nl-input::placeholder { color: rgba(255,255,255,0.55); }
.footer__nl-btn {
  padding: 9px 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #fff;
  color: var(--rouge);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 1px;
  transition: background 0.15s, color 0.15s;
}
.footer__nl-btn:hover { background: rgba(255,255,255,0.88); }
.footer__social-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin: 0; padding: 0;
}
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.88);
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: color 0.15s;
}
.footer__social:hover { color: #fff; }
.footer__social svg { flex-shrink: 0; }

/* ===== USER AVATAR (mobile-only icon replacing "Se connecter") ===== */
.user-avatar {
  display: none; /* shown on mobile via media query */
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--beige);
  color: var(--encre);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.user-avatar:hover { background: var(--rouge); color: #fff; }
body.dark-mode .user-avatar { background: #2a2626; }
body.dark-mode .user-avatar:hover { background: var(--rouge); color: #fff; }

/* ===== MOBILE CATEGORIES (inline row under masthead, mobile only) ===== */
.mobile-categories { display: none; }
.mobile-cat--tablet-only { display: none; }
.mobile-cat--sep { width: 1px; height: 14px; background: var(--gris-clair); flex-shrink: 0; align-self: center; }
.mobile-cat--special { color: var(--rouge) !important; font-weight: 600 !important; }

/* ===== MOBILE SEARCH (inside drawer, mobile only) ===== */
.mobile-search { display: none; }

.version-label {
  background: var(--rouge);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  text-align: center;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.version-label__intro {
  font-weight: 400;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.03em;
}
.version-label__suggestions {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
}
.version-label__sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.3);
  margin: 0 2px;
  vertical-align: middle;
}
.version-label__text {
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.01em;
}
/* Arrow hidden on all screens */
.version-label__arrow { display: none; }
.version-label__btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rouge);
  background: #fff;
  border: 1px solid #fff;
  padding: 2px 9px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  line-height: 1.6;
}
.version-label__btn:hover {
  background: rgba(255,255,255,0.88);
}
.version-label__close {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  padding: 4px;
  display: flex;
  align-items: center;
  margin-left: 8px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.version-label__close:hover { color: #fff; }
/* Desktop: hide "vous voulez des recos chaque vendredi ?" */
@media (min-width: 1025px) {
  .version-label__text { display: none; }
}

/* ===== DESKTOP INTERMÉDIAIRE (1025px – 1180px) ===== */
@media (min-width: 1025px) and (max-width: 1180px) {
  .container { padding: 0 28px; }

  /* Nav : réduire les paddings pour éviter le débordement */
  .navlink { padding: 0 5px; font-size: 11px; }
  .navlink--secondary { padding: 0 5px !important; }

  /* Hero : réduire le gap et recentrer le pseudo-élément séparateur */
  .hero__grid { column-gap: 36px; }
  .hero__card:not(:last-child)::after { right: -18px; }

  /* Newsletter : réduire légèrement la largeur de l'input */
  .newsletter-band__inner { gap: 24px; }
  .newsletter-band__input { width: 200px; }

  /* Affiches / grilles */
  .affiche-grid { gap: 18px; }
  .horiz-grid { gap: 28px; }

  /* Reco */
  .reco-card { padding: 0 20px; }
}

/* ===== DRAWER SOCIALS (mobile/tablet drawer) ===== */
.drawer-socials {
  display: none; /* shown via media queries */
  flex-direction: column;
  gap: 12px;
  padding: 18px 4px 8px;
  border-top: 1px solid #ece6e0;
  margin-top: 4px;
}
body.dark-mode .drawer-socials { border-top-color: #2a2626; }
.drawer-socials__label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-moyen);
}
.drawer-socials__icons {
  display: flex;
  gap: 16px;
  align-items: center;
}
.drawer-social-icon {
  color: var(--rouge);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.drawer-social-icon:hover { color: var(--rouge-hover); }

/* Mobile cat hover */
.mobile-cat { transition: color 0.15s; }
.mobile-cat:hover { color: var(--rouge); }

/* ===== HAMBURGER + SEARCH combo (mobile only, hidden by default) ===== */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 36px;
  color: var(--noir);
}
.mobile-menu-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: stretch;
}
.mobile-menu-toggle__bar {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}
.mobile-menu-toggle__search {
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.mobile-menu-toggle.is-open .mobile-menu-toggle__bars .mobile-menu-toggle__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
/* La barre du milieu disparaît quand le menu s'ouvre.
   « opacity: 0 » seul la rend invisible mais la laisse dans la couche de
   rendu : sur iOS, elle pouvait subsister en un très fin trait horizontal
   en travers de la croix, jusqu'à ce qu'un défilement force Safari à
   repeindre. On lui retire donc aussi toute largeur — plus rien à
   peindre, sur aucun navigateur. Le transform n'affecte pas la mise en
   page : les deux autres barres ne bougent pas d'un pixel. */
.mobile-menu-toggle.is-open .mobile-menu-toggle__bars .mobile-menu-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-menu-toggle.is-open .mobile-menu-toggle__bars .mobile-menu-toggle__bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.mobile-menu-toggle.is-open .mobile-menu-toggle__search { opacity: 0; transform: scale(0.7); }

/* Hide loupe from hamburger on mobile/tablet */
@media (max-width: 1024px) {
  .mobile-menu-toggle__search { display: none; }
}

/* =================================================================
   ===== MOBILE (≤ 768px) ==========================================
   ================================================================= */
@media (max-width: 768px) {

  .container { padding: 0 20px; max-width: 100%; }

  /* ---- MASTHEAD ---------------------------------------------- */
  .mobile-menu-toggle { display: flex; }

  /* Hide elements not used on mobile masthead */
  .masthead__socials { display: none !important; }
  .masthead__search { display: none !important; }
  .btn--connect-desktop { display: none !important; }
  .user-avatar { display: inline-flex; }

  .masthead {
    transition: box-shadow 0.2s;
  }
  .masthead.is-scrolled { box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
  body.dark-mode .masthead.is-scrolled { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

  .masthead__top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 0;
    position: relative;
    transition: padding 0.2s;
  }
  /* the first .masthead__actions still contains the (hidden) search + socials
     — collapse it so it doesn't take space */
  .masthead__top > .masthead__actions:first-child {
    display: contents;
  }

  /* Hamburger combined */
  .mobile-menu-toggle {
    position: static;
    order: 0;
    margin: 0;
    flex-shrink: 0;
  }

  /* Logo block — centered, flex-fills */
  .masthead__top .logo {
    order: 1;
    flex: 0 0 auto;
    align-items: flex-start;
    text-align: left;
    overflow: hidden;
    margin-right: auto;
  }
  .masthead__top .logo__name {
    font-size: 22px;
    letter-spacing: 0.16em;
    transition: font-size 0.2s;
  }
  .masthead__top .logo__slogan {
    display: none;
  }

  /* Right cluster */
  .masthead__top > .masthead__actions:last-child {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
  }
  .masthead__top > .masthead__actions:last-child .btn--primary {
    padding: 0 10px;
    font-size: 9px;
    letter-spacing: 0.06em;
    height: 28px;
  }
  /* Avatar smaller on mobile */
  .user-avatar {
    width: 28px;
    height: 28px;
  }
  .user-avatar svg { width: 16px; height: 16px; }
  .masthead__top .dark-toggle .toggle-track {
    width: 38px; height: 22px;
  }
  .masthead__top .dark-toggle .toggle-thumb {
    width: 16px; height: 16px;
  }
  body.dark-mode .masthead__top .dark-toggle .toggle-thumb { left: 19px; }

  /* ---- SCROLLED STATE : one line, no slogan -------------------- */
  .masthead.is-scrolled .masthead__top { padding: 8px 0; }
  .masthead.is-scrolled .logo {
    align-items: flex-start;
    text-align: left;
  }
  .masthead.is-scrolled .logo__name { font-size: 19px; }

  /* ---- INLINE CATEGORIES (row 2 at top) ---------------------- */
  .mobile-categories {
    display: block;
    border-top: 1px solid #e0dbd5;
    background: var(--blanc);
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s, border-color 0.2s;
    max-height: 48px;
    opacity: 1;
  }
  body.dark-mode .mobile-categories { border-top-color: #2e2a2a; }
  .masthead.is-scrolled .mobile-categories {
    max-height: 0;
    opacity: 0;
    border-top-color: transparent;
  }
  .mobile-categories__inner {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 20px;
    white-space: nowrap;
    justify-content: space-between;
  }
  .mobile-categories__inner::-webkit-scrollbar { display: none; }
  .mobile-cat {
    font-family: var(--sans);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--gris-fonce);
    flex-shrink: 0;
    line-height: 1;
  }
  body.dark-mode .mobile-cat { color: #c8c2c2; }

  /* ---- NAV (drawer) ------------------------------------------ */
  .primary-nav {
    display: none;
    border-top: 1px solid #e0dbd5;
    background: var(--blanc);
  }
  .primary-nav.is-open {
    display: block;
    position: fixed;
    top: var(--masthead-h, 120px);
    left: 0; right: 0;
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 99;
    background: var(--blanc);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
  body.dark-mode .primary-nav.is-open { background: #181616; }

  /* lock body scroll while drawer is open */
  body.menu-open { overflow: hidden; }
  body.menu-open .mobile-categories { max-height: 0 !important; opacity: 0 !important; border-top-color: transparent !important; }

  .primary-nav__inner {
    display: block;
    height: auto;
    padding: 14px 20px 18px 20px;
  }

  /* Search bar at top of drawer */
  .mobile-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--beige);
    border: 1px solid #e0dbd5;
    margin: 0 0 14px 0;
  }
  body.dark-mode .mobile-search { background: #2a2626; border-color: #2e2a2a; }
  .mobile-search__icon { color: var(--gris-moyen); flex-shrink: 0; }
  .mobile-search__input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: 0;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--encre);
    min-width: 0;
  }
  .mobile-search__input::placeholder { color: var(--gris-moyen); }

  .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    justify-content: normal;
    height: auto;
  }
  .nav-list li {
    width: 100%;
    border-bottom: 1px solid #ece6e0;
  }
  .nav-list li:last-child { border-bottom: none; }
  .navlink {
    display: block;
    padding: 14px 4px;
    line-height: 1;
    font-size: 13px;
  }
  .primary-nav .nav-separator { display: none; }

  /* Secondary nav links (Bonnes nouvelles, Qui sommes-nous ?) — même style que les autres items */
  .navlink--secondary {
    padding: 14px 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--gris-fonce) !important;
  }
  /* Masquer Bonnes nouvelles et Qui sommes-nous ? sur mobile uniquement */
  .nav-item--secondary { display: none !important; }

  /* dropdowns inline, indented — fermés par défaut, ouverts au clic */
  .nav-list li .dropdown,
  .nav-list li .dropdown--formats {
    display: none;
    position: static;
    border: none;
    border-top: none;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    padding: 0 0 10px 14px;
    grid-template-columns: 1fr;
  }
  .nav-list li .dropdown.is-open,
  .nav-list li .dropdown--formats.is-open {
    display: block;
  }
  .dropdown a {
    padding: 8px 4px;
    font-size: 12px;
  }
  .dropdown--formats .dropdown__col { padding: 4px 0; }
  .dropdown--formats .dropdown__col + .dropdown__col {
    border-left: none;
    border-top: 1px solid #ece6e0;
    margin-top: 6px;
    padding-top: 8px;
  }
  /* Indentation intermédiaire pour les labels de colonnes */
  .nav-list li .dropdown--formats .dropdown__col { padding-left: 4px; }
  .nav-list li .dropdown--formats .dropdown__label { padding-left: 0; }
  body.dark-mode .nav-list li { border-bottom-color: #2a2626; }
  body.dark-mode .dropdown--formats .dropdown__col + .dropdown__col { border-top-color: #2a2626; }

  .drawer-socials { display: flex; }
  body.dark-mode .nav-list li.nav-item--separator { border-bottom: none; }
  body.dark-mode .nav-drawer-separator { background: #2a2626; }

  /* ---- SECTION HEADERS / TYPE -------------------------------- */
  .section-header { margin-bottom: 18px; }
  .section-title { font-size: 13px; }
  /* Hide section-link inside header on mobile */
  .section-header .section-link { display: none; }
  /* Show mobile-only links below grids */
  .section-link--mobile-only {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rouge);
    text-align: right;
    margin-top: 22px;
    padding-bottom: 4px;
  }
  .section-link--mobile-only:hover { color: var(--rouge-hover); }

  /* ---- HERO : 1 colonne, dividers horizontaux ---------------- */
  .hero { padding: 28px 0 0; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__divider { display: block; width: 100%; height: 1px; background: #e0dbd5; }
  body.dark-mode .hero__divider { background: #2e2a2a; }
  .hero__card {
    padding: 0 0 26px;
    gap: 12px;
    border-right: none;
  }
  /* Supprimer le filet vertical desktop */
  .hero__card:not(:last-child)::after { display: none; }
  .hero__card + .hero__divider + .hero__card { padding-top: 26px; }
  .hero__card:first-child { padding-top: 0; }
  .hero__card:last-child { padding-bottom: 28px; }
  /* Padding texte uniforme sur mobile (pas de bord externe à gérer) */
  .hero__card:first-child .hero__meta,
  .hero__card:first-child .hero__title,
  .hero__card:first-child .hero__excerpt,
  .hero__card:first-child .hero__author { padding-left: 0; }
  .hero__card:last-child .hero__meta,
  .hero__card:last-child .hero__title,
  .hero__card:last-child .hero__excerpt,
  .hero__card:last-child .hero__author { padding-right: 0; }
  /* Sur mobile toutes les cartes sont sur le même bord → pas de padding latéral sur les textes */
  .hero__meta, .hero__title, .hero__excerpt, .hero__author { padding-left: 0; padding-right: 0; }
  .hero__title { font-size: 22px; }
  .hero__excerpt { font-size: 14px; }
  .hero__author { font-size: 14px; }

  /* ---- NEWSLETTER BAND : colonne ----------------------------- */
  .newsletter-band { padding: 28px 0; }
  .newsletter-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .newsletter-band__title { font-size: 22px; }
  .newsletter-band__desc { font-size: 13px; max-width: none; }
  .newsletter-band__form {
    width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .newsletter-band__input {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Quand le bouton passe en dessous, pleine largeur et même hauteur que l'input */
  .newsletter-band__form .btn {
    width: 100%;
    padding: 11px 18px;
    height: auto;
    font-size: 12px;
  }

  /* ---- AFFICHES (Films / Jeux / Livres) : scroll horizontal -- */
  .affiche-section { padding: 40px 0; }

  .affiche-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* bleed only on the right so first card respects container margin */
    margin: 0 -20px 0 0;
    padding: 2px 20px 12px 0;
    scroll-padding-left: 0;
    scrollbar-width: thin;
  }
  .affiche-grid::-webkit-scrollbar { height: 4px; }
  .affiche-grid::-webkit-scrollbar-thumb { background: var(--gris-clair); border-radius: 2px; }

  .affiche-grid .affiche-card {
    flex: 0 0 65%;
    max-width: 65%;
    scroll-snap-align: start;
  }
  .affiche-grid--livres .affiche-card { flex-basis: 55%; max-width: 55%; }

  .affiche-card__title { font-size: 16px; }
  .affiche-card__info { font-size: 11px; }
  .affiche-card__excerpt { font-size: 12px; }

  /* tabs : scrollable horizontalement */
  .rubrique-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .rubrique-tabs::-webkit-scrollbar { display: none; }
  .rubrique-tab {
    padding: 10px 14px;
    font-size: 11px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ---- HORIZ (Séries / Musique / Théâtre) : empilées --------- */
  .horiz-section { padding: 40px 0; }
  .horiz-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* Séries mobile : empilées en 1 colonne */
  .horiz-grid--series {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .horiz-series__divider { display: none; }
  /* series-card mobile : empilées avec bordure entre elles */
  .horiz-grid--series .series-card {
    padding: 20px 0 !important;
    border-bottom: 1px solid #e0dbd5 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .horiz-grid--series .series-card:first-child { padding-top: 0 !important; }
  .horiz-grid--series .series-card:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
  body.dark-mode .horiz-grid--series .series-card { border-bottom-color: #2e2a2a !important; }
  .horiz-col { padding: 0 !important; }
  .horiz-col .horiz-card { padding: 22px 0; }
  .horiz-col .horiz-card:first-child { padding-top: 0; }
  .horiz-col:first-child { border-bottom: 1px solid #e0dbd5; padding-bottom: 0 !important; }
  body.dark-mode .horiz-col:first-child { border-bottom-color: #2e2a2a; }
  .horiz-card { gap: 14px; }
  .horiz-card__img {
    width: 120px !important;
    height: auto !important;
    aspect-ratio: 16/9;
  }
  .horiz-card__title { font-size: 16px; }
  .horiz-card__excerpt { font-size: 13px; }

  /* musique : carrés 90px → 90px ok mais on harmonise */
  .horiz-section .horiz-card__img[style*="aspect-ratio: 1"] {
    width: 90px !important;
    height: 90px !important;
  }

  /* ---- BONNES NOUVELLES : 1 colonne -------------------------- */
  .goodnews-section { padding: 32px 0; }
  .goodnews-grid { grid-template-columns: 1fr; }
  .goodnews-card { padding: 20px 22px; gap: 16px; }
  .goodnews-card__title { font-size: 17px; }
  .goodnews-card__text { font-size: 13px; }

  /* ---- RECOS DE LA SEMAINE : 1 colonne, dividers horizontaux ----------- */
  .reco-section { padding: 32px 0; }
  .reco-grid { grid-template-columns: 1fr; gap: 22px; }
  .reco-card { padding: 0; }
  .reco-divider {
    width: 100%;
    height: 1px;
    background: #e0dbd5;
  }
  body.dark-mode .reco-divider { background: #2e2a2a; }
  .reco-card__quote { font-size: 16px; }
  .reco-card__title { font-size: 18px; }


  /* ---- MUSÉES — grille 3 colonnes → 1 colonne scroll horizontal ---- */
  .expo-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px 0 0;
    padding: 2px 20px 12px 0;
    scrollbar-width: thin;
  }
  .expo-grid::-webkit-scrollbar { height: 4px; }
  .expo-grid::-webkit-scrollbar-thumb { background: var(--gris-clair); border-radius: 2px; }
  .expo-grid .expo-card { flex: 0 0 72%; max-width: 72%; scroll-snap-align: start; }
  .expo-card__title { font-size: 16px; }

  /* ---- MAGAZINE (Musées) : featured pleine largeur, liste sous */
  .magazine-section { padding: 40px 0; }
  .magazine-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .magazine-featured {
    padding-right: 0;
    margin-bottom: 24px;
  }
  .magazine-featured__title { font-size: 20px; }
  .magazine-featured__excerpt { font-size: 13px; }
  .magazine-divider {
    width: 100%;
    height: 1px;
    margin-bottom: 18px;
  }
  .magazine-list { padding-left: 0; }
  .magazine-item__img {
    width: 88px;
  }
  .magazine-item__title { font-size: 14px; }
  .magazine-item__excerpt { font-size: 12px; }

  /* ---- FOOTER : refondu, centré sur mobile ------------------- */
  .footer { padding: 18px 0 32px; }
  .footer__links {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .footer__link { font-size: 12px; }
  .footer__sep { margin: 22px 0 20px; }
  .footer__nl-title { font-size: 17px; margin-bottom: 12px; }
  .footer__nl-form { max-width: 300px; width: 100%; }
  .footer__nl-sep { margin: 20px 0 18px; }
  .footer__follow {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer__follow-title { font-size: 17px; margin-bottom: 14px; }
  .footer__social-list {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .footer__social { font-size: 12px; }

  /* ---- VERSION LABEL : masqué sur mobile -------------------- */
  .version-label { display: none; }
}

/* tighter on very small screens */
@media (max-width: 400px) {
  .masthead__top > .masthead__actions:last-child .btn {
    padding: 8px 12px;
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .hero__title { font-size: 20px; }
  .affiche-grid .affiche-card { flex-basis: 72%; max-width: 72%; }
  .affiche-grid--livres .affiche-card { flex-basis: 60%; max-width: 60%; }
}

/* ===== TABLETTE (769px – 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { padding: 0 28px; }
  body { overflow-x: hidden; }

  /* ---- MASTHEAD tablette : hamburger + loupe, slogan masqué ---- */
  .logo__slogan { display: none; }
  .mobile-menu-toggle { display: flex; }
  .masthead__socials { display: none !important; }
  .masthead__search { display: none !important; }
  .btn--connect-desktop { display: none !important; }
  .user-avatar { display: inline-flex; }
  .masthead__top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .masthead__top > .masthead__actions:first-child { display: contents; }
  .mobile-menu-toggle { position: static; order: 0; flex-shrink: 0; }
  .masthead__top .logo { order: 1; flex: 0 0 auto; align-items: flex-start; text-align: left; margin-right: auto; }
  .masthead__top > .masthead__actions:last-child { order: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

  /* ---- NAV drawer tablette (même comportement que mobile) ------ */
  .primary-nav { display: none; border-top: 1px solid #e0dbd5; background: var(--blanc); }
  .primary-nav.is-open {
    display: block;
    position: fixed;
    top: var(--masthead-h, 90px);
    left: 0; right: 0; bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 99;
    background: var(--blanc);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
  body.dark-mode .primary-nav.is-open { background: #181616; }
  body.menu-open { overflow: hidden; }
  body.menu-open .mobile-categories { max-height: 0 !important; opacity: 0 !important; border-top-color: transparent !important; }
  .primary-nav__inner { display: block; height: auto; padding: 14px 28px 18px 28px; }
  .mobile-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--beige); border: 1px solid #e0dbd5; margin: 0 0 14px 0; }
  .mobile-search__icon { color: var(--gris-moyen); flex-shrink: 0; }
  .mobile-search__input { flex: 1; border: 0; background: transparent; outline: 0; font-family: var(--sans); font-size: 14px; color: var(--encre); min-width: 0; }
  .mobile-search__input::placeholder { color: var(--gris-moyen); }
  .nav-list { display: flex; flex-direction: column; align-items: stretch; width: 100%; justify-content: normal; height: auto; }
  .nav-list li { width: 100%; border-bottom: 1px solid #ece6e0; }
  .nav-list li:last-child { border-bottom: none; }
  .navlink { display: block; padding: 14px 4px; line-height: 1; font-size: 13px; }
  .primary-nav .nav-separator { display: none; }
  .navlink--secondary { padding: 14px 4px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; color: var(--gris-fonce) !important; }
  .nav-item--secondary { display: block !important; }
  .nav-list li .dropdown, .nav-list li .dropdown--formats { display: none; position: static; border: none; box-shadow: none; background: transparent; min-width: 0; padding: 0 0 10px 14px; grid-template-columns: 1fr; }
  .nav-list li .dropdown.is-open, .nav-list li .dropdown--formats.is-open { display: block; }
  .dropdown a { padding: 8px 4px; font-size: 12px; }
  .dropdown--formats .dropdown__col { padding: 4px 0; }
  .dropdown--formats .dropdown__col + .dropdown__col { border-left: none; border-top: 1px solid #ece6e0; margin-top: 6px; padding-top: 8px; }
  /* Indentation intermédiaire pour les labels de colonnes dans Nos formats */
  .nav-list li .dropdown--formats .dropdown__label { padding-left: 0; }
  .nav-list li .dropdown--formats .dropdown__col { padding-left: 4px; }
  body.dark-mode .mobile-search { background: #2a2626; border-color: #2e2a2a; }
  body.dark-mode .nav-list li { border-bottom-color: #2a2626; }
  body.dark-mode .nav-drawer-separator { background: #2a2626; }
  body.dark-mode .dropdown--formats .dropdown__col + .dropdown__col { border-top-color: #2a2626; }

  /* ---- GRILLES CONTENU ----------------------------------------- */

  /* À la une : scroll horizontal, 1 carte par snap */
  .hero { padding: 28px 0 0; }
  .hero__grid {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -28px 0 0;
    padding: 0 28px 0 0;
    scrollbar-width: thin;
  }
  .hero__grid::-webkit-scrollbar { height: 4px; }
  .hero__grid::-webkit-scrollbar-thumb { background: var(--gris-clair); border-radius: 2px; }
  .hero__divider { display: none; }
  /* Annuler le filet vertical desktop — pas de séparateur sur tablette */
  .hero__card:not(:last-child) { border-right: none; }
  .hero__card:not(:last-child)::after { display: none; }
  .hero__card {
    flex: 0 0 72%;
    max-width: 72%;
    scroll-snap-align: start;
    padding: 0 24px 28px 0;
    width: 72%;
  }
  .hero__card:first-child { padding-left: 0; }
  .hero__card:last-child { padding-right: 24px; }
  /* Supprimer le padding des éléments texte sur tablette — la carte elle-même a son padding */
  .hero__meta, .hero__title, .hero__excerpt, .hero__author { padding-left: 0; padding-right: 0; }

  /* Affiches & Livres : scroll horizontal */
  .affiche-grid {
    display: flex;
    grid-template-columns: none;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -28px 0 0;
    padding: 2px 28px 12px 0;
    scroll-padding-left: 0;
    scrollbar-width: thin;
  }
  .affiche-grid::-webkit-scrollbar { height: 4px; }
  .affiche-grid::-webkit-scrollbar-thumb { background: var(--gris-clair); border-radius: 2px; }
  .affiche-grid .affiche-card { flex: 0 0 40%; max-width: 40%; scroll-snap-align: start; }
  .affiche-grid--livres .affiche-card { flex-basis: 28%; max-width: 28%; }

  /* Séries (horiz-grid--series) : empilées une par une sur tablette */
  .horiz-grid--series {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .horiz-series__divider { display: none; }
  .horiz-grid--series .series-card {
    padding: 20px 0 !important;
    border-bottom: 1px solid #e0dbd5 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .horiz-grid--series .series-card:first-child { padding-top: 0 !important; }
  .horiz-grid--series .series-card:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
  body.dark-mode .horiz-grid--series .series-card { border-bottom-color: #2e2a2a !important; }
  /* Padding latéral identique pour toutes les series-card sur tablette */
  .horiz-grid--series .series-card[style*="grid-column:1"],
  .horiz-grid--series .series-card[style*="grid-column:3"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* Musique : scroll horizontal */
  .horiz-grid {
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -28px 0 0;
    padding: 2px 28px 12px 0;
    scrollbar-width: thin;
  }
  .horiz-grid::-webkit-scrollbar { height: 4px; }
  .horiz-grid::-webkit-scrollbar-thumb { background: var(--gris-clair); border-radius: 2px; }
  .horiz-grid .horiz-card { flex: 0 0 60%; max-width: 60%; scroll-snap-align: start; }

  /* Théâtre (horiz-grid dans section beige) : colonnes empilées comme mobile */
  #theatre-section .horiz-grid {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    margin: 0;
    padding: 0;
    gap: 20px;
    scrollbar-width: auto;
  }
  #theatre-section .horiz-grid .horiz-card { flex: none; max-width: 100%; }

  /* Bonnes nouvelles : scroll horizontal */
  .goodnews-grid {
    display: flex;
    background: none;
    border: none;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -28px 0 0;
    padding: 2px 28px 12px 0;
    scrollbar-width: thin;
  }
  .goodnews-grid::-webkit-scrollbar { height: 4px; }
  .goodnews-grid::-webkit-scrollbar-thumb { background: var(--gris-clair); border-radius: 2px; }
  .goodnews-grid .goodnews-card { flex: 0 0 60%; max-width: 60%; scroll-snap-align: start; border: 1px solid #e0dbd5; }
  body.dark-mode .goodnews-grid { background: none; border: none; }
  body.dark-mode .goodnews-grid .goodnews-card { border-color: #2e2a2a; }

  /* Recos de la semaine : scroll horizontal */
  .reco-grid {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -28px 0 0;
    padding: 2px 28px 12px 0;
    scrollbar-width: thin;
  }
  .reco-grid::-webkit-scrollbar { height: 4px; }
  .reco-grid::-webkit-scrollbar-thumb { background: var(--gris-clair); border-radius: 2px; }
  .reco-grid .reco-card { flex: 0 0 60%; max-width: 60%; scroll-snap-align: start; padding: 0; }
  .reco-grid .reco-divider { display: none; }

  /* Magazine musées : garder 2 cols */
  .magazine-grid { grid-template-columns: 1fr 1px 1fr; }

  /* ---- INLINE CATEGORIES (visible sur tablette aussi) ---------- */
  .mobile-categories {
    display: block;
    border-top: 1px solid #e0dbd5;
    background: var(--blanc);
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s, border-color 0.2s;
    max-height: 48px;
    opacity: 1;
  }
  body.dark-mode .mobile-categories { border-top-color: #2e2a2a; }
  .masthead.is-scrolled .mobile-categories {
    max-height: 0;
    opacity: 0;
    border-top-color: transparent;
  }
  .mobile-categories__inner {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 28px;
    white-space: nowrap;
    justify-content: space-between;
  }
  .mobile-categories__inner::-webkit-scrollbar { display: none; }
  .mobile-cat {
    font-family: var(--sans);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--gris-fonce);
    flex-shrink: 0;
    line-height: 1;
  }
  body.dark-mode .mobile-cat { color: #c8c2c2; }
  .mobile-cat--tablet-only { display: flex; }
  .drawer-socials { display: flex; }
  .version-label__intro,
  .version-label__suggestions,
  .version-label__sep { display: none; }
}

/* ===== SEARCH OVERLAY ===== */
.search-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(17,16,16,0.55);
  align-items: flex-start;
  justify-content: center;
  padding-top: 110px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}
.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.search-overlay__panel {
  width: 100%;
  max-width: 600px;
  background: var(--blanc);
  border: 1px solid #e0dbd5;
  box-shadow: 0 20px 60px rgba(0,0,0,0.16);
  transform: translateY(-8px);
  transition: transform 0.15s cubic-bezier(.22,1,.36,1), opacity 0.12s ease;
  opacity: 0;
}
.search-overlay.is-open .search-overlay__panel {
  transform: translateY(0);
  opacity: 1;
}
body.dark-mode .search-overlay__panel {
  background: #1c1a1a;
  border-color: #2e2a2a;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.search-overlay__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e0dbd5;
}
body.dark-mode .search-overlay__field { border-bottom-color: #2e2a2a; }
.search-overlay__icon { color: var(--rouge); flex-shrink: 0; }
.search-overlay__input {
  flex: 1;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  color: var(--encre);
  background: transparent;
  border: none;
  outline: none;
  min-width: 0;
  -webkit-appearance: none;
}
.search-overlay__input::placeholder { color: var(--gris-clair); }
.search-overlay__input::-webkit-search-cancel-button { display: none; }
body.dark-mode .search-overlay__input::placeholder { color: #3a3636; }
.search-overlay__close {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gris-moyen);
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.search-overlay__close:hover { color: var(--rouge); }
.search-overlay__suggestions { padding: 16px 20px 20px; }
.search-overlay__label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-moyen);
  margin-bottom: 12px;
}
.search-overlay__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.search-overlay__tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-fonce);
  border: 1px solid #e0dbd5;
  padding: 5px 12px;
  transition: border-color 0.15s, color 0.15s;
}
.search-overlay__tag:hover { border-color: var(--rouge); color: var(--rouge); }
body.dark-mode .search-overlay__tag { border-color: #3a3636; color: #c8c2c2; }
body.dark-mode .search-overlay__tag:hover { border-color: var(--rouge); color: var(--rouge); }
@media (max-width: 768px) { .search-overlay { display: none !important; } }

/* Onglets (rubrique-tabs) — hover bleu pour les onglets non-actifs dans jeux, musique, livres */
#films-tabs .rubrique-tab:not(.rubrique-tab--active):hover,
#jeux-tabs .rubrique-tab:not(.rubrique-tab--active):hover,
#musique-tabs .rubrique-tab:not(.rubrique-tab--active):hover,
#livres-tabs .rubrique-tab:not(.rubrique-tab--active):hover { color: var(--bleu) !important; }


/* Titres des cartes hero (À la une) — hover bleu */
.hero__card:has(.hero__img:hover) .hero__title,
.hero__card:has(> a:not(.hero__author):hover) .hero__title,
.hero__card:has(.hero__excerpt--link:hover) .hero__title { color: var(--bleu); }
:not(.hero) > .container > .section-header > .section-link:hover,
:not(.hero) .section-link--mobile-only:hover { color: var(--bleu); }

/* Titres d'articles — hover bleu : séries (horiz-section sans id musique ni théâtre) */
.horiz-section:not(#musique-section):not(#theatre-section) .horiz-card:has(.horiz-card__img:hover) .horiz-card__title,
.horiz-section:not(#musique-section):not(#theatre-section) .horiz-card:has(.horiz-card__body > a:hover) .horiz-card__title,
.horiz-section:not(#musique-section):not(#theatre-section) .horiz-card:has(.horiz-card__excerpt:hover) .horiz-card__title { color: var(--bleu); }

/* Musique */
#musique-section .horiz-card:has(.horiz-card__img:hover) .horiz-card__title,
#musique-section .horiz-card:has(.horiz-card__body > a:hover) .horiz-card__title,
#musique-section .horiz-card:has(.horiz-card__excerpt:hover) .horiz-card__title { color: var(--bleu); }

/* Théâtre */
#theatre-section .horiz-card:has(.horiz-card__img:hover) .horiz-card__title,
#theatre-section .horiz-card:has(.horiz-card__body > a:hover) .horiz-card__title,
#theatre-section .horiz-card:has(.horiz-card__excerpt:hover) .horiz-card__title { color: var(--bleu); }

/* Bonnes nouvelles */
.goodnews-section .goodnews-card:has(.goodnews-card__title a:hover) .goodnews-card__title a,
.goodnews-section a.goodnews-card__title:hover,
.goodnews-section .goodnews-card:has(.goodnews-card__text:hover) .goodnews-card__title a { color: var(--bleu); }

/* Jeux vidéo */
#jeux-section .affiche-card:has(.affiche-card__img:hover) .affiche-card__title,
#jeux-section .affiche-card:has(> a:hover) .affiche-card__title,
#jeux-section .affiche-card:has(.affiche-card__excerpt:hover) .affiche-card__title { color: var(--bleu); }

/* Recos de la semaine */
.reco-section .reco-card:has(.reco-card__avatar:hover) .reco-card__title,
.reco-section .reco-card:has(.reco-card__name:hover) .reco-card__title,
.reco-section .reco-card:has(.reco-card__quote:hover) .reco-card__title,
.reco-section .reco-card:has(> a:hover) .reco-card__title { color: var(--bleu); }

/* Musées & expos */
.magazine-section .expo-card:has(.expo-card__img:hover) .expo-card__title,
.magazine-section .expo-card:has(.expo-card__body > a:hover) .expo-card__title,
.magazine-section .magazine-featured:has(.magazine-featured__img:hover) .magazine-featured__title,
.magazine-section .magazine-featured:has(> a:hover) .magazine-featured__title,
.magazine-section .magazine-featured:has(.magazine-featured__excerpt:hover) .magazine-featured__title,
.magazine-section .magazine-item:has(.magazine-item__img:hover) .magazine-item__title,
.magazine-section .magazine-item:has(.magazine-item__body > a:hover) .magazine-item__title,
.magazine-section .magazine-item:has(.magazine-item__excerpt:hover) .magazine-item__title { color: var(--bleu); }


/* ===================================================================
   BANDEAU COOKIES — repris tel quel du bloc <style> en tête de <body>
   des 10 fichiers de référence (identique dans tous).
   =================================================================== */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; background: var(--blanc); border-top: 3px solid var(--rouge); box-shadow: 0 -4px 24px rgba(0,0,0,0.12); padding: 20px 0; transform: translateY(100%); transition: transform 0.3s ease; }
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cookie-banner__text { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--gris-fonce); flex: 1; min-width: 240px; }
.cookie-banner__text a { color: var(--rouge); text-decoration: underline; text-decoration-color: rgba(159,0,14,0.35); }
.cookie-banner__text a:hover { color: var(--rouge-hover); }
.cookie-banner__actions { display: flex; gap: 12px; flex-shrink: 0; }
@media (max-width: 640px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__actions .btn { flex: 1; }
}


/* ===================================================================
   ===== AJOUTS DU THÈME WORDPRESS ===================================
   Tout ce qui suit n'existe pas dans les maquettes HTML statiques :
   ce sont les briques strictement nécessaires au passage sous
   WordPress (logo administrable, accessibilité, pagination), plus le
   correctif de débordement horizontal du header mobile.
   Aucune valeur en dur : uniquement les custom properties du :root.
   =================================================================== */

/* ----- Accessibilité : lien d'évitement ---------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  background: var(--rouge);
  color: #fff;
  padding: 10px 18px;
}
.skip-link:focus {
  left: 0;
}
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ----- Logo image (Personnaliser > Identité du site) ---------------
   Tant qu'aucun logo image n'est déposé, le thème affiche le wordmark
   texte des maquettes. Dès qu'une image est déposée, elle prend sa
   place sans autre intervention. */
.logo__img { display: flex; align-items: center; justify-content: center; }
.logo__img img {
  display: block;
  width: auto;
  height: auto;
  max-height: 52px;
  max-width: 100%;
}
@media (min-width: 1025px) {
  .logo__img img { max-height: 60px; }
}
@media (max-width: 1024px) {
  .logo__img img { max-height: 34px; }
}
@media (max-width: 768px) {
  .logo__img img { max-height: 30px; }
  .masthead.is-scrolled .logo__img img { max-height: 26px; }
}

/* ===================================================================
   CORRECTIF — débordement horizontal du header mobile
   -------------------------------------------------------------------
   Sous ~414px, le trio hamburger + wordmark + toggle clair/sombre ne
   tenait plus dans le viewport. Le wordmark étant provisoire, on ne
   réduit pas le logo : on sort le toggle du header mobile et on le
   place dans le tiroir hamburger (rangée « Affichage »).
   Le toggle reste dans le header à partir de 769px, où la place ne
   manque pas. Les deux boutons partagent la classe .js-dark-toggle.
   =================================================================== */
.drawer-theme { display: none; }

@media (max-width: 768px) {
  /* Le cluster de droite du header ne contient plus que des éléments
     masqués en mobile : on le retire du flux pour libérer la largeur. */
  .masthead__top > .masthead__actions:last-child { display: none !important; }

  .drawer-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 4px 4px;
    border-top: 1px solid #ece6e0;
    margin-top: 4px;
  }
  body.dark-mode .drawer-theme { border-top-color: #2a2626; }
  .drawer-theme__label {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gris-moyen);
  }
  /* Le tiroir reprend la taille de toggle du header desktop : dans le
     tiroir la place ne manque pas, autant garder une cible confortable. */
  .drawer-theme .toggle-track { width: 44px; height: 24px; }
  .drawer-theme .toggle-thumb { width: 18px; height: 18px; left: 3px; }
  body.dark-mode .drawer-theme .toggle-thumb { left: 23px; }

  /* La rangée « Suivez-nous » suit immédiatement : un seul filet suffit. */
  .drawer-theme + .drawer-socials { border-top: none; padding-top: 14px; margin-top: 0; }
}

/* ===================================================================
   PAGINATION DES ÉDITIONS DE LA NEWSLETTER
   -------------------------------------------------------------------
   9 éditions affichées, bouton « Voir plus » (+9 sur la même page),
   puis pagination classique vers la page suivante — qui répète le
   même cycle. Aucun équivalent dans les maquettes : composant
   construit avec la typo, les couleurs et les filets du design system.
   =================================================================== */
.nl-more { display: flex; justify-content: center; margin-top: 40px; }
.nl-more__btn { min-width: 220px; }
/* Les éditions 10 à 18 sont rendues côté serveur puis révélées par le
   bouton. Sans JavaScript, elles restent visibles (voir <noscript>). */
.affiche-card--more { display: none; }
.affiche-grid.is-expanded .affiche-card--more { display: flex; }

.nl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid #e0dbd5;
}
body.dark-mode .nl-pagination { border-top-color: #2e2a2a; }
.nl-pagination .page-numbers {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-fonce);
  border: 1px solid #e0dbd5;
  padding: 9px 15px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
body.dark-mode .nl-pagination .page-numbers { border-color: #3a3636; color: #c8c2c2; }
.nl-pagination a.page-numbers:hover { color: var(--bleu); border-color: var(--bleu); }
.nl-pagination .page-numbers.current {
  background: var(--rouge);
  border-color: var(--rouge);
  color: #fff;
}
.nl-pagination .page-numbers.dots {
  border-color: transparent;
  padding-left: 4px;
  padding-right: 4px;
  color: var(--gris-moyen);
}
body.dark-mode .nl-pagination .page-numbers.dots { border-color: transparent; }
@media (max-width: 768px) {
  .nl-more { margin-top: 28px; }
  .nl-more__btn { width: 100%; min-width: 0; }
  .nl-pagination { margin-top: 32px; padding-top: 24px; gap: 6px; }
  .nl-pagination .page-numbers { font-size: 11px; padding: 8px 12px; }
}

/* ===================================================================
   ÉTATS DES FORMULAIRES (inscription newsletter, contact)
   Message de confirmation / d'erreur, dans la voix du site.
   =================================================================== */
.form-notice {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  padding: 14px 18px;
  border-left: 3px solid var(--bleu);
  background: rgba(45, 58, 124, 0.08);
  color: var(--encre);
}
.form-notice--error {
  border-left-color: var(--rouge);
  background: rgba(159, 0, 14, 0.08);
}
body.dark-mode .form-notice { background: rgba(139, 157, 224, 0.1); }
body.dark-mode .form-notice--error { background: rgba(159, 0, 14, 0.16); }
/* Sur fond noir (bandeau newsletter du footer, widget article) */
.footer .form-notice,
.widget--newsletter .form-notice {
  background: rgba(255, 255, 255, 0.12);
  border-left-color: #fff;
  color: #fff;
  max-width: 380px;
  width: 100%;
}
/* Pot de miel anti-spam : jamais visible, jamais lu par un lecteur d'écran */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ----- Fil d'ariane : maillon de la page courante ------------------
   Rendu en <span> plutôt qu'en lien mort (voir largonaute_breadcrumb).
   La règle .page-breadcrumb span des maquettes vise les séparateurs
   « / » : on rétablit ici la couleur et l'absence de marge du texte. */
.page-breadcrumb .page-breadcrumb__current {
  margin: 0;
  color: var(--gris-moyen);
}

/* ----- Pastilles d'avatar : Gravatar par-dessus les initiales -------
   Le rond de couleur et ses initiales restent la base — c'est le repli
   quand la personne n'a pas de compte Gravatar. La photo, quand elle
   existe, vient recouvrir le rond en conservant sa forme.
   Voir largonaute_avatar_inner() dans inc/template-tags.php. */
/* Le cadrage vit dans le MÊME fichier que l'image : si la feuille de
   styles d'une page arrivait à manquer, l'image resterait bornée à sa
   pastille au lieu de s'étaler sur toute la page. */
.largonaute-avatar {
  position: relative;
  overflow: hidden;
  /* Taille et forme de repli. Chaque composant redéfinit les siennes
     juste après (main.css est chargé en premier) ; ce repli n'existe
     que pour qu'une pastille reste une pastille même si la feuille de
     styles d'une page venait à manquer. */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
}
.largonaute-avatar__initials {
  line-height: 1;
}
.largonaute-avatar__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

/* ===== MOT DU LEXIQUE =====================================================
   Composant présent dans les éditions, pas seulement sur la page Lexique :
   il vit donc ici, dans la feuille chargée partout. Le balisage est posé
   automatiquement par inc/lexique.php.

   Le mot garde la couleur du texte et n'est souligné qu'en pointillés
   rouges : il se remarque sans hacher la lecture.

   L'infobulle est masquée avec display:none et non avec opacity seule —
   une infobulle invisible mais présente dans la mise en page dépasse à
   droite de l'écran sur mobile et y crée une barre de défilement.        */
.lex-term { position: relative; display: inline-block; touch-action: manipulation; }
.lex-term > a {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--rouge);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: help;
  /* Sur mobile, lire une définition demande un appui puis un second pour
     ouvrir le lexique — et deux appuis rapprochés au même endroit, c'est
     le geste de zoom du navigateur : la page se réduisait sous le doigt.
     « manipulation » retire ce zoom-là sur le mot seulement ; le pincer
     pour agrandir et le défilement restent intacts partout, y compris
     ici. Il supprime au passage le délai de 300 ms avant le clic. */
  touch-action: manipulation;
}
.lex-term > a:hover,
.lex-term > a:focus-visible { color: var(--rouge); }
.lex-term__tooltip {
  display: none;
  position: absolute;
  /* Centrée sous le mot par défaut ; le script pose ensuite un « left »
     exact, en pixels, pour la maintenir dans l'écran.

     ATTENTION — ne jamais recadrer cette infobulle avec transform. Les
     navigateurs WebKit (Safari, iOS) calculent la largeur de la page à
     partir de la position AVANT transformation : l'infobulle restait
     visuellement en place, mais le document devenait plus large que
     l'écran, et le téléphone réduisait toute la page pour la faire
     tenir. Seul un déplacement de mise en page — « left » — évite ça. */
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  /* Un mot insécable plus large que la bulle — une adresse web dans une
     définition, un nom composé à rallonge — déborderait sinon de la bulle
     et élargirait à nouveau la page. La première déclaration sert de repli
     pour les navigateurs qui ne connaissent pas « anywhere ». */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 400;
}
.lex-term__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  /* La flèche suit le mot quand l'infobulle est recadrée. Marge négative
     plutôt que transform, pour la même raison que ci-dessus. */
  left: var(--lex-fleche, 50%);
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--noir);
}
/* Souris et clavier. La règle de survol est enfermée dans (hover: hover) :
   sur un écran tactile, où un appui déclenche aussi un « survol », elle
   n'existe pas — c'est le script qui ouvre l'infobulle au premier appui. */
@media (hover: hover) {
  .lex-term > a:hover .lex-term__tooltip { display: block; animation: lex-tooltip-in 0.15s ease both; }
}
.lex-term > a:focus-visible .lex-term__tooltip,
.lex-term.is-open .lex-term__tooltip { display: block; animation: lex-tooltip-in 0.15s ease both; }
/* L'apparition ne joue que sur l'opacité : une animation qui toucherait
   à « transform » écraserait le placement posé par le script, et une
   valeur var() figée dans des keyframes n'est pas recalculée par tous
   les navigateurs quand elle change. */
@keyframes lex-tooltip-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lex-term > a:hover .lex-term__tooltip,
  .lex-term > a:focus-visible .lex-term__tooltip,
  .lex-term.is-open .lex-term__tooltip { animation: none; }
}
/* Infobulle sous le mot quand il n'y a pas la place au-dessus. */
.lex-term--below .lex-term__tooltip { bottom: auto; top: calc(100% + 9px); }
.lex-term--below .lex-term__tooltip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--noir);
}
/* Sur écran tactile le mot est un lien qu'on ouvre au second appui. */
@media (hover: none) {
  .lex-term > a { cursor: pointer; }
  .lex-term.is-open > a { color: var(--rouge); }
}