/*
 * Revue de presse — Timeline « archive vivante » (roogan-child)
 * Conception visuelle : Ilmarë · Moteur + intégration : Aulë.
 * Tout préfixé .rp- pour ne pas entrer en collision avec roogan.
 * Chargé uniquement sur le template page-revue-presse-timeline.php.
 */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Roboto:wght@400;500;700&display=swap');

.rp-timeline-section {
  --rp-green-700:#0c5e33; --rp-green-600:#107040; --rp-green-500:#1a8a50; --rp-green-800:#0a4a29;
  --rp-gold-600:#bf9636; --rp-gold-500:#d0b050; --rp-gold-200:#efe0b0;
  --rp-paper:#fbf8f1; --rp-cream-100:#f4ecdc;
  --rp-ink-900:#1c1a16; --rp-ink-500:#6b6457; --rp-ink-300:#9b9384;
  --rp-line:#e3d9c6; --rp-line-soft:#efe7d6; --rp-white:#fff;
  --rp-display:'Libre Baskerville',Georgia,serif; --rp-sans:'Roboto',system-ui,Arial,sans-serif;
  --rp-ease:cubic-bezier(.22,.61,.36,1); --rp-rail-w:128px;
  position:relative; background:var(--rp-paper); font-family:var(--rp-sans);
}

/* ── En-tête ── */
.rp-timeline-header { position:relative; z-index:1; text-align:center; padding:48px 0 20px; }
.rp-timeline-header .eyebrow { font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--rp-green-600); margin-bottom:14px; }

/* ── Layout 2 : eyebrow + titre PAR-DESSUS l'image sombre → texte CLAIR lisible.
   (Bug Roi 05/06 : l'eyebrow était en gris foncé illisible. CAUSE : le bandeau
   .rp-cover-header est HORS de .rp-timeline-section, donc var(--rp-gold-200) n'y est
   PAS définie → la couleur ne résolvait pas. On met des couleurs LITTÉRALES ici.) ── */
