/* ============================================
   KART MAG — Shared styles (premium edition)
   ============================================ */

:root {
  --km-blue: #0033A0;
  --km-blue-deep: #002577;
  --km-blue-ink: #0B1F4D;
  --km-blue-night: #0A1638;
  --km-blue-soft: #142657;
  --km-yellow: #FFD400;
  --km-yellow-soft: #F5C518;
  --km-gold: #D4AF37;
  --km-gold-soft: #B8941F;
  --km-cream: #F5EFE0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--km-blue-night);
  color: #fff;
  line-height: 1.5;
}
::selection { background: var(--km-yellow); color: var(--km-blue-ink); }

.font-serif { font-family: 'Fraunces', Georgia, serif; }
/* font-mono now mapped to Inter with tabular numbers + light tracking pour un rendu corpo cohérent */
.font-mono { font-family: 'Inter', system-ui, sans-serif; font-feature-settings: 'tnum', 'lnum'; letter-spacing: 0.02em; }

/* === Gold gradient text — version par défaut (sur fond sombre) === */
.text-gold-gradient {
  background: linear-gradient(135deg, #FFD400 0%, #FFE675 35%, #D4AF37 70%, #B8941F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === Adaptation des accents dorés sur fonds clairs (paper / cream / white) ===
   Sur fond clair, le jaune pur #FFD400 disparaît → on assombrit vers #8C6F0E
   pour respecter WCAG AA et conserver la chaleur or de la marque. */
.bg-paper .text-gold-gradient,
.bg-paper-soft .text-gold-gradient,
.bg-cream .text-gold-gradient,
.bg-cream-soft .text-gold-gradient,
section.bg-paper .text-gold-gradient,
section.bg-paper-soft .text-gold-gradient {
  background: linear-gradient(135deg, #8C6F0E 0%, #9C7B14 50%, #6B5409 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-paper .text-km-yellow,
.bg-paper-soft .text-km-yellow,
.bg-cream .text-km-yellow,
.bg-cream-soft .text-km-yellow,
section.bg-paper .text-km-yellow,
section.bg-paper-soft .text-km-yellow {
  color: #8C6F0E;
}

/* Page-eyebrow (utilise --km-yellow) — version fond clair */
.bg-paper .page-eyebrow,
.bg-paper-soft .page-eyebrow,
section.bg-paper .page-eyebrow,
section.bg-paper-soft .page-eyebrow {
  color: #8C6F0E;
}
.bg-paper .page-eyebrow::before,
.bg-paper-soft .page-eyebrow::before,
section.bg-paper .page-eyebrow::before,
section.bg-paper-soft .page-eyebrow::before {
  background: #B8941F;
}

/* === Aurora background === */
.hero-vignette {
  background:
    radial-gradient(ellipse 80% 80% at 50% 30%, transparent 0%, rgba(2, 7, 23, 0.4) 60%, var(--km-blue-night) 100%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0, 51, 160, 0.4) 0%, transparent 70%);
}
@keyframes aurora-shift {
  0%, 100% { transform: translate(0,0) scale(1); opacity: 0.5; }
  33%      { transform: translate(8%, -6%) scale(1.1); opacity: 0.65; }
  66%      { transform: translate(-6%, 4%) scale(1.05); opacity: 0.4; }

}
.aurora-1 { animation: aurora-shift 18s ease-in-out infinite; }
.aurora-2 { animation: aurora-shift 22s ease-in-out infinite reverse; }

/* === LIVE pulse === */
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.6); }
}
.live-dot::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 9999px; background: #ef4444;
  animation: live-pulse 1.4s ease-in-out infinite;
}

/* === Marquee === */
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: scroll-x 50s linear infinite; }

/* === Scroll reveal ===
   Le masquage est conditionné à la classe .js, posée sur <html> par un
   script en tête de page. Sans elle — JavaScript désactivé, script en
   erreur, robot qui n'exécute rien — le contenu reste simplement
   visible. Auparavant tout le site était en opacity: 0 par défaut :
   la moindre erreur JS rendait la page entièrement blanche.

   La durée passe de .9s à .5s : au-delà, un défilement rapide laisse
   voir des blocs vides le temps que l'animation se termine. */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Mouvement réduit : le contenu apparaît sans animation ni décalage. */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* === Card hover === */
.card-hover { transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease; }
.card-hover:hover { transform: translateY(-4px); }
.card-hover .card-image { transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.card-hover:hover .card-image { transform: scale(1.06); }

/* === Magnetic link underline === */
.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s cubic-bezier(.2,.7,.2,1);
}
.link-underline:hover { background-size: 100% 1px; }

/* === Glass === */
.glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
}

/* === Gold border (anniversaire) === */
.gold-border {
  background: linear-gradient(135deg, #FFD400, #D4AF37, #B8941F, #D4AF37, #FFD400);
  padding: 1px;
}

/* === Headings === */
.display-xl { font-size: clamp(3rem, 9vw, 8rem); line-height: 0.88; letter-spacing: -0.045em; }
.display-lg { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.92; letter-spacing: -0.035em; }
.display-md { font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 0.98; letter-spacing: -0.025em; }
.italic-accent { font-style: italic; font-weight: 400; }

/* === Subtle noise overlay === */
.noise::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 999;
}

/* === No scrollbar utility === */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* === Anniv medal (static, elegant) === */
.anniv-medal {
  position: relative;
  display: inline-block;
  width: 132px;
  height: 132px;
}
.anniv-medal::before,
.anniv-medal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.anniv-medal::before {
  background: conic-gradient(from 0deg, #B8941F, #FFD400, #D4AF37, #FFE675, #B8941F);
  filter: blur(0.5px);
}
.anniv-medal::after {
  inset: 6px;
  background: linear-gradient(135deg, #FFD400 0%, #D4AF37 100%);
  box-shadow: inset 0 -8px 18px rgba(180, 130, 30, .35), inset 0 4px 14px rgba(255,255,255,.45);
}
.anniv-medal__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--km-blue-ink);
}

/* === Subscribe pill subtle (subliminal) === */
.subscribe-subtle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,212,0,0.35);
  background: rgba(255,212,0,0.06);
  color: var(--km-yellow);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .25em;
  transition: all .35s ease;
}
.subscribe-subtle:hover {
  background: rgba(255,212,0,0.12);
  border-color: var(--km-yellow);
}

/* === Bar fill === */
@keyframes fill-bar { from { width: 0; } }
.bar-fill { animation: fill-bar 1.6s cubic-bezier(.2,.7,.2,1) both; }

/* === Sponsor logo container - clean grayscale → color on hover === */
.sponsor-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 14px;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
  background: rgba(255,255,255,0.015);
  transition: all .35s ease;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}
.sponsor-mark:hover {
  color: #fff;
  border-color: rgba(255,212,0,0.4);
  background: rgba(255,212,0,0.05);
}
.sponsor-mark .accent { color: var(--km-yellow); font-style: italic; }

/* === Sponsor logo grid (vrais logos officiels) ===
   Cartes uniformes, logos grayscale → couleur au hover (style press-kit) */
.sponsor-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid rgba(11, 31, 77, .08);
  border-radius: 4px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  text-decoration: none;
  overflow: hidden;
}
.sponsor-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(.85);
  opacity: .75;
  transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}
.sponsor-logo:hover {
  border-color: var(--km-yellow);
  box-shadow: 0 12px 28px -10px rgba(255, 212, 0, .25);
  transform: translateY(-2px);
}
.sponsor-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
/* Logos sur fond sombre (ex: IAME version blanche) : inverser le grayscale pour qu'ils se voient sur blanc */
/* Certains logos de partenaires sont dessinés pour un fond sombre : sur la
   carte blanche, leur partie claire disparaît. Quand une inversion fausserait
   leurs couleurs de marque — le orange de Birel ART vire au cyan —, on change
   plutôt le fond de la carte. Le logo garde alors ses teintes exactes. */
.sponsor-logo--fond-nuit {
  background: #0B1F4D;
  border-color: rgba(255, 255, 255, 0.12);
}
.sponsor-logo--fond-nuit:hover {
  border-color: var(--km-yellow);
}
.sponsor-logo--fond-nuit .sponsor-logo__text {
  color: rgba(255, 255, 255, 0.82);
}

.sponsor-logo--dark img {
  filter: invert(1) grayscale(100%) brightness(.6);
  opacity: .85;
}
.sponsor-logo--dark:hover img {
  filter: invert(1) grayscale(0%) brightness(.5);
  opacity: 1;
}
/* Texte fallback si pas de logo (ex: KPR sans logo officiel) */
.sponsor-logo__text {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  /* .55 donnait 3,76 de contraste sur fond blanc, sous le seuil de 4,5.
     .68 monte à 5,68 en gardant l'effet estompé voulu avant survol. */
  color: rgba(11, 31, 77, .68);
  transition: color .25s ease;
}
.sponsor-logo:hover .sponsor-logo__text {
  color: var(--km-blue-ink);
}

/* === Nav dropdown (mega-menu Résultats) === */
.nav-dropdown {
  position: relative;
}
.nav-dropdown__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-top: 4px;
  min-width: 340px;
  padding: 10px;
  background: rgba(11, 31, 77, .98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  box-shadow:
    0 32px 64px -12px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 212, 0, .05),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1);
  z-index: 50;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Petit pont invisible pour empêcher la fermeture entre lien et panel */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 12px;
  pointer-events: none;
}
.nav-dropdown:hover::after {
  pointer-events: auto;
}
.nav-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: rgba(255, 255, 255, .85);
  transition: background .15s ease, transform .15s ease;
}
.nav-dropdown__item:hover {
  background: rgba(255, 212, 0, .08);
  color: #fff;
  transform: translateX(2px);
}
.nav-dropdown__item--featured {
  background: linear-gradient(135deg, rgba(255, 212, 0, .12) 0%, rgba(255, 212, 0, .03) 100%);
  border: 1px solid rgba(255, 212, 0, .25);
}
.nav-dropdown__item--featured:hover {
  background: linear-gradient(135deg, rgba(255, 212, 0, .18) 0%, rgba(255, 212, 0, .06) 100%);
  border-color: rgba(255, 212, 0, .5);
}
.nav-dropdown__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 212, 0, .85);
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
}
.nav-dropdown__item--featured .nav-dropdown__icon {
  background: linear-gradient(135deg, #FFD400, #B8941F);
  color: var(--km-blue-ink);
}
.nav-dropdown__title {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.nav-dropdown__sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-top: 2px;
}
.nav-dropdown__item:hover .nav-dropdown__sub {
  color: rgba(255, 212, 0, .7);
}
.nav-dropdown__divider {
  height: 1px;
  background: rgba(255, 255, 255, .06);
  margin: 6px 8px;
}
.nav-dropdown__section-label {
  padding: 8px 14px 4px;
  font-size: .58rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, .35);
}
.nav-dropdown__chevron {
  margin-left: 4px;
  font-size: .55em;
  opacity: .5;
  transition: transform .2s ease;
}
.nav-dropdown:hover .nav-dropdown__chevron {
  transform: translateY(1px);
  opacity: .9;
}

/* === Course / KMO date cards === */
.km-date {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  background: linear-gradient(135deg, #FFD400 0%, #D4AF37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === Page header === */
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  color: var(--km-yellow);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .4em;
  font-weight: 600;
}
.page-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--km-yellow);
}

/* === Nav uniforme — tous les titres ont la même apparence ====
   Seule exception conservée : ★ étoile dorée à droite de Magazine
   ============================================================ */
.nav-link {
  position: relative;
  padding: .5rem .9rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255,255,255,0.88);
  transition: color .2s ease;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-radius: 0;
}
.nav-link:hover,
.nav-link.active { color: #fff; }

/* Toutes les variantes (nav-home / nav-priority / nav-secondary / nav-accent / nav-cta-pill)
   héritent du même style de base — pas de differentiation taille / poids / couleur */
.nav-link.nav-home,
.nav-link.nav-priority,
.nav-link.nav-secondary,
.nav-link.nav-accent,
.nav-link.nav-cta-pill {
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: .5rem .9rem;
  letter-spacing: 0;
  margin-left: 0;
}
.nav-link.nav-home:hover,
.nav-link.nav-priority:hover,
.nav-link.nav-secondary:hover,
.nav-link.nav-accent:hover,
.nav-link.nav-cta-pill:hover {
  color: #fff;
  background: transparent;
}
.nav-link.nav-priority::before { content: none; }

/* Seule exception : ★ étoile dorée à droite de Magazine */
.nav-link.nav-accent::after {
  content: '★';
  margin-left: 6px;
  font-size: 1.05em;
  color: #FFD400;
  vertical-align: middle;
  display: inline-block;
  transition: transform .3s ease;
}
.nav-link.nav-accent:hover::after {
  transform: rotate(72deg) scale(1.15);
}
.nav-link.nav-cta-pill::after { content: none !important; }
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 1rem;
  right: 1rem;
  height: 1px;
  background: var(--km-yellow);
}

/* === Stat block === */
.stat-block { padding: 1.25rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; }

/* === Form input minimal === */
.input-min {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  padding: .85rem 1rem;
  color: #fff;
  border-radius: 4px;
  transition: border-color .25s ease;
  font-family: inherit;
}
.input-min::placeholder { color: rgba(255,255,255,0.3); }
.input-min:focus { outline: none; border-color: var(--km-yellow); }

