/* NOTRE-HISTOIRE — CSS HEX-only (genere depuis notre-histoire-v2.html) | Palette Accord D | 100% HEX */


/* ─── TOKENS ───
   Le bloc :root qui recopiait ici la palette complète (--rds-fond,
   --rds-accent, --rds-encre, --rds-or…) a été retiré le 2026-07-24 : ces
   valeurs étaient identiques à celles de style.css, chargé avant cette
   feuille. Les redéclarer par page créait un second système à maintenir,
   sans aucun effet sur le rendu. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--rds-font-body);
  font-weight: 300;
  background: var(--rds-fond);
  color: var(--rds-encre);
  line-height: 1.6;
}

/* ─── Utilitaires partagés ─── */
.surtitre {
  display: block; font-family: var(--rds-font-body); font-size: 0.7rem;
  font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--rds-surtitre); margin-bottom: 1rem;
}
.btn-primary {
  display: inline-block; background: var(--rds-cta); color: var(--rds-cta-texte);
  font-family: var(--rds-font-body); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 2.4rem; border: none; border-radius: var(--rds-radius); cursor: pointer;
  transition: filter var(--rds-transition), transform var(--rds-transition);
}
.btn-primary:hover { filter: brightness(0.88); transform: translateY(-2px); }
.btn-outline {
  display: inline-block; background: transparent; color: var(--rds-encre);
  font-family: var(--rds-font-body); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 2.4rem; border: 1.5px solid var(--rds-encre);
  border-radius: var(--rds-radius); cursor: pointer;
  transition: background var(--rds-transition), color var(--rds-transition), transform var(--rds-transition);
}
.btn-outline:hover { background: var(--rds-encre); color: var(--rds-fond); transform: translateY(-2px); }

