/* ==========================================================================
   location-maurice.com — feuille de style des maquettes DA
   Direction artistique : voir ../DA.md
   Mascotte : le dodo (voir svg/dodo-*.svg)
   ========================================================================== */

:root{
  /* --- Palette : lagon + coucher de soleil tropical --- */
  --nuit-lagon:      #0B1F2A;   /* fond sombre principal (nuit sur le lagon) */
  --nuit-lagon-2:     #0F2A38;  /* fond sombre secondaire (cartes, bandes) */
  --nuit-lagon-3:     #143646;  /* fond sombre tertiaire (survol, inputs) */
  --lagon:            #14B8A6;  /* turquoise lagon — couleur de marque */
  --lagon-clair:       #5EEAD4;
  --corail:            #FF6B4A;  /* corail coucher de soleil — CTA */
  --corail-fonce:       #E14E30;
  --frangipanier:       #FFC94D; /* jaune frangipanier — accents, badges */
  --or:                 #F4C95D;  /* doré — boutons en relief */
  --or-fonce:            #B9812E;
  --vert-tropical:       #3BB273; /* vert — disponible / bonne affaire */
  --vert-fonce:            #227A50;
  --sable:                 #FFF8EC; /* fond clair (sections claires) */
  --sable-2:                 #FFF1D8;
  --encre:                   #0B1F2A; /* texte sur fond clair */
  --encre-douce:               #3A5361;
  --blanc:                     #FFFFFF;
  --ligne:                      rgba(255,255,255,.10);
  --ligne-claire:                rgba(11,31,42,.10);

  --police-titres: 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif;
  --police-texte:  'Manrope', system-ui, -apple-system, sans-serif;

  --rayon-s: 10px;
  --rayon-m: 18px;
  --rayon-l: 28px;
  --rayon-xl: 40px;

  --ombre-carte: 0 14px 34px rgba(2,10,15,.35);
  --ombre-relief-or: 0 1px 0 #fff6d8 inset, 0 -3px 0 var(--or-fonce) inset, 0 10px 18px rgba(184,120,20,.35);
  --ombre-relief-lagon: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 #0d7f73 inset, 0 8px 16px rgba(10,60,55,.4);
}

/* ==========================================================================
   MICRO-INTERACTIONS — le site ne doit plus être figé (retour Mathias 09/09).
   Règles : c'est TOUJOURS le visiteur qui déclenche (scroll, survol, clic —
   jamais un défilement automatique), et une pause au survol ne doit jamais
   figer une scène "vide" (DV-0028) : le repli de la carte 3D et les icônes
   n'ont pas d'état intermédiaire creux. Tout est désactivable via
   prefers-reduced-motion.
   ========================================================================== */
/* Corrigé le 11/09 (critique) : sans la classe .js posée par le script inline de
   <head> (JS bloqué/lent/désactivé), .reveal ne doit JAMAIS masquer de contenu —
   sinon l'accueil et la fiche (formulaire de lead compris) restent vides sur plus
   de 1000px si interactions.js ne s'exécute pas (429 TigerProtect, bloqueur…). */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease;}
.js .reveal.visible{opacity:1;transform:translateY(0);}
.reveal-stagger.visible{transition-delay:calc(var(--ordre,0) * 70ms);}

@keyframes entreeHaut{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:translateY(0);}}
@keyframes entreeBas{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes entreeZoom{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}
@keyframes flotter{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes compteurPulse{0%{transform:scale(1);}30%{transform:scale(1.08);}100%{transform:scale(1);}}

.entree-haut{animation:entreeHaut .6s ease both;}
.entree-bas{animation:entreeBas .7s ease both;}
.entree-zoom{animation:entreeZoom .6s ease both;}
.flotte{animation:flotter 4.5s ease-in-out infinite;}

@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  .entree-haut,.entree-bas,.entree-zoom,.flotte{animation:none;}
  *{scroll-behavior:auto !important;}
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--nuit-lagon);
  color:var(--blanc);
  font-family:var(--police-texte);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--police-titres);margin:0 0 .4em;line-height:1.15;letter-spacing:.2px;}
h1{font-size:clamp(28px,6vw,52px);font-weight:800;}
h2{font-size:clamp(22px,4vw,34px);font-weight:700;}
h3{font-size:20px;font-weight:700;}
p{margin:0 0 1em;}
.container{max-width:1240px;margin:0 auto;padding:0 20px;}
.only-mobile{display:none;}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* --- Boutons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--police-titres);font-weight:700;font-size:16px;
  padding:14px 26px;border-radius:999px;border:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(2px);}
