/* HC Immo — la vitrine (site 1, public).

   CHARTE REFAITE LE 07/10/2026 (demande d'Hadrien : « ce n'est pas pro »).
   L'ancienne était une nuit violette : élégante sur une maquette, mais un acquéreur qui cherche une
   maison dans les Pyrénées-Orientales attend de la lumière, pas un fond de salle de serveurs — et un
   vendeur confie 300 000 € à ce qui ressemble à une agence, pas à une application.

   Le parti : le papier et la terre du Roussillon. Fond crème, beaucoup de blanc, un bleu d'encre
   pour le texte, une terre cuite pour ce qui appelle à agir et pour le prix. La profondeur vient de
   l'ombre portée, plus du contraste de luminosité. Le monospace redevient ce qu'il doit être — une
   étiquette discrète (référence, secteur) — et JAMAIS un prix : un prix se lit dans la police de
   titre, c'est le chiffre que tout le monde cherche.

   Seule exception à la charte : les couleurs réglementaires de l'étiquette DPE. */

@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("fonts/martian-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme:light;
  --fond:#FAF7F2; --surface:#FFFFFF; --trait:#E4DCCF;
  /* « violet » et « violet-c » gardent leur nom — ils sont cités partout — mais portent désormais
     l'encre et la terre cuite de la nouvelle charte. Renommer 300 occurrences n'apporterait rien. */
  --violet:#1D3B4D; --violet-c:#9A4523; --orange:#B5502B;
  --terre:#B5502B; --terre-f:#8A3A1C; --encre:#1D3B4D;
  --texte:#16222B; --faible:#5E6B74;
  --neutre:#8A8578; --valide:#2E7D4F; --alerte:#C0392B;
  --ombre:0 1px 2px rgba(29,59,77,.05), 0 8px 24px -12px rgba(29,59,77,.16);
  --ombre-f:0 2px 4px rgba(29,59,77,.06), 0 20px 48px -20px rgba(29,59,77,.26);
  --display:"Space Grotesk","Archivo",system-ui,sans-serif;
  --corps:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --t-xs:.72rem; --t-s:.875rem; --t-m:1rem; --t-l:1.25rem; --t-xl:1.9rem;
  --t-titre:clamp(2rem,4vw,3.2rem); --t-page:clamp(2.3rem,5vw,4rem); --t-heros:clamp(2.5rem,5.6vw,4.8rem);
  --gout:clamp(16px,4vw,56px);
  --doux:cubic-bezier(.2,.7,.1,1);
}

/* ═══════════ base ═══════════ */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--fond);scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--corps);font-size:var(--t-m);line-height:1.55;-webkit-font-smoothing:antialiased}
body.menu-ouvert{overflow:hidden}
a{color:var(--violet-c)}
:focus-visible{outline:2px solid var(--violet-c);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.04;text-wrap:balance;margin:0}
p{margin:0}
button{font:inherit;color:inherit}
img{max-width:100%}
.mono{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.05em}
.faible{color:var(--faible)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.enveloppe{max-width:1280px;margin-inline:auto;padding-inline:var(--gout)}
.surtitre{display:block;color:var(--violet-c);font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase}
.chapo{max-width:56ch;color:var(--faible);font-size:var(--t-l);line-height:1.45}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.note{font-size:var(--t-s);color:var(--faible);max-width:65ch}
.note b{color:var(--texte);font-weight:600}
.espace{height:clamp(56px,8vw,112px)}
.evitement{position:absolute;left:12px;top:-60px;z-index:100;background:var(--texte);color:var(--fond);padding:10px 14px;border-radius:6px}
.evitement:focus{top:12px}
#vue{outline:none}
@media (prefers-reduced-motion:no-preference){
  #vue.entree{animation:entree .6s var(--doux)}
  @keyframes entree{from{opacity:.001;transform:translateY(12px)}}
}

.annonce{background:var(--surface);color:var(--faible);text-align:center;padding:7px 16px;border-bottom:1px solid var(--trait)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--texte);color:var(--fond);padding:12px 18px;border-radius:999px;font-weight:600;font-size:var(--t-s)}

/* ═══════════ boutons et liens ═══════════ */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:var(--t-s);line-height:1;padding:15px 22px;border-radius:999px;text-decoration:none;cursor:pointer;border:1px solid var(--violet);transition:background .3s,border-color .3s;white-space:nowrap}
.bouton-plein{background:var(--violet);color:var(--texte)}
.bouton-plein:hover{background:color-mix(in srgb,var(--violet) 80%,var(--texte))}
.bouton-creux{background:none;color:var(--texte)}
.bouton-creux:hover{border-color:var(--violet-c)}
.fleche{display:inline-block;transition:transform .35s var(--doux)}
.bouton:hover .fleche,.lien-fleche:hover .fleche,a:hover > .lien-fleche .fleche{transform:translateX(4px)}
.lien-fleche{display:inline-flex;gap:8px;align-items:center;color:var(--texte);text-decoration:none;font-weight:600;font-size:var(--t-s);border-bottom:1px solid var(--violet);padding-bottom:4px}
.lien-discret{background:none;border:0;padding:0;color:var(--faible);font-size:var(--t-s);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lien-discret:hover{color:var(--texte)}

/* ═══════════ en-tête ═══════════ */
.tete{position:sticky;top:0;z-index:30;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.tete.defile{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-color:var(--trait)}
.tete .enveloppe{display:flex;align-items:center;gap:24px;padding-block:16px}
.marque{display:flex;flex-direction:column;gap:4px;margin-right:auto;text-decoration:none;color:var(--texte)}
.marque b{font:700 1.2rem/1 var(--display);letter-spacing:-.01em}
.marque span{color:var(--faible)}
.nav{display:flex;gap:24px;font-size:var(--t-s)}
.nav a{color:var(--texte);text-decoration:none;background:linear-gradient(var(--violet-c),var(--violet-c)) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .4s var(--doux),color .3s}
.nav a:hover,.nav a[aria-current]{background-size:100% 1px}
.nav a[aria-current]{color:var(--violet-c)}
.nav a.nav-projet{color:var(--terre);font-weight:700}
@media (max-width:1400px){.nav{gap:16px}}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--trait);background:none;cursor:pointer;position:relative}
.burger span:not(.sr){position:absolute;left:14px;right:14px;height:1.5px;background:var(--texte);transition:transform .35s var(--doux)}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1279px){.nav{display:none}.burger{display:block}}
@media (max-width:520px){.tete-cta{display:none}}

.menu{position:fixed;inset:0;z-index:25;background:var(--fond);padding:110px var(--gout) 40px;display:grid;align-content:space-between;gap:32px;overflow-y:auto}
.menu nav{display:grid;gap:6px}
.menu nav a{font:700 clamp(2rem,8vw,3.2rem)/1.15 var(--display);letter-spacing:-.03em;color:var(--texte);text-decoration:none}
.menu nav a:hover{color:var(--violet-c)}
@media (prefers-reduced-motion:no-preference){.menu:not([hidden]) nav a{animation:monte .6s var(--doux) both;animation-delay:calc(var(--i) * 45ms)}}

/* ═══════════ visuels peints ═══════════ */
.scene{position:relative;overflow:hidden;background:var(--surface);border-radius:8px;max-width:100%}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.scene .etiq{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:6px;z-index:2}
.pastille{font:400 var(--t-xs)/1 var(--mono);padding:7px 10px;border-radius:999px;background:rgba(11,7,20,.72);color:var(--texte);letter-spacing:.05em;backdrop-filter:blur(6px)}
.pastille.neutre{background:var(--neutre)}
@media (prefers-reduced-motion:no-preference){
  .scene.vivante canvas{animation:respire 26s ease-in-out infinite alternate}
  @keyframes respire{to{transform:scale(1.07) translate(-1%,-1%)}}
}

/* ═══════════ héros de l'accueil ═══════════ */
.heros{position:relative;padding-block:clamp(28px,6vw,72px) 8px;overflow:hidden}
.heros-texte{position:relative;display:grid;gap:24px;max-width:940px}
.heros-texte::before{content:"";position:absolute;inset:-180px auto auto -220px;width:780px;height:540px;background:radial-gradient(closest-side,color-mix(in srgb,var(--violet) 45%,transparent),transparent);z-index:-1;pointer-events:none}
.heros h1{font-size:var(--t-heros)}
.heros h1 .mot{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  /* 08/10 : premier écran lisible en moins d'une seconde au téléphone (avant : 1,35 s pour le texte). */
  .heros h1 .mot{animation:monte .6s var(--doux) both;animation-delay:calc(var(--i) * 40ms)}
  .heros .surtitre,.heros .chapo,.heros .actions{animation:monte .6s var(--doux) .2s both}
  @keyframes monte{from{transform:translateY(.45em);opacity:0}}
}

/* ═══════════ sections ═══════════ */
.section{padding-block:clamp(64px,10vw,128px)}
.section + .section{border-top:1px solid var(--trait)}
.section.haut{padding-top:clamp(32px,5vw,64px)}
.section-tete{display:flex;align-items:end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,56px)}
.section-tete h2{font-size:var(--t-titre);margin-top:14px}
.section-tete > p{max-width:46ch;color:var(--faible)}
.deux-colonnes{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.deux-colonnes > div:first-child{display:grid;gap:16px;align-content:start}
.deux-colonnes h2{font-size:var(--t-titre)}
@media (max-width:860px){.deux-colonnes{grid-template-columns:1fr}}

/* ─── cartes de biens ─── */
.grille-biens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 24px}
@media (max-width:980px){.grille-biens{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grille-biens{grid-template-columns:1fr}}
.carte{display:grid;gap:16px;align-content:start;text-decoration:none;color:inherit}
.carte .scene{aspect-ratio:4/5}
.carte.vedette{grid-column:1/-1;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:end}
.carte.vedette .scene{aspect-ratio:16/10}
.carte.vedette h3{font:700 clamp(1.8rem,3vw,2.6rem)/1.05 var(--display);letter-spacing:-.025em}
@media (max-width:980px){.carte.vedette{grid-template-columns:1fr;gap:16px}}
.carte.vendue .scene{filter:grayscale(.7) brightness(.8)}
.carte .infos{display:grid;gap:10px}
.carte .lieu{color:var(--violet-c)}
.carte h3{font:600 var(--t-l)/1.25 var(--corps);letter-spacing:0;transition:color .3s}
.carte:hover h3{color:var(--violet-c)}
.carte .chiffres{display:flex;gap:6px 16px;flex-wrap:wrap;color:var(--faible);font-size:var(--t-s)}
.carte .bas{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--trait);padding-top:12px;margin-top:4px}
.carte .prix{font:400 var(--t-m) var(--mono)}
.dpe-mini{display:inline-flex;align-items:center;gap:6px;color:var(--faible)}
.lettre{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:3px;font:700 12px/1 var(--corps);color:#111}
.vide{grid-column:1/-1;border:1px solid var(--trait);border-radius:14px;padding:clamp(24px,4vw,44px);display:grid;gap:16px;justify-items:start}
.vide h3{font-size:var(--t-xl)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .carte .scene,.carte-secteur .scene,.panneau .scene{animation:devoile linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    @keyframes devoile{from{clip-path:inset(8% 5% 0 5% round 8px)}to{clip-path:inset(0 round 8px)}}
    .frise li,.tuile{animation:glisse-haut linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
    @keyframes glisse-haut{from{transform:translateY(28px)}}
  }
}

/* étiquettes DPE / GES — couleurs réglementaires */
.dpe-A{background:#009C6D}.dpe-B{background:#52B153}.dpe-C{background:#78BD76}.dpe-D{background:#F4E70F}.dpe-E{background:#F0B40F}.dpe-F{background:#EB8235}.dpe-G{background:#D7221F;color:#fff}
.ges-A{background:#A4DBF8}.ges-B{background:#8CB4D2}.ges-C{background:#7792B1}.ges-D{background:#5F6F8F;color:#fff}.ges-E{background:#4A5272;color:#fff}.ges-F{background:#373454;color:#fff}.ges-G{background:#281B35;color:#fff}

/* ─── carte du département ─── */
.carte-66{display:block;width:100%;height:auto;overflow:visible}
.carte-66 .dep{fill:rgba(29,59,77,.06);stroke:rgba(29,59,77,.28);stroke-width:1.5;stroke-linejoin:round}
/* Avec le fond IGN, le département n'a plus besoin d'être rempli : seul son contour le détoure. */
.carte-66.avec-fond .dep{fill:none;stroke:rgba(29,59,77,.55);stroke-width:1.8}
.carte-66.avec-fond .commune{fill:rgba(255,255,255,.55)}
.carte-66.avec-fond .commune.on{fill:var(--violet-c);stroke:#fff;stroke-width:4;stroke-opacity:.5}
.carte-66.avec-fond .labels text{paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:3.5;stroke-linejoin:round}
.carte-66.avec-fond .canigou text,.carte-66.avec-fond .mer-txt{paint-order:stroke;stroke:rgba(255,255,255,.86);stroke-width:3}
.carte-attribution{display:block;margin-top:.4rem;font:400 .68rem/1.3 var(--mono);color:var(--faible);letter-spacing:.02em}
.carte-66 .commune{fill:rgba(29,59,77,.34);transition:fill .35s}
.carte-66 .commune.on{fill:var(--violet-c);stroke:var(--violet-c);stroke-width:5;stroke-opacity:.55}
.carte-66.mode-secteurs .commune{cursor:pointer}
.carte-66.mode-locator .commune{fill:rgba(29,59,77,.18)}
.carte-66.mode-locator .commune.on{fill:var(--violet-c);stroke-width:7}
.carte-66.mode-zone .commune{fill:rgba(181,80,43,.55)}
.carte-66 .canigou path{fill:var(--texte)}
.carte-66 .canigou text,.carte-66 .mer-txt{fill:var(--faible);font:400 13px var(--mono);letter-spacing:.08em}
.etiquette-secteur text{fill:var(--texte);font:600 17px var(--corps);paint-order:stroke;stroke:var(--fond);stroke-width:5px;stroke-linejoin:round;transition:fill .3s}
.etiquette-secteur.on text,.etiquette-secteur:hover text{fill:var(--violet-c)}
.carte-66 .halo{fill:rgba(29,59,77,.16);transform-box:fill-box;transform-origin:center}
.carte-66 .coeur{fill:var(--violet-c);stroke:var(--fond);stroke-width:3;transition:fill .3s}
.pin-carte{cursor:pointer}
.pin-carte:hover .coeur,.pin-carte.on .coeur,.pin-carte:focus .coeur{fill:var(--texte)}
@media (prefers-reduced-motion:no-preference){.carte-66 .halo{animation:pouls-carte 2.6s ease-in-out infinite}@keyframes pouls-carte{50%{transform:scale(1.5);opacity:.3}}}
@media (max-width:640px){.carte-66 .mer-txt{display:none}
  /* Les étiquettes restent : sans elles, la carte n'offre plus aucune entrée vers les secteurs au
     doigt (le survol n'existe pas). On les réduit au lieu de les masquer. */
  .carte-66 .labels text{font-size:19px}}

/* ─── territoire (accueil) ─── */
.territoire{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:960px){.territoire{grid-template-columns:1fr}}
.territoire-texte{display:grid;gap:16px}
.territoire-texte h2{font-size:var(--t-titre)}
.lignes-secteurs{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--trait)}
.lignes-secteurs a{display:grid;grid-template-columns:1fr auto 32px;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--trait);color:var(--texte);text-decoration:none;transition:padding .4s var(--doux),color .3s}
.lignes-secteurs a.on,.lignes-secteurs a:hover{padding-left:12px;color:var(--violet-c)}
.lignes-secteurs .nom{font-weight:600}
.lignes-secteurs .compte{text-align:right;color:var(--violet-c)}

/* ─── duo vendre / acheter ─── */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.panneau{position:relative;min-height:440px;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none;color:var(--texte);border:1px solid var(--trait)}
.panneau .scene{position:absolute;inset:0;border-radius:0}
.panneau::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,7,20,.95) 20%,rgba(11,7,20,.2) 70%,transparent)}
.panneau-texte{position:relative;z-index:2;padding:clamp(22px,3vw,36px);display:grid;gap:12px;max-width:44ch}
.panneau-texte h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.panneau-texte p{color:var(--faible)}
.panneau-texte .lien-fleche{justify-self:start}
.panneau:hover canvas{scale:1.03;transition:scale 1.2s var(--doux)}

