/* ============================================================
   Cabinet Sorga — Feuille de style partagée (multi-pages V2)
   Palette : variante C hybride (sables conservés + vert + terracotta Sorga)
   ============================================================ */

/* ==================== VARIABLES CSS ==================== */
:root {
  --c-fond: #faf7f2;
  --c-fond-alt: #f0ebe0;
  --c-texte: #1F3A2E;        /* Vert Sorga */
  --c-texte-doux: #5a6f63;   /* Vert Sorga désaturé */
  --c-accent: #C46A4A;       /* Terracotta Sorga */
  --c-accent-clair: #e9c0a8; /* Terracotta clair (dégradés) */
  --c-trait: #d8d0c0;
  --c-blanc: #ffffff;

  --police-titre: 'Cormorant Garamond', Georgia, serif;
  --police-corps: 'Montserrat', system-ui, sans-serif;

  --pad-section: clamp(2rem, 4.5vw, 3.5rem);
  --pad-section-court: clamp(1.5rem, 3vw, 2.25rem);
  --pad-conteneur: clamp(1.25rem, 5vw, 3rem);

  --rayon: 4px;
  --rayon-grand: 16px;
  --ombre: 0 1px 2px rgba(31, 58, 46, 0.04), 0 8px 24px rgba(31, 58, 46, 0.06);
  --transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== RESET ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--police-corps);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-texte);
  background: var(--c-fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }

/* Grain subtil en fond pour donner de la matière */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ==================== TYPOGRAPHIE ==================== */
h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: 400; line-height: 1.1; color: var(--c-texte); letter-spacing: 0; }
h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 300; }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 400; }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.125rem; font-family: var(--police-corps); font-weight: 600; letter-spacing: 0.02em; }
p { color: var(--c-texte-doux); }
p + p { margin-top: 1rem; }
em { color: var(--c-accent); font-style: italic; font-weight: 400; }

.surtitre {
  font-family: var(--police-corps); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent);
  display: inline-flex; align-items: center; gap: 0.75rem;
}
.surtitre::before { content: ''; width: 28px; height: 1px; background: var(--c-accent); }

/* ==================== STRUCTURE ==================== */
.conteneur { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad-conteneur); position: relative; z-index: 2; }
.conteneur-fin { max-width: 820px; }
section { padding: var(--pad-section) 0; position: relative; }
section.section-courte { padding: var(--pad-section-court) 0; }
.section-alt { background: var(--c-fond-alt); }
.section-titre { max-width: 720px; margin: 0 auto 1.5rem; text-align: center; }
.section-titre h2 { margin-top: 1rem; }
/* surtitre centré : on neutralise le petit trait à gauche pour un vrai centrage */
.section-titre .surtitre { justify-content: center; }

/* ==================== EN-TÊTE / NAVIGATION ==================== */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.25rem 0; transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(0);
}
.entete.figee { background: rgba(250, 247, 242, 0.92); backdrop-filter: blur(12px); padding: 0.75rem 0; box-shadow: 0 1px 0 var(--c-trait); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.logo {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--police-titre); font-size: 1.35rem; font-weight: 500;
  color: var(--c-texte); letter-spacing: 0.01em;
}
.logo-monogramme { height: 42px; width: auto; display: block; transition: height var(--transition); }
.entete.figee .logo-monogramme { height: 34px; }
.logo-nom { line-height: 1; }
.nav-liens { display: flex; gap: 1.6rem; list-style: none; align-items: center; }
.nav-liens a {
  font-size: 0.9rem; color: var(--c-texte); position: relative;
  transition: color var(--transition);
}
.nav-liens a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.nav-liens a:hover::after,
.nav-liens a.actif::after { transform: scaleX(1); }
.nav-liens a.actif { color: var(--c-accent); }

/* Le bouton CTA de l'en-tête (« Prendre RDV ») reste un bouton, jamais un lien de nav :
   pas de soulignement, et texte toujours blanc — y compris sur sa propre page (état actif). */