.rp-cover-header .rp-eyebrow-light { font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#efe0b0 !important; margin-bottom:14px; text-shadow:0 1px 8px rgba(0,0,0,.55); }
.rp-cover-header .rp-h1-over { color:#fff !important; text-shadow:0 2px 18px rgba(0,0,0,.45); }
.rp-timeline-header .rp-h1 { font-family:var(--rp-display); font-weight:700; font-size:clamp(34px,5vw,56px); color:var(--rp-ink-900); margin:0; }
.rp-timeline-intro { max-width:600px; margin:16px auto 0; color:var(--rp-ink-500); font-size:18px; line-height:1.7; }
.rp-frieze { display:block; width:100%; max-width:240px; height:38px; margin:22px auto 0; }
.rp-hint { margin-top:14px; font-size:13px; color:var(--rp-ink-300); font-style:italic; }
.rp-hint::after { content:" ↓"; }

/* ── Cadran d'année géant (fixe) ── */
.rp-dial { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0; pointer-events:none; text-align:center; }
.rp-dial-yr { font-family:var(--rp-display); font-weight:700; font-size:clamp(120px,26vw,320px); line-height:1; color:var(--rp-green-600); opacity:.07; letter-spacing:-.02em; }
.rp-dial-era { margin-top:-8px; font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--rp-gold-600); opacity:.5; }

/* ── Rail de navigation (vertical, desktop) ── */
.rp-timerail { position:fixed; top:50%; left:max(16px, calc((100vw - 1140px)/2 - 8px)); transform:translateY(-50%); z-index:6; width:var(--rp-rail-w); max-height:78vh; display:flex; flex-direction:column; gap:6px; }
.rp-rail-arrow { align-self:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--rp-gold-200); background:var(--rp-cream-100); color:var(--rp-green-700); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .2s,border-color .2s,opacity .2s; }
.rp-rail-arrow:hover { background:var(--rp-gold-200); border-color:var(--rp-gold-500); }
.rp-rail-arrow:disabled { opacity:.3; cursor:default; }
.rp-rail-list { list-style:none; overflow-y:auto; overflow-x:hidden; padding:4px 2px; margin:2px 0; display:flex; flex-direction:column; gap:6px; scrollbar-width:thin; -webkit-mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 14px),transparent); mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 14px),transparent); }
.rp-rail-date { appearance:none; width:100%; text-align:center; cursor:pointer; font-family:var(--rp-sans); font-size:13px; font-weight:600; color:var(--rp-ink-500); background:var(--rp-white); border:1px solid var(--rp-line); border-radius:7px; padding:7px 6px; line-height:1.1; transition:background .18s,color .18s,border-color .18s,transform .18s; }
.rp-rail-date:hover { border-color:var(--rp-gold-500); color:var(--rp-green-700); }
.rp-rail-date.is-active { background:var(--rp-green-600); border-color:var(--rp-green-600); color:#fff; box-shadow:0 4px 12px rgba(12,42,34,.18); transform:scale(1.03); }
.rp-rail-era { font-family:var(--rp-display); font-style:italic; font-size:11.5px; color:var(--rp-gold-600); text-align:center; padding:6px 2px 1px; line-height:1.2; border-top:1px solid var(--rp-line-soft); margin-top:2px; list-style:none; }
.rp-rail-era:first-child { border-top:none; margin-top:0; }

/* ── Le fil ── */
.rp-reel { position:relative; z-index:1; max-width:760px; margin:24px auto 0; padding-bottom:120px; }
/* Fil central : CONTINU et fin (Roi 10/06) — symbolise la continuité, le fil ininterrompu
   de la lignée. Était 2px en pointillés (repeating-linear-gradient) → 1px plein.
   BLANC + extrémités fondues (Roi 10/06) : couleur blanche, et un mask en dégradé fait
   naître/mourir le fil en douceur en haut et en bas (plein au centre, opacité→0 aux 2 bouts). */
.rp-reel::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); background:#fff; opacity:.6; box-shadow:0 0 3px rgba(28,26,22,.18); }
.rp-yearmark { position:relative; text-align:center; margin:56px 0 28px; z-index:2; }
.rp-yearmark .rp-rose { width:38px; height:38px; display:block; margin:0 auto 6px; }
.rp-yearmark span { font-family:var(--rp-display); font-weight:700; font-size:24px; color:var(--rp-gold-600); background:var(--rp-paper); padding:0 14px; }
.rp-era-band { position:relative; text-align:center; margin:60px 0 10px; z-index:2; }
.rp-era-band .rp-era-label { display:inline-flex; align-items:center; gap:16px; background:var(--rp-paper); padding:0 18px; }
.rp-era-band .rp-era-label::before, .rp-era-band .rp-era-label::after { content:""; width:34px; height:1px; background:var(--rp-gold-500); opacity:.7; }
.rp-era-band .rp-era-label span { font-family:var(--rp-display); font-style:italic; font-size:21px; color:var(--rp-green-700); }

/* ── Carte ── */
/* VISIBLE PAR DÉFAUT (Roi 05/06 : les cartes avaient disparu). L'animation d'entrée
   n'est appliquée QUE si le JS a posé .rp-js sur la section — donc si le JS échoue
   ou si l'IntersectionObserver ne se déclenche pas, le contenu reste affiché.
   Le contenu ne dépend JAMAIS du scroll pour être lisible. */
/* TOUJOURS opaque — le contenu ne dépend jamais d'un événement JS pour être lu.
   En mode JS, un léger décalage vertical s'estompe à la révélation (.in), mais
   même sans révélation la carte reste pleinement visible (opacity reste à 1). */
.rp-entry { position:relative; z-index:2; margin:32px auto; max-width:520px; opacity:1; transform:none; transition:transform .6s var(--rp-ease); }
.rp-js .rp-entry { transform:translateY(20px); }
.rp-js .rp-entry.in { transform:none; }
.rp-card { display:block; background:var(--rp-white); border:1px solid var(--rp-line-soft); border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(28,26,22,.09); text-decoration:none; color:inherit; }
.rp-card:hover { box-shadow:0 12px 30px rgba(12,42,34,.14); }
.rp-thumb { height:230px; overflow:hidden; background:var(--rp-green-800); position:relative; }
/* Patine sépia selon --sep (0 au présent → croît vers le passé), appliquée par
   défaut — l'image est TOUJOURS affichée à son niveau final, jamais cachée. */
/* Patine sépia RETIRÉE (Roi 10/06) — parti pris : les images restent NATURELLES, on ne
   signifie jamais l'ancienneté par un filtre (le texte porte l'époque, pas l'image). Le sépia
   était dosé par année (0 au présent → 0.7 en 1999) via --sep injecté en PHP. `filter:none`
   neutralise tout quelle que soit la valeur --sep encore présente. Vaut pour toutes les époques. */
