/* ===================================================================
   Amor Mundi — site de présentation
   Couleurs : crème / rose / marine / jaune (bandes)
   Système typographique Amor Mundi (duo identitaire) :
   - Canela (15-20%) : logo, grands titres, accroches, citations — usage ponctuel, jamais en gras
   - Plus Jakarta Sans (80-85%) : corps de texte, sous-titres, navigation, éléments fonctionnels
   =================================================================== */

@font-face {
  font-family: "Canela";
  src: url("fonts/canela_light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: url("fonts/canela_roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: url("fonts/canela_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

:root {
  --creme: #F9F4E9;
  --vert: #B92D4B; /* rose — accent principal / CTA (foncé pour contraste AA avec texte crème) */
  --noir: #32485A; /* marine — titres / CTA principal */
  --jaune-bande: #E0B347; /* ocre — bandes pleine largeur, boutons d'action, bordures de cartes */
  --jaune-vif: #FBEB86; /* jaune pâle — couleur de survol UNIQUEMENT (boutons/liens ocre au hover), ne jamais utiliser ailleurs */
  --texte-doux: #707A82;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  background: var(--creme);
}

body {
  color: var(--noir);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.page {
  background: var(--creme);
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Bande pleine largeur (ex. "Le vrai danger ?") — casse la colonne de
   lecture avec une couleur franche plutôt qu'un encart crème */
.bande {
  background: var(--jaune-bande);
  padding: 34px 0;
  margin: 0;
}

.bande .container p,
.bande .container h2 { color: var(--noir); }

.bande .container p { font-size: 16.5px; }

.bande .carte { margin-top: 16px; margin-bottom: 0; }

.bande .carte p {
  color: var(--noir);
  font-size: 16.5px;
  margin: 0;
}

/* ---------- Typography ---------- */

h1, h2, h3, .titre {
  font-style: normal; /* jamais d'italique */
  color: var(--noir);
  margin: 0 0 12px;
}

h3, .titre {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
}

/* Canela : titres — usage ponctuel, jamais en gras/majuscules */
h1, h2 {
  font-family: "Canela", serif;
  font-weight: 400;
}

h1 { font-size: 35px; line-height: 1.3; }
h2 { font-size: 30px; line-height: 1.3; }
h3 { font-size: 20px; line-height: 1.35; }

p { margin: 0 0 13px; }

.chiffre {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  color: var(--vert);
}

/* ---------- Layout ---------- */

.section {
  padding-top: 26px;
  padding-bottom: 26px;
}

.section p { font-size: 18px; }

/* ---------- Header / nav ---------- */

.site-header {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: var(--vert);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 11.5px;
  padding-bottom: 11.5px;
}

.logo {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: 20px;
  color: #E1EBED;
  text-decoration: none;
  line-height: 1.3;
}

.logo-sous {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: #B3C8D6;
  margin-top: 1px;
}

.logo-avec-icone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo-icone {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

nav.principale ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
}

nav.principale a {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-decoration: none;
  color: #B3C8D6;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

nav.principale a:hover,
nav.principale a[aria-current="page"] {
  color: #FEE767;
  border-bottom-color: #FEE767;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  color: #E1EBED;
  cursor: pointer;
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--creme);
  background: var(--vert);
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn:hover { opacity: 0.88; }

/* ---------- Listes ---------- */

ul.liste {
  list-style: none;
  margin: 0 0 13px;
  padding: 0;
  font-size: 18px;
  line-height: 1.7;
}

ul.liste li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 5px;
}

ul.liste li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--vert);
}

/* Listes avec pictogramme rond, pour "Vos enjeux" */
ul.liste-icones {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

ul.liste-icones li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.5;
}

ul.liste-icones .icone {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul.liste-icones .icone i {
  font-size: 22px;
  color: var(--vert);
}

ul.liste-icones .icone svg {
  width: 19px;
  height: 19px;
  stroke: var(--vert);
  fill: none;
}

ul.liste-icones li > span:last-child { padding-top: 6px; }

/* ---------- Cartes / encarts ---------- */

.carte {
  background: var(--creme);
  border-radius: 8px;
  padding: 22px 24px;
  margin-bottom: 18px;
}

.carte h3 { margin-bottom: 4px; }

.carte .sous-titre {
  font-size: 14.5px;
  color: var(--texte-doux);
  margin-bottom: 12px;
}

.carte .prix {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--jaune-bande);
  margin-top: 4px;
}

.carte .prix-label {
  font-size: 12.5px;
  color: var(--texte-doux);
  margin-bottom: 14px;
}

.verbatim {
  position: relative;
  background: var(--creme);
  border-radius: 10px;
  padding: 16px 14px 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--noir);
}

.verbatim svg { width: 20px; height: 16px; margin-bottom: 6px; display: block; fill: var(--vert); }

/* ---------- Témoignages ---------- */

.temoignage {
  margin-bottom: 20px;
}

.temoignage svg { width: 26px; height: 20px; margin-bottom: 6px; display: block; fill: var(--vert); }

.temoignage p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--noir);
  margin-bottom: 5px;
}

.temoignage .auteur {
  font-size: 13.5px;
  color: var(--texte-doux);
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--jaune-bande);
  cursor: pointer;
  padding: 0;
}

.dot.actif { background: var(--vert); }

/* ---------- Photo placeholder ---------- */

.photo-placeholder.photo-placeholder-remplie {
  border: none;
  background: transparent;
  padding: 0;
  overflow: hidden;
}

.photo-placeholder-remplie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.photo-placeholder {
  width: 100%;
  height: 220px;
  background: #EFE6D3;
  border: 1px dashed #C9BB98;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #8A7A5E;
  margin-bottom: 16px;
  text-align: center;
  padding: 20px;
}

/* ---------- Formes décoratives ---------- */

.decor {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* ---------- Citation éditoriale (pull-quote) ---------- */

.section p.citation-forte,
p.citation-forte {
  position: relative;
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--noir);
  margin: 30px 0 8px;
  padding-left: 40px;
}

.mini-bio .photo-placeholder {
  flex: 0 0 220px;
  width: 220px;
  height: 190px;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .mini-bio .photo-placeholder { width: 100%; flex-basis: auto; }
}

/* ---------- Hero ---------- */

.hero { padding-top: 34px; padding-bottom: 22px; }
.hero h1 { margin-bottom: 14px; }
.hero p.intro { font-size: 17px; margin-bottom: 20px; }

.hero-code-texte .intro {
  color: var(--creme);
  font-size: 20px;
  margin-bottom: 40px;
}
.btn-pastille-hero.btn-pastille-calendrier .pastille { background: var(--creme); }
.btn-pastille-hero.btn-pastille-calendrier .pastille svg { stroke: var(--vert); fill: none; width: 20px; height: 20px; }

