/* ============================================================
   davylheureux.fr — Page For Business
   Hérite de site.css + accueil.css + for-you.css.
   Spécifique : ligne de cadrage, 2 capsules côte à côte (offres),
   blocs détails avec listes denses en clair (pas d'accordéon),
   bloc signature « La conférence RAF », CTA de clôture.
   ============================================================ */

/* ---- Ancres : marge anti-recouvrement sous header fixe --- */
#operating-partner,
#strategy-partner,
#raf-conference { scroll-margin-top: 80px; }

/* ---- Photo Operating Partner (.op-photo) ------------------- */
/* Posée en position absolute DANS la section #operating-partner (qui
   passe en position: relative + overflow: hidden pour cropper le
   débordement et éviter tout scroll horizontal). Sortie du flux :
   aucun élément n'est poussé, le texte garde ses espacements serrés.
   z-index 0 → derrière le texte (.content z-index 1).
   PNG portrait 3:4 avec fondu rectangulaire transparent sur le bord
   gauche → la superposition avec le corps de texte (qui reste sur la
   gauche) reste lisible. Aucun filtre / opacity / mask / border /
   shadow ici. */
#operating-partner {
  position: relative;
  overflow: hidden;
}
#operating-partner .content {
  position: relative;
  z-index: 1;
}
.op-photo {
  position: absolute;
  top: 50%;
  right: -60px;
  height: 90%;
  width: auto;
  transform: translateY(-50%);
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* ---- Ligne de cadrage au-dessus des deux offres ---------- */
/* Centrée, italique discret, posée entre le bandeau logos et les 2 cartes.
   Le sélecteur d'adjacence resserre l'écart vers .cards-duo dont la
   marge supérieure par défaut (150px) serait trop grande ici. */
.cadrage {
  max-width: 820px;
  margin: 100px auto 0;
  padding: 0 40px;
  text-align: center;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}
.cadrage + .cards-duo { margin-top: 40px; }

/* ---- Sous-titre d'offre (cartes + détails) --------------- */
/* Italique discret, centré, max 720px. Couleur posée par contexte. */
.offer-sub {
  max-width: 720px;
  margin: -6px auto 28px;
  text-align: center;
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
}
.section-dark .offer-sub { color: var(--ink-soft); }
.card-light .offer-sub { color: var(--ink-dark-soft); }

/* ---- Hero photo : <img> au lieu du <div> background des autres pages --
   PNG transparent, déjà traité (N&B, fondu circulaire), posé tel quel sur
   le fond noir. On hérite tout le positionnement de .hero-photo (accueil.css
   + for-you.css) et on neutralise juste le background-image hérité, qui
   transparaîtrait à travers le PNG. Aucun filtre / mask / border / shadow. */
img.hero-photo {
  background: none;
  /* Le PNG est carré (2048×2048) : on laisse son ratio intrinsèque jouer.
     width: min(60vw, 800px) et height: auto viennent en cascade de
     for-you.css → le carré occupe la même largeur que la photo de For You. */
}

/* ---- Bloc 3 : 2 capsules blanches côte à côte ------------ */
.cards-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1080px;
  width: 90%;
  margin: 150px auto;
}
.cards-duo .card-light {
  min-height: 320px;
  padding: 56px 48px;
}
.cards-duo .card-content { text-align: center; }
.cards-duo .block-h {
  font-size: clamp(26px, 2.8vw, 36px);
  margin-bottom: 18px;
}
.cards-duo .lead-p {
  text-align: left;
  color: var(--ink-dark-soft);
  max-width: 460px;
  margin: 0 auto 26px;
}
.cards-duo .link-arrow {
  color: var(--ink-dark);
  margin-top: 4px;
}

/* ---- Détails (#operating-partner, #strategy-partner) ----- */
/* Intertitres en gras, à gauche. Listes « Ce que je règle » et
   « Comment je travaille » affichées en clair (pas d'accordéon), un
   point par ligne, à gauche. Seuls H2 et .offer-sub restent centrés. */