/* Placeholders striés */
.ph {
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-family: var(--rds-font-body); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; padding: 12px;
}
.ph--rose {
  background: repeating-linear-gradient(45deg,
    #7337571F 0px,
    #7337571F 1px,
    #73375738 1px,
    #73375738 14px);
  border: 1px dashed #7337574D;
  color: var(--rds-taupe);
}
.ph--vert {
  background: repeating-linear-gradient(45deg,
    #37734A1A 0px,
    #37734A1A 1px,
    #37734A33 1px,
    #37734A33 14px);
  border: 1px dashed #37734A47;
  color: var(--rds-taupe);
}
.ph--or {
  background: repeating-linear-gradient(-45deg,
    #C9A4581F 0px,
    #C9A4581F 1px,
    #C9A45838 1px,
    #C9A45838 14px);
  border: 1px dashed #C9A45847;
  color: var(--rds-taupe);
}
.ph--violet {
  background: repeating-linear-gradient(45deg,
    #C9A4581F 0px,
    #C9A4581F 1px,
    #C9A45838 1px,
    #C9A45838 14px);
  border: 1px dashed #C9A4584D;
  color: var(--rds-taupe);
}
.ph--dark {
  background: repeating-linear-gradient(45deg,
    #FFFFFF0F 0px, #FFFFFF0F 1px,
    #FFFFFF05 1px, #FFFFFF05 14px);
  border: 1px dashed #FFFFFF2E;
  color: #FFFFFFCC;
}

/* Conteneur principal — empêche tout scroll horizontal */
.rds-page-histoire { overflow-x: hidden; }

/* Séparateur floral */
.floral-divider { display: flex; align-items: center; justify-content: center; padding: 2.5rem 0; }
/* Annule le fond blanc global (#fff8f2) hérité de style.css dans les sections colorées */
.cta-final .floral-divider { background: transparent; }

/* ─── Bloc titre de section (entre hero et intro) ─── */
.page-title-block {
  background: var(--rds-fond-alt); padding: 4rem 3rem 2rem; text-align: center;
  border-bottom: 1px solid #2A1F1A12;
}
.page-title-block .surtitre { margin-bottom: 1rem; }
.page-title-block h2 {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.2;
}
.page-title-block .floral-divider { background: transparent; }

/* ─── HERO ÉDITORIAL (sync services-v2.html v1__edito) ─── */
.v1__edito {
  background: var(--rds-vert); color: #fff;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  min-height: 640px;
}
.v1__edito-inner {
  padding: 7rem 4rem 6rem; position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 640px; margin-left: auto;
}
.v1__edito-tag {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--rds-font-body); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; color: #fff;
  margin-bottom: 1.4rem; padding: 0.4rem 1rem;
  border: 1px solid #FFFFFF66;
  border-radius: 40px;
  background: #FFFFFF14;
  backdrop-filter: blur(4px);
  align-self: flex-start;
}
.v1__edito-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--rds-or); flex-shrink: 0; }
.v1__edito-byline {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase; color: #FFFFFFB3;
  margin-bottom: 1.6rem; display: block;
}
.v1__edito-title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(2.8rem, 5.4vw, 4.8rem); font-weight: 500;
  color: #fff; line-height: 1; margin-bottom: 1.8rem; letter-spacing: -0.01em;
}
.v1__edito-title em { color: var(--rds-or); font-style: italic; font-weight: 300; }
.v1__edito-sep { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.v1__edito-sep-line { width: 56px; height: 1px; background: #C9A458CC; }
.v1__edito-text {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 300;
  color: #FFFFFFE0; line-height: 1.7; max-width: 520px; text-wrap: pretty;
}
@media (max-width: 960px) {
  .v1__edito { grid-template-columns: 1fr; }
  .v1__edito-inner { max-width: none; margin: 0; padding: 6rem 2rem 3rem; }
}

/* ─── Hero « Notre Histoire » — photo plein fond (2026-07-09 ter) ───
   La cliente a rejeté le débordement 2-colonnes (.v1__edito--photo-bleed,
   photo dans une colonne séparée) : elle veut la même LOGIQUE que le hero
   homepage (.hero de accueil.css) — une seule photo en fond plein cadre,
   voile sombre + texte superposé par-dessus, aucun cadre, aucune colonne
   séparée. Remplace entièrement le bloc photo-bleed ci-dessus (retiré, pas
   de code mort superposé). Proportions du hero conservées : le modificateur
   ne touche pas min-height (640px, hérité de .v1__edito de base) — seule la
   composition interne change (plein fond au lieu du split 2 colonnes). */
/* Spécificité renforcée (.v1__edito.v1__edito--photo-bg = 0-2-0) : nécessaire
   pour battre `.v1__edito.v1__edito > * { position: relative; }` de
   tokens-accord-d.css (0-2-0 également, mais chargé avant — sans ce
   renfort .v1__edito-bg/.v1__edito-veil restent en flux normal au lieu
   d'être superposés en plein fond). Même principe que la neutralisation
   déjà pratiquée dans hero-background.css pour l'ancien ::before. */
.v1__edito.v1__edito--photo-bg {
  grid-template-columns: 1fr;
  background: var(--rds-encre) !important; /* fond de secours pendant le chargement de la photo — remplace le dégradé vert de tokens-accord-d.css */
}
/* Le grain papier + vignette de tokens-accord-d.css (.v1__edito.v1__edito::before/::after)
   est une texture pensée pour un fond de couleur plat : sur une vraie photo,
   elle brouille l'image. Neutralisée pour cette variante uniquement. */
.v1__edito.v1__edito--photo-bg::before,
.v1__edito.v1__edito--photo-bg::after {
  display: none !important;
}
.v1__edito.v1__edito--photo-bg .v1__edito-bg {
  position: absolute; inset: 0; z-index: 0;
}
.v1__edito-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Bouquet légèrement à droite du centre — laisse la zone gauche, assombrie
     par le voile, accueillir le texte sans masquer le sujet principal. */
  object-position: 60% 38%;
  display: block;
}
/* Voile — assombrit la zone de lecture (gauche, sous le texte) + vignette
   haut/bas douce, à l'image du hero homepage (.hero__veil) : lisibilité du
   texte garantie quelle que soit la photo, sans aplat opaque uniforme. */
.v1__edito.v1__edito--photo-bg .v1__edito-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(42, 31, 26, 0.66) 0%,
      rgba(42, 31, 26, 0.42) 28%,
      rgba(42, 31, 26, 0.10) 52%,
      rgba(42, 31, 26, 0)    72%),
    linear-gradient(180deg,
      rgba(31, 22, 18, 0.38) 0%,
      rgba(31, 22, 18, 0)    22%,
      rgba(31, 22, 18, 0)    68%,
      rgba(31, 22, 18, 0.48) 100%);
}
.v1__edito--photo-bg .v1__edito-inner {
  margin-left: 0;
  margin-right: auto;
  /* Affinage de composition (2026-07-09 quater) : décalé vers la droite et
     légèrement remonté pour mieux s'intégrer au cadre plutôt que de coller
     au bord gauche. Neutralisé sous 960px (texte pleine largeur, cf. media
     query ci-dessous) — appliqué uniquement en composition desktop/tablette. */
  transform: translate(100px, -24px);
  /* text-shadow inherited by tag/byline/title/text : ombre subtile pour la
     lisibilité, la photo n'ayant plus de voile opaque en dessous du texte. */
  text-shadow: 0 2px 20px rgba(20, 14, 11, 0.4);
}

@media (max-width: 960px) {
  .v1__edito-bg img { object-position: 50% 32%; }
  .v1__edito--photo-bg .v1__edito-inner { transform: none; }
  /* Le texte passe en pleine largeur sous 960px : le voile directionnel
     gauche→droite laisserait la partie droite trop claire pour rester lisible
     sur toute la largeur — bascule vers un voile plus uniforme + vignette. */
  .v1__edito.v1__edito--photo-bg .v1__edito-veil {
    background:
      linear-gradient(180deg,
        rgba(42, 31, 26, 0.62) 0%,
        rgba(42, 31, 26, 0.40) 24%,
        rgba(42, 31, 26, 0.44) 62%,
        rgba(42, 31, 26, 0.74) 100%),
      rgba(42, 31, 26, 0.32);
  }
}