.btn-pastille-hero .pastille {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-pastille-hero .pastille svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.btn-pastille-offre .pastille { background: rgba(255,255,255,0.22); }
.btn-pastille-offre .pastille svg { fill: none; stroke: #fff; }
.carte-hero-rose h1, .carte-hero-rose .intro { color: var(--creme); }

.btn-pastille .pastille {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-pastille .pastille svg { width: 20px; height: 20px; fill: #fff; }

.hero-sous {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--vert);
  margin-bottom: 22px;
}

.hero-plein .intro { font-size: 21px; line-height: 1.45; margin-bottom: 8px; }

.hero-grid {
  display: flex;
  align-items: center;
  gap: 44px;
}

.hero-texte { flex: 1; min-width: 0; }

.hero-image .photo-placeholder { width: 100%; margin-bottom: 0; }

@media (max-width: 780px) {
  .hero-grid { flex-direction: column; }
}
.enjeux-image .photo-placeholder { width: 100%; margin-bottom: 0; }
.enjeux-texte ul.liste-icones { margin-bottom: 0; }
.offre-col .carte { height: 100%; }
.btn-pastille-ocre .pastille { background: var(--jaune-bande); }
.btn-pastille-ocre .pastille svg { stroke: var(--creme); fill: none; width: 20px; height: 20px; }

.enjeux-photo-egal .photo-placeholder {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
}

@media (max-width: 780px) {
  .enjeux-photo-egal .photo-placeholder { min-height: 200px; }
}

/* ---------- FAQ / accordéon ---------- */

.faq summary {
  cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--noir);
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  color: var(--jaune-bande);
}

.faq[open] summary::after { content: "–"; }

.faq-contenu { margin-top: 14px; }

.bande-ouverture .container p {
  color: var(--noir);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 17px;
  margin: 0;
}

.cta-gauche .btn {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  padding: 16px 34px;
}

@keyframes rebond {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

@media (max-width: 640px) {
  .hero-sous { font-size: 18px; }
}

#contact .btn { background: var(--vert); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--jaune-bande);
  padding: 22px 0;
  text-align: center;
}

.site-footer p { margin: 0 0 6px; font-size: 13.5px; color: var(--texte-doux); }
.site-footer .mentions { font-size: 12px; color: #9A8C6E; }
.site-footer .mentions a { text-decoration: none; margin: 0 6px; }

.rf-footer-contact a {
  color: var(--texte-doux);
  text-decoration: none;
  border-bottom: 1px solid var(--jaune-bande);
}
.rf-footer-contact a:hover { color: var(--noir); }
.rf-footer-sep { color: var(--jaune-bande); margin: 0 8px; }

/* ---------- Page équipe ---------- */

.rf-equipe-intro {
  background: var(--creme);
  padding: 70px 0 50px;
  text-align: center;
}

.rf-equipe-intro .rf-label { justify-content: center; }

.rf-equipe-intro h1,
.rf-equipe-intro h2 {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
  color: var(--noir);
  margin: 0 0 20px;
}

.rf-equipe-intro p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--noir);
  max-width: 640px;
  margin: 0 auto;
}

/* Variante pleine largeur (page Contact) : texte centré, mais sur toute
   la largeur du conteneur, sans colonne resserrée à 640px. */
.rf-equipe-intro-pleine-largeur p {
  max-width: none;
  margin: 0 0 16px;
}

.rf-equipe-intro-pleine-largeur p:last-child {
  margin-bottom: 0;
}

/* Bande marine (page Contact) : fond bleu de la charte, texte crème. */
.rf-equipe-intro-pleine-largeur {
  background: var(--noir);
  padding-top: 50px;
}

.rf-equipe-intro-pleine-largeur .rf-label,
.rf-equipe-intro-pleine-largeur h1,
.rf-equipe-intro-pleine-largeur p {
  color: var(--creme);
}

.rf-equipe-intro-pleine-largeur .rf-cta-secondaire {
  font-weight: 400;
}

/* Variante claire (page Plaquette) : fond crème, texte marine. */
.rf-equipe-intro-pleine-largeur.rf-equipe-intro-clair {
  background: var(--creme);
}

.rf-equipe-intro-pleine-largeur.rf-equipe-intro-clair .rf-label,
.rf-equipe-intro-pleine-largeur.rf-equipe-intro-clair h1,
.rf-equipe-intro-pleine-largeur.rf-equipe-intro-clair p {
  color: var(--noir);
}

.rf-devis.rf-devis-plaquette-bleu {
  background-image: linear-gradient(rgba(249, 244, 233, 0.85), rgba(249, 244, 233, 0.85)), url("images/IMG_0547.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

.rf-equipe-intro-pleine-largeur .rf-label,
.rf-equipe-intro-pleine-largeur h1 {
  text-align: left;
}

.rf-contact-intro-ligne {
  display: flex;
  align-items: center;
  gap: 40px;
  text-align: left;
}

.rf-contact-intro-photo {
  flex: 0 0 152px;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  overflow: hidden;
}

.rf-contact-intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rf-contact-intro-texte {
  flex: 1;
  text-align: left;
}

@media (max-width: 640px) {
  .rf-equipe-intro-pleine-largeur .rf-label,
  .rf-equipe-intro-pleine-largeur h1 {
    text-align: center;
  }
  .rf-contact-intro-ligne {
    flex-direction: column;
    text-align: center;
  }
  .rf-contact-intro-photo {
    margin: 0 auto;
  }
  .rf-contact-intro-texte {
    text-align: center;
  }
}

.rf-equipe-photo {
  background: var(--creme);
  border: 1px dashed var(--jaune-bande);
  border-radius: 4px;
  aspect-ratio: 1;
  max-width: 220px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rf-equipe-photo span {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  color: var(--texte-doux);
}

.rf-equipe-recos .rf-label { text-align: center; }

#fondatrices .rf-realite-ligne {
  align-items: flex-start;
}

#fondatrices .rf-realite-col-gauche {
  flex: 0 0 32%;
}

.rf-equipe-photo-duo {
  background: var(--creme);
  border: 1px dashed var(--jaune-bande);
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rf-equipe-photo-duo span {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  color: var(--texte-doux);
  padding: 0 16px;
}

#fondatrices .rf-equipe-photo-duo {
  position: relative;
  border: none;
  overflow: hidden;
  aspect-ratio: auto;
  background: transparent;
}

#fondatrices .rf-equipe-photo-duo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

@media (max-width: 640px) {
  /* La photo des fondatrices apparaissait trop grande en mobile : on plafonne la colonne
     ET l'image, sans toucher à la mise en page desktop (règles ci-dessus inchangées). */
  #fondatrices .rf-realite-col-gauche { flex: 0 0 160px; width: 160px; }
  #fondatrices .rf-equipe-photo-duo { max-width: 160px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  h1 { font-size: 25px; }
  nav.principale { position: absolute; top: 100%; left: 0; right: 0; background: #013565;
    border-bottom: 1px solid rgba(255,255,255,0.12); display: none; }
  nav.principale.ouvert { display: block; }
  nav.principale ul { flex-direction: column; gap: 0; padding: 8px 24px 18px; }
  nav.principale li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
  nav.principale li:last-child { border-bottom: none; }
  .nav-toggle { display: block; }
  .site-header .container { position: relative; }
}

/* ===================================================================
   index.html — reconstruction fidèle de la page systeme.io
   Classes préfixées "rf-" : isolées, n'affectent aucune autre page.
   =================================================================== */

.rf-header {
  background: var(--creme);
  border-bottom: 1px solid rgba(50, 72, 90, 0.15);
}
.rf-header .container {
  max-width: 1180px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.rf-header .logo { color: var(--noir); }
.rf-header .logo-sous {
  display: inline;
  color: var(--texte-doux);
}
.rf-header .logo-sous::before { content: " · "; }
.rf-header nav.principale a { color: var(--noir); }
.rf-header nav.principale a:hover,
.rf-header nav.principale a[aria-current="page"] {
  color: var(--vert);
  border-bottom-color: var(--vert);
}
.rf-header .nav-toggle { color: var(--noir); }

@media (max-width: 640px) {
  .rf-header nav.principale {
    background: var(--creme);
    border-bottom-color: rgba(50, 72, 90, 0.15);
  }
  .rf-header nav.principale li {
    border-bottom-color: rgba(50, 72, 90, 0.12);
  }
  .rf-header nav.principale a {
    color: var(--noir);
  }
  .rf-header nav.principale a:hover,
  .rf-header nav.principale a[aria-current="page"] {
    color: var(--vert);
    border-bottom-color: var(--vert);
  }
}

.rf-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.rf-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--noir);
  opacity: 0.75;
  margin-bottom: 14px;
}

.rf-label-clair { color: var(--creme); }

/* Titres de section (h2) : même police, même taille, même graisse partout
   (à l'exception du H1 du hero, traité séparément). Seules la couleur et
   les marges varient d'une section à l'autre. */
.rf-realite h2,
.rf-faire-monde h2,
.rf-offres h2,
.rf-temoignages h2,
.rf-contact-intro h2,
.rf-equipe-recos h2,
.rf-benefices-concret h2,
.rf-proposons h2,
.rf-equipes h2,
.rf-experts h2,
.rf-apropos-texte h2,
.rf-cta-final h2 {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.3;
}

/* ---------- Section 1 : Hero (fidèle à la page réelle) ---------- */

.rf-hero {
  background: var(--noir);
  min-height: calc(88vh - 56px);
  display: flex;
  align-items: center;
  padding: 48px 0;
}

.rf-hero-grid {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.rf-hero-texte { flex: 3 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.rf-hero-visuel { flex: 2 1 0; min-width: 0; display: flex; }

.rf-hero-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(30, 10, 20, 0.28);
}

.rf-hero-visuel-duo {
  align-items: stretch;
  gap: 20px;
  transform: scale(0.92);
  transform-origin: top right;
}

.rf-hero-visuel-duo .rf-hero-photo-forme {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 85%;
  align-self: center;
  overflow: visible;
}

.rf-hero-photo-trait {
  stroke: var(--jaune-bande);
  stroke-width: 3;
}

.rf-hero-photo-decalee {
  margin-top: 90px;
  height: calc(85% - 90px);
  align-self: center;
}

.rf-hero-texte h1 strong { font-weight: 400; color: var(--jaune-bande); }

.rf-hero-texte h1 {
  font-family: "Canela", serif;
  font-weight: 400;
  color: var(--creme);
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.15;
  margin-bottom: 38px;
}

.rf-hero-ligne {
  width: 64px;
  height: 3px;
  background: var(--jaune-bande);
  margin-bottom: 44px;
}

.rf-intro {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  color: var(--creme);
  font-size: 19px;
  line-height: 1.5;
  margin-bottom: 28px;
}

.rf-intro strong { font-weight: 500; }

.rf-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  margin-bottom: 16px;
}

.rf-hero-ctas .rf-btn-flat-outline { width: 230px; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.5; padding: 11px 18px; border-radius: 3px; border-color: var(--jaune-bande); animation: rf-cta-pulse 2.6s ease-out infinite; }
.rf-hero-ctas .rf-btn-flat-outline:hover { border-color: var(--jaune-vif); animation-play-state: paused; }

.rf-hero .rf-hero-ctas .rf-btn-flat-outline {
  color: var(--noir);
  background: var(--creme);
}

@keyframes rf-cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 179, 71, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(224, 179, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 179, 71, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-hero-ctas .rf-btn-flat-outline { animation: none; }
}

/* Les 2 CTA hors .rf-hero-ctas et hors #cercle-formule (fondatrices + CTA final) n'avaient pas
   le clignotement des autres CTA de la page : on aligne pour que tous pulsent pareil. */
#fondatrices .rf-btn-flat-outline,
#rf-contact .rf-btn-flat-outline {
  animation: rf-cta-pulse 2.6s ease-out infinite;
}

#fondatrices .rf-btn-flat-outline:hover,
#rf-contact .rf-btn-flat-outline:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #fondatrices .rf-btn-flat-outline,
  #rf-contact .rf-btn-flat-outline {
    animation: none;
  }
}


.rf-btn-flat-outline {
  display: inline-block;
  background: transparent;
  color: var(--creme);
  border: 1px solid var(--creme);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 16px;
  text-decoration: none;
}
.rf-btn-flat-outline:hover { border-color: var(--jaune-vif); }

.rf-btn-flat {
  display: inline-block;
  background: var(--jaune-bande);
  color: var(--creme);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 17px;
  text-decoration: none;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.18);
  align-self: flex-start;
}

.rf-btn-flat:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18); }

/* CTA secondaires — exploration, pas conversion : lien souligné, pas de fond */
.rf-cta-secondaire {
  display: inline-block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 2px solid var(--jaune-bande);
  padding-bottom: 3px;
}
.rf-cta-secondaire-sombre { color: var(--noir); }
.rf-cta-secondaire-sombre:hover { color: var(--vert); }
.rf-cta-secondaire-clair { color: var(--creme); }
.rf-cta-secondaire-clair:hover { color: var(--jaune-bande); }

.rf-secteurs {
  background: var(--creme);
  padding: 18px 0;
}
.rf-secteurs p {
  margin: 0;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--noir);
}

/* ---------- Bande chiffres ---------- */

