@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Playfair+Display:wght@700&display=swap');
/* =========================
 THÈME (couleurs du logo)
 ========================= */
:root {
  /* Palette extraite du logo */
  --primary-color: #0299DE; /* bleu vif (MAZAUGUES) */
  --secondary-color: #0058B2; /* bleu profond */
  --accent-color: #FE8217; /* orange (Vivons) */
  /* Surfaces & texte */
  --surface: #ffffff;
  --surface-alt: #ECF5F4; /* clair légèrement bleuté */
  --border-color: #e6e8eb;
  --text-color: #1f2937;
  --text-muted: #475569;
  --text-on-primary: #ffffff;
  /* Barre de navigation & overlay du hero */
  /* >>> NAV solid sur bleu clair du logo (pas de transparence) */
  --nav-bg: var(--primary-color);
  /* Réglages navbar / logo */
  --logo-height: 90px; /* taille du médaillon desktop */
  --logo-height-mobile: 64px;
  --header-padding-y: 1.25rem;

  /* Hauteur réelle du header (navbar + padding) — AJOUT */
  --header-height: calc(var(--logo-height) + 2 * var(--header-padding-y));
  /* À propos (aération) */
  --about-line-height: 1.9;
  --about-paragraph-gap: 1rem;
  /* Colistiers (aération) */
  --card-text-line-height: 1.85;
  --card-text-gap: 1rem;
  --accent-color: #FE8217; /* orange du logo */
}
/* Anciennes variables (compat) déjà utilisées */
:root {
  --dark-color: var(--secondary-color);
  --light-color: var(--surface-alt);
  --font-title: 'Playfair Display', serif;
  --font-text: 'Montserrat', sans-serif;
}
/* ============ RÉGLAGES GLOBAUX ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  line-height: 1.6;
  background: var(--surface);
  color: var(--text-color);

  /* Réserve la place du header fixe — AJOUT */
  padding-top: var(--header-height);
}
.container { max-width: 1200px; margin: auto; padding: 0 2rem; }
/* ============ HEADER & NAVBAR ============ */
.header {
  background: var(--nav-bg);
  color: #fff;
  padding: var(--header-padding-y) 0;
  position: fixed; width: 100%; top: 0; z-index: 1000;
  transition: background 0.3s ease;
}
/* >>> Fond plein bleu clair au scroll */
.header.scrolled { background: var(--primary-color); }
.navbar {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1300px; margin: auto; padding: 0 2rem;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo-img { height: var(--logo-height); width: auto; display: block; }
.nav-menu { display: flex; list-style: none; align-items: center; }
.nav-item { margin-left: 2.2rem; }
.nav-link {
  color: #fff; text-decoration: none; transition: color 0.3s ease;
  font-size: 1.05rem; font-weight: 500;
}
.nav-link:hover { color: var(--accent-color); }
.btn {
  padding: 0.7rem 1.5rem; border-radius: 6px;
  text-decoration: none; transition: transform .15s ease, filter .2s ease, background .2s;
}
.btn-primary {
  background: var(--accent-color); /* CTA en orange */
  color: var(--text-on-primary);
}
.btn-primary:hover {
  filter: brightness(0.95) saturate(1.05);
  transform: translateY(-1px);
}
/* ============ HAMBURGER (mobile) ============ */
.hamburger { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background-color: white; }
/* ============ HERO ============ */
.hero {
  height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff;

  /* On ne compense plus ici ; le body a le padding-top — MODIF */
  /* align-items reste centré par défaut ci‑dessus */
}
.hero-video-container { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
/* Overlay teinté – conserve un léger voile mais pas lié aux titres */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--secondary-color) 36%, transparent),
    color-mix(in srgb, var(--secondary-color) 36%, transparent)
  );
}
.hero-content { z-index: 1; }
.hero-title { font-family: var(--font-title); font-size: 4rem; margin-bottom: 1rem; }
.hero-subtitle { font-size: 1.5rem; margin-bottom: 2rem; }
/* ============ SECTIONS ============ */
.about-section, .properties-section, .testimonials-section, .contact-section { padding: 5rem 0; }
/* Meilleur défilement avec header fixe */
.about-section, .properties-section, .testimonials-section, .contact-section {
  scroll-margin-top: calc(var(--logo-height) + (2 * var(--header-padding-y)) + 16px);
}
/* ============ TITRES DE SECTION (fond plein bleu) ============ */
.section-title {
  position: relative;
  display: inline-block;
  margin: 0 auto 3rem;
  padding: .55rem 1.1rem;
  background: var(--primary-color); /* fond plein */
  color: var(--text-on-primary); /* texte blanc */
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
/* petit soulignement décoratif harmonisé */
.section-title::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -6px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
  border-radius: 2px;
  opacity: .9;
}
/* Dans .properties-section, même fond plein */
.properties-section .section-title {
  background: var(--primary-color);
  color: var(--text-on-primary);
  border-color: var(--primary-color);
}
/* ============ À PROPOS ============ */
.about-content {
  display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: start;
}
.about-image { text-align: center; }
.about-image img {
  width: 100%; max-width: 420px; height: auto;
  border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,0.08); margin: 0 auto;
}
.about-text {
  background: var(--surface); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 2rem; box-shadow: 0 12px 28px rgba(0,0,0,0.06); position: relative;
}
.about-text::before {
  content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 4px; border-radius: 4px;
  background: var(--primary-color);
}
.about-text h2 { font-family: var(--font-title); font-size: 2rem; margin-bottom: 1rem; }
.about-text p, .about-text li { color: var(--text-color); line-height: var(--about-line-height); font-size: 1rem; }
.about-text p { margin-bottom: var(--about-paragraph-gap); }
.about-text ul { padding-left: 1.2rem; margin-bottom: var(--about-paragraph-gap); }
.about-text li + li { margin-top: 0.35rem; }
@media (min-width: 1200px) { .about-text { max-width: 900px; margin: 0 auto; } }
/* ============ COLISTIERS (ex-Properties) ============ */
.properties-section { background: var(--surface-alt); }
.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}
.property-card {
  background: var(--surface); border-radius: 8px; overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--border-color);
}
.property-card:hover { transform: translateY(-10px); box-shadow: 0 15px 25px rgba(0,0,0,0.15); }
/* >>> Images non rognées */
.property-card img {
  display: block; width: 100%; height: auto; border-bottom: 1px solid var(--border-color);
  background: var(--surface);
}
/* Texte des cartes aéré */
.property-card-content { padding: 1.5rem; line-height: var(--card-text-line-height); }
.property-card-content h3 { font-family: var(--font-title); margin-bottom: 0.5rem; color: var(--primary-color); }
.property-card-content p { color: var(--text-color); margin-bottom: var(--card-text-gap); }
.property-card-content ul { padding-left: 1.2rem; margin-bottom: var(--card-text-gap); }
.property-card-content li + li { margin-top: 0.35rem; }
.property-card-price { display: none; }
/* ============ TÉMOIGNAGES ============ */
.testimonial-carousel { max-width: 800px; margin: auto; text-align: center; }
.testimonial-item p { font-size: 1.2rem; font-style: italic; margin-bottom: 1rem; color: var(--text-muted); }
.testimonial-item cite { font-weight: bold; color: var(--accent-color); }
/* ============ CONTACT ============ */
/* >>> Passe en bleu clair uni pour cohérence globale */
.contact-section { background: var(--primary-color); color: #fff; }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-info h2 { font-family: var(--font-title); font-size: 2rem; margin-bottom: 1rem; color: #fff; }
.contact-info ul { list-style: none; margin-top: 1.5rem; }
.contact-info li { margin-bottom: 1rem; }
.contact-info i { color: var(--accent-color); margin-right: 1rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: 1rem; margin-bottom: 1rem; border: none; border-radius: 5px; font-family: var(--font-text); }
.contact-form textarea { min-height: 150px; }
.contact-form button { width: 100%; border: none; }
/* ============ FOOTER ============ */
.footer { background: var(--primary-color); color: #fff; padding: 2rem 0; text-align: center; }
.social-links a { color: #fff; margin: 0 0.5rem; font-size: 1.2rem; transition: color 0.3s ease; }
.social-links a:hover { color: var(--accent-color); }
/* ============ ACCESSIBILITÉ ============ */
::selection { background: var(--accent-color); color: var(--text-on-primary); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary-color) 45%, white); outline-offset: 2px; }
/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  /* --header-height mobile — AJOUT */
  :root { --header-height: calc(var(--logo-height-mobile) + 2 * var(--header-padding-y)); }

  .nav-menu {
    position: fixed; left: -100%;
    top: calc(var(--logo-height-mobile) + (2 * var(--header-padding-y)));
    flex-direction: column; background-color: var(--primary-color);
    width: 100%; text-align: center; transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); z-index: 999;
  }
  .nav-menu.active { left: 0; }
  .nav-item { margin: 2.2rem 0; }
  .hamburger { display: block; }
  .hamburger.active .bar:nth-child(2) { opacity: 0; }
  .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav-logo-img { height: var(--logo-height-mobile); }
  .hero-title { font-size: 2.5rem; }
  .hero-subtitle { font-size: 1.2rem; }
  .about-content,
  .contact-wrapper { grid-template-columns: 1fr; }
}
/* Texte orange "accent" */
.text-accent { color: var(--accent-color) !important; }
/* Variante pour ne colorer que les mots ou morceaux de phrase */
.accent { color: var(--accent-color) !important; }
/* Liens en orange (sans soulignement superflu) */
.link-accent {
  color: var(--accent-color);
  text-decoration: none;
}
.link-accent:hover,
.link-accent:focus {
  text-decoration: underline;
}
/* ===== Hero Banner — transparence x2, moitié taille, fin cadre orange, position + haute ===== */
.hero-banner {
  /* Fond bleu plus transparent (fallback + color-mix) — n'affecte pas les titres */
  background: rgba(0, 88, 178, 0.40);
  background: color-mix(in srgb, var(--secondary-color) 40%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: inset 0 0 0 2px var(--accent-color), 0 20px 50px rgba(0,0,0,0.25);
  border: none;
  border-radius: 18px;
  position: relative;
  display: inline-block;
  padding: clamp(.5rem, 1.5vw, 1rem) clamp(.75rem, 2vw, 1.5rem);
  max-width: min(60vw, 550px);
  color: var(--text-on-primary);
  overflow: hidden;
  margin-top: 0 !important; /* neutralise tout ancien décalage */
  opacity: 0;
  transform: translateY(12px) scale(.985);
  animation: banner-in 800ms cubic-bezier(.2,.7,.3,1) 150ms both,
  banner-pulse 6s ease-in-out 1.2s infinite;
}
/* Shine diagonal (léger) */
.hero-banner::after {
  content: "";
  position: absolute;
  top: -50%; left: -30%;
  width: 60%; height: 200%;
  background: linear-gradient(120deg, transparent 0%,
  rgba(255,255,255,.24) 50%, transparent 100%);
  transform: rotate(10deg);
  animation: banner-shine 4.2s cubic-bezier(.4,.1,.2,1) 1.2s infinite;
  pointer-events: none;
  border-radius: inherit;
}
/* Cadre original "brackets" (équerres d’angle orange) — dimensions adaptées */
.hero-banner::before {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  border-radius: 24px;
  background:
    linear-gradient(var(--accent-color), var(--accent-color)) top left / 20px 2px no-repeat,
    linear-gradient(var(--accent-color), var(--accent-color)) top left / 2px 20px no-repeat,
    linear-gradient(var(--accent-color), var(--accent-color)) top right / 20px 2px no-repeat,
    linear-gradient(var(--accent-color), var(--accent-color)) top right / 2px 20px no-repeat,
    linear-gradient(var(--accent-color), var(--accent-color)) bottom left / 20px 2px no-repeat,
    linear-gradient(var(--accent-color), var(--accent-color)) bottom left / 2px 20px no-repeat,
    linear-gradient(var(--accent-color), var(--accent-color)) bottom right / 20px 2px no-repeat,
    linear-gradient(var(--accent-color), var(--accent-color)) bottom right / 2px 20px no-repeat;
  opacity: .95;
  filter: drop-shadow(0 0 0 rgba(254,130,23,0));
  /* pas d’animation de glow ici pour le hero (gérée ailleurs) */
}
/* Titre (moitié taille, couleur inchangée) */
.hero-banner-title {
  margin: 0;
  color: var(--accent-color);
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(1.4rem, 3vw + 0.125rem, 3rem);
  letter-spacing: 0.5px;
  text-wrap: balance;
}
/* Sous-titre + soulignement fin */
.hero-banner-subtitle {
  margin: .4rem 0 0;
  font-weight: 600;
  color: var(--text-on-primary);
  letter-spacing: .3px;
  display: inline-block;
  position: relative;
  font-size: clamp(.85rem, 1.2vw + .15rem, 1.15rem);
}
.hero-banner-subtitle::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 2px;
  animation: underline 900ms ease 500ms forwards;
}
/* Ajustement mobile : remontée plus douce */
@media (max-width: 768px) {
  .hero-banner { margin-top: 0; }
}
/* --- Animations --- */
@keyframes banner-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes banner-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--accent-color), 0 20px 50px rgba(0,0,0,0.25); }
  50% { box-shadow: inset 0 0 0 2px var(--accent-color), 0 28px 70px rgba(0, 88, 178, 0.35); }
}
@keyframes banner-shine {
  0% { transform: translateX(0) rotate(10deg); opacity: .0; }
  15% { opacity: .45; }
  30%,100% { transform: translateX(180%) rotate(10deg); opacity: 0; }
}
@keyframes underline { to { transform: scaleX(1); } }
/* Accessibilité : si l’utilisateur préfère moins d’animations */
@media (prefers-reduced-motion: reduce) {
  .hero-banner,
  .hero-banner::after,
  .hero-banner::before,
  .hero-banner-subtitle::after {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* Le cadre devient une colonne : image en haut, contenu en dessous */
.property-card { display: flex; flex-direction: column; }
/* Le contenu occupe toute la hauteur dispo et se structure en colonne */
.property-card-content { display: flex; flex-direction: column; flex: 1; }
/* Le slogan final glisse automatiquement en bas du card */
.property-card-content .text-accent:last-child { margin-top: auto; }
/* Style du slogan (garde la séparation douce) */
.property-card-content p.text-accent {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border-color);
}
/* ===== Colistiers : colonnes un peu plus larges sur grands écrans ===== */
@media (min-width: 1200px) {
  .properties-section .container { max-width: 1700px; }
  .properties-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

/* >>> SUPPRESSION de l’ancien gros padding-top du hero — MODIF :
   L’ancien bloc qui mettait:
   .hero { align-items: flex-start; padding-top: calc(var(--logo-height) + (6 * var(--header-padding-y)) + 0.75rem); }
   (et la variante mobile)
   a été retiré, car le body réserve désormais l’espace du header. */

/* ===== Agenda (timeline) ===== */
.agenda-section { background: var(--surface); }
.agenda-section { scroll-margin-top: calc(var(--logo-height) + (2 * var(--header-padding-y)) + 16px); }
.agenda-list {
  list-style: none; padding: 0; margin: 2rem 0 0; position: relative;
}
.agenda-list::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 86px; width: 2px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--secondary-color) 20%, transparent),
    color-mix(in srgb, var(--secondary-color) 30%, transparent));
}
.agenda-item {
  display: grid; grid-template-columns: 172px 1fr; gap: 1.25rem;
  position: relative; padding-bottom: 1.5rem;
}
.agenda-item::before {
  content: ""; position: absolute; left: 77px; top: 26px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
  border: 3px solid var(--accent-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
}
.agenda-date {
  width: 136px; margin-left: 18px; border-radius: 12px; text-align: center;
  padding: .6rem .5rem .55rem; color: var(--text-on-primary);
  background: color-mix(in srgb, var(--secondary-color) 22%, transparent);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  backdrop-filter: blur(4px) saturate(115%);
  box-shadow: inset 0 0 0 2px var(--secondary-color), 0 10px 24px rgba(0,0,0,.12);
}
.agenda-date .day {
  display: block; font-family: var(--font-title);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 700; line-height: 1; letter-spacing: .5px;
}
.agenda-date .month { display: inline-block; margin-top: .15rem; font-weight: 700; letter-spacing: .8px; color: var(--accent-color); }
.agenda-date .year { display: block; margin-top: .2rem; font-size: .9rem; opacity: .9; }
.agenda-card {
  background: var(--surface); border: 1px solid var(--border-color); border-radius: 12px;
  padding: 1.1rem 1.25rem; box-shadow: 0 12px 28px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.agenda-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--secondary-color) 35%, var(--border-color));
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
}
.agenda-title {
  margin: 0 0 .35rem 0; font-family: var(--font-title); color: var(--primary-color); font-size: 1.25rem;
}
.agenda-meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: .85rem 1.25rem;
  padding: 0; margin: 0 0 .5rem 0; color: var(--text-muted); font-size: .95rem;
}
.agenda-meta i { color: var(--accent-color); margin-right: .5rem; }
.agenda-desc { margin: 0; line-height: var(--card-text-line-height); }
@media (max-width: 768px) {
  .agenda-list::before { left: 22px; }
  .agenda-item { grid-template-columns: 1fr; padding-left: 2.75rem; }
  .agenda-item::before { left: 13px; top: 18px; }
  .agenda-date { width: auto; margin: 0 0 .75rem 0; }
}
/* ===== Section Citation : image de fond + texte orange centré ===== */
#citation { scroll-margin-top: calc(var(--logo-height) + (2 * var(--header-padding-y)) + 16px); }
.quote-section {
  position: relative; min-height: 50vh; display: grid; place-items: center; text-align: center; isolation: isolate;
  background-image: var(--quote-bg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;
}
.quote-overlay {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--secondary-color) 35%, transparent);
  -webkit-backdrop-filter: blur(2px) saturate(115%); backdrop-filter: blur(2px) saturate(115%);
  z-index: 0;
}
.quote {
  position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: clamp(1rem, 2.5vw, 2rem);
}
.quote-mark { display: block; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--accent-color); opacity: .9; margin-bottom: .5rem; }
.quote-text {
  color: var(--accent-color); font-family: var(--font-title); font-weight: 700; line-height: 1.15;
  font-size: clamp(1.6rem, 4vw, 2.8rem); text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.35); margin: 0;
}
.quote-author { margin-top: .75rem; color: var(--text-on-primary); opacity: .95; font-weight: 500; }
.quote::after {
  content: ""; position: absolute; inset: clamp(.5rem, 2vw, 1rem); border-radius: 14px;
  border: 2px solid color-mix(in srgb, var(--accent-color) 70%, transparent);
  pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.12) inset;
}
@media (max-width: 1024px) { .quote-section { background-attachment: scroll; } }
@media (prefers-reduced-motion: reduce) { .quote-section { background-attachment: scroll; } }
/* ===== Logo navbar en médaillon circulaire (défaut) ===== */
.nav-logo {
  justify-content: center;
  width: var(--logo-height);
  height: var(--logo-height);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 3px var(--accent-color), 0 6px 18px rgba(0,0,0,.15);
  overflow: hidden;
  padding: 6px;
}
.nav-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 768px) {
  .nav-logo { width: var(--logo-height-mobile); height: var(--logo-height-mobile); padding: 5px; }
}
/* ===== Photos Laurent + Colistiers — hover lift + color ===== */
.about-image img, .property-card img {
  transform-origin: center center;
  transition: transform 320ms cubic-bezier(.2,.7,.3,1), filter 320ms ease, box-shadow 320ms ease;
  will-change: transform, filter;
}
.about-image:hover img, .property-card:hover img {
  transform: translateY(-4px) scale(1.02);
  filter: saturate(1.06) contrast(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
/* Ken Burns (Laurent) */
@keyframes vm-kenburns { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.06) translate(2px, -2px); } }
.about-image img { animation: vm-kenburns 12s ease-in-out infinite alternate; }
/* Option : colistiers repos NB léger */
.property-card img { filter: grayscale(.15) saturate(.95); }
.property-card:hover img { filter: grayscale(0) saturate(1.05) contrast(1.02); }
/* Accessibilité : réduire les animations si souhaité */
@media (prefers-reduced-motion: reduce) { .about-image img { animation: none !important; } .about-image img, .property-card img { transition: none !important; } }
/* Sécurité si AOS n'est pas prêt : images visibles */
.about-image img[data-aos], .property-card img[data-aos] { opacity: 1 !important; transform: none !important; }
/* Encarts "Ensemble, vivons Mazaugues !" : bleu du footer + texte centré */
.property-card-content p.text-accent:last-child {
  margin-top: auto;
  background: var(--primary-color); color: var(--text-on-primary);
  text-align: center; padding: .85rem 1rem; border-radius: 8px; border-top: 0;
}
.property-card-content p.text-accent:last-child strong { color: inherit; }
/* ===== NAV Desktop — version compacte, sobre (logo rond à --logo-height) ===== */
@media (min-width: 769px) {
  .nav-logo {
    width: var(--logo-height);
    height: var(--logo-height);
    border-radius: 50%;
    background: var(--surface);
    padding: 6px;
    box-shadow: inset 0 0 0 3px var(--accent-color), 0 6px 18px rgba(0,0,0,.15);
    display: flex; align-items: center; justify-content: center;
  }
  .nav-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
  /* Barre plus haute pour accueillir le médaillon confortablement */
  .navbar {
    height: calc(var(--logo-height) + 12px);
    padding: 0 1.5rem; justify-content: space-between;
  }
  .nav-menu { display: flex; gap: 1.5rem; align-items: center; }
  .nav-link {
    position: relative; color: #fff; font-weight: 600; font-size: 1rem;
    opacity: .95; text-decoration: none; padding: .25rem 0; transition: opacity .2s ease;
  }
  .nav-link:hover { opacity: 1; }
  .nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -10px;
    height: 2px; border-radius: 2px; background: var(--accent-color);
    transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
  }
  .nav-link:hover::after { transform: scaleX(1); }
  .nav-link.is-active::after { transform: scaleX(1); }
}
/* === Hotfix: forcer le logo en médaillon rond sur toutes les tailles (aligné sur --logo-height) === */
.header .navbar .nav-logo, .header .navbar .nav-logo .nav-logo-img { border-radius: 50% !important; }
.header .navbar .nav-logo {
  width: var(--logo-height) !important; height: var(--logo-height) !important;
  background: var(--surface) !important; padding: 6px; overflow: hidden;
  box-shadow: inset 0 0 0 3px var(--accent-color), 0 6px 18px rgba(0,0,0,.15);
  display: inline-flex; align-items: center; justify-content: center;
}
.header .navbar .nav-logo .nav-logo-img { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
@media (max-width: 768px) {
  .header .navbar .nav-logo { width: var(--logo-height-mobile); height: var(--logo-height-mobile); padding: 5px; }
}
/* ===== Cadre "brackets" façon hero pour les titres de section (sans transparence) ===== */
.section-title {
  position: relative; /* requis pour le ::before */
  display: inline-block;
  background: var(--primary-color); /* fond plein (pas de transparence) */
  color: var(--text-on-primary); /* texte blanc */
  border: 2px solid var(--primary-color);
  border-radius: 16px;
  padding: .70rem 1.25rem; /* un peu plus d'air comme le hero */
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
/* Si le HTML a .text-accent sur le titre, on force en blanc pour le contraste */
.section-title.text-accent { color: var(--text-on-primary) !important; }
/* Les équerres d’angle orange (même logique que .hero-banner::before, sans anim/voile) */
.section-title::before {
  content: "";
  position: absolute;
  inset: -6px; /* débord léger autour du titre */
  pointer-events: none;
  border-radius: 22px;
  background:
  /* coin haut-gauche */
  linear-gradient(var(--accent-color), var(--accent-color)) top left / 20px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) top left / 2px 20px no-repeat,
  /* coin haut-droit */
  linear-gradient(var(--accent-color), var(--accent-color)) top right / 20px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) top right / 2px 20px no-repeat,
  /* coin bas-gauche */
  linear-gradient(var(--accent-color), var(--accent-color)) bottom left / 20px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) bottom left / 2px 20px no-repeat,
  /* coin bas-droit */
  linear-gradient(var(--accent-color), var(--accent-color)) bottom right / 20px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) bottom right / 2px 20px no-repeat;
  opacity: 1; /* aucune transparence */
  filter: none;
}
/* (Option) pour enlever le petit soulignement bleu sous les titres :
.section-title::after { display: none !important; }
*/
/* ===== TITRES : style "encart vidéo" sans transparence ===== */
/* — texte orange (comme le hero-title), fond bleu plein, pas de bordure classique — */
.section-title {
  position: relative;
  display: inline-block;
  background: var(--primary-color); /* fond plein, comme demandé */
  color: var(--accent-color); /* texte orange : "comme la vidéo" */
  border: none; /* évite tout effet de bord en pointillé */
  border-radius: 16px;
  padding: .75rem 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06); /* léger relief (même esprit que le hero) */
  outline: none !important; /* au cas où un outline héritait */
}
/* Si le HTML a .text-accent en plus, on garde le texte orange */
.section-title.text-accent {
  color: var(--accent-color) !important;
}
/* Brackets orange (même logique que .hero-banner::before, sans voile ni anim) */
.section-title::before {
  content: "";
  position: absolute;
  inset: -6px; /* déborde un peu pour respirer */
  pointer-events: none;
  border-radius: 22px;
  background:
  /* coin haut-gauche */
  linear-gradient(var(--accent-color), var(--accent-color)) top left / 22px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) top left / 2px 22px no-repeat,
  /* coin haut-droit */
  linear-gradient(var(--accent-color), var(--accent-color)) top right / 22px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) top right / 2px 22px no-repeat,
  /* coin bas-gauche */
  linear-gradient(var(--accent-color), var(--accent-color)) bottom left / 22px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) bottom left / 2px 22px no-repeat,
  /* coin bas-droit */
  linear-gradient(var(--accent-color), var(--accent-color)) bottom right / 22px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) bottom right / 2px 22px no-repeat;
  opacity: 1;
  filter: none;
}
/* Soulignement orange franc (au lieu du bleu quasi invisible) */
.section-title::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px; /* à l'intérieur de l'encart pour qu'on le voie bien */
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-color) 25%,
    var(--accent-color) 75%,
    transparent 100%
  );
  opacity: 1;
}
/* ===== TITRES — rendu identique à l'encart vidéo, sans transparence ===== */
/* Anti "pointillés" + neutralisation de toute bordure/outline résiduelle */
.section-title,
.properties-section .section-title {
  border: 0 !important;
  outline: 0 !important;
  -moz-outline-style: none !important; /* Firefox : désactive le pointillé hérité */
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06); /* relief léger comme le hero */
  background: var(--primary-color) !important; /* fond bleu plein */
  color: var(--accent-color) !important; /* texte orange comme le hero-title */
  border-radius: 16px;
  padding: .75rem 1.25rem;
  position: relative;
  display: inline-block;
}
/* Équerres d’angle orange (copie du principe .hero-banner::before, sans voile ni anim) */
.section-title::before {
  content: "";
  position: absolute;
  inset: -6px; /* débord pour que les coins "respirent" */
  pointer-events: none;
  border-radius: 22px;
  background:
  /* coin haut-gauche */
  linear-gradient(var(--accent-color), var(--accent-color)) top left / 22px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) top left / 2px 22px no-repeat,
  /* coin haut-droit */
  linear-gradient(var(--accent-color), var(--accent-color)) top right / 22px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) top right / 2px 22px no-repeat,
  /* coin bas-gauche */
  linear-gradient(var(--accent-color), var(--accent-color)) bottom left / 22px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) bottom left / 2px 22px no-repeat,
  /* coin bas-droit */
  linear-gradient(var(--accent-color), var(--accent-color)) bottom right / 22px 2px no-repeat,
  linear-gradient(var(--accent-color), var(--accent-color)) bottom right / 2px 22px no-repeat;
  opacity: 1;
  filter: none;
}
/* Soulignement orange franc à l'intérieur du cartouche (bien visible) */
.section-title::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px; /* à l'intérieur, pour la lisibilité */
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-color) 20%,
    var(--accent-color) 80%,
    transparent 100%
  );
  opacity: 1;
}
/* Colistiers — trait supérieur en bleu du thème */
.property-card-content > p.text-accent:first-child {
  border-top-color: var(--primary-color);
}
/* Liseret orange autour du header et du footer — sans impacter la hauteur */
.header,
.footer {
  box-shadow: inset 0 0 0 3px var(--accent-color);
}
/* ===== FUN BURST AU CLIC : wobble + confettis + anneau ===== */
/* petit feedback de clic sur l'image */
.vm-pop {
  animation: vm-pop-wobble 450ms cubic-bezier(.2,.7,.3,1);
  filter: saturate(1.06) contrast(1.03)
  drop-shadow(0 10px 24px rgba(0,0,0,.12));
}
@keyframes vm-pop-wobble {
  0% { transform: translateZ(0) scale(1) rotate(0deg); }
  35% { transform: scale(1.08) rotate(-1.5deg); }
  70% { transform: scale(1.02) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}
/* anneau qui “pulse” depuis le point de clic */
.vm-pulse {
  position: fixed;
  width: 12px; height: 12px;
  left: calc(var(--x) - 6px);
  top: calc(var(--y) - 6px);
  border: 3px solid var(--accent-color);
  border-radius: 999px;
  transform: scale(0);
  opacity: .9;
  z-index: 2400;
  pointer-events: none;
  animation: vm-pulse 600ms ease-out forwards;
}
@keyframes vm-pulse {
  to { transform: scale(24); opacity: 0; }
}
/* confettis positionnés au point de clic */
.vm-confetti {
  position: fixed;
  width: 0; height: 0;
  left: var(--x); top: var(--y);
  z-index: 2500;
  pointer-events: none;
}
.vm-confetti .piece {
  position: absolute;
  left: 0; top: 0;
  width: 10px; height: 6px;
  background: var(--c, #FE8217);
  border-radius: 2px;
  transform: translate(0,0) rotate(0deg);
  opacity: 0;
  animation: vm-cf 900ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes vm-cf {
  0% { opacity: 0; transform: translate(0,0) rotate(0deg) scale(1); }
  12% { opacity: 1; }
  70% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); }
  100% { opacity: 0; transform: translate(calc(var(--dx)*1.1), calc(var(--dy) + 30px)) rotate(calc(var(--dr) + 45deg)) scale(.92); }
}
/* accessibilité : animations réduites */
@media (prefers-reduced-motion: reduce) {
  .vm-pop, .vm-pulse, .vm-confetti .piece { animation: none !important; }
}
/* ===================================================================
 FUN CLICK EFFECT — wobble + anneau pulse + burst d'émojis
 =================================================================== */
/* 1) Wobble "boing" sur l'image */
.vm-pop {
  animation: vm-pop-wobble 450ms cubic-bezier(.2,.7,.3,1);
  filter: saturate(1.06) contrast(1.03) drop-shadow(0 10px 24px rgba(0,0,0,.12));
}
@keyframes vm-pop-wobble {
  0% { transform: translateZ(0) scale(1) rotate(0deg); }
  35% { transform: scale(1.08) rotate(-1.5deg); }
  70% { transform: scale(1.02) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}
/* 2) Anneau "pulse" depuis le point de clic */
.vm-pulse {
  position: fixed;
  width: 12px;
  height: 12px;
  left: calc(var(--x) - 6px);
  top: calc(var(--y) - 6px);
  border: 3px solid var(--accent-color);
  border-radius: 999px;
  transform: scale(0);
  opacity: .9;
  z-index: 2400;
  pointer-events: none;
  animation: vm-pulse 600ms ease-out forwards;
}
@keyframes vm-pulse {
  to { transform: scale(24); opacity: 0; }
}
/* 3) Burst d'émojis (thumbs + hearts) au point de clic */
.vm-emoji {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  z-index: 2500;
  pointer-events: none;
}
.vm-emoji .piece {
  position: absolute;
  left: 0; top: 0;
  will-change: transform, opacity;
  transform: translate(0,0) scale(.9) rotate(0deg);
  opacity: 0;
  animation: vm-emoji-fly 900ms cubic-bezier(.2,.7,.3,1) forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
@keyframes vm-emoji-fly {
  0% { opacity: 0; transform: translate(0,0) scale(.9) rotate(0deg); }
  12% { opacity: 1; }
  70% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); }
  100% { opacity: 0; transform: translate(calc(var(--dx)*1.1), calc(var(--dy) + 24px)) rotate(calc(var(--dr) + 35deg)) scale(.92); }
}
/* Accessibilité : couper les anims si l'utilisateur préfère moins d'animations */
@media (prefers-reduced-motion: reduce) {
  .vm-pop, .vm-pulse, .vm-emoji .piece { animation: none !important; }
}
/* ===================================================================
 FUN CLICK EFFECT — Wobble + Anneau Pulse + Burst FA (orange & bleu)
 =================================================================== */
/* 1) Wobble "boing" sur l'image */
.vm-pop {
  animation: vm-pop-wobble 450ms cubic-bezier(.2,.7,.3,1);
  filter: saturate(1.06) contrast(1.03) drop-shadow(0 10px 24px rgba(0,0,0,.12));
}
/* 2) Anneau "pulse" depuis le point de clic (utilise --accent-color) */
.vm-pulse {
  position: fixed;
  width: 12px; height: 12px;
  left: calc(var(--x) - 6px);
  top: calc(var(--y) - 6px);
  border: 3px solid var(--accent-color);
  border-radius: 999px;
  transform: scale(0);
  opacity: .9;
  z-index: 2400;
  pointer-events: none;
  animation: vm-pulse 600ms ease-out forwards;
}
@keyframes vm-pulse { to { transform: scale(24); opacity: 0; } }
/* 3) Conteneur d'icônes (Font Awesome) au point de clic */
.vm-emoji {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: 0; height: 0;
  z-index: 2500;
  pointer-events: none;
}
/* Icônes FA : couleur pilotée via --clr (orange/bleu du thème) */
.vm-emoji .fa {
  position: absolute;
  left: 0; top: 0;
  color: var(--clr, #ffffff);
  will-change: transform, opacity;
  transform: translate(0,0) scale(.9) rotate(0deg);
  opacity: 0;
  animation: vm-emoji-fly 900ms cubic-bezier(.2,.7,.3,1) forwards;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
@keyframes vm-emoji-fly {
  0% { opacity: 0; transform: translate(0,0) scale(.9) rotate(0deg); }
  12% { opacity: 1; }
  70% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); }
  100% { opacity: 0; transform: translate(calc(var(--dx)*1.1), calc(var(--dy) + 24px)) rotate(calc(var(--dr) + 35deg)) scale(.92); }
}
/* Accessibilité : coupe les anims si l'utilisateur préfère moins d'animations */
@media (prefers-reduced-motion: reduce) {
  .vm-pop, .vm-pulse, .vm-emoji .fa { animation: none !important; }
}




/* === HERO — Option B confort : espace + safe mobile === */
:root {
  /* Espace au-dessus du banner — ajuste librement ces bornes */
  --hero-top-gap-desktop: clamp(2rem, 6vh, 5.5rem);
  --hero-top-gap-mobile:  clamp(1.25rem, 7vh, 3.5rem);
}

/* Desktop / tablettes larges */
@media (min-width: 769px) {
  .hero {
    align-items: flex-start;                 /* colle en haut */
    padding-top: var(--hero-top-gap-desktop);/* ajoute de l’air */
  }
}

/* Mobile : on ajoute un petit supplément lié à la hauteur du header
   pour éviter tout chevauchement sous le médaillon du logo */
@media (max-width: 768px) {
  .hero {
    align-items: flex-start;
    padding-top: calc(var(--hero-top-gap-mobile) + 0.15 * var(--header-height));
    /* ↑ 0.15 = ~15% de la hauteur du header ; augmente à 0.2 si besoin */
  }
}

/* Bonus : meilleure gestion des barres d’URL sur mobile modernes */
@supports (height: 100dvh) {
  .hero { height: 100dvh; }  /* garde un plein écran stable */
}




/* Hero : déplacement plus rapide */
.hero-photo {
  width: 110%;
  height: 100%;
  object-fit: cover;
  transform: translateX(-6%) scale(1.05);
  animation: vm-hero-pan 10s ease-in-out infinite alternate; /* ← plus rapide */
  will-change: transform;
}

@keyframes vm-hero-pan {
  0%   { transform: translateX(-6%) scale(1.05); }
  100% { transform: translateX( 6%) scale(1.05); }
}

/* Accessibilité : désactive l’animation si l’utilisateur préfère moins d’animations */
@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none !important; transform: none !important; }
}


