/* ============================================================
   L'EFFET CLIQUET — Accueil (index)
   Section HERO uniquement pour l'instant (les autres sections
   viendront ensuite). Le fond animé WebGL + le header/footer sont
   injectés par site.js : on ne touche pas au canvas, on pose juste
   le contenu et une photo PAR-DESSUS. Variables : theme.css.
   ============================================================ */

/* Empilement : #bg-canvas (shader) = z-index 0 ; .home-hero-photo = 1
   (au-dessus du shader, sous le texte) ; contenu hero = 5.
   La photo est en position:absolute DANS le hero (pas fixed) : elle
   appartient au hero et défile avec lui — elle ne suit pas l'utilisateur
   sur le reste du site. */
.home-hero {
  position: relative;
  /* main a déjà padding-top:80px (header fixe) → on remplit le reste de l'écran.
     svh (small viewport height) : stable sur iOS Safari, contrairement à 100vh
     qui vaut le large viewport (barres rétractées) et provoquait des débordements. */
  min-height: calc(100svh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 80px;
}

/* Photo de fond du hero (réglages validés) : au-dessus du canvas, sous le texte */
.home-hero-photo {
  position: absolute;
  top: 60%;
  right: 3%;
  transform: translateY(-50%);
  width: min(107vh, 1160px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.home-hero-content {
  position: relative;
  z-index: 5;
  max-width: 900px;
}

.home-hero-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9b5a72;
  margin-bottom: 1.4rem;
}

.home-hero-title {
  font-family: 'Anybody', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 1.1;
  padding: 0.12em 0; /* évite que background-clip:text tronque les lettres */
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

.home-hero-sub {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.55;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  max-width: 30ch;
  margin: 0 auto 1.6rem;
}
.home-hero-sub strong { font-weight: 600; }

.home-hero-punch {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  color: var(--ink-body);
  font-size: 1.18rem;
  white-space: nowrap;
  margin: 0 0 2.2rem;
}

.home-hero-cta {
  display: inline-block;
  padding: 0.95rem 2.4rem;
  background: var(--accent);
  color: #fff;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s, transform 0.12s;
}
.home-hero-cta:hover { background: var(--accent-hover); transform: translateY(-2px); }
.home-hero-cta:active { transform: scale(0.97); }

@media (max-width: 760px) {
  /* MOBILE : photo en ABSOLUTE (hors flux → ne pousse PAS le texte), CENTRÉE
     horizontalement, superposée au texte (accepté). Le texte reste à sa position
     d'origine (centré) et passe AU-DESSUS (z-index:5 hérité, photo z-index:1).
     >>> RÉGLAGES (Davy : ajuste taille / position verticale en direct) <<< */
  .home-hero-photo {
    position: absolute;
    top: 50%;           /* << position verticale */
    left: 50%;          /* centrage horizontal (avec translateX(-50%) ci-dessous) */
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 150%;    /* << taille (inchangée) */
    max-height: 80vh;   /* << taille (inchangée) */
    height: auto;
    opacity: 1;
  }
  /* Bloc texte (eyebrow → pilule Candidater) aligné vers le BAS du héro, donc
     posé sur la partie basse de la photo (le visage reste visible au-dessus).
     IMPORTANT : on aligne DANS LE FLUX (justify-content: flex-end) au lieu d'un
     transform: translateY(%) — ce dernier déplaçait le bloc HORS de son flux
     sans réserver d'espace, d'où le chevauchement de la pilule « Candidater » et
     du punch par-dessus la capsule blanche suivante sur iOS. Ici la hauteur du
     héro est réellement occupée : la section .s2 commence après la fin du héro. */
  .home-hero { justify-content: flex-end; }
  .home-hero-content { transform: none; }
  .home-hero-punch { white-space: normal; } /* pas de débordement sur petit écran */
}

/* ============================================================
   CAPSULES BLANCHES — comportements communs (sections 2, 5, 7, 8)
   Marquées par la classe .capsule dans le HTML. Trois choses ici :
   1. Fond animé WebGL clair (canvas .capsule-canvas injecté par accueil.js,
      animé seulement quand la capsule est visible) — remplace le blanc plat.
   2. Apparition au scroll (léger zoom + fondu, une seule fois) via .is-visible.
   3. Zoom au survol (desktop), qui s'ajoute proprement à l'apparition.

   >>> AMPLITUDES RÉGLABLES (Davy : ajuste ces 2 valeurs en direct) <<<
   --cap-appear-scale : échelle de départ à l'apparition (plus bas = zoom plus
                        marqué). 0.96 = subtil ; 0.90 = plus fort.
   --cap-hover-scale  : échelle au survol (plus haut = grossit plus).
                        1.015 = très subtil ; 1.02 = subtil ; 1.03 = marqué.
   Les durées : apparition 0.9s, survol 0.4s (réglables juste en dessous).

   Astuce technique : apparition et survol pilotent CHACUN leur variable
   (--cap-appear / --cap-hover) avec sa propre durée de transition, et le
   transform final = scale(appear * hover). Aucun conflit entre les deux. */
@property --cap-appear { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --cap-hover  { syntax: '<number>'; inherits: false; initial-value: 1; }

.capsule {
  --cap-appear-scale: 0.96;  /* << zoom d'apparition (réglable) */
  --cap-hover-scale: 1.02;   /* << zoom au survol (réglable) */
  --cap-appear-dur: 0.9s;    /* << durée apparition */
  --cap-hover-dur: 0.4s;     /* << durée survol */

  position: relative;        /* repère pour le canvas + le contenu */
  overflow: hidden;          /* le canvas animé respecte les coins arrondis */
  background: #ffffff;       /* repli si WebGL indisponible (le canvas le couvre sinon) */
  /* ombre par défaut des grandes capsules (s7 l'override en plus discret) */
  box-shadow: 0 40px 90px -25px rgba(43, 23, 33, 0.30), 0 14px 34px -14px rgba(43, 23, 33, 0.18);

  /* état initial : léger zoom + fondu, joué une seule fois à l'apparition */
  --cap-appear: var(--cap-appear-scale);
  --cap-hover: 1;
  opacity: 0;
  transform: scale(calc(var(--cap-appear) * var(--cap-hover)));
  transition:
    opacity var(--cap-appear-dur) cubic-bezier(0.16, 1, 0.3, 1),
    --cap-appear var(--cap-appear-dur) cubic-bezier(0.16, 1, 0.3, 1),
    --cap-hover var(--cap-hover-dur) ease;
}
.capsule.is-visible { opacity: 1; --cap-appear: 1; }

/* Zoom au survol : seulement une fois apparue, et seulement sur dispositif à survol (desktop) */
@media (hover: hover) {
  .capsule.is-visible:hover { --cap-hover: var(--cap-hover-scale); }
}

/* Canvas du fond animé : derrière le contenu, sous les coins arrondis */
.capsule-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none; /* le survol/les clics traversent vers la capsule et l'iframe */
}
/* Tout le contenu de la capsule passe AU-DESSUS du canvas */
.capsule > :not(.capsule-canvas) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .capsule {
    transition: none;
    opacity: 1;
    --cap-appear: 1; --cap-hover: 1;
  }
}

/* ============================================================
   SECTION 2 — Capsule blanche flottante « Comprendre ne t'a jamais suffi »
   Capsule posée sur le fond rosé. Deux mécaniques SÉPARÉES :
   - parallax permanent/réversible = translateY sur .s2-wrap (via accueil.js)
   - fond animé + apparition + survol = classe commune .capsule (ci-dessus)
   ============================================================ */
.s2 {
  position: relative;
  min-height: 100svh; /* svh : stable iOS (cf. .home-hero) ; identique à vh sur desktop */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.s2-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  will-change: transform; /* le parallax pose ici une translateY */
}
.s2-capsule {
  width: 94vw;
  max-width: 1100px;
  border-radius: 28px;
  padding: clamp(40px, 6vw, 80px) clamp(28px, 6vw, 92px);
  /* fond, apparition et survol : gérés par la classe commune .capsule (bas du fichier) */
}

.s2-title {
  font-family: 'Anybody', sans-serif; font-weight: 900;
  color: var(--ink);
  font-size: clamp(1.5rem, 4.2vw, 3rem); line-height: 1.1; letter-spacing: -0.02em;
  text-align: center; margin: 0 0 1.4rem;
  white-space: nowrap; /* une seule ligne sur desktop */
}
.s2-sub {
  font-family: 'Outfit', sans-serif; font-weight: 300;
  color: var(--ink-body);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.55;
  text-align: center; max-width: 760px; margin: 0 auto 2.6rem;
}
.s2-quotes { display: flex; flex-direction: column; gap: 1.05rem; max-width: 800px; margin: 0 auto 2.6rem; }
.s2-quote {
  font-family: 'Outfit', sans-serif; font-style: italic; font-weight: 400;
  color: var(--ink-body);
  font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.4;
  text-align: left; padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 3px solid var(--accent);
  white-space: nowrap; /* une seule ligne sur desktop */
}
.s2-chute {
  font-family: 'Outfit', sans-serif; font-weight: 500;
  color: var(--ink);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.5;
  text-align: center; margin: 0;
}
.s2-chute .accent-line { color: var(--accent); font-weight: 600; }

@media (max-width: 760px) {
  .s2-title { white-space: normal; } /* repli autorisé sur petit écran */
  .s2-quote { white-space: normal; } /* sur petit écran, on autorise le retour pour ne pas tronquer */
}
@media (prefers-reduced-motion: reduce) {
  .s2-capsule { transition: none; }
}

/* ============================================================
   SECTION 3 — Texte ouvert sur le fond rosé (PAS de capsule)
   Registre fin et léger : l'élégance vient du contraste entre des
   éléments fins (Anybody 400, pas 900). Alternance voulue avec la
   capsule de la section 2.
   ============================================================ */
.s3 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
}
.s3-inner { max-width: 1000px; width: 100%; }

.s3-eyebrow {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.26em;
  color: #b9637f;
  font-size: clamp(0.78rem, 1.4vw, 0.9rem);
  margin: 0 0 1.6rem;
}

.s3-pilot {
  font-family: 'Anybody', sans-serif; font-weight: 400; /* FIN, pas 900 */
  color: var(--ink);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.25;
  margin: 0 0 2.2rem;
}

.s3-dev { margin: 0 0 2.2rem; }
.s3-dev p {
  font-family: 'Outfit', sans-serif; font-weight: 300;
  color: var(--ink-body);
  font-size: clamp(0.95rem, 1.7vw, 1.18rem); line-height: 1.7;
  margin: 0 0 0.55rem;
  white-space: nowrap; /* chaque paragraphe sur une seule ligne (desktop) */
}
.s3-dev p:last-child { margin-bottom: 0; }

.s3-chute {
  font-family: 'Anybody', sans-serif; font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem); line-height: 1.35;
  margin: 0;
  white-space: nowrap; /* une seule ligne par phrase (desktop) */
}
.s3-chute .accent-line { color: var(--accent); font-weight: 700; }