.rf-chiffres {
  background: var(--noir);
  padding: 26px 0 22px;
  overflow: hidden;
}
.rf-chiffres-track {
  display: flex;
  width: max-content;
  animation: rf-chiffres-scroll 42s linear infinite;
}
.rf-chiffres-track:hover {
  animation-play-state: paused;
}
@keyframes rf-chiffres-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rf-chiffres-track { animation: none; }
}
.rf-chiffre {
  flex: 0 0 auto;
  min-width: 280px;
  padding: 0 40px;
  border-left: 1px solid var(--jaune-bande);
  text-align: center;
}
.rf-chiffre-nombre {
  font-family: "Canela", serif;
  font-weight: 700;
  font-size: 23px;
  color: var(--creme);
  margin: 0 0 4px;
}
.rf-chiffre-legende {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  color: var(--creme);
  opacity: 0.85;
  margin: 0;
}
/* ---------- Section 2 : Une réalité documentée et visible ---------- */

.rf-realite {
  background: var(--creme);
  padding: 60px 0;
}

#constat .rf-realite-ligne {
  align-items: stretch;
}

#constat .rf-realite-col-gauche {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#constat .rf-realite-col-gauche .photo-placeholder {
  flex: 1;
  height: auto;
  min-height: 200px;
  margin: 26px 0 0;
}

.rf-constat-titre {
  margin: 0 0 32px;
  width: 100%;
  text-align: left;
}

.rf-realite h2.rf-constat-titre {
  font-weight: 400;
  margin-bottom: 10px; /* volontaire : 10px + 26px margin-top de la photo = 36px, la norme voulue titre → contenu */
}

.rf-constat-ctas {
  justify-content: flex-end;
  margin-top: 18px; /* aligné à 36px texte → CTA, comme titre → photo (vérifié par rendu réel) */
}

.rf-constat-ctas .rf-btn-flat-outline {
  color: var(--creme);
  background: var(--noir);
  border-color: var(--jaune-bande);
}

.rf-realite-ligne {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.rf-realite-col-gauche {
  flex: 0 0 10%;
  min-width: 0;
}

.rf-realite-col-droite {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 640px) {
  .rf-realite-ligne { flex-direction: column; gap: 24px; }
  .rf-realite-col-gauche { flex: none; width: 100%; }
  #realite .rf-realite-col-gauche,
  #constat .rf-realite-col-gauche { flex: none; width: 100%; }
}

/* #constat bascule au même point de rupture que #cercle-pratique (768px),
   pour que la photo passe sous le titre en même temps sur les deux sections. */
@media (max-width: 768px) {
  #constat .rf-realite-ligne { flex-direction: column; gap: 24px; }
  #constat .rf-realite-col-gauche { flex: none; width: 100%; }
  #constat .rf-realite-col-gauche .photo-placeholder { flex: none; height: 240px; min-height: 0; margin: 0; }
  /* En dessous de 768px, la photo perd son margin-top de 26px (astuce desktop pour arriver à 36px
     via 10px de h2 + 26px de photo) : on compense directement sur le titre pour garder les 36px. */
  #constat h2.rf-constat-titre { margin-bottom: 36px; }
}

.rf-realite .rf-label {
  color: var(--vert);
  opacity: 1;
}

.rf-realite-col-gauche .rf-label {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rf-realite-col-gauche .rf-label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jaune-bande);
  flex: none;
}

.rf-realite h2 {
  color: var(--noir);
  font-weight: 700;
  margin-bottom: 10px;
}

#fondatrices h2 {
  font-weight: 400;
  color: var(--creme);
}

#fondatrices .rf-label {
  color: var(--creme);
}

#fondatrices .rf-fondatrices-titre-bloc {
  width: 100%;
  text-align: left;
}

h2.rf-fondatrices-titre-bloc {
  margin: 0 0 36px;
}

#fondatrices {
  background: var(--noir);
}

#fondatrices p:not(.rf-label):not(.rf-differencie-citation):not(.rf-credit-artiste) {
  color: var(--creme);
}

#fondatrices .rf-btn-flat-outline {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 3px;
  border-color: var(--jaune-bande);
  width: 230px;
  text-align: center;
  margin: 24px 0 0 auto;
}

#fondatrices .rf-btn-flat-outline:hover {
  border-color: var(--jaune-vif);
}

#collectif {
  background-image: url("images/IMG_0489.jpg");
  background-size: cover;
  background-position: center;
  min-height: auto;
  padding: 0;
}

#collectif .rf-differencie-citation {
  margin-bottom: 0;
}

#collectif .rf-realite-ligne {
  align-items: center;
}

#collectif .rf-realite-col-droite {
  margin-top: 0;
  text-align: left;
}

#collectif .rf-realite-panneau {
  background: var(--creme);
  padding: 56px;
}

#collectif h2,
#collectif h3 {
  color: var(--noir);
  text-align: left;
  font-weight: 400;
}

#collectif h2 strong {
  font-weight: 400;
  color: var(--vert);
}

#collectif p strong {
  font-weight: 400;
}

#collectif .rf-label {
  color: var(--noir);
  justify-content: center;
}

#collectif p:not(.rf-differencie-citation) {
  color: var(--noir);
  text-align: left;
}

#collectif .rf-realite-col-droite p:not(.rf-label):last-of-type {
  margin-bottom: 0;
}

#collectif .rf-realite-col-droite p:first-of-type {
  margin-top: 24px;
}

#collectif .rf-differencie-citation {
  color: var(--creme);
  border-left: none;
  padding-left: 0;
  text-align: left;
}

#collectif .rf-differencie-citation::before {
  content: "“";
  font-family: "Canela", serif;
  font-size: 1.3em;
  color: var(--jaune-bande);
  margin-right: 2px;
}

#collectif .rf-btn-flat-outline {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 3px;
  color: var(--noir);
  border-color: var(--noir);
  margin-top: 24px;
  display: block;
  width: fit-content;
  margin-left: auto;
}

#collectif .rf-btn-flat-outline:hover {
  border-color: var(--vert);
  color: var(--vert);
}

#ensemble {
  background: var(--creme);
  min-height: auto;
  padding: 0;
}

#ensemble .rf-differencie-citation {
  margin-bottom: 0;
}

#ensemble .rf-realite-ligne {
  align-items: center;
}

#ensemble .rf-realite-col-gauche {
  flex: 0 0 42%;
}

#ensemble .rf-collectif-entete {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  border-left: 2px solid var(--jaune-bande);
  padding-left: 24px;
}

#ensemble .rf-collectif-entete h2 {
  margin: 0;
}

#ensemble .rf-realite-col-droite {
  margin-top: 0;
  text-align: left;
}

#ensemble .rf-realite-panneau {
  background: transparent;
  padding: 20px 56px;
}

#ensemble h2,
#ensemble h3 {
  color: var(--noir);
  text-align: left;
  font-weight: 400;
}

#ensemble h2 strong {
  font-weight: 400;
  color: var(--jaune-bande);
}

#ensemble p strong {
  font-weight: 400;
}

#ensemble .rf-label {
  color: var(--noir);
  justify-content: center;
}

#ensemble p:not(.rf-differencie-citation) {
  color: var(--noir);
  text-align: left;
}

#ensemble .liste-fleche {
  margin-bottom: 0;
}

#ensemble .liste-fleche li {
  font-size: 16px;
}

#ensemble .liste-fleche li:last-child {
  margin-bottom: 0;
}

#ensemble .liste-fleche li span {
  color: var(--noir);
}

#ensemble .rf-realite-col-droite p:not(.rf-label):last-of-type {
  margin-bottom: 0;
}

#ensemble .rf-realite-col-droite p:first-of-type {
  margin-top: 0;
}

#ensemble .rf-differencie-citation {
  color: var(--creme);
  border-left: none;
  padding-left: 0;
  text-align: left;
}

#ensemble .rf-differencie-citation::before {
  content: "“";
  font-family: "Canela", serif;
  font-size: 1.3em;
  color: var(--jaune-bande);
  margin-right: 2px;
}

#ensemble .rf-btn-flat-outline {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 3px;
  border-color: var(--jaune-bande);
  margin-top: 24px;
  display: block;
  width: fit-content;
  margin-left: auto;
}

#ensemble .rf-btn-flat-outline:hover {
  border-color: var(--jaune-vif);
}

#ensemble .rf-ensemble-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
  justify-content: flex-end;
}

#ensemble .rf-ensemble-ctas .rf-btn-flat-outline {
  text-align: center;
  margin-top: 0;
  margin-left: 0;
  width: 230px;
}

.rf-realite-barre {
  width: 64px;
  height: 3px;
  background: var(--jaune-bande);
  margin-top: 8px;
  margin-bottom: 26px;
}

.rf-realite p:not(.rf-label):not(.rf-differencie-citation):not(.rf-constat-citation-texte):not(.rf-credit-artiste) {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  color: var(--noir);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.rf-realite p strong { font-weight: 500; }

#realite .rf-realite-col-gauche,
#constat .rf-realite-col-gauche,
#bifurcation .rf-realite-col-gauche,
#cercle-pratique .rf-realite-col-gauche {
  flex: 0 0 38%;
}

/* Section 3 (#cercle-pratique) : même format exactement que la section 1 (#constat) —
   surtitre, titre, puis 2 colonnes (image à gauche, texte à droite). Le texte de cette section
   est plus court que celui de #constat : on ne peut donc pas se contenter d'un stretch (la photo
   serait plus petite). La hauteur exacte de la photo de #constat est recopiée en JS
   (rfAlignListePhoto) pour garantir la même taille, quelle que soit la longueur du texte. */
#cercle-pratique .rf-realite-col-gauche {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#cercle-pratique .rf-realite-col-gauche .photo-placeholder {
  height: auto;
  min-height: 200px;
  margin: 0;
}

@media (max-width: 768px) {
  #cercle-pratique .rf-realite-ligne { flex-direction: column; gap: 24px; }
  #cercle-pratique .rf-realite-col-gauche { flex: none; width: 100%; }
  #cercle-pratique .rf-realite-col-gauche .photo-placeholder { flex: none; height: 240px; min-height: 0; margin: 0; }
}

/* Pastilles bénéfices — sous le texte, fond bleu (--noir), icônes ocre (--jaune-bande).
   Sur desktop, ne doit pas dépasser le bas de la photo : rfFitAvantagesCercle (JS) réduit
   progressivement taille de police / paddings / gap jusqu'à ce que ça tienne. */
#cercle-pratique .rf-cercle-avantages {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  overflow: hidden;
}

#cercle-pratique .rf-cercle-avantages li {
  display: block;
}