/* === Colistiers : bouton "Voir plus" + encart Profession de foi === */
.property-card-content .btn-more {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--accent-color);
  color: var(--text-on-primary);
  border: none;
  border-radius: 8px;
  padding: .55rem .9rem;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
  margin: .25rem 0 .25rem;
}
.property-card-content .btn-more:hover {
  filter: brightness(.95) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}
.property-card-content .btn-more .chev {
  transition: transform .25s ease;
}
.property-card-content .btn-more[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.manifesto {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .5s ease, opacity .35s ease, transform .35s ease, padding .25s ease, border-color .25s ease;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0 1rem;
  margin-top: .5rem;
}
.manifesto.open {
  padding: 1rem 1rem 1rem;
  max-height: 1400px; /* assez grand pour les textes longs */
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

.manifesto-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 .5rem 0;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--border-color);
}

.manifesto p {
  margin-bottom: .8rem;
  line-height: var(--card-text-line-height);
}

@media (prefers-reduced-motion: reduce) {
  .manifesto { transition: none !important; }
  .property-card-content .btn-more .chev { transition: none !important; }
}


/* === Colistiers : bandeau Nom sous la photo === */
.name-banner {
  background: var(--primary-color);
  color: var(--text-on-primary);
  text-align: center;
  padding: .85rem 1rem;
  border-radius: 8px;
  border: 0;
  margin: .75rem 1rem 0; /* un peu d’air sur les côtés */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.name-banner strong { color: inherit; font-weight: 800; letter-spacing: .2px; }

/* Bouton "Voir plus" centré */
.property-card-content .btn-more {
  align-self: center;         /* centre dans la colonne du contenu */
  display: inline-flex;
  justify-content: center;
  margin: .6rem auto .25rem;  /* auto -> centrage horizontal */
}

/* (rappel) encart repliable — laissez si déjà présent ; sinon conservez ceci */
.manifesto {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .5s ease, opacity .35s ease, transform .35s ease, padding .25s ease, border-color .25s ease;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0 1rem;
  margin-top: .5rem;
}
.manifesto.open {
  padding: 1rem 1rem 1rem;
  max-height: 1400px; /* pour textes longs */
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
.manifesto-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 .5rem 0;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--border-color);
}
.manifesto p { margin-bottom: .8rem; line-height: var(--card-text-line-height); }