/* ─── Intro / manifeste ─── */
.intro {
  /* padding-top 6rem venait d'un temps où .intro suivait directement le hero
     photo (grand aplat sombre) — depuis l'ajout de .page-title-block entre
     les deux (même fond rose des deux côtés), ce padding s'ajoutait à celui
     du bloc titre et laissait un vide vertical de ~130px sans aucun contenu.
     Réduit de moitié : le padding-bottom (transition vers .timeline-strip,
     déjà ajusté le 2026-07-23) n'est pas concerné. */
  padding: 3rem 3rem 2.5rem;
  background: var(--rds-fond-alt);
  text-align: center;
}
.intro__text {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 300;
  color: var(--rds-encre); line-height: 1.7;
  max-width: 760px; margin: 0 auto;
}
.intro__text em { color: var(--rds-accent); font-style: italic; }

/* ─── Timeline-strip — 4 jalons sous l'intro ─── */
.timeline-strip {
  padding: 1rem 3rem 6rem;
  background: var(--rds-fond-alt);
}
/* ⚠️ Le nombre de colonnes et les retraits du filet sont SOLIDAIRES : le
   filet doit relier le centre du premier point au centre du dernier, donc
   ses retraits valent la demi-colonne — 1/(2n). À 3 jalons c'était 16,66 %,
   à 4 c'est 12,5 %. Ajouter un cinquième jalon sans recalculer ferait
   dépasser le filet au-delà des points extrêmes. */
.timeline-strip__rail {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: start;
  padding-top: 3rem;
  max-width: 1100px; margin: 0 auto;
}
.timeline-strip__rail::before {
  content: ''; position: absolute;
  top: 12px; left: 12.5%; right: 12.5%; height: 1px;
  background: linear-gradient(to right,
    #C9A45800 0%,
    #C9A458A6 12%,
    #C9A458A6 88%,
    #C9A45800 100%);
}
.timeline-strip__node {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.4rem;
  padding: 0 1rem;
  text-decoration: none; color: inherit; cursor: pointer;
}
.timeline-strip__dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rds-fond-alt);
  border: 1.5px solid var(--rds-or);
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  box-shadow: 0 0 0 4px var(--rds-fond-alt);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.timeline-strip__node:hover .timeline-strip__dot,
.timeline-strip__node:focus-visible .timeline-strip__dot {
  background: var(--rds-accent); border-color: var(--rds-accent);
}
.timeline-strip__year {
  /* Taille exposée en variable : le jalon « L'Équipe » en a besoin pour
     rattraper sa ligne de base (voir --label plus bas). La recopier
     ailleurs ferait diverger les deux au premier ajustement. */
  --rds-tl-annee: clamp(2.4rem, 4vw, 3.4rem);
  --rds-tl-marge: 1.6rem;
  font-family: var(--rds-font-title); font-style: normal;
  font-size: var(--rds-tl-annee); font-weight: 300;
  color: var(--rds-encre); line-height: 1;
  margin-top: var(--rds-tl-marge);
  transition: color 0.3s ease;
}
.timeline-strip__node:hover .timeline-strip__year,
.timeline-strip__node:focus-visible .timeline-strip__year { color: var(--rds-accent); }
.timeline-strip__place {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--rds-taupe);
  margin-top: 0.4rem;
}
.timeline-strip__caption {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 0.95rem; color: var(--rds-taupe); line-height: 1.5;
  max-width: 200px; margin-top: 0.6rem;
}

/* Quatrième jalon — « Maintenant / L'ÉQUIPE ».
   ⚠️ Sa structure HTML est exactement celle des trois jalons datés
   (repère, intitulé, légende) : il hérite donc de leur police, de leur
   graisse, de leur couleur et de leurs espacements sans rien redéclarer.
   Une version antérieure lui donnait une structure propre — un libellé à
   la place du chiffre et pas de ligne de lieu — ce qui obligeait à
   rattraper à la main la ligne de base ET la position de la légende. La
   symétrie a supprimé ces deux rattrapages : ne pas la rompre.

   ⚠️ **Une seule adaptation reste nécessaire, et elle se paie.**
   « Maintenant » est un mot de dix lettres là où les autres portent
   quatre chiffres : à la taille pleine des années il DÉBORDE de sa
   colonne — mesuré à 1440 (249px pour 243 utiles), 900, 820 et 761px.
   Le `clamp` ci-dessous est calé sur la contrainte réelle : la colonne
   utile vaut `(viewport − 96px) / 4 − 32px` tant que la section n'est pas
   plafonnée, et le mot mesure ≈ 4,58 × sa taille de police. 3,7vw passe
   partout avec de la marge, plafonné à 3rem au-delà de 1196px où la
   largeur de section cesse de croître.

   ⚠️ Réduire la taille DÉCALE la ligne de base : les deux textes ont
   `line-height: 1`, donc le bas de leur boîte vaut `margin-top +
   font-size`. La marge compense donc l'écart exact des deux tailles —
   c'est pour cela que `.timeline-strip__year` expose `--rds-tl-annee` et
   `--rds-tl-marge`. Une marge laissée telle quelle remonterait
   « Maintenant » de plusieurs pixels au-dessus des trois années, écart
   invisible à la lecture du CSS. */
.timeline-strip__node--equipe .timeline-strip__year {
  --rds-tl-maintenant: clamp(1.8rem, 3.7vw, 3rem);
  font-size: var(--rds-tl-maintenant);
  margin-top: calc(var(--rds-tl-marge) + var(--rds-tl-annee) - var(--rds-tl-maintenant));
}

