/* ============================================================
   BANDEAU COURTIER ASSIGNE (au-dessus du hero)
   ============================================================
   Affiche uniquement quand un courtier equipier est assigne au
   territoire. Layout horizontal : portrait rond a gauche, nom
   + overline au milieu, CTA "Son mot" a droite. Ton chaleureux
   mais sobre, ne concurrence pas le hero visuellement. */
.page-territoire .courtier-bandeau {
  margin: 0.5rem auto 1.25rem;
  padding: 0;
  max-width: 1400px;
  width: calc(100% - 2rem);
}
.courtier-bandeau-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  /* Gradient de base propre (waves retires pour l'instant). Un halo
     dore radial subtil au centre remplace les courbes -- plus discret. */
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%,
      rgba(217, 188, 130, 0.10) 0%,
      rgba(217, 188, 130, 0) 70%),
    linear-gradient(135deg,
      rgba(205, 167, 92, 0.12) 0%,
      rgba(13, 23, 33, 0.85) 45%,
      rgba(13, 23, 33, 0.70) 100%);
  border: 1px solid rgba(205, 167, 92, 0.45);
  border-radius: 999px;
  box-shadow:
    0 8px 28px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(205, 167, 92, 0.08),
    inset 0 1px 0 rgba(255, 220, 160, 0.06);
}
@media (max-width: 700px) {
  .courtier-bandeau-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    border-radius: 20px;
    padding: 0.9rem 1.1rem;
  }
}

/* Portrait rond (66px avec anneau dore) */
.courtier-bandeau-portrait {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(205, 167, 92, 0.22), rgba(13, 23, 33, 0.6));
  border: 1.5px solid rgba(217, 188, 130, 0.65);
  box-shadow:
    0 0 0 3px rgba(13, 23, 33, 0.9),
    0 0 0 4px rgba(205, 167, 92, 0.28),
    0 4px 14px -6px rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent, #cda75c);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
}
.courtier-bandeau-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texte central : overline sur ligne 1, nom sur ligne 2, titre sur ligne 3.
   Le padding-left + border-left cree le separateur vertical dore subtil
   entre le portrait et le texte (comme dans la maquette). */
.courtier-bandeau-texte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding-left: 1.15rem;
  border-left: 1px solid rgba(205, 167, 92, 0.30);
}
.courtier-bandeau-overline {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-bright, #eecf8e);
  line-height: 1.4;
  font-weight: 600;
}
/* Nom en Cormorant italic pour la touche editoriale premium */
.courtier-bandeau-nom {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  font-style: italic;
  color: var(--color-text, #f5efe6);
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.courtier-bandeau-titre {
  font-size: 0.82rem;
  color: var(--color-text-tertiary, #b8b0a0);
  font-style: italic;
  line-height: 1.4;
}
@media (max-width: 700px) {
  .courtier-bandeau-texte {
    grid-column: 2;
    grid-row: 1;
    /* Sur mobile, retirer le separateur vertical (moins joli en stack) */
    padding-left: 0.85rem;
    border-left-color: rgba(205, 167, 92, 0.20);
  }
  .courtier-bandeau-portrait {
    width: 54px;
    height: 54px;
  }
  .courtier-bandeau-nom {
    font-size: 1.15rem;
  }
}

/* CTA pill vers #mot-courtier : bordure or fine, texte or, hover
   qui remplit doucement l'interieur. Fleche qui glisse au hover. */
.courtier-bandeau-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  background: rgba(205, 167, 92, 0.06);
  border: 1px solid rgba(217, 188, 130, 0.6);
  color: var(--color-accent-bright, #eecf8e);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.courtier-bandeau-cta > span {
  transition: transform 0.25s ease;
}
.courtier-bandeau-cta:hover {
  background: rgba(217, 188, 130, 0.18);
  border-color: rgba(232, 205, 145, 0.85);
  color: #f8e6b8;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(217, 188, 130, 0.35);
}
.courtier-bandeau-cta:hover > span {
  transform: translateX(3px);
}
@media (max-width: 700px) {
  .courtier-bandeau-cta {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    margin-top: 0.5rem;
  }
}


/* ============================================================
   PALETTE TERRITOIRE V3 (surcharge locale)
   ============================================================
   Refinement des tokens propose par Alain : or plus champagne,
   fond plus profond, systeme de lignes a 3 niveaux, radius
   plus genereux, ombres dorees. Applique SEULEMENT a la page
   .page-territoire pour ne pas casser les autres pages V3.
   ============================================================ */
.page-territoire {
  --bg-main: #071321;
  --bg-deep: #06101c;
  --bg-panel: rgba(10, 24, 42, 0.88);
  --bg-panel-2: rgba(13, 29, 48, 0.92);
  --line-soft: rgba(205, 167, 92, 0.22);
  --line-mid: rgba(205, 167, 92, 0.42);
  --line-strong: rgba(205, 167, 92, 0.72);
  --gold-main: #cda75c;
  --gold-soft: #d9bc82;
  --gold-bright: #e5c989;
  --gold-muted: #a98a54;
  --text-main: #f3efe8;
  --text-soft: rgba(243, 239, 232, 0.78);
  --text-muted: rgba(243, 239, 232, 0.55);
  --shadow-gold: 0 0 28px rgba(205, 167, 92, 0.10);
  --shadow-gold-hover: 0 0 38px rgba(205, 167, 92, 0.18);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;

  /* Mapping vers les tokens du CSS edifice pour heritage */
  --color-bg: var(--bg-main);
  --color-surface: var(--bg-panel);
  --color-surface-2: var(--bg-panel-2);
  --color-text: var(--text-main);
  --color-text-secondary: var(--text-soft);
  --color-text-tertiary: var(--text-muted);
  --color-border: var(--line-soft);
  --color-border-strong: var(--line-mid);
  --color-accent: var(--gold-main);
  --color-accent-bright: var(--gold-bright);
  --color-accent-soft: var(--gold-soft);
  --color-accent-dim: var(--gold-muted);
}


/* ============================================================
   iResidence — Territoire V3 · CSS additionnel
   Version 1.0 · Aout 2026
   Auteur : Claude x Alain Giguere
   ============================================================

   ROLE
   Ce fichier COMPLETE iresidence-edifice.css avec les composants
   propres a la page de territoire :
   - Barre CTA secondaire (Visite + Alerte) sous le hero
   - Grille d'edifices avec badge V3
   - Filtres d'inscriptions par territoire (2 colonnes)
   - Placeholder de statistiques APCIQ
   - Grille de liens utiles
   - Grille d'analyses (services)
   - Bloc CTA final (3-4 boutons)
   - Modaux Visite et Alerte

   Toutes les couleurs, typos et espacements viennent des
   variables --color-* et --space-* definies dans le CSS edifice.
   ============================================================ */


/* ============================================================
   1. HERO -- variante territoire (rythme un peu plus aere)
   ============================================================ */
.hero-territoire .hero-stat-valeur {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-accent-soft);
}


/* ============================================================
   2. BARRE CTA SECONDAIRE -- juste sous le hero
   ============================================================ */
.cta-secondaire-bar {
  max-width: var(--max-width);
  margin: -1.5rem auto 3rem;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 5;
}
.cta-secondaire-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
@media (max-width: 640px) {
  .cta-secondaire-inner {
    grid-template-columns: 1fr;
  }
}

/* Bouton dashed (Visite) -- pointillés dorés autour */
.cta-dashed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.15rem 1.5rem;
  border: 2px dashed var(--color-accent);
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
}
.cta-dashed:hover {
  background: rgba(200, 149, 69, 0.08);
  border-color: var(--color-accent-bright);
  transform: translateY(-2px);
}
.cta-dashed .cta-libelle {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  letter-spacing: 0.01em;
}
.cta-dashed .cta-sub {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  font-weight: 400;
}
.cta-dashed .cta-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

/* Bouton outline (Alerte) -- fin liseré doré */
.cta-outline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.15rem 1.5rem;
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}
.cta-outline:hover {
  background: rgba(200, 149, 69, 0.08);
  border-color: var(--color-accent-bright);
  transform: translateY(-2px);
}
.cta-outline .cta-libelle {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  letter-spacing: 0.01em;
}
.cta-outline .cta-sub {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  font-weight: 400;
}
.cta-outline .cta-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

/* Bouton conversation (or plein, hero + CTA final) */
.cta-conversation {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.15rem 1.75rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dim));
  color: #0d1721;
  border: none;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 6px 24px rgba(200, 149, 69, 0.28);
}
.cta-conversation:hover {
  background: linear-gradient(135deg, var(--color-accent-bright), var(--color-accent));
  transform: translateY(-2px);
  color: #0d1721;
  text-decoration: none;
}
.cta-conversation .cta-icon svg {
  width: 22px;
  height: 22px;
  color: #0d1721;
}


/* ============================================================
   3. BLOC EDIFICES -- grille de cards horizontales (Option C)
      Layout inspire du formulaire de rapport : thumb petit a gauche,
      titre + accroche a droite, module courriel-gate en dessous, CTA
      en bas a droite dans le flow naturel de la card.
   ============================================================ */
.edif-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.edif-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}
.edif-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
/* Le link devient une grille horizontale : thumb 160px | corps flex-1
   Padding genereux : le luxe vient de l'espace, pas des bordures. */
.edif-card-link {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.15rem;
  padding: 1.15rem;
  color: var(--color-text);
  text-decoration: none;
  align-items: stretch;
}
.edif-card-link:hover {
  color: var(--color-text);
  text-decoration: none;
}
/* Retrait du transform :translateY sur la card entiere -- deja gere par
   .edif-card:hover et redondant. On laisse le hover .edif-card-hint
   ci-dessous signaler la zone cliquable. */

/* Card V3 : liseré doré subtil + badge */
.edif-card-v3 {
  border-color: var(--color-accent-dim);
  box-shadow: 0 0 0 1px rgba(200, 149, 69, 0.2);
}
.edif-card-v3:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 12px 32px rgba(0, 0, 0, 0.4);
}

.edif-badge-v3 {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-bright));
  color: #0d1721;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(205, 167, 92, 0.3);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.edif-badge-v3-icon {
  font-size: 0.95em;
  line-height: 1;
}
.edif-card-v3:hover .edif-badge-v3 {
  box-shadow: 0 6px 16px rgba(205, 167, 92, 0.5);
}

/* Thumb : format arrondi (~160px, aspect 4/3), background-size:cover
   garantit qu'il ne se deforme jamais -- il recadre proprement selon
   la taille physique de l'image source. Radius genereux 14px. */
.edif-thumb {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center 40%;
  background-color: var(--color-surface-2);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
/* Gradient inutile sur les petits thumbs : desactive */
.edif-thumb::after {
  display: none;
}

/* Corps : titre + accroche + hint « Decouvrir » colle en bas.
   Pas de padding (padding est sur le link). */
.edif-corps {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0; /* evite les debordements de texte long */
}

.edif-nom {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  margin: 0;
  line-height: 1.2;
}

.edif-accroche {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hint discret « Decouvrir l'edifice → » colle en bas du corps.
   Signale que toute la zone photo+titre+corps est cliquable, sans
   competition avec les vraies actions dessous. */
.edif-corps-hint {
  margin-top: auto;
  padding-top: 0.5rem;
  color: rgba(200, 149, 69, 0.65);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.22s ease;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.edif-corps-hint-arrow {
  transition: transform 0.22s ease, color 0.22s ease;
  color: rgba(200, 149, 69, 0.55);
  font-size: 0.9rem;
  line-height: 1;
}
.edif-card-link:hover .edif-corps-hint {
  color: var(--color-accent);
}
.edif-card-link:hover .edif-corps-hint-arrow {
  transform: translateX(3px);
  color: var(--color-accent-bright, var(--color-accent));
}

/* Mobile : thumb un peu plus petit et titre reduit */
@media (max-width: 480px) {
  .edif-grille {
    grid-template-columns: 1fr;
  }
  .edif-card-link {
    grid-template-columns: 120px 1fr;
    gap: 0.85rem;
    padding: 0.95rem;
  }
  .edif-nom {
    font-size: 1.05rem;
  }
  .edif-corps-hint {
    font-size: 0.68rem;
  }
}

.edif-email-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-accent-soft);
  margin: auto 0 0.35rem;
  padding-top: 0.5rem;
  letter-spacing: 0.01em;
  opacity: 0.9;
}
.edif-compteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.15rem;
}
.edif-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.edif-badge-vte {
  background: rgba(200, 149, 69, 0.15);
  color: var(--color-accent-soft);
  border: 1px solid rgba(200, 149, 69, 0.35);
}
.edif-badge-loc {
  background: rgba(168, 163, 154, 0.12);
  color: var(--color-text-secondary);
  border: 1px solid rgba(168, 163, 154, 0.28);
}
.edif-badge-vide {
  background: transparent;
  color: var(--color-text-tertiary);
  border: 1px dashed var(--color-border);
  font-style: italic;
}