#cercle-pratique .rf-cercle-avantage-lien {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--noir);
  color: var(--creme);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: "Canela", serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  transition: opacity 0.15s ease;
}

#cercle-pratique .rf-cercle-avantage-lien:hover,
#cercle-pratique .rf-cercle-avantage-lien:focus-visible {
  opacity: 0.85;
}

#cercle-pratique .rf-cercle-avantage-icone {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--jaune-bande);
}

@media (max-width: 768px) {
  #cercle-pratique .rf-cercle-avantages { grid-template-columns: repeat(2, 1fr); }
}

#bifurcation .rf-realite-ligne {
  align-items: flex-start;
  position: relative;
}

#bifurcation .rf-container {
  position: relative;
  z-index: 1;
}


#realite .rf-realite-col-droite p:first-of-type,
#constat .rf-realite-col-droite p:first-of-type {
  margin-top: 24px;
}

@media (max-width: 768px) {
  /* En empilé, ce margin-top de 24px (pensé pour le desktop, 2 colonnes côte à côte) s'ajoute
     au gap de 24px de la ligne et double l'écart photo/crédit → texte (48px au lieu de 24px,
     comme #cercle-pratique et #fondatrices). On l'annule pour revenir à un seul écart de 24px. */
  #constat .rf-realite-col-droite p:first-of-type { margin-top: 0; }
}

#realite h2,
#constat h2 {
  font-weight: 400;
}

#realite .rf-realite-badges-statique {
  justify-content: flex-start;
}

.rf-realite h3 {
  font-family: "Canela", serif;
  font-weight: 400;
  color: var(--noir);
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.35;
  margin: 30px 0 20px;
}

.rf-faire-monde-texte .rf-btn-flat { display: block; margin: 0 auto; }

.rf-faire-monde .rf-label-clair {
  color: var(--creme);
}

.rf-faire-monde-texte p:not(.rf-label) {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  color: var(--creme);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 26px;
}

#constat .rf-differencie-citation {
  font-size: clamp(17px, 1.7vw, 21px);
}

#cercle-pratique .rf-differencie-citation {
  font-size: clamp(15px, 1.4vw, 17px);
  border-left: 3px solid var(--jaune-bande);
  padding-left: 22px;
}

#cercle-pratique .rf-offres-liste-fleches li::before {
  color: var(--jaune-bande);
}

#realite .rf-realite-col-gauche > .rf-differencie-citation {
  border-left: none;
  padding-left: 34px;
  position: relative;
  margin-top: 24px;
}

#constat .rf-realite-col-gauche > .rf-differencie-citation {
  border-left: none;
  border: 1px solid var(--vert);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  margin-top: 24px;
  padding: 24px 24px 24px 44px;
}

#constat .rf-realite-col-gauche > .rf-differencie-citation:first-child {
  margin-top: 44px;
}

#realite .rf-realite-col-gauche > .rf-differencie-citation::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -0.2em;
  font-family: "Canela", serif;
  font-size: 1.8em;
  color: var(--vert);
  line-height: 1;
}

#constat .rf-realite-col-gauche > .rf-differencie-citation::before {
  content: "“";
  position: absolute;
  left: 16px;
  top: 16px;
  font-family: "Canela", serif;
  font-size: 1.8em;
  color: var(--jaune-bande);
  line-height: 1;
}

/* ---------- Section 8bis : Ils nous ont fait confiance ---------- */

.rf-temoignages {
  background: var(--vert);
  padding: 28px 0;
}

#temoignages {
  background-image: linear-gradient(rgba(249, 244, 233, 0.85), rgba(249, 244, 233, 0.85)), url("images/fond-artiste-hero.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

#temoignages h2 {
  color: var(--noir);
}

#temoignages .rf-temoignage {
  background: var(--noir);
  border-color: var(--noir);
}

#temoignages .rf-temoignage-texte,
#temoignages .rf-temoignage-auteur,
#temoignages .rf-temoignage-role {
  color: var(--creme);
}

#temoignages .rf-temoignage-role {
  opacity: 0.75;
}

#temoignages .rf-temoignages-fleche {
  background: var(--jaune-bande);
  color: var(--noir);
}

#temoignages .rf-temoignages-fleche:hover {
  background: var(--jaune-vif);
}

.rf-temoignages.rf-verbatims-bande {
  background: var(--vert);
  padding: 4px 0 14px;
}

.rf-verbatims-bande .rf-temoignage {
  background: var(--creme);
  border-color: var(--jaune-bande);
}

.rf-verbatims-bande .rf-temoignages-fleche {
  background: var(--jaune-bande);
}

.rf-verbatims-bande .rf-temoignages-carousel {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.rf-verbatims-bande .rf-temoignages-grid {
  flex: 0 0 100%;
  order: 1;
}

.rf-verbatims-bande .rf-temoignages-fleche {
  position: static;
  transform: none;
  order: 2;
}

.rf-temoignages .rf-label {
  color: var(--noir);
  opacity: 0.75;
}

.rf-temoignages h2 {
  color: var(--creme);
  margin-bottom: 24px;
  text-align: center;
}

.rf-temoignages-carousel {
  position: relative;
  padding: 0 52px;
}

.rf-temoignages-fleche {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--creme);
  color: var(--noir);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rf-temoignages-fleche:hover {
  background: var(--jaune-bande);
}

.rf-temoignages-fleche-gauche { left: 0; }
.rf-temoignages-fleche-droite { right: 0; }

@media (max-width: 640px) {
  .rf-temoignages-carousel { padding: 0 44px; }
  .rf-temoignages-fleche { width: 34px; height: 34px; font-size: 15px; }
}

.rf-temoignages-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--creme) transparent;
}

.rf-temoignages-grid::-webkit-scrollbar {
  height: 6px;
}

.rf-temoignages-grid::-webkit-scrollbar-thumb {
  background: var(--creme);
  border-radius: 3px;
}

.rf-temoignages-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.15);
}

.rf-temoignage {
  background: var(--creme);
  border: 1px solid var(--jaune-bande);
  border-radius: 4px;
  padding: 30px 28px;
  flex: 0 0 calc(50% - 12px);
  scroll-snap-align: start;
}

@media (max-width: 640px) {
  .rf-temoignage { flex-basis: 85%; }
}

.rf-temoignage-texte {
  font-family: "Canela", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--noir);
  margin: 0 0 20px;
}

.rf-temoignage-auteur {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--noir);
  margin: 0 0 2px;
}

.rf-temoignage-role {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  color: var(--texte-doux);
  margin: 0;
}

/* ---------- Section 8ter : Contact ---------- */

.rf-contact {
  background: var(--creme);
  padding: 60px 0;
}

.rf-contact-intro-seule .rf-label { justify-content: center; }
.rf-contact-intro-seule .rf-btn-flat { align-self: center; }

.rf-contact-intro h2 {
  color: var(--noir);
  margin-bottom: 16px;
}

.rf-contact-intro > p:not(.rf-label):not(.rf-contact-alt) {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--noir);
  margin: 0 0 26px;
}

.rf-devis {
  background: #FFFFFF;
  padding: 50px 0 70px;
}

.rf-devis-contact {
  background: var(--creme);
  padding-bottom: 50px;
}

.rf-devis.rf-devis-contact-image {
  background-image: linear-gradient(rgba(249, 244, 233, 0.85), rgba(249, 244, 233, 0.85)), url("images/IMG_0489.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

.rf-reserver-creneau {
  background: var(--noir);
  padding: 50px 0;
  text-align: center;
}

.rf-reserver-creneau h2 {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.3;
  color: var(--creme);
  margin: 0 0 12px;
}

.rf-reserver-creneau p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: var(--creme);
  margin: 0 0 16px;
}

.rf-reserver-creneau p:last-child {
  margin-bottom: 0;
}

.rf-reserver-creneau .rf-cta-secondaire {
  font-weight: 400;
}

.rf-devis-container { max-width: 560px; }

.rf-devis-row { display: flex; gap: 16px; flex-wrap: wrap; }
.rf-devis-row > div { padding-left: 0; padding-right: 0; }
@media (max-width: 640px) { .rf-devis-row { flex-direction: column; gap: 0; } }

.rf-fiche {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--creme);
  border-radius: 4px;
  padding: 22px 26px;
}

.rf-fiche-hero {
  background: var(--creme);
}

.rf-fiche-hero-sans-photo {
  padding: 56px 0 0;
}

.rf-fiche-hero.rf-fiche-hero-sans-photo h1 {
  color: var(--noir);
  font-size: 30px;
}

.rf-fiche-hero-sous-titre {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--noir);
  margin: 0;
}

.rf-fiche-hero-sous-titre + .rf-fiche-hero-sous-titre {
  margin-top: 14px;
}

.rf-fiche-hero .rf-container {
  padding-top: 6px;
  padding-bottom: 8px;
}

.rf-fiche-hero-bandeau-texte .rf-container {
  padding-top: 0;
  padding-bottom: 0;
}

.rf-fiche-hero h1 {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.2;
  color: var(--creme);
  margin: 0 0 16px;
}

.rf-fiche-hero-bandeau-texte .rf-realite-barre {
  background: var(--jaune-bande);
}

.rf-fiche-hero .rf-differencie-citation {
  border-left: none;
  padding-left: 34px;
  position: relative;
  margin-bottom: 20px;
}

.rf-fiche-hero .rf-differencie-citation::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -0.2em;
  font-family: "Canela", serif;
  font-size: 1.8em;
  color: var(--jaune-bande);
  line-height: 1;
}

.rf-fiche-intro-gauche .rf-label { justify-content: flex-start; margin-bottom: 6px; }

.rf-fiche-valeur .rf-label {
  color: var(--noir);
  opacity: 0.85;
  margin-bottom: 18px;
}

.rf-fiche-valeur-cadre .rf-btn-flat {
  margin-top: 20px;
}

.rf-fiche-pratique .rf-label {
  color: var(--noir);
  opacity: 0.85;
  margin-bottom: 18px;
}

/* ---------- Section FAQ (page d'accueil) ---------- */