@media (prefers-reduced-motion: reduce) {
  .manifesto { transition: none !important; }
}


/* === Bandeau Nom sous la photo : texte ORANGE (thème) === */
.name-banner {
  background: var(--primary-color);
  color: var(--accent-color); /* <- orange du thème */
  text-align: center;
  padding: .85rem 1rem;
  border-radius: 8px;
  border: 0;
  margin: .75rem 1rem 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.name-banner strong { color: inherit; font-weight: 800; letter-spacing: .2px; }

/* Bouton "Lire la profession de foi" centré */
.property-card-content .btn-more {
  align-self: center;         /* centre dans la colonne du contenu */
  display: inline-flex;
  justify-content: center;
  margin: .6rem auto .25rem;  /* auto -> centrage horizontal */
}

/* Encart repliable (laissez si déjà présent, sinon conservez) */
.manifesto {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .5s ease, opacity .35s ease, transform .35s ease, padding .25s ease, border-color .25s ease;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0 1rem;
  margin-top: .5rem;
}
.manifesto.open {
  padding: 1rem 1rem 1rem;
  max-height: 1400px;
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
.manifesto-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 .5rem 0;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--border-color);
}
.manifesto p { margin-bottom: .8rem; line-height: var(--card-text-line-height); }

/* Slogan final : toujours orange, sans fond bleu */
.property-card-content p.text-accent.slogan:last-child {
  margin-top: auto;                 /* glisse en bas de la carte */
  color: var(--accent-color) !important;
  background: transparent !important;
  text-align: center;
  padding: .75rem 0;
  border: 0;
}
/* Slogan final dans l'encart (orange, centré, petite séparation haute) */
.manifesto .slogan {
  color: var(--accent-color) !important;
  text-align: center;
  margin-top: .75rem;
  padding-top: .5rem;
  border-top: 0;
}

