/* Charte mapped by, commune au guide web, au PDF et au site. La collection donne la grille :
   lettres d'affiche (Archivo très condensé), route pointillée, pins numérotés. Chaque pays donne
   ses couleurs, sa lettre peinte et ses motifs dans gabarit/pays-<guide>.css, chargé après celle-ci. */
:root {
  --papier: #F5F0E8;      /* fond, papier crème */
  --sable: #EDE4D3;       /* encarts */
  --trait: #D8C7A9;       /* filets, cadres */
  --encre: #221C16;       /* texte, 14,9:1 sur papier */
  --encre-douce: #5E554B; /* texte secondaire, 6,4:1 */
  --moutarde: #E8A70C;    /* pins et tracés, jamais en texte (1,9:1) */
  --moutarde-texte: #8A5D00;
  --destination: #B8235F; /* une couleur par guide, posée par contenu.json */
  --destination-texte: var(--destination); /* la couleur du pays en texte sur papier (AA) */
  --focus: var(--encre);  /* contour du focus clavier */
  --bandeau: var(--destination); /* grands aplats du site (inscription) */
  --destination-vif: var(--destination); /* points et cases cochées */
  --seconde: var(--encre); /* seconde couleur : heures, jour choisi sur la carte */
  --titre: 'Archivo', 'Arial Narrow', sans-serif;
  --texte: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --script: var(--titre); /* lettre peinte du pays */
  --pointille: radial-gradient(circle, var(--moutarde) 0 1.1px, transparent 1.5px);
}

body { background: var(--papier); color: var(--encre); font-family: var(--texte); }
h1, h2 { font-family: var(--titre); font-weight: 900; font-stretch: 62%; text-transform: uppercase; letter-spacing: 0; line-height: .9; text-wrap: balance; margin: 0; }
h3 { font-family: var(--titre); font-weight: 800; font-stretch: 85%; line-height: 1.12; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--moutarde); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
strong, b { font-weight: 650; }

/* Logo : pin-boussole + mot-symbole ; le prénom de l'auteur dans la lettre peinte du pays, comme une signature. */
.logo { display: inline-flex; align-items: center; gap: .3em; font-family: var(--titre); font-weight: 800; font-stretch: 100%; letter-spacing: -.025em; white-space: nowrap; color: var(--encre); text-decoration: none; text-transform: none; }
.logo__pin { width: .8em; height: 1em; flex: none; }
.logo__mot i { font-style: normal; font-weight: 400; }
.logo__mot b { font-family: var(--script); font-weight: 400; letter-spacing: 0; margin-left: .12em; }
.logo--clair { color: var(--encre); }

/* Pictos */
.picto { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; color: var(--destination); }

/* Pins numérotés */
.pin { display: inline-grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--moutarde); color: var(--encre); font: 700 .78em/1 var(--texte); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--papier); position: relative; z-index: 1; }
.pin--etape { background: var(--destination); color: #fff; }

/* Trous : visibles, sans crier */
.trou { display: inline-block; padding: .08em .5em; border: 1px dashed var(--destination); border-radius: 99px; color: var(--destination); font: 500 .74em/1.5 var(--texte); letter-spacing: .02em; vertical-align: .08em; }

/* Badges de couverture */
.badge { display: inline-flex; align-items: center; gap: .45em; padding: .45em .8em .45em .6em; border: 1.5px solid currentColor; border-radius: 99px; font: 600 .72em/1 var(--texte); letter-spacing: .04em; text-transform: uppercase; }
.badge .picto { color: inherit; }

/* Photos */
.photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: var(--sable); }
.photo--attente { display: grid; place-items: center; text-align: center; padding: 1em; box-sizing: border-box; border: 1px dashed var(--trait); background: repeating-linear-gradient(-45deg, var(--sable) 0 6px, var(--papier) 6px 12px); color: var(--encre-douce); font: 500 .72em/1.3 var(--texte); }

/* Titres de section : le pin pend sur la route */
.chapo { font-weight: 600; color: var(--encre-douce); }

/* Lieux */
.lieu { display: grid; grid-template-columns: 34% 1fr; gap: 1em; align-items: start; break-inside: avoid; }
.lieu h3 { display: flex; align-items: center; gap: .55em; font-size: 1.18em; font-weight: 600; }
.lieu h3 .pin { font-size: .62em; }
/* Le nom passe à la ligne plutôt que de pousser la page (« Musée de l’anthropologie » avec son icône, à 375 px). */
.lieu h3 > .picto { flex: none; }
.lieu h3 > span:last-child { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.lieu__infos { list-style: none; margin: .55em 0 0; padding: 0; display: grid; gap: .32em; font-size: .86em; line-height: 1.35; }
.lieu__infos li { display: flex; gap: .5em; align-items: baseline; }
.lieu__infos .picto { position: relative; top: .14em; }
.lieu__prix { font-weight: 650; }

/* Tracé : la route pointillée verticale qui relie les étapes */
.trace { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.1em; }
.trace::before { content: ''; position: absolute; left: 1.1em; top: .6em; bottom: .6em; width: 4px; margin-left: -2px; background: var(--pointille) center top / 4px 7px repeat-y; }
.trace__etape { position: relative; display: grid; grid-template-columns: 2.2em 1fr auto; gap: .9em; align-items: start; break-inside: avoid; }
.trace__etape > .pin { justify-self: center; font-size: .9em; margin-top: .1em; }
.trace__heure { justify-self: center; position: relative; z-index: 1; padding: .3em 0; background: var(--papier); font: 700 .78em/1 var(--texte); font-variant-numeric: tabular-nums; }
.trace__texte { min-width: 0; }
.trace__texte h3 { font-size: 1.05em; font-weight: 500; line-height: 1.25; }
.trace__texte ul { margin: .3em 0 0; padding-left: 1.1em; font-size: .86em; color: var(--encre-douce); }
.trace__jours { font: 650 .78em/1.2 var(--texte); text-transform: uppercase; letter-spacing: .06em; color: var(--destination); margin-bottom: .2em; }
.trace__jours small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--encre-douce); }
.trace__photo { width: 5.2em; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }

/* Bucket list */
.bucket__liste { list-style: none; padding: 0; margin: 0; }
.bucket__liste li { break-inside: avoid; }
.bucket__liste img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bucket__n { font-weight: 800; color: var(--destination); }
.bucket__texte { display: block; padding: .55em .2em .65em; text-align: center; font-family: var(--titre); font-weight: 800; font-size: .92em; line-height: 1.08; }

/* Infos pratiques */
.infos__bloc h3 { font: 650 .74em/1.2 var(--texte); text-transform: uppercase; letter-spacing: .08em; color: var(--destination); margin-bottom: .35em; }
.infos__bloc p { font-size: .9em; line-height: 1.45; }
.infos__bloc p + p { margin-top: .35em; }

