/* Composants de KesKonFait (charte graphique v1.0). Aucune valeur en dur : tout vient de tokens.css. Les pages du service et les aperçus
   n'ont plus de style en ligne. Sections : base, boutons, champs, pastilles, accueil, écran 2, liste, cartes de sorties, carte, fiche,
   barre du bas, menu, états, emplacements d'illustrations, mouvement réduit. */

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.5; }
body.avec-barre { padding-bottom: calc(var(--nav-height) + var(--space-4)); }
h1, h2, h3 { margin: 0; color: var(--color-primary); font-family: var(--font-heading); }
h1 { font-size: var(--font-size-3xl); font-weight: 800; line-height: 1.15; }
h2 { font-size: var(--font-size-xl); font-weight: 700; line-height: 1.25; }
h3 { font-size: var(--font-size-lg); font-weight: 700; line-height: 1.3; }
p { margin: var(--space-2) 0; }
a { color: var(--color-link); }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--color-accent-yellow); border-radius: var(--radius-sm); }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.doux { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.contenu { width: 100%; max-width: 40rem; margin-inline: auto; padding-inline: var(--page-gutter-mobile); }
.page-etroite { max-width: 34rem; margin: 0 auto; padding: var(--space-6) var(--page-gutter-mobile) var(--space-8); }
@media (min-width: 768px) { .contenu { max-width: 56rem; padding-inline: var(--page-gutter-desktop); } .page-etroite { padding-top: var(--space-10); } }

/* ---- boutons (§8.1 à 8.3) ---- */
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 600 1rem/1.2 var(--font-body); cursor: pointer; text-decoration: none; transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-text); }
.btn-secondary, button.btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-surface-muted); }
.btn-accent { background: var(--color-accent-yellow); color: #252D4A; }
.btn-bloc { display: flex; width: 100%; }
.btn[aria-pressed="true"]:not(.btn-primary) { background: var(--color-primary); color: var(--color-on-primary); }

/* ---- champs (§8.6) ---- */
.champ-libelle { display: block; margin: var(--space-4) 0 var(--space-2); font-weight: 500; color: var(--color-primary); }
.champ { width: 100%; min-height: var(--control-height); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: 400 1rem/1.3 var(--font-body); }
.champ::placeholder { color: var(--color-text-muted); opacity: 1; }
.champ-select { min-height: var(--touch-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: 500 0.9375rem/1.2 var(--font-body); }
.champ-groupe { position: relative; }
.suggestions { position: absolute; left: 0; right: 0; z-index: 5; margin: var(--space-1) 0 0; padding: 0; list-style: none; max-height: 60vh; overflow: auto; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-card-hover); }
.suggestions li { display: flex; align-items: center; min-height: var(--touch-min); margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); cursor: pointer; }
.suggestions li:first-child { border-top: 0; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--color-surface-muted); outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* ---- pastilles : période, types, rayon (§8.7) ---- */
.defile { display: flex; flex-wrap: nowrap; gap: var(--space-2); overflow-x: auto; padding: var(--space-1) 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.defile::-webkit-scrollbar { display: none; }
.pastilles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.pastille, button.pastille { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--touch-min); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-primary); font: 500 0.9375rem/1.2 var(--font-body); white-space: nowrap; cursor: pointer; }
.pastille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastille[aria-pressed="true"], .pastille[aria-checked="true"], .pastille:has(input:checked) { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); font-weight: 600; }
.pastille[aria-pressed="true"]::before, .pastille[aria-checked="true"]::before, .pastille:has(input:checked)::before { content: "\2713"; }
.pastille:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--color-accent-yellow); }
.segment { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface); }
.segment .pastille { border: 0; border-radius: 0; min-width: 5rem; }
.segment-large { display: flex; }
.segment .pastille + .pastille { border-left: 1px solid var(--color-border-strong); }
.segment-defile { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; } /* période : cinq boutons, la rangée défile seule au besoin */
.segment-defile::-webkit-scrollbar { display: none; }
.segment-defile .pastille { flex: none; }
[data-fondu="g"] { -webkit-mask-image: linear-gradient(to right, transparent, black 1.75rem); mask-image: linear-gradient(to right, transparent, black 1.75rem); } /* fondu au bord qui cache du contenu : transparent, donc identique en clair et en sombre */
[data-fondu="d"] { -webkit-mask-image: linear-gradient(to left, transparent, black 1.75rem); mask-image: linear-gradient(to left, transparent, black 1.75rem); }
[data-fondu="gd"] { -webkit-mask-image: linear-gradient(to right, transparent, black 1.75rem, black calc(100% - 1.75rem), transparent); mask-image: linear-gradient(to right, transparent, black 1.75rem, black calc(100% - 1.75rem), transparent); }
.segment .pastille { min-width: 0; padding: var(--space-2) var(--space-3); }
.segment-large .pastille { flex: 1; }
.pastille-type, button.pastille-type { position: relative; width: 3rem; height: 3rem; min-height: 3rem; padding: 0; border: 2px solid transparent; border-radius: 50%; color: var(--color-primary); font-size: 0.625rem; font-weight: 600; line-height: 1.1; text-align: center; white-space: normal; overflow: visible; }
.pastille-type[data-type="0"] { background: var(--type-0); } .pastille-type[data-type="1"] { background: var(--type-1); } .pastille-type[data-type="2"] { background: var(--type-2); }
.pastille-type[data-type="3"] { background: var(--type-3); } .pastille-type[data-type="4"] { background: var(--type-4); } .pastille-type[data-type="5"] { background: var(--type-5); }
.pastille-type[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary); font-weight: 600; }
.pastille-type[aria-pressed="true"]::before { content: "\2713"; position: absolute; top: -4px; right: -4px; display: flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-size: 0.7rem; line-height: 1; }
.pastille-type img { width: 100%; height: 100%; display: block; }
.pastille-type[data-pictogramme="oui"] { background: transparent; border-color: transparent; }
.pastille-type[data-pictogramme="oui"][aria-pressed="true"] { background: transparent; }
/* Pictogramme et nom écrit en petit dessous, comme la maquette (le texte sous les boutons ne vaut que pour ces six pictogrammes) */
.pastille-type[data-pictogramme="oui"] { flex: 1 1 0; min-width: 0; max-width: 4.5rem; width: auto; height: auto; min-height: 3.75rem; padding: var(--space-1) 0 var(--space-1); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; }
.pastille-type[data-pictogramme="oui"] img { width: 2.5rem; height: 2.5rem; flex: none; }
.pastille-type[data-pictogramme="oui"] .libelle-type { display: block; max-width: 100%; font-size: 0.6875rem; font-weight: 600; line-height: 1.15; color: var(--color-text); white-space: nowrap; }
#attente-bloc.arret .points, #attente-bloc.arret .illustration { display: none; } /* erreur : plus rien ne pulse ni ne flotte */
.pastille-type[data-pictogramme="oui"][aria-pressed="true"]::before { top: 0; right: 0.25rem; }
.types { gap: var(--space-2); padding: var(--space-2) var(--space-1); }
.ligne-filtres .pastille-gratuit { margin-left: auto; padding: var(--space-2) var(--space-3); } /* la puce « Gratuit » : sur la rangée du rayon, contre le bouton du tri */
@media (max-width: 379px) { .types { gap: 2px; } .pastille-type[data-pictogramme="oui"] img { width: 2.25rem; height: 2.25rem; } }
/* Sous 360 px les six pastilles de 44 px et leurs noms de 11 px ne tiennent plus sur une ligne : deux lignes de trois, sans rien qui dépasse */
@media (max-width: 359px) { .types { flex-wrap: wrap; justify-content: center; row-gap: var(--space-1); } .pastille-type[data-pictogramme="oui"] { flex: 0 0 calc(33.333% - 2px); max-width: none; } }