/* === New 30 ans stamp (V3: inline editorial mark) === */
.stamp-30 {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 1rem;
  border-radius: 2px;
  position: relative;
}
.stamp-30::before,
.stamp-30::after {
  content: '';
  display: block;
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--km-gold), transparent);
}
.stamp-30__num {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1;
  background: linear-gradient(135deg, #FFD400 0%, #FFE675 35%, #D4AF37 70%, #B8941F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stamp-30__txt {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: rgba(255,255,255,.7);
  font-weight: 600;
}

/* === Anniversary corner mark (small, top right of hero, refined) === */
.anniv-corner {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(212,175,55,.4);
  background: linear-gradient(180deg, rgba(212,175,55,.08) 0%, transparent 100%);
  border-radius: 2px;
}
.anniv-corner::before,
.anniv-corner::after {
  content: '★';
  position: absolute;
  font-size: .7rem;
  color: var(--km-gold);
}
.anniv-corner::before { top: 6px; left: 8px; }
.anniv-corner::after  { top: 6px; right: 8px; }
.anniv-corner__num {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
  background: linear-gradient(135deg, #FFE675 0%, #D4AF37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.anniv-corner__label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--km-gold);
  font-weight: 700;
}
.anniv-corner__years {
  font-family: 'Inter', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: .35rem;
  margin-top: .2rem;
  width: 100%;
  text-align: center;
}

/* === Header social icons === */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  transition: all .3s ease;
}
.social-icon:hover {
  background: var(--km-yellow);
  color: var(--km-blue-ink);
  transform: translateY(-1px);
}

/* === Sponsor card (with real logo) === */
.sponsor-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.sponsor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -10px rgba(255,212,0,.18);
}
.sponsor-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* === Body bg light variants === */
.bg-km-base { background: var(--km-blue-night); }
.bg-km-soft { background: var(--km-blue-ink); }
.bg-km-alt  { background: var(--km-blue-soft); }

/* === Off-white neutral cool (replaces cream/beige) === */
.bg-paper {
  background: linear-gradient(180deg, #F4F4F2 0%, #ECECE8 100%);
  color: var(--km-blue-ink);
}
.bg-paper-soft {
  background: #F8F8F6;
  color: var(--km-blue-ink);
}
/* Legacy alias — points to new neutral so old refs don't break */
.bg-cream { background: linear-gradient(180deg, #F4F4F2 0%, #ECECE8 100%); color: var(--km-blue-ink); }
.bg-cream-soft { background: #F8F8F6; color: var(--km-blue-ink); }

/* === Partner hero card (Tony Kart prominent) === */
.partner-hero {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #F5EFE0 100%);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.partner-hero:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -20px rgba(255,212,0,.25);
}
.partner-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 60%, rgba(255,212,0,0.15) 100%);
  pointer-events: none;
}
.partner-hero__brand {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 0.85;
}

/* === Tony Kart special styling === */
.tonykart-mark {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--km-blue-ink);
  font-style: italic;
}
.tonykart-mark .tk-accent {
  color: #C8102E;
  font-style: italic;
}

/* === Partner large mark (Wild Kart, Funyo, etc.) === */
.partner-mark-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  padding: 32px 20px;
  background: #fff;
  border-radius: 4px;
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--km-blue-ink);
  letter-spacing: -0.02em;
  transition: all .35s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.partner-mark-lg:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -10px rgba(0,51,160,.2);
}
.partner-mark-lg .pm-accent {
  background: linear-gradient(135deg, #FFD400 0%, #D4AF37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.partner-mark-lg .pm-sub {
  display: block;
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(11,31,77,.5);
  font-style: normal;
}

/* === Photo placeholder (simulé karting réel) === */
.photo-real {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0033A0 0%, #002577 60%, #04102E 100%);
}
.photo-real::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,212,0,.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.05) 0%, transparent 50%);
  pointer-events: none;
}

/* === Product card (boutique e-commerce) === */
.product-card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease;
  color: var(--km-blue-ink);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -15px rgba(0,51,160,.25);
}
.product-card__image {
  position: relative;
  aspect-ratio: 1;
  background: #F5EFE0;
  overflow: hidden;
}
.product-card__image svg, .product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.product-card:hover .product-card__image svg,
.product-card:hover .product-card__image img {
  transform: scale(1.05);
}
.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--km-blue-ink);
  color: var(--km-yellow);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  padding: 4px 10px;
  border-radius: 2px;
}
.product-card__wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--km-blue-ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s, transform .3s, background .3s;
  cursor: pointer;
}
.product-card:hover .product-card__wishlist {
  opacity: 1;
  transform: none;
}
.product-card__wishlist:hover {
  background: var(--km-yellow);
}
.product-card__body {
  padding: 18px 18px 22px;
}
.product-card__cat {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: rgba(11,31,77,.55);
  margin-bottom: 6px;
}
.product-card__name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--km-blue-ink);
}
.product-card__price-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-card__price {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--km-blue-ink);
}
.product-card__sizes {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.product-card__size {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(11,31,77,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 600;
  color: rgba(11,31,77,.7);
  border-radius: 2px;
}
.product-card__btn {
  display: block;
  margin-top: 14px;
  text-align: center;
  background: var(--km-blue-ink);
  color: #fff;
  padding: 10px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  transition: background .3s ease;
  border-radius: 2px;
}
.product-card__btn:hover {
  background: var(--km-yellow);
  color: var(--km-blue-ink);
}

/* === Category pill (boutique nav) === */
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.15rem;
  border-radius: 9999px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  transition: all .3s ease;
  white-space: nowrap;
}
.category-pill:hover {
  border-color: var(--km-yellow);
  color: var(--km-yellow);
}
.category-pill.active {
  background: var(--km-yellow);
  color: var(--km-blue-ink);
  border-color: var(--km-yellow);
}

/* === Catalogue grid (archives) === */
.catalogue-cover {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.catalogue-cover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 60px -20px rgba(0,51,160,.45);
}
.catalogue-cover__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,22,56,.95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity .35s ease;
}
.catalogue-cover:hover .catalogue-cover__overlay {
  opacity: 1;
}

/* === Magnetic / shine hover effect for buttons === */
@keyframes shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.btn-shine {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  background-size: 200% 100%;
  animation: shine 3s ease-in-out infinite;
  pointer-events: none;
}

/* === Tilt card on hover === */
@keyframes float-tilt {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(1deg) translateY(-4px); }
}
.float-tilt { animation: float-tilt 6s ease-in-out infinite; }

/* === Number counter accent === */
.num-counter {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-feature-settings: 'tnum';
}

/* === Section divider light/blue === */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,212,0,.3), transparent);
}

/* ============================================
   EDITORIAL V2 — Magazine premium utilities
   ============================================ */

/* Editorial section eyebrow — magazine-style with number */
.ed-section {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 3rem;
}
.ed-section__num {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.85;
  background: linear-gradient(135deg, #FFD400 0%, #B8941F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.04em;
}
.ed-section__sym {
  color: var(--km-yellow);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.5rem;
  vertical-align: super;
  opacity: .6;
}
.ed-section__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.ed-section__meta {
  margin-left: auto;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: rgba(255,255,255,.5);
  font-weight: 500;
}

/* Drop cap (first letter of paragraph) */
.drop-cap::first-letter {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-style: italic;
  float: left;
  font-size: 4.5rem;
  line-height: 0.85;
  margin: 0.3rem .6rem 0 0;
  background: linear-gradient(135deg, #FFD400 0%, #B8941F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Editorial rule (thin yellow line accent) */
.ed-rule {
  width: 60px;
  height: 1px;
  background: var(--km-yellow);
  display: block;
  margin: 0;
}
.ed-rule--gold {
  background: linear-gradient(90deg, #FFD400, #B8941F);
}

/* Big stat number (tabular display) */
.big-stat {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-style: italic;
  font-feature-settings: 'tnum', 'lnum';
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFD400 50%, #B8941F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Volume / Issue indicator (magazine corner mark) */
.vol-mark {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid rgba(255,212,0,.5);
  border-radius: 2px;
  font-family: 'Inter', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--km-yellow);
  text-transform: uppercase;
}
.vol-mark__top { display:flex; justify-content: space-between; gap: 12px; }
.vol-mark__bottom { color: rgba(255,255,255,.5); font-size: .55rem; }

/* Horizontal snap scroll container */
.h-snap {
  display: flex;
  overflow-x: auto;
  /* Quand un seul axe est déclaré défilant, la spec CSS rend l'AUTRE
     défilant aussi : « overflow-x: auto » seul suffisait à rendre le rail
     scrollable de haut en bas. Au doigt, les cartes se décalaient
     verticalement pendant qu'on les faisait défiler, et restaient de
     travers. Un rail horizontal doit être immobile sur l'autre axe. */
  overflow-y: hidden;
  /* Sans cela, arriver au bout du rail déclenche le geste « page
     précédente » de Safari : on cherche la carte suivante, on quitte le
     site. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  gap: 1.5rem;
  padding: 0 1.5rem;
  /* Sans scroll-padding, le point d'ancrage du snap ignore le padding :
     la première carte se cale sous le bord gauche et apparaît coupée. */
  scroll-padding-left: 1.5rem;
  scroll-padding-right: 1.5rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.h-snap::-webkit-scrollbar { display: none; }
.h-snap > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Editorial image with caption overlay */
.ed-figure {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.ed-figure__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(10,22,56,.95));
  color: #fff;
  z-index: 20;
}

/* Mark for "in focus" cover story */
.in-focus-tag {
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--km-yellow);
  color: var(--km-blue-ink);
  font-family: 'Inter', monospace;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  padding: 8px 14px;
  z-index: 5;
}

/* Hover photo zoom for editorial cards */
.zoom-on-hover img,
.zoom-on-hover svg {
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.zoom-on-hover:hover img,
.zoom-on-hover:hover svg {
  transform: scale(1.04);
}

/* Editorial article number (left margin) */
.ed-article-num {
  font-family: 'Inter', monospace;
  font-size: .7rem;
  letter-spacing: .25em;
  color: rgba(255,212,0,.7);
  text-transform: uppercase;
}

/* Big year backdrop (background graphic element) */
.year-back {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(8rem, 20vw, 18rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,212,0,.15);
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* Magazine ribbon */
.ribbon-30 {
  position: absolute;
  top: 18px;
  right: -34px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #FFD400, #B8941F);
  color: var(--km-blue-ink);
  font-family: 'Inter', monospace;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  padding: 6px 50px;
  box-shadow: 0 4px 16px rgba(255,212,0,.3);
}

/* Cinematic vignette overlay */
.cinematic {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}
.cinematic::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(10,22,56,.6) 100%),
    linear-gradient(180deg, rgba(10,22,56,.2), rgba(10,22,56,.6));
  pointer-events: none;
}

/* Newsletter dark elegant */
.newsletter-dark {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,212,0,.1) 0%, transparent 60%),
    linear-gradient(180deg, #04102E 0%, #0A1638 100%);
  position: relative;
}
.newsletter-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--km-yellow), transparent);
  opacity: .5;
}

/* Marquee thin (dark version) */
.marquee-thin {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,212,0,.2);
  border-bottom: 1px solid rgba(255,212,0,.2);
}

/* Magnetic button (hover lift + glow) */
.btn-magnetic {
  position: relative;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.btn-magnetic:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(255,212,0,.35);
}

/* Editorial "in focus" featured story card */
.in-focus {
  position: relative;
  background: var(--km-blue-soft);
  border-radius: 2px;
  overflow: hidden;
}
.in-focus__media {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}
.in-focus__body {
  padding: clamp(1.5rem, 3vw, 3rem);
}
.in-focus__kicker {
  font-family: 'Inter', monospace;
  font-size: .65rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--km-yellow);
}
.in-focus__title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-top: 1rem;
}

/* Photo placeholder cinematic gradient — for kart photos */
.kart-photo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,212,0,.25), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0,51,160,.6), transparent 50%),
    linear-gradient(135deg, #0033A0 0%, #002577 60%, #04102E 100%);
}
.kart-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-70deg, transparent 0 14px, rgba(255,255,255,.02) 14px 16px);
  pointer-events: none;
}

/* ============================================================
   EN-TÊTE MOBILE — opacité pleine + masquage au défilement
   ============================================================ */


/* ============================================================
   ALLÈGEMENT MOBILE
   Sections volontairement retirées du petit écran : elles alourdissent
   la lecture sans rien apporter d'essentiel. Le contenu reste intact
   sur ordinateur — rien n'est supprimé, seulement masqué en dessous
   de 1024 px.
   ============================================================ */
@media (max-width: 1023px) {
  .km-hide-mobile { display: none !important; }
}

/* ============================================================
   HERO MOBILE — la vidéo respire, le texte s'efface
   ============================================================ */
@media (max-width: 1023px) {
  /* Plus de hauteur pour l'image, et contenu aligné en bas plutôt que centré :
     la vidéo occupe le haut de l'écran, le titre vient se poser dessus. */
  .km-hero {
    min-height: 78vh;
    align-items: flex-end;
  }
  .km-hero > div:last-child {
    padding-top: 0;
    padding-bottom: 3.5rem;
  }

  /* Le voile assombrissait la vidéo à 60-78 % d'opacité : sur petit écran cela
     donnait un aplat bleu marine où l'on ne distinguait plus l'image. On le
     concentre en bas, là où le titre a besoin de contraste, et on libère le haut. */
  .km-hero .km-hero-veil {
    background: linear-gradient(
      180deg,
      rgba(4, 12, 32, .06) 0%,
      rgba(4, 12, 32, .26) 45%,
      rgba(4, 12, 32, .88) 100%
    ) !important;
  }

  /* La vidéo était volontairement désaturée et très sombre : on lui rend
     de la lumière, elle devient l'élément principal de l'écran. */
  .km-hero video {
    filter: saturate(.85) brightness(.9) !important;
  }
}