@media (max-width: 760px) {
  /* repli autorisé partout en mobile pour ne rien tronquer */
  .s3-dev p, .s3-chute { white-space: normal; }
}

/* ============================================================
   SECTION 4 — La méthode RAF : 3 colonnes sobres sur le fond rosé
   PAS de capsule, registre fin et léger (Anybody 400). Simple repère.
   ESPACEMENT RESSERRÉ : pas de min-height:100vh, padding mesuré pour
   éviter les grands vides (principe à garder pour tout le site).
   ============================================================ */
.s4 {
  position: relative; /* repère pour la photo en arrière-plan décalé */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 9vh, 7rem) 1.5rem; /* dense, pas de min-height:100vh */
}
.s4-inner { max-width: 1000px; width: 100%; position: relative; z-index: 1; } /* contenu AU-DESSUS de la photo */

/* Photo introspective en arrière-plan, ramenée vers l'INTÉRIEUR gauche-centre et
   DESCENDUE pour déborder en bas de la section : son bas est volontairement
   « ratiboisé » par le bord supérieur de la capsule blanche suivante (section 5),
   qui passe DEVANT (la capsule forme un contexte d'empilement via son transform
   et vient après dans le DOM → elle recouvre le bas de la photo). Effet d'intégration.
   Clippée par body{overflow-x:hidden} → pas de scroll latéral.
   >>> RÉGLAGES (Davy : ajuste position / taille / opacité en direct) <<< */
