/* =========================================================
   OLOUOMO LAB — Page « Formation IA & bureautique »
   Styles spécifiques à la page (préfixe .fia-)
   Reprend les variables du design system défini dans style.css
   ========================================================= */

/* ---------- hero ---------- */
.fia-hero{
  background:radial-gradient(120% 100% at 15% 0%, var(--navy-2) 0%, var(--ink) 60%);
  color:#fff;padding:4.5rem 2rem 4rem;position:relative;overflow:hidden;
}
.fia-hero::after{
  content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
}
.fia-hero-grid{
  position:relative;z-index:2;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;
}
.fia-hero h1{font-size:clamp(2rem,4vw,3rem);line-height:1.14;color:#fff;margin-bottom:1.1rem;}
.fia-hero h1 span{color:var(--amber);}
.fia-hero .fia-sub{color:rgba(255,255,255,.74);font-size:1.05rem;max-width:56ch;margin-bottom:1.8rem;}
.fia-trust{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.55);margin-top:1.6rem;}
.fia-trust span{display:flex;align-items:center;gap:.4rem;}
.fia-trust i{color:var(--amber);}

/* bandeau « animé par » */
.fia-host{
  display:inline-flex;align-items:center;gap:.9rem;margin-top:1.6rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:.45rem 1.3rem .45rem .45rem;
}
.fia-host img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--amber);}
.fia-host b{display:block;font-family:'Space Grotesk',sans-serif;font-size:.95rem;color:#fff;line-height:1.3;}
.fia-host span{font-size:.78rem;color:rgba(255,255,255,.62);}

/* carte informations pratiques */
.fia-info{
  background:rgba(255,255,255,.05);border:1px solid rgba(232,169,59,.28);
  border-radius:14px;padding:1.7rem;backdrop-filter:blur(6px);
}
.fia-info h2{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;
  color:var(--amber);text-transform:uppercase;margin-bottom:1.1rem;
}
.fia-info-row{display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.1);}
.fia-info-row:last-of-type{border-bottom:0;}
.fia-info-row i{
  width:40px;height:40px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:var(--amber);font-size:1rem;
}
.fia-info-row b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1rem;color:#fff;}
.fia-info-row small{font-size:.83rem;color:rgba(255,255,255,.6);}

/* compte à rebours */
.fia-cd{display:flex;gap:.6rem;margin-top:1.3rem;}
.fia-cd div{
  flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:9px;padding:.7rem .2rem;text-align:center;
}
.fia-cd b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.4rem;color:var(--amber);line-height:1.1;}
.fia-cd span{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);}

/* ---------- bandeau chiffres ---------- */
.fia-strip{background:var(--ink);padding:0;}
.fia-strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.09);}
.fia-strip-in > div{background:var(--ink);padding:1.6rem 1rem;text-align:center;}
.fia-strip-in b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.6rem;color:var(--amber);line-height:1.1;}
.fia-strip-in span{font-size:.82rem;color:rgba(255,255,255,.55);}