/* Contour plus fin */
.name-banner strong,
.manifesto .slogan {
  /* Était ~0.8px */
  -webkit-text-stroke: 0.45px #ffffff;

  /* Fallback plus léger (4 directions, offsets half‑px) */
  text-shadow:
    0    .5px 0 #ffffff,
    .5px 0    0 #ffffff,
    0   -.5px 0 #ffffff,
   -.5px 0    0 #ffffff;
  font-size: x-large !important;
}



/* Cadre orange sous les photos (bandeau nom) */
.property-card {
  border: 2px solid var(--accent-color);
}

/* --- Profession de foi : police un peu plus petite --- */
.manifesto {
  font-size: 0.95rem;             /* desktop */
  line-height: var(--card-text-line-height);
}
@media (max-width: 768px) {
  .manifesto { font-size: 0.92rem; } /* mobile */
}

/* --- Bannière de nom : on réserve un peu de place à droite pour le bouton --- */
.name-banner {
  position: relative;
  padding-right: 3rem; /* espace pour le rond + */
}

/* --- Bouton rond "+" dans la bannière --- */
.name-banner .mf-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);    /* ← utiliser transform partout */
  will-change: transform;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid var(--accent-color);
  background: var(--surface);
  color: var(--accent-color);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}

/* Icône plus (deux traits) en CSS pur */
.name-banner .mf-toggle::before,
.name-banner .mf-toggle::after {
  content: "";
  display: block;
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.name-banner .mf-toggle::before {
  width: 16px; height: 2px;           /* barre horizontale */
}
.name-banner .mf-toggle::after {
  width: 2px; height: 16px;           /* barre verticale = fait le "+" */
}

/* État ouvert : le "+" devient "–" (on masque la barre verticale) */
.name-banner .mf-toggle[aria-expanded="true"]::after {
  opacity: 0;
  transform: scale(.2);
}


/* Pulse plus visible : amplitude ↑ et glow un peu plus fort */
@keyframes mf-pulse {
  0%   { transform: translateY(-50%) scale(1);    box-shadow: 0 6px 16px rgba(0,0,0,.08); }
  30%  { transform: translateY(-50%) scale(1.12); box-shadow: 0 14px 30px rgba(0,0,0,.16); }
  60%  { transform: translateY(-50%) scale(1.06); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
  100% { transform: translateY(-50%) scale(1);    box-shadow: 0 6px 16px rgba(0,0,0,.08); }
}

.name-banner .mf-toggle.hint {

  animation: mf-pulse 1.3s ease-in-out 0.4s 4;
}

/* États hover/focus */
.name-banner .mf-toggle:hover { background: color-mix(in srgb, var(--surface) 85%, var(--accent-color)); }
.name-banner .mf-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-color) 45%, white); outline-offset: 2px; }

/* (Option) on peut masquer totalement .btn-more si jamais il reste en DOM */
.property-card-content .btn-more { display: none !important; }



/* ===============================
   COLISTIERS — MODE B (pulse continu)
   =============================== */

/* 1) Profession de foi : police un peu plus petite pour gagner en densité */
.manifesto {
  font-size: 0.95rem;             /* desktop */
  line-height: var(--card-text-line-height);
}
@media (max-width: 768px) {
  .manifesto { font-size: 0.92rem; } /* mobile */
}

/* 2) On masque totalement l'ancien bouton "Voir plus" s'il reste dans le DOM */
.property-card-content .btn-more { 
  display: none !important; 
}

/* 3) Bannière de nom : on réserve de la place à droite pour le bouton rond */
.name-banner {
  position: relative;
  padding-right: 3rem; /* place pour le bouton + */
}

/* 4) Bouton rond "+" dans la bannière (centré verticalement) */
.name-banner .mf-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);    /* centrage vertical stable */
  will-change: transform;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid var(--accent-color);
  background: var(--surface);
  color: var(--accent-color);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

/* Icône "+" en CSS (deux traits) */
.name-banner .mf-toggle::before,
.name-banner .mf-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.name-banner .mf-toggle::before { 
  width: 16px; height: 2px;      /* barre horizontale */
}
.name-banner .mf-toggle::after  { 
  width: 2px; height: 16px;      /* barre verticale => fait le "+" */
}

/* État ouvert : le "+" devient "–" (on masque la barre verticale) */
.name-banner .mf-toggle[aria-expanded="true"]::after {
  opacity: 0;
  transform: scale(.2);
}

/* Hover / Focus */
.name-banner .mf-toggle:hover { 
  background: color-mix(in srgb, var(--surface) 85%, var(--accent-color)); 
}
.name-banner .mf-toggle:focus-visible { 
  outline: 3px solid color-mix(in srgb, var(--accent-color) 45%, white); 
  outline-offset: 2px; 
}

/* 5) MODE B : pulse en continu tant que FERMÉ, s'arrête à l'ouverture */
.name-banner .mf-toggle[aria-expanded="false"] {
  animation: mf-pulse 1.1s ease-in-out 0.35s infinite;
}
.name-banner .mf-toggle[aria-expanded="true"] {
  animation: none;
}

/* Pulse plus sensible (amplitude + glow) */
@keyframes mf-pulse {
  0%   { transform: translateY(-50%) scale(1);    box-shadow: 0 6px 16px rgba(0,0,0,.08); }
  30%  { transform: translateY(-50%) scale(1.12); box-shadow: 0 14px 30px rgba(0,0,0,.16); }
  60%  { transform: translateY(-50%) scale(1.06); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
  100% { transform: translateY(-50%) scale(1);    box-shadow: 0 6px 16px rgba(0,0,0,.08); }
}

/* 6) Accessibilité : si l'utilisateur préfère moins d'animations, on coupe proprement */
@media (prefers-reduced-motion: reduce) {
  .name-banner .mf-toggle { animation: none !important; }
}



/* ===============================
   COLISTIERS — MODE B (pulse continu + chevrons FA + dézoom accentué)
   =============================== */

/* 1) Profession de foi : police un peu plus petite pour gagner en densité */
.manifesto {
  font-size: 0.95rem;             /* desktop */
  line-height: var(--card-text-line-height);
}
@media (max-width: 768px) {
  .manifesto { font-size: 0.92rem; } /* mobile */
}

/* 2) On masque totalement l'ancien bouton "Voir plus" s'il reste dans le DOM */
.property-card-content .btn-more { 
  display: none !important; 
}

/* 3) Bannière de nom : on réserve de la place à droite pour le bouton rond */
.name-banner {
  position: relative;
  padding-right: 3rem; /* place pour le bouton +/chevron */
}

/* 4) Bouton rond dans la bannière (centré verticalement) */
.name-banner .mf-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);    /* centrage vertical stable */
  will-change: transform;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid var(--accent-color);
  background: var(--surface);
  color: var(--accent-color);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

