/* ==========================================================
   Mini-site « Maison à Beaussault » — réalisation Création Web 360
   Aucune police ni bibliothèque externe : tout est servi par le site.
   ========================================================== */
:root {
    --encre: #1d2a26;          /* texte */
    --vert: #23453c;           /* couleur principale */
    --vert-fonce: #142a24;
    --sable: #f6f1e8;          /* fond chaud */
    --sable-2: #ece4d6;
    --blanc: #fff;
    --doux: #59665f;           /* texte secondaire (contraste AA sur sable) */
    --vendu: #b3261e;          /* bandeau VENDU */
    --or: #b08a4a;
    --bordure: #ddd3c2;
    --rayon: 14px;
    --ombre: 0 10px 30px rgba(20, 42, 36, .12);
    --titre: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (max-width: 52rem) { html { scroll-padding-top: 8.5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    font: 400 1.0625rem/1.65 var(--texte);
    color: var(--encre);
    background: var(--sable);
}
img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--vert); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.15; color: var(--vert-fonce); margin: 0 0 .6em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
.conteneur { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.surtitre { font: 700 .8rem/1.2 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin: 0 0 .75rem; }
.surtitre--fonce { color: #7a5c27; }   /* or lisible sur fond clair */

/* ---------- En-tête ---------- */
.entete {
    position: fixed; inset: 0 0 auto; z-index: 50;
    transition: background .3s, box-shadow .3s;
}
.entete.est-colle, .page-interne .entete { background: rgba(20, 42, 36, .94); box-shadow: 0 4px 20px rgba(0, 0, 0, .15); backdrop-filter: blur(6px); }
.entete__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.entete__marque { color: var(--blanc); text-decoration: none; font: 600 1.15rem/1.1 var(--titre); }
.entete__marque small { display: block; font: 500 .72rem/1.3 var(--texte); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.menu a {
    display: inline-block; padding: .55rem .8rem; border-radius: 999px;
    color: var(--blanc); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.menu a:hover, .menu a[aria-current="page"] { background: rgba(255, 255, 255, .14); }
.menu__retour { border: 1px solid rgba(255, 255, 255, .45); }
@media (max-width: 52rem) {
    .entete__inner { flex-direction: column; align-items: flex-start; padding-block: .6rem; gap: .35rem; }
    .menu { gap: 0; margin-inline: -.6rem; }
    .menu a { padding: .45rem .6rem; font-size: .9rem; }
    .menu__retour { display: none !important; }
}

/* ---------- Haut de page : vidéo drone + bandeau VENDU ---------- */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(100svh, 56rem);
    display: grid; align-items: end;
    color: var(--blanc);
    background: var(--vert-fonce);
}
.hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(10, 22, 19, .55) 0%, rgba(10, 22, 19, .05) 30%, rgba(10, 22, 19, .25) 60%, rgba(10, 22, 19, .85) 100%);
}
.hero__texte { padding-block: 22rem 4rem; max-width: 46rem; }
@media (min-width: 52rem) { .hero__texte { padding-block: 24rem 4.5rem; } }
.hero .surtitre { color: var(--blanc); opacity: .9; }
.hero h1 { color: var(--blanc); font-size: clamp(2.3rem, 6vw, 4.2rem); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.hero__lieu { font-size: 1.15rem; margin: 0 0 1.5rem; opacity: .95; }
.chiffres-cles { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0 0 2rem; padding: 0; }
.chiffres-cles li {
    padding: .45rem .95rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(4px);
}
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; }
.bouton {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem;
    padding: .8rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
    font: 600 1rem/1 var(--texte); text-decoration: none; cursor: pointer;
    background: var(--blanc); color: var(--vert-fonce);
}
.bouton--contour { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, .7); }
.bouton--plein { background: var(--vert); color: var(--blanc); }
.bouton:hover { filter: brightness(1.08); }

/* Bandeau « VENDU » en travers de la page */
.vendu {
    position: absolute; z-index: 5; pointer-events: none;
    top: clamp(7.5rem, 22%, 13rem); left: -10%; width: 120%;
    transform: rotate(7deg);
    padding: .4em 0;
    background: var(--vendu);
    color: var(--blanc);
    text-align: center;
    font: 800 clamp(2rem, 8vw, 5.5rem)/1 var(--texte);
    text-transform: uppercase;
    letter-spacing: .4em;
    text-indent: .4em;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    border-block: 4px solid rgba(255, 255, 255, .85);
}
.vendu--page { position: relative; top: auto; left: auto; width: auto; transform: none; display: block; font-size: clamp(1.6rem, 6vw, 3rem); margin: 0 0 2rem; border-radius: var(--rayon); }

@media (min-width: 52rem) {
    .vendu { top: 8rem; transform: rotate(5deg); font-size: clamp(2rem, 6vw, 4.5rem); }
}
.hero__pause {
    position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 6;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .35); color: var(--blanc);
    font-size: 1rem; cursor: pointer;
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--blanc { background: var(--blanc); }
.section--vert { background: var(--vert-fonce); color: #e8efe9; }
.section--vert h2, .section--vert h3 { color: var(--blanc); }
.section__entete { max-width: 44rem; margin-bottom: 2.5rem; }
.section__intro { color: var(--doux); font-size: 1.1rem; margin: 0; }
.section--vert .section__intro { color: #c9d6cf; }

/* Le bien */
.bien { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .bien { grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: start; } }
.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; margin: 0 0 2rem; }
.fiche div { background: var(--sable); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem 1.1rem; }
.fiche dt { font-size: .85rem; color: var(--doux); }
.fiche dd { margin: .15rem 0 0; font: 600 1.35rem/1.2 var(--titre); color: var(--vert-fonce); }
.liste-pieces { columns: 2 12rem; padding-left: 1.1rem; margin: 0 0 1.5rem; }
.liste-pieces li { margin-bottom: .3rem; break-inside: avoid; }
.carte-plan { background: var(--sable); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.25rem; }
.carte-plan img { border-radius: 8px; width: 100%; }
.carte-plan figcaption { font-size: .9rem; color: var(--doux); margin-top: .6rem; }

/* Étiquettes énergie (DPE / GES) */
.energie { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 40rem) { .energie { grid-template-columns: 1fr 1fr; } }
.energie h3 { font: 600 1rem/1.3 var(--texte); margin-bottom: .6rem; color: var(--encre); }
.echelle { display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; }
.echelle li {
    flex: 1; display: grid; place-items: center; height: 2rem; border-radius: 4px;
    font: 700 .85rem/1 var(--texte); color: rgba(0, 0, 0, .65);
}
.echelle li.actif { transform: scaleY(1.35); border-radius: 6px; color: #000; box-shadow: 0 0 0 2px var(--encre); font-size: 1.05rem; }
.dpe li:nth-child(1) { background: #009c6d; } .dpe li:nth-child(2) { background: #52b153; } .dpe li:nth-child(3) { background: #a5cc74; }
.dpe li:nth-child(4) { background: #f4e70f; } .dpe li:nth-child(5) { background: #f0b40f; } .dpe li:nth-child(6) { background: #eb8235; } .dpe li:nth-child(7) { background: #d7221f; color: #fff; }
.ges li:nth-child(1) { background: #f6edfd; } .ges li:nth-child(2) { background: #e4c7fe; } .ges li:nth-child(3) { background: #d5aafd; }
.ges li:nth-child(4) { background: #c99aef; } .ges li:nth-child(5) { background: #b57bdd; } .ges li:nth-child(6) { background: #a35acb; color: #fff; } .ges li:nth-child(7) { background: #8a3cb3; color: #fff; }
.energie p { font-size: .9rem; color: var(--doux); margin: .6rem 0 0; }

/* ---------- Diaporama ---------- */
.diapo { display: grid; gap: 1rem; }
.diapo__scene {
    position: relative; overflow: hidden; border-radius: var(--rayon);
    background: #0b1512; aspect-ratio: 4 / 3; box-shadow: var(--ombre);
}
@media (min-width: 60rem) { .diapo__scene { aspect-ratio: 16 / 9; } }
.diapo__scene img { width: 100%; height: 100%; object-fit: contain; transition: opacity .35s; }
.diapo__scene img.est-charge { opacity: 1; }
.diapo__scene img.en-cours { opacity: .25; }
.diapo__legende {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 2.5rem 1.25rem 1rem; color: var(--blanc);
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
    display: flex; justify-content: space-between; gap: 1rem; font-weight: 500;
}
.diapo__compteur { opacity: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.diapo__fleche, .diapo__plein {
    position: absolute; z-index: 2; display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .9); color: var(--vert-fonce); font-size: 1.4rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.diapo__fleche { top: 50%; translate: 0 -50%; }
.diapo__fleche--prec { left: 1rem; }
.diapo__fleche--suiv { right: 1rem; }
.diapo__plein { top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
.diapo__vignettes { display: flex; gap: .6rem; overflow-x: auto; padding: .25rem .1rem .6rem; scroll-snap-type: x mandatory; }
.diapo__vignettes button {
    flex: 0 0 auto; padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden;
    background: none; cursor: pointer; scroll-snap-align: start; opacity: .7; transition: opacity .2s, border-color .2s;
}
.diapo__vignettes button:hover { opacity: 1; }
.diapo__vignettes button[aria-current="true"] { border-color: var(--or); opacity: 1; }
.diapo__vignettes img { width: 7.5rem; height: 5.6rem; object-fit: cover; }
.diapo__scene:fullscreen { aspect-ratio: auto; border-radius: 0; }

/* ---------- Visite virtuelle ---------- */
.visite {
    position: relative; overflow: hidden; border-radius: var(--rayon);
    aspect-ratio: 16 / 9; background: #0b1512 center / cover no-repeat; box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
@media (max-width: 40rem) { .visite { aspect-ratio: 3 / 4; } }
.visite iframe, .visite > img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.visite__lancer {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem;
    border: 0; cursor: pointer; color: var(--blanc); font: 600 1.15rem/1.3 var(--texte);
    background: rgba(10, 22, 19, .45);
}
.visite__lancer span.rond {
    width: 5.5rem; height: 5.5rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--blanc); color: var(--vert-fonce); font: 800 1.3rem/1 var(--texte);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .25);
}
.visite__lancer:hover span.rond { box-shadow: 0 0 0 16px rgba(255, 255, 255, .25); }
.visite__aide { margin: 1rem 0 0; color: #c9d6cf; font-size: .95rem; }
.visite__aide a { color: var(--blanc); }

/* ---------- Situation ---------- */
.situation { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .situation { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.situation figure { margin: 0; }
.situation img { border-radius: var(--rayon); box-shadow: var(--ombre); }
.situation figcaption { font-size: .8rem; color: var(--doux); margin-top: .4rem; }
.distances { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .5rem; }
.distances li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--bordure); }
.distances strong { color: var(--vert-fonce); }

/* ---------- Contact (désactivé) ---------- */
.page-interne main { padding-top: 6rem; }
.formulaire { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: var(--ombre); }
.formulaire fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.formulaire fieldset:disabled { opacity: .55; }
.formulaire label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.formulaire input, .formulaire textarea {
    font: inherit; padding: .75rem .9rem; border: 1px solid var(--bordure); border-radius: 10px; background: var(--sable); width: 100%;
}
.formulaire textarea { min-height: 8rem; resize: vertical; }
.formulaire__ligne { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .formulaire__ligne { grid-template-columns: 1fr 1fr; } }
.avis-vendu {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #fbeceb; border: 1px solid #f0c4c1; color: #7a1a14; border-radius: var(--rayon);
    padding: 1rem 1.25rem; margin: 0 0 1.5rem;
}
.avis-vendu strong { display: block; font-size: 1.05rem; }
.avis-vendu p { margin: 0; }
.contact-grille { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .contact-grille { grid-template-columns: 1.3fr .7fr; gap: 3rem; align-items: start; } }
.encart { background: var(--vert-fonce); color: #e8efe9; border-radius: var(--rayon); padding: 1.75rem; }
.encart h2 { color: var(--blanc); font-size: 1.5rem; }
.encart a:not(.bouton) { color: var(--blanc); }

/* ---------- Pied de page ---------- */
.pied { background: var(--vert-fonce); color: #c9d6cf; padding-block: 3rem 2rem; font-size: .95rem; }
.pied__inner { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .pied__inner { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.pied a { color: var(--blanc); }
.pied__credit { font-family: var(--titre); font-size: 1.25rem; color: var(--blanc); margin: 0 0 .4rem; }
.pied p { margin: 0 0 .4rem; }