/* Beau Fixe, charte Horizon (voir CLAUDE.md, section Design). Mobile d'abord, colonne de 480 px max. */
:root{
  --blanc:#FFFFFF; --encre:#1D2B36; --nuit:#14202A; --sol:#0F1820; --gris:#6B7780;
  --soleil:#FFC24B; --frais:#7FCBE3; --frais-fond:#E3F2F7; --sable:#F2EEE8; --bord:#E3E7EA; --canard:#0B7A75; --chaud:#B4432E;
  --serif:"Instrument Serif",Georgia,serif;
  --grot:"Bricolage Grotesque",system-ui,sans-serif;
  --texte:"Figtree",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --mode:var(--soleil);
  color-scheme:light;
}
body[data-mode="canicule"]{--mode:var(--frais)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--blanc);color:var(--encre);font-family:var(--texte);font-size:15px;line-height:1.4;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--canard);outline-offset:2px}
a{color:inherit}
.num{font-family:var(--mono);font-weight:700;white-space:nowrap}
.col{max-width:480px;margin:0 auto;min-height:100%;position:relative}

.lock{display:inline-flex;align-items:baseline;gap:.06em;line-height:.9;white-space:nowrap}
.lock .b{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.lock .f{font-family:var(--grot);font-weight:800;font-stretch:75%;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:-.01em;font-size:.86em}
.brand{display:inline-flex;align-items:center;gap:7px;font-size:27px}
.brand svg .disque{fill:var(--mode)}

.btn{display:block;width:100%;text-align:center;background:var(--encre);color:#fff;border-radius:99px;padding:15px;font-weight:700;font-size:16px;text-decoration:none}
.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pills button{font-family:var(--mono);font-weight:700;font-size:14px;text-align:center;padding:9px 0;border-radius:99px;border:1px solid var(--bord);background:rgba(255,255,255,.7)}
.pills button[aria-pressed="true"]{background:var(--encre);color:#fff;border-color:var(--encre)}
.k{font-size:13px;font-weight:700;color:var(--gris)}

/* Ouverture */
.ouverture{position:fixed;inset:0;background:var(--nuit);color:var(--sable);z-index:20;overflow:auto}
.ouverture .col{display:flex;flex-direction:column;min-height:100%}
/* Le ciel occupe le haut, le formulaire commence sous l'horizon. Sur petit écran la page défile. */
.ouverture .col{min-height:100svh}
.ouverture svg.ciel{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
/* Le haut prend toute la place libre, le ciel s'y étire et le soleil grandit avec lui */
.ouverture .haut{position:relative;z-index:1;isolation:isolate;flex:1;box-sizing:border-box;min-height:250px;padding:calc(30px + env(safe-area-inset-top,0px)) 22px 0;display:grid;align-content:start;justify-items:center;gap:8px;text-align:center}
.ouverture .haut .lock{font-size:clamp(60px,19vw,84px)}
.ouverture .haut p{margin:0;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.15;max-width:20ch}
.ouverture .haut small{font-size:13px;opacity:.75;max-width:28ch}
.ouverture .bas{position:relative;z-index:1;padding:14px 18px calc(22px + env(safe-area-inset-bottom,0px));display:grid;gap:12px}
.verre{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:12px;display:grid;gap:10px}
.verre .r{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.verre .r>span{opacity:.75}
.champ{position:relative;display:flex;align-items:center}
.champ svg{position:absolute;left:12px;opacity:.7;pointer-events:none}
.verre input{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:12px;color:var(--sable);padding:11px 12px 11px 38px;font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.verre input::placeholder{color:rgba(242,238,232,.55)}
.sugg{display:grid;gap:4px}
.sugg button{text-align:left;padding:8px 10px;border-radius:10px;background:#2A3945}
.verre input.ok{border-color:var(--soleil)}
.loc-btn{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;font-weight:700;font-size:15px;padding:10px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.3);color:var(--sable)}
.loc-btn[aria-pressed="true"]{background:var(--sable);color:var(--encre);border-color:var(--sable)}
.seg2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.seg2 button{display:flex;justify-content:center;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:9px 0;font-size:14px;font-weight:700}
.seg2 button[aria-pressed="true"]{background:var(--sable);color:var(--encre);border-color:var(--sable)}
.ouverture .pills button{border-color:rgba(255,255,255,.25);background:none;color:var(--sable)}
.ouverture .pills button[aria-pressed="true"]{background:var(--sable);color:var(--encre)}
.ouverture .btn{background:var(--sable);color:var(--encre)}
.ouverture .err{font-size:13px;color:#FFD59A;margin:0}
.ouverture .err:empty{display:none}
.ciel .aube{opacity:.42;animation:aube 4s ease-out both}
.ciel .halo{animation:fondu 4s ease-out both}
.ciel .sun{animation:lever 4s cubic-bezier(.22,.7,.2,1) both}
.ciel .train{animation:trajet 3.4s cubic-bezier(.45,0,.25,1) .5s both}
.ciel .voie{animation:fondu 3.4s linear .5s both}
.ouverture .haut{animation:apparait 1.2s ease-out .8s both}
@keyframes lever{from{transform:translateY(90px)}to{transform:none}}
@keyframes aube{from{opacity:0}to{opacity:.42}}
@keyframes fondu{from{opacity:0}to{opacity:1}}
@keyframes trajet{from{transform:translateX(0)}to{transform:translateX(94px)}}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ciel *,.ouverture .haut{animation:none!important}}

/* App */
.app{min-height:100%;padding-bottom:96px}
.app::before{content:"";position:absolute;inset:0 0 auto;height:420px;z-index:-1;background:linear-gradient(180deg,#FFE7A8 0%,#FFF6DD 40%,#FFFFFF 100%)}
body[data-mode="canicule"] .app::before{background:linear-gradient(180deg,#BFE5F1 0%,#E3F2F7 40%,#FFFFFF 100%)}
.entete{display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top,0px)) 18px 8px}
.chip-loc{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;background:rgba(255,255,255,.75);border-radius:99px;padding:6px 12px}
.vue{padding:0 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.modes{display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.7);border-radius:99px;padding:3px}
.modes button{text-align:center;font-weight:700;font-size:14px;padding:8px 0;border-radius:99px;display:flex;justify-content:center;align-items:center;gap:7px}
.modes button svg{color:var(--gris)}
.modes button[aria-pressed="true"]{background:var(--mode)}
.modes button[aria-pressed="true"] svg{color:var(--encre)}
h1.titre,h2.titre{margin:0;font-family:var(--serif);font-weight:400;font-size:32px;line-height:1;letter-spacing:-.01em;text-wrap:balance}
.titre i{font-style:italic}
.krow{display:flex;justify-content:space-between;align-items:center}
.bascule{display:inline-flex;background:var(--encre);border-radius:99px;padding:3px}
.bascule button{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.75);font-size:13px;font-weight:700;padding:6px 11px;border-radius:99px}
.bascule button[aria-pressed="true"]{background:#fff;color:var(--encre)}
.info{font-size:13px;border-radius:12px;padding:9px 12px;background:rgba(255,255,255,.8);border:1px solid var(--bord)}
.alerte{display:flex;gap:8px;align-items:center;font-size:14px;border-radius:12px;padding:9px 12px;background:rgba(255,255,255,.8)}
.alerte b{color:var(--chaud)}
.vide{font-size:15px;color:var(--gris);padding:24px 0;text-align:center}

.carrousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 18px;margin:0 -18px;padding:2px 18px 8px;scrollbar-width:none}
.carrousel::-webkit-scrollbar{display:none}
.carte-ville{flex:0 0 76%;max-width:300px;aspect-ratio:4/5;border-radius:22px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:14px;scroll-snap-align:start;text-align:left;color:#fff;background:var(--encre) center/cover}
.carte-ville::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(12,20,26,.82))}
.carte-ville.aplat{background:linear-gradient(160deg,#2B3E4C,#14202A)}
.carte-ville.aplat .grand-nom{position:absolute;top:56px;left:14px;right:14px;font-family:var(--serif);font-style:italic;font-size:44px;line-height:.95;color:rgba(242,238,232,.16)}
.carte-ville .t{position:relative;z-index:1;display:grid;gap:3px}
.carte-ville h3{margin:0;font-family:var(--serif);font-weight:400;font-size:36px;line-height:.95}
.carte-ville p{margin:0;font-size:12.5px;opacity:.9}
.carte-ville .meta{font-size:13px;font-weight:600}
.badges{position:absolute;top:12px;left:12px;z-index:1;display:flex;gap:6px;flex-wrap:wrap}
.bdg{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:4px 9px;font-size:12px;font-weight:700;color:var(--encre);background:var(--mode)}
.bdg.g{background:rgba(255,255,255,.88)}
.tag{justify-self:start;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:99px;padding:2px 9px;font-size:11.5px;font-weight:600}

/* Carte */
/* Cartes Leaflet. isolation : les calques de Leaflet (z-index 400 à 1000) restent sous la barre d'onglets */
.carte-l,.carte-fiche{position:relative;isolation:isolate;border-radius:20px;overflow:hidden;background:#EEF0EE;font-family:var(--texte)}
.carte-l{height:min(60vh,520px)}
.carte-fiche{height:270px;border-radius:16px}
/* Plan IGN adouci vers le sable de la charte, pour que les points de couleur ressortent */
.leaflet-tile-pane{filter:grayscale(.85) sepia(.12) brightness(1.06) contrast(.92)}
.leaflet-tooltip.etiq{background:#fff;border:0;border-radius:99px;box-shadow:0 1px 4px rgba(12,20,26,.18);padding:2px 8px;font:700 12px var(--texte);color:var(--encre)}
.leaflet-tooltip.etiq.discret{background:rgba(255,255,255,.75);box-shadow:none;font-weight:600;font-size:11px;color:var(--gris)}
.leaflet-tooltip.etiq::before{display:none}
.leaflet-control-attribution{font-size:10px}
.chemin{margin:0;font-size:13px;color:var(--gris)}
.chemin:empty{display:none}
.chemin button{color:var(--encre);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.legende{display:flex;gap:10px;font-size:12px;color:var(--gris);flex-wrap:wrap}
.legende i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:-1px}
.apercu{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;background:#fff;border-radius:20px;padding:9px;box-shadow:0 10px 24px rgba(20,32,42,.14);text-align:left;width:100%}
.apercu .im{width:72px;height:72px;border-radius:14px;background:var(--encre) center/cover}
.apercu h3{margin:0;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1}
.apercu .l{font-size:13px;color:var(--gris)}

/* Classement */
.rangs{display:grid;gap:8px}
.rang{display:grid;gap:4px;padding:8px 10px;border-radius:14px;text-align:left;width:100%}
.rang:nth-child(odd){background:var(--sable)}
.rang .h{display:flex;justify-content:space-between;font-size:15px;font-weight:700}
.rang .h .num{font-size:13px;color:var(--gris)}
.barre{height:9px;border-radius:99px;background:var(--bord);overflow:hidden}
.barre i{display:block;height:100%;border-radius:99px;background:var(--mode)}
.rang .m{display:flex;justify-content:space-between;font-size:12px;color:var(--gris)}

/* Barre d'onglets */
.onglets{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(444px,calc(100% - 32px));background:var(--encre);border-radius:99px;padding:5px;display:flex;justify-content:space-between;box-shadow:0 8px 20px rgba(12,20,26,.3);z-index:10}
.onglets{border-radius:26px}
.onglets button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:rgba(255,255,255,.75);font-size:11px;font-weight:600;padding:7px 2px;border-radius:21px}
.onglets button[aria-current="page"]{background:#fff;color:var(--encre);font-weight:700}

/* Fiche ville */
.fiche{position:fixed;inset:0;background:var(--blanc);z-index:15;overflow:auto}
.fiche .photo{height:300px;background:var(--encre) center/cover;position:relative}
.fiche .photo.aplat{background:linear-gradient(160deg,#2B3E4C,#14202A)}
.fiche .ctl{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:16px;right:16px;display:flex;justify-content:space-between}
.rond{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;color:#fff}
.fiche .credit{position:absolute;bottom:30px;right:14px;font-size:10px;color:#fff;opacity:.8}
.fiche .feuille{margin-top:-22px;position:relative;background:var(--blanc);border-radius:24px 24px 0 0;padding:16px 18px calc(24px + env(safe-area-inset-bottom,0px));display:grid;gap:12px}
.fiche .ligne{display:flex;justify-content:space-between;align-items:center}
.fiche .prix{font-size:13px;color:var(--gris)}
.fiche .prix b{font-family:var(--mono);font-size:21px;color:var(--encre)}
.fiche h2{margin:0;font-family:var(--serif);font-weight:400;font-size:44px;line-height:.9}
.fiche .region{font-size:13px;color:var(--gris);margin-top:-6px}
.tr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tr div{border:1px solid var(--bord);border-radius:14px;padding:8px 10px;display:grid;gap:1px}
.tr div.on{border:1.5px solid var(--encre)}
.tr div:only-child{grid-column:1/-1}
.tr .m{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700}
.tr .v{font-family:var(--mono);font-weight:700;font-size:15px}
.tr .co{font-size:12px;color:var(--gris)}
.tr .co b{color:var(--canard)}
.tr .co.lourd b{color:var(--chaud)}
.jours{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jour{background:var(--sable);border-radius:14px;padding:9px 11px;display:grid}
.jour .d{font-size:12px;color:var(--gris);font-weight:600}
.jour .v{font-family:var(--mono);font-weight:700;font-size:19px}
.jour .m{font-size:12px;color:var(--gris)}
.voir{display:flex;gap:6px;flex-wrap:wrap}
.voir span{background:var(--sable);border-radius:99px;padding:4px 11px;font-size:13px;font-weight:600}
.note{font-size:12px;color:var(--gris)}
.v.nc{font-family:var(--texte);font-weight:600;font-size:13px;color:var(--gris)}
.sugg .info{background:none;border:0;padding:4px 2px;color:var(--sable);opacity:.75;margin:0}

/* Écrans bas (Safari avec ses barres) : le bouton principal reste visible sans défiler */
@media (max-height:720px){
  .ouverture .haut{padding-top:calc(16px + env(safe-area-inset-top,0px));min-height:200px}
  .ouverture .haut small{display:none}
  .ouverture .bas{gap:10px;padding-top:10px}
  .verre{gap:8px;padding:10px}
}