/* Dimensionne proprement l'icône FA à l'intérieur du bouton */
.name-banner .mf-toggle i {
  font-size: 18px;   /* ajuste si tu veux plus grand/petit */
  line-height: 1;
}

/* Hover / Focus */
.name-banner .mf-toggle:hover { 
  background: color-mix(in srgb, var(--surface) 85%, var(--accent-color)); 
}
.name-banner .mf-toggle:focus-visible { 
  outline: 3px solid color-mix(in srgb, var(--accent-color) 45%, white); 
  outline-offset: 2px; 
}

/* 5) MODE B : pulse en continu tant que FERMÉ, s'arrête à l'ouverture */
.name-banner .mf-toggle[aria-expanded="false"] {
  animation: mf-pulse-dezoom 1.1s ease-in-out 0.35s infinite;
}
.name-banner .mf-toggle[aria-expanded="true"] {
  animation: none;
}

/* Dézoom accentué : on descend jusqu'à .82 puis on remonte */
@keyframes mf-pulse-dezoom {
  0%   { transform: translateY(-50%) scale(1.00); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
  30%  { transform: translateY(-50%) scale(0.82); box-shadow: 0 16px 34px rgba(0,0,0,.18); }
  60%  { transform: translateY(-50%) scale(0.90); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
  100% { transform: translateY(-50%) scale(1.00); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
}

/* 6) Accessibilité : si l'utilisateur préfère moins d'animations, on coupe proprement */
@media (prefers-reduced-motion: reduce) {
  .name-banner .mf-toggle { animation: none !important; }
}

/* ===== FORCE-OVERRIDE : supprimer définitivement l'ancien +/− en pseudo-éléments ===== */
.name-banner .mf-toggle::before,
.name-banner .mf-toggle::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  transform: none !important;
  border: 0 !important;
  background: none !important;
}


/* Contour plus fin uniquement pour le nom sous la photo (bandeau) */
.name-banner strong {
  -webkit-text-stroke: 0.45px #ffffff;
  text-shadow: 0 .5px 0 #ffffff, .5px 0 0 #ffffff, 0 -.5px 0 #ffffff, -.5px 0 0 #ffffff;
  font-size: x-large !important;
}

/* Le slogan dans .manifesto reste sobre (comme Laurent) */
.manifesto .slogan,
.manifesto .slogan strong {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  font-size: inherit !important;
}
/* === HERO PHOTO: no animation & no crop (keep full width) === */
/* Stoppe toute animation/panoramique de la photo du hero et évite tout rognage. */
.hero-video-container { overflow: visible; }

.hero-photo {
  width: 100% !important;    /* conserve la largeur écran en mobile & desktop */
  height: 100% !important;   /* s'adapte à la hauteur du conteneur */
  object-fit: contain !important; /* pas de crop (peut afficher des bandes) */
  animation: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none !important; transform: none !important; }
}
/* === NAME-BANNER: center name vertically === */
.name-banner {
  display: flex !important;              /* alignement vertical */
  align-items: center !important;        /* centre le texte verticalement */
  justify-content: center !important;    /* centre horizontalement */
  line-height: 1.1;                      /* évite un interligne trop haut */
  min-height: 52px;                      /* laisse la place au bouton (36px) */
  padding: .75rem 3rem .75rem 1rem;      /* espace à droite pour le bouton */
}
.name-banner strong { line-height: 1; }

@media (max-width: 768px) {
  .name-banner { min-height: 48px; padding: .65rem 3rem .65rem 1rem; }
}/* === PROPERTY-CARD-CONTENT: remove empty spacer === */
/* Supprime l'espace créé par un conteneur vide après la transformation JS */
.property-card-content:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* ===============================
   SÉPARATEUR EN VAGUE ORANGE
   =============================== */
.vm-wave {
  --wave-color: var(--accent-color);
  position: relative;
  height: 24px;               /* ↑ ajuste la hauteur si besoin */
  line-height: 0;
  overflow: hidden;
  background: transparent;
}

.vm-wave svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.vm-wave path {
  fill: var(--wave-color);
}

/* Petit relief optionnel (ombre portée) */
.vm-wave::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  pointer-events: none;
  box-shadow: 0 -6px 18px rgba(0,0,0,.06) inset;
}

/* S'assure qu'il n'y a pas d'espace résiduel autour des sections */
section { margin: 0; }


/* ============================================
   TRAITS DE CONTOUR NOIR POUR LES TEXTES ORANGE
   (Hero title, Citations, Titres de section)
   ============================================ */
:root {
  /* Ajuste ici si tu veux affiner l'épaisseur */
  --vm-outline-color: #000;
  --vm-outline-width: 0.5px;
}

/* 1) Hero : "Vivons Mazaugues !" */
.hero-banner-title {
  -webkit-text-stroke: var(--vm-outline-width) var(--vm-outline-color);
  /* Fallback (multiplie de petits ombrages noirs) */
  text-shadow:
    0 0.5px 0 var(--vm-outline-color),
    0.5px 0 0 var(--vm-outline-color),
    0 -0.5px 0 var(--vm-outline-color),
   -0.5px 0 0 var(--vm-outline-color);
}

/* 2) Citations : tout le texte de citation est orange */
.quote-text {
  -webkit-text-stroke: var(--vm-outline-width) var(--vm-outline-color);
  text-shadow:
    0 0.5px 0 var(--vm-outline-color),
    0.5px 0 0 var(--vm-outline-color),
    0 -0.5px 0 var(--vm-outline-color),
   -0.5px 0 0 var(--vm-outline-color);
}

/* 3) Titres de section (Laurent Gueit, Les Colistiers, Agenda)
      -> déjà colorés en orange dans ton CSS */
.section-title {
  -webkit-text-stroke: var(--vm-outline-width) var(--vm-outline-color);
  text-shadow:
    0 0.5px 0 var(--vm-outline-color),
    0.5px 0 0 var(--vm-outline-color),
    0 -0.5px 0 var(--vm-outline-color),
   -0.5px 0 0 var(--vm-outline-color);
}

/* ============================================
   COLISTIERS : nom sous la photo
   -> Remplace le contour BLANC par un contour NOIR
   (on surclasse les règles existantes avec !important)
   ============================================ */
.name-banner strong {
  -webkit-text-stroke: 0.6px #ffffff !important;
  text-shadow:
    0 0.5px 0 #000,
    0.5px 0 0 #000,
    0 -0.5px 0 #000,
   -0.5px 0 0 #000 !important;
}


/* ===== Colistiers : réduction globale d’1/3 ===== */
.properties-grid.shrink-33 {
  /* min-width colonne réduit (260px -> ~174px = 260 * 0.67) */
  grid-template-columns: repeat(auto-fit, minmax(174px, 1fr));
  gap: 1.25rem; /* un peu moins d’écart entre cartes */
}

/* Réduction visuelle de chaque carte */
.properties-grid.shrink-33 .property-card {
  transform: scale(0.67);
  transform-origin: top center;
}

/* Option (facultatif) : compenser l’espace vertical entre lignes
   en tirant légèrement les cartes vers le haut */
.properties-grid.shrink-33 .property-card {
  margin-top: -0.22rem; /* ajuste si besoin */
}


/* ===== Noms des colistiers : taille réduite ===== */
.properties-grid .property-card .name-banner {
  font-size: 0.80rem !important;   /* ≈ -10% vs 1rem par défaut */
  line-height: 1.05;
  min-height: 46px;                /* garde l’alignement vertical propre */
  color: #ffffff;
}

/* Si le nom est emballé dans <strong>, on garde la même taille réduite */
.properties-grid .property-card .name-banner strong {
  font-size: inherit !important;   /* annule l’ancien x-large !important */
  font-weight: 800;
}

/* (Option) Mobile : on descend un chouïa plus */
@media (max-width: 768px) {
  .properties-grid .property-card .name-banner {
    font-size: 0.85rem !important;
    min-height: 42px;
  }
}



/* =====================================================
   Vivons Mazaugues — PATCH CSS (à charger APRÈS style.css)
   - Réduction globale des cards (~ -33%)
   - Noms des colistiers : police réduite
   - Modal accessible (profession de foi)
   - Overlay "En savoir plus" sur les photos
   ===================================================== */

/* ===== Réduction globale d’1/3 ===== */
.properties-grid.shrink-33 {
  /* 260px * 0.67 ≈ 174px */
  grid-template-columns: repeat(auto-fit, minmax(174px, 1fr));
  gap: 1.25rem;
}
.properties-grid.shrink-33 .property-card {
  transform: scale(0.67);
  transform-origin: top center;
}
.properties-grid.shrink-33 .property-card:hover {
  /* garde l’effet hover sans empiler les scales */
  transform: translateY(-10px) scale(0.67);
}

/* ===== Noms des colistiers : taille réduite ===== */
.properties-grid .property-card .name-banner {
  font-size: 0.80rem !important;
  line-height: 1.05;
  min-height: 46px;
  padding: .70rem 3rem .70rem 1rem; /* réserve droite pour le bouton */
  display: flex; align-items: center; justify-content: center;
}
.properties-grid .property-card .name-banner strong {
  font-size: inherit !important; /* annule x-large !important éventuel */
  font-weight: 800;
}
@media (max-width: 768px) {
  .properties-grid .property-card .name-banner { font-size: 0.85rem !important; min-height: 42px; }
}
/* Bouton rond légèrement réduit */
.properties-grid .property-card .name-banner .mf-toggle {
  width: 32px; height: 32px;
}

/* ===== MODAL (profession de foi) ===== */
body.vm--modal-open { overflow: hidden; }
.vm-modal[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
.vm-modal {
  position: fixed; inset: 0; z-index: 3000; opacity: 1; visibility: visible;
  transition: opacity .2s ease, visibility .2s ease;
}
.vm-modal__backdrop {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--secondary-color) 40%, black); opacity: .45;
}
.vm-modal__dialog {
  position: relative; max-width: min(900px, 92vw); max-height: min(82vh, 900px);
  margin: 6vh auto; padding: 1.25rem; overflow: auto; background: var(--surface);
  border: 1px solid var(--border-color); border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.35);
  transform: translateY(12px) scale(.98); transition: transform .22s ease, opacity .22s ease;
}
.vm-modal[aria-hidden="false"] .vm-modal__dialog { transform: translateY(0) scale(1); }
.vm-modal__close {
  position: sticky; top: 0; float: right; width: 38px; height: 38px; border-radius: 999px;
  border: 2px solid var(--accent-color); background: var(--surface); color: var(--accent-color);
  display: inline-grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease; margin: -0.25rem -0.25rem 0.5rem auto;
}
.vm-modal__close:hover { background: color-mix(in srgb, var(--surface) 85%, var(--accent-color)); }
.vm-modal__close:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-color) 45%, white); outline-offset: 2px; }
.vm-modal__title {
  margin: 0 2.5rem 0.75rem 0; font-family: var(--font-title); color: var(--primary-color);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.2;
}
.vm-modal__body { font-size: 0.98rem; line-height: var(--card-text-line-height); }
.vm-modal__body p { margin-bottom: .8rem; }
.vm-modal__body .slogan { color: var(--accent-color) !important; text-align: center; margin-top: .75rem; }
.vm-modal__body ul { padding-left: 1.2rem; margin: .75rem 0; }
.vm-modal__body li + li { margin-top: 0.35rem; }

