/* ==========================================================================
   Pionnier — feuille du modèle
   Spec : docs/superpowers/specs/2026-10-02-pionnier-design.md
   Règles : couleurs dans les blocs de jetons SEULEMENT ; rayon 0 ; aucune ombre.
   ========================================================================== */

/* --- Polices (SIL OFL, auto-hébergées) --- */
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('../fonts/public-sans-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* --- Jetons communs aux deux modes --- */
:root {
  --p-serif: 'Cormorant Garamond', Georgia, serif;
  --p-sans: 'Public Sans', system-ui, sans-serif;
  --p-accent: var(--color-primary, #8B7150);
  --p-sur-accent: var(--color-on-primary, #ffffff);
  --p-max: 1440px;
  --p-marge: 20px;
  --p-gap-section: 72px;
  --p-gap-titre: 20px;
  --p-gap-cartes: 16px;
  --p-entete-h: 72px;
  --p-duree: 220ms;
  --p-courbe: cubic-bezier(0.22, 1, 0.36, 1);
  /* Texte posé sur une PHOTOGRAPHIE (héros, cartes en surimpression, en-tête
     transparent) : clair dans les deux modes, c'est la photo qui commande. */
  --p-sur-photo: #F3F0EA;
  --p-encre-photo: #111316;
  --p-papier-dpe: #F7F5F0;
  --p-menu-filet: rgba(243, 240, 234, 0.28);
  --p-menu-survol: rgba(243, 240, 234, 0.1);
  --p-menu-texte: rgba(243, 240, 234, 0.78);
  --p-menu-defilement: #4A4D52;
  --p-encre-dpe: #16181B;
  --p-voile-bas: rgba(10, 11, 13, 0.92);
  --p-voile-milieu: rgba(10, 11, 13, 0.55);
  --p-voile-haut: rgba(10, 11, 13, 0.05);
}

/* --- Mode sombre : celui des maquettes --- */
[data-theme="sombre"] {
  --p-fond: #111316;
  --p-fond-doux: #181B1F;
  --p-filet: #2A2D31;
  --p-texte: #E6E3DD;
  --p-texte-doux: #9A968F;
  --p-rupture: #E7E2D9;
  --p-rupture-texte: #16181B;
  --p-rupture-filet: #CFC7BA;
  --p-voile: rgba(10, 11, 13, 0.62);
  --p-accent-texte: var(--color-primary-sur-sombre);
  --p-rupture-accent: var(--color-primary-sur-clair);
  --p-rupture-doux: #5E5A54;
  --p-focus: var(--p-accent-texte);
  color-scheme: dark;
}

/* --- Mode clair : les surfaces s'échangent --- */
[data-theme="clair"] {
  --p-fond: #F3F0EA;
  --p-fond-doux: #EAE5DC;
  --p-filet: #D6CFC3;
  --p-texte: #16181B;
  --p-texte-doux: #5E5A54;
  --p-rupture: #111316;
  --p-rupture-texte: #E6E3DD;
  --p-rupture-filet: #2A2D31;
  --p-voile: rgba(10, 11, 13, 0.55);
  --p-accent-texte: var(--color-primary-sur-clair);
  --p-rupture-accent: var(--color-primary-sur-sombre);
  --p-rupture-doux: #9A968F;
  --p-focus: var(--p-accent-texte);
  color-scheme: light;
}

/* --- Sans JavaScript et en « auto » : la requête média décide --- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --p-fond: #F3F0EA; --p-fond-doux: #EAE5DC; --p-filet: #D6CFC3; --p-texte: #16181B; --p-texte-doux: #5E5A54; --p-rupture: #111316; --p-rupture-texte: #E6E3DD; --p-rupture-filet: #2A2D31; --p-voile: rgba(10, 11, 13, 0.55); --p-accent-texte: var(--color-primary-sur-clair); --p-rupture-accent: var(--color-primary-sur-sombre); --p-rupture-doux: #9A968F; --p-focus: var(--p-accent-texte); color-scheme: light; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --p-fond: #111316; --p-fond-doux: #181B1F; --p-filet: #2A2D31; --p-texte: #E6E3DD; --p-texte-doux: #9A968F; --p-rupture: #E7E2D9; --p-rupture-texte: #16181B; --p-rupture-filet: #CFC7BA; --p-voile: rgba(10, 11, 13, 0.62); --p-accent-texte: var(--color-primary-sur-sombre); --p-rupture-accent: var(--color-primary-sur-clair); --p-rupture-doux: #5E5A54; --p-focus: var(--p-accent-texte); color-scheme: dark; }
}

@media (min-width: 768px)  { :root { --p-marge: 32px; --p-gap-section: 96px; --p-gap-titre: 24px; --p-gap-cartes: 20px; } }
@media (min-width: 1200px) { :root { --p-marge: 48px; --p-gap-section: 128px; --p-gap-titre: 32px; --p-gap-cartes: 24px; --p-entete-h: 88px; } }

/* --- Base (Bootstrap n'est pas chargé) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Cibles du « Défilez » du héros : l'en-tête collant ne doit pas les recouvrir. */
#decouvertes, #territoires-accueil { scroll-margin-top: var(--p-entete-h); }
body { margin: 0; background: var(--p-fond); color: var(--p-texte); font-family: var(--p-sans); font-size: 16px; line-height: 1.6; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:hover { color: var(--p-accent-texte); }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 3px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--p-filet); }
td { font-variant-numeric: tabular-nums; }
/* [hidden] doit toujours masquer : boutons de repli, liste remplacée par des
   squelettes, pagination vide. Sans cette règle, tout composant qui pose un
   display (.p-bouton, .p-liste, .p-pagination…) écrase l'attribut. */
[hidden] { display: none !important; }
.p-invisible { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.p-evitement { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--p-texte); color: var(--p-fond); }
.p-evitement:focus { top: 16px; }

/* --- Mise en page --- */
.p-contenu { width: 100%; max-width: var(--p-max); margin: 0 auto; padding: 0 var(--p-marge); }
.p-section { padding: var(--p-gap-section) 0; }
.p-section--rupture { background: var(--p-rupture); color: var(--p-rupture-texte); --p-filet: var(--p-rupture-filet); --p-texte: var(--p-rupture-texte); --p-accent-texte: var(--p-rupture-accent); --p-texte-doux: var(--p-rupture-doux); --p-focus: var(--p-rupture-accent); --p-surface: var(--p-rupture); }
.p-colonne-lecture { max-width: 760px; }
.p-page-interieure { padding: calc(var(--p-entete-h) + 64px) 0 var(--p-gap-section); }
.p-tableau-defilant { overflow-x: auto; }

/* --- Typographie --- */
.p-surtitre { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-accent-texte); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.p-surtitre::before { content: ''; width: 1px; height: 12px; background: currentColor; }
.p-titre-page, .p-titre-section, .p-heros-titre { font-family: var(--p-serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
.p-titre-page { font-size: clamp(2.4rem, 5vw, 3.5rem); margin-bottom: var(--p-gap-titre); }
.p-titre-section { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: var(--p-gap-titre); }
.p-coordonnees { font-size: 11px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--p-accent-texte); }

/* --- Boutons et liens --- */
.p-bouton { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 14px 28px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; background: transparent; color: var(--p-texte); cursor: pointer; transition: background-color 160ms, color 160ms; }
.p-bouton--compact { min-height: 44px; padding: 10px 20px; }
.p-bouton.p-bouton--plein { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-sur-accent); }
.p-bouton.p-bouton--plein:hover { background: var(--color-primary-hover, var(--p-accent)); color: var(--p-sur-accent); }
.p-bouton.p-bouton--trait:hover { background: var(--p-texte); color: var(--p-surface, var(--p-fond)); }
.p-heros-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.p-bouton.p-bouton--verre { background: var(--p-menu-survol); border-color: var(--p-sur-photo); color: var(--p-sur-photo); }
.p-bouton.p-bouton--verre:hover { background: var(--p-menu-filet); color: var(--p-sur-photo); }
.p-lien-fleche { display: inline-flex; gap: 12px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* --- Champs --- */
.p-etiquette { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-texte-doux); margin-bottom: 8px; }
.p-champ { width: 100%; min-height: 48px; padding: 12px 16px; background: transparent; border: 1px solid var(--p-filet); color: var(--p-texte); }
.p-champ:focus { border-color: var(--p-accent-texte); outline: none; }
select.p-champ { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }

/* --- Chiffres --- */
.p-chiffre-valeur { font-family: var(--p-serif); font-size: clamp(2.2rem, 3vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.p-chiffre-libelle { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; }
.p-chiffre-texte { font-size: 13px; color: var(--p-texte-doux); margin-top: 12px; }
.p-chiffre-icone { color: var(--p-accent-texte); font-size: 28px; display: block; margin-bottom: 16px; }

/* --- En-tête --- */
.p-entete { position: sticky; top: 0; z-index: 50; background: var(--p-fond); border-bottom: 1px solid var(--p-filet); }
.p-avec-heros .p-entete { position: fixed; left: 0; right: 0; }
.p-avec-heros .p-entete:not(.p-entete--opaque):not(:has(.p-menu[open])) { background: transparent; border-bottom-color: transparent; --p-texte: var(--p-sur-photo); --p-surface: var(--p-encre-photo); color: var(--p-texte); }
.p-entete-barre { display: flex; align-items: center; gap: 32px; min-height: var(--p-entete-h); }
.p-logo { display: inline-flex; flex-direction: column; text-decoration: none; color: inherit; }
.p-logo img { height: 48px; width: auto; }
.p-logo-nom { font-family: var(--p-serif); font-size: 26px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; }
.p-logo-soustitre { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 6px; opacity: 0.8; }
.p-nav { display: none; margin-left: auto; }
.p-nav ul { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.p-nav a { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 8px 0; }
.p-nav a[aria-current="page"] { color: var(--p-accent-texte); border-bottom: 1px solid currentColor; }
.p-entete-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.p-theme-bascule { width: 44px; height: 44px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; display: inline-grid; place-items: center; }
@media (min-width: 1024px) { .p-nav { display: block; } .p-entete-actions { margin-left: 32px; } }

/* --- Menu mobile --- */
.p-menu { position: static; }
.p-menu-bouton { list-style: none; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.p-menu-bouton::-webkit-details-marker { display: none; }
.p-menu-icone, .p-menu-icone::before, .p-menu-icone::after { display: block; width: 16px; height: 1px; background: currentColor; content: ''; position: relative; }
.p-menu-icone::before { top: -5px; } .p-menu-icone::after { top: 4px; }
.p-menu-panneau { position: fixed; inset: var(--p-entete-h) 0 0 0; background: var(--p-fond); color: var(--p-texte); padding: 40px var(--p-marge); overflow-y: auto; }
.p-menu-panneau a { display: flex; gap: 16px; align-items: baseline; font-family: var(--p-serif); font-size: 32px; text-decoration: none; padding: 8px 0; }
.p-menu-index { font-family: var(--p-sans); font-size: 11px; letter-spacing: 0.12em; color: var(--p-accent-texte); }
@media (min-width: 1024px) {
  .p-menu-bouton { display: none; }
  .p-menu { display: none; }
}

/* --- Pied de page --- */
.p-pied { background: var(--p-fond); border-top: 1px solid var(--p-filet); padding: 64px 0 24px; font-size: 14px; }
.p-pied-grille { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .p-pied-grille { grid-template-columns: 2fr repeat(4, 1fr); } }
.p-pied-titre { font-family: var(--p-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }
.p-pied-colonne ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.p-pied a { text-decoration: none; }
.p-pied-signature, .p-pied-adresse { color: var(--p-texte-doux); margin-top: 16px; font-style: normal; }
.p-pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--p-filet); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-texte-doux); }
.p-pied-bas ul { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }

/* --- Bande d'alerte --- */
.p-alerte { padding: 40px 0; }
.p-alerte-grille { display: grid; gap: 24px; align-items: center; }
@media (min-width: 992px) { .p-alerte-grille { grid-template-columns: auto 1fr 1.3fr; gap: 40px; } }
.p-alerte-icone { font-size: 40px; color: var(--p-accent-texte); }
.p-alerte-titre { font-family: var(--p-serif); font-weight: 400; font-size: 1.8rem; line-height: 1.1; margin-bottom: 8px; }
.p-alerte-ligne { display: flex; gap: 12px; flex-wrap: wrap; }
.p-alerte-ligne .p-champ { flex: 1 1 240px; }
.p-alerte-consentement { font-size: 12px; margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; }
.p-retour { margin-top: 12px; font-size: 14px; }

/* --- Mouvement --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* === Pages légales === */
.p-prose-legale section { padding: 32px 0; border-top: 1px solid var(--p-filet); }
.p-prose-legale h2 { font-family: var(--p-serif); font-weight: 400; font-size: 1.6rem; margin-bottom: 12px; }
.p-prose-legale p + p { margin-top: 12px; }
/* === Cartes de bien === */
.p-carte { position: relative; height: 100%; }
.p-carte-lien { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.p-carte-media { position: relative; overflow: hidden; background: var(--p-fond-doux); }
.p-carte-media img, .p-carte-repli { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 45%; transition: transform var(--p-duree) var(--p-courbe); }
.p-carte-lien:hover .p-carte-media img { transform: scale(1.03); }
.p-carte-repli { display: flex; align-items: flex-end; padding: 20px; background: var(--p-fond-doux); color: var(--p-texte-doux); font-family: var(--p-serif); font-size: 1.4rem; }
.p-etiquette-bien { position: absolute; top: 12px; left: 12px; padding: 4px 8px; background: var(--p-rupture); color: var(--p-rupture-texte); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.p-carte-corps { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 0; flex: 1; }
.p-carte-ville { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-accent-texte); }
.p-carte-titre { font-family: var(--p-serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.p-carte-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-variant-numeric: tabular-nums; margin-top: auto; padding-right: 32px; }
.p-carte-meta > * + *::before { content: '•'; margin-right: 14px; opacity: 0.6; }
.p-prix { white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-carte-fleche { position: absolute; right: 0; bottom: 16px; transition: transform var(--p-duree) var(--p-courbe); }
.p-carte-lien:hover .p-carte-fleche { transform: translate(4px, -4px); }
/* Variante en surimpression : texte posé sur l'image (maquette annonces.png) */
.p-carte[data-variante="surimpression"] .p-carte-lien { position: relative; color: var(--p-sur-photo); }
.p-carte[data-variante="surimpression"] .p-carte-media img, .p-carte[data-variante="surimpression"] .p-carte-repli { aspect-ratio: 16 / 10; }
.p-carte[data-variante="surimpression"] .p-carte-corps { position: absolute; inset: auto 0 0 0; padding: 48px 20px 18px; background: linear-gradient(to top, var(--p-voile), transparent); }
.p-carte[data-variante="surimpression"] .p-carte-ville { color: var(--p-sur-photo); opacity: 0.85; }
.p-carte[data-variante="surimpression"] .p-carte-fleche { right: 20px; bottom: 18px; }
.p-carte[data-variante="surimpression"] .p-carte-titre { font-size: 1.6rem; }
/* === Héros === */
.p-heros { --p-surface: var(--p-encre-photo); position: relative; isolation: isolate; min-height: min(100vh, 900px); display: flex; align-items: flex-end; color: var(--p-sur-photo); --p-texte: var(--p-sur-photo); overflow: hidden; }
.p-heros-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--p-fond-doux); }
.p-heros-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.p-heros-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--p-voile) 0%, transparent 65%), linear-gradient(to top, var(--p-voile), transparent 45%); }
.p-heros-contenu { position: relative; padding-top: calc(var(--p-entete-h) + 48px); padding-bottom: 56px; }
.p-heros-titre { font-family: var(--p-serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; max-width: 14ch; margin: 16px 0 20px; }
.p-heros-titre--fiche { font-size: clamp(2.2rem, 4.5vw, 3.6rem); max-width: 18ch; }
.p-heros-lieu, .p-retour-resultats { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.p-heros-prix { font-size: 1.4rem; font-variant-numeric: tabular-nums; margin-bottom: 20px; }
.p-fiche-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.p-fiche-etiquettes .p-etiquette-bien { position: static; }
.p-etiquette-bien--plein { background: var(--p-accent); color: var(--p-sur-accent); }
.p-etiquette-bien--trait { background: transparent; color: inherit; border: 1px solid currentColor; }
.p-fiche-cles { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-bottom: 32px; }
.p-fiche-cles dt { font-size: 15px; font-variant-numeric: tabular-nums; }
.p-fiche-cles dd { margin: 4px 0 0; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.p-heros-compteur { position: absolute; right: var(--p-marge); top: 50%; display: grid; gap: 4px; font-size: 12px; text-align: center; }
.p-heros-compteur span { border: 1px solid currentColor; padding: 4px 8px; }
.p-heros-nav { position: absolute; right: var(--p-marge); top: calc(50% + 72px); display: grid; }
.p-heros-nav button { width: 44px; height: 44px; background: transparent; border: 1px solid var(--p-sur-photo); color: var(--p-sur-photo); cursor: pointer; }

/* === Barre d'ancres === */
.p-ancres { position: sticky; top: var(--p-entete-h); z-index: 40; background: var(--p-fond); border-bottom: 1px solid var(--p-filet); }
.p-ancres ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.p-ancres a { display: block; padding: 18px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; }
.p-ancres a[aria-current="location"] { color: var(--p-accent-texte); border-bottom-color: currentColor; }
[data-ancre] { scroll-margin-top: calc(var(--p-entete-h) + 64px); }

/* === Corps de la fiche === */
.p-fiche-grille { display: grid; gap: 48px; padding-top: 48px; padding-bottom: var(--p-gap-section); }
@media (min-width: 1024px) {
  .p-fiche-grille { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .p-fiche-laterale { position: sticky; top: calc(var(--p-entete-h) + 80px); }
}
.p-fiche-section { padding: 40px 0; border-bottom: 1px solid var(--p-filet); }
.p-fiche-principale > .p-fiche-section:first-child { padding-top: 0; }
.p-fiche-titre { font-family: var(--p-serif); font-weight: 400; font-size: 2.2rem; line-height: 1.1; margin-bottom: 24px; }
.p-fiche-soustitre { font-family: var(--p-serif); font-weight: 400; font-size: 1.5rem; margin-bottom: 16px; }
.p-fiche-presentation { display: grid; gap: 40px; }
@media (min-width: 1200px) {
  /* Le titre « L'essentiel » ne coiffe plus toute la largeur : il occupe la colonne
     du tableau, et le texte « À propos » démarre à la même hauteur, en haut. */
  #presentation { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 40px; align-items: start; grid-template-rows: auto auto 1fr auto; }
  #presentation > .p-fiche-titre { grid-column: 1; grid-row: 1; }
  #presentation .p-fiche-presentation { display: contents; }
  #presentation .p-fiche-tableau { grid-column: 1; grid-row: 2; }
  #presentation .p-fiche-description { grid-column: 2; grid-row: 1 / span 3; }
  #presentation .p-fiche-forts { grid-column: 2; grid-row: 4; margin-top: 40px; }
  #presentation .p-fiche-description .p-fiche-soustitre { font-size: 2.2rem; line-height: 1.1; margin-bottom: 24px; }
}
.p-fiche-tableau div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--p-filet); font-size: 13px; }
.p-fiche-tableau dt { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-texte-doux); }
.p-fiche-tableau dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .p-fiche-tableau--complet { columns: 2; column-gap: 48px; } .p-fiche-tableau--complet div { break-inside: avoid; } }
.p-prose { max-width: 68ch; }
.p-fiche-forts ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.p-fiche-forts i { color: var(--p-accent-texte); margin-right: 8px; }
.p-lettre-dpe { display: inline-block; min-width: 24px; padding: 2px 6px; text-align: center; font-weight: 700; border: 1px solid currentColor; }
.p-fiche-lieu { font-size: 15px; margin-bottom: 16px; }
.p-fiche-precision, .p-carte-invite { font-size: 13px; color: var(--p-texte-doux); margin: 12px 0; }
/* isolation : les volets de Leaflet portent des z-index de 400 à 700 ; sans contexte propre, ils passaient par-dessus l'en-tête collant (z-index 50). */
.p-carte-toile { isolation: isolate;  width: 100%; aspect-ratio: 16 / 9; background: var(--p-fond-doux); border: 1px solid var(--p-filet); }
[data-theme="sombre"] .p-carte-toile .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.3); }