.s4-photo {
  position: absolute;
  left: 13%;               /* << décalage horizontal (ramenée vers la gauche ; était 26%) */
  top: 50%;                /* << ancrage vertical */
  transform: translateY(-25%); /* << remontée : -50% = centré, 0% = bord haut à mi-section.
                                  -25% = à mi-chemin → déborde juste un peu en bas */
  width: min(57vh, 621px); /* << taille (agrandie ~+35% : 42vh/460px → 57vh/621px) */
  height: auto;
  opacity: 0.7;            /* << opacité (discrète, ne gêne pas la lecture du texte) */
  z-index: 0;              /* au-dessus du shader, SOUS le contenu (.s4-inner) ET sous la capsule s5 */
  pointer-events: none;
  user-select: none;
}

.s4-eyebrow {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.26em;
  color: #b9637f;
  font-size: clamp(0.78rem, 1.4vw, 0.9rem);
  margin: 0 0 1.4rem;
}
.s4-title {
  font-family: 'Anybody', sans-serif; font-weight: 400; /* FIN */
  color: var(--ink);
  font-size: clamp(1.8rem, 4.2vw, 2.9rem); line-height: 1.2;
  margin: 0 0 4rem;
}

.s4-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 1000px;
  margin: 0 auto;
}
.s4-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s4-letter {
  font-family: 'Anybody', sans-serif; font-weight: 900;
  font-size: clamp(3.5rem, 8vw, 5.5rem); line-height: 1;
  margin: 0 0 1rem;
  background: linear-gradient(135deg, #e64980, #c2255c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.s4-verbs {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.s4-skill {
  font-family: 'Outfit', sans-serif; font-weight: 300;
  font-size: clamp(0.8rem, 1.3vw, 0.92rem); line-height: 1.5;
  color: var(--ink-body);
  /* max-width large → laisse le texte occuper la colonne (≈2 lignes homogènes) */
  max-width: 40ch; margin: 0;
}

/* 1re colonne (R) : passe DEVANT la photo introspective → texte en noir franc
   pour une lisibilité parfaite par-dessus l'image (colonnes A et F inchangées). */
.s4-col:first-child .s4-verbs,
.s4-col:first-child .s4-skill { color: #0a0a0a; }

@media (max-width: 760px) {
  .s4-grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============================================================
   SECTION 5 — Capsule blanche flottante « Moi aussi, je suis passé par là »
   MÊME format que la capsule de la section 2 (#fff, max-width 1100px,
   radius 28px, même ombre, même apparition .is-visible via accueil.js).
   Espacement resserré : pas de min-height:100vh.
   ============================================================ */
.s5 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 9vh, 7rem) 1.5rem;
}
.s5-capsule {
  width: min(1100px, 94vw); /* MÊME largeur que la capsule de la section 2 */
  border-radius: 28px;
  padding: clamp(2.6rem, 5vw, 3.8rem);
  text-align: center;
  /* fond, apparition et survol : gérés par la classe commune .capsule (bas du fichier) */
}

.s5-eyebrow {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.26em;
  color: #b9637f;
  font-size: clamp(0.78rem, 1.4vw, 0.9rem);
  margin: 0 0 1.6rem;
}

.s5-pilot {
  font-family: 'Anybody', sans-serif; font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.25;
  margin: 0 0 2.4rem;
}
.s5-pilot-strong {
  display: inline-block; font-weight: 900;
  font-size: clamp(1.7rem, 3.8vw, 2.5rem);
  margin-top: 0.3rem;
}

.s5-dev { margin: 0 0 2.4rem; }
.s5-dev p {
  font-family: 'Outfit', sans-serif; font-weight: 300;
  color: var(--ink-body);
  font-size: clamp(1rem, 1.8vw, 1.16rem); line-height: 1.7;
  margin: 0 0 1.4rem;
}
.s5-dev p:last-child { margin-bottom: 0; }
.s5-dev b { font-weight: 600; color: var(--ink); }

.s5-chute {
  font-family: 'Anybody', sans-serif; font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1.35;
  margin: 0;
}
.s5-chute .accent-line { color: var(--accent); font-weight: 700; }

/* ============================================================
   SECTION 6 — Témoignages : 3 cartes vidéo sur le fond rosé ouvert.
   Système de carte REPRIS de la page /temoignages (vidéo cloudfront +
   overlay foncé cliquable avec le prénom + filet rainbow ; miniature =
   1re frame via preload="metadata"). Espacement resserré.
   ============================================================ */
.s6 {
  position: relative;
  text-align: center;
  padding: clamp(4rem, 9vh, 7rem) 1.5rem;
}
.s6-inner { max-width: 1100px; margin: 0 auto; }
.s6-eyebrow {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.26em;
  color: #b9637f;
  font-size: clamp(0.78rem, 1.4vw, 0.9rem);
  margin: 0 0 1.4rem;
}
.s6-title {
  font-family: 'Anybody', sans-serif; font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1;
  padding: 0.08em 0; /* effet rainbow via la classe .rainbow */
  margin: 0 0 1.4rem;
}
.s6-sub {
  font-family: 'Outfit', sans-serif; font-weight: 300;
  color: var(--ink-body);
  font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.55;
  margin: 0 auto 3.5rem;
}

.s6-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  max-width: 1100px; margin: 0 auto;
  text-align: left;
}

