/*
Theme Name:   Yatri GP Child
Theme URI:    https://yatri.fr
Description:  Thème enfant GeneratePress pour Yatri.fr — design system terracotta (guides "Que faire à [ville]"). Reprend à l'identique les classes de la maquette : les contenus publiés par automation/publish.py utilisent exactement ces classes.
Author:       Yatri.fr
Template:     generatepress
Version:      1.12.0
Text Domain:  yatri-gp-child
*/

/* ============================================================
   SOMMAIRE
   1. Variables du design system
   2. Base : typographie, liens, ancres
   3. Habillage GeneratePress (header, menus, footer, boutons WP)
   4. Blocs éditoriaux de l'article (réponse rapide, TOC, tableaux, FAQ…)
   5. Blocs de mise en page (grilles, cartes, sections, héros)
   6. Utilitaires
   ============================================================ */


/* ============================================================
   1. Variables du design system (identiques à la maquette)
   ============================================================ */

:root {
  --terracotta: #c25e44;
  --terracotta-dark: #a0472f;
  --terracotta-soft: #f6e9e2;
  --ink: #2a2420;
  --ink-soft: #736860;
  --paper: #fcf9f5;
  --sand: #f5eee4;
  --line: #eae1d8;
  --faint: #9b9089;        /* séparateurs de fil d'Ariane */
  --line-warm: #ecd8ce;    /* bordure des blocs sur fond teinté */
  --ok: #3e7a4e;
  --serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --maxw: 1200px;          /* largeur du contenu, comme les maquettes */
  --radius: 14px;
  --shadow: 0 2px 14px rgba(43, 35, 32, 0.08);
  --shadow-lift: 0 8px 28px rgba(43, 35, 32, 0.13);
}


/* ============================================================
   2. Base
   ============================================================ */

/* Décale les ancres sous le header sticky (sommaire cliquable) */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .entry-title, .main-title,
.site-branding .main-title a, .serif {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 500;
}

h1, .entry-title { font-size: clamp(32px, 5vw, 54px); text-wrap: balance; }
h2 { font-size: clamp(24px, 3.8vw, 32px); margin-bottom: 1rem; }
h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }

a {
  color: var(--terracotta-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--terracotta); }

img { max-width: 100%; height: auto; }

/* Titre de page + encart auteur */
.page-hero { padding: 1.6rem 0 0.4rem; }


/* ============================================================
   3. Habillage GeneratePress
   Le header, les menus et le footer utilisent le balisage de GP :
   on restyle SES classes plutôt que de recréer les nôtres.
   Le header sticky s'active dans GP Premium → Menu Plus →
   "Sticky Navigation" (ne pas le forcer ici, cela entrerait
   en conflit avec le module).
   ============================================================ */

.site-header {
  /* Sans contexte d'empilement, le hero — plus bas dans le document et
     doté d'un fond — recouvre les sous-menus deroulants. `position` et
     `z-index` suffisent : on ne force pas `sticky`, laisse à GP Premium. */
  position: relative;
  z-index: 100;
  background: rgba(252, 249, 245, 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Le hero et les bandeaux pleine largeur restent sous le header. */
.full-bleed, .hero, .page-hero { position: relative; z-index: 1; }

.main-navigation { background: transparent; }
.main-navigation .main-nav ul li a {
  color: var(--ink); font-weight: 500; font-size: 15px;
  padding: 8px 11px; border-radius: 8px;
}
.main-navigation .main-nav ul li a:hover {
  background: var(--terracotta-soft); color: var(--terracotta-dark);
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--terracotta-dark); font-weight: 600;
}

/* Sous-menus (dropdowns du menu principal) */
.main-navigation ul ul {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 0.65rem 0;
}
.main-navigation ul ul li a { color: var(--ink); white-space: nowrap; }
.main-navigation ul ul li a:hover { background: var(--terracotta-soft); color: var(--terracotta-dark); }

/* Bouton recherche du header */
.main-navigation .menu-bar-item.search-item > a { color: var(--ink); }
.main-navigation .menu-bar-item.search-item > a:hover { color: var(--terracotta); }

/* Boutons WordPress / Gutenberg */
button, .button, input[type="submit"], .wp-block-button__link {
  background: var(--terracotta);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--sans);
}
button:hover, .button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
  background: var(--terracotta-dark);
  color: #fff;
}