.rf-partenaires {
  background-image: linear-gradient(rgba(249, 244, 233, 0.85), rgba(249, 244, 233, 0.85)), url("images/fond-artiste-hero.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 60px 0;
  box-sizing: border-box;
  position: relative;
}

.rf-partenaires .rf-label,
.rf-partenaires h2 {
  text-align: left;
}

.rf-partenaires h2 {
  margin-bottom: 24px;
}

.rf-partenaires p {
  max-width: none;
}

.rf-partenaires p:not(.rf-label):not(.rf-credit-artiste) {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--noir);
}

.rf-partenaires-logos {
  width: 100%;
  overflow: hidden;
  background: var(--creme);
  padding: 24px 0;
  margin-top: 40px;
}

.rf-partenaires-logos-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 64px;
  padding: 0 32px;
  animation: rf-partenaires-scroll 28s linear infinite;
}

.rf-partenaires-logos-track:hover {
  animation-play-state: paused;
}

@keyframes rf-partenaires-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-partenaires-logos-track { animation: none; }
}

.rf-partenaires-logo-cadre {
  flex: 0 0 auto;
  width: 190px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  color: var(--noir);
  text-align: center;
}

.rf-partenaires-logo-cadre a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.rf-partenaires-logo-cadre img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.rf-partenaires-merci {
  margin: 40px 0 0;
}

@media (max-width: 640px) {
  .rf-partenaires-logos-track { padding: 0 20px; gap: 40px; }
}

.rf-faq {
  background: var(--creme);
  padding: 60px 0;
}

.rf-faq h2 {
  text-align: left;
  margin-bottom: 32px;
}

.rf-faq .faq {
  border-top: 1px solid var(--jaune-bande);
  padding: 20px 0;
}

.rf-faq .faq:last-of-type {
  border-bottom: 1px solid var(--jaune-bande);
}

.rf-faq .faq summary {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--noir);
  cursor: pointer;
}

.rf-faq .faq-contenu {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: var(--noir);
  margin-top: 12px;
}

/* ---------- Section 3 : Nos offres ---------- */

.rf-offres {
  background: var(--creme);
  padding: 60px 0;
}

section[id] {
  scroll-margin-top: 76px;
}

.rf-offres-suite-texte-rouge .rf-cercle-titre {
  color: var(--creme);
}

.rf-offres-suite-texte-cta-rouge.rf-hero-ctas .rf-btn-flat-outline {
  color: var(--creme);
  border-color: var(--jaune-bande);
  margin-left: 0;
}

.rf-offres-suite-texte .rf-btn-flat-outline {
  display: block;
  color: var(--noir);
  border-color: var(--jaune-bande);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 3px;
  width: 230px;
  text-align: center;
  margin-left: auto;
}

#cercle-pratique {
  background: var(--creme);
  padding-top: 20px; /* + 40px margin-top de #cercle-pratique > .rf-container = 60px de crème avant le surtitre, comme les autres sections */
  padding-bottom: 32px;
}

#cercle-pratique > .rf-container {
  margin-top: 40px;
}

.rf-cercle-pratique-intro {
  margin-bottom: 32px;
}

.rf-cercle-pratique-intro .rf-offres-intro {
  margin: 0 0 20px;
}

.rf-cercle-pratique-intro .rf-differencie-citation {
  margin: 0 0 24px;
}

#cercle-pratique .rf-cercle-offre-plus {
  font-family: "Canela", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1.4;
  color: var(--vert);
  margin: 0;
}

#cercle-pratique .rf-cercle-offre-plus.rf-cercle-pratique-cadre-pleine-ligne {
  margin-bottom: 24px;
}

.rf-cercle-pratique-bande-rouge {
  background: var(--vert);
  padding: 24px 0;
  margin-bottom: 32px;
}

.rf-cercle-pratique-bande-creme {
  background: var(--creme);
}

.rf-cercle-pratique-bande-rouge.rf-cercle-pratique-bande-creme .rf-cercle-offre-plus {
  color: var(--noir);
}

.rf-cercle-offre-plus-accroche {
  color: var(--jaune-bande);
}

#cercle-pratique .rf-cercle-pratique-bande-rouge .rf-cercle-offre-plus,
.rf-cercle-pratique-bande-rouge .rf-cercle-offre-plus {
  font-family: "Canela", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1.4;
  color: var(--creme);
  margin: 0;
}

.rf-cercle-pratique-cadre-ligne {
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin-top: 32px;
}

@media (max-width: 768px) {
  .rf-cercle-pratique-cadre-ligne { flex-direction: column; }
}

.rf-cercle-pratique-cadre {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 24px 28px;
  width: 100%;
  flex: 1;
}

/* Cadre des 9 bénéfices (#cercle-pratique uniquement) : on retire le grand cadre translucide
   austère au profit de vraies cartes individuelles, teintées d'ocre, avec un léger relief. */
#cercle-pratique .rf-cercle-pratique-cadre {
  background: none;
  padding: 0;
}

/* La photo habille désormais tout le bloc (surtitre + titre + texte), comme la section 2,
   au lieu de rester dans une boîte neutre à côté du texte. La colonne gauche reste dans le DOM
   (pour garder le texte à sa largeur actuelle) mais devient invisible : c'est la bande en fond
   qui porte la photo.
   Alignement : la bande démarre exactement où démarrent le carrousel de la section 2, l'image de
   la section 1 et les pastilles bénéfices plus bas (contenu du .rf-container, pas de débord) ;
   sa largeur reprend les 38% standard d'une colonne gauche (.rf-realite-ligne) ; le texte à droite
   reprend le même calc(38% + 48px) que la section 2, pour tomber exactement au même endroit. */
#cercle-pratique {
  --rf-cp-band-left: calc(max(0px, (100% - 1180px) / 2) + 20px);
  --rf-cp-band-width: calc(min(1140px, 100% - 40px) * 0.38);
  /* Bande PHOTO (distincte de la bande de contenu ci-dessus, qui reste utilisée pour la liste
     et le crédit) : plein bord gauche de la section, jusqu'à l'endroit exact où se termine la
     photo (pas le carrousel) de la section 2 — même formule que #bifurcation pour son bord droit
     (--rf-bif-band-left + --rf-bif-band-width), appliquée ici comme largeur totale puisqu'on part de 0. */
  --rf-cp-photo-left: 0px;
  --rf-cp-photo-width: calc(max(0px, (100% - 1180px) / 2 - 12px) + 64px + min(1140px, 100% - 40px) * 0.38);
}

.rf-cercle-pratique-intro-wrap > .rf-container {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.rf-cercle-pratique-intro-wrap .rf-label,
.rf-cercle-pratique-intro-wrap > .rf-container > h2,
.rf-cercle-pratique-intro-wrap .rf-cercle-pratique-intro-ligne {
  margin-left: calc(38% + 48px);
}

.rf-cercle-pratique-liste-photo .rf-cercle-pratique-icone-puce {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: var(--jaune-bande);
}

@media (max-width: 768px) {
  .rf-cercle-pratique-intro-wrap .rf-label,
  .rf-cercle-pratique-intro-wrap > .rf-container > h2,
  .rf-cercle-pratique-intro-wrap .rf-cercle-pratique-intro-ligne {
    margin-left: 0;
  }
  /* Comme la section 2 (#bifurcation) : le surtitre et le titre passent en surimpression claire
     en haut de la photo, au lieu d'être repoussés en dessous. Le texte de la colonne de droite,
     lui, reste repoussé sous la photo (padding-top sur la ligne, pas sur tout le container). */
  .rf-cercle-pratique-intro-wrap .rf-label,
  .rf-cercle-pratique-intro-wrap > .rf-container > h2 {
    color: var(--creme);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
  .rf-cercle-pratique-intro-wrap .rf-label {
    opacity: 0.9;
  }
  .rf-cercle-pratique-liste-photo .rf-cercle-pratique-icone-puce {
    width: 17px;
    height: 17px;
  }
}

.rf-fleche-transition {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: -28px auto;
  border-radius: 50%;
  background: var(--jaune-bande);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  animation: rf-fleche-clignote 1.6s ease-in-out infinite;
  text-decoration: none;
  cursor: pointer;
}

.rf-fleche-transition:hover {
  animation-play-state: paused;
  opacity: 1;
}

.rf-fleche-transition svg {
  width: 24px;
  height: 24px;
  color: var(--noir);
}

@keyframes rf-fleche-clignote {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.rf-titre-anime {
  animation: rf-titre-apparait 4.5s ease;
}

#cercle-formule .rf-cercle-pratique-cadre {
  opacity: 0;
}

.rf-cadre-anime-gauche {
  animation: rf-cadre-gauche-apparait 5s linear forwards;
}

.rf-cadre-anime-droite {
  animation: rf-cadre-droite-apparait 5s linear forwards;
}

@keyframes rf-cadre-gauche-apparait {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rf-cadre-droite-apparait {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rf-titre-apparait {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .rf-cercle-pratique-intro-ligne .rf-realite-col-gauche { flex: none; width: 100%; }
}

#cercle-formule {
  background: linear-gradient(rgba(50, 72, 90, 0.72), rgba(50, 72, 90, 0.72)), url("images/IMG_0485.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

#cercle-formule h2 {
  color: var(--creme);
  margin-bottom: 44px;
  text-align: center;
}

#cercle-formule .rf-label {
  color: var(--creme);
  opacity: 0.85;
  text-align: center;
  justify-content: center;
}

#cercle-formule .rf-cercle-pratique-souslabel-titre {
  color: var(--creme);
}

#cercle-formule .rf-cercle-pratique-cadre {
  background: var(--creme);
}

#cercle-formule .rf-cercle-pratique-cadre-ligne {
  margin-top: 0;
}

#cercle-formule .rf-cercle-formule-top {
  margin-bottom: 60px;
}

#cercle-formule {
  padding-bottom: 0;
}

.rf-cercle-formule-cloture {
  background: var(--creme);
  height: 60px;
  margin-top: 40px;
}

.rf-cercle-formule-cta {
  justify-content: center;
  margin-top: 32px;
}

.rf-cercle-formule-cta.rf-hero-ctas .rf-btn-flat-outline {
  color: var(--creme);
  background: var(--noir);
  border-color: var(--jaune-bande);
  margin-left: 0;
}

