/* ------------------------------------------------------------------ *
 * Rōma no kōka — feuille de style unique
 * Thème « parchemin » clair, variante sombre automatique.
 * ------------------------------------------------------------------ */

:root {
  --fond: #f4ecd8;
  --fond-motif: #ece0c4;
  --carte-fond: #fbf6ea;
  --encre: #2f2418;
  --encre-douce: #6b5a45;
  --trait: #d9c9a3;
  --accent: #8c2f24;
  --accent-clair: #b8452f;
  --or: #a3812a;
  --ombre: 0 1px 2px rgba(47, 36, 24, .08), 0 8px 24px rgba(47, 36, 24, .07);
  --rayon: 10px;
  /* Crimson Pro n'a pas de glyphes japonais : BIZ UDPGothic prend le relais
     pour eux seuls (voir assets/vendor/fonts/biz-udpgothic.css). */
  --serif: "Crimson Pro", "BIZ UDPGothic", "Iowan Old Style",
           "Palatino Linotype", Georgia, serif;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sepia: sepia(.45) saturate(.75) contrast(.95) brightness(1.03);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14110d;
    --fond-motif: #1b1712;
    --carte-fond: #1e1a14;
    --encre: #ece3d2;
    --encre-douce: #b3a48c;
    --trait: #3a3227;
    --accent: #d4705c;
    --accent-clair: #e08a71;
    --or: #d2ad5a;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --sepia: sepia(.5) saturate(.6) contrast(.9) brightness(.72) invert(.04);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--fond);
  background-image:
    radial-gradient(circle at 20% 0%, var(--fond-motif) 0%, transparent 55%),
    radial-gradient(circle at 90% 30%, var(--fond-motif) 0%, transparent 45%);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }

a { color: var(--accent); }
a:hover { color: var(--accent-clair); }

.contenant { width: min(1100px, 100% - 2.5rem); margin-inline: auto; }

.lien-evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 1000;
}
.lien-evitement:focus { left: .5rem; top: .5rem; }

/* ---------------------------- En-tête ----------------------------- */
.bandeau {
  padding: 1.7rem 0 1.2rem;
  text-align: center;
  border-bottom: 1px solid var(--trait);
  background: linear-gradient(180deg, transparent, rgba(163, 129, 42, .06));
}
.bandeau h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bandeau h1 .fleche { color: var(--or); font-style: normal; }
/* Sous-titre japonais. Aucune police n'est embarquée pour le japonais :
   on demande un mincho (serif) du système, puis la serif par défaut. */
.bandeau .sous-titre {
  /* Négatif : le <h1> a une interligne de 1,2, qui laisse sous sa ligne de
     base un vide d'environ .5rem. On en reprend une partie pour que le
     sous-titre se lise comme une seconde ligne du titre. */
  margin: -.2rem 0 0;
  color: var(--or);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(.8rem, 1.5vw, 1rem);
  letter-spacing: .18em;
}
/* Les quatre monnaies de Katsuren. Le fichier est détouré (PNG en RVB+alpha,
   fond entièrement transparent) : les pièces se posent donc directement sur le
   parchemin, sans cartouche ni rectangle noir. */
.bandeau .pieces {
  display: block;
  width: min(100%, 24rem);
  height: auto;
  margin: .4rem auto 1.5rem;
}
.bandeau .accroche {
  margin: .6rem auto 0;
  max-width: 80ch;
  color: var(--encre-douce);
  font-family: var(--serif);
  font-size: 1.05rem;
}
.bandeau .filet {
  width: 160px; height: 1px; margin: .9rem auto 0;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}

/* ----------------------------- Carte ------------------------------ */
.section { padding: 1.6rem 0 2.2rem; }
.section-carte { padding: 0; }
.section > h2 {
  font-size: 1.5rem; margin: 0 0 .2rem;
  display: flex; align-items: baseline; gap: .6rem;
}
.section > h2::after {
  content: ""; flex: 1; height: 1px; background: var(--trait);
}
.section .intro { margin: 0 0 1.2rem; color: var(--encre-douce); }

/* Pleine largeur : le cadre sort de .contenant, seules les bordures
   horizontales subsistent. */
