/* ============================================================
   BIFA INSTITUTE — Pages dédiées
   Page du Directeur Général et page « Qui sommes-nous ».
   S'appuie sur les variables de style.css ; aucune règle
   existante n'est modifiée.
   ============================================================ */

/* ------------------------------------------------------------
   PORTRAIT — bandeau d'ouverture
   ------------------------------------------------------------ */
.dg-hero{
  position:relative;color:#fff;
  padding:calc(var(--bn-h,74px) + clamp(48px,5.4vw,84px)) 0 clamp(48px,5.4vw,80px);
  background:
    radial-gradient(900px 560px at 82% 8%, rgba(16,144,224,.26), transparent 60%),
    radial-gradient(760px 520px at 4% 72%, rgba(0,64,112,.5), transparent 62%),
    linear-gradient(155deg,#062E4D 0%,#06263F 46%,#041B2E 100%);
}
.dg-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,5vw,76px);align-items:center;
}
.dg-hero .eyebrow{color:var(--blue)}
.dg-hero .eyebrow::before{background:var(--blue)}
.dg-hero h1{
  font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:1.03;
  letter-spacing:-.024em;color:#fff;margin:14px 0 0;
}
.dg-tagline{
  margin-top:clamp(22px,2.6vw,32px);
  font-family:var(--font-display);font-size:clamp(1.08rem,2vw,1.42rem);
  line-height:1.55;color:#DCE7F2;max-width:34ch;
}
.dg-tagline em{color:var(--blue-soft);font-style:italic}

.dg-facts{
  list-style:none;margin:clamp(28px,3.2vw,40px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:0;
}
.dg-facts li{
  padding:0 clamp(18px,2vw,26px);
  border-left:1px solid rgba(255,255,255,.16);
}
.dg-facts li:first-child{padding-left:0;border-left:0}
.dg-facts b{
  display:block;font-family:var(--font-display);font-size:1.22rem;
  color:var(--blue-soft);font-weight:600;line-height:1.2;
}
.dg-facts span{display:block;font-size:.78rem;color:var(--muted-light);margin-top:5px;max-width:18ch}

/* Cadre de portrait : proportions fixes, l'image s'y adapte quel
   que soit son format d'origine. */
.dg-portrait{
  margin:0;position:relative;border-radius:16px;overflow:hidden;
  aspect-ratio:4/5;
  background:#0A2540;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
}
.dg-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.dg-portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(4,27,46,.45));
}

/* ------------------------------------------------------------
   BIOGRAPHIE
   ------------------------------------------------------------ */
.dg-bio{display:grid;grid-template-columns:1fr 320px;gap:clamp(32px,4.6vw,68px);align-items:start}
.dg-bio-main{max-width:68ch}
.dg-chapo{
  font-family:var(--font-display);font-size:clamp(1.14rem,2.1vw,1.44rem);
  line-height:1.6;color:var(--navy-800);margin-bottom:clamp(28px,3.2vw,40px);
  padding-bottom:clamp(24px,2.8vw,32px);border-bottom:1px solid var(--line-light);
}
.dg-bio-main h2{
  font-size:clamp(1.24rem,2.2vw,1.6rem);margin:clamp(30px,3.4vw,42px) 0 12px;
  color:var(--navy-800);
}
.dg-bio-main h2:first-of-type{margin-top:0}
.dg-bio-main p{color:var(--muted);line-height:1.8;font-size:1rem}
.dg-quote{
  margin:clamp(30px,3.6vw,44px) 0;padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,36px);
  border-left:3px solid var(--blue);background:var(--paper);border-radius:0 12px 12px 0;
  font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.34rem);
  line-height:1.55;color:var(--navy-800);font-style:italic;
}