.rf-cercle-pratique-cta.rf-hero-ctas .rf-btn-flat-outline {
  color: var(--noir);
  border-color: var(--jaune-bande);
  margin-left: 0;
}

.rf-cercle-pratique-cadre .rf-offres-intro {
  margin: 0;
}

.rf-cercle-pratique-souslabel {
  font-family: "Canela", serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--noir);
  margin: 16px 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rf-cercle-pratique-icone {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--jaune-bande);
}

.rf-cercle-pratique-liste-label {
  font-family: "Canela", serif;
  font-weight: 400;
  font-style: normal;
}

.rf-cercle-pratique-nb {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-style: italic;
  color: var(--noir);
  opacity: 0.75;
  margin: 12px 0 18px;
}

#cercle-pratique .rf-cercle-pratique-cadre .rf-cercle-pratique-souslabel-titre {
  justify-content: center;
}

.rf-offres-liste.rf-cercle-pratique-liste-avantages li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(224, 179, 71, 0.12);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(50, 72, 90, 0.08);
}

.rf-offres-liste.rf-cercle-pratique-liste-avantages li::before {
  content: none;
}

.rf-cercle-pratique-liste-avantages .rf-cercle-pratique-icone-puce {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--vert);
}

.rf-cercle-pratique-liste-avantages-compacte.rf-offres-liste li {
  padding: 5px 8px;
  gap: 6px;
}

.rf-cercle-pratique-liste-avantages-compacte .rf-cercle-pratique-icone-puce {
  width: 14px;
  height: 14px;
}

.rf-cercle-pratique-cadre .rf-cercle-pratique-liste-icones li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
}

.rf-cercle-pratique-cadre .rf-cercle-pratique-liste-icones li::before {
  content: none;
}

.rf-cercle-pratique-icone-puce {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--vert);
}

#cercle-formule .rf-cercle-pratique-cadre .rf-cercle-pratique-icone-puce {
  color: var(--jaune-bande);
}

.rf-cercle-pratique-souslabel:first-child {
  margin-top: 0;
}

.rf-cercle-pratique-cadre .rf-offres-liste {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .rf-cercle-pratique-cadre { padding: 20px 20px; }
}

.rf-cercle-carte .rf-btn-flat-outline,
.rf-cercle-pratique-cadre .rf-btn-flat-outline {
  display: block;
  color: var(--noir);
  border-color: var(--jaune-bande);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 3px;
  width: 230px;
  text-align: center;
  margin: 20px 0 0 auto;
}

#cercle-formule .rf-cercle-pratique-cadre .rf-btn-flat-outline {
  color: var(--creme);
  background: var(--noir);
  animation: rf-cta-pulse 2.6s ease-out infinite;
}

#cercle-formule .rf-cercle-pratique-cadre .rf-btn-flat-outline:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #cercle-formule .rf-cercle-pratique-cadre .rf-btn-flat-outline { animation: none; }
}

.rf-offres-suite-texte .rf-cercle-titre {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  margin: 0 0 16px;
  text-align: center;
}

#constat {
  padding-bottom: 44px; /* + 16px de margin-bottom du CTA (.rf-hero-ctas) = 60px de crème avant le rouge de #bifurcation, identique aux 60px de crème avant le surtitre en haut */
}

#constat .rf-label {
  color: var(--noir);
  opacity: 0.75;
}

.rf-constat-photo-citation {
  position: relative;
  margin-bottom: 0;
}

/* Crédit artiste/photographe, affiché en surimpression discrète sur une œuvre/photo. */
.rf-credit-artiste {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 3;
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--creme);
  opacity: 0.85;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Variante pour un crédit posé sur fond clair/crème (pas de photo derrière). */
.rf-credit-artiste-sombre {
  color: var(--noir);
  opacity: 0.6;
  text-shadow: none;
}

/* Variante crédit sous la photo (pas en surimpression) : position statique, aligné à droite. */
.rf-credit-artiste-dessous {
  position: static;
  display: block;
  margin: 6px 0 0;
  text-align: right;
}

.rf-constat-citation-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 26px;
}

.rf-constat-citation-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(50, 72, 90, 0.72) 0%, rgba(50, 72, 90, 0.4) 55%, rgba(50, 72, 90, 0.15) 85%);
}

.rf-constat-citation-track {
  position: relative;
  z-index: 1;
  min-height: 100px;
}

.rf-constat-citation-texte {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  opacity: 0;
  transition: opacity 1s ease;
  color: var(--creme);
  font-family: "Canela", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
}

.rf-constat-citation-texte.rf-constat-citation-active {
  opacity: 1;
}

.rf-constat-citation-texte strong {
  font-weight: 600;
  color: inherit;
}

.rf-constat-citation-auteur {
  display: block;
  margin-top: 36px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.85;
  text-align: right;
}

/* Section 3 (#cercle-pratique) : même principe que le carrousel de la section 2 — la
   signature reste à un endroit fixe (bas du cadre) et seule la citation se centre dans
   l'espace qui reste au-dessus, quelle que soit sa longueur. */
#cercle-pratique .rf-constat-citation-overlay {
  justify-content: stretch;
}

#cercle-pratique .rf-constat-citation-track {
  flex: 1;
  min-height: 0;
}

#cercle-pratique .rf-constat-citation-texte {
  top: 0;
  bottom: 0;
  transform: none;
  display: flex;
  flex-direction: column;
}

#cercle-pratique .rf-constat-citation-quote {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cercle-pratique .rf-constat-citation-auteur {
  margin-top: 12px;
}

#bifurcation {
  background-image: linear-gradient(rgba(50, 72, 90, 0.72), rgba(50, 72, 90, 0.72)), url("images/IMG_0498.jpg");
  background-size: cover;
  background-position: center;
  padding-top: 60px;
  padding-bottom: 44px; /* + 16px margin-bottom du CTA (.rf-hero-ctas) = 60px de rouge avant le crème de #cercle-pratique */
  position: relative;
  z-index: 0; /* crée un contexte d'empilement local */
}

/* Voile crème essayé puis retiré (pas concluant à l'usage). */
#bifurcation::after {
  content: none;
}

/* Bande photo locale abandonnée : l'image sert désormais de fond à toute la section
   (background-image sur #bifurcation, voir plus haut). */
#bifurcation::before {
  content: none;
}

#bifurcation h2:not(.rf-cercle-titre) {
  color: var(--creme);
  text-align: left;
  margin-bottom: 36px;
  /* Réaligné à gauche, comme les sections 1 et 3 (même format de photo désormais) : plus de
     décalage pour tomber au niveau du texte de la colonne de droite. */
}

#bifurcation .rf-label {
  color: var(--creme);
  opacity: 0.85;
}

/* Verbatims en colonne gauche de #bifurcation (une carte à la fois, défilement automatique,
   plus de flèches ni de points). Hauteur recalée en JS (rfAlignBifurcationPhoto) exactement
   sur celle des images des sections 1 et 3, plutôt qu'une valeur fixe arbitraire. */
.rf-bifurcation-verbatims {
  display: flex;
  flex-direction: column;
  height: 340px; /* repli avant l'exécution du JS */
}

.rf-bifurcation-verbatims .rf-temoignages-grid {
  flex: 1;
  gap: 0;
  min-height: 220px;
}

.rf-bifurcation-verbatims .rf-temoignages-grid {
  border-radius: 4px;
  overflow-y: hidden;
}

.rf-bifurcation-verbatims .rf-temoignage {
  flex: 0 0 100%;
  width: 100%;
  background: var(--creme);
  border: none;
  border-radius: 4px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.rf-bifurcation-verbatims .rf-temoignage-auteur,
.rf-bifurcation-verbatims .rf-temoignage-role {
  text-align: right;
}

/* Carrousel de nouveau sur un cadre crème (l'image sert désormais de fond à toute la
   section) : texte foncé, plus d'ombre portée nécessaire. */
.rf-bifurcation-verbatims .rf-temoignage-texte,
.rf-bifurcation-verbatims .rf-temoignage-auteur,
.rf-bifurcation-verbatims .rf-temoignage-role {
  color: var(--noir);
  text-shadow: none;
}

.rf-bifurcation-verbatims .rf-temoignage-role {
  opacity: 0.75;
}

.rf-bifurcation-verbatims .rf-temoignage-texte {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 18px;
  overflow: hidden; /* empêche le texte long de déborder du cadre à hauteur fixe ; la taille de police est ensuite ajustée en JS (rfFitVerbatimText) pour que ça tienne sans coupure */
}

.rf-bifurcation-verbatims .rf-temoignage-auteur {
  padding-top: 16px;
}

.rf-verbatims-fleche.rf-temoignages-fleche {
  position: static;
  transform: none;
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--jaune-bande);
}

.rf-verbatims-dot.is-active {
  background: var(--creme);
  width: 20px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  #bifurcation .rf-realite-ligne { flex-direction: column; gap: 24px; }
  #bifurcation h2:not(.rf-cercle-titre),
  #bifurcation .rf-label { margin-left: 0; }
  /* L'image de fond couvre toute la section (haut et bas), le crédit reste en bas-droit
     par défaut (.rf-credit-artiste) : plus de bande locale à décaler. */
  #bifurcation .rf-realite-col-gauche { flex: none; width: 100%; }
  .rf-bifurcation-verbatims {
    height: 330px;
    padding: 14px;
    border-radius: 4px;
  }
  .rf-bifurcation-verbatims .rf-temoignages-grid { min-height: 0; }
  .rf-bifurcation-verbatims .rf-temoignage-auteur { padding-top: 10px; }
  .rf-bifurcation-verbatims .rf-verbatims-controles { margin-top: 12px; }
}

#cercle-pratique h2 {
  margin-bottom: 36px;
}

#bifurcation .rf-bifurcation-ctas {
  justify-content: flex-end;
  margin-top: 36px;
}

#bifurcation .rf-bifurcation-ctas .rf-btn-flat-outline {
  color: var(--noir);
  background: var(--creme);
  border-color: var(--jaune-bande);
}

#bifurcation .rf-realite-col-droite .rf-cercle-titre {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--creme);
  text-align: left;
  margin: 32px 0 0;
}

#bifurcation .rf-offres-intro {
  color: var(--creme);
  text-align: left;
}

