/* =========================================================
   Chapitre II — Les découvertes : l'atlas (carte sur la double page)
   Complète chapitre.css. Les sections ne contiennent qu'un cartouche
   posé sur la carte, qui reste affichée d'une section à l'autre.
   ========================================================= */

.atlas-livre { --police-carte: "Cormorant Garamond", Georgia, serif; }

/* --- la double page sert de fond à la carte --- */
.atlas { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.atlas .page { padding: 0; }
.atlas::after {                       /* pli central, par-dessus la carte */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 2;
  width: calc(36 * var(--u)); transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(60,40,15,.10) 42%, rgba(60,40,15,.20) 50%, rgba(60,40,15,.10) 58%, transparent);
}

.carte-cadre {
  position: absolute; z-index: 1;
  inset: calc(22 * var(--u)) calc(24 * var(--u));
  border: calc(1.2 * var(--u)) solid #7a5a1c;
  outline: calc(1 * var(--u)) solid rgba(122,90,28,.5);
  outline-offset: calc(4 * var(--u));
  overflow: hidden;
  background: rgba(196, 210, 200, .16);     /* la mer : un voile à peine bleuté sur le papier */
}
.carte-vue { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.carte-vue.glisse { cursor: grabbing; }
.carte-vue svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.carte-vue text { pointer-events: none; }

/* calques de la carte */
#fond path[stroke] { vector-effect: non-scaling-stroke; stroke-width: .6px; }
#grille path[stroke] { vector-effect: non-scaling-stroke; stroke-width: .7px; stroke-opacity: .65; }
#grille text { fill-opacity: .7; }
#tissot path { fill: #fffdf6; fill-opacity: .55; }
#vents path.ligne { fill: none; stroke: #8f8a80; stroke-opacity: .55; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: .9px; }
#vents path.fleche { fill: #9a958b; fill-opacity: .7; }
#vents { transition: opacity .3s; }
#vents.cache { opacity: 0; }
#musulmans { opacity: 0; transition: opacity .35s; pointer-events: none; }
#musulmans.visible { opacity: .85; }
.calque-section { display: none; }
.calque-section.visible { display: inline; }
#dias-aller, #dias-retour { transition: opacity .3s; }
#s-dias.mode-aller #dias-retour, #s-dias.mode-retour #dias-aller { opacity: .22; }

/* points cliquables (dessinés par decouvertes.js) */
/* tracés des voyages : trait épais à largeur constante, liseré clair dessous */
.calque-section path.route { vector-effect: non-scaling-stroke; stroke-width: 3.2px; }
.calque-section path.route-halo { vector-effect: non-scaling-stroke; stroke: #f8f1e1 !important; stroke-width: 7px; stroke-opacity: .85; }

/* points des étapes (dessinés par decouvertes.js) : ils pulsent pour attirer l'œil */
#points circle { cursor: pointer; }
#points .point { fill: #2b2116; stroke: #fbf6ea; }
#points .point.retour { fill: #b3261e; }
#points .point.annexe { fill: #c27a1a; }
#points g:hover .point { fill: #7a5a1c; }
#points .onde {                       /* autres étapes : onde faible et lente */
  fill: none; stroke: #2b2116; pointer-events: none;
  transform-box: fill-box; transform-origin: center;
  animation: onde-faible 2.6s ease-out infinite;
}
#points .retour-onde { stroke: #b3261e; }
#points .annexe-onde { stroke: #c27a1a; }
@keyframes onde-faible { from { transform: scale(1); opacity: .35; } to { transform: scale(1.9); opacity: 0; } }
#points .actif .point { fill: #d6b46c; stroke: #2b2116; }
#points .actif .onde, #points .actif .onde2 {   /* étape en cours : onde forte, double */
  stroke: #b8862b; animation: onde-forte 1.3s ease-out infinite;
}
#points .onde2 { display: none; fill: none; pointer-events: none; transform-box: fill-box; transform-origin: center; }
#points .actif .onde2 { display: inline; animation-delay: .65s; }
@keyframes onde-forte { from { transform: scale(1); opacity: 1; } to { transform: scale(3.6); opacity: 0; } }
#points .halo { fill: none; stroke: #d6b46c; pointer-events: none; opacity: 0; }
#points .actif .halo { opacity: 1; }
/* étapes de Magellan : points rouges clignotants */
#points .clignote { fill: #d22b1f; stroke: #fbf6ea; pointer-events: none; animation: clignote .8s ease-in-out infinite alternate; }
#points .clignote-onde { fill: none; stroke: #d22b1f; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: onde 1.4s ease-out infinite; }
@keyframes clignote { from { opacity: .35; } to { opacity: 1; } }

/* villes (section 01) */
#villes .ville { fill: #7a1f14; stroke: #fbf6ea; }
#villes text { font-family: var(--police-carte); font-style: italic; font-weight: 600; fill: #3b2a14; paint-order: stroke; stroke: #f5ecd8; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { #points .onde, #points .onde2, #points .clignote-onde, #points .clignote { animation: none; } }

/* --- coordonnées et outils, sur la carte --- */
.coordonnees {
  position: absolute; z-index: 3; top: calc(10 * var(--u)); left: 50%; transform: translateX(-50%);
  margin: 0; display: flex; gap: calc(18 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  font-family: var(--serif); font-size: calc(16 * var(--u)); font-variant-numeric: tabular-nums;
  color: var(--encre); background: rgba(243,234,214,.88);
  border: 1px solid rgba(122,90,28,.45); border-radius: calc(3 * var(--u));
  pointer-events: none;
}
.coordonnees span { min-width: 8.2em; }

.outils-carte {
  position: absolute; z-index: 3; bottom: calc(10 * var(--u)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(14 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  font-family: var(--serif); font-size: calc(15.5 * var(--u)); color: var(--encre);
  background: rgba(243,234,214,.92);
  border: 1px solid rgba(122,90,28,.45); border-radius: calc(3 * var(--u));
  white-space: nowrap;
}
.outils-carte button {
  font: inherit; color: var(--encre); cursor: pointer;
  background: transparent; border: 1px solid rgba(122,90,28,.55); border-radius: calc(3 * var(--u));
  min-height: calc(28 * var(--u)); padding: 0 calc(9 * var(--u));
}
.outils-carte button:hover { background: rgba(214,180,108,.3); }
.outils-carte button:focus-visible, .outils-carte input:focus-visible { outline: 2px solid #7a5a1c; outline-offset: 2px; }
.outils-carte .zoom { display: flex; gap: calc(4 * var(--u)); }
.outils-carte .zoom button { width: calc(28 * var(--u)); padding: 0; font-size: calc(19 * var(--u)); line-height: 1; }
.vents-reglage { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.vents-afficher { display: flex; align-items: center; gap: calc(4 * var(--u)); cursor: pointer; margin-right: calc(4 * var(--u)); }
.vents-afficher input { accent-color: #7d786e; }
.vents-reglage .mois { font-style: italic; color: var(--encre-douce); }
.vents-mois { width: calc(130 * var(--u)); accent-color: #7d786e; }
.vents-reglage.inactif .mois, .vents-reglage.inactif .vents-mois { opacity: .35; }
.bascule-empires[aria-pressed="true"] { background: #4f7a45; border-color: #4f7a45; color: #fff; }

.note-empires {
  position: absolute; z-index: 3; bottom: calc(56 * var(--u)); right: calc(14 * var(--u));
  max-width: calc(240 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  font-family: var(--serif); font-style: italic; font-size: calc(15 * var(--u)); color: var(--encre);
  background: rgba(243,234,214,.94); border: 1px solid #4f7a45; border-left-width: calc(4 * var(--u));
}
.note-empires p { margin: 0; }
.note-empires p + p { margin-top: calc(4 * var(--u)); font-style: normal; }
.note-empires a { color: #2f5a29; }

/* --- les sections ne sont plus des doubles pages : juste un cartouche --- */
.atlas-livre > .section { display: block; pointer-events: none; z-index: 4; }
.atlas-livre > .section[hidden] { display: none; }
.atlas-livre > .section::after { display: none; }

.cartouche {
  position: absolute; pointer-events: auto;
  top: calc(52 * var(--u)); bottom: calc(60 * var(--u));
  width: calc(430 * var(--u));
  display: flex; flex-direction: column;
  padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
  color: var(--encre); font-family: var(--serif); font-size: calc(16 * var(--u));
  background:
    radial-gradient(circle at 15% 10%, rgba(150,100,40,.08) 0, transparent calc(60 * var(--u))),
    radial-gradient(circle at 85% 90%, rgba(150,100,40,.08) 0, transparent calc(80 * var(--u))),
    #f5ecd8;
  border: 1px solid #7a5a1c;
  box-shadow: 0 0 0 calc(3 * var(--u)) #f5ecd8, 0 0 0 calc(4 * var(--u)) rgba(122,90,28,.6),
              calc(4 * var(--u)) calc(6 * var(--u)) calc(16 * var(--u)) rgba(40,25,5,.35);
}
.section[data-cote="gauche"] .cartouche { left: calc(44 * var(--u)); }
.section[data-cote="droite"] .cartouche { right: calc(44 * var(--u)); }
.section[data-cote="bas"] .cartouche { top: auto; bottom: calc(60 * var(--u)); left: calc(44 * var(--u)); width: calc(330 * var(--u)); }

.cartouche header { flex: none; border-bottom: 1px solid rgba(122,90,28,.4); padding-bottom: calc(6 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.cartouche .titre-section { margin: 0; font-size: calc(24 * var(--u)); }
.cartouche .partie { margin: calc(2 * var(--u)) 0 0; font-size: calc(30 * var(--u)); line-height: 1.05; }
.cartouche .trajet { display: flex; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
.cartouche .trajet button {
  font: inherit; font-family: var(--capitales); font-size: calc(15 * var(--u)); letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(2 * var(--u)) calc(12 * var(--u)); cursor: pointer; color: var(--encre);
  background: transparent; border: 1px solid rgba(122,90,28,.55); border-radius: 999px;
}
.cartouche .trajet button[aria-pressed="true"] { background: rgba(214,180,108,.45); border-color: #7a5a1c; }
.trait { display: inline-block; width: calc(18 * var(--u)); height: calc(3 * var(--u)); border-radius: 2px; }
.trait.aller { background: #b3261e; }
.trait.retour { background: #2b2116; }

.etapes { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(122,90,28,.5) transparent; }
.etape { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.etape[hidden] { display: none; }
.etape.entre { animation: entree .3s ease; }
.cartouche p, .cartouche blockquote { margin: 0; }
.cartouche .texte { font-style: normal; text-align: justify; hyphens: auto; line-height: 1.28; }
.cartouche blockquote.texte { font-style: italic; padding-left: calc(10 * var(--u)); border-left: 2px solid rgba(122,90,28,.4); }
.cartouche cite { font-style: normal; font-size: .9em; color: var(--encre-douce); }
.cartouche .consigne { font-style: italic; color: var(--sepia); }
.cartouche .credit-photo { font-size: calc(12.5 * var(--u)); color: var(--encre-douce); text-align: right; }
.illustration { margin: 0; gap: calc(4 * var(--u)); }
.illustration img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: calc(150 * var(--u));
  margin: 0 auto; object-fit: contain;
  filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.3));
}
.illustration figcaption { font-size: calc(12 * var(--u)); line-height: 1.22; }
.rangee-illus { display: flex; gap: calc(10 * var(--u)); align-items: flex-start; }
.rangee-illus .illustration { flex: 1 1 0; min-width: 0; }
.rangee-illus .illustration img { max-height: calc(150 * var(--u)); }

.etapes-nav {
  flex: none; display: flex; align-items: center; gap: calc(8 * var(--u));
  margin-top: calc(8 * var(--u)); padding-top: calc(6 * var(--u));
  border-top: 1px solid rgba(122,90,28,.4);
}
.etapes-nav button {
  font: inherit; font-size: calc(22 * var(--u)); line-height: 1; color: #7a5a1c;
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); padding: 0; cursor: pointer;
  background: transparent; border: 1px solid rgba(122,90,28,.6); border-radius: 50%;
}
.etapes-nav button:hover:not(:disabled) { background: #7a5a1c; color: #f5ecd8; }
.etapes-nav button:disabled { opacity: .3; cursor: default; }
.etapes-nav .etape-titre { flex: 1; text-align: center; line-height: 1.15; }
.etapes-nav .etape-num { display: block; font-family: var(--capitales); font-size: calc(13 * var(--u)); letter-spacing: .12em; color: var(--encre-douce); }
.etapes-nav .etape-lieu { font-style: italic; font-size: calc(18 * var(--u)); color: var(--sepia); }

/* --- petits écrans : carte puis cartouche, on défile --- */
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  .atlas { position: relative; height: 72vh; }
  .carte-cadre { inset: 6px; }
  .atlas-livre > .section { position: static; pointer-events: auto; }
  .cartouche, .section[data-cote] .cartouche { position: static; width: auto; margin-top: 12px; }
  .etapes { overflow: visible; }
  .outils-carte { flex-wrap: wrap; white-space: normal; justify-content: center; width: calc(100% - 20px); }
  .coordonnees { font-size: 13px; }
}

/* coordonnées et outils centrés sur la partie de carte laissée libre par le cartouche */
.carte-cadre[data-cote="gauche"] .coordonnees,
.carte-cadre[data-cote="gauche"] .outils-carte { left: calc(806 * var(--u)); }
.carte-cadre[data-cote="droite"] .coordonnees,
.carte-cadre[data-cote="droite"] .outils-carte { left: calc(346 * var(--u)); }
.carte-cadre[data-cote="bas"] .outils-carte { left: calc(740 * var(--u)); }
.carte-cadre[data-cote="droite"] .note-empires { right: auto; left: calc(14 * var(--u)); }
.illustration.petite img { max-height: calc(112 * var(--u)); }
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  .carte-cadre[data-cote] .coordonnees, .carte-cadre[data-cote] .outils-carte { left: 50%; }
  .outils-carte { font-size: 14px; gap: 8px; }
  .vents-mois { width: 90px; }
  .note-empires { bottom: auto; top: 44px; font-size: 14px; }
}
.cartouche sup { line-height: 0; }

/* Dias : les points de l'autre trajet sont estompés et ne réagissent pas */
#points.mode-aller g.trajet-retour, #points.mode-retour g.trajet-aller { pointer-events: none; opacity: .3; }
#points.mode-aller g.trajet-retour .onde, #points.mode-retour g.trajet-aller .onde { animation: none; opacity: 0; }
.illustration .credit-image { display: block; font-style: normal; font-size: calc(10 * var(--u)); color: var(--encre-douce); opacity: .8; }
.rangee-illus.petite .illustration img { max-height: calc(82 * var(--u)); }
.etape { display: block; }
.cartouche .etape > * + * { margin-top: calc(8 * var(--u)); }
.illustration.flottante { width: 22%; margin-top: calc(3 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.illustration.flottante.droite { float: right; margin-left: calc(12 * var(--u)); }
.illustration.flottante.gauche { float: left; margin-right: calc(12 * var(--u)); }
.illustration.flottante img { max-height: none; width: 100%; }
.etape::after { content: ""; display: block; clear: both; }

/* quand il reste de la place, les illustrations descendent : elles se placent au milieu de l'espace libre sous le texte */
.etapes { display: flex; flex-direction: column; }
.etape:not([hidden]) { flex: 1 0 auto; }
.etape:not([hidden]):not(:has(.flottante)) { display: flex; flex-direction: column; gap: 0; }
.etape > :not(.illustration):not(.rangee-illus) + :is(.illustration, .rangee-illus) { margin-top: auto; padding-top: calc(8 * var(--u)); }
.etape:not(:has(.flottante))::after { content: ""; margin-top: auto; }