.dg-aside{
  position:sticky;top:calc(var(--bn-h,74px) + 24px);
  background:var(--paper);border:1px solid var(--line-light);border-radius:14px;
  padding:clamp(22px,2.6vw,30px);
}
.dg-aside-t{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#0F6FA6;margin-bottom:16px;
}
.dg-aside dl{margin:0}
.dg-aside dl > div{padding:12px 0;border-bottom:1px solid var(--line-light)}
.dg-aside dl > div:last-child{border-bottom:0}
.dg-aside dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dg-aside dd{margin:5px 0 0;font-size:.94rem;font-weight:600;color:var(--navy-800);line-height:1.4}

/* ------------------------------------------------------------
   CAPSULE VIDÉO — emplacement en attente
   ------------------------------------------------------------ */
.dg-video{
  max-width:900px;margin-inline:auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-950));
  border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;
}
.dg-video iframe{width:100%;height:100%;border:0;display:block}
.dg-video-attente{text-align:center;padding:28px;max-width:44ch}
.dg-video-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:66px;height:66px;border-radius:50%;margin-bottom:18px;
  border:1px solid rgba(41,171,226,.42);color:var(--blue);font-size:1.3rem;
}
.dg-video-attente p{color:var(--muted-light);font-size:.9rem;line-height:1.7;margin:0}
.dg-video-attente b{display:block;color:#fff;font-size:1.05rem;margin-bottom:8px;font-family:var(--font-display)}
.dg-video-attente code{
  font-family:ui-monospace,monospace;font-size:.84em;
  background:rgba(255,255,255,.08);padding:2px 6px;border-radius:4px;color:var(--blue-soft);
}

/* ------------------------------------------------------------
   SUITE
   ------------------------------------------------------------ */
.dg-next{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,3.4vw,48px);align-items:center}
.dg-next .lead{max-width:52ch}
.dg-next-acts{display:flex;flex-direction:column;gap:12px;min-width:230px}
.dg-next-acts .btn{justify-content:center}

@media (max-width:980px){
  .dg-hero-grid{grid-template-columns:1fr;gap:34px}
  .dg-portrait{max-width:360px;margin-inline:auto}
  .dg-bio{grid-template-columns:1fr}
  .dg-aside{position:static}
  .dg-next{grid-template-columns:1fr}
  .dg-next-acts{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:560px){
  .dg-facts{flex-direction:column;gap:14px}
  .dg-facts li{padding:0 0 0 16px;border-left:1px solid rgba(255,255,255,.16)}
  .dg-facts li:first-child{padding-left:16px;border-left:1px solid rgba(255,255,255,.16)}
  .dg-facts span{max-width:none}
  .dg-next-acts{flex-direction:column}
  .dg-next-acts .btn{width:100%}
  /* Le lien de la légende (« Découvrir le fondateur… ») est en
     white-space:nowrap : sur petit écran il déborde du cadre.
     On l'autorise à passer à la ligne sous 560px uniquement,
     l'affichage desktop reste strictement inchangé. */
  .equipe-photo figcaption a{white-space:normal}
}

/* .btn-ghost n'existe pas dans le système du site institutionnel
   (il connaît btn-ghost-light et btn-ghost-dark, tous deux calibrés
   pour des fonds sombres). On le définit ici pour les fonds clairs. */
.btn-ghost{
  border:1px solid var(--line-strong,#C5D2DE);
  color:var(--navy-800);background:transparent;
  transition:border-color .3s,background .3s,color .3s,transform .3s var(--ease);
}
.btn-ghost:hover{
  border-color:var(--navy-800);background:var(--navy-800);color:#fff;transform:translateY(-2px);
}
.dg-bio-main a{color:#0F6FA6;font-weight:600}

/* ------------------------------------------------------------
   RÉSEAU D'ALUMNI
   ------------------------------------------------------------ */
.alu-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,24px);
}
.alu-card{
  position:relative;padding:clamp(26px,3vw,36px);
  background:var(--paper);border:1px solid var(--line-light);border-radius:14px;
  transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;
}
.alu-card:hover{transform:translateY(-4px);border-color:#C6DCEC;box-shadow:var(--shadow-md)}
.alu-n{
  display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  color:var(--blue);line-height:1;margin-bottom:16px;
}
.alu-card h3{font-size:clamp(1.02rem,1.7vw,1.16rem);color:var(--navy-800);margin-bottom:10px;line-height:1.35}
.alu-card p{color:var(--muted);font-size:.94rem;line-height:1.7;margin:0}

/* Appel à l'action en pied de section, dans la continuité du contenu */
.sec-cta-page{
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line-light);
  display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;
}
.sec-cta-page p{margin:0;font-size:1rem;color:var(--navy-800);font-weight:500}
.on-dark .sec-cta-page{border-top-color:var(--line-dark)}
.on-dark .sec-cta-page p{color:#fff}

/* Cadres de témoignage, sans photo — repris de la page événement */
.alu .temoin-frame{
  height:104px;border-radius:14px 14px 0 0;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-950));
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.alu .temoin-frame::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 140% at 12% 0%,rgba(41,171,226,.22),transparent 60%),
             repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 22px);
}
.alu .temoin-frame .initials{
  position:relative;z-index:1;font-family:var(--font-display);
  font-size:1.9rem;color:var(--blue-soft);letter-spacing:.06em;
}