#cercle-offre {
  background: var(--vert);
}

#cercle-offre .rf-container {
  background: var(--creme);
  border-radius: 4px;
  padding: 40px 48px;
}

@media (max-width: 900px) {
  #cercle-offre .rf-container { padding: 32px 28px; }
}

@media (max-width: 640px) {
  #cercle-offre .rf-container { padding: 24px 20px; }
}

#cercle-offre .rf-cercle-offre-plus-ligne {
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin-top: 24px;
}

#cercle-offre .rf-cercle-offre-plus-titre-cadre {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 24px 28px;
  flex: 0 0 38%;
  display: flex;
  align-items: center;
}

#cercle-offre .rf-cercle-offre-plus-titre-cadre .rf-cercle-offre-plus {
  margin: 0;
}

#cercle-offre .rf-cercle-offre-plus-cadre {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 24px 28px;
  flex: 1;
}

@media (max-width: 768px) {
  #cercle-offre .rf-cercle-offre-plus-ligne { flex-direction: column; }
  #cercle-offre .rf-cercle-offre-plus-titre-cadre { flex-basis: auto; }
}

#cercle-offre .rf-cercle-offre-plus-cadre .rf-offres-liste {
  margin-bottom: 0;
}

#cercle-offre .rf-cercle-offre-plus-cadre .rf-cercle-offre-plus {
  margin-top: 0;
}

#cercle-offre .rf-cercle-offre-plus {
  font-family: "Canela", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1.4;
  color: var(--vert);
  margin: 12px 0 8px;
}

#cercle-offre .rf-ensemble-ctas {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

#cercle-offre .rf-btn-flat-outline {
  display: block;
  color: var(--noir);
  border-color: var(--jaune-bande);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 3px;
  width: 230px;
  text-align: center;
}


.rf-offres .rf-label {
  color: var(--noir);
  opacity: 0.75;
  text-align: left;
  justify-content: flex-start;
}

.rf-offres h2 {
  color: var(--noir);
  margin-bottom: 12px;
  text-align: left;
}

.rf-offres-intro {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--noir);
  text-align: left;
  width: 100%;
  margin: 0 0 20px;
}

.rf-offres-intro:last-of-type {
  margin-bottom: 36px;
}

.rf-offres-intro strong {
  font-weight: 600;
}

#bifurcation .rf-offres-row-2,
.rf-offres-suite .rf-offres-row-2 {
  grid-template-columns: 1fr;
}

.rf-offres-suite .rf-label.rf-offres-suite-label {
  text-align: left;
  justify-content: flex-start;
}

.rf-offres-suite .rf-offres-liste li::before {
  color: var(--jaune-bande);
}

.rf-offres-suite .rf-offres-carte > .rf-btn-flat-outline {
  align-self: flex-end;
  margin-top: auto;
}

.rf-offres-suite .rf-btn-flat-outline {
  color: var(--noir);
  border-color: var(--jaune-bande);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 3px;
  width: 230px;
  text-align: center;
}

.rf-offres-suite .rf-btn-flat-outline:hover {
  color: var(--noir);
  border-color: var(--jaune-vif);
}

.rf-offres-liste {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
}

.rf-offres-liste strong {
  font-weight: 600;
}

.rf-offres-liste.rf-cercle-offre-liste li::before {
  color: var(--jaune-bande);
}

.rf-offres-liste li {
  position: relative;
  padding-left: 26px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--noir);
  margin-bottom: 6px;
}

.rf-offres-liste li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--vert);
  font-weight: 700;
}

.rf-offres-liste li:last-child {
  margin-bottom: 0;
}

.rf-codev-texte-cadre .rf-offres-liste li {
  font-size: 16px;
  line-height: 1.6;
}

.rf-accordeon .rf-offres-liste {
  margin: 14px 0 0;
}

.rf-accordeon .rf-offres-liste-intro + .rf-offres-liste {
  margin-top: 0;
}

.rf-accordeon .rf-offres-liste li::before {
  color: var(--jaune-bande);
}

.rf-offres-liste-cadre .rf-offres-liste {
  margin: 0;
}

.rf-offres-carte-horizontale .rf-offres-entete-ligne,
.rf-offres-carte-horizontale .rf-offres-texte,
.rf-offres-carte-horizontale .rf-offres-liste,
.rf-offres-carte-horizontale .rf-offres-separateur,
.rf-offres-carte-horizontale .rf-offres-details {
  margin: 0;
}

.rf-plateforme .rf-equipe-photo-duo {
  aspect-ratio: 6 / 5;
}

.rf-plateforme-logo.rf-equipe-photo-duo {
  aspect-ratio: auto;
  flex: 1;
  border: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.rf-plateforme-logo img {
  width: 82%;
  height: auto;
  display: block;
  margin: 10px 0 0;
  border-radius: 4px;
}

.rf-plateforme {
  background: var(--creme);
  padding: 64px 0;
}

#plateforme {
  padding-top: 60px; /* crème pure avant le surtitre = 60px */
  padding-bottom: 60px; /* même espace, en dessous du CTA "Découvrir la plateforme", avant le bleu de #fondatrices */
}

.rf-plateforme .rf-realite-ligne {
  align-items: stretch;
}

.rf-plateforme .rf-realite-col-gauche {
  flex: 0 0 32%;
  display: flex;
}

.rf-plateforme .rf-label {
  color: var(--noir);
  opacity: 0.85;
}

.rf-plateforme h2 {
  color: var(--noir);
  font-weight: 400;
  margin-bottom: 36px;
}

@media (max-width: 640px) {
  /* En empilé, le gap générique de .rf-realite-ligne (24px) créait un écart logo → texte plus
     petit que titre → logo (36px) : on aligne les deux à 36px. */
  #plateforme .rf-realite-ligne { gap: 36px; }
  /* Logo et photo (section fondatrices) à la même taille en mobile, sans toucher
     à la mise en page desktop (règles ci-dessus inchangées). */
  .rf-plateforme .rf-realite-col-gauche { flex: 0 0 160px; width: 160px; }
  .rf-plateforme-logo img { max-width: 160px; }
}

.rf-plateforme p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--noir);
  margin: 0 0 14px;
}

.rf-plateforme-devise {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: 19px;
  color: var(--noir);
  margin: 24px 0 4px;
}

.rf-plateforme .rf-btn-flat {
  background: var(--jaune-bande);
  color: var(--noir);
}

.rf-plateforme .rf-btn-flat:hover {
  background: var(--creme);
}

.rf-plateforme .rf-btn-flat-outline {
  display: block;
  color: var(--noir);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 3px;
  border-color: var(--jaune-bande);
  width: 230px;
  text-align: center;
  margin: 24px 0 0 auto;
  animation: rf-cta-pulse 2.6s ease-out infinite;
}

.rf-plateforme .rf-btn-flat-outline:hover {
  border-color: var(--jaune-vif);
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .rf-plateforme .rf-btn-flat-outline { animation: none; }
}

/* ---------- Page intervision : ocre remplacé par rouge ---------- */
.page-intervision .rf-fiche-hero-bandeau-texte .rf-realite-barre { background: var(--vert); }
.page-intervision .rf-fiche-hero .rf-differencie-citation::before { color: var(--vert); }
.page-intervision .rf-btn-flat:not(.rf-btn-flat-bleu) { background: var(--vert); }

/* ---------- Page catalogue : ocre remplacé par bleu ---------- */
.page-catalogue .rf-fiche-hero-bandeau-texte .rf-realite-barre { background: var(--noir); }
.page-catalogue .rf-fiche-hero .rf-differencie-citation::before { color: var(--noir); }
.page-catalogue .rf-btn-flat:not(.rf-btn-flat-bleu) { background: var(--noir); }

.rf-proposons > .rf-container > p:not(.rf-label) {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  color: var(--creme);
  font-size: 17px;
  line-height: 1.45;
  margin-bottom: 8px;
}

.rf-verbatims {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 22px 0 30px;
}

.rf-verbatim {
  position: relative;
  margin: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 22px 24px 20px 50px;
}

.rf-verbatim::before {
  content: "“";
  position: absolute;
  left: 16px;
  top: 8px;
  font-family: "Canela", serif;
  font-weight: 700;
  font-size: 34px;
  color: var(--jaune-bande);
  line-height: 1;
}

.rf-verbatim p {
  margin: 0;
  font-family: "Canela", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--creme);
  opacity: 1;
  font-size: 17px;
  line-height: 1.5;
}

.rf-equipes > .rf-container > p:not(.rf-label) {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  color: var(--noir);
  font-size: 17px;
  line-height: 1.45;
  max-width: 760px;
  margin-bottom: 8px;
}

.rf-experts > .rf-container > p:not(.rf-label) {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  color: var(--creme);
  font-size: 17px;
  line-height: 1.45;
  max-width: 760px;
  margin-bottom: 36px;
}

.rf-apropos .rf-label {
  color: var(--creme);
  opacity: 0.85;
}

.rf-apropos-texte p:not(.rf-label) {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  color: var(--creme);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
}

.rf-apropos-texte p:not(.rf-label) + p { margin-top: 16px; }

.rf-apropos-texte .rf-cta-secondaire { margin-top: 20px; }

/* ---------- Section 9 : Dernier appel à l'action ---------- */

.rf-cta-final {
  background: var(--vert);
  min-height: 50vh;
  display: flex;
  align-items: center;
  padding: 60px 0;
  text-align: center;
}

.rf-cta-final-bleu {
  background: var(--noir);
}

.rf-cta-final .rf-container { max-width: 1080px; margin: 0 auto; }

.rf-cta-final h2 {
  color: var(--creme);
  margin: 0 0 20px;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .rf-cta-final h2 { white-space: normal; }
}

.rf-cta-final p:not(.rf-cta-final-note) {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  color: var(--creme);
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 32px;
}

.rf-cta-final .rf-btn-flat { align-self: center; }

.rf-cta-final .rf-btn-flat-outline {
  display: inline-block;
  color: var(--creme);
  border-color: var(--jaune-bande);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 3px;
  width: 230px;
  text-align: center;
  margin: 0 auto;
}

.rf-cta-final .rf-btn-flat-outline:hover { border-color: var(--jaune-vif); }