/* === Galerie et dialogues — mise en page sous [open] SEULEMENT ===
   Une règle non gardée écraserait le display: none par défaut du <dialog>,
   et la fenêtre resterait ouverte en permanence (piège d'Horizon). */
.p-galerie-principale img, .p-galerie-vignette img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 45%; }
.p-galerie-vignettes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.p-galerie-vignette { padding: 0; border: 1px solid transparent; background: none; cursor: pointer; }
.p-galerie-vignette[aria-current="true"] { border-color: var(--p-accent-texte); }
.p-zoomable { cursor: zoom-in; }
.p-modale[open], .p-visionneuse[open] { border: 1px solid var(--p-filet); background: var(--p-fond); color: var(--p-texte); padding: 40px 32px 32px; }
.p-modale[open] { width: min(92vw, 640px); }
.p-visionneuse[open] { width: min(94vw, 1200px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.p-visionneuse[open] img { max-height: 78vh; width: 100%; object-fit: contain; }
.p-visionneuse-compteur { grid-column: 1 / -1; text-align: center; font-size: 12px; letter-spacing: 0.12em; }
.p-visionneuse-nav { width: 44px; height: 44px; border: 1px solid var(--p-filet); background: transparent; color: inherit; font-size: 22px; cursor: pointer; }
.p-modale::backdrop, .p-visionneuse::backdrop { background: var(--p-voile); }
.p-modale-fermer { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 28px; cursor: pointer; }

/* === Colonne latérale === */
.p-encart { border: 1px solid var(--p-filet); padding: 28px; margin-bottom: 24px; }
.p-encart-titre { font-family: var(--p-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }
.p-encart-texte { font-size: 14px; color: var(--p-texte-doux); margin-bottom: 20px; }
.p-conseiller-mini img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; }
.p-conseiller-nom { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.p-conseiller-fonction { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-texte-doux); margin-top: 4px; }
.p-conseiller-contacts { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; font-size: 14px; }
.p-partage { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; }
.p-partage-bouton { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--p-filet); background: transparent; color: inherit; text-decoration: none; cursor: pointer; }

/* === Formulaires === */
.p-formulaire-grille { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.p-formulaire-large { grid-column: 1 / -1; }
.p-consentement { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; margin: 16px 0; }

/* === Carrousels === */
.p-carrousel { position: relative; }
.p-carrousel-piste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 80%); gap: var(--p-gap-cartes); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .p-carrousel-piste { grid-auto-columns: calc((100% - var(--p-gap-cartes)) / 2); } }
@media (min-width: 1200px) { .p-carrousel-piste { grid-auto-columns: calc((100% - 3 * var(--p-gap-cartes)) / 4); } }
.p-carrousel-item { scroll-snap-align: start; }
.p-carrousel-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.p-rond { width: 48px; height: 48px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }

/* === Diagnostics : encadré clair dans les deux modes === */
.p-dpe-cadre { position: relative; background: var(--p-papier-dpe); color: var(--p-encre-dpe); padding: 24px; overflow-x: auto; overflow-y: hidden; }
/* Le cadre vide n'a rien à faire défiler : le filigrane incliné déborde de sa
   boîte et suffisait à faire apparaître deux barres. Il est rogné, jamais défilé. */
.p-dpe-cadre--vide { overflow: hidden; }
.p-dpe-vide { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; opacity: 0.35; }
.p-dpe-vide-titre { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.p-dpe-vide-barre { display: block; margin: 3px 0; padding: 2px 8px; border: 1px solid currentColor; font-size: 12px; }
.p-dpe-filigrane { position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-12deg); font-family: var(--p-serif); font-size: clamp(1.4rem, 3vw, 2.2rem); text-align: center; pointer-events: none; }
/* === Accueil === */
.p-heros--accueil { min-height: min(100vh, 860px); }
.p-heros-chapeau { max-width: 44ch; margin-bottom: 32px; }
.p-heros-pied { display: flex; justify-content: space-between; align-items: center; margin-top: 64px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.p-heros-defilez { text-decoration: none; }
/* Index 01-02-03 : les numéros À GAUCHE d'un filet vertical, comme la maquette, espacés et décollés du bord de la page. */
.p-index { position: absolute; left: calc(var(--p-marge) + 24px); top: 28%; display: none; gap: 52px; list-style: none; margin: 0; padding: 14px 22px 14px 0; border-right: 1px solid var(--p-sur-photo); font-size: 11px; letter-spacing: 0.14em; text-align: right; font-variant-numeric: tabular-nums; opacity: 0.8; }
@media (min-width: 1200px) { .p-index { display: grid; } .p-heros-contenu { padding-left: calc(var(--p-marge) + 64px); } }
.p-entete-section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: var(--p-gap-titre); }
.p-territoires-grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 992px) { .p-territoires-grille { grid-template-columns: 5fr 7fr; } }
.p-territoires-carte .p-carte-toile { aspect-ratio: 4 / 3; border: 0; background: transparent; }
.p-chiffres { display: grid; gap: 24px; margin-top: 40px; }
.p-chiffres--quatre { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .p-chiffres--quatre { grid-template-columns: repeat(4, 1fr); } }
.p-grille-trois { display: grid; gap: var(--p-gap-cartes); grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .p-grille-trois { grid-template-columns: repeat(3, 1fr); } }