/* ---------- outils bureautiques ---------- */
.fia-tool-ico{
  width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:#fff;margin-bottom:1rem;
}
.fia-word{background:#185abd;}
.fia-excel{background:#107c41;}
.fia-ppt{background:#c43e1c;}
.fia-note{background:#7719aa;}

/* ---------- programme (frise) ---------- */
.fia-timeline{max-width:900px;margin:0 auto;list-style:none;position:relative;padding:0;}
.fia-timeline::before{
  content:"";position:absolute;left:74px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--amber),rgba(232,169,59,.25),transparent);
}
.fia-tl{display:grid;grid-template-columns:74px 1fr;gap:2rem;padding-bottom:1.6rem;}
.fia-tl-time{
  font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--amber);
  text-align:right;padding-top:1rem;
}
.fia-tl-body{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:1.1rem 1.4rem;position:relative;
}
.fia-tl-body::before{
  content:"";position:absolute;left:-33px;top:1.35rem;width:11px;height:11px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 4px rgba(232,169,59,.18);
}
.fia-tl-body h3{color:#fff;font-size:1rem;margin-bottom:.25rem;}
.fia-tl-body p{color:rgba(255,255,255,.58);font-size:.9rem;margin:0;}

/* ---------- formateur ---------- */
.fia-trainer{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:center;max-width:1180px;margin:0 auto;padding:0 2rem;}
.fia-photo{position:relative;}
.fia-photo-frame{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--navy);}
.fia-photo-frame img{width:100%;display:block;}
.fia-photo-frame::after{
  content:"";position:absolute;inset:auto 0 0 0;height:40%;
  background:linear-gradient(180deg,transparent,rgba(18,21,28,.88));
}
.fia-photo-cap{position:absolute;left:1.3rem;right:1.3rem;bottom:1.1rem;z-index:2;color:#fff;}
.fia-photo-cap b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.25rem;}
.fia-photo-cap span{font-size:.85rem;color:var(--amber);}
.fia-photo-badge{
  position:absolute;right:-12px;top:1.2rem;z-index:3;background:var(--amber);color:var(--ink);
  border-radius:10px;padding:.7rem 1rem;text-align:center;box-shadow:var(--shadow-md);border:3px solid var(--paper);
}
.fia-photo-badge b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.4rem;line-height:1;}
.fia-photo-badge span{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:block;max-width:10ch;line-height:1.3;margin-top:.15rem;}

.fia-creds{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.8rem;}
.fia-creds li{position:relative;padding-left:1.9rem;font-size:.97rem;color:var(--text);}
.fia-creds li i{position:absolute;left:0;top:.25rem;color:var(--amber-dim);}
.fia-quote{
  border-left:3px solid var(--amber);padding:.3rem 0 .3rem 1.2rem;margin-top:1.6rem;
  font-style:italic;color:var(--text);font-size:1.02rem;
}

/* ---------- galerie ---------- */
.fia-gal{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem;max-width:1180px;margin:0 auto;padding:0 2rem;}
.fia-gal figure{position:relative;margin:0;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);background:var(--ink);}
.fia-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.fia-gal figure:hover img{transform:scale(1.04);}
.fia-gal figure::after{
  content:"";position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(180deg,transparent,rgba(18,21,28,.85));
}
.fia-gal figcaption{position:absolute;left:1.3rem;right:1.3rem;bottom:1rem;z-index:2;color:#fff;}
.fia-gal figcaption b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1rem;line-height:1.25;}
.fia-gal figcaption span{font-size:.83rem;color:rgba(255,255,255,.75);}
.fia-gal-wide{grid-column:span 12;aspect-ratio:2/1;}
.fia-gal-a{grid-column:span 7;height:400px;}
.fia-gal-b{grid-column:span 5;height:400px;}
.fia-gal-b img{object-position:center 35%;}

/* ---------- bandeau places limitées ---------- */
.fia-limited{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.5rem;
  background:rgba(232,169,59,.12);border:1px dashed rgba(232,169,59,.5);
  color:var(--amber);font-size:.88rem;font-weight:600;padding:.6rem 1.2rem;border-radius:999px;
}

/* ---------- bouton flottant mobile ---------- */
.btn.fia-sticky{
  position:fixed;left:1rem;right:1rem;bottom:1rem;width:auto;z-index:80;display:none;
  justify-content:center;box-shadow:0 12px 30px rgba(18,21,28,.35);
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .fia-hero-grid{grid-template-columns:1fr;gap:2.4rem;}
  .fia-trainer{grid-template-columns:1fr;gap:2.2rem;}
}
@media (max-width:760px){
  .fia-hero{padding:3.2rem 1.2rem;}
  .fia-strip-in{grid-template-columns:repeat(2,1fr);}
  .fia-gal{padding:0 1.2rem;gap:.9rem;}
  .fia-gal-wide{aspect-ratio:16/10;}
  .fia-gal-a,.fia-gal-b{grid-column:span 12;height:260px;}
  .fia-trainer{padding:0 1.2rem;}
  .fia-timeline::before{left:7px;}
  .fia-tl{grid-template-columns:1fr;gap:.3rem;padding-left:2rem;}
  .fia-tl-time{text-align:left;padding-top:0;}
  .fia-tl-body::before{left:-28px;top:.5rem;}
  .btn.fia-sticky{display:flex;}
  body{padding-bottom:5rem;}
}