/* ==========================================================
   Réglages globaux (équivalent du kit Elementor)
   ========================================================== */
:root {
  --sapin: #143d31;        /* vert de la plaquette Le Sè Baldo */
  --sapin-fonce: #0c2a21;
  --basalte: #4a5256;      /* gris basalte des façades */
  --brume: #eef3f0;        /* fond clair des sections alternées */
  --pousse: #7aae3f;       /* vert RE2020, pictos de validation */
  --encre: #1d2622;
  --blanc: #ffffff;
  --trait: #d5dfd9;

  --f-titre: "Marcellus", Georgia, serif;
  --f-texte: "Source Sans 3", Arial, sans-serif;

  --t-h1: clamp(2rem, 1.4rem + 2vw, 3.1rem);
  --t-h2: clamp(1.65rem, 1.25rem + 1.3vw, 2.4rem);
  --t-h3: 1.25rem;
  --t-texte: 1.0625rem;
  --t-petit: 0.9375rem;

  /* Marges internes de section du kit */
  --sec-v: 80px;
  --sec-h: 32px;
  --largeur: 1500px;
  --rayon: 6px;
}
@media (max-width: 1366px) { :root { --sec-h: 50px; --largeur: 1000px; } }
@media (max-width: 1024px) { :root { --sec-v: 50px; --sec-h: 24px; --largeur: 100%; } }
@media (max-width: 767px)  { :root { --sec-h: 16px; } }

/* ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; font-family: var(--f-texte); font-size: var(--t-texte); line-height: 1.6;
  color: var(--encre); background: var(--blanc); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 400; line-height: 1.15; margin: 0; color: var(--sapin); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-family: var(--f-texte); font-weight: 700; line-height: 1.3; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--pousse); outline-offset: 2px; }

/* Container de section (marges du kit, identiques partout) */
.section { padding: var(--sec-v) var(--sec-h); }
.section--brume { background: var(--brume); }
.section--sapin { background: var(--sapin); color: var(--blanc); }
.section--sapin h2 { color: var(--blanc); }
/* Container interne (marges internes à 0) */
.interne { max-width: var(--largeur); margin: 0 auto; padding: 0; }

.titre-bloc { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin: 0 0 48px; }
.titre-bloc--centre { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-texte); font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  background: var(--sapin); color: var(--blanc); border: 2px solid var(--sapin);
  padding: 15px 28px; border-radius: var(--rayon); cursor: pointer; transition: background .2s, color .2s;
}
.bouton:hover { background: var(--sapin-fonce); border-color: var(--sapin-fonce); }
.bouton--blanc { background: var(--blanc); color: var(--sapin); border-color: var(--blanc); }
.bouton--blanc:hover { background: var(--brume); border-color: var(--brume); }
.bouton svg { width: 20px; height: 20px; flex: none; }
.precision { font-size: var(--t-petit); color: var(--basalte); }