/* Carte — même structure que /temoignages, adaptée DA rosée */
.s6 .temo-card {
  display: flex; flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 50px -12px rgba(43, 23, 33, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.s6 .temo-card:hover { transform: translateY(-4px); box-shadow: 0 26px 64px -12px rgba(43, 23, 33, 0.28); }
.s6 .temo-card__bar { height: 3px; flex-shrink: 0; background: var(--rainbow); }
.s6 .temo-card__video {
  position: relative; width: 100%; padding-top: 177.78%; /* portrait 9:16, miniature = 1re frame */
  background: #2b1721; overflow: hidden; flex-shrink: 0;
}
.s6 .temo-card__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.s6 .video-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  background: rgba(43, 23, 33, 0.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.s6 .video-overlay span {
  font-family: 'Anybody', sans-serif; font-weight: 900;
  font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: -0.01em;
  color: #fff; text-shadow: 0 2px 14px rgba(43, 23, 33, 0.45);
}
.s6 .temo-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 22px; }
.s6 .temo-card__tag {
  display: block; width: 100%; margin-bottom: 14px; padding: 6px 14px; text-align: center;
  font-family: 'Outfit', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; line-height: 1.6;
  color: #b9637f;
  border: 1px solid var(--line-strong); border-radius: 20px;
}
.s6 .temo-card__name {
  text-align: center; font-family: 'Anybody', sans-serif; font-weight: 900;
  font-size: clamp(18px, 3vw, 22px); letter-spacing: -0.01em; line-height: 1.1;
  color: var(--ink); margin-bottom: 3px;
}
.s6 .temo-card__intro {
  margin: 12px 0 14px; font-family: 'Outfit', sans-serif; font-weight: 300;
  font-size: 14px; line-height: 1.65; color: var(--ink-body);
}
.s6 .temo-card__quote {
  margin-top: auto; padding-left: 12px; border-left: 2px solid var(--accent);
  font-family: 'Outfit', sans-serif; font-style: italic; font-size: 14px; line-height: 1.55;
  color: var(--ink-body);
}

/* Pilule blanche, texte framboise + flèche */
.s6-cta-wrap { text-align: center; margin-top: 3rem; }
.s6-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #ffffff; color: var(--accent);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.95rem;
  padding: 0.85rem 2rem; border-radius: 999px; text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(43, 23, 33, 0.18);
  transition: transform 0.15s, box-shadow 0.2s;
}
.s6-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(43, 23, 33, 0.26); }

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