/* === Pastilles et épingle === */
.p-pastille span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--p-rupture-texte); color: var(--p-rupture); font-family: var(--p-sans); font-size: 12px; font-weight: 600; }
.p-section--rupture .p-pastille span { background: var(--p-texte); color: var(--p-rupture); }
.p-epingle span { display: block; width: 24px; height: 32px; background: var(--p-accent); clip-path: path('M12 0C5.4 0 0 5.4 0 12c0 9 12 20 12 20s12-11 12-20C24 5.4 18.6 0 12 0z'); }
/* === Annonces === */
.p-heros--annonces { min-height: auto; }
.p-heros--annonces .p-heros-contenu { padding-bottom: 40px; }
.p-ariane ol { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0 0 24px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.p-ariane li + li::before { content: '›'; margin-right: 12px; }
.p-ariane a { text-decoration: none; }
.p-coordonnees--droite { position: absolute; right: var(--p-marge); top: calc(var(--p-entete-h) + 24px); text-align: right; }
.p-recherche-barre { display: grid; gap: 0; border: 1px solid var(--p-sur-photo); background: var(--p-voile); margin-top: 32px; }
@media (min-width: 992px) { .p-recherche-barre { grid-template-columns: 1.4fr 1.4fr 1.2fr auto auto; align-items: stretch; } }
.p-recherche-champ { padding: 14px 20px; border-right: 1px solid var(--p-sur-photo); margin: 0; }
.p-recherche-libelle { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; cursor: pointer; }
.p-recherche-champ .p-champ { border: 0; padding: 4px 32px 4px 0; min-height: 32px; color: var(--p-sur-photo); }
.p-recherche-champ .p-champ option { color: initial; }
.p-recherche-valeur { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
/* Budget : un champ de saisie franc (bordure, curseur, unité), pas une valeur de lecture. */
.p-budget-saisie { display: flex; align-items: center; border: 1px solid var(--p-sur-photo); background: var(--p-menu-survol); padding: 0 12px; }
.p-budget-saisie:focus-within { border-color: var(--p-accent-texte); }
.p-budget-saisie .p-champ, .p-recherche-champ .p-budget-saisie .p-champ { border: 0; background: transparent; padding: 6px 8px 6px 0; min-height: 36px; -moz-appearance: textfield; appearance: textfield; }
.p-budget-saisie .p-champ::-webkit-outer-spin-button, .p-budget-saisie .p-champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.p-budget-saisie .p-champ::placeholder { color: inherit; opacity: 0.6; }
.p-budget-unite { font-size: 14px; opacity: 0.8; }
.p-filtres .p-budget-saisie { border-color: var(--p-filet); background: transparent; }
.p-recherche-plus { display: flex; align-items: center; gap: 12px; padding: 0 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.p-annonces-mise { display: grid; gap: 40px; padding-top: 48px; padding-bottom: var(--p-gap-section); scroll-margin-top: var(--p-entete-h); }
@media (min-width: 1024px) { .p-annonces-mise { grid-template-columns: 260px minmax(0, 1fr); } .p-filtres { position: sticky; top: calc(var(--p-entete-h) + 16px); max-height: calc(100vh - var(--p-entete-h) - 32px); overflow-y: auto; } }
.p-filtres-entete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
.p-filtres-reinit { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.p-filtre { border: 0; border-top: 1px solid var(--p-filet); padding: 16px 0; margin: 0; }
.p-filtre-titre { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-accent-texte); padding: 0; margin-bottom: 12px; display: block; }
.p-filtre-liste { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; max-height: 220px; overflow-y: auto; font-size: 14px; }
.p-filtre-liste label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.p-filtre-compte { margin-left: auto; color: var(--p-texte-doux); font-variant-numeric: tabular-nums; }
.p-filtre--fourchette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-filtre--fourchette legend { grid-column: 1 / -1; }
.p-champ--petit { min-height: 40px; padding: 8px 12px; font-size: 13px; }
/* Colonne d'affinage compacte : tous les critères tiennent dans la hauteur
   d'écran sans barre de défilement propre (le défilement reste un filet de
   secours sur les très petites fenêtres, fin et discret). */
.p-filtres { scrollbar-width: thin; scrollbar-color: var(--p-filet) transparent; }
.p-filtres .p-filtres-entete { margin-bottom: 8px; gap: 12px; }
.p-filtres .p-encart-titre { margin-bottom: 0; }
.p-filtres .p-filtre { padding: 10px 0; }
.p-filtres .p-filtre-titre { margin-bottom: 6px; }
.p-filtres .p-champ { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.p-filtres .p-filtre-liste { margin-top: 6px; gap: 2px; max-height: 118px; font-size: 13px; }
.p-filtres .p-filtre-liste label { min-height: 26px; }
.p-filtres .p-filtre-liste:not([data-liste-villes]) { max-height: none; }
.p-filtres .p-bouton { min-height: 40px; padding: 8px 20px; width: 100%; justify-content: center; }
.p-filtres p { margin: 0; }
.p-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.p-puce button { min-height: 36px; padding: 6px 12px; border: 1px solid var(--p-accent-texte); background: transparent; color: inherit; font-size: 12px; cursor: pointer; }
.p-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 8px 0 24px; }
.p-outils-compte { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-texte-doux); margin-right: auto; }
.p-outils-tri { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.p-outils-mots { display: flex; align-items: center; gap: 8px; }
.p-outils-mots .p-champ { width: 240px; }
.p-outils-vues { display: flex; gap: 4px; }
.p-vue { width: 44px; height: 44px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; }
.p-vue[aria-pressed="true"] { border-color: var(--p-filet); color: var(--p-accent-texte); }
.p-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--p-gap-cartes); grid-template-columns: 1fr; }
@media (min-width: 768px) { .p-liste { grid-template-columns: repeat(2, 1fr); } }
.p-liste.p-liste--lignes { grid-template-columns: 1fr; }
.p-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.p-page { width: 44px; height: 44px; border: 1px solid var(--p-filet); background: transparent; color: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
.p-page[aria-current="page"] { border-color: var(--p-accent-texte); color: var(--p-accent-texte); }
.p-resultat-vide p { margin-bottom: 32px; }
.p-squelette { background: var(--p-fond-doux); }
.p-squelette-image { aspect-ratio: 16 / 10; }
.p-squelette-ligne { height: 14px; margin-top: 12px; width: 70%; }
.p-squelette-ligne--courte { width: 40%; }
.p-annonces-resultats[aria-busy="true"] .p-carte-toile { opacity: 0.5; }
/* === Conseiller === */
.p-conseiller-heros { display: grid; gap: 40px; align-items: end; }
@media (min-width: 992px) { .p-conseiller-heros { grid-template-columns: 1fr 1fr; } }
.p-conseiller-portrait img, .p-portrait-repli { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; }
.p-portrait-repli { display: grid; place-items: center; background: var(--p-fond-doux); color: var(--p-texte-doux); font-family: var(--p-serif); font-size: 4rem; }
.p-bande-chiffres { border-bottom: 1px solid var(--p-filet); padding: 48px 0; }
/* Maquette : l'icône à gauche, et à sa droite le chiffre, son libellé et son texte EMPILÉS (colonne). Les trois paragraphes sont forcés dans la colonne 2 : sans cela, la grille les répartissait dans les cellules libres, à côté de l'icône. */
.p-bande-chiffres .p-chiffre { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; column-gap: 24px; }
.p-bande-chiffres .p-chiffre-icone { grid-column: 1; grid-row: 1 / span 3; margin: 0; padding-top: 4px; font-size: 34px; line-height: 1; }
.p-bande-chiffres .p-chiffre > p { grid-column: 2; margin-top: 0; }
.p-bande-chiffres .p-chiffre > .p-chiffre-libelle { margin-top: 14px; max-width: 14ch; font-size: 10px; line-height: 1.6; }
.p-bande-chiffres .p-chiffre > .p-chiffre-texte { margin-top: 22px; max-width: 24ch; font-size: 12px; line-height: 1.7; }
/* Chiffres alignés sur la ligne de base, comme la maquette (« 12 », pas « I2 ») : les chiffres elzéviriens de Cormorant lisent mal le 1. */
.p-bande-chiffres .p-chiffre-valeur { white-space: nowrap; font-variant-numeric: lining-nums; font-weight: 400; }
@media (min-width: 768px) { .p-bande-chiffres .p-chiffre + .p-chiffre { border-left: 1px solid var(--p-filet); padding-left: 32px; } }
.p-bande-chiffres .p-chiffres { margin-top: 0; }
.p-expertise-grille { display: grid; gap: 48px; }
@media (min-width: 992px) { .p-expertise-grille { grid-template-columns: 5fr 7fr; } }
.p-chiffres--deux { grid-template-columns: repeat(2, 1fr); }
.p-conseiller-final-grille { display: grid; gap: 48px; }
@media (min-width: 992px) { .p-conseiller-final-grille:not(.p-conseiller-final-grille--seule) { grid-template-columns: 5fr 7fr; } }
.p-temoignage blockquote { margin: 0; font-family: var(--p-serif); font-size: 1.6rem; line-height: 1.35; }
.p-temoignage blockquote::before { content: '“'; display: block; font-size: 3rem; line-height: 1; color: var(--p-accent-texte); }
.p-temoignage figcaption { margin-top: 24px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.p-temoignage figcaption span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--p-texte-doux); }
.p-temoignages-nav { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.p-pastille-bulle { text-align: center; }
.p-pastille-bulle p { margin: 0 0 10px; font-family: var(--p-sans); font-size: 13px; }
.p-pastille-bulle form { margin: 0; }
.p-pastille-bulle .p-bouton { font-size: 11px; }
.p-pastille-nav { width: 10px; height: 10px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer; }
.p-pastille-nav[aria-current="true"] { background: currentColor; }
.p-discutons { border: 1px solid var(--p-filet); padding: 40px; background: var(--p-fond-doux); }
/* === Agence === */
.p-heros--page { min-height: min(80vh, 720px); }
.p-agence-recit { display: grid; }
@media (min-width: 992px) { .p-agence-recit { grid-template-columns: 5fr 7fr; } }
.p-agence-recit-texte { padding: var(--p-gap-section) var(--p-marge); max-width: 640px; justify-self: end; }
.p-agence-recit-texte p + p { margin-top: 16px; }
.p-agence-recit-image { position: relative; min-height: 420px; }
.p-agence-recit-image img { width: 100%; height: 100%; object-fit: cover; }
.p-mission { position: absolute; left: 10%; right: 10%; bottom: 40px; background: var(--p-fond); padding: 32px; border: 1px solid var(--p-filet); }
.p-mission-titre { font-family: var(--p-serif); font-weight: 400; font-size: 1.8rem; line-height: 1.15; margin-bottom: 12px; }
.p-valeurs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; }
@media (min-width: 992px) { .p-valeurs { grid-template-columns: repeat(6, 1fr); } }
.p-valeur { padding: 24px; border-left: 1px solid var(--p-filet); }
.p-valeur i { font-size: 32px; color: var(--p-accent-texte); }
.p-valeur h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 24px 0 12px; }
.p-valeur p { font-size: 13px; color: var(--p-texte-doux); }
.p-equipe-grille { display: grid; gap: 40px; }
@media (min-width: 992px) { .p-equipe-grille { grid-template-columns: 4fr 8fr; } }
@media (min-width: 1200px) { .p-carrousel-piste--trois { grid-auto-columns: calc((100% - 2 * var(--p-gap-cartes)) / 3); } }
.p-membre img, .p-membre .p-portrait-repli { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; }
.p-membre-nom { font-family: var(--p-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 16px; }
.p-membre-nom a { text-decoration: none; }

/* === Contact === */
.p-contact-grille { display: grid; border-top: 1px solid var(--p-filet); }
/* Formulaire à gauche, carte sur l'autre moitié de l'écran, carte d'agence posée dessus. */
@media (min-width: 1024px) { .p-contact-grille { grid-template-columns: 1fr 1fr; } }
.p-contact-formulaire { padding: 48px var(--p-marge); scroll-margin-top: var(--p-entete-h); }
.p-contact-liste { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 20px; }
.p-contact-liste li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.p-contact-liste i { color: var(--p-accent-texte); margin-top: 4px; }
.p-contact-liste p, .p-contact-liste address { font-size: 13px; color: var(--p-texte-doux); font-style: normal; }
.p-contact-carte { position: relative; z-index: 0; isolation: isolate; min-height: 560px; border-left: 1px solid var(--p-filet); }
@media (min-width: 1024px) { .p-contact-carte { min-height: calc(100vh - var(--p-entete-h)); } }
.p-contact-carte .p-carte-toile { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.p-contact-carte .p-carte-invite { position: absolute; z-index: 500; right: 24px; bottom: 24px; }
/* La carte d'agence : arrondie, opaque, en haut à gauche. Seule exception à la
   règle « rayon 0 » du modèle, demandée pour cet élément. */
.p-contact-fiche { position: absolute; z-index: 600; top: 24px; left: 24px; width: min(380px, calc(100% - 48px)); padding: 28px; background: var(--p-fond); color: var(--p-texte); border: 1px solid var(--p-filet); border-radius: 20px; }
.p-contact-fiche .p-surtitre { margin-bottom: 20px; }
.p-contact-fiche .p-partage { margin-bottom: 20px; }
.p-contact-fiche > p:last-child { margin: 0; }
.p-engagements { border-top: 1px solid var(--p-filet); padding: 56px 0; }
.p-engagements-liste { display: grid; gap: 32px; list-style: none; }
@media (min-width: 992px) { .p-engagements-liste { grid-template-columns: repeat(4, 1fr); } }
.p-engagements-liste li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.p-engagements-liste i { font-size: 32px; color: var(--p-accent-texte); }
.p-engagement-titre { font-family: var(--p-serif); font-weight: 400; font-size: 1.3rem; margin-bottom: 8px; }
.p-engagements-liste p { font-size: 13px; color: var(--p-texte-doux); }
/* === Estimation === */
.p-estim-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--p-sur-photo); background: var(--p-voile); margin: 32px 0 0; padding: 0; }
@media (min-width: 992px) { .p-estim-types { grid-template-columns: 1.2fr repeat(5, 1fr) 2fr; } }
.p-estim-question { float: left; padding: 24px; font-size: 13px; max-width: 160px; }
.p-estim-type { display: grid; justify-items: center; gap: 12px; padding: 24px 12px; border-left: 1px solid var(--p-sur-photo); cursor: pointer; font-size: 13px; text-align: center; }
.p-estim-type input { position: absolute; opacity: 0; }
.p-estim-type i { font-size: 28px; }
.p-estim-type:has(input:checked) { border-bottom: 2px solid var(--p-sur-photo); }
.p-estim-type:has(input:focus-visible) { outline: 2px solid var(--p-focus); outline-offset: -4px; }
.p-estim-depart { grid-column: 1 / -1; display: grid; gap: 12px; padding: 20px 24px; border-left: 1px solid var(--p-sur-photo); align-content: center; }
@media (min-width: 992px) { .p-estim-depart { grid-column: auto; } }
.p-estim-mention { font-size: 11px; opacity: 0.8; }
.p-estim-groupe { border: 0; border-top: 1px solid var(--p-filet); padding: 24px 0; margin: 0; }
.p-estim-equipements { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; padding: 0; margin: 16px 0 0; }
.p-modale--large[open] { width: min(94vw, 880px); max-height: 90vh; overflow-y: auto; }
.p-methode-grille { display: grid; gap: 40px; }
@media (min-width: 992px) { .p-methode-grille { grid-template-columns: 3fr 9fr; } }
.p-methode-etapes { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .p-methode-etapes { grid-template-columns: repeat(4, 1fr); } .p-methode-etapes--trois { grid-template-columns: repeat(3, 1fr); } }
.p-methode-etapes li { padding: 0 24px 24px; border-left: 1px solid var(--p-filet); }
.p-methode-etapes i { font-size: 28px; color: var(--p-accent-texte); }
.p-methode-index { display: block; font-family: var(--p-serif); font-size: 2rem; margin: 16px 0 8px; }
.p-methode-etapes h3 { font-family: var(--p-serif); font-weight: 400; font-size: 1.2rem; margin: 8px 0; }
.p-methode-etapes p { font-size: 13px; color: var(--p-texte-doux); }
.p-marche-grille { display: grid; gap: 40px; }
@media (min-width: 992px) { .p-marche-grille { grid-template-columns: 4fr 5fr 3fr; } .p-marche-grille--sans-etude { grid-template-columns: 5fr 7fr; } }
.p-etude { background: var(--p-rupture-texte); color: var(--p-rupture); padding: 28px; }
.p-etude-titre { font-family: var(--p-serif); font-weight: 400; font-size: 1.5rem; margin-bottom: 8px; }
.p-etude img { margin: 20px 0; aspect-ratio: 4 / 3; object-fit: cover; }
.p-estim-cta-actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.p-estim-appel { display: grid; font-size: 1.1rem; }
.p-estim-appel a { text-decoration: none; }