/* Mini-module courriel-gate : titre uppercase or (label pur, non cliquable)
   + 2 boutons compteurs cliquables dessous. Sorti du <a> pour permettre
   les clics individuels sans conflit avec la zone fiche.
   Separateurs subtils (0.14) : le luxe vient de l'espace, pas des lignes. */
.edif-email-module {
  padding: 1.05rem 1.15rem 1.15rem;
  border-top: 1px solid rgba(205, 167, 92, 0.14);
  border-bottom: 1px solid rgba(205, 167, 92, 0.14);
  background: linear-gradient(180deg,
    rgba(205, 167, 92, 0.04) 0%,
    rgba(13, 23, 33, 0) 100%);
}
.edif-email-titre {
  display: block;
  margin-bottom: 0.75rem;
  color: rgba(217, 188, 130, 0.85);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edif-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
/* Boutons compteurs premium : min-width 150px pour presence visuelle,
   padding genereux, chiffre serif dore plus grand pour attirer l'oeil,
   hover souleve avec shadow douce. */
.edif-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 150px;
  padding: 0.75rem 1.1rem;
  border: 1px solid rgba(205, 167, 92, 0.42);
  border-radius: 12px;
  background: rgba(205, 167, 92, 0.04);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.22s ease;
}
.edif-email-btn .edif-email-nb {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}
.edif-email-btn .edif-email-libelle {
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  flex: 1 1 auto;
}
.edif-email-btn .edif-email-arrow {
  color: var(--color-accent);
  transition: transform 0.22s ease;
  font-size: 1rem;
  line-height: 1;
}
.edif-email-btn:hover {
  border-color: rgba(217, 188, 130, 0.8);
  background: rgba(205, 167, 92, 0.10);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.edif-email-btn:hover .edif-email-arrow {
  transform: translateX(3px);
}
.edif-email-btn:hover .edif-email-libelle {
  color: var(--color-text);
}
/* Mention discrete "Aucune inscription active" pour les cards vides.
   Meme padding vertical que les boutons pour harmoniser la hauteur du
   bas de card entre les deux cas (avec / sans inscriptions). */
.edif-email-vide {
  margin: 0;
  padding: 0.55rem 0.15rem;
  color: var(--color-text-tertiary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.4;
}


/* ============================================================
   4. FILTRES INSCRIPTIONS TERRITOIRE -- 2 colonnes
   ============================================================ */
.ins-filtres-territoire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: 2rem;
}
@media (max-width: 720px) {
  .ins-filtres-territoire {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.ins-colonne {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 18px);
  padding: 1.75rem 1.75rem 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-gold, none);
  transition: box-shadow 0.4s ease;
}
.ins-colonne:hover {
  box-shadow: var(--shadow-gold-hover, none);
}

/* Vague dorée décorative au sommet de chaque colonne — ornement luxe.
   SVG data-URI : 3 lignes sinusoïdales dorées superposées, gradient
   qui s'estompe de gauche à droite. */
.ins-colonne::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 5rem;
  right: -2rem;
  height: 90px;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' fill='none'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'><stop offset='0%25' stop-color='%23cda75c' stop-opacity='0.75'/><stop offset='100%25' stop-color='%23cda75c' stop-opacity='0'/></linearGradient></defs><path d='M0 45 C 120 15 240 75 360 45 S 600 15 720 45' stroke='url(%23g)' stroke-width='1' fill='none'/><path d='M0 50 C 130 22 250 78 380 50 S 600 22 720 50' stroke='url(%23g)' stroke-width='0.8' fill='none' opacity='0.7'/><path d='M0 55 C 140 30 260 80 400 55 S 600 30 720 55' stroke='url(%23g)' stroke-width='0.6' fill='none' opacity='0.5'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.ins-colonne-titre {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.ins-groupe {
  margin-bottom: 1.5rem;
}
.ins-groupe h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-main, var(--color-accent));
  margin: 0 0 0.65rem;
  opacity: 0.9;
}
.ins-liens {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ins-liens li { margin: 0.3rem 0; }
.ins-liens a {
  display: inline-block;
  color: var(--color-text);
  font-size: 0.95rem;
  padding: 0.15rem 0;
  border-bottom: 1px solid transparent;
  transition: all 0.15s ease;
}
.ins-liens a:hover {
  color: var(--color-accent-bright);
  border-bottom-color: var(--color-accent);
  text-decoration: none;
}
.ins-liens-nb {
  color: var(--color-text-tertiary);
  font-size: 0.85em;
  font-weight: 400;
}

/* === Tuiles premium pour les rapports courriel-gate === */
.ins-colonne-titre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.ins-colonne-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(205, 167, 92, 0.08);
  border: 1px solid var(--line-mid, rgba(205, 167, 92, 0.42));
  color: var(--gold-main, var(--color-accent));
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(205, 167, 92, 0.15);
  position: relative;
  z-index: 2;
}
.ins-colonne-ico svg {
  width: 24px;
  height: 24px;
}
.ins-tuiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.ins-tuiles li { margin: 0; }
.ins-tuile {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 1.1rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  color: var(--color-text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: all 0.22s ease;
}
.ins-tuile:hover {
  border-color: var(--line-mid, var(--color-accent));
  transform: translateX(3px);
  background: rgba(205, 167, 92, 0.08);
  box-shadow: var(--shadow-gold, none);
}
.ins-tuile-titre {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.35;
}
.ins-tuile:hover .ins-tuile-titre {
  color: var(--color-accent-soft);
}
.ins-tuile-nb {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-accent-soft);
  white-space: nowrap;
}
.ins-tuile-nb-lbl {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 0.15rem;
}
.ins-tuile-arrow {
  color: var(--color-accent);
  font-size: 1.05rem;
  opacity: 0.6;
  transition: all 0.18s ease;
}
.ins-tuile:hover .ins-tuile-arrow {
  opacity: 1;
  transform: translateX(2px);
}


/* ============================================================
   5. MARCHE -- placeholder V1 (avant les vraies stats APCIQ)
   ============================================================ */
.marche-placeholder {
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  max-width: 640px;
  margin: 1.5rem auto 0;
}
.marche-placeholder p {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin: 0 0 1.25rem;
  font-style: italic;
}
.btn-outline-or {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.35rem;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  background: transparent;
  color: var(--color-accent-soft);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-outline-or:hover {
  background: rgba(200, 149, 69, 0.1);
  border-color: var(--color-accent-bright);
  color: var(--color-accent-bright);
}


/* ============================================================
   6. LIENS UTILES -- grille de cards
   ============================================================ */
.liens-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.lien-card {
  display: block;
  padding: 1.1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}
.lien-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  text-decoration: none;
}
.lien-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  margin: 0 0 0.35rem;
  padding-right: 1.5rem;
}
.lien-card p {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
}
.lien-arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--color-accent);
  font-size: 1.15rem;
  transition: transform 0.2s ease;
}
.lien-card:hover .lien-arrow {
  transform: translateX(4px);
}


/* ============================================================
   7. NOS ANALYSES -- grille 3 cards services
   ============================================================ */
.analyses-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 900px) {
  .analyses-grille {
    grid-template-columns: 1fr;
  }
}

.analyse-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s ease;
  font-family: var(--font-body);
}
.analyse-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  color: var(--color-text);
}
.analyse-card .analyse-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(200, 149, 69, 0.12);
  border: 1px solid rgba(200, 149, 69, 0.28);
  border-radius: 50%;
  color: var(--color-accent);
}
.analyse-card .analyse-ico svg {
  width: 22px;
  height: 22px;
}
.analyse-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  margin: 0;
  line-height: 1.3;
}
.analyse-card p {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* Petit CTA de bas de carte (« Demander mon ACM -> ») */
.analyse-card .analyse-cta {
  margin-top: auto;
  padding-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  align-self: flex-start;
  transition: transform 0.22s ease, color 0.22s ease;
}
.analyse-card:hover .analyse-cta {
  color: var(--color-accent-soft);
  transform: translateX(2px);
}

/* Variante SIGNATURE : brief acheteur, carte hero de la grille */
.analyse-card-signature {
  position: relative;
  background: linear-gradient(180deg,
    rgba(205, 167, 92, 0.10) 0%,
    var(--color-surface) 55%);
  border-color: rgba(205, 167, 92, 0.45);
  box-shadow:
    0 0 0 1px rgba(205, 167, 92, 0.15),
    0 12px 32px rgba(0, 0, 0, 0.35);
}
.analyse-card-signature:hover {
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 1px rgba(205, 167, 92, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.45);
}
.analyse-card-signature .analyse-ico {
  background: rgba(205, 167, 92, 0.20);
  border-color: rgba(205, 167, 92, 0.50);
}
.analyse-card-signature h3 {
  color: var(--color-accent);
}
.analyse-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(205, 167, 92, 0.35);
}


/* ============================================================
   8. CTA FINAL -- bloc de conclusion
   ============================================================ */
.cta-final-bloc {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  padding: 3rem 2rem 3.5rem;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  margin-top: 3rem;
  text-align: center;
}
.cta-final-bloc h2 {
  color: var(--color-accent-soft);
}
.cta-final-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 820px) {
  .cta-final-grille {
    grid-template-columns: 1fr;
  }
}
.cta-final-grille .cta-primary,
.cta-final-grille .cta-dashed,
.cta-final-grille .cta-outline {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem;
  align-items: center;
}
.cta-final-grille .cta-libelle {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
}
.cta-final-grille .cta-sub {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

/* Bouton CTA vendeur : occupe toute la largeur en dessous */
.cta-vendeur {
  display: block;
  max-width: 900px;
  margin: 1.5rem auto 0;
  padding: 1.15rem 1.5rem;
  background: transparent;
  border: 1px solid var(--color-accent-dim);
  border-radius: 10px;
  color: var(--color-accent-soft);
  text-decoration: none;
  text-align: center;
  transition: all 0.22s ease;
}
.cta-vendeur:hover {
  background: rgba(200, 149, 69, 0.08);
  border-color: var(--color-accent);
  text-decoration: none;
}
.cta-vendeur .cta-libelle {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  margin-bottom: 0.2rem;
}
.cta-vendeur .cta-sub {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}


/* ============================================================
   9. MODAUX -- Visite + Alerte
   ============================================================ */
body.modal-ouvert {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 1rem;
  overflow-y: auto;
}
.modal[hidden] {
  display: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 18, 0.82);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.modal-panneau {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  padding: 2rem 2rem 2.25rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  max-height: 94vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.modal-close:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.modal-panneau h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  margin: 0 0 0.25rem;
}
.modal-sous-titre {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}


/* ============================================================
   10. FORMULAIRES MODAUX -- champs, fieldsets, chips
   ============================================================ */
.wizard-visite-form,
.wizard-alerte-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.wizard-visite-form .row,
.wizard-alerte-form .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (max-width: 540px) {
  .wizard-visite-form .row,
  .wizard-alerte-form .row {
    grid-template-columns: 1fr;
  }
}

.wizard-visite-form .field,
.wizard-alerte-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wizard-visite-form label,
.wizard-alerte-form label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.wizard-visite-form input:not([type=checkbox]):not([type=radio]),
.wizard-visite-form select,
.wizard-visite-form textarea,
.wizard-alerte-form input:not([type=checkbox]):not([type=radio]),
.wizard-alerte-form select,
.wizard-alerte-form textarea {
  padding: 0.65rem 0.85rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.15s ease;
}
.wizard-visite-form input:focus,
.wizard-visite-form select:focus,
.wizard-visite-form textarea:focus,
.wizard-alerte-form input:focus,
.wizard-alerte-form select:focus,
.wizard-alerte-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(200, 149, 69, 0.15);
}

.field-help {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  font-style: italic;
}
.field-req {
  color: var(--color-accent);
  font-weight: 700;
}
.field-opt {
  color: var(--color-text-tertiary);
  font-weight: 400;
  font-size: 0.85em;
}

/* Honeypot : caché mais reste focusable pour bots */
.wizard-visite-form .hp,
.wizard-alerte-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Fieldsets */
.wizard-visite-form fieldset,
.wizard-alerte-form fieldset {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem 1.15rem 1.15rem;
}
.wizard-visite-form legend,
.wizard-alerte-form legend {
  padding: 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  letter-spacing: 0.02em;
}
.fieldset-help {
  font-size: 0.82rem;
  color: var(--color-text-tertiary);
  margin: 0 0 0.75rem;
  font-style: italic;
}

/* Radios / checkboxes inline */
.radio-inline,
.chip-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
}
.chip-inline {
  padding: 0.35rem 0.7rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  transition: all 0.15s ease;
}
.chip-inline:hover {
  border-color: var(--color-accent);
}