/* ============================================================
   MASQUAGE DE L'EN-TÊTE — disparition totale
   translateY(-100%) laissait apparaître un liseré (bordure basse et
   arrondi de rendu) : on pousse au-delà et on efface la bordure.
   ============================================================ */
@media (max-width: 1023px) {
}

/* Masquage de l'en-tête : ceinture et bretelles.
   Le seul translateY laissait parfois apparaître un liseré sur iOS
   (bordure, ombre, arrondi de rendu pendant la transition). */
@media (max-width: 1023px) {
}

/* ============================================================
   VIDÉO DU HERO — masquer les contrôles natifs iOS
   Quand iOS refuse la lecture automatique (mode économie d'énergie),
   Safari superpose son gros bouton lecture au centre de la vidéo,
   même sans attribut « controls ». L'image d'attente doit rester nue.
   ============================================================ */
#km-hero-video::-webkit-media-controls,
#km-hero-video::-webkit-media-controls-start-playback-button,
#km-hero-video::-webkit-media-controls-panel,
#km-hero-video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
}
#km-hero-video { pointer-events: none; }

/* ============================================================
   HERO PLEIN ÉCRAN + ENTRÉE DANS LE SITE
   La vidéo occupe tout l'écran à l'arrivée, le texte se pose en bas,
   et un repère invite à descendre vers les articles.
   ============================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } 
}

@media (max-width: 1023px) {
  /* 100svh (et non 100vh) : sur iOS, 100vh compte la barre d'adresse de
     Safari même quand elle se rétracte, ce qui coupait le bas du hero. */
  .km-hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: 0;
  }
  .km-hero > div:last-of-type {
    padding-top: 0;
    padding-bottom: 6.5rem;   /* laisse la place au repère de défilement */
  }
  /* Le titre descend vers le bas de l'image : la vidéo respire au-dessus. */
  .km-hero h1 { font-size: clamp(2.1rem, 8.5vw, 3.2rem); }
  .km-hero .page-eyebrow,
  .km-hero .reveal:first-child { margin-bottom: 1rem; }

}

/* --- Repère « descendre vers les articles » --- */
.km-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
}
@media (max-width: 1023px) { .km-scroll-cue { display: flex; } 
}

.km-scroll-cue__label {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 600;
}
.km-scroll-cue__arrow {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 9999px;
  animation: km-cue-bob 2.1s ease-in-out infinite;
}
.km-scroll-cue__arrow svg { width: 15px; height: 15px; }
.km-scroll-cue:active .km-scroll-cue__arrow { background: rgba(255, 255, 255, .12); }

@keyframes km-cue-bob {
  0%, 100% { transform: translateY(0);    opacity: .75; }
  50%      { transform: translateY(5px);  opacity: 1; }

}
@media (prefers-reduced-motion: reduce) {
  .km-scroll-cue__arrow { animation: none; }

}

/* Hauteur et alignement du hero — pilotés ici, plus par des classes Tailwind
   (celles-ci sont injectées après cette feuille et gagnaient systématiquement). */
.km-hero { align-items: center; min-height: 64vh; }
@media (max-width: 1023px) {
  .km-hero { align-items: flex-end; min-height: 100vh; min-height: 100svh; }

}

/* Marges du contenu du hero — reprises ici pour la même raison :
   py-20 / lg:py-24 (Tailwind) écrasaient le positionnement en bas d'écran. */
.km-hero__content { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 1023px) {
  .km-hero__content {
    padding-top: 0;
    padding-bottom: 7rem;   /* place pour le repère de défilement */
  }

}

/* ============================================================
   PRIORITÉ SUR TAILWIND — règles de mise en page durcies
   Tailwind est chargé depuis un CDN : il injecte ses styles APRÈS cette
   feuille. À spécificité égale, c'est donc toujours lui qui l'emportait,
   et nos règles de hauteur, de marge et de position étaient ignorées.
   On force ici les propriétés structurantes, et elles seules.
   ============================================================ */
.km-hero { min-height: 64vh !important; align-items: center !important; }
.km-hero__content { padding-top: 5rem !important; padding-bottom: 5rem !important; }

@media (max-width: 1023px) {
  .km-hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    align-items: flex-end !important;
  }
  .km-hero__content {
    padding-top: 0 !important;
    padding-bottom: 7rem !important;
  }

}

/* ============================================================
   HERO — image de fond + vidéo par-dessus
   L'image reste visible tant que la vidéo n'a pas démarré (ou si
   l'appareil refuse la lecture). Les deux se recadrent identiquement,
   donc la transition est invisible.
   ============================================================ */
.km-hero-still,
#km-hero-video {
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(.95) brightness(.94) !important;
  transform: scale(1.02);
}
#km-hero-video { pointer-events: none; }

/* ============================================================
   VIDÉO — révélée seulement une fois la lecture réellement lancée
   Un élément <video> se peint en NOIR tant qu'il n'a pas décodé sa
   première image. Avec une vidéo lourde sur réseau mobile, cela
   produisait un aplat noir au-dessus de l'image de fond pendant
   plusieurs secondes. On ne l'affiche donc qu'au premier frame joué ;
   sinon l'image de fond reste, et il n'y a jamais de noir.
   ============================================================ */
#km-hero-video {
  opacity: 0;
  transition: opacity .7s ease;
}
#km-hero-video.km-video-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #km-hero-video { transition: none; }

}

/* ============================================================
   RECHERCHE — version épurée
   Une barre, et les résultats en dessous. On retire tout le reste :
   badge « esc », pied de page avec les raccourcis clavier, texte
   d'accueil, pastilles de catégorie et flèches sur chaque ligne.
   Identique sur mobile et sur ordinateur.
   ============================================================ */
.km-search-footer,
.km-search-kbd,
.km-search-empty,
.km-search-result__kind,
.km-search-result__arrow { display: none !important; }

.km-search-modal {
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55) !important;
}

.km-search-bar {
  padding: 16px 20px !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}
.km-search-results:empty { display: none !important; }
.km-search-results { padding: 6px 0 !important; }

.km-search-result {
  padding: 12px 20px !important;
  gap: 0 !important;
  border-left: none !important;
}
.km-search-result:hover,
.km-search-result.is-active {
  background: rgba(255, 255, 255, .05) !important;
}
.km-search-result__title { font-weight: 500 !important; }
.km-search-result__sub { font-size: .7rem !important; }

/* ════════════════════════════════════════════════════════════
   EN-TÊTE — bloc unique et faisant autorité
   Toutes les règles précédentes ont été supprimées : elles
   s'empilaient et se contredisaient. Ne rien ajouter ailleurs.
   ════════════════════════════════════════════════════════════ */
:root { --km-header-h: 72px; }

@media (max-width: 1023px) {

  /* « fixed » et non « sticky » : ainsi la barre est ancrée au sommet de
     l'écran par construction. En sticky, elle pouvait se retrouver décalée
     pendant le défilement et laisser apparaître la page au-dessus d'elle. */
  header.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #0A1638 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform .25s ease, background-color .25s ease !important;
  }

  /* « fixed » retire l'élément du flux : sans compensation, le haut du
     contenu passerait sous la barre. Sauf sur la page d'accueil, où la
     vidéo doit justement remonter derrière une barre transparente. */
  body:not(.km-has-hero) { padding-top: var(--km-header-h); }

  header.sticky.km-header-hidden {
    transform: translateY(-100%) !important;
  }

  /* Sur le hero : réellement transparente. Un voile à peine perceptible
     suffit, épaulé par une ombre portée sur le logo et les icônes —
     l'ancien dégradé à 50 % rendait la barre encore bleu foncé. */
  header.sticky.km-header-transparent {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, rgba(10,22,56,.30) 0%, rgba(10,22,56,.06) 55%, transparent 100%) !important;
    border-bottom-color: transparent !important;
  }
  header.sticky.km-header-transparent img,
  header.sticky.km-header-transparent svg {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
  }

  /* Barres collantes secondaires : la barre principale étant « fixed »,
     elles se calent juste dessous et se masquent avec elle. */
  .sticky.top-\[72px\] {
    position: fixed !important;
    top: var(--km-header-h) !important;
    left: 0 !important;
    right: 0 !important;
    transition: transform .25s ease !important;
  }
  body.km-header-is-hidden .sticky.top-\[72px\] {
    transform: translateY(calc(-100% - var(--km-header-h))) !important;
  }
  /* Elles sortent aussi du flux : on réserve leur hauteur. */
  body.km-has-subbar:not(.km-has-hero) { padding-top: calc(var(--km-header-h) + var(--km-subbar-h, 58px)); }
}

@media (prefers-reduced-motion: reduce) {
  header.sticky, .sticky.top-\[72px\] { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════
   LOGOS PARTENAIRES — en couleur
   Le rendu noir et blanc avec passage en couleur au survol est un
   procédé « press-kit » : il n'a aucun sens sur mobile, où le survol
   n'existe pas, et prive les marques de leur identité visuelle.
   Les logos s'affichent désormais dans leurs vraies couleurs.
   ════════════════════════════════════════════════════════════ */
.sponsor-logo img {
  filter: none !important;
  opacity: 1 !important;
}
.sponsor-logo:hover img {
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1.03);
}
/* IAME est fourni en version blanche : sur fond clair il faut l'inverser
   pour qu'il reste visible, mais sans le désaturer. */
.sponsor-logo--dark img {
  filter: invert(1) !important;
  opacity: 1 !important;
}
.sponsor-logo--dark:hover img { filter: invert(1) !important; }

/* ════════════════════════════════════════════════════════════
   EN-TÊTE — suppression du liseré sur mobile
   La bordure basse dessinait un trait fin en travers de la vidéo.
   Sur petit écran elle n'apporte rien : la barre se distingue déjà
   par son fond (opaque) ou par le dégradé (transparente).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  header.sticky,
  header.sticky.km-header-transparent {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   CONTRÔLE DE LA VIDÉO DU HERO (WCAG 2.2.2)
   Une vidéo en lecture automatique de plus de 5 secondes doit
   pouvoir être arrêtée. Le bouton reste discret sur l'image, mais
   devient parfaitement visible dès qu'il reçoit le focus clavier.
   ════════════════════════════════════════════════════════════ */
.km-video-toggle {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 5;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 9999px;
  background: rgba(10, 22, 56, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.km-video-toggle:hover { background: rgba(10, 22, 56, .8); }
.km-video-toggle:focus-visible {
  outline: 3px solid var(--km-yellow);
  outline-offset: 3px;
  background: rgba(10, 22, 56, .92);
}
.km-video-toggle svg { width: 15px; height: 15px; }
.km-video-toggle__play { display: none; }
.km-video-toggle.is-paused .km-video-toggle__pause { display: none; }
.km-video-toggle.is-paused .km-video-toggle__play  { display: block; }

/* Sur mobile, le repère de défilement occupe le bas au centre :
   on remonte le bouton pour qu'ils ne se chevauchent pas. */
@media (max-width: 1023px) {
  .km-video-toggle { bottom: auto; top: calc(var(--km-header-h) + .8rem); right: .9rem; }
}

/* ------------------------------------------------------------------
   <picture> autour des images WebP
   Sans cette règle, <picture> crée une boîte inline qui s'interpose
   entre la grille et l'<img> : les classes de mise en page portées par
   l'image (w-full, h-full, object-cover, absolute inset-0) s'appliquent
   alors au parent inline et non plus à la cellule de grille. Les
   vignettes s'écrasaient. display:contents supprime la boîte du
   <picture> : l'image retrouve exactement le parent qu'elle avait
   avant l'ajout du WebP.
   ------------------------------------------------------------------ */
picture { display: contents; }

/* ------------------------------------------------------------------
   Squelette de chargement d'article
   Occupe la place du texte le temps que le JS remplisse le corps.
   Sans lui, le gabarit affichait un article de démonstration complet
   pendant une fraction de seconde, sur chaque article.
   ------------------------------------------------------------------ */
.km-skel {
  height: 1.05rem;
  margin-bottom: .85rem;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(11,31,77,.07) 25%, rgba(11,31,77,.12) 37%, rgba(11,31,77,.07) 63%);
  background-size: 400% 100%;
  animation: km-skel-pulse 1.4s ease-in-out infinite;
}
.km-skel--lead  { height: 1.6rem; margin-bottom: 1.6rem; }
.km-skel--short { width: 62%; }
@keyframes km-skel-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .km-skel { animation: none; } }

/* ── Lien d'évitement ──────────────────────────────────────────────
   Premier élément focusable de la page : il permet à qui navigue au
   clavier de sauter l'en-tête et ses ~10 liens pour atteindre le
   contenu. Invisible tant qu'il n'a pas le focus, d'où le retrait
   hors écran plutôt qu'un display:none, qui l'exclurait du parcours. */
.km-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #FFD400;
  color: #0A1638;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
}
.km-skip:focus {
  left: 0.75rem;
  top: 0.75rem;
}

/* ── Focus visible ────────────────────────────────────────────────
   Le site comptait des centaines de règles :hover et aucun état de
   focus : rien n'indiquait où l'on se trouvait au clavier. */
