/* ===========================================================
   Benoît Bernardin — benoit-bernardin.fr
   Styles partagés (index.html, vendre/index.html, acheter/index.html)
   =========================================================== */

/* Polices hébergées localement (assets/fonts/) — plus d'appel à Google Fonts,
   pour ne pas transmettre l'IP des visiteurs à Google. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Couleurs */
  --marine: #0B1626;
  --marine-secondaire: #13243B;
  --or: #CDAF60;
  --or-fonce: #806626;
  --ivoire: #F3EEE4;
  --sable: #E8E0D0;
  --texte-secondaire: #2A3445;
  --gris: #5B6472;
  --blanc: #FFFFFF;
  --border-line: #D5CCBA;

  --police-serif: 'Instrument Serif', Georgia, serif;
  --police-sans: 'Geist', system-ui, sans-serif;
  --police-mono: 'Geist Mono', ui-monospace, monospace;

  /* Échelle typographique fluide : contenue dans la largeur du .container (1200px) */
  --fs-hero-accueil: clamp(3.25rem, 6.2vw, 6rem);                   /* 96px max, container-safe */
  --fs-hero-page: clamp(3.25rem, 6.2vw, 6rem);                      /* 96px max, container-safe */
  --fs-h2: clamp(2.5rem, 4.8vw, 4.5rem);                            /* 72px max */
  --fs-h2-cta: clamp(2.75rem, 1.3rem + 6.2vw, 9.25rem);             /* 148px desktop */
  --fs-carte-titre: clamp(1.5rem, 2.2vw, 2rem);                     /* 32px max, titres de cartes */
  --fs-chiffre: clamp(2.5rem, 3.6vw, 3.5rem);                       /* 56px max, tuiles hero */
  --fs-etape-num: clamp(2.75rem, 4.5vw, 4.25rem);                   /* 68px max, chiffres méthode */
  --fs-citation: 1.3rem;                                             /* 21px cabinet-avis */
  --fs-citation-avis: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem);      /* 27px avis */
  --fs-body-lg: clamp(1.0625rem, 1.3vw, 1.1875rem);                 /* 17-19px, paragraphes d'intro */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --pad-x: clamp(20px, 3vw, 64px);
  --pad-section: clamp(56px, 8vw, 128px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivoire);
  font-family: var(--police-sans);
  color: var(--marine);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--marine);
  text-decoration: none;
}
a:hover { color: var(--or-fonce); }

input, select, button, textarea {
  font-family: var(--police-sans);
}

img { max-width: 100%; display: block; }

.conteneur {
  max-width: 1440px;
  margin: 0 auto;
}

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 64px;
}
@media (max-width: 48rem) { /* 768px */
  .container { padding-inline: 20px; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ===========================================================
   Bandeau qui défile (communes)
   =========================================================== */
@keyframes bb-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.bandeau-communes {
  border-top: 1px solid rgba(243,238,228,0.12);
  background: var(--or);
  color: var(--marine);
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--police-serif);
  font-size: clamp(20px, 1.4vw + 10px, 34px);
  font-style: italic;
}
.bandeau-communes__piste {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: bb-marquee 45s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-communes__piste { animation: none; }
}

/* ===========================================================
   En-tête (identique sur les 3 pages)
   =========================================================== */
.entete {
  background: var(--marine);
  color: var(--ivoire);
  position: relative;
  z-index: 20;
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  border-bottom: 1px solid rgba(243,238,228,0.12);
}
.logo {
  position: relative;
  display: block;
  width: clamp(150px, 13vw, 198px);
  flex-shrink: 0;
}
.logo img { width: 100%; height: auto; }
.logo__signature {
  position: absolute;
  left: 37%;
  top: 86.7%;
  font-family: var(--police-serif);
  font-style: italic;
  font-size: clamp(11px, 0.9vw, 16.2px);
  line-height: 1;
  white-space: nowrap;
  color: var(--or);
}

.nav-principale {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 15px;
  margin-left: auto;
}
.nav-lien { color: var(--ivoire); }
.nav-lien[aria-current="page"] { color: var(--or); }

.secteurs { position: relative; }
.secteurs__bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  color: var(--ivoire);
  font-family: var(--police-sans);
  font-size: 15px;
  cursor: pointer;
}
.secteurs__bouton svg { transition: transform 0.15s ease; }
.secteurs__bouton[aria-expanded="true"] svg { transform: rotate(180deg); }

.secteurs__panneau {
  position: absolute;
  top: calc(100% + 22px);
  right: -24px;
  width: 320px;
  background: var(--marine-secondaire);
  border: 1px solid rgba(205,175,96,0.3);
  border-radius: 22px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.secteurs__panneau[hidden] { display: none; }
.secteurs__panneau::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 24px;
}

.secteurs__lien {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--ivoire);
}
.secteurs__lien:hover { background: rgba(243,238,228,0.06); color: var(--ivoire); }
.secteurs__lien-titre {
  font-family: var(--police-serif);
  font-size: 22px;
  line-height: 1.1;
}
.secteurs__lien-sous {
  font-size: 13px;
  color: rgba(243,238,228,0.6);
}

.entete__cta {
  background: var(--or);
  color: var(--marine);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 999px;
  white-space: nowrap;
}
.entete__cta:hover { color: var(--marine); opacity: 0.9; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(243,238,228,0.3);
  background: transparent;
  align-items: center;
  justify-content: center;
  color: var(--ivoire);
  cursor: pointer;
  flex-shrink: 0;
}

.menu-mobile {
  background: var(--marine-secondaire);
  border-top: 1px solid rgba(243,238,228,0.12);
  padding-block: 20px 28px;
}
.menu-mobile[hidden] { display: none; }
.menu-mobile .container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-mobile__lien {
  color: var(--ivoire);
  font-size: 17px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(243,238,228,0.08);
}
button.menu-mobile__lien[aria-haspopup] {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(243,238,228,0.08);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.menu-mobile__groupe { display: flex; flex-direction: column; }
.menu-mobile__sous {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
}
.menu-mobile__sous[hidden] { display: none; }
.menu-mobile__sous .menu-mobile__lien { font-size: 15px; color: rgba(243,238,228,0.8); }
.menu-mobile__cta {
  margin-top: 12px;
  background: var(--or);
  color: var(--marine);
  font-weight: 600;
  font-size: 16px;
  padding: 16px;
  border-radius: 999px;
  text-align: center;
}

@media (max-width: 56.25rem) { /* 900px */
  .nav-principale, .entete__cta { display: none; }
  .burger { display: inline-flex; }
}
@media (min-width: 56.3125rem) {
  .menu-mobile { display: none !important; }
}

/* ===========================================================
   Héros
   =========================================================== */
.hero {
  background: var(--marine);
  color: var(--ivoire);
}
.hero__grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 48px;
  padding-block: var(--pad-section) 72px;
  align-items: stretch;
}
.hero__texte-colonne {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.hero__badges {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.badge-eyebrow {
  font-family: var(--police-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243,238,228,0.7);
}
.badge-persona {
  font-family: var(--police-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marine);
  background: var(--or);
  padding: 8px 14px;
  border-radius: 999px;
}

.hero__bloc-titre { display: flex; flex-direction: column; gap: 32px; }
.hero__titre {
  margin: 0;
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: var(--fs-hero-accueil);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.hero__titre--page { font-size: var(--fs-hero-page); }
.hero__titre em { font-style: italic; color: var(--or); }

.hero__paragraphe {
  margin: 0;
  max-width: 640px;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: rgba(243,238,228,0.82);
}

.hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 17px;
  padding: 20px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}
.bouton--plein { background: var(--or); color: var(--marine); }
.bouton--plein:hover { color: var(--marine); opacity: 0.92; }
.bouton--contour {
  color: var(--ivoire);
  border: 1px solid rgba(243,238,228,0.35);
  font-weight: 600;
  padding: 20px 26px;
}
.bouton--contour:hover { color: var(--ivoire); border-color: rgba(243,238,228,0.6); }
.bouton--sombre { background: var(--marine); color: var(--ivoire); }
.bouton--sombre:hover { color: var(--ivoire); opacity: 0.92; }

/* Classes utilitaires (remplacent des styles inline repetes) */
.pile-56 { display: flex; flex-direction: column; gap: 56px; }
.bouton-cadre-marine {
  display: inline-flex;
  align-items: center;
  color: var(--marine);
  font-weight: 600;
  font-size: 16px;
  padding: 18px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--marine);
}
.bouton-cadre-marine:hover { color: var(--marine); }
.lien-avis-google {
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1.5px solid var(--marine);
  padding-bottom: 4px;
}

.tuiles-preuve {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.tuile-preuve {
  background: var(--marine-secondaire);
  border: 1px solid rgba(205,175,96,0.28);
  border-radius: 22px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tuile-preuve__entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 28px;
}
.tuile-preuve__label {
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}
.tuile-preuve__chiffre {
  font-family: var(--police-serif);
  font-size: var(--fs-chiffre);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--ivoire);
}
.tuile-preuve__chiffre em, .tuile-preuve__chiffre small {
  font-style: italic;
  color: var(--or);
  font-size: 0.55em;
}
.tuile-preuve__legende {
  font-size: 13px;
  line-height: 1.35;
  color: rgba(243,238,228,0.75);
}

.hero__portrait-colonne {
  grid-column: span 5;
  position: relative;
  display: flex;
}
.portrait-cadre {
  width: 100%;
  align-self: stretch;
  min-height: 520px;
  border-radius: 28px;
  background: var(--marine-secondaire);
  overflow: hidden;
  display: flex;
}
.portrait-cadre__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.carte-avis-flottante {
  position: absolute;
  right: -18%;
  bottom: 26px;
  background: var(--ivoire);
  color: var(--marine);
  border-radius: 20px;
  padding: 20px 22px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.carte-avis-flottante__etoiles { display: flex; gap: 3px; }
.carte-avis-flottante__etoiles svg { width: 16px; height: 16px; }
.carte-avis-flottante p {
  margin: 0;
  font-family: var(--police-serif);
  font-size: 21px;
  line-height: 1.25;
}
.carte-avis-flottante__credit { font-size: 13px; color: var(--gris); }

.badge-flottant {
  position: absolute;
  right: 24px;
  top: 24px;
  background: rgba(11,22,38,0.85);
  border: 1px solid rgba(243,238,228,0.2);
  border-radius: 999px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

@media (max-width: 68.75rem) { /* 1100px */
  .hero__texte-colonne, .hero__portrait-colonne { grid-column: span 12; }
  .hero__portrait-colonne {
    flex-direction: column;
    max-width: 480px;
    margin-inline: auto;
  }
  .portrait-cadre { min-height: 0; aspect-ratio: 4 / 5; }
}
@media (max-width: 56.25rem) {
  .tuiles-preuve { grid-template-columns: 1fr; }
  .carte-avis-flottante { position: static; width: auto; margin-top: 16px; }
  .badge-flottant { position: static; align-self: flex-start; margin-top: 16px; }
}

/* ===========================================================
   Hero — illustration « alerte bien » (acheter)
   =========================================================== */
.hero__illustration-colonne {
  grid-column: span 5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.carte-alerte-bien {
  width: 100%;
  max-width: 400px;
  background: var(--ivoire);
  color: var(--marine);
  border-radius: 28px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  transform: rotate(-2deg);
}
.carte-alerte-bien__entete { display: flex; align-items: center; gap: 12px; }
.carte-alerte-bien__icone {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--or);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.carte-alerte-bien__entete-texte { display: flex; flex-direction: column; gap: 2px; }
.carte-alerte-bien__label { font-weight: 600; font-size: 15px; }
.carte-alerte-bien__sous-label { font-size: 13px; color: var(--gris); }
.carte-alerte-bien__vignette {
  height: 200px;
  border-radius: 18px;
  background: var(--sable);
  overflow: hidden;
}
.carte-alerte-bien__vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carte-alerte-bien__infos { display: flex; flex-direction: column; gap: 6px; }
.carte-alerte-bien__titre { font-family: var(--police-serif); font-size: 28px; line-height: 1.1; }
.carte-alerte-bien__lieu { font-size: 14px; color: var(--gris); }
.carte-alerte-bien__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.carte-alerte-bien__tag {
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid var(--border-line);
}
.carte-alerte-bien__bouton {
  background: var(--marine);
  color: var(--ivoire);
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  padding: 14px;
  border-radius: 999px;
}

.note-flottante {
  position: absolute;
  right: 8px;
  top: 40px;
  background: var(--marine-secondaire);
  border: 1px solid rgba(205,175,96,0.4);
  border-radius: 18px;
  padding: 16px 18px;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: rotate(3deg);
}
.note-flottante__label {
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}
.note-flottante__texte { font-size: 14px; line-height: 1.45; color: var(--ivoire); }

@media (max-width: 68.75rem) { /* 1100px */
  .hero__illustration-colonne {
    grid-column: span 12;
    margin-top: 16px;
    flex-direction: column;
    max-width: 480px;
    margin-inline: auto;
  }
}
@media (max-width: 56.25rem) {
  .note-flottante { position: static; width: auto; transform: none; margin-top: 12px; }
}

/* ===========================================================
   Sections génériques
   =========================================================== */
.section { padding-block: var(--pad-section); }
.section--sombre { background: var(--marine); color: var(--ivoire); }

.section-entete {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 48px;
  flex-wrap: wrap;
}
.section-entete__titres { display: flex; flex-direction: column; gap: 24px; }
.eyebrow {
  font-family: var(--police-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or-fonce);
}
.section--sombre .eyebrow { color: var(--or); }
.titre-2 {
  margin: 0;
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.015em;
}
.titre-2 em { font-style: italic; color: var(--or-fonce); }
.section--sombre .titre-2 em { color: var(--or); }
.section-entete__texte {
  margin: 0;
  max-width: 440px;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--texte-secondaire);
}
.section--sombre .section-entete__texte { color: rgba(243,238,228,0.8); }

@media (max-width: 56.25rem) {
  .section-entete { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================
   Deux projets (accueil)
   =========================================================== */
.portes-entree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.carte-projet {
  border-radius: 32px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 560px;
}
.carte-projet--vendre { background: var(--marine); color: var(--ivoire); }
.carte-projet--acheter { background: var(--or); color: var(--marine); }
.carte-projet__label {
  align-self: flex-start;
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
}
.carte-projet--vendre .carte-projet__label { color: var(--marine); background: var(--or); }
.carte-projet--acheter .carte-projet__label { color: var(--ivoire); background: var(--marine); }
.carte-projet__titre {
  font-family: var(--police-serif);
  font-size: var(--fs-carte-titre);
  line-height: 0.98;
}
.carte-projet__titre em { font-style: italic; }
.carte-projet--vendre .carte-projet__titre em { color: var(--or); }
.carte-projet__liste { display: flex; flex-direction: column; gap: 14px; }
.carte-projet--vendre .carte-projet__liste { color: rgba(243,238,228,0.88); }
.carte-projet__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.45;
}
.carte-projet__item svg { flex-shrink: 0; margin-top: 2px; }
.carte-projet__actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.carte-projet__actions .bouton {
  padding: 14px 14px;
  font-size: 14.5px;
  gap: 4px;
  white-space: nowrap;
}

@media (max-width: 56.25rem) {
  .portes-entree { grid-template-columns: 1fr; }
}

/* ===========================================================
   Qui suis-je
   =========================================================== */
.qui-suis-je__grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 28px;
  align-items: end;
}
.qui-suis-je__titres { grid-column: span 7; display: flex; flex-direction: column; gap: 28px; }
.qui-suis-je__texte {
  grid-column: span 5;
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--texte-secondaire);
}
.cartes-credibilite {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 72px;
}
.carte-credibilite {
  background: var(--sable);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.carte-credibilite__icone {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--marine);
  display: flex; align-items: center; justify-content: center;
}
.carte-credibilite__titre {
  font-family: var(--police-serif);
  font-size: var(--fs-carte-titre);
  line-height: 1.05;
  min-height: 2.15em;
}
.carte-credibilite__titre em { font-style: italic; color: var(--or-fonce); }
.carte-credibilite__texte {
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte-secondaire);
}
.bandeau-ia {
  grid-column: span 12;
  margin-top: 20px;
  background: var(--marine);
  color: var(--ivoire);
  border-radius: 28px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 20px;
  align-items: center;
}
.bandeau-ia__titre {
  grid-column: span 7;
  font-family: var(--police-serif);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3.25rem);
  line-height: 1.02;
}
.bandeau-ia__titre em { font-style: italic; color: var(--or); }
.bandeau-ia__texte {
  grid-column: span 5;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(243,238,228,0.8);
}

