/* =========================================================================
   GUIDE DE LYON — THÈME « L'ENCYCLOPÉDIE DE LYON »
   Refonte PUREMENT visuelle. Chargé en dernier (après style.css + le CSS de
   page) pour réaffecter les variables et neutraliser les dégradés/ombres
   écrits en dur, SANS renommer aucune classe ni toucher au HTML/Jinja.
   Palette : encre + papier + gris + UN seul rouge lyonnais. Aplats only.
   ========================================================================= */

/* ----- 1. Réaffectation des variables (les DEUX jeux de tokens) ---------- */
:root {
  /* Nouveaux tokens de référence */
  --encre:#1a1714; --papier:#f4f0e8; --surface:#faf8f2;
  --gris-fume:#6f6a61; --gris:#968f84;
  --filet:#d8d2c4; --filet-clair:#e8e3d8;
  --accent:#9e2b25; --accent-fonce:#7e211c;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --filet-fin:1px solid var(--filet);
  --filet-fort:2px solid var(--encre);

  /* --- style.css (pages base.html) : mêmes noms, nouvelles valeurs --- */
  --marque-debut:#9e2b25; --marque-fin:#9e2b25; --accent:#9e2b25;
  --degrade-marque:#9e2b25;            /* plus de dégradé : aplat rouge */
  --or:#1a1714; --or-fonce:#1a1714;    /* doré neutralisé en encre */
  --texte:#1a1714; --texte-doux:#6f6a61;
  --fond:#f4f0e8; --blanc:#faf8f2; --bordure:#d8d2c4;
  --police-titre:var(--serif); --police-texte:var(--sans);
  --rayon:0; --rayon-petit:0;
  --ombre-douce:none; --ombre-relief:none;
  --largeur-max:1180px;

  /* --- accueil/pages/listing.css (pages magazine) --- */
  --violet-debut:#9e2b25; --violet-fin:#9e2b25; --violet:#9e2b25;
  --degrade:#9e2b25;                   /* plus de dégradé : aplat rouge */
  --encre-mag:#1a1714; --texte2:#1a1714; --doux:#6f6a61;
  --fond-doux:#faf8f2; --bordure2:#d8d2c4;
  --titre:var(--serif); --corps:var(--sans);
  --max:1180px; --rayon2:0; --rayon-s:0;
  --ombre2:none; --ombre-fort:none;
}

/* ----- 2. Bases : papier, encre, serif pour les titres ------------------- */

/* COINS DROITS PARTOUT + AUCUNE OMBRE — c'est le cœur du style « encyclopédie ».
   On neutralise toutes les rondeurs résiduelles (pilules 999px, blocs 10–24px)
   et toutes les ombres portées, où qu'elles soient déclarées. */
*,*::before,*::after{ border-radius:0 !important; box-shadow:none !important; }
/* Accessibilité : on garde un anneau de focus visible (remplace les ombres de focus). */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

body { background:var(--papier); color:var(--encre); }
h1,h2,h3,h4,.titre,.mag h1,.mag h2,.home h1,.home h2 {
  font-family:var(--serif); letter-spacing:-.01em;
}
a { color:var(--accent); }
@media (hover:hover){ a:hover{ color:var(--accent-fonce); } }