/* Avis OACIQ affichable */
.contrat-avis {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(200, 149, 69, 0.1);
  border-left: 3px solid var(--color-accent);
  border-radius: 4px;
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.55;
}

/* Ligne de consentement Loi 25 */
.consent-line {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  font-size: 0.86rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.consent-line input[type=checkbox] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.consent-line a {
  color: var(--color-accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-line.consent-newsletter {
  padding-top: 0.1rem;
  opacity: 0.92;
}

/* Case newsletter dans les formulaires quickview (Loi 25 opt-in) */
.qv-consent.qv-newsletter {
  padding-top: 0.1rem;
  opacity: 0.92;
}

/* NB : les boutons submit des formulaires Visite et Alerte heritent
   maintenant du style standard sans-serif defini par
   `form button[type=submit]` dans iresidence-edifice.css
   (coherent avec « M'envoyer le rapport » / « Creer mon alerte »). */


/* ============================================================
   11. POSITIONNEMENT -- texte editorial du territoire
   ============================================================ */
.positionnement-contenu {
  max-width: 780px;
  margin: 1.5rem auto 0;
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  line-height: 1.75;
}
.positionnement-contenu iframe {
  margin: 1.5rem 0;
  border-radius: 8px;
}


/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .modal-panneau {
    padding: 1.5rem 1.25rem;
    border-radius: 10px;
  }
  .modal-panneau h2 {
    font-size: 1.45rem;
  }
  .cta-conversation,
  .cta-dashed,
  .cta-outline {
    padding: 1rem 1.25rem;
  }
  .cta-conversation .cta-libelle,
  .cta-dashed .cta-libelle,
  .cta-outline .cta-libelle {
    font-size: 1.15rem;
  }
}

/* ============================================================
   13. HERO V2 -- composition asymétrique (maquette premium)
   ============================================================
   Nouveau layout : texte à gauche sur fond sombre plein,
   image à droite sans overlay. Stack vertical en mobile.
   Remplace .hero-territoire pour la page territoire.
   ============================================================ */
.hero-territoire-v2 {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
  isolation: isolate;
  /* Bordure + border-radius retires pour un rendu pleinement immersif.
     L'image + le degrade ancrent visuellement le hero sans besoin de
     contour ni de coins arrondis. */
  border-radius: 0;
  /* Aligne exactement sur la largeur du menu sticky .page-nav
     (max-width: 920px, centre). Sur ecrans plus etroits, respecte
     un gutter minimum pour ne pas coller aux bords. */
  max-width: min(920px, calc(100% - 2 * var(--gutter, 1.5rem)));
  margin: 0 auto;
}
@media (max-width: 720px) {
  .hero-territoire-v2 {
    /* Sur mobile, on respecte un gutter reduit de 1rem au lieu du gutter
       standard, pour un rendu qui reste immersif sans coller aux bords. */
    max-width: calc(100% - 2rem);
  }
}

/* L'image couvre TOUT le hero en fond absolu */
.hero-image-v2 {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Voile degrade qui traverse tout le hero, sombre a gauche, transparent a droite.
   Combine deux couches :
   - couche 1 : degrade horizontal (sombre a gauche, ancre le texte)
   - couche 2 : degrade radial subtil depuis bas-droite pour "tempérer"
     la richesse de l'image cote droit et garder le focus sur le titre. */
.hero-image-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at bottom right,
      rgba(7, 19, 33, 0.35) 0%,
      rgba(7, 19, 33, 0.15) 30%,
      transparent 65%
    ),
    linear-gradient(
      to right,
      var(--color-bg) 0%,
      var(--color-bg) 28%,
      rgba(13, 23, 33, 0.9) 42%,
      rgba(13, 23, 33, 0.4) 58%,
      rgba(13, 23, 33, 0) 72%
    );
  pointer-events: none;
}

/* Petit fade a droite : l'image tombe graduellement dans le bleu de
   fond sur les 40 derniers pixels, pour eviter la coupe seche. */
.hero-image-v2::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 40px;
  background: linear-gradient(
    to right,
    rgba(13, 23, 33, 0) 0%,
    var(--color-bg) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Texte en superposition, occupe max ~50% de la largeur.
   Hauteur reduite pour laisser voir la section edifices au chargement. */
.hero-texte-v2 {
  position: relative;
  z-index: 2;
  padding: 2rem 3rem 1.75rem; /* etait 2.5rem / 2.25rem : resserre pour laisser deviner les 3 cards CTA en dessous */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem; /* etait 0.9rem */
  max-width: 44rem;
  min-height: 400px; /* etait 480px : -80px pour un hero moins envahissant sur laptop */
}

/* Breadcrumb reset dans le hero V2 (Global .breadcrumb du CSS édifice) */
.hero-territoire-v2 .breadcrumb {
  margin-bottom: 0.5rem;
}
.hero-territoire-v2 .breadcrumb a {
  color: var(--color-text-secondary);
}
.hero-territoire-v2 .breadcrumb a:hover {
  color: var(--color-accent-soft);
}

/* Overline "LE TERRITOIRE" avec petite ligne à droite */
.overline-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.overline-hero::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.7;
}

/* Titre h1 monumental, tout italique or */
.hero-titre-v2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--color-accent-soft);
  margin: 0;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}
.hero-titre-v2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent-soft);
}

/* Accroche sous le titre */
.hero-accroche-v2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--color-text);
  max-width: 30rem;
  margin: 0.25rem 0 1.5rem;
  opacity: 0.92;
}

/* CTA principal en pill or arrondi */
.hero-cta-primary-wrap {
  margin-top: 0.25rem;
}
/* CTA pill hero : version raffinee "champagne" (moins massif que la
   version d'origine, plus premium). Padding reduit, or plus doux avec
   un liseré or discret, glow externe leger au lieu d'une masse pleine. */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.85rem;
  background: linear-gradient(135deg,
    #e6c07d 0%,
    var(--color-accent) 50%,
    var(--color-accent-dim) 100%);
  color: #0d1721;
  border: 1px solid rgba(255, 240, 200, 0.35); /* liseré or clair discret */
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.22s ease;
  /* glow doux au lieu de shadow lourde */
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.45),
    0 0 24px rgba(205, 167, 92, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
  max-width: 100%;
}
.cta-pill:hover {
  background: linear-gradient(135deg,
    #f0d090 0%,
    #dab370 50%,
    var(--color-accent) 100%);
  transform: translateY(-2px);
  color: #0d1721;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    0 0 32px rgba(205, 167, 92, 0.30),
    0 6px 18px rgba(0, 0, 0, 0.32);
}
.cta-pill-libelle {
  display: inline-block;
}
.cta-pill-arrow {
  display: inline-block;
  transition: transform 0.22s ease;
}
.cta-pill:hover .cta-pill-arrow {
  transform: translateX(4px);
}

/* Fact-box V2 : 3 stats homogenes avec icones or (etait 4, mais la 4e
   "Depuis 2009" cassait le rythme visuel : type de message different et
   police en italique vs les gros chiffres). Plus d'air vertical pour
   un rendu premium moins compact. */
.hero-stats-v2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
  margin-top: 2.25rem;   /* +0.75rem : ecart avec le CTA au-dessus */
  padding-top: 2rem;     /* +0.75rem : air interne au-dessus des icones */
  padding-bottom: 0.75rem;
  /* border-top retire pour coherence avec les autres sections sans separateur */
}
.hero-stat-v2 {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
}
.hero-stat-icon-v2 {
  color: var(--color-accent);
  opacity: 0.9;
  margin-bottom: 0.25rem;
}
.hero-stat-icon-v2 .section-icon {
  background: transparent;
  border: none;
  padding: 0;
  width: 26px;
  height: 26px;
}
.hero-stat-icon-v2 .section-icon svg {
  width: 26px;
  height: 26px;
  color: var(--color-accent);
}
.hero-stat-valeur-v2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--color-accent-soft);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.hero-stat-label-v2 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1.35;
}

/* Responsive : stack vertical en mobile/tablette */
@media (max-width: 900px) {
  .hero-territoire-v2 {
    display: flex;
    flex-direction: column;
  }
  .hero-image-v2 {
    position: relative;
    inset: auto;
    height: 300px;
    order: -1;
  }
  .hero-image-v2::before {
    inset: auto 0 0 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(13, 23, 33, 0), var(--color-bg));
  }
  .hero-texte-v2 {
    min-height: auto;
    max-width: 100%;
    padding: 2rem 1.5rem 2.5rem;
  }
  .hero-stats-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}


/* ============================================================
   14. CTA CARDS PREMIUM (barre sous le hero)
   ============================================================
   Deux cards horizontales : cercle-icone gauche + titre italique
   or + sous-titre + fleche circulaire droite.
   Remplace .cta-secondaire-bar / .cta-dashed / .cta-outline pour
   la page territoire.
   ============================================================ */
.cta-cards-bar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 0;
}
.cta-cards-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1024px) {
  .cta-cards-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .cta-cards-inner {
    grid-template-columns: 1fr;
  }
}

.cta-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.15rem;
  padding: 1.35rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid rgba(200, 149, 69, 0.28);
  border-radius: 14px;
  color: var(--color-text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}
.cta-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  color: var(--color-text);
}

.cta-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(200, 149, 69, 0.08);
  border: 1px solid rgba(200, 149, 69, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}
.cta-card-icon svg {
  width: 24px;
  height: 24px;
}

.cta-card-corps {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.cta-card-titre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--color-accent-soft);
  line-height: 1.15;
}
.cta-card-titre em {
  font-style: italic;
  font-weight: 500;
}
.cta-card-sub {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.cta-card-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: all 0.22s ease;
}
.cta-card:hover .cta-card-arrow {
  background: var(--color-accent);
  color: #0d1721;
  transform: translateX(3px);
}


/* ============================================================
   15. PAGE-NAV -- séparateurs discrets entre les liens
   ============================================================ */
.hero-territoire-v2 + .cta-cards-bar + .page-nav-sentinel + .page-nav .page-nav-links a + a::before,
.page-territoire .page-nav-links a + a::before {
  content: "|";
  color: rgba(200, 149, 69, 0.25);
  margin: 0 0.6rem 0 -0.15rem;
  font-weight: 300;
}


/* ============================================================
   17. OVERLAY CTA sur les cards edifices
   ============================================================
   Bouton flottant en haut a droite de la thumb, contextuel :
   - Visite (or plein) si au moins une inscription active
   - Alerte (outline or) si aucune inscription
   Le clic ouvre le modal correspondant avec l'edifice pre-rempli.
   ============================================================ */
/* CTA overlay : maintenant dans le flow naturel de la card,
   en bas a droite (sous le module courriel-gate) */
.edif-cta-overlay {
  position: static;   /* etait absolute */
  top: auto;
  right: auto;
  /* Aligne a gauche (align-self:flex-start) sous le corps de la card,
     avec meme padding-left que .edif-card-link (1.15rem) pour un
     parcours de lecture naturel gauche->droite : fiche > inscriptions >
     visite. Margin-top genereuse : respiration entre les 2 zones. */
  align-self: flex-start;
  margin: 1.1rem 1.15rem 1.15rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border: 1px solid transparent;
  line-height: 1;
}
/* Icone SVG au debut du bouton (calendrier pour visite, cloche pour alerte) */
.edif-cta-overlay .edif-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.edif-cta-overlay .edif-cta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Fleche apres le libelle, discrete anime au survol */
.edif-cta-overlay .edif-cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.edif-cta-overlay:hover .edif-cta-arrow {
  transform: translateX(2px);
}
/* Visite : effet metal or 3D poli.
   Combinaison :
   - degrade vertical (clair en haut, sombre en bas)
   - inset box-shadow blanc en top pour highlight
   - inset box-shadow sombre en bottom pour l'ombre interne
   - double box-shadow externe pour la profondeur */
.edif-cta-visite {
  background: linear-gradient(
    180deg,
    #ecd18d 0%,
    #d5aa63 48%,
    #b88a48 100%
  );
  color: #0d1721;
  border-color: rgba(90, 60, 20, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 -1px 2px rgba(70, 40, 10, 0.25),
    0 5px 14px rgba(0, 0, 0, 0.40),
    0 2px 4px rgba(0, 0, 0, 0.20);
}
.edif-cta-visite:hover {
  background: linear-gradient(
    180deg,
    #f4dc9b 0%,
    #e3b972 48%,
    #c8995a 100%
  );
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.65),
    inset 0 -1px 2px rgba(70, 40, 10, 0.22),
    0 7px 18px rgba(0, 0, 0, 0.45),
    0 3px 6px rgba(0, 0, 0, 0.25);
}

/* Alerte : outline or sur fond sombre translucide, avec meme profondeur
   que Visite (inset highlight + shadow externe) pour rester coherent. */