/* ===== Overlay "En savoir plus" sur la photo ===== */
.property-card { position: relative; cursor: pointer; }
.property-card .vm-learnmore {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: center;
  padding: .5rem .75rem; color: var(--text-on-primary);
  background: linear-gradient(to top, color-mix(in srgb, var(--secondary-color) 55%, transparent), transparent);
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none;
  font-weight: 700; letter-spacing: .2px;
}
.property-card:hover .vm-learnmore, .property-card:focus-within .vm-learnmore { opacity: 1; transform: translateY(0); }
.property-card .vm-learnmore i { margin-right: .5rem; color: var(--accent-color); }

/* ===== Micro-mention dans la bannière (facultatif) ===== */
.name-banner { position: relative; }
.name-banner .vm-banner-hint {
  position: absolute; right: 52px; top: 50%; transform: translateY(-50%);
  color: var(--text-on-primary); opacity: .85; font-size: .8rem; font-weight: 600; pointer-events: none;
}
@media (max-width: 768px) { .name-banner .vm-banner-hint { display: none; } }



/* === SUPPRIMER tout mouvement au survol des cards === */

/* 1) Aucune translation ni zoom de la carte au hover */
.property-card:hover {
  transform: none !important;
}

/* 2) Si le mode réduit (-33%) est actif, garder exactement la même échelle au hover */
.properties-grid.shrink-33 .property-card:hover {
  transform: scale(0.67) !important;
}

/* 3) Aucune animation/zoom de l'image au hover */
.property-card:hover img {
  transform: none !important;
  filter: inherit !important; /* garde le rendu de base (grayscale/saturate) */
}

/* 4) (Option) couper les transitions pour éviter toute impression d'inertie */
.property-card,
.property-card img {
  transition: none !important;
}

/* 5) (Option) neutraliser aussi l’ombre renforcée au survol */
.property-card:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.10) !important; /* même valeur que l'état normal */
}


/* === DÉSACTIVER TOUT MOUVEMENT AU SURVOL DES CARDS === */

/* 0) S'assurer que le patch s'applique en premier lieu */
.properties-grid .property-card,
.properties-grid .property-card img {
  transition: none !important; /* coupe les transitions qui donnent l'impression d'inertie */
}

/* 1) Card : plus de translation / zoom au hover */
.properties-grid .property-card:hover {
  transform: none !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.10) !important; /* même ombre que l'état normal */
}

/* 1b) Si le mode réduit (-33%) est actif, conserver EXACTEMENT la même échelle au hover */
.properties-grid.shrink-33 .property-card {
  transform: scale(0.67) !important;      /* état normal */
}
.properties-grid.shrink-33 .property-card:hover {
  transform: scale(0.67) !important;      /* état hover identique */
}

/* 2) Image : aucune transformation au hover (+ garder le rendu de base) */
.properties-grid .property-card img,
.properties-grid .property-card:hover img {
  transform: none !important;
  filter: grayscale(.15) saturate(.95) !important; /* même filtre que l'état normal */
}

/* 3) (Facultatif) enlever aussi l’overlay “En savoir plus” au survol
   -> choisir UNE des deux lignes ci-dessous */

/* 3a) Toujours visible, sans animation */
/* 3b) OU carrément le masquer définitivement */
.property-card .vm-learnmore { display: none !important; }




/* =====================================================
   CORRECTIFS — SUPPRESSION DES ANIMATIONS/MOUVEMENTS SUR LES CARDS
   (ne touche pas aux animations hors cards, ex: photo de Laurent)
   ===================================================== */

/* 1) Card : aucun déplacement ni zoom au survol */
.properties-grid .property-card { transform: none !important; }
.properties-grid .property-card:hover { transform: none !important; box-shadow: 0 5px 15px rgba(0,0,0,0.10) !important; }

/* 2) Image dans card : aucune transfo au repos ni au hover, pas de transition */
.properties-grid .property-card img { transform: none !important; transition: none !important; }
.properties-grid .property-card:hover img { transform: none !important; filter: grayscale(.15) saturate(.95) !important; box-shadow: none !important; }

/* 3) Mode réduit : réduction via la grille seulement (pas de scale) */
.properties-grid.shrink-33 { grid-template-columns: repeat(auto-fit, minmax(174px, 1fr)); gap: 1.25rem; }
.properties-grid.shrink-33 .property-card { transform: none !important; margin-top: 0 !important; }
.properties-grid.shrink-33 .property-card:hover { transform: none !important; }

/* 4) Option : on garde l'overlay "En savoir plus" mais sans animation verticale */
.property-card .vm-learnmore { transform: none !important; transition: opacity .2s ease !important; }
.property-card:hover .vm-learnmore, .property-card:focus-within .vm-learnmore { opacity: 1; }



/* === MENU NAV : taille plus grande (global) === */
.nav-link {
  font-size: 1.5rem !important; /* +~15% */
}


/* === HEADER — réduction de la hauteur === */

/* 1) Réduire la taille du médaillon et le padding vertical */
:root {
  --logo-height: 76px;          /* était 90px */
  --logo-height-mobile: 56px;   /* était 64px */
  --header-padding-y: 0.9rem;   /* était 1.25rem */
  /* (re)calcule la hauteur globale du header pour le décalage du body */
  --header-height: calc(var(--logo-height) + 2 * var(--header-padding-y));
}
/* Variante mobile : recalcule aussi la réserve du body */
@media (max-width: 768px) {
  :root { --header-height: calc(var(--logo-height-mobile) + 2 * var(--header-padding-y)); }
}

/* 2) En desktop, éviter la sur-hauteur forcée de .navbar */
@media (min-width: 769px) {
  .navbar {
    height: auto;                         /* au lieu de calc(var(--logo-height) + 12px) */
    min-height: calc(var(--logo-height)); /* garde l’alignement confortable */
    padding-left: 1.5rem; 
    padding-right: 1.5rem;
  }
}

/* 3) Médaillon un peu plus compact (baisse la “bordure” interne) */
.nav-logo { padding: 4px; }               /* était 6px */
@media (max-width: 768px) { .nav-logo { padding: 4px; } }

/* (Rappel) le logo suit bien la variable de hauteur */
.nav-logo-img { height: var(--logo-height); }
@media (max-width: 768px) { .nav-logo-img { height: var(--logo-height-mobile); } }





/* Mobile : contour orange autour du menu quand il est ouvert */
@media (max-width: 768px) {
  .nav-menu.active {
    /* trait interne net, compatible border-radius */
    box-shadow: inset 0 0 0 3px var(--accent-color);
    border-radius: 12px;
  }
}



/* === Modal : titre en orange === */
.vm-modal__title {
  color: var(--accent-color) !important; /* #FE8217 */
}

/* === Modal : fond bleu très clair === */
.vm-modal__dialog {
  background: var(--surface-alt) !important;       /* bleu très clair */
  border-color: color-mix(in srgb, var(--primary-color) 18%, var(--border-color));
}
/* === Mobile: 2 cards côte à côte pour la section Colistiers === */
@media (max-width: 480px) {
  /* On rétrécit juste la section Colistiers (pas tout le site) */
  #colistiers .container {
    padding: 0 0.75rem; /* ~12px de chaque côté au lieu de 32px */
  }

  /* On force 2 colonnes, quelle que soit la classe shrink-33 */
  #colistiers .properties-grid,
  #colistiers .properties-grid.shrink-33 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem; /* rétrécit aussi l'écart entre cards */
  }

  /* Mini-ajustements pour laisser de l’air au nom + bouton rond */
  #colistiers .name-banner {
    padding-right: 2.5rem;
  }
  #colistiers .name-banner .mf-toggle {
    width: 28px;
    height: 28px;
    right: 8px;
  }
}


/* ===== Laurent Gueit — réduction forte de la police ===== */
/* Titres de la lettre */
#LaurentGueit .about-text h2 {
  font-size: 1.25rem !important;   /* avant: 2rem */
  margin-bottom: .6rem !important;
}

/* Corps de texte (paragraphes + listes) */
#LaurentGueit .about-text p,
#LaurentGueit .about-text li {
  font-size: 0.78rem !important;   /* avant: 1rem */
  line-height: 1.6 !important;     /* resserré mais lisible */
  margin-bottom: .6rem !important; /* avant: var(--about-paragraph-gap) = 1rem */
}

/* Listes : léger resserrage */
#LaurentGueit .about-text ul {
  padding-left: 1rem !important;
  margin-bottom: .6rem !important;
}

/* Variante mobile : encore un cran en-dessous */
@media (max-width: 768px) {
  #LaurentGueit .about-text h2 { font-size: 1.10rem !important; }
  #LaurentGueit .about-text p,
  #LaurentGueit .about-text li { font-size: 0.72rem !important; }
}

/* (Optionnel) Si vous voulez un rendu "très petit" partout (≈ –35/40 %) :
#LaurentGueit .about-text p,
#LaurentGueit .about-text li { font-size: 0.70rem !important; }
@media (max-width: 768px) {
  #LaurentGueit .about-text p,
  #LaurentGueit .about-text li { font-size: 0.66rem !important; }
}
*/


/* ===== Laurent Gueit — mode compact : marges et typo réduites ===== */

/* 1) Réduire l'espace haut/bas de la section (au lieu de 5rem) */
#LaurentGueit.properties-section {
  padding: 2.5rem 0 !important;
}

/* 2) Rapprocher l'image et le texte (gap de 1rem au lieu de 1.75rem) */
#LaurentGueit .about-content {
  gap: 1rem !important;
}

/* 3) Réduire les marges internes de la carte de texte (au lieu de 2rem) */
#LaurentGueit .about-text {
  padding: 1rem 1rem !important;
}

/* Ajuster la barre colorée à gauche pour suivre la nouvelle hauteur interne */
#LaurentGueit .about-text::before {
  top: .6rem !important;
  bottom: .6rem !important;
}

/* 4) Titre de la lettre : plus petit + marges verticales resserrées */
#LaurentGueit .about-text h2 {
  font-size: 1.20rem !important;   /* était 2rem */
  margin: .25rem 0 .45rem !important;
}

/* 5) Corps de texte : marges et tailles réduites */
#LaurentGueit .about-text p,
#LaurentGueit .about-text li {
  font-size: 0.76rem !important;   /* était 1rem */
  line-height: 1.55 !important;
  margin: 0 0 .45rem 0 !important; /* au lieu de 1rem */
}

/* 6) Listes : retrait et marge inférieure plus compacts */
#LaurentGueit .about-text ul {
  padding-left: .9rem !important;  /* au lieu de ~1.2rem */
  margin: 0 0 .45rem 0 !important;
}

/* Espacement entre deux items de liste réduit */
#LaurentGueit .about-text li + li {
  margin-top: .25rem !important;   /* au lieu de 0.35rem */
}

/* 7) Variante mobile : encore un cran plus dense */
@media (max-width: 768px) {
  #LaurentGueit.properties-section { padding: 2rem 0 !important; }
  #LaurentGueit .about-text { padding: .85rem .9rem !important; }
  #LaurentGueit .about-text h2 { font-size: 1.05rem !important; }
  #LaurentGueit .about-text p,
  #LaurentGueit .about-text li {
    font-size: 0.70rem !important;
    margin-bottom: .38rem !important;
  }
}