/* ============================================================
   SECTION 7 — « Concrètement » : texte ouvert sur le fond rosé
   (registre fin, comme s3/s4) AVEC une capsule blanche compacte insérée
   au milieu (« Une séance à effet cliquet ») qui crée un point d'arrêt.
   Bloc final tarif mis en avant par un filet fin. Espacement resserré.
   ============================================================ */
.s7 {
  position: relative;
  text-align: center;
  padding: clamp(4rem, 9vh, 7rem) 1.5rem;
}
.s7-inner { max-width: 820px; margin: 0 auto; }

.s7-eyebrow {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.26em;
  color: #b9637f;
  font-size: clamp(0.78rem, 1.4vw, 0.9rem);
  margin: 0 0 1.6rem;
}
.s7-title {
  font-family: 'Anybody', sans-serif; font-weight: 400; /* FIN */
  color: var(--ink);
  font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.2;
  margin: 0 0 3rem;
}

.s7-block {
  font-family: 'Outfit', sans-serif; font-weight: 300;
  color: var(--ink-body);
  font-size: clamp(1.02rem, 1.9vw, 1.22rem); line-height: 1.7;
  margin: 0 0 2rem;
}
.s7-block b { font-weight: 600; color: var(--ink); }
/* Nom du programme : ressort en Anybody 900 rainbow, un cran plus grand */
.s7-brand {
  font-family: 'Anybody', sans-serif; font-weight: 900;
  font-size: 1.18em; /* un peu plus grand que le texte courant */
  /* l'effet rainbow vient de la classe .rainbow ajoutée à côté */
}

