/* =========================================================
   MAISON ÉCLORE · feuille de style · v4 éditoriale
   Charte d'origine conservée : couleurs, Cinzel / Cormorant Garamond / Raleway, logo.
   ========================================================= */
:root {
  --ivoire: #F5F0E8;
  --ivoire2: #EDE8DC;
  --vert: #1A3028;
  --or: #C9A84C;
  --or2: #E8C97A;
  --or-a: rgba(201,168,76,.18);
  --noir: #0A0A0F;
  --gris: #5C5C4E;
  --gris2: #9A9A88;
  --blanc: #FDFAF4;
  --filet: rgba(26,48,40,.10);
  --filet-or: rgba(201,168,76,.28);
  --cinzel: 'Cinzel', serif;
  --cormorant: 'Cormorant Garamond', serif;
  --raleway: 'Raleway', sans-serif;
  --largeur: 1120px;
  --mesure: 620px;
  --gouttiere: 24px;
  --rayon: 22px;
  --respiration: clamp(96px, 13vw, 168px);
}
/* Site volontairement en clair uniquement (correctif Android d'origine) */
@media (prefers-color-scheme: dark) {
  :root {
    --ivoire: #F5F0E8 !important; --ivoire2: #EDE8DC !important; --vert: #1A3028 !important;
    --or: #C9A84C !important; --or2: #E8C97A !important; --noir: #0A0A0F !important;
    --gris: #5C5C4E !important; --gris2: #9A9A88 !important; --blanc: #FDFAF4 !important;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light only; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ivoire); color: var(--vert);
  font-family: var(--raleway); font-weight: 300; font-size: 17px; line-height: 1.8;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
strong, b { font-weight: 500; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.etroit { max-width: var(--mesure); }
.centre { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 200;
  background: rgba(245,240,232,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201,168,76,.12);
}
.entete .conteneur { display: flex; align-items: center; gap: 16px; min-height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { width: 44px; height: auto; }
.logo .nt { font-family: var(--cinzel); font-size: 11px; letter-spacing: 4px; line-height: 1.35; white-space: nowrap; }
.logo .nt small { display: block; font-family: var(--raleway); font-weight: 400; font-size: 8px; letter-spacing: 3px; color: var(--or); }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a { text-decoration: none; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gris); }
.nav a:not(.bouton):hover { color: var(--or); }
.langues { display: flex; border: 1px solid var(--filet-or); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.langues a { font-size: 9px; letter-spacing: 2px; color: var(--gris2); padding: 7px 11px; text-decoration: none; }
.langues a.on { background: var(--vert); color: var(--or); }
@media (max-width: 760px) { .nav a:not(.bouton) { display: none; } }
@media (max-width: 430px) {
  .logo .nt { display: none; } .logo img { width: 40px; }
  .entete .conteneur { gap: 10px; } .nav .bouton { padding: 10px 16px; }
}

/* ---------- Typographie ---------- */
h1, h2, h3 { font-family: var(--cormorant); font-weight: 300; line-height: 1.08; margin: 0 0 .55em; color: inherit; }
h1 { font-size: clamp(44px, 9.5vw, 88px); letter-spacing: .5px; line-height: 1; }
h2 { font-size: clamp(34px, 6.4vw, 60px); }
h3 { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.2; }
h1 em, h2 em { font-style: italic; color: var(--or); }
p { margin: 0 0 1.1em; }
.surtitre {
  display: block; font-size: 10px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--or); margin-bottom: 22px; font-weight: 400;
}
.chapeau { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.7; color: var(--gris); }
.petit { font-size: 13px; color: var(--gris2); line-height: 1.7; }
.citation { font-family: var(--cormorant); font-style: italic; font-weight: 300; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.35; }

/* ---------- Sections ---------- */
section { padding: var(--respiration) 0; position: relative; }
.alt { background: var(--ivoire2); }
.sombre { background: var(--vert); color: var(--ivoire); }
.sombre .chapeau, .sombre p { color: var(--gris2); }
.sombre .petit { color: rgba(154,154,136,.75); }
.filet-or { width: 48px; height: 1px; background: var(--or); border: 0; margin: 0 0 28px; opacity: .7; }
.centre .filet-or { margin-left: auto; margin-right: auto; }

/* ---------- Boutons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; align-items: center; }
.centre .actions, .actions.centre { justify-content: center; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--cinzel); font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--vert); background: var(--or); border: 1px solid var(--or); border-radius: 999px;
  padding: 18px 34px; text-decoration: none; text-align: center; line-height: 1.5; cursor: pointer;
  transition: gap .3s, background .25s, transform .25s;
}
.bouton::after { content: "→"; font-family: var(--raleway); letter-spacing: 0; }
.bouton:hover { gap: 18px; background: var(--or2); }
.bouton.secondaire { background: transparent; color: inherit; border-color: var(--filet-or); }
.bouton.secondaire::after { content: none; }
.bouton.secondaire:hover { background: rgba(201,168,76,.08); }
.nav .bouton { padding: 10px 18px; font-size: 9px; }
.nav .bouton::after { content: none; }
.lien { font-family: var(--cinzel); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; color: var(--or); border-bottom: 1px solid var(--filet-or); padding-bottom: 4px; }
.prix-note { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris2); }
@media (max-width: 480px) { .actions .bouton { width: 100%; } }

/* ---------- Ouverture ---------- */
.hero { overflow: hidden; background: var(--vert); color: var(--ivoire); text-align: center; padding: clamp(72px, 10vw, 120px) 0 var(--respiration); }
.hero .conteneur { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero h1 { color: var(--ivoire); max-width: 900px; }
.hero h1 em { color: var(--or2); display: block; }
.hero .chapeau { color: var(--gris2); max-width: 580px; }
.hero .bouton.secondaire { color: var(--ivoire); }
.hero .prix-note { margin-top: 18px; }
.hero-logo { width: 200px; margin: 0 auto 44px; filter: drop-shadow(0 0 36px rgba(201,168,76,.32)); }
.halo { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.halo.h1 { width: 70vw; height: 70vw; max-width: 640px; max-height: 640px; top: -8%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(201,168,76,.10) 0%, transparent 65%); }
.halo.h2 { width: 60vw; height: 60vw; max-width: 520px; max-height: 520px; bottom: -22%; right: -14%; background: radial-gradient(circle, rgba(232,201,122,.06) 0%, transparent 65%); }
.anneau { position: absolute; top: 4%; left: 50%; width: 46vw; height: 46vw; max-width: 380px; max-height: 380px; border: 1px solid rgba(201,168,76,.08); border-radius: 50%; transform: translateX(-50%); pointer-events: none; }

/* ---------- Manifeste (identité) ---------- */
.manifeste .citation { max-width: 860px; margin: 0 auto; color: var(--vert); text-align: center; }
.manifeste .citation em { color: var(--or); }
.trio { display: grid; gap: 40px; margin-top: clamp(56px, 8vw, 96px); }
@media (min-width: 820px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 56px; } }
.trio > div { border-top: 1px solid var(--filet-or); padding-top: 26px; }
.trio h3 { font-size: 24px; margin-bottom: .4em; }
.trio p { color: var(--gris); font-size: 16px; margin: 0; }
.segments { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 56px; }
.segments span { font-family: var(--cinzel); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; padding: 12px 22px; border: 1px solid var(--filet-or); border-radius: 999px; color: var(--vert); }

/* ---------- Constat (numérotation éditoriale) ---------- */
.constat { display: grid; gap: 0; margin-top: clamp(48px, 7vw, 80px); }
@media (min-width: 820px) { .constat { grid-template-columns: 1fr 1fr; column-gap: 72px; } }
.constat > div { display: grid; grid-template-columns: 56px 1fr; gap: 8px 18px; padding: 30px 0; border-top: 1px solid var(--filet); }
.constat .num { grid-row: span 2; font-family: var(--cormorant); font-style: italic; font-size: 34px; line-height: 1; color: var(--or); }
.constat h3 { font-size: 24px; margin: 0; }
.constat p { margin: 0; color: var(--gris); font-size: 16px; }

/* ---------- Questions ---------- */
.questions { list-style: none; padding: 0; margin: 48px 0 0; counter-reset: q; }
.questions li { counter-increment: q; font-family: var(--cormorant); font-style: italic; font-weight: 300; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.25; padding: 26px 0; border-top: 1px solid rgba(201,168,76,.16); color: var(--ivoire); }
.questions li::before { content: "0" counter(q); display: block; font-family: var(--raleway); font-style: normal; font-size: 10px; letter-spacing: 4px; color: var(--or); margin-bottom: 10px; }

/* ---------- Fondateur ---------- */
.fondateur-grille { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .fondateur-grille { grid-template-columns: 43fr 57fr; gap: clamp(56px, 7vw, 104px); } }
.portrait { margin: 0; }
.portrait img {
  width: 100%; height: auto; max-height: 640px; object-fit: cover; object-position: 50% 40%;
  border-radius: 260px 260px var(--rayon) var(--rayon);
}
@media (max-width: 899px) { .portrait img { max-height: 480px; border-radius: 200px 200px var(--rayon) var(--rayon); } }
.portrait figcaption { margin-top: 18px; font-family: var(--cinzel); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }
.portrait figcaption span { display: block; font-family: var(--raleway); font-size: 11px; letter-spacing: 2px; color: var(--gris2); margin-top: 4px; text-transform: none; }
.fondateur-texte p { color: var(--gris); font-size: 17px; }
.fondateur-texte .citation { color: var(--vert); margin: 36px 0 0; padding-left: 22px; border-left: 2px solid var(--or); font-size: clamp(22px, 2.8vw, 28px); }

/* ---------- Bénéfices ---------- */
.benefices { display: grid; gap: 0; margin-top: clamp(48px, 7vw, 80px); }
@media (min-width: 760px) { .benefices { grid-template-columns: 1fr 1fr; column-gap: 72px; } }
.benefices > div { padding: 34px 0; border-top: 1px solid var(--filet); }
.benefices .num { font-size: 10px; letter-spacing: 4px; color: var(--or); display: block; margin-bottom: 14px; }
.benefices h3 { margin-bottom: .35em; }
.benefices p { margin: 0; color: var(--gris); font-size: 16px; }

/* ---------- Offres ---------- */
.offres { display: grid; gap: 24px; margin-top: clamp(48px, 7vw, 80px); }
@media (min-width: 900px) { .offres { grid-template-columns: 1fr 1fr; gap: 28px; } }
.offre { background: var(--blanc); border-radius: var(--rayon); padding: clamp(36px, 5vw, 56px) clamp(26px, 4vw, 48px); display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(26,48,40,.04), 0 24px 60px -40px rgba(26,48,40,.35); }
.offre.principale { background: var(--vert); color: var(--ivoire); }
.offre.principale p, .offre.principale li { color: rgba(245,240,232,.82); }
.offre.principale .surtitre { color: var(--or2); }
.offre h3 { font-size: clamp(30px, 3.6vw, 38px); margin-bottom: .2em; }
.offre .prix { font-family: var(--cormorant); font-weight: 300; font-size: 46px; line-height: 1.1; margin: 0 0 18px; }
.offre.principale .prix { color: var(--or2); }
.offre .prix small { font-family: var(--cinzel); font-size: 12px; letter-spacing: 3px; }
.offre p { color: var(--gris); font-size: 16px; }
.offre ul { padding: 0; margin: 10px 0 34px; list-style: none; }
.offre li { padding: 10px 0 10px 22px; position: relative; font-size: 15px; color: var(--gris); border-top: 1px solid var(--filet); }
.offre.principale li { border-color: rgba(201,168,76,.14); }
.offre li::before { content: ""; position: absolute; left: 0; top: 21px; width: 6px; height: 6px; border-radius: 50%; background: var(--or); }
.offre .actions { margin-top: auto; }

/* ---------- Listes et étapes ---------- */
.liste { padding: 0; list-style: none; margin: 18px 0 0; }
.liste li { padding: 12px 0 12px 22px; border-top: 1px solid var(--filet); position: relative; font-size: 16px; color: var(--gris); }
.liste li::before { content: ""; position: absolute; left: 0; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--or); }
.etapes { list-style: none; padding: 0; margin: 48px 0 0; counter-reset: e; display: grid; gap: 0; }
@media (min-width: 820px) { .etapes.trois { grid-template-columns: repeat(3, 1fr); column-gap: 48px; } .etapes.quatre { grid-template-columns: repeat(4, 1fr); column-gap: 40px; } }
.etapes li { counter-increment: e; padding: 28px 0; border-top: 1px solid var(--filet-or); font-size: 16px; color: var(--gris); }
.sombre .etapes li { color: var(--gris2); }
.etapes li::before { content: "0" counter(e); display: block; font-family: var(--cormorant); font-style: italic; font-size: 30px; color: var(--or); line-height: 1; margin-bottom: 14px; }
.etapes strong { display: block; font-family: var(--cormorant); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--vert); margin-bottom: 6px; }
.sombre .etapes strong { color: var(--ivoire); }
.deux-col { display: grid; gap: 56px; }
@media (min-width: 900px) { .deux-col { grid-template-columns: 1fr 1fr; gap: 88px; } }

/* ---------- Demande (formulaire) ---------- */
.demande-bloc { background: var(--blanc); border-radius: var(--rayon); padding: clamp(32px, 5vw, 56px); margin-top: 48px; box-shadow: 0 24px 60px -44px rgba(26,48,40,.35); }
.champ { display: block; margin-bottom: 26px; }
.champ span { display: block; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
.champ input, .champ textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--vert); background: transparent;
  border: 0; border-bottom: 1px solid rgba(26,48,40,.25); border-radius: 0; padding: 10px 0; outline: none;
}
.champ textarea { min-height: 90px; resize: vertical; }
.champ input:focus, .champ textarea:focus { border-bottom-color: var(--or); }
.consentement { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--gris); margin: 6px 0 30px; line-height: 1.6; }
.consentement input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--vert); flex-shrink: 0; }
.cache { position: absolute !important; left: -9999px !important; }
.mode-formulaire[hidden], .mode-email[hidden] { display: none; }

/* ---------- Questions fréquentes ---------- */
details { border-top: 1px solid var(--filet); padding: 22px 0; }
details:last-of-type { border-bottom: 1px solid var(--filet); }
summary { cursor: pointer; font-family: var(--cormorant); font-size: 23px; font-weight: 400; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--or); font-family: var(--raleway); }
details[open] summary::after { content: "−"; }
details p { margin: 12px 0 0; color: var(--gris); font-size: 16px; }

.message-etat { margin-top: 22px; padding: 20px 22px; border-left: 2px solid var(--or); background: var(--blanc); border-radius: 0 12px 12px 0; font-size: 16px; color: var(--vert); }
.message-etat[hidden] { display: none; }
.reservation-cadre { margin-top: 32px; min-height: 120px; }
.ouverture { padding-top: clamp(72px, 10vw, 128px); }

/* ---------- Pied de page ---------- */
.pied { background: var(--noir); padding: 56px 0; text-align: center; color: var(--gris2); }
.pied .conteneur { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pied .fl { font-family: var(--cinzel); font-size: 12px; letter-spacing: 6px; color: var(--or); }
.pied .ft { font-family: var(--cormorant); font-size: 16px; font-style: italic; }
.pied nav { display: flex; gap: 22px; margin-top: 6px; }
.pied nav a { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; opacity: .6; }
.pied nav a:hover { color: var(--or); opacity: 1; }

/* ---------- Apparition discrète ---------- */
.js .r { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js .r.on { opacity: 1; transform: none; }
.r.d1 { transition-delay: .1s; } .r.d2 { transition-delay: .2s; } .r.d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .r { opacity: 1; transform: none; transition: none; }
  .bouton { transition: none; }
}

/* ---------- Aperçu du rapport : page A4 à l'échelle, proportions 210 × 297 conservées ---------- */
.apercu-grille { align-items: center; }
.apercu-col { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }
.a4-cadre { container-type: inline-size; width: 100%; max-width: 400px; }
.a4 { position: relative; margin: 0; width: 100%; aspect-ratio: 210 / 297; background: var(--ivoire); overflow: hidden;
  box-shadow: 0 1px 0 rgba(26,48,40,.06), 0 40px 80px -46px rgba(26,48,40,.6); padding: 10.5cqw 9.5cqw 0; display: flex; flex-direction: column; }
.a4-bande { position: absolute; top: 0; left: 0; right: 0; background: var(--or); color: var(--vert); text-align: center; font-family: var(--cinzel); font-size: 1.55cqw; letter-spacing: .6cqw; text-transform: uppercase; padding: .8cqw; }
.a4-tete { display: flex; justify-content: space-between; font-size: 1.5cqw; letter-spacing: .4cqw; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid var(--filet); padding-bottom: 1.4cqw; margin-bottom: 4.3cqw; }
.a4-sur { font-size: 1.6cqw; letter-spacing: .9cqw; text-transform: uppercase; color: var(--or); }
.a4-synth { display: grid; grid-template-columns: 29.5cqw 1fr; gap: 5.7cqw; margin-top: 3cqw; }
.a4-synth > div { min-width: 0; }
.a4-score { text-align: center; }
.a4-score svg { width: 26.7cqw; height: auto; margin: 0 auto; display: block; }
.fs-n { font-family: var(--cormorant); font-size: 54px; font-weight: 300; fill: #1A3028; }
.fs-s { font-family: var(--raleway); font-size: 11px; letter-spacing: 2px; fill: #5C5C4E; }
.a4-niv { display: block; margin-top: 1.9cqw; font-family: var(--cinzel); font-size: 1.7cqw; letter-spacing: .6cqw; text-transform: uppercase; color: var(--or); }
.a4-h { font-family: var(--cormorant); font-size: 4.4cqw; line-height: 1.1; margin: 0 0 2.5cqw; }
.a4-lead { font-size: 2cqw; line-height: 1.6; color: var(--gris); margin: 0; }
.a4-mini { display: block; font-size: 1.4cqw; letter-spacing: .6cqw; text-transform: uppercase; color: var(--or); margin: 3.8cqw 0 1.4cqw; }
.a4-prios { margin: 0; padding-left: 2.6cqw; font-family: var(--cormorant); font-size: 2.6cqw; line-height: 1.5; }
.a4-prios li::marker { color: var(--or); }
.a4-echelle { margin-top: auto; margin-bottom: 14cqw; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--filet); }
.a4-echelle span { padding-top: 1.4cqw; font-family: var(--cormorant); font-size: 2.1cqw; color: var(--gris); }
.a4-echelle .on { border-top: 2px solid var(--or); margin-top: -1.5px; color: var(--vert); }
.a4-pied { position: absolute; left: 9.5cqw; right: 9.5cqw; bottom: 5.2cqw; display: flex; justify-content: space-between; font-size: 1.3cqw; color: var(--gris); border-top: 1px solid var(--filet); padding-top: 1.4cqw; }
.a4-legende { font-size: 13px; color: var(--gris); text-align: center; margin: 0; max-width: 400px; }

/* ---------- Lisibilité : petits textes sur fond clair en gris foncé de la charte ---------- */
.petit, .prix-note, .nav a, .portrait figcaption span, .champ span { color: var(--gris); }
.sombre .petit, .hero .prix-note { color: rgba(154,154,136,.95); }
.pied .ft, .pied nav a { color: var(--gris2); }
.pied nav a { opacity: .85; }

/* ---------- Pages juridiques ---------- */
.texte-juridique h1 { font-size: clamp(40px, 7vw, 64px); }
.texte-juridique h2 { font-size: clamp(24px, 3.4vw, 30px); margin: 48px 0 14px; }
.texte-juridique p, .texte-juridique li { font-size: 16px; color: var(--gris); }
.texte-juridique a { color: var(--vert); }

/* ---------- Retour à la demande (page politique) ---------- */
.retour-demande { margin: 0 0 32px; }