/* ==========================================================================
   Captain Mandat — feuille de style du site public
   Charte : bleu #0C2895, rouge #FE0000, encre #201E1D, Nunito / Nunito Sans,
   zéro border-radius, bordures 2px, pas d'ombres.
   ========================================================================== */

:root {
  --bleu: #0C2895;
  --bleu-900: #071A63;
  --bleu-100: #E4E8F7;
  --rouge: #FE0000;
  --rouge-700: #C90000;
  --rouge-900: #8F0000;
  --rouge-100: #FFE3E3;
  --encre: #201E1D;
  --gris: #6B6867;
  --fond: #F3F2F2;
  --blanc: #FFFFFF;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  font-family: 'Nunito Sans', sans-serif;
  color: var(--encre);
  margin: 0;
  background: var(--blanc);
  font-size: 16px;
}

a { color: var(--bleu); }
a:hover { color: var(--rouge); }
::selection { background: var(--bleu-100); }

img { max-width: 100%; }

h1, h2, h3, .font-titre {
  font-family: Nunito, sans-serif;
  letter-spacing: -0.02em;
}

/* Focus clavier : liseré 2px décalé (charte) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Éléments transverses
   -------------------------------------------------------------------------- */

.kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rouge);
  margin-bottom: 14px;
}

.etiquette {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris);
}

/* Boutons : label flush-left, angles droits */
.btn {
  display: inline-block;
  text-decoration: none;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  cursor: pointer;
  border: none;
  text-align: left;
}
.btn-rouge {
  background: var(--rouge);
  color: var(--blanc);
  padding: 16px 28px;
  font-size: 16px;
}
.btn-rouge:hover { background: var(--rouge-700); color: var(--blanc); }
.btn-rouge:active { background: var(--rouge-900); }
.btn-rouge.btn-md { padding: 15px 26px; font-size: 15px; }
.btn-rouge.btn-sm { padding: 14px 22px; font-size: 15px; }
.btn-bleu {
  background: var(--bleu);
  color: var(--blanc);
  padding: 15px 26px;
  font-size: 15px;
}
.btn-bleu:hover { background: var(--bleu-900); color: var(--blanc); }
.btn-contour {
  border: 2px solid var(--bleu);
  color: var(--bleu);
  background: transparent;
  padding: 13px 24px;
  font-size: 14px;
}
.btn-contour:hover { background: var(--bleu-100); color: var(--bleu); }

.lien-souligne {
  text-decoration: none;
  color: var(--bleu);
  font-weight: 700;
  font-size: 15px;
  border-bottom: 2px solid var(--bleu);
  padding-bottom: 2px;
}
.lien-souligne:hover { color: var(--rouge); border-bottom-color: var(--rouge); }

.lien-fleche {
  text-decoration: none;
  color: var(--bleu);
  font-weight: 700;
  font-size: 13px;
}
.lien-fleche:hover { color: var(--rouge); }

/* Emplacements photo (placeholders de la maquette).
   Si une vraie photo existe (assets/photos/<id>.jpg), elle recouvre le slot. */
.img-slot {
  position: absolute;
  inset: 0;
  background: var(--fond);
  border: 2px dashed var(--gris);
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris);
}
.img-slot img {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Bandeau + en-tête
   -------------------------------------------------------------------------- */

.bandeau {
  background: var(--bleu);
  color: var(--blanc);
  padding: 9px 24px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.bandeau svg { flex-shrink: 0; }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 48px;
  border-bottom: 2px solid var(--encre);
  background: var(--blanc);
  gap: 24px;
}
.site-header .logo { display: flex; text-decoration: none; }
.site-header .logo img { width: 74px; display: block; }

.nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}
.nav-links a { text-decoration: none; color: var(--encre); }
.nav-links a:hover { color: var(--bleu); }
.nav-links a[aria-current="page"] { color: var(--bleu); }
.nav-links .nav-cta {
  background: var(--rouge);
  color: var(--blanc);
  padding: 12px 22px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 14px;
}
.nav-links .nav-cta:hover { background: var(--rouge-700); color: var(--blanc); }

.burger {
  display: none;
  background: none;
  border: 2px solid var(--encre);
  padding: 8px 12px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: 72px 48px; border-bottom: 2px solid var(--encre); }
