/* ==========================================================
   Fabien Andreacola — refonte v2 (maquette Figma 1449:250)
   Valeurs reprises telles quelles de la maquette (frame 1728 px).
   Les variables seront consolidées une fois le design validé.
   ========================================================== */

@font-face { font-family: 'PP Eiko'; src: url('../fonts/PPEiko-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Eiko'; src: url('../fonts/PPEiko-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Waiting for the Sunrise'; src: url('../fonts/WaitingfortheSunrise-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

.fa-page { background: #0a0603; }
.fa-page *, .fa-page *::before, .fa-page *::after { box-sizing: border-box; }
.fa-page img { max-width: none; }

.fa-container { position: relative; z-index: 1; width: min(1368px, calc(100% - 72px)); margin: 0 auto; }
.fa-container--1280 { width: min(1280px, calc(100% - 72px)); }

.fa-eiko { font-family: 'PP Eiko', Georgia, serif; font-weight: 500; font-style: normal; }

/* ---------- Bouton ---------- */
.fa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 25px; border: 1px solid #2c1f9f; border-radius: 100px; background: #1c1185; color: #fff; font-family: Urbanist, sans-serif; font-weight: 500; font-size: 16px; line-height: 25.6px; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease; }
.fa-btn:hover { background: #2c1f9f; border-color: #3a2cc0; color: #fff; }
.fa-btn img { width: 12px; height: 12px; display: block; }

/* ---------- Badge (avatars + étoiles) ---------- */
.fa-badge { position: relative; display: block; width: 174px; height: 33px; overflow: hidden; flex: none; }
.fa-badge > img { position: absolute; display: block; }

/* ---------- Formes décoratives ---------- */
.fa-shape { position: absolute; display: block; pointer-events: none; z-index: 0; }
.fa-shape--round { width: 512px; height: 512px; right: -144px; }
.fa-shape--top { width: 345.586px; height: 329.195px; left: -225.59px; top: 0; }

/* ---------- 1. Hero ---------- */
.fa-hero { position: relative; overflow: hidden; background: #3727c7 linear-gradient(184.42deg, #3727c7 2.59%, #1b1361 167.73%); padding: 179px 0 120px; color: #fff; }
.fa-hero .fa-shape--round { top: 551px; }
.fa-hero__logo { position: absolute; z-index: 2; top: 27px; right: 39px; width: 48px; height: 48px; display: block; }
.fa-hero__logo img { width: 48px; height: 48px; display: block; object-fit: cover; }
.fa-hero__title { width: 834px; max-width: 100%; margin: 0; font-size: 84px; line-height: 96px; letter-spacing: .84px; color: #fff; }
.fa-hero__row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 28px; }
.fa-hero__proof { display: flex; align-items: center; gap: 45px; padding-left: 8px; margin-top: 8px; }
.fa-hero__text { width: 553px; margin: 0 13px 0 0; font-family: Urbanist, sans-serif; font-weight: 400; font-size: 20px; line-height: 32px; color: #fff; }

/* ---------- 2. Photo ---------- */
.fa-photo { position: relative; overflow: hidden; background: #0a0603; padding-bottom: .65%; }
.fa-photo__img { display: block; width: 100%; height: auto; aspect-ratio: 1994 / 1254; object-fit: cover; }
.fa-photo__fade { position: absolute; left: 0; right: 0; top: 56.28%; height: 43.73%; background: linear-gradient(to bottom, rgba(48,26,5,0) 0%, #090601 84.838%); mix-blend-mode: hard-light; pointer-events: none; }
.fa-photo__note { position: absolute; left: 31.59%; top: 65.58%; width: 7.06%; margin: 0; transform: rotate(-5.17deg); font-family: 'Waiting for the Sunrise', cursive; font-size: .7752vw; line-height: 1.18; text-align: center; color: #fff; }
.fa-photo__stars { position: absolute; left: 33.65%; top: 63.62%; width: 2.75%; aspect-ratio: 47.52 / 15.4; }
.fa-photo__stars img { position: absolute; width: 29.07%; height: auto; display: block; mix-blend-mode: hard-light; }
.fa-photo__stars img:nth-child(1) { left: 0; top: 22%; }
.fa-photo__stars img:nth-child(2) { left: 33.04%; top: 0; }
.fa-photo__stars img:nth-child(3) { left: 70.93%; top: 10%; }
.fa-photo__doodle { position: absolute; left: 57.72%; top: 10.34%; width: 3.52%; display: block; height: auto; }

/* ---------- 3. Bio ---------- */
.fa-bio { position: relative; overflow: hidden; background: #0a0603; color: #fff; padding: 52px 0 184px; }
.fa-bio__col { position: relative; z-index: 1; width: min(768px, calc(100% - 40px)); margin: 0 auto; }
.fa-bio__name { margin: 0; padding-top: 16px; font-family: 'PP Eiko', Georgia, serif; font-weight: 100; font-size: 32px; line-height: 38.4px; color: #fff; }
.fa-bio__title { margin: 13.6px 0 13.4px; font-size: 64px; line-height: 76.8px; letter-spacing: .6px; text-transform: capitalize; color: #fff; }
.fa-bio__text { padding-top: 64px; font-family: Urbanist, sans-serif; font-weight: 300; font-size: 17.6px; line-height: 28.16px; color: #fff; }
.fa-bio__text p { margin: 0 0 28.16px; }
.fa-bio__text p:last-child { margin-bottom: 0; }
.fa-bio__signature { position: absolute; right: 36px; bottom: -137px; width: 126px; height: 121px; object-fit: cover; display: block; }
.fa-bio__circle { position: absolute; z-index: 0; left: -21px; bottom: -41px; width: 445px; height: 525px; overflow: hidden; pointer-events: none; }
.fa-bio__circle img { position: absolute; left: -79.8px; top: 0; width: 524.836px; height: 524.836px; display: block; mix-blend-mode: lighten; }

/* ---------- 4. Services ---------- */
.fa-services { background: #dee7e7; padding: 112px 0; color: #03020a; }
.fa-services__title { width: 704px; max-width: 100%; margin: 0 auto; font-size: 60px; line-height: 72px; letter-spacing: .6px; text-align: center; color: #03020a; }
.fa-cards { display: flex; gap: 40px; padding-top: 100px; }
.fa-card { flex: 0 1 400px; height: 460px; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; background: #e7eeee; overflow: hidden; }
.fa-card__head { padding-bottom: 8px; }
.fa-card__icons { display: flex; align-items: flex-end; justify-content: space-between; width: 333.086px; max-width: 100%; }
.fa-card__icons img, .fa-card__icon { display: block; }
.fa-card__title { margin: 0; font-size: 32px; line-height: 38.4px; letter-spacing: .32px; color: #03020a; }
.fa-card__title--pt { padding-top: 16px; }
.fa-card__stack { display: flex; flex-direction: column; gap: 10px; }
.fa-card__text { margin: 0; font-family: Urbanist, sans-serif; font-weight: 400; font-size: 16px; line-height: 25.6px; color: #03020a; }
.fa-card__text--medium { font-weight: 500; color: #5a6600; }
.fa-hl { color: #5a6600; }
.fa-dark { color: #000; }

/* ---------- 5. CTA final ---------- */
.fa-cta { position: relative; overflow: hidden; background: #3727c7 linear-gradient(189.72deg, #3727c7 15.24%, #1b1361 166.98%); color: #fff; padding: 112px 0; min-height: 670px; }
.fa-cta .fa-shape--round { top: 478.38px; }
.fa-cta__head { position: relative; min-height: 277.195px; }
.fa-cta__title { width: 1021px; max-width: 100%; margin: 0; padding-top: 45px; font-size: 84px; line-height: 92.4px; letter-spacing: .84px; color: #fff; }
.fa-cta__plane { position: absolute; left: 992px; top: 94px; width: 112px; height: 89.914px; display: block; }
.fa-cta__row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 14px; }
.fa-cta__text { width: 730px; margin: 0; font-family: Urbanist, sans-serif; font-weight: 400; font-size: 20px; line-height: 32px; color: #fff; }
.fa-cta__row .fa-btn { width: 339px; margin: 11px 31px 0 0; }

/* ---------- Responsive ---------- */
@media screen and (max-width: 1279px) {
  .fa-cta__plane { left: auto; right: 0; }
  .fa-cards { gap: 24px; }
  .fa-card { padding: 28px; }
}
@media screen and (max-width: 991px) {
  .fa-hero { padding: 140px 0 72px; }
  .fa-hero__title { font-size: 64px; line-height: 72px; }
  .fa-hero__row { flex-direction: column; gap: 32px; }
  .fa-hero__text { width: auto; max-width: 553px; margin: 0; }
  .fa-hero__proof { order: 2; margin-top: 0; padding-left: 0; }
  .fa-bio__title { font-size: 56px; line-height: 64px; }
  .fa-services { padding: 88px 0; }
  .fa-services__title { font-size: 48px; line-height: 58px; }
  .fa-cards { flex-direction: column; padding-top: 56px; }
  .fa-card { flex: none; width: 100%; height: auto; min-height: 300px; gap: 40px; }
  .fa-cta { min-height: 0; padding: 96px 0; }
  .fa-cta__head { min-height: 0; }
  .fa-cta__title { padding-top: 0; padding-right: 96px; font-size: 64px; line-height: 72px; }
  .fa-cta__plane { top: 0; width: 84px; height: auto; }
  .fa-cta__row { flex-direction: column; gap: 32px; margin-top: 32px; }
  .fa-cta__text { width: auto; }
  .fa-cta__row .fa-btn { margin: 0; }
}
@media screen and (max-width: 767px) {
  .fa-container, .fa-container--1280 { width: calc(100% - 40px); }
  .fa-hero { padding: 104px 0 64px; }
  .fa-hero__logo { top: 20px; right: 20px; }
  .fa-hero__title { font-size: 44px; line-height: 52px; letter-spacing: .44px; }
  .fa-hero__text { font-size: 18px; line-height: 29px; }
  .fa-hero__proof { flex-wrap: wrap; gap: 20px; }
  .fa-shape--round { width: 320px; height: 320px; right: -120px; }
  .fa-shape--top { width: 220px; height: auto; left: -140px; }
  .fa-photo__note, .fa-photo__stars, .fa-photo__doodle { display: none; }
  .fa-bio { padding: 40px 0 72px; }
  .fa-bio__name { font-size: 26px; line-height: 32px; }
  .fa-bio__title { font-size: 40px; line-height: 48px; margin-bottom: 20px; }
  .fa-bio__text { padding-top: 40px; font-size: 17px; line-height: 27.2px; }
  .fa-bio__signature { position: static; margin: 24px 0 0 auto; width: 96px; height: auto; }
  .fa-bio__circle { width: 300px; height: 360px; }
  .fa-services { padding: 72px 0; }
  .fa-services__title { font-size: 38px; line-height: 46px; }
  .fa-cards { padding-top: 40px; gap: 16px; }
  .fa-card { padding: 24px; min-height: 0; gap: 32px; }
  .fa-card__title { font-size: 28px; line-height: 34px; }
  .fa-cta { padding: 72px 0; }
  .fa-cta__title { font-size: 44px; line-height: 52px; letter-spacing: .44px; padding-right: 0; }
  .fa-cta__plane { position: static; width: 72px; margin-bottom: 20px; }
  .fa-cta__head { display: flex; flex-direction: column-reverse; align-items: flex-end; }
  .fa-cta__head .fa-cta__title { align-self: stretch; }
  .fa-cta__text { font-size: 18px; line-height: 29px; }
  .fa-cta__row .fa-btn { width: 100%; white-space: normal; text-align: center; }
}

/* Accent de lecture en diagonale (bio, fond sombre) */
.fa-accent { color: var(--_primitives---colors--chartreuse-yellow-dark, #b4cc00); }

/* Photo plus présente sur mobile (recadrage portrait) */
@media screen and (max-width: 767px) {
  .fa-photo__img { aspect-ratio: 4 / 5; object-position: 50% 35%; }
  .fa-photo__fade { top: 62%; height: 38%; }
}

/* Titres animés : masqués jusqu'à ce que GSAP prenne la main (voir js/fa-animations.js) */
html.fa-anim .fa-hero__title, html.fa-anim .fa-services__title, html.fa-anim .fa-cta__title { visibility: hidden; }
/* Marge intérieure du masque pour ne pas couper accents et jambages (g, p, ç), compensée pour garder l'interligne */
.fa-line-mask { padding: 0.12em 0 0.28em; margin: -0.12em 0 -0.28em; }