@media (max-width:820px){
  .alu-grid{grid-template-columns:1fr}
  .sec-cta-page{flex-direction:column;align-items:stretch}
  .sec-cta-page .btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------------
   QUI SOMMES-NOUS — bandeau de preuve
   ------------------------------------------------------------ */
.band-preuve{background:#062E4D;color:#fff}
.qsn-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;border-block:1px solid rgba(255,255,255,.14);
}
.qsn-stats > div{
  padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,26px);
  border-left:1px solid rgba(255,255,255,.14);
}
.qsn-stats > div:first-child{border-left:0}
.qsn-stats b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--blue-soft);line-height:1;
}
.qsn-stats span{display:block;font-size:.82rem;color:var(--muted-light);margin-top:10px;line-height:1.5}
/* Les logos partenaires reprennent leurs couleurs d'origine, sur
   fond blanc : c'est la seule façon de rendre justice à des marques
   comme Microsoft ou PMI. Le bandeau bascule donc en clair sous les
   chiffres, et le défilement continu est conservé. */
.band-preuve .partenaires{
  /* Bloc blanc posé dans le conteneur — un débord pleine largeur en
     -50vw introduisait un défilement horizontal. */
  margin:clamp(30px,3.4vw,44px) 0 0;
  padding:clamp(26px,3vw,38px) 0 clamp(22px,2.6vw,32px);
  background:#fff;border-radius:16px;
  box-shadow:0 1px 2px rgba(6,46,77,.05),0 26px 50px -36px rgba(6,46,77,.4);
}
.qsn-partners-t{
  margin:0;text-align:center;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#0F6FA6;
}
.band-preuve .partners-marquee{margin-top:20px}
.band-preuve .partner-logo{background:#fff;border:1px solid #E6EDF4}
.band-preuve .partner-logo img{filter:none;opacity:1}
.band-preuve .partner-logo .fallback{color:#5B7086}
@media (max-width:820px){
  .qsn-stats{grid-template-columns:repeat(2,1fr)}
  .qsn-stats > div:nth-child(odd){border-left:0}
  .qsn-stats > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
}

/* ------------------------------------------------------------
   PHOTO D'ÉQUIPE
   ------------------------------------------------------------ */
.equipe-photo{
  margin:0;border-radius:16px;overflow:hidden;
  border:1px solid var(--line-light);
  box-shadow:0 1px 2px rgba(6,46,77,.05),0 34px 64px -40px rgba(6,46,77,.45);
  background:#EEF3F8;
}
.equipe-photo img{
  width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;
}
.equipe-photo figcaption{
  padding:16px clamp(18px,2.2vw,26px);
  font-size:.86rem;color:var(--muted);background:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.equipe-photo figcaption a{color:#0F6FA6;font-weight:600;text-decoration:none;white-space:nowrap}
.equipe-photo figcaption a:hover{text-decoration:underline}