@media (max-width: 760px) {
  .timeline-strip__rail { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 1rem; }
  .timeline-strip__rail::before { display: none; }
  .timeline-strip__dot { position: relative; top: 0; left: auto; transform: none; margin-bottom: 0.6rem; }
  .timeline-strip__year { margin-top: 0; }
  /* En colonne unique il n'y a plus de ligne de base commune à tenir : les
     jalons s'empilent. La compensation de « Maintenant » disparaît donc
     avec la marge des années, sans quoi elle rouvrirait un écart que rien
     ne justifie plus. La taille réduite, elle, reste utile — la colonne
     fait toute la largeur mais le mot resterait disproportionné. */
  .timeline-strip__node--equipe .timeline-strip__year { margin-top: 0; }
}

/* ─── Chapitres ─── */
.chapter-section { padding: 4rem 3rem; scroll-margin-top: 100px; }
.chapter-section--alt { background: var(--rds-fond-alt); }
.chapter {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center;
}
.chapter--rev .chapter__media { order: 2; }
/* min-width:0 → empêche le carrousel (flex) d'imposer une largeur mini qui fait déborder le texte */
.chapter__media, .chapter__body { min-width: 0; }
.chapter__year-stamp {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 7rem; font-weight: 300; color: var(--rds-accent);
  /* 0.18 lisait comme un fond quasi invisible plutôt qu'un repère narratif.
     Remonté à 0.30 : le chiffre participe davantage à la lecture du chapitre
     sans devenir un élément dominant (toujours sous le surtitre, z-index 1,
     et redondant avec l'année déjà lisible dans le badge .chapter__date).
     Vérifié sur fond crème (chapitres 1976/2025) : ~4,74:1 sous le surtitre,
     conforme. */
  opacity: 0.30; line-height: 0.9; display: block;
  margin-bottom: -2rem; margin-left: -0.4rem;
  pointer-events: none;
}
/* Chapitre alterné (2023, fond rose --rds-fond-alt) : le surtitre est prune
   sur ce même fond rose, donc plus proche en teinte du chiffre que sur le
   fond crème des 2 autres chapitres. À 0.30, la portion du surtitre qui
   passe devant le chiffre retombe sous 4,5:1 (~3,7:1 mesuré). Le chiffre
   garde ici son opacité d'origine — déjà en usage sans régression connue. */
.chapter-section--alt .chapter__year-stamp { opacity: 0.18; }
.chapter__surtitre {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--rds-accent);
  margin-bottom: 0.9rem; display: block;
  position: relative; z-index: 1; /* passe au-dessus du grand chiffre estompé */
}
.chapter__title {
  font-family: var(--rds-font-title); font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400; color: var(--rds-encre); line-height: 1.15;
  margin-bottom: 1.5rem; text-wrap: pretty;
}
.chapter__text {
  font-size: 0.97rem; color: var(--rds-taupe); line-height: 1.88;
  margin-bottom: 1.2rem; text-wrap: pretty;
}
.chapter__text:last-of-type { margin-bottom: 2rem; }
.chapter__date {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: var(--rds-font-body); font-size: 0.65rem; font-weight: 400;
  /* Le texte était en or : 2,1:1 sur le fond global, 1,6:1 sur le rose.
     Il passe au prune (7,8:1 / 5,8:1) ; le cadre et le fond restent dorés,
     l'étiquette garde donc son allure premium. */
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--rds-accent);
  padding: 0.55rem 1.1rem;
  border: 1px solid #C9A4584D;
  border-radius: 3px; background: #C9A4580F;
}
.chapter__date::before { content: ''; width: 16px; height: 1px; background: var(--rds-or); }

/* ─── Cadre doré pour images ─── */
.gold-frame {
  position: relative; display: block; padding: 0;
  background: #F7ECE4;
  border: 1px solid #C9A45873;
  border-radius: 5px;
  box-shadow:
    0 0 0 3px var(--rds-fond),
    0 0 0 4px #C9A4582E,
    0 4px 20px #2A1F1A0F;
}
.chapter-section--alt .gold-frame {
  background: #F1E0D5;
  box-shadow:
    0 0 0 3px var(--rds-fond-alt),
    0 0 0 4px #C9A4582E,
    0 4px 20px #2A1F1A0F;
}
.gold-frame > .ph { display: block; width: 100%; aspect-ratio: 4/5; border-radius: 3px; }
.gold-frame > img {
  display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 3px;
}
.chapter__media .gold-frame {
  display: flex;
}
.gold-frame > .history-placeholder {
  width: 100%;
  min-height: 360px;
  aspect-ratio: 3 / 2;
  border-radius: 3px;
}