.btn-or{
  background:linear-gradient(180deg,#FFE9A8 0%, var(--or) 45%, var(--or-fonce) 100%);
  color:#4A2E05;box-shadow:var(--ombre-relief-or);
}
.btn-or:hover{transform:translateY(-2px);}
.btn-lagon{
  background:linear-gradient(180deg,#3FE0CC 0%, var(--lagon) 55%, #0C8377 100%);
  color:#04302B;box-shadow:var(--ombre-relief-lagon);
}
.btn-lagon:hover{transform:translateY(-2px);}
.btn-ghost{
  background:rgba(255,255,255,.06);color:var(--blanc);
  border:1.5px solid var(--ligne);box-shadow:none;
}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-sm{padding:9px 16px;font-size:14px;}
.btn-full{width:100%;}

/* --- Bandeau garde-fou (pas de tel en clair) --- */
.bandeau-confiance{
  background:var(--nuit-lagon-3);color:#BFE9E3;font-size:13px;text-align:center;
  padding:8px 14px;border-bottom:1px solid var(--ligne);
}
.bandeau-confiance b{color:var(--frangipanier);}

/* --- Header --- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(11,31,42,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ligne);
}
.barre-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:14px;}
.logo-mark{display:flex;align-items:center;gap:10px;}
.logo-mark img{height:38px;width:auto;}
nav.principale{display:none;gap:22px;font-weight:600;font-size:15px;}
nav.principale a{opacity:.85;}
nav.principale a:hover{opacity:1;color:var(--lagon-clair);}
.actions-nav{display:flex;align-items:center;gap:10px;}
@media(min-width:900px){
  nav.principale{display:flex;}
}

/* --- Hero --- */
.hero{
  position:relative;
  background:
    radial-gradient(120% 100% at 15% 0%, rgba(20,184,166,.28), transparent 55%),
    radial-gradient(90% 80% at 100% 10%, rgba(255,107,74,.22), transparent 60%),
    linear-gradient(180deg, var(--nuit-lagon) 0%, var(--nuit-lagon-2) 100%);
  padding:56px 0 56px;
  overflow:hidden;
}
.vague-hero{display:block;width:100%;height:44px;position:absolute;left:0;right:0;bottom:-1px;z-index:1;}
.formes-flottantes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.forme{position:absolute;border-radius:50%;filter:blur(1px);opacity:.5;transition:transform .3s ease-out;}
.forme-1{width:120px;height:120px;background:radial-gradient(circle,var(--lagon-clair),transparent 70%);top:8%;left:6%;}
.forme-2{width:90px;height:90px;background:radial-gradient(circle,var(--corail),transparent 70%);top:60%;left:2%;opacity:.35;}
.forme-3{width:70px;height:70px;background:radial-gradient(circle,var(--frangipanier),transparent 70%);top:4%;right:34%;opacity:.4;}
@media(max-width:960px){.forme{display:none;}}

/* --- Rangée d'atouts du héros (retour 10/09 : les 3 pastilles doivent être
   ALIGNÉES, plus jamais éparpillées en position absolue dans le vide). --- */
.rangee-atouts-hero{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 2px;position:relative;z-index:1;}
.atout-mini{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);color:#EAF6F2;font-size:12.5px;font-weight:700;
  padding:7px 13px;border-radius:999px;backdrop-filter:blur(4px);white-space:nowrap;
}
.hero .container{display:grid;gap:34px;align-items:center;position:relative;z-index:1;}
@media(min-width:960px){
  .hero .container{grid-template-columns:1fr 1.05fr;}
}
.badge-pastille{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,201,77,.14);
  border:1px solid rgba(255,201,77,.4);color:var(--frangipanier);
  padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:16px;
}
.badge-pastille b{color:#FFF3D6;}
.hero p.lead{color:#CFE8E3;font-size:17px;max-width:560px;}

/* --- Visuel héro : la carte 3D en avant, le dodo en complément (retour 10/09) --- */
.hero-visuel{display:flex;flex-direction:column;gap:14px;}
.hero-carte3d-wrap{
  position:relative;border-radius:var(--rayon-l);overflow:hidden;
  border:1px solid var(--ligne);box-shadow:var(--ombre-carte);background:var(--nuit-lagon-3);
}
.carte3d-hero{width:100%;height:340px;background:#0F2A38;}
.badge-carte3d{
  position:absolute;top:12px;left:12px;z-index:3;background:rgba(11,31,42,.72);backdrop-filter:blur(4px);
  color:#FFF3D6;font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:999px;
}
.carte3d-hero-activation{
  display:none;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:30px 20px;height:340px;justify-content:center;
  background:linear-gradient(160deg,#0F2A38,#0B1F2A);color:#fff;
}
.carte3d-hero-activation p{font-size:13px;color:#BFE9E3;max-width:260px;margin:0;}
.mascotte-bulle-mini{display:flex;align-items:center;gap:12px;padding:0 4px;}
.mascotte-img-mini{width:56px;flex:none;}
.bulle-texte-mini{
  background:var(--nuit-lagon-3);border:1px solid var(--ligne);color:#CFE8E3;
  border-radius:14px 14px 14px 3px;padding:10px 14px;font-size:13px;font-weight:600;
}
.bulle-texte-mini b{color:var(--frangipanier);}
@media(max-width:959px){.carte3d-hero,.carte3d-hero-activation{height:260px;}}

/* --- Barre de recherche héro --- */
.recherche-hero{
  margin-top:22px;background:var(--nuit-lagon-3);border:1px solid var(--ligne);
  border-radius:var(--rayon-l);padding:16px;box-shadow:var(--ombre-carte);
}
.recherche-onglets{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.onglet{
  padding:8px 16px;border-radius:999px;font-weight:700;font-size:13.5px;cursor:pointer;
  background:transparent;color:#9FC7C0;border:1px solid transparent;
}
.onglet.actif{background:var(--lagon);color:#04302B;box-shadow:var(--ombre-relief-lagon);}
.grille-recherche{display:grid;gap:10px;grid-template-columns:1fr 1fr;}
@media(min-width:700px){.grille-recherche{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));align-items:end;}}
.grille-recherche .btn{grid-column:1/-1;}
@media(min-width:700px){.grille-recherche .btn{grid-column:auto;}}

/* --- Bande d'atouts (retour 10/09 : "mettre un maximum de nos atouts en avant") --- */
.bande-atouts{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-top:6px;}
@media(min-width:760px){.bande-atouts{grid-template-columns:repeat(4,1fr);}}
.atout-carte{
  background:var(--blanc);border:1px solid var(--ligne-claire);border-radius:var(--rayon-m);
  padding:18px 16px;text-align:center;box-shadow:0 8px 18px rgba(11,31,42,.06);
  transition:transform .2s ease;
}
.atout-carte:hover{transform:translateY(-4px);}
.atout-icone{font-size:26px;display:block;margin-bottom:6px;}
.atout-carte b{display:block;font-family:var(--police-titres);font-size:22px;color:var(--vert-fonce);}
.atout-carte span{font-size:12px;color:var(--encre-douce);line-height:1.3;display:block;margin-top:2px;}
.champ{
  background:var(--nuit-lagon);border:1px solid var(--ligne);border-radius:14px;
  padding:11px 14px;color:var(--blanc);font-family:var(--police-texte);font-size:14.5px;
}
.champ label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7FA9A1;margin-bottom:3px;font-weight:700;}
.champ select,.champ input{background:transparent;border:none;color:var(--blanc);width:100%;font-size:14.5px;font-family:inherit;padding:0;}
.champ select:focus,.champ input:focus{outline:none;}

/* --- Chiffres clés (calculés, jamais en dur) --- */
.chiffres-cles{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap;}
.chiffre{display:flex;flex-direction:column;}
.chiffre b{font-family:var(--police-titres);font-size:26px;color:var(--frangipanier);}
.chiffre span{font-size:12.5px;color:#9FC7C0;}

/* --- Sections claires --- */
.section-claire{background:var(--sable);color:var(--encre);padding:52px 0;}
.section-claire h2{color:var(--encre);}
.section-claire .souligne{color:var(--vert-fonce);}

/* --- Cartes catégories --- */
.grille-categories{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-top:24px;}
@media(min-width:760px){.grille-categories{grid-template-columns:repeat(4,1fr);}}
.carte-categorie{
  background:var(--blanc);border-radius:var(--rayon-m);padding:20px 16px;text-align:center;
  border:1px solid var(--ligne-claire);box-shadow:0 8px 18px rgba(11,31,42,.06);
  transition:transform .15s ease;
}
.carte-categorie:hover{transform:translateY(-4px);}
.carte-categorie .picto{font-size:34px;display:block;margin-bottom:8px;}
.carte-categorie b{display:block;font-family:var(--police-titres);}
.carte-categorie span{font-size:12.5px;color:var(--encre-douce);}

/* --- Cartes "coup de cœur" (gamification visuelle) ---
   Cartes volontairement GRANDES : 2 colonnes maximum même en large desktop,
   le visuel domine (retour Mathias du 09/09 : "la photo est minuscule"). */
.grille-biens{display:grid;gap:22px;grid-template-columns:1fr;margin-top:26px;}
@media(min-width:720px){.grille-biens{grid-template-columns:repeat(2,1fr);}}
.carte-bien{
  background:var(--blanc);border-radius:var(--rayon-m);overflow:hidden;
  box-shadow:0 10px 24px rgba(11,31,42,.10);border:1px solid var(--ligne-claire);
  display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.carte-bien:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(11,31,42,.16);}
.carte-bien .photo,.carte-bien .zone-graphique{position:relative;aspect-ratio:16/11;background:#cfe9e3;overflow:hidden;}
.carte-bien .photo > img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.carte-bien:hover .photo > img{transform:scale(1.07);}
.etiquette{
  position:absolute;top:10px;left:10px;background:var(--corail);color:#fff;
  font-weight:800;font-size:11.5px;padding:5px 10px;border-radius:999px;
  font-family:var(--police-titres);box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.etiquette.baisse{background:var(--vert-tropical);left:auto;right:10px;top:10px;}
.etiquette.neuf{background:var(--frangipanier);color:#4A2E05;top:44px;}
.dist-mer{
  position:absolute;bottom:10px;left:10px;background:rgba(11,31,42,.75);color:#BFE9E3;
  font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:999px;
  backdrop-filter:blur(3px);
}
.carte-bien .corps{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.carte-bien .prix{font-family:var(--police-titres);font-size:20px;color:var(--vert-fonce);}
.carte-bien .prix span{font-size:12px;color:var(--encre-douce);font-weight:600;}
.carte-bien .titre{font-weight:700;font-size:15px;color:var(--encre);}
.carte-bien .lieu{font-size:13px;color:var(--encre-douce);display:flex;align-items:center;gap:5px;}
.specs-mini{display:flex;gap:12px;font-size:12.5px;color:var(--encre-douce);margin-top:2px;flex-wrap:wrap;}
.specs-mini span{display:flex;align-items:center;gap:4px;}
.barre-match{margin-top:6px;}
.barre-match .lbl{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--encre-douce);margin-bottom:3px;}
.barre-match .piste{height:8px;border-radius:999px;background:#EFE6D4;overflow:hidden;}
.barre-match .remplissage{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--corail), var(--frangipanier), var(--vert-tropical));
}

/* --- Footer --- */
footer.site{background:var(--nuit-lagon-2);border-top:1px solid var(--ligne);padding:40px 0 26px;color:#9FC7C0;font-size:13.5px;}
footer.site .grille-footer{display:grid;gap:22px;grid-template-columns:1fr;}
@media(min-width:760px){footer.site .grille-footer{grid-template-columns:2fr 1fr 1fr 1fr;}}
footer.site h4{color:var(--blanc);font-family:var(--police-titres);font-size:14px;margin-bottom:10px;}
footer.site a{opacity:.85;} footer.site a:hover{opacity:1;color:var(--lagon-clair);}
.mentions{margin-top:26px;border-top:1px solid var(--ligne);padding-top:16px;font-size:12px;opacity:.7;}

/* ==========================================================================
   PAGE RÉSULTATS — filtres
   ========================================================================== */
.page-resultats{background:var(--sable);color:var(--encre);min-height:100vh;}
.entete-resultats{background:var(--nuit-lagon);color:#fff;padding:22px 0 26px;}
.fil-ariane{font-size:12.5px;color:#9FC7C0;margin-bottom:8px;}
.ligne-titre-resultats{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.compteur-resultats b{color:var(--frangipanier);font-family:var(--police-titres);}
.corps-resultats{display:block;padding:22px 0 60px;}
@media(min-width:980px){.corps-resultats{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:flex-start;}}

/* Panneau de filtres */
.panneau-filtres{
  background:var(--blanc);border:1px solid var(--ligne-claire);border-radius:var(--rayon-m);
  box-shadow:0 10px 24px rgba(11,31,42,.08);padding:18px;position:relative;
}
@media(min-width:980px){.panneau-filtres{position:sticky;top:90px;}}
.panneau-filtres h3{display:flex;align-items:center;justify-content:space-between;font-size:16px;}
.groupe-filtre{border-top:1px solid var(--ligne-claire);padding:14px 0;}
.groupe-filtre:first-of-type{border-top:none;padding-top:8px;}
.groupe-filtre .titre-groupe{display:flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;margin-bottom:10px;}
.chips{display:flex;gap:7px;flex-wrap:wrap;}
.chip{
  border:1.5px solid #E4D9C2;background:var(--sable-2);color:var(--encre);
  font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;gap:5px;
}
.chip{transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;}
.chip:hover{transform:translateY(-2px);}
.chip.actif{background:var(--lagon);border-color:var(--lagon);color:#04302B;}
@keyframes rebondChip{0%{transform:scale(1);}45%{transform:scale(1.12);}100%{transform:scale(1);}}
.onglet{transition:background .2s ease,color .2s ease,box-shadow .2s ease;}
.toggle{transition:background .2s ease;}
.toggle .bille{transition:left .22s cubic-bezier(.34,1.56,.64,1);}
.chip .n{opacity:.65;font-weight:600;}
/* --- Curseur de budget : zone de préhension réelle ≥44px (retour Mathias 11/09/2026) ---
   Le conteneur passe de 34 à 44px pour loger le vrai thumb natif à sa taille tactile ;
   la piste/remplissage visuelles restent fines (6px) et centrées dans cette hauteur.
   Chaque <input type=range> (.range-lo/.range-hi) est rendu transparent (appearance:none,
   fond invisible) et empilé sur .slider-piste : seul son thumb --stylé en 44×44 avec un
   disque visuel plus petit dedans (dégradé corail)-- reste visible et cliquable. */
.slider-double{position:relative;height:44px;margin-top:6px;}
.slider-piste{position:absolute;top:19px;left:0;right:0;height:6px;background:#EFE6D4;border-radius:999px;}
.slider-remplissage{position:absolute;top:19px;height:6px;background:linear-gradient(90deg,var(--corail),var(--frangipanier));border-radius:999px;left:22%;right:15%;}
.valeurs-slider{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--encre-douce);margin-top:4px;}

.slider-double input[type="range"]{
  -webkit-appearance:none;appearance:none;position:absolute;top:0;left:0;width:100%;height:44px;
  margin:0;background:transparent;pointer-events:none; /* le fond ne capte rien, seul le thumb capte */
}
.slider-double input[type="range"]::-webkit-slider-runnable-track{background:transparent;height:44px;}
.slider-double input[type="range"]::-moz-range-track{background:transparent;height:44px;border:none;}
.slider-double input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;cursor:grab;
  width:44px;height:44px;border-radius:50%;margin-top:0;box-shadow:0 3px 8px rgba(0,0,0,.18);
  background:radial-gradient(circle,var(--blanc) 0 16px,var(--corail) 16px 21px,transparent 21px 22px);
}
.slider-double input[type="range"]::-moz-range-thumb{
  pointer-events:auto;cursor:grab;width:44px;height:44px;border-radius:50%;border:none;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
  background:radial-gradient(circle,var(--blanc) 0 16px,var(--corail) 16px 21px,transparent 21px 22px);
}
.slider-double input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing;background:radial-gradient(circle,var(--blanc) 0 14px,var(--corail) 14px 21px,transparent 21px 22px);}
.slider-double input[type="range"]:active::-moz-range-thumb{cursor:grabbing;background:radial-gradient(circle,var(--blanc) 0 14px,var(--corail) 14px 21px,transparent 21px 22px);}
.slider-double input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 3px 8px rgba(0,0,0,.18),0 0 0 3px rgba(255,107,74,.35);}
.slider-double input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 3px 8px rgba(0,0,0,.18),0 0 0 3px rgba(255,107,74,.35);}
.slider-double input.range-solo{width:100%;}
.toggle-ligne{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:13.5px;font-weight:600;}
.toggle{width:40px;height:22px;border-radius:999px;background:#E4D9C2;position:relative;flex:none;cursor:pointer;}
.toggle.on{background:var(--vert-tropical);}
.toggle .bille{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;}
.toggle.on .bille{left:20px;}
.compteur-filtres{
  margin-top:14px;background:var(--nuit-lagon);color:var(--frangipanier);
  border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:700;text-align:center;
}
.alerte-filtre{
  margin-top:12px;border:1.5px dashed var(--lagon);border-radius:12px;padding:12px;
  font-size:12.5px;color:var(--vert-fonce);background:rgba(20,184,166,.08);
  display:flex;gap:8px;align-items:flex-start;font-weight:600;
}

/* Barre de tri + vue */
.barre-tri{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-bottom:16px;background:var(--blanc);border-radius:var(--rayon-s);padding:10px 14px;
  border:1px solid var(--ligne-claire);
}
.select-tri{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;flex-wrap:wrap;max-width:100%;}
.select-tri select{border:1.5px solid #E4D9C2;border-radius:10px;padding:7px 10px;font-family:inherit;font-weight:700;font-size:13px;background:var(--sable-2);max-width:100%;}
.tags-actifs{display:flex;gap:6px;flex-wrap:wrap;}
.tag-actif{background:var(--nuit-lagon);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;display:flex;gap:6px;align-items:center;}
.tag-actif b{cursor:pointer;opacity:.6;}

/* Carte-mini pour la vue carte */
.bloc-carte-interactive{
  background:linear-gradient(160deg,#0F2A38,#0B1F2A);border-radius:var(--rayon-m);
  height:170px;display:flex;align-items:center;justify-content:center;color:#7FA9A1;
  font-size:13px;font-weight:700;margin-bottom:18px;border:1px solid var(--ligne);
  position:relative;overflow:hidden;
}
.point-carte{position:absolute;background:var(--corail);color:#fff;font-weight:800;font-size:11px;
  padding:4px 8px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.3);}

/* ==========================================================================
   FICHE BIEN
   ========================================================================== */
.page-fiche{background:var(--sable);color:var(--encre);}
.ligne-titre-fiche{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:10px 0 6px;}
.ligne-titre-fiche h1{margin-bottom:6px;}
.prix-entete{font-family:var(--police-titres);font-size:clamp(22px,3.4vw,30px);color:var(--vert-fonce);white-space:nowrap;}
.galerie{display:grid;gap:6px;grid-template-columns:2fr 1fr;}
.galerie img{border-radius:var(--rayon-s);aspect-ratio:4/3;object-fit:cover;}
.galerie .colonne-vignettes{display:grid;gap:6px;grid-template-rows:1fr 1fr;}
.corps-fiche{display:block;padding:14px 0 30px;}
@media(min-width:980px){.corps-fiche{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:flex-start;}}
.colonne-principale{min-width:0;}
.bloc-fiche{background:var(--blanc);border-radius:var(--rayon-m);padding:22px;border:1px solid var(--ligne-claire);box-shadow:0 8px 18px rgba(11,31,42,.06);margin-bottom:18px;}
.bloc-fiche.visuel-fiche{padding:0;overflow:hidden;}
.bloc-fiche.visuel-fiche .galerie{padding:0;}
.bloc-fiche.visuel-fiche .zone-graphique-grande{border-radius:0;min-height:320px;}
.grille-atouts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.atout-chip{
  background:var(--sable-2);border:1px solid #E4D9C2;border-radius:999px;padding:9px 16px;
  font-size:13px;font-weight:700;color:var(--encre);display:flex;align-items:center;gap:6px;
}
.grille-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:10px;}
@media(min-width:560px){.grille-specs{grid-template-columns:repeat(3,1fr);}}
.spec{background:var(--sable-2);border-radius:12px;padding:12px;text-align:center;}
.spec b{display:block;font-family:var(--police-titres);font-size:17px;}
.spec span{font-size:11.5px;color:var(--encre-douce);}
.liste-equip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px;font-size:14px;}
@media(min-width:560px){.liste-equip{grid-template-columns:repeat(3,1fr);}}
.liste-equip li{display:flex;align-items:center;gap:8px;list-style:none;}
.liste-equip{padding:0;margin:8px 0 0;}
.check-vert{color:var(--vert-tropical);font-weight:900;}

.carte-lead{position:sticky;top:90px;background:var(--nuit-lagon);color:#fff;border-radius:var(--rayon-l);padding:22px;box-shadow:var(--ombre-carte);}
.carte-lead .prix-grand{font-family:var(--police-titres);font-size:26px;color:var(--frangipanier);}
.carte-lead .prix-grand span{font-size:13px;color:#9FC7C0;font-weight:600;}
.form-lead{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.form-lead input,.form-lead textarea{
  background:var(--nuit-lagon-3);border:1px solid var(--ligne);border-radius:12px;
  padding:11px 13px;color:#fff;font-family:inherit;font-size:14px;
}
.form-lead textarea{resize:vertical;min-height:64px;}
.form-lead .note{font-size:11.5px;color:#7FA9A1;}

.biens-similaires{margin-top:10px;}

/* --- Bouton filtres mobile (le panneau se replie sous 980px) --- */
.bouton-filtres-mobile{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--nuit-lagon);color:#fff;border:none;border-radius:var(--rayon-s);
  padding:13px 16px;font-family:var(--police-titres);font-weight:700;font-size:15px;
  margin-bottom:14px;cursor:pointer;
}
.bouton-filtres-mobile .pastille-nb{background:var(--corail);color:#fff;font-size:12px;border-radius:999px;padding:2px 8px;margin-left:8px;}
@media(min-width:980px){.bouton-filtres-mobile{display:none;}}
.panneau-filtres{display:none;}
.panneau-filtres.ouvert{display:block;}
@media(min-width:980px){.panneau-filtres{display:block !important;}}

/* ==========================================================================
   SYSTÈME 2 NIVEAUX DE CARTE (revu le 10/09/2026, retour Mathias) —
   contrainte juridique : jamais de photo du bien sans accord de l'agence.
   Niveau 1 = photo réelle du bien (agence partenaire).
   Niveau 2 = "carte-fiche graphique" : plus de photo de quartier/région
   floue qui laisse croire à une vraie photo — fond dégradé de la charte,
   grand pictogramme du type de bien, chiffres clés en gros, pastille
   POSITIVE ("Photos sur demande à l'agence"), mini-vignette carte si dispo.
   ========================================================================== */

.etiquette-partenaire{
  position:absolute;bottom:10px;right:10px;background:rgba(11,31,42,.78);color:#FFF3D6;
  font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;backdrop-filter:blur(3px);
}

/* --- Vignette source (comparateur) : traitée comme une citation --- */
.vignette-source{
  display:flex;align-items:center;gap:8px;background:var(--sable-2);border:1px solid #E4D9C2;
  border-radius:10px;padding:6px 8px;margin-top:4px;
}
.vignette-source img{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:none;filter:saturate(.9);}
.vignette-source .txt{font-size:11px;color:var(--encre-douce);line-height:1.25;}
.vignette-source .txt b{color:var(--encre);display:block;font-size:11.5px;}

.badges-illustres{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px;}
.badge-illustre{
  display:flex;align-items:center;gap:5px;background:var(--sable-2);border:1px solid #E4D9C2;
  border-radius:999px;padding:4px 9px 4px 4px;font-size:11px;font-weight:700;color:var(--encre);
}
.badge-illustre img{width:18px;height:18px;}
.distances-mini{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--encre-douce);margin-top:2px;}
.distances-mini span{display:flex;align-items:center;gap:4px;}

/* --- Niveau 2 : carte-fiche graphique (remplace la photo absente) ---
   Le pictogramme + les chiffres sont la vraie information : ce n'est jamais
   un cadre vide habillé, c'est une fiche à part entière. */
.zone-graphique{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding:16px;color:#fff;overflow:hidden;
}
.zone-graphique::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(130% 100% at 88% -15%, rgba(255,255,255,.28), transparent 60%);
}
.zone-graphique.grad-villa{background:linear-gradient(155deg,var(--corail) 0%, var(--or-fonce) 100%);}
.zone-graphique.grad-maison{background:linear-gradient(155deg,var(--vert-tropical) 0%, var(--nuit-lagon-2) 100%);}
.zone-graphique.grad-appartement{background:linear-gradient(155deg,var(--lagon) 0%, var(--nuit-lagon) 100%);}
.zone-graphique.grad-studio{background:linear-gradient(155deg,var(--frangipanier) 0%, var(--corail-fonce) 100%);}
.zone-graphique.grad-terrain{background:linear-gradient(155deg,var(--nuit-lagon-2) 0%, var(--lagon) 100%);}
.zone-graphique.grad-defaut{background:linear-gradient(155deg,var(--lagon) 0%, var(--corail) 100%);}
.pictogramme-bien{width:56px;height:56px;position:relative;z-index:1;flex:none;transition:transform .3s ease;}
.carte-bien:hover .pictogramme-bien{transform:scale(1.1) rotate(-3deg);}
.pastille-photos-demande{
  position:absolute;top:10px;right:10px;z-index:2;background:rgba(11,31,42,.5);backdrop-filter:blur(3px);
  color:#FFF3D6;font-size:10px;font-weight:800;padding:5px 10px;border-radius:999px;line-height:1.3;max-width:64%;text-align:right;
}
.chiffres-carte{display:flex;gap:16px;position:relative;z-index:1;margin-top:auto;flex-wrap:wrap;}
.chiffres-carte .cc{display:flex;flex-direction:column;}
.chiffres-carte .cc b{font-family:var(--police-titres);font-size:22px;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.2);}
.chiffres-carte .cc span{font-size:10px;opacity:.9;text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
.mini-carte-vignette{
  position:absolute;bottom:10px;right:10px;z-index:2;width:44px;height:44px;border-radius:10px;
  overflow:hidden;border:2px solid rgba(255,255,255,.75);box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.mini-carte-vignette img{width:100%;height:100%;object-fit:cover;}
.mini-carte-vignette::after{
  content:"🗺️";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:15px;background:rgba(11,31,42,.18);opacity:0;transition:opacity .2s;
}
.carte-bien:hover .mini-carte-vignette::after{opacity:1;}

/* Format grand (fiche-bien) */
.zone-graphique-grande{min-height:280px;padding:26px;border-radius:var(--rayon-m);}
.zone-graphique-grande .pictogramme-bien{width:88px;height:88px;}
.zone-graphique-grande .pastille-photos-demande{font-size:12.5px;padding:7px 14px;top:16px;right:16px;}
.zone-graphique-grande .chiffres-carte{gap:28px;}
.zone-graphique-grande .chiffres-carte .cc b{font-size:32px;}
.zone-graphique-grande .chiffres-carte .cc span{font-size:11.5px;}
.zone-graphique-grande .mini-carte-vignette{width:60px;height:60px;bottom:16px;right:16px;}

/* --- Légende du système de carte (page résultats) --- */
.legende-niveaux{
  display:flex;gap:14px;flex-wrap:wrap;background:var(--blanc);border:1px solid var(--ligne-claire);
  border-radius:var(--rayon-s);padding:10px 14px;margin-bottom:16px;font-size:12px;font-weight:700;color:var(--encre-douce);
}
.legende-niveaux span{display:flex;align-items:center;gap:6px;}
.puce-legende{width:11px;height:11px;border-radius:50%;display:inline-block;}

/* ==========================================================================
   NIVEAU 2 & 3 DE PHOTO (revu le 11/09/2026, retour Mathias : "ne mets pas des
   faux cadrans, mets quand même une photo, même de la ville ou de la rue, une
   photo de proximité"). Niveau 2 = vignette source en grand (vraie photo du
   bien, comparateur). Niveau 3 = vraie photo de la localité (banque documentée
   dans assets/quartiers/PHOTOS-LOCALITES.md), jamais un dégradé/pictogramme —
   les chiffres clés restent en bandeau par-dessus, comme avant.
   ========================================================================== */
.legende-photo-origine{
  font-size:12px;color:var(--encre-douce);margin-top:6px;font-weight:700;
}
.niveau-quartier-photo{position:relative;overflow:hidden;background:#cfe9e3;}
.niveau-quartier-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.niveau-quartier-photo-grande{min-height:280px;border-radius:var(--rayon-m);}
.legende-quartier{
  position:absolute;bottom:10px;left:10px;z-index:2;background:rgba(11,31,42,.7);color:#FFF3D6;
  font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;backdrop-filter:blur(3px);
}
.badge-type-bien-mini{
  position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;
  background:rgba(11,31,42,.55);border-radius:50%;padding:6px;backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
}
.badge-type-bien-mini .pictogramme-bien{width:100%;height:100%;}
.niveau-quartier-photo-grande .badge-type-bien-mini{width:44px;height:44px;padding:9px;}
.bandeau-chiffres-quartier{
  position:absolute;left:0;right:0;bottom:0;z-index:1;margin-top:0;
  background:linear-gradient(0deg, rgba(11,31,42,.75) 0%, rgba(11,31,42,.32) 75%, transparent 100%);
  padding:22px 14px 10px;color:#fff;
}
.niveau-quartier-photo-grande .bandeau-chiffres-quartier{padding:34px 20px 16px;}
.niveau-quartier-photo-grande .bandeau-chiffres-quartier .cc b{font-size:32px;}
.niveau-quartier-photo-grande .bandeau-chiffres-quartier .cc span{font-size:11.5px;}
.niveau-quartier-photo-grande .legende-quartier{font-size:12.5px;padding:7px 14px;}

/* ==========================================================================
   CARTE 3D DU BIEN + VUE MER (fiche-bien.html)
   ========================================================================== */
.bloc-carte3d{padding:0;overflow:hidden;}
.entete-carte3d{padding:18px 22px 0;}
#carte3d{width:100%;height:460px;background:#0F2A38;}
@media(min-width:980px){#carte3d{height:520px;}}
#carte3d-mobile-activation{
  display:none;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:26px 20px;background:linear-gradient(160deg,#0F2A38,#0B1F2A);color:#fff;
}
#carte3d-mobile-activation img{width:90px;}
#carte3d-mobile-activation p{font-size:13px;color:#BFE9E3;max-width:280px;margin:0;}
.zone-resultats-carte{padding:16px 22px 22px;display:flex;flex-direction:column;gap:10px;}
.resultat-vue-mer{
  border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600;line-height:1.4;
}
.resultat-vue-mer.confirmee{background:#E3F5EA;color:#1C5B3B;border:1px solid #9FDDBB;}
/* Ton neutre (retour 10/09) : "bloquée" reste informatif, pas alarmant — même texte, gris. */
.resultat-vue-mer.bloquee{background:#EDEDED;color:#494949;border:1px solid #D6D6D6;}
.resultat-vue-mer.attente{background:#F1EFE7;color:#7A6A45;border:1px solid #E3D9BE;}
#resultat-coucher-soleil{
  background:#FFF1D8;border:1px solid #F0DBA5;color:#6B4E12;border-radius:12px;
  padding:12px 14px;font-size:13.5px;font-weight:600;line-height:1.4;
}
.methode-calcul{font-size:11.5px;color:var(--encre-douce);display:flex;gap:6px;align-items:flex-start;padding-top:8px;}
.methode-calcul b{color:var(--encre);}
/* Bloc "Méthode" réduit à une ligne dépliable (retour 10/09) — une info de calcul,
   pas un pavé qui alourdit la fiche. */
.methode-calcul-details{font-size:12px;}
.methode-calcul-details summary{
  cursor:pointer;font-weight:700;color:var(--encre-douce);list-style:none;
  display:inline-flex;align-items:center;gap:6px;padding:2px 0;
}
.methode-calcul-details summary::-webkit-details-marker{display:none;}
.methode-calcul-details summary::after{content:"▾";font-size:10px;transition:transform .2s ease;}
.methode-calcul-details[open] summary::after{transform:rotate(180deg);}
.methode-calcul-details summary:hover{color:var(--encre);}
.ligne-actions-carte{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.bouton-streetview{position:relative;}
.pastille-bientot{
  position:absolute;top:-8px;right:-10px;background:var(--corail);color:#fff;font-size:9.5px;
  font-weight:800;padding:2px 6px;border-radius:999px;
}
.legende-carte{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--encre-douce);}
.legende-carte span{display:flex;align-items:center;gap:5px;}
.pastille-anneau{width:14px;height:2px;background:repeating-linear-gradient(90deg,#FF6B4A 0 4px,transparent 4px 7px);display:inline-block;}

/* --- Repli statique de la carte 3D (jamais de cadre vide) --- */
#carte3d.repli-actif{background:#0F2A38;}
.repli-carte3d{position:relative;width:100%;height:100%;overflow:hidden;}
.repli-carte3d img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1);}
.repli-carte3d-repere{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);font-size:34px;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));animation:rebondRepere 1.6s ease-in-out infinite;
}
@keyframes rebondRepere{0%,100%{transform:translate(-50%,-100%);}50%{transform:translate(-50%,-112%);}}
.repli-carte3d-bandeau{
  position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(11,31,42,.92),rgba(11,31,42,.1));
  color:#FFF3D6;font-size:12.5px;font-weight:600;padding:34px 16px 12px;line-height:1.4;
}
.repli-carte3d-bandeau a{color:var(--frangipanier);font-weight:800;white-space:nowrap;}

/* --- Espace agence (inscription/connexion/dépôt/tableau de bord/admin) — ajouts qui
   complètent .form-lead (select, upload de photos) sans toucher aux règles existantes. --- */
.form-lead select,
.form-lead input[type="file"]{
  background:var(--nuit-lagon-3);border:1px solid var(--ligne);border-radius:12px;
  padding:11px 13px;color:#fff;font-family:inherit;font-size:14px;
}
.form-lead select{appearance:auto;}
.form-lead input[type="file"]{padding:9px 13px;}
.form-lead label{margin-bottom:-4px;}
.tableau-bord table{background:transparent;}
.tableau-bord table th,.tableau-bord table td{vertical-align:top;}