/* Planned Odyssey, habillage commun : style « Nuit étoilée » (choisi le 2026-10-18), sombre dans tous les cas.
 * Bleu nuit, ambre ; Space Grotesk (titres) et Inter. Polices servies par le site (assets/polices, Fontsource). */
@font-face { font-family: 'Space Grotesk'; src: url('../polices/space-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../polices/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Delius'; src: url('../polices/delius-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
	--pin: #f2b544; --pin-encre: #1a1406; --foret: #64d2b4; --sable: #3a3220; --soleil: #f2b544; --ciel: #1b2a48; --saumon: #f78e7a;
	--fond: #0f1424; --surface: #161d33; --surface2: #1f2843; --encre: #e9ecf5; --encre2: #9aa5c4; --filet: #2a3556;
	--accent: #ff8a65; --accent-encre: #1a0f0a; --lien: #8fb8ff; --danger: #ff7b7b; --ok: #7fe0a8; --alerte: #f3c063;
	--rayon: 12px; --rayon-btn: 10px; --ombre: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
	--police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--police-titre: 'Space Grotesk', 'Inter', system-ui, sans-serif;
	color-scheme: dark;
}
body { background-image: radial-gradient(1200px 500px at 80% -10%, rgba(242,181,68,.08), transparent 60%); background-attachment: fixed; }
.leaflet-tile-pane { filter: brightness(.82) saturate(.85); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* place de la barre de défilement toujours réservée : rien ne se décale quand elle apparaît */
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.55 var(--police); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
h1, h2, h3 { font-family: var(--police-titre); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 750; }
h2 { font-size: 1.35rem; font-weight: 700; margin-top: 1.4em; }
h3 { font-size: 1.05rem; font-weight: 700; }
a { color: var(--lien); text-underline-offset: 2px; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--soleil); outline-offset: 2px; }

/* En-tête */
/* Menu du haut figé : il reste en vue quand la page défile (la carte du planificateur se cale dessous). */
.entete { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--filet); position: sticky; top: 0; z-index: 1000; }
.marque { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--encre); white-space: nowrap; }
.nom-logo { font: 400 1.35rem/1 'Delius', var(--police); letter-spacing: .01em; }
.nom-logo .n1 { color: #30a486; }
.nom-logo .n2 { color: #f78e7a; }
@media (max-width: 420px) { .nom-logo { font-size: 1.1rem; } }
.logo-embleme { width: 38px; height: 39px; flex: none; }
.menu { display: flex; align-items: center; gap: 4px 18px; margin-left: auto; flex-wrap: wrap; }
.menu > a { color: var(--encre); text-decoration: none; font-weight: 550; padding: 6px 2px; border-bottom: 2px solid transparent; }
.menu > a[aria-current] { border-bottom-color: var(--soleil); }
.menu > a.btn { padding: 8px 16px; border: 0; }
.bandeau-dev { background: var(--soleil); color: var(--pin-encre); text-align: center; padding: 8px 20px; font-size: .95rem; line-height: 1.4; }
.bandeau-dev p { margin: 0; }
.bandeau-dev a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--filet); border-radius: 10px; font-size: 1.2rem; width: 42px; height: 42px; color: var(--encre); cursor: pointer; }
.langues { display: flex; gap: 2px; font-size: .8rem; font-weight: 700; }
.langues a, .langues span { padding: 4px 7px; border-radius: 8px; text-decoration: none; color: var(--encre2); }
.langues span { background: var(--surface2); color: var(--encre); }
@media (max-width: 860px) {
	.menu-btn { display: block; }
	.menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); flex-direction: column; align-items: stretch; padding: 12px 20px 18px; border-bottom: 1px solid var(--filet); box-shadow: var(--ombre); }
	.menu.ouvert { display: flex; }
	.menu > a { padding: 10px 0; }
}