/* ===========================================================================
   LISTES DÉROULANTES — pionnier-select.js
   La liste ouverte d'un <select> natif est dessinée par le système (surbrillance
   bleue, police système) et ne se style pas : le script la remplace par un
   bouton + une listbox ARIA. Le select natif RESTE dans le document, masqué,
   et porte seul name/value. Sans JavaScript, « select.p-champ » fait le rendu.
   Le menu est une surface d'encre dans les deux modes, comme le héros : il
   ne dépend d'aucun jeton redéfini localement (--p-texte l'est dans le héros).
   =========================================================================== */
.p-select { position: relative; }
/* Une boîte d'un pixel, jamais display:none : un champ requis retiré du rendu
   n'est plus focalisable et le navigateur refuse alors d'émettre « submit ». */
.p-select-natif { position: absolute; left: 16px; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.p-select-bouton { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; background-image: none; }
.p-select-valeur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-select-chevron { flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 4px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--p-duree) var(--p-courbe), margin var(--p-duree) var(--p-courbe); }
.p-select--ouvert .p-select-chevron { transform: rotate(225deg); margin-top: 3px; }
.p-select-bouton:focus-visible { outline: 1px solid var(--p-focus); outline-offset: 2px; }
.p-select--ouvert .p-select-bouton { border-color: var(--p-accent-texte); }
.p-select-liste { position: fixed; z-index: 200; top: 0; left: 0; margin: 0; padding: 4px 0; list-style: none; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; background: var(--p-encre-photo); color: var(--p-sur-photo); border: 1px solid var(--p-menu-filet); scrollbar-width: thin; scrollbar-color: var(--p-menu-defilement) transparent; }
.p-select-liste[hidden] { display: none; }
.p-select-option { padding: 12px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: var(--p-sur-photo); cursor: pointer; }
.p-select-option--actif { background: var(--p-menu-survol); color: var(--p-sur-photo); }
.p-select-option[aria-selected="true"] { color: var(--p-sur-photo); font-weight: 600; }
.p-select-option[aria-selected="true"]::after { content: ''; float: right; width: 5px; height: 10px; margin-top: 2px; border-right: 1.5px solid var(--color-primary-sur-sombre); border-bottom: 1.5px solid var(--color-primary-sur-sombre); transform: rotate(45deg); }
.p-select-option[aria-disabled="true"] { opacity: 0.45; cursor: default; }