@media (max-width: 56.25rem) {
  .qui-suis-je__titres, .qui-suis-je__texte, .bandeau-ia__titre, .bandeau-ia__texte {
    grid-column: span 12;
  }
}
@media (max-width: 64rem) { /* 1024px */
  .cartes-credibilite { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) { /* 640px */
  .cartes-credibilite { grid-template-columns: 1fr; }
}

/* ===========================================================
   Ce que je vérifie pour vous (acheter)
   =========================================================== */
.cartes-verification {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.cartes-verification--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carte-verification {
  background: var(--blanc);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.carte-verification__icone {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--marine);
  display: flex; align-items: center; justify-content: center;
}
.carte-verification__titre {
  font-family: var(--police-serif);
  font-size: var(--fs-carte-titre);
  line-height: 1.05;
  min-height: 2.15em;
}
.carte-verification__texte {
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte-secondaire);
}

@media (max-width: 64rem) { /* 1024px */
  .cartes-verification { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) { /* 640px */
  .cartes-verification { grid-template-columns: 1fr; }
}

/* ===========================================================
   Ce qui change tout (vendre) — cartes IA
   =========================================================== */
.cartes-ia {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 72px;
}
.carte-ia {
  background: var(--marine);
  color: var(--ivoire);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 250px;
}
.carte-ia__titre { display: block; font-family: var(--police-serif); font-size: var(--fs-carte-titre); line-height: 1.05; min-height: 3.2em; }
.carte-ia__titre em { font-style: italic; color: var(--or); }
.carte-ia__texte { font-size: 15px; line-height: 1.55; color: rgba(243,238,228,0.75); }

@media (max-width: 64rem) { /* 1024px */
  .cartes-ia { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) { /* 640px */
  .cartes-ia { grid-template-columns: 1fr; }
}

/* ===========================================================
   Méthode (vendre)
   =========================================================== */
.cartes-methode {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.carte-methode {
  background: var(--blanc);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  min-height: 280px;
}
.carte-methode__numero {
  font-family: var(--police-serif);
  font-size: var(--fs-etape-num);
  line-height: 0.8;
  color: var(--or-fonce);
}
.carte-methode__titre { display: block; font-weight: 600; font-size: 20px; line-height: 1.3; min-height: 2.6em; }
.carte-methode__texte { font-size: 15px; line-height: 1.5; color: var(--gris); }

.duo-contre-analyse {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.duo-contre-analyse__sombre {
  grid-column: span 7;
  background: var(--marine);
  color: var(--ivoire);
  border-radius: 24px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.duo-contre-analyse__sombre .eyebrow { color: var(--or); }
.duo-contre-analyse__sombre-titre {
  font-family: var(--police-serif);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.875rem);
  line-height: 1.05;
}
.duo-contre-analyse__sombre-titre em { font-style: italic; color: var(--or); }
.duo-contre-analyse__sombre-texte {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(243,238,228,0.8);
  max-width: 560px;
}
.duo-contre-analyse__clair {
  grid-column: span 5;
  background: var(--sable);
  border-radius: 24px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.duo-contre-analyse__clair-titre {
  font-family: var(--police-serif);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  line-height: 1.05;
}
.duo-contre-analyse__clair-texte { font-size: 16px; line-height: 1.6; color: var(--texte-secondaire); }

@media (max-width: 56.25rem) {
  .duo-contre-analyse__sombre, .duo-contre-analyse__clair { grid-column: span 12; }
}
@media (max-width: 64rem) { /* 1024px */
  .cartes-methode { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) { /* 640px */
  .cartes-methode { grid-template-columns: 1fr; }
}

.cartes-methode--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 64rem) { /* 1024px */
  .cartes-methode--trois { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) { /* 640px */
  .cartes-methode--trois { grid-template-columns: 1fr; }
}

/* ===========================================================
   Secteur
   =========================================================== */
.cartes-secteur {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: -24px;
}
.carte-secteur {
  color: var(--ivoire);
  border: 1px solid rgba(243,238,228,0.18);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
}
.carte-secteur__titre { font-family: var(--police-serif); font-size: var(--fs-carte-titre); line-height: 1.1; min-height: 2.2em; }
.carte-secteur__titre em { font-style: italic; }
.carte-secteur__texte { font-size: 15px; line-height: 1.55; color: rgba(243,238,228,0.75); }
.carte-secteur__lien { margin-top: auto; font-size: 14px; color: var(--or); }

.bandeau-ailleurs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(32px, 4vw, 56px);
  padding: 28px 36px;
  border-radius: 24px;
  background: var(--marine-secondaire);
  border: 1px solid rgba(205,175,96,0.28);
  flex-wrap: wrap;
}
.bandeau-ailleurs__texte-groupe { display: flex; align-items: center; gap: 20px; }
.bandeau-ailleurs__titre {
  font-family: var(--police-serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.1;
}
.bandeau-ailleurs__titre em { font-style: italic; color: var(--or); }
.bandeau-ailleurs__actions { flex-shrink: 0; display: flex; gap: 12px; }
.bouton-simple {
  font-weight: 600;
  font-size: 16px;
  padding: 16px 24px;
  border-radius: 999px;
}
.bouton-simple--plein { background: var(--or); color: var(--marine); }
.bouton-simple--contour { color: var(--ivoire); border: 1px solid rgba(243,238,228,0.35); }

@media (max-width: 64rem) { /* 1024px */
  .cartes-secteur { grid-template-columns: 1fr 1fr; margin-top: 0; }
}
@media (max-width: 40rem) { /* 640px */
  .cartes-secteur { grid-template-columns: 1fr; }
}

/* ===========================================================
   Le déroulé (vendre)
   =========================================================== */
.etapes-deroule {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--marine);
}
.etape-deroule {
  padding: 28px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid var(--border-line);
}
.etape-deroule:first-child { padding-left: 0; border-left: none; }
.etape-deroule:last-child { padding-right: 0; }
.etape-deroule__num { font-family: var(--police-mono); font-size: 13px; color: var(--or-fonce); }
.etape-deroule__titre { font-weight: 600; font-size: 19px; }
.etape-deroule__texte { font-size: 15px; line-height: 1.5; color: var(--gris); }

.bandeau-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--marine);
  color: var(--ivoire);
  border-radius: 28px;
  padding: 36px 44px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.bandeau-cta__titre {
  font-family: var(--police-serif);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.05;
}
.bandeau-cta__titre em { font-style: italic; color: var(--or); }

@media (max-width: 56.25rem) {
  .etapes-deroule { grid-template-columns: 1fr; border-top: none; }
  .etape-deroule {
    padding: 20px 0;
    border-left: none;
    border-top: 1px solid var(--border-line);
  }
  .etape-deroule:first-child { padding-top: 0; border-top: none; }
}

/* ===========================================================
   Parrainage / Revue (vendre)
   =========================================================== */
.section-revue {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.carte-parrainage {
  grid-column: span 8;
  background: var(--or);
  color: var(--marine);
  border-radius: 28px;
  padding: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.carte-parrainage__texte { display: flex; flex-direction: column; gap: 14px; }
.carte-parrainage__label {
  font-family: var(--police-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.carte-parrainage__titre {
  font-family: var(--police-serif);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3.25rem);
  line-height: 1;
}
.carte-parrainage__titre em { font-style: italic; }
.carte-parrainage__desc { font-size: 16px; line-height: 1.5; max-width: 460px; }
.carte-parrainage__bouton {
  flex-shrink: 0;
  width: 168px;
  height: 168px;
  border-radius: 999px;
  background: var(--marine);
  color: var(--ivoire);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  padding: 20px;
  box-sizing: border-box;
}
.carte-gazette {
  grid-column: span 4;
  border: 1.5px solid var(--marine);
  border-radius: 28px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.carte-gazette__label {
  font-family: var(--police-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or-fonce);
}
.carte-gazette__titre {
  font-family: var(--police-serif);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  line-height: 1.02;
}
.carte-gazette__titre em { font-style: italic; }
.carte-gazette__texte { font-size: 15px; line-height: 1.55; color: var(--texte-secondaire); }
.carte-gazette__lien { font-weight: 600; font-size: 15px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; color: var(--marine); }
.carte-gazette__lien:hover { color: var(--or-fonce); }

@media (max-width: 56.25rem) {
  .carte-parrainage, .carte-gazette { grid-column: span 12; }
  .carte-parrainage { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 30rem) {
  .carte-parrainage__bouton { width: 100%; height: auto; padding: 20px; border-radius: 999px; }
}

/* ===========================================================
   Avis
   =========================================================== */
.cartes-avis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.carte-avis {
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.carte-avis--claire { background: var(--blanc); }
.carte-avis--sombre { background: var(--marine); color: var(--ivoire); }
.carte-avis__guillemet {
  font-family: var(--police-serif);
  font-size: 80px;
  line-height: 0.5;
  color: var(--or-fonce);
}
.carte-avis--sombre .carte-avis__guillemet { color: var(--or); }
.carte-avis__texte {
  margin: 0;
  font-family: var(--police-serif);
  font-size: var(--fs-citation-avis);
  line-height: 1.25;
}
.carte-avis__credit { margin-top: auto; font-size: 14px; color: var(--gris); }
.carte-avis--sombre .carte-avis__credit { color: rgba(243,238,228,0.7); }

@media (max-width: 64rem) { /* 1024px */
  .cartes-avis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) { /* 640px */
  .cartes-avis { grid-template-columns: 1fr; }
}

/* ===========================================================
   Vous cherchez (acheter)
   =========================================================== */
.section-recherche {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
  align-items: start;
}
.recherche-colonne { grid-column: span 5; display: flex; flex-direction: column; gap: 28px; padding-right: 24px; }
.titre-2--recherche { font-size: clamp(2rem, 1.5rem + 2vw, 4.75rem); }
.recherche-texte { margin: 0; font-size: 18px; line-height: 1.6; color: var(--texte-secondaire); }

.encart-offmarket {
  background: var(--marine);
  color: var(--ivoire);
  border-radius: 22px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.encart-offmarket__badge {
  align-self: flex-start;
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marine);
  background: var(--or);
  padding: 6px 12px;
  border-radius: 999px;
}
.encart-offmarket__titre {
  font-family: var(--police-serif);
  font-size: 28px;
  line-height: 1.15;
}
.encart-offmarket__titre em { font-style: italic; color: var(--or); }
.encart-offmarket__texte { font-size: 15px; line-height: 1.5; color: rgba(243,238,228,0.75); }

.liste-atouts { display: flex; flex-direction: column; gap: 14px; font-size: 16px; }
.liste-atouts__item { display: flex; gap: 12px; align-items: center; }
.liste-atouts__item svg { flex-shrink: 0; }

.encart-transparence {
  grid-column: 1 / -1;
  margin-top: 20px;
  background: transparent;
  border: 1.5px solid #CFC6B4;
  border-radius: 22px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.encart-transparence__titre {
  font-family: var(--police-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--or-fonce);
}
.encart-transparence__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--police-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte-secondaire);
}
.encart-transparence__puce {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--or-fonce);
  margin-top: 8px;
}

.carte-recherche {
  grid-column: span 7;
  background: var(--blanc);
  border-radius: 28px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 30px 80px rgba(11,22,38,0.08);
}
.carte-recherche__titre { font-family: var(--police-serif); font-size: 36px; }
.groupe-champ { display: flex; flex-direction: column; gap: 10px; }
.groupe-champ__label { font-size: 14px; font-weight: 500; }

@media (max-width: 56.25rem) {
  .recherche-colonne, .carte-recherche { grid-column: span 12; padding-right: 0; }
}

/* ===========================================================
   Formulaire « Ma recherche » (acheter)
   =========================================================== */
.pilules { display: flex; flex-wrap: wrap; gap: 10px; }
.pilule-choix {
  font-family: var(--police-sans);
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(11,22,38,0.2);
  background: var(--blanc);
  color: var(--marine);
  cursor: pointer;
  min-height: 44px;
}
.pilule-choix[aria-pressed="true"] {
  background: var(--marine);
  color: var(--ivoire);
  border-color: var(--marine);
}
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ[hidden] { display: none; }
.champ label { font-size: 14px; font-weight: 600; }
.champ input, .champ select, .champ textarea {
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(11,22,38,0.2);
  background: var(--blanc);
  min-height: 44px;
}
.champ textarea { font-family: var(--police-sans); resize: vertical; }
.champ-accord {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texte-secondaire);
}
.champ-accord input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }

.grille-champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.champ--pleine-largeur { grid-column: span 2; }
@media (max-width: 30rem) {
  .grille-champs { grid-template-columns: 1fr; }
  .champ--pleine-largeur { grid-column: span 1; }
}
.champ-secteur-autre { display: flex; flex-direction: column; gap: 8px; }
.champ-secteur-autre[hidden] { display: none; }

.formulaire-recherche { display: flex; flex-direction: column; gap: 24px; }
.formulaire-recherche[hidden] { display: none; }
.confirmation-recherche { display: flex; flex-direction: column; gap: 12px; text-align: center; padding: 24px 0; }
.confirmation-recherche[hidden] { display: none; }
.note-formulaire {
  margin: 0;
  font-family: var(--police-sans);
  font-size: 13px;
  color: var(--gris);
  text-align: center;
}

/* ===========================================================
   Pied de page (identique sur les 3 pages)
   =========================================================== */
.pied {
  background: var(--marine);
  color: var(--ivoire);
  padding-block: 72px 40px;
}
.pied .container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.pied__grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
}
.pied__marque { grid-column: span 4; display: flex; flex-direction: column; gap: 22px; }
.pied__marque .logo { width: 211px; }
.pied__texte { font-size: 15px; line-height: 1.6; color: rgba(243,238,228,0.7); max-width: 360px; }
.pied__horaires { font-size: 14px; line-height: 1.6; color: rgba(243,238,228,0.6); }
.pied__reseaux { display: flex; gap: 10px; }
.pied__reseau {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(243,238,228,0.25);
  display: flex; align-items: center; justify-content: center;
}
.pied__colonne { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; }
.pied__colonne-titre {
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}
.pied__lien { color: rgba(243,238,228,0.78); font-size: 15px; }

.bandeau-recrutement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 36px;
  border-radius: 24px;
  border: 1px solid rgba(205,175,96,0.35);
  background: var(--marine-secondaire);
  flex-wrap: wrap;
}
.bandeau-recrutement__groupe { display: flex; flex-direction: column; gap: 6px; }
.bandeau-recrutement__label {
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
}
.bandeau-recrutement__titre {
  font-family: var(--police-serif);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);
  line-height: 1.1;
  color: var(--ivoire);
}
.bandeau-recrutement__titre em { font-style: italic; color: var(--or); }
.bandeau-recrutement__bouton {
  flex-shrink: 0;
  background: var(--or);
  color: var(--marine);
  font-weight: 600;
  font-size: 16px;
  padding: 16px 24px;
  border-radius: 999px;
}

.pied__mentions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(243,238,228,0.1);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(243,238,228,0.55);
  flex-wrap: wrap;
}
.pied__mentions-liens { display: flex; gap: 20px; flex-shrink: 0; }
.pied__mentions-liens a { color: rgba(243,238,228,0.55); }

@media (max-width: 56.25rem) {
  .pied__marque { grid-column: span 12; }
  .pied__colonne { grid-column: span 6; }
}
@media (max-width: 30rem) {
  .pied__colonne { grid-column: span 12; }
  .bandeau-recrutement, .pied__mentions { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================
   Section contact / CTA finale
   =========================================================== */
.cta-finale { display: flex; flex-direction: column; gap: 48px; }
.cta-finale__titre {
  margin: 0;
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: var(--fs-h2-cta);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.cta-finale__titre em { font-style: italic; color: var(--or); }
.cta-finale__grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 24px;
  align-items: end;
}
.cta-finale__texte {
  grid-column: span 5;
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: rgba(243,238,228,0.8);
}
.cta-finale__actions {
  grid-column: 7 / span 6;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
@media (max-width: 56.25rem) {
  .cta-finale__texte, .cta-finale__actions { grid-column: span 12; justify-content: flex-start; }
}
@media (max-width: 30rem) {
  .cta-finale__actions { flex-direction: column; align-items: stretch; }
  .cta-finale__actions .bouton { justify-content: center; }
}

/* ===========================================================
   Fiche secteur — Avanne-Aveney (et futures fiches)
   =========================================================== */
.secteurs__bouton[aria-current="page"] { color: var(--or); }
.secteurs__lien[aria-current="page"] { background: rgba(205,175,96,0.14); }
.secteurs__lien[aria-current="page"] .secteurs__lien-titre { color: var(--or); }
.menu-mobile__lien[aria-current="page"] { color: var(--or); }

/* Héros */
.hero-fiche { display: flex; flex-direction: column; gap: 28px; padding-block: var(--pad-section) 0; }
.hero-fiche__titre {
  margin: 0;
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: clamp(3.5rem, 4rem + 6vw, 10.5rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
}
.hero-fiche__titre em { font-style: normal; color: var(--or); }
.hero-fiche__sous {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
}
.hero-fiche__accroche {
  grid-column: span 6;
  margin: 0;
  font-family: var(--police-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 0.9rem + 3vw, 2.75rem);
  line-height: 1.1;
  color: var(--or);
}
.hero-fiche__bloc-droite { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 20px; }
.hero-fiche__paragraphe { margin: 0; font-size: var(--fs-body-lg); line-height: 1.6; color: rgba(243,238,228,0.82); }
@media (max-width: 56.25rem) {
  .hero-fiche__accroche, .hero-fiche__bloc-droite { grid-column: span 12; }
}

.hero-fiche__illustration {
  width: min(1200px, calc(100% - 128px));
  margin: 32px auto 0;
  position: relative;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  background: #0B1D36;
  padding-bottom: 20px;
}
.hero-fiche__illustration img,
.hero-fiche__illustration svg { display: block; width: 100%; height: auto; }
/* Les encarts remontent sous l'image : leur bord haut tombe sur le rail du tram
   (y = 261 sur 440 dans le SVG, soit -12,43 % de la largeur en marge négative). */
.hero-fiche__tuiles {
  position: relative;
  margin-top: -12.43%;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.tuile-fiche {
  background: rgba(11,22,38,0.78);
  border: 1px solid rgba(205,175,96,0.35);
  border-radius: 20px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tuile-fiche__chiffre { font-family: var(--police-serif); font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 0.9; color: var(--ivoire); }
.tuile-fiche__chiffre em { font-style: italic; font-size: 0.55em; color: var(--or); }
.tuile-fiche__legende { font-size: 13px; line-height: 1.4; color: rgba(243,238,228,0.75); }
@media (max-width: 48rem) {
  .hero-fiche__illustration { width: calc(100% - 40px); padding-bottom: 20px; }
  .hero-fiche__tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; padding-inline: 0; }
}

/* Sommaire collant */
.sommaire {
  position: sticky;
  top: 0;
  z-index: 15;
  border-bottom: 1px solid var(--border-line);
  background: var(--ivoire);
}
.sommaire__scroll {
  padding-block: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
}
.sommaire__label {
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-fonce);
  margin-right: 8px;
  flex-shrink: 0;
}
.sommaire__lien {
  font-size: 14px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--border-line);
  background: var(--blanc);
  white-space: nowrap;
  flex-shrink: 0;
}
.sommaire__lien[aria-current="true"] { background: var(--marine); color: var(--ivoire); border-color: var(--marine); }

/* Cartes photo (Vivre ici) */
.cartes-lieu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.carte-lieu { background: var(--blanc); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.carte-lieu__corps { padding: 28px 30px 32px; display: flex; flex-direction: column; gap: 14px; }
.carte-lieu__titre { font-family: var(--police-serif); font-size: 32px; line-height: 1.05; }
.carte-lieu__texte { font-size: 16px; line-height: 1.55; color: var(--texte-secondaire); }
@media (max-width: 64rem) { .cartes-lieu { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .cartes-lieu { grid-template-columns: 1fr; } }

/* Emplacement photo générique (utilisé partout où une photo manque) */
.photo-emplacement {
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden;
}
.photo-emplacement--clair { background: var(--sable); border: 1px dashed #B9AE97; color: var(--gris); }
.photo-emplacement--sombre { background: var(--marine-secondaire); border: 1px dashed rgba(205,175,96,0.45); color: rgba(243,238,228,0.6); }
.photo-emplacement:has(img) { padding: 0; border: none; }
.photo-emplacement img { width: 100%; height: 100%; object-fit: cover; display: block; }

.encart-classement {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  border-radius: 22px;
  border: 1.5px solid var(--border-line);
}
.encart-classement__chiffre { font-family: var(--police-serif); font-size: 48px; line-height: 1; color: var(--or-fonce); flex-shrink: 0; }
.encart-classement__chiffre em { font-style: italic; font-size: 26px; }
.encart-classement__texte { font-size: 16px; line-height: 1.5; color: var(--texte-secondaire); }

/* Carte interactive */
.section-carte__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.section-carte__illustration { grid-column: span 8; border-radius: 28px; overflow: hidden; }
.section-carte__illustration svg { width: 100%; height: 100%; display: block; }
.section-carte__panneau { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 64rem) {
  .section-carte__illustration { grid-column: span 12; min-height: 480px; }
  .section-carte__panneau { grid-column: span 12; }
}

.fiche-lieu { background: var(--marine); color: var(--ivoire); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.fiche-lieu__label { font-family: var(--police-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--or); }
.fiche-lieu__titre { font-family: var(--police-serif); font-size: 32px; line-height: 1.05; }
.fiche-lieu__texte { font-size: 15px; line-height: 1.55; color: rgba(243,238,228,0.8); }

.liste-lieux { display: flex; flex-direction: column; gap: 6px; }
.liste-lieux__item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-family: var(--police-sans);
  font-size: 15px;
  background: transparent;
  color: var(--marine);
}
.liste-lieux__item:hover { color: var(--marine); background: rgba(11,22,38,0.06); }
.liste-lieux__num { font-family: var(--police-mono); font-size: 12px; width: 22px; flex-shrink: 0; }
.liste-lieux__item[aria-current="true"] { background: var(--marine); color: var(--ivoire); font-weight: 600; }
.liste-lieux__item[aria-current="true"]:hover { color: var(--ivoire); background: var(--marine); }

/* Pastilles interactives de la carte SVG */
.carte-svg-pastille { cursor: pointer; }
.carte-svg-pastille circle { transition: r 0.15s ease, fill 0.15s ease; }
.carte-svg-pastille text { transition: fill 0.15s ease; }
.carte-svg-pastille:focus-visible circle { outline: 2px solid var(--marine); outline-offset: 3px; }

/* Tuiles chiffrées génériques (nature, habitants, immobilier) */
.tuiles-stat { display: grid; gap: 14px; }
.tuiles-stat--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tuiles-stat--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tuile-stat { border-radius: 22px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.tuile-stat--clair { background: var(--blanc); }
.tuile-stat--sombre { background: var(--marine-secondaire); border: 1px solid rgba(205,175,96,0.28); }
.tuile-stat__chiffre { font-family: var(--police-serif); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.75rem); line-height: 0.9; letter-spacing: -0.02em; }
.tuile-stat--clair .tuile-stat__chiffre { color: var(--marine); }
.tuile-stat--sombre .tuile-stat__chiffre { color: var(--ivoire); }
.tuile-stat__chiffre em { font-style: italic; font-size: 0.57em; }
.tuile-stat--clair .tuile-stat__chiffre em { color: var(--or-fonce); }
.tuile-stat--sombre .tuile-stat__chiffre em { color: var(--or); }
.tuile-stat__legende { font-size: 14px; line-height: 1.45; }
.tuile-stat--clair .tuile-stat__legende { color: var(--gris); }
.tuile-stat--sombre .tuile-stat__legende { color: rgba(243,238,228,0.75); }
@media (max-width: 40rem) {
  .tuiles-stat--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.encart-actualite {
  background: var(--marine);
  color: var(--ivoire);
  border-radius: 24px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}
.encart-actualite__contenu { grid-column: span 8; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.encart-actualite__pastille {
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--or);
  color: var(--marine);
  padding: 6px 14px;
  border-radius: 999px;
}
.encart-actualite__titre { font-family: var(--police-serif); font-size: 32px; line-height: 1.15; }
.encart-actualite__titre em { font-style: italic; color: var(--or); }
.encart-actualite__texte { font-size: 16px; line-height: 1.55; color: rgba(243,238,228,0.8); }
.encart-actualite__cta { grid-column: span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.encart-actualite__question { font-size: 16px; line-height: 1.4; }
@media (max-width: 56.25rem) {
  .encart-actualite { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .encart-actualite__contenu, .encart-actualite__cta { grid-column: span 12; }
}

/* Cartes à icône, variante sombre (nature, se déplacer) */
.carte-verification--sombre { background: var(--marine-secondaire); border: 1px solid rgba(205,175,96,0.25); }
.carte-verification--sombre .carte-verification__icone { background: var(--or); }
.carte-verification--sombre .carte-verification__texte { color: rgba(243,238,228,0.78); }

/* Une journée ici */
.etapes-journee { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid rgba(205,175,96,0.4); }
.etape-journee { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 30px; border-left: 1px solid rgba(243,238,228,0.14); }
.etape-journee:first-child { border-left: none; padding-left: 0; }
.etape-journee:last-child { padding-right: 0; }
.etape-journee__heure { font-family: var(--police-serif); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); line-height: 0.9; color: var(--or); }
.etape-journee__icone { width: 52px; height: 52px; border-radius: 999px; background: var(--or); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.etape-journee__titre { font-family: var(--police-serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.1; }
.etape-journee__texte { font-size: 15px; line-height: 1.55; color: rgba(243,238,228,0.75); }
@media (max-width: 64rem) {
  .etapes-journee { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .etape-journee:nth-child(3n+1) { border-left: none; padding-left: 0; }
  .etape-journee:nth-child(n+4) { border-top: 1px solid rgba(243,238,228,0.14); padding-top: 24px; }
}
@media (max-width: 40rem) {
  .etapes-journee { grid-template-columns: 1fr; border-top: none; }
  .etape-journee { border-left: none; border-top: 1px solid rgba(243,238,228,0.14); padding: 20px 0; }
  .etape-journee:first-child { border-top: none; padding-top: 0; }
  .etape-journee:nth-child(n+4) { border-top: 1px solid rgba(243,238,228,0.14); padding-top: 20px; }
}

/* Listes à puces (commerces) */
.liste-puces { display: flex; flex-direction: column; gap: 10px; }
.liste-puces__item { display: flex; gap: 10px; align-items: baseline; font-size: 16px; line-height: 1.5; }
.liste-puces__puce { width: 7px; height: 7px; border-radius: 999px; background: var(--or-fonce); flex-shrink: 0; transform: translateY(-2px); }

/* Trois visages, trois ambiances (immobilier) */
.cartes-ambiance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.carte-ambiance { background: var(--marine-secondaire); border: 1px solid rgba(205,175,96,0.25); border-radius: 24px; padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.carte-ambiance__titre { font-family: var(--police-serif); font-size: 32px; line-height: 1.05; color: var(--ivoire); }
.carte-ambiance__texte { font-size: 16px; line-height: 1.55; color: rgba(243,238,228,0.78); }
@media (max-width: 64rem) { .cartes-ambiance { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .cartes-ambiance { grid-template-columns: 1fr; } }

/* Graphique de prix (barres) */
.carte-graphique { background: var(--marine-secondaire); border: 1px solid rgba(205,175,96,0.25); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 20px; height: 100%; }
.carte-graphique__label { font-family: var(--police-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or); }
.graphique-barres { display: flex; align-items: flex-end; gap: 28px; height: 220px; border-bottom: 1px solid rgba(243,238,228,0.2); }
.graphique-barres__colonne { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; justify-content: flex-end; height: 100%; }
.graphique-barres__valeur { font-family: var(--police-serif); font-size: 22px; color: var(--ivoire); }
.graphique-barres__barre { width: 100%; border-radius: 12px 12px 0 0; background: rgba(205,175,96,0.45); }
.graphique-barres__barre--actuelle { background: var(--or); }
.graphique-barres__legendes { display: flex; gap: 28px; }
.graphique-barres__legendes span { flex: 1; text-align: center; font-family: var(--police-mono); font-size: 13px; color: rgba(243,238,228,0.7); }

/* Frise chronologique (fiches secteur, ex. Rancenay) */
.frise-histoire { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; column-gap: 20px; }
.frise-histoire--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.frise-histoire__item { display: flex; flex-direction: column; gap: 12px; padding: 26px 4px 0; border-top: 2px solid var(--or); position: relative; }
.frise-histoire__pastille { position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 999px; background: var(--or); }
.frise-histoire__date { font-family: var(--police-serif); font-size: clamp(1.75rem, 1.3rem + 1.5vw, 3rem); line-height: 0.95; color: var(--or); }
.frise-histoire__titre { font-family: var(--police-serif); font-size: 22px; line-height: 1.1; }
.frise-histoire__texte { font-size: 15px; line-height: 1.55; color: rgba(243,238,228,0.75); }
@media (max-width: 64rem) { .frise-histoire { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .frise-histoire { grid-template-columns: 1fr; } }

/* Bloc chiffres de la section Nature (fiches secteur) */
.section-nature__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.section-nature__photo { grid-column: span 7; }
.tuiles-nature { grid-column: span 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: stretch; }
.tuile-nature {
  background: var(--blanc);
  border-radius: 22px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}
.tuile-nature__chiffre { font-family: var(--police-serif); font-size: clamp(40px, 4vw, 60px); line-height: 0.9; white-space: nowrap; color: var(--marine); }
.tuile-nature__chiffre em { font-style: italic; color: var(--or-fonce); font-size: 0.55em; }
.tuile-nature__legende { font-family: var(--police-sans); font-size: 14px; line-height: 1.45; color: var(--gris); text-align: left; }
@media (max-width: 56.25rem) {
  .section-nature__grille { grid-template-columns: 1fr; }
  .section-nature__photo, .tuiles-nature { grid-column: 1; }
}

/* Grille DPE */
.grille-dpe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grille-dpe .photo-emplacement { aspect-ratio: 4 / 3; }
@media (max-width: 56.25rem) { .grille-dpe { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .grille-dpe { grid-template-columns: 1fr; } }

.carte-dpe {
  background: var(--marine-secondaire);
  border: 1px solid rgba(205,175,96,0.25);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.carte-dpe__titre { font-family: var(--police-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--or); }
.carte-dpe__graphique { flex: 1; display: flex; align-items: center; }
.carte-dpe__lecture { font-size: 13px; line-height: 1.4; color: var(--ivoire); margin: 0; }
.carte-dpe__n { font-family: var(--police-mono); font-size: 10px; letter-spacing: 0.04em; color: rgba(243,238,228,0.72); }
.grille-dpe__source { display: block; margin-top: 16px; font-size: 12px; font-style: italic; color: rgba(243,238,228,0.5); }

/* Bandeau CTA immobilier */
.bandeau-cta-fiche {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--or);
  color: var(--marine);
  border-radius: 28px;
  padding: 36px 44px;
  flex-wrap: wrap;
}
.bandeau-cta-fiche__titre { font-family: var(--police-serif); font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.05; }
.bandeau-cta-fiche__titre em { font-style: italic; }
.bandeau-cta-fiche__actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 40rem) {
  .bandeau-cta-fiche { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
  .bandeau-cta-fiche__actions { flex-shrink: 1; width: 100%; }
  .bandeau-cta-fiche__actions .bouton,
  .bandeau-cta-fiche__actions > a { width: 100%; justify-content: center; text-align: center; }
}

/* Bio conseiller */
.carte-bio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; background: var(--marine); color: var(--ivoire); border-radius: 32px; padding: 48px; }
.carte-bio__photo { grid-column: span 4; height: 360px; }
.carte-bio__texte { grid-column: span 8; display: flex; flex-direction: column; gap: 20px; }
.carte-bio__titre { font-family: var(--police-serif); font-size: clamp(1.75rem, 1rem + 3vw, 3.375rem); line-height: 1.02; }
.carte-bio__titre em { font-style: italic; color: var(--or); }
.carte-bio__paragraphe { font-size: var(--fs-body-lg); line-height: 1.6; color: rgba(243,238,228,0.8); max-width: 640px; }
@media (max-width: 56.25rem) {
  .carte-bio { grid-template-columns: 1fr; padding: 32px; }
  .carte-bio__photo, .carte-bio__texte { grid-column: 1; }
  .carte-bio__photo { height: 260px; }
}

/* Liste numérotée (secteurs d'un quartier, ex. Velotte) */
.liste-secteurs { display: flex; flex-direction: column; border-bottom: 1px solid var(--border-line); }
.liste-secteurs__item { display: grid; grid-template-columns: 90px 1fr 2fr; gap: 24px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--border-line); }
.liste-secteurs__num { font-family: var(--police-serif); font-size: 44px; line-height: 1; color: var(--or-fonce); }
.liste-secteurs__titre { font-family: var(--police-serif); font-size: var(--fs-carte-titre); line-height: 1.05; }
.liste-secteurs__texte { font-size: 17px; line-height: 1.6; color: var(--texte-secondaire); }
@media (max-width: 40rem) {
  .liste-secteurs__item { grid-template-columns: 1fr; gap: 8px; }
}

/* FAQ accordéon */
.faq-liste { display: flex; flex-direction: column; border-bottom: 1px solid var(--border-line); }
.faq-item { border-top: 1px solid var(--border-line); }
.faq-item summary {
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  font-family: var(--police-serif);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  line-height: 1.1;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__icone { flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item[open] .faq-item__icone { transform: rotate(45deg); }
.faq-item__reponse { margin: 0 0 28px; font-size: 17px; line-height: 1.6; color: var(--texte-secondaire); max-width: 760px; }

@media (max-width: 56.25rem) {
  .hero-fiche__titre { font-size: clamp(3rem, 2rem + 10vw, 6rem); }
  .grille-deplacer > div { grid-column: span 12 !important; }
}

/* ===========================================================
   Consentement cookies (bandeau + personnalisation)
   =========================================================== */
.bandeau-cookies {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 200;
  width: min(1040px, calc(100% - 32px));
  background: var(--marine);
  color: var(--ivoire);
  border: 1px solid rgba(205,175,96,0.4);
  border-radius: 24px;
  padding: 28px 32px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies__corps { display: flex; flex-direction: column; gap: 8px; flex: 1 1 420px; }
.bandeau-cookies__titre { font-family: var(--police-serif); font-size: 28px; line-height: 1.1; }
.bandeau-cookies__titre em { font-style: italic; color: var(--or); }
.bandeau-cookies__texte { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(243,238,228,0.78); }
.bandeau-cookies__texte a { color: var(--or); text-decoration: underline; }
.bandeau-cookies__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.bandeau-cookies__lien {
  background: none; border: none; cursor: pointer;
  color: rgba(243,238,228,0.75);
  font-family: var(--police-sans); font-size: 14px; font-weight: 600;
  text-decoration: underline;
  padding: 12px 4px;
}
.bandeau-cookies__lien:hover { color: var(--ivoire); }
.bandeau-cookies__bouton {
  font-family: var(--police-sans);
  font-weight: 600;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.bandeau-cookies__bouton--contour { background: none; border: 1px solid rgba(243,238,228,0.4); color: var(--ivoire); }
.bandeau-cookies__bouton--contour:hover { border-color: rgba(243,238,228,0.7); }
.bandeau-cookies__bouton--plein { background: var(--or); border: none; color: var(--marine); }
.bandeau-cookies__bouton--plein:hover { opacity: 0.92; }
@media (max-width: 40rem) {
  .bandeau-cookies { padding: 24px; flex-direction: column; align-items: stretch; gap: 20px; max-height: calc(100dvh - 32px); overflow-y: auto; }
  .bandeau-cookies__corps { flex: 0 0 auto; }
  .bandeau-cookies__actions { flex-direction: column-reverse; align-items: stretch; }
  .bandeau-cookies__actions > * { text-align: center; justify-content: center; }
}

.dialogue-cookies { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dialogue-cookies[hidden] { display: none; }
.dialogue-cookies__fond { position: absolute; inset: 0; background: rgba(11,22,38,0.6); }
.dialogue-cookies__panneau {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--ivoire);
  color: var(--marine);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 30px 80px rgba(11,22,38,0.4);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dialogue-cookies__entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialogue-cookies__titre { font-family: var(--police-serif); font-size: 26px; line-height: 1.1; }
.dialogue-cookies__fermer {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px;
  background: none; border: 1px solid var(--border-line); color: var(--marine);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dialogue-cookies__fermer:hover { background: var(--sable); }
.dialogue-cookies__categorie { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border-line); }
.dialogue-cookies__categorie-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialogue-cookies__categorie-titre { font-family: var(--police-serif); font-size: 19px; }
.dialogue-cookies__categorie-texte { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texte-secondaire); }
.dialogue-cookies__actions { display: flex; justify-content: flex-end; padding-top: 4px; }
.dialogue-cookies__actions .bandeau-cookies__bouton--plein { color: var(--marine); }

.interrupteur {
  position: relative;
  flex-shrink: 0;
  width: 42px; height: 24px;
  border-radius: 999px;
  background: #D5CCBA;
  border: none;
  cursor: pointer;
  padding: 0;
}
.interrupteur__poignee {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--blanc);
  transition: transform 0.15s ease;
}
.interrupteur--actif { background: var(--or); }
.interrupteur--actif .interrupteur__poignee { transform: translateX(18px); }
.interrupteur--fixe { background: var(--or); opacity: 0.55; cursor: default; }
.interrupteur--fixe .interrupteur__poignee { transform: translateX(18px); }

/* ===========================================================
   Mentions légales
   =========================================================== */
.hero-legal { padding-block: 96px 72px; }
.hero-legal__surtitre { display: block; font-family: var(--police-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); margin-bottom: 20px; }
.hero-legal__titre { margin: 0 0 20px; font-family: var(--police-serif); font-weight: 400; font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); line-height: 1.02; }
.hero-legal__titre em { font-style: italic; color: var(--or); }
.hero-legal__texte { margin: 0; max-width: 640px; font-size: var(--fs-body-lg); line-height: 1.6; color: rgba(243,238,228,0.8); }

.mentions-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: start; }
.mentions-sommaire { grid-column: span 3; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; }
.mentions-sommaire__liste { display: flex; flex-direction: column; gap: 2px; }
.mentions-sommaire__lien {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 4px;
  font-size: 14px; line-height: 1.3;
  color: var(--texte-secondaire);
  border-radius: 8px;
}
.mentions-sommaire__lien:hover { color: var(--marine); }
.mentions-sommaire__lien span:first-child { font-family: var(--police-mono); font-size: 12px; color: var(--or-fonce); flex-shrink: 0; }
.mentions-sommaire__bouton {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marine); color: var(--ivoire);
  font-weight: 600; font-size: 14px;
  padding: 14px 20px; border-radius: 999px;
  border: none; cursor: pointer; text-align: center;
}
.mentions-sommaire__bouton:hover { opacity: 0.9; }
@media (max-width: 64rem) {
  .mentions-sommaire { position: static; grid-column: span 12; }
}

.mentions-contenu { grid-column: span 8; display: flex; flex-direction: column; gap: 72px; }
@media (max-width: 64rem) { .mentions-contenu { grid-column: span 12; } }

.rubrique-legale { display: flex; flex-direction: column; gap: 20px; padding-top: 32px; border-top: 1px solid var(--border-line); scroll-margin-top: 96px; }
.rubrique-legale__numero { font-family: var(--police-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--or-fonce); }
.rubrique-legale__titre { margin: 0; font-family: var(--police-serif); font-weight: 400; font-size: 40px; line-height: 1.1; }
.rubrique-legale p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--texte-secondaire); }
.rubrique-legale p strong { color: var(--marine); font-weight: 600; }
.rubrique-legale a { color: var(--or-fonce); text-decoration: underline; }
.rubrique-legale ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.rubrique-legale ul li { font-size: 16px; line-height: 1.65; color: var(--texte-secondaire); }

.tableau-legal { background: var(--blanc); border-radius: 20px; padding: 8px 28px; }
.tableau-legal__ligne { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 18px 0; border-top: 1px solid var(--border-line); }
.tableau-legal__ligne:first-child { border-top: none; }
.tableau-legal__cle { flex: 0 0 220px; font-family: var(--police-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.tableau-legal__valeur { flex: 1 1 320px; font-size: 15px; line-height: 1.55; color: var(--marine); }
.tableau-legal__valeur a { color: var(--or-fonce); }

.a-completer {
  display: inline-block;
  font-family: var(--police-mono);
  font-size: 13px;
  color: var(--or-fonce);
  background: rgba(205,175,96,0.08);
  border: 1px dashed var(--or);
  border-radius: 8px;
  padding: 4px 10px;
}

/* ===========================================================
   Page « Qui suis-je » (a-propos)
   =========================================================== */
.hero__accroche { margin: 0; font-family: var(--police-serif); font-style: italic; font-size: 38px; line-height: 1.15; color: var(--or); }
.portrait-cadre--carre { min-height: 0; aspect-ratio: 4 / 5; align-self: start; }
.badge-experience {
  position: absolute;
  left: 24px;
  bottom: -24px;
  background: var(--ivoire);
  color: var(--marine);
  border-radius: 20px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.badge-experience__chiffre { font-family: var(--police-serif); font-size: 40px; line-height: 1; }
.badge-experience__legende { font-size: 13px; color: var(--gris); }
.carte-methode__titre em { font-style: italic; color: var(--or-fonce); }
@media (max-width: 40rem) {
  .badge-experience { left: 16px; bottom: -18px; padding: 16px 20px; }
  .badge-experience__chiffre { font-size: 32px; }
}

/* ===========================================================
   Page Estimation
   =========================================================== */

/* Héros — grille 6 + 6, formulaire dans une carte blanche */
.hero-estimation__col { grid-column: span 6; }
@media (max-width: 68.75rem) { /* 1100px */
  .hero-estimation__col { grid-column: span 12; }
}
.hero-estimation__intro { display: flex; flex-direction: column; gap: 28px; }
.hero-estimation__phrase-forte { font-weight: 600; color: var(--ivoire); }
.hero-estimation__surtitre {
  display: block;
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 16px;
}

/* Carte formulaire (blanche, arrondie, ombrée) */
.carte-formulaire {
  background: var(--blanc);
  color: var(--marine);
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 30px 80px rgba(11,22,38,0.28);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 30rem) {
  .carte-formulaire { padding: 28px 22px; }
}
.note-formulaire-cadenas {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 13px;
  color: var(--gris);
}

/* Formulaire multi-étapes */
.form-etapes__entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.form-etapes__progression { display: flex; gap: 6px; flex: 1; max-width: 200px; }
.form-etapes__segment { flex: 1; height: 4px; border-radius: 999px; background: rgba(11,22,38,0.1); }
.form-etapes__segment--actif { background: var(--or); }
.form-etapes__label { font-family: var(--police-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.form-etape { display: flex; flex-direction: column; gap: 20px; }
.form-etape[hidden] { display: none; }
.form-etape__titre { font-family: var(--police-serif); font-size: 28px; margin: 0; }
.form-etape__actions { display: flex; gap: 12px; }
.form-etape__actions .bouton { flex: 1; justify-content: center; }
.bouton--retour { background: transparent; color: var(--marine); border: 1px solid rgba(11,22,38,0.2); }
.bouton--retour:hover { color: var(--marine); border-color: rgba(11,22,38,0.4); }
.confirmation-formulaire { display: flex; flex-direction: column; gap: 12px; text-align: center; padding: 24px 0; }
.confirmation-formulaire[hidden] { display: none; }
.erreur-formulaire { font-size: 14px; color: #C0572F; margin: 0; }
.erreur-formulaire[hidden] { display: none; }

/* Cartes « Niveau 1 / Niveau 2 » */
.grille-niveaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 56.25rem) { .grille-niveaux { grid-template-columns: 1fr; } }
.carte-niveau { border-radius: 28px; padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.carte-niveau--clair { background: var(--blanc); border: 1px solid var(--border-line); }
.carte-niveau--sombre { background: var(--marine); color: var(--ivoire); box-shadow: 0 30px 80px rgba(11,22,38,0.18); }
.carte-niveau__pastille { align-self: flex-start; font-family: var(--police-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.carte-niveau--clair .carte-niveau__pastille { background: rgba(11,22,38,0.06); color: var(--marine); }
.carte-niveau--sombre .carte-niveau__pastille { background: var(--or); color: var(--marine); }
.carte-niveau__titre { font-family: var(--police-serif); font-size: 32px; margin: 0; line-height: 1.05; }
.carte-niveau__prix { font-family: var(--police-serif); font-size: 48px; line-height: 1; }
.carte-niveau--sombre .carte-niveau__prix { color: var(--or); }
.carte-niveau__sous { font-size: 14px; color: var(--gris); }
.carte-niveau--sombre .carte-niveau__sous { color: var(--or); }
.carte-niveau__liste { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; }
.carte-niveau__item { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.carte-niveau__item svg { flex-shrink: 0; margin-top: 2px; }
.carte-niveau .bouton { justify-content: center; margin-top: auto; }

/* Encart sable 2 colonnes */
.encart-duo-sable { background: var(--sable); border-radius: 24px; padding: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 48rem) { .encart-duo-sable { grid-template-columns: 1fr; } }
.encart-duo-sable__titre { font-weight: 600; font-size: 18px; margin: 0 0 10px; }
.encart-duo-sable__texte { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte-secondaire); }

/* Tuiles « faites le calcul » */
.tuiles-calcul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tuiles-calcul--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 64rem) { .tuiles-calcul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .tuiles-calcul { grid-template-columns: 1fr; } }
.tuile-calcul { background: var(--marine-secondaire); border: 1px solid rgba(205,175,96,0.3); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.tuile-calcul__label { font-family: var(--police-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or); }
.carte-chemin__titre { font-family: var(--police-serif); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--ivoire); margin: 0; }
.tuile-calcul__chiffre { font-family: var(--police-serif); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); line-height: 1; color: var(--ivoire); }
.tuile-calcul__texte { font-size: 15px; line-height: 1.5; color: rgba(243,238,228,0.75); margin: 0; }

/* Résultat +94% */
.grille-resultat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.carte-resultat { grid-column: span 5; background: var(--or); color: var(--marine); border-radius: 28px; padding: 48px; display: flex; flex-direction: column; gap: 10px; }
.carte-resultat__label { font-family: var(--police-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.carte-resultat__chiffre { font-family: var(--police-serif); font-size: clamp(4rem, 1.5rem + 9vw, 9.375rem); line-height: 0.85; }
.carte-resultat__texte { font-size: 17px; line-height: 1.5; max-width: 320px; margin: 0; }
.bloc-methode-perso { grid-column: span 7; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 56.25rem) {
  .carte-resultat, .bloc-methode-perso { grid-column: span 12; }
}
.colonnes-formation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
@media (max-width: 56.25rem) { .colonnes-formation { grid-template-columns: 1fr; } }
.colonne-formation { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--or); }
.colonne-formation__titre { font-weight: 600; font-size: 17px; }
.colonne-formation__texte { font-size: 14px; line-height: 1.55; color: rgba(243,238,228,0.75); margin: 0; }

/* Aperçu honnête — vignettes */
.grille-apercu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 56.25rem) { .grille-apercu { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .grille-apercu { grid-template-columns: 1fr; } }
.vignette-apercu { position: relative; aspect-ratio: 3 / 4; background: var(--blanc); border: 1px solid var(--border-line); border-radius: 20px; padding: 24px; overflow: hidden; }
.vignette-apercu__contenu { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.vignette-apercu--floutee .vignette-apercu__contenu { filter: blur(5px); }
.vignette-apercu__pastille { align-self: flex-start; font-family: var(--police-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.vignette-apercu__pastille--niveau1 { background: rgba(205,175,96,0.16); color: var(--or-fonce); }
.vignette-apercu__pastille--niveau2 { background: var(--marine); color: var(--or); }
.vignette-apercu__titre { font-family: var(--police-serif); font-size: 19px; margin: 6px 0 4px; }
.vignette-apercu__ligne { height: 8px; border-radius: 4px; background: var(--border-line); }
.vignette-apercu__ligne--courte { width: 60%; }
.vignette-apercu__verrou { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(243,238,228,0.4); }
.vignette-apercu__verrou-icone { width: 44px; height: 44px; border-radius: 999px; background: var(--marine); display: flex; align-items: center; justify-content: center; }
.vignette-apercu__verrou-texte { font-family: var(--police-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--marine); background: var(--ivoire); padding: 6px 12px; border-radius: 999px; }


/* Choix du niveau (étape 4 du formulaire estimation) */
.cartes-choix-niveau { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 30rem) { .cartes-choix-niveau { grid-template-columns: 1fr; } }
.carte-choix-niveau {
  text-align: left;
  background: var(--blanc);
  border: 1.5px solid rgba(11,22,38,0.15);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--police-sans);
}
.carte-choix-niveau[aria-pressed="true"] { border: 2px solid var(--marine); background: #F6EFDD; }
.carte-choix-niveau__pastille { font-family: var(--police-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-fonce); }
.carte-choix-niveau__titre { font-family: var(--police-serif); font-size: 20px; margin-top: 2px; }
.carte-choix-niveau__prix { font-weight: 600; font-size: 15px; }
.carte-choix-niveau__sous { font-size: 12px; line-height: 1.4; color: var(--gris); }

/* Formulaire estimation — champs, pilules et étapes (7 étapes) */
#formulaire .champ input,
#formulaire .champ select,
#formulaire .champ textarea { background: #FBF9F4; border-color: #CFC6B4; }
.requis { color: #B4532A; }
.bouton:disabled { opacity: 0.4; cursor: not-allowed; }
.form-etape__titre { font-size: 32px; }
.form-etapes__label { color: var(--or-fonce); }
.form-etape__manque { font-size: 13px; color: #B4532A; margin: 0; text-align: center; }
.form-etape__manque[hidden] { display: none; }

.encadre-conditionnel { background: #FBF9F4; border: 1.5px dashed #CFC6B4; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.encadre-conditionnel[hidden] { display: none; }

.grille-champs--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 30rem) { .grille-champs--3col { grid-template-columns: 1fr; } }

.pilules--grille5 { display: grid; grid-template-columns: 0.9fr 1.35fr 1.1fr 1fr 0.85fr; gap: 8px; }
.pilules--grille5 .pilule-choix { font-size: 14px; padding: 10px 4px; text-align: center; justify-content: center; white-space: nowrap; }
@media (max-width: 30rem) {
  .pilules--grille5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pilules--grille5 .pilule-choix { white-space: normal; }
}

.pilules--grille3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pilules--grille3 .pilule-choix { font-size: 13px; padding: 10px 6px; text-align: center; justify-content: center; white-space: normal; line-height: 1.25; }

.carte-choix-niveau { border: 2px solid #E4DDCF; }

/* Page Vendre — « Sept étapes » (parcours) */
.legende-role { display: flex; align-items: center; gap: 10px; }
.legende-role__pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marine);
  background: var(--or);
  padding: 6px 12px;
  border-radius: 999px;
}
.legende-role__texte { font-size: 14px; color: var(--gris); }

.etapes-parcours { display: flex; flex-direction: column; gap: 32px; }
.etape-parcours { display: grid; grid-template-columns: 380px 1fr; gap: 32px; align-items: center; }
@media (max-width: 56.25rem) {
  .etape-parcours { grid-template-columns: 1fr; }
}
.etape-parcours__carte {
  border-radius: 22px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
  justify-content: center;
}
.etape-parcours:nth-child(odd) .etape-parcours__carte { background: var(--marine); color: var(--ivoire); }
.etape-parcours:nth-child(even) .etape-parcours__carte { background: var(--or); color: var(--marine); }
.etape-parcours__num { font-family: var(--police-serif); font-weight: 400; font-size: 64px; line-height: 1; opacity: 0.85; }
.etape-parcours__titre { font-family: var(--police-serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.etape-parcours__liste { display: flex; flex-direction: column; gap: 14px; }
.etape-parcours__item {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte-secondaire);
}
.etape-parcours__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--or);
}
.etape-parcours__item--vous { font-weight: 600; color: var(--marine); }
.etape-parcours__vous-pastille {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--marine);
  background: var(--or);
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}
.etape-parcours__note { display: block; margin-top: 6px; font-family: var(--police-serif); font-style: italic; font-size: 14px; color: var(--gris); }

/* Page Vendre — « Ce qu'un vendeur seul ne voit pas » (sécuriser) */
.grille-stat-securiser { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.carte-stat-or { grid-column: span 4; background: var(--or); color: var(--marine); border-radius: 26px; padding: 40px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.carte-stat-or__chiffre { font-family: var(--police-serif); font-weight: 400; font-size: 64px; line-height: 1; }
.carte-stat-or__texte { font-size: 17px; line-height: 1.45; }
.carte-stat-or__source { font-size: 12px; opacity: 0.75; }
.carte-texte-sombre { grid-column: span 8; background: var(--marine-secondaire); border: 1px solid rgba(205,175,96,0.3); border-radius: 26px; padding: 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.carte-texte-sombre__titre { font-family: var(--police-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--ivoire); }
.carte-texte-sombre__titre em { font-style: italic; color: var(--or); }
.carte-texte-sombre__texte { font-size: 16px; line-height: 1.6; color: rgba(243,238,228,0.8); margin: 0; }
@media (max-width: 56.25rem) {
  .carte-stat-or, .carte-texte-sombre { grid-column: span 12; }
}

.cartes-cas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 56.25rem) { .cartes-cas { grid-template-columns: 1fr; } }
.carte-cas { background: var(--marine-secondaire); border: 1px solid rgba(205,175,96,0.3); border-radius: 26px; padding: 34px; display: flex; flex-direction: column; gap: 16px; }
.carte-cas__entete { display: flex; align-items: center; justify-content: space-between; }
.carte-cas__label { font-family: var(--police-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or); }
.carte-cas__pastille { width: 10px; height: 10px; border-radius: 999px; background: var(--or); flex-shrink: 0; }
.carte-cas__titre { font-family: var(--police-serif); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--ivoire); margin: 0; }
.carte-cas__texte { font-size: 16px; line-height: 1.6; color: rgba(243,238,228,0.8); margin: 0; }
.carte-cas__morale { padding-top: 16px; border-top: 1px solid rgba(205,175,96,0.3); font-family: var(--police-serif); font-style: italic; font-size: 21px; line-height: 1.3; color: var(--or); margin: 0; }

/* Étape 7 — offre recommandée + alternative (formulaire estimation) */
.bloc-offres { display: flex; flex-direction: column; gap: 14px; }
.carte-recommandee {
  position: relative;
  text-align: left;
  width: 100%;
  background: var(--blanc);
  border: 2px solid #E4DDCF;
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  font-family: var(--police-sans);
}
.carte-recommandee[aria-pressed="true"] { border-color: var(--marine); background: #F6EFDD; }
.carte-recommandee__badge-ligne { display: flex; justify-content: flex-end; }
.carte-recommandee__badge {
  font-family: var(--police-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marine);
  background: var(--or);
  padding: 5px 10px;
  border-radius: 999px;
}
.carte-recommandee__titre { font-family: var(--police-serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.carte-recommandee__prix { font-weight: 600; font-size: 15px; color: var(--marine); }
.carte-recommandee__description { font-size: 15px; line-height: 1.5; color: var(--gris); }
.carte-recommandee__raison { padding-top: 12px; border-top: 1px solid rgba(11,22,38,0.12); font-size: 14px; line-height: 1.5; color: var(--texte-secondaire); }

.offre-alternative__question { font-size: 13px; color: var(--gris); margin: 0; }
.offre-alternative {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blanc);
  border: 1.5px solid #E4DDCF;
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--police-sans);
  text-align: left;
}
.offre-alternative[aria-pressed="true"] { border-color: var(--marine); background: #F6EFDD; }
.offre-alternative__niveau { font-family: var(--police-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--or-fonce); flex-shrink: 0; }
.offre-alternative__titre { font-size: 14px; font-weight: 600; flex: 1; }
.offre-alternative__prix { font-size: 14px; color: var(--gris); flex-shrink: 0; }

/* Fenêtre « La Revue de l'Immo » (page Vendre) */
.dialogue-gazette {
  position: relative;
  max-width: 640px;
  width: calc(100% - 40px);
  background: #F3EEE4;
  color: var(--marine);
  border: none;
  border-radius: 28px;
  padding: 40px;
  margin: auto;
}
.dialogue-gazette::backdrop { background: rgba(11,22,38,0.55); }
.dialogue-gazette__fermer {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(11,22,38,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dialogue-gazette__fermer:hover { background: rgba(11,22,38,0.12); }
.dialogue-gazette__surtitre { display: block; font-family: var(--police-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-fonce); margin-bottom: 10px; }
.dialogue-gazette__titre { font-family: var(--police-serif); font-weight: 400; font-size: 40px; line-height: 1.05; margin: 0 0 14px; padding-right: 30px; }
.dialogue-gazette__titre em { font-style: italic; }
.dialogue-gazette__texte { font-size: 16px; line-height: 1.55; color: var(--texte-secondaire); margin: 0 0 20px; }
.dialogue-gazette__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dialogue-gazette__liste li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.4; }
.dialogue-gazette__liste li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 999px; background: var(--or); }
@media (max-width: 30rem) {
  .dialogue-gazette { padding: 28px 22px; }
  .dialogue-gazette__titre { font-size: 32px; }
}

/* Aperçu de la gazette (mini-pages) */
.apercu-gazette-separateur { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--border-line); }
.apercu-gazette { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 14px; }
.apercu-gazette__page {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--blanc);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(11,22,38,0.12);
  overflow: hidden;
}
.apercu-gazette__page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apercu-gazette__page--interieure img.apercu-gazette__contenu { filter: blur(3.5px); }
.apercu-gazette__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--police-mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--marine);
  color: var(--or);
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.apercu-gazette__note { margin: 14px 0 0; font-size: 13px; color: #5B6472; }

@media (max-width: 30rem) {
  .apercu-gazette { gap: 8px; }
  .apercu-gazette__badge { font-size: 7px; padding: 4px 6px; }
}

/* Bouton « Remonter en haut » */
.remonter {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(205,175,96,0.5);
  background: var(--marine);
  color: var(--or);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(11,22,38,0.28);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, bottom 0.2s ease, background 0.2s ease;
}
.remonter[hidden] { display: none; }
.remonter--visible { opacity: 1; transform: translateY(0); }
.remonter:hover { background: var(--marine-secondaire); }
.remonter:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
@media (max-width: 30rem) {
  .remonter { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .remonter { transition: none; }
}

/* ===========================================================
   Page équipe / recrutement
   =========================================================== */
.hero__tuiles-colonne {
  grid-column: span 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
}
.hero__tuiles-colonne .tuile-preuve { padding: 24px; gap: 14px; justify-content: space-between; }
@media (max-width: 68.75rem) {
  .hero__tuiles-colonne { grid-column: span 12; }
}
@media (max-width: 30rem) {
  .hero__tuiles-colonne .tuile-preuve { padding: 18px; }
}

.cartes-equipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.carte-equipe { background: var(--blanc); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.carte-equipe .photo-emplacement { position: relative; height: 300px; border-radius: 0; flex-shrink: 0; }
.carte-equipe__corps { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.carte-equipe__nom { font-family: var(--police-serif); font-size: 32px; line-height: 1.05; }
.carte-equipe__role { font-family: var(--police-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-fonce); }
.carte-equipe__texte { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texte-secondaire); }
@media (max-width: 64rem) {
  .cartes-equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .cartes-equipe { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; width: 100%; }
}

.pour-qui__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.pour-qui__titre { grid-column: span 5; }
.liste-profils { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-line); }
.liste-profils__item { display: flex; align-items: flex-start; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--border-line); font-size: 18px; line-height: 1.45; }
.liste-profils__item svg { flex-shrink: 0; margin-top: 3px; color: var(--or-fonce); }
@media (max-width: 56.25rem) {
  .pour-qui__titre, .liste-profils { grid-column: 1 / -1; }
}

@media (min-width: 56.3125rem) {
  .etapes-deroule--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rejoindre__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.rejoindre__texte { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 24px; }
.rejoindre__formulaire { grid-column: 7 / span 6; }
@media (max-width: 56.25rem) {
  .rejoindre__texte, .rejoindre__formulaire { grid-column: 1 / -1; }
}
/* Champ piège anti-robot : invisible pour les humains mais pas en display:none (les robots l’ignoreraient) */
.champ-piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; opacity: 0; pointer-events: none; }

/* Équipe : pastille « bientôt » et carte d'invitation */
.equipe-bloc { display: flex; flex-direction: column; gap: 20px; }
.pastille-bientot {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--or);
  color: var(--marine);
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.carte-recrue {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 36px;
  border: 2px dashed var(--or-fonce);
  border-radius: 24px;
  background: transparent;
}
.carte-recrue__rond {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px dashed var(--or);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--police-serif);
  font-size: 48px;
  line-height: 1;
  color: var(--or-fonce);
}
.carte-recrue__corps { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.carte-recrue__titre { font-family: var(--police-serif); font-size: 40px; line-height: 1.05; }
.carte-recrue__titre em { display: block; font-style: italic; color: var(--or-fonce); }
.carte-recrue__texte { margin: 0; font-size: 16px; line-height: 1.5; color: var(--texte-secondaire); }
.carte-recrue .bouton { flex-shrink: 0; }
@media (max-width: 40rem) {
  .carte-recrue { flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 24px; }
  .carte-recrue__titre { font-size: 34px; }
}

/* Équipe : parcours accompagné (Thibaut) */
.parcours__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.parcours__photo { grid-column: span 5; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.parcours__photo .photo-emplacement { width: 100%; aspect-ratio: 4 / 5; }
.parcours__nom { display: block; font-family: var(--police-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or-fonce); }
.parcours__role { display: block; margin-top: 6px; font-size: 16px; color: var(--texte-secondaire); }
.frise-parcours { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; }
.frise-parcours__etape { position: relative; padding: 0 0 36px 48px; }
.frise-parcours__etape:last-child { padding-bottom: 0; }
.frise-parcours__etape::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 34px;
  bottom: 6px;
  width: 1.5px;
  background: var(--or-fonce);
}
.frise-parcours__etape:last-child::before { display: none; }
.frise-parcours__pastille {
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 5px rgba(205,175,96,0.25);
}
.frise-parcours__titre { display: block; font-family: var(--police-serif); font-size: 30px; line-height: 1.1; }
.frise-parcours__texte { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--texte-secondaire); max-width: 560px; }
.citation-parcours { margin: 0; position: relative; max-width: 900px; padding-top: 56px; }
.citation-parcours::before {
  content: '“';
  position: absolute;
  top: -8px;
  left: -4px;
  font-family: var(--police-serif);
  font-size: 120px;
  line-height: 1;
  color: var(--or);
}
.citation-parcours__texte { margin: 0; font-family: var(--police-serif); font-style: italic; font-size: 34px; line-height: 1.25; }
.citation-parcours__signature { display: block; margin-top: 18px; font-family: var(--police-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-fonce); }
@media (max-width: 56.25rem) {
  .parcours__photo, .frise-parcours { grid-column: 1 / -1; }
  .parcours__photo { max-width: 420px; }
  .citation-parcours__texte { font-size: 28px; }
}
.carte-equipe__photo--haut img { object-position: center top; }

/* ===========================================================
   Page parrainage
   =========================================================== */
.hero__medaillon-colonne { grid-column: 9 / span 4; display: flex; align-items: center; justify-content: center; padding: 14px; }
.medaillon-anneau { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; }
.medaillon-anneau::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px dashed var(--or);
  opacity: 0.7;
}
.medaillon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #D9BC72, var(--or));
  color: var(--marine);
  transform: rotate(-6deg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.38);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 14%;
}
.medaillon__surtitre { font-family: var(--police-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.medaillon__montant { font-family: var(--police-serif); font-size: clamp(4.5rem, 9vw, 8rem); line-height: 0.95; letter-spacing: -0.02em; }
.medaillon__legende { font-size: 15px; line-height: 1.35; max-width: 220px; }
@media (max-width: 68.75rem) {
  .hero__medaillon-colonne { grid-column: span 12; padding: 24px 14px 0; }
  .medaillon-anneau { max-width: 340px; }
}

.cartes-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.carte-etape { border-radius: 24px; min-height: 300px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.carte-etape__numero { font-family: var(--police-serif); font-size: 64px; line-height: 0.9; }
.carte-etape__titre { font-family: var(--police-serif); font-size: 30px; line-height: 1.08; }
.carte-etape__texte { margin: 0; font-size: 15px; line-height: 1.5; }
.carte-etape--marine { background: var(--marine); color: var(--ivoire); }
.carte-etape--marine .carte-etape__numero { color: var(--or); }
.carte-etape--marine .carte-etape__texte { color: rgba(243,238,228,0.8); }
.carte-etape--blanche { background: var(--blanc); color: var(--marine); }
.carte-etape--blanche .carte-etape__numero { color: var(--or-fonce); }
.carte-etape--blanche .carte-etape__texte { color: var(--texte-secondaire); }
.carte-etape--or { background: var(--or); color: var(--marine); }
.carte-etape--or .carte-etape__texte { color: rgba(11,22,38,0.82); }
.carte-etape__pastille {
  margin-top: auto;
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--or);
  color: var(--marine);
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 64rem) { .cartes-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cartes-etapes { grid-template-columns: 1fr; } .carte-etape { min-height: 0; } }

.cartes-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.carte-question { background: var(--marine-secondaire); border: 1px solid rgba(205,175,96,0.25); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.carte-question__titre { font-family: var(--police-serif); font-size: 28px; line-height: 1.1; }
.carte-question__texte { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(243,238,228,0.8); }
@media (max-width: 56.25rem) { .cartes-questions { grid-template-columns: 1fr; } }

.recommander__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start; }
.recommander__intro { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 32px; }
.encart-prime { background: var(--sable); border-radius: 22px; padding: 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.encart-prime__montant { font-family: var(--police-serif); font-size: 44px; line-height: 1; }
.encart-prime__texte { font-size: 15px; line-height: 1.45; color: var(--texte-secondaire); }
.carte-recommandation { grid-column: 6 / span 7; background: var(--blanc); border-radius: 28px; padding: 40px; box-shadow: 0 30px 80px rgba(11,22,38,0.08); scroll-margin-top: 24px; }
.bloc-numerote { display: flex; flex-direction: column; gap: 22px; }
.bloc-numerote--separe { border-top: 1px solid var(--border-line); padding-top: 32px; }
.bloc-numerote__entete { display: flex; align-items: center; gap: 14px; }
.bloc-numerote__pastille { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--marine); color: var(--or); display: flex; align-items: center; justify-content: center; font-family: var(--police-serif); font-size: 20px; line-height: 1; }
.bloc-numerote__titre { font-family: var(--police-serif); font-size: 28px; line-height: 1.1; }
.carte-recommandation .formulaire-recherche { gap: 32px; }
@media (max-width: 56.25rem) {
  .recommander__intro { grid-column: 1 / -1; position: static; }
  .carte-recommandation { grid-column: 1 / -1; padding: 28px 22px; }
}

.carte-partage { background: var(--marine); color: var(--ivoire); border-radius: 32px; padding: 56px; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: center; }
.carte-partage__texte { grid-column: span 6; display: flex; flex-direction: column; gap: 20px; }
.carte-partage__actions { grid-column: 8 / span 4; display: flex; flex-direction: column; gap: 12px; }
.carte-partage .eyebrow { color: var(--or); }
.carte-partage .titre-2 em { color: var(--or); }
.carte-partage .section-entete__texte { color: rgba(243,238,228,0.8); }
.partage-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: rgba(243,238,228,0.05);
  border: 1px solid rgba(243,238,228,0.18);
  border-radius: 999px;
  color: var(--ivoire);
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.partage-action:hover { color: var(--ivoire); background: rgba(205,175,96,0.14); border-color: rgba(205,175,96,0.5); }
.partage-action svg { flex-shrink: 0; color: var(--or); }
.note-partage { margin: 20px 4px 0; font-size: 13px; line-height: 1.5; color: var(--gris); }
@media (max-width: 56.25rem) {
  .carte-partage { grid-template-columns: 1fr; padding: 36px 24px; border-radius: 28px; }
  .carte-partage__texte, .carte-partage__actions { grid-column: 1; }
}
.carte-partage .titre-2 { font-size: clamp(2rem, 3.4vw, 3rem); }

/* ===========================================================
   Icônes décoratives (pastilles de coin, pastilles rondes, etc.)
   =========================================================== */
.carte-methode, .carte-etape { position: relative; }
.icone-coin {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sable);
  color: var(--marine);
}
.carte-etape--marine .icone-coin { background: var(--or); color: var(--marine); }
.carte-etape--or .icone-coin { background: var(--marine); color: var(--or); }
.icone-ronde {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--or);
  color: var(--marine);
}
.etape-deroule__icone { color: var(--or-fonce); display: flex; }
.carte-secteur__pin { color: var(--or); display: flex; }
.icone-coin svg, .icone-ronde svg { width: 24px; height: 24px; }

/* ==========================================================================
   Composant de consentement des formulaires (assets/js/consent.js)
   Lisible sur fond clair et sur fond marine : tout repose sur currentColor.
   ========================================================================== */
.consentement { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.consentement__case {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-height: 44px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.consentement__case input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 44px;
  left: -10px;
  top: 0;
  margin: 0;
  cursor: pointer;
}
.consentement__coche {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 1.5px solid currentColor;
  border-radius: 7px;
  background: transparent;
  display: grid;
  place-items: center;
  opacity: 0.8;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
.consentement__coche::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--marine);
  border-bottom: 2.5px solid var(--marine);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.consentement__case input:checked + .consentement__coche {
  background: var(--or);
  border-color: var(--or);
  opacity: 1;
}
.consentement__case input:checked + .consentement__coche::after { opacity: 1; }
.consentement__case input:focus-visible + .consentement__coche {
  outline: 3px solid var(--or-fonce);
  outline-offset: 3px;
}
.formulaire--sombre .consentement__case input:focus-visible + .consentement__coche { outline-color: var(--or); }
.consentement__texte { flex: 1; }
.consentement__case--facultative .consentement__texte { opacity: 0.85; }
.consentement__note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.72;
}
.consentement__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.consentement__aide {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--or-fonce);
  font-weight: 500;
}
.consentement__aide[hidden] { display: none; }


/* Bouton d'envoi tant que la case 1 n'est pas cochée */
.bouton[aria-disabled="true"], .bouton--inactif {
  opacity: 0.4;
  filter: grayscale(0.7);
  cursor: not-allowed;
}
.bouton[aria-disabled="true"]:hover { opacity: 0.4; }
.bouton:disabled { opacity: 0.55; cursor: not-allowed; }

/* Mentions légales : plus de débordement sur mobile */
@media (max-width: 48rem) {
  .tableau-legal { padding: 4px 20px; }
  .tableau-legal__cle, .tableau-legal__valeur { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .mentions-sommaire { position: static; grid-column: 1 / -1; min-width: 0; }
}

/* Blocs en attente de contenu : masqués proprement (attribut hidden) */
.parcours__photo[hidden], .citation-parcours[hidden] { display: none; }
.parcours__grille:has(.parcours__photo[hidden]) .frise-parcours { grid-column: 1 / -1; max-width: 760px; }

/* Frise sur fond clair (page Estimation) : or foncé et texte sombre, contraste ≥ 4,5:1 */
.frise-histoire--claire .frise-histoire__date { color: var(--or-fonce); }
.frise-histoire--claire .frise-histoire__texte { color: var(--texte-secondaire); }

/* ==========================================================================
   Page Location
   ========================================================================== */
.badge-eyebrow--or { color: var(--or); }
.hero__texte-colonne--large { grid-column: span 9; }
@media (max-width: 56.25rem) { .hero__texte-colonne--large { grid-column: 1 / -1; } }

.points-location { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.point-location { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; background: var(--blanc); border-radius: 24px; border: 1px solid var(--border-line); }
.point-location p { margin: 0; font-size: 16px; line-height: 1.5; }
.point-location__icone { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--marine); color: var(--or); display: grid; place-items: center; }
@media (max-width: 56.25rem) { .points-location { grid-template-columns: 1fr; } }

.encart-sable { background: var(--sable); border: 1px solid var(--or-fonce); border-radius: 24px; padding: 24px 28px; }
.encart-sable p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--marine); }

.carte-formulaire--large { padding: 48px; }
@media (max-width: 30rem) { .carte-formulaire--large { padding: 28px 20px; } }
.bloc-numerote__intro { margin: -8px 0 0; font-size: 15px; color: var(--gris); }
.champ__aide { font-size: 13px; color: var(--gris); }

/* Choix en pilules (boutons radio / cases) : lisibles sur fond clair et sur fond marine */
.groupe-choix { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.groupe-choix legend { padding: 0; margin-bottom: 10px; }
.choix-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.choix { position: relative; display: inline-flex; cursor: pointer; }
.choix input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choix span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  border: 1.5px solid currentColor; border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1.2;
  opacity: 0.85; transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.choix input:checked + span { background: var(--or); border-color: var(--or); color: var(--marine); opacity: 1; font-weight: 600; }
.choix input:focus-visible + span { outline: 3px solid var(--or-fonce); outline-offset: 2px; }
.section--sombre .choix input:focus-visible + span { outline-color: var(--or); }
.choix--simple { margin-top: 4px; }
.choix--simple span { min-height: 44px; }

/* Section propriétaire */
.colonnes-location { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.carte-location { background: rgba(243,238,228,0.06); border: 1px solid rgba(243,238,228,0.14); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.carte-location__titre { font-family: var(--police-serif); font-size: 28px; line-height: 1.1; }
.carte-location--non { background: transparent; border-style: dashed; color: rgba(243,238,228,0.72); }
.liste-location { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.liste-location li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.liste-location svg { flex: 0 0 20px; margin-top: 2px; }
.liste-location--non svg { color: rgba(243,238,228,0.5); }
.phrase-location { margin: 0; font-family: var(--police-serif); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.25; max-width: 760px; color: var(--ivoire); }
@media (max-width: 56.25rem) { .colonnes-location { grid-template-columns: 1fr; } }

.formulaire-sombre-cadre { max-width: 880px; width: 100%; }
.formulaire--sombre label, .formulaire--sombre .groupe-champ__label { color: var(--ivoire); }
.formulaire--sombre .champ__aide { color: rgba(243,238,228,0.7); }
.formulaire--sombre .champ input, .formulaire--sombre .champ select, .formulaire--sombre .champ textarea { color: var(--marine); }
.formulaire--sombre .erreur-formulaire { color: #F2A98A; }
.formulaire--sombre .consentement__aide { color: var(--or); }
.confirmation-formulaire--sombre { color: var(--ivoire); font-family: var(--police-serif); font-size: 1.6rem; }
.info-formulaire { margin: 0; padding: 14px 18px; border-radius: 16px; background: rgba(205,175,96,0.14); border: 1px solid rgba(205,175,96,0.5); font-size: 15px; line-height: 1.5; }
.info-formulaire[hidden] { display: none; }

/* Encart discret vers la page Location (Acheter, Vendre) */
.section--encart-location { padding-block: 32px 56px; }
.encart-lien-location { margin: 0; padding-top: 28px; border-top: 1px solid var(--border-line); font-size: 16px; color: var(--texte-secondaire); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.encart-lien-location a { color: var(--or-fonce); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 4px; }

/* Mentions légales / confidentialité : 12 colonnes + gap de 48 px = 528 px minimum, d'où le débordement mobile */
@media (max-width: 64rem) {
  .mentions-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mentions-sommaire, .mentions-contenu { grid-column: auto; }
}

/* Eyebrow sur cartes marine : or clair (l'or foncé n'atteint que 3,3:1 sur fond sombre) */
.carte-bio .eyebrow, .carte-verification--sombre .eyebrow { color: var(--or); }
.carte-verification--marine { background: var(--marine); color: var(--ivoire); }
.carte-verification--marine .eyebrow { color: var(--or); }

/* Page Équipe : en mobile (une colonne) les cartes gardent la même hauteur, sans couper le texte */
@media (max-width: 40rem) { .cartes-equipe { grid-auto-rows: 1fr; } }