.picto { width: 26px; height: 26px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ========================== Bandeau fixe ========================== */
.bandeau {
  position: sticky; top: 0; z-index: 50; background: var(--sapin); color: var(--blanc);
  padding: 12px var(--sec-h);
}
.bandeau .interne { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo-residence { font-family: var(--f-titre); font-size: 1.6rem; letter-spacing: .04em; text-decoration: none; color: var(--blanc); line-height: 1; }
.logo-residence span { font-size: 1.05rem; }
.bandeau__actions { display: flex; align-items: center; gap: 24px; }
.bandeau__tel { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.0625rem; }
.bandeau__tel svg { width: 22px; height: 22px; }
.bandeau .bouton { padding: 10px 20px; font-size: 1rem; }

/* ========================== Bloc 1, accueil ========================== */
.accueil { position: relative; color: var(--blanc); background: var(--sapin-fonce); overflow: hidden; }
.accueil__fond { position: absolute; inset: 0; }
.accueil__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.accueil__fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,42,33,.9) 0%, rgba(12,42,33,.7) 38%, rgba(12,42,33,.12) 62%, rgba(12,42,33,0) 100%);
}
.accueil .interne { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 60px; align-items: center; min-height: 560px; }
.accueil__texte { display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
.accueil h1 { color: var(--blanc); }
.accueil__sous-titre { font-size: 1.1875rem; line-height: 1.5; }
.liste-atouts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-atouts li { display: flex; gap: 12px; align-items: flex-start; }
.liste-atouts .picto { width: 22px; height: 22px; color: var(--pousse); margin-top: 2px; }
.accueil__prix { font-weight: 700; font-size: 1.125rem; }
.accueil__lieu { display: flex; align-items: center; gap: 8px; font-size: var(--t-petit); opacity: .9; }
.accueil__lieu .picto { width: 20px; height: 20px; }
.accueil__cta { display: none; flex-direction: column; gap: 10px; align-items: flex-start; }
.accueil__cta .precision { color: rgba(255,255,255,.85); }

/* Carte formulaire (accueil et bloc 9) */
.carte-form {
  background: var(--blanc); color: var(--encre); border-radius: var(--rayon); padding: 30px;
  box-shadow: 0 18px 40px rgba(6, 24, 18, .28); display: flex; flex-direction: column; gap: 16px;
}
.accueil .carte-form { padding: 24px; gap: 12px; }
.accueil .carte-form h2 { font-size: 1.3rem; }
.accueil .form { gap: 10px; }
.accueil .champ input[type=text], .accueil .champ input[type=tel], .accueil .champ input[type=email] { padding: 9px 12px; }
.accueil .typos label { padding: 6px 13px; }
.accueil .consentement { font-size: .8125rem; }
.accueil .bouton { padding: 13px 20px; }
.carte-form h2 { font-size: 1.5rem; }
.form { display: flex; flex-direction: column; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .champ legend { font-weight: 700; font-size: var(--t-petit); padding: 0; }
.champ input[type=text], .champ input[type=tel], .champ input[type=email] {
  font: inherit; padding: 12px 14px; border: 1px solid #b9c7bf; border-radius: var(--rayon); background: var(--blanc);
}
.champ input:focus { border-color: var(--sapin); outline: 2px solid rgba(20,61,49,.2); }
fieldset.champ { border: 0; margin: 0; padding: 0; }
.typos { display: flex; flex-wrap: wrap; gap: 8px; }
.typos input { position: absolute; opacity: 0; pointer-events: none; }
.typos label {
  font-weight: 600; font-size: var(--t-petit); padding: 9px 16px; border: 1px solid #b9c7bf; border-radius: 40px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.typos input:checked + label { background: var(--sapin); color: var(--blanc); border-color: var(--sapin); }
.typos input:focus-visible + label { outline: 3px solid var(--pousse); outline-offset: 2px; }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.45; color: var(--basalte); }
.consentement input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--sapin); flex: none; }
.form .bouton { width: 100%; }