.rf-cta-final-note {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--creme);
  opacity: 0.7;
  margin: 20px 0 0;
}

.rf-cta-final-note .rf-cta-secondaire {
  font-weight: 400;
}

@media (max-width: 900px) {
  .rf-hero-grid { flex-direction: column; align-items: center; }
  .rf-hero-texte { flex: none; width: 100%; }
  .rf-hero-visuel { flex: none; width: 100%; max-width: 320px; min-width: 0; height: 260px; align-self: center; margin-top: 32px; }
}

@media (max-width: 640px) {
  .rf-hero, .rf-realite, .rf-faire-monde, .rf-offres, .rf-benefices-concret, .rf-proposons, .rf-equipes, .rf-experts, .rf-apropos, .rf-cta-final {
    min-height: auto;
    padding: 56px 0;
  }
  .rf-hero-texte h1 { font-size: 38px; }
  .rf-intro { font-size: 19px; }
}

/* ---------- Blog ---------- */

.rf-blog-liste {
  padding: 63px 0 72px; /* 72px de marge réelle en haut comme en bas ; -9px ici pour compenser
  visuellement l'espace invisible sous la dernière ligne du texte (line-height 1.5), qui sinon
  fait paraître ce côté plus grand que le bas du cadre, où la bordure est une ligne nette. */
}

.rf-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .rf-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .rf-blog-grid { grid-template-columns: 1fr; }
}

.rf-blog-carte {
  display: flex;
  flex-direction: column;
  background: var(--creme);
  border: 1px solid var(--jaune-bande);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
}

.rf-blog-carte-image {
  aspect-ratio: 16 / 10;
  background: var(--creme);
  border-bottom: 1px dashed var(--jaune-bande);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rf-blog-carte-image span {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  color: var(--texte-doux);
  padding: 0 16px;
}

.rf-blog-carte-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rf-blog-carte-corps {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.rf-blog-carte-date {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--vert);
  text-transform: uppercase;
}

.rf-blog-carte-titre {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  color: var(--noir);
  margin: 0;
}

.rf-blog-carte-extrait {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte-doux);
  margin: 0;
  flex: 1;
}

.rf-blog-carte-lien {
  display: block;
  width: 100%;
  text-align: right;
  margin-top: auto;
  padding-top: 14px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--vert);
}

/* ---------- Article ---------- */

.rf-article {
  padding: 0 0 64px;
}

/* Pages simples (mentions légales, politique de confidentialité, CGV) :
   pas de bandeau/topbar, donc il faut un espace propre sous le header. */
.rf-article-simple {
  padding-top: 56px;
}

/* Sur ces pages, pas de colonne de lecture resserrée : le corps (h2, texte)
   doit occuper la même largeur que le H1 pour rester aligné avec lui (et
   donc avec le logo du header), avec des marges gauche/droite identiques. */
.rf-article-simple .rf-article-corps {
  max-width: none;
  margin: 0;
}

.rf-article-topbar {
  padding: 14px 0;
}

.rf-article-retour {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
}

.rf-article-retour .rf-cta-secondaire {
  font-weight: 400;
  margin-left: 20px;
}

.rf-article-bandeau {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 70px 24px 64px;
  text-align: center;
  margin-bottom: 40px;
}

.rf-article-bandeau-image {
  position: absolute;
  inset: 0;
  background: #EFE6D3;
  border-top: 1px dashed #C9BB98;
  border-bottom: 1px dashed #C9BB98;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rf-article-bandeau-image span {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  color: var(--texte-doux);
  padding: 0 16px;
}

.rf-article-bandeau-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rf-article-bandeau-overlay {
  position: absolute;
  inset: 0;
  background: rgba(185, 45, 75, 0.45);
}

.rf-article-bandeau-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(20, 8, 10, 0.42) 0%, rgba(20, 8, 10, 0.15) 50%, rgba(20, 8, 10, 0) 85%);
}

.rf-article-bandeau-contenu {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.rf-article-bandeau-contenu h1 {
  color: var(--creme);
  margin: 0 0 14px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.rf-article-bandeau-contenu .rf-article-meta {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--creme);
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

.rf-article-auteur {
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 2;
  margin: 0;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(20, 8, 10, 0.4);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--creme);
}

@media (max-width: 640px) {
  .rf-article-bandeau { min-height: 320px; padding: 48px 20px 52px; }
}

.rf-article-corps {
  max-width: 900px;
  margin: 0 auto;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--noir);
}

.rf-article-corps h2 {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: 24px;
  margin: 40px 0 14px;
}

.rf-article-corps p {
  margin: 0 0 20px;
}

/* Tous les CTA de la page d'accueil (index.html) : remplissage ocre, écriture bleue —
   remplace toutes les combinaisons bleu/crème/rose posées section par section au fil de la
   session. Scopé à .page-accueil-ctas-ocre (posé sur le <body> de cette seule page) pour ne
   pas affecter les autres pages du site, qui gardent leurs propres couleurs de CTA. */
.page-accueil-ctas-ocre .rf-btn-flat-outline {
  background: var(--jaune-bande) !important;
  color: var(--noir) !important;
  border-color: var(--jaune-bande) !important;
}

.page-accueil-ctas-ocre .rf-btn-flat:not(.rf-btn-flat-rouge):not(.rf-btn-flat-bleu) {
  color: var(--noir) !important;
}

/* ---------- Page plateforme.html (page dédiée, formulaire de connexion) ---------- */

.rf-plateforme-connexion {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  margin-top: 8px;
}

.rf-plateforme-connexion-champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 240px;
}

.rf-plateforme-connexion-champ label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--noir);
}

.rf-plateforme-connexion-champ input {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #c0ccda;
  border-radius: 3px;
  background: #fff;
  color: var(--noir);
  box-sizing: border-box;
}

.rf-plateforme-connexion-champ input:focus {
  outline: none;
  border-color: var(--jaune-bande);
}

.rf-plateforme-connexion .rf-btn-flat-outline {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: "Plus Jakarta Sans", sans-serif;
}

@media (max-width: 640px) {
  .rf-plateforme-connexion { flex-direction: column; align-items: stretch; }
}

/* Hero simplifié — 2 colonnes : texte à gauche, logo rouge à droite */
.rf-plateforme-hero {
  background: var(--creme);
  padding: 70px 0 56px;
}

.rf-plateforme-hero-inner {
  display: flex;
  align-items: center;
  gap: 56px;
}

.rf-plateforme-hero-texte-col { flex: 1 1 480px; }

.rf-plateforme-hero h1 {
  color: var(--noir);
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.15;
  margin: 0 0 12px;
}

.rf-plateforme-hero .rf-realite-barre {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .rf-plateforme-hero h1 { font-size: 38px; }
}

.rf-plateforme-hero-texte {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  color: var(--noir);
  margin: 0 0 28px;
}

.rf-plateforme-hero-logo-col {
  flex: 0 0 340px;
  display: flex;
  justify-content: center;
}

.rf-plateforme-hero-logo {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

@media (max-width: 800px) {
  .rf-plateforme-hero-inner { flex-direction: column; gap: 24px; }
  /* Logo sous le CTA (ordre naturel du HTML), bloc aligné à gauche comme sur le reste du site. */
  .rf-plateforme-hero-logo-col { flex: 0 0 auto; max-width: 140px; margin: 0; }
}

/* Bande contenu (fond rouge), même format que .rf-secteurs sur la page d'accueil */
.rf-plateforme-secteurs {
  background: var(--vert);
  padding: 18px 0;
}
.rf-plateforme-secteurs p {
  margin: 0;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--creme);
}

/* Bande "Prolonger les échanges"— 4 piliers, fond crème */
.rf-plateforme-piliers {
  background: var(--creme);
  padding: 56px 0;
}

.rf-plateforme-piliers h2 {
  color: var(--noir);
  margin: 0 0 36px;
  text-align: left;
}

.rf-plateforme-piliers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.rf-plateforme-pilier {
  border: 1px solid var(--jaune-bande);
  border-radius: 6px;
  padding: 32px 24px;
  text-align: center;
}

.rf-plateforme-pilier-icone {
  width: 30px;
  height: 30px;
  color: var(--vert);
  margin: 0 auto 14px;
  display: block;
}

.rf-plateforme-pilier-titre {
  font-family: "Canela", serif;
  font-weight: 400;
  font-size: 19px;
  color: var(--noir);
  margin: 0 0 8px;
}

.rf-plateforme-pilier-texte {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--noir);
  opacity: 0.8;
  margin: 0;
}

@media (max-width: 900px) {
  .rf-plateforme-piliers-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
}

@media (max-width: 480px) {
  .rf-plateforme-piliers-grid { grid-template-columns: 1fr; }
}

/* Section connexion — cadre bordé, centré, visuellement distinct */
.rf-plateforme-connexion-section {
  background: var(--jaune-bande);
  padding: 64px 0;
}

.rf-plateforme-connexion-cadre {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--jaune-bande);
  border-radius: 6px;
  padding: 40px 44px;
  text-align: center;
}

.rf-plateforme-connexion-cadre h2 {
  margin: 0 0 10px;
}

.rf-plateforme-connexion-cadre > p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--noir);
  margin: 0 0 24px;
}

.rf-plateforme-connexion-cadre .rf-plateforme-connexion {
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 18px;
  margin-bottom: 40px;
}

.rf-plateforme-connexion-cadre .rf-plateforme-connexion-champ {
  flex: 0 0 auto;
}

.rf-plateforme-connexion-cadre .rf-plateforme-connexion .rf-btn-flat-outline {
  align-self: center;
  margin-top: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 18px;
  border-radius: 3px;
  width: 230px;
  height: 43px;
  text-align: center;
  animation: rf-cta-pulse 2.6s ease-out infinite;
}

.rf-plateforme-connexion-cadre .rf-plateforme-connexion .rf-btn-flat-outline:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .rf-plateforme-connexion-cadre .rf-plateforme-connexion .rf-btn-flat-outline { animation: none; }
}

.rf-plateforme-connexion-aide {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: var(--noir);
  margin: 80px 0 0;
}

.rf-plateforme-connexion-aide .rf-cta-secondaire {
  font-weight: 400;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .rf-plateforme-connexion-cadre { padding: 32px 24px; }
}