.carte-image {
  display: block;
  width: 100%;
  height: auto;
}
/* Sur la page d'accueil, la carte coiffe le bandeau : elle est collée au bord
   haut de la page, d'où l'absence de marge en haut et des coins arrondis
   réservés aux deux angles bas. Sa largeur est exactement celle de la colonne
   de texte (--largeur-texte), qui se mesure dans le même contexte de police
   que le bandeau : les `ch` y valent donc la même chose de part et d'autre. */
.section-carte .carte-image {
  width: var(--largeur-texte);
  height: auto;
  margin: 0 0 clamp(1rem, 2.5vw, 2rem);
  border-radius: 0 0 5px 5px;
}

/* Une seule colonne, centrée : la carte, puis le titre et le texte sous elle.
   Réservé à .section-carte, c'est-à-dire à la page d'accueil et à son image :
   les cartes Leaflet d'index-4e.html gardent toute la largeur du cadre. */
.section-carte .cadre-carte {
  display: grid;
  justify-items: center;
  /* Largeur commune à la carte et à la colonne de texte. 80ch est la mesure
     de lecture retenue ; la gouttière de 2,5rem est celle de .contenant, pour
     que l'en-tête s'aligne sur le reste de la page sur les petits écrans. */
  --largeur-texte: min(100% - 2.5rem, 80ch);
  /* Pas de gouttière ni de rembourrage sur le cadre : l'aération vient du
     rembourrage de la colonne de texte et de la marge de l'image. */
  gap: 0;
  padding: 0;
  /* Le cadre ne se détache plus du reste de la page : pas de filet, pas
     d'ombre, pas de fond propre — la page garde partout le même fond. */
  border-block: 0;
  box-shadow: none;
  background: none;
}

/* Le bandeau du site perd le filet et le dégradé qui ne valaient que sur
   toute la largeur de la page. Rembourrage horizontal nul : sa largeur est
   déjà celle de la carte, et le texte doit s'aligner sur elle au pixel. */
.section-carte .bandeau {
  width: var(--largeur-texte);
  padding: 0 0 clamp(.7rem, 1.6vw, 1.4rem);
  border-bottom: 0;
  background: none;
}
/* Le texte est déjà borné par la largeur du bandeau. */
.section-carte .bandeau .accroche { max-width: 100%; }
.carte-legende { margin-top: 1.4rem; font-family: var(--serif); }
.carte-legende h2 { margin: 0 0 .5rem; font-size: 1.2rem; font-family: inherit; color: var(--encre-douce); }
.carte-legende .intro { margin: 0; font-size: clamp(.8rem, 1.6vw, 1rem); }

.cadre-carte {
  position: relative;
  border-block: 1px solid var(--trait);
  box-shadow: var(--ombre);
  overflow: hidden;
  background: var(--carte-fond);
}

/* 3,054 = rapport largeur/hauteur de l'emprise « Empire romain → Japon »
   en projection Web Mercator. En calant le cadre sur ce rapport, la carte
   affiche exactement l'emprise voulue, sans marge perdue, au zoom le plus
   élevé que la largeur de l'écran autorise. */
#carte,
#carte-empires {
  width: 100%;
  aspect-ratio: 3.054;
  height: auto;
  min-height: 280px;
  max-height: min(60vh, 620px);   /* ne mange jamais plus de 60 % de l'écran */
  background: var(--carte-fond);
}
/* index-4e.html : l'itinéraire du IVe siècle est maritime et descend jusqu'à
   l'isthme de Kra, par 9° de latitude nord. Son cadrage s'ouvre donc vers le
   sud (bornes dans assets/js/config-4e.js) et le cadre est d'autant plus haut.
   2,496 = rapport largeur/hauteur de ces bornes en projection Web Mercator ;
   les deux valeurs doivent rester accordées. */
.page-4e #carte,
.page-4e #carte-empires { aspect-ratio: 2.496; max-height: min(74vh, 780px); }

.tuiles-parchemin { filter: var(--sepia); }
.tuiles-relief { filter: var(--sepia); mix-blend-mode: multiply; }

/* DARE est opaque : là où l'atlas n'a pas de données, ses tuiles sont d'un
   crème uni qui masquait le relief par grands rectangles. En mode « multiply »,
   le crème (quasi blanc) laisse passer le fond intact et seuls les tracés et
   les noms antiques se déposent par-dessus : plus aucune jointure visible. */