/* ----- 3. Images statiques : vraies vues de Lyon (emplacements de secours) */
/* Quand un événement/article n'a pas de photo, on affiche une vue de Lyon. */
.ph-saone{ background:url('/static/lyon/lyon-saone.jpg') center/cover no-repeat !important; }
.ph-confluence{ background:url('/static/lyon/lyon-confluence.jpg') center/cover no-repeat !important; }
.ph-croix{ background:url('/static/lyon/lyon-croix-rousse.jpg') center/cover no-repeat !important; }
.ph-halles{ background:url('/static/lyon/lyon-halles.jpg') center/cover no-repeat !important; }
.ph-presquile,.ph-lumieres{ background:url('/static/lyon/lyon-presquile.jpg') center/cover no-repeat !important; }
.ph-teteor{ background:url('/static/lyon/lyon-tete-or.jpg') center/cover no-repeat !important; }
.ph-fourviere,.ph-fiche{ background:url('/static/lyon/lyon-fourviere.jpg') center/cover no-repeat !important; }
/* Placeholder vraiment générique (aucun thème) : trame imprimée discrète. */
.carte__visuel--vide,.placeholder{
  background:repeating-linear-gradient(45deg,#ece7da 0 16px,#f1ece0 16px 32px) !important;
  color:var(--gris) !important;
}
/* Hero d'accueil : vraie photo de Lyon + voile encre pour lisibilité du texte. */
.home .hero__img.ph-lumieres{
  background:url('/static/lyon/lyon-presquile.jpg') center/cover no-repeat !important;
}
.home .hero__img.ph-lumieres::after{ content:none !important; }
.home .hero__voile{
  background:linear-gradient(to top,rgba(26,23,20,.80),rgba(26,23,20,.28) 55%,rgba(26,23,20,.05)) !important;
}

/* Encarts promo (Vie pratique sur l'accueil, offre pro) : aplats sobres. */
.vp-accueil,.offre-pro{
  background:var(--encre) !important; color:var(--papier) !important;
  border:1px solid var(--encre) !important; border-radius:2px !important;
  box-shadow:none !important;
}
.vp-accueil:hover,.offre-pro:hover{ transform:none !important; box-shadow:none !important; }
.vp-accueil .eyebrow,.offre-pro__pastille{ color:#e7c9c6 !important; }
.vp-accueil h2,.vp-accueil p,.vp-accueil__cta{ color:var(--papier) !important; }
.vp-accueil__puces span,.offre-pro__pastille{
  background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.28) !important;
}

/* Toute ombre résiduelle écrite en dur → supprimée ; coins quasi droits. */
.carte,.vp-vignette,.ag-evt,.infos-carte,.mag-list__carte,.btn,
.home .btn--plein,.mag .btn--plein{
  box-shadow:none !important; border-radius:2px !important;
}
.home .btn--plein:hover,.mag .btn--plein:hover,
.vp-vignette:hover,.carte:hover,.mag-list__carte:hover{
  transform:none !important; box-shadow:none !important;
}

/* ----- 4. Boutons : encre plein / filet, coins droits ------------------- */
.btn{ border-radius:2px; }
.btn--plein,.home .btn--plein,.mag .btn--plein{
  background:var(--encre); color:var(--papier); border:1px solid var(--encre);
}
.btn--plein:hover,.home .btn--plein:hover,.mag .btn--plein:hover{
  background:var(--accent); border-color:var(--accent); color:var(--papier);
}
.btn--ligne,.btn--contour{
  background:transparent; color:var(--encre); border:1px solid var(--encre);
}

/* ----- 5. Masthead daté (façon une de journal) ------------------------- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:var(--papier) !important; backdrop-filter:none !important;
  border-bottom:2px solid var(--encre) !important;
}
.topbar__in{
  display:flex; align-items:center; gap:24px;
  padding-top:16px; padding-bottom:14px;
}
.marque{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--serif) !important; font-weight:600; font-size:30px;
  color:var(--encre); text-decoration:none; letter-spacing:-.01em; line-height:1;
}
.marque b{ font-weight:600; }
.marque__carre{ width:13px; height:13px; background:var(--accent); display:inline-block; }
.topnav{ display:flex; gap:26px; margin-left:auto; }
.topnav a,.nav__lien{
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--encre); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.topnav a:hover,.nav__lien:hover{ color:var(--accent); }
.topnav a.actif,.nav__lien.actif{ color:var(--accent); border-bottom-color:var(--accent); }
.topbar__droite{ display:flex; align-items:center; gap:16px; }
.recherche-top{ display:flex; align-items:center; }
.recherche-top input{
  font-family:var(--sans); font-size:13px; color:var(--encre);
  background:transparent; border:none; border-bottom:1px solid var(--filet);
  padding:3px 2px; width:120px; border-radius:0;
}
.recherche-top input:focus{ outline:none; border-bottom-color:var(--accent); }
.pro-lien{
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--encre) !important; text-decoration:none;
  border:1px solid var(--encre) !important; border-radius:2px !important;
  background:transparent !important; padding:7px 12px;
}
.pro-lien:hover{ background:var(--encre) !important; color:var(--papier) !important; }
.mast-edition{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:7px; padding-bottom:8px; border-top:1px solid var(--filet);
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris-fume);
}
.mast-edition__d{ color:var(--accent); }
@media (max-width:760px){
  .topbar__in{ flex-wrap:wrap; gap:12px; }
  .topnav{ order:3; width:100%; margin-left:0; gap:18px; flex-wrap:wrap; }
  .marque{ font-size:24px; }
  .recherche-top{ display:none; }   /* la recherche reste sur /agenda */
  .mast-edition__g{ max-width:62%; }
}

/* ----- 6. Cartes & blocs → blocs filés (bordure 1px, pas d'ombre) ------- */
.carte,.vp-vignette,.infos-carte,.mag-list__carte{
  background:var(--surface); border:1px solid var(--filet); border-radius:2px;
}
.carte:hover,.vp-vignette:hover,.mag-list__carte:hover{ border-color:var(--encre); }

/* Badges « À la une » / dorés → encre sur papier, petites capitales. */
.badge-une,.badge,.carte__badge{
  background:var(--encre) !important; color:var(--papier) !important;
  border-radius:0 !important; box-shadow:none !important;
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}

/* Eyebrows / kickers → petites capitales rouges. */
.eyebrow,.kicker,.sur-titre{
  font-family:var(--sans) !important; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent) !important;
}

/* ----- 7. Vie pratique : la donnée comme un almanach -------------------- */
.vp-vignette{ padding:16px 18px; }
.vp-vignette .vp-vignette__emoji,.vp-vignette__emoji{ display:none !important; }
.vp-vignette__titre,.vp-stat__valeur{ font-family:var(--serif); }
.vp-stat__valeur,.vp-liste__meta,.donnee{ font-variant-numeric:tabular-nums; }
.vp-carte{ border:1px solid var(--filet); border-radius:2px; }