/* ===== Laurent Gueit – réduire le H2 d'ouverture ===== */
/* Cible uniquement le H2 de la lettre dans la carte de texte */
#LaurentGueit .about-text > h2 {
  font-size: 0.80rem !important;   /* avant: 2rem */
  line-height: 1.25 !important;    /* compact mais lisible */
  margin-bottom: .5rem !important; /* resserre l'espace sous le titre */
}

/* Variante mobile : un cran en dessous si besoin */
@media (max-width: 768px) {
  #LaurentGueit .about-text > h2 {
    font-size: 0.80rem !important;
  }
}
/* ===== Modal : agrandir le bouton "fermer" (croix) ===== */
.vm-modal__close {
  width: 44px !important;   /* était 38px */
  height: 44px !important;  /* était 38px */
  font-size: 24px !important; /* taille du caractère × */
  line-height: 1 !important;  /* évite un rendu flou */
}

/* Un peu plus grand sur grands écrans */
@media (min-width: 1024px) {
  .vm-modal__close {
    width: 48px !important;
    height: 48px !important;
    font-size: 26px !important;
  }
}

/* ===== Laurent Gueit — supprimer les gouttières latérales (full‑bleed) ===== */
#LaurentGueit .container {
  max-width: none !important;   /* annule 1200px -> s'étend à la largeur de la fenêtre */
  width: 100% !important;
  padding-left: 0.2rem !important;   /* enlève les 2rem à gauche */
  padding-right: 0.2rem!important;  /* enlève les 2rem à droite */
}

/* (Optionnel) si tu veux que l'ensemble "image + carte" colle vraiment au bord
   en petits écrans uniquement : */
@media (max-width: 768px) {
  #LaurentGueit .container {
    padding-left: 0.2rem !important;
    padding-right: 0.2 !important;
  }
}

/* Profession de foi (MODAL) — texte plus petit */
.vm-modal__body {
  font-size: 0.8rem;      /* ↓ par rapport à 0.98rem */
  line-height: 1.72;       /* garde une bonne lisibilité */
}
.vm-modal__body p {
  margin-bottom: 0.6rem;   /* resserre légèrement les paragraphes */
}

/* Mobile : encore un cran en dessous */
@media (max-width: 768px) {
  .vm-modal__body {
    font-size: 0.8rem;
  }
}
/* ==== Noms des colistiers — plus petits ==== */
/* Bandeau sous la photo */
.properties-grid .property-card .name-banner {
  font-size: 0.72rem !important;   /* ↓ au lieu de 0.80rem */
  min-height: 42px;                 /* conserve l’alignement vertical */
  padding: .60rem 2.6rem .60rem 0.9rem; /* un peu moins d'air, laisse la place au bouton */
}
.properties-grid .property-card .name-banner strong {
  font-size: inherit !important;    /* garde la même réduction sur <strong> */
}

/* Mobile : un peu plus lisible mais toujours réduit */
@media (max-width: 768px) {
  .properties-grid .property-card .name-banner {
    font-size: 0.78rem !important;  /* était 0.85rem auparavant */
    min-height: 40px;
  }
}

/* Titre du MODAL (le nom en haut de la fenêtre) — plus petit */
.vm-modal__title {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important; /* ↓ vs clamp(1.3rem, 2.4vw, 1.8rem) */
  margin-bottom: .5rem;
}

/* (Option) Ajuste légèrement le bouton rond si besoin d’harmonie */
.properties-grid .property-card .name-banner .mf-toggle {
  width: 30px;
  height: 30px;
}













/* ====== NAVBAR – Verre dépoli + pilules + indicateur ====== */

/* Barre (haut de page) : effet verre + légère bordure interne */
.header {
  background: color-mix(in srgb, var(--primary-color) 65%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 10px 30px rgba(0,0,0,.08), inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

/* Quand on scrolle : fond plein + pas de blur (pour la perf/contraste) */
.header.scrolled {
  background: var(--primary-color);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Groupe de liens en desktop : fond discret + arrondi global */
@media (min-width: 769px) {
  .navbar { position: relative; }
  .nav-menu {
    gap: .35rem;
    padding: .25rem;
    background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
    border-radius: 999px;
    position: relative; /* pour l'indicateur */
  }
}

/* Liens en pilule */
.header .navbar .nav-link {
  position: relative;
  color: #fff;
  font-weight: 600;
  font-size: 1rem !important; /* <-- tu peux remonter à 1.1/1.2 si tu veux plus gros */
  letter-spacing: .2px;
  padding: .55rem .9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
}

.header .navbar .nav-link:hover,
.header .navbar .nav-link:focus-visible {
  background: color-mix(in srgb, var(--accent-color) 22%, transparent);
  outline: none;
}

/* État actif (classe ajoutée par JS) */
.header .navbar .nav-link.is-active {
  background: color-mix(in srgb, var(--accent-color) 28%, transparent);
}

/* Indicateur magique (barre orange qui glisse sous le lien) */
.nav-indicator {
  position: absolute;
  bottom: -6px;
  height: 3px;
  left: 0;
  width: 0;
  background: var(--accent-color);
  border-radius: 2px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color) 45%, transparent);
  transition: left .25s ease, width .25s ease, opacity .25s ease;
  opacity: 0;
}

.header.ready .nav-indicator { opacity: 1; }

/* CTA (Contact) : pilule pleine */
.header .navbar .nav-link.nav-cta {
  background: var(--accent-color);
  color: var(--text-on-primary);
  font-weight: 700;
}
.header .navbar .nav-link.nav-cta:hover,
.header .navbar .nav-link.nav-cta:focus-visible {
  filter: brightness(.95) saturate(1.05);
}

/* ====== MOBILE ====== */
@media (max-width: 768px) {
  /* Panneau plein écran + flou */
  .nav-menu {
    background: color-mix(in srgb, black 30%, var(--primary-color));
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
    border-radius: 12px;
    padding: .75rem .75rem 1rem;
  }
  .nav-item { margin: 0; }
  .nav-link {
    display: block;
    padding: 1rem 1.1rem;
    margin: .15rem 0;
    border-radius: 10px;
    font-size: 1.15rem !important;
    text-align: left;
  }
  /* Backdrop assombri derrière le menu */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 998;
  }
  .nav-backdrop.active { opacity: 1; visibility: visible; }

  /* On cache l'indicateur en mobile (pas utile ici) */
  .nav-indicator { display: none; }
}

/* Accessibilité : focus visible renforcé sur les liens */
.header .navbar .nav-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color) 45%, white);
  outline-offset: 2px;
}






/* === Agenda : supprimer le rond du jalon (marker) === */
.agenda-item::before {
  content: none !important;
  display: none !important;
}



/* === AGENDA — ROND AU NIVEAU DE LA DATE (sur le côté du 1er cadre) === */
#agenda .agenda-date {
  position: relative; /* point d'ancrage pour le jalon */
}

/* ROND : à l'extérieur, centré verticalement sur la boîte date */
#agenda .agenda-date::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%); /* centrage vertical du rond */
  left: -24px;                      /* <— décale vers la gauche (à l’extérieur du cadre) */

  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);                 /* intérieur du rond */
  border: 3px solid var(--accent-color);      /* contour orange */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* (Optionnel) petit trait qui relie le rond au cadre date */
#agenda .agenda-date::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -8px;                     /* rejoint la bordure du cadre date */
  width: 10px;                    /* longueur du connecteur */
  height: 2px;
  background: var(--accent-color);
  opacity: .9;
  pointer-events: none;
}

/* Variante visuelle si besoin pour l’item “élections” */
#agenda .agenda-item--election .agenda-date::before {
  border-color: var(--accent-color);
  background: #fff;
}

/* Mobile : un peu moins de débord, rond + petit */
@media (max-width: 768px) {
  #agenda .agenda-date::before {
    left: -18px;
    width: 14px;
    height: 14px;
    border-width: 3px;
  }
  #agenda .agenda-date::after {
    left: -6px;
    width: 8px;
  }
}























/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --f: .5em; /* control the folded part */
  
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
  background-color: #BD1550; /* the main color  */
}










/* ===== Bandeau simple — défilement droite → gauche ===== */



/* zone visible */
.header-banner .hb-viewport {
  overflow: hidden;
  width: 100%;
}

/* texte qui défile */
.header-banner .hb-item {
  display: inline-block;
  white-space: nowrap;

  font-weight: 500;

  /* animation */
  animation: hb-simple-scroll 30s linear infinite;
}

/* animation droite → gauche */
@keyframes hb-simple-scroll {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
  }
}















/* Bouton "Voir l’agenda" dans le modal */
.vm-modal__body .vm-actions {
  display: flex;
  justify-content: center;
  margin-top: .5rem;
  gap: .5rem;
}
.vm-modal__body .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.vm-modal__body .btn.btn-primary i {
  color: currentColor;
}
/* ===== Centrer la boîte de dialogue (modal) au milieu de l’écran ===== */
.vm-modal {
  display: grid;               /* grille simple */
  place-items: center;         /* centre X et Y */
  padding: 6vh 1rem;           /* respiration et bords sûrs */
}

.vm-modal__dialog {
  margin: 0;                   /* on annule le margin auto/6vh */
  max-height: min(90vh, 900px);/* évite tout dépassement vertical */
}

/* Petits écrans en hauteur : aligne en haut si l’espace est trop réduit */
@media (max-height: 520px) {
  .vm-modal { align-items: start; }
  .vm-modal__dialog { margin-top: 4vh; }
}








/* ===== Modal : agrandir + largeur fixe ===== */
.vm-modal {
  /* si le patch "centrer la" n'est pas déjà en place, on centre ici aussi */
  display: grid;
  place-items: center;
  padding: 6vh 1rem;          /* garde un peu d’air autour */
}

/* Boîte de dialogue plus grande, largeur FIXE sur desktop */
.vm-modal__dialog {
  margin: 0;                  /* annule les marges héritées */
  width: 880px;               /* <<< largeur fixe */
  max-width: 96vw;            /* sécurité en viewport étroit */
  max-height: 92vh;           /* un peu plus haut que 82vh */
  padding: 1.5rem;            /* respiration interne */
}

/* Écrans très bas en hauteur : on ancre en haut pour éviter la sensation d’écrasement */
@media (max-height: 520px) {
  .vm-modal        { align-items: start; }
  .vm-modal__dialog{ margin-top: 4vh; }
}


/* ===== Modal : centrage HORIZONTAL + VERTICAL garanti ===== */
.vm-modal {
  /* conteneur plein écran (déjà positionné en fixed + inset:0 dans ta CSS) */
  display: flex;                 /* flex = centrage fiable */
  align-items: center;           /* centre verticalement */
  justify-content: center;       /* centre horizontalement */
  padding: 6vh 1rem;             /* garde de l’air autour */
  box-sizing: border-box;
}

/* Boîte de dialogue — largeur fixe (déjà demandée) et centrage horizontal */
.vm-modal__dialog {
  margin: 0;                     /* on annule tout margin parasite */
  margin-inline: auto;           /* sécure : centre sur l’axe X même si le parent change */
  width: 980px;                  /* largeur FIXE (desktop) */
  max-width: 96vw;               /* sécurité en petits écrans */
  max-height: 92vh;              /* scroll interne si contenu long */
  padding: 1.5rem;               /* respiration interne */
}

/* Écrans très bas en hauteur : on ancre en haut pour éviter l’écrasement */
@media (max-height: 520px) {
  .vm-modal { align-items: flex-start; }
  .vm-modal__dialog { margin-top: 4vh; }
}









/* ===========================
   AGENDA – réduction globale police
=========================== */

.agenda-card {
  font-size: 0.85rem;   /* ajuste si tu veux encore plus petit (0.8 / 0.9) */
}

.agenda-card .agenda-title {
  font-size: 1rem;
}