.tuiles-dare {
  mix-blend-mode: darken;   /* ne garde que ce qui est plus sombre que le fond */
  filter: saturate(.85) contrast(.95);
}
@media (prefers-color-scheme: dark) {
  /* En sombre, « multiply » assombrirait tout : on repasse en couche opaque
     teintée, la carte antique devient alors le fond principal. */
  .tuiles-dare { mix-blend-mode: normal; filter: sepia(.4) saturate(.6) brightness(.74); }
}

.barre-carte {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .6rem max(1.25rem, calc((100% - 1100px) / 2));
  border-top: 1px solid var(--trait);
  background: rgba(163, 129, 42, .06);
}
.barre-carte .legende-titre {
  font-family: var(--serif); font-size: .95rem; color: var(--encre-douce);
  margin-right: auto;
}

button {
  font: inherit;
  cursor: pointer;
  color: var(--encre);
  background: var(--carte-fond);
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: .35rem .9rem;
  transition: background .15s, border-color .15s, transform .1s;
}
button:hover { border-color: var(--or); background: rgba(163, 129, 42, .12); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sommaire {
  display: flex; gap: .4rem; overflow-x: auto;
  padding: .7rem max(1.25rem, calc((100% - 1100px) / 2));
  border-top: 1px solid var(--trait);
  scrollbar-width: thin;
}
.puce-etape { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-size: .9rem; }
.puce-numero {
  display: inline-grid; place-items: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--accent); color: #fdf6e7; font-size: .78rem; font-weight: 700;
}

.avertissement-carte code {
  background: rgba(140, 47, 36, .1); padding: .05rem .3rem; border-radius: 3px;
}
.avertissement-carte {
  margin: .8rem 0 0; padding: .7rem .9rem;
  border-left: 3px solid var(--accent); background: rgba(140, 47, 36, .08);
  border-radius: 4px;
}