/* Capsule blanche compacte au milieu de la section : point d'arrêt visuel.
   Même esprit que les capsules s2/s5 (#fff, ombre marquée, apparition
   .is-visible via accueil.js) mais plus petite et plus resserrée. */
.s7-capsule {
  width: 100%;
  max-width: 860px;
  margin: 2.4rem auto;
  border-radius: 20px; /* capsule plus compacte : coins un peu moins arrondis */
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  text-align: center;
  /* ombre plus discrète que les grandes capsules (override du défaut .capsule) */
  box-shadow: 0 30px 70px -22px rgba(43, 23, 33, 0.28), 0 10px 26px -12px rgba(43, 23, 33, 0.16);
  /* fond, apparition et survol : gérés par la classe commune .capsule (bas du fichier) */
}

.s7-capsule-title {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent);
  font-size: 0.95rem;
  margin: 0 0 1.2rem;
}
.s7-capsule-body {
  font-family: 'Outfit', sans-serif; font-weight: 300;
  color: var(--ink-body);
  font-size: clamp(1rem, 1.9vw, 1.18rem); line-height: 1.65;
  margin: 0;
}
/* Phrases clés mises en valeur, discrètement : framboise + un peu plus appuyées */
.s7-capsule-body .s7-key { color: var(--accent); font-weight: 600; }
/* Mise en contexte : un cran plus petite et en italique, pour se distinguer
   des phrases fortes et prendre moins de place */
.s7-capsule-body .s7-context {
  font-style: italic;
  font-size: clamp(0.9rem, 1.6vw, 1.02rem);
}

/* Bloc final tarif, mis en avant par un filet fin */
.s7-final {
  margin-top: 3rem; padding-top: 2.4rem;
  border-top: 1px solid rgba(214, 51, 108, 0.25);
}
.s7-final-amount {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  color: var(--ink);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  margin: 0 0 0.7rem;
}
.s7-final-note {
  font-family: 'Outfit', sans-serif; font-weight: 300; font-style: italic;
  color: var(--ink-body);
  font-size: clamp(0.95rem, 1.7vw, 1.08rem);
  margin: 0 0 1.8rem;
}
.s7-final-punch {
  font-family: 'Anybody', sans-serif; font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem); line-height: 1.3;
  margin: 0;
}
.s7-final-punch .accent-line { color: var(--accent); }