.edif-cta-alerte {
  background: rgba(13, 23, 33, 0.78);
  color: var(--color-accent-soft);
  border-color: var(--color-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.12),
    0 5px 14px rgba(0, 0, 0, 0.40),
    0 2px 4px rgba(0, 0, 0, 0.20);
}
.edif-cta-alerte:hover {
  background: rgba(13, 23, 33, 0.92); /* fond sombre stable, on garde le contraste texte */
  color: var(--color-accent-bright);
  border-color: var(--color-accent-bright);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.20),
    0 0 0 3px rgba(200, 149, 69, 0.22),  /* halo or exterieur : effet glow */
    0 7px 18px rgba(0, 0, 0, 0.45),
    0 3px 6px rgba(0, 0, 0, 0.25);
}
/* Override retire : le badge "Fiche V3" a ete supprime (voir PHP),
   donc plus besoin de decaler le CTA a gauche sur les cards V3.
   Toutes les cards ont maintenant leur CTA en haut a droite (uniforme). */


/* Bloc affichage de l'edifice cible dans le modal Alerte */
.field-edifice-cible .edifice-cible-display {
  padding: 0.65rem 0.85rem;
  background: rgba(200, 149, 69, 0.1);
  border: 1px solid rgba(200, 149, 69, 0.3);
  border-radius: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-accent-soft);
}


/* ============================================================
   18. Bouton (i) discret sur les cards edifices
   ============================================================ */
.edif-cta-info {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(13, 23, 33, 0.72);
  border: 1px solid rgba(200, 149, 69, 0.4);
  color: var(--color-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.18s ease;
}
.edif-cta-info svg {
  width: 18px;
  height: 18px;
}
.edif-cta-info:hover {
  background: rgba(200, 149, 69, 0.18);
  border-color: var(--color-accent);
  color: var(--color-accent-bright);
  transform: scale(1.08);
}

/* On place le (i) hors de la thumb, dans la zone du corps de la
   card (moins encombrant que sur l'image, plus visible). */
.edif-card .edif-cta-info {
  bottom: 0.85rem;
  right: 0.85rem;
}


/* ============================================================
   19. MODAL QUICKVIEW (large, contenu injecte AJAX)
   ============================================================ */
.modal-quickview .modal-panneau {
  max-width: 780px;
}
.modal-panneau-large {
  max-width: 780px;
}
.modal-quickview-content {
  min-height: 200px;
}
.modal-quickview-loading {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-style: italic;
}


/* ============================================================
   20. QUICKVIEW -- rendu du fragment (article.qv)
   ============================================================ */
.qv {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.qv-header {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 620px) {
  .qv-header {
    grid-template-columns: 1fr;
  }
}
.qv-thumb {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface-2);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.qv-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.qv-badge-v3 {
  display: inline-block;
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-bright));
  color: #0d1721;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.qv-nom {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--color-accent-soft);
  margin: 0;
}
.qv-nom em { font-style: italic; }
.qv-adresse {
  font-size: 0.95rem;
  color: var(--color-text);
  margin: 0.35rem 0 0;
}
.qv-rapport-date {
  font-size: 0.82rem;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin: 0.25rem 0 0;
}

.qv-descr {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.65;
  padding: 1rem 1.15rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(200, 149, 69, 0.35);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Compteurs vente / location */
.qv-compteurs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (max-width: 520px) {
  .qv-compteurs {
    grid-template-columns: 1fr;
  }
}
.qv-compteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  background: var(--color-surface-2);
  border: 1px solid rgba(200, 149, 69, 0.35);
  border-radius: 8px;
  color: var(--color-text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}
.qv-compteur:hover {
  border-color: var(--color-accent);
  background: rgba(200, 149, 69, 0.05);
  color: var(--color-text);
  text-decoration: none;
  transform: translateY(-1px);
}
.qv-compteur-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.qv-compteur-icon {
  width: 32px;
  height: 46px;
  color: var(--color-accent);
  opacity: 0.72;
  flex-shrink: 0;
}
/* Highlight visuel bref quand on scroll vers le formulaire */
.qv-rapport-highlight {
  animation: qv-pulse 1.2s ease;
}
@keyframes qv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 149, 69, 0.5); }
  50%  { box-shadow: 0 0 0 8px rgba(200, 149, 69, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(200, 149, 69, 0); }
}
.qv-compteur-nb {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-accent);
}
.qv-compteur-lbl {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.qv-compteur-cta {
  font-size: 0.8rem;
  color: var(--color-accent);
  margin-top: 0.35rem;
}
.qv-compteur-vide {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.25rem;
  font-style: italic;
  color: var(--color-text-tertiary);
  border-style: dashed;
}

/* Mini formulaire courriel (rapport gate) */
.qv-rapport {
  padding: 1.25rem 1.4rem 1.5rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(200, 149, 69, 0.4);
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.qv-rapport-titre {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--color-accent-soft);
  margin: 0 0 0.35rem;
}
.qv-rapport-hint {
  font-size: 0.87rem;
  color: var(--color-text-secondary);
  margin: 0 0 0.85rem;
}
.qv-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.qv-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px; opacity: 0;
}
.qv-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
@media (max-width: 480px) {
  .qv-row { grid-template-columns: 1fr; }
}
.qv-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.qv-field label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text);
}
.qv-field input {
  padding: 0.55rem 0.75rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.qv-field input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(200, 149, 69, 0.15);
}
.qv-opt {
  color: var(--color-text-tertiary);
  font-weight: 400;
  font-size: 0.85em;
}
.qv-checkboxes {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.qv-chk {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text);
  cursor: pointer;
}
.qv-consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.qv-consent input { margin-top: 0.2rem; }
.qv-consent a { color: var(--color-accent-soft); text-decoration: underline; }
.qv-submit {
  padding: 0.85rem 1.25rem;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dim));
  color: #0d1721;
  border: none;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.qv-submit:hover {
  background: linear-gradient(135deg, var(--color-accent-bright), var(--color-accent));
  transform: translateY(-1px);
}

/* Actions secondaires : visite + alerte */
.qv-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 480px) {
  .qv-actions { grid-template-columns: 1fr; }
}
.qv-action {
  padding: 0.75rem 1.15rem;
  border-radius: 8px;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent-soft);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.qv-action:hover {
  background: rgba(200, 149, 69, 0.12);
  color: var(--color-accent-bright);
  transform: translateY(-1px);
}
.qv-action-visite {
  background: rgba(200, 149, 69, 0.06);
}

/* Paragraphe légal + lien fiche V3 */
.qv-legal {
  font-size: 0.82rem;
  color: var(--color-text-tertiary);
  line-height: 1.55;
  font-style: italic;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}
/* ============================================================
   MODE PREMIUM — badge (haut) + CTA bouton (bas) sur quickview
   quand l'edifice a une fiche editoriale V3 disponible.
   ============================================================
   Badge : pill or discrete pres du titre. Cliquable. */
.qv-badge-v3 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  margin: 0 0 0.55rem;
  border: 1px solid var(--color-accent-dim);
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(205, 167, 92, 0.18) 0%,
    rgba(205, 167, 92, 0.06) 100%);
  color: var(--color-accent-bright);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.qv-badge-v3:hover {
  background: linear-gradient(135deg,
    rgba(205, 167, 92, 0.28) 0%,
    rgba(205, 167, 92, 0.10) 100%);
  border-color: var(--color-accent-bright);
  transform: translateY(-1px);
}
.qv-badge-v3-icon {
  font-size: 0.9em;
  line-height: 1;
  color: var(--color-accent-bright);
}
.qv-badge-v3-text { line-height: 1; }

/* CTA bouton principal (bas du quickview). Nettement plus visible :
   bouton or plein + fleche + icone diamant, effet halo au survol. */
.qv-cta-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.25rem auto 0;
  padding: 0.85rem 1.4rem;
  max-width: 340px;
  background: linear-gradient(135deg,
    var(--color-accent) 0%,
    var(--color-accent-bright) 100%);
  color: #0f1729;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(205, 167, 92, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.qv-cta-v3:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(205, 167, 92, 0.4);
  filter: brightness(1.05);
  text-decoration: none;
  color: #0f1729;
}
.qv-cta-v3-icon {
  font-size: 1.1em;
  line-height: 1;
}
.qv-cta-v3-label { line-height: 1; }
.qv-cta-v3-arrow {
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.qv-cta-v3:hover .qv-cta-v3-arrow { transform: translateX(3px); }

/* Wrapper standalone (page directe /api/edifice-quickview.php) */
.qv-standalone-main {
  padding: 3rem 1rem;
  min-height: 60vh;
}
/* Retire le liseré sous le header sur les pages quickview standalone
   (demande esthetique Alain : look plus epure, header continu avec le fond). */
body.page-quickview-standalone .site-header,
body.page-quickview-standalone header.site-header,
body.page-quickview-standalone header[role="banner"].site-header {
  border-bottom: none !important;
}
.qv-standalone-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 2.25rem 2rem 2.5rem;
  background: var(--color-surface);
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}


/* ============================================================
   21. PAGE-NAV placee au-dessus du hero
   ============================================================
   La classe .page-nav-top marque la variante ou la nav est
   positionnée juste après le header, avant le hero. Elle reste
   sticky top:0 (heritage de .page-nav) et se colle en haut au
   scroll. On resserre les marges pour qu'elle soit collee au
   header au chargement initial.
   ============================================================ */
/* Resserre l'ecart entre le header du site et la nav */
.page-territoire main#main-content {
  padding-top: 0;
  padding-bottom: 1rem;
  /* Autorise les pseudo-elements 100vw des sections .section-alt et
     des separateurs .section-transition a deborder du max-width du
     main SANS creer de scrollbar horizontale.
     overflow-x: clip est parfait pour ca (contrairement a hidden qui
     casserait le sticky du menu page-nav). */
  overflow-x: clip;
}
/* Meme fix au niveau body/html pour couvrir tout le viewport */
body.page-territoire,
html:has(body.page-territoire) {
  overflow-x: clip;
}
.page-nav-top {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}


/* ============================================================
   24. MOT DU COURTIER V2 -- 2 colonnes + carte courtier premium
   ============================================================ */
.mot-courtier-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding: 3rem 2rem;
  background: var(--bg-panel, var(--color-surface));
  border: 1px solid var(--line-soft, var(--color-border));
  border-radius: var(--radius-xl, 24px);
  margin: 2rem 0;
}
@media (max-width: 900px) {
  .mot-courtier-v2 {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1.25rem;
  }
}

/* Colonne texte */
.mot-courtier-corps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.overline-plume {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold-main, var(--color-accent));
}
.overline-plume::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  margin-right: 0.2rem;
}
.mot-courtier-titre {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  color: var(--text-main, var(--color-text));
  margin: 0.25rem 0 0.5rem;
}
.mot-courtier-titre em {
  font-style: italic;
  color: var(--gold-soft, var(--color-accent-soft));
  font-weight: 500;
}
.mot-courtier-texte {
  color: var(--text-soft, var(--color-text-secondary));
  font-size: 1rem;
  line-height: 1.75;
}
.mot-courtier-texte em {
  font-style: italic;
  color: var(--gold-soft, var(--color-accent-soft));
}
.mot-courtier-cta {
  margin: 0.75rem 0 0;
}

/* CTA pill grande version pleine largeur avec halo doré */
.cta-pill-large {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.05rem 1.4rem;
  gap: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-main, var(--color-accent)), var(--gold-muted, var(--color-accent-dim)));
  color: #0d1721;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 0 6px rgba(205, 167, 92, 0.12), 0 12px 32px rgba(205, 167, 92, 0.28);
  white-space: normal;
  box-sizing: border-box;
}
.cta-pill-large:hover {
  background: linear-gradient(135deg, var(--gold-bright, var(--color-accent-bright)), var(--gold-main, var(--color-accent)));
  color: #0d1721;
  text-decoration: none;
  box-shadow: 0 0 0 8px rgba(205, 167, 92, 0.18), 0 16px 42px rgba(205, 167, 92, 0.4);
  transform: translateY(-1px);
}

/* Colonne carte courtier */
.mot-courtier-carte {
  background: var(--bg-panel-2, var(--color-surface-2));
  border: 1px solid var(--line-mid, rgba(205,167,92,0.42));
  border-radius: var(--radius-lg, 18px);
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-gold, none);
}