/* Éléments Leaflet personnalisés */
.jalon-pastille {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fdf6e7;
  border: 2px solid var(--accent);
  color: var(--accent);
  font: 700 12px/1 var(--serif);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.jalon:hover .jalon-pastille { background: var(--accent); color: #fdf6e7; }

.etiquette-empire span,
.etiquette-mer span {
  position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none;
  font-family: var(--serif);
  text-shadow: 0 0 4px var(--carte-fond), 0 0 8px var(--carte-fond);
}
.etiquette-empire span {
  font-size: .95rem; font-variant: small-caps; letter-spacing: .12em; font-weight: 600;
}
.etiquette-mer span {
  font-size: .8rem; font-style: italic; letter-spacing: .18em; color: #4a6a7a;
  text-transform: uppercase;
}

/* Noms de pays et de peuples de l'Asie orientale : ils tiennent le rôle que
   les tuiles DARE jouent côté romain, là où aucun atlas n'existe. */
.etiquette-japon span {
  position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none;
  font-family: var(--serif); font-size: .9rem; font-variant: small-caps;
  letter-spacing: .1em; color: #1a4b51;
  text-shadow: 0 0 4px var(--carte-fond), 0 0 8px var(--carte-fond);
}
.leaflet-marker-icon.etiquette-japon { width: auto !important; height: auto !important; }

.sans-etiquettes .etiquette-empire,
.sans-etiquettes .etiquette-mer { display: none; }

/* Les sites japonais se dévoilent en deux temps, site par site : le point à
   son « zoom_min », son nom à son « zoom_nom » (voir data/japon.geojson). */
.site-japon.sans-nom .site-nom { display: none; }
.site-japon { display: flex; align-items: center; }
.site-pastille {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: #1f5f66; border: 2px solid #fdf6e7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.site-nom {
  margin-left: .35rem; white-space: nowrap;
  font-family: var(--serif); font-size: .8rem; color: #1a4b51;
  text-shadow: 0 0 4px var(--carte-fond), 0 0 8px var(--carte-fond);
}
.leaflet-marker-icon.site-japon { width: auto !important; }

.leaflet-container { font-family: var(--serif); background: var(--carte-fond); }

/* Jointures de tuiles : un liseré clair apparaît entre les colonnes et les
   lignes de tuiles. La carte s'ouvre à un zoom fractionnaire (zoomSnap vaut
   0,25, pour caler l'emprise au plus juste dans un bandeau peu haut) : Leaflet
   place donc les tuiles à des coordonnées non entières, et l'arrondi du
   navigateur laisse par endroits un pixel de vide où l'on voit le fond du
   cadre — #fbf6ea, d'où le blanc.

   Le remède tient en DEUX règles, et la seconde est indispensable :

   1. chaque tuile mord d'un pixel sur sa voisine, ce qui comble le vide ;
   2. les tuiles se recouvrent en composition « normale ».

   Sans la règle 2, le remède est pire que le mal : leaflet.css compose les
   tuiles en `mix-blend-mode: plus-lighter` (contournement d'un bug Chromium sur
   le fondu des tuiles). Ce mode ADDITIONNE les couleurs, si bien que le pixel
   de recouvrement devient plus clair que ses deux voisins — on remplace un
   liseré occasionnel par un quadrillage blanc sur toute la carte.

   La couche DARE n'est pas concernée : son mélange « darken » s'applique à son
   conteneur, pas à ses images, et il ne retient que le plus sombre. */
.leaflet-container img.leaflet-tile {
  mix-blend-mode: normal;
}
.leaflet-container .leaflet-tile {
  width: 257px !important;
  height: 257px !important;
}
.leaflet-popup-content-wrapper {
  background: var(--carte-fond); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--rayon);
}
.leaflet-popup-tip { background: var(--carte-fond); }
.leaflet-popup-content { margin: .9rem 1rem; }
.popup-etape h3 { margin: .1rem 0 .1rem; font-size: 1.25rem; color: var(--accent); }
.popup-numero {
  margin: 0; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--or);
}
.popup-moderne { margin: 0; font-size: .9rem; color: var(--encre-douce); }
.popup-periode {
  margin: .2rem 0 .6rem; font-size: .82rem; font-style: italic; color: var(--encre-douce);
}
.popup-etape p { margin: .5rem 0; }
.popup-anecdote {
  border-left: 3px solid var(--or); padding-left: .7rem;
  font-size: .9rem; color: var(--encre-douce);
}
.leaflet-control-layers, .info-bulle {
  background: var(--carte-fond) !important; color: var(--encre) !important;
  border: 1px solid var(--trait) !important; border-radius: 8px !important;
}
.leaflet-control-attribution { background: rgba(253, 246, 231, .8) !important; }
/* Le crédit GSI est en japonais (国土地理院) : Leaflet ne propose que des
   polices latines, on ajoute la nôtre en dernier recours. */
.leaflet-control-attribution {
  font-family: "Helvetica Neue", Arial, Helvetica, "BIZ UDPGothic", sans-serif;
}
@media (prefers-color-scheme: dark) {
  .leaflet-control-attribution { background: rgba(20, 17, 13, .8) !important; }
  .leaflet-control-attribution a { color: var(--accent-clair) !important; }
}

/* --------------------- Programme (fenêtre modale) ------------------ */
/* <dialog> est centré et mis au premier plan par le navigateur ; on ne
   redéfinit ici que l'apparence, la hauteur maximale et le défilement.
   `flex` + `overflow: hidden` : c'est le corps qui défile, pas la fenêtre,
   sans quoi la croix de fermeture disparaîtrait vers le haut. */
.modale {
  position: relative;
  width: min(52rem, calc(100% - 2rem));
  max-height: min(84vh, 52rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: 4px;
  background: var(--carte-fond);
  color: var(--encre);
  box-shadow: var(--ombre);
}
/* `display` UNIQUEMENT sur [open]. Le navigateur cache une fenêtre fermée
   avec `dialog:not([open]) { display: none }`, mais cette règle vient de sa
   feuille à lui : n'importe quelle déclaration `display` de l'auteur la bat,
   quelle que soit la spécificité, parce qu'elle appartient à une origine
   prioritaire. Un `display: flex` posé sur `.modale` affichait donc le
   programme en clair au milieu de la page. */
.modale[open] {
  display: flex;
  flex-direction: column;
}
.modale::backdrop { background: rgba(31, 24, 15, .55); }

/* La barre de défilement native de Windows - large, avec ses deux flèches -
   jurait avec le reste. `scrollbar-width`/`scrollbar-color` sont la propriété
   standard (Firefox, Chrome 121+) ; les règles ::-webkit- qui suivent couvrent
   les versions antérieures de Chrome, Edge et Safari. */
.modale-corps {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  scrollbar-width: thin;
  scrollbar-color: var(--trait) transparent;
}
.modale-corps::-webkit-scrollbar { width: 8px; }
.modale-corps::-webkit-scrollbar-track { background: transparent; }
.modale-corps::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 4px;
  background: var(--trait);
  background-clip: content-box;
}
.modale-corps::-webkit-scrollbar-thumb:hover { background: var(--encre-douce); background-clip: content-box; }

