/* La carte murale : couches, tracés, étiquettes à la main, repères, commandes. */
.carte { position: absolute; inset: 0; overflow: hidden; background: var(--mer); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.carte.glisse { cursor: grabbing; }
@media (min-width: 1024px) { .carte { position: relative; inset: auto; height: 100%; } }
.carte-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#geo path { vector-effect: non-scaling-stroke; }
.onde { fill: none; stroke: var(--lisere); stroke-linejoin: round; }
.onde-mer { fill: none; stroke: var(--mer); stroke-linejoin: round; }
.c-vasieres { fill: var(--lisere); }
.c-continent { fill: var(--terre); }
.c-ile { fill: var(--terre); }
.c-plages { fill: url(#motif-plage); }
.c-vignes { fill: url(#motif-vignes); }
.c-forets { fill: var(--bois); }
.c-pres { fill: var(--marais); opacity: .7; }
.c-salines { fill: var(--marais); stroke: var(--terre); stroke-width: .6px; }
.c-villages { fill: #E8EFF2; }
.c-rues { fill: none; stroke: #B5C9D2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .4s; }
.c-rues-petites { stroke-width: 2px; }
.c-rues-grandes { stroke-width: 3.2px; }
.proche .c-rues { opacity: 1; }
.c-reseau { fill: none; stroke: var(--piste); stroke-width: 1.3px; stroke-linecap: round; stroke-linejoin: round; }
.c-pont-bord { fill: none; stroke: var(--encre); stroke-width: 6px; stroke-linecap: butt; }
.c-pont { fill: none; stroke: var(--terre); stroke-width: 3.4px; stroke-linecap: butt; }
#motif-vignes path { stroke: var(--bois); stroke-width: 1.5; }
#motif-plage circle { fill: var(--piste); opacity: .55; }

/* Tracés : épaisseurs posées en unités de carte par balades.js (le dessin animé reste juste au zoom). */
.traces path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace-fond { stroke: var(--terre); }
.trace { stroke: var(--rose); transition: opacity .3s; }
.trace-zone { stroke: transparent; cursor: pointer; pointer-events: stroke; }
.traces.choix .trace, .traces.choix .trace-fond { opacity: .25; }
.traces.choix .actif .trace, .traces.choix .actif .trace-fond { opacity: 1; }
.traces.cache g { opacity: 0; transition: opacity .3s; }
.traces.cache g.actif { opacity: 1; }
.trajet { fill: none; stroke: var(--rose); stroke-linecap: round; }

/* Étiquettes HTML au-dessus de la carte : taille constante quel que soit le zoom. */
.carte-etiquettes { position: absolute; inset: 0; pointer-events: none; }
.etq { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.etq-village, .etq-mer, .etq-arret, .etq-magasin b {
  font: 400 22px/1.5 var(--main); font-feature-settings: "calt"; color: var(--encre);
  -webkit-text-stroke: 8px var(--terre); paint-order: stroke fill; }
.etq-mer { color: var(--mer-nom); -webkit-text-stroke: 0; }
.etq-continent { font: 600 14px/1 var(--texte); color: var(--gris); }
.etq-pont { font: 600 13px/1.3 var(--texte); color: var(--encre); text-align: left; }
.etq-lieu { pointer-events: auto; cursor: help; padding: 7px 11px; }
.etq-lieu svg { display: block; width: 22px; height: 30px; transition: transform .2s var(--courbe); transform-origin: 50% 100%; }
@media (hover: hover) { .etq-lieu:hover svg { transform: scale(1.18); } }
.etq-magasin { display: flex; flex-direction: row-reverse; align-items: center; gap: 4px; }
.etq-magasin.droite { flex-direction: row; }
.etq-rue { font: 600 13px/1 var(--texte); color: var(--gris); }
.etq-magasin i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--encre); color: #fff;
  box-shadow: 0 0 0 3px var(--terre), 0 6px 14px -6px rgb(15 42 58 / .6); }
.etq-magasin i svg { width: 22px; height: 22px; }
.etq-arret { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.4, 0, .2, 1); }
.etq-arret.ecrit { clip-path: inset(-20px -20px -20px -20px); }
.etq-point { width: 14px; height: 14px; border-radius: 50%; background: var(--terre); border: 3px solid var(--encre); }
.carte-bulle { position: absolute; z-index: 3; left: 0; top: 0; margin: 0; padding: 8px 11px; background: var(--encre); color: #fff; border-radius: 4px;
  font: 600 14px/1.25 var(--texte); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.carte-bulle.visible { opacity: 1; }

/* Cyclistes dessinés : le cycliste de la balade et le peloton de la famille. */
.cycliste { position: absolute; left: 0; top: 0; width: 46px; height: 44px; margin: -40px 0 0 -23px; will-change: transform; }
.cycliste svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cycliste .roue { fill: var(--terre); stroke: var(--encre); stroke-width: 2.2; }
.cycliste .trait { fill: none; stroke: var(--encre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cycliste .plein { fill: var(--encre); }
.cycliste .halo { fill: none; stroke: var(--terre); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* Livraison : les villages deviennent des repères de 44 px. */
.repere-village { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer; display: grid; place-items: center; }
.repere-village span { width: 18px; height: 18px; border-radius: 50%; background: var(--terre); border: 3px solid var(--encre); transition: transform .2s var(--courbe); }
.repere-village[aria-pressed="true"] span { background: var(--encre); box-shadow: 0 0 0 3px var(--terre); transform: scale(1.25); }
@media (hover: hover) { .repere-village:hover span { transform: scale(1.25); } }

/* Commandes : angle bas gauche de la zone libre (au-dessus de la feuille sur téléphone). */
.carte-outils { position: absolute; z-index: 4; left: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 14px; }
.carte-boutons { display: flex; gap: 6px; }
.carte-boutons button { min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: var(--terre); color: var(--encre);
  font: 500 24px/1 var(--texte); box-shadow: 0 6px 16px -10px rgb(15 42 58 / .55); }
.carte-boutons .carte-ile { padding: 0 14px; font: 600 15px/1 var(--texte); }
@media (hover: hover) { .carte-boutons button:hover { background: var(--mer); } }
.rose-vents { width: 40px; height: 40px; flex: none; }
.echelle { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; font: 600 13px/1 var(--texte); color: var(--encre); }
.echelle-barre { display: block; height: 7px; border: 2px solid var(--encre); border-top: 0; }
.carte-credit { position: absolute; z-index: 4; right: 12px; bottom: 10px; padding: 3px 6px; border-radius: 3px; background: rgb(255 255 255 / .78); font: 500 12px/1.2 var(--texte); color: var(--mer-nom); }
@media (max-width: 1023px) {
  .carte-outils { left: max(12px, env(safe-area-inset-left)); bottom: calc(var(--feuille-vue, 0px) + 12px); gap: 10px; }
  .carte-credit { top: calc(74px + env(safe-area-inset-top)); bottom: auto; right: 14px; }
  .echelle { display: none; }
}
@media (max-width: 380px) { .rose-vents { display: none; } }
.feuille-haute .carte-outils { visibility: hidden; }