/* Boutons et formulaires */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 18px; border-radius: var(--rayon-btn); border: 1px solid var(--filet); background: var(--surface); color: var(--encre); font: 600 .95rem var(--police); text-decoration: none; cursor: pointer; transition: transform .08s, background .15s; }
.btn:hover { background: var(--surface2); }
.btn:active { transform: translateY(1px); }
.btn.primaire { background: var(--pin); border-color: var(--pin); color: var(--pin-encre); }
.btn.primaire:hover { background: var(--foret); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--filet)); }
.btn.grand { min-height: 50px; padding: 12px 26px; font-size: 1.05rem; }
.btn.petit { min-height: 32px; padding: 4px 12px; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn-icone { width: 38px; height: 38px; padding: 0; border-radius: 50%; }
input, select, textarea { font: inherit; color: var(--encre); background: var(--surface); border: 1px solid var(--filet); border-radius: 10px; padding: 9px 12px; width: 100%; min-height: 42px; }
textarea { min-height: 80px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--pin); }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .92rem; }
label.case { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
fieldset { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 12px 16px 14px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
legend { font-weight: 700; padding: 0 6px; }
.pile { display: flex; flex-direction: column; gap: 14px; }
.deux, .trois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .deux, .trois { grid-template-columns: 1fr; } }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; }
.ligne-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.en-ligne { display: inline-flex; gap: 6px; }

/* Mise en page */
.page { max-width: 1100px; margin: 0 auto; padding: 28px 20px 48px; }
.etroit { max-width: 640px; margin: 0 auto; padding: 28px 20px 48px; }
.carte-form { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 22px; box-shadow: var(--ombre); }
.titre-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.surtitre { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--accent); margin: 0 0 6px; }
.meta { color: var(--encre2); font-size: .92rem; }
.petit { font-size: .86rem; color: var(--encre2); }
.vide { color: var(--encre2); font-style: italic; }
.message { padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--ok) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.message.alerte { background: color-mix(in srgb, var(--alerte) 14%, var(--surface)); border-color: color-mix(in srgb, var(--alerte) 40%, transparent); }
.message.offre { background: color-mix(in srgb, var(--soleil) 16%, var(--surface)); border-color: color-mix(in srgb, var(--soleil) 45%, transparent); }
.message.danger { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.pastille { display: inline-block; padding: 1px 9px; border-radius: 99px; background: var(--surface2); font-size: .78rem; font-weight: 650; color: var(--encre2); }
.pastille.danger { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: var(--danger); }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 12px 0; }
.pastilles li { padding: 3px 11px; border-radius: 99px; background: var(--surface2); font-size: .85rem; }
.liste-simple { padding-left: 1.1em; }
.liste-simple li { margin: 4px 0; }
.cartes { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.carte-voyage a { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); text-decoration: none; color: var(--encre); box-shadow: var(--ombre); height: 100%; }
.carte-voyage a:hover { border-color: var(--foret); }
.carte-voyage strong { font: 700 1.1rem var(--police-titre); }
.carte-voyage span { color: var(--encre2); font-size: .9rem; }
.nouveau-voyage { max-width: 560px; }
dl.chiffres { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 14px 0; }
dl.chiffres dt { color: var(--encre2); }
dl.chiffres dd { margin: 0; font-weight: 600; }
details summary { cursor: pointer; font-weight: 600; }
.zone-danger { margin-top: 30px; border-top: 1px solid var(--filet); padding-top: 14px; }

/* Pied */
.pied { padding: 26px 20px 34px; border-top: 1px solid var(--filet); color: var(--encre2); font-size: .88rem; text-align: center; background: var(--surface); }
.pied .avertissement { max-width: 720px; margin: 0 auto 10px; font-weight: 600; color: var(--encre); }

/* Accueil */
.heros { max-width: 1160px; margin: 0 auto; padding: 48px 20px 26px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.heros h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
.chapeau { font-size: 1.18rem; color: var(--encre2); max-width: 36em; }
.heros-carte svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(31,77,58,.18)); }
@media (max-width: 820px) { .heros { grid-template-columns: 1fr; padding-top: 28px; } }
.bloc { max-width: 1160px; margin: 0 auto; padding: 16px 20px; }
.bloc h2 { font-size: 1.6rem; }
.atouts { counter-reset: a; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.atouts li { counter-increment: a; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 18px 18px 18px 58px; position: relative; box-shadow: var(--ombre); }
.atouts li::before { content: counter(a); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--soleil); color: #1a1a12; font: 800 .95rem/30px var(--police-titre); text-align: center; }
.bloc.fin { text-align: center; padding: 40px 20px 60px; }
.slogan { font: 700 1.4rem var(--police-titre); }
.texte p { font-size: 1.05rem; }

/* Fiche d'un lieu */
.fil { font-size: .9rem; color: var(--encre2); }
.photos { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px; scroll-snap-type: x mandatory; }
.photos figure { margin: 0; flex: none; scroll-snap-align: start; }
.photos img { height: 240px; width: auto; border-radius: var(--rayon); object-fit: cover; display: block; }
.photos figcaption { font-size: .8rem; color: var(--encre2); margin-top: 4px; }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; }
.fiche-grille aside { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .fiche-grille { grid-template-columns: 1fr; } }
.avis { border-top: 1px solid var(--filet); padding: 12px 0; }
.frais { color: var(--ok); font-weight: 600; }
.vieux { color: var(--alerte); font-weight: 600; }
.note-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.etoiles { display: inline-flex; flex-direction: row-reverse; }
.etoiles input { position: absolute; opacity: 0; width: 1px; }
.etoiles label { font-size: 1.5rem; color: var(--filet); cursor: pointer; padding: 0 2px; font-weight: 400; }
.note-ligne.petit .etoiles label { font-size: 1.15rem; }
.etoiles input:checked ~ label, .etoiles label:hover, .etoiles label:hover ~ label { color: var(--soleil); }
.etoiles input:focus-visible + label { outline: 2px solid var(--soleil); }