.rp-thumb img { width:100%; height:100%; object-fit:cover; display:block; filter:none; transition:filter 1s var(--rp-ease), transform .5s var(--rp-ease); }
.rp-card:hover .rp-thumb img { transform:scale(1.04); }
.rp-thumb::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--rp-gold-500),var(--rp-green-500),var(--rp-gold-500)); }
.rp-body { padding:18px 20px 20px; }
.rp-cat { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--rp-green-600); border:1px solid var(--rp-line); border-radius:3px; padding:2px 9px; }
.rp-title { font-family:var(--rp-display); font-weight:400; font-size:21px; line-height:1.3; color:var(--rp-ink-900); margin:10px 0 6px; }
.rp-excerpt { color:var(--rp-ink-500); font-size:.95rem; margin-bottom:.85rem; }
.rp-readmore { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:500; color:var(--rp-green-700); background:var(--rp-cream-100); border:1px solid var(--rp-gold-200); border-radius:999px; padding:8px 16px 8px 10px; transition:border-color .15s ease, box-shadow .15s ease; }
.rp-readmore svg { width:18px; height:18px; }
/* Survol du bouton « Lire l'article » (Roi 10/06) — le bouton doit RÉAGIR : sans retour visuel
   il a l'air décoratif. Choix sobre : liseré or qui s'épaissit + ombre douce, pas de changement
   de fond. Déclenché au survol de toute la carte (a.rp-card) car la carte entière est cliquable. */
.rp-card:hover .rp-readmore,
.rp-readmore:hover { border-color:var(--rp-gold-500); box-shadow:0 2px 8px rgba(28,26,22,.12); }
.rp-empty { text-align:center; color:var(--rp-ink-500); padding:3rem 0; }

/* ── Protection rosace (Roi 05/06) ── CAUSE RACINE : roogan applique un
   `stroke-width:10px` GLOBAL sur les svg → notre cercle r=15.5 devenait un
   anneau jaune massif (le « cercle jaune » signalé). Le fill n'était PAS en cause.
   On réimpose ici les bonnes épaisseurs de trait + fills, en ciblant nos classes
   (spécificité > sélecteur global du thème). !important verrouille contre roogan. */