.nav-liens a.bouton::after { display: none; }
.nav-liens a.bouton,
.nav-liens a.bouton.actif,
.nav-liens a.bouton:focus,
.nav-liens a.bouton:active { color: #fff; }
.nav-liens a.bouton:hover { color: var(--c-fond); }

/* Lien "Faire le point" plus discret à côté du bouton principal */
.nav-faire-le-point {
  font-size: 0.85rem; font-style: italic; color: var(--c-texte-doux);
  border-bottom: 1px dotted var(--c-trait); padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.nav-faire-le-point:hover,
.nav-faire-le-point.actif { color: var(--c-accent); border-color: var(--c-accent); }

/* ==================== BOUTONS ==================== */
.bouton {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem; background: var(--c-accent); color: #fff;
  border-radius: 100px; font-size: 0.92rem; font-weight: 500;
  transition: transform var(--transition), background var(--transition), color var(--transition);
  text-align: center; justify-content: center;
}
.bouton:hover { background: var(--c-texte); color: var(--c-fond); transform: translateY(-2px); }
.bouton.secondaire { background: transparent; color: var(--c-texte); border: 1px solid var(--c-texte); }
.bouton.secondaire:hover { background: var(--c-texte); color: var(--c-fond); }
.bouton.discret {
  background: transparent; color: var(--c-texte-doux); border: 1px solid var(--c-trait);
  font-weight: 400;
}
.bouton.discret:hover { background: var(--c-fond-alt); color: var(--c-texte); border-color: var(--c-accent-clair); }
.bouton.large { padding: 1rem 2.25rem; font-size: 1rem; }
.bouton[disabled], .bouton[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed; transform: none !important;
}
.bouton-burger { display: none; width: 32px; height: 32px; }

/* ==================== HERO (accueil) ==================== */
.hero { min-height: 90vh; min-height: 90svh; display: flex; align-items: center; padding-top: 8rem; padding-bottom: 3rem; }
.hero-grille { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
.hero h1 { margin: 1.5rem 0 1.75rem; }
.hero h1 em { font-style: italic; color: var(--c-accent); font-weight: 400; }
.hero-intro { font-size: 1.18rem; max-width: 32em; margin-bottom: 2.5rem; line-height: 1.55; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-visuel {
  aspect-ratio: 4/5; border-radius: var(--rayon-grand);
  background: linear-gradient(135deg, var(--c-accent-clair) 0%, var(--c-trait) 100%);
  position: relative; box-shadow: var(--ombre);
}
.hero-visuel img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon-grand); display: block; }
.hero-visuel::after {
  content: '✦ Photographie à venir';
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 2rem; text-align: center; font-size: 0.85rem; color: var(--c-texte); opacity: 0.65;
  font-family: var(--police-titre); font-style: italic;
}
.hero-meta {
  position: absolute; bottom: -2rem; left: -2rem; background: var(--c-fond);
  /* Padding haut réduit + interligne resserré du titre : l'espace au-dessus de
     « 70 € au cabinet » était visuellement plus grand qu'en dessous du dernier
     mot (retour Bruno 10 juin). */
  padding: 0.95rem 1.5rem 1.25rem; border-radius: var(--rayon-grand); box-shadow: var(--ombre);
  font-size: 0.85rem; max-width: 260px;
}
.hero-meta strong { display: block; font-family: var(--police-titre); font-size: 1.15rem; line-height: 1.25; color: var(--c-texte); margin-bottom: 0.25rem; }

/* ==================== EN-TÊTE DE PAGE INTERNE ==================== */
.page-entete {
  padding-top: 11rem; padding-bottom: 4rem;
  background: linear-gradient(180deg, var(--c-fond-alt) 0%, var(--c-fond) 100%);
}
.page-entete .conteneur { max-width: 920px; }
.page-entete h1 { margin: 1.25rem 0 1.5rem; }
.page-entete h1 em { font-style: italic; color: var(--c-accent); font-weight: 400; }
.page-entete p { font-size: 1.15rem; max-width: 38em; line-height: 1.6; }

/* ==================== BANDEAU RÉASSURANCE ==================== */
.reassurance { background: var(--c-fond-alt); padding: 2.5rem 0; }
.reassurance-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.reassurance-item { display: flex; align-items: center; gap: 0.85rem; font-size: 0.9rem; color: var(--c-texte); }
.reassurance-item svg { flex-shrink: 0; color: var(--c-accent); }

/* ==================== BLOCS DE CONTENU GÉNÉRIQUES ==================== */
.bloc-prose { max-width: 720px; }
.bloc-prose h2 { margin-bottom: 1.5rem; }
.bloc-prose h3 { margin-top: 2rem; margin-bottom: 1rem; }
.bloc-prose p { margin-bottom: 1rem; }
.bloc-prose ul { margin: 1rem 0 1.5rem; padding-left: 1.25rem; color: var(--c-texte-doux); }
.bloc-prose li { margin-bottom: 0.5rem; }

/* Carte thématique générique (pour "Pour qui", "Vous pouvez venir quand…", etc.) */
.cards-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.cards-grille.colonnes-2 { grid-template-columns: repeat(2, 1fr); }
.bloc-card {
  padding: 2.25rem; background: var(--c-blanc); border-radius: var(--rayon-grand);
  border: 1px solid var(--c-trait); transition: transform var(--transition), border-color var(--transition);
  position: relative; overflow: hidden;
}
.bloc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bloc-card:hover { transform: translateY(-4px); border-color: var(--c-accent-clair); }
.bloc-card:hover::before { transform: scaleX(1); }
.bloc-card h3 { margin-bottom: 0.75rem; }
.bloc-card p { font-size: 0.95rem; }
.bloc-card .exemples {
  margin-top: 1rem; font-size: 0.88rem; color: var(--c-texte-doux);
  font-style: italic; line-height: 1.5;
}

/* Bloc encadré (citation, mention de cadre…) */
.encadre {
  padding: 2rem 2.25rem; border-left: 3px solid var(--c-accent);
  background: var(--c-fond-alt); border-radius: 0 var(--rayon-grand) var(--rayon-grand) 0;
  margin: 2rem 0;
}
.encadre p { color: var(--c-texte); font-size: 0.95rem; }
.encadre.discret { background: transparent; border-left-color: var(--c-trait); }
.encadre.discret p { font-style: italic; color: var(--c-texte-doux); }

/* ==================== DÉROULEMENT SÉANCE — TIMELINE ==================== */
.timeline { margin-top: 3rem; position: relative; max-width: 820px; }
.timeline::before {
  content: ''; position: absolute; left: 27px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, var(--c-accent), transparent);
}
.etape { display: grid; grid-template-columns: 56px 1fr; gap: 2rem; padding-bottom: 2.5rem; }
.etape:last-child { padding-bottom: 0; }
.etape-numero {
  width: 56px; height: 56px; border-radius: 50%; background: var(--c-fond);
  border: 1px solid var(--c-accent); display: grid; place-items: center;
  font-family: var(--police-titre); font-size: 1.3rem; font-style: italic; color: var(--c-accent);
  position: relative; z-index: 2;
}
.etape-contenu h3 { margin-bottom: 0.5rem; }

/* Pratique : grille d'infos pratiques */
.seance-pratique,
.pratique-grille {
  margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  padding: 2.5rem; background: var(--c-blanc); border-radius: var(--rayon-grand); border: 1px solid var(--c-trait);
}
.pratique-grille.colonnes-4 { grid-template-columns: repeat(4, 1fr); }
.pratique-item h4 { color: var(--c-accent); margin-bottom: 0.4rem; font-family: var(--police-titre); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.pratique-item p { font-size: 0.95rem; margin: 0; }

/* Liste sobre (points clés type "La séance se déroule habillé…") */
.liste-points { list-style: none; margin: 1.5rem 0; padding: 0; }
.liste-points li {
  position: relative; padding: 0.6rem 0 0.6rem 1.75rem;
  color: var(--c-texte-doux); border-bottom: 1px solid var(--c-trait);
}
.liste-points li:last-child { border-bottom: none; }
.liste-points li::before {
  content: ''; position: absolute; left: 0; top: 1.1rem;
  width: 12px; height: 1px; background: var(--c-accent);
}

/* ==================== CONTACT / RDV ==================== */
.contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3rem; }
.contact-cta {
  padding: 3rem; background: var(--c-texte); color: var(--c-fond);
  border-radius: var(--rayon-grand); position: relative; overflow: hidden;
}
.contact-cta::before {
  content: ''; position: absolute; top: -50%; right: -30%; width: 80%; height: 200%;
  background: radial-gradient(ellipse, var(--c-accent) 0%, transparent 60%); opacity: 0.25;
}
.contact-cta * { position: relative; z-index: 2; }
.contact-cta h2 { color: var(--c-fond); }
.contact-cta p { color: rgba(250, 247, 242, 0.85); margin: 1rem 0 2rem; }
.contact-cta .bouton { background: var(--c-accent); color: var(--c-fond); }
.contact-cta .bouton:hover { background: var(--c-fond); color: var(--c-texte); }
.contact-cta .bouton.secondaire { background: transparent; color: var(--c-fond); border: 1px solid rgba(250, 247, 242, 0.4); }
.contact-cta .bouton.secondaire:hover { background: var(--c-fond); color: var(--c-texte); border-color: var(--c-fond); }

.infos-pratiques { display: grid; gap: 1.5rem; }
.info-bloc { padding: 1.5rem; background: var(--c-blanc); border: 1px solid var(--c-trait); border-radius: var(--rayon-grand); }
.info-bloc h4 { margin-bottom: 0.5rem; color: var(--c-accent); }
.info-bloc a { color: var(--c-texte); border-bottom: 1px dotted var(--c-accent); }
.info-bloc p { margin: 0; font-size: 0.95rem; }

/* Cal.com inline (page Prendre RDV) */
.cal-inline {
  margin: 3rem 0; min-height: 720px; border-radius: var(--rayon-grand);
  overflow: hidden; background: var(--c-blanc); border: 1px solid var(--c-trait);
}
.cal-inline-fallback {
  padding: 3rem 2rem; text-align: center; color: var(--c-texte-doux); font-style: italic;
}

/* Section calendrier inline (dans la page, remplace l'ancienne modale) */
#rdv-calendrier { padding: 0 0 var(--pad-section); }
#rdv-calendrier[hidden] { display: none; }
.rdv-cal-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
  flex-wrap: wrap; margin-bottom: 0.75rem;
}
.rdv-cal-titre { font-family: var(--police-titre); font-size: 1.6rem; color: var(--c-texte); }
.rdv-cal-changer {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; color: var(--c-texte-doux);
  transition: color var(--transition);
}
.rdv-cal-changer:hover { color: var(--c-accent); }
#rdv-calendrier .rdv-astuce-tel { position: static; background: transparent; border-bottom: none; text-align: left; padding: 0 0 0.35rem; }
#rdv-calendrier .rdv-plein-ecran { border-bottom: none; text-align: left; padding: 0 0 0.5rem; }
#rdv-calendrier .cal-inline { margin: 0.5rem 0 0; min-height: 640px; }