/* ---- champs et menus compacts de la maquette ---- */
.champ-ico { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.champ-avec-icone { padding-left: 2.75rem; }
.btn-icone { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-primary); }
.btn-icone select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.btn-icone:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-pill); box-shadow: 0 0 0 6px var(--color-accent-yellow); }
.btn-icone select:focus-visible { outline: 0; box-shadow: none; }

/* ---- en-tête de page, marque, menu ---- */
.entete-page { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding-block: var(--space-2); }
.entete-page .lieu { flex: 1; display: flex; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary); }
.btn-retour { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); border-radius: 50%; color: var(--color-primary); text-decoration: none; font-size: var(--font-size-xl); }
.marque { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-primary); font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: 800; }
.entete-accueil { display: flex; align-items: center; justify-content: space-between; position: relative; }
.btn-menu { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-primary); font-size: var(--font-size-xl); cursor: pointer; }
.menu-panneau { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 20; min-width: 14rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card-hover); }
.menu-panneau a { display: flex; align-items: center; min-height: var(--touch-min); padding: var(--space-3) var(--space-4); color: var(--color-primary); font-weight: 600; text-decoration: none; }

/* ---- accueil et écran 2 ---- */
.groupe { border: 0; margin: 0 0 var(--space-4); padding: 0; min-width: 0; }
.groupe legend { display: block; width: 100%; padding: 0; float: left; }
.groupe legend + * { clear: both; }
.accroche { margin: var(--space-6) 0 var(--space-2); }
.sous-titre { margin: 0 0 var(--space-4); font-size: var(--font-size-lg); color: var(--color-text); }
.lieux-recents { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.lieux-recents li { margin: 0; }
.lieux-recents a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-primary); font-weight: 500; text-decoration: none; }
.lieux-recents a::after, .outing-card::after { content: ""; display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; margin-left: auto; background-color: currentColor; -webkit-mask: var(--ico-chevron-right) center / contain no-repeat; mask: var(--ico-chevron-right) center / contain no-repeat; }
.bloc-titre { margin: var(--space-6) 0 var(--space-3); }
.attente { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; }
.attente .points { display: inline-flex; gap: var(--space-1); }
.attente p { margin: 0; }
#attente-detail { margin-top: var(--space-1); }
.attente .points i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-yellow); border: 1px solid var(--color-primary); animation: pulsation 1.2s ease-in-out infinite; }
.attente .points i:nth-child(2) { animation-delay: .2s; } .attente .points i:nth-child(3) { animation-delay: .4s; }
@keyframes pulsation { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
.message { margin: var(--space-4) 0; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.message-erreur { border-color: var(--color-danger); }
.message-erreur::before { content: "!"; display: inline-block; margin-right: var(--space-2); width: 1.4em; text-align: center; border-radius: 50%; background: var(--color-danger); color: var(--color-surface); font-weight: 600; }

/* ---- emplacements d'illustrations (vides tant que le graphiste n'a rien livré) ---- */
.illustration:empty { display: none; }
.illustration { margin: var(--space-4) 0; }
.illustration img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.illustration[data-illustration="accueil"] img { width: auto; max-width: 100%; max-height: 9.5rem; margin-inline: auto; }
.logo-emplacement img { height: 2rem; width: auto; }
.logo-svg { margin: 0; line-height: 0; display: inline-block; padding: var(--space-1) var(--space-3); background: var(--color-cartouche); border-radius: var(--radius-lg); }
.logo-svg svg { display: block; height: 3rem; width: auto; }
.illustration svg { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.illustration-attente { max-width: 20rem; margin-inline: auto; }
/* L'épingle du fond d'attente flotte très doucement, sauf si la personne a demandé moins de mouvement */
@media (prefers-reduced-motion: no-preference) { .illustration-attente .epingle { transform-box: fill-box; transform-origin: 50% 100%; animation: epingle-flotte 3s ease-in-out infinite; } }
@keyframes epingle-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---- liste : filtres ---- */
.filtres { display: grid; gap: var(--space-2); margin-bottom: var(--space-2); }
.ligne-filtres > .btn-icone { flex: none; }
.ligne-filtres { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* ---- cartes de sorties (§8.4) ---- */
ul.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 768px) { ul.liste { grid-template-columns: 1fr 1fr; } }
.sec { margin: var(--space-6) 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary); }
.rangee-moments { margin: 0 0 var(--space-2); }
.moments-note { margin: calc(var(--space-1) * -1) 0 var(--space-2); }
.jour-bouton { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--touch-min); margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer; }
.jour-date { flex: 1 1 auto; min-width: 0; }
.jour-nb { flex: none; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); }
.jour-bouton .ico { color: var(--color-primary); }
.jour-bouton[aria-expanded="true"] .ico { transform: rotate(180deg); }
.jour-corps[hidden] { display: none; }
.jours-tout { display: flex; justify-content: flex-end; margin: var(--space-2) 0 0; }
.lien-bouton { min-height: var(--touch-min); padding: 0 var(--space-2); border: 0; background: none; font: inherit; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.outing-card { display: flex; align-items: stretch; gap: var(--space-3); width: 100%; min-height: var(--touch-min); padding: var(--space-3); text-align: left; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font: inherit; cursor: pointer; transition: box-shadow var(--motion-normal) ease; }
.outing-card:hover { box-shadow: var(--shadow-card-hover); }
.outing-card__image { flex: none; align-self: flex-start; width: 6.5rem; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface-muted); }
.vignette { flex: none; align-self: flex-start; display: flex; align-items: center; justify-content: center; width: 6.5rem; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); background: var(--color-surface-muted); }
.vignette[data-type="0"] { background: var(--type-0); } .vignette[data-type="1"] { background: var(--type-1); } .vignette[data-type="2"] { background: var(--type-2); }
.vignette[data-type="3"] { background: var(--type-3); } .vignette[data-type="4"] { background: var(--type-4); } .vignette[data-type="5"] { background: var(--type-5); }
.vignette img { width: 60%; height: 60%; object-fit: contain; }
.vignette-photo { position: relative; overflow: hidden; }
.vignette-photo img { width: 100%; height: 100%; object-fit: cover; }
.vignette-nd { background: var(--color-surface-muted); }
.vignette-nd img { object-fit: contain; } /* sous By-NC-ND : entière, jamais recadrée ni modifiée */
.licence-image { position: absolute; left: 0; top: 0; padding: 0 var(--space-1); background: var(--overlay-bg); color: var(--overlay-text); font-size: var(--credit-size); font-weight: 400; line-height: 1.2; border-radius: 0 0 var(--radius-sm) 0; }
.credit-image { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--space-1); background: var(--overlay-bg); color: var(--overlay-text); font-size: var(--credit-size); font-weight: 400; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-height: calc(var(--credit-size) * 2.4 + 1px); } /* liste : 2 lignes au plus (jamais plus du tiers de la vignette), la suite en « … » ; le crédit entier est dans la fiche, le title et l'aria-label */
.outing-card__content { flex: 1; min-width: 0; }
.outing-card__meta { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.outing-card__title { display: block; margin-top: var(--space-1); color: var(--color-primary); font-family: var(--font-heading); font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.outing-card__place { display: block; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.outing-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.outing-card::after { align-self: center; color: var(--color-primary); }
.tag { display: inline-block; padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text); font-size: var(--font-size-xs); font-weight: 600; line-height: 1.6; }
.tag-vert { color: var(--color-accent-green); border-color: var(--color-accent-green); }
details.continu summary { min-height: var(--touch-min); display: flex; align-items: center; cursor: pointer; margin-top: var(--space-4); font-weight: 600; color: var(--color-primary); }
#incomplet { margin: var(--space-2) 0; }
.rangee { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.pied { margin: var(--space-8) 0 var(--space-4); }

/* ---- carte (Leaflet + dessin simple des aperçus) ---- */
#dessin { position: relative; width: 100%; margin: var(--space-2) 0; }
#dessin > svg { display: block; height: 11rem; width: auto; max-width: 100%; margin: 0 auto; }
#dessin.fond { width: auto; }
#dessin.fond > svg { margin: 0 auto; }
#carte .cercle { fill: none; stroke: var(--color-accent-green); stroke-width: 1.5; }
#carte .etiq { fill: var(--color-text-muted); font-size: 12px; paint-order: stroke; stroke: var(--color-background); stroke-width: 3px; }
#carte .pt { fill: var(--color-primary); stroke: var(--color-background); stroke-width: 2; cursor: pointer; }
#carte .pt .zone { fill: transparent; stroke: none; }
#carte .pt:focus { outline: 3px solid var(--color-focus); }
#carte .nb { fill: var(--color-on-primary); font: 600 12px var(--font-body); pointer-events: none; }
#carte .centre { fill: var(--color-accent-brick); stroke: var(--color-background); }
.mention { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.3; text-align: center; }
#dessin.vive { width: 100%; }
#carte-vive { height: 13.75rem; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-border); z-index: 0; overflow: hidden; }
#carte-vive.grande { height: min(70vh, 30rem); }
@media (min-width: 768px) { #carte-vive { height: 20rem; } }
#carte-vive .leaflet-control-attribution { background: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-size-xs); }
#carte-vive .leaflet-control-attribution a { color: var(--color-text-muted); }
path.kk-cercle { fill: none; stroke: var(--color-accent-green); stroke-width: 1.8; stroke-dasharray: 6 6; stroke-opacity: .85; }
/* épingles de la carte : le plan IGN est toujours clair, les couleurs des épingles ne changent donc pas avec le thème (tokens --map-pin-*) */
.kk-icone { background: transparent; border: 0; }
.kk-goutte { position: relative; display: block; }
.kk-goutte-dessin { position: absolute; display: block; overflow: visible; }
.kk-goutte-corps { fill: var(--map-pin); stroke: var(--map-pin-contour); stroke-width: 1.5; stroke-linejoin: round; }
.kk-goutte-corps.choisi { stroke: var(--map-pin-choisi); stroke-width: 3; }
.kk-goutte-bord { fill: none; stroke: var(--map-pin); stroke-width: 6; stroke-linejoin: round; }
.kk-goutte-centre { fill: var(--map-pin-contour); }
.kk-n { fill: var(--map-pin-texte); font-family: var(--font-body); font-weight: 700; pointer-events: none; }
.kk-icone:focus-visible .kk-goutte-dessin { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; }
path.kk-centre { fill: var(--color-accent-brick); stroke: var(--color-background); }

/* ---- fiche d'une sortie (volet du bas) ---- */
#fiche { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 88vh; overflow: auto; background: var(--color-surface); color: var(--color-text); border-top: 3px solid var(--color-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-4) var(--page-gutter-mobile) var(--space-8); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
#fiche > div { max-width: 40rem; margin: 0 auto; }
#fiche h1 { margin: var(--space-3) 0 var(--space-2); font-size: var(--font-size-2xl); font-weight: 800; }
.fiche-photo { position: relative; margin: var(--space-3) 0; }
.fiche-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.fiche-photo-nd img { object-fit: contain; }
.fiche-photo .credit-image { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; max-height: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 0 var(--space-2); }
.credit-image a { color: inherit; }
.fiche-actions { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.fiche-actions .duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

/* ---- barre du bas : Accueil, Carte, Mes sorties ---- */
.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; min-height: var(--nav-height); background: var(--color-surface); border-top: 1px solid var(--color-border); padding-bottom: env(safe-area-inset-bottom); }
.barre > a, .barre > button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--nav-height); padding: var(--space-1); border: 0; background: transparent; color: var(--color-text-muted); font: 500 var(--font-size-xs)/1.2 var(--font-body); text-decoration: none; cursor: pointer; }
.barre [aria-current="page"], .barre [aria-pressed="true"] { color: var(--color-primary); font-weight: 600; box-shadow: inset 0 3px 0 var(--color-accent-yellow); }
.barre [aria-current="page"]::after, .barre [aria-pressed="true"]::after { content: "\2022"; line-height: .5; }

/* ---- mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.barre .ico { width: 1.5rem; height: 1.5rem; }
.bloc-titre .ico { color: var(--color-primary); }
.btn .ico { width: 1.25rem; height: 1.25rem; vertical-align: 0; }
.lieux-recents .ico { color: var(--color-text-muted); }
/* ---- Mes sorties : liste à partager ---- */
.note { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.note-passee { background: var(--color-surface-muted); }
.note__texte { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.partage { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.partage-panneau { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.partage-panneau .btn { flex: 1 1 auto; }
.partage-panneau .btn-bloc, .partage-panneau p { flex-basis: 100%; margin: 0; }
.partage-panneau[hidden] { display: none; }
.btn.btn-danger, button.btn-danger { border-color: var(--color-danger); color: var(--color-danger); }
.btn:disabled { opacity: 1; cursor: not-allowed; border-style: dashed; color: var(--color-text-muted); }
.note .tag { flex: none; white-space: nowrap; }

/* Invitation à installer l'application : « Installer » à gauche, « Plus tard » toujours à droite (même seul, sur iPhone) ; le bouton permanent de l'accueil */
.installer-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) 0 0; }
.installer-actions .btn { white-space: nowrap; }
.installer-actions #installer-plus-tard { margin-left: auto; }
.installer-toujours { margin: var(--space-4) 0 0; }

/* ---- page À propos : installer l'application pas à pas ---- */
.sous-titre-etapes { margin: var(--space-4) 0 var(--space-2); font: 600 1rem/1.3 var(--font-body); color: var(--color-primary); }
.etapes { display: grid; gap: var(--space-3); margin: 0 0 var(--space-3); padding-left: 1.5rem; }
.etapes li::marker { font-weight: 700; color: var(--color-primary); }
.etapes p { margin: 0; }
.etapes img { display: block; width: 100%; max-width: 20rem; height: auto; margin-top: var(--space-2); }

/* ---- liste affichée sans réseau : la bande dit d'où viennent les sorties ---- */
.bande-hors-ligne { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-muted); color: var(--color-text); font-weight: 600; }