/* En-tête de section numérotée (si présent) en rouge. */
.vp-theme__num,.section__num{ color:var(--accent); font-family:var(--sans); }

/* ----- 8. Pied de page : encre, colonnes filées ------------------------- */
.site-pied,.footer{ background:var(--encre); color:var(--papier); }
.site-pied a,.footer a{ color:var(--papier); }
.site-pied a:hover,.footer a:hover{ color:#e7c9c6; }

/* ----- 9. Vie pratique en ALMANACH : tableaux à filets ----------------- */
/* En-tête de rubrique épuré (sans gros emoji décoratif). */
.vp-page__emoji,.vp-fil .vp-fil__emoji{ display:none !important; }
.vp-page__tete{ display:block; border-bottom:2px solid var(--encre); padding-bottom:14px; margin-bottom:8px; }
.vp-page__titre{ font-family:var(--serif); font-weight:600; font-size:2rem; letter-spacing:-.01em; margin:0; }
.vp-page__sous{ font-family:var(--sans); color:var(--gris-fume); margin:6px 0 0; }
.vp-fil,.vp-fil a{ font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-fume); }
.vp-note{ font-family:var(--sans); font-size:.9rem; color:var(--gris-fume); }

.vp-table{ width:100%; border-collapse:collapse; font-family:var(--sans); margin:14px 0 6px; }
.vp-table thead th{
  text-align:left; font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris-fume);
  border-top:1px solid var(--encre); border-bottom:1px solid var(--encre);
  padding:8px 10px; white-space:nowrap;
}
.vp-table th.num,.vp-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.vp-table tbody td{
  border-bottom:1px solid var(--filet); padding:11px 10px; font-size:14.5px; color:var(--encre);
}
.vp-table tbody td:first-child{ font-weight:600; }
.vp-table tbody td.fort{ font-weight:700; }
.vp-table tbody tr:hover{ background:var(--surface); }
.vp-table td a{ color:var(--encre); text-decoration:none; border-bottom:1px solid var(--filet); }
.vp-table td a:hover{ color:var(--accent); border-color:var(--accent); }

/* ----- 10. Lignes d'agenda → registre filé (sans vignette) -------------- */
.ag-evt{
  display:grid !important; grid-template-columns:88px 1fr auto; gap:20px;
  align-items:baseline; background:transparent !important;
  border:none !important; border-bottom:1px solid var(--filet) !important;
  border-radius:0 !important; box-shadow:none !important; padding:16px 4px;
}
.ag-evt:hover{ background:var(--surface) !important; }
.ag-evt__visuel,.ag-evt__emoji{ display:none !important; }
.ag-evt__heure{
  font-family:var(--sans); font-weight:600; font-size:15px; color:var(--encre);
  font-variant-numeric:tabular-nums;
}
.ag-evt__journee{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-fume); }
.ag-evt__tags{ display:flex; gap:10px; margin-bottom:3px; }
.ag-evt__cat{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent) !important;
  background:transparent !important; padding:0 !important; border-radius:0 !important;
}
.ag-evt__arr{
  font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gris) !important; background:transparent !important; padding:0 !important;
}
.ag-evt__titre{ font-family:var(--serif); font-weight:600; font-size:19px; color:var(--encre); margin:0; }
.ag-evt__lieu{ font-family:var(--sans); font-size:13px; color:var(--gris-fume); margin:3px 0 0; }
.ag-evt__desc{ display:none; }
.ag-evt__cote{ display:flex; align-items:center; gap:10px; }
.ag-evt__tarif{ font-family:var(--sans); font-weight:700; color:var(--encre); font-variant-numeric:tabular-nums; }
.ag-evt__fleche{ color:var(--accent); }

/* En-têtes de section numérotés (titres « 06 Agenda », « 01 Vélo'v »…) */
.sec-tete h2,.vp-theme__titre{ font-family:var(--serif); font-weight:600; }

/* ----- 11. Newsletter accueil : préférences mises en avant (sans agrandir) */
.home .nl__perso{
  margin:12px 0 6px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
}
.home .nl__perso-lien{
  font-family:var(--sans); font-weight:700; font-size:1.08rem; line-height:1.2;
  color:#fff !important; text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.home .nl__perso-lien:hover{ color:#fff !important; opacity:.85; }
.home .nl__perso-ex{ font-size:.84rem; font-style:italic; color:rgba(255,255,255,.82); }
.home .nl__note{ font-size:.78rem; opacity:.85; margin:0; }

/* ----- 12. Hero accueil : lien newsletter discret sous les boutons ------- */
.home .hero__lien-nl{
  display:inline-flex; align-items:center; color:#fff; font-family:var(--sans);
  font-size:.9rem; text-decoration:underline; text-underline-offset:3px; opacity:.9;
}
.home .hero__lien-nl:hover{ color:#fff !important; opacity:1; }