/* =====================================================================
   Finesty — « Derrière Finesty » (equipe.css + equipe.js, page À propos, #equipe).
   Bleu nuit. TEXTE À GAUCHE. YAGO détouré, GRAND & CINÉMATIQUE, collé aux bords BAS + DROITE de la section, passant
   derrière le texte. Au défilement il ÉMERGE du bord bas en montant (piloté par le scroll, réversible : il redescend
   dans le bord quand on remonte). Titre en apparition mot à mot (via inner-fx, comme l'accueil), nom/rôle en
   fondu-flou, grande description en REVEAL lumineux au scroll. Aucune lueur derrière l'image.
   Sans JS / mouvement réduit : Yago posé au bord bas, texte plein.
   ===================================================================== */
#equipe.fy-section {
  --eq-pad: clamp(96px, 10vw, 144px);
  --eq-edge: max(20px, calc((100vw - 1160px) / 2));
  position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF;
  background: linear-gradient(180deg, #16313A 0%, #112A31 100%) !important;
  padding-top: var(--eq-pad) !important; padding-bottom: var(--eq-pad) !important;
}
/* Fond animé : « soie » WebGL du site (FyCtBg.soie via equipe.js) — l'hôte insère un canvas en z-index -1.
   Repli automatique (sans WebGL / mouvement réduit) : le dégradé bleu nuit de la section. */
#equipe > canvas { z-index: -1 !important; }

/* ---- TEXTE (gauche) ---- */
#equipe .fy-title { color: #FFFFFF !important; font-size: clamp(38px, 4.2vw, 58px) !important; line-height: 1.02 !important; letter-spacing: -.02em; }
#equipe .fy-title .fy-gold { color: var(--fy-gold, #DAAE51) !important; }
/* pendant l'apparition mot à mot (inner-fx reconstruit le titre en texte brut et perd le span .fy-gold),
   « Finesty » = dernier mot → on le garde doré pour éviter le flash blanc avant restauration du HTML d'origine */
#equipe .fy-title .fy-ifx-w:last-of-type { color: var(--fy-gold, #DAAE51) !important; -webkit-text-fill-color: var(--fy-gold, #DAAE51); }
#equipe .fy-about-person__name { margin: 30px 0 26px !important; font: 600 clamp(24px, 2.2vw, 30px)/1.1 "Kanit", sans-serif !important; color: #DAAE51 !important; }
#equipe .fy-about-person__role {
  display: table !important; margin-top: 14px !important; padding: 9px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font: 500 14px/1.3 "Kanit", sans-serif !important; letter-spacing: .01em; color: rgba(255, 255, 255, 0.85) !important;
}
#equipe .fy-about-text p { font-size: 17.5px !important; line-height: 1.75 !important; color: rgba(255, 255, 255, 0.88) !important; margin: 0 0 20px !important; }
#equipe .fy-about-text p:first-child { font-size: 19px !important; }
/* REVEAL lumineux au scroll de la grande description (comme avant) — sûr pour la traduction : on ne découpe pas le texte */
#equipe.is-js .fy-about-text p {
  color: transparent !important; -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF var(--r, 0%), rgba(255, 255, 255, 0.26) calc(var(--r, 0%) + 14%), rgba(255, 255, 255, 0.26) 100%);
  -webkit-background-clip: text; background-clip: text;
}
#equipe .fy-eq-cut { display: block; width: 100%; height: auto; max-width: none !important; transform-origin: 50% 100%; will-change: transform; }

/* ---- DESKTOP : texte à gauche (au-dessus), Yago grand en bas-droite, derrière le texte ---- */
@media (min-width: 1025px) {
  #equipe .fy-about-person {
    position: relative; display: block; overflow: hidden;
    min-height: clamp(580px, 78vh, 880px);
    margin: calc(-1 * var(--eq-pad)) calc(-1 * var(--eq-edge)) !important;
    padding: var(--eq-pad) var(--eq-edge);
  }
  /* voile de lisibilité sous le texte (bleu nuit → transparent), pas une lueur */
  #equipe .fy-about-person::before {
    content: ""; position: absolute; inset: 0 48% 0 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, #122A31 0%, rgba(18, 42, 49, 0.82) 46%, rgba(18, 42, 49, 0) 100%);
  }
  #equipe .fy-about-person__body { position: relative; z-index: 2; max-width: min(50%, 560px); padding: 8px 0; }
  #equipe .fy-about-person__photo {
    position: absolute; right: 0; bottom: 0; z-index: 0; margin: 0 !important;
    width: min(76%, 1120px); max-width: none !important; line-height: 0;
  }
}

/* ---- TABLETTE / MOBILE : Yago au-dessus du texte, émerge du bas de sa zone ---- */
@media (max-width: 1024px) {
  #equipe .fy-about-person { display: flex; flex-direction: column; }
  #equipe .fy-about-person__body { order: 1; position: relative; z-index: 2; max-width: 100%; }
  /* portrait EN BAS de la section, PAS derrière le texte (bloc à part), collé au bord bas */
  #equipe .fy-about-person__photo {
    order: 2; position: relative; overflow: hidden; z-index: 1;
    width: calc(100% + 40px); margin: 24px -20px calc(-1 * var(--eq-pad)) -20px !important;
    min-height: clamp(340px, 64vw, 480px); display: flex; align-items: flex-end; justify-content: center;
  }
  #equipe .fy-eq-cut { width: min(116%, 680px); }
}
@media (max-width: 767px) {
  #equipe .fy-about-person__photo { min-height: clamp(300px, 76vw, 430px); }
  #equipe .fy-eq-cut { width: min(126%, 600px); }
  #equipe .fy-about-text p, #equipe .fy-about-text p:first-child { font-size: 16.5px !important; }
}

/* ---- sans mouvement : Yago posé, description pleine ---- */
@media (prefers-reduced-motion: reduce) {
  #equipe.is-js .fy-eq-cut { transform: none !important; }
  #equipe.is-js .fy-about-text p { color: rgba(255, 255, 255, 0.88) !important; -webkit-text-fill-color: currentColor; background: none; }
  #equipe .fy-eq-aura::before, #equipe .fy-eq-aura::after { animation: none !important; }
}