/* ─── Carrousel photos ─── */
.carousel { position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; }
.carousel__track {
  position: relative; display: block; width: 100%; height: 100%;
  transform: none !important;
}
.carousel__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rds-font-body); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; padding: 12px;
  opacity: 0; transition: opacity 1.1s ease;
}
.carousel__slide:first-child { opacity: 1; }
.carousel.is-ready .carousel__slide { opacity: 0; }
.carousel.is-ready .carousel__slide.is-active { opacity: 1; }
.carousel__slide img {
  width: 100%; height: 100%; object-fit: contain; background: #FAF1ED; border-radius: 0;
}
.carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: #FAF1EDE0;
  border: 1px solid #C9A45859;
  color: var(--rds-encre); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background var(--rds-transition), transform var(--rds-transition), border-color var(--rds-transition);
  box-shadow: 0 2px 10px #2A1F1A1F;
}
.carousel__btn:hover { background: var(--rds-fond); border-color: var(--rds-or); transform: translateY(-50%) scale(1.06); }
.carousel__btn:focus-visible { outline: 2px solid var(--rds-accent); outline-offset: 2px; }
.carousel__btn--prev { left: 12px; }
.carousel__btn--next { right: 12px; }
.carousel__btn svg { width: 14px; height: 14px; }
.carousel__dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: #FAF1EDC7;
  backdrop-filter: blur(6px);
}
.carousel__dot {
  width: 6px; height: 6px; border-radius: 50%; padding: 0; border: none; cursor: pointer;
  background: #2A1F1A47;
  transition: background var(--rds-transition), width var(--rds-transition);
}
.carousel__dot.is-active { background: var(--rds-or); width: 18px; border-radius: 999px; }
.carousel__counter {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font-family: var(--rds-font-body); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--rds-encre);
  padding: 4px 10px; border-radius: 999px;
  background: #FAF1EDD1;
  backdrop-filter: blur(6px);
}
.carousel__btn,
.carousel__dots,
.carousel__counter {
  display: none;
}
.gold-frame__corner {
  position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 2;
}
.gold-frame__corner--tl { top: -1px; left: -1px; }
.gold-frame__corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.gold-frame__corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.gold-frame__corner--br { bottom: -1px; right: -1px; transform: scale(-1); }

/* ─── Portrait / Citation Saliha ─── */
.portrait-band {
  background: var(--rds-fond-alt); padding: 6rem 3rem; position: relative; overflow: hidden;
  border-top: 1px solid #2A1F1A12;
  border-bottom: 1px solid #2A1F1A12;
}
/* Colonnes inversées (lot finalisation 2026-07-31) : le texte (.portrait-band__body,
   désormais 1er dans le DOM) occupe la colonne flexible, la photo
   (.portrait-band__media, désormais 2e) garde sa largeur fixe de 460px —
   mêmes dimensions/proportions de photo qu'avant, seul le côté change. */
.portrait-band__inner {
  max-width: 1100px; margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 4.5rem; align-items: center;
}
.portrait-band__media .gold-frame {
  background: #F1E0D5;
  box-shadow:
    0 0 0 3px var(--rds-fond-alt),
    0 0 0 4px #C9A4582E,
    0 4px 20px #2A1F1A0F;
}
.portrait-band__media .ph { aspect-ratio: 4/5; }
/* Label "Mot de la fondatrice" — fleur filigrane derrière le texte (même SVG que page Contact) */
.portrait-band__header {
  margin-bottom: 1.4rem;
}
.portrait-band__label-wrap {
  position: relative;
  display: inline-block;
}
/* Tige du SVG : y=60→86, milieu à y=73%. translateY(-73%) aligne ce point avec le texte. */
.portrait-band__flower-svg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-73%);
  width: 90px;
  height: 90px;
  color: var(--rds-accent);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}
.portrait-band__flower-svg svg { width: 100%; height: 100%; display: block; }
.portrait-band__overline {
  font-family: var(--rds-font-body); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--rds-accent);
  display: block;
  position: relative;
  z-index: 1;
  /* tige centrée à 45px (50% de 90px) → padding-left aligne le M sur la tige */
  padding-left: 40px;
}
.portrait-band__quote {
  font-family: 'Allura', cursive; font-style: normal;
  font-size: clamp(1.7rem, 2.8vw, 2.35rem); font-weight: 400;
  color: var(--rds-encre); line-height: 1.55; margin-bottom: 2rem;
  text-wrap: pretty;
}
/* Guillemets CSS remplacés par la fleur SVG */
.portrait-band__quote::before { content: none; }
.portrait-band__sig {
  font-family: 'Allura', cursive; font-size: 1.35rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--rds-taupe);
}

/* ─── Interviews (galerie de témoignages filmés) ───
   Mêmes rythme, largeur et grammaire de titre que .adresses : la section
   doit se lire comme une section de cette page, pas comme un module
   rapporté.

   ⚠️ Fond = var(--rds-fond), le fond du body. Ce n'est pas un choix
   graphique par défaut mais une CONDITION du cadre doré : .gold-frame
   dessine son halo avec `box-shadow: 0 0 0 3px var(--rds-fond)`. Toute
   autre couleur de section obligerait à redéclarer ce box-shadow ici,
   comme le font .chapter-section--alt et .portrait-band__media. */
/* `scroll-margin-top: 100px` : cible du jalon « L'Équipe » de la ligne du
   temps. Même valeur que `.chapter-section`, à laquelle les trois autres
   jalons mènent — le header fixe fait 80px (`--header-height`), les 20px
   restants évitent que le haut de la section se colle sous lui. Réutiliser
   la valeur existante plutôt qu'en inventer une garde les quatre ancres de
   la page cohérentes entre elles. */