/* ==================== FORMULAIRES ==================== */
.formulaire { margin-top: 2rem; }
.champ { margin-bottom: 1.25rem; }
.champ label { display: block; font-size: 0.88rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--c-texte); }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--c-trait);
  border-radius: var(--rayon); background: var(--c-blanc); font: inherit; color: var(--c-texte);
  transition: border-color var(--transition);
}
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--c-accent); outline: none; }
.champ textarea { min-height: 140px; resize: vertical; }
.champ-rgpd { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.85rem; }
.champ-rgpd input { width: auto; margin-top: 0.25rem; }
.formulaire-message { margin-top: 1rem; padding: 1rem; border-radius: var(--rayon); display: none; font-size: 0.92rem; }
.formulaire-message.actif { display: block; }
.formulaire-message.succes { background: #e7f0e1; color: #1F3A2E; }
.formulaire-message.info { background: var(--c-fond-alt); color: var(--c-texte); border-left: 3px solid var(--c-accent); }

/* Formulaire "Faire le point" — questions à choix multiples */
.fl-question { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--c-trait); }
.fl-question:last-of-type { border-bottom: none; }
.fl-question legend {
  font-family: var(--police-titre); font-size: 1.4rem; font-weight: 400;
  color: var(--c-texte); margin-bottom: 1rem; padding: 0;
}
.fl-question .legende {
  display: block; font-size: 0.85rem; color: var(--c-texte-doux);
  font-family: var(--police-corps); font-style: italic; margin-top: 0.35rem;
}
.fl-choix { display: grid; gap: 0.6rem; }
.fl-choix label {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 0.85rem 1rem; background: var(--c-blanc);
  border: 1px solid var(--c-trait); border-radius: var(--rayon);
  font-size: 0.95rem; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.fl-choix label:hover { border-color: var(--c-accent-clair); background: var(--c-fond-alt); }
.fl-choix input[type="checkbox"], .fl-choix input[type="radio"] {
  width: auto; margin: 0.2rem 0 0 0; accent-color: var(--c-accent); flex-shrink: 0;
}
.fl-choix input:checked + span { color: var(--c-texte); font-weight: 500; }
.fl-choix label:has(input:checked) { border-color: var(--c-accent); background: var(--c-fond-alt); }

.fl-bandeau {
  margin: 0.5rem 0; padding: 1.25rem 1.5rem; background: var(--c-fond-alt);
  border-left: 3px solid var(--c-accent); border-radius: 0 var(--rayon-grand) var(--rayon-grand) 0;
  font-size: 0.95rem; color: var(--c-texte);
}
.fl-bandeau strong { display: block; margin-bottom: 0.35rem; color: var(--c-accent); font-weight: 600; }
.fl-bandeau a { color: var(--c-texte); border-bottom: 1px dotted var(--c-accent); }

/* ---------- Questionnaire pas à pas (une question par étape) ---------- */
/* Barre de progression */
.fl-progression { margin-bottom: 1.5rem; }
.fl-progression-barre {
  height: 6px; background: var(--c-trait); border-radius: 999px; overflow: hidden;
}
.fl-progression-barre span {
  display: block; height: 100%; width: 20%;
  background: var(--c-accent); border-radius: 999px;
  transition: width 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fl-progression-texte {
  margin: 0.55rem 0 0; text-align: right;
  font-size: 0.8rem; letter-spacing: 0.04em; color: var(--c-texte-doux);
}
/* Une seule étape visible à la fois ; pas de séparateur sous la question active */
.fl-etape { display: none; margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.fl-etape.actif { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .fl-etape.actif { animation: fl-apparition 380ms ease both; }
}
@keyframes fl-apparition {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Navigation : Précédent (gauche) et Suivant (droite) sur une seule ligne. */
.fl-nav {
  margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
/* Suivant toujours collé à droite, même quand Précédent est masqué (étape 1). */
#fl-suivant { margin-left: auto; }
#fl-precedent svg { margin-right: 0.1rem; }
/* Sous les boutons : aide (gauche) + lien « Passer » (droite). */
.fl-nav-meta {
  margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem 1rem; flex-wrap: wrap;
}
.fl-nav-meta .fl-action-hint { margin: 0; }
/* Lien discret « Passer cette question » (étapes 1 à 4) */
.fl-passer {
  background: none; border: none; padding: 0.35rem 0.25rem;
  font-family: var(--police-corps); font-size: 0.85rem; color: var(--c-texte-doux);
  border-bottom: 1px dotted var(--c-trait); border-radius: 0;
  transition: color var(--transition), border-color var(--transition);
}
.fl-passer:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.fl-passer[hidden] { display: none; }
/* Écran récapitulatif (affiché à l'étape 5, au-dessus de la question). */
.fl-recap {
  margin-bottom: 1.25rem; padding: 1.1rem 1.5rem;
  background: var(--c-fond-alt); border-radius: var(--rayon-grand);
}
.fl-recap[hidden] { display: none; }
.fl-recap h3 {
  font-family: var(--police-titre); font-size: 1.2rem; font-weight: 500;
  color: var(--c-texte); margin: 0 0 0.65rem;
}
.fl-recap-liste { list-style: none; display: grid; gap: 0.45rem; }
.fl-recap-liste li {
  display: grid; grid-template-columns: minmax(130px, 35%) 1fr; gap: 0.25rem 0.9rem;
  font-size: 0.9rem; align-items: baseline;
}
.fl-recap-q { color: var(--c-texte-doux); }
.fl-recap-r { color: var(--c-texte); }
.fl-recap-r.vide { color: var(--c-texte-doux); font-style: italic; }
@media (max-width: 560px) {
  .fl-nav { flex-direction: column-reverse; align-items: stretch; }
  .fl-nav .bouton { justify-content: center; width: 100%; }
  #fl-suivant { margin-left: 0; }
  .fl-nav-meta { flex-direction: column; align-items: center; gap: 0.5rem; }
  .fl-nav-meta .fl-action-hint { text-align: center; }
  .fl-recap-liste li { grid-template-columns: 1fr; }
}

/* Espacements verticaux resserrés, propres à la page « Faire le point » */
body[data-page="faire-le-point"] .page-entete { padding-top: 6.5rem; padding-bottom: 1rem; }
/* Colonne centrale alignée : le titre/intro adoptent la même largeur (820px)
   que le bandeau et le questionnaire (conteneur-fin), pour des bords alignés. */
body[data-page="faire-le-point"] .page-entete .conteneur { max-width: 820px; }
body[data-page="faire-le-point"] .page-entete h1 { margin: 0.6rem 0 0.85rem; }
body[data-page="faire-le-point"] .page-entete p { margin-top: 0.45rem; }
body[data-page="faire-le-point"] #bandeau-statut { padding-top: 0; padding-bottom: 0.25rem; }
body[data-page="faire-le-point"] #formulaire-fl { padding-top: 0; padding-bottom: 1rem; }
body[data-page="faire-le-point"] .fl-progression { margin-bottom: 0.75rem; }
body[data-page="faire-le-point"] .fl-question legend { margin-bottom: 0.85rem; }
body[data-page="faire-le-point"] .fl-nav { margin-top: 1.25rem; }
body[data-page="faire-le-point"] .encadre { margin: 0.75rem 0 0; padding: 0.9rem 1.5rem; }
body[data-page="faire-le-point"] #cta { padding-top: 1.25rem; padding-bottom: 1.25rem; }

/* Validation dépendant de la Q5 + panneaux dynamiques (rappel / question écrite) */
.fl-action { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.fl-action-hint { margin: 0; font-size: 0.85rem; color: var(--c-texte-doux); }
.fl-panneau {
  margin-top: 1.5rem; padding: 1.75rem;
  background: var(--c-blanc); border: 1px solid var(--c-trait); border-radius: var(--rayon-grand);
}
.fl-panneau[hidden] { display: none; }
.fl-panneau h3 { font-family: var(--police-titre); font-size: 1.5rem; color: var(--c-texte); margin: 0 0 0.4rem; }
.fl-panneau-intro { margin: 0 0 1.5rem; font-size: 0.95rem; color: var(--c-texte-doux); }
.fl-panneau .bouton { margin-top: 0.5rem; }
.fl-erreur {
  margin: 0 0 1rem; padding: 0.75rem 1rem; font-size: 0.88rem;
  background: #fbeae5; color: #9c3b1e;
  border-left: 3px solid var(--c-accent); border-radius: var(--rayon);
}
.fl-erreur[hidden] { display: none; }

/* ==================== FAQ — accordéon ==================== */
.faq-liste { margin-top: 2rem; }
/* FAQ : le bas de l'en-tête + le haut de la section + la marge de la liste
   s'additionnaient en un grand vide (~9,5rem) entre l'intro et la 1re question.
   On resserre l'enchaînement, ciblé sur la page FAQ. */
body[data-page="faq"] .page-entete { padding-bottom: 1.5rem; }
body[data-page="faq"] #questions-reponses { padding-top: 1rem; }
body[data-page="faq"] .faq-liste { margin-top: 0.5rem; }
.faq-item {
  background: var(--c-blanc); border: 1px solid var(--c-trait);
  border-radius: var(--rayon-grand); margin-bottom: 0.85rem; overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item[open] { border-color: var(--c-accent-clair); }
.faq-item summary {
  padding: 1.25rem 1.5rem; cursor: pointer; list-style: none;
  font-family: var(--police-titre); font-size: 1.2rem; color: var(--c-texte);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  transition: background var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--c-fond-alt); }
.faq-item summary::after {
  content: ''; display: block; width: 14px; height: 14px;
  border-right: 1.5px solid var(--c-accent); border-bottom: 1.5px solid var(--c-accent);
  transform: rotate(45deg); transition: transform var(--transition);
  flex-shrink: 0; margin-top: -4px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-reponse { padding: 0 1.5rem 1.5rem; }
.faq-reponse p { font-size: 0.97rem; }

/* ==================== ARTICLES ==================== */
.articles-categories {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0 3rem;
}
.cat-tag {
  display: inline-block; padding: 0.4rem 0.95rem;
  background: var(--c-fond-alt); color: var(--c-texte-doux);
  border-radius: 100px; font-size: 0.82rem; border: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.cat-tag.actif, .cat-tag:hover { border-color: var(--c-accent); color: var(--c-accent); }
/* Filtres cliquables (logique dans articles.html) */
.cat-tag { cursor: pointer; user-select: none; }
.cat-tag:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.article-carte[hidden] { display: none; }
.articles-vide { text-align: center; color: var(--c-texte-doux); font-style: italic; margin: 0.5rem 0 0; }

.articles-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.article-carte {
  background: var(--c-blanc); border: 1px solid var(--c-trait); border-radius: var(--rayon-grand);
  overflow: hidden; transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.article-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.article-carte-visuel {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--c-accent-clair) 0%, var(--c-trait) 100%);
  position: relative;
}
.article-carte-visuel::after {
  content: 'Article à paraître'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--police-titre); font-style: italic; color: var(--c-texte); opacity: 0.55;
  font-size: 0.9rem;
}
.article-carte-corps { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; gap: 0.75rem; }
.article-carte-categorie {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-accent); font-weight: 500;
}
.article-carte h3 { font-size: 1.3rem; line-height: 1.25; }
.article-carte p { font-size: 0.92rem; margin: 0; }
.article-carte-meta {
  margin-top: auto; padding-top: 0.75rem;
  font-size: 0.82rem; color: var(--c-texte-doux); font-style: italic;
}

/* ==================== AVIS GOOGLE (placeholder) ==================== */
.avis-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.avis-carte {
  padding: 2rem; background: var(--c-blanc); border: 1px solid var(--c-trait);
  border-radius: var(--rayon-grand); display: flex; flex-direction: column; gap: 1rem;
  min-height: 200px;
}
.avis-carte.placeholder {
  align-items: center; justify-content: center; text-align: center;
  color: var(--c-texte-doux); font-style: italic; font-family: var(--police-titre);
  font-size: 1rem; background: var(--c-fond-alt); border-style: dashed;
}
.avis-etoiles { color: var(--c-accent); letter-spacing: 0.2em; font-size: 1.1rem; }
.avis-carte blockquote { font-family: var(--police-titre); font-size: 1.05rem; color: var(--c-texte); font-style: italic; line-height: 1.45; }
.avis-carte cite {
  margin-top: auto; font-size: 0.85rem; color: var(--c-texte-doux);
  font-style: normal; font-family: var(--police-corps);
}

/* ==================== CARTE GOOGLE MAPS placeholder ==================== */
.carte {
  margin-top: 3rem; aspect-ratio: 16/8; border-radius: var(--rayon-grand);
  background: var(--c-fond-alt); border: 1px solid var(--c-trait);
  display: grid; place-items: center; color: var(--c-texte-doux); font-style: italic;
  text-align: center; padding: 2rem;
}

/* ==================== PIED DE PAGE ==================== */
.pied {
  background: var(--c-texte); color: rgba(250, 247, 242, 0.7);
  padding: 4rem 0 2rem; font-size: 0.9rem;
}
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.pied h4 { color: var(--c-fond); margin-bottom: 1rem; font-family: var(--police-titre); font-weight: 400; font-size: 1.1rem; letter-spacing: 0; text-transform: none; }
.pied a { color: rgba(250, 247, 242, 0.7); transition: color var(--transition); }
.pied a:hover { color: var(--c-accent-clair); }
.pied ul { list-style: none; }
.pied ul li { margin-bottom: 0.5rem; }
.pied-contact p { color: rgba(250, 247, 242, 0.85); margin-bottom: 0.4rem; }
.pied-cadre {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(250, 247, 242, 0.1);
  font-size: 0.82rem; color: rgba(250, 247, 242, 0.6); font-style: italic;
}
.pied-bas { padding-top: 2rem; border-top: 1px solid rgba(250, 247, 242, 0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; }

/* ==================== BANDEAU COOKIES ==================== */
.cookies {
  position: fixed; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; max-width: 480px;
  background: var(--c-texte); color: var(--c-fond); padding: 1.5rem; border-radius: var(--rayon-grand);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); z-index: 200; font-size: 0.9rem;
  transform: translateY(150%); transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cookies.visible { transform: translateY(0); }
.cookies p { color: rgba(250, 247, 242, 0.85); margin-bottom: 1rem; }
.cookies-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cookies .bouton { padding: 0.6rem 1.25rem; font-size: 0.85rem; }
.cookies .bouton.secondaire { color: var(--c-fond); border-color: rgba(250, 247, 242, 0.4); }

/* ==================== ANIMATIONS AU SCROLL ==================== */
/* Contenu affiché directement dès l'ouverture (plus d'apparition au défilement). */
.anim { opacity: 1; transform: none; }
.anim.vu { opacity: 1; transform: none; }

/* ==================== PAGES LÉGALES ==================== */
.page-legale { padding-top: 9rem; padding-bottom: 5rem; }
.page-legale .conteneur { max-width: 820px; }
.page-legale h1 { margin-bottom: 2rem; }
.page-legale h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.page-legale h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; font-size: 1.15rem; }
.page-legale p, .page-legale li { color: var(--c-texte-doux); margin-bottom: 0.85rem; }
.page-legale ul, .page-legale ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.page-legale a { color: var(--c-accent); border-bottom: 1px dotted var(--c-accent); }
.page-legale-mini-pied {
  margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--c-trait);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.85rem; color: var(--c-texte-doux);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1100px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .hero-grille, .contact-grille { grid-template-columns: 1fr; gap: 3rem; }
  .reassurance-grille { grid-template-columns: repeat(2, 1fr); }
  .seance-pratique, .pratique-grille, .pratique-grille.colonnes-4 { grid-template-columns: 1fr 1fr; }
  .cards-grille, .articles-grille, .avis-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  /* IMPORTANT : on supprime le backdrop-filter sur le header en mobile.
     Sinon il crée un containing block qui empêche la nav mobile (fixed inset:0)
     de se positionner par rapport au viewport. */
  .entete, .entete.figee { backdrop-filter: none; }
  .nav-liens {
    position: fixed; inset: 0; background: var(--c-fond); z-index: 100;
    flex-direction: column; justify-content: center; align-items: center; gap: 1.75rem;
    transform: translateX(100%); transition: transform var(--transition);
    padding: 2rem;
  }
  .nav-liens.ouvert { transform: translateX(0); }
  .nav-liens a { font-size: 1.4rem; font-family: var(--police-titre); }
  .nav-faire-le-point { font-size: 1.1rem !important; }
  .bouton-burger { display: grid; place-items: center; z-index: 101; position: relative; }
  .cards-grille, .articles-grille, .avis-grille,
  .seance-pratique, .pratique-grille, .pratique-grille.colonnes-4 { grid-template-columns: 1fr; }
  .reassurance-grille { grid-template-columns: 1fr; gap: 1rem; }
  .hero-meta { left: 1rem; bottom: -1.5rem; }
  .pied-grille { grid-template-columns: 1fr; gap: 2rem; }
  .page-entete { padding-top: 9rem; padding-bottom: 3rem; }
  .cards-grille.colonnes-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .anim { opacity: 1; transform: none; }
}


/* ==================== MODIFS 2026-05-30 (brief Bruno) ==================== */

/* Logo header : nouveau lockup Cabinet Sorga (emblème + texte) */
.logo-img {
  height: 46px;
  width: auto;
  display: block;
  transition: height var(--transition);
}
.entete.figee .logo-img { height: 38px; }
@media (max-width: 720px) { .logo-img { height: 40px; } }

/* Bouton « Prendre RDV » de l'en-tête en gras */
.nav-liens .bouton { font-weight: 700; }

/* Sous-titres de section (surtitres) plus lisibles : gras + agrandis */
.surtitre {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Libellés infos pratiques (Adresse, Durée, Tarif, Paiement) plus lisibles */
.pratique-item h4 {
  font-size: 1.3rem;
  font-weight: 700;
}

/* Texte du site en alignement justifié */
main p { text-align: justify; hyphens: auto; }
.section-titre p { text-align: center; }
/* Encadrés infos pratiques : titre et texte alignés de la même façon (gauche),
   pour éviter le décalage titre-à-gauche / texte-centré. */
.pratique-item { text-align: left; }
.pratique-item p { text-align: left; }

/* Photo du hero (remplace le dégradé placeholder) */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Bandeau tarif sous la photo : 3 lignes (au-dessus de la photo) */
.hero-meta { z-index: 3; }
.hero-meta span { display: block; }
.hero-meta strong { margin-bottom: 0.1rem; }

/* Disclaimer médical sur toute la largeur du pied de page */
.pied-cadre-large {
  margin: 0 0 2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--rayon);
  padding: 1rem 1.4rem;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

/* Section « 3 portes d'entrée » : présentation plus vivante */
.bloc-card { position: relative; }
.bloc-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-blanc);
  font-family: var(--police-titre);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
  transition: transform var(--transition), background var(--transition);
}
.bloc-card:hover .bloc-card-num { transform: scale(1.1) rotate(-6deg); background: var(--c-texte); }

/* Avis : étoiles + auteur + note d'attente */
.avis-carte .avis-etoiles { color: var(--c-accent); letter-spacing: 0.18em; margin-bottom: 0.8rem; font-size: 1.05rem; }
.avis-carte .avis-auteur { display: block; margin-top: 1rem; font-weight: 600; color: var(--c-texte); font-style: normal; font-size: 0.9rem; }
.avis-note { max-width: 620px; margin: 0 auto; text-align: center; font-style: italic; color: var(--c-texte-doux); }

/* Visuel d'article illustré */
.article-carte-visuel.illustre { background-size: cover; background-position: center; }

/* Prochains articles à venir */
.prochains-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.prochain-item {
  border: 1px dashed var(--c-trait);
  border-radius: var(--rayon-grand);
  padding: 1.4rem 1.5rem;
  font-style: italic;
  color: var(--c-texte-doux);
}
.prochain-item strong { display: block; font-family: var(--police-titre); font-style: normal; font-size: 1.1rem; color: var(--c-texte); margin-bottom: 0.3rem; }

@media (max-width: 760px) {
  .prochains-grille { grid-template-columns: 1fr; }
}

/* Carte article entièrement cliquable */
.article-carte-lien { display:flex; flex-direction:column; height:100%; color:inherit; }
.article-carte-lien:hover { color:inherit; }
.article-carte-lien h3 { color: var(--c-texte); transition: color var(--transition); }
.article-carte-lien:hover h3 { color: var(--c-accent); }

/* Masquer l'overlay placeholder du hero quand une vraie photo est présente */
.hero-visuel:has(.hero-photo)::after { content: none; }
.hero-visuel:has(.hero-photo) { background: var(--c-fond-alt); }
.hero-visuel .hero-photo { border-radius: var(--rayon-grand); }


/* ==================== PAGE PRENDRE RDV : en-tête 2 colonnes (2026-05-31) ==================== */
.rdv-entete {
  padding-top: 7.5rem;   /* sous le header fixe */
  padding-bottom: var(--pad-section-court);
}
.rdv-grille {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  align-items: start;
}
.rdv-intro h1 { margin: 0.75rem 0 1.25rem; }
.rdv-intro p { margin: 0 0 0.9rem; }
/* Tarifs rapprochés du texte au-dessus */
.rdv-tarifs {
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.6rem;
  border-top: 1px solid var(--c-trait);
  padding-top: 1.5rem;
}
.rdv-tarifs > div { display: flex; gap: 0.75rem; align-items: baseline; }
.rdv-tarifs dt {
  flex: 0 0 5.5rem;
  font-family: var(--police-titre);
  font-size: 1rem; font-weight: 600;
  color: var(--c-accent);
}
.rdv-tarifs dd { margin: 0; font-size: 0.95rem; color: var(--c-texte); }
/* Le calendrier remplit sa colonne ; min-height réduit pour tenir dans l'écran */
.rdv-cal .cal-inline { margin: 0; min-height: 560px; }
@media (max-width: 960px) {
  .rdv-grille { grid-template-columns: 1fr; gap: 2rem; }
  .rdv-cal .cal-inline { min-height: 600px; }
}


/* ==================== ZONE DE DÉPLACEMENT À DOMICILE (2026-05-31) ==================== */
.zone-module { margin-top: 2rem; }
.zone-carte {
  height: 380px;
  border-radius: var(--rayon-grand);
  border: 1px solid var(--c-trait);
  overflow: hidden;
  background: var(--c-fond-alt);
}
.zone-carte-fallback {
  height: 100%; display: grid; place-items: center; padding: 2rem;
  text-align: center; color: var(--c-texte-doux); font-style: italic;
}
/* Leaflet : police cohérente + z-index maîtrisé (sous le header fixe) */
.leaflet-container { font-family: var(--police-corps); z-index: 1; }

.zone-verif { margin-top: 1.5rem; max-width: 640px; }
.zone-verif > label,
.zone-verif-label {
  display: block; font-size: 0.9rem; font-weight: 600;
  margin-bottom: 0.6rem; color: var(--c-texte);
}
.zone-form { display: flex; gap: 0.6rem; flex-wrap: wrap; position: relative; }
.zone-adresse {
  flex: 1; min-width: 220px; padding: 0.85rem 1rem;
  border: 1px solid var(--c-trait); border-radius: var(--rayon);
  background: var(--c-blanc); font: inherit; color: var(--c-texte);
  transition: border-color var(--transition);
}
.zone-adresse:focus { border-color: var(--c-accent); outline: none; }
.zone-reponse {
  margin-top: 1rem; padding: 0.95rem 1.15rem; border-radius: var(--rayon);
  font-size: 0.92rem; line-height: 1.55; display: none;
}
.zone-reponse.ok { display: block; background: #e7f0e1; color: #1F3A2E; border-left: 3px solid #1F3A2E; }
.zone-reponse.ko { display: block; background: var(--c-fond-alt); color: var(--c-texte); border-left: 3px solid var(--c-accent); }
.zone-reponse.introuvable { display: block; background: var(--c-fond-alt); color: var(--c-texte); border-left: 3px solid var(--c-trait); }
.zone-reponse.charge { display: block; background: transparent; color: var(--c-texte-doux); font-style: italic; padding-left: 0; }
.zone-reponse a { color: var(--c-accent); border-bottom: 1px dotted var(--c-accent); }

/* Autocomplétion d'adresse (liste de suggestions sous le champ) */
.zone-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
  margin: 0; padding: 0.25rem; list-style: none;
  background: var(--c-blanc); border: 1px solid var(--c-trait); border-radius: var(--rayon);
  box-shadow: var(--ombre); max-height: 260px; overflow-y: auto;
}
.zone-suggestions[hidden] { display: none; }
.zone-suggestion {
  padding: 0.55rem 0.65rem; font-size: 0.9rem; color: var(--c-texte);
  cursor: pointer; border-radius: 4px;
}
.zone-suggestion:hover, .zone-suggestion.actif { background: var(--c-fond-alt); color: var(--c-accent); }

/* Verrou « à domicile » (vérification de zone avant le calendrier) */
.rdv-gate { max-width: 640px; }
.rdv-gate[hidden] { display: none; }
.rdv-gate-intro { margin: 0 0 1rem; color: var(--c-texte-doux); }
.rdv-cal-bloc[hidden] { display: none; }

/* Mot « domicile » rendu cliquable -> vérification de la zone de déplacement */
.lien-domicile { color: var(--c-accent); border-bottom: 1px dotted var(--c-accent); white-space: nowrap; }
.lien-domicile:hover { color: var(--c-texte); }
#zone-domicile { scroll-margin-top: 90px; }

@media (max-width: 720px) {
  .zone-carte { height: 300px; }
}


/* Flèche discrète « Changer de prestation » au-dessus du calendrier Cal.com */
.cal-retour {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-bottom: 0.75rem; padding: 0.4rem 0.85rem;
  background: transparent; border: 1px solid var(--c-trait); border-radius: 100px;
  font-size: 0.82rem; color: var(--c-texte-doux);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.cal-retour:hover { color: var(--c-accent); border-color: var(--c-accent-clair); background: var(--c-fond-alt); }
.cal-retour[hidden] { display: none; }
.cal-retour svg { flex-shrink: 0; }


/* ==================== PAGE RDV — OPTION B : cartes prestation + modale (2026-05-31) ==================== */
/* Liste des prestations (colonne droite) */
.presta-liste { display: grid; gap: 1rem; }
.presta-carte {
  display: block; width: 100%; text-align: left;
  background: var(--c-blanc); border: 1px solid var(--c-trait);
  border-radius: var(--rayon-grand); padding: 1.4rem 1.5rem;
  cursor: pointer; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.presta-carte:hover { transform: translateY(-3px); border-color: var(--c-accent); box-shadow: var(--ombre); }
.presta-carte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.presta-titre { font-family: var(--police-titre); font-size: 1.45rem; color: var(--c-texte); line-height: 1.1; }
.presta-px { font-family: var(--police-titre); font-size: 1.4rem; font-weight: 600; color: var(--c-accent); white-space: nowrap; }
.presta-desc { display: block; margin: 0.5rem 0 0.9rem; font-size: 0.92rem; color: var(--c-texte-doux); }
.presta-cta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--c-accent); }
.presta-carte:hover .presta-cta svg { transform: translateX(3px); }
.presta-cta svg { transition: transform var(--transition); }

/* Modale de réservation */
.rdv-modale { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.rdv-modale[hidden] { display: none; }
.rdv-modale-fond { position: absolute; inset: 0; background: rgba(31, 58, 46, 0.55); }
.rdv-modale-panneau {
  position: relative; z-index: 2; background: var(--c-fond);
  width: 100%; max-width: 1040px; max-height: 92vh; display: flex; flex-direction: column;
  border-radius: var(--rayon-grand); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.rdv-modale-tete {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--c-trait); background: var(--c-blanc);
}
.rdv-modale-retour {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; color: var(--c-texte-doux);
  transition: color var(--transition);
}
.rdv-modale-retour:hover { color: var(--c-accent); }
.rdv-modale-titre { flex: 1; text-align: center; font-family: var(--police-titre); font-size: 1.1rem; color: var(--c-texte); }
.rdv-modale-fermer {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-fond-alt); color: var(--c-texte);
  transition: background var(--transition), color var(--transition);
}
.rdv-modale-fermer:hover { background: var(--c-accent); color: #fff; }
/* Corps scrollable : min-height:0 est INDISPENSABLE en flexbox pour que le
   défilement tactile fonctionne (sinon le conteneur refuse de rétrécir sous
   la hauteur de son contenu et le scroll est bloqué, notamment sur iOS). */
.rdv-modale-corps {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Layout paysage : Cal.com affiche de lui-même infos+photo à gauche / calendrier à droite /
   créneaux à l'apparition au clic sur un jour, dès que l'iframe est assez large (≈ 1000px).
   On NE force PAS height:100% : l'iframe Cal prend sa hauteur naturelle (auto-resize)
   et c'est .rdv-modale-corps qui défile. */
.rdv-modale .cal-inline { margin: 0; min-height: 640px; height: auto; border: none; border-radius: 0; background: var(--c-fond); }

/* Astuce de saisie du téléphone : reste collée en haut du corps défilant pour
   être encore visible quand l'utilisateur atteint le formulaire (champ tél.
   géré par l'iframe Cal.eu, qu'on ne peut pas modifier de l'extérieur). */
.rdv-astuce-tel {
  position: sticky; top: 0; z-index: 2; margin: 0;
  padding: 0.5rem 1.1rem; text-align: center;
  font-size: 0.8rem; line-height: 1.4; color: var(--c-texte-doux);
  background: var(--c-fond-alt); border-bottom: 1px solid var(--c-trait);
}
.rdv-astuce-tel strong { color: var(--c-accent); font-weight: 600; white-space: nowrap; }
/* Filet de sécurité : lien « plein écran » toujours visible dans la modale. */
.rdv-plein-ecran {
  margin: 0; padding: 0.5rem 1.1rem; text-align: center;
  font-size: 0.8rem; line-height: 1.4; color: var(--c-texte-doux);
  border-bottom: 1px solid var(--c-trait);
}
.rdv-plein-ecran a { color: var(--c-accent); border-bottom: 1px dotted var(--c-accent); white-space: nowrap; }

/* Verrou de défilement de la page quand la modale est ouverte */
body.modale-ouverte { overflow: hidden; }

/* Mobile : modale plein écran ; Cal bascule en portrait empilé automatiquement.
   ⚠️ iPhone : on donne au calendrier une hauteur GÉNÉREUSE (et non un simple
   min-height) pour que Cal.com n'ait pas à scroller À L'INTÉRIEUR de son iframe
   (ce scroll interne est capricieux sur iOS). Ainsi le calendrier déborde du
   viewport et c'est .rdv-modale-corps (overflow-y:auto) qui gère le défilement
   tactile — fiable sur iOS. La hauteur est large pour couvrir mois + créneaux. */
@media (max-width: 760px) {
  .rdv-modale { padding: 0; }
  .rdv-modale-panneau { max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .rdv-modale-titre { display: none; }
  /* ⚠️ NE PAS figer la hauteur à une valeur fixe : l'étape FORMULAIRE (prénom,
     e-mail, téléphone, date de naissance, note, long paragraphe RGPD + mentions
     légales + bouton « Confirmer ») est l'écran le PLUS HAUT. À ~1150px de contenu,
     elle était déjà à la limite ; dès qu'un message d'erreur s'affiche (ex.
     « Numéro de téléphone invalide », qui AJOUTE une ligne rouge), le bouton de
     confirmation passe SOUS la découpe de l'iframe et devient inatteignable
     (l'iframe ne défile pas en interne, le contenu au-delà de sa hauteur est
     simplement masqué). On laisse donc l'iframe croître (auto-resize natif de
     Cal) et c'est .rdv-modale-corps qui défile, avec un plancher généreux pour
     conserver le défilement tactile fiable sur iOS sur les étapes plus courtes. */
  .rdv-modale .cal-inline { height: auto; min-height: 1500px; }
}


/* ==================== AVIS GOOGLE (Featurable) + consentement (2026-06-01) ==================== */
.avis-widget { margin-top: 2.5rem; }
/* Repli affiché tant que les avis ne sont pas activés (RGPD) */
.avis-consent {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--c-blanc); border: 1px solid var(--c-trait);
  border-radius: var(--rayon-grand); padding: 2rem 1.75rem;
}
.avis-consent p { color: var(--c-texte-doux); font-size: 0.95rem; margin-bottom: 1.25rem; }
.avis-consent-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }


/* ==================== AVIS : intégration plus fondue (2026-06-01) ==================== */
/* Le widget Featurable vit dans un shadow DOM : l'intérieur des cartes se règle
   dans l'éditeur Featurable (Custom CSS). Ici on soigne surtout le CONTOUR. */
.avis-widget { max-width: 1080px; margin-left: auto; margin-right: auto; }
/* La section avis reçoit un léger dégradé sable -> sable alt, pour fondre la
   transition avec la section "articles" (section-alt) qui suit, sans rupture nette. */
#avis { background: linear-gradient(180deg, var(--c-fond) 0%, var(--c-fond) 55%, var(--c-fond-alt) 100%); }
/* L'hôte du widget : laisse respirer, pas de fond blanc parasite */
#featurable-9183cd23-44a9-460e-a664-f33c0c775edc { background: transparent; }

/* Carrousel Featurable sur mobile / petite tablette (2026-06-07) :
   sa piste interne (shadow DOM) est plus large que l'écran ; comme le <body>
   masque le débordement horizontal, les cartes des bords se retrouvaient
   tranchées et superposées sous les bords du téléphone. On contient la piste
   dans la largeur du conteneur (cadre arrondi), le carrousel reste navigable
   via ses flèches. `overflow: clip` ne coupe que ce qui dépasse réellement :
   aucun effet quand tout tient (desktop). */
@media (max-width: 960px) {
  .avis-widget { overflow-x: clip; }
  #featurable-9183cd23-44a9-460e-a664-f33c0c775edc {
    overflow-x: clip;
    border-radius: var(--rayon-grand);
  }
}


/* ==================== GROUPE DE BOUTONS CTA (2026-06-02) ==================== */
/* Boutons côte à côte sur desktop ; empilés ET CENTRÉS sur mobile, avec une
   largeur identique pour un alignement net (corrige l'effet "un centré / un non"). */
.cta-boutons { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .cta-boutons { flex-direction: column; align-items: stretch; }
  .cta-boutons .bouton { width: 100%; }
}


/* ==================== TITRE DE PAGE COURANTE (en-tête) — repère mobile (2026-06-02) ==================== */
/* Caché par défaut (desktop : la nav complète suffit). */
/* Variante « onglet actif » (2026-06-03) : un point + un fin trait terracotta
   (même code couleur que le lien actif du menu) signalent que ces mots sont la
   PAGE en cours. L'étiquette « Menu » sous le burger lève l'ambiguïté sur les
   3 barres. Tout est généré en CSS/JS : aucun HTML de page à modifier. */
.nav-page-courante { display: none; }
@media (max-width: 720px) {
  /* Conteneur centré entre le logo et le burger : point (::before) + texte. */
  .nav-page-courante {
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    flex: 1; min-width: 0; padding: 0 0.4rem; position: relative;
  }
  /* Pastille terracotta « vous êtes ici ». */
  .nav-page-courante::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-accent); flex-shrink: 0;
  }
  /* Fin trait terracotta centré sous le titre = onglet actif. */
  .nav-page-courante::after {
    content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    width: 30px; height: 2px; border-radius: 2px; background: var(--c-accent);
  }
  /* Le texte lui-même (span injecté par le JS) : ellipsis si trop long. */
  .nav-page-courante-texte {
    min-width: 0;
    font-family: var(--police-titre); font-size: 1.2rem; color: var(--c-texte);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Burger : icône + étiquette « Menu » empilées (repère « ouvre les pages »). */
  .bouton-burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; width: auto; height: auto;
  }
  .bouton-burger::after {
    content: "Menu"; font-family: var(--police-corps);
    font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--c-texte-doux); font-weight: 600; line-height: 1;
  }
  /* Quand le menu est ouvert, l'étiquette n'a plus de sens : on la masque. */
  .bouton-burger[aria-expanded="true"]::after { visibility: hidden; }
}


/* ============================================================
   MODIFS 2026-06-07 — Refonte éditoriale + intégration photos
   (brief Bruno : trois piliers, force commerciale, preuve par l'image)
   ============================================================ */

/* ---------- Cadre photo générique, avec repli élégant ----------
   Convention de nommage des fichiers : img/photos/DSC_XXXX.webp
   Tant que le fichier n'est pas déposé, l'attribut onerror sur l'<img>
   ajoute la classe .vide et un repli « Photo à venir » s'affiche.
   Le ratio est fixé par une classe modificatrice pour que la mise en
   page reste stable, photo présente ou non. */
.photo-cadre {
  position: relative; overflow: hidden;
  border-radius: var(--rayon-grand);
  background: var(--c-fond-alt);
  border: 1px solid rgba(216, 208, 192, 0.6);
  box-shadow: var(--ombre);
  aspect-ratio: 3 / 2;
}
.photo-cadre.r-portrait { aspect-ratio: 4 / 5; }
.photo-cadre.r-carre    { aspect-ratio: 1 / 1; }
.photo-cadre.r-large    { aspect-ratio: 16 / 9; }
.photo-cadre.r-pano     { aspect-ratio: 2 / 1; }
.photo-cadre::before {
  content: '✦ Photo à venir';
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 1.25rem; text-align: center;
  font-family: var(--police-titre); font-style: italic; font-size: 0.9rem;
  color: var(--c-texte); opacity: 0.45;
}
.photo-cadre img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.photo-cadre.vide img { display: none; }
/* Légende discrète sous une photo (optionnelle) */
.photo-legende { margin: 0.6rem 0 0; font-size: 0.82rem; font-style: italic; color: var(--c-texte-doux); text-align: center; }