.mc-portrait-ring {
  width: 180px;
  height: 180px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  padding: 6px;
  background: radial-gradient(circle at 30% 30%,
    var(--gold-bright, var(--color-accent-bright)) 0%,
    var(--gold-main, var(--color-accent)) 40%,
    rgba(205, 167, 92, 0.25) 80%,
    transparent 100%);
  box-shadow: 0 0 40px rgba(205, 167, 92, 0.25);
}
.mc-portrait-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.mc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: -18px auto 0.75rem;
  background: var(--bg-panel-2, var(--color-surface-2));
  border-radius: 50%;
  color: var(--gold-main, var(--color-accent));
  position: relative;
  z-index: 2;
}
.mc-nom {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2rem;
  color: var(--gold-soft, var(--color-accent-soft));
  margin: 0 0 0.35rem;
  line-height: 1.05;
}
.mc-permis {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-main, var(--color-accent));
  opacity: 0.9;
  margin: 0 0 1rem;
}
.mc-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--gold-main, var(--color-accent));
  font-size: 0.6rem;
  margin: 0.75rem 0 1rem;
}
.mc-sep span {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.mc-titre {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-soft, var(--color-text));
  margin: 0 0 1.25rem;
}
.mc-contacts {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 1.15rem;
  background: var(--bg-main, var(--color-bg));
  border: 1px solid var(--line-soft, var(--color-border));
  border-radius: 999px;
  font-size: 0.85rem;
  max-width: 100%;
}
.mc-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-soft, var(--color-text));
  text-decoration: none;
  transition: color 0.18s ease;
  white-space: nowrap;
}
.mc-contact span { white-space: nowrap; }
.mc-contact:hover {
  color: var(--gold-bright, var(--color-accent-bright));
  text-decoration: none;
}
.mc-contact svg { color: var(--gold-main, var(--color-accent)); }
.mc-sep-v {
  color: var(--line-mid, rgba(205, 167, 92, 0.42));
  opacity: 0.8;
}
@media (max-width: 500px) {
  .mc-contacts { flex-wrap: wrap; justify-content: center; }
}


/* ============================================================
   23. RÉSUMÉ MARCHÉ -- bouton CTA + modal éditorial 5 ans
   ============================================================ */
.marche-resume-cta {
  margin: 1rem 0 1.5rem;
}
.btn-resume-marche {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.35rem;
  background: rgba(205, 167, 92, 0.08);
  border: 1px solid var(--line-mid, rgba(205, 167, 92, 0.42));
  border-radius: 999px;
  color: var(--gold-soft, var(--color-accent-soft));
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.22s ease;
}
.btn-resume-marche:hover {
  background: rgba(205, 167, 92, 0.15);
  border-color: var(--gold-main, var(--color-accent));
  color: var(--gold-bright, var(--color-accent-bright));
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold, 0 4px 14px rgba(205, 167, 92, 0.15));
}
.btn-resume-ico {
  display: inline-flex;
  align-items: center;
  color: var(--gold-main, var(--color-accent));
}
.btn-resume-arrow { opacity: 0.7; transition: transform 0.22s ease; }
.btn-resume-marche:hover .btn-resume-arrow { transform: translateX(3px); opacity: 1; }

/* Contenu du modal résumé */
.resume-marche { padding: 0.5rem 0; }
.resume-overline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-main, var(--color-accent));
  margin-bottom: 0.5rem;
}
.resume-titre {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--gold-soft, var(--color-accent-soft));
  margin: 0 0 1.25rem;
}
.resume-titre em {
  font-style: italic;
  font-weight: 500;
}
.resume-marche p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-soft, var(--color-text-secondary));
  margin: 0 0 1.15rem;
}
.resume-marche p strong {
  color: var(--gold-soft, var(--color-accent-soft));
  font-weight: 600;
}
.resume-signature {
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft, var(--color-border));
  font-size: 0.82rem !important;
  color: var(--text-muted, var(--color-text-tertiary)) !important;
  font-style: italic;
}
.resume-actions {
  margin-top: 1.5rem;
  text-align: center;
}


/* ============================================================
   22. MARCHE — grille de 4 graphiques Chart.js
   ============================================================ */
.marche-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 1rem;
}
@media (max-width: 720px) {
  .marche-charts { grid-template-columns: 1fr; }
}
.marche-chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1rem 1.15rem 1.15rem;
  position: relative;
}
.marche-chart-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-accent-soft);
  margin: 0 0 0.5rem;
}
.marche-chart-card canvas {
  width: 100% !important;
  max-height: 240px;
}
/* 5e chart (comparaison par type) occupe la pleine largeur */
.marche-chart-full {
  grid-column: 1 / -1;
}
.marche-chart-full canvas {
  max-height: 320px;
}
.marche-source {
  font-size: 0.82rem;
  color: var(--color-text-tertiary);
  font-style: italic;
  text-align: center !important;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
}
.marche-source + .marche-source {
  margin-top: 0.1rem;
}
.marche-source:first-of-type {
  margin-top: 0.5rem;
}
.marche-source-link {
  color: var(--color-accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-style: normal;
  font-weight: 500;
}
.marche-source-link:hover {
  color: var(--color-accent-bright);
}


/* ============================================================
   16. HILITE -- emphase or dans les paragraphes d'intro
   ============================================================
   Utilisee via <strong class="hilite"> pour mettre en avant
   les fragments clefs des intros de section (edifices, marche,
   quartier, etc.). Or chaud + font-weight 600.
   ============================================================ */
.section-intro .hilite,
.hilite {
  color: var(--color-accent-soft);
  font-weight: 600;
  letter-spacing: 0;
}

/* Variante lien : .hilite appliqué à <a> devient un lien or discret,
   avec soulignage sobre qui s'anime au survol. Utilisé notamment dans
   les réponses FAQ pour pointer vers le wizard. */
a.hilite {
  text-decoration: underline;
  text-decoration-color: rgba(205, 167, 92, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a.hilite:hover,
a.hilite:focus {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}


/* ============================================================
   Resserrer l'espace apres la derniere section Liens utiles
   ============================================================
   Le CSS partage empile plusieurs paddings verticaux entre la
   derniere section et le contenu du footer (contribution du
   .always-visible, du <main>, du .site-footer et du .site-footer-inner).
   On coupe chaque source pour une fin de page nette. */
.page-territoire main#main-content > section.always-visible:last-of-type,
.page-territoire main#main-content > section#liens {
  padding-bottom: 2rem; /* un peu d'air sous les cartes des liens */
}
.page-territoire .site-footer {
  margin-top: 0.5rem;
}
/* Footer resserré : padding vertical réduit, gaps entre colonnes
   plus courts, typographies légèrement diminuées. Objectif : un
   footer plus fin et plus tassé, moins de vertical. */
.page-territoire .site-footer-inner {
  padding-top: 1rem;
  padding-bottom: 0.75rem;
  gap: 1.75rem;
}
.page-territoire .footer-logo {
  height: 30px;
  margin-bottom: 0.5rem;
}
/* Alignement gauche du tag "Votre plateforme immobiliere documentee..."
   applique a TOUTES les pages qui utilisent baspage-v2 (territoires
   V3 mais aussi fiches edifices quickview). */
.footer-brand,
.footer-brand p {
  text-align: left;
}
.page-territoire .footer-brand p {
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0;
}
.page-territoire .footer-nav {
  gap: 0.35rem;
}
.page-territoire .footer-nav a {
  font-size: 0.72rem;
}
.page-territoire .footer-agent {
  font-size: 0.82rem;
}
.page-territoire .footer-agent strong {
  font-size: 1.05rem;
  margin-bottom: 0.1rem;
}
.page-territoire .footer-agent span {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}
.page-territoire .site-footer-base {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  font-size: 0.72rem;
}

/* Retirer les lignes de separation entre sections pour un look
   plus premium et aere. Le rythme des overlines + titres suffit
   a marquer les sections. */
.page-territoire main#main-content > section.always-visible {
  border-top: 0;
}


/* ============================================================
   MODAL SIGNATURE (Brief acheteur) -- 2 colonnes premium
   ============================================================
   Modal plus large que le standard (max 1100px) avec layout
   grille : preview livrable a gauche, formulaire a droite.
   Passe en 1 colonne < 900 px avec formulaire d'abord. */
.modal-panneau-signature {
  max-width: 1100px;
  padding: 0;  /* padding gere par les colonnes internes */
  overflow: hidden;
}

.signature-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: 500px;
}
@media (max-width: 900px) {
  .signature-grille {
    grid-template-columns: 1fr;
  }
}

/* Colonne gauche : preview + benefices.
   Devient scrollable si le contenu depasse la hauteur du modal
   (evite les coupures visuelles sur laptop). */
.signature-preview {
  padding: 2.25rem 2.25rem 2rem;
  background: linear-gradient(180deg,
    rgba(205, 167, 92, 0.06) 0%,
    rgba(13, 23, 33, 0) 60%);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  max-height: 94vh;
}
@media (max-width: 900px) {
  .signature-preview {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    order: 2; /* preview APRES le formulaire sur mobile */
    padding: 1.5rem 1.5rem 1.75rem;
    max-height: none; /* scroll interne pas necessaire sur mobile */
  }
}
.signature-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  margin-bottom: 1.15rem;
}
.signature-preview h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  line-height: 1.25;
  margin: 0 0 0.75rem;
  letter-spacing: -0.005em;
}
.signature-baseline {
  color: var(--color-text-secondary);
  line-height: 1.55;
  font-size: 0.95rem;
  margin: 0 0 1.4rem;
}
.signature-visuel {
  aspect-ratio: 4 / 3;
  background: rgba(13, 23, 33, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.signature-visuel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  color: rgba(205, 167, 92, 0.35);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.signature-visuel-placeholder svg {
  width: 46px;
  height: 46px;
  stroke: rgba(205, 167, 92, 0.30);
}

/* Galerie interactive du brief : 1 grande image + 5 vignettes cliquables */
.signature-galerie {
  margin-bottom: 1.4rem;
}
.signature-galerie-principale {
  aspect-ratio: 4 / 3;
  background: rgba(13, 23, 33, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.65rem;
  cursor: zoom-in;
  position: relative;
}
.signature-galerie-principale img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* etait cover : evite de couper une image dont le contenu est excentre (ex: conclusion.png) */
  object-position: center;
  display: block;
  transition: opacity 0.25s ease;
  background: rgba(13, 23, 33, 0.6);
}
.signature-vignette img {
  object-fit: contain;   /* meme logique pour les mini-vignettes */
}
.signature-galerie-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: rgba(205, 167, 92, 0.4);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.signature-galerie-fallback svg {
  width: 46px;
  height: 46px;
  stroke: rgba(205, 167, 92, 0.35);
}
.signature-galerie-vignettes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}
.signature-vignette {
  aspect-ratio: 1 / 1.15;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: rgba(13, 23, 33, 0.6);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
}
.signature-vignette:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.signature-vignette.selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}
.signature-vignette img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* etait cover : coherent avec la grande image, aucun crop des vignettes */
  object-position: center;
  display: block;
}

/* Lightbox : ouvre la capture en plein ecran quand on clique la grande image */
.signature-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(6, 12, 18, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  cursor: zoom-out;
  backdrop-filter: blur(6px);
}
.signature-lightbox[hidden] {
  display: none;
}
.signature-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}
.signature-lightbox-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  background: rgba(13, 23, 33, 0.8);
  color: var(--color-text-secondary);
  font-size: 1.7rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.signature-lightbox-close:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.signature-benefices {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.signature-benefices li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.signature-benefices li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.signature-benefices li strong {
  color: var(--color-text);
  font-weight: 600;
}
.signature-mention {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(205, 167, 92, 0.15);
}

/* Colonne droite : formulaire.
   Fond legerement plus chaud + une touche de creme pour trancher avec
   le fond sombre uniforme (evite l'effet "bleu bleu bleu"). */
.signature-form-wrap {
  padding: 2.25rem 2.25rem 2rem;
  overflow-y: auto;
  max-height: 94vh;
  background:
    radial-gradient(ellipse at top right, rgba(205, 167, 92, 0.05), transparent 55%),
    linear-gradient(180deg, rgba(20, 32, 46, 0.55), rgba(13, 23, 33, 0.35));
}
@media (max-width: 900px) {
  .signature-form-wrap {
    padding: 1.75rem 1.5rem 1.75rem;
    max-height: none;
  }
}
.signature-form-titre {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  margin: 0 0 0.4rem;
}
.signature-form-sous {
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 1.3rem;
}
.signature-form .field {
  margin-bottom: 0.85rem;
}
/* Labels en casse naturelle (pas d'uppercase impose par un style parent)
   pour un rendu plus doux et editorial. */
.signature-form .field label,
.signature-form legend {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.35rem;
  letter-spacing: 0;
  text-transform: none;
}
.signature-form .field-req {
  color: var(--color-accent);
  font-weight: 700;
}
.signature-form input[type="text"],
.signature-form input[type="email"],
.signature-form input[type="tel"],
.signature-form select,
.signature-form textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: rgba(13, 23, 33, 0.55);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color 0.2s ease;
}
.signature-form input:focus,
.signature-form select:focus,
.signature-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.signature-form textarea {
  resize: vertical;
  min-height: 70px;
  font-family: var(--font-body);
}
.signature-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 500px) {
  .signature-form .row {
    grid-template-columns: 1fr;
  }
}