/* Carte */
.carte svg { display: block; width: 100%; height: auto; }
.carte__pays { fill: var(--sable); stroke: var(--encre); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.carte__vol { fill: none; stroke: var(--destination); stroke-width: 2.4; stroke-dasharray: 1 9; stroke-linecap: round; }
.carte__route { fill: none; stroke: var(--moutarde); stroke-width: 1.4; stroke-dasharray: .1 3; stroke-linecap: round; }
.carte__cadre { fill: none; stroke: var(--destination); stroke-width: 1.5; stroke-dasharray: 5 4; }
.carte__etape circle { fill: var(--destination); stroke: var(--papier); stroke-width: 2; vector-effect: non-scaling-stroke; }
.carte__etape text { fill: #fff; font: 700 15px var(--texte); text-anchor: middle; }
.carte__zoom .carte__etape text { font-size: 5px; }
.carte__point { fill: var(--encre); }
.carte__nom { font: 900 34px var(--titre); font-stretch: 62%; text-transform: uppercase; fill: var(--encre); }
.carte__nomz { font: 800 7px var(--titre); font-stretch: 75%; fill: var(--encre); }
.carte__petit { font: 500 5px var(--texte); fill: var(--encre-douce); }
.carte__mer, .carte__merz { font: 400 22px var(--script); fill: var(--encre-douce); }
.carte__merz { font-size: 4.6px; }
.carte__region { font: 900 30px var(--titre); font-stretch: 62%; letter-spacing: .4em; fill: var(--encre-douce); }
/* Les rappels : les villes trop serrées pour être nommées sur place, en colonne, reliées à leur ville par un filet. */
.carte__rappel line { stroke: var(--encre); stroke-width: 1; vector-effect: non-scaling-stroke; }
.carte__rappel circle { fill: var(--destination); stroke: var(--papier); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.carte__nomr { font: 900 28px var(--titre); font-stretch: 62%; text-transform: uppercase; fill: var(--encre); }
.carte__baja { font: 400 24px var(--script); fill: var(--destination); }
.carte__legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; font-size: .86em; }
.carte__legende li { display: flex; align-items: center; gap: .6em; }
.carte__legende .pin { font-size: .8em; }

/* Plans Google Maps */
.gmaps__listes { display: grid; gap: .8em; }
.gmaps__liste { display: flex; align-items: center; gap: .9em; padding: .9em 1em; border: 1.5px solid var(--encre); border-radius: 6px; text-decoration: none; background: #fffdf9; }
.gmaps__pin { width: 1.8em; height: 2.25em; flex: none; }
.gmaps__liste b { display: block; font-family: var(--titre); font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: 1.2em; }
.gmaps__liste small { color: var(--encre-douce); font-size: .78em; word-break: break-all; }

/* Sommaire */
.sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.sommaire li a { display: flex; gap: .6em; text-decoration: none; padding: .3em 0; border-bottom: 1px solid var(--trait); }
.sommaire__partie a { font-family: var(--titre); font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: 1.5em; color: var(--destination); border-bottom: 0; padding-top: .7em; }
/* Titres du même niveau que les parties (bucket list, infos, lexique, itinéraire global, day-by-day) : ils gardent leur numéro de page. */
.sommaire__haut a { font-family: var(--titre); font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: 1.5em; color: var(--destination); padding-top: .7em; }

/* Bouton */
.bouton { display: inline-block; padding: .75em 1.4em; border-radius: 99px; background: var(--encre); color: var(--papier); font: 800 .95em/1 var(--texte); text-decoration: none; }
.bouton--inactif { background: var(--trait); color: var(--encre-douce); }

/* Mot de l'auteur */
.mot__portrait { width: 6.5em; height: 6.5em; border-radius: 50%; object-fit: cover; border: 3px solid var(--moutarde); }
.mot__titre { color: var(--destination); }
.mot p { line-height: 1.55; }
.mot__fin { font-weight: 800; font-size: 1.15em; }

/* Travel advisory */
.advisory__tete { display: flex; align-items: center; gap: 1.2em; }
.advisory__offre { display: grid; padding: .7em 1.2em; border-radius: 8px; background: var(--sable); }
.advisory__offre b { font-family: var(--titre); font-size: 1.6em; font-weight: 900; }
.advisory__signe { font-family: var(--script); font-size: 1.3em; }

/* Ressources */
.ressources__bloc ul { list-style: none; padding: 0; margin: .3em 0 0; display: flex; flex-wrap: wrap; gap: .35em .5em; font-size: .86em; }
.ressources__bloc h3 { font: 650 .74em/1.2 var(--texte); text-transform: uppercase; letter-spacing: .08em; color: var(--destination); }

/* Jours à venir */
.jours-vides__grille { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.jours-vides__grille li { display: grid; gap: .25em; align-content: start; padding: .6em .7em; border: 1px dashed var(--trait); border-radius: 4px; font-size: .82em; }
.jours-vides__grille b { font-family: var(--titre); font-size: 1.25em; font-weight: 900; font-stretch: 62%; text-transform: uppercase; }
.jours-vides__grille span { color: var(--encre-douce); }
.jour__surtitre { font: 800 .78em var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.jour h2 span, .jours-vides h2 span { font-family: var(--script); font-weight: 400; color: var(--destination); }

/* Route de couverture : les étapes reliées par le pointillé */
.couverture__route { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3em 0; font: 700 .78em/1 var(--texte); }
.couverture__route li { display: flex; align-items: center; gap: .4em; }
.couverture__route li + li::before { content: ''; width: 2.2em; height: 4px; margin: 0 .5em; background: var(--pointille) 0 50% / 7px 4px repeat-x; }
.couverture__route .pin { font-size: .9em; box-shadow: none; }
.logo--clair .logo__mot i { color: var(--encre); }

/* Lexique et saisons */
.lexique__liste { display: grid; gap: .5em; margin: .6em 0 0; }
.lexique__liste div { display: flex; gap: .8em; align-items: baseline; padding-bottom: .4em; border-bottom: 1px solid var(--trait); }
.lexique__liste dt { min-width: 4.5em; font-family: var(--titre); font-weight: 800; color: var(--destination); }
.lexique__liste dd { margin: 0; }
.saisons { width: 100%; margin-top: 1em; border-collapse: collapse; }
.saisons caption { text-align: left; font-weight: 700; padding-bottom: .4em; }
.saisons th, .saisons td { text-align: left; padding: .35em .5em .35em 0; border-bottom: 1px solid var(--trait); vertical-align: top; }