/* ---------- Bloc média alterné (texte + photo) ---------- */
.media-bloc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.media-bloc + .media-bloc { margin-top: var(--pad-section); }
.media-bloc.inverse .media-bloc-texte { order: 2; }
.media-bloc-texte h2, .media-bloc-texte h3 { margin-bottom: 1rem; }
.media-bloc-texte p { margin-bottom: 1rem; }
.media-bloc-texte p:last-child { margin-bottom: 0; }

/* ---------- Grille de cartes illustrées (3 dimensions, explorer en séance) ---------- */
.cartes-photo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 2.5rem; }
.cartes-photo.colonnes-2 { grid-template-columns: repeat(2, 1fr); }
.carte-photo {
  background: var(--c-blanc); border: 1px solid var(--c-trait);
  border-radius: var(--rayon-grand); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-photo:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: var(--c-accent-clair); }
.carte-photo .photo-cadre { border: none; border-radius: 0; box-shadow: none; aspect-ratio: 4 / 3; }
.carte-photo-corps { padding: 1.4rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.carte-photo-corps h3 { font-size: 1.4rem; }
.carte-photo-corps p { font-size: 0.94rem; margin: 0; }
.carte-photo-lien { margin-top: auto; padding-top: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--c-accent); display: inline-flex; align-items: center; gap: 0.35rem; }
.carte-photo:hover .carte-photo-lien svg { transform: translateX(3px); }
.carte-photo-lien svg { transition: transform var(--transition); }