.rp-rose, .rp-frieze { overflow:visible; }
.rp-rose rect, .rp-frieze rect { stroke-width:0.9px !important; fill:none !important; }
.rp-rose circle, .rp-frieze circle { stroke-width:0.7px !important; }
.rp-rose path, .rp-frieze path { stroke-width:0.7px !important; fill:none !important; }
.rp-rose line, .rp-frieze line { stroke-width:0.7px !important; }
/* le grand cercle or et les pétales : trait fin, jamais rempli */
.rp-rose circle, .rp-frieze circle { fill:none !important; }
/* exception : le point central plein (r=1.6, classe .rp-rose-dot) — rempli or, sans trait */
.rp-rose .rp-rose-dot, .rp-frieze .rp-rose-dot { fill:#d0b050 !important; stroke:none !important; stroke-width:0 !important; }

/* ── Responsive : rail remonte en haut, horizontal sticky ── */
@media (max-width:1140px){
  /* z-index + sticky : la barre reste TOUJOURS accessible au scroll (Roi 05/06).
     -webkit-sticky + fond OPAQUE (pas de backdrop-filter) : Safari iOS casse le sticky
     quand il est combiné à backdrop-filter — fond plein = sticky fiable sur iPhone.

     ── CORRECTIF Círdan 09/06 — CAUSE RACINE de « la barre disparaît au clic/scroll » :
     le thème roogan pose un header `.header-sticky { position:fixed; top:0; height:60px;
     z-index:99995 }`. Notre rail collait à `top:0` → pile DERRIÈRE ce header fixe (qui a un
     z-index 2000× supérieur) → masqué = « disparu ». Le moteur autonome de réf marche parce
     qu'il n'a PAS ce header. Parade : coller le rail SOUS le header (top = sa hauteur).
     `--rp-header-h` est surchargeable si la hauteur du header change (fallback 60px mesuré). */
  /* CORRECTIF Círdan 09/06 (2) — sticky ÉLARGI TABLETTE : le breakpoint ≤1140px couvre
     déjà la tablette (768-1024px), mais à ces largeurs le thème roogan reprend la main et
     repositionne le conteneur → le sticky ne s'accrochait pas en iPad portrait. `!important`
     ciblé sur position/top/transform verrouille notre sticky contre la surcharge roogan.
     (Défensif et réversible — on ne force QUE le positionnement, pas le reste.) */
  .rp-timerail { position:-webkit-sticky !important; position:sticky !important; top:var(--rp-header-h, 60px) !important; left:0; transform:none !important; width:100%; max-height:none; z-index:1000; flex-direction:row; align-items:center; gap:8px; padding:8px 10px; background:#fbf8f1; border-bottom:1px solid var(--rp-line-soft); box-shadow:0 2px 12px rgba(28,26,22,.10); }
  /* CORRECTIF Círdan 09/06 (3) — BANDEAU BLANC supprimé : le hero retiré (Roi 09/06), les
     48px de padding-top du header de timeline laissaient un grand vide blanc sous le header
     du site. On colle le contenu au header. L'intérêt de la page = la navigation, pas le vide. */
  .rp-timeline-header { padding-top:18px; }
  .rp-rail-list { flex-direction:row; flex:1 1 auto; overflow-x:auto; overflow-y:hidden; gap:8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); }
  /* Zone tactile ≥ 44px (cible iOS/Android — Roi 05/06 : « le doigt rate le picto »). */
  .rp-rail-date { white-space:nowrap; min-width:60px; min-height:44px; padding:0 16px; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; }
  .rp-rail-era { border-top:none; border-left:1px solid var(--rp-line-soft); margin:0 0 0 2px; padding:2px 8px 2px 10px; white-space:nowrap; align-self:center; flex:0 0 auto; }
  .rp-rail-era:first-child { border-left:none; }
  /* Flèches : cible tactile 44×44. */
  .rp-rail-arrow { width:44px; height:44px; flex:0 0 auto; }
  #rpRailUp, #rpRailDown { font-size:0; }
  #rpRailUp::before { content:"‹"; } #rpRailDown::before { content:"›"; }
  #rpRailUp::before, #rpRailDown::before { font-size:22px; line-height:1; }
}
@media (max-width:680px){ .rp-dial-yr { opacity:.05; } }

/* ── CORRECTIF Círdan 10/06 — FILET BLANC de 50px sous le header (DESKTOP uniquement) ──
   CAUSE RACINE (mesurée Playwright) : le header roogan `.roogan-header.header-main` porte un
   `margin-bottom:50px` (style du thème). Le hero retiré (Roi 09/06), cette marge laissait voir
   50px du `body` blanc entre le bas du header vert et le début de la section beige = le filet.
   ⚠ AMENDÉ 10/06 : la 1re version annulait la marge HORS média query → effet de bord en MOBILE
   (la barre d'années se retrouvait masquée derrière le header). On RESTREINT donc au DESKTOP
   (>1140px), là où le filet a été constaté. Le mobile (≤1140px) n'est plus touché par cette règle. */
.roogan-header.header-main { margin-bottom: 0; }

/* ── CORRECTIF Círdan 10/06 — RAIL qui dérailait sur le FOOTER (desktop `fixed` sans borne) ──
   Le rail est `position:fixed` en desktop : ancré à la fenêtre, sans fin → au-delà de la timeline
   il flottait par-dessus le footer (bloc cookies/bienvenue — capture Roi). Le JS pose `rp-rail-hidden`
   dès que la section quitte l'écran (IntersectionObserver). Ici : fondu doux + rail non-cliquable
   quand masqué. Réversible, n'affecte pas le comportement DANS la timeline. */
.rp-timerail { transition: opacity .3s ease, visibility .3s ease; }
.rp-timerail.rp-rail-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── CORRECTIF Círdan 10/06 — BANDE BLANCHE en BAS de la timeline (avant le footer) ──
   Même signature que la bande blanche du header : la section `.rp-timeline-section` porte un
   `margin-bottom:50px` (style roogan). Ce margin est transparent → il laisse voir 50px de `body`
   BLANC entre la fin de la section (fond crème) et le footer vert = la bande. La section est suivie
   directement du footer (rien entre les deux), donc annuler ce margin colle proprement la section
   au footer, sans bande. Ce CSS n'est chargé que sur cette page → aucun impact ailleurs. */
.rp-timeline-section { margin-bottom: 0; }