.agenda-card .agenda-meta {
  font-size: 0.8rem;
}









/* ===========================
   Compte à rebours Élections - Style Premium
=========================== */

.election-countdown {
  margin-top: 14px;
  display: inline-block; /* ne prend pas toute la largeur */
}

.countdown-container {
  display: flex;
  gap: 8px;
}

.countdown-block {
  background: #ff8c00;           /* orange */
  border: 2px solid #0055a4;     /* bleu thème */
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  min-width: 55px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}

.countdown-block:hover {
  transform: translateY(-2px);
}

.countdown-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  line-height: 1.2;
}

.countdown-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #003366;
  margin-top: 2px;
}

.election-ended {
  background: #ff8c00;
  border: 2px solid #0055a4;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  color: white;
  display: inline-block;
}



.election-countdown {
  margin-top: 14px;
  display: flex;
  justify-content: center;   /* centre horizontalement */
}



.countdown-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;   /* évite débordement sur petit écran */
}



















/* === Compte à rebours — option A (–25%) === */
.election-countdown { margin-top: 10px; }
.election-countdown .countdown-block {
  min-width: 42px;      /* était 55px */
  padding: 4px 6px;     /* était 6px 8px */
  border-radius: 6px;   /* était 8px */
}
.election-countdown .countdown-value {
  font-size: 0.90rem;   /* était 1.1rem */
  line-height: 1.15;
}
.election-countdown .countdown-label {
  font-size: 0.58rem;   /* était 0.65rem */
  margin-top: 1px;
}





/* === Ruban "Aujourd'hui" (28 février, item #1) — couleurs du thème === */
.agenda-item--first .ribbon {
  /* Couleurs du thème */
  background-color: var(--accent-color) !important;   /* orange Vivons */
  color: var(--text-on-primary) !important;           /* texte blanc */
  /* On neutralise la déco d'origine pour garder la forme + rotation */
  border-image: none !important;
  clip-path: none;             /* on va gérer le pli via ::after */
  padding-inline: 0.9lh;       /* un poil plus compact si souhaité */
  line-height: 1.8;
  position: absolute;          /* conservé par rapport au style existant */
  top: 0; right: 0;
  transform: translate(calc((1 - cos(45deg)) * 100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
}

/* Pli du ruban (le petit triangle) aux couleurs du thème */
.agenda-item--first .ribbon::after {
  content: "";
  position: absolute;
  right: 0; bottom: -0.5em;    /* même logique que l'ancien "fold" */
  border-width: 0.5em 0.5em 0 0.5em;
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary-color) 80%, black) transparent transparent transparent;
  /* petit relief optionnel */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}

/* (Optionnel) un liseré bleu autour du ruban pour contraster sur fond clair */
.agenda-item--first .ribbon {
  box-shadow: 0 0 0 2px var(--primary-color);
}












/* === RÉPARATION Ruban "Aujourd'hui" (seulement l'item #1) === */
/* 1) Remettre la forme/clip d'origine et ne changer que la couleur */
.agenda-item--first .ribbon {
  /* Couleurs du thème, sans bordure bleue */
  background-color: var(--accent-color) !important;   /* orange */
  color: var(--text-on-primary) !important;           /* blanc */

  /* On RESTAURE la géométrie d'origine (clip-path, border-image) en annulant mes overrides */
  clip-path: polygon(
    100% calc(100% - var(--f)), 100% 100%,
    calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)),
    0 100%, 0 calc(100% - var(--f)),
    999px calc(100% - var(--f) - 999px),
    calc(100% - 999px) calc(100% - var(--f) - 999px)
  ) !important;

  /* L'ancien contour bleu venait d'un box-shadow — on le retire */
  box-shadow: 0 2px 6px rgba(0,0,0,.06) !important; /* ombre douce seulement */

  /* Rend l’animation/position d’origine intactes (aucune modif ici) */
  border-image: conic-gradient(#0008 0 0) 51%/var(--f); /* pli sobre comme dans votre CSS */
}

/* 2) On retire le "pli" custom ajouté précédemment (si présent) */
.agenda-item--first .ribbon::after {
  content: none !important;
  display: none !important;
}













/* === Élections (15 mars) — cadre premium bicolore === */
.agenda-item--election .agenda-card {
  position: relative;
  border: 2px solid var(--primary-color) !important; /* bleu net */
  border-radius: 12px;
  /* double liseré intérieur orange + léger glow */
  box-shadow:
    0 12px 28px rgba(0,0,0,.06),
    inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 70%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent-color) 18%, transparent);
}
.agenda-item--election .agenda-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.10),
    inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 85%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent-color) 24%, transparent);
}











/* ===== Agenda : état "passé" ===== */
.agenda-item.is-past .agenda-date,
.agenda-item.is-past .agenda-card {
  filter: grayscale(1);
  opacity: .60;
}

.agenda-item.is-past .agenda-title,
.agenda-item.is-past .agenda-meta,
.agenda-item.is-past .agenda-date .month,
.agenda-item.is-past .agenda-date .day,
.agenda-item.is-past .agenda-date .year {
  color: #98a2b3 !important; /* gris lisible */
}

/* Pas d'effet hover et pas de ruban décoratif */
.agenda-item.is-past .agenda-card:hover { transform: none !important; }
.agenda-item.is-past .ribbon { display: none !important; }





























/* ===== Badge "Terminé" pour les événements passés (CSS only) ===== */
.agenda-item.is-past .agenda-card {
  position: relative; /* point d’ancrage du badge */
}

.agenda-item.is-past .agenda-card::after {
  content: "✓  Terminé";
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  padding: .28rem .55rem;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #64748b;           /* gris lisible */
  border-radius: 999px;           /* pilule */
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  letter-spacing: .2px;
}

/* Option : un peu plus petit en mobile */
@media (max-width: 768px) {
  .agenda-item.is-past .agenda-card::after {
    top: 6px; right: 8px;
    font-size: .72rem;
    padding: .22rem .48rem;
  }
}







.programme-bloc {
    margin-bottom: 2rem;
    text-align: center;
}

.programme-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.programme-img {
    width: 260px;
    max-width: 100%;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    transition: transform .15s ease;
}

.programme-img:hover {
    transform: scale(1.03);
}



/* Programme électoral – image en grand dans le modal */
.vm-modal__body img.programme-full {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
}





/* Wrapper pour gérer l'overlay */
.programme-wrapper {
    position: relative;
    display: inline-block;
}

/* Overlay semi-transparent */
.programme-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .5rem .8rem;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
    color: white;
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

/* Effet au survol */
.programme-wrapper:hover .programme-overlay {
    opacity: 1;
    transform: translateY(0);
}





.hint-programme {
    text-align: center;
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--text-muted);
}














/* === Galerie média (grille de vignettes) === */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .2s ease;
}
.video-thumb:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.14); }
.video-thumb img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.video-thumb .play-badge {
  position: absolute;
  left: 12px; bottom: 12px;
  display: inline-grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--accent-color);
  color: var(--text-on-primary);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.video-thumb .play-badge i { font-size: 16px; }
.video-thumb .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .5rem .8rem .5rem 64px; /* laisse la place au badge */
  color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  background: linear-gradient(to top, rgba(0,0,0,.56), rgba(0,0,0,.0));
}

/* === Modale vidéo (plein écran, responsive 16:9) === */
.vm-video-modal { position: fixed; inset: 0; z-index: 4000; display: none; }
.vm-video-modal.active { display: grid; place-items: center; }
.vm-video-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.vm-video-dialog {
  position: relative; z-index: 1;
  width: min(1100px, 92vw); aspect-ratio: 16 / 9;
  background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.vm-video-container, .vm-video-container video, .vm-video-container iframe {
  width: 100%; height: 100%; display: block;
}
.vm-video-close {
  position: absolute; top: 8px; right: 8px;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--surface); color: var(--accent-color);
  border: 2px solid var(--accent-color);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.vm-video-close:hover { background: color-mix(in srgb, var(--surface) 85%, var(--accent-color)); }
@media (max-width: 520px) {
  .vm-video-dialog { width: 96vw; }
}




/* --- Correctif z-index pour la croix de fermeture (au-dessus de la vidéo/iframe) --- */
.vm-video-dialog { position: relative; }              /* assure un contexte de positionnement */
.vm-video-container { position: relative; z-index: 1; } /* la vidéo/iframe reste au plan 1 */
.vm-video-close { z-index: 5; }                       /* la croix passe au-dessus (plan 5) */














/* Section fond doux */
.programme-section {
  background: var(--surface-alt);
  padding: 5rem 0;
}

/* Conteneur */
.programme {
  max-width: 900px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Images */
.programme img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: white;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  transition: 
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* Effet hover élégant */
.programme img:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.programme img:not(:last-child)::after {
  content: "";
  display: block;
  height: 2px;
  width: 60%;
  margin: 2rem auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-color),
    transparent
  );
}





/* === Programme : appliquer le cadre "élections" aux 4 images === */
#programme .programme img {
  /* cadre bleu + double liseré orange, même logique que .agenda-item--election .agenda-card */
  border: 2px solid var(--primary-color);
  /* on garde ton border-radius existant (14px) -> inutile de le redéfinir */
  box-shadow:
    0 12px 28px rgba(0,0,0,.06),                                   /* ombre douce */
    inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 70%, transparent), /* liseré orange interne */
    0 0 0 2px color-mix(in srgb, var(--accent-color) 18%, transparent);        /* liseré orange externe léger */
}

/* Survol : renforce légèrement (cohérent avec le hover de l'agenda) */
#programme .programme img:hover {
  box-shadow:
    0 20px 45px rgba(0,0,0,.12),
    inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 85%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent-color) 24%, transparent);
}




/* ===========================================
   TITRES .section-title — 1 ligne garantie,
   taille fluide desktop/mobile + anti-débordement
   =========================================== */

/* Base : fluid typography + anti-wrap/overflow */
.section-title {
  /* Taille fluide : grand en desktop, plus compact en mobile */
  font-size: clamp(1.05rem, 0.9rem + 1.1vw, 1.6rem);
  line-height: 1.08;

  /* 1 seule ligne + pas de débordement */
  white-space: nowrap;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis; /* coupe proprement si l'écran est minuscule */
}

/* Téléphones ≤ 600px : on compacte un peu plus le cartouche */
@media (max-width: 600px) {
  .section-title {
    /* un cran plus petit pour être sûr que "Le Programme électoral" tienne */
    font-size: clamp(0.98rem, 3.9vw, 1.18rem);

    /* on réduit légèrement les paddings pour gagner quelques pixels */
    padding-left: .9rem;
    padding-right: .9rem;
  }

  /* Très important : neutraliser les débords des ornements pour éviter le scroll horizontal */
  .section-title::before,
  .section-title::after {
    inset: 0;          /* au lieu de -6px dans ton CSS */
  }
}

/* Ultra-petits écrans ≤ 360px : filet de sécurité */
@media (max-width: 360px) {
  .section-title {
    font-size: clamp(0.9rem, 3.6vw, 1.05rem);
  }
}















/* ===== FEU D’ARTIFICE – Overlay plein écran au 1er plan ===== */
.fw-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;           /* au-dessus de tout (vos modales vidéo sont à 4000) */
  pointer-events: none;    /* ne bloque aucun clic sur le site */
  mix-blend-mode: screen;  /* joli mélange avec le fond */
}

/* Optionnel : un voile très léger derrière, uniquement quand l’overlay est actif */
body.fw-active::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4999;           /* juste sous le canvas des feux */
  background: rgba(0,0,0,0.4);
}

/* Respecte les préférences d’accessibilité (réduction des animations) */
@media (prefers-reduced-motion: reduce){
  .fw-canvas{ display:none !important; }
  body.fw-active::after{ display:none !important; }
}