.interviews { padding: 6rem 3rem; max-width: 1100px; margin: 0 auto; scroll-margin-top: 100px; }
.interviews__head { text-align: center; margin-bottom: 3.4rem; }
.interviews__title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.2;
  text-wrap: pretty;
}
.interviews__intro {
  max-width: 560px; margin: 1.1rem auto 0;
  font-size: 0.95rem; color: var(--rds-taupe); line-height: 1.7;
  text-wrap: pretty;
}

/* Grille : le PLAFOND de 310px est aussi important que le plancher.
   Les miniatures livrées mesurent 363 à 476px de large — au-delà, elles
   seraient affichées au-dessus de leur résolution native et paraîtraient
   adoucies sur un écran à forte densité. Le plancher de 240px garantit
   l'inverse : jamais deux vignettes minuscules côte à côte. `auto-fit`
   fait tomber la grille de 3 → 2 → 1 colonnes toute seule, sans point de
   rupture arbitraire à maintenir.
   ⚠️ **Le plafond et l'écart sont liés à la largeur de la section.**
   `.interviews` est en `max-width: 1100px` avec `padding: 3rem` latéral,
   soit 1004px utiles : trois colonnes de 310px plus deux écarts de 2rem
   font 994px et tiennent (10px de marge). Un plafond de 340px n'en
   laissait tenir que DEUX — mesuré, y compris à 2560px, parce que c'est
   la largeur de la SECTION qui borne, jamais celle de l'écran. Élargir
   l'écart ou le plafond sans refaire ce calcul supprime une colonne. */
.interviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 310px));
  justify-content: center;
  gap: 2.8rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.interview { display: flex; }

/* `justify-content: flex-end` + `margin-top: auto` alignent le cadre sur le
   bas de sa cellule. Depuis l'harmonisation du 2026-09-08 tous les cadres
   ont la même hauteur, donc cet alignement ne corrige plus rien — il reste
   comme filet : le jour où une miniature manquerait ou arriverait à un
   ratio hors norme, les prénoms d'une rangée resteraient sur une ligne
   commune au lieu de se décaler les uns par rapport aux autres.
   Mise en page PARTAGÉE avec `.interview__figure`, la carte photo d'Oslo
   (1.34.6) : même cellule, même cadre, prénom sur la même ligne. Le reste de
   la règle — neutralisation du bouton natif et curseur de clic — reste au
   seul bouton : une photo statique ne doit rien promettre au survol. */
.interview__trigger,
.interview__figure {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  text-align: center;
}
.interview__trigger {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
}
.interview__frame {
  margin-top: auto;
  overflow: hidden;
  transition: transform var(--rds-transition), box-shadow var(--rds-transition);
}
/* Cadre commun aux six vignettes et à la photo d'Oslo (remplace le 4/5 que
   `.gold-frame > img` (0-1-1) impose aux photos des chapitres — spécificité
   0-2-0, jamais un !important).

   ⚠️ **Le ratio 8/7 n'est pas un chiffre rond choisi au hasard.** Il a été
   calculé sur les SEPT miniatures d'origine, de 1,005 (`05Cloe`) à 1,294
   (`03Goran`) : 8/7 ≈ 1,143 y MINIMISAIT le pire cas — 12,1 % sur
   `05Cloe`, contre 16,3 % pour un 6/5 et 13,9 % pour un 7/6. Chaque
   rognage a été vérifié à l'écran, pas seulement calculé : aucun visage ni
   personne n'est coupé.
   ⚠️ **Depuis le retrait de Cloé (1.34.7), 8/7 n'est plus le minimum
   calculé pour les six restantes — il est CONSERVÉ VOLONTAIREMENT.** Pire
   cas actuel : 11,7 % sur `03Goran`, déjà vérifié à l'œil. Ne pas le
   « ré-optimiser » : un autre ratio changerait le cadrage des six vignettes
   et celui d'Oslo, et obligerait à refaire la vérification visuelle de
   chacune.

   ⚠️ `object-position` est vertical à 30 %, jamais centré : une image
   rognée en HAUTEUR (`04Valerie`, à peine ; la photo d'Oslo, en portrait)
   l'est alors par le bas, où il n'y a que le buste, et non par le haut, où
   sont les visages. Les autres sont rognées en largeur, sur des sujets
   centrés — la composante horizontale `center` leur suffit. Recentrer
   verticalement remonterait le rognage sur les fronts.

   Ne jamais déformer : c'est `cover` (recadrage) et jamais `fill`
   (étirement). Remplacer une miniature par un ratio très différent oblige
   à refaire cette vérification à l'œil. */
.interview__frame > .interview__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 7;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 3px;
}

/* Glyphe Play : discret, jamais un bouton de lecteur vidéo. Il ne capte
   aucun événement (`pointer-events: none`) — c'est le bouton entier qui
   est la cible, miniature et prénom compris. Taille relative au cadre,
   bornée pour ne devenir ni envahissante sur grand écran ni invisible sur
   petit. Contraste : disque sombre à 42% + liseré blanc, triangle blanc à
   92% — lisible aussi bien sur les miniatures claires (fonds pastel de la
   boutique) que sur les sombres. */
.interview__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.88;
  transition: opacity var(--rds-transition), transform var(--rds-transition);
}
.interview__play svg { width: clamp(46px, 17%, 64px); height: auto; display: block; }