:focus-visible {
  outline: 2px solid #FFD400;
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Sur fond clair, le jaune manque de contraste : on passe au bleu. */
.bg-paper :focus-visible,
.bg-paper-soft :focus-visible,
main.bg-paper :focus-visible {
  outline-color: #0033A0;
}

/* ── Ancres et en-tête collant ────────────────────────────────────
   L'en-tête fait 74 à 106 px : sans cette marge, cliquer une ancre
   amène le titre visé derrière lui. */
[id] { scroll-margin-top: 6rem; }

/* ── Cibles tactiles ──────────────────────────────────────────────
   Les icônes rondes mesuraient 34 à 40 px. Plutôt que de les
   grossir — ce qui changerait le dessin du pied de page et du
   lecteur vidéo — on étend la zone sensible au doigt sans toucher
   au cercle visible. */
.social-icon,
.km-video-toggle {
  position: relative;
}
.social-icon::after,
.km-video-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Les liens des colonnes du pied de page ne faisaient que 17 px de
   haut : sous le seuil de confort au pouce, et sous le minimum
   WCAG. On leur donne de la hauteur sur petit écran seulement,
   pour ne pas dilater le pied de page sur grand écran. */
@media (max-width: 1023px) {
  footer ul li > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Variantes de gabarit d'attente pour la page Résultats.
   Elles réservent la hauteur réelle du contenu à venir, ce qui évite
   que la page saute au moment où les classements arrivent. */
.km-skel--row { height: 44px; margin-bottom: 6px; border-radius: 2px; }
.km-skel--tab { display: inline-block; width: 104px; height: 34px; margin-right: 8px; border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   PAGE MAGAZINE
   La page ne raconte plus le sommaire — un magazine ne se vend pas par
   son sommaire. Elle montre ce que Kart Mag possède de plus
   caractéristique : ses couvertures. Toute l'emphase va au mur ; le
   reste se tient tranquille.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Le numéro en cours ─────────────────────────────────────────── */
.km-kiosque {
  padding: clamp(5rem, 12vh, 9rem) 1.5rem clamp(4rem, 9vh, 7rem);
}
.km-kiosque__inner {
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .km-kiosque__inner { grid-template-columns: minmax(0, 20rem) 1fr; }
}
.km-kiosque__couv img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  /* L'ombre imite un exemplaire posé sur une table, pas une carte d'interface :
     portée courte, très basse, sans halo. */
  box-shadow: 0 18px 32px -18px rgba(11, 31, 77, .45);
}

/* Le numéro, traité comme sur un dos de magazine : c'est lui l'objet. */
.km-kiosque__num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(5.5rem, 16vw, 11rem);
  line-height: .82;
  letter-spacing: -0.04em;
  color: var(--km-blue-ink);
  font-variant-numeric: lining-nums;
}
.km-kiosque__titre {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.1;
  margin: .6rem 0 0;
  color: var(--km-blue-ink);
}
.km-kiosque__sous {
  margin: 1.1rem 0 0;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(11, 31, 77, .68);
}
.km-kiosque__cta {
  display: inline-block;
  margin-top: 2rem;
  padding: .95rem 2.2rem;
  background: var(--km-blue-ink);
  color: #FAFAF8;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color .25s ease;
}
.km-kiosque__cta:hover { background: var(--km-blue); }

/* ── Le mur ─────────────────────────────────────────────────────── */
.km-mur {
  background: var(--km-blue-night);
  padding: clamp(4rem, 10vh, 7rem) 1.5rem clamp(5rem, 12vh, 8rem);
}
.km-mur__tete {
  max-width: 76rem;
  margin: 0 auto clamp(2rem, 5vh, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.km-mur__tete .page-eyebrow { margin-bottom: .6rem; }
.km-mur__titre {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: #FAFAF8;
  margin: 0;
}
.km-mur__compte {
  margin: 0;
  font-size: .85rem;
  color: rgba(250, 250, 248, .55);
}
.km-mur__droite { text-align: right; }
.km-mur__calameo {
  display: inline-block;
  margin-top: .5rem;
  padding: .55rem 0;
  font-size: .9rem;
  color: #FFD400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.km-mur__calameo:hover { color: #FAFAF8; }
@media (max-width: 639px) { .km-mur__droite { text-align: left; } }

/* Serré volontairement : c'est la densité qui fait l'effet, pas la taille. */
/* En grille, la dernière rangée laissait un ou deux emplacements vides
   selon la largeur d'écran — un trou qui se lit comme une couverture
   manquante. En flex centré, le reliquat se répartit au milieu et la
   rangée se termine proprement, quel que soit le nombre de numéros. */
.km-mur__grille {
  max-width: 76rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.km-mur__grille > * { flex: 0 0 88px; }
@media (min-width: 720px) {
  .km-mur__grille { gap: 14px; }
  .km-mur__grille > * { flex: 0 0 112px; }
}

.km-couv {
  position: relative;
  display: block;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(250, 250, 248, .04);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
/* Les fichiers n'ont pas tous les mêmes proportions — 300×402 pour la
   plupart, mais 520×698 et 520×720 pour quelques anciens. Sans format
   imposé, les rangées du mur seraient irrégulières. On fixe le rapport
   du kiosque et on recadre : la densité prime sur le cadrage exact. */
.km-couv { aspect-ratio: 300 / 402; }
.km-couv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Les couvertures anciennes sont inégales en colorimétrie : un léger
     voile les unifie, et le survol les rend à leurs couleurs. */
  filter: saturate(.72) brightness(.82);
  transition: filter .3s ease;
}
.km-couv:hover,
.km-couv:focus-visible { transform: translateY(-4px); }
.km-couv:hover img,
.km-couv:focus-visible img { filter: none; }

/* Le numéro ne s'affiche qu'à la sollicitation : la grille reste muette. */
.km-couv__num {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .5rem .4rem .35rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--km-blue-ink);
  background: var(--km-yellow);
  transform: translateY(101%);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.km-couv:hover .km-couv__num,
.km-couv:focus-visible .km-couv__num { transform: translateY(0); }

/* ── Abonnement ─────────────────────────────────────────────────
   C'était un cadre blanc sans rapport avec le reste de la page. Il
   reprend désormais le fond bleu nuit, le halo et la pile de
   couvertures du héros, en plus petit. */
.km-abo {
  position: relative;
  overflow: hidden;
  background: var(--km-blue-night);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: clamp(4.5rem, 11vh, 7.5rem) 1.5rem;
}
.km-abo__halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 22% 50%, rgba(255, 212, 0, .13) 0%, transparent 62%);
}
.km-abo__inner {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(2.5rem, 7vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
@media (min-width: 760px) {
  .km-abo__inner {
    grid-template-columns: minmax(0, 15rem) 1fr;
    justify-items: start;
    text-align: left;
  }
}

/* La pile : trois numéros récents en éventail, même logique de
   profondeur que la couverture du héros. */
.km-abo__pile {
  position: relative;
  width: 12rem;
  height: 15rem;
  flex-shrink: 0;
}
.km-abo__pile-item {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .65);
  transform: rotate(calc((2 - var(--i)) * 5deg)) translateX(calc((2 - var(--i)) * 9px));
  transform-origin: bottom center;
  z-index: calc(var(--i) + 1);
}
.km-abo__pile-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le numéro du dessus porte le liseré doré, comme au héros. */
.km-abo__pile-item:last-child::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px #B8941F, inset 0 0 0 3px rgba(255, 212, 0, .35);
}

.km-abo__ligne {
  margin: 1.2rem 0 0;
  max-width: 32ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}

@media (prefers-reduced-motion: reduce) {
  .km-couv, .km-couv img, .km-couv__num { transition: none; }
  .km-couv:hover, .km-couv:focus-visible { transform: none; }
}

/* Sceau anniversaire : rotation lente et continue. Le seul mouvement
   permanent de la page — il porte l'anniversaire, ce qui évite de
   l'écrire une fois de plus dans le texte. */
@keyframes anniv-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.anniv-rotate { animation: anniv-rotate 26s linear infinite; }
@media (prefers-reduced-motion: reduce) { .anniv-rotate { animation: none; } }




/* ════════════════════════════════════════════════════════════
   EN-TÊTE TRANSPARENT SUR LE HÉROS — GRAND ÉCRAN
   La règle n'existait qu'en dessous de 1024 px. Sur bureau, la barre
   restait « sticky », donc dans le flux : elle posait un bandeau bleu
   plein au-dessus de la vidéo au lieu de la laisser remonter derrière.
   On reprend ici exactement le mécanisme du mobile, mais réservé aux
   pages qui ont un héros (body.km-has-hero), pour ne rien changer
   ailleurs.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body.km-has-hero header.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transition: background-color .25s ease, border-color .25s ease !important;
  }

  body.km-has-hero header.sticky.km-header-transparent {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, rgba(4,12,32,.55) 0%, rgba(4,12,32,.16) 60%, transparent 100%) !important;
    /* Pas « border-bottom-color: transparent » mais bien AUCUNE bordure : le
       fond translucide est composite sous la zone de bordure et s'y assombrit,
       ce qui dessinait un trait d'un pixel sous la barre. Meme cause que le
       liseré des cartes du hero. */
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Le logo et les icônes passent sur l'image : une ombre portée courte
     les détache sans réintroduire de fond. */
  body.km-has-hero header.sticky.km-header-transparent img,
  body.km-has-hero header.sticky.km-header-transparent svg {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
  }

  /* La barre couvre désormais les 72 premiers pixels du héros : on rend
     au contenu la place qu'elle occupe, sinon le sur-titre passe dessous. */
  body.km-has-hero .km-hero__content {
    padding-top: calc(5rem + var(--km-header-h, 72px)) !important;
  }
}


/* ════════════════════════════════════════════════════════════
   CARTES DU HERO — dépoli, sans liseré
   Les remplissages restent ceux d'origine : c'est l'arrière-plan qui
   passe au flou, pas la carte qui s'assombrit. Le cadre, lui, n'apparaît
   toujours qu'au survol.
   ════════════════════════════════════════════════════════════ */
.km-hero .km-hero-card {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Pas de `border` au repos : une bordure transparente de 1 px suffisait à
   dessiner un liseré sombre tout autour de la carte — le fond translucide est
   composité sous la zone de bordure et s'y assombrit. Le cadre du survol passe
   donc en ombre intérieure, qui ne touche ni la mise en page ni les bords. */
.km-hero .km-hero-card { border: 0; }
.km-hero .km-hero-card:hover,
.km-hero .km-hero-card:focus-visible {
  box-shadow: inset 0 0 0 1px #FFD400;
}


/* ════════════════════════════════════════════════════════════
   L'EN-TÊTE SE FOND DANS LE BANDEAU DE CHAQUE PAGE
   Sur l'accueil, la barre est transparente et la vidéo passe
   derrière. Les pages intérieures suivent la même logique : leur
   bandeau coloré (.km-page-hero) remonte derrière la barre, qui
   n'a donc plus sa propre couleur. Plus de démarcation entre un
   bleu et un autre.
   Au défilement, la barre reprend son fond opaque — c'est le
   comportement déjà en place, piloté par .km-header-transparent.
   ════════════════════════════════════════════════════════════ */
body.km-has-hero .km-page-hero {
  padding-top: calc(4rem + var(--km-header-h, 72px));
}
@media (min-width: 1024px) {
  body.km-has-hero .km-page-hero {
    padding-top: calc(6rem + var(--km-header-h, 72px));
  }
}

/* Le voile de l'accueil est fait pour une vidéo. Sur un aplat de
   couleur, il n'a pas lieu d'être : la barre est simplement
   transparente, et le dégradé de la page fait le travail. */
body.km-has-hero:not(.km-a-video) header.sticky.km-header-transparent {
  background-image: none !important;
}


/* Formules d'abonnement — reprend la « rangée de chiffres » de la charte :
   nombres dorés séparés d'un filet vertical, libellé en capitales espacées. */
.km-abo__formules {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  margin-top: 1.75rem;
  flex-wrap: wrap;
}
.km-abo__prix {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(135deg, #FFD400 0%, #FFE675 35%, #D4AF37 70%, #B8941F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.km-abo__duree {
  margin-top: .5rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}
.km-abo__filet {
  width: 1px;
  align-self: stretch;
  min-height: 3rem;
  background: rgba(255, 255, 255, .15);
  flex: none;
}
@media (max-width: 420px) {
  .km-abo__filet { display: none; }
}

/* Prix barré de référence et mention de livraison. */
.km-abo__eur { font-size: .55em; margin-left: .1em; }
.km-abo__barre {
  margin-top: .45rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .45);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 212, 0, .5);
}
.km-abo__note {
  margin-top: 1rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .45);
  font-weight: 300;
}


/* ════════════════════════════════════════════════════════════
   LIGNES COMPACTES SUR TÉLÉPHONE
   Sur mobile, une vignette pleine largeur par article oblige à
   défiler longuement pour voir trois titres. On passe en ligne :
   miniature à gauche, titre à droite — la densité d'un sommaire
   de presse plutôt que celle d'une galerie.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* !important : tailwind.css est chargé APRÈS cette feuille, et sa classe
     utilitaire « block » l'emporterait sinon sur ce display:grid. */
  .km-ligne {
    display: grid !important;
    /* !important aussi sur les colonnes : « grid-cols-12 » de Tailwind
       s'appliquerait sinon aux brèves, qui l'utilisent sur grand écran. */
    grid-template-columns: 104px 1fr !important;
    gap: 1rem !important;
    align-items: start;
  }
  /* Toutes les miniatures au même format : les brèves étaient en carré,
     les autres en 16/10, ce qui donnait des tailles différentes côte à côte. */
  .km-ligne .ed-figure,
  .km-ligne .col-span-5 { grid-column: auto !important; }
  .km-ligne .km-ligne__texte { grid-column: auto !important; }
  .km-ligne .ed-figure {
    aspect-ratio: 4 / 3 !important;
    margin: 0;
  }
  .km-ligne__texte > :first-child { margin-top: 0; }
  .km-ligne__texte h3,
  .km-ligne__texte h4 {
    font-size: .98rem;
    line-height: 1.28;
  }
  .km-ligne__texte.pt-5 { padding-top: 0; }

  /* Le badge de rubrique est calibré pour une vignette pleine largeur :
     sur une miniature de 104 px il la recouvrait presque entièrement. */
  .km-ligne .ed-figure > span[class*="absolute"] {
    top: 4px !important;
    left: 4px !important;
    font-size: 7px !important;
    letter-spacing: .08em !important;
    padding: 2px 4px !important;
    max-width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Interligne resserré : celui du bureau laissait trop d'air entre deux
     lignes de sommaire. */
  #articles-grid { gap: 1.15rem !important; }
  /* La date, quand elle vient en dernier (accueil). Sans le :not, la règle
     prenait aussi le titre des Actualités, où il vient en dernier : 11 px. */
  .km-ligne__texte > :last-child:not(h3):not(h4) {
    margin-top: .5rem;
    font-size: .68rem;
  }
}


/* ════════════════════════════════════════════════════════════
   ZONE SÛRE DES TÉLÉPHONES À ENCOCHE
   Sur iPhone, la page s'étend désormais sous la barre d'état
   (viewport-fit=cover). Sans compensation, le logo passerait
   sous l'heure ; et pendant que Safari déplie sa propre barre,
   le contenu apparaissait au-dessus de l'en-tête, qui semblait
   flotter au milieu de l'écran.
   Deux mesures : on réserve la hauteur de la zone sûre, et un
   pseudo-élément prolonge le fond vers le haut pour qu'aucun
   contenu ne puisse jamais s'y glisser.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  header.sticky {
    padding-top: env(safe-area-inset-top, 0px) !important;
    box-sizing: content-box;
  }
  header.sticky::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 160px;
    /* Surtout PAS « inherit » : l'en-tête est à 85 % d'opacité et compte sur
       son flou d'arrière-plan, que ce pseudo-élément n'a pas. Le contenu
       transparaissait donc dans la zone de statut. Aplat opaque. */
    background: #0A1638;
    pointer-events: none;
  }
  /* Sur le héros la barre est transparente : le prolongement doit l'être
     aussi, sinon on rétablirait le bandeau qu'on vient de supprimer. */
  header.sticky.km-header-transparent::before { display: none; }
}