.section-dark .dense-h {
  max-width: 780px;
  margin: 44px auto 16px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}

/* Listes denses sous .dense-h. Affichées en clair, un point par ligne,
   séparés par un margin vertical uniquement. Aucune bordure / filet :
   l'aération vient seulement de l'espacement entre items. */
.fix-list {
  max-width: 780px;
  margin: 0 auto 32px;
  padding: 0;
  list-style: none;
}
.section-dark .fix-list li {
  margin-bottom: 22px;
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: left;
}
.section-dark .fix-list li:last-child { margin-bottom: 0; }

/* Intros des détails (OP + SP) : alignement à gauche (le H2 et .offer-sub
   restent centrés via leurs propres règles). Le bloc RAF a sa propre
   logique 2 colonnes (.raf-conf-text scopé) plus bas, il n'utilise pas
   ces règles. */
#operating-partner .lead-p,
#strategy-partner .lead-p {
  max-width: 780px;
  margin: 0 auto 14px;
  text-align: left;
}

/* 1 phrase = 1 paragraphe = 1 ligne, avec un margin entre paragraphes
   pour l'aération. Les groupes du copy deck sont séparés par un margin
   plus large via .intro-block. */
#operating-partner .intro-block,
#strategy-partner .intro-block {
  max-width: 780px;
  margin: 0 auto;
}
#operating-partner .intro-block + .intro-block,
#strategy-partner .intro-block + .intro-block {
  margin-top: 24px;
}
#operating-partner .intro-block .lead-p,
#strategy-partner .intro-block .lead-p {
  margin: 0 0 14px;
  max-width: none;
}
#operating-partner .intro-block .lead-p:last-child,
#strategy-partner .intro-block .lead-p:last-child {
  margin-bottom: 0;
}

/* CTA de section (sous chaque détail) — centré */
.section-cta { margin-top: 44px; text-align: center; }

/* ---- Bloc RDV (#rdv) : largeur de la capsule + espacement ----
   1. .section-dark étant un flex container, .content est un flex item
      avec flex-basis: auto, donc sa largeur s'aligne sur son contenu
      (shrink-fit). Avec un contenu court (H2 + sous-titre), .content
      tombait à ~600-700px et la capsule .gcal-capsule en `width: 100%`
      héritait de cette largeur réduite → capsule plus étroite qu'à
      /for-you (qui a un body de 5 lignes qui pousse .content au max).
      Fix : forcer .content à 100% pour atteindre max-width 900px.
   2. Sans corps de texte, .section-dark imposerait min-height: 60vh
      + 220px de padding → trop d'air. On retire min-height vh et on
      resserre le padding bas. */
#rdv { min-height: auto; padding-top: 80px; padding-bottom: 0; }
#rdv .content { width: 100%; }
/* Réduit le « grand blanc » entre la fin du widget et le bloc suivant
   (qui sinon imposerait son padding-top: 110px par défaut). */
#rdv + section { padding-top: 60px; }

/* ---- Bloc signature « La conférence RAF » (#raf-conference) -- */
/* Grande capsule blanche pleine largeur. Reprend le composant cartouche
   claire (.card-shell + .card-light) du reste du site. Capsule
   rectangulaire (pas carrée) : padding vertical resserré, pas de
   min-height imposée. */
.card-shell.card-shell-wide { max-width: 1280px; }
.card-shell-wide .card-light {
  padding: 40px 60px;
  min-height: auto;
}
.card-shell-wide .pill { margin-top: 0; }

/* CTA centré sous le corps — resserré (vs 44px par défaut). */
#raf-conference .section-cta { margin-top: 22px; }

