/*
 * Perfect Go Theme — Home CSS
 * Chargé UNIQUEMENT sur la page d'accueil (is_front_page).
 * Styles spécifiques : hero, résultats, services, méthodologie, FAQ, CTA final.
 */

/* ─── Hero KPIs ──────────────────────────────────────────────────────────── */
.hero__kpis { display: flex; gap: 0; padding: 32px 0; border-top: 2px solid var(--noir); }
.hero__kpi { flex: 1; padding-right: 40px; border-right: 2px solid var(--noir); }
.hero__kpi:not(:first-child) { padding-left: 40px; }
.hero__kpi:last-child { border-right: none; }
.hero__kpi-title { font-family: var(--font-title); font-weight: 800; font-size: 22px; margin-bottom: 8px; }
.hero__kpi-title--orange { color: var(--orange); }
.hero__kpi-desc { font-size: 14px; color: #777; }

/* ─── Hero sans photo (version par défaut publiée) ───────────────────────── */
.hero--text-only { padding: 80px var(--pad-h) 56px; }
.hero--text-only .hero__h1 { font-size: 72px; max-width: 860px; }
.hero--text-only .hero__lead { max-width: 580px; }

/* ─── Photo placeholder dans le hero ────────────────────────────────────── */
.hero__photo-placeholder { text-align: center; padding: 32px 20px; }
.hero__photo-placeholder svg { display: block; margin: 0 auto; }
.hero__photo-placeholder__label { font-family: var(--font-title); font-weight: 700; font-size: 11px; color: #999; letter-spacing: 2px; margin-top: 16px; text-transform: uppercase; }
.hero__photo-placeholder__hint { font-size: 11px; color: #bbb; margin-top: 4px; }

/* ─── Photo détourée posée dans l'espace vide à droite du hero ───────────── */
/* Positionnement ABSOLU : hors flux, donc la mise en page du hero est
   strictement identique avec ou sans photo (titre, lead, CTA, KPIs inchangés).
   Aucun cadre, aucun fond : le PNG transparent se pose sur le fond du site. */
.hero { position: relative; }
.hero__portrait {
  position: absolute;
  /* Collée au bord : le bras étant coupé dans la photo source, le débord
     assumé vaut mieux qu'une coupe franche en plein milieu du hero. */
  right: 0;
  /* Cale le bas de la photo sur la bordure haute de la bande KPIs, sinon
     celle-ci, peinte au-dessus, rogne visuellement la photo. */
  bottom: 173px;
  height: 540px;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  z-index: 0;
}
/* Le contenu texte reste au-dessus en cas de recouvrement */
.hero__eyebrow, .hero__h1, .hero__lead, .hero__cta, .hero__kpis { position: relative; z-index: 1; }
/* Sous 1200px la place manque : on masque plutôt que de chevaucher le texte */
/* Tablette / mobile : la photo repasse dans le flux, centrée sous le bloc
   texte. En absolu elle chevaucherait le titre à ces largeurs. */
@media (max-width: 1200px) {
  .hero__portrait {
    position: static;
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 8px auto 32px;
  }
}
@media (max-width: 768px) { .hero__portrait { max-width: 220px; margin: 4px auto 24px; } }


/* ─── Résultats ──────────────────────────────────────────────────────────── */
.resultats-main { background: var(--beige); border: var(--border); padding: 44px; margin-bottom: 2px; }
.resultats-main__grid { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; }
.resultats-chart { background: var(--blanc); border: var(--border); height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.resultats-chart img { width: 100% !important; height: 300px !important; object-fit: cover; object-position: top center; display: block; }
.resultats-main__title { font-family: var(--font-title); font-weight: 800; font-size: 36px; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 18px; color: var(--noir); }
.resultats-main__lead { font-size: 16px; color: #555; line-height: 1.7; margin: 0 0 24px; }
.resultats-stats { display: flex; gap: 24px; padding-top: 24px; border-top: var(--border); }
.resultats-stat__value { font-family: var(--font-title); font-weight: 800; font-size: 32px; color: var(--orange); }
.resultats-stat__label { font-size: 12px; color: #777; }
.chart-hint { font-size: 12px; color: #AAA; margin-top: 12px; display: block; text-align: center; }

/* ─── Cartes cas secondaires ─────────────────────────────────────────────── */
.cas-card { border: var(--border); padding: 36px; background: var(--blanc); }
.cas-card__image { background: var(--beige); border: var(--border); height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; overflow: hidden; }
.cas-card__image img { width: 100% !important; height: 220px !important; object-fit: cover; object-position: top center; display: block; }
.cas-card__image-hint { font-size: 12px; color: #AAA; margin: 0; }
/* Filet de sécurité : img posée directement dans .cas-card sans wrapper */
.cas-card > img { width: 100% !important; height: 220px !important; object-fit: cover; object-position: top center; display: block; margin-bottom: 24px; border: var(--border); }
.cas-card__title { font-family: var(--font-title); font-weight: 800; font-size: 24px; margin: 10px 0 14px; color: var(--noir); }
.cas-card__desc { font-size: 14px; color: #555; line-height: 1.6; margin: 0; }

/* ─── Cards services homepage ────────────────────────────────────────────── */
.service-card { background: var(--blanc); padding: 36px 32px; border: var(--border); }
.service-card__num { font-family: var(--font-title); font-weight: 800; font-size: 10px; color: #777; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.service-card__title { font-family: var(--font-title); font-weight: 800; font-size: 24px; margin: 0 0 14px; color: var(--noir); }
.service-card__desc { font-size: 15px; color: #555; line-height: 1.6; margin: 0 0 24px; }
.service-card__link { font-size: 14px; font-weight: 600; color: var(--orange); }
.service-card__link:hover { text-decoration: underline; }

/* ─── Références placeholder ─────────────────────────────────────────────── */
.references-placeholder { background: var(--beige); border: var(--border); padding: 52px; text-align: center; }
.references-placeholder__sub { font-size: 16px; color: #777; margin-bottom: 14px; }
.references-placeholder__cta { font-family: var(--font-title); font-weight: 700; font-size: 17px; color: var(--orange); }

/* ─── Méthodologie ───────────────────────────────────────────────────────── */
.methodology-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.methodology-step__num { font-family: var(--font-title); font-weight: 800; font-size: 52px; color: var(--orange); line-height: 1; margin-bottom: 14px; }
.methodology-step__title { font-family: var(--font-title); font-weight: 800; font-size: 19px; margin: 0 0 10px; }
.methodology-step__desc { font-size: 14px; color: #555; line-height: 1.6; }

/* ─── CTA section finale (fond noir) ────────────────────────────────────── */
.cta-section { padding: 88px var(--pad-h); background: var(--noir); color: var(--blanc); text-align: center; border-bottom: var(--border); }
.cta-section h2 { font-family: var(--font-title); font-weight: 800; font-size: 52px; line-height: 1.1; letter-spacing: -.04em; margin: 0 0 24px; }
.cta-section p { font-size: 17px; color: #AAA; margin: 0 0 40px; }

/* ─── Responsive homepage ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__h1 { font-size: 56px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__image-wrap { display: none; }
  .methodology-grid { grid-template-columns: repeat(2, 1fr); }
  .resultats-main__grid { grid-template-columns: 1fr; }
  .cta-section h2 { font-size: 40px; }
}

@media (max-width: 768px) {
  .hero__h1 { font-size: 42px; }
  .hero--text-only .hero__h1 { font-size: 42px; }
  .hero__kpis { flex-direction: column; gap: 24px; }
  .hero__kpi { border-right: none; border-bottom: var(--border); padding-right: 0; padding-bottom: 24px; }
  .hero__kpi:not(:first-child) { padding-left: 0; }
  .hero__kpi:last-child { border-bottom: none; padding-bottom: 0; }
  .methodology-grid { grid-template-columns: 1fr; }
  .resultats-main { padding: 24px; }
  .cta-section h2 { font-size: 28px; }
}

/* ─── Photo dans le cadre du template complet ────────────────────────────── */
/* .hero__image-wrap img est en object-fit:cover : rognerait le portrait.
   Sélecteur plus spécifique -> contain, calé en bas du cadre. */
.hero__image-wrap .hero__framed {
  width: 100%;
  height: 440px;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* ─── Variante cercle (hero accueil) ─────────────────────────────────────── */
/* Le portrait est cadré dans un disque : object-fit:cover remplit le cercle,
   object-position:top garde le visage. Le fond beige du disque donne sa forme
   au PNG détouré — sans lui, aucun cercle ne serait visible. */
.hero__circle {
  position: absolute;
  right: calc(var(--pad-h) + 60px);
  bottom: 200px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: var(--beige);
  overflow: hidden;
  z-index: 0;
}
.hero__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
@media (max-width: 1200px) {
  .hero__circle {
    position: static;
    width: 260px;
    height: 260px;
    margin: 8px auto 32px;
  }
}
@media (max-width: 768px) { .hero__circle { width: 200px; height: 200px; margin: 4px auto 24px; } }

/* ─── Version encadrée (template) : cadre au format de la photo ──────────── */
/* Classe posée sur le brouillon uniquement : les pages du thème gardent
   leur grille 1fr 340px d'origine.
   aspect-ratio = ratio natif du portrait (848/1104) : la photo remplit
   exactement le cadre — ni bande vide, ni rognage. Colonne réduite à 380px
   pour raccourcir le cadre et éviter d'avoir à scroller. */
.hero--photo-framed .hero__grid { grid-template-columns: 1fr 380px; align-items: start; }
.hero--photo-framed .hero__image-wrap {
  height: auto;
  aspect-ratio: 848 / 1104;
  /* Le sur-titre est hors de .hero__grid : sans ce décalage, le cadre démarre
     45px plus bas que lui (13px de hauteur + 32px de marge) et paraît décroché
     du bloc texte. On le remonte pour aligner les deux hauts. */
  margin-top: -45px;
}
.hero--photo-framed .hero__image-wrap .hero__framed {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ─── Version encadrée : responsive ──────────────────────────────────────── */
/* Le thème masque .hero__image-wrap sous 1024px ; on la réaffiche pour ce
   brouillon seulement, centrée sous le texte, en annulant la remontée. */
@media (max-width: 1024px) {
  .hero--photo-framed .hero__grid { grid-template-columns: 1fr; }
  .hero--photo-framed .hero__image-wrap {
    display: flex;
    margin: 8px auto 0;
    max-width: 320px;
    width: 100%;
  }
}
@media (max-width: 768px) { .hero--photo-framed .hero__image-wrap { max-width: 240px; } }

/* ─── Ordre mobile : la photo passe APRÈS les CTA ────────────────────────── */
/* Elle est le 1er enfant du hero : sans cela, elle s'afficherait au-dessus du
   titre et repousserait le H1 sous la ligne de flottaison. */
@media (max-width: 1200px) {
  .hero--text-only { display: flex; flex-direction: column; }
  .hero--text-only .hero__portrait,
  .hero--text-only .hero__circle { order: 2; }
  .hero--text-only .hero__kpis { order: 3; }
}