/* ════════════════════════════════════════════════════════════
   ARCHIVES SUR TÉLÉPHONE — aller à l'essentiel
   La page reprenait telle quelle une mise en page de bureau :
   grille d'années sur quatre rangs, pastilles de statistiques,
   extrait et adresse de l'article sous chaque titre. Sur un
   écran de téléphone, tout cela s'empile et noie la seule chose
   que le lecteur cherche : la date et le titre.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Une ligne = une date, un titre. Rien d'autre. */
  .article-row__excerpt,
  .article-row__meta { display: none !important; }
  .article-row {
    padding: .85rem 1rem !important;
    gap: .15rem !important;
  }
  .article-row__date {
    font-size: .68rem !important;
    letter-spacing: .06em;
    margin-bottom: .1rem;
  }
  .article-row__title {
    font-size: .95rem !important;
    line-height: 1.3 !important;
  }

  /* Les années passent en bande défilante, comme les filtres des
     Actualités, au lieu d'une grille qui occupait quatre rangs. */
  #year-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    /* Même raison que le rail de l'accueil : sans cette ligne, la rangée se
       laisse aussi tirer de haut en bas. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    gap: .4rem !important;
    padding-bottom: .35rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #year-bar::-webkit-scrollbar { display: none; }
  #year-bar > * { flex: none; }
  /* Le décompte par année est une information de confort : elle double
     la largeur de chaque pastille pour rien sur un petit écran. */
  #year-bar .year-jump .count { display: none !important; }

  /* Pastilles de statistiques : décor de bureau. */
  .stats-pill { display: none !important; }

  /* Le champ de recherche prend toute la largeur, sans surdimension. */
  .search-box {
    font-size: .95rem !important;
    padding: .7rem .9rem !important;
  }
}


/* Pagination sur téléphone : dix-sept pastilles ne tiennent pas dans la
   largeur. La rangée défile, avec une marge aux deux bouts pour que la
   première et la dernière ne soient pas rognées par le bord de l'écran. */
@media (max-width: 767px) {
  #pagination {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    /* Même raison que le rail de l'accueil : sans cette ligne, la rangée se
       laisse aussi tirer de haut en bas. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding: .25rem 1.5rem;
    margin-inline: -1.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #pagination::-webkit-scrollbar { display: none; }
  #pagination > * { flex: none; }
}


/* ════════════════════════════════════════════════════════════
   BARRES DE FILTRES SUR TÉLÉPHONE — elles ne collent plus
   Collée sous l'en-tête, la barre de catégories posait un
   second bandeau bleu en travers de l'écran pendant toute la
   lecture. Sur un petit écran, deux bandeaux pleine largeur
   mangent le tiers de la hauteur utile pour une information
   qu'on ne consulte qu'une fois.
   Elle défile donc avec la page : on la trouve en haut, là où
   on la cherche, et elle libère l'écran ensuite.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .sticky.top-\[72px\] {
    position: static !important;
    top: auto !important;
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BANDE DES PARTENAIRES — accueil, sous le bandeau des brèves
   Même format que celui-ci : fond nuit, filet clair, petites capitales.
   ══════════════════════════════════════════════════════════════ */