.modale h2 { margin: 0 2.4rem 0 0; font-size: 1.5rem; }
.modale .modale-chapo { margin: .3rem 0 1.4rem; color: var(--encre-douce); }
.modale h3 {
  margin: 1.6rem 0 .5rem;
  font-size: 1.1rem;
  color: var(--accent);
}

/* Le bouton de fermeture est dans un <form method="dialog"> : le navigateur
   ferme la fenêtre à la soumission, sans une ligne de script. Posé en absolu
   sur la fenêtre et non dans le flux du texte, il reste au même endroit
   pendant que le programme défile. */
.modale-fermer {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 1;
  margin: 0;
}
/* Pas de cercle : la croix seule. On garde une boîte de 2,1 rem malgré tout,
   pour que la zone cliquable reste confortable au doigt. */
.modale-fermer button {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre-douce);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease;
}
.modale-fermer button:hover { color: var(--accent); background: none; }
.modale-fermer button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.modale .pratique { margin: 0; }
.modale .pratique dt {
  font-variant: small-caps; letter-spacing: .04em;
  color: var(--accent); margin-top: .7rem;
}
.modale .pratique dd { margin: .1rem 0 0; }

/* Les trois journées sont une liste ordonnée : leur suite est le propos même
   du programme. Les numéros natifs sont masqués, le titre porte déjà
   « Jour 1 », « Jour 2 »… */
.modale .programme { list-style: none; margin: 0; padding: 0; }
.modale .programme > li { border-top: 1px solid var(--trait); }
/* Le numéro du jour et la date ouvrent la journée, sur une ligne secondaire ;
   le thème vient ensuite, en titre. */
.modale .programme .date {
  display: block; margin-bottom: .1rem;
  font-size: .85rem; font-weight: 400;
  color: var(--encre-douce); letter-spacing: 0;
}
.modale .programme .theme { display: block; color: var(--encre); }
.modale .programme .jour {
  font-variant: small-caps; letter-spacing: .06em;
  color: var(--accent);
}
.modale .programme ul { margin: 0; padding-left: 1.1rem; }
.modale .programme ul li { margin: .35rem 0; }
.modale .programme strong { color: var(--encre); }
.modale .programme em { color: var(--encre-douce); }

/* ----------------------------- Blog ------------------------------- */
.filtre-actif[hidden], .statut[hidden] { display: none; }
.filtre-actif {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin-bottom: 1rem; padding: .6rem .9rem;
  border: 1px dashed var(--or); border-radius: var(--rayon);
  background: rgba(163, 129, 42, .08);
}
.filtre-actif p { margin: 0; margin-right: auto; }

.statut {
  padding: 1rem 1.1rem; border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--carte-fond);
}
.statut p { margin: 0 0 .4rem; }
.statut-erreur { border-color: var(--accent); }

.publications { display: grid; gap: 1.2rem; }

.publication {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--carte-fond);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.publication[hidden] { display: none; }

