/* 1) Décalage de base pour tous les scrolls par ancre sur la home */
body.homepage {
  scroll-padding-top: 90px;  /* ≈ hauteur de ton header fixe */
}

/* 2) Les vraies sections de la home (celles visées par la side-nav) */
body.homepage section[id] {
  scroll-margin-top: 90px;   /* même valeur que ci-dessus */
}

/* RESET & BASE LAYOUT */
html, body {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: #03001E !important;
  font-family: 'Georgia', serif;
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}
.homepage-container {
  width: 100vw;
  max-width: 100vw;
  margin: 0 auto;
  padding: 0;
  display: block;
}

/* MAIN LEFT MARGIN for most blocks */
.homepage-container > section:not(.fw-promo-banner):not(.carousel-hero),
.homepage-container > div:not(.fw-promo-banner):not(.carousel-hero) {
  margin-left: 10px;
}

/* Promo Banner - no margin left */
.fw-promo-banner {
  margin: 32px 0 32px 0 !important;
  width: 100vw;
  max-width: 100vw;
  display: block;
  padding: 0;
  z-index: 3;
}

/* ---- CAROUSEL HERO ---- */
.carousel-track-hero {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel-track-hero::-webkit-scrollbar { display: none; }
.carousel-hero-item {
  flex: 0 0 calc(100vw / 6.15);
  aspect-ratio: 16/9;
  min-width: 180px;
  max-width: 340px;
  background: #171A2C;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 4px 14px #0002;
  margin: 0;
}
.carousel-hero-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ---- PORTRAIT CAROUSEL ---- */
.carousel-track-portrait {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel-track-portrait::-webkit-scrollbar { display: none; }
.carousel-portrait-item {
  flex: 0 0 calc(100vw / 6.15);
  aspect-ratio: 2/3;
  min-width: 120px;
  max-width: 240px;
  background: #222;
  border-radius: 8px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 4px 12px #0003;
}
.carousel-portrait-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ---- WIDE CAROUSEL ---- */
.carousel-track-wide {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel-track-wide::-webkit-scrollbar { display: none; }
.carousel-wide-item {
  flex: 0 0 calc(100vw / 4.25);
  aspect-ratio: 16/9;
  min-width: 210px;
  max-width: 440px;
  background: #151b2a;
  border-radius: 9px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 4px 14px #0002;
}
.carousel-wide-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}

/* ---- TITLES ---- */
.carousel-title {
  font-size: 1.15em;
  color: #fff;
  margin: 1.1em 0 0.4em 0;
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.02em;
}

/* ---- QUOTE BANNER ---- */
.block-quote-banner {
  background: #001944;
  color: #fff;
  border-radius: 16px;
  padding: 18px 24px;
  font-family: 'Playfair Display', serif;
  font-size: 1.25em;
  margin: 32px 10px 32px 10px;
  max-width: 90vw;
}
.block-quote-banner cite {
  display: block;
  margin-top: 10px;
  font-size: 0.9em;
  opacity: 0.8;
}

/* ---- SPACING FOR OTHER CUSTOM BLOCKS ---- */
.block-neighborhood-strip,
.block-featured-video,
.block-gallery-snapshot,
.block-testimonial-carousel,
.block-call-to-action,
.block-language-diversity {
  margin: 32px 10px 32px 10px;
}

/* ---- RESPONSIVE MOBILE ---- */
@media (max-width: 700px) {
  .homepage-container { width: 100vw; max-width: 100vw; }
  .carousel-track-hero .carousel-hero-item,
  .carousel-track-portrait .carousel-portrait-item {
    flex: 0 0 calc(100vw / 2.15);
    min-width: 120px;
    max-width: 100vw;
  }
  .carousel-track-wide .carousel-wide-item {
    flex: 0 0 calc(100vw / 1.15);
    min-width: 160px;
    max-width: 100vw;
  }
  .block-quote-banner,
  .block-neighborhood-strip,
  .block-featured-video,
  .block-gallery-snapshot,
  .block-testimonial-carousel,
  .block-call-to-action,
  .block-language-diversity {
    margin: 18px 4vw 18px 4vw;
    padding: 14px 8px;
    font-size: 1em;
    max-width: 96vw;
  }
  .fw-promo-banner {
    margin: 20px 0 28px 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
}

/* ---- Z-INDEX FIX FOR BANNER (optional) ---- */
.fw-promo-banner {
  z-index: 3;
}
/* Testimonial block for homepage only */
.block-testimonial-carousel {
  background: #001944;
  border-radius: 18px;
  margin: 32px 10px;
  padding: 30px 24px;
  color: #fff;
  font-family: 'Georgia', serif;
  text-align: left;
}
.block-testimonial-carousel h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2em;
  margin-bottom: 16px;
}
.testimonial-swiper {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.testimonial-item blockquote {
  font-size: 1.1em;
  font-style: italic;
  margin: 0 0 6px 0;
  padding-left: 18px;
  border-left: 3px solid #8B0000;
  color: #fef8f0;
}
.testimonial-author {
  font-size: 0.98em;
  color: #fef8f0bb;
  margin-left: 18px;
}

/* ====== OVERRIDE: REMOVE LEFT MARGIN ONLY FOR CAROUSEL HERO ====== */
.homepage-container > div.carousel-hero,
.homepage-container > div[class*="carousel-hero"] {
  margin-left: 0 !important;
}
.carousel-hero .swiper-slide {
  background-position: 50% 30% !important;  /* 50% X, 30% Y */
  background-size: cover !important;
}

.customize-your-page-block {
  background: #13204a;
  color: #fef8f0;
  text-align: center;
  border-radius: 2em;
  max-width: 900px;
  margin: 2em auto;
}
.customize-your-page-block > div {
  padding: 2em 1.5em;
}
.customize-your-page-block h2 {
  margin: 0 0 0.3em 0;
  font-size: 2em;
  font-family: 'Playfair Display', serif;
}
.customize-your-page-block p {
  font-size: 1.13em;
  margin-bottom: 1.1em;
}
.customize-your-page-block .proto-btn {
  background: #8B0000;
  color: #fff;
  border-radius: 2em;
  font-size: 1.1em;
  padding: 0.7em 2.2em;
  border: none;
  cursor: pointer;
}
.customize-your-page-block .customize-wrapper {
  background: #223285;
  border-radius: 2em;
  margin-top: 1.2em;
  padding: 1.5em 1em;
  display: none;
}
.customize-your-page-block .customize-panel label {
  margin: 0 1em 0.4em 0;
  font-size: 1.03em;
}
.customize-your-page-block .personal-link-result {
  background: #fff2;
  color: #fef8f0;
  border-radius: 1em;
  margin-top: 1.2em;
  padding: 1em;
  display: none;
}
.customize-your-page-block .reset-btn {
  background: #eee;
  color: #8B0000;
  border-radius: 2em;
  padding: 0.3em 1.1em;
  font-size: 1em;
  border: none;
  margin-left: 1em;
  cursor: pointer;
}
/* Accordéon pillars — 0 JS, 0 inline */
.pillar-summary { list-style: none; cursor: pointer; }
.pillar-summary::-webkit-details-marker { display: none; }

.expander-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pillar-expander .teaser { flex: 1; }

/* “Bouton” textuel piloté par l'état open/closed */
.expander-cta::before { content: attr(data-closed); }
.pillar-expander[open] .expander-cta::before { content: attr(data-open); }

/* Look doux (laisse tes couleurs globales s'appliquer) */
.expander-cta {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  line-height: 1;
  font: inherit;
  white-space: nowrap;
}
/* --- FIX 31/10/2025 : corrige le double "Lire plus" hors pillars --- */

/* 1. Désactive l’injection globale */
.expander-cta::before { content: none; }

/* 2. Active uniquement sur les accordéons des pillars (vide) */
.pillar-expander .expander-cta:empty::before {
  content: attr(data-closed);
}
.pillar-expander[open] .expander-cta:empty::before {
  content: attr(data-open);
}
/* --- FIX pillars: labels robustes sans pseudo-éléments --- */
.pillar-expander .expander-cta .label-open { display: none; }
.pillar-expander[open] .expander-cta .label-closed { display: none; }
.pillar-expander[open] .expander-cta .label-open { display: inline; }

/* (optionnel) style bouton */
.pillar-expander .expander-cta {
  background: #8B0000; /* rouge foncé charte */
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  line-height: 1;
  transition: background .25s ease;
}
.pillar-expander .expander-cta:hover { background: #a31a1a; }

/* Bloc transition après la section “Le Geste” */
.pta-transition-text {
  display: block;
  text-align: left;                /* aligne avec les paragraphes */
  font-family: "Georgia", serif;
  color: #fef8f0;
  max-width: 720px;                /* largeur max harmonisée */
  margin: 28px auto 0;
  padding: 0 20px;                 /* même padding que .stf-inner */
  font-size: 1rem;
  line-height: 1.6;
  opacity: .92;
}

/* Desktop — correspond aux marges des autres sections */
@media (min-width: 1024px) {
  .pta-transition-text {
    padding: 0 40px;               /* même bord intérieur que .stf-inner */
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 860px;
  }
}


/* ——— NOTE D’INTENTION : marges et largeur commune ——— */
.section-note-intention{ padding: 0 16px; }
.section-note-intention > .section-h,
.section-note-intention .note-quote,
.section-note-intention details.pt-card{
  max-width: 780px;           /* même largeur que tes autres blocs */
  margin-left: auto;
  margin-right: auto;
}

/* Bouton rouge dans le <summary> */
.pt-btn{ display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none;
}
.pt-btn--red{ background:#8B0000; color:#fff; }
.pt-btn--red:active{ transform:translateY(1px); }

/* On garde l’icône chevron à droite du “bouton” */
.pt-card__summary{ background:transparent; padding:12px 0; }
.pt-card__summary::after{ content:""; width:10px; height:10px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease; margin-left:10px;
}
.pt-card[open] .pt-card__summary::after{ transform: rotate(-135deg); }

/* Panneau */
.pt-card{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:18px; overflow:hidden; }
.pt-card__panel{ padding:14px 16px 56px; background:rgba(255,255,255,.03); }
.pt-card__reduce{ position:absolute; right:18px; bottom:14px; padding:10px 14px; border:0; border-radius:12px;
  background:#8B0000; color:#fff; font-weight:700; cursor:pointer; }
@media (min-width:768px){
  .section-note-intention{ padding: 0 24px; }
  .pt-card__panel{ padding:18px 18px 60px; }
}
/* ===========================
   NOTE D’INTENTION — FULL CSS
   =========================== */

/* Couche section + largeur commune */
.section-note-intention { padding: 0 16px; color:#fef8f0; }
.section-note-intention > .section-h,
.section-note-intention .note-quote,
.section-note-intention details.pt-card {
  max-width:780px; margin-left:auto; margin-right:auto;
}

/* Titre & sous-titre */
.section-note-intention .section-h h2{
  font-family:"Playfair Display",serif;
  margin:12px 0 4px; font-size:1.25rem; line-height:1.2;
}
.section-note-intention .section-sub{
  margin:0 0 10px; opacity:.85; font-style:italic; font-size:1rem;
}

/* Citation d’ouverture */
.section-note-intention .note-quote{
  margin:8px auto 12px; padding:10px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; color:#fef8f0;
}
.section-note-intention .note-quote p{
  margin:0 6px 8px 0; font-family:"Georgia",serif; line-height:1.5;
}
.section-note-intention .note-quote footer{ color:#fff; font-size:.95rem; }

/* Boîte déroulante (details) */
.section-note-intention details.pt-card{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  overflow:hidden;
  margin:12px auto;
  color:#fff;
}

/* Summary en entête + bouton rouge */
.section-note-intention .pt-card__summary{
  padding-left: 16px; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; background:transparent;
  
}
.section-note-intention .pt-card__summary::-webkit-details-marker{ display:none; }

/* Chevrons à droite du summary */
.section-note-intention .pt-card__summary::after{
  content:""; width:10px; height:10px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease; margin-left:10px;
}
.section-note-intention .pt-card[open] .pt-card__summary::after{ transform:rotate(-135deg); }

/* Style bouton rouge réutilisable */
.pt-btn{ display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:12px; font-weight:700; text-decoration:none;
}
.pt-btn--red{ background:#8B0000; color:#fff; }
.pt-btn--red:active{ transform:translateY(1px); }

/* Panneau intérieur scrollable */
.section-note-intention .pt-card__panel{
  position:relative;
  max-height:70vh;               /* confortable mobile */
  overflow-y:auto;
  padding:18px 18px 70px;        /* réserve pour le bouton Réduire */
  background:rgba(255,255,255,.03);
  line-height:1.6;
  border-radius:0 0 9px 9px;
  scrollbar-width:thin;
}
.section-note-intention .pt-card__panel p{ margin:12px 0; }
.section-note-intention .pt-card__panel strong{
  color:#fef8f0; font-family:"Playfair Display",serif;
  display:block; margin-bottom:2px;
}

/* Bouton Réduire fixé en bas à droite de la carte */
.section-note-intention .pt-card__reduce{
  position:sticky; bottom:0; float:right;
  margin:10px 12px; padding:10px 16px;
  border:0; border-radius:12px;
  background:#8B0000; color:#fff; font-weight:700; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.section-note-intention .pt-card__reduce:active{ transform:translateY(1px); }

/* Petites retouches mobiles */
@media (max-width:480px){
  .section-note-intention .note-quote p{ font-style:normal; }
}

/* Confort desktop */
@media (min-width:768px){
  .section-note-intention{ padding:0 24px; }
  .section-note-intention .section-h h2{ font-size:1.45rem; }
  .section-note-intention .pt-card__panel{ padding:20px 20px 72px; }
}
/* ——— 1. STYLE DE LA CITATION (italique + centrée) ——— */
.section-note-intention .note-quote p {
  font-style: italic;
  font-family: "Playfair Display", serif;
  font-size: 1.05rem;
  line-height: 1.55;
  text-align: left;
  color: #fef8f0;
  margin: 0 0 8px;
}
.section-note-intention .note-quote footer {
  text-align: right;
  color: #fff;
  font-size: 0.95rem;
  margin-top: 6px;
}

/* ——— 2. SUPPRESSION TOTALE DE LA BARRE DE DÉFILEMENT ——— */
.section-note-intention .pt-card__panel {
  scrollbar-width: none !important;   /* Firefox */
  -ms-overflow-style: none !important; /* IE / Edge */
}
.section-note-intention .pt-card__panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ——— 3. AJUSTEMENT COULEUR & ARRONDI UNIFORME ——— */
.section-note-intention details.pt-card {
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.15);
  overflow: hidden;
}
.section-note-intention .pt-card__panel {
  background: rgba(255,255,255,.02);
  border-radius: 0 0 9px 9px;
  padding: 18px 18px 90px;
  color: #fef8f0;
}

/* ───────────── Accordéon : teaser normal puis gras à l’ouverture ───────────── */
.section-flex details summary,
.section-flex .teaser-box p {
  font-weight: 400;                /* texte normal par défaut */
  color: var(--text-color, #fef8f0);
  transition: font-weight 0.3s ease, color 0.3s ease;
}

/* quand la boîte est ouverte */
.section-flex details[open] summary,
.section-flex details[open] .teaser-box p {
  font-weight: 600;                /* semi-gras pour signaler la lecture */
  color: var(--highlight-color, #fff);
}

/* option : pour garder la cohérence mobile */
.section-flex details summary {
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

/* option esthétique : bouton rouge “Lire plus” / “Réduire” */
.section-flex details .read-toggle {
  display: inline-block;
  margin-top: 10px;
  background: #8B0000;
  color: #fff;
  border-radius: 25px;
  padding: 6px 16px;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.section-flex details .read-toggle:hover {
  background: #a40000;
}

/* quote block */
.pta-quote-transition {
  text-align: center;
  font-style: italic;
  color: #fef8f0;
  margin: 60px auto;
  max-width: 720px;
  padding: 24px 38px;
  border-top: 1px solid rgba(254, 248, 240, 0.2);
  border-bottom: 1px solid rgba(254, 248, 240, 0.2);
}

.pta-quote-transition blockquote {
  font-family: "Georgia", serif;
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 0;
}

.pta-quote-transition strong {
  color: #8B0000;
  font-style: normal;
}