.section-md { padding: 64px 48px; border-bottom: 2px solid var(--encre); }
.section-sm { padding: 56px 48px; border-bottom: 2px solid var(--encre); }
.fond-gris { background: var(--fond); }
.fond-bleu { background: var(--bleu); color: var(--blanc); }

.h1 { font-weight: 900; font-size: 58px; line-height: 1.02; color: var(--bleu); margin: 0 0 22px; }
.h1-md { font-weight: 900; font-size: 50px; line-height: 1.05; color: var(--bleu); margin: 0 0 20px; }
.h1-page { font-weight: 900; font-size: 48px; line-height: 1.05; color: var(--bleu); margin: 0 0 14px; }
.h2 { font-weight: 900; font-size: 40px; color: var(--bleu); margin: 0 0 40px; }
.h2-md { font-weight: 900; font-size: 36px; color: var(--bleu); margin: 0 0 36px; }
.fond-bleu .h1, .fond-bleu .h1-md, .fond-bleu .h2, .fond-bleu .h2-md { color: var(--blanc); }

/* Héros deux colonnes (texte / photo) */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-bottom: 2px solid var(--encre);
}
.hero-texte {
  padding: 72px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-texte.pad-md { padding: 64px 48px; }
.hero-photo {
  position: relative;
  min-height: 460px;
  border-left: 2px solid var(--encre);
  min-width: 0;
}
.hero-photo.h-400 { min-height: 400px; }
.hero-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* Bandeau statistiques bleu */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bleu);
  color: var(--blanc);
  border-bottom: 2px solid var(--encre);
}
.stats > div { padding: 30px 48px; border-right: 2px solid rgba(255, 255, 255, 0.25); }
.stats > div:last-child { border-right: none; }
.stats .chiffre { font-family: Nunito, sans-serif; font-weight: 900; font-size: 40px; line-height: 1; }
.stats .legende { font-size: 13px; color: rgba(255, 255, 255, 0.75); margin-top: 8px; }

/* Grilles bordées (cases collées, filets 2px) */
.grille { display: grid; border: 2px solid var(--encre); background: var(--blanc); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.grille > * { border-right: 2px solid var(--encre); min-width: 0; }
.grille-3 > :nth-child(3n), .grille-4 > :nth-child(4n), .grille > :last-child { border-right: none; }

/* Grille cartes espacées */
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.carte { border: 2px solid var(--encre); display: flex; flex-direction: column; }

/* Étapes numérotées */
.etape { padding: 28px 26px; }
.etape .num { font-family: Nunito, sans-serif; font-weight: 900; font-size: 32px; color: var(--rouge); margin-bottom: 12px; }
.etape .titre { font-family: Nunito, sans-serif; font-weight: 800; font-size: 17px; color: var(--bleu); margin-bottom: 8px; }
.etape p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--gris); }

/* Étapes de vente (liste horodatée, page Transaction) */
.etape-vente {
  display: flex;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 2px solid var(--encre);
  align-items: flex-start;
}
.etape-vente .ev-num { font-family: Nunito, sans-serif; font-weight: 900; font-size: 28px; color: var(--rouge); width: 60px; flex-shrink: 0; }
.etape-vente .ev-corps { flex: 1; }
.etape-vente .ev-titre { font-family: Nunito, sans-serif; font-weight: 800; font-size: 19px; color: var(--bleu); margin-bottom: 6px; }
.etape-vente p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 620px; }
.etape-vente .ev-delai {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris);
  flex-shrink: 0;
  padding-top: 6px;
}

/* Listes à puce étoile */
.liste-etoiles { margin: 0 0 24px; padding: 0; list-style: none; font-size: 13.5px; line-height: 2; color: var(--gris); }

/* Lignes bordées (checklists) */
.ligne-borde {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 2px solid var(--encre);
}
.ligne-borde svg { flex-shrink: 0; }
.ligne-borde span { font-size: 14px; font-weight: 600; }

