/* ============================================================
   Page For You — styles spécifiques.
   Page entièrement en sections noires. Accordéons : double
   comportement (survol + clic verrouillé), indépendants.
   Hairlines fines entre sections pour rythmer sans capsule blanche.
   Le reste vient de site.css + accueil.css.
   ============================================================ */

/* ---- Accordéons : base (commune à tous les blocs) -------- */
.accordion { margin: 0 auto 14px; }
.accordion-hook {
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 36px 8px 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  transition: color 0.2s;
}
.accordion-hook:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.accordion-chevron {
  position: absolute;
  right: 4px;
  top: 50%;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.accordion-body-inner { overflow: hidden; min-height: 0; }
.accordion-body p {
  font-style: italic;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.6;
  text-align: left;
  margin: 6px 0 4px;
}

/* Ouverture par SURVOL (dispositifs à survol vrai) */
@media (hover: hover) {
  .accordion:hover > .accordion-body { grid-template-rows: 1fr; opacity: 1; }
  .accordion:hover > .accordion-hook > .accordion-chevron { transform: translateY(-50%) rotate(180deg); }
}
/* Verrouillage par CLIC (prime sur survol, marche partout) */
.accordion[data-locked="true"] > .accordion-body { grid-template-rows: 1fr; opacity: 1; }
.accordion[data-locked="true"] > .accordion-hook > .accordion-chevron { transform: translateY(-50%) rotate(180deg); }

/* ---- Tous les blocs en section noire --------------------- */
/* Couleurs claires sur fond noir. Accents cyan vif via la classe
   globale .accent (#00E5FF, définie dans site.css). Chevrons ivoire. */
.section-dark .accordion { max-width: 780px; }
.section-dark .accordion-hook { color: var(--ink-soft); }
.section-dark .accordion-hook:hover { color: var(--ink); }
.section-dark .accordion-chevron { color: var(--ink); }
.section-dark .accordion-body p { color: var(--ink-soft); }

/* Titres H2 des blocs : réduits pour tenir sur 2 lignes max desktop */
.section-dark .block-h { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 28px; }

/* Intros / clôtures en lead-p — confort de lecture borné */
.section-dark .lead-p { max-width: 780px; }

/* Mention de source (bloc risques) : petite, discrète */
.risks-source {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 32px;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ---- Capsule blanche (bloc valeur, unique de la page) --- */
/* Couleurs inversées vs sections noires : texte sombre, chevrons
   sombres bien visibles sur le blanc, accents cyan désaturé #00788A
   (hérité de .card-light .accent défini dans accueil.css). Le titre
   garde la même taille réduite que les H2 noirs pour tenir sur 2 lignes. */
.card-light .block-h { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 28px; }
.card-light .accordion-hook { color: var(--ink-dark); }
.card-light .accordion-chevron { color: var(--ink-dark); }
.card-light .accordion-body p { color: var(--ink-dark-soft); }

/* ---- Bloc 3 — intro élargie + plus petite pour tenir une phrase par ligne */
/* La 2e phrase de l'intro (94 caractères) déborderait au max .lead-p 780px
   et au max font 19px. On élargit jusqu'au max .content 900 et on réduit
   légèrement la fonte → la phrase tient sur une ligne complète. */
.section-dark .lead-p.section-intro { max-width: 900px; font-size: clamp(15px, 1.35vw, 17px); }

/* ---- Bloc 3 — conclusion détachée du dernier accordéon -- */
.bloc-conclusion { margin-top: 56px; }

/* ---- Bloc RDV : Google Calendar embed (capsule blanche assumée) ----
   L'iframe Google impose son fond blanc + son texte gris foncé (verrouillés
   par Google). On la pose donc dans une capsule BLANC PUR (#FFFFFF) avec un
   peu de padding intérieur pour que le widget ne touche pas les bords et que
   le padding se fonde avec le fond du widget. Coins arrondis cohérents avec
   les autres capsules de la DA. Hauteur généreuse (800 desktop / 1150 mobile)
   pour limiter le double scroll interne. */
html { scroll-behavior: smooth; }
/* Marge anti-recouvrement par le header fixe lors d'un saut #rdv direct */
#rdv { scroll-margin-top: 80px; }
.gcal-capsule {
  background: #FFFFFF;
  width: 100%;
  max-width: 800px;
  margin: clamp(48px, 6vw, 80px) auto;
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}
.gcal-capsule iframe {
  display: block;
  border: 0;
  border-radius: 8px;
  width: 100%;
  height: 800px;
}

/* ---- Photos arrière-plan : hero (coaching) + risques (visio) - */
/* HERO : taille FIXE (vw + cap px + aspect-ratio matchant l'image
   1500x1350 = 10/9). Indépendante de la hauteur de la section →
   ouvrir/fermer un accordéon ne fait plus grossir la photo, et un
   resize vertical ne la déforme pas. Transparence cuite dans le
   fichier, pas d'opacité CSS. Ancrage container via right:-10%
   hérité d'accueil.css → écart photo/texte stable au resize. */
.hero-photo {
  background-image: url("/assets/img/davy-coaching.webp");
  width: min(60vw, 800px);
  height: auto;
  aspect-ratio: 10 / 9;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
/* H2 du hero : forcé en blanc franc + voile sombre radial sous le
   texte. Garantit la lisibilité quel que soit ce qui passe derrière
   (notamment la chemise blanche de la photo coaching). Voile en
   pseudo-élément ::before, z-index -1 dans le stacking context de
   .hero-content → entre la photo et le texte. */
.hero-sub-h { color: #FFFFFF; }
.hero-content::before {
  content: '';
  position: absolute;
  inset: -30px -50px;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.25) 55%, rgba(13,13,13,0) 90%);
  pointer-events: none;
}

/* RISQUES : conteneur centré (max 1280) pour ancrer la photo au
   bloc, pas au viewport (même principe que .hero-inner sur l'accueil). */
.risks-inner {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.risks-inner .content { position: relative; z-index: 1; }
/* Voile sombre radial sous le texte de la section risques (même pattern que
   .hero-content::before) : garantit la lisibilité quand .risks-photo
   davy-visio.webp passe derrière le texte. */
.risks-inner .content::before {
  content: '';
  position: absolute;
  inset: -30px -50px;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.25) 55%, rgba(13,13,13,0) 90%);
  pointer-events: none;
}
/* Photo davy-visio agrandie + ramenée à gauche pour se SUPERPOSER
   en partie au texte (le texte passe par-dessus la photo). L'ovale +
   centre allégé est cuit dans le fichier → pas d'opacité CSS. */
.risks-photo {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: auto;
  transform: translateY(-50%);
  /* Taille FIXE (vw + cap px + aspect-ratio 1/1 matchant l'image
     1500x1500). Indépendante de la hauteur de la section → ouvrir
     un accordéon ne fait plus grossir la photo. Centrée verticalement
     dans .risks-inner via translateY. */
  width: min(55vw, 720px);
  height: auto;
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
  background-image: url("/assets/img/davy-visio.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
}

/* ============================================================
   Composant réutilisable : .logo-marquee
   Bandeau de logos qui défile en continu droite → gauche, boucle
   sans couture (2 copies de la bande + translation -50%). Fondu
   latéral via mask-image (~12% transparent à chaque bord) pour ne
   pas couper net aux extrémités. Réutilisable tel quel sur une
   autre page : drop le markup, le CSS s'applique.
   ============================================================ */
.logo-marquee {
  padding: 32px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: logo-marquee-scroll 60s linear infinite;
  will-change: transform;
}
.logo-marquee__band {
  display: block;
  height: 44px;
  width: auto;
  flex: 0 0 auto;
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   Bloc de clôture « La méthode RAF pour le dirigeant » (#raf-closing)
   Grande capsule blanche pleine largeur, en symétrie du bloc conférence
   RAF de for-business (mêmes composants .card-shell + .card-light de
   accueil.css). Titres centrés pleine largeur en haut, corps aéré aligné
   à gauche, CTA centré en bas. Pas de photo. Rectangle compact.
   ============================================================ */
.card-shell.card-shell-wide { max-width: 1280px; }
#raf-closing .card-light {
  padding: 40px 72px;
  min-height: auto;
}
/* Surtitre cyan : sur fond clair, variante désaturée #00788A
   (--accent-dark), en accord avec .card-light .accent d'accueil.css.
   Spécificité (1,2,0) pour battre .card-light .tertiary. */
#raf-closing .tertiary.raf-eyebrow { color: var(--accent-dark); }
/* Corps : centré dans la capsule mais texte aligné à gauche, max 760px.
   1 phrase = 1 paragraphe ; espacement serré dans un groupe, plus large
   entre groupes. */
#raf-closing .card-content { text-align: center; }
#raf-closing .raf-closing-text {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: left;
}
#raf-closing .raf-group + .raf-group { margin-top: 20px; }
#raf-closing .raf-group p {
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.5;
  color: var(--ink-dark-soft);
  margin: 0 0 5px;
}
#raf-closing .raf-group p:last-child { margin-bottom: 0; }
/* CTA centré sous le corps */
#raf-closing .section-cta { margin-top: 28px; text-align: center; }
#raf-closing .pill { margin-top: 0; }

/* ---- Mobile : préserver les <br> sémantiques + iframe RDV ----- */
/* accueil.css applique `br { display: none }` à ≤860px pour le copy
   décoratif du home. Sur for-you, les <br> sont structurants
   (une phrase = une ligne) → on les garde actifs. */
@media (max-width: 860px) {
  .accordion-body br,
  .accordion-hook br,
  .block-h br,
  .lead-p br { display: inline; }
  .gcal-capsule { margin: clamp(36px, 8vw, 56px) auto; padding: 12px; border-radius: 12px; }
  .gcal-capsule iframe { height: 1150px; }
  /* Photo risques sur mobile : pleine largeur viewport, taille fixe via aspect-ratio 1/1 hérité */
  .risks-photo { width: 100vw; right: 0; }
  /* Bandeau logos : un peu plus compact sur mobile */
  .logo-marquee { padding: 22px 0; }
  .logo-marquee__band { height: 34px; }
  /* Capsule de clôture : padding resserré sur mobile */
  #raf-closing .card-light { padding: 36px 24px; }
}