/* === Héros de la fiche : repère de défilement ===
   Un trait qui coule vers le bas sous le mot « Défiler » : dit qu'il y a une
   suite sans rien promettre de plus. Posé en bas au centre, hors de la colonne
   de texte. L'animation s'éteint si le système demande moins de mouvement. */
.p-heros-defiler { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: grid; justify-items: center; gap: 8px; padding: 4px 12px; transform: translateX(-50%); color: var(--p-sur-photo); text-decoration: none; }
.p-heros-defiler-texte { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.p-heros-defiler-trait { position: relative; display: block; width: 1px; height: 36px; overflow: hidden; background: var(--p-menu-filet); }
.p-heros-defiler-trait::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: var(--p-sur-photo); animation: p-defiler 2.2s var(--p-courbe) infinite; }
@keyframes p-defiler { 0% { transform: translateY(-14px); } 70%, 100% { transform: translateY(36px); } }
@media (prefers-reduced-motion: reduce) { .p-heros-defiler-trait::after { animation: none; transform: translateY(11px); } }
@media (max-width: 767px) { .p-heros-defiler { display: none; } }

/* === Territoires (docs/designs/Pionnier/territoires.png) === */
.p-heros--territoires { min-height: clamp(540px, 64vh, 700px); align-items: flex-start; }
.p-heros--territoires .p-heros-contenu { padding-top: calc(var(--p-entete-h) + 24px); padding-bottom: 48px; width: 100%; }
.p-heros--territoires .p-ariane ol { margin-bottom: 20px; }
.p-heros--territoires .p-heros-titre { max-width: 16ch; margin: 24px 0 24px; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.p-heros--territoires .p-heros-chapeau { max-width: 42ch; margin-bottom: 24px; font-size: 14px; line-height: 1.9; }
.p-filet-court { display: block; width: 24px; height: 1px; background: var(--p-menu-texte); }
.p-terr-stats { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 24px 40px; list-style: none; padding: 0; margin: 40px 0 0; }
@media (min-width: 768px) { .p-terr-stats { grid-template-columns: repeat(4, auto); gap: 24px 48px; } }
.p-terr-stats li { display: flex; align-items: flex-start; gap: 12px; }
.p-terr-stat-icone { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 6px; border: 1px solid var(--p-accent-texte); border-radius: 50%; color: var(--p-accent-texte); font-size: 8px; }
.p-terr-stat-corps { display: grid; gap: 6px; }
.p-terr-stat-corps strong { font-family: var(--p-serif); font-weight: 400; font-size: 1.9rem; line-height: 1; font-variant-numeric: lining-nums; }
.p-terr-stat-corps span { font-size: 9px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.7; text-transform: uppercase; opacity: 0.8; }

/* Index à droite : un filet vertical, le numéro actif repéré. Décor (aria-hidden). */
.p-index--droite { left: auto; right: calc(var(--p-marge) + 24px); top: 36%; padding: 14px 0 14px 22px; border-right: 0; border-left: 1px solid var(--p-sur-photo); text-align: left; gap: 36px; }
.p-index--droite li { opacity: 0.55; }
.p-index--droite .p-index-actif { opacity: 1; position: relative; }
.p-index--droite .p-index-actif::before { content: ''; position: absolute; left: -26px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border: 1px solid var(--p-accent-texte); border-radius: 50%; background: var(--p-encre-photo); }

/* Fiche du territoire mis en avant : verre sombre sur la photo, texte clair dans les deux modes. */
.p-terr-vedette { position: absolute; right: calc(var(--p-marge) + 64px); bottom: 48px; width: min(290px, 100%); padding: 28px 30px; border: 1px solid var(--p-menu-filet); background: var(--p-voile); backdrop-filter: blur(6px); display: none; }
@media (min-width: 992px) { .p-terr-vedette { display: block; } }
.p-terr-vedette .p-terr-vedette-etiquette { font-size: 9px; margin-bottom: 14px; color: var(--p-menu-texte); }
.p-terr-vedette .p-terr-vedette-etiquette::before { display: none; }
.p-terr-vedette-titre { font-family: var(--p-serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin-bottom: 10px; }
.p-terr-vedette p { font-size: 12px; line-height: 1.8; color: var(--p-menu-texte); margin-bottom: 20px; }
.p-terr-vedette .p-lien-fleche { font-size: 11px; background: transparent; border: 0; border-bottom: 1px solid currentColor; color: var(--p-sur-photo); cursor: pointer; }
.p-terr-vedette .p-lien-fleche:hover { color: var(--p-sur-photo); opacity: 0.8; }
.p-terr-recherche { margin: 0; }

/* Carte : texte à gauche, carte pleine largeur à droite, filet en pied. */
.p-terr-carte { display: grid; border-bottom: 1px solid var(--p-filet); }
@media (min-width: 992px) { .p-terr-carte { grid-template-columns: minmax(300px, 3fr) 7fr; min-height: 520px; } }
.p-terr-carte-texte { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 56px var(--p-marge); }
@media (min-width: 992px) { .p-terr-carte-texte { padding-left: max(var(--p-marge), calc((100vw - var(--p-max)) / 2 + var(--p-marge))); padding-right: 40px; border-right: 1px solid var(--p-filet); } }
.p-terr-carte-texte .p-titre-section { font-size: clamp(1.9rem, 2.8vw, 2.4rem); }
.p-terr-carte-texte > p { font-size: 13px; line-height: 1.9; color: var(--p-texte-doux); max-width: 30ch; }
.p-terr-carte-texte > p:last-child { margin-top: 28px; }
.p-terr-carte-texte .p-bouton { min-height: 48px; font-size: 11px; }
.p-terr-carte-toile { position: relative; min-height: 420px; background: var(--p-fond-doux); }
.p-terr-carte-toile .p-carte-toile { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
.p-terr-carte-toile .leaflet-top.leaflet-left { left: auto; right: 0; }
.p-terr-carte-toile .leaflet-control-zoom { margin: 20px 24px 0 0; }
.p-terr-legende { position: absolute; left: 32px; bottom: 28px; z-index: 2; display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; pointer-events: none; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-texte); text-shadow: 0 0 6px var(--p-fond); }
.p-terr-legende li { display: flex; align-items: center; gap: 12px; }
.p-terr-legende-puce { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border: 1px solid var(--p-accent-texte); border-radius: 50%; font-size: 8px; letter-spacing: 0; color: var(--p-accent-texte); }
.p-terr-legende-puce--n { background: var(--p-accent-texte); color: var(--p-fond); }

/* Territoires en lumière : vignettes verticales, image pleine et voile. */
.p-terr-lumiere { padding-top: 56px; padding-bottom: 56px; }
.p-terr-lumiere .p-surtitre { margin-bottom: 24px; font-size: 10px; }
.p-terr-cartes { display: grid; gap: var(--p-gap-cartes); grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .p-terr-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .p-terr-cartes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .p-terr-cartes { grid-template-columns: repeat(5, 1fr); } }
.p-terr-vignette { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 340px; height: 100%; border: 1px solid var(--p-filet); overflow: hidden; background: var(--p-fond-doux); color: var(--p-sur-photo); }
@media (min-width: 1280px) { .p-terr-vignette { min-height: 0; aspect-ratio: 175 / 290; } }
.p-terr-carte-item, .p-terr-carte-item .p-terr-recherche { height: 100%; }
.p-terr-vignette img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--p-courbe); }
.p-terr-vignette::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--p-voile-bas) 0%, var(--p-voile-milieu) 48%, var(--p-voile-haut) 100%); }
.p-terr-carte-item:hover .p-terr-vignette img { transform: scale(1.04); }
.p-terr-vignette-corps { width: 100%; padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.p-terr-vignette-ville { font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary-sur-sombre); }
.p-terr-vignette-titre { font-family: var(--p-serif); font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.p-terr-vignette-texte { font-size: 11px; line-height: 1.8; color: var(--p-menu-texte); }
.p-terr-vignette-lien { position: static; margin-top: 10px; padding: 0; display: flex; justify-content: space-between; align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; }
/* Toute la vignette est cliquable, sans second lien imbriqué. */
.p-terr-vignette-lien::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.p-terr-vignette-lien:focus-visible { outline: none; }
.p-terr-vignette:has(.p-terr-vignette-lien:focus-visible) { outline: 2px solid var(--p-focus); outline-offset: 3px; }
.p-terr-badge { position: absolute; top: 12px; right: 12px; padding: 4px 10px; background: var(--p-sur-photo); color: var(--p-encre-photo); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* Bande d'accompagnement et récemment explorés : deux ruptures claires collées. */
.p-terr-accompagnement { padding: 40px 0; }
.p-terr-accompagnement-grille { display: grid; gap: 24px; align-items: center; }
@media (min-width: 768px) { .p-terr-accompagnement-grille { grid-template-columns: auto 1fr auto; gap: 32px; } }
.p-terr-accompagnement-icone { font-size: 44px; line-height: 1; color: var(--p-accent-texte); }
.p-terr-accompagnement-titre { font-family: var(--p-serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin-bottom: 6px; }
.p-terr-accompagnement p { font-size: 13px; line-height: 1.8; max-width: 56ch; }
.p-bouton.p-bouton--encre { background: var(--p-texte); border-color: var(--p-texte); color: var(--p-rupture); }
.p-bouton.p-bouton--encre:hover { background: var(--p-rupture-doux); border-color: var(--p-rupture-doux); color: var(--p-rupture); }
.p-terr-recents { padding: 18px 0; border-top: 1px solid var(--p-rupture-filet); }
.p-terr-recents-grille { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.p-terr-recents-titre { font-family: var(--p-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.p-terr-puces { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.p-terr-puce { padding: 10px 20px; border: 1px solid var(--p-filet); background: transparent; color: var(--p-texte); font-size: 12px; cursor: pointer; transition: background-color 160ms, color 160ms; }
.p-terr-puce:hover { background: var(--p-texte); color: var(--p-rupture); }
.p-terr-recents-tous { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }