/* Carte de la baie (route.js) et déroulé de la journée : partagés par l'accueil et la fiche de la journée. */
.carte { margin: 0; }
.carte__cadre { aspect-ratio: 1000 / 820; background: var(--lagon); overflow: hidden; }
.carte__svg { display: block; width: 100%; height: 100%; }
.carte__eau { fill: var(--lagon); }
.carte__terre { fill: var(--terre); stroke: #B8B09D; stroke-width: 0.8; }
.carte__mangrove { fill: var(--mangrove); }
.carte__recif { fill: var(--haut-fond); stroke: #7FC5BF; stroke-width: 1; stroke-dasharray: 3 3; }
.carte__eau-nom { font: italic 400 30px/1 var(--serif); fill: #3F6E73; letter-spacing: 0.04em; }
.carte__ilet { font: italic 400 17px/1 var(--serif); fill: var(--ardoise); }
.route { fill: none; stroke: var(--magenta); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.route--retour { stroke-dasharray: 10 8; }
.arret circle { fill: var(--blanc); stroke: var(--magenta); stroke-width: 3.5; }
.arret--port circle { fill: var(--chenal); stroke: var(--blanc); stroke-width: 3; }
.arret text { font: italic 500 24px/1 var(--serif); fill: var(--chenal); paint-order: stroke; stroke: var(--lagon); stroke-width: 6px; stroke-linejoin: round; }
.carte__vent path { fill: none; stroke: var(--ardoise); stroke-width: 2; }
.carte__vent text { font: 500 17px/1 var(--sans); fill: var(--ardoise); }
.carte__legende { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3); }
.legende { display: inline-flex; align-items: center; gap: var(--s2); }
.legende::before { content: ""; width: 28px; height: 0; border-top: 3px solid var(--magenta); }
.legende--retour::before { border-top-style: dashed; }
/* Tracé (route.js) : l'aller, les arrêts, puis le retour */
.carte--a-tracer .route--aller { transition: stroke-dashoffset 1.9s var(--courbe); }
.carte--a-tracer .route--retour { opacity: 0; transition: opacity .6s var(--courbe) 2.1s; }
.carte--tracee .route--retour { opacity: 1; }
.carte--a-tracer .arret { opacity: 0; transform-box: fill-box; transition: opacity .4s var(--courbe); }
.carte--tracee .route--aller { stroke-dashoffset: 0 !important; }
.carte--tracee .arret { opacity: 1; transition-delay: calc(var(--i) * 420ms + 500ms); }
.carte--tracee .arret--port { transition-delay: 0ms; }
@media print { .carte--a-tracer .route--aller { stroke-dashoffset: 0 !important; } .carte--a-tracer .route--retour, .carte--a-tracer .arret { opacity: 1; } }

.deroule { list-style: none; margin: 0; padding: 0; display: grid; }
.deroule li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: var(--s4); padding-block: var(--s4); border-top: 1px solid var(--filet); }
.deroule li:last-child { border-bottom: 1px solid var(--filet); }
.deroule__heure { font: 500 var(--t-petit)/1.5 var(--sans); color: var(--ardoise); font-variant-numeric: tabular-nums; padding-top: 2px; }
.deroule__lieu { display: block; font: italic 400 var(--t-petit)/1.4 var(--serif); color: var(--magenta-fonce); margin-bottom: 2px; }
.deroule h3 { font-size: 20px; margin-bottom: var(--s1); }
.deroule p { font-size: var(--t-petit); color: var(--ardoise); }

/* En fin de feuille : ces règles surchargent celles du dessus (une @media placée avant ne sert à rien). */
/* Téléphone : la carte est réduite à environ 0,5 ; les noms doublent pour rester à 13-17 px à l'écran */
@media (max-width: 600px) {
  .carte__cadre { aspect-ratio: 810 / 690; }
  .carte__eau-nom { font-size: 40px; }
  .carte__ilet { display: none; }
  .arret text { font-size: 34px; stroke-width: 8px; }
  .carte__vent text { font-size: 26px; }
}