/* ---------- Bloc « Vous venez peut-être pour… » (reconnaissance client) ---------- */
.venir-grille { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-top: 2rem; }
.venir-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; list-style: none; padding: 0; margin: 0; align-items: start; }
/* ---------- Cartouches « motifs » qui se retournent (11 juin 2026) ----------
   Recto = la phrase (mot-clé en terracotta gras) ; verso = la description.
   Retournement : au survol et au focus clavier (ordinateur), au tap (mobile).
   Hauteur adaptative : front compact et uniforme (--h-front, mesuré en JS) ;
   au retournement, la cartouche s'agrandit à la hauteur exacte de son verso
   (--h-back). Les deux faces sont superposées en position absolue. */
.cartouche {
  perspective: 1100px; cursor: default;
  height: var(--h-front, auto);
  transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cartouche:focus { outline: none; }
.cartouche-inner {
  position: relative; width: 100%; height: 100%; min-height: 3rem;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.cartouche-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; align-items: center;
  padding: 0.8rem 1.1rem; border-radius: var(--rayon-grand);
  border: 1px solid var(--c-trait);
}
.cartouche-face span { display: block; width: 100%; }
.cartouche-recto { background: var(--c-blanc); color: var(--c-texte); font-size: 0.95rem; }
.cartouche-recto strong { color: var(--c-accent); font-weight: 700; }
.cartouche-verso {
  transform: rotateY(180deg);
  background: var(--c-fond-alt); border-color: var(--c-accent-clair);
  color: var(--c-texte-doux); font-size: 0.85rem; line-height: 1.5;
}
/* Ordinateur (vrai survol) : retournement au survol uniquement ; retour au
   recto dès qu'on ne survole plus. Sur mobile (hover:none) le :hover est exclu
   pour éviter l'état « collé » : seul le tap (classe .retournee) commande. */
@media (hover: hover) {
  .cartouche:hover { height: var(--h-back, auto); }
  .cartouche:hover .cartouche-inner { transform: rotateY(180deg); }
}
.cartouche.retournee { height: var(--h-back, auto); }
.cartouche.retournee .cartouche-inner { transform: rotateY(180deg); }
.cartouche:focus-visible .cartouche-recto,
.cartouche:focus-visible .cartouche-verso { box-shadow: 0 0 0 2px var(--c-accent); }
/* Indice mobile (choix C) : coin corné en bas à droite du recto, suggérant
   une carte à retourner. Affiché uniquement sans survol (appareils tactiles). */
@media (hover: none) {
  .cartouche { cursor: pointer; }
  .cartouche-recto::after {
    content: ""; position: absolute; right: 0; bottom: 0;
    border-style: solid; border-width: 0 0 20px 20px;
    border-color: transparent transparent var(--c-accent-clair) transparent;
    border-bottom-right-radius: var(--rayon-grand);
  }
}
@media (prefers-reduced-motion: reduce) { .cartouche, .cartouche-inner { transition: none; } }
.venir-visuel .photo-cadre { aspect-ratio: 4 / 5; }

/* ---------- Cartes « étapes de séance » (Échanger, Investiguer, Équilibrer, Intégrer) ---------- */
.etapes-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.etape-carte {
  background: var(--c-blanc); border: 1px solid var(--c-trait);
  border-radius: var(--rayon-grand); padding: 1.75rem 1.6rem;
  position: relative; transition: transform var(--transition), border-color var(--transition);
}
.etape-carte:hover { transform: translateY(-4px); border-color: var(--c-accent-clair); }
.etape-carte-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--c-accent); color: var(--c-accent);
  font-family: var(--police-titre); font-style: italic; font-size: 1.2rem; margin-bottom: 1rem;
}
.etape-carte h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.etape-carte p { font-size: 0.92rem; margin: 0; }