/* ─── qui suis-je ─── */
.moi{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.moi.grand{align-items:start}
@media (max-width:760px){.moi{grid-template-columns:1fr}}
.portrait{aspect-ratio:4/5;max-width:100%;border-radius:12px}
.portrait .initiale{position:absolute;left:24px;bottom:12px;z-index:2;font:700 clamp(6rem,14vw,11rem)/1 var(--display);letter-spacing:-.05em;color:var(--texte);opacity:.92}
.moi .texte{display:grid;gap:18px;max-width:58ch}
.moi h1{font-size:clamp(2rem,3.6vw,3.1rem)}
.moi h2{font-size:var(--t-titre)}
.moi .texte > p{color:var(--faible);font-size:var(--t-l);line-height:1.5}

/* ─── bande d'action ─── */
.bande-action{border-top:1px solid var(--trait);background:radial-gradient(60% 120% at 100% 0,color-mix(in srgb,var(--violet) 22%,transparent),transparent),var(--surface)}
.bande-action .enveloppe{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding-block:clamp(48px,7vw,88px)}
.bande-action h2{font-size:var(--t-titre);max-width:18ch}
.bande-action p{color:var(--faible);max-width:52ch;margin-top:12px}

/* ═══════════ en-tête des pages ═══════════ */
.page-tete{padding-block:clamp(24px,4vw,48px) clamp(40px,6vw,72px);border-bottom:1px solid var(--trait)}
.fil{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--faible);padding-block:6px 22px}
.fil a{color:var(--faible);text-decoration:none}
.fil a:hover{color:var(--texte)}
.fil [aria-current]{color:var(--texte)}
.page-tete-grille{display:flex;justify-content:space-between;align-items:end;gap:24px 48px;flex-wrap:wrap}
.page-tete-grille > div:first-child{display:grid;gap:18px;max-width:900px}
.page-tete h1{font-size:var(--t-page)}
.page-tete-action{display:grid;gap:12px;justify-items:start}
.prochain{display:flex;gap:10px;align-items:center;color:var(--faible);font-size:var(--t-s)}
.prochain i{width:8px;height:8px;border-radius:50%;background:var(--valide);flex:none}
@media (prefers-reduced-motion:no-preference){.prochain i{animation:battement 2.4s ease-in-out infinite}@keyframes battement{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--valide) 25%,transparent)}}}

/* ═══════════ liste des biens ═══════════ */
.barre-filtres{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-block:28px 14px}
.filtres{display:flex;gap:6px;flex-wrap:wrap}
.filtre{font:400 var(--t-xs)/1 var(--mono);color:var(--faible);background:none;border:1px solid var(--trait);border-radius:999px;padding:11px 15px;cursor:pointer;transition:color .3s,border-color .3s}
.filtre:hover{color:var(--texte)}
.filtre[aria-pressed="true"]{color:var(--texte);border-color:var(--violet-c)}
.selecteurs{display:flex;gap:8px;flex-wrap:wrap}
select{font:400 var(--t-m)/1.2 var(--corps);color:var(--texte);background:var(--surface);border:1px solid var(--trait);border-radius:999px;padding:11px 36px 11px 15px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faible) 50%),linear-gradient(135deg,var(--faible) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.barre-resultats{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding-block:14px 32px;border-bottom:1px solid var(--trait);margin-bottom:40px}
.barre-resultats > span{margin-right:auto;color:var(--violet-c)}
.interrupteur{display:inline-flex;align-items:center;gap:10px;margin:0;font-weight:400;font-size:var(--t-s);color:var(--faible);cursor:pointer}
.interrupteur input{position:absolute;opacity:0;width:1px;height:1px}
.interrupteur span{width:38px;height:22px;border-radius:999px;background:var(--trait);position:relative;transition:background .3s}
.interrupteur span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--texte);transition:transform .3s var(--doux)}
.interrupteur input:checked + span{background:var(--violet)}
.interrupteur input:checked + span::after{transform:translateX(16px)}
.interrupteur input:focus-visible + span{outline:2px solid var(--violet-c);outline-offset:2px}
.bascule-vue{display:inline-flex;border:1px solid var(--trait);border-radius:999px;padding:3px}
.bascule-vue button{border:0;background:none;padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:600;font-size:var(--t-s);color:var(--faible)}
.bascule-vue button[aria-pressed="true"]{background:var(--texte);color:var(--fond)}
.vue-carte{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:900px){.vue-carte{grid-template-columns:1fr}}
.vue-carte-carte{position:sticky;top:96px;border:1px solid var(--trait);border-radius:14px;padding:clamp(12px,2vw,24px);background:var(--surface)}
.liste-compacte{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.liste-compacte a{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:8px;border:1px solid var(--trait);border-radius:10px;color:var(--texte);text-decoration:none;transition:border-color .3s}
.liste-compacte a:hover{border-color:var(--violet-c)}
.liste-compacte .scene{height:72px;border-radius:6px}
.liste-compacte a > span{display:grid;gap:3px;font-size:var(--t-s)}
.liste-compacte b{font-weight:600}

/* ═══════════ fiche d'un bien ═══════════ */
.galerie{display:grid;gap:10px}
.scene-scene{position:relative;aspect-ratio:16/8;max-width:100%;border-radius:12px;overflow:hidden;background:var(--surface)}
@media (max-width:700px){.scene-scene{aspect-ratio:4/3}}
.scene-scene .scene{position:absolute;inset:0;border-radius:0;opacity:0;transition:opacity .9s ease}
.scene-scene .scene.active{opacity:1}
.galerie-ctrl{position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:3}
.galerie-fleches{display:flex;gap:8px}
.rond{width:46px;height:46px;border-radius:50%;border:1px solid rgba(29,59,77,.3);background:rgba(11,7,20,.55);backdrop-filter:blur(6px);cursor:pointer;display:grid;place-items:center;transition:background .3s}
.rond:hover{background:var(--violet)}
.compteur{background:rgba(255,255,255,.7);padding:9px 13px;border-radius:999px;backdrop-filter:blur(6px)}
.vignettes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.vignette{position:relative;aspect-ratio:3/2;border:1px solid var(--trait);border-radius:8px;overflow:hidden;cursor:pointer;padding:0;background:var(--surface);opacity:.5;transition:opacity .3s,border-color .3s}
.vignette:hover{opacity:.8}
.vignette[aria-current="true"]{opacity:1;border-color:var(--violet-c)}
.vignette .scene{position:absolute;inset:0;border-radius:0}
.fiche-corps{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(32px,5vw,80px);padding-block:48px 40px;align-items:start}
@media (max-width:980px){.fiche-corps{grid-template-columns:1fr}}
.fiche-tete{display:grid;gap:16px;margin-bottom:36px}
.fiche-tete h1{font-size:clamp(2.1rem,4vw,3.4rem)}
.atouts{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.atouts li{border:1px solid var(--trait);border-radius:999px;padding:7px 12px;font-size:var(--t-s);color:var(--faible)}
.chiffres-cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);margin:0 0 56px}
.chiffres-cles div{padding:18px 12px 18px 0;display:grid;gap:6px}
.chiffres-cles dt{color:var(--faible);font:400 var(--t-xs) var(--mono);letter-spacing:.05em;text-transform:uppercase}
.chiffres-cles dd{margin:0;font:700 var(--t-xl)/1 var(--display);letter-spacing:-.02em}
.chiffres-cles dd small{font:400 var(--t-s) var(--corps);color:var(--faible);letter-spacing:0}
.bloc{display:grid;gap:16px;margin-bottom:56px}
.bloc h2{font-size:var(--t-l)}
.bloc p{max-width:65ch}
.table-defil{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--t-s)}
th,td{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--trait);vertical-align:top}
th{color:var(--faible);font:400 var(--t-xs) var(--mono);letter-spacing:.05em;text-transform:uppercase}
.droite-t{text-align:right;padding-right:0}
.energie{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.echelle{display:grid;gap:3px}
.echelle-titre{font-weight:600;font-size:var(--t-s);margin-bottom:6px}
.barre{display:flex;align-items:center;gap:10px;min-height:22px}
.barre .lettre{height:20px;border-radius:2px;justify-content:start;padding-left:8px;display:flex;align-items:center}
.barre.actif .lettre{height:30px;outline:2px solid var(--texte);outline-offset:1px}
.barre .val{font:400 var(--t-xs) var(--mono)}
.situation-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:640px){.situation-grille{grid-template-columns:1fr}}
.situation-carte{border:1px solid var(--trait);border-radius:12px;padding:12px;background:var(--surface)}
.distances{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.distances li{border-top:1px solid var(--trait);padding-top:10px;display:grid;gap:2px}
.distances b{font:700 var(--t-l) var(--display)}
.distances span{color:var(--faible);font-size:var(--t-s)}
.cote{position:sticky;top:96px;display:grid;gap:20px;background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:28px}
.prix-grand{font:700 clamp(2.2rem,3.2vw,2.8rem)/1 var(--display);color:var(--orange);letter-spacing:-.02em}
.cote dl{margin:0;display:grid;gap:10px;font-size:var(--t-s)}
.cote dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--trait);padding-bottom:10px}
.cote dt{color:var(--faible)}
.cote dd{margin:0;text-align:right}
.cote-liens{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.autres{border-top:1px solid var(--trait);padding-block:64px 96px}
.autres h2{font-size:var(--t-xl)}
.barre-mobile{display:none}
@media (max-width:980px){
  .cote{position:static}
  .barre-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid var(--trait)}
  .barre-mobile b{font:700 var(--t-l) var(--display)}
  .autres{padding-bottom:140px}
}

/* ═══════════ secteurs ═══════════ */
.grande-carte{padding-block:32px;max-width:1080px;margin-inline:auto}
.grille-secteurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;padding-top:24px}
.carte-secteur{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--trait);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--texte);transition:border-color .35s,transform .45s var(--doux)}
.carte-secteur .scene{aspect-ratio:16/10;border-radius:0}
.carte-secteur > div{padding:18px 20px 22px;display:grid;gap:8px;align-content:start}
.carte-secteur h3{font-size:var(--t-l)}
.carte-secteur p{color:var(--faible);font-size:var(--t-s)}
.carte-secteur .compte-biens{color:var(--violet-c);margin-top:6px}
.carte-secteur:hover,.carte-secteur.on{border-color:var(--violet-c);transform:translateY(-4px)}
.secteur-heros{padding-block:clamp(24px,4vw,48px) clamp(40px,6vw,72px);border-bottom:1px solid var(--trait)}
.secteur-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.secteur-grille{grid-template-columns:1fr}}
.secteur-texte{display:grid;gap:18px}
.secteur-texte h1{font-size:var(--t-page)}
.secteur-image{aspect-ratio:4/3;border-radius:14px}
.marche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.marche{grid-template-columns:1fr}}
.marche-chiffres{display:grid;gap:20px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border-top:1px solid var(--trait);padding-top:20px}
.stats div{display:grid;gap:8px}
.stats b{font:700 clamp(2rem,4vw,3rem)/1 var(--display);letter-spacing:-.03em}
.marche-carte{border:1px solid var(--trait);border-radius:14px;padding:16px;background:var(--surface)}
.suite-secteurs{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:clamp(56px,8vw,96px)}
.suite-secteurs a{display:grid;gap:6px;padding:22px;border:1px solid var(--trait);border-radius:12px;color:var(--texte);text-decoration:none;transition:border-color .3s}
.suite-secteurs a:last-child{text-align:right}
.suite-secteurs a:hover{border-color:var(--violet-c)}
.suite-secteurs b{font:700 var(--t-l) var(--display)}

/* ═══════════ vendre / acheter ═══════════ */
.frise{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative}
.frise-quatre{grid-template-columns:repeat(4,minmax(0,1fr))}
.frise li{display:grid;gap:10px;align-content:start;padding:28px 20px 0 0;border-top:1px solid var(--trait);position:relative}
.frise li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--violet-c)}
.frise-num{color:var(--violet-c)}
.frise b{font:700 var(--t-l)/1.15 var(--display)}
.frise p{color:var(--faible);font-size:var(--t-s)}
@media (max-width:980px){.frise,.frise-quatre{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}
@media (max-width:520px){.frise,.frise-quatre{grid-template-columns:1fr}}
.coches{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.coches li{display:grid;gap:4px;padding:18px 0 18px 36px;border-bottom:1px solid var(--trait);position:relative}
.coches li::before{content:"";position:absolute;left:4px;top:24px;width:14px;height:8px;border-left:2px solid var(--violet-c);border-bottom:2px solid var(--violet-c);transform:rotate(-45deg)}
.coches b{font-weight:600;font-size:var(--t-l)}
.coches span{color:var(--faible)}
.grille-quatre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:980px){.grille-quatre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grille-quatre{grid-template-columns:1fr}}
.tuile{border:1px solid var(--trait);border-radius:14px;padding:24px;display:grid;gap:10px;align-content:start;background:linear-gradient(160deg,var(--surface),transparent 70%)}
.tuile h3{font-size:var(--t-l)}
.tuile p{color:var(--faible);font-size:var(--t-s)}
.tuile-num{color:var(--violet-c)}
.faq{border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-weight:600;font-size:var(--t-l)}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{position:relative;width:14px;height:14px;flex:none}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--violet-c);transition:transform .35s var(--doux)}
.faq .plus::after{transform:rotate(90deg)}
.faq details[open] .plus::after{transform:rotate(0)}
.faq details p{color:var(--faible);padding:0 0 22px;max-width:62ch}

/* ═══════════ formulaires ═══════════ */
.formulaire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.formulaire .large{grid-column:1/-1}
@media (max-width:600px){.formulaire{grid-template-columns:1fr}}
label,.libelle{font-size:var(--t-s);font-weight:600;display:block;margin-bottom:7px}
input,textarea{width:100%;font:400 var(--t-m)/1.4 var(--corps);color:var(--texte);background:var(--fond);border:1px solid var(--trait);border-radius:10px;padding:13px 14px}
.formulaire select{width:100%;border-radius:10px;padding-block:13px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--violet-c);outline-offset:0;border-color:transparent}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puces label{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:400;border:1px solid var(--trait);border-radius:999px;padding:9px 14px;cursor:pointer;transition:border-color .25s,background .25s}
.puces input{width:auto;margin:0;accent-color:var(--violet)}
.puces label:has(input:checked){border-color:var(--violet-c);background:color-mix(in srgb,var(--violet) 18%,transparent)}
.erreur{border-left:2px solid var(--alerte);padding-left:12px;font-size:var(--t-s)}
.succes{display:grid;gap:14px;justify-items:start;border:1px solid var(--trait);border-radius:14px;padding:clamp(24px,4vw,40px)}
.succes svg,.r-ok svg{width:64px;height:64px}
.succes circle,.r-ok circle{fill:none;stroke:var(--violet-c);stroke-width:2}
.succes path,.r-ok path{fill:none;stroke:var(--texte);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60}
@media (prefers-reduced-motion:no-preference){.succes path,.r-ok:not([hidden]) path{animation:coche .7s var(--doux) .2s both}@keyframes coche{from{stroke-dashoffset:60}}}
.succes h3{font-size:var(--t-xl)}
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);padding-top:48px;align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.coordonnees{position:sticky;top:96px;display:grid;gap:22px;border:1px solid var(--trait);border-radius:14px;padding:28px;background:var(--surface)}
.coordonnees > div{display:grid;gap:4px}
.coordonnees a{color:var(--texte);font-size:var(--t-l)}
.coordonnees-actions{display:grid !important;gap:10px !important;padding-top:6px}

/* ═══════════ pages légales ═══════════ */
.prose{display:grid;gap:18px;max-width:820px;padding-top:48px}
.prose h2{font-size:var(--t-xl);margin-top:18px}
.prose p{color:var(--faible);max-width:68ch}
.bareme td{font-size:var(--t-m)}
.introuvable{min-height:60vh;display:grid;align-items:center;padding-block:80px}
.introuvable .enveloppe{display:grid;gap:22px;justify-items:start}
.introuvable h1{font-size:var(--t-page);max-width:18ch}

/* ═══════════ pied de page ═══════════ */
.pied{border-top:1px solid var(--trait);color:var(--faible);font-size:var(--t-s)}
.pied-grille{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px;padding-block:56px 40px}
@media (max-width:900px){.pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pied-grille{grid-template-columns:1fr}}
.pied b{color:var(--texte);font-weight:600;display:block;margin-bottom:12px}
.pied-marque{display:grid;gap:14px;justify-items:start;align-content:start}
.pied-marque b{font:700 1.4rem/1 var(--display);margin:0}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pied a{color:var(--faible);text-decoration:none}
.pied a:hover{color:var(--texte)}
.pied-dossier{margin-top:16px;padding-top:14px;border-top:1px solid var(--trait)}
.pied-bas{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--trait);padding-block:20px 32px}