.interview__name {
  display: block;
  margin-top: 1rem;
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 1.45rem; font-weight: 400;
  color: var(--rds-encre);
}

/* Survol/focus sobre : la vignette se soulève très légèrement et le
   glyphe s'affirme. Le focus clavier reçoit EN PLUS le double anneau
   global du thème (:focus-visible universel, functions.php). */
.interview__trigger:hover .interview__frame,
.interview__trigger:focus-visible .interview__frame {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px var(--rds-fond),
    0 0 0 4px #C9A4585C,
    0 8px 24px #2A1F1A1F;
}
.interview__trigger:hover .interview__play,
.interview__trigger:focus-visible .interview__play {
  opacity: 1;
  transform: scale(1.06);
}
.interview__trigger:hover .interview__name,
.interview__trigger:focus-visible .interview__name { color: var(--rds-accent); }

/* ─── Lightbox vidéo (coque partagée : rds-lightbox.css) ───
   ⚠️ La vidéo n'est JAMAIS rognée : `max-height`/`max-width` la
   contraignent, `height: auto` lui laisse son ratio natif (608 × 1080).
   Aucun `object-fit: cover` ici — ce serait rogner une personne qui
   parle. La hauteur disponible retranche le padding de la coque (5rem en
   haut, 2rem en bas) plus la place de la légende. */
.interviews-lightbox__inner {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 100%;
  min-width: 0;
}
.interviews-lightbox__player { display: flex; justify-content: center; max-width: 100%; min-width: 0; }
.interviews-lightbox__video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 13rem);
  border-radius: 3px;
  background: var(--rds-dark);
}
.interviews-lightbox__caption {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: 1.15rem; font-weight: 400;
  text-align: center;
  color: color-mix(in oklch, var(--rds-blanc) 82%, transparent);
}

/* ─── Adresses ─── */
.adresses { padding: 6rem 3rem; max-width: 1100px; margin: 0 auto; }
.adresses__head { text-align: center; margin-bottom: 4rem; }
.adresses__title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500;
  color: var(--rds-encre); line-height: 1.2;
}
.adresses__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.adresse {
  padding: 2rem 1.8rem 1.8rem;
  background: var(--rds-fond);
  border: 1px solid #2A1F1A14;
  border-top: 2px solid var(--rds-accent);
  border-radius: 5px;
  display: flex; flex-direction: column;
  transition: transform var(--rds-transition), box-shadow var(--rds-transition);
}
.adresse:hover { transform: translateY(-3px); box-shadow: var(--rds-shadow); }
.adresse--or { border-top-color: var(--rds-or); }
.adresse--vert { border-top-color: var(--rds-vert); }
.adresse__year {
  font-family: var(--rds-font-body); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--rds-accent);
  margin-bottom: 0.85rem; display: block;
}
/* L'année de la carte « or » était en or : 2,1:1 sur le fond de carte.
   Les trois cartes restent différenciées par leur filet supérieur coloré
   (.adresse--or / --vert), qui est décoratif et non porteur de texte. */
.adresse--or .adresse__year { color: var(--rds-accent); }
.adresse--vert .adresse__year { color: var(--rds-vert); }
.adresse__name {
  font-family: var(--rds-font-title); font-size: 1.45rem; font-weight: 400;
  color: var(--rds-encre); margin-bottom: 0.6rem;
}
.adresse__text { font-size: 0.85rem; color: var(--rds-taupe); line-height: 1.7; margin-bottom: 0.6rem; }
.adresse__hours { font-size: 0.85rem; color: var(--rds-taupe); line-height: 1.7; margin-bottom: 1.2rem; }
.adresse__actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto;
}
.adresse__action {
  font-family: var(--rds-font-body); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--rds-radius);
  transition: background var(--rds-transition), color var(--rds-transition), border-color var(--rds-transition), transform var(--rds-transition), filter var(--rds-transition);
  flex: 1 1 auto; justify-content: center; white-space: nowrap;
}
.adresse__action svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.adresse__action--primary {
  background: var(--rds-cta); color: var(--rds-cta-texte);
  border: 1px solid var(--rds-cta);
}
.adresse__action--primary:hover { background: var(--rds-cta-hover); border-color: var(--rds-cta-hover); transform: translateY(-2px); }
.adresse__action--ghost {
  background: transparent; color: var(--rds-encre);
  border: 1px solid #2A1F1A4D;
}
.adresse__action--ghost:hover { background: var(--rds-encre); color: var(--rds-fond); border-color: var(--rds-encre); transform: translateY(-2px); }
/* 2026-07-23 — les boutons « Appeler » des 3 boutiques étaient déclinés en
   bordeaux / or / vert selon la carte. Ils adoptent tous le rose CTA, comme
   leurs équivalents de la page Contact : ce sont les mêmes boutiques et la
   même action, ils ne doivent pas changer de couleur d'une page à l'autre.
   L'accent de couleur propre à chaque boutique reste porté par le liseré et
   le libellé de la carte, qui eux ne sont pas touchés. */