/* Radio tuiles : chaque option est une carte cliquable pleine largeur */
.signature-form .fieldset-radio {
  border: 0;
  padding: 0;
  margin: 0 0 0.85rem;
}
.signature-form .fieldset-radio legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.signature-form .radio-tuile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: 0.4rem;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none; /* casse naturelle, plus doux que MAJUSCULES */
  color: var(--color-text);
  background: rgba(13, 23, 33, 0.4);
}
.signature-form .radio-tuile:hover {
  border-color: rgba(205, 167, 92, 0.5);
  background: rgba(13, 23, 33, 0.65);
}
.signature-form .radio-tuile input[type="radio"] {
  accent-color: var(--color-accent);
  cursor: pointer;
  margin: 0;
}
.signature-form .radio-tuile:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(205, 167, 92, 0.10);
}

/* Chips inline pour documents en main */
.signature-form .fieldset-carac {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}
.signature-form .fieldset-carac legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}
.signature-form .fieldset-carac .fieldset-help {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin: 0 0 0.55rem;
}
.signature-form .chip-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  margin: 0 0.3rem 0.35rem 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none; /* casse naturelle */
  color: var(--color-text-secondary);
  background: transparent;
}
.signature-form .chip-inline:hover {
  border-color: rgba(205, 167, 92, 0.4);
  color: var(--color-text);
}
.signature-form .chip-inline input[type="checkbox"] {
  accent-color: var(--color-accent);
  cursor: pointer;
  margin: 0;
}
.signature-form .chip-inline:has(input:checked) {
  border-color: var(--color-accent);
  color: var(--color-accent-soft);
  background: rgba(205, 167, 92, 0.10);
}

/* Consent + submit */
.signature-form .consent-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0 1.1rem;
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  line-height: 1.5;
}
.signature-form .consent-line input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}
.signature-form .consent-line a {
  color: var(--color-accent-soft);
  text-decoration: underline;
}

.signature-submit {
  width: 100%;
  padding: 0.85rem 1.25rem !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ecd18d 0%, #d5aa63 48%, #b88a48 100%) !important;
  color: #0d1721 !important;
  border: 1px solid rgba(90, 60, 20, 0.45) !important;
  border-radius: 999px !important;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 -1px 2px rgba(70, 40, 10, 0.25),
    0 5px 14px rgba(0, 0, 0, 0.40),
    0 2px 4px rgba(0, 0, 0, 0.20);
  transition: all 0.2s ease;
}
.signature-submit:hover {
  background: linear-gradient(180deg, #f4dc9b 0%, #e3b972 48%, #c8995a 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.65),
    inset 0 -1px 2px rgba(70, 40, 10, 0.22),
    0 7px 18px rgba(0, 0, 0, 0.45),
    0 3px 6px rgba(0, 0, 0, 0.25);
}

/* Honeypot invisible */
.signature-form .hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}


/* ============================================================
   BOUTON "i" INFO EN OVERLAP SUR LE HERO
   ============================================================
   Bouton discret positionne en haut-droite du hero. Ouvre le modal
   #modal-positionnement (le texte "Le territoire" qui etait dans le
   corps de la page). Style pill or avec halo doux et libelle qui se
   revele au survol. */
.hero-info-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem 0.5rem 0.5rem;
  background: rgba(13, 23, 33, 0.85);
  border: 1px solid rgba(205, 167, 92, 0.55);
  border-radius: 999px;
  color: var(--color-accent-soft);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(205, 167, 92, 0.10);
  transition: all 0.2s ease;
}
.hero-info-btn:hover,
.hero-info-btn:focus-visible {
  background: rgba(13, 23, 33, 0.92);
  color: var(--color-accent-bright);
  border-color: var(--color-accent-bright);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(205, 167, 92, 0.22);
  transform: translateY(-1px);
}
.hero-info-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  flex-shrink: 0;
}
.hero-info-libelle {
  /* Sur ecrans etroits, on cache le libelle et on garde juste l'icone */
}
@media (max-width: 720px) {
  .hero-info-btn {
    top: 0.85rem;
    right: 0.85rem;
    padding: 0.4rem;
    gap: 0;
  }
  .hero-info-libelle {
    display: none;
  }
}

/* Modal positionnement : plus large que les modaux standards pour
   accueillir un texte editorial long confortable a lire. */
.modal-panneau-pos {
  max-width: 720px;
  padding: 2.5rem 2.5rem 2.25rem;
}
@media (max-width: 720px) {
  .modal-panneau-pos {
    padding: 1.75rem 1.5rem;
  }
}
.modal-pos-titre {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-accent-soft);
  margin: 0.65rem 0 1.5rem;
  letter-spacing: -0.005em;
}
.modal-pos-titre em {
  color: var(--color-accent);
  font-style: italic;
}
.modal-pos-contenu {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.65;
}
.modal-pos-contenu p {
  margin: 0 0 1rem;
}
.modal-pos-contenu p:last-child { margin-bottom: 0; }
.modal-pos-contenu strong {
  color: var(--color-accent-soft);
  font-weight: 600;
}
.modal-pos-contenu em {
  color: var(--color-accent-soft);
  font-style: italic;
}


/* ============================================================
   L'ADN DU QUARTIER -- section unifiee (transports + vie quotidienne
   + portrait sociodemographique + carte + scores mobilite)
   ============================================================ */

/* Portrait sociodemographique : grille 5 colonnes egales sur desktop,
   2 colonnes sur tablette, 1 sur mobile (evite le desequilibre du
   dernier chiffre isole). */
.adn-socio-grille {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 2.5rem;
  padding: 1.75rem 1.5rem;
  background: linear-gradient(180deg,
    rgba(205, 167, 92, 0.05) 0%,
    rgba(13, 23, 33, 0) 60%);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
@media (max-width: 900px) {
  .adn-socio-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}
@media (max-width: 500px) {
  .adn-socio-grille {
    grid-template-columns: 1fr;
  }
}
.adn-stat {
  text-align: left;
}
.adn-stat-valeur {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--color-accent-soft);
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}
.adn-stat-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 0.2rem;
}
.adn-stat-note {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  font-style: italic;
  line-height: 1.4;
}

/* Scores de mobilite : 3 jauges circulaires */
.adn-scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 0 2.5rem;
}
@media (max-width: 720px) {
  .adn-scores { grid-template-columns: 1fr; }
}
.adn-score {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.5rem;
  background: linear-gradient(160deg,
    rgba(205, 167, 92, 0.06) 0%,
    var(--color-surface) 55%,
    rgba(13, 23, 33, 0.75) 100%);
  border: 1px solid rgba(205, 167, 92, 0.25);
  border-radius: 12px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.adn-score::before {
  /* Glow doux radial en haut-droite pour le fini "premium" */
  content: "";
  position: absolute;
  top: -30%;
  right: -20%;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(205, 167, 92, 0.08), transparent 65%);
  pointer-events: none;
}
.adn-score:hover {
  border-color: rgba(205, 167, 92, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.adn-score-jauge {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(205, 167, 92, 0.35));
}
.adn-score-jauge svg {
  width: 100%;
  height: 100%;
  display: block;
}
.adn-score-bg {
  fill: none;
  stroke: rgba(205, 167, 92, 0.14);
  stroke-width: 7;
}
.adn-score-fg {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s ease;
}
.adn-score-nb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  letter-spacing: -0.01em;
  text-shadow: 0 0 12px rgba(205, 167, 92, 0.35);
}
.adn-score-libelle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.adn-score-libelle strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.adn-score-libelle span {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.35;
}

/* Module carte Google Maps : header editorial + iframe encadree en
   module premium. Casse l'effet "embed brut" de Google. */
.adn-carte-module {
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.5rem 1.5rem;
  background: linear-gradient(160deg,
    rgba(205, 167, 92, 0.04) 0%,
    var(--color-surface) 60%);
  border: 1px solid rgba(205, 167, 92, 0.28);
  border-radius: 16px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 240, 200, 0.06);
}
.adn-carte-header {
  margin-bottom: 1.15rem;
}
.adn-carte-titre {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  margin: 0 0 0.35rem;
  letter-spacing: -0.005em;
}
.adn-carte-legende {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.adn-carte {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(205, 167, 92, 0.25);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(205, 167, 92, 0.08);
}
.adn-carte iframe {
  display: block;
  filter: grayscale(0.15) contrast(1.05); /* legere teinte pour matcher la palette */
  transition: filter 0.4s ease;
}
.adn-carte:hover iframe {
  filter: none;
}

/* Contenu narratif (4 blocs : Se deplacer / Services / Ecoles / Nature) */
.adn-contenu .adn-narratif {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .adn-contenu .adn-narratif { grid-template-columns: 1fr; }
}
.adn-contenu .adn-bloc {
  padding: 1.35rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  border-left: 3px solid var(--color-accent);
}
.adn-contenu .adn-bloc h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  margin: 0 0 0.65rem;
  letter-spacing: -0.005em;
}
.adn-contenu .adn-bloc p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 0.75rem;
}
.adn-contenu .adn-bloc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.adn-contenu .adn-bloc li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}
.adn-contenu .adn-bloc li:last-child { margin-bottom: 0; }
.adn-contenu .adn-bloc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.adn-contenu .adn-bloc strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Sources en fin de section */
.adn-sources {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(205, 167, 92, 0.15);
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  font-style: italic;
  line-height: 1.55;
}
.adn-sources strong {
  color: var(--color-text-secondary);
  font-style: normal;
  font-weight: 600;
}


/* ============================================================
   EDIFICES : grille progressive (6 vedettes + reste au toggle)
   ============================================================ */
/* Masque les cards au-dela du 6e en mode collapsed. Toutes les cards
   sont dans la meme grille (pas de duplication en 2 blocs) pour eviter
   les problemes de layout et garder l'ordre par is_vedette DESC. */
.edif-grille.edif-grille-collapsed .edif-card:nth-child(n+7) {
  display: none;
}
/* Mode expanded : tout devient visible. Transition douce pour eviter
   le "flash" quand l'utilisateur clique le toggle. */
.edif-grille.edif-grille-expanded .edif-card:nth-child(n+7) {
  animation: edif-reveal 0.35s ease both;
}
@keyframes edif-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bloc d'actions sous la grille : toggle a gauche + select a droite */
.edif-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0 0.5rem;
  padding: 1.25rem 0 0;
  /* border-top retire : Alain trouvait la ligne redondante au-dessus
     du bouton "Voir les X autres" (elle coupait visuellement la section). */
}
@media (max-width: 720px) {
  .edif-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Bouton "Voir les X autres edifices" */
.edif-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.35rem;
  background: rgba(205, 167, 92, 0.08);
  border: 1px solid rgba(205, 167, 92, 0.45);
  border-radius: 999px;
  color: var(--color-accent-soft);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.22s ease;
}
.edif-toggle-btn:hover {
  background: rgba(205, 167, 92, 0.14);
  border-color: var(--color-accent);
  color: var(--color-accent-bright);
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(205, 167, 92, 0.18);
}
.edif-toggle-btn strong {
  color: var(--color-accent);
  font-weight: 700;
}
.edif-toggle-chevron {
  width: 18px;
  height: 18px;
  transition: transform 0.28s ease;
  flex-shrink: 0;
}
.edif-toggle-btn[aria-expanded="true"] .edif-toggle-chevron {
  transform: rotate(180deg);
}
/* Swap libelle fermes/ouverts selon l'etat aria */
.edif-toggle-btn .edif-toggle-lbl-ouverts { display: none; }
.edif-toggle-btn[aria-expanded="true"] .edif-toggle-lbl-fermes { display: none; }
.edif-toggle-btn[aria-expanded="true"] .edif-toggle-lbl-ouverts { display: inline; }

/* Dropdown recherche rapide */
.edif-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.edif-select-libelle {
  white-space: nowrap;
}
.edif-select-quick {
  padding: 0.6rem 2.2rem 0.6rem 0.85rem;
  background: rgba(13, 23, 33, 0.65);
  border: 1px solid rgba(205, 167, 92, 0.35);
  border-radius: 8px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cda75c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
  max-width: 280px;
}
.edif-select-quick:hover,
.edif-select-quick:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(205, 167, 92, 0.14);
  outline: none;
}
.edif-select-quick option {
  background: var(--color-bg);
  color: var(--color-text);
}


/* ============================================================
   SÉPARATEURS entre sections chocolat et bleu
   ============================================================
   Ligne dorée en dégradé + petit diamant central avec point lumineux.
   Deux variantes selon le sens du dégradé de fond :
   - .section-transition--chocolate-to-blue : chocolat en haut, bleu en bas
   - .section-transition--blue-to-chocolate : bleu en haut, chocolat en bas
   Rappel identitaire du diamant du menu page-nav. */