/* ═══════════ réservation ═══════════ */
dialog.reserver{margin:0 0 0 auto;inset:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(480px,100%);max-width:100%;padding:0;border:0;border-left:1px solid var(--trait);background:var(--surface);color:var(--texte);overflow-y:auto}
dialog.reserver::backdrop{background:rgba(255,255,255,.7);backdrop-filter:blur(4px)}
@media (prefers-reduced-motion:no-preference){dialog.reserver[open]{animation:tiroir .55s var(--doux)}@keyframes tiroir{from{transform:translateX(40px);opacity:0}}}
.r-dedans{min-height:100%;padding:28px clamp(18px,4vw,32px) 40px;display:grid;gap:28px;align-content:start}
.r-form{display:grid;gap:28px}
.r-tete{display:flex;justify-content:space-between;gap:16px;align-items:start}
.r-tete h2{font-size:var(--t-xl);margin-top:8px}
.r-tete p{margin-top:6px}
.r-fermer{width:40px;height:40px;border-radius:50%;border:1px solid var(--trait);background:none;cursor:pointer;flex:none;font-size:1.2rem}
.r-fermer:hover{border-color:var(--violet-c)}
fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
legend{font-weight:600;padding:0;margin-bottom:12px}
.jours{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.jour{flex:none;scroll-snap-align:start;width:60px;display:grid;gap:4px;justify-items:center;padding:10px 0;border:1px solid var(--trait);border-radius:12px;background:none;cursor:pointer;transition:border-color .25s,background .25s}
.jour b{font:700 var(--t-l)/1 var(--display)}
.jour span{font:400 10px/1 var(--mono);color:var(--faible);text-transform:uppercase;letter-spacing:.05em}
.jour:hover:not(:disabled){border-color:var(--violet-c)}
.jour[aria-checked="true"]{background:var(--violet);border-color:var(--violet)}
.jour[aria-checked="true"] span{color:var(--texte)}
.jour:disabled{opacity:.35;cursor:not-allowed}
.heures{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.heure{padding:11px 0;border:1px solid var(--trait);border-radius:999px;background:none;cursor:pointer;font:400 var(--t-xs)/1 var(--mono);transition:border-color .25s,background .25s}
.heure:hover:not(:disabled){border-color:var(--violet-c)}
.heure[aria-checked="true"]{background:var(--violet);border-color:var(--violet)}
.heure:disabled{color:var(--faible);text-decoration:line-through;opacity:.5;cursor:not-allowed}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.deux{grid-template-columns:1fr}}
.r-ok{display:grid;gap:18px;justify-items:start;padding-top:24px}
.r-ok h2{font-size:var(--t-xl)}
.recap{display:grid;gap:4px;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding-block:14px;width:100%}

/* ═══════════ impression d'une fiche ═══════════ */

/* ─── communes ─── */
.tableau-communes{width:100%;border-collapse:collapse;margin-top:1.5rem}
.tableau-communes th,.tableau-communes td{padding:.7rem .6rem;border-bottom:1px solid var(--trait);text-align:left;font-size:1rem}
.tableau-communes thead th{font:400 var(--t-xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faible);position:sticky;top:0;background:var(--fond);z-index:1}
.tableau-communes tbody th{font-weight:600}
.tableau-communes tbody th a{color:var(--texte);text-decoration:none}
.tableau-communes tbody th a:hover{color:var(--violet-c);text-decoration:underline}
.tableau-communes tr:hover td,.tableau-communes tr:hover th{background:var(--surface)}
.suite-communes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem;margin-top:1.4rem}
.suite-communes a{display:flex;justify-content:space-between;align-items:center;gap:.6rem;min-height:48px;padding:.7rem 1rem;
  background:var(--surface);border:1px solid var(--trait);border-radius:12px;text-decoration:none;color:var(--texte)}
.suite-communes a:hover{border-color:var(--violet-c)}
@media(max-width:560px){
  .tableau-communes th,.tableau-communes td{padding:.6rem .35rem;font-size:.95rem}
  .tableau-communes thead th:nth-child(4),.tableau-communes tbody td:nth-child(4){display:none}
}

/* ─── visiter sans se déplacer : vidéo, 360°, 3D ─── */
.visiter .onglets{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 1.1rem}
.media{margin:0}
.media video,.pano,.cadre3d{width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#F2ECE2;display:block;border:1px solid var(--trait)}
.media video{object-fit:cover}
.pano,.cadre3d{position:relative;display:grid;place-items:center;gap:.8rem;padding:1rem;text-align:center}
.pano canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s;touch-action:none;cursor:grab}
.pano canvas:active{cursor:grabbing}
.pano.pret canvas{opacity:1}
.pano.pret .pano-etat{display:none}
.pano-etat{color:var(--faible);font-size:.8rem}
.pano.lance .pano-lancer{display:none}
.pano.echec{place-items:center;aspect-ratio:auto;min-height:120px}
.cadre3d iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media figcaption{margin-top:.6rem}
.media-pano .note a{color:var(--violet-c)}
@media(max-width:560px){.media video,.pano,.cadre3d{aspect-ratio:4/3}}
/* ─── visite guidée 360° (hc-360) et plan du bien ─────────────────────────────────────────────
   L'affiche de la visite est un LIEN : elle ouvre la visite en pleine page, sur le même site.
   Au téléphone, l'appel reste lisible sur la photo (voile sombre) et la cible fait plus de 44 px. */
.visite-affiche{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:14px;
  overflow:hidden;border:1px solid var(--trait);background:#201d1a;text-decoration:none;color:#fff}
.visite-affiche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .5s ease;filter:brightness(.72)}
.visite-affiche:hover img,.visite-affiche:focus-visible img{transform:scale(1.06)}
.visite-appel{position:absolute;inset:auto 0 0 0;display:grid;gap:.25rem;padding:1.1rem 1.2rem;
  background:linear-gradient(to top,rgba(14,12,10,.86),rgba(14,12,10,0))}
.visite-appel b{font-size:1.14rem;line-height:1.2}
.visite-appel small{font-size:.92rem;opacity:.88}
.visite-affiche::after{content:"";position:absolute;top:50%;left:50%;width:68px;height:68px;
  margin:-34px 0 0 -34px;border-radius:50%;border:2px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.14) no-repeat center/22px 22px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>")}
.media-plan .plan-image{width:100%;height:auto;border-radius:14px;border:1px solid var(--trait);
  background:#faf8f3;display:block}
@media(max-width:560px){.visite-affiche{aspect-ratio:4/3}.visite-appel b{font-size:1.05rem}}

/* ─── budget : frais d'acquisition et prêt ─── */
.budget-frais .stats{margin-bottom:1rem}
.budget-detail{margin-top:.4rem;border-top:1px solid var(--trait);padding-top:.8rem}
.budget-detail summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--violet-c)}
.budget-detail dl{display:grid;gap:.45rem;margin:.6rem 0}
.budget-detail dl div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.budget-detail dt{color:var(--faible)}
.budget h3{margin:1.6rem 0 .8rem;font-size:1.05rem}
.budget-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem}
.budget-champs label{display:grid;gap:.35rem;font-size:.9rem;font-weight:600;color:var(--texte)}
.budget-champs label span{font-weight:400}
.budget-champs label input{font:600 1rem/1 var(--corps);min-height:48px;padding:.6rem .8rem;
  background:var(--surface);color:var(--texte);border:1px solid var(--trait);border-radius:10px;width:100%}
.budget-sortie{display:block;margin-top:1rem;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--trait);border-radius:12px}
.budget-sortie b{display:block;font:700 1.6rem/1.1 var(--display);letter-spacing:-.02em;margin-bottom:.3rem}