/* ========================== Bloc 2, le constat ========================== */
.constat { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.constat__image img { border-radius: var(--rayon); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.constat__texte { display: flex; flex-direction: column; gap: 20px; }
.constat__texte p:last-child { font-size: 1.1875rem; color: var(--sapin); font-weight: 600; }

/* ========================== Bloc 3, appartements ========================== */
.lots { border-top: 2px solid var(--sapin); }
.lot {
  display: grid; grid-template-columns: 90px repeat(3, minmax(0, 1fr)) 1.1fr 1.5fr; gap: 20px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--trait);
}
.lot--entete { font-size: .875rem; font-weight: 700; color: var(--basalte); padding: 14px 0; }
.lot__type { font-family: var(--f-titre); font-size: 1.75rem; color: var(--sapin); }
.lot__prix { font-weight: 700; font-size: 1.3125rem; color: var(--sapin); }
.lot__lien { justify-self: end; font-weight: 700; color: var(--sapin); text-underline-offset: 4px; }
.lot__lien:hover { color: var(--pousse); }
.lot__etiquette { display: none; }
.lots__note { margin-top: 22px; font-size: var(--t-petit); color: var(--basalte); max-width: 900px; }
.a-completer { background: #fff3c4; padding: 0 4px; border-radius: 3px; }

.volumes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.volumes figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.volumes img { background: var(--brume); border-radius: var(--rayon); aspect-ratio: 4 / 3; object-fit: contain; width: 100%; }
.volumes figcaption { font-size: var(--t-petit); color: var(--basalte); text-align: center; }

/* ========================== Bloc 4, au quotidien ========================== */
.quotidien { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.quotidien__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: sticky; top: 110px; }
.quotidien__photos img { border-radius: var(--rayon); width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.quotidien__photos img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.quotidien__texte { display: flex; flex-direction: column; gap: 28px; }
.prestations { display: flex; flex-direction: column; border-top: 1px solid var(--trait); }
.prestation { border-bottom: 1px solid var(--trait); }
.prestation summary {
  list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 0; cursor: pointer;
  font-weight: 700; font-size: 1.125rem; color: var(--sapin);
}
.prestation summary::-webkit-details-marker { display: none; }
.prestation summary .picto { color: var(--pousse); }
.prestation summary .plus { margin-left: auto; width: 18px; height: 18px; position: relative; flex: none; }
.prestation summary .plus::before, .prestation summary .plus::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--sapin); transition: transform .2s; }
.prestation summary .plus::after { transform: rotate(90deg); }
.prestation[open] summary .plus::after { transform: rotate(0); }
.prestation p { padding: 0 0 20px 40px; color: var(--basalte); }
.lien-depliant { font-weight: 700; color: var(--sapin); text-underline-offset: 4px; }

/* ========================== Bloc 5, projets ========================== */
.projets { display: grid; grid-template-columns: 0.75fr 1.6fr; gap: 56px; align-items: center; }
.projets__intro { display: flex; flex-direction: column; gap: 28px; }
.projets__intro img { width: 100%; max-width: 520px; mix-blend-mode: multiply; }
.profils { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profil { background: var(--blanc); border-radius: var(--rayon); padding: 28px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--trait); }
.profil .picto { width: 34px; height: 34px; color: var(--sapin); }
.profil p { color: var(--basalte); font-size: 1rem; }
.projets__cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* ========================== Bloc 6, promoteur ========================== */
.promoteur { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.promoteur__texte { display: flex; flex-direction: column; gap: 20px; }
.promoteur__texte img { width: 260px; background: var(--blanc); padding: 10px 14px; border-radius: var(--rayon); }
.ventes { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: var(--rayon); padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.ventes__chiffre { font-family: var(--f-titre); font-size: clamp(3.4rem, 2.6rem + 3vw, 5.2rem); line-height: 1; }
.ventes__libelle { font-size: 1.1875rem; }
.ventes__barre { display: grid; grid-template-columns: repeat(35, 1fr); gap: 3px; }
.ventes__barre span { height: 26px; border-radius: 2px; background: rgba(255,255,255,.18); transition: background .35s; }
.ventes__barre span.vendu { background: var(--pousse); }
.ventes__legende { font-size: var(--t-petit); opacity: .85; }
.realisations { margin-top: 64px; display: flex; flex-direction: column; gap: 22px; }
.realisations h3 { color: var(--blanc); font-family: var(--f-titre); font-weight: 400; font-size: 1.5rem; }
.realisations__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.realisation { text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.realisation__photo { aspect-ratio: 4 / 3; border-radius: var(--rayon); background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.3); display: grid; place-items: center; font-size: .8125rem; opacity: .8; text-align: center; padding: 10px; }
.realisation__nom { font-weight: 600; }

/* ========================== Bloc 7, emplacement ========================== */
.emplacement { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.emplacement__texte { display: flex; flex-direction: column; gap: 24px; }
.distances { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.distances li { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.distances .picto { width: 22px; height: 22px; color: var(--sapin); }
.distances strong { font-weight: 600; }
.distances span { color: var(--basalte); text-align: right; font-size: var(--t-petit); }
.emplacement__visuels { display: flex; flex-direction: column; gap: 20px; }
.emplacement__visuels img { border-radius: var(--rayon); width: 100%; }
.carte { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--rayon); background: var(--brume); }

/* ========================== Bloc 8, FAQ ========================== */
.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; display: flex; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; font-weight: 700; font-size: 1.1875rem; color: var(--sapin); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { margin-left: auto; width: 20px; height: 20px; position: relative; flex: none; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 2px; background: var(--sapin); transition: transform .2s; }
.faq summary .plus::after { transform: rotate(90deg); }
.faq details[open] summary .plus::after { transform: rotate(0); }
.faq details p { padding: 0 0 26px; color: var(--basalte); max-width: 1000px; }

/* ========================== Bloc 9, formulaire ========================== */
.section--contact { position: relative; background: var(--sapin-fonce) url("../img/sejour.webp") center / cover no-repeat; }
.section--contact::before { content: ""; position: absolute; inset: 0; background: rgba(12, 42, 33, .72); }
.contact { position: relative; display: grid; grid-template-columns: 1fr 520px; gap: 64px; align-items: center; color: var(--blanc); }
.contact__texte { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.contact__texte h2 { color: var(--blanc); }
.contact__appel { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.contact__appel svg { width: 26px; height: 26px; }
.contact .precision { color: var(--basalte); text-align: center; }

/* ========================== Pied de page ========================== */
.pied { background: var(--encre); color: rgba(255,255,255,.78); font-size: .875rem; padding: 32px var(--sec-h); }
.pied .interne { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; text-align: center; }
.pied a { color: rgba(255,255,255,.92); }

/* ========================== Barre mobile ========================== */
.barre-mobile { display: none; }

/* ========================== Page de remerciement ========================== */
.merci { min-height: calc(100vh - 140px); display: grid; place-items: center; text-align: center; }
.merci .interne { max-width: 680px; display: flex; flex-direction: column; gap: 22px; align-items: center; }
.merci .picto { width: 64px; height: 64px; color: var(--pousse); stroke-width: 1.4; }

/* ========================== Portable ========================== */
@media (max-width: 1366px) {
  .accueil .interne { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .contact { grid-template-columns: 1fr 460px; gap: 48px; }
  .lot { grid-template-columns: 70px repeat(3, minmax(0, 1fr)) 1fr 1.6fr; gap: 14px; }
  .lot__lien { font-size: .9375rem; }
  .realisations__grille { grid-template-columns: repeat(4, 1fr); }
}

/* ========================== Tablette ========================== */
@media (max-width: 1024px) {
  .accueil .interne { grid-template-columns: 1fr; min-height: 0; }
  .accueil__fond img { object-position: 62% 0; height: 48%; }
  .accueil__fond::after { background: linear-gradient(180deg, rgba(12,42,33,.05) 0%, rgba(12,42,33,.35) 22%, rgba(12,42,33,1) 48%, rgba(12,42,33,1) 100%); }
  .accueil .interne { padding-top: 150px; }
  .accueil .carte-form { display: none; }
  .accueil__cta { display: flex; }
  .constat, .quotidien, .projets, .promoteur, .emplacement, .contact { grid-template-columns: 1fr; gap: 40px; }
  .quotidien__photos { position: static; }
  .lots { border-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .lot--entete { display: none; }
  .lot { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 22px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--blanc); }
  .lot__type, .lot__prix, .lot__lien { grid-column: 1 / -1; }
  .lot__prix { font-size: 1.75rem; order: 2; }
  .lot__type { order: 1; }
  .lot__lien { order: 9; justify-self: start; }
  .lot__info { order: 3; display: flex; flex-direction: column; font-size: 1rem; }
  .lot__etiquette { display: block; font-size: .8125rem; color: var(--basalte); }
  .volumes { grid-template-columns: repeat(3, 1fr); }
  .realisations__grille { grid-template-columns: repeat(2, 1fr); }
  .projets__intro img { max-width: 420px; }
}

/* ========================== Téléphone ========================== */
@media (max-width: 767px) {
  body { padding-bottom: 72px; }
  .bandeau { padding: 10px var(--sec-h); }
  .logo-residence { font-size: 1.3rem; }
  .bandeau .bouton, .bandeau__tel span { display: none; }
  .bandeau__tel { width: 44px; height: 44px; justify-content: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
  .accueil__sous-titre { font-size: 1.0625rem; }
  .accueil__cta .bouton { width: 100%; }
  .lots { grid-template-columns: 1fr; }
  .volumes { grid-template-columns: 1fr; }
  .profils { grid-template-columns: 1fr; }
  .realisations__grille { grid-template-columns: 1fr 1fr; }
  .carte-form { padding: 22px; }
  .distances li { grid-template-columns: 24px 1fr; }
  .distances span { grid-column: 2; text-align: left; }
  .faq summary { font-size: 1.0625rem; }
  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px; background: var(--blanc); box-shadow: 0 -6px 20px rgba(0,0,0,.12);
  }
  .barre-mobile .bouton { padding: 13px 10px; font-size: 1rem; }
  .barre-mobile .bouton--contour { background: var(--blanc); color: var(--sapin); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}