/* ─── CTA final ─── */
/* 2026-09-10 — recalibrage de la hauteur de la bande rose de fin de page.
   Le vide vertical mesuré au-dessus du motif floral (136px) et sous le texte
   (136px) ne venait PAS d'une seule règle mais de trois qui s'additionnaient :
   le padding de la section (96px), le padding-top du séparateur floral (40px,
   posé plus haut dans ce fichier) et le margin-bottom de .cta-final__text
   (40px). Les trois sont corrigées ci-dessous, chacune scopée à .cta-final —
   ni .floral-divider ni .page-title-block, qui la partagent, ne bougent.
   Cible : 56px de respiration en haut ET en bas (40px sous 768px). */
.cta-final {
  background: var(--rds-fond-alt); padding: 3.5rem 3rem; text-align: center;
}
/* Le padding-top du séparateur s'ajoutait à celui de la section : c'était du
   vide EXTÉRIEUR déguisé en espacement interne. Son padding-bottom, lui, est
   bien l'espacement motif → titre : il est conservé intact. */
.cta-final .floral-divider { padding-top: 0; }
.cta-final__inner { max-width: 720px; margin: 0 auto; }
.cta-final__title {
  font-family: var(--rds-font-title); font-style: normal;
  font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500;
  color: var(--rds-encre); margin: 1rem 0 1.2rem; line-height: 1.2;
}
.cta-final__text {
  font-size: 0.95rem; color: var(--rds-taupe); margin-bottom: 2.5rem;
  line-height: 1.7;
}
/* .cta-final__btns n'est PAS rendu par template-notre-histoire.php : le texte
   est le dernier élément de la section, et son margin-bottom de 2.5rem
   devenait 40px de rose vide qui s'ajoutaient au padding-bottom. La
   déclaration ci-dessus est laissée telle quelle — elle reprendra son rôle
   d'espacement interne le jour où des boutons sont ajoutés ici. */
.cta-final__inner > :last-child { margin-bottom: 0; }
.cta-final__btns {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
}

@media (max-width: 880px) {
  .chapter, .portrait-band__inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .chapter--rev .chapter__media { order: 0; }
  /* Tablette : 2 colonnes plutôt que 3 cartes empilées pleine largeur — même
     correction déjà appliquée à .shops__grid sur la page Contact (les 3
     boutiques y étaient trop longues à ~820px). 3e carte seule sur sa ligne,
     comme sur Contact. */
  .adresses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-section { padding: 3rem 1.5rem; }
}

@media (max-width: 768px) {
  /* Gain symétrique à celui du desktop ci-dessus (padding-top de .intro) :
     le bloc titre et l'intro partagent le même fond rose sans séparation
     visuelle forte, un padding-top aussi généreux que celui suivant le hero
     photo laissait un vide vertical sans contenu. */
  .intro { padding: 2rem 1.5rem 2.5rem; }
  .timeline-strip { padding: 1rem 1.5rem 4rem; }
  .portrait-band { padding: 4rem 1.5rem; }
  .adresses { padding: 4rem 1.5rem; }
  .interviews { padding: 4rem 1.5rem; }
  /* Mobile : UNE seule colonne, jamais deux vignettes minuscules côte à
     côte. Le plafond de 340px du desktop est levé pour que la miniature
     occupe la largeur disponible — plus grande, donc plus lisible, quitte
     à dépasser un peu sa résolution native : à cette taille l'écart est
     invisible, alors que deux colonnes de 150px le seraient beaucoup. */
  .interviews__grid { grid-template-columns: minmax(0, 380px); gap: 2.2rem; }
  .interviews__head { margin-bottom: 2.4rem; }
  /* Coque de lightbox plus étroite en haut sur petit écran : la légende et
     la vidéo doivent tenir sans que le bouton de fermeture ne les chevauche. */
  .interviews-lightbox__video { max-height: calc(100dvh - 11rem); }
  .interviews-lightbox__caption { font-size: 1.02rem; }
  /* Petit mobile : retour à 1 colonne (2 colonnes réservées à la tablette ci-dessus) */
  .adresses__grid { grid-template-columns: 1fr; }
  .page-title-block { padding: 3rem 1.5rem 1.5rem; }
  /* Voir le commentaire du bloc « CTA final » : même recalibrage sur mobile,
     64px de vide vertical ramenés à 40px. */
  .cta-final { padding: 2.5rem 1.5rem; }
  /* Hero : réduction padding vertical sur petit écran */
  .v1__edito-inner { padding: 3.5rem 1.5rem 2rem; }
  /* Section Mot de la fondatrice — réduction espacement mobile */
  .portrait-band__header { margin-bottom: 0.8rem; }
  .portrait-band__flower-svg { width: 72px; height: 72px; }
  .portrait-band__quote { margin-bottom: 1.2rem; }
}

/* ─── Mouvement réduit ───
   Les seules animations introduites par la galerie d'interviews sont le
   léger soulèvement de la vignette et l'agrandissement du glyphe Play au
   survol. Le changement de COULEUR du prénom et l'opacité du glyphe sont
   conservés : ce sont des repères d'état, pas du mouvement. */
@media (prefers-reduced-motion: reduce) {
  .interview__frame,
  .interview__play { transition: none; }
  .interview__trigger:hover .interview__frame,
  .interview__trigger:focus-visible .interview__frame { transform: none; }
  .interview__trigger:hover .interview__play,
  .interview__trigger:focus-visible .interview__play { transform: none; }
}