.publication-entete {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 1rem; border-bottom: 1px solid var(--trait);
}
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.identite { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.identite .nom { font-family: var(--serif); font-weight: 600; }
.identite .pseudo { font-size: .82rem; color: var(--encre-douce); text-decoration: none; }
.identite .partage { font-size: .78rem; color: var(--or); }
.publication-entete .date {
  margin-left: auto; font-size: .78rem; color: var(--encre-douce); text-align: right;
}

.publication-corps { padding: .9rem 1rem; }
.contenu p { margin: 0 0 .7rem; }
.contenu p:last-child { margin-bottom: 0; }
/* Mastodon découpe les URL en trois morceaux : le protocole, un fragment
   lisible marqué « ellipsis », puis la fin. Son interface masque le premier et
   le dernier et ajoute des points de suspension. Ici on ne masque que le
   premier - le `https://www.`, qui n'apprend rien - et on affiche la fin :
   l'adresse reste lisible en entier, sans troncature.
   `:first-child` est ce qui distingue les deux : même classe, rôles inverses. */
.contenu a > .invisible:first-child { display: none; }
.contenu a { text-decoration-thickness: 1px; text-underline-offset: 2px; word-break: break-word; }
.contenu .hashtag { font-weight: 600; }

.avertissement summary {
  cursor: pointer; font-weight: 600; color: var(--accent);
  padding: .5rem .7rem; border: 1px solid var(--trait); border-radius: 6px;
  background: rgba(140, 47, 36, .06);
}
.avertissement[open] summary { margin-bottom: .8rem; }

.medias { display: grid; gap: .4rem; margin-top: .8rem; }
.medias img, .medias video { width: 100%; height: 100%; max-height: 340px; object-fit: cover; border-radius: 5px; display: block; }
/* Pièce jointe unique : elle s'affiche entière, pour qu'on puisse lire le
   document sans ouvrir le pouet. `contain` empêche l'écrasement si le
   plafond de hauteur s'applique. */
.medias-1 img, .medias-1 video {
  /* Largeur naturelle plutôt que 100 % : le cadre épouse l'image, sinon
     l'arrondi tombe sur des bandes vides quand le plafond s'applique. */
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  height: auto;
  max-height: min(80vh, 44rem);
  object-fit: contain;
}
/* Galeries de deux à quatre images : rien n'est rogné. Chaque image garde
   ses proportions, et les deux colonnes (CSS columns plutôt que grille)
   s'empilent chacune à leur hauteur, sans cases vides entre un portrait et
   un paysage. */
.medias-2, .medias-3, .medias-4 { display: block; columns: 2; column-gap: .4rem; }
.medias-2 > *, .medias-3 > *, .medias-4 > * {
  display: block;
  break-inside: avoid;
  margin-bottom: .4rem;
}
.medias-2 img, .medias-3 img, .medias-4 img,
.medias-2 video, .medias-3 video, .medias-4 video {
  height: auto;
  max-height: none;
  object-fit: fill;
}
/* Quatre images : mosaïque carrée (classes posées par publications.js).
   La première prend les deux tiers, les trois autres se partagent le
   reste ; ici les vignettes sont rognées, la visionneuse les montre
   entières. */
.medias-4.carre {
  display: grid;
  columns: auto;
  aspect-ratio: 1;
  gap: .4rem;
}
.carre-portrait { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
.carre-portrait > :first-child { grid-row: 1 / -1; }
.carre-paysage { grid-template-rows: 2fr 1fr; grid-template-columns: repeat(3, 1fr); }
.carre-paysage > :first-child { grid-column: 1 / -1; }
.medias-4.carre > * { margin-bottom: 0; min-width: 0; min-height: 0; }
.medias-4.carre img, .medias-4.carre video {
  height: 100%;
  object-fit: cover;
}
.medias audio { width: 100%; }
.medias a { cursor: zoom-in; }

/* Visionneuse (assets/js/visionneuse.js) : une photo en grand sur fond
   sombre, les flèches pour passer aux autres photos du pouet. Comme pour
   .modale, `display` n'est posé que sur [open]. */
.visionneuse {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: none;
  color: #f4ecd8;
}
.visionneuse[open] { display: block; }
.visionneuse::backdrop { background: rgba(15, 12, 8, .92); }
.visionneuse-scene {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 3.2rem 4rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .7rem;
}
.visionneuse-scene img {
  min-height: 0;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 5px;
}
.visionneuse-scene figcaption {
  max-width: 50rem;
  font-size: .95rem; text-align: center;
  color: #d9c9a3;
}
.visionneuse button {
  position: absolute;
  display: grid; place-items: center;
  width: 2.8rem; height: 2.8rem;
  padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #f4ecd8;
  font-size: 1.1rem;
  cursor: pointer;
}
.visionneuse button:hover { background: rgba(0, 0, 0, .7); border: 0; }
.visionneuse button:focus-visible { outline: 2px solid #f4ecd8; outline-offset: 2px; }
.visionneuse button[hidden] { display: none; }
.visionneuse-fermer { top: .8rem; right: .8rem; }
.visionneuse-precedent { left: .8rem; top: 50%; margin-top: -1.4rem; }
.visionneuse-suivant { right: .8rem; top: 50%; margin-top: -1.4rem; }
.visionneuse-compteur {
  position: absolute; top: 1.4rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans); font-size: .85rem;
  color: #d9c9a3;
}
/* Sur téléphone, les flèches passent en bas : la photo garde toute la
   largeur, et on la fait défiler au doigt de toute façon. */
@media (max-width: 600px) {
  .visionneuse-scene { padding: 3.2rem .8rem 4.6rem; }
  .visionneuse-precedent, .visionneuse-suivant { top: auto; bottom: 1rem; margin-top: 0; }
  .visionneuse-precedent { left: calc(50% - 3.4rem); }
  .visionneuse-suivant { right: calc(50% - 3.4rem); }
}

.sondage { margin-top: .8rem; font-size: .9rem; }
.sondage-ligne { display: grid; grid-template-columns: 1fr 90px 45px; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.sondage-jauge { background: var(--trait); border-radius: 999px; height: .5rem; overflow: hidden; }
.sondage-jauge i { display: block; height: 100%; background: var(--or); }
.sondage-pied { margin: .3rem 0 0; color: var(--encre-douce); font-size: .8rem; }

.publication-pied {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .6rem 1rem; border-top: 1px solid var(--trait);
  background: rgba(163, 129, 42, .05);
  font-size: .85rem;
}
.publication-pied .compteurs { color: var(--encre-douce); margin-left: auto; }
.compteurs { display: inline-flex; align-items: center; gap: 1rem; }
.compteur { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.publication-pied i { color: #aaa; }
.publication-pied .source { display: inline-flex; align-items: center; gap: .3rem; margin-left: .25rem; text-decoration: none; }
.bouton-lien {
  font-size: .82rem; padding: .25rem .7rem;
  border-color: var(--or); background: transparent;
}
/* Une commande présentée comme un lien. C'est bien un <button> et non un <a> :
   l'élément déclenche une action dans la page, il ne mène nulle part - et un
   <a> sans href n'est ni focalisable au clavier ni annoncé comme actionnable.
   Seule l'apparence change. */
.lien-bouton {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .15em;
  cursor: pointer;
}
/* La règle générique `button:hover` pose un fond beige : il faut l'annuler
   explicitement ici, sans quoi le lien s'allumerait comme un bouton. */
.lien-bouton:hover { color: var(--accent-clair); background: none; }
.lien-bouton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.intro .lien-bouton { margin-left: .2rem; }

/* ------------------- Galerie du séjour (galerie.js) ------------------ */
.galerie {
  margin: 0 0 1.6rem;
  padding: .8rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--carte-fond);
  box-shadow: var(--ombre);
}
.galerie[hidden] { display: none; }

/* Toutes les vignettes en grille, du début à la fin du séjour. Un clic ouvre
   la photo en grand dans la visionneuse : la vignette est un lien, le reste
   est l'affaire de assets/js/visionneuse.js. */
.galerie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .4rem;
  margin: 0; padding: 0; list-style: none;
}
.galerie-vignette {
  display: block; aspect-ratio: 1;
  border: 2px solid transparent; border-radius: 6px;
  overflow: hidden; background: var(--fond-motif);
  cursor: zoom-in;
  transition: border-color .15s, transform .15s;
}
.galerie-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-vignette:hover, .galerie-vignette:focus-visible {
  border-color: var(--accent); transform: scale(1.04);
}
.galerie-vignette:focus-visible { outline: none; }

.galerie-carte {
  height: clamp(220px, 34vw, 320px);
  margin: 0 0 .8rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
}
.repere-photo {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  letter-spacing: .02em;
  color: #fdf6e7; background: var(--accent);
  border: 2px solid #fdf6e7; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

@media (max-width: 600px) {
  .galerie { padding: .5rem; }
  .galerie-carte { margin-bottom: .5rem; }
  .galerie-grille { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .3rem; }
}

/* ----------------------------- Pied ------------------------------- */
.pied {
  margin-top: 2rem; padding: 1.6rem 0 2.4rem;
  border-top: 1px solid var(--trait);
  color: var(--encre-douce); font-size: .85rem;
}
.pied p { margin: .3rem 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}