/* ---------- En-tête de page interne avec photo (2 colonnes) ---------- */
.page-entete-photo .conteneur { max-width: 1100px; }
.page-entete-grille { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.page-entete-grille .photo-cadre { aspect-ratio: 3 / 2; }

/* ---------- Carrousel (colonne droite du hero accueil) ---------- */
.hero-media { position: relative; }
.carrousel { position: relative; overflow: hidden; border-radius: var(--rayon-grand); }
.carrousel-piste { display: flex; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.carrousel-piste > * { flex: 0 0 100%; }
.carrousel .photo-cadre { border-radius: var(--rayon-grand); aspect-ratio: 3 / 2; }
.carrousel-fleche {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(250, 247, 242, 0.85); color: var(--c-texte);
  display: grid; place-items: center; box-shadow: var(--ombre);
  transition: background var(--transition), color var(--transition);
}
.carrousel-fleche:hover { background: var(--c-accent); color: #fff; }
.carrousel-fleche.prec { left: 0.75rem; }
.carrousel-fleche.suiv { right: 0.75rem; }
.carrousel-points { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
/* Dans le hero, la vignette tarifs déborde en bas-gauche du carrousel et masquait
   les premiers points : on aligne la rangée à droite (retour Bruno 10 juin). */
.hero-media .carrousel-points { justify-content: flex-end; padding-right: 0.5rem; }
.carrousel-point { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--c-trait); transition: background var(--transition), transform var(--transition); }
.carrousel-point.actif { background: var(--c-accent); transform: scale(1.3); }

/* ---------- Vignettes d'articles illustrées : on retire la mention « Article à paraître » ---------- */
.article-carte-visuel.illustre::after { content: none; }

/* ---------- Ancres : décalage sous l'en-tête fixe (liens inter-pages vers une carte) ---------- */
section[id], .bloc-card[id] { scroll-margin-top: 96px; }

/* ---------- Barre CTA fixe (mobile) ---------- */
.cta-mobile { display: none; }

/* ---------- Responsive de la refonte ---------- */
@media (max-width: 960px) {
  .cartes-photo, .cartes-photo.colonnes-2, .etapes-grille { grid-template-columns: repeat(2, 1fr); }
  .media-bloc { grid-template-columns: 1fr; gap: 2rem; }
  .media-bloc.inverse .media-bloc-texte { order: 0; }
  .venir-grille { grid-template-columns: 1fr; }
  .page-entete-grille { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cartes-photo, .cartes-photo.colonnes-2, .etapes-grille { grid-template-columns: 1fr; }
  .venir-liste { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cta-mobile {
    display: flex; gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 247, 242, 0.95); backdrop-filter: blur(10px);
    border-top: 1px solid var(--c-trait);
  }
  .cta-mobile .bouton { flex: 1; padding: 0.75rem 0.5rem; font-size: 0.85rem; }
  /* On laisse la place à la barre fixe et on remonte le bandeau cookies au-dessus d'elle. */
  body.a-barre-cta { padding-bottom: 4.75rem; }
  body.a-barre-cta .cookies { bottom: 5.25rem; }
}


/* ==================== DUO PHOTO D'EN-TÊTE (Pourquoi consulter) — 9 juin 2026 ==================== */
/* Deux photos empilées dans la colonne image de l'en-tête, au lieu d'une seule. */
.entete-duo { display: grid; gap: 1rem; }

/* ==================== PHOTO D'ACCUEIL (Prendre RDV) — 10 juin 2026 ==================== */
/* Bruno derrière la table de séance, en grand dans la colonne intro,
   avec une légende intégrée « Vous serez reçu·e par… » (remplace l'encart). */
.rdv-portrait { margin-top: 1.75rem; aspect-ratio: 3 / 2; }
.rdv-portrait figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.1rem 0.8rem;
  background: linear-gradient(180deg, rgba(30,30,28,0) 0%, rgba(30,30,28,0.55) 100%);
  color: #fff; font-size: 0.9rem; letter-spacing: 0.01em;
}
.rdv-portrait figcaption strong { font-family: var(--police-titre); font-size: 1.1rem; font-weight: 500; }


/* ==================== FLÈCHE « RETOUR EN HAUT » (10 juin 2026) ==================== */
/* Variante choisie par Bruno : terracotta plein (couleur des boutons d'action).
   Injectée sur toutes les pages par js/script.js. */
.retour-haut {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center;
  background: var(--c-accent); color: #fff;
  box-shadow: 0 6px 18px rgba(196, 106, 74, 0.38);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 350ms, transform 350ms, visibility 350ms, box-shadow 250ms;
}
.retour-haut.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.retour-haut:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(196, 106, 74, 0.45); }
.retour-haut svg { width: 20px; height: 20px; }
@media (max-width: 720px) {
  /* Au-dessus de la barre CTA mobile (qui fait ~4.75rem avec son padding). */
  body.a-barre-cta .retour-haut { bottom: 5.5rem; }
}


/* ==================== MODE NUIT « ÉMERAUDE SOMBRE » (auto, système) — 11 juin 2026 ====================
   Déclenché par le réglage clair/sombre de l'appareil (prefers-color-scheme).
   On ne change QUE des couleurs : aucune police, taille, position ou photo modifiée.
   Principe : on redéfinit les variables de couleur, puis on rattrape les quelques
   composants « inversés » (qui utilisaient le vert foncé comme fond) et les rares
   couleurs écrites en dur, pour qu'ils restent foncés proprement. */
@media (prefers-color-scheme: dark) {
  :root {
    --c-fond: #102a22;        /* vert émeraude nuit */
    --c-fond-alt: #163a2f;    /* surface légèrement relevée */
    --c-texte: #eef3ee;       /* texte clair */
    --c-texte-doux: #aebfb4;  /* texte secondaire */
    --c-accent: #df9069;      /* terracotta légèrement éclairci (lisibilité sur fond sombre) */
    --c-accent-clair: #c0937c;/* terracotta doux pour bordures/survols */
    --c-trait: #2c5246;       /* filets/bordures */
    --c-blanc: #1a4034;       /* surface des cartes (ex-« blanc ») */
    --ombre: 0 1px 2px rgba(0,0,0,0.30), 0 12px 30px rgba(0,0,0,0.42);
  }

  /* Grain de fond fortement atténué (trop marqué sur fond sombre) */
  body::before { opacity: 0.06; }

  /* En-tête figé + barre CTA mobile (fonds clairs écrits en dur) */
  .entete.figee { background: rgba(16, 42, 34, 0.92); }
  .cta-mobile { background: rgba(16, 42, 34, 0.95); }

  /* Bordure des cadres photo (était un filet clair en dur) */
  .photo-cadre { border-color: var(--c-trait); }

  /* Badge numéroté : garder le chiffre blanc, et rester terracotta au survol */
  .bloc-card-num { color: #fff; }
  .bloc-card:hover .bloc-card-num { background: var(--c-accent); }

  /* Sections « inversées » : elles utilisaient le vert foncé comme FOND.
     On les force à rester des surfaces sombres avec texte clair. */
  .contact-cta { background: #163a2f; color: var(--c-texte); }
  .contact-cta h2 { color: var(--c-texte); }
  .contact-cta .bouton { color: #fff; }
  .contact-cta .bouton.secondaire { color: var(--c-texte); border-color: rgba(238, 243, 238, 0.35); }
  .pied { background: #0c2019; }
  .pied h4 { color: var(--c-texte); }
  .cookies { background: #163a2f; }
  /* « Refuser » : en clair, le bouton secondaire prend var(--c-fond) (fond clair)
     sur le bandeau sombre. En nuit, --c-fond devient sombre → texte sombre sur
     fond sombre, donc illisible. On force un texte clair et une bordure visible. */
  .cookies .bouton.secondaire { color: var(--c-texte); border-color: rgba(238, 243, 238, 0.45); }

  /* Flèches du carrousel : la pastille reste claire (jolie sur la photo), mais
     l'icône utilisait var(--c-texte) (devenu clair en nuit) → flèche claire sur
     pastille claire = invisible. On repasse l'icône en sombre. */
  .carrousel-fleche { color: #102a22; }

  /* Message d'erreur du questionnaire « Faire le point » : la version claire
     (rose pâle) jurait sur fond sombre. Variante nuit assortie, toujours lisible. */
  .fl-erreur { background: rgba(196, 106, 74, 0.16); color: #f0bba8; }
}

/* ============================================================
   RUBAN D'ARTICLES DÉFILANT (accueil) — alimenté par js/articles-data.js
   Les cartes réutilisent le style .article-carte. La piste contient deux
   copies identiques des articles ; l'animation translate exactement d'une
   copie (−50 % − la moitié du gap) pour une boucle sans couture.
   ============================================================ */
.ruban-articles {
  overflow: hidden;
  padding: 0.75rem 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ruban-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: ruban-defile 48s linear infinite;
}
.ruban-articles:hover .ruban-track,
.ruban-articles:focus-within .ruban-track { animation-play-state: paused; }
.ruban-track .article-carte { width: 300px; flex: 0 0 auto; }
@keyframes ruban-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 1rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .ruban-articles { -webkit-mask: none; mask: none; overflow-x: auto; }
  .ruban-track { animation: none; }
}