/* ─── pousser à l'action : estimer, appeler, écrire ─── */
.pied-joindre{display:grid;gap:.3rem;margin-top:.9rem}
.pied-joindre a{color:var(--texte);text-decoration:none;font-weight:600}
.pied-joindre a:hover{color:var(--violet-c);text-decoration:underline}
.bande-gestes{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.bande-mail{white-space:nowrap}
/* La barre des trois gestes : sous le pouce, sur toutes les pages, au téléphone seulement. */
.agir{display:none}
@media(max-width:760px){
  .agir{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;position:fixed;inset:auto 0 0 0;z-index:40;
    background:var(--trait);border-top:1px solid var(--trait);
    padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(10px)}
  .agir-geste{display:flex;align-items:center;justify-content:center;min-height:54px;padding:.6rem .4rem;
    background:rgba(255,255,255,.96);color:var(--texte);border:0;font:600 .95rem/1 var(--corps);
    text-decoration:none;cursor:pointer}
  .agir-fort{background:var(--violet);color:#fff}
  .agir-geste:active{filter:brightness(1.25)}
  body.sur-fiche .agir{display:none}
  main{padding-bottom:62px}
}

/* ─── quartiers d'une ville ─── */
.q-carte{margin:0 0 1.6rem;border:1px solid var(--trait);border-radius:16px;overflow:hidden;background:#F2ECE2}
.q-carte svg{display:block;width:100%;height:auto}
.q-point{cursor:pointer}
.q-halo{fill:rgba(181,80,43,.16)}
.q-coeur{fill:rgba(181,80,43,.94);stroke:rgba(255,255,255,.92);stroke-width:1.5}
.q-point text{fill:#fff;font-family:var(--mono);font-weight:700;pointer-events:none}
.q-point:hover .q-coeur,.q-point:focus-visible .q-coeur{fill:var(--violet-c);stroke-width:2.5}
.q-point:hover .q-halo,.q-point:focus-visible .q-halo{fill:rgba(181,80,43,.3)}
.q-carte figcaption{padding:.6rem .9rem .8rem;margin:0}
.tableau-quartiers tbody th{font-weight:600}
/* Les mentions sous un chiffre (« 67 ventes », « 5 761 habitants ») vont à la ligne, sinon elles
   se collent au nombre et on lit « 2363 €67 ventes ». */
.tableau-communes small,.tableau-quartiers small{display:block;font:400 .72rem/1.3 var(--mono);color:var(--faible);margin-top:.15rem}
.tableau-quartiers td{vertical-align:top}
.tableau-quartiers tbody tr:target th{color:var(--violet-c)}
.tableau-quartiers tbody tr:target{background:var(--surface)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   CHARTE CLAIRE — 07/10/2026
   Ce bloc arrive après tout le reste et reprend ce que la nuit avait façonné : sur fond crème, la
   profondeur ne vient plus du contraste de luminosité mais de l'ombre portée, et les surfaces
   blanches doivent se détacher sans bordure dure.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── surfaces : une carte est une feuille posée, pas un cadre dessiné ─── */
.carte-bien,.k,.enveloppe>form,.budget,.q-carte,.media figure,.bande-action,
.tableau-communes,.secteur-carte,.vide,.budget-sortie{box-shadow:var(--ombre)}
.carte-bien{background:var(--surface);border:1px solid var(--trait);border-radius:16px;overflow:hidden;
  transition:transform .35s var(--doux),box-shadow .35s var(--doux)}
.carte-bien:hover{transform:translateY(-3px);box-shadow:var(--ombre-f)}

/* ─── un prix se lit, il ne se décode pas : police de titre, terre cuite, jamais de monospace ─── */
.prix-grand,.carte-bien .prix,.px,.budget-sortie b,.stats b{font-family:var(--display);letter-spacing:-.02em}
.prix-grand{color:var(--terre)}
.carte-bien .prix{font-size:1.35rem;font-weight:700;color:var(--terre)}

/* ─── le monospace redevient une étiquette : petit, espacé, discret ─── */
.mono,.surtitre{color:var(--faible)}
.surtitre{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}

/* ─── en-tête : barre claire qui tient au défilement ─── */
header,.tete{background:rgba(250,247,242,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--trait)}

/* ─── boutons : la terre cuite appelle à agir, l'encre accompagne ─── */
.bouton-plein{background:var(--terre);color:#fff;border-color:var(--terre)}
.bouton-plein:hover{background:var(--terre-f);border-color:var(--terre-f)}
.bouton-creux{color:var(--encre);border-color:var(--encre)}
.bouton-creux:hover{background:var(--encre);color:#fff}
.agir{background:var(--trait)}
.agir-geste{background:rgba(255,255,255,.97);color:var(--encre)}
.agir-fort{background:var(--terre);color:#fff}

/* ─── pied de page : l'encre profonde ferme la page ─── */
footer,.pied{background:var(--encre);color:#DCE6EC}
footer a,.pied a{color:#fff}
footer .faible,.pied .faible{color:#9FB4C0}

/* ─── liens de texte ─── */
a{color:var(--terre)}
a:hover{color:var(--terre-f)}
.lien-discret{color:var(--faible)}
.lien-discret:hover{color:var(--terre)}

/* ─── tableaux : lisibles, aérés, sans quadrillage ─── */
.tableau-communes{background:var(--surface);border-radius:14px;overflow:hidden}
.tableau-communes thead th{background:#F3EDE3;color:var(--faible);border-bottom:1px solid var(--trait)}
.tableau-communes tr:hover td,.tableau-communes tr:hover th{background:#FBF7F1}

/* ─── carte : l'encre détoure, la terre cuite marque ─── */
.carte-66.avec-fond .dep{stroke:rgba(29,59,77,.5);stroke-width:1.6}
.carte-66.avec-fond .commune{fill:rgba(29,59,77,.26)}
.carte-66.avec-fond .commune.on{fill:var(--terre);stroke:#fff;stroke-width:4;stroke-opacity:.7}
.carte-66.avec-fond .labels text{fill:var(--encre);paint-order:stroke;stroke:rgba(255,255,255,.9);stroke-width:3.5}
.carte-66.avec-fond .canigou text,.carte-66.avec-fond .mer-txt{fill:var(--faible);stroke:rgba(255,255,255,.85)}
.q-coeur{fill:rgba(181,80,43,.95);stroke:#fff;stroke-opacity:.9}
.q-halo{fill:rgba(181,80,43,.14)}
.q-carte{background:#EFE8DC}

/* ─── noms propres : jamais en capitales ni en monospace ───
   `th` est stylé globalement comme une étiquette de colonne (mono, majuscules). Dans le corps d'un
   tableau, un `th` porte un NOM — une commune, un quartier, une pièce : il doit se lire comme un nom. */
.tableau-communes tbody th,.tableau-quartiers tbody th{
  font-family:var(--corps);font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--texte)}
.tableau-communes tbody th small,.tableau-quartiers tbody th small{font-weight:400;text-transform:none}
.tableau-communes td,.tableau-quartiers td{font-size:.98rem}
.tableau-communes tbody th a{color:var(--texte)}
.tableau-communes tbody th a:hover{color:var(--terre)}

/* ─── pied de page sur l'encre : tout ce qui s'y trouve doit se lire ───
   Les titres de colonnes et les textes gris héritaient de couleurs pensées pour un fond clair :
   sur l'encre, ils disparaissaient. */
footer b,.pied b,.pied-marque b{color:#fff}
footer p,.pied p,footer li,.pied li,footer span,.pied span{color:#C9D8E0}
footer a,.pied a{color:#fff;text-decoration:none}
footer a:hover,.pied a:hover{color:#F0C9B5;text-decoration:underline}
footer .pied-dossier,.pied .pied-dossier{color:#9FB4C0;border-top:1px solid rgba(255,255,255,.14);padding-top:.9rem;margin-top:.9rem}
footer .bouton-plein,.pied .bouton-plein{background:var(--terre);border-color:var(--terre);color:#fff}
footer .pied-joindre a,.pied .pied-joindre a{color:#fff;font-weight:700}
.pied-bas,footer .pied-bas{border-top:1px solid rgba(255,255,255,.14);color:#9FB4C0}

/* ─── portrait : un médaillon, pas une affiche ───
   L'initiale « H » occupait tout le premier écran au téléphone, sur un paysage peint : un visiteur
   ne voyait ni le nom, ni le métier, ni une raison de rester. En attendant une vraie photo, le
   portrait est un médaillon rond et discret, et le texte passe devant. */
.moi .portrait{aspect-ratio:1;width:clamp(120px,22vw,190px);max-width:190px;border-radius:999px;
  justify-self:start;box-shadow:var(--ombre)}
.moi .portrait .initiale{position:absolute;inset:0;z-index:2;display:grid;place-items:center;left:auto;bottom:auto;
  font:700 clamp(2.6rem,6vw,4rem)/1 var(--display);color:#fff;opacity:.95;
  text-shadow:0 2px 12px rgba(29,59,77,.45)}
@media (min-width:761px){
  .moi.grand{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,56px)}
}
@media (max-width:760px){
  .moi.grand{gap:20px}
  .moi .portrait{width:120px}
}

/* ─── estimer : la page qui ramène des vendeurs ─── */
.est-grille{display:grid;gap:clamp(20px,3vw,40px);align-items:start}
@media(min-width:900px){.est-grille{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.est-form{display:grid;gap:1.1rem;background:var(--surface);border:1px solid var(--trait);
  border-radius:16px;padding:clamp(18px,2.5vw,28px);box-shadow:var(--ombre)}
.est-form label{display:grid;gap:.4rem;font-weight:600;font-size:.95rem}
.est-form label .mono{font-weight:400}
.est-form input,.est-form select{font:400 1rem/1.3 var(--corps);min-height:48px;padding:.65rem .85rem;
  background:var(--fond);color:var(--texte);border:1px solid var(--trait);border-radius:10px;width:100%}
.est-form input:focus,.est-form select:focus{border-color:var(--terre);outline:2px solid var(--terre);outline-offset:1px}
.est-choix{border:0;padding:0;margin:0;display:grid;gap:.4rem}
.est-choix legend{font-weight:600;font-size:.95rem;padding:0;margin-bottom:.4rem}
.est-choix label{display:flex;align-items:center;gap:.55rem;min-height:44px;font-weight:400}
.est-choix input{width:auto;min-height:auto;accent-color:var(--terre)}
.est-sortie{background:var(--surface);border:1px solid var(--trait);border-radius:16px;
  padding:clamp(20px,3vw,32px);box-shadow:var(--ombre);display:grid;gap:.9rem}
.est-attente{padding:clamp(20px,3vw,32px);border:1px dashed var(--trait);border-radius:16px;margin:0}
.est-fourchette{font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.6rem,4.2vw,2.5rem);line-height:1.1;color:var(--terre);margin:0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.est-fourchette span{font-family:var(--corps);font-weight:400;font-size:1rem;color:var(--faible)}
.est-median{margin:0;color:var(--faible)}
.est-median b{color:var(--texte)}
.est-gestes{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:.4rem}
.est-vide h3{font-size:1.15rem}

/* ─── consentement au rappel (loi 2025-594, démarchage téléphonique) ─── */
.consentement{font-size:.82rem;line-height:1.5;color:var(--faible);margin:.5rem 0 0;
  padding:.7rem .9rem;background:var(--fond);border:1px solid var(--trait);border-radius:10px}
.consentement a{color:var(--terre)}

/* ─── médias du bien : crédits, vue drone ─── */
.credit{font-size:.74rem;color:var(--faible)}
.credit a{color:var(--faible);text-decoration:underline;text-decoration-color:var(--trait)}
.credit a:hover{color:var(--terre)}
.galerie-credit{margin:.5rem 0 0;min-height:1.1em}
.media-drone .drone-cadre{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--trait);aspect-ratio:16/10;background:#EFE8DC}
.media-drone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:survol 18s ease-in-out infinite alternate}
.media-drone img+img{display:none}
@keyframes survol{from{transform:scale(1.04) translate(-1%,0)}to{transform:scale(1.14) translate(1.5%,-1%)}}
@media (prefers-reduced-motion:reduce){.media-drone img{animation:none}}

/* ═══ « Défiler » : un bien par écran, comme on fait défiler des vidéos ═══
   Plein écran, défilement aimanté (scroll-snap), rien au-dessus que le bien. L'en-tête du site, le
   pied et la barre des trois gestes s'effacent tant qu'on est dans ce mode. */
body.mode-defiler{overflow:hidden}
body.mode-defiler header.tete,body.mode-defiler .tete,body.mode-defiler footer,body.mode-defiler .pied,
body.mode-defiler .agir,body.mode-defiler .annonce{display:none!important}
body.mode-defiler main,body.mode-defiler #vue{padding:0!important;margin:0!important}
.df{position:fixed;inset:0;z-index:60;background:#0d0f12;color:#fff;outline:none}
.df-pile{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.df-pile::-webkit-scrollbar{display:none}
.df-ecran{position:relative;height:100dvh;height:100vh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
@supports (height:100dvh){.df-ecran{height:100dvh}}
.df-fond,.df-fond>*{position:absolute;inset:0;width:100%;height:100%}
.df-video,.df-photo{object-fit:cover}
.df-photo{animation:travelling 22s ease-in-out infinite alternate}
@keyframes travelling{from{transform:scale(1.06) translate(-1.5%,0)}to{transform:scale(1.18) translate(1.5%,-1.5%)}}
@media (prefers-reduced-motion:reduce){.df-photo{animation:none}}
.df-fond .scene{height:100%}
.df-voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.45) 0,transparent 22%,transparent 50%,rgba(0,0,0,.78) 100%)}

.df-tete{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;align-items:center;gap:.6rem;
  padding:max(12px,env(safe-area-inset-top)) 12px 10px}
.df-filtres{display:flex;gap:.4rem;overflow-x:auto;flex:1;scrollbar-width:none;padding:2px}
.df-filtres::-webkit-scrollbar{display:none}
.df-filtre{flex:none;min-height:38px;padding:0 .95rem;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.28);color:#fff;font:600 .88rem/1 var(--corps);backdrop-filter:blur(8px);cursor:pointer}
.df-filtre[aria-pressed="true"]{background:#fff;color:#16222B;border-color:#fff}
.df-sortir,.df-son{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:999px;
  background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(8px);cursor:pointer}
.df-sortir svg,.df-son svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.df-son svg path:first-child{fill:#fff;stroke:none}
.df-son[aria-pressed="true"] .df-son-coupe{display:none}

.df-infos{position:absolute;left:16px;right:88px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));z-index:2;
  display:grid;gap:.35rem;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.df-lieu{font:600 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.92}
.df-prix{margin:0;font:700 clamp(1.9rem,7vw,2.6rem)/1 var(--display);letter-spacing:-.03em}
.df-prix small{font-size:.5em;font-weight:600;opacity:.85}
.df-titre{font:600 clamp(1.05rem,4.2vw,1.35rem)/1.25 var(--display);letter-spacing:-.01em;color:#fff;max-width:30ch}
.df-cle{margin:0;font-size:.92rem;opacity:.95}
.df-dpe{display:inline-block;padding:1px 7px;border-radius:5px;background:rgba(255,255,255,.18);font-weight:700}
.df-credit{margin:.2rem 0 0}
.df-credit .credit,.df-credit .credit a{color:rgba(255,255,255,.72);font-size:.7rem}

.df-gestes{position:absolute;right:10px;bottom:max(28px,calc(env(safe-area-inset-bottom) + 20px));z-index:2;
  display:grid;gap:14px;justify-items:center}
.df-geste{display:grid;justify-items:center;gap:4px;background:none;border:0;color:#fff;text-decoration:none;
  font:600 .7rem/1 var(--corps);cursor:pointer;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.df-geste svg{width:48px;height:48px;padding:12px;border-radius:999px;background:rgba(0,0,0,.34);
  backdrop-filter:blur(8px);fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.df-geste[aria-pressed="true"] svg{fill:#E2533A;stroke:#E2533A;background:rgba(255,255,255,.92)}
.df-fort svg{background:var(--terre);stroke:#fff}
.df-geste:focus-visible svg{outline:3px solid #fff;outline-offset:2px}

.df-aide{position:fixed;left:50%;top:42%;transform:translateX(-50%);z-index:4;
  margin:0;padding:.5rem .95rem;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:.82rem;
  pointer-events:none;animation:aide 2.4s ease-in-out infinite}
@keyframes aide{0%,100%{transform:translate(-50%,0);opacity:.9}50%{transform:translate(-50%,-8px);opacity:1}}

.df-vide{display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#2a3540,#0d0f12)}
.df-vide-texte{max-width:34ch;padding:24px;text-align:center;display:grid;gap:1rem;justify-items:center}
.df-vide-texte h2{color:#fff;font-size:1.4rem}
.df-vide-texte p{color:rgba(255,255,255,.82)}
.df-vide-texte .bouton-creux{color:#fff;border-color:rgba(255,255,255,.6)}

/* sur un grand écran : une colonne de téléphone au centre, comme le font les réseaux */
@media (min-width:900px){
  .df-pile{width:min(480px,100%);margin:0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
  .df-tete{width:min(480px,100%);left:50%;transform:translateX(-50%)}
}
/* La charte claire colore TOUT « header » en crème : l'en-tête du défilement est un <header>, et
   s'affichait en bande claire au-dessus de la vidéo. Il doit rester transparent. */
.df header.df-tete,header.df-tete{background:linear-gradient(to bottom,rgba(0,0,0,.42),transparent)!important;
  border:0!important;backdrop-filter:none!important}
/* Les filtres glissent à l'horizontale : un fondu à droite dit qu'il y en a d'autres. */
.df-filtres{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);padding-right:22px}

/* ─── location courte durée et conciergerie ─── */
.cd-grille{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:1.4rem}
.cd-carte{background:var(--surface);border:1px solid var(--trait);border-radius:16px;padding:22px;box-shadow:var(--ombre);display:grid;gap:.5rem;align-content:start}
.cd-carte h3{font-size:1.12rem}
.cd-carte p{color:var(--faible);font-size:.96rem;line-height:1.55}
.cd-deux{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media(min-width:900px){.cd-deux{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr)}}
.cd-deux h2{margin:.3rem 0 .6rem}
.cd-regles{margin:1.2rem 0 0;padding:0;list-style:none;display:grid;gap:.7rem}
.cd-regles li{position:relative;padding-left:1.6rem;line-height:1.55}
.cd-regles li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;background:var(--terre)}
.cd-alternative{background:var(--encre);color:#DCE6EC;border-radius:16px;padding:24px;display:grid;gap:.8rem;align-content:start}
.cd-alternative h3{color:#fff;font-size:1.2rem}
.cd-alternative .bouton-creux{color:#fff;border-color:rgba(255,255,255,.6);justify-self:start}
.cd-alternative .bouton-creux:hover{background:#fff;color:var(--encre)}
.cd-etapes{list-style:none;margin:1.4rem 0 1rem;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cd-etapes li{border-top:2px solid var(--terre);padding-top:.9rem;display:grid;gap:.35rem}
.cd-etapes b{font:700 1.1rem/1.2 var(--display)}
/* Encart discret pour les propriétaires : une ligne de bordure, pas un bandeau. */
.cd-proprietaire{border-left:3px solid var(--terre);padding:.4rem 0 .4rem 1.1rem;margin:1.6rem 0 1.2rem;display:grid;gap:.5rem;max-width:68ch}
.cd-proprietaire p{color:var(--faible);line-height:1.55}
.cd-proprietaire b{color:var(--texte)}
.cd-etapes p{color:var(--faible)}

/* ═══════════ présentation aux propriétaires (page privée /proprietaires/<jeton>) ═══════════
   Demande d'Hadrien (07/10) : « des animations et des images qui donnent envie de louer et de passer
   de bonnes vacances ». Tout est en CSS ; prive.js n'ajoute que les classes « pr-anime » (sur la page)
   et « vu » (quand un bloc arrive à l'écran). Sans JavaScript, ou pour qui a demandé moins
   d'animations à son appareil, tout est simplement là, immobile. */

/* — le bandeau — */
.pr-heros{position:relative;min-height:min(88svh,820px);display:grid;align-items:end;overflow:hidden;color:#fff;isolation:isolate}
.pr-heros-fond{position:absolute;inset:0;z-index:-2}
.pr-heros-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block}
.pr-heros::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,34,45,.05) 0%,rgba(16,34,45,.18) 40%,rgba(16,34,45,.78) 100%)}
.pr-heros-texte{display:grid;gap:20px;padding-block:clamp(96px,16vh,180px) clamp(56px,9vh,96px);max-width:980px;margin-inline:0;padding-left:max(var(--gout),calc((100vw - 1280px) / 2 + var(--gout)))}
.pr-heros .surtitre{color:#FCE9DC}
.pr-heros h1{font-size:var(--t-heros);color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.pr-chapo{font-size:var(--t-l);line-height:1.45;max-width:58ch;color:rgba(255,255,255,.92)}
.pr-heros-gestes{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.pr-bouton-clair{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.7);backdrop-filter:blur(6px)}
.pr-bouton-clair:hover{background:#fff;color:var(--encre)}
.pr-legende-heros{position:absolute;right:var(--gout);bottom:14px;font-size:.68rem;color:rgba(255,255,255,.75);text-align:right}
.pr-legende-heros .pr-credit{position:static;display:block;background:none;padding:0}
.pr-descendre{position:absolute;left:50%;bottom:22px;width:22px;height:36px;border:2px solid rgba(255,255,255,.7);border-radius:12px;translate:-50% 0}
.pr-descendre::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:2px;background:#fff;translate:-50% 0}
@media (max-width:640px){.pr-descendre{display:none}.pr-legende-heros{left:var(--gout);text-align:left}}

/* — crédit posé sur une photo — */
.pr-credit{position:absolute;right:8px;bottom:8px;font-size:.62rem;line-height:1.3;color:rgba(255,255,255,.88);background:rgba(16,34,45,.42);padding:3px 7px;border-radius:6px;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-cadre{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/3;background:var(--trait)}
.pr-cadre img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--doux)}
.pr-saison:hover .pr-cadre img,.pr-soin:hover .pr-cadre img{transform:scale(1.06)}

/* — les moments de vacances qui défilent — */
.pr-vacances .section-tete{margin-bottom:clamp(24px,4vw,40px)}
.pr-defile{overflow:hidden;padding-block:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pr-defile-piste{display:flex;gap:16px;width:max-content}
.pr-double{display:flex;gap:16px}
.pr-moment{position:relative;margin:0;width:clamp(240px,30vw,380px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;box-shadow:var(--ombre-f);flex:none}
.pr-moment img{width:100%;height:100%;object-fit:cover;display:block}
.pr-moment figcaption{position:absolute;inset:auto 0 0 0;padding:48px 16px 14px;background:linear-gradient(180deg,transparent,rgba(16,34,45,.72));color:#fff;display:grid;gap:4px}
.pr-moment figcaption b{font:700 1.15rem/1.15 var(--display)}
.pr-moment .pr-credit{position:static;background:none;padding:0;max-width:none}
@media (prefers-reduced-motion:reduce){.pr-defile{overflow-x:auto}.pr-double{display:none}}

/* — saisons, soins — */
.pr-saisons{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pr-saison{display:grid;gap:16px;align-content:start}
.pr-saison-texte{display:grid;gap:8px}
.pr-saison-texte h3{font-size:1.35rem}
.pr-saison-texte p,.pr-soin-texte p{color:var(--faible);line-height:1.55}
.pr-soins{background:linear-gradient(180deg,#F3EDE3,var(--fond))}
.pr-mosaique{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.pr-soin{background:var(--surface);border-radius:18px;box-shadow:var(--ombre);overflow:hidden;display:grid;align-content:start}
.pr-soin .pr-cadre{border-radius:0;aspect-ratio:16/10}
.pr-soin-texte{padding:18px 20px 22px;display:grid;gap:8px}
.pr-soin-texte h3{font-size:1.15rem}

/* — la ronde entre deux séjours — le trait va de la 1re pastille à la 5e (5 colonnes, 4 écarts de 18 px) — */
.pr-ronde{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.pr-ronde::before{content:"";position:absolute;left:22px;right:calc((100% - 72px) / 5 - 22px);top:22px;height:2px;background:var(--trait)}
.pr-ronde::after{content:"";position:absolute;left:22px;right:calc((100% - 72px) / 5 - 22px);top:22px;height:2px;background:var(--terre);transform-origin:left;transform:scaleX(1)}
.pr-ronde li{position:relative;display:grid;gap:6px;align-content:start}
.pr-point{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--terre);color:var(--terre);font:600 .8rem var(--mono);position:relative;z-index:1}
.pr-ronde b{font:700 1.05rem/1.2 var(--display);margin-top:6px}
.pr-ronde p{color:var(--faible);font-size:.94rem}
@media (max-width:820px){
  .pr-ronde{grid-template-columns:1fr;gap:20px}
  /* À la verticale, un trait par étape (de sa pastille à la suivante) : un trait unique dépassait
     la dernière pastille, la hauteur du dernier texte n'étant pas connue. */
  .pr-ronde::before,.pr-ronde::after{display:none}
  .pr-ronde li:not(:last-child)::before{content:"";position:absolute;left:21px;top:44px;bottom:-20px;width:2px;background:var(--terre)}
  .pr-ronde li{grid-template-columns:44px 1fr;column-gap:16px}
  .pr-ronde li b,.pr-ronde li p{grid-column:2}
  .pr-ronde li .pr-point{grid-row:1 / span 2}
  .pr-ronde b{margin-top:10px}
}

/* — sécurité — */
.pr-lead{color:var(--faible);font-size:var(--t-l);line-height:1.45;margin:.6rem 0 1.4rem;max-width:52ch}
.pr-garanties{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pr-garanties li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.pr-garanties svg{width:44px;height:44px;padding:10px;border-radius:12px;background:#F6E7DE;fill:none;stroke:var(--terre);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pr-garanties b{display:block;font-weight:600;margin-bottom:2px}
.pr-garanties p{color:var(--faible);line-height:1.5}
.pr-vous{list-style:none;margin:0;padding:0;display:grid;gap:14px;line-height:1.5}
.pr-vous b{color:#fff}
.pr-credits{margin-top:1rem;font-size:.72rem;line-height:1.6}
.pr-credits a{color:inherit}

/* — le mouvement — */
@media (prefers-reduced-motion:no-preference){
  .pr-heros-fond img{animation:pr-lent 28s ease-in-out infinite alternate;transform-origin:60% 40%}
  @keyframes pr-lent{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
  .pr-heros-texte > *{animation:pr-monte 1s var(--doux) both}
  .pr-heros-texte > :nth-child(2){animation-delay:.12s}
  .pr-heros-texte > :nth-child(3){animation-delay:.26s}
  .pr-heros-texte > :nth-child(4){animation-delay:.4s}
  @keyframes pr-monte{from{opacity:0;transform:translateY(28px)}}
  .pr-descendre::after{animation:pr-roule 1.8s ease-in-out infinite}
  @keyframes pr-roule{0%{opacity:0;top:6px}30%{opacity:1}80%{opacity:0;top:20px}100%{opacity:0}}

  .pr-defile-piste{animation:pr-glisse 60s linear infinite}
  .pr-defile:hover .pr-defile-piste,.pr-defile:focus-within .pr-defile-piste{animation-play-state:paused}
  @keyframes pr-glisse{to{transform:translateX(calc(-50% - 8px))}}

  .pr-anime .pr-revele{transition:opacity .9s var(--doux),transform .9s var(--doux);transition-delay:calc(var(--i,0) * 110ms)}
  .pr-anime .pr-revele:not(.vu){opacity:0;transform:translateY(34px)}
  .pr-anime .pr-ronde::after{transition:transform 1.6s var(--doux) .2s}
  .pr-anime .pr-ronde:not(.vu)::after{transform:scale(0)}
  .pr-anime .pr-ronde li{transition:opacity .7s var(--doux),transform .7s var(--doux);transition-delay:calc(.25s + var(--i) * 260ms)}
  .pr-anime .pr-ronde:not(.vu) li{opacity:0;transform:translateY(16px)}
  .pr-anime .pr-ronde.vu .pr-point{animation:pr-pastille .6s var(--doux) both;animation-delay:calc(.25s + var(--i) * 260ms)}
  @keyframes pr-pastille{0%{transform:scale(.4)}70%{transform:scale(1.12);background:#F6E7DE}100%{transform:scale(1)}}
}
.pr-securite h2{font-size:var(--t-titre);margin:.5rem 0 .2rem}
.pr-heros::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,34,45,.42),rgba(16,34,45,0) 62%);pointer-events:none}
.pr-heros .surtitre{text-shadow:0 1px 10px rgba(0,0,0,.45)}
.pr-legende-heros .pr-credit{max-width:none;white-space:normal}

/* ═══════════ trouver un bien (/biens) — recherche en une phrase, quatre vues ═══════════
   Demande d'Hadrien (07/10) : « vendre, se faire remarquer, moins de clics, une recherche simple
   mais précise ». */
.trouver{display:grid;gap:14px;padding-block:28px 6px}
.trouver-champ{position:relative;display:flex;align-items:center;background:var(--surface);border:1px solid var(--trait);border-radius:999px;box-shadow:var(--ombre-f);transition:border-color .3s,box-shadow .3s}
.trouver-champ:focus-within{border-color:var(--terre);box-shadow:0 0 0 4px color-mix(in srgb,var(--terre) 14%,transparent),var(--ombre-f)}
.trouver-champ svg{position:absolute;left:20px;width:22px;height:22px;fill:none;stroke:var(--encre);stroke-width:2;stroke-linecap:round;pointer-events:none}
.trouver-champ input{flex:1;min-width:0;border:0;background:none;font:400 1.12rem/1.3 var(--corps);color:var(--texte);padding:20px 52px 20px 56px;border-radius:999px;outline:none}
.trouver-champ input::-webkit-search-cancel-button{display:none}
.trouver-champ input::placeholder{color:#8E979D;transition:opacity .3s}
.trouver-effacer{position:absolute;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:var(--fond);color:var(--faible);font-size:1.3rem;cursor:pointer}
.trouver-criteres,.trouver-idees,.elargir{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.trouver-criteres:empty{display:none}
.critere{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 14px;border-radius:999px;border:1px solid var(--trait);background:var(--surface);font:600 var(--t-s)/1.2 var(--corps);color:var(--texte);cursor:pointer;transition:border-color .25s,background .25s}
.critere span{color:var(--faible);font-weight:400;font-size:1.05rem;line-height:1}
.critere:hover{border-color:var(--terre)}
.trouver-criteres .critere{background:#F6E7DE;border-color:transparent;color:var(--terre-f)}
.critere.idee{font-weight:400;color:var(--faible)}
.critere.idee:hover{color:var(--texte)}
.critere.plein{background:var(--encre);color:#fff;border-color:var(--encre)}
@media (max-width:640px){.trouver-idees{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gout) * -1);padding-inline:var(--gout)}.trouver-idees::-webkit-scrollbar{display:none}.critere.idee{flex:none}
  .trouver-champ input{font-size:1rem;padding-block:16px}}
.barre-resultats select{padding-block:9px}
.filtre-gardes{display:inline-flex;gap:6px;align-items:center}
.filtre-gardes span{color:var(--terre)}
.filtre-gardes b{font-weight:600;color:var(--terre)}
.bascule-video{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;font-weight:600;font-size:var(--t-s);color:var(--terre);text-decoration:none}
.bascule-vue button,.bascule-video{white-space:nowrap}
@media (max-width:640px){
  /* Au téléphone : le compte et le tri sur une ligne, gardés et vendus sur la suivante, puis les
     vues — quatre lignes devenaient six, et la première carte tombait sous le pouce trop tard. */
  .barre-resultats{display:grid;grid-template-columns:1fr auto;gap:10px 12px;padding-block:8px 18px;margin-bottom:22px}
  .barre-resultats > span{margin:0;align-self:center}
  .barre-resultats .interrupteur{justify-self:end}
  .bascule-vue{grid-column:1 / -1;width:100%;display:flex}
  .bascule-vue button,.bascule-video{flex:1;justify-content:center;padding:9px 4px;font-size:.82rem}
  .trouver{padding-top:18px}
}
.note-mensualite{margin-top:40px}
.aussi{margin-top:56px;padding-top:32px;border-top:1px solid var(--trait)}
.aussi > h3{font:700 var(--t-xl)/1.1 var(--display);margin-bottom:28px}
.vide .elargir{margin:4px 0 6px}

/* — la carte d'un bien — */
.carte{position:relative}
.carte-lien{color:inherit;text-decoration:none}
.carte-lien::after{content:"";position:absolute;inset:0;z-index:1}
.carte-lien:focus-visible{outline:none}
.carte:has(.carte-lien:focus-visible){outline:2px solid var(--violet-c);outline-offset:6px;border-radius:14px}
/* ⚠ z-index obligatoire : l'apparition au défilement (animation-timeline) pose un transform sur la
   photo, donc un contexte d'empilement — le lien étiré de la carte passait alors PAR-DESSUS le cœur
   et les photos : toucher le cœur ouvrait la fiche (vu à l'essai, 07/10). La photo est donc posée
   au-dessus du lien ; elle est elle-même un lien vers la fiche. */
.carte-visuel{position:relative;overflow:hidden;z-index:2}
@media (max-width:620px){.carte .carte-visuel{aspect-ratio:5/4}}
.carte-photos{position:absolute;inset:0;z-index:2;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.carte-photos::-webkit-scrollbar{display:none}
.carte-photos a{flex:0 0 100%;scroll-snap-align:start;display:block;position:relative;height:100%}
.carte-photos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--doux)}
.carte:hover .carte-photos img{transform:scale(1.035)}
.carte-visuel .etiq{z-index:3;right:64px;pointer-events:none;align-items:flex-start}
.carte-visuel .modes{display:flex;gap:4px;flex-wrap:wrap}
.carte-visuel .modes span,.pastille.ecart{font:600 .66rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--encre);padding:6px 8px;border-radius:6px}
.pastille.ecart{background:var(--encre);color:#fff;text-transform:none}
.carte-garder{position:absolute;top:10px;right:10px;z-index:4;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .25s var(--doux)}
.carte-garder svg{width:22px;height:22px;fill:none;stroke:var(--encre);stroke-width:2;stroke-linejoin:round;transition:fill .25s,stroke .25s}
.carte-garder[aria-pressed="true"] svg{fill:var(--terre);stroke:var(--terre)}
.carte-garder:active{transform:scale(.9)}
@media (prefers-reduced-motion:no-preference){.carte-garder[aria-pressed="true"] svg{animation:battre .45s var(--doux)}@keyframes battre{40%{transform:scale(1.3)}}}
.carte-fleche{position:absolute;top:50%;z-index:4;translate:0 -50%;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--encre);font-size:1.4rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .25s}
.carte-fleche.prec{left:10px}
.carte-fleche.suiv{right:10px}
.carte:hover .carte-fleche{opacity:1}
@media (hover:none){.carte-fleche{display:none}}
.carte-compte{position:absolute;right:10px;bottom:10px;z-index:3;background:rgba(16,34,45,.55);color:#fff;padding:4px 8px;border-radius:6px;pointer-events:none}
.carte-atouts{display:flex;flex-wrap:wrap;gap:6px}
.carte-atouts span{font-size:.78rem;color:var(--encre);background:#EEF2F3;padding:3px 9px;border-radius:999px}
.carte-calcul{display:flex;justify-content:space-between;gap:10px;color:var(--faible)}
.carte .bas .prix{font:700 1.3rem/1 var(--display);letter-spacing:-.01em}

/* — vue Liste — */
.liste-biens{display:grid;gap:10px}
.ligne-bien{display:grid;grid-template-columns:132px minmax(0,2.2fr) minmax(130px,1fr) minmax(0,1.3fr) 44px minmax(0,1.4fr);gap:18px;align-items:center;padding:10px;background:var(--surface);border:1px solid var(--trait);border-radius:14px;color:var(--texte);text-decoration:none;transition:border-color .25s,box-shadow .25s}
.ligne-bien:hover{border-color:var(--terre);box-shadow:var(--ombre)}
.ligne-bien .scene{height:92px;border-radius:10px;overflow:hidden;display:block}
.ligne-bien .scene img{width:100%;height:100%;object-fit:cover;display:block}
.ligne-titre{display:grid;gap:4px}
.ligne-titre b{font-weight:600;line-height:1.3}
.ligne-ecart{font-size:.8rem;color:var(--terre-f)}
.ligne-prix{font:700 1.15rem/1.1 var(--display);display:grid;gap:4px}
.ligne-prix small{font:400 .74rem var(--mono);color:var(--faible)}
.ligne-chiffres{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.9rem;color:var(--faible)}
.ligne-atouts{display:flex;flex-wrap:wrap;gap:5px}
.ligne-atouts span{font-size:.76rem;background:#EEF2F3;padding:3px 8px;border-radius:999px;color:var(--encre)}
.ligne-bien.vendue{opacity:.65}
@media (max-width:900px){
  .ligne-bien{grid-template-columns:104px minmax(0,1fr) auto;gap:6px 14px}
  .ligne-bien .scene{grid-row:1 / span 3;height:100%;min-height:96px}
  .ligne-titre{grid-column:2 / -1}
  .ligne-prix{grid-column:2}
  .ligne-dpe{grid-column:3;grid-row:2;justify-self:end}
  .ligne-chiffres{grid-column:2 / -1}
  .ligne-atouts{display:none}
}

/* — vue Comparer — */
.comparer-defil{overflow-x:auto;border:1px solid var(--trait);border-radius:14px;background:var(--surface)}
.comparer{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
.comparer th,.comparer td{padding:12px 14px;border-bottom:1px solid var(--trait);text-align:left;vertical-align:top}
.comparer tbody th{position:sticky;left:0;background:var(--surface);font:400 .72rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--faible);white-space:nowrap;z-index:1}
.comparer thead th{vertical-align:bottom;min-width:180px}
.comparer thead a{display:grid;gap:8px;color:var(--texte);text-decoration:none}
.comparer thead .scene{height:110px;border-radius:10px;overflow:hidden;display:block}
.comparer thead .scene img{width:100%;height:100%;object-fit:cover;display:block}
.comparer td.meilleur{background:#EAF4EE;font-weight:600;color:#1F5A38}
.comparer td.meilleur::after{content:" ✓";color:var(--valide)}
.bouton.petit{padding:10px 16px}

/* — sur la fiche : passer au bien suivant de la recherche — */
.suite-recherche{border-bottom:1px solid var(--trait);background:var(--surface)}
.suite-recherche .enveloppe{display:flex;align-items:center;gap:16px;padding-block:10px}
.suite-recherche .lien-discret{margin-right:auto;font-weight:600;color:var(--encre);text-decoration:none}
.suite-gestes{display:flex;gap:6px}
.suite-gestes a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--trait);border-radius:999px;font-weight:600;font-size:var(--t-s);color:var(--encre);text-decoration:none}
.suite-gestes a:hover{border-color:var(--terre);color:var(--terre)}

/* — l'accueil cherche directement — */
.heros-cherche{max-width:640px}
.heros-cherche .trouver-champ input{padding-block:17px}
.heros-cherche button[type="submit"]{position:absolute;right:6px;min-height:46px;padding:0 20px}
.heros-cherche .trouver-champ input{padding-right:132px}
@media (max-width:520px){.heros-cherche button[type="submit"]{padding:0 14px}.heros-cherche .trouver-champ input{padding-right:104px}}

/* ═══════════ visiter sans se déplacer, mis en avant (fiche d'un bien) ═══════════
   Demande d'Hadrien (07/10) : « après avoir vu toutes les images, proposer soit la visite 360°, soit
   la vidéo ; animer cette partie proprement ». */
.scene-scene{touch-action:pan-y}
.icone-visite{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.puce-video .icone-visite,.fin-bouton[data-visiter="video"] .icone-visite,.choix-visite[data-onglet="video"] .icone-visite{fill:currentColor;stroke:none}

/* — raccourcis posés sur la galerie — */
.galerie-visites{position:absolute;top:14px;right:14px;z-index:4;display:flex;gap:8px}
.puce-visite{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px 0 11px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:var(--encre);font:600 .85rem/1 var(--corps);cursor:pointer;box-shadow:0 4px 18px rgba(16,34,45,.18);backdrop-filter:blur(8px);transition:transform .25s var(--doux),background .25s}
.puce-visite:hover{transform:translateY(-2px);background:#fff}
.puce-video{background:var(--terre);color:#fff}
.puce-video:hover{background:var(--terre-f)}
.sur-fin .galerie-visites{opacity:0;pointer-events:none}
.galerie-visites{transition:opacity .4s}

/* — l'annonce sur la dernière photo — */
.suite-visite{align-self:center;background:var(--terre);color:#fff;padding:9px 12px;border-radius:999px;opacity:0;transform:translateX(8px);transition:opacity .4s,transform .4s var(--doux);pointer-events:none}
.derniere .suite-visite{opacity:1;transform:none}
.derniere #g-suiv{background:var(--terre);border-color:var(--terre);color:#fff}
@media (max-width:560px){.suite-visite{display:none}}

/* — la dernière diapositive — */
.fin-galerie{display:grid;place-items:center;background:#10222D;color:#fff}
.fin-fond{position:absolute;inset:0;overflow:hidden}
.fin-fond img,.fin-fond video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.fin-fond video{opacity:0;transition:opacity 1.2s}
.fin-galerie.film .fin-fond video{opacity:1}
.fin-fond::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(16,34,45,.42),rgba(16,34,45,.86))}
.fin-contenu{position:relative;z-index:2;display:grid;justify-items:center;gap:14px;text-align:center;padding:24px;max-width:760px}
.fin-contenu .surtitre{color:#FCE9DC}
.fin-contenu h3{font:700 clamp(1.4rem,3.2vw,2.4rem)/1.08 var(--display);letter-spacing:-.02em;text-wrap:balance}
.fin-choix{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.fin-bouton{display:flex;align-items:center;gap:12px;text-align:left;min-height:64px;padding:10px 20px 10px 10px;border-radius:18px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;backdrop-filter:blur(10px);transition:background .3s,transform .3s var(--doux),border-color .3s}
.fin-bouton:hover{background:rgba(255,255,255,.22);transform:translateY(-3px)}
.fin-bouton.premier{background:var(--terre);border-color:var(--terre)}
.fin-bouton.premier:hover{background:var(--terre-f)}
.fin-bouton b{display:block;font:700 1rem/1.2 var(--display)}
.fin-bouton small{display:block;font-size:.8rem;opacity:.82;margin-top:2px}
.fin-icone{position:relative;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--terre);display:grid;place-items:center;flex:none}
.fin-icone .icone-visite{width:20px;height:20px}
.fin-revoir{color:rgba(255,255,255,.8)}
@media (max-width:640px){
  /* Au téléphone la galerie est basse : sur la dernière diapositive, le compteur et les flèches
     s'effacent (ils couvraient les choix) — « Revoir les photos » et le glissé du doigt suffisent. */
  .sur-fin .galerie-ctrl{display:none}
  .fin-contenu h3{font-size:1.25rem}
  .fin-contenu{gap:10px;padding:14px 14px 12px}
  .fin-contenu .surtitre{display:none}
  .fin-bouton{min-height:54px;padding:6px 14px 6px 6px}
  .fin-bouton small{display:none}
  .fin-icone{width:38px;height:38px}
}
.vignette-fin{display:grid;place-items:center;align-content:center;gap:2px;background:var(--encre);color:#fff;opacity:.9}
.vignette-fin span{font-size:1.2rem;color:#FCE9DC}
.vignette-fin small{font:600 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em}
@media (max-width:640px){.vignette-fin span{font-size:1rem}.vignette-fin small{font-size:.56rem;letter-spacing:0}}

/* — le bloc, avec une vignette par façon de visiter — */
.visiter{scroll-margin-top:96px;border-radius:18px}
.visiter-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:.2rem 0 1rem}
.choix-visite{display:grid;gap:8px;padding:6px 6px 10px;border:1px solid var(--trait);border-radius:14px;background:var(--surface);cursor:pointer;text-align:left;transition:border-color .3s,transform .3s var(--doux),box-shadow .3s}
.choix-visite:hover{transform:translateY(-2px);box-shadow:var(--ombre)}
.choix-visite.actif{border-color:var(--terre);box-shadow:0 0 0 2px color-mix(in srgb,var(--terre) 25%,transparent)}
.choix-image{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#E9E2D6}
.choix-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.choix-image .icone-visite{position:absolute;left:50%;top:50%;translate:-50% -50%;width:36px;height:36px;padding:9px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--terre);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.choix-nom{font-weight:600;font-size:.9rem;padding-inline:4px}

@media (prefers-reduced-motion:no-preference){
  .puce-video .icone-visite{animation:pr-battre-icone 2.4s ease-in-out infinite}
  @keyframes pr-battre-icone{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.25)}}
  .derniere #g-suiv{animation:vers-la-suite 1.6s ease-in-out infinite}
  @keyframes vers-la-suite{50%{transform:translateX(4px)}}
  .fin-galerie.active .fin-fond img{animation:fin-lent 18s ease-out both}
  @keyframes fin-lent{from{transform:scale(1.12)}to{transform:scale(1)}}
  .fin-pano img{animation:none!important;object-position:0% 50%}
  .fin-galerie.active .fin-pano img,.choix-image.fin-pano img{animation:panorama 40s linear infinite alternate!important}
  @keyframes panorama{from{object-position:0% 50%}to{object-position:100% 50%}}
  .fin-galerie .fin-contenu > *{opacity:0}
  .fin-galerie.active .fin-contenu > *{animation:fin-monte .8s var(--doux) both;animation-delay:calc(.25s + var(--i) * 120ms)}
  .fin-galerie.active .fin-choix > *{animation:fin-monte .8s var(--doux) both;animation-delay:calc(.25s + var(--i) * 120ms)}
  @keyframes fin-monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  .fin-bouton.premier .fin-icone::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:onde 2s ease-out infinite}
  @keyframes onde{from{transform:scale(.8);opacity:1}to{transform:scale(1.5);opacity:0}}
  .visiter .volet:not([hidden]){animation:fin-monte .5s var(--doux) both}
  .visiter.appel{animation:appel 1.4s var(--doux)}
  @keyframes appel{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--terre) 0%,transparent)}25%{box-shadow:0 0 0 10px color-mix(in srgb,var(--terre) 22%,transparent)}100%{box-shadow:0 0 0 22px transparent}}
}
.compteur{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.galerie-ctrl > .compteur{max-width:calc(100% - 120px)}

/* ═══════════ ma sélection : le panier de tri, sans compte ═══════════
   Demande d'Hadrien (07/10) : « un panier de tri, sans compte, pour garder en mémoire et comparer ». */
.panier{position:fixed;right:20px;bottom:24px;z-index:45;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 10px 0 16px;border-radius:999px;background:var(--encre);color:#fff;text-decoration:none;font:600 .92rem/1 var(--corps);box-shadow:0 10px 30px -8px rgba(16,34,45,.5)}
.panier svg{width:20px;height:20px;fill:var(--terre);stroke:#fff;stroke-width:1.4}
.panier-n{min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:#fff;color:var(--encre);display:grid;place-items:center;font:700 .9rem/1 var(--display)}
.panier:hover{background:#16303E}
body.mode-defiler .panier,body.sur-selection .panier,body.menu-ouvert .panier{display:none}
@media (max-width:760px){
  .panier{bottom:calc(66px + env(safe-area-inset-bottom));right:12px;min-height:46px;padding:0 6px 0 12px}
  .panier-texte{display:none}
}
@media (max-width:980px){body.sur-fiche .panier{bottom:calc(84px + env(safe-area-inset-bottom))}}
.panier-envol{position:fixed;z-index:70;width:28px;height:28px;pointer-events:none}
.panier-envol svg{width:28px;height:28px;fill:var(--terre);stroke:#fff;stroke-width:1.4;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.toast-annuler{margin-left:10px;border:0;background:none;color:#FCE9DC;font:700 inherit;text-decoration:underline;cursor:pointer;pointer-events:auto}

/* — le cœur sur la fiche — */
.garder-fiche{width:100%;gap:10px}
.garder-fiche svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .25s}
.garder-fiche[aria-pressed="true"]{border-color:var(--terre);color:var(--terre-f);background:#FBF1EA}
.garder-fiche[aria-pressed="true"] svg{fill:var(--terre);stroke:var(--terre)}
.barre-mobile-gestes{display:flex;gap:10px;align-items:center}
.garder-barre{position:static;box-shadow:none;border:1px solid var(--trait)}

/* — la page — */
.sel-page{padding-top:28px}
.sel-barre{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.sel-onglets{display:flex;flex-wrap:wrap;gap:6px}
.sel-onglets .filtre{display:inline-flex;align-items:center;gap:6px;font-family:var(--corps);font-size:.85rem}
.sel-onglets .filtre b{font-weight:700;color:var(--terre)}
.sel-onglets svg,.pile-bouton svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sel-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 26px}
@media (max-width:640px){.sel-onglets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gout) * -1);padding-inline:var(--gout);width:calc(100% + 2 * var(--gout))}.sel-onglets .filtre{flex:none}
  .sel-actions .bouton{flex:1 1 100%}}
.sel-liste{display:grid;gap:14px}
.sel-bien{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:12px;background:var(--surface);border:1px solid var(--trait);border-left:4px solid var(--trait);border-radius:16px;transition:opacity .26s,transform .26s var(--doux),border-color .3s}
.sel-bien.pile-coeur{border-left-color:var(--terre)}
.sel-bien.pile-visiter{border-left-color:var(--valide)}
.sel-bien.pile-peut-etre{border-left-color:#C9A227}
.sel-bien.pile-ecarte{border-left-color:var(--neutre);opacity:.62}
.sel-bien.range{transform:scale(.98)}
.sel-bien.part{opacity:0;transform:translateX(30px)}
.sel-image{display:block;border-radius:10px;overflow:hidden}
.sel-image .scene{display:block;height:100%;min-height:130px;border-radius:10px}
.sel-image .scene img{width:100%;height:100%;object-fit:cover}
.sel-corps{display:grid;gap:10px;align-content:start;padding-right:36px}
.sel-titre{display:grid;gap:3px;color:var(--texte);text-decoration:none}
.sel-titre b{font:700 1.15rem/1.25 var(--display)}
.sel-titre:hover b{color:var(--terre)}
.sel-chiffres{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:var(--faible);font-size:.9rem}
.sel-chiffres > b{font:700 1.2rem/1 var(--display);color:var(--texte)}
.sel-piles{display:flex;flex-wrap:wrap;gap:6px}
.pile-bouton{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--trait);background:var(--fond);color:var(--faible);font:600 .82rem/1 var(--corps);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s}
.pile-bouton:active{transform:scale(.95)}
.pile-bouton[aria-pressed="true"].pile-coeur{background:var(--terre);border-color:var(--terre);color:#fff}
.pile-bouton[aria-pressed="true"].pile-visiter{background:var(--valide);border-color:var(--valide);color:#fff}
.pile-bouton[aria-pressed="true"].pile-peut-etre{background:#C9A227;border-color:#C9A227;color:#fff}
.pile-bouton[aria-pressed="true"].pile-ecarte{background:var(--neutre);border-color:var(--neutre);color:#fff}
.pile-bouton[aria-pressed="true"].pile-coeur svg{fill:#fff}
.sel-note{width:100%;resize:none;overflow:hidden;min-height:42px;font:400 .92rem/1.45 var(--corps);color:var(--texte);background:#FCFAF6;border:1px dashed var(--trait);border-radius:10px;padding:10px 12px}
.sel-note:focus{outline:none;border-style:solid;border-color:var(--terre)}
.sel-retirer{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:var(--fond);color:var(--faible);font-size:1.3rem;cursor:pointer}
.sel-retirer:hover{color:var(--alerte)}
.sel-pile-vide{padding:24px 0}
.sel-h2{font:700 var(--t-xl)/1.1 var(--display);margin:56px 0 20px;scroll-margin-top:96px}
.sel-vide{justify-items:center;text-align:center}
.sel-vide-icone{width:54px;height:54px;fill:#F6E7DE;stroke:var(--terre);stroke-width:1.4}
.pile-pastille{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:600;color:#fff;background:var(--neutre)}
.pile-pastille.pile-coeur{background:var(--terre)}
.pile-pastille.pile-visiter{background:var(--valide)}
.pile-pastille.pile-peut-etre{background:#C9A227}
@media (max-width:640px){
  .sel-bien{grid-template-columns:1fr;gap:12px}
  .sel-image .scene{min-height:0;aspect-ratio:16/9}
  .sel-corps{padding-right:0}
  .sel-retirer{top:18px;right:18px;background:rgba(255,255,255,.92)}
  .pile-bouton{flex:1 1 calc(50% - 6px);justify-content:center}
}
@media (prefers-reduced-motion:no-preference){
  .panier:not([hidden]){animation:panier-arrive .5s var(--doux)}
  @keyframes panier-arrive{from{opacity:0;transform:translateY(20px) scale(.9)}}
  .sel-liste .sel-bien{animation:fin-monte .45s var(--doux) both}
  .garder-fiche[aria-pressed="true"] svg,.garder-barre[aria-pressed="true"] svg{animation:battre .45s var(--doux)}
}
@media (max-width:760px){.toast{bottom:calc(126px + env(safe-area-inset-bottom));max-width:calc(100% - 32px)}}
.suite-recherche .lien-discret,.suite-recherche .mono{white-space:nowrap}
@media (max-width:560px){.suite-mot{display:none}.suite-gestes a{min-width:44px;justify-content:center;font-size:1.1rem}}

/* ═══════════ la fiche imprimée, ou enregistrée en PDF ═══════════
   Refaite le 07/10 (elle portait encore le fond violet de l'ancienne charte, et imprimait les
   boutons, la galerie, la vidéo). Une page A4 propre : en-tête HC Immo, la photo, le prix, l'essentiel,
   les pièces, l'énergie, la situation, et en pied la référence, l'adresse de la fiche et les mentions. */
.impression-seule{display:none}
@page{size:A4;margin:12mm 12mm 14mm}
@media print{
  *{animation:none!important;transition:none!important}
  html,body{background:#fff!important}
  body{color:#111;font-size:10.5pt}
  .annonce,.tete,.menu,.pied,.barre-mobile,.autres,.agir,.panier,.toast,.suite-recherche,.fil,.evitement,
  .galerie-ctrl,.galerie-visites,.vignettes,.fin-galerie,.cote-liens,.cote .bouton,.garder-fiche,.prochain,
  .budget,.visiter > :not(h2):not(.impression-seule),.carte-attribution,dialog{display:none!important}
  .impression-seule{display:block}
  main{padding:0!important}
  .enveloppe{max-width:none;padding:0}
  .impression-tete{display:flex!important;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:2px solid #B5502B;padding-bottom:6px;margin-bottom:10px;font-size:9pt;color:#333}
  .impression-tete b{font:700 15pt/1 "Space Grotesk",sans-serif;color:#1D3B4D}
  .scene-scene{aspect-ratio:16/7;border-radius:6px;break-inside:avoid}
  .scene-scene .scene:not(.active){display:none}
  .galerie-credit{font-size:7pt;margin-top:2px}
  /* Le prix flotte à droite du début de la fiche ; le texte passe dessous ensuite (une grille
     laissait toute la colonne de droite vide sur les pages suivantes). */
  .fiche-corps{display:flex;flex-direction:column;padding-block:5mm 0}
  /* Le prix passe EN TÊTE, en bandeau : sur papier, c'est la première chose qu'on cherche. */
  .cote{order:-1;position:static!important;display:grid;grid-template-columns:58mm 1fr;align-items:center;column-gap:8mm;margin:0 0 5mm;border:1px solid #ddd;box-shadow:none;padding:3mm 4mm;break-inside:avoid}
  .cote > .mono,.cote .prix-grand{grid-column:1}
  .cote dl{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:1fr 1fr;gap:0 8mm;margin:0}
  .cote dl div{padding-block:2px}
  .cote dd{white-space:nowrap}
  .prix-grand{color:#B5502B}
  .fiche-tete{margin-bottom:4mm;gap:6px}
  .fiche-tete h1{font-size:19pt}
  .atouts li{padding:2px 8px}
  .chiffres-cles{margin-bottom:5mm;grid-template-columns:repeat(4,1fr)}
  .chiffres-cles div{padding-block:8px}
  .chiffres-cles dd{font-size:15pt}
  .bloc{margin-bottom:5mm;gap:4px}
  .bloc h2{break-after:avoid}
  .energie,.situation-grille,.echelle{break-inside:avoid}
  .bloc h2{font-size:12pt}
  tr{break-inside:avoid}
  th,td{padding:3px 8px 3px 0}
  .barre{min-height:13px;gap:6px}
  .barre .lettre{height:12px;font-size:7pt}
  .barre.actif .lettre{height:16px}
  .energie{grid-template-columns:1fr 1fr;gap:6mm}
  .situation-carte{padding:4px}
  .distances{gap:4px 10px}
  .situation-grille{grid-template-columns:55mm 1fr}
  a{color:inherit;text-decoration:none}
  .impression-pied{display:grid!important;gap:2px;margin-top:6mm;padding-top:4px;border-top:1px solid #ccc;font-size:7.5pt;color:#555}
}

/* ─── audit du 07/10 : tout se touche au doigt (44 px de zone utile) ─── */
#vue input[type="checkbox"]:not(.interrupteur input),#vue input[type="radio"]{width:20px;height:20px;accent-color:var(--terre);flex:none}
.tableau-communes th a,.tableau-communes td a{display:inline-block;padding-block:12px;margin-block:-12px}

/* ─── alerte : mail, WhatsApp ou SMS ─── */
.al-canaux{display:flex;gap:8px;flex-wrap:wrap}
.al-canal{position:relative;cursor:pointer}
.al-canal input{position:absolute;opacity:0;inset:0;cursor:pointer}
.al-canal span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--trait);background:var(--surface);font-weight:600;font-size:.92rem;transition:background .25s,border-color .25s,color .25s}
.al-canal input:checked + span{background:var(--encre);border-color:var(--encre);color:#fff}
.al-canal input:focus-visible + span{outline:2px solid var(--violet-c);outline-offset:2px}
.al-accord{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--faible);line-height:1.45;cursor:pointer}
.al-accord input{margin-top:2px}
.bande-alerte{background:#F3EDE3;border-block:1px solid var(--trait)}
.bande-alerte .enveloppe{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-block:26px}
.bande-alerte b{display:block;font:700 1.25rem/1.2 var(--display);margin-bottom:4px}
.bande-alerte span{color:var(--faible)}

/* Version de test (port 8453) : une bande fine, au-dessus de tout, qui s'en va au défilement. */
.bande-test{background:#6D28D9;color:#fff;font:600 13px/1.3 var(--corps);text-align:center;padding:max(6px,env(safe-area-inset-top)) 16px 6px}

/* Pour vendre (08/10) : pastilles de vente, prix barré, réassurance sous le bouton, appel à la visite. */
.pastille.vente{font:700 .66rem/1 var(--mono);letter-spacing:.06em;color:#fff;padding:7px 10px;border-radius:6px;backdrop-filter:none}
.pastille.baisse{background:#B42318}
.pastille.nouveau{background:#6D28D9}
.pastille.exclu{background:var(--encre)}
.prix-avant{font-size:.72em;font-weight:500;color:var(--faible);margin-right:4px}
.prix-baisse{display:flex;gap:10px;align-items:baseline;margin-top:-4px}
.prix-baisse s{color:var(--faible)}
.prix-baisse b{background:#B42318;color:#fff;font:700 var(--t-xs)/1 var(--mono);padding:5px 8px;border-radius:6px}
.rassure{font-size:var(--t-xs);color:var(--faible);text-align:center}
.appel-visite{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:20px 22px}
.appel-visite > div:first-child{display:grid;gap:4px;flex:1 1 260px}
.appel-visite b{font:700 1.15rem/1.2 var(--display)}
.appel-visite span{color:var(--faible);font-size:var(--t-s)}
.appel-gestes{display:flex;flex-wrap:wrap;gap:10px}
.promesses{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--t-s);color:var(--faible)}
.promesses li{display:flex;gap:8px;align-items:center}
.promesses li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--valide) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat}
@media print{.appel-visite,.rassure,.promesses{display:none!important}}

/* Pied de page « Recherches fréquentes » (08/10) : des liens courts, sur deux colonnes au téléphone. */
.pied-recherches{grid-column:1/-1;border-top:1px solid var(--trait);padding-top:22px}
.pied .pied-recherches ul{display:block;columns:2;column-gap:18px}
.pied .pied-recherches li{margin-bottom:7px;break-inside:avoid}
@media (min-width:900px){.pied .pied-recherches ul{columns:4}}

/* « Travailler avec moi » (08/10) : cinq engagements, numérotés, lisibles d'un coup d'œil. */
.engagements{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.engagements li{background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:20px;display:grid;gap:6px;align-content:start}
.engagements li span{color:var(--terre);font-size:var(--t-xs)}
.engagements b{font:700 1.08rem/1.25 var(--display)}
.engagements p{margin:0;color:var(--faible);font-size:var(--t-s)}

/* Récit des secteurs (08/10). */
.recit{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
@media (max-width:900px){.recit{grid-template-columns:1fr}}
.recit-texte .lead{margin:0 0 16px}
.lieux{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.lieu-carte{background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:20px}
.lieu-carte h3{margin:0 0 6px;font:700 1.1rem/1.25 var(--display)}
.lieu-carte p{margin:0;color:var(--faible);font-size:var(--t-s)}
.vive-voix{background:var(--encre);color:#fff;border-radius:18px;padding:clamp(22px,4vw,40px);display:grid;gap:14px}
.vive-voix .surtitre{color:#c9b8ff}
.vive-voix p{margin:0;font:500 clamp(1.1rem,2.2vw,1.4rem)/1.45 var(--display);max-width:60ch}
.vive-voix .bouton-creux{color:#fff;border-color:rgba(255,255,255,.55)}

.q-noms{list-style:none;margin:18px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.q-noms li{border:1px solid var(--trait);border-radius:999px;padding:6px 12px;font-size:var(--t-s);background:var(--surface)}
.q-noms a{color:inherit;text-decoration:none}
.communes-secteur{margin-bottom:28px}
.communes-secteur h2{font-size:1.25rem;margin:0 0 4px}
.communes-secteur h2 a{color:inherit}
a.lieu-carte{color:inherit;text-decoration:none;display:block}
a.lieu-carte:hover{border-color:var(--terre)}

/* Fiche de secteur (08/10, version structurée) */
.fiche-secteur{margin:0;background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:4px 18px}
.fiche-secteur > div{display:grid;grid-template-columns:150px 1fr;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--trait)}
.fiche-secteur > div:last-child{border-bottom:0}
.fiche-secteur dt{font:400 var(--t-xs)/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faible)}
.fiche-secteur dd{margin:0;font-size:var(--t-s)}
@media (max-width:620px){.fiche-secteur > div{grid-template-columns:1fr;gap:2px;padding:10px 0}}
.activites{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.activite{border-top:3px solid var(--terre);background:var(--surface);border-radius:0 0 14px 14px;padding:16px 18px}
.activite h3{margin:0 0 8px;font:700 1.05rem/1.2 var(--display)}
.activite ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:var(--t-s)}
.lieux-liste{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 28px}
.lieux-liste > div{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--trait)}
.lieux-liste dt{font-weight:600}
.lieux-liste dd{margin:0;color:var(--faible);font-size:var(--t-s)}
.secteur-grille .marche-carte{max-width:420px}

/* ── Le panneau de rendez-vous, refait le 08/10 sur le modèle d'EVOXA ─────────────────────────────
   Ordinateur : un tiroir à droite. Téléphone (60 % des visiteurs) : un panneau qui monte du bas, l'en-tête
   en haut (retour, étape, fermer), le contenu qui défile, le bouton TOUJOURS sous le pouce. */
dialog.reserver{overflow:hidden}
.r-dedans{display:flex;flex-direction:column;height:100%;max-height:100dvh;padding:0;gap:0}
.r-tete{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--trait);flex:none}
.r-tete-titre{text-align:center}
.r-tete h2{font:600 1.05rem/1.25 var(--display);margin:0;outline:none}
.r-etapes{display:flex;justify-content:center;gap:6px;margin-top:6px}
.r-etapes span{width:30px;height:4px;border-radius:4px;background:var(--trait);transition:background .3s}
.r-etapes span.fait{background:var(--terre)}
.r-rond{width:44px;height:44px;border-radius:50%;border:0;background:none;cursor:pointer;font-size:1.35rem;color:var(--faible);display:grid;place-items:center}
.r-rond:hover{background:var(--fond);color:var(--texte)}
.r-rond[hidden]{display:block;visibility:hidden}
.r-form{display:flex;flex-direction:column;flex:1;min-height:0;gap:0}
.r-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px clamp(16px,4vw,28px) 24px}
.r-etape{display:grid;gap:22px}
.r-etape[hidden]{display:none}
.r-pied{flex:none;border-top:1px solid var(--trait);background:var(--surface);padding:12px clamp(16px,4vw,28px) max(12px,env(safe-area-inset-bottom));display:grid;gap:10px}
.r-action{width:100%;justify-content:center;min-height:54px;font-size:1rem}
.r-sujet{display:flex;gap:14px;align-items:center;background:var(--fond);border:1px solid var(--trait);border-radius:14px;padding:12px}
.r-sujet img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex:none}
.r-sujet-texte{display:grid;gap:2px;min-width:0}
.r-sujet-texte b{font-weight:600;line-height:1.25}
.r-sujet-texte small{color:var(--faible)}
.r-rappel{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;background:var(--fond);border:1px solid var(--trait);border-radius:14px;padding:12px 14px;cursor:pointer;font:inherit;color:inherit}
.r-rappel > span:first-child{display:grid;gap:2px}
.r-rappel small{color:var(--faible)}
.r-repris{margin:0;font-size:var(--t-s);color:var(--faible)}
.r-plus{justify-self:start;background:none;border:0;padding:10px 0;min-height:44px;color:var(--terre);font:600 var(--t-s) var(--corps);cursor:pointer}
.r-ok{padding:28px clamp(16px,4vw,28px) max(24px,env(safe-area-inset-bottom));overflow-y:auto;justify-items:center;text-align:center}
.r-ok h2{outline:none}
.r-ok .recap{display:grid;gap:6px;justify-items:center;background:var(--fond);border:1px solid var(--trait);border-radius:14px;padding:16px;width:100%;max-width:380px}
.r-ok dl{margin:8px 0 0;display:grid;gap:4px;width:100%;font-size:var(--t-s)}
.r-ok dl div{display:flex;justify-content:space-between;gap:12px}
.r-ok dt{color:var(--faible)}
.r-ok dd{margin:0}
.r-ok-gestes{display:grid;gap:10px;width:100%;max-width:380px}
.r-ok-gestes .bouton{justify-content:center;min-height:52px}
/* Jours et heures : assez grands pour le pouce. */
.jour{width:64px;min-height:72px}
.heure{min-height:46px;font-size:var(--t-s)}
.heures{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.r-action.pret{box-shadow:0 0 0 4px color-mix(in srgb,var(--terre) 25%,transparent)}

/* Les champs de tous les formulaires : 16 px (Safari ne zoome pas), 52 px de haut, l'erreur sous le champ. */
.champ{display:grid;gap:8px;margin:0;border:0;padding:0}
.champ > label,.champ > legend{font-weight:600;font-size:var(--t-s);padding:0}
.champ input,.champ textarea{min-height:52px;font-size:16px}
.champ input[aria-invalid]{border-color:var(--alerte);outline-color:var(--alerte)}
.champ-erreur{margin:0;color:var(--alerte);font-size:var(--t-s)}
.pastilles{display:flex;flex-wrap:wrap;gap:8px}
.pastille-choix{position:relative;display:inline-flex}
.pastille-choix input{position:absolute;opacity:0;width:1px;height:1px}
.pastille-choix span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--trait);border-radius:999px;background:var(--surface);cursor:pointer;font-size:var(--t-s);transition:border-color .2s,background .2s}
.pastille-choix input:checked + span{background:var(--violet);border-color:var(--violet);color:#fff}
.pastille-choix input:focus-visible + span{outline:2px solid var(--violet-c);outline-offset:2px}

@media (max-width:640px){
  dialog.reserver{inset:auto 0 0 0;margin:0;width:100%;max-width:100%;height:auto;max-height:calc(100dvh - env(safe-area-inset-top) - 10px);border:0;border-top:1px solid var(--trait);border-radius:22px 22px 0 0;box-shadow:0 -20px 60px -20px rgba(0,0,0,.35)}
  .r-dedans{max-height:calc(100dvh - env(safe-area-inset-top) - 10px)}
  dialog.reserver::backdrop{background:rgba(20,24,30,.45);backdrop-filter:blur(3px)}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  dialog.reserver[open]{animation:monte .42s var(--doux)}
  @keyframes monte{from{transform:translateY(48px);opacity:0}}
}
/* Corrections vues au téléphone (08/10) : l'en-tête garde ses trois colonnes même quand « retour » est
   masqué (le [hidden] global l'ôtait de la grille), et le jour / l'heure choisis se lisent en blanc. */
.r-tete > #r-retour{grid-column:1;grid-row:1}
.r-tete > .r-tete-titre{grid-column:2;grid-row:1}
.r-tete > #r-fermer{grid-column:3;grid-row:1}
.jour[aria-checked="true"],.jour[aria-checked="true"] span,.jour[aria-checked="true"] b{color:#fff}
.heure[aria-checked="true"]{color:#fff}

/* « Autour de la commune » (08/10) : familles en cartes, une ligne par service — pictogramme, ce que c'est,
   sur place ou à combien, et le point GPS. Pensé téléphone d'abord. */
.autour .section-tete{align-items:start}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico-texte{width:15px;height:15px;vertical-align:-2px}
.autour-familles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.autour-famille{background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:14px 16px}
.autour-famille h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:700 1.02rem/1.2 var(--display);color:var(--terre)}
.autour-famille ul{list-style:none;margin:0;padding:0}
.autour-ligne{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--trait)}
.autour-ligne:first-child{border-top:0}
.autour-ligne > .ico{color:var(--faible)}
.autour-quoi{display:grid;gap:1px;min-width:0}
.autour-quoi > span{font-size:var(--t-s);font-weight:600}
.autour-quoi small{color:var(--faible);font-size:var(--t-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.autour-valeur{display:flex;align-items:center;gap:6px;font-size:var(--t-s);white-space:nowrap}
.autour-ici{color:var(--valide)}
.autour-gps{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--terre)}
.autour-gps:hover{background:var(--fond)}
.autour-gps .ico{width:18px;height:18px}
.autour-note{background:var(--fond);border-left:3px solid var(--terre);padding:10px 14px;border-radius:0 10px 10px 0;font-size:var(--t-s)}
.source-i{position:relative}
.source-i summary{list-style:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--trait);display:grid;place-items:center;font:600 .9rem/1 var(--display);font-style:italic;cursor:pointer;color:var(--faible)}
.source-i summary::-webkit-details-marker{display:none}
.source-i[open] summary{background:var(--encre);color:#fff;border-color:var(--encre)}
.source-i > div{position:absolute;right:0;top:38px;z-index:5;width:min(340px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--trait);border-radius:12px;padding:14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.25);font-size:var(--t-s);display:grid;gap:8px}
.source-i p{margin:0}
@media print{.autour-gps,.source-i{display:none}}
.autour-quoi small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:700px){.source-i > div{left:0;right:auto}}

/* Recherche poussée par secteur et fiche de commune (08/10). Une commune = une ligne qui se déplie. */
.fiches-filtres{margin:6px 0 4px}
.filtre-c{min-height:40px;padding:0 14px;border:1px solid var(--trait);border-radius:999px;background:var(--surface);font:500 var(--t-s) var(--corps);color:var(--texte);cursor:pointer}
.filtre-c[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
.fiches-compte{margin:8px 0 12px}
.fiches-liste{display:grid;gap:10px}
.fiche-commune{background:var(--surface);border:1px solid var(--trait);border-radius:14px}
.fiche-commune[hidden]{display:none}
.fiche-commune > summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.fiche-commune > summary::-webkit-details-marker{display:none}
.fiche-commune > summary::after{content:"+";font:400 1.4rem/1 var(--display);color:var(--terre);flex:none}
.fiche-commune[open] > summary::after{content:"–"}
.fiche-c-nom{display:grid;gap:2px;min-width:0}
.fiche-c-nom b{font:700 1.05rem/1.2 var(--display)}
.fiche-c-nom small{color:var(--faible);font-size:var(--t-xs)}
.fiche-c-nom em{font-style:normal;font-size:var(--t-s);color:var(--texte)}
.fiche-c-icones{display:flex;gap:4px;color:var(--faible);margin-left:auto}
.fiche-c-icones .ico{width:18px;height:18px}
.fiche-commune .fiche-c{padding:0 16px 16px}
.fiche-c-grille{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.fiche-c-grille > div{background:var(--fond);border-radius:12px;padding:12px 14px;display:grid;gap:6px;align-content:start}
.fiche-c-grille > div.large{grid-column:1/-1}
.fiche-c-grille dt{display:flex;align-items:center;gap:8px;font:400 var(--t-xs)/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faible)}
.fiche-c-grille dt .ico{width:16px;height:16px;color:var(--terre)}
.fiche-c-grille dd{margin:0;font-size:var(--t-s);display:grid;gap:3px}
.fiche-c-grille dd small{color:var(--faible);font-size:var(--t-xs);line-height:1.45}
.fiche-c-grille dd small.inline{display:inline}
.fiche-c-puces{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fiche-c-puces li{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--trait);border-radius:999px;padding:5px 10px;font-size:var(--t-xs)}
.fiche-c-puces .ico{width:15px;height:15px;color:var(--terre)}
.fiche-c-actions{margin-top:12px}
.autour-gps.petit{width:28px;height:28px;display:inline-grid;vertical-align:middle}
.fiche-c-sources{margin:0;padding-left:18px;display:grid;gap:3px}
@media (max-width:620px){.fiche-c-actions .bouton{width:100%;justify-content:center}}
.fiche-c-grille dd{display:block}
.fiche-c-grille dd small{display:block;margin-top:3px}
.fiche-c-grille dd small.inline{display:inline;margin:0}
.fiches-nom{width:100%;max-width:520px;min-height:52px;font-size:16px;border-radius:999px;padding:0 18px;margin:6px 0 4px}
.filtre-sec{min-height:36px;font-size:var(--t-xs)}
@media (max-width:620px){
  .fiches-filtres{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-inline:calc(var(--gout,16px) * -1);padding-inline:var(--gout,16px);scroll-snap-type:x proximity}
  .fiches-filtres::-webkit-scrollbar{display:none}
  .fiches-filtres .filtre-c{flex:none;scroll-snap-align:start}
}

/* Crédit discret du créateur du site (08/10) : le monogramme HC STUDIO 66, petit, sur une pastille sombre
   (il est argent et violet : sur le fond clair il disparaîtrait). */
.credit-studio{display:inline-flex;align-items:center;gap:8px;color:var(--faible);text-decoration:none;opacity:.85;transition:opacity .2s}
.credit-studio:hover{opacity:1;color:var(--texte)}
.credit-pastille{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#160C2B;flex:none}
.credit-pastille img{width:20px;height:auto;display:block}
@media (max-width:620px){.pied-bas{flex-wrap:wrap;gap:10px 18px}}
/* Le pied de page est sombre : le monogramme se lit tel quel, sans pastille. */
.credit-pastille{background:none;width:auto;height:auto}
.credit-pastille img{width:26px}
.credit-studio{color:#9FB4C0}
.credit-studio:hover{color:#fff}

/* Accueil (08/10) : la région d'abord — quatre portes, mer · montagne · nature · ville. Sobres : le paysage
   dessiné, un mot, une ligne. Deux par ligne au téléphone, quatre à l'ordinateur. */
.univers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(24px,4vw,40px)}
@media (max-width:760px){.univers{grid-template-columns:repeat(2,1fr);gap:10px}}
.univers-tuile{position:relative;display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate}
.univers-tuile .univers-scene{position:absolute;inset:0;width:100%;height:100%}
.univers-tuile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,30,.55),rgba(20,24,30,0) 60%);z-index:1}
.univers-texte{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;display:grid;gap:2px}
.univers-texte b{font:700 clamp(1.05rem,2vw,1.35rem)/1.1 var(--display)}
.univers-texte small{font-size:var(--t-xs);opacity:.92}
.univers-tuile:hover .univers-scene,.univers-tuile:focus-visible .univers-scene{transform:scale(1.04)}
.univers-tuile .univers-scene{transition:transform .6s var(--doux)}
@media (prefers-reduced-motion:no-preference){.univers{animation:monte .9s var(--doux) .6s both}}

/* Les drapeaux de l'accueil (08/10) : petits, arrondis, un liseré pour le blanc du drapeau français. */
.surtitre-drapeaux{display:inline-flex;align-items:center;gap:10px}
.drapeaux{display:inline-flex;gap:5px}
.drapeau{width:22px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12);display:block}

/* Accueil en photo (08/10, « en fond la plus belle image de la région ») : la photo couvre le haut de page, un voile
   sombre garde le texte lisible (blanc), plus marqué à gauche à l'ordinateur, uniforme au téléphone. */
.heros-photo{position:relative;isolation:isolate;padding-block:clamp(40px,8vw,110px) clamp(48px,8vw,110px);color:#fff}
.heros-fond{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#2b3a44}
.heros-fond img{width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block}
.heros-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,24,.74) 0%,rgba(12,18,24,.5) 42%,rgba(12,18,24,.08) 78%)}
@media (max-width:760px){.heros-fond::after{background:linear-gradient(180deg,rgba(12,18,24,.6) 0%,rgba(12,18,24,.5) 55%,rgba(12,18,24,.68) 100%)}.heros-fond img{object-position:42% 60%}}
.heros-photo .heros-texte::before{display:none}
.heros-photo h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.heros-photo .chapo{color:rgba(255,255,255,.92);max-width:36ch}
.heros-photo .surtitre{color:rgba(255,255,255,.88)}
.heros-credit{position:absolute;right:12px;bottom:8px;margin:0;font-size:10px;color:rgba(255,255,255,.7)}
.heros-credit a{color:inherit}
.univers-section{padding-block:clamp(20px,3vw,32px) 8px}
.univers-section .univers{margin-top:0}

/* WhatsApp (08/10) : reconnaissable d'un coup d'œil (le vert de WhatsApp sur l'icône seule), sans voler la
   place du bouton principal. Dans la barre du téléphone : un rond à côté du cœur. */
.bouton-whatsapp{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--trait);background:var(--surface);color:var(--texte)}
.bouton-whatsapp .wa-icone,.rond-wa .wa-icone{width:20px;height:20px;fill:#25D366;flex:none}
.rond-wa{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--trait);background:var(--surface)}
.wa-note{margin-top:8px}
.page-tete-action .bouton-whatsapp{margin-top:10px}
.agir-wa{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.agir-wa .wa-icone{width:18px;height:18px;fill:#25D366}
.wa-cote{width:100%;justify-content:center;margin-top:10px}

/* Vidéo verticale (montage des photos, 08/10) : un cadre de téléphone, centré, jamais rogné. */
.media-verticale video{aspect-ratio:9/16;width:auto;max-width:100%;height:min(78vh,720px);margin-inline:auto;object-fit:contain;background:#16130f}
@media(max-width:560px){.media-verticale video{aspect-ratio:9/16;height:min(72vh,640px)}}

/* Carte : dernière diapositive « Voir en vidéo » (08/10) */
.carte-photos .carte-fin-video{flex:0 0 100%;scroll-snap-align:start;position:relative;display:grid;place-items:center;align-content:center;gap:10px;color:#fff;text-decoration:none;overflow:hidden;background:#16130f}
.carte-fin-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px) brightness(.55);transform:scale(1.08)}
.carte-fin-video .cfv-rond,.carte-fin-video b{position:relative}
.cfv-rond{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92)}
.cfv-rond svg{width:28px;height:28px;fill:var(--terre);margin-left:4px}
.carte-fin-video b{font-size:1.05rem;letter-spacing:.01em}
@media (prefers-reduced-motion:no-preference){.cfv-rond{animation:cfv-pulse 2.4s ease-in-out infinite}@keyframes cfv-pulse{50%{transform:scale(1.08);box-shadow:0 0 0 10px rgba(255,255,255,.15)}}}

/* ═══════════ « En vidéo », reprise du 08/10 : quatre choix, région, cœur, invitation du téléphone ═══════════ */
.df-sortir{width:auto!important;padding:0 14px 0 10px;gap:6px;display:inline-flex!important;align-items:center;color:#fff;font:600 .9rem/1 var(--corps, inherit);
  border:0;border-radius:999px;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}
.df-filtrer{flex:1;min-width:0;height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.28);color:#fff;font:600 .9rem/1 inherit;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.df-filtrer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df-filtrer svg{width:18px;height:18px;flex:none;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.df-filtrer.actif{background:#fff;color:#16222B;border-color:#fff}
.df-filtrer.actif svg{stroke:#16222B}
.df-son{background:rgba(0,0,0,.38);border:0}
.df-num{margin-left:.7em;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.18);font:600 .68rem/1.2 var(--mono);letter-spacing:.06em}
.df-note{margin:0;font-size:.72rem;opacity:.7}
.df-wa svg{fill:#25D366!important;stroke:none!important}
/* les infos montent quand l'écran arrive */
@media (prefers-reduced-motion:no-preference){
  .df-ecran .df-infos > *{opacity:0;transform:translateY(14px);transition:opacity .5s var(--doux),transform .5s var(--doux)}
  .df-ecran.vu .df-infos > *{opacity:1;transform:none}
  .df-ecran.vu .df-infos > :nth-child(2){transition-delay:.06s}.df-ecran.vu .df-infos > :nth-child(3){transition-delay:.12s}
  .df-ecran.vu .df-infos > :nth-child(4){transition-delay:.18s}.df-ecran.vu .df-infos > :nth-child(5){transition-delay:.24s}
  .df-ecran .df-gestes{opacity:0;transform:translateX(12px);transition:opacity .5s var(--doux) .15s,transform .5s var(--doux) .15s}
  .df-ecran.vu .df-gestes{opacity:1;transform:none}
}
/* le cœur du double toucher */
.df-coeur{position:absolute;left:50%;top:44%;z-index:3;width:110px;height:110px;margin:-55px 0 0 -55px;pointer-events:none;opacity:0}
.df-coeur svg{width:100%;height:100%;fill:#E2533A;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.df-coeur.bat{animation:df-bat .8s var(--doux) both}
@keyframes df-bat{0%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1.15)}45%{transform:scale(.95)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25) translateY(-30px)}}
/* pause : un signe discret au centre */
.df-ecran.en-pause::after{content:"";position:absolute;left:50%;top:44%;z-index:3;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center/30px no-repeat;pointer-events:none}
/* progression de la vidéo */
.df-progres{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;background:rgba(255,255,255,.18)}
.df-progres i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
/* aide : la flèche qui monte */
.df-aide span{display:block;font-size:1.4rem;margin-bottom:2px}
@media (prefers-reduced-motion:no-preference){.df-aide span{animation:df-monte 1.4s ease-in-out infinite}@keyframes df-monte{50%{transform:translateY(-8px)}}}
/* écran de la région : discret */
.df-region .df-voile{background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)}
.df-region-texte{position:absolute;left:20px;right:20px;bottom:max(64px,calc(env(safe-area-inset-bottom) + 52px));z-index:2;display:grid;gap:6px}
.df-drapeaux{display:inline-flex;gap:6px}
.df-drapeaux svg{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.df-region-ligne{margin:0;font:600 clamp(1.25rem,5vw,1.6rem)/1.2 var(--display);color:#fff;letter-spacing:-.01em}
.df-region-sous{margin:0;font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.df-region-credit{position:absolute;right:12px;bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));z-index:2;margin:0;font-size:.62rem;color:rgba(255,255,255,.6)}
.df-region-credit a{color:inherit}
/* la feuille des quatre choix */
.df-choix{position:absolute;inset:0;z-index:8}
.df-choix-fond{position:absolute;inset:0;background:rgba(8,10,12,.55);opacity:0;transition:opacity .28s}
.df-choix-feuille{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;padding:12px 20px max(20px,env(safe-area-inset-bottom));
  background:#fff;color:#16222B;border-radius:22px 22px 0 0;display:grid;gap:14px;transform:translateY(105%);transition:transform .32s var(--doux)}
.df-choix.ouvert .df-choix-fond{opacity:1}
.df-choix.ouvert .df-choix-feuille{transform:none}
.df-choix-poignee{justify-self:center;width:42px;height:5px;border-radius:9px;background:#d7d2ca}
.df-choix-feuille h2{margin:2px 0 0;font-size:1.3rem;color:#16222B}
.df-ch-ligne{display:grid;gap:8px}
.df-ch-nom{font:600 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6b665e}
.df-ch-pastilles{display:flex;flex-wrap:wrap;gap:8px}
.df-ch{min-height:42px;padding:0 16px;border-radius:999px;border:1px solid #d7d2ca;background:#fff;color:#16222B;font:600 .95rem/1 inherit;cursor:pointer}
.df-ch[aria-pressed="true"]{background:#16222B;border-color:#16222B;color:#fff}
.df-ch-select{min-height:46px;border-radius:12px;border:1px solid #d7d2ca;padding:0 12px;font-size:16px;background:#fff;color:#16222B}
.df-voir{width:100%;justify-content:center;min-height:52px;margin-top:4px}
.df-voir:disabled{opacity:.5}
.df-tout{justify-self:center;color:#6b665e}
@media (prefers-reduced-motion:no-preference){
  .df-choix.ouvert .df-ch{animation:df-ch .4s var(--doux) both;animation-delay:calc(var(--i) * 40ms + 120ms)}
  @keyframes df-ch{from{opacity:0;transform:translateY(8px)}}
}
@media (min-width:761px){.df-choix-feuille{width:min(480px,100%);left:50%;transform:translate(-50%,105%)}.df-choix.ouvert .df-choix-feuille{transform:translate(-50%,0)}}
/* l'invitation du téléphone */
.invite-df{position:fixed;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:55;display:flex;align-items:center;gap:6px;
  padding:6px 6px 6px 6px;border-radius:18px;background:#16130f;color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.28);
  transform:translateY(140%);opacity:0;transition:transform .5s var(--doux),opacity .5s var(--doux)}
.invite-df.visible{transform:none;opacity:1}
.invite-df-ouvrir{flex:1;display:flex;align-items:center;gap:12px;background:none;border:0;color:inherit;text-align:left;padding:0;cursor:pointer;min-width:0}
.invite-df-image{position:relative;flex:none;width:52px;height:68px;border-radius:12px;overflow:hidden;background:#333}
.invite-df-image img{width:100%;height:100%;object-fit:cover}
.invite-df-image i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25)}
.invite-df-image svg{width:24px;height:24px;fill:#fff}
.invite-df-texte{display:grid;gap:3px;min-width:0}
.invite-df-texte b{font-size:1rem}
.invite-df-texte small{font-size:.8rem;opacity:.75}
.invite-df-fermer{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .invite-df-image img{animation:travelling 9s ease-in-out infinite alternate}
  .invite-df.visible .invite-df-image i svg{animation:cfv-pulse 2.4s ease-in-out 1s infinite}
}
body.mode-defiler .invite-df,body.menu-ouvert .invite-df{display:none}

/* Pied de page (08/10, demande d'Hadrien : « en bas de page sur toutes les pages, mon logo cliquable qui
   renvoie vers ma page HC Studio ») : le logo complet sur une carte blanche (il est dessiné sur blanc). */
.pied-studio{display:flex;justify-content:center;padding-block:22px 6px;border-top:1px solid rgba(255,255,255,.1);margin-top:28px}
.logo-studio{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:#9FB4C0}
.logo-studio-carte{display:block;padding:8px 12px;border-radius:12px;background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.25);transition:transform .25s var(--doux),box-shadow .25s}
.logo-studio-carte img{display:block;width:200px;height:auto}
.logo-studio-texte{display:grid;gap:2px;font-size:.85rem}
.logo-studio-texte b{color:#fff;font-weight:600}
.logo-studio-texte small{font-size:.72rem;opacity:.75}
.logo-studio:hover .logo-studio-carte,.logo-studio:focus-visible .logo-studio-carte{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
@media (max-width:620px){.logo-studio{flex-direction:column;gap:10px;text-align:center}.logo-studio-carte img{width:180px}}
/* Fiche au téléphone (08/10) : « ▶ Vidéo » à gauche, la pastille (Nouveau, Exclusivité) garde la droite ;
   la barre du bas tient sur une ligne avec le rond WhatsApp. */
.galerie-visites{left:14px;right:auto}
.barre-mobile b{white-space:nowrap}
.barre-mobile-gestes{gap:8px}
@media (max-width:400px){.barre-mobile{gap:8px;padding-inline:12px}.barre-mobile .bouton{padding-inline:14px}.rond-wa,.barre-mobile .carte-garder{width:40px;height:40px}}

/* Logo 3D (08/10, « le logo 3D, au propre ») : il est dessiné sur noir — une carte noire aux bords nets, un
   halo violet discret au survol. */
.logo-studio-carte{padding:0;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.35)}
.logo-studio-carte img{width:260px;height:auto}
.logo-studio:hover .logo-studio-carte,.logo-studio:focus-visible .logo-studio-carte{box-shadow:0 0 0 1px rgba(167,139,250,.45),0 12px 34px rgba(109,40,217,.35)}
@media (max-width:620px){.logo-studio-carte img{width:230px}}
/* Logo 3D fondu dans le pied de page (08/10, « adapte le fond pour qu'il se glisse bien dans le site ») :
   le noir du logo disparaît (fusion « écran » : le noir laisse voir le fond, la lumière reste), les bords
   s'estompent pour qu'aucun rectangle ne se devine. */
.logo-studio-carte{background:none;box-shadow:none;border-radius:0;overflow:visible}
.logo-studio-carte img{mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 72% 80% at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 72% 80% at 50% 50%,#000 62%,transparent 100%);
  transition:filter .3s,transform .3s var(--doux)}
.logo-studio:hover .logo-studio-carte,.logo-studio:focus-visible .logo-studio-carte{box-shadow:none;transform:none}
.logo-studio:hover .logo-studio-carte img,.logo-studio:focus-visible .logo-studio-carte img{filter:brightness(1.15) drop-shadow(0 0 14px rgba(139,43,255,.35));transform:translateY(-2px)}

/* La lettre HC Immo (09/10) : au pied de chaque page, sur le fond sombre ; et sur sa page. */
.pied-lettre{padding-block:26px 6px;border-top:1px solid rgba(255,255,255,.1);margin-top:28px}
.lettre-form{display:grid;gap:12px;max-width:640px}
.lettre-texte{display:grid;gap:4px}
.lettre-texte b{font-size:1.05rem;color:#fff}
.lettre-texte span{font-size:.9rem;opacity:.8}
.lettre-champs{display:flex;gap:8px;flex-wrap:wrap}
.lettre-champs input{flex:1 1 220px;min-height:46px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:16px}
.lettre-champs input::placeholder{color:rgba(255,255,255,.55)}
.lettre-accord{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;opacity:.85;line-height:1.4}
.lettre-accord input{width:18px;height:18px;margin-top:1px;flex:none}
.lettre-accord a{color:inherit}
.lettre-dit{margin:0;min-height:1.2em;font-size:.88rem;color:#FFD9C9}
.lettre-dit.ok{color:#B9F2C8}
.lettre-page .lettre-form{padding:22px;border-radius:18px;background:var(--encre);color:#DCE6EC;margin-block:8px 0}