.section-transition {
  position: relative;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Full-bleed : deborde du container pour couvrir toute la largeur */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
/* Split net 50/50 : chocolat pur en haut, bleu pur en bas (ou inverse).
   Transition franche au milieu, comme un pli de papier. La ligne
   dorée + le diamant marquent le pli. */
.section-transition--chocolate-to-blue {
  background: linear-gradient(
    to bottom,
    #171310 0%,
    #171310 50%,
    var(--bg-main, #071321) 50%,
    var(--bg-main, #071321) 100%
  );
}
.section-transition--blue-to-chocolate {
  background: linear-gradient(
    to bottom,
    var(--bg-main, #071321) 0%,
    var(--bg-main, #071321) 50%,
    #171310 50%,
    #171310 100%
  );
}
.section-transition__line {
  position: relative;
  width: min(1120px, calc(100% - 48px));
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(205, 167, 92, 0.10) 8%,
    rgba(205, 167, 92, 0.50) 28%,
    rgba(205, 167, 92, 0.85) 50%,
    rgba(205, 167, 92, 0.50) 72%,
    rgba(205, 167, 92, 0.10) 92%,
    transparent 100%
  );
  box-shadow: 0 0 24px rgba(205, 167, 92, 0.28);
}
.section-transition__diamond {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #171310; /* couleur chocolat par defaut (visible sur bleu) */
  border: 1px solid rgba(217, 188, 130, 1);
  transform: rotate(45deg);
  box-shadow:
    0 0 0 5px rgba(205, 167, 92, 0.05),
    0 0 36px rgba(205, 167, 92, 0.40);
}
/* Diamant : couleur de fond selon la moitie du haut de la transition */
.section-transition--chocolate-to-blue .section-transition__diamond {
  /* Moitie haute chocolat : diamant en chocolat pour se fondre */
  background: #171310;
}
.section-transition--blue-to-chocolate .section-transition__diamond {
  /* Moitie haute bleu : diamant en bleu pour se fondre */
  background: var(--bg-main, #071321);
}
.section-transition__diamond::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(230, 200, 140, 1);
  box-shadow:
    0 0 6px rgba(230, 200, 140, 0.9),
    0 0 14px rgba(205, 167, 92, 0.6);
}
@media (max-width: 768px) {
  .section-transition {
    height: 72px;
  }
  .section-transition__diamond {
    width: 13px;
    height: 13px;
  }
  .section-transition__diamond::after {
    inset: 4px;
  }
}


/* ============================================================
   ALTERNANCE COULEURS DES SECTIONS (creme sombre / bleu profond)
   ============================================================
   Casse l'effet "tout bleu de haut en bas". Les sections marquees
   .section-alt recoivent un fond creme sombre chaud (teinte beige-noir),
   les autres restent sur bg-main bleu profond. On applique le fond
   au niveau du <section> (largeur pleine) via un padding lateral
   qui compense le container. */
.page-territoire main#main-content > section.always-visible.section-alt {
  position: relative;
}
.page-territoire main#main-content > section.always-visible.section-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  /* Fond chocolat UNIFORME (pas de gradient) : la couleur doit etre
     EXACTEMENT #171310 partout pour raccorder sans couture avec la
     moitie haute du separateur .section-transition--chocolate-to-blue
     (et la moitie basse du separateur --blue-to-chocolate) qui utilise
     aussi #171310. Un gradient creait une teinte plus claire en bas
     de section, donc le separateur apparaissait comme une bande plus
     foncee juste au-dessus de la ligne doree. */
  background: #171310;
  z-index: -1;
  pointer-events: none;
}
.page-territoire main#main-content > section.always-visible.section-alt {
  isolation: isolate;
  padding-top: 3rem;
  padding-bottom: 3rem;
  /* Marges retirees : les sections .section-alt doivent etre COLLEES
     au separateur qui les precede/suit, sinon on voit le fond bleu du
     main apparaitre entre les 2 (double bande bleue visible). */
  margin-top: 0;
  margin-bottom: 0;
}
/* Fix carte Mot du courtier sur fond chocolat : on retire background,
   border et border-radius. La carte devient juste un layout 2 colonnes
   invisible qui laisse voir uniformement le fond chocolat de la section.
   Plus aucun rectangle, ligne fine ou differerence de teinte visible. */
.page-territoire .mot-courtier-v2.section-alt {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
}
/* Meme logique : le separateur n'a aucune marge, il colle aux sections
   voisines pour eviter les bandes de fond apparentes. */
.section-transition {
  margin-top: 0;
  margin-bottom: 0;
}

/* Note : on avait retire border-top du menu .page-nav pensant que
   c'etait la ligne redondante evoquee par Alain. En realite il
   parlait de border-bottom du .site-header (au-dessus, sous le logo
   iResidence.ca), qui est desormais retire plus bas. Le rectangle
   complet du menu est donc restaure pour garder son integrite
   visuelle premium (4 bords + diamant + halo). */

/* Footer : sur la page territoire, on retire la ligne fine dorée du
   haut (border-top de .site-footer) et le margin-top. Raison : un
   separateur premium (ligne doree + diamant) est desormais rendu par
   le gabarit juste avant </main>, immediatement au-dessus du footer.
   Sans ces overrides, on verrait 2 lignes rapprochees + une bande
   bleue parasite entre le separateur et le footer. */
.page-territoire .site-footer {
  border-top: 0;
  margin-top: 0;
}
/* Retire aussi la 2e ligne fine du footer (entre le bloc principal
   logo/nav/agent et la ligne copyright &copy;...). Alain preferait
   un footer sans lignes de separation internes sur la page territoire. */
.page-territoire .site-footer-base {
  border-top: 0;
}

/* HEADER : retire la ligne doree fine SOUS le logo iResidence.ca en haut
   de page. La regle de base utilise !important (ligne 2087 de
   iresidence-edifice.css), donc override aussi avec !important. */
.page-territoire .site-header,
.page-territoire header.site-header,
.page-territoire header[role="banner"].site-header {
  border-bottom: 0 !important;
}


/* ============================================================
   MODULE CAPSULES VIDEO (section « Nouvelles du territoire »)
   ============================================================
   Grille de vignettes YouTube cliquables + badge de source
   (Wikiresidence / InfoDrone / autre). Clic ouvre un lightbox
   video plein ecran (voir .modal-capsule plus bas). */

/* Grille : cards horizontales style podcast, 1 ou 2 colonnes. */
.capsules-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem auto 1.5rem;
  max-width: 900px;
}

/* Divider entre carte signature et cards Jean Giguere : ligne + texte
   introductif au milieu. Occupe TOUTE la largeur de la grille. */
.capsules-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
  padding: 0 0.5rem;
}
.capsules-divider-ligne {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(205, 167, 92, 0.35) 50%,
    transparent 100%);
}
.capsules-divider-texte {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary, #a0a0a0);
  font-style: italic;
  text-align: center;
  flex-shrink: 0;
  max-width: 65%;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .capsules-divider {
    flex-direction: column;
    gap: 0.6rem;
  }
  .capsules-divider-ligne {
    width: 60%;
    flex: none;
  }
  .capsules-divider-texte {
    max-width: 100%;
  }
}
@media (min-width: 1100px) {
  .capsules-grille {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px;
  }
}
.capsules-grille-collapsed .capsule-hidden {
  display: none;
}

/* Card capsule = layout horizontal : icone | corps (badge/date/titre) | play */
.capsule-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.15rem;
  padding: 1.1rem 1.35rem;
  background: linear-gradient(135deg,
    rgba(13, 23, 33, 0.75) 0%,
    rgba(13, 23, 33, 0.55) 100%);
  border: 1px solid rgba(205, 167, 92, 0.22);
  border-radius: var(--radius-lg, 16px);
  cursor: pointer;
  text-align: left;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.capsule-card:hover,
.capsule-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(205, 167, 92, 0.55);
  box-shadow:
    0 10px 28px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(205, 167, 92, 0.15);
  outline: none;
}

