/* ============================================================
   Minerva Immobilier — feuille de style principale
   Charte graphique rouge & blanc (cf. BRIEF-COMMUN.md §3)

   Direction artistique 2026-09-12 (retour client, concept validé) : la
   palette reste construite autour du rouge signature, mais ancrée dans un
   anthracite plus "pierre du Jura" (--color-anthracite, --color-light-grey,
   --color-border retouchés vers des tons chauds/pierre plutôt que gris
   neutre) et une nouvelle touche bronze (--color-bronze) en écho à
   l'architecture Belle Époque de Bucarest — utilisée en accent décoratif
   (motifs, icônes secondaires), jamais sur les boutons/CTA pour ne pas
   diluer le rouge. Titres (h1-h4) passés à une serif plus institutionnelle
   (--font-display, Spectral) ; --font-heading (Montserrat) est conservée
   telle quelle pour toute la "UI" (boutons, nav, badges, libellés) — voir
   includes/header.php pour l'import Google Fonts correspondant.
   ============================================================ */

:root {
  --color-red: #C8102E;
  --color-red-hover: #A50D25;
  --color-white: #FFFFFF;
  --color-anthracite: #2A2E35;
  --color-light-grey: #F3EFE7;
  --color-border: #E4DFD3;
  --color-bronze: #A67C3D;
  --color-bronze-hover: #8C6A2E;
  --font-heading: 'Montserrat', Arial, Helvetica, sans-serif;
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body: 'Open Sans', Arial, Helvetica, sans-serif;
  /* 2026-09-13 (DA) : mono technique du concept validé, réservée au bandeau
     "Minerva Immobilier en chiffres" (libellés en petites majuscules). */
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --radius: 8px;
  --shadow: 0 2px 10px rgba(43, 43, 43, 0.08);
  --shadow-hover: 0 6px 18px rgba(43, 43, 43, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-anthracite);
  background: var(--color-white);
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.6em;
  color: var(--color-anthracite);
}
h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }
a { color: var(--color-red); text-decoration: none; }
a:hover { color: var(--color-red-hover); text-decoration: underline; }
ul { padding-left: 1.2em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-red);
  color: var(--color-white); padding: 10px 16px; z-index: 2000;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 26px;
  border-radius: 7px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn-cta {
  background: var(--color-red);
  color: var(--color-white);
  border-color: var(--color-red);
}
.btn-cta:hover { background: var(--color-red-hover); border-color: var(--color-red-hover); color: var(--color-white); text-decoration: none; }
.btn-outline {
  background: transparent;
  color: var(--color-red);
  border-color: var(--color-red);
}
.btn-outline:hover { background: var(--color-red); color: var(--color-white); text-decoration: none; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- Layout / sections ---------- */
.section { padding: 56px 20px; max-width: 1180px; margin: 0 auto; }
.section-narrow { max-width: 980px; }
.section-grey { background: var(--color-light-grey); padding: 56px 20px; }
.section-grey > .section-inner { max-width: 1180px; margin: 0 auto; }
/* Retour client 2026-09-17 : "Biens à la une" (et tout .section-subtitle,
   classe partagée par plusieurs pages) manquait de lisibilité/visibilité —
   #555 sur le fond crème (--color-light-grey) passait le seuil RGPD/WCAG
   AA mais restait visuellement "délavé". Gris plus soutenu + taille/
   interligne légèrement augmentés pour un texte d'intro net et confortable. */
.section-subtitle { color: #3F3B34; font-size: 1.05rem; line-height: 1.65; max-width: 620px; }
.section-cta-center { text-align: center; margin-top: 32px; }

/* Accent bronze sous le titre de section, pour lui donner plus de présence
   visuelle (cf. remarque du 2026-09-17 sur "Biens à la une") — reprend la
   couleur bronze déjà utilisée en accent décoratif ailleurs sur le site
   (jamais le rouge, réservé aux CTA/boutons, cf. charte en tête de fichier).
   Scopé à la section "Biens à la une" : les autres titres de section du
   site n'ont pas été signalés et gardent leur style actuel. */
#biens-a-la-une h2 {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--color-bronze-hover);
  margin-bottom: 20px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}
.header-inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo img { display: block; height: 44px; width: auto; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle-bar { width: 26px; height: 3px; background: var(--color-anthracite); border-radius: 2px; }

.main-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.main-nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.main-nav ul a {
  color: var(--color-anthracite); font-family: var(--font-heading); font-weight: 600;
  font-size: 0.95rem; padding: 6px 2px; border-bottom: 2px solid transparent;
}
.main-nav ul a:hover, .main-nav ul a[aria-current="page"] {
  color: var(--color-red); border-bottom-color: var(--color-red); text-decoration: none;
}

.nav-lang { display: flex; gap: 4px; }
.nav-lang a {
  font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700;
  color: var(--color-anthracite); padding: 4px 7px; border-radius: 4px; border: 1px solid var(--color-border);
}
.nav-lang a.active, .nav-lang a:hover {
  background: var(--color-red); color: var(--color-white); border-color: var(--color-red); text-decoration: none;
}
.nav-cta { padding: 9px 20px; font-size: 0.85rem; }

/* ---------- Hero (page d'accueil) ---------- */
/* Motif de fond 2026-09-12 (DA) : silhouette discrète d'une crête
   jurassienne, en écho au Jura suisse — pur CSS (SVG en data-URI), aucune
   modification du contenu CMS de la page d'accueil nécessaire.
   Correctif 2026-09-13 (retour client, motif invisible à l'écran) : le ton
   d'origine (#DED0AE) a été remplacé par l'anthracite "Jura" en très faible
   opacité — sans effet, le motif restait invisible.
   Correctif 2026-09-13 (suite, "je ne vois toujours pas les crêtes") : la
   vraie cause n'était pas la couleur/opacité mais L'ORDRE DES CALQUES.
   `background` empile les calques listés avec le PREMIER au-dessus des
   suivants — ici le dégradé (opaque) était déclaré en premier, donc peint
   PAR-DESSUS le SVG de la crête, qui était bien présent mais totalement
   masqué en dessous, quels que soient sa couleur ou son opacité (vérifié en
   isolant chaque calque). Le SVG doit être listé EN PREMIER (au-dessus),
   le dégradé en second (comme fond, en dessous). Profil de crête aussi
   adouci (moins de relief, hauteur fixe en px plutôt que ratio du viewBox)
   pour rester une bande basse discrète qui ne chevauche jamais le texte ni
   les boutons du hero, à toutes les largeurs. */
/* Retour client 2026-09-17 : photo de fond sur le hero (l'usine, sans
   personnel — manufacture-usine.jpg, seule photo du lot "manufacture-*"
   sans personne dessus ; manufacture-atelier-1/2 et manufacture-equipe
   montrent des employés, écartées pour cette raison). Voile anthracite
   semi-transparent posé sur la photo pour garantir un contraste suffisant
   au texte blanc, quelle que soit la zone de l'image (ciel clair, façade
   claire, etc.).
   Retour client 2026-09-17 (suite) : "améliore la lisibilité du texte" — le
   voile d'origine (0.8/0.68) laissait passer trop de lumière de la photo
   par endroits (ciel, toiture claire). Assombri et rendu plus uniforme
   (0.86/0.8, écart réduit entre les deux extrémités du dégradé) + une
   ombre portée sur le titre et le sous-titre pour détacher nettement les
   lettres du fond quelle que soit la zone de la photo derrière elles.
   Retour client 2026-09-17 (suite, "on a perdu les crêtes jurassiennes") :
   le motif avait été retiré en passant à la photo — remis, mais recoloré,
   car ses teintes d'origine (crête anthracite sur fond clair) disparaissaient
   totalement sur une photo sombre. La crête est maintenant un liseré clair
   (crème + contour bronze) qui se détache du voile anthracite, plutôt qu'une
   silhouette sombre qui s'y fondait. Toujours 3 calques du plus haut au plus
   bas dans l'ordre où `background` les empile : (1) SVG crête, (2) voile
   dégradé, (3) photo — les 3 propriétés background-* ci-dessous doivent
   donc toujours compter 3 valeurs, y compris dans la media query mobile
   plus bas (piège déjà rencontré : un nombre de valeurs différent entre
   les calques et une des propriétés associe les tailles au mauvais calque). */
.hero {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L140,95 L260,112 L400,85 L540,108 L680,78 L800,105 L940,88 L1080,110 L1200,90 L1320,108 L1440,95 L1440,160 L0,160 Z' fill='%23A67C3D' fill-opacity='0.35'/%3E%3Cpath d='M0,135 L120,108 L220,124 L340,98 L460,120 L580,90 L680,115 L780,100 L900,128 L1000,103 L1120,130 L1220,106 L1320,124 L1440,112 L1440,160 L0,160 Z' fill='%23F3EFE7' fill-opacity='0.92'/%3E%3Cpath d='M0,135 L120,108 L220,124 L340,98 L460,120 L580,90 L680,115 L780,100 L900,128 L1000,103 L1120,130 L1220,106 L1320,124 L1440,112' fill='none' stroke='%23A67C3D' stroke-opacity='0.95' stroke-width='2.5'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(42, 46, 53, 0.86) 0%, rgba(42, 46, 53, 0.8) 100%),
    url("../img/manufacture-usine.jpg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom center, center, center;
  background-size: 100% 190px, cover, cover;
  padding: 96px 20px;
}
.hero-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.hero h1 { color: var(--color-white); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.hero-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.95); max-width: 620px; margin: 0 auto 1.6em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* Le bouton contour reprenait le rouge de marque, illisible sur une photo
   sombre juste à côté du bouton plein (déjà rouge) — passé en blanc pour se
   détacher nettement des deux fonds possibles derrière lui (photo + voile). */
.hero .btn-outline { border-color: rgba(255, 255, 255, 0.75); color: var(--color-white); }
.hero .btn-outline:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--color-white); color: var(--color-white); }

.home-why { padding: 56px 20px; }
.home-why-inner {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px;
}
.why-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
}
.why-card h2 { font-size: 1.15rem; color: var(--color-red); }