/* Section CTA de bas de page */
.cta-bande {
  padding: 56px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-bande h2 { font-weight: 900; font-size: 32px; color: var(--bleu); margin: 0 0 8px; }
.cta-bande p { margin: 0; font-size: 15px; color: var(--gris); }
.cta-bande.fond-bleu h2 { color: var(--blanc); }
.cta-bande.fond-bleu p { color: rgba(255, 255, 255, 0.75); }
.cta-bande .btn { flex-shrink: 0; }

/* Badges rubrique */
.badge-bleu { background: var(--bleu-100); color: var(--bleu); padding: 5px 12px; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.badge-rouge { background: var(--rouge-100); color: var(--rouge-700); padding: 5px 12px; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris);
}
.champ input, .champ textarea {
  border: 2px solid var(--encre);
  padding: 12px 14px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  outline: none;
  background: var(--blanc);
  color: var(--encre);
}
.champ input:focus, .champ textarea:focus { border-color: var(--bleu); outline: none; }
.champ textarea { resize: vertical; }

.btn-envoyer {
  background: var(--rouge);
  color: var(--blanc);
  border: none;
  padding: 15px 26px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  align-self: flex-start;
  text-align: left;
}
.btn-envoyer:hover { background: var(--rouge-700); }
.btn-envoyer:active { background: var(--rouge-900); }

.confirmation {
  border: 2px solid var(--bleu);
  background: var(--bleu-100);
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bleu);
  font-weight: 600;
}
.confirmation[hidden] { display: none; }

/* Sélecteur segmenté (objet de la demande) */
.segmente { display: flex; gap: 0; border: 2px solid var(--encre); }
.segmente button {
  flex: 1;
  border: none;
  padding: 11px 8px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  background: var(--blanc);
  color: var(--encre);
}
.segmente button[aria-pressed="true"] { background: var(--bleu); color: var(--blanc); }

/* Boutons de filtre (annonces) */
.filtres-groupe { display: flex; gap: 12px; align-items: center; }
.filtres-libelle { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--gris); }
.filtres { display: flex; border: 2px solid var(--encre); }
.filtres button {
  border: none;
  padding: 9px 14px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  background: var(--blanc);
  color: var(--encre);
}
.filtres button[aria-pressed="true"] { background: var(--bleu); color: var(--blanc); }

/* --------------------------------------------------------------------------
   Annonces (À louer / À vendre)
   -------------------------------------------------------------------------- */

.annonce-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  min-width: 0;
  border-bottom: 2px solid var(--encre);
}
.annonce-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bleu);
  color: var(--blanc);
  padding: 6px 12px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 12px;
  pointer-events: none;
}
.annonce-badge.vente { background: var(--rouge); }
.annonce-corps { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; }
.annonce-prix { font-family: Nunito, sans-serif; font-weight: 900; font-size: 20px; color: var(--rouge); }
.annonce-titre {
  text-decoration: none;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--bleu);
  margin: 4px 0 6px;
  display: block;
}
.annonce-titre:hover { color: var(--rouge); }
.annonce-corps p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--gris); }
.annonce-pied {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--encre);
  padding-top: 12px;
}

.barre-filtres {
  display: flex;
  gap: 36px;
  align-items: center;
  padding: 18px 48px;
  border-bottom: 2px solid var(--encre);
  background: var(--fond);
  flex-wrap: wrap;
}
.barre-filtres .compteur { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--bleu); }

.carte-legende {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 48px;
  border-bottom: 2px solid var(--encre);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bleu);
}

/* --------------------------------------------------------------------------
   Fiche d'un bien
   -------------------------------------------------------------------------- */

.fil-ariane {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 48px;
  border-bottom: 2px solid var(--encre);
  background: var(--fond);
}
.fil-ariane a { text-decoration: none; color: var(--bleu); font-size: 12px; font-weight: 700; }
.fil-ariane a:hover { color: var(--rouge); }

.galerie {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  border-bottom: 2px solid var(--encre);
  height: 440px;
}
.galerie > div { position: relative; min-width: 0; min-height: 0; }
.galerie > div:first-child { grid-row: 1 / 3; border-right: 2px solid var(--encre); }
.galerie > div:nth-child(2) { border-bottom: 2px solid var(--encre); }