/* Mise en page interne de la capsule RAF :
   - Capsule compacte (padding modéré), hauteur dictée par le texte seul.
   - Image en position absolute (centre-droit), sortie du flux : elle ne
     pousse aucun élément, ne crée aucun espace vide. Le PNG carré 1:1
     est posé en grande taille, son fondu circulaire transparent sur
     les bords absorbe la superposition avec titres / CTA centrés.
   - Texte au-dessus de l'image via z-index 1 sur .card-content.
   - Titres + sous-titre + CTA restent centrés pleine largeur (default
     de .card-content text-align: center).
   - Le corps de texte (.raf-conf-text) est aligné à gauche et borné à
     50% de la largeur du card-content pour rester sur la partie blanche /
     transparente du PNG (à gauche de son centre opaque). */
#raf-conference .card-content {
  position: relative;
  z-index: 1;
}
#raf-conference .offer-sub { margin-bottom: 18px; }
#raf-conference .raf-conf-text {
  max-width: 50%;
  margin: 14px 0 0;
  text-align: left;
}
#raf-conference .raf-conf-text .intro-block {
  max-width: none;
  margin: 0;
}
#raf-conference .raf-conf-text .intro-block + .intro-block {
  margin-top: 14px;
}
#raf-conference .raf-conf-text .lead-p {
  text-align: left;
  max-width: none;
  margin: 0 0 6px;
  line-height: 1.5;
}
#raf-conference .raf-conf-text .intro-block .lead-p:last-child {
  margin-bottom: 0;
}
#raf-conference .raf-conf-photo {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: clamp(420px, 50vw, 640px);
  pointer-events: none;
  z-index: 0;
}
#raf-conference .raf-conf-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Aucun filtre / opacity / mask / border / shadow : PNG déjà traité. */
}

/* Surtitre cyan : pont visuel avec les mentions RAF de l'accueil.
   Sur fond clair, on prend la variante #00788A (`--accent-dark`),
   en accord avec la règle .card-light .accent. Spécificité (0,3,0)
   pour battre `.card-light .tertiary { color: var(--ink-dark-mut) }`. */
.section-dark .tertiary.raf-eyebrow { color: var(--accent); }
.card-light .tertiary.raf-eyebrow { color: var(--accent-dark); }

/* Traitement RAF inline dans le H2 : reprend l'esprit de .m-raf de
   l'accueil (font-weight 800, letter-spacing -0.04em) en version inline,
   légèrement plus gros que le texte du titre pour l'effet « marque ». */
.raf-mark {
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.section-dark .raf-mark { color: var(--accent); }
.card-light .raf-mark { color: var(--accent-dark); }

/* ---- Mobile ---------------------------------------------- */
@media (max-width: 860px) {
  .cards-duo {
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 96px auto;
    width: 92%;
  }
  .cadrage { padding: 0 22px; margin-top: 70px; }
  .cadrage + .cards-duo { margin-top: 32px; }
  .cards-duo .card-light { padding: 42px 26px; min-height: auto; }
  .card-shell-wide .card-light { padding: 32px 24px; min-height: auto; }
  .section-dark .dense-h { margin: 32px auto 10px; }
  #rdv { padding: 60px 22px 0; }
  /* Mobile bloc RAF : l'image reste en position absolute (en fond),
     atténuée par sa taille réduite et son léger déport hors-cadre vers
     la droite. Le texte reprend la pleine largeur. Le z-index garde le
     texte au-dessus. */
  #raf-conference .raf-conf-photo {
    width: 320px;
    right: -50px;
  }
  #raf-conference .raf-conf-text { max-width: none; }
  /* Mobile : on masque la photo de fond du détail Operating Partner pour
     que le texte reprenne toute la largeur et reste parfaitement lisible.
     Les autres photos (hero, conférence RAF) ne sont PAS concernées. */
  .op-photo { display: none; }
  /* Les <br> structurants des blocs denses (.lead-p, .accordion-*, .block-h)
     sont déjà préservés par for-you.css. On y ajoute .hero-sub-h pour le
     sous-titre du hero For Business, qui s'aère par <br> entre phrases. */
  .hero-sub-h br { display: inline; }
}

/* Ancre de défilement (redirection /for-business#conference-raf depuis l'ex /methode.html#conference) */
#conference-raf { scroll-margin-top: 100px; }