/* ---------- Bandeau "Minerva Immobilier en chiffres" (2026-09-13, DA) ----------
   Concept de direction artistique validé par le client (planche
   "Indicateurs B2B") : bandeau sombre anthracite. Retour client du
   2026-09-13 : affiché en bas de CHAQUE page (includes/footer.php, juste
   avant <footer>), collé sans espace au-dessus du footer — d'où la marge
   du bas à 0. Contenu (valeurs/libellés) dans lang/*.php (clés stats_*),
   pas en base : ce n'est pas un contenu éditable par page. */
.stats-band {
  background: var(--color-anthracite);
  color: var(--color-light-grey);
  padding: 48px 20px;
  margin: 40px 0 0;
  /* Retour client 2026-09-13 : le bandeau et le footer partagent la même
     couleur anthracite et se touchent sans espace (voulu, cf. commentaire
     ci-dessus) — sans repère, les deux se confondent en un seul bloc. Un
     fin liseré bronze au raccord donne une frontière visible tout en
     gardant les deux blocs collés l'un à l'autre. */
  border-bottom: 1px solid rgba(166, 124, 61, 0.4);
}
.stats-band-inner { max-width: 1180px; margin: 0 auto; }
.stats-band-eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-bronze); display: block; margin-bottom: 28px;
}
.stats-band-grid {
  /* Correctif 2026-10-19 (retour client : "le texte ne doit pas être collé à droite, pareil
     pour le bas de page") : avec minmax(180px, 1fr), chaque colonne s'étirait pour occuper
     tout l'espace du conteneur (max-width 1180px, voir .stats-band-inner) — sur un écran large,
     les 4 chiffres se retrouvaient espacés sur toute cette largeur, le dernier ("1 — Interlocuteur
     unique") finissant isolé loin à droite plutôt que groupé avec les autres. Remplacé par
     max-content (colonnes à leur largeur naturelle) + justify-content: start : les 4 chiffres
     restent groupés à gauche, quelle que soit la largeur de l'écran. Ce bandeau est partagé par
     la page d'accueil (.home-trust-band) ET par le bas de toutes les autres pages
     (.stats-band juste au-dessus du footer, voir includes/footer.php) : un seul correctif ici
     s'applique aux deux. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  justify-content: start; gap: 40px;
}
.stats-band-item {
  display: flex; flex-direction: column; gap: 8px;
  padding-left: 24px; border-left: 1px solid rgba(243, 239, 231, 0.16);
}
.stats-band-item:first-child { border-left: none; padding-left: 0; }
/* Retour client 2026-09-17 : après le retour de la crête jurassienne
   (recolorée en crème #F3EFE7 + liseré bronze), le client trouve les
   chiffres du bandeau trop "blancs" en comparaison — var(--color-light-grey)
   (#F3EFE7) est techniquement déjà un blanc cassé chaud, mais à cette
   taille/graisse il se lit comme du blanc pur à côté du dégradé sombre.
   Passé à un beige plus affirmé (#DED0AE — le tout premier ton essayé pour
   la crête elle-même le 2026-09-12, avant qu'il ne soit remplacé faute de
   contraste sur un fond clair ; il retrouve ici tout son sens sur fond
   sombre) pour faire écho à la crête. Contraste vérifié ~8.9:1 sur
   l'anthracite du bandeau (AAA). Classe partagée avec le bandeau du pied de
   page (.stats-band, cf. plus haut) : le changement s'applique donc aux
   deux, ce qui garde les deux bandeaux cohérents entre eux comme prévu à
   l'origine ("réutilise TEL QUEL"). */
.stats-band-value {
  font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1;
  color: #DED0AE;
}
.stats-band-value.is-accent { color: var(--color-red); }
.stats-band-label { font-size: 0.85rem; line-height: 1.5; color: #B7B2A2; }
@media (max-width: 700px) {
  .stats-band-item { border-left: none; padding-left: 0; }
}

/* Retour client 2026-09-15 : "en blanc !" — le fond clair (bronze très
   pâle) introduit le 2026-09-13 rendait un texte blanc illisible. Le
   bandeau "chiffres" de l'accueil repasse donc en fond anthracite sombre,
   identique à celui du pied de page (voir .stats-band ci-dessus), pour
   que les chiffres et libellés s'affichent en blanc/clair — cohérent avec
   le pied de page. Réutilise TEL QUEL le contenu de la page CMS
   'stats-band' (même source éditable côté admin que le bandeau de pied de
   page) : plus aucune couleur à surcharger ici, les règles de base de
   .stats-band-eyebrow/-item/-value/-label (pensées pour un fond sombre)
   s'appliquent désormais telles quelles. */
/* Retour client 2026-09-17 : le hero + le bandeau "chiffres" doivent
   occuper ensemble 100% de la hauteur d'écran (premier écran = ces deux
   blocs, "Biens à la une" démarre juste après, sans texte tronqué à
   mi-hauteur au chargement). --header-h est posée en JS (juste après le
   header dans includes/header.php, recalculée au resize dans main.js) car
   la hauteur du header sticky n'est pas fixe (elle grandit temporairement
   entre ~640 et ~1024px de large, tant que la nav ne tient plus sur une
   ligne mais ne bascule pas encore en menu burger). 100vh reste le repli
   tant que le custom property n'est pas encore posée ; 100dvh (quand
   disponible) évite en plus le double calcul de la barre d'adresse mobile.
   Le hero s'étire pour absorber l'espace restant (flex: 1) et centre son
   contenu verticalement s'il y a de la place en plus ; le bandeau chiffres
   garde sa hauteur naturelle (flex: 0 0 auto). */
.home-fold {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: calc(100vh - var(--header-h, 0px));
  min-height: calc(100dvh - var(--header-h, 0px));
}
.home-fold .hero {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.home-fold .home-trust-band {
  flex: 0 0 auto;
}

/* Retour client 2026-09-17 : "je pensais pas au chiffre mais au bandeau
   lui-même" — après le retour de la crête (crème + bronze), le client veut
   le FOND du bandeau "chiffres" de l'accueil en beige, pas seulement les
   chiffres. Portée confirmée : accueil uniquement, le bandeau du pied de
   page (.stats-band, sur toutes les pages) reste sombre tel quel. D'où les
   surcharges ".home-trust-band .stats-band-*" ci-dessous : les classes
   .stats-band-* restent "pensées pour un fond sombre" par défaut (footer),
   .home-trust-band les repasse en tons foncés adaptés à un fond clair. */
.home-trust-band {
  background: var(--color-light-grey);
  padding: 44px 20px;
  border-top: 1px solid rgba(166, 124, 61, 0.5);
}
.home-trust-band .stats-band-eyebrow { color: var(--color-bronze-hover); }
.home-trust-band .stats-band-item { border-left-color: var(--color-border); }
.home-trust-band .stats-band-value { color: var(--color-anthracite); }
.home-trust-band .stats-band-value.is-accent { color: var(--color-red); }
.home-trust-band .stats-band-label { color: #3F3B34; }
@media (max-width: 700px) {
  .home-trust-band .stats-band-item { border-left: none; padding-left: 0; }
}

/* Retour client 2026-09-15 : transition "trop brute" entre le bandeau
   chiffres et "Biens à la une" (fond gris clair, .section-grey) juste en
   dessous. Mise à jour 2026-09-17 : les deux fonds sont désormais le même
   beige (.home-trust-band ci-dessus) — le dégradé anthracite → gris clair
   d'origine aurait fait apparaître une bande sombre incongrue entre deux
   sections désormais claires. Remplacé par un simple liseré, qui marque la
   séparation sans rupture de couleur. */
.home-trust-fade {
  height: 1px;
  background: rgba(166, 124, 61, 0.35);
}
@media (max-width: 700px) {
  .home-trust-fade { height: 40px; }
}

/* Retour client 2026-09-16 : CTA "Nous contacter" sur l'accueil, entre le
   bandeau chiffres et "Biens à la une" — carte blanche sur fond de page
   (le bandeau chiffres est déjà sombre juste au-dessus, "Biens à la une"
   est en section-grey juste en dessous : une carte blanche tranche
   proprement entre les deux sans ajouter une troisième teinte de fond). */
.home-cta { padding: 48px 20px; }
.home-cta-box {
  max-width: 1180px; margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-red);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.home-cta-text h2 { margin-bottom: 6px; }
.home-cta-text p { color: #555; margin: 0; max-width: 560px; }
.home-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 700px) {
  .home-cta { padding: 36px 16px; }
  .home-cta-box { flex-direction: column; text-align: center; padding: 28px 24px; }
  .home-cta-text p { max-width: none; }
  .home-cta-actions { justify-content: center; width: 100%; }
}

/* ---------- Listing grid & cards ---------- */
.listing-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 26px; margin-top: 28px;
}
.listing-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: box-shadow .15s ease, transform .15s ease; display: flex; flex-direction: column;
}
.listing-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.listing-card-media { position: relative; display: block; }
.listing-card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.listing-badge {
  position: absolute; top: 12px; left: 12px; background: var(--color-red); color: var(--color-white);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.72rem; text-transform: uppercase;
  padding: 5px 10px; border-radius: 4px; letter-spacing: 0.03em;
}
.listing-badge-location { background: var(--color-anthracite); }
.listing-status-flag {
  position: absolute; top: 12px; right: 12px; background: var(--color-white); color: var(--color-anthracite);
  font-size: 0.72rem; font-weight: 700; padding: 5px 10px; border-radius: 4px; border: 1px solid var(--color-border);
}
/* 2026-09-26 : la pastille de statut se colore désormais aussi pour "loué"
   et "en projet" (jusqu'ici réservée à "sous offre"), avec les mêmes teintes
   que .listing-status-pill sur la fiche détail, pour rester cohérent. */
.listing-status-flag-loue { background: #F2F2F2; color: #666; border-color: #E4E4E4; }
.listing-status-flag-en_projet { background: #F5EDE0; color: #8C6A2E; border-color: #E9DCC3; }
/* Petit drapeau pays (CH/RO), indépendant du jeu de couleur ci-dessus qui
   suit désormais le statut du bien (retour client 2026-09-26 : "ne plus
   faire de jeu de couleur en fonction du pays"). */
.listing-country-flag {
  position: absolute; bottom: 12px; left: 12px; width: 26px; height: 26px; border-radius: 4px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.6);
}
.listing-country-flag svg { display: block; width: 100%; height: 100%; }
.listing-country-flag-inline {
  position: static; display: inline-block; vertical-align: middle; width: 22px; height: 22px;
  box-shadow: none; border: 1px solid var(--color-border);
}
.listing-card-body { padding: 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.listing-card-body h2, .listing-card-body h3 { font-size: 1.05rem; margin-bottom: 2px; }
.listing-card-body h2 a, .listing-card-body h3 a { color: var(--color-anthracite); }
.listing-card-loc { color: #666; font-size: 0.9rem; margin-bottom: 2px; }
/* Surface mise en avant à la place du prix (jamais affiché publiquement, cf. retour client 2026-09-11). */
.listing-card-surface {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 700; color: var(--color-anthracite); font-size: 1.1rem; margin-bottom: 12px;
}
/* Retour client 2026-09-17 : icône ajoutée pour repérer le chiffre de
   surface au premier coup d'oeil dans la carte (idée soumise en plus des 4
   pistes retenues pour "Biens à la une"). */
.listing-card-surface-icon { color: var(--color-bronze-hover); flex-shrink: 0; }
.listing-card-body .btn { margin-top: auto; align-self: flex-start; }

/* Retour client 2026-09-17 : améliorations pour "Biens à la une"
   (page d'accueil uniquement — le catalogue complet sur templates/biens.php
   réutilise .listing-card sans ces surcharges, il garde son rendu actuel).
   (a) liseré de couleur en haut de chaque carte ; (b) photo en format plus
   panoramique (16/10 au lieu de 4/3) et effet de survol plus marqué, pour un
   rendu plus éditorial sur cette vitrine.
   Retour client 2026-09-26 : ce liseré suivait le PAYS du bien — il suit
   désormais son STATUT ("adapter le jeu de couleur pour indiquer si loué ou
   pas loué, ne plus faire de jeu de couleur en fonction du pays"), avec les
   mêmes teintes que le placeholder (includes/functions.php) et la pastille de
   statut de la fiche détail (.listing-status-pill ci-dessous). Le pays reste
   affiché, mais séparément, via .listing-country-flag. Classes appliquées
   partout (pas seulement #biens-a-la-une) pour rester cohérentes entre
   l'accueil et le catalogue complet. */
.listing-card-status-disponible { border-top: 4px solid #2E7D46; }
.listing-card-status-loue, .listing-card-status-vendu { border-top: 4px solid #767B84; }
.listing-card-status-sous_offre { border-top: 4px solid #B07E00; }
.listing-card-status-en_projet { border-top: 4px solid var(--color-bronze); }
#biens-a-la-une .listing-card-media img { aspect-ratio: 16 / 10; }
#biens-a-la-une .listing-card:hover { box-shadow: 0 14px 32px rgba(43, 43, 43, 0.18); transform: translateY(-4px); }

/* Eyebrow au-dessus du titre de section, même traitement que
   .services-group-feature-eyebrow / .stats-band-eyebrow (mono, bronze,
   petites majuscules) pour rester cohérent avec le reste du site. */
.home-featured-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-bronze-hover); margin-bottom: 10px;
}

.listing-results-count { color: #666; font-size: 0.9rem; margin-top: 6px; }
.listing-empty { padding: 40px 0; text-align: center; color: #666; }

/* ---------- Sections de la page Biens (mis en avant / filtre / catalogue) ---------- */
.listings-section { margin-top: 48px; }
.listings-section:first-of-type { margin-top: 28px; }
.listings-section > h2 { font-size: 1.3rem; margin-bottom: 4px; }

/* ---------- Filtres ---------- */
.listing-filters {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end;
  background: var(--color-light-grey); padding: 20px; border-radius: var(--radius); margin-top: 24px;
}
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; }
.filter-field select, .filter-field input[type="text"] {
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 6px;
  font-family: var(--font-body); font-size: 0.95rem; background: var(--color-white); min-width: 180px;
}

/* ---------- Fiche bien : galerie / lightbox ---------- */
.breadcrumb { margin-bottom: 12px; font-size: 0.9rem; }
.listing-detail-head { margin-bottom: 24px; }
.listing-detail-loc { color: #666; }
.listing-detail-surface-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.listing-detail-surface-badge {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; color: var(--color-white);
  background: var(--color-anthracite); padding: 6px 16px; border-radius: 20px;
}
.listing-facts-surface strong { color: var(--color-red); font-size: 1.15rem; }
.listing-status-pill {
  font-size: 0.75rem; font-weight: 700; padding: 5px 12px; border-radius: 20px;
  background: var(--color-light-grey); color: var(--color-anthracite); font-family: var(--font-heading);
}
.listing-status-disponible { background: #E4F5E9; color: #1E7A3D; }
.listing-status-sous_offre { background: #FFF3D6; color: #8A6100; }
.listing-status-vendu, .listing-status-loue { background: #F2F2F2; color: #777; }
.listing-status-en_projet { background: #F5EDE0; color: #8C6A2E; }

.listing-gallery { margin: 24px 0 36px; }
.gallery-main {
  position: relative; background: var(--color-anthracite); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 4 / 3;
}
.gallery-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.gallery-slide.active { opacity: 1; pointer-events: auto; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.85);
  border: none; width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--color-anthracite);
}
.gallery-prev { left: 14px; }
.gallery-next { right: 14px; }
.gallery-nav:hover { background: var(--color-white); }
.gallery-counter {
  position: absolute; bottom: 12px; right: 14px; background: rgba(43,43,43,0.7); color: var(--color-white);
  font-size: 0.8rem; padding: 4px 10px; border-radius: 20px;
}
.gallery-expand {
  position: absolute; bottom: 12px; left: 14px; background: rgba(255,255,255,0.85); border: none;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1rem;
}
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumb {
  border: 2px solid transparent; background: none; padding: 0; cursor: pointer; border-radius: 6px;
  overflow: hidden; flex: 0 0 auto; width: 90px; height: 66px;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.active { border-color: var(--color-red); }

.lightbox {
  position: fixed; inset: 0; background: rgba(20,20,20,0.92); z-index: 3000;
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-image { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(255,255,255,0.15); color: var(--color-white); border: none;
  cursor: pointer; border-radius: 50%; width: 46px; height: 46px; font-size: 1.3rem;
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.3); }

.listing-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-top: 20px; }
.listing-facts { list-style: none; padding: 0; margin: 0 0 24px; }
.listing-facts li {
  display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}
.listing-facts li span { color: #666; }
.listing-contact-box {
  background: var(--color-light-grey); border-radius: var(--radius); padding: 20px;
}
.listing-description p { color: #333; }

/* ---------- Team / services (contenu CMS) ---------- */
.team-grid, .services-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; margin: 20px 0 30px;
}
.team-card, .service-card {
  background: var(--color-light-grey); border-radius: var(--radius); padding: 22px;
}
.team-role { color: var(--color-red); font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
/* Services (contenu repris à zéro le 2026-09-11) : petit accent visuel par carte. */
.service-card { border-top: 4px solid var(--color-red); padding-top: 20px; display: flex; flex-direction: column; }
.service-card h2 { font-size: 1.1rem; color: var(--color-red); }
.service-card .btn { margin-top: 16px; align-self: flex-start; }

/* ---------- Page Services : sections détaillées par prestation (2026-09-12) ---------- */
.services-intro { font-size: 1.05rem; color: #444; margin-bottom: 28px; }

/* Index cliquable + hiérarchie par importance métier (2026-09-13, retour
   client) : "Nos services principaux" (Location, Achat, Gérance — cœur de
   métier / revenu récurrent) en rouge/plus visible, "Services
   complémentaires" (Aménagement, Conseil) en bronze/plus compact. Les
   ancres tiennent compte du header collant (scroll-margin-top). */
.services-index {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; padding: 0; list-style: none;
}
.services-index-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px;
  border-radius: 999px; border: 1.5px solid; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem;
  transition: background-color .15s ease, color .15s ease;
}
.services-index-icon { display: flex; width: 16px; height: 16px; }
.services-index-icon svg { width: 16px; height: 16px; }
.services-index-item.is-primary { border-color: var(--color-red); color: var(--color-red); }
.services-index-item.is-primary:hover, .services-index-item.is-primary:focus-visible {
  background: var(--color-red); color: var(--color-white);
}
.services-index-item.is-secondary { border-color: var(--color-bronze); color: var(--color-bronze-hover); }
.services-index-item.is-secondary:hover, .services-index-item.is-secondary:focus-visible {
  background: var(--color-bronze); color: var(--color-white);
}

/* Retour client 2026-09-13 : lisibilité renforcée des étiquettes de groupe
   ("Nos services principaux" / "Services complémentaires"), qui passaient
   inaperçues (petit corps, faible contraste à 60% d'opacité, marge négative
   les collant au bloc suivant). Corps plus grand, pleine opacité, plus
   d'air, et un petit trait d'accent coloré par palier (rouge/bronze) pour
   rattacher visuellement l'étiquette à la hiérarchie déjà en place ailleurs
   sur la page. */
.services-group-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--color-anthracite); margin: 30px 0 10px;
}
.services-group-label:first-child { margin-top: 0; }
.services-group-label::before {
  content: ''; display: block; width: 26px; height: 2px; flex-shrink: 0; background: var(--color-anthracite);
}
.services-group-label.is-primary::before { background: var(--color-red); }
.services-group-label.is-secondary::before { background: var(--color-bronze); }
.services-detail { display: flex; flex-direction: column; gap: 20px; }
.service-detail {
  display: flex; gap: 26px; align-items: flex-start; scroll-margin-top: 90px;
  background: var(--color-light-grey); border-radius: var(--radius); padding: 28px;
}
.service-detail-icon {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--color-anthracite);
  color: var(--color-white); display: flex; align-items: center; justify-content: center;
}
.service-detail-icon svg { width: 28px; height: 28px; }
.service-detail-body { flex: 1; min-width: 0; }
.service-detail-body h2 { font-size: 1.2rem; color: var(--color-red); margin: 0 0 8px; }
.service-detail-body > p { color: #444; margin: 0 0 14px; }
.service-detail-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.service-detail-list li { position: relative; padding-left: 20px; color: #333; font-size: 0.95rem; }
.service-detail-list li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-red);
}
.service-detail .btn { align-self: flex-start; }

/* Services "complémentaires" : traitement plus compact et bronze plutôt
   qu'anthracite/rouge, pour marquer visuellement le second rang sans les
   rendre négligeables. */
.service-detail.is-secondary {
  background: var(--color-white); border: 1px solid var(--color-border); padding: 22px; gap: 20px;
}
.service-detail.is-secondary .service-detail-icon { width: 46px; height: 46px; background: var(--color-bronze); }
.service-detail.is-secondary .service-detail-icon svg { width: 22px; height: 22px; }
.service-detail.is-secondary .service-detail-body h2 { font-size: 1.05rem; color: var(--color-bronze-hover); }
.service-detail.is-secondary .service-detail-list li::before { background: var(--color-bronze); }

@media (max-width: 700px) {
  .service-detail { flex-direction: column; }
}

/* Retour client 2026-09-13 : section de la manufacture de chaussures
   (activité sœur) en bas de la page Services — d'abord une simple mention
   discrète en texte (.services-group-note, conservée en commentaire ci-
   dessous par sécurité), puis le client a demandé "une section à part
   entière pour qu'elle soit vraiment distinguée des services immobiliers"
   (voir includes/migrate_2026_09_13_services_group_note.php +
   migrate_2026_09_13_services_group_feature_upgrade.php). Traitement
   volontairement différent des cartes .service-detail de la grille
   (bandeau teinté en pleine largeur du contenu, photo, titre dédié) pour
   bien signaler qu'on change de sujet — tout en restant hors de l'index et
   de la grille de services : ce n'est pas un service immobilier. */
.services-group-feature {
  margin-top: 48px; padding: 36px; background: var(--color-light-grey); border-radius: var(--radius);
}
.services-group-feature-grid {
  display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 36px; align-items: center;
}
.services-group-feature-media img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.services-group-feature-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-bronze-hover); margin-bottom: 10px;
}
.services-group-feature-content h2 { font-size: 1.3rem; margin: 0 0 12px; color: var(--color-anthracite); }
.services-group-feature-content p { color: #444; margin: 0 0 18px; }
@media (max-width: 700px) {
  .services-group-feature-grid { grid-template-columns: 1fr; text-align: center; }
}
/* Ancien rendu (mention discrète) — conservé au cas où une page n'aurait
   pas encore été mise à niveau (ne devrait plus arriver en pratique). */
.services-group-note {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-border); text-align: center;
}
.services-group-note p { max-width: 560px; margin: 0 auto 14px; color: #666; font-size: 0.9rem; }

/* 2026-09-26 : boutons de fin de carte service — le service Rénovation en a
   désormais 2 (Nous contacter + Voir nos réalisations, vers la nouvelle page
   dédiée), les autres n'en gardent qu'un ; wrap propre en cas de manque de
   place plutôt que de forcer un alignement rigide. */
.service-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Page "Rénovation" (2026-09-26, retour client) : galerie avant/après ---------- */
/* Le client va fournir les photos de ses projets réalisés ; en attendant,
   chaque emplacement affiche un visuel de gabarit (voir renovation_photo_src()
   dans templates/renovation.php, même mécanisme que placeholder_svg() pour
   les biens) — jamais de case vide. */
.renovation-projects {
  display: grid; gap: 32px; margin: 32px 0 40px;
}
.renovation-project {
  background: var(--color-light-grey); border-radius: var(--radius); padding: 24px;
  display: grid; gap: 20px;
}
.renovation-project-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
/* 2026-09-26 (retour client) : chaque phase (avant/après) peut désormais afficher plusieurs
   photos — .renovation-photo-grid s'adapte donc de 1 à 3 vignettes sans revoir la mise en page. */
.renovation-photo-group { display: flex; flex-direction: column; gap: 8px; }
.renovation-photo-group-label {
  text-align: center; font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-bronze-hover);
}
.renovation-photo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px;
}
.renovation-photo-grid img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.renovation-project-body h2 { font-size: 1.1rem; color: var(--color-anthracite); margin: 0 0 8px; }
.renovation-project-body p { color: #444; margin: 0; white-space: pre-line; }
.renovation-cta { text-align: center; margin-top: 8px; }
@media (max-width: 520px) {
  .renovation-project-photos { grid-template-columns: 1fr; }
}

/* 2026-10-19 (retour client) : page restructurée en un seul projet très détaillé — grande galerie
   (jusqu'à 11 photos) au lieu des 2 colonnes avant/après. Vignettes plus grandes que
   .renovation-photo-grid d'origine (pensée pour de petites vignettes avant/après), cliquables vers
   la photo en pleine résolution (voir templates/renovation.php). */
.renovation-photo-grid-feature {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.renovation-photo-link { display: block; }
.renovation-photo-link img { cursor: zoom-in; transition: transform .2s ease; }
.renovation-photo-link:hover img { transform: scale(1.02); }

/* ---------- Page "Notre histoire" : hero, timeline, valeurs (2026-09-11) ---------- */
.history-hero {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center;
  margin-bottom: 44px;
}
.history-hero-media { max-width: 220px; margin: 0 auto; }
.history-hero-media svg { width: 100%; height: auto; }
.history-hero-text h1 { margin-bottom: 0.4em; }
.history-lead { font-size: 1.08rem; color: #444; }
.history-motto {
  font-family: var(--font-heading); font-weight: 700; font-style: italic; color: var(--color-red);
  font-size: 1rem; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--color-border);
}

/* Retour client 2026-09-13 (suite) : "ok pour 4" — rythmer les longues
   pages avec des variations de fond (blanc / gris clair / bronze très
   pâle), la page "Notre histoire" étant restée entièrement blanche jusque-
   là (hero, timeline, valeurs, carte de couverture et groupe se
   succédaient tous sur le même fond). Traitement en "grand encart" contenu
   (même principe que .history-coverage-map, .services-group-feature),
   pas en bande pleine largeur : cohérent avec le reste du site, sans
   risque de débordement horizontal. */
.history-timeline-section {
  margin-bottom: 48px; background: var(--color-light-grey); border-radius: var(--radius);
  padding: 36px 40px;
}
.history-timeline { list-style: none; margin: 28px 0 0; padding: 0; position: relative; }
.history-timeline::before {
  content: ''; position: absolute; left: 27px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border);
}
.history-timeline-item { display: flex; gap: 20px; position: relative; padding-bottom: 34px; }
.history-timeline-item:last-child { padding-bottom: 0; }
.history-timeline-icon {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--color-anthracite);
  color: var(--color-white); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.history-timeline-icon svg { width: 28px; height: 28px; }
.history-timeline-content { padding-top: 6px; }
.history-timeline-year {
  display: inline-block; font-family: var(--font-heading); font-weight: 700; color: var(--color-red);
  font-size: 0.9rem; letter-spacing: 0.04em; margin-bottom: 2px;
}
.history-timeline-content h3 { font-size: 1.05rem; margin: 2px 0 6px; }
.history-timeline-content p { color: #444; margin: 0; }

.history-values-section .values-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; margin-top: 24px;
}
.value-card { background: var(--color-light-grey); border-radius: var(--radius); padding: 26px 20px; text-align: center; }
.value-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 50%; background: var(--color-white); color: var(--color-red); margin-bottom: 12px; box-shadow: var(--shadow);
}
.value-icon svg { width: 26px; height: 26px; }
.value-card h3 { font-size: 1rem; margin-bottom: 6px; }
.value-card p { color: #444; font-size: 0.92rem; margin: 0; }

/* Carte de couverture "Jura ↔ Bucarest" + séparateur orné (DA 2026-09-12) :
   contenu ajouté à "Notre histoire" par
   includes/migrate_2026_09_12_history_coverage_map.php. */
.history-coverage-section { margin-top: 48px; text-align: center; }
.history-divider { display: flex; justify-content: center; margin: 28px 0; }
.history-divider svg { display: block; }
.history-divider-line { stroke: var(--color-border); stroke-width: 1; }
.history-divider-ring { fill: none; stroke: var(--color-bronze); stroke-width: 1.2; }
.history-divider-dot { fill: var(--color-bronze); }
.history-divider-tick { stroke: var(--color-bronze); stroke-width: 1; }
.history-divider-arrow { fill: var(--color-bronze); }
.history-coverage-map {
  display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto; padding: 30px 36px;
  background: var(--color-light-grey); border-radius: var(--radius);
}
.history-coverage-node { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 200px; }
.history-coverage-node span {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem; color: var(--color-anthracite);
}
.history-coverage-node small {
  /* #6B6655 plutôt qu'un gris chaud plus clair : conserve le ton "pierre"
     tout en tenant le contraste AA (~5:1) sur le fond --color-light-grey. */
  display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B6655; margin-top: 2px;
}
.history-coverage-icon path, .history-coverage-icon line, .history-coverage-icon rect {
  fill: none; stroke: var(--color-anthracite); stroke-width: 2.5; stroke-linejoin: round;
}
.history-coverage-node-bucarest .history-coverage-icon path,
.history-coverage-node-bucarest .history-coverage-icon line,
.history-coverage-node-bucarest .history-coverage-icon rect { stroke: var(--color-bronze); }
.history-coverage-link { flex: 1; min-width: 100px; }
.history-coverage-link svg { display: block; width: 100%; height: auto; }
.history-coverage-link-path { fill: none; stroke: var(--color-red); stroke-width: 1.5; stroke-dasharray: 5,6; }
.history-coverage-link-dot { fill: var(--color-red); }
@media (max-width: 700px) {
  .history-coverage-map { flex-direction: column; padding: 24px; }
  .history-coverage-link { width: 4px; height: 40px; min-width: 0; }
  .history-coverage-link svg { width: 40px; height: 100%; transform: rotate(90deg); }
}

/* Lien discret vers la manufacture de chaussures Minerva SA (2026-09-12) :
   activité sœur, entièrement distincte, avec son propre site. Retour
   client 2026-09-13 (suite) : "ok pour 4" — passe d'un simple filet
   supérieur à un encart contenu au fond dégradé bronze très pâle (même
   logique que .services-group-feature sur la page Services, pour une
   cohérence visuelle entre les deux mentions de la manufacture), à la fois
   pour rythmer la fin de page et pour la "chaleur" déjà demandée par le
   client (voir migrate_2026_09_13_history_group_photos.php). */
.history-group-today {
  margin-top: 44px; padding: 40px; text-align: center;
  background: linear-gradient(135deg, #FBF6EC 0%, var(--color-light-grey) 100%);
  border-radius: var(--radius);
}
.history-group-today p { max-width: 640px; margin: 10px auto 18px; color: #444; }

/* Retour client 2026-09-13 : "apporter des visuels, de la couleur et de la
   chaleur" à la page "Notre histoire" — premières vraies photos du site
   (jusqu'ici uniquement des pictogrammes/SVG), fournies par le client
   (site de la manufacture Minerva Shoes, activité sœur déjà présentée dans
   cette section). Volontairement à l'intérieur de .history-group-today
   (texte centré) mais la grille elle-même repasse en lecture normale à
   gauche, plus confortable pour une légende sur 2 lignes. */
.history-group-photos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
  max-width: 900px; margin: 24px auto 28px; text-align: left;
}
.history-group-photo {
  margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--color-light-grey);
  box-shadow: var(--shadow); transition: box-shadow .15s ease, transform .15s ease;
}
.history-group-photo:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.history-group-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.history-group-photo figcaption {
  padding: 10px 14px; font-size: 0.82rem; color: #6B6655; border-top: 1px solid var(--color-border);
}

@media (max-width: 700px) {
  .history-hero { grid-template-columns: 1fr; text-align: center; }
  .history-hero-media { max-width: 160px; }
}

/* ---------- Formulaires ---------- */
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.form-field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; }
.form-field input, .form-field textarea {
  padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 6px;
  font-family: var(--font-body); font-size: 1rem; width: 100%;
}
.form-field input:focus, .form-field textarea:focus, .filter-field select:focus, .filter-field input[type="text"]:focus {
  outline: 2px solid var(--color-red); outline-offset: 1px; border-color: var(--color-red);
}
.form-field.field-invalid input, .form-field.field-invalid textarea { border-color: var(--color-red); }
.form-success {
  background: #E4F5E9; color: #1E7A3D; padding: 14px 18px; border-radius: 6px; margin-bottom: 20px;
}
.form-errors {
  background: #FDEBEC; color: #A50D25; padding: 14px 18px; border-radius: 6px; margin-bottom: 20px;
}
.form-errors ul { margin: 0; padding-left: 1.2em; }

.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; margin-top: 24px; }
.contact-info-list { list-style: none; padding: 0; }
.contact-info-list li { padding: 6px 0; }
.contact-map-placeholder { margin-top: 8px; border-radius: var(--radius); overflow: hidden; }

/* Retour client 2026-09-13 (suite) : "ok pour 4" — reprend en filigrane le
   petit ornement déjà utilisé comme séparateur sur "Notre histoire" (voir
   templates/contact.php + .history-divider-* ci-dessus), agrandi et en
   très faible opacité, purement décoratif (aria-hidden, pas d'interaction).
   .page-contact passe en position relative pour que le filigrane (position
   absolute) se place derrière le contenu réel (z-index) sans l'agrandir ni
   provoquer de débordement horizontal (largeur bornée + centré). */
.page-contact { position: relative; }
.page-contact > h1, .page-contact > .page-intro, .page-contact > .contact-grid { position: relative; z-index: 1; }
.contact-watermark {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: min(900px, 92%); opacity: 0.16; pointer-events: none; z-index: 0;
}
.contact-watermark svg { display: block; width: 100%; height: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-anthracite); color: #DDD; padding: 50px 20px 0; }
.footer-inner {
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 30px;
}
.footer-col h2 { color: var(--color-white); font-size: 1rem; margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col a { color: #CCC; }
.footer-col a:hover { color: var(--color-white); }
.footer-brand p { color: #BBB; font-size: 0.9rem; }
.footer-sister { font-size: 0.8rem; color: #999; }
.footer-group-link { font-size: 0.8rem; color: #999; margin-top: 4px; }
/* Note DA 2026-09-12 : un essai de couleur bronze sur ce lien (texte) a été
   abandonné — sur le fond anthracite du pied de page, #A67C3D ne tient que
   ~3.6:1 de contraste, sous le seuil AA (4.5:1) pour du texte de cette
   taille. Le texte reste donc dans la teinte grise habituelle du footer ;
   seul le soulignement porte l'accent bronze (un simple trait de couleur
   n'est pas soumis à cette exigence de contraste de texte). */
.footer-group-link a {
  color: #999; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--color-bronze);
}
.footer-group-link a:hover { color: var(--color-white); text-decoration-color: var(--color-bronze-hover); }
.footer-social-title { margin-top: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid #555; display: flex;
  align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #DDD;
}
.footer-social a:hover { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); }
.footer-bottom {
  border-top: 1px solid #444; text-align: center; padding: 18px 0; font-size: 0.82rem; color: #999;
}

/* ---------- 404 ---------- */
.error-404 { text-align: center; padding: 90px 20px; }

/* ---------- Bannière de consentement cookies (RGPD, 2026-09-12) ---------- */
/* Bug corrigé le 2026-09-15 : le "display: flex" ci-dessous avait plus de
   poids que la valeur par défaut du navigateur pour [hidden] (une feuille de
   style d'auteur l'emporte toujours sur celle du navigateur, quelle que soit
   la spécificité) — résultat, assets/js/main.js pose bien l'attribut
   "hidden" une fois le choix (accepté/refusé) mémorisé ou déjà connu, mais
   la bannière restait visible à l'écran quand même, sur chaque page/visite.
   La règle [hidden] explicite ci-dessous rétablit le masquage réel. */
.cookie-consent-banner[hidden] { display: none; }
.cookie-consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 500;
  max-width: 640px; margin: 0 auto; background: var(--color-anthracite); color: var(--color-white);
  border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-hover);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.cookie-consent-banner p { margin: 0; font-size: 0.9rem; flex: 1 1 260px; }
.cookie-consent-banner a { color: var(--color-white); text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-consent-banner .btn-outline { border-color: rgba(255,255,255,0.5); color: var(--color-white); }
.cookie-consent-banner .btn-outline:hover { background: rgba(255,255,255,0.1); }

/* ============================================================
   Responsive — breakpoints ~640px / 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .listing-detail-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white);
    flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow); max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .main-nav.open { max-height: 560px; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 10px 20px; }
  .main-nav ul a { display: block; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
  .nav-lang { padding: 14px 20px; border-top: 1px solid var(--color-border); }
  .nav-cta { margin: 14px 20px 18px; text-align: center; }
  /* Retour client 2026-09-17 : "l'ombre ne couvre pas toute l'image" sur
     mobile — cette règle datait de l'ancien hero à 2 calques (crête SVG en
     bande basse + dégradé plein fond) et n'avait pas été mise à jour quand
     le fond est passé à la photo de l'usine avec voile assombrissant (3
     calques désormais : crête, voile, photo). Le nombre de tailles doit
     toujours correspondre au nombre de calques — la crête garde sa bande
     basse (réduite à 110px sur mobile, comme avant), mais le voile ET la
     photo doivent rester en "cover" tous les deux, pas seulement un des
     deux comme précédemment. */
  .hero { padding: 56px 16px; background-size: 100% 110px, cover, cover; }
  .home-why, .section, .section-grey { padding: 40px 16px; }
  .footer-inner { grid-template-columns: 1fr; }
  .listing-filters { flex-direction: column; align-items: stretch; }
  .filter-field select, .filter-field input[type="text"] { min-width: 0; width: 100%; }
  .cookie-consent-banner { flex-direction: column; align-items: stretch; left: 10px; right: 10px; bottom: 10px; }
  .cookie-consent-actions { justify-content: stretch; }
  .cookie-consent-actions .btn { flex: 1; }
}


/* ---------- Audit du 2026-09-28 ---------- */
/* T04 : message d'erreur sous le champ concerné du formulaire de contact. */
.field-error { color: var(--color-red); font-size: 0.85rem; margin: 6px 0 0; }
/* T16 : contrastes WCAG AA (4,5:1 minimum) des petits textes bronze et gris. */
:root { --color-bronze-text: #7D5F29; --color-bronze-on-dark: #C49A5A; }
.stats-band-eyebrow { color: var(--color-bronze-on-dark); }
.home-trust-band .stats-band-eyebrow,
.home-featured-eyebrow,
.services-index-item.is-secondary { color: var(--color-bronze-text); }
.listing-status-en_projet,
.listing-status-flag-en_projet { color: var(--color-bronze-text); }
.listing-status-vendu,
.listing-status-loue { color: #666; }