.fiche { display: grid; grid-template-columns: 1.5fr 1fr; border-bottom: 2px solid var(--encre); }
.fiche-principale { padding: 48px; border-right: 2px solid var(--encre); min-width: 0; }
.fiche-laterale { padding: 48px; min-width: 0; }
.fiche h1 { font-weight: 900; font-size: 38px; line-height: 1.05; color: var(--bleu); margin: 0 0 6px; }
.fiche .adresse { font-size: 15px; color: var(--gris); margin-bottom: 14px; }
.fiche .prix { font-family: Nunito, sans-serif; font-weight: 900; font-size: 34px; color: var(--rouge); margin-bottom: 28px; }
.fiche h2 { font-weight: 800; font-size: 20px; color: var(--bleu); margin: 0 0 16px; }
.badge-plein {
  color: var(--blanc);
  padding: 5px 12px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.caract-grille { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--encre); margin-bottom: 32px; }
.caract-ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 2px solid var(--encre);
  margin-right: 24px;
}
.caract-label { font-size: 13px; color: var(--gris); font-weight: 600; }
.caract-valeur { font-size: 13px; font-weight: 700; text-align: right; }

.dpe-boites { display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.dpe-boite { border: 2px solid var(--encre); padding: 18px 24px; display: flex; align-items: center; gap: 16px; }
.dpe-boite .lettre { font-family: Nunito, sans-serif; font-weight: 900; font-size: 34px; color: var(--bleu); }
.dpe-boite .detail { font-size: 12px; line-height: 1.5; color: var(--gris); }

.docs-liste { display: flex; flex-direction: column; border-top: 2px solid var(--encre); max-width: 560px; }
.doc-ligne { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 2px solid var(--encre); }
.doc-nom { font-size: 14px; font-weight: 600; flex: 1; }

.encart { border: 2px solid var(--encre); padding: 28px; margin-bottom: 24px; }
.encart .btn { display: block; margin-bottom: 12px; }
.encart .btn:last-child { margin-bottom: 0; }

.copro-bande { padding: 40px 48px; border-bottom: 2px solid var(--encre); background: var(--fond); }
.copro-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.copro-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris);
  margin-bottom: 6px;
}
.copro-valeur { font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; color: var(--bleu); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--blanc);
  border-top: 2px solid var(--encre);
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer .marque {
  font-family: Nunito, sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: var(--bleu);
}
.site-footer .marque span { color: var(--rouge); }
.site-footer .sous-marque { font-size: 12.5px; color: var(--gris); margin-top: 8px; line-height: 1.6; }
.footer-colonnes { display: flex; gap: 40px; font-size: 13px; font-weight: 600; }
.footer-colonnes > div { display: flex; flex-direction: column; gap: 8px; }
.footer-colonnes a { text-decoration: none; color: var(--encre); }
.footer-colonnes a:hover { color: var(--bleu); }
.footer-colonnes a.discret { color: var(--gris); }
.footer-bas {
  width: 100%;
  border-top: 2px solid var(--encre);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   Assistant « Le Second »
   -------------------------------------------------------------------------- */

.second-bouton {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bleu);
  color: var(--blanc);
  border: 2px solid var(--encre);
  padding: 13px 20px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  z-index: 1000;
}
.second-bouton:hover { background: var(--bleu-900); }