@media (max-width: 760px) {
  /* neutralise les retours forcés qui feraient déborder */
  .s7-block br, .s7-capsule-body br, .s7-final-punch br { display: none; }
  /* capsule en pleine largeur */
  .s7-capsule { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .s7-capsule { transition: none; }
}

/* ============================================================
   SECTION 8 — Candidature / CTA final : capsule blanche avec le
   calendrier Google intégré DANS la capsule (l'iframe blanc se fond
   dans le blanc). Même famille de capsule que s2/s5 (#fff, radius 28px,
   ombre marquée). Dernière section : un peu plus d'air en bas avant le
   footer. Espacement resserré (pas de min-height:100vh).
   ============================================================ */
.s8 {
  position: relative; /* repère pour la photo en arrière-plan décalé */
  display: flex;
  justify-content: center;
  padding: clamp(4rem, 9vh, 7rem) 1.5rem clamp(5rem, 11vh, 8rem);
  /* la photo qui dépasse à droite est clippée par body{overflow-x:hidden}
     (même mécanique que la photo du hero) → pas de scroll latéral, ombre de
     la capsule préservée. */
  /* ancre #candidater : décalage pour ne pas passer sous le header fixe */
  scroll-margin-top: 90px;
}
.s8-capsule {
  background: #ffffff;
  width: min(1100px, 94vw); /* MÊME largeur que la capsule de la section 5 */
  border-radius: 28px;
  padding: clamp(2.6rem, 5vw, 4rem) clamp(2rem, 4.5vw, 3.5rem);
  box-shadow: 0 40px 90px -25px rgba(43, 23, 33, 0.30), 0 14px 34px -14px rgba(43, 23, 33, 0.18);
  text-align: center;
  z-index: 1; /* la capsule + le calendrier passent AU-DESSUS de la photo */
}

/* Photo visio dans l'INTERSTICE de fond rosé ENTRE la section 7 et la 8.
   Désormais ancrée à DROITE et retournée en MIROIR (la personne regarde vers la
   gauche, donc vers le contenu). Tirée vers le haut (top négatif + translateY)
   pour vivre dans le vide rosé au-dessus de la capsule. z-index 0 + pointer-events:none
   → elle ne passe JAMAIS devant la capsule ni le calendrier (qui restent cliquables).
   Clippée par body{overflow-x:hidden} → pas de scroll latéral.
   >>> RÉGLAGES (Davy : ajuste position / taille / opacité en direct) <<< */
.s8-photo {
  position: absolute;
  right: 7.5%;             /* << ancrage à DROITE (à mi-chemin entre -10% et 25% ; revenue d'½ largeur vers la droite) */
  top: -10%;               /* << ancrage vertical (négatif = vers la s7) */
  transform: translateY(-50%) scaleX(-1); /* remonte d'une demi-hauteur + miroir horizontal (regard vers la gauche) */
  width: min(57vh, 624px); /* << taille (agrandie ~+30% : 44vh/480px → 57vh/624px) */
  height: auto;
  opacity: 0.85;           /* << opacité */
  z-index: 0;              /* au-dessus du shader, SOUS la capsule et le calendrier */
  pointer-events: none;
  user-select: none;
}

.s8-eyebrow {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.26em;
  color: #b9637f;
  font-size: clamp(0.78rem, 1.4vw, 0.9rem);
  margin: 0 0 1.4rem;
}
.s8-title {
  font-family: 'Anybody', sans-serif; font-weight: 400; /* FIN */
  color: var(--ink);
  font-size: clamp(1.7rem, 3.8vw, 2.5rem); line-height: 1.25;
  margin: 0 0 2rem;
}
.s8-block {
  font-family: 'Outfit', sans-serif; font-weight: 300;
  color: var(--ink-body);
  font-size: clamp(1.02rem, 1.9vw, 1.18rem); line-height: 1.7;
  margin: 0 0 1.5rem;
}
.s8-note {
  font-family: 'Outfit', sans-serif; font-weight: 300; font-style: italic;
  color: #7a5563; /* atténuée : phrase de bornage */
  font-size: clamp(0.95rem, 1.7vw, 1.05rem); line-height: 1.6;
  margin: 0 0 2.4rem;
}
.s8-cal-title {
  font-family: 'Anybody', sans-serif; font-weight: 900;
  color: var(--ink);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.2;
  margin: 0 0 1.4rem;
}

/* Conteneur du calendrier : coins propres + jamais plus large que la capsule
   (pas de scroll horizontal). L'iframe est déjà en width:100%. */
.s8-cal {
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
}
.s8-cal iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

@media (max-width: 760px) {
  .s8 { padding-left: 0.9rem; padding-right: 0.9rem; }
  .s8-capsule {
    width: 100%;
    padding: clamp(1.8rem, 6vw, 2.6rem) clamp(1.1rem, 5vw, 1.8rem);
  }
  /* MOBILE : photo très atténuée en fond, jamais devant le texte/calendrier.
     Mets display:none ici si elle gêne encore. */
  .s8-photo { width: min(40vh, 300px); opacity: 0.15; top: -4%; right: -14%; left: auto; }
}

/* MOBILE — photo de la section 4 : priorité à la lisibilité des colonnes R/A/F.
   Très atténuée en fond. (display:none possible si elle gêne encore.) */
@media (max-width: 760px) {
  .s4-photo { width: min(38vh, 280px); opacity: 0.15; left: -12%; }
}