/* Recherche avec suggestions */
.recherche-modele { position: relative; }
.suggestions { position: absolute; z-index: 50; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--filet); border-radius: 12px; box-shadow: var(--ombre); max-height: 320px; overflow: auto; }
.suggestions li button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; color: var(--encre); font: inherit; cursor: pointer; display: flex; flex-direction: column; }
.suggestions li button:hover, .suggestions li button:focus { background: var(--surface2); }
.suggestions small { color: var(--encre2); }

/* Icônes au trait (assets/js/icones.js) : couleur du texte, taille du texte. */
.ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.meteo-ic.ic-soleil { color: #d99a1c; } .meteo-ic.ic-eclaircies { color: #c99331; } .meteo-ic.ic-nuage, .meteo-ic.ic-brouillard { color: #87929b; }
.meteo-ic.ic-bruine, .meteo-ic.ic-pluie { color: #3b7cc0; } .meteo-ic.ic-neige { color: #4fa0d2; } .meteo-ic.ic-orage { color: #7558b3; }

/* — Annonce maison (Vue::pub) : au-dessus du pied de page, aux couleurs de l'annonceur, en police du système, avec la mention en noir
   plein dans le coin, pour qu'elle n'ait pas l'air de faire partie du site (même allure que sur howdidimissthat.com). — */
.escales { display: grid; gap: 16px; max-width: 1120px; margin: 32px auto 0; padding: 0 20px; }
/* Pouding chômeur (papier et orange), How Did I Miss That (papier, noir, magenta). */
.escale--pouding { --pb-bg: #FAF9F6; --pb-line: #2B2B2B; --pb-ink: #2B2B2B; --pb-btn: #C7721C; --pb-btn-ink: #ffffff; }
.escale--shows { --pb-bg: #EFEDE6; --pb-line: #0B0B0B; --pb-ink: #0B0B0B; --pb-btn: #E6007E; --pb-btn-ink: #ffffff; }
.escale--pouding .escale-logo, .escale--shows .escale-logo { border-radius: 22%; }
.escale--swim { --pb-bg: #f8efe6; --pb-line: #4a5f82; --pb-ink: #3b2a22; --pb-btn: #9f5833; --pb-btn-ink: #ffffff; }
.escale-lien { position: relative; display: flex; align-items: center; gap: 1.25rem; padding: 2.3rem 1.4rem 1.1rem; overflow: hidden; border: 3px solid var(--pb-line); border-radius: 0.75rem; background: var(--pb-bg); color: var(--pb-ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; }
.escale-etiquette { position: absolute; top: 0; left: 0; padding: 0.3rem 0.8rem; border-radius: 0 0 0.6rem 0; background: #111111; color: #ffffff; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.escale-logo { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: 50%; }
.escale-texte { flex: 1; min-width: 0; }
.escale-titre { display: block; font-weight: 800; font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem); line-height: 1.2; }
.escale-accroche { display: block; margin-top: 4px; font-size: 0.9375rem; }
.escale-domaine { display: block; margin-top: 0.3rem; font-size: 0.8125rem; opacity: 0.75; }
.escale-bouton { flex: 0 0 auto; padding: 0.6rem 1.1rem; border-radius: 999px; background: var(--pb-btn); color: var(--pb-btn-ink); font-weight: 700; white-space: nowrap; }
.escale-lien:hover .escale-bouton { filter: brightness(0.92); }
@media (max-width: 640px) { .escale-lien { flex-direction: column; align-items: flex-start; gap: 0.6rem; } }
@media print { .escale { display: none; } }