/* Icone casque a gauche (couleur variable selon source) */
.capsule-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(205, 167, 92, 0.08);
  border: 1px solid rgba(205, 167, 92, 0.3);
  color: var(--color-accent, #cda75c);
  flex-shrink: 0;
}
.capsule-src-infodrone .capsule-icone {
  color: #7ab0d9;
  border-color: rgba(88, 148, 194, 0.4);
  background: rgba(88, 148, 194, 0.08);
}
.capsule-src-jean_giguere .capsule-icone {
  color: var(--color-accent, #cda75c);
  border-color: rgba(205, 167, 92, 0.4);
  background: rgba(205, 167, 92, 0.08);
}
.capsule-icone svg {
  width: 22px;
  height: 22px;
}

/* Corps : badge + date en haut, titre en dessous */
.capsule-corps {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;   /* permet le truncate du titre */
}
.capsule-meta-haut {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.capsule-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0d1721;
  background: rgba(230, 200, 140, 0.95);
}
.capsule-src-wikiresidence .capsule-badge {
  background: rgba(205, 167, 92, 0.95);
  color: #0d1721;
}
.capsule-src-infodrone .capsule-badge {
  background: rgba(88, 148, 194, 0.95);
  color: #ffffff;
}
.capsule-src-jean_giguere .capsule-badge {
  background: linear-gradient(135deg, rgba(230, 200, 140, 0.98) 0%, rgba(205, 167, 92, 0.98) 100%);
  color: #0d1721;
}
.capsule-src-autre .capsule-badge {
  background: rgba(180, 180, 180, 0.9);
  color: #0d1721;
}
.capsule-date {
  font-size: 0.75rem;
  color: var(--color-text-tertiary, #8a8a8a);
  font-variant-numeric: tabular-nums;
}
.capsule-titre {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text, #eaeaea);
  margin: 0;
}

/* Bouton Ecouter a droite : chip discret devient plus visible au hover */
.capsule-play-audio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: rgba(205, 167, 92, 0.1);
  border: 1px solid rgba(205, 167, 92, 0.5);
  color: var(--color-accent-soft, #d9bc82);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.capsule-card:hover .capsule-play-audio {
  background: rgba(205, 167, 92, 0.22);
  color: var(--color-accent-bright, #eecf8e);
  transform: scale(1.03);
}
.capsule-play-audio svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 520px) {
  .capsule-play-lbl { display: none; }
  .capsule-play-audio { padding: 0.55rem 0.75rem; }
}

/* Bloc actions sous la grille : bouton toggle (voir toutes) */
.capsules-actions {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0.5rem;
}
.capsules-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.35rem;
  background: rgba(205, 167, 92, 0.08);
  border: 1px solid rgba(205, 167, 92, 0.45);
  border-radius: 999px;
  color: var(--color-accent-soft, #d9bc82);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.capsules-toggle-btn:hover {
  background: rgba(205, 167, 92, 0.15);
  border-color: rgba(205, 167, 92, 0.75);
}
.capsules-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}
.capsules-toggle-btn[aria-expanded="true"] .capsules-chevron {
  transform: rotate(180deg);
}
.capsules-toggle-btn .capsules-lbl-ouverts { display: none; }
.capsules-toggle-btn[aria-expanded="true"] .capsules-lbl-fermes { display: none; }
.capsules-toggle-btn[aria-expanded="true"] .capsules-lbl-ouverts { display: inline; }

/* Liens de sortie vers les chaines / sources */
.capsules-sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.75rem;
  margin: 1.5rem 0 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(205, 167, 92, 0.18);
}
.capsules-source-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.capsules-source-link.capsule-src-wikiresidence {
  color: var(--color-accent, #cda75c);
  border: 1px solid rgba(205, 167, 92, 0.4);
  background: rgba(205, 167, 92, 0.05);
}
.capsules-source-link.capsule-src-wikiresidence:hover {
  background: rgba(205, 167, 92, 0.14);
  transform: translateY(-1px);
}
.capsules-source-link.capsule-src-infodrone {
  color: #7ab0d9;
  border: 1px solid rgba(88, 148, 194, 0.4);
  background: rgba(88, 148, 194, 0.06);
}
.capsules-source-link.capsule-src-infodrone:hover {
  background: rgba(88, 148, 194, 0.14);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   PLAYER AUDIO INLINE : barre de progression + temps + icones
   ------------------------------------------------------------
   Quand l utilisateur clique Ecouter, le div .capsule-player
   apparait (attribut hidden retire par le JS). L iframe YouTube
   reelle est cachee hors ecran (.capsule-yt-holder) et pilotee
   par l API YouTube IFrame Player. */

/* Iframe cachee : taille minimale + hors ecran mais toujours
   dans le DOM (necessaire pour que l audio joue). Ne pas mettre
   display:none ni visibility:hidden : certains navigateurs
   coupent l audio des iframes completement invisibles. */
.capsule-yt-holder {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

/* Player inline dans la card : progress bar + temps */
.capsule-player {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.capsule-progress {
  position: relative;
  height: 6px;
  background: rgba(205, 167, 92, 0.15);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}
.capsule-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg,
    var(--color-accent, #cda75c) 0%,
    var(--color-accent-bright, #eecf8e) 100%);
  border-radius: 999px;
  transition: width 0.15s linear;
  box-shadow: 0 0 8px rgba(205, 167, 92, 0.4);
}
.capsule-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-text-tertiary, #8a8a8a);
  font-variant-numeric: tabular-nums;
}

/* Card active : bordure ravivee + halo */
.capsule-card.is-active {
  border-color: rgba(205, 167, 92, 0.55);
  box-shadow:
    0 10px 28px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(205, 167, 92, 0.25);
}

/* Icones play/pause : par defaut play visible, pause cache.
   Quand la card est en lecture (is-playing), on inverse. */
.capsule-icon-play,
.capsule-icon-pause {
  width: 14px;
  height: 14px;
}
.capsule-icon-pause,
.capsule-lbl-pause { display: none; }
.capsule-card.is-playing .capsule-icon-play,
.capsule-card.is-playing .capsule-lbl-play { display: none; }
.capsule-card.is-playing .capsule-icon-pause,
.capsule-card.is-playing .capsule-lbl-pause { display: inline-block; }

.capsule-card.is-active .capsule-play-audio {
  background: rgba(205, 167, 92, 0.22);
  color: var(--color-accent-bright, #eecf8e);
  border-color: rgba(205, 167, 92, 0.75);
}

/* ------------------------------------------------------------
   CARTE CAPSULE SIGNATURE (grand format, portrait a gauche)
   ------------------------------------------------------------
   Utilisee pour la capsule editoriale d Alain ou d un autre
   courtier assigne. Elle s etend sur TOUTE la largeur de la
   grille et se demarque des cards podcast standards en dessous. */
/* Note : !important necessaire pour battre certaines regles legacy
   qui peuvent s appliquer sur .capsule-card ou l article generique. */
.page-territoire .capsule-card.capsule-signature,
.capsule-card.capsule-signature {
  grid-column: 1 / -1 !important;   /* pleine largeur meme en grille 2 col */
  grid-template-columns: 200px 1fr !important;  /* portrait fixe 200px, corps flex */
  gap: 1.75rem !important;
  padding: 1.5rem 1.75rem !important;
  background: linear-gradient(135deg,
    rgba(205, 167, 92, 0.08) 0%,
    rgba(13, 23, 33, 0.75) 45%,
    rgba(13, 23, 33, 0.55) 100%);
  border: 1px solid rgba(205, 167, 92, 0.42);
  box-shadow:
    0 12px 32px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(205, 167, 92, 0.12);
}
@media (max-width: 700px) {
  .page-territoire .capsule-card.capsule-signature,
  .capsule-card.capsule-signature {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
}
/* Contrainte de taille sur le portrait pour eviter tout debordement */
.capsule-card.capsule-signature .capsule-sig-portrait {
  width: 200px !important;
  max-width: 200px !important;
  height: 200px !important;
  max-height: 200px !important;
}
@media (max-width: 700px) {
  .capsule-card.capsule-signature .capsule-sig-portrait {
    margin: 0 auto !important;
  }
}

/* Portrait carre avec bordure doree + halo subtil */
.capsule-sig-portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid rgba(205, 167, 92, 0.35);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, rgba(205, 167, 92, 0.05), rgba(13, 23, 33, 0.6));
}
.capsule-sig-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.capsule-sig-portrait-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(205, 167, 92, 0.5);
}
.capsule-sig-portrait-fallback svg {
  width: 42%;
  height: 42%;
}
@media (max-width: 700px) {
  .capsule-sig-portrait {
    max-width: 200px;
    margin: 0 auto;
  }
}

.capsule-sig-corps {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  justify-content: center;
  min-width: 0;
}
.capsule-sig-titre {
  font-family: var(--font-display, serif);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-text, #eaeaea);
  margin: 0;
}
.capsule-duree {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-accent-soft, #d9bc82);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-left: 0.2rem;
  border-left: 1px solid rgba(205, 167, 92, 0.3);
  padding-left: 0.75rem;
  margin-left: 0.25rem;
}

/* Version grand format du bouton Ecouter (dans les cards signature) */
.capsule-play-audio-lg {
  align-self: flex-start;
  padding: 0.75rem 1.4rem;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
@media (max-width: 700px) {
  .capsule-play-audio-lg { align-self: center; }
}
.capsule-play-audio[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.capsule-play-audio[disabled]:hover {
  transform: none;
  background: rgba(205, 167, 92, 0.1);
  color: var(--color-accent-soft, #d9bc82);
}
.capsule-inactive { opacity: 0.92; }


/* Utilitaire d'accessibilite : cache visuellement mais reste lu par
   les lecteurs d'ecran et indexe par les moteurs. Utilise sur des
   titres semantiques (h2) qu'on veut retirer de l'affichage sans
   casser la structure du document. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ============================================================
   THEME CAPPUCCINO (test A/B via ?theme=cappuccino)
   ============================================================
   Ne s'applique QUE si <body> a la classe .theme-cappuccino
   (injectee par territoire-v2.php quand ?theme=cappuccino).
   Cible la section #inscriptions (Marche du moment) qui est
   actuellement en fond chocolat #171310. Override le pseudo
   ::before qui porte le fond full-width, plus les typos.
   Retirer le query param = revert instantane. */

.theme-cappuccino {
  --ir-cappuccino: #796755;
  --ir-cappuccino-deep: #665544;
  --ir-cappuccino-soft: #9b856d;
  --ir-cappuccino-light: #b9a58c;
  --ir-gold-soft: #d9bc82;
  --ir-gold-muted: rgba(205, 167, 92, 0.42);
  --ir-text-on-cappuccino: #f6efe4;
  --ir-text-muted-on-cappuccino: rgba(255, 248, 236, 0.78);
}

/* Fond cappuccino chaud, applique a TOUTES les sections .section-alt.
   Devient une CARTOUCHE centree (pas full-width) avec coins arrondis
   pour un rendu "carte editoriale premium" flottant sur le bleu.
   Specificite renforcee + !important pour battre toute regle cachee. */
body.theme-cappuccino.page-territoire main#main-content > section.always-visible.section-alt::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 232, 183, 0.18), transparent 38%),
    radial-gradient(circle at 88% 22%, rgba(255, 232, 183, 0.14), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.25), transparent 55%),
    linear-gradient(135deg, #6b5744 0%, #574636 55%, #43352a 100%) !important;
  /* Cartouche centree : on limite la largeur et on centre */
  left: 50% !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: min(1200px, calc(100vw - 48px)) !important;
  transform: translateX(-50%) !important;
  border-radius: 36px !important;  /* coins sobres, style ligne editoriale */
  /* Ombre douce pour flotter au-dessus du bleu */
  box-shadow:
    0 0 0 1px rgba(217, 188, 130, 0.08),
    0 24px 48px -12px rgba(0, 0, 0, 0.35) !important;
}

/* Ornement botanique art nouveau (feuilles champagne dorees).
   Inline SVG dans le PHP pour permettre le controle de couleur
   via `color` CSS (currentColor). S'affiche uniquement quand theme
   cappuccino actif ET dans la section #inscriptions. Positionnee
   a droite en absolute, purement decorative, z-index derriere le
   contenu (qui a z-index 2 via .section-alt > *). */
.ornement-cappuccino {
  display: none;  /* cache par defaut, active seulement en theme cappuccino */
}
.theme-cappuccino section.section-alt .ornement-cappuccino {
  display: block;
  position: absolute;
  right: -150px;             /* deborde davantage a droite, plus discret */
  top: 6%;
  width: 520px;
  max-width: 55%;            /* protection contre debordement sur ecrans etroits */
  color: rgba(217, 188, 130, 0.42);  /* or champagne pale, encore plus discret */
  opacity: 0.55;             /* combine avec rgba : effet visible ~0.23 */
  pointer-events: none;
  z-index: 0;
  /* Masque degrade horizontal : ornement fondu a gauche (invisible dans
     la zone du texte principal), pleinement visible a droite. Evite qu'il
     competitionne avec les paragraphes editoriaux. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 40%, black 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 40%, black 100%);
}
.theme-cappuccino section.section-alt .ornement-cappuccino svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Forcer les cards / contenu editorial a passer au-dessus de l'ornement.
   Sans ca, l'ornement peut apparaitre par-dessus les cards a fond sombre
   (visible sur "20 minutes au telephone" par exemple). */
.theme-cappuccino section.section-alt > * {
  position: relative;
  z-index: 2;
}
/* Sur mobile/tablette, on cache l'ornement pour eviter le chevauchement
   avec le contenu (les cards prennent toute la largeur). */
@media (max-width: 900px) {
  .theme-cappuccino section.section-alt .ornement-cappuccino {
    display: none;
  }
}

/* Assure que la section est en position relative pour que le ::before
   puisse s'ancrer correctement (necessaire pour toutes les section-alt). */
.theme-cappuccino.page-territoire main#main-content > section.section-alt {
  position: relative;
}

/* Overlines de toutes les sections .section-alt en or doux */
.theme-cappuccino section.section-alt .section-overline {
  color: var(--ir-gold-soft);
}

/* Titre h2 : blanc creme + accents en or doux (toutes .section-alt) */
.theme-cappuccino section.section-alt h2 {
  color: var(--ir-text-on-cappuccino);
}
.theme-cappuccino section.section-alt h2 em,
.theme-cappuccino section.section-alt h2 .hilite {
  color: var(--ir-gold-soft);
}

/* Intro descriptive (toutes .section-alt) */
.theme-cappuccino section.section-alt .section-intro {
  color: var(--ir-text-muted-on-cappuccino);
}

/* Ajuste les separateurs entre bleu et cappuccino : les moities
   qui touchent la section #inscriptions doivent matcher le
   nouveau cappuccino #6b5744 au lieu du chocolat #171310. Sinon
   on voit une bande brun tres fonce disgracieuse. */
.theme-cappuccino .section-transition--blue-to-chocolate {
  background: linear-gradient(
    to bottom,
    var(--bg-main, #071321) 0%,
    var(--bg-main, #071321) 50%,
    #6b5744 50%,
    #6b5744 100%
  );
}
.theme-cappuccino .section-transition--chocolate-to-blue {
  background: linear-gradient(
    to bottom,
    #43352a 0%,
    #43352a 50%,
    var(--bg-main, #071321) 50%,
    var(--bg-main, #071321) 100%
  );
}
/* Le petit diamant central du separateur : il doit se fondre
   dans sa moitie de fond respective. */
.theme-cappuccino .section-transition--blue-to-chocolate .section-transition__diamond {
  background: var(--bg-main, #071321);
}
.theme-cappuccino .section-transition--chocolate-to-blue .section-transition__diamond {
  background: #43352a;
}

/* Approche "cartouche encadree" : les separateurs qui entourent la
   section cappuccino restent ENTIEREMENT bleus (--bg-main), avec
   le diamant central qui flotte dessus comme un ruban decoratif.
   La section cappuccino a ainsi des bords francs et nets, isolee
   visuellement du reste de la page. */
body.theme-cappuccino .section-transition--blue-to-chocolate,
body.theme-cappuccino .section-transition--chocolate-to-blue {
  background: var(--bg-main, #071321) !important;
}
body.theme-cappuccino .section-transition--blue-to-chocolate .section-transition__diamond,
body.theme-cappuccino .section-transition--chocolate-to-blue .section-transition__diamond {
  background: var(--bg-main, #071321) !important;
}

/* Fin du theme cappuccino */


/* ============================================================
   Mot du courtier / Perspective iResidence — titres marques
   ============================================================
   Les h3 dans le contenu long-forme (narratif) prennent la
   couleur accent soft pour se demarquer des paragraphes. Meme
   traitement editorial que .adn-contenu .adn-bloc h3. */
.mot-courtier-narratif h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-accent-soft);
  margin: 2rem 0 0.75rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.mot-courtier-narratif h3:first-of-type {
  margin-top: 1.5rem;
}
.mot-courtier-narratif p {
  line-height: 1.65;
  margin: 0 0 1rem;
}
.mot-courtier-narratif ul {
  margin: 0.5rem 0 1.25rem;
  padding-left: 1.4rem;
}
.mot-courtier-narratif li {
  margin-bottom: 0.5rem;
  line-height: 1.55;
}
.mot-courtier-narratif .mot-courtier-signature {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  opacity: 0.85;
}


/* ============================================================
   Fin de iresidence-territoire.css
   ============================================================ */