.second-panneau {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 390px;
  max-width: calc(100vw - 48px);
  height: 540px;
  max-height: calc(100vh - 48px);
  background: var(--blanc);
  border: 2px solid var(--encre);
  display: flex;
  flex-direction: column;
  z-index: 1000;
}
.second-panneau[hidden] { display: none; }
.second-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--bleu);
  color: var(--blanc);
  border-bottom: 2px solid var(--encre);
}
.second-entete .titre-bloc { display: flex; align-items: center; gap: 10px; }
.second-entete .nom { font-family: Nunito, sans-serif; font-weight: 800; font-size: 14px; }
.second-entete .sous-titre { font-size: 10.5px; color: rgba(255, 255, 255, 0.7); }
.second-fermer { background: none; border: none; color: var(--blanc); font-size: 20px; cursor: pointer; line-height: 1; padding: 4px; }
.second-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.second-msg { padding: 10px 14px; font-size: 13px; line-height: 1.55; max-width: 85%; white-space: pre-wrap; }
.second-msg.user { align-self: flex-end; background: var(--bleu); color: var(--blanc); }
.second-msg.assistant { align-self: flex-start; background: var(--fond); color: var(--encre); }
.second-msg.attente { align-self: flex-start; background: var(--fond); color: var(--gris); }
.second-suggestions { padding: 0 16px 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.second-suggestions button {
  border: 2px solid var(--bleu);
  background: var(--blanc);
  color: var(--bleu);
  padding: 6px 10px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  text-align: left;
}
.second-suggestions button:hover { background: var(--bleu-100); }
.second-saisie { display: flex; border-top: 2px solid var(--encre); }
.second-saisie input {
  flex: 1;
  border: none;
  padding: 14px 16px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13.5px;
  outline: none;
  min-width: 0;
}
.second-saisie button {
  background: var(--rouge);
  color: var(--blanc);
  border: none;
  padding: 0 20px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.second-saisie button:hover { background: var(--rouge-700); }

/* --------------------------------------------------------------------------
   Bandeau cookies
   -------------------------------------------------------------------------- */

.cookies-bandeau {
  position: fixed;
  bottom: 24px;
  left: 24px;
  max-width: 360px;
  background: var(--blanc);
  border: 2px solid var(--encre);
  padding: 16px 18px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cookies-bandeau p { margin: 0; font-size: 13px; line-height: 1.55; }
.cookies-bandeau a { color: var(--bleu); font-weight: 700; }
.cookies-bandeau button {
  background: var(--bleu);
  color: var(--blanc);
  border: none;
  padding: 10px 18px;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  align-self: flex-start;
}
.cookies-bandeau button:hover { background: var(--bleu-900); }
@media (max-width: 900px) {
  .cookies-bandeau { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-links.ouvert {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blanc);
    border-bottom: 2px solid var(--encre);
    z-index: 900;
  }
  .nav-links.ouvert a { padding: 14px 24px; border-top: 2px solid var(--encre); }
  .nav-links.ouvert .nav-cta { padding: 14px 24px; }
  .burger { display: block; }
  .site-header { position: relative; }
}

@media (max-width: 900px) {
  .section, .section-md, .section-sm, .cta-bande { padding-left: 24px; padding-right: 24px; }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .site-header, .site-footer { padding-left: 24px; padding-right: 24px; }
  .hero { grid-template-columns: 1fr; }
  .hero-texte, .hero-texte.pad-md { padding: 48px 24px; }
  .hero-photo { border-left: none; border-top: 2px solid var(--encre); min-height: 300px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div { padding: 24px; border-bottom: 2px solid rgba(255, 255, 255, 0.25); }
  .stats > div:nth-child(2n) { border-right: none; }
  .grille-3, .grille-4 { grid-template-columns: 1fr; }
  .grille > * { border-right: none !important; border-bottom: 2px solid var(--encre); }
  .grille > :last-child { border-bottom: none; }
  .cartes { grid-template-columns: 1fr; }
  .h1 { font-size: 40px; }
  .h1-md, .h1-page { font-size: 36px; }
  .h2 { font-size: 30px; }
  .h2-md { font-size: 28px; }
  .split-2, .split-2-inverse { grid-template-columns: 1fr !important; }
  .split-2 > *, .split-2-inverse > * { border-left: none !important; border-right: none !important; }
  .split-2 > :first-child, .split-2-inverse > :first-child { border-bottom: 2px solid var(--encre); }
  .barre-filtres, .carte-legende, .fil-ariane, .copro-bande { padding-left: 24px; padding-right: 24px; }
  .galerie { grid-template-columns: 1fr; grid-template-rows: 2fr 1fr 1fr; height: 480px; }
  .galerie > div:first-child { grid-row: auto; border-right: none; border-bottom: 2px solid var(--encre); }
  .fiche { grid-template-columns: 1fr; }
  .fiche-principale { border-right: none; border-bottom: 2px solid var(--encre); padding: 32px 24px; }
  .fiche-laterale { padding: 32px 24px; }
  .caract-grille { grid-template-columns: 1fr; }
  .caract-ligne { margin-right: 0; }
  .copro-grille { grid-template-columns: 1fr 1fr; }
  .footer-colonnes { flex-direction: column; gap: 24px; }
  .formules { grid-template-columns: 1fr !important; }
  .stats[style] { grid-template-columns: 1fr 1fr !important; }
  .etape-vente { flex-wrap: wrap; gap: 16px; }
}

/* .split-2 : sections deux colonnes séparées d'un filet */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--encre); }
.split-2 > .col-droite-bordee { border-left: 2px solid var(--encre); }
.split-2 > .col-gauche-bordee { border-right: 2px solid var(--encre); }