/* Footer */
.site-footer, .footer-widgets {
  background: #231d18; color: rgba(255, 255, 255, 0.7);
  font-size: 14px; padding-top: 52px;
}
.footer-widgets a, .site-info a { color: #cfc4bc; text-decoration: none; }
.footer-widgets a:hover { color: var(--terracotta); }
.footer-widgets .widget-title {
  color: #fff; font-family: var(--serif); font-size: 14px;
  font-weight: 600; margin-bottom: 14px; letter-spacing: 0; text-transform: none;
}
.footer-widgets .widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets .widget li { padding: 0 0 9px; }
.site-info { color: #9a8d84; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8rem; }

/* Sidebar : widgets */
.sidebar .widget, .widget-area .widget {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1.1rem;
}
.sidebar .widget .widget-title, .widget-area .widget .widget-title {
  font-family: var(--serif); font-size: 1.02rem; margin-bottom: 0.5rem; color: var(--ink);
}
.sidebar .widget a, .widget-area .widget a {
  font-size: 0.87rem; color: var(--ink-soft); text-decoration: none;
}

/* Sommaire et « Guides liés » : des liens dans un <nav>, sans liste.
   Sans cette règle ils s'affichent en ligne et forment un pavé illisible. */
.sidebar .widget nav a, .widget-area .widget nav a {
  display: block;
  padding: 0.22rem 0;
  line-height: 1.35;
}
.sidebar .widget h4, .widget-area .widget h4 {
  font-family: var(--serif); font-size: 1.02rem;
  margin: 0 0 0.5rem; color: var(--ink);
}
.sidebar .widget a:hover, .widget-area .widget a:hover { color: var(--terracotta-dark); }
.sidebar .widget ul, .widget-area .widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget li, .widget-area .widget li { padding: 0.22rem 0; }

/* Widget promo (activités affiliées) — à créer en widget HTML */
.widget.promo, .sidebar .promo, .widget-area .promo {
  background: linear-gradient(150deg, var(--terracotta-soft), #fff);
  border: 1px solid var(--terracotta);
}

/* Fil d'Ariane (Rank Math / Yoast) */
.rank-math-breadcrumb, .yoast-breadcrumb, .breadcrumb {
  font-size: 13.5px; color: var(--ink-soft);
  padding: 18px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.rank-math-breadcrumb a, .yoast-breadcrumb a, .breadcrumb a {
  color: var(--ink-soft); text-decoration: none;
}
.rank-math-breadcrumb a:hover, .yoast-breadcrumb a:hover, .breadcrumb a:hover { color: var(--terracotta); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.35rem; color: var(--faint); }
.breadcrumb li:last-child { color: var(--ink); font-weight: 500; }


/* ============================================================
   4. Blocs éditoriaux de l'article
   Ces classes sont produites par automation/publish.py.
   ============================================================ */


/* --- Bloc réponse rapide (extrait par AI Overviews / LLMs) --- */
.quick-answer {
  background: var(--terracotta-soft);
  border: 1px solid var(--line-warm); border-left: 4px solid var(--terracotta);
  border-radius: 14px; padding: 22px 24px; margin: 1.2rem 0 2.5rem;
  font-size: 18px; line-height: 1.55;
}
.quick-answer .label {
  display: block; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--terracotta-dark); font-weight: 600; margin-bottom: 9px;
}

/* --- Sommaire repliable --- */
.toc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.4rem 1.1rem 0.9rem; margin: 1.4rem 0;
}
.toc summary {
  cursor: pointer; font-weight: 600; padding: 0.6rem 0;
  font-family: var(--serif); font-size: 1.05rem;
  list-style: none; position: relative;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "▾"; position: absolute; right: 0.2rem; color: var(--terracotta); }
.toc[open] summary::after { content: "▴"; }
.toc ol { padding-left: 1.2rem; columns: 1; margin: 0; }
.toc li { padding: 0.14rem 0; font-size: 0.93rem; }
.toc a { text-decoration: none; color: var(--ink); }
.toc a:hover { color: var(--terracotta-dark); }
@media (min-width: 700px) { .toc ol { columns: 2; column-gap: 2.5rem; } }

/* --- Tableaux récapitulatifs --- */
.table-scroll {
  overflow-x: auto; margin: 1.2rem 0;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.table-scroll table {
  border-collapse: collapse; width: 100%; font-size: 0.92rem;
  background: #fff; min-width: 34rem; margin: 0;
}
.table-scroll th, .table-scroll td {
  text-align: left; padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line); border-left: 0; border-right: 0;
  vertical-align: top;
}
.table-scroll th { background: var(--sand); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.table-scroll tr:last-child td { border-bottom: 0; }
.table-scroll td .btn-mini { white-space: nowrap; }

/* --- Encadré infos pratiques --- */
.infos {
  background: var(--sand); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; margin: 1rem 0; font-size: 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; align-items: center;
}
.infos b { font-weight: 600; }
.infos .cta { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

/* --- Astuce terrain --- */
.tip {
  border: 1px dashed var(--terracotta); border-radius: var(--radius);
  padding: 0.8rem 1.1rem; margin: 1rem 0; font-size: 0.93rem; background: #fff;
}
.tip b { color: var(--terracotta-dark); }

/* --- Boutons d'affiliation --- */
.btn-mini {
  display: inline-block; background: var(--terracotta); color: #fff !important;
  padding: 0.32rem 0.85rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 0.8rem;
}
.btn-mini:hover { background: var(--terracotta-dark); color: #fff !important; }
.affil-note { font-size: 0.75rem; color: var(--ink-soft); }

/* --- Mini-cartes (sous-pages, profils, où dormir) --- */
.minicards {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  margin: 1.2rem 0;
}
.minicard {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  box-shadow: var(--shadow); transition: 0.15s;
}
.minicard:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.minicard h3 { font-size: 1.02rem; margin: 0; }
.minicard h3 a { color: var(--ink); text-decoration: none; }
.minicard h3 a::after { content: ""; position: absolute; inset: 0; }
.minicard h3 a:hover { color: var(--terracotta-dark); }
.minicard p { font-size: 0.86rem; color: var(--ink-soft); margin: 0.25rem 0 0; }
.minicard .tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--terracotta-dark);
}

/* --- FAQ en accordéon --- */
.faq { margin: 1rem 0; }
.faq details {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; margin-bottom: 12px;
}
.faq summary {
  cursor: pointer; padding: 17px 20px;
  font-family: var(--serif); font-weight: 600; font-size: 16.5px;
  list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 14px;
  font-size: 22px; line-height: 1; color: var(--terracotta);
}
.faq details[open] summary::after { content: "–"; }
.faq .faq-a { padding: 0 20px 18px; color: var(--ink); }

/* --- Timeline des itinéraires --- */
.day { margin: 2.2rem 0; }
.timeline { list-style: none; margin: 1rem 0 0; position: relative; padding-left: 1.6rem; }
.timeline::before {
  content: ""; position: absolute; left: 0.45rem; top: 0.4rem; bottom: 0.4rem;
  width: 2px; background: var(--line);
}
.timeline li { position: relative; padding: 0 0 1.4rem 0.6rem; }
.timeline li::before {
  content: ""; position: absolute; left: -1.6rem; top: 0.35rem;
  width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: var(--terracotta); border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--terracotta);
}
.timeline .slot {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--terracotta-dark);
}
.timeline h3 { margin: 0.15rem 0 0.3rem; }
.timeline .tmeta { font-size: 0.84rem; color: var(--ink-soft); }

/* --- Encadré budget --- */
.budget { background: var(--sand); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.6rem 0; }
.budget h3 { margin-bottom: 0.4rem; }

/* --- Sections de l'article (un bloc par lieu) --- */
.spot { margin: 2.4rem 0; }
.spot h2 { scroll-margin-top: 5rem; }
.spot p { margin: 0.8rem 0; }
.spot .ph, .spot img { border-radius: var(--radius); margin: 0.9rem 0; }

/* Images de contenu */
.entry-content img, .entry-content figure img { border-radius: var(--radius); }


/* ============================================================
   5. Blocs de mise en page
   Pour les hubs pays, l'accueil et les pages index : grilles de
   cartes villes, sections, héros. À utiliser dans Gutenberg via
   un bloc HTML personnalisé, ou générés par le script.
   ============================================================ */

/* --- Sections --- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.1rem; }
.section { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.section.alt { background: var(--sand); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap;
}
.section-head p { color: var(--ink-soft); }
.section-head .more { white-space: nowrap; font-weight: 600; text-decoration: none; }

/* --- Grilles de cartes --- */
.grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
.grid.g4 { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: 0.18s ease;
  display: flex; flex-direction: column; position: relative;
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
/* .card impose display:flex, qui l'emportait sur l'attribut hidden du
   navigateur : une carte filtrée restait visible. */
.card[hidden] { display: none !important; }
/* Les photos n'ont pas toutes le même format : sans cadrage commun, les
   titres et les liens des cartes voisines ne s'alignent plus. */
.card > img, .card .wp-post-image {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}
/* Le titre occupe deux lignes de haut partout : « Que faire au Portugal ? »
   passe à la ligne, « Que faire en Italie ? » non. */
.card-body h3 { min-height: 2.3em; display: flex; align-items: flex-start; }
.card-body {
  padding: 0.95rem 1.05rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.25rem; flex: 1;
}
.card-body h3 { margin: 0; }
.card-body h3 a { color: var(--ink); text-decoration: none; }
.card-body h3 a::after { content: ""; position: absolute; inset: 0; }
.card-body h3 a:hover { color: var(--terracotta-dark); }
.card .meta { font-size: 0.83rem; color: var(--ink-soft); margin: 0; }
.card .go {
  margin-top: auto; padding-top: 0.5rem;
  font-weight: 600; font-size: 0.9rem; color: var(--terracotta-dark);
}

/* --- Emplacements photo (à remplacer par de vraies images) --- */
.ph {
  aspect-ratio: 3 / 2; display: flex; align-items: flex-end;
  padding: 0.7rem 0.9rem; color: #fff; font-size: 0.8rem; letter-spacing: 0.03em;
  background: linear-gradient(150deg, #c9805e, #8c503a 55%, #4d3227);
}
.ph.alt1 { background: linear-gradient(150deg, #7f9a8a, #4d685c 55%, #2c3f37); }
.ph.alt2 { background: linear-gradient(150deg, #c9a35e, #97713a 55%, #55401f); }
.ph.alt3 { background: linear-gradient(150deg, #7e93b4, #4a5f80 55%, #283549); }
.ph.wide { aspect-ratio: 21 / 9; border-radius: var(--radius); }
.ph.map {
  aspect-ratio: 16 / 9; align-items: center; justify-content: center;
  border-radius: var(--radius); font-size: 0.95rem;
}

/* --- Boutons --- */
.btn {
  display: inline-block; background: var(--terracotta); color: #fff !important;
  padding: 0.7rem 1.35rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 0.95rem; border: 0; cursor: pointer; font-family: var(--sans);
}
.btn:hover { background: var(--terracotta-dark); color: #fff !important; }
.btn.ghost {
  background: transparent; color: var(--terracotta-dark) !important;
  border: 1.5px solid var(--terracotta);
}
.btn.ghost:hover { background: var(--terracotta-soft); }

/* --- Héros de la page d'accueil --- */
.hero {
  position: relative; color: #fff;
  padding: clamp(3.5rem, 9vw, 6.5rem) 1.1rem;
  text-align: center;
  /* Carte ancienne de l'Europe en fond, sous un voile sombre : le titre
     doit rester lisible même là où la photo s'éclaircit. Le dégradé de
     secours s'affiche si l'image ne charge pas. */
  background-color: #3f2a22;
  background-image:
    linear-gradient(160deg, rgba(26, 17, 13, 0.80), rgba(112, 50, 30, 0.70)),
    url("assets/img/hero-europe.jpg"),
    linear-gradient(115deg, #b4653f, #7e4632 45%, #3f2a22);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero h1 {
  color: #fff; font-size: clamp(1.9rem, 5.5vw, 3rem); margin-bottom: 0.7rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}
.hero p {
  font-size: clamp(1rem, 2.2vw, 1.15rem); opacity: 0.95; margin-bottom: 1.6rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.searchbar {
  /* overflow visible : la liste de suggestions déborde volontairement sous
     la barre. Les coins arrondis sont donc portés par les enfants. */
  display: flex; position: relative; background: #fff; border-radius: 999px;
  box-shadow: var(--shadow-lift); max-width: 33rem; margin: 0 auto;
}
.searchbar input {
  flex: 1; border: 0; padding: 0.95rem 1.4rem; font-size: 1rem;
  font-family: var(--sans); color: var(--ink); outline: none; min-width: 0;
}
.searchbar button {
  border: 0; background: var(--terracotta); color: #fff; font-weight: 600;
  padding: 0 1.5rem; font-size: 0.95rem; cursor: pointer;
  border-radius: 0 999px 999px 0;
}
.searchbar button:hover { background: var(--terracotta-dark); }

/* --- Bandeau newsletter --- */
.newsletter { background: var(--ink); color: #fff; padding: 2.8rem 1.1rem 3rem; text-align: center; }
.newsletter h2 { color: #fff; }
.newsletter p { opacity: 0.8; margin: 0.5rem 0 1.3rem; }
.newsletter form { display: flex; gap: 0.6rem; max-width: 27rem; margin: 0 auto; flex-wrap: wrap; }
.newsletter input {
  flex: 1; min-width: 12rem; border: 0; border-radius: 999px;
  padding: 0.8rem 1.2rem; font-size: 0.95rem; font-family: var(--sans);
}

/* --- Bandeau saisonnier --- */
.season { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.season .card-body { gap: 0.4rem; }


/* ============================================================
   6. Utilitaires
   ============================================================ */

.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }
.center { text-align: center; }
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }

.pill {
  display: inline-block; background: var(--sand); border-radius: 999px;
  padding: 0.2rem 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
}

.prose p { margin: 0.8rem 0; }
.prose ul { margin: 0.8rem 0 0.8rem 1.3rem; }
.prose li { margin: 0.3rem 0; }


/* ============================================================
   7. Fiche lieu — blocs repris de la maquette « La Ribeira »
   ============================================================ */

/* --- Bandeau des données clés (durée · prix · moment · accès) ---
   Grille 2 colonnes en mobile, 4 à partir de 760px, comme la maquette.
   Les séparateurs passent du haut à la gauche au changement de format. */
.facts {
  background: var(--ink); color: #fff;
  border-radius: 18px; overflow: hidden;
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin: 1.4rem 0;
}
.facts > div { padding: 18px 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.facts .label {
  display: block; font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); margin-bottom: 4px;
}
.facts .valeur { font-family: var(--serif); font-size: 22px; font-weight: 600; }

@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .facts > div { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); }
  .facts > div:first-child { border-left: 0; }
}

/* --- Citation en exergue (carnet de terrain) --- */
.pull-quote {
  border-left: 3px solid var(--terracotta);
  padding: 0.2rem 0 0.2rem 1.4rem; margin: 1.8rem 0;
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; color: var(--ink);
}
.pull-quote cite {
  display: block; margin-top: 0.6rem;
  font-family: var(--sans); font-size: 0.85rem; font-style: normal; color: var(--ink-soft);
}

/* --- Parcours en étapes numérotées --- */
.etapes { list-style: none; margin: 1.4rem 0; padding: 0; counter-reset: etape; }
.etapes > li {
  position: relative; padding: 0 0 1.6rem 3.2rem; counter-increment: etape;
}
.etapes > li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--terracotta-soft); color: var(--terracotta-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 1.05rem;
}
.etapes h3 { margin: 0.25rem 0 0.4rem; }
.etapes p { margin: 0.4rem 0; }

/* --- Conseils de terrain --- */
.conseils {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1.2rem 0;
}
.conseils > div {
  background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem;
}
.conseils h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.conseils p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }

/* --- Photo principale d'une fiche lieu --- */
.photo-principale {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: var(--radius); margin: 1.2rem 0;
}

/* --- Photo d'un lieu, sous son intertitre dans un guide --- */
.lien-photo-lieu { display: block; margin: 0.6rem 0 1.1rem; }
.photo-lieu {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--radius);
}
.lien-photo-lieu:hover .photo-lieu { opacity: 0.93; }

/* --- Emplacement photo légendé --- */
.photo-slot {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  background: repeating-linear-gradient(48deg, #e7d6cc, #e7d6cc 13px, #eaddd4 13px, #eaddd4 26px);
  margin: 1.2rem 0;
}
.photo-slot span {
  position: absolute; top: 1rem; left: 1rem;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem;
  color: #8a7566; background: rgba(255, 255, 255, 0.72);
  padding: 0.25rem 0.55rem; border-radius: 6px;
}

/* --- Méta sous les lieux voisins --- */
.minicard .meta-lieu {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem;
  color: var(--ink-soft); margin-top: 0.35rem;
}


/* ============================================================
   Blocs repris de la maquette « La Ribeira » — fiche lieu
   ============================================================ */

/* --- Split hero : titre et chapô à gauche, photo à droite --- */
.split-hero {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  margin: 10px 0 0;
}
.split-hero .texte {
  padding: clamp(26px, 4.5vw, 52px);
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.split-hero .texte h1 { margin: 0; }
.split-hero .texte p { font-size: 18px; color: var(--ink-soft); text-wrap: pretty; margin: 0; }
.split-hero .visuel {
  position: relative; min-height: 280px;
  background: repeating-linear-gradient(48deg, #e7d6cc, #e7d6cc 13px, #eaddd4 13px, #eaddd4 26px);
  background-size: cover; background-position: center;
}
@media (min-width: 860px) {
  .split-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 480px; }
}

/* --- Duo de photos --- */
.photo-duo { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0 0 44px; }
@media (min-width: 760px) { .photo-duo { grid-template-columns: 1fr 1fr; gap: 24px; } }
.photo-duo > div, .photo-duo figure {
  position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(48deg, #e7d6cc, #e7d6cc 12px, #eaddd4 12px, #eaddd4 24px);
  margin: 0;
}

/* --- Légende d'emplacement photo --- */
.legende-photo {
  position: absolute; top: 16px; left: 16px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  color: #8a7566; background: rgba(255, 255, 255, 0.72);
  padding: 4px 9px; border-radius: 6px;
}
.photo-duo .legende-photo { top: auto; bottom: 12px; left: 12px; }

/* --- Encadré « À explorer ensuite » --- */
.next-box {
  background: var(--terracotta-soft); border: 1px solid var(--line-warm);
  border-radius: 20px; padding: clamp(24px, 4vw, 40px); margin: 2.5rem 0;
}
.next-box h2 { margin-bottom: 6px; }
.next-box > p { color: var(--ink-soft); margin-bottom: 22px; }
.next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.next-grid a {
  display: block; background: #fff; border: 1px solid var(--line-warm);
  border-radius: 14px; overflow: hidden; color: var(--ink); text-decoration: none;
}
.next-grid a:hover { border-color: var(--terracotta); }
.next-grid .vignette {
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(48deg, #e7d6cc, #e7d6cc 11px, #eaddd4 11px, #eaddd4 22px);
  background-size: cover; background-position: center;
}
.next-grid .corps { padding: 14px 16px; }
.next-grid .nom { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.next-grid .meta-lieu { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

/* --- Conseils de terrain : paragraphes à amorce en gras --- */
.conseils-prose { display: flex; flex-direction: column; gap: 16px; }
.conseils-prose p { margin: 0; }
.conseils-prose strong { color: var(--ink); }

/* ============================================================
   8. Grille contenu + colonne latérale
   Les templates du thème produisent .layout et .sidebar-in ; ces règles
   étaient présentes dans la maquette mais manquaient ici, ce qui aurait
   empilé la colonne latérale sous le contenu au lieu de la placer à droite.
   ============================================================ */

.layout { display: grid; gap: 2.2rem; }

.sidebar { display: none; }
.sidebar-in {
  position: sticky; top: 4.6rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}

@media (min-width: 1020px) {
  .layout { grid-template-columns: minmax(0, 1fr) 18.5rem; }
  .sidebar { display: block; }
}

/* Le contenu ne doit jamais forcer un débordement horizontal. */
.article { min-width: 0; }
.article img { max-width: 100%; height: auto; }

/* ============================================================
   9. Page d'accueil
   GeneratePress place .site-content en display:flex. Un héros posé
   comme enfant direct devient donc une colonne au lieu d'une bande.
   Les sections pleine largeur vivent maintenant DANS la zone de
   contenu, et débordent volontairement jusqu'aux bords.
   ============================================================ */

body { overflow-x: hidden; }   /* évite la barre horizontale due au 100vw */

.full-bleed {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

/* Le héros et la newsletter recentrent leur contenu à l'intérieur. */
.full-bleed > .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: clamp(20px, 4.5vw, 44px);
  padding-right: clamp(20px, 4.5vw, 44px);
}

/* Les sections de l'accueil écrivent directement dans .site-main : sans
   cette gouttière, « Top destinations » collait au bord de l'écran. Les
   bandes pleine largeur en ressortent d'elles-mêmes. */
.home .site-main {
  padding-left: clamp(20px, 4.5vw, 44px);
  padding-right: clamp(20px, 4.5vw, 44px);
}

/* La page d'accueil occupe toute la largeur : pas de colonne latérale. */
.home .content-area,
.home #primary { width: 100%; max-width: 100%; }
.home .site-content { display: block; }

/* ============================================================
   10. Header et footer GeneratePress — alignement final
   ============================================================ */

/* Logo du header : l'image fournie remplace le titre texte. GP utilise
   .main-title ; la hauteur fixe garde le header compact. */
.site-branding .main-title.yatri-logo { margin: 0; line-height: 0; }
.site-branding .main-title.yatri-logo a { display: inline-block; }
.site-branding .main-title.yatri-logo img {
  display: block; height: 52px; width: auto; max-width: 100%;
}
@media (max-width: 768px) {
  .site-branding .main-title.yatri-logo img { height: 40px; }
}

/* Logo clair des zones sombres : bandeau de marque au-dessus du footer. */
.site-footer .footer-brand {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px 30px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
}
.site-footer .footer-brand a { display: inline-block; line-height: 0; }
.site-footer .footer-brand img { height: 36px; width: auto; }
.site-footer .footer-brand p {
  margin: 0; color: rgba(255, 255, 255, 0.6); font-size: 14px;
}

/* Menu : casse normale, pas de capitales espacées héritées du starter site. */
.main-navigation .main-nav ul li a {
  text-transform: none; letter-spacing: 0;
}

/* Footer : la grille 4 colonnes remplace les widgets GP. */
.site-footer .footer-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 34px 24px;
}
.site-footer .footer-grid h4 {
  color: #fff; font-family: var(--serif); font-size: 14px;
  font-weight: 600; margin: 0 0 14px; text-transform: none; letter-spacing: 0;
}
.site-footer .footer-grid a {
  display: block; color: rgba(255, 255, 255, 0.7); text-decoration: none;
  font-size: 14px; margin-bottom: 9px;
}
.site-footer .footer-grid a:hover { color: var(--terracotta); }

/* Sections pleine largeur de l'accueil : le fond sable va jusqu'aux bords,
   le contenu reste cadré par .wrap. */
.section.alt.full-bleed { padding-left: 0; padding-right: 0; }
.section.alt.full-bleed > .wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding-left: clamp(20px, 4.5vw, 44px);
  padding-right: clamp(20px, 4.5vw, 44px);
}

/* Grille des 3 suggestions du mois. */
.season {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* --- Index des lieux : filtres et groupes (/lieux/) --- */
.filtres-lieux {
  display: grid; gap: 0.8rem 1rem; align-items: end;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin: 1.2rem 0 0.6rem; box-shadow: var(--shadow);
}
.filtres-lieux .filtre { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.filtres-lieux label {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.filtres-lieux input[type="search"],
.filtres-lieux select {
  width: 100%; padding: 0.5rem 0.65rem; font: inherit; font-size: 0.92rem;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
}
.filtres-lieux input[type="search"]:focus,
.filtres-lieux select:focus {
  outline: 2px solid var(--terracotta); outline-offset: 1px; border-color: var(--terracotta);
}
.filtres-lieux .fl-reset { border: 0; cursor: pointer; padding: 0.55rem 1rem; }
.fl-compte { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 0.6rem; }
.fl-vide { margin: 1.4rem 0; }
.groupe-ville { margin: 0 0 1.6rem; }
.titre-ville {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  font-size: 1.12rem; margin: 1.2rem 0 0.2rem;
}
.titre-ville a { color: var(--ink); text-decoration: none; }
.titre-ville a:hover { color: var(--terracotta-dark); }
.titre-ville .small { font-weight: 400; }

@media (max-width: 900px) {
  .filtres-lieux { grid-template-columns: 1fr 1fr; }
  .filtres-lieux .filtre-recherche { grid-column: 1 / -1; }
  .filtres-lieux .fl-reset { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .filtres-lieux { grid-template-columns: 1fr; }
}

/* --- Index des lieux : les plus recherchés --- */
.lieux-populaires { margin: 1.6rem 0 2.4rem; }
.lieux-populaires h2 { margin-bottom: 0.15rem; }
.lieux-populaires > .muted { margin: 0 0 1rem; font-size: 0.9rem; }
.vignettes {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}
.vignette-lieu {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); text-decoration: none; color: #fff;
  box-shadow: var(--shadow); background: var(--ink);
  aspect-ratio: 4 / 3; transition: 0.18s;
}
.vignette-lieu:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.vignette-image { position: absolute; inset: 0; display: block; }
.vignette-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s ease;
}
.vignette-lieu:hover .vignette-image img { transform: scale(1.04); }
.vignette-texte {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 2.4rem 0.95rem 0.85rem;
  background: linear-gradient(to top, rgba(20, 16, 14, 0.82), rgba(20, 16, 14, 0));
}
.vignette-ville {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.82);
}
.vignette-titre {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.25; color: #fff;
}
@media (max-width: 480px) {
  .vignettes { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .vignette-titre { font-size: 0.9rem; }
  .vignette-texte { padding: 1.8rem 0.7rem 0.6rem; }
}

/* ============================================================
   12. Confort de lecture, mobile en tête
   Nos gabarits (guide, fiche lieu, index des lieux) écrivent
   directement dans .site-main : GeneratePress n'y applique pas les
   marges qu'il réserve à .inside-article, et le texte venait toucher
   le bord de l'écran. La gouttière est donc posée ici, une seule fois,
   et seulement sur nos gabarits — les pages Gutenberg gardent celles
   de GeneratePress.
   ============================================================ */

.single-guide .site-main,
.single-spot .site-main,
.post-type-archive-spot .site-main,
.search .site-main {
  padding-left: clamp(20px, 4.5vw, 44px);
  padding-right: clamp(20px, 4.5vw, 44px);
  padding-bottom: 2.5rem;
}

/* Les bandes pleine largeur ressortent d'elles-mêmes de la gouttière
   (marge négative de 50vw) : rien à corriger pour elles. */

@media (max-width: 640px) {
  /* Un titre de guide fait souvent dix mots : 32 px le coupaient en
     quatre lignes sur un téléphone. */
  h1, .entry-title { font-size: clamp(27px, 7.4vw, 34px); line-height: 1.18; }
  h2 { font-size: clamp(21px, 5.6vw, 26px); line-height: 1.2; }
  h3 { font-size: 1.05rem; }

  .breadcrumb { font-size: 12.5px; padding: 14px 0 4px; gap: 5px; }
  .page-hero { padding-top: 1.1rem; }

  /* Réponse rapide : l'encadré gardait des marges de bureau et mangeait
     la moitié de la largeur utile. */
  .quick-answer {
    padding: 16px 17px; border-radius: 12px; font-size: 16.5px;
    line-height: 1.5; margin: 1rem 0 1.8rem;
  }

  .toc { padding: 0.3rem 0.9rem 0.7rem; }
  .table-scroll { margin: 1rem -2px; }
  .minicards { grid-template-columns: 1fr; gap: 0.7rem; }
  .minicard { padding: 0.85rem 0.95rem; }

  /* Cibles tactiles : des liens de liste trop serrés se manquent au doigt. */
  .breadcrumb a, .toc a, .sidebar .widget nav a { padding-block: 0.3rem; }

  .section { padding-block: 1.7rem; }
  .section-head { margin-bottom: 1rem; gap: 0.35rem; }
  /* En une seule colonne, les cartes se suivent : plus besoin de réserver
     deux lignes de titre pour aligner des voisines qui n'existent plus. */
  .card-body h3 { min-height: 0; }
  .grid { gap: 0.9rem; }
  .lieux-populaires { margin: 1.2rem 0 1.8rem; }
  .filtres-lieux { padding: 0.9rem; }
}


/* --- Recherche à suggestions du héros --- */
.suggestions {
  position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 0.35rem; list-style: none; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(28, 18, 14, 0.18);
  max-height: 22rem; overflow-y: auto;
}
.suggestion a {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.6rem 0.7rem; border-radius: 10px; text-decoration: none;
}
.suggestion-titre { color: var(--ink); font-size: 0.97rem; line-height: 1.25; }
.suggestion-meta { color: var(--ink-soft); font-size: 0.78rem; }
.suggestion:hover a, .suggestion.actif a { background: var(--terracotta-soft); }
.suggestion:hover .suggestion-titre, .suggestion.actif .suggestion-titre {
  color: var(--terracotta-dark);
}

/* --- Pastilles « Les plus recherchés » sous la barre --- */
.hero-suggestions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.45rem; margin: 1.1rem auto 0; max-width: 40rem;
}
.hero-suggestions-label {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
  margin-right: 0.2rem;
}
.pastille {
  display: inline-block; padding: 0.34rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff !important; text-decoration: none; font-size: 0.86rem;
  transition: 0.15s;
}
.pastille:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.6); }

@media (max-width: 640px) {
  .hero-suggestions { gap: 0.35rem; margin-top: 0.9rem; }
  .hero-suggestions-label { width: 100%; text-align: center; margin: 0 0 0.15rem; }
  .pastille { font-size: 0.82rem; padding: 0.42rem 0.8rem; }
  .suggestion a { padding: 0.7rem; }
}

/* --- Page de résultats de recherche --- */
.resultats { display: grid; gap: 0.8rem; margin: 1.4rem 0 2rem; }
.resultat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; position: relative;
}
.resultat h2 { font-size: 1.1rem; margin: 0 0 0.2rem; }
.resultat h2 a { color: var(--ink); text-decoration: none; }
.resultat h2 a::after { content: ""; position: absolute; inset: 0; }
.resultat h2 a:hover { color: var(--terracotta-dark); }
.resultat .type {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--terracotta-dark);
}
.resultat p { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }
.recherche-vide { margin: 1.5rem 0 2.5rem; }
.searchbar.compact { margin: 1.2rem 0 0; box-shadow: var(--shadow); }


/* ============================================================
   13. Gabarit des pages pays (body.gabarit-pays)
   Aucune de ces règles ne touche les guides ville, itinéraire ou
   thématique : elles sont toutes préfixées par .gabarit-pays.
   ============================================================ */

/* La bande d'ouverture et la bande des destinations sortent de la
   colonne de lecture ; le texte, lui, garde la largeur du site. */
.gabarit-pays .heros-pays,
.gabarit-pays .bande-destinations {
  margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
  width: 100vw;
}

.gabarit-pays .heros-pays {
  position: relative; color: #fff; overflow: hidden;
  background: #3f2a22 center/cover no-repeat;
  padding: clamp(2.4rem, 6vw, 4.4rem) 0; margin-bottom: 0;
}
.gabarit-pays .heros-voile {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(26, 17, 13, 0.88) 10%, rgba(26, 17, 13, 0.58) 60%, rgba(26, 17, 13, 0.38));
}
.gabarit-pays .heros-texte {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(20px, 4.5vw, 44px); display: grid; gap: 0.85rem;
}
.gabarit-pays .heros-texte .etiquette {
  justify-self: start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 0.3rem 0.85rem;
}
.gabarit-pays .heros-texte h1 {
  color: #fff; margin: 0; max-width: 18ch;
  font-size: clamp(30px, 5vw, 50px); line-height: 1.08;
}
.gabarit-pays .heros-chapo {
  color: rgba(255, 255, 255, 0.92); max-width: 56ch; margin: 0; font-size: 1.02rem;
}
.gabarit-pays .heros-chiffres {
  display: flex; flex-wrap: wrap; gap: 0.7rem 2.4rem; margin-top: 0.5rem;
  padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.gabarit-pays .heros-chiffres div { display: grid; gap: 0.1rem; }
.gabarit-pays .heros-chiffres b {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 600; line-height: 1;
}
.gabarit-pays .heros-chiffres span {
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* La bande des destinations */
.gabarit-pays .bande-destinations {
  background: var(--sand); padding: clamp(1.8rem, 4vw, 3rem) 0; margin-bottom: 2.2rem;
}
.gabarit-pays .bande-dedans {
  max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 44px);
}
.gabarit-pays .bande-dedans .section-head { margin-bottom: 1.1rem; }
.gabarit-pays .grid-destinations {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.gabarit-pays .card .meta.saison { color: var(--terracotta-dark); font-weight: 500; }

/* Le sélecteur de mois */
.mois-choix-liste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; }
.mois-choix {
  display: grid; justify-items: center; gap: 0.1rem; cursor: pointer;
  min-width: 3.5rem; padding: 0.42rem 0.6rem; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; transition: 0.15s;
}
.mois-choix em { font-style: normal; font-size: 0.7rem; color: var(--ink-soft); }
.mois-choix:hover:not(:disabled) { border-color: var(--terracotta); }
.mois-choix:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.mois-choix.actif { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.mois-choix.actif em { color: rgba(255, 255, 255, 0.82); }
.mois-choix.vide, .mois-choix:disabled { opacity: 0.42; cursor: not-allowed; }
.saison-compte { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 1.3rem; }
.saison-compte b { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .gabarit-pays .heros-chiffres { gap: 0.6rem 1.5rem; }
  .gabarit-pays .heros-chiffres b { font-size: 1.28rem; }
  .mois-choix { min-width: 3.1rem; padding: 0.38rem 0.5rem; font-size: 0.78rem; }
}