.km-bande-partenaires {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(10, 22, 56, .6);
}
.km-bande-partenaires__dedans {
  max-width: 1500px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 20px; height: 56px;
}
.km-bande-partenaires__titre {
  flex: none; font: 500 11px/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .2em; color: var(--km-yellow, #FFD400);
}
.km-bande-partenaires__fenetre {
  position: relative; /* repère des positions calculées dans bande-partenaires.js */
  flex: 1; min-width: 0; overflow: hidden; height: 100%;
  display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.km-bande-partenaires__rail {
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0; width: max-content;
}
.km-bande-partenaires__rail.est-pret {
  animation: km-bande-defile var(--km-bande-duree, 40s) linear infinite;
}
.km-bande-partenaires__fenetre:hover .km-bande-partenaires__rail,
.km-bande-partenaires__fenetre:focus-within .km-bande-partenaires__rail {
  animation-play-state: paused;
}
@keyframes km-bande-defile { to { transform: translateX(-50%); } }

.km-bande-partenaires__logo {
  display: flex; align-items: center; justify-content: center;
  height: 32px; border-radius: 2px; opacity: .9; transition: opacity .2s;
}
.km-bande-partenaires__logo:hover, .km-bande-partenaires__logo:focus-visible { opacity: 1; }
.km-bande-partenaires__logo:focus-visible { outline: 2px solid var(--km-yellow, #FFD400); outline-offset: 2px; }
.km-bande-partenaires__logo img { display: block; width: auto; max-width: none; }
/* Logo en couleur : posé sur une plaque blanche, sinon illisible sur le nuit */
.km-bande-partenaires__logo--clair { background: #fff; padding: 0 10px; }
.km-bande-partenaires__logo--clair img { height: 22px; }
/* Logo carré ou très dessiné : on lui laisse toute la hauteur de la plaque */
.km-bande-partenaires__logo--haut { padding: 0 6px; }
.km-bande-partenaires__logo--haut img { height: 30px; }
/* Visuel déjà sur fond noir */
.km-bande-partenaires__logo--noir img { height: 32px; }
/* Logo blanc ou jaune : directement sur le fond */
.km-bande-partenaires__logo--nu img { height: 20px; }
.km-bande-partenaires__logo--carre img { height: 32px; }
.km-bande-partenaires__nom {
  font: 600 12px/1 'Inter', system-ui, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255, 255, 255, .75); padding: 0 4px;
}

@media (prefers-reduced-motion: reduce) {
  .km-bande-partenaires__rail.est-pret { animation: none; }
  .km-bande-partenaires__fenetre { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 767px) {
  .km-bande-partenaires__dedans { height: 50px; gap: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   PUBLICITÉS DANS LES ARTICLES — voir assets/publicites.js
   ══════════════════════════════════════════════════════════════ */
.km-pub__mention {
  display: block; margin-bottom: 8px;
  font: 600 10px/1 'Inter', system-ui, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(11, 31, 77, .5);
}
/* Mention ajoutée au-dessus des pavés insérés à la main dans le texte */
.km-pub__mention--seule { margin-top: 18px; }
.km-pub { display: flex; flex-direction: column; align-items: center; }
.km-pub img { display: block; width: 300px; max-width: 100%; height: auto; }
.km-pub--texte {
  margin: 36px 0; padding: 20px 16px 22px;
  background: #FAFAF8;
  border-top: 1px solid rgba(11, 31, 77, .12); border-bottom: 1px solid rgba(11, 31, 77, .12);
}
/* La colonne occupe toute la hauteur du texte ; le pavé y reste visible
   pendant la lecture. Elle n'existe que là où la marge peut la contenir. */
.km-pub-colonne { position: absolute; top: 0; bottom: 0; left: calc(100% + 32px); width: 300px; }
.km-pub--colonne { position: sticky; top: 110px; align-items: flex-start; }
.km-pub--colonne img { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .3); }
@media (max-width: 1399px) { .km-pub-colonne { display: none; } }

.km-pub-rubrique {
  display: inline-flex; align-items: center; gap: 10px; vertical-align: middle;
  margin-left: 14px; padding: 4px 10px 4px 12px;
  border: 1px solid rgba(11, 31, 77, .15); border-radius: 2px; background: #fff;
  font: 500 12px/1 'Inter', system-ui, sans-serif; color: rgba(11, 31, 77, .62);
  transition: border-color .2s;
}
.km-pub-rubrique:hover { border-color: rgba(11, 31, 77, .4); }
.km-pub-rubrique img { height: 16px; width: auto; display: block; }

/* Carte partenaire : pour un partenaire sans pavé publicitaire (Tony Kart) */
.km-pub--carte .km-pub-carte {
  display: flex; flex-direction: column; width: 300px; max-width: 100%;
  background: #0A1638; color: #fff; text-decoration: none; overflow: hidden;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35);
}
.km-pub-carte__photo { display: block; height: 128px; background-size: cover; background-position: center; }
.km-pub-carte__corps { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.km-pub-carte__logo { align-self: flex-start; display: inline-flex; padding: 4px 8px; margin-top: -30px; }
.km-pub-carte__logo--clair { background: #fff; }
.km-pub-carte__logo--noir { background: #000; }
.km-pub-carte__logo img,
.article-body .km-pub-carte__logo img { height: 22px; width: auto; max-width: none; margin: 0; display: block; box-shadow: none; border-radius: 0; }
/* Les pavés aussi échappent aux règles des photos d'article (marges, ombres, pleine largeur) */
.article-body .km-pub > a > img { margin: 0 auto; }
.km-pub-carte__texte { font: 400 13px/1.45 'Inter', system-ui, sans-serif; color: rgba(255, 255, 255, .82); }
.km-pub-carte__lien { font: 700 12px/1 'Inter', system-ui, sans-serif; color: #FFD400; }
.km-pub--carte a:hover .km-pub-carte__lien { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   ACCUEIL — NOS PARTENAIRES (D3) : le grand bandeau et la rangée
   Voir assets/une-partenaires.js
   ══════════════════════════════════════════════════════════════ */
.km-une { background: #0A1638; color: #fff; }
.km-une__grand { position: relative; height: 520px; overflow: hidden; }
.km-une__photo {
  position: absolute; inset: 0; background-size: cover; background-position: center 40%;
  opacity: 0; transition: opacity 1s ease;
}
.km-une__photo.est-visible { opacity: 1; }
.km-une__voile {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,22,56,.97) 0%, rgba(10,22,56,.88) 36%, rgba(10,22,56,.2) 68%, rgba(10,22,56,0) 100%);
}
.km-une__texte {
  position: relative; z-index: 1; max-width: 1500px; height: 100%; margin: 0 auto; padding: 64px 24px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.km-une__texte > * { max-width: 560px; }
.km-une__texte.est-entre > * { animation: km-une-entree .6s ease both; }
.km-une__texte.est-entre > *:nth-child(2) { animation-delay: .05s; }
.km-une__texte.est-entre > *:nth-child(3) { animation-delay: .1s; }
.km-une__texte.est-entre > *:nth-child(4) { animation-delay: .15s; }
@keyframes km-une-entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.km-une__plaque { align-self: flex-start; display: inline-flex; padding: 12px 18px; margin-bottom: 26px; }
.km-une__plaque--clair { background: #fff; }
.km-une__plaque--noir { background: #000; }
.km-une__plaque img { height: 40px; width: auto; display: block; }
.km-une__plaque--carre { padding: 8px 12px; }
.km-une__plaque--carre img { height: 68px; }
.km-une__niveau { font: 700 12px/1 'Inter', system-ui, sans-serif; color: #FFD400; margin: 0; }
.km-une__titre {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.02; letter-spacing: -.025em; margin: 14px 0 14px;
}
.km-une__metier { font: 300 1.05rem/1.6 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.82); margin: 0; }
.km-une__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.km-une__btn {
  background: #FFD400; color: #0B1F4D; font: 700 .9rem/1 'Inter', system-ui, sans-serif;
  padding: 15px 22px; text-decoration: none; transition: background .2s;
}
.km-une__btn:hover { background: #fff; }
/* Flèches discrètes, dans le coin du bandeau : un rond nuit à demi
   transparent, pour rester visibles sur une photo claire. */
.km-une__fleches {
  position: absolute; z-index: 2; bottom: 26px; right: max(24px, calc((100% - 1500px) / 2 + 24px));
  display: flex; gap: 8px;
}
.km-une__fleches button {
  width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10,22,56,.45); color: rgba(255,255,255,.75); transition: color .2s, background .2s;
}
.km-une__fleches button:hover { color: #FFD400; background: rgba(10,22,56,.7); }
.km-une__fleches button:focus-visible, .km-une__btn:focus-visible, .km-une__tuile:focus-visible, .km-une__plaque:focus-visible {
  outline: 2px solid #FFD400; outline-offset: 3px;
}
.km-une__progression { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); z-index: 2; }
.km-une__progression span { display: block; height: 100%; width: 0; background: #FFD400; }
@keyframes km-une-progression { from { width: 0; } to { width: 100%; } }

.km-une__rangee { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: #0A1638; }
.km-une__tuile {
  position: relative; display: block; height: 210px; background-size: cover; background-position: center;
  color: #fff; text-decoration: none; overflow: hidden;
}
.km-une__tuile::before {
  content: ''; position: absolute; inset: 0; transition: background .3s;
  background: linear-gradient(180deg, rgba(10,22,56,.25) 0%, rgba(10,22,56,.92) 100%);
}
.km-une__tuile:hover::before { background: linear-gradient(180deg, rgba(10,22,56,.05) 0%, rgba(10,22,56,.85) 100%); }
.km-une__tuile-logo { position: absolute; top: 18px; left: 18px; z-index: 1; display: inline-flex; padding: 6px 10px; }
.km-une__tuile-logo--clair { background: #fff; }
.km-une__tuile-logo--noir { background: #000; }
.km-une__tuile-logo img { height: 28px; width: auto; display: block; }
.km-une__tuile-logo--carre img { height: 44px; }
.km-une__tuile-texte { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; }
.km-une__tuile-cat { display: block; font: 700 11px/1 'Inter', system-ui, sans-serif; color: #FFD400; }
.km-une__tuile-nom { display: block; margin-top: 6px; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.35rem; }
.km-une__pied {
  max-width: 1500px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center;
  font: 500 .8rem/1 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.55);
}
.km-une__pied a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid #FFD400; padding-bottom: 4px; }

@media (max-width: 900px) {
  .km-une__grand { height: auto; }
  .km-une__photo { position: relative; height: 230px; display: none; }
  .km-une__photo.est-visible { display: block; }
  .km-une__voile { display: none; }
  .km-une__texte { padding: 28px 20px 34px; }
  .km-une__rangee { grid-template-columns: repeat(2, 1fr); }
  .km-une__tuile { height: 160px; }
  .km-une__tuile-logo { top: 12px; left: 12px; padding: 4px 8px; }
  .km-une__tuile-logo img { height: 20px; }
  .km-une__tuile-logo--carre img { height: 34px; }
  .km-une__fleches { top: 178px; bottom: auto; right: 10px; }
  .km-une__plaque--carre img { height: 54px; }
  .km-une__tuile-texte { left: 12px; right: 12px; bottom: 12px; }
  .km-une__tuile-nom { font-size: 1.02rem; line-height: 1.2; margin-top: 4px; }
  .km-une__plaque img { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .km-une__photo { transition: none; }
  .km-une__texte.est-entre > * { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE SUR TÉLÉPHONE — « Nuit » (proposition 1, retenue par
   JP Editions le 31 octobre 2026, avec le logo et le menu de la
   proposition 3 : posés à nu sur la photo).
   Uniquement sous 768 px : l'ordinateur et la tablette gardent la
   mise en page d'origine. La photo passe en tête, pleine largeur, et
   se fond dans le bleu nuit ; plus de fil d'Ariane, d'étiquette ni de
   date en double. Le partage passe en fin d'article.
   Publicités sur téléphone : assets/publicites.js.
   ══════════════════════════════════════════════════════════════ */
.km-art-tel { display: none; }

/* Article introuvable. Sur téléphone la page passe en bleu nuit : l'encre
   bleue du titre y devenait invisible, et le logo le recouvrait. */
.km-art-introuvable .km-ai-code { color: rgba(11,31,77,.5); }
.km-art-introuvable h1 { color: var(--km-blue-ink); }
.km-art-introuvable p { color: rgba(11,31,77,.65); }

@media (max-width: 767px) {
  body.km-article { background: #0A1638; padding-top: 0 !important; }
  body.km-article.noise::before { display: none; }

  /* En-tête : transparent sur la photo, le logo et le menu seuls ;
     fond bleu nuit dès que la photo est passée. */
  body.km-article:not(.km-art-defile) header.sticky {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, rgba(10,22,56,.55) 0%, rgba(10,22,56,.12) 70%, transparent 100%) !important;
  }
  body.km-article header.sticky img { height: 34px !important; }
  body.km-article:not(.km-art-defile) header.sticky img,
  body.km-article:not(.km-art-defile) header.sticky svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
  body.km-article .km-art-recherche { display: none; }

  body.km-article .km-art-fil,
  body.km-article .km-art-surtitre,
  body.km-article .km-art-partages,
  body.km-article .km-art-motscles,
  body.km-article .km-art-ordi,
  body.km-article #art-caption { display: none !important; }
  body.km-article .km-art-tel { display: block; }
  body.km-article .km-art-introuvable { padding-top: 132px !important; }
  body.km-article .km-art-introuvable .km-ai-code { color: rgba(255,255,255,.5); }
  body.km-article .km-art-introuvable h1 { color: #fff; }
  body.km-article .km-art-introuvable p { color: rgba(255,255,255,.7); }
  body.km-article .km-art-introuvable a { background: #FFD400; color: #0B1F4D; }

  body.km-article #art-root { display: flex; flex-direction: column; background: #0A1638; color: #fff; }
  /* En colonne flexible, « mx-auto » empêchait les blocs de s'étirer : ils
     prenaient la largeur des photos du texte (592 px) et débordaient. */
  body.km-article #art-root > * { margin-left: 0; margin-right: 0; max-width: none; min-width: 0; }

  /* La photo, en tête et d'un bord à l'autre */
  body.km-article .km-art-photo { order: -1; max-width: none; margin: 0; padding: 0; }
  body.km-article .km-art-photo figure { aspect-ratio: 13 / 10; border-radius: 0; box-shadow: none; }
  body.km-article .km-art-photo figure::after {
    content: ''; position: absolute; z-index: 11; left: 0; right: 0; bottom: 0; height: 96px;
    background: linear-gradient(transparent, #0A1638);
  }

  /* Le titre, puis une seule ligne de signature */
  body.km-article #art-root > div:first-child { padding: 2px 20px 0; }
  body.km-article #art-title {
    font-family: 'Inter', system-ui, sans-serif !important; font-weight: 800;
    font-size: 29px !important; line-height: 1.14; letter-spacing: -.02em; color: #fff !important;
  }
  body.km-article .km-art-signature { margin-top: 22px; padding-bottom: 0; border: 0; }
  body.km-article .km-art-signature > div { gap: 12px; }
  /* Le logo seul, sans pastille, centré sur les deux lignes de signature */
  body.km-article .km-art-signature__logo { flex: none; display: flex; align-items: center; }
  body.km-article .km-art-signature__logo img { width: 58px; height: auto; display: block; }
  body.km-article .km-art-signature__nom { font: 700 16px/1.25 'Inter', system-ui, sans-serif; color: #fff; }
  body.km-article .km-art-signature__date { font: 600 14px/1.3 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.55); margin-top: 2px; }

  /* Le texte, blanc sur bleu nuit */
  body.km-article #art-body { margin-top: 22px; padding: 0 20px; }
  body.km-article .article-body,
  body.km-article .article-body p,
  body.km-article .article-body p.lead,
  body.km-article .article-body ul li {
    font-family: 'Inter', system-ui, sans-serif; font-size: 18px; line-height: 1.62; color: rgba(255,255,255,.9);
  }
  body.km-article .article-body p { margin-bottom: 20px; }
  body.km-article .article-body { overflow-wrap: break-word; }
  body.km-article .article-body hr { border-top-color: rgba(255,255,255,.15); margin: 28px 0; }
  body.km-article .article-body p.lead::first-letter { float: none; font: inherit; margin: 0; color: inherit; }
  body.km-article .article-body h2,
  body.km-article .article-body h3 { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; color: #fff; letter-spacing: -.01em; }
  body.km-article .article-body h2 { font-size: 22px; }
  body.km-article .article-body h3 { font-size: 19px; }
  body.km-article .article-body a { color: #FFD400; text-decoration: underline; text-underline-offset: 3px; }
  body.km-article .article-body a:has(img) { text-decoration: none; }
  body.km-article .article-body blockquote { border-left-color: #FFD400; color: #fff; font-family: 'Inter', system-ui, sans-serif; font-style: normal; }
  body.km-article .article-body img { border-radius: 8px; }
  body.km-article .article-body table { color: rgba(255,255,255,.9); }
  body.km-article .article-body td,
  body.km-article .article-body th { border-color: rgba(255,255,255,.15); }
  body.km-article .km-skel { opacity: .25; }

  /* Fin d'article : le partage */
  body.km-article .km-art-fin { padding: 4px 20px 30px; }
  body.km-article .km-art-fin__partager {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 24px;
    font: 600 15px 'Inter', system-ui, sans-serif; padding: 12px 18px;
  }
  body.km-article .km-art-fin__partager::before {
    content: ''; width: 18px; height: 18px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l6 6-6 6M20 11H9a5 5 0 0 0-5 5v3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l6 6-6 6M20 11H9a5 5 0 0 0-5 5v3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body.km-article .km-art-fin__partager:focus-visible { outline: 2px solid #FFD400; outline-offset: 3px; }

  /* À lire aussi : une liste, vignette à gauche */
  body.km-article #related-section { background: #0A1638; border-top: 1px solid rgba(255,255,255,.1); margin-top: 0; padding: 26px 0 36px; }
  body.km-article #related-section > div { padding: 0 20px; }
  body.km-article .km-art-lire { margin-bottom: 18px; padding-bottom: 0; border: 0; }
  body.km-article .km-art-lire__titre {
    font: 800 21px 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important;
  }
  body.km-article .km-art-lire h2,
  body.km-article .km-art-lire a { display: none; }
  body.km-article #related-section .grid { gap: 18px; }
  body.km-article #related-section article { background: transparent; border: 0; border-radius: 0; }
  body.km-article #related-section article > a { display: flex; gap: 14px; align-items: flex-start; }
  body.km-article #related-section .kart-photo { width: 104px; height: 72px; flex: none; aspect-ratio: auto; border-radius: 8px; }
  body.km-article #related-section .p-6 { padding: 0; }
  body.km-article #related-section [id$="-badge"] { display: none; }
  body.km-article #related-section h3 { font: 700 15px/1.35 'Inter', system-ui, sans-serif !important; color: #fff !important; }
  body.km-article #related-section [id$="-date"] {
    font: 500 13px 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
    color: rgba(255,255,255,.5) !important; margin-top: 6px;
  }
}

/* Publicités sur téléphone, dans l'article « Nuit » — voir assets/publicites.js */
.km-pub-banniere { display: none; }
@media (max-width: 767px) {
  body.km-article .article-body .km-pub a { color: inherit; text-decoration: none; }
  body.km-article .article-body .km-pub img { border-radius: 0; }
  body.km-article .km-pub--texte { margin: 34px -20px 38px; padding: 0 0 6px; background: transparent; border: 0; }
  body.km-article .km-pub--texte .km-pub__mention {
    font: 500 13px/1.4 'Inter', system-ui, sans-serif; letter-spacing: 0; text-transform: none;
    color: rgba(255,255,255,.55); text-align: center; margin: 0 20px 16px;
  }
  body.km-article .km-pub--texte > a > img { width: 340px; max-width: calc(100vw - 40px); }
  body.km-article .km-pub--texte.km-pub--carte .km-pub-carte { width: 100%; max-width: none; background: transparent; box-shadow: none; }
  body.km-article .km-pub--carte .km-pub-carte__photo { height: 200px; }
  body.km-article .km-pub--carte .km-pub-carte__corps {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0;
  }
  body.km-article .km-pub--carte .km-pub-carte__logo { margin-top: 0; }
  body.km-article .km-pub--carte .km-pub-carte__texte { order: 3; flex-basis: 100%; font-size: 14px; color: rgba(255,255,255,.7); }
  body.km-article .km-pub--carte .km-pub-carte__lien {
    background: rgba(255,255,255,.14); color: #fff; font: 600 15px/1 'Inter', system-ui, sans-serif; padding: 12px 18px; border-radius: 24px;
  }

  /* La bannière du bas de l'écran */
  .km-pub-banniere {
    position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 4px; height: 68px; padding: 0 4px 0 12px;
    background: #fff; color: #0B1F4D; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35);
    transform: translateY(calc(100% + 40px)); transition: transform .35s ease;
  }
  .km-pub-banniere.est-visible { transform: none; }
  .km-pub-banniere__lien { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
  .km-pub-banniere__logo { flex: none; display: inline-flex; align-items: center; }
  .km-pub-banniere__logo--noir { background: #000; padding: 4px 6px; }
  .km-pub-banniere__logo img { height: 26px; width: auto; max-width: 120px; display: block; }
  .km-pub-banniere__logo--carre img { height: 40px; }
  .km-pub-banniere__texte { font: 600 13px/1.3 'Inter', system-ui, sans-serif; }
  .km-pub-banniere__texte small { display: block; font: 500 10px/1.2 'Inter', system-ui, sans-serif; color: rgba(11,31,77,.5); margin-top: 3px; }
  .km-pub-banniere__fermer {
    flex: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
    color: rgba(11,31,77,.45); display: grid; place-items: center;
  }
  .km-pub-banniere__fermer:focus-visible, .km-pub-banniere__lien:focus-visible { outline: 2px solid #FFD400; outline-offset: 2px; }
  body.km-banniere-visible { padding-bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) { .km-pub-banniere { transition: none; } }

/* ══════════════════════════════════════════════════════════════
   ACTUALITÉS SUR ORDINATEUR — « façon journal » (retenue par
   JP Editions le 2 novembre 2026 : le haut de la version 3, la
   suite au format de la version 1). Fond blanc, filets fins, la
   titraille en Fraunces, aucun cadre ni dégradé.
   Uniquement à partir de 1024 px : en dessous, actualites.html
   garde sa liste (.km-actu-liste), inchangée.
   ══════════════════════════════════════════════════════════════ */
.km-journal { display: none; }

@media (min-width: 1024px) {
  .km-actu-liste { display: none; }
  .km-journal { display: block; background: #fff; color: #0B1F4D; padding: calc(var(--km-header-h, 72px) + 26px) 0 72px; }
  body.km-journal-page { background: #fff; }
  body.km-journal-page.noise::before { display: none; }

  /* La page n'a plus de bandeau coloré sous la barre : elle reste pleine. */
  body.km-journal-page.km-has-hero header.sticky,
  body.km-journal-page.km-has-hero header.sticky.km-header-transparent {
    background-color: #0A1638 !important;
    background-image: none !important;
  }
  body.km-journal-page.km-has-hero header.sticky.km-header-transparent img,
  body.km-journal-page.km-has-hero header.sticky.km-header-transparent svg { filter: none; }

  .kj-dans { max-width: 1248px; margin: 0 auto; padding: 0 24px; }
  .km-journal a { color: inherit; text-decoration: none; }
  .km-journal a:focus-visible, .km-journal button:focus-visible { outline: 2px solid #0033A0; outline-offset: 3px; }

  /* Titre de page et date du jour */
  .kj-tete { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 12px; }
  .kj-tete::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; border-bottom: 1px solid #0B1F4D; }
  .kj-tete h1 { font: 600 34px/1.1 'Fraunces', Georgia, serif; letter-spacing: -.01em; }
  .kj-tete p { font-size: 13px; color: #4A5672; display: flex; gap: 18px; }

  /* Rubriques, sous un double filet sur toute la largeur */
  .kj-rubs { border-bottom: 4px double #0B1F4D; }
  .kj-rubs .kj-dans { display: flex; gap: 26px; height: 46px; align-items: center; }
  .kj-rubs button { font: 400 14px 'Inter', system-ui, sans-serif; color: #4A5672; padding: 6px 0; background: none; border: 0; cursor: pointer; }
  .kj-rubs button:hover { color: #0B1F4D; text-decoration: underline; text-underline-offset: 6px; }
  .kj-rubs button[aria-pressed="true"] { color: #0B1F4D; font-weight: 700; }

  .kj-rub { display: block; font: 800 12px 'Inter', system-ui, sans-serif; color: #0B1F4D; margin-bottom: 6px; }
  .kj-photo, .kj-photo img { display: block; width: 100%; }
  .kj-photo img { height: 100%; object-fit: cover; background: #EEF1F6; }

  /* La une */
  .kj-une a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; padding: 28px 0; border-bottom: 1px solid #0B1F4D; }
  .kj-une h2 { font: 600 clamp(34px, 3.1vw, 44px)/1.06 'Fraunces', Georgia, serif; letter-spacing: -.015em; }
  .kj-une h2.kj-long { font-size: clamp(30px, 2.7vw, 38px); }
  .kj-une a:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .kj-chapo { font: 400 18px/1.6 'Fraunces', Georgia, serif; color: #2A3655; margin-top: 16px;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .kj-signature { font: 400 16px 'Fraunces', Georgia, serif; color: #2A3655; margin-top: 18px; }
  .kj-une .kj-photo { height: 380px; align-self: start; }
  @media (min-width: 1280px) { .kj-une a { grid-template-columns: minmax(0, 1fr) 592px; } }

  /* Sous la une : les articles suivants, et « En bref » avec la publicité */
  .kj-suite { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 22px; padding: 28px 0 8px; }
  /* Des filets verticaux entre les colonnes, posés dans la gouttière :
     toutes les cartes gardent ainsi la même largeur, et leurs photos la
     même hauteur. */
  .kj-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 44px; align-content: start; }
  .kj-cartes .kj-carte { position: relative; }
  .kj-cartes .kj-carte::before { content: ''; position: absolute; top: 0; bottom: 0; left: -22px; border-left: 1px solid #DCE1EA; }
  .kj-cartes .kj-carte:nth-child(2n+1)::before { display: none; }
  @media (min-width: 1280px) {
    .kj-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kj-cartes .kj-carte:nth-child(2n+1)::before { display: block; }
    .kj-cartes .kj-carte:nth-child(3n+1)::before { display: none; }
  }
  .kj-carte .kj-photo { aspect-ratio: 16 / 10; margin-bottom: 12px; }
  .kj-carte h3 { font: 700 17px/1.3 'Inter', system-ui, sans-serif; }
  .kj-carte a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
  .kj-carte time { display: block; font-size: 12.5px; color: #6A7590; margin-top: 8px; }

  .kj-bref { padding-left: 22px; border-left: 1px solid #DCE1EA; }
  .kj-bref h2 { font: 800 13px 'Inter', system-ui, sans-serif; padding-bottom: 8px; border-bottom: 2px solid #0B1F4D; }
  .kj-bref ul { list-style: none; margin: 0; padding: 0; }
  .kj-bref li { border-bottom: 1px solid #DCE1EA; }
  .kj-bref li a { display: block; padding: 11px 0; font: 600 15px/1.35 'Fraunces', Georgia, serif; }
  .kj-bref li a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .kj-bref time { display: block; font: 500 12px 'Inter', system-ui, sans-serif; color: #6A7590; margin-bottom: 2px; }
  .kj-pub { margin-top: 24px; }
  .kj-pub span { display: block; font-size: 11px; color: #6A7590; margin-bottom: 6px; }
  .kj-pub img { display: block; width: 100%; height: auto; }

  /* Plus bas : une rangée de quatre par rubrique */
  .kj-rangee { padding-top: 40px; }
  .kj-rangee__tete { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid #0B1F4D; }
  .kj-rangee__tete h2 { font: 800 20px 'Inter', system-ui, sans-serif; }
  .kj-rangee__tete button { font: 600 13px 'Inter', system-ui, sans-serif; color: #4A5672; background: none; border: 0; padding: 0; cursor: pointer; }
  .kj-rangee__tete button:hover { color: #0B1F4D; text-decoration: underline; text-underline-offset: 3px; }
  .kj-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 26px; padding-top: 18px; }
  .kj-grille .kj-carte h3 { font-size: 15.5px; line-height: 1.32; }
  .kj-grille--rubrique { padding-top: 28px; }

  .kj-plus { text-align: center; margin-top: 36px; }
  .kj-plus button { font: 600 14px 'Inter', system-ui, sans-serif; color: #0B1F4D; background: none; border: 1px solid #0B1F4D; padding: 11px 22px; cursor: pointer; }
  .kj-plus button:hover { background: #0B1F4D; color: #fff; }
  .kj-vide { padding: 48px 0; color: #4A5672; }

  .kj-archives { margin-top: 56px; padding-top: 18px; border-top: 1px solid #0B1F4D; font-size: 14px; color: #4A5672; }
  .kj-archives a { color: #0B1F4D; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
}

/* ══════════════════════════════════════════════════════════════
   EN-TÊTE ENTRE 1024 ET 1279 PX
   Le menu complet passait à peine : à 1024 px, le bouton
   « S'abonner » dépassait de 90 px et sortait de l'écran. Des
   liens un peu moins espacés suffisent à tout faire tenir.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279px) {
  header.sticky nav .nav-link { padding-left: 7px; padding-right: 7px; }
  header.sticky .h-\[72px\] { column-gap: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE PHOTOS — la planche-contact (version 2 retenue par
   JP Editions le 2 novembre 2026). Fond bleu nuit, les photos
   d'abord ; sous chacune, les numéros des pilotes qu'on y voit.
   Filtres en colonne sur ordinateur, en feuille sur téléphone.
   Script : assets/photos.js. Données : assets/photos/galeries.json.
   ══════════════════════════════════════════════════════════════ */
body.km-photos { background: #07112B; }
body.km-photos.noise::before { display: none; }
body.ph-bloque { overflow: hidden; }
.ph { color: #fff; font-family: 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ph button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ph button:focus-visible, .ph a:focus-visible, .ph input:focus-visible, .ph-vis button:focus-visible { outline: 2px solid #FFD400; outline-offset: 2px; }
.ph-cadre { max-width: 1440px; margin: 0 auto; padding: 18px 16px 56px; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tete" "rech" "barre" "corps"; row-gap: 14px; }
.ph-tete { grid-area: tete; }
.ph-tete h1 { font: 600 24px/1.15 'Fraunces', Georgia, serif; letter-spacing: -.01em; }
.ph-sous { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.62); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ph-sous a { color: #FFD400; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ph-rech { grid-area: rech; }
.ph-rech__label { display: block; font: 700 12px 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.7); margin-bottom: 6px; }
.ph-rech__champ { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
.ph-rech__champ:focus-within { border-color: #FFD400; }
.ph-rech__champ svg { width: 18px; height: 18px; flex: none; color: rgba(255,255,255,.6); }
.ph-rech__champ input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; color: #fff; font: 700 16px 'Inter', system-ui, sans-serif; }
.ph-rech__champ input::placeholder { color: rgba(255,255,255,.45); font-weight: 400; font-size: 14px; }
.ph-rech__champ input:focus { outline: none; }
.ph-rech__champ input::-webkit-search-cancel-button { display: none; }
.ph-rech__effacer { font-size: 13px; color: rgba(255,255,255,.7) !important; text-decoration: underline; text-underline-offset: 3px; }

.ph-barre-m { grid-area: barre; display: flex; gap: 8px; flex-wrap: wrap; }
.ph-filtrer { border: 1px solid #fff !important; padding: 9px 14px; font-weight: 700 !important; font-size: 13px !important; }
.ph-actifs { display: contents; }
.ph-actifs button { border: 1px solid rgba(255,212,0,.6) !important; color: #FFD400 !important; padding: 9px 12px; font-size: 13px !important; }

/* Les filtres : une feuille depuis le bas sur téléphone */
.ph-filtres { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; max-height: 86vh; overflow-y: auto;
  background: #0E1B40; border-top: 1px solid rgba(255,255,255,.15); padding: 10px 16px 18px;
  transform: translateY(105%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
.ph-filtres.est-ouverte { transform: none; visibility: visible; transition: transform .3s ease; }
.ph-filtres__poignee { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); margin: 0 auto 10px; }
.ph-filtres__tete { display: flex; justify-content: space-between; align-items: center; }
.ph-filtres__tete h2 { font: 600 20px 'Fraunces', Georgia, serif; }
.ph-filtres__tete button { width: 40px; height: 40px; font-size: 18px; }
.ph-voile { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.55); }
.ph-groupe h3 { font: 700 12px 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.55); margin: 16px 0 6px; }
.ph-groupe ul { list-style: none; margin: 0; padding: 0; }
.ph-groupe li button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; font-size: 14px; color: rgba(255,255,255,.86); text-align: left; }
.ph-groupe li button > span:last-child { color: rgba(255,255,255,.45); }
.ph-groupe li button[aria-pressed="true"] { color: #FFD400; font-weight: 700; }
.ph-groupe li button.ph-off { color: rgba(255,255,255,.35); }
.ph-coche { display: inline-block; width: 15px; height: 15px; border: 1px solid rgba(255,255,255,.45); margin-right: 10px; vertical-align: -2px; }
.ph-groupe li button[aria-checked="true"] .ph-coche { background: #FFD400; border-color: #FFD400; }
.ph-voir { width: 100%; margin-top: 18px; background: #FFD400 !important; color: #0B1F4D !important; font-weight: 700 !important; font-size: 15px !important; padding: 14px; }

/* La grille */
.ph-corps { grid-area: corps; min-width: 0; }
.ph-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
.ph-case { margin: 0; }
.ph-ouvrir { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; padding: 0; background: #0E1B40 !important; }
.ph-ouvrir img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.ph-ouvrir:hover img { transform: scale(1.03); }
.ph-nums { height: 30px; display: flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.ph-nums i { font-style: normal; color: rgba(255,255,255,.45); }
.ph-nums button { background: rgba(255,255,255,.1) !important; padding: 2px 6px; font-weight: 700 !important; font-size: 12.5px !important; }
.ph-nums button:hover { background: rgba(255,255,255,.22) !important; }
.ph-nums button.ph-trouve { background: #FFD400 !important; color: #0B1F4D !important; }
.ph-case--pub .ph-pub { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: #0E1B40; }
.ph-case--pub .ph-pub span { position: absolute; top: 6px; left: 8px; font-size: 11px; color: rgba(255,255,255,.55); }
.ph-case--pub .ph-pub img { width: 62%; height: auto; }
.ph-attente, .ph-msg { color: rgba(255,255,255,.7); padding: 18px 0; line-height: 1.6; }
.ph-vide { padding: 30px 0; } .ph-vide p { color: rgba(255,255,255,.75); }
.ph-vide button { margin-top: 12px; border: 1px solid #fff !important; padding: 10px 16px; font-weight: 700 !important; }
.ph-note { font-size: 12.5px; color: rgba(255,255,255,.55); margin: 2px 0 6px; }
.ph-sous-titre { font: 700 13px 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.65); margin: 14px 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ph-fiche { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 14px 16px; border: 1px solid rgba(255,212,0,.5); background: rgba(255,212,0,.06); margin-bottom: 8px; }
.ph-fiche__no { font: 800 26px 'Inter', system-ui, sans-serif; color: #FFD400; }
.ph-fiche h2 { font: 600 19px 'Fraunces', Georgia, serif; }
.ph-fiche p { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 2px; }
.ph-fiche a { margin-left: auto; font-size: 13px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* La visionneuse */
.ph-vis { position: fixed; inset: 0; z-index: 130; background: #040A1C; color: #fff; display: flex; flex-direction: column; font-family: 'Inter', system-ui, sans-serif; overflow-y: auto; }
.ph-vis[hidden] { display: none; }
.ph-vis button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ph-vis__img { position: relative; display: flex; align-items: center; justify-content: center; padding: 52px 0 12px; }
.ph-vis__haut { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; padding: 16px 104px 16px 16px; font-size: 13px; color: rgba(255,255,255,.72); }
.ph-vis__haut b { color: #fff; font-weight: 600; }
#ph-vis-compte { white-space: nowrap; }
.ph-vis picture { display: block; max-width: 100%; }
.ph-vis__photo { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.ph-vis__fl { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35) !important; font-size: 24px !important; line-height: 1; display: none; }
.ph-vis__fl:disabled { opacity: .25; cursor: default; }
.ph-vis__fl--g { left: 12px; } .ph-vis__fl--d { right: 12px; }
.ph-vis__info { padding: 14px 16px 22px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; }
.ph-vis__fermer { position: absolute; top: 12px; right: 16px; z-index: 2; font-size: 13px !important; color: rgba(255,255,255,.8) !important; padding: 4px 0; }
.ph-vis__info h2 { font: 600 20px 'Fraunces', Georgia, serif; }
.ph-vis__meta { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 6px; line-height: 1.5; }
.ph-vis__info h3 { font: 700 12px 'Inter', system-ui, sans-serif; color: rgba(255,255,255,.6); margin: 18px 0 6px; }
.ph-vis__info ul { list-style: none; margin: 0; padding: 0; }
.ph-vis__info li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.ph-vis__info li b { background: #FFD400; color: #0B1F4D; text-align: center; padding: 4px 0; font-weight: 800; }
.ph-vis__info li small { display: block; color: rgba(255,255,255,.55); font-size: 12px; margin-top: 2px; }
.ph-vis__info li button { font-size: 12.5px !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px; }
.ph-vis__actions { margin-top: 18px; display: grid; gap: 10px; }
.ph-vis__actions button { border: 1px solid rgba(255,255,255,.4) !important; padding: 12px; text-align: center; font-weight: 600 !important; font-size: 14px !important; }

@media (min-width: 640px) {
  .ph-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ph-cadre { grid-template-columns: 270px minmax(0, 1fr); grid-template-areas: "rech tete" "filtres corps"; column-gap: 32px; row-gap: 18px; padding: 26px 28px 72px; align-items: end; }
  .ph-tete h1 { font-size: 30px; }
  .ph-sous { font-size: 14px; }
  .ph-barre-m { display: none; }
  /* left, right et bottom remis à zéro : hérités de la feuille du téléphone,
     « bottom: 0 » faisait remonter la colonne collante sur la recherche. */
  .ph-filtres { grid-area: filtres; position: sticky; top: calc(var(--km-header-h, 72px) + 16px); left: auto; right: auto; bottom: auto; align-self: start; transform: none; visibility: visible;
    max-height: calc(100vh - var(--km-header-h, 72px) - 32px); background: transparent; border: 0; padding: 0 4px 0 0; z-index: auto; transition: none; }
  .ph-filtres__poignee, .ph-filtres__tete, .ph-voir { display: none; }
  .ph-groupe:first-of-type h3 { margin-top: 4px; }
  .ph-corps { align-self: start; }
  .ph-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; }
  .ph-voile { display: none; }
  .ph-vis { display: grid; grid-template-columns: minmax(0, 1fr) 360px; overflow: hidden; }
  .ph-vis__img { padding: 56px 72px; height: 100vh; }
  .ph-vis__haut { padding-right: 16px; }
  .ph-vis__photo { max-height: calc(100vh - 112px); width: auto; max-width: min(100%, 860px); }
  .ph-vis__fl { display: flex; align-items: center; justify-content: center; }
  .ph-vis__info { border-top: 0; border-left: 1px solid rgba(255,255,255,.12); padding: 70px 28px 28px; height: 100vh; overflow-y: auto; position: relative; }
  .ph-vis__fermer { top: 16px; right: 28px; }
  .ph-vis__actions { margin-top: auto; padding-top: 20px; }
}
@media (min-width: 1280px) {
  .ph-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ph-filtres, .ph-ouvrir img { transition: none !important; }
}


/* ════════════════════════════════════════════════════════════
   ACTUALITÉS SUR TÉLÉPHONE ET TABLETTE : LA UNE D'ABORD
   (11 nov. 2026, demande de JP Editions)
   La page s'ouvrait sur un appel vers les archives. Elle s'ouvre
   désormais comme un journal : le titre de la page, puis la une en
   grand avec sa photo, puis la liste. L'ordinateur a sa propre
   page (#km-journal), qui suivait déjà cette idée.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .km-actu-tete { padding-bottom: 1.6rem !important; }
  .km-actu-tete h1 { font-size: clamp(2.3rem, 10vw, 3.4rem); line-height: 1; letter-spacing: -.02em; }
  .km-actu-jour { margin-top: .55rem; font-size: .9rem; color: rgba(255,255,255,.66); }

  .km-actu-une:empty { display: none; }
  .ku a { display: block; color: #0B1F4D; text-decoration: none; }
  .ku img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #0B1F4D; }
  .ku__texte { padding: 1.1rem 0 1.5rem; border-bottom: 2px solid #0B1F4D; margin-bottom: 1.6rem; }
  .ku__meta { font-size: .82rem; color: rgba(11,31,77,.64); margin-bottom: .5rem; }
  .ku__meta b { font-weight: 700; color: #0B1F4D; }
  .ku__meta b::after { content: ' · '; font-weight: 400; color: rgba(11,31,77,.64); }
  .ku h2 { font: 600 clamp(1.7rem, 7.2vw, 2.3rem)/1.1 'Fraunces', Georgia, serif; letter-spacing: -.012em; }
  .ku a:active h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .ku__chapo {
    margin-top: .7rem; font-size: 1rem; line-height: 1.5; color: rgba(11,31,77,.8);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
}
/* Sur téléphone, la photo de la une va d'un bord à l'autre et touche la
   barre des rubriques, comme la photo d'ouverture d'un quotidien. */
@media (max-width: 767px) {
  .km-actu-section { padding-top: 0 !important; }
  .km-actu-une { margin: 0 -1.5rem; }
  .ku__texte { padding-left: 1.5rem; padding-right: 1.5rem; }
}


/* ════════════════════════════════════════════════════════════
   MAGAZINE SUR TÉLÉPHONE ET TABLETTE : LA COUVERTURE D'ABORD
   (11 nov. 2026, demande de JP Editions)
   On arrive sur la page et on voit le numéro en kiosque, en grand.
   Viennent ensuite son titre (« Le numéro 229, spécial… ») et le
   sommaire. La grille de l'ordinateur ne change pas : « contents »
   rend ses deux colonnes à la colonne de la page, qu'on réordonne.
   La couverture garde enfin ses proportions (592 × 784) : le cadre
   de 288 × 448 la rognait sur les côtés.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .km-mag-une > .relative { display: flex; flex-direction: column; }
  .km-mag-grille { display: contents !important; }
  /* !important : les classes order-1 / order-2 de Tailwind, chargé après
     cette feuille, l'emporteraient. */
  .km-mag-couv { order: 1 !important; }
  .km-mag-titre { order: 2 !important; margin: 3.6rem 0 2.6rem !important; }
  .km-mag-sommaire { order: 3 !important; }
  .km-mag-couv .w-72 { width: min(78vw, 340px) !important; height: auto !important; aspect-ratio: 592 / 784; }
}


/* ════════════════════════════════════════════════════════════
   PARTENAIRES DE L'ACCUEIL SUR TÉLÉPHONE ET TABLETTE : UN SEUL
   À LA FOIS (version 1 « grand format », retenue par JP Editions
   le 11 nov. 2026)
   La rangée de quatre carrés disparaît : un partenaire occupe toute
   la largeur, grande photo, logo posé dessus, puis son nom, une phrase
   et un bouton. La rotation (5 s) et le glissé du doigt restent ceux
   d'assets/une-partenaires.js ; l'ordinateur ne change pas.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .km-une { padding-top: 28px; }
  /* Le titre de la section, réservé aux lecteurs d'écran sur ordinateur,
     devient visible ici. !important : « sr-only » vient de Tailwind. */
  #km-une-titre-section {
    position: static !important; width: auto !important; height: auto !important; margin: 0 !important;
    padding: 0 20px 18px !important; overflow: visible !important; clip: auto !important; white-space: normal !important;
    font: 600 1.7rem/1.1 'Fraunces', Georgia, serif; letter-spacing: -.01em; color: #fff;
  }
  .km-une__photo { height: 330px; background-position: center; }
  .km-une__voile {
    display: block; bottom: auto; height: 330px;
    background: linear-gradient(180deg, rgba(10,22,56,0) 45%, rgba(10,22,56,.85) 100%);
  }
  .km-une__progression { top: 327px; bottom: auto; }
  .km-une__texte { padding: 22px 20px 30px; }
  /* Le logo se pose en bas de la photo, au-dessus du texte. */
  .km-une__plaque { position: absolute; left: 20px; bottom: calc(100% + 20px); margin: 0; padding: 9px 14px; z-index: 3; }
  .km-une__plaque--carre { padding: 6px 10px; }
  .km-une__titre { font-size: 2.35rem; margin: 8px 0 10px; }
  .km-une__metier { font-size: 1rem; }
  .km-une__actions { margin-top: 22px; }
  .km-une__btn { display: block; width: 100%; text-align: center; font-size: 1rem; padding: 16px 18px; }
  /* Plus de flèches ni de rangée : on glisse du doigt sur la photo. */
  .km-une__fleches, .km-une__rangee { display: none; }
}


/* ════════════════════════════════════════════════════════════
   PUBLICITÉS ENTRE LES ARTICLES (téléphone et tablette)
   Versions 1 et 2, retenues par JP Editions le 11 nov. 2026 : une
   ligne partenaire, qui a la forme d'un article, après le 3e ; un
   pavé après le 7e. Placées par assets/publicites.js (entreArticles).
   Toujours marquées « Publicité » (LCEN, article 20).
   ════════════════════════════════════════════════════════════ */
.km-pub-liste { grid-column: 1 / -1; }
@media (min-width: 1024px) { .km-pub-liste { display: none !important; } }

.km-pub-ligne {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 14px 1.5rem; margin: 0 -1.5rem; background: #FFF6CC; border-left: 4px solid #FFD400;
  color: #0B1F4D; text-decoration: none;
}
.km-pub-ligne__photo { position: relative; display: block; aspect-ratio: 4 / 3; background: #0B1F4D center / cover no-repeat; border-radius: 2px; }
.km-pub-ligne__logo { position: absolute; left: 5px; bottom: 5px; display: inline-flex; padding: 3px 5px; border-radius: 2px; }
.km-pub-ligne__logo--clair { background: #fff; } .km-pub-ligne__logo--noir { background: #000; }
.km-pub-ligne__logo img { height: 16px; width: auto; display: block; }
.km-pub-ligne__texte { display: block; min-width: 0; }
.km-pub-ligne__mention { display: block; font-size: .72rem; color: rgba(11,31,77,.7); margin-bottom: 4px; }
.km-pub-ligne__mention b { color: #0B1F4D; }
.km-pub-ligne__titre { display: block; font: 600 .98rem/1.28 'Fraunces', Georgia, serif; }
.km-pub-ligne__lien { display: inline-block; margin-top: 6px; font-size: .78rem; font-weight: 700; border-bottom: 2px solid #FFD400; }
.km-pub-ligne:focus-visible { outline: 2px solid #0B1F4D; outline-offset: -2px; }

.km-pub-pave { margin: 0 -1.5rem; padding: 14px 0 20px; background: #E6E4DD; text-align: center; }
.km-pub-pave__mention { font-size: .7rem; color: rgba(11,31,77,.6); letter-spacing: .04em; margin: 0 0 10px; }
.km-pub-pave img { display: block; width: 300px; max-width: calc(100% - 2rem); height: auto; margin: 0 auto; box-shadow: 0 2px 10px rgba(0,0,0,.12); }

/* Sur tablette, la liste garde ses marges : pas de débord. */
@media (min-width: 768px) {
  .km-pub-ligne, .km-pub-pave { margin: 0; border-radius: 3px; }
}


/* ════════════════════════════════════════════════════════════
   MENU « RÉSULTATS » SANS PANNEAU DÉROULANT (11 nov. 2026)
   Retiré à la demande de JP Editions : le survol ouvrait une bannière
   (Championnat Kart Mag, IAME, NSK…). Le lien mène directement à la page
   des résultats, qui a ses propres onglets. Le balisage reste dans les
   pages (et le menu du téléphone l'ignore déjà) : seul l'affichage part.
   ════════════════════════════════════════════════════════════ */
.nav-dropdown__panel, .nav-dropdown__chevron, .nav-dropdown::after { display: none !important; }