/* =========================================================================
   GROUPE SUP'FORMATION — Feuille de style dédiée
   Extraite de index.php pour séparer présentation et logique.
   Charte : institution d'enseignement supérieur, sobre et professionnelle.
   ========================================================================= */

:root{
  /* Couleurs institutionnelles */
  --gsf-navy:        #0B2545;   /* bleu nuit — autorité académique */
  --gsf-navy-2:      #13315C;   /* bleu nuit clair — dégradés / hover */
  --gsf-blue:        #1B4F8C;   /* bleu secondaire */
  --gsf-gold:        #B8862E;   /* or — prestige, accent rare */
  --gsf-gold-light:  #D9B15C;
  --gsf-green:       #1B6B3C;   /* vert institutionnel, désaturé */
  --gsf-ink:         #1F2933;   /* texte principal */
  --gsf-slate:       #5A6472;   /* texte secondaire */
  --gsf-bg:          #FFFFFF;
  --gsf-bg-soft:     #F5F6F8;
  --gsf-border:      #E2E6EC;

  /* Typographie */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --shadow-soft: 0 10px 30px rgba(11,37,69,0.08);
  --shadow-mid:  0 18px 44px rgba(11,37,69,0.14);
}

*{box-sizing:border-box}

/* -------------------------------------------------------------------------
   1. Bouton de téléchargement de fiche
   ------------------------------------------------------------------------- */
.telecharger-container{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px;
}

.telecharger-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--gsf-navy);
  color:#fff;
  border:1px solid var(--gsf-navy);
  border-radius:6px;
  padding:14px 26px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  transition:background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.telecharger-btn i{ color:var(--gsf-gold-light); font-size:16px; }

.telecharger-btn:hover{
  background:var(--gsf-navy-2);
  transform:translateY(-2px);
  box-shadow:var(--shadow-mid);
}

/* carouselle  */

:root{
    --card-width:min(60vw,520px);
    --gap1:min(35vw,310px);
    --gap2:min(65vw,560px);
}

.coverflow{
    width:100%;
    height:clamp(260px, 55vw, 560px);

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;
    position:relative;
    perspective:1400px;
}

.coverflow-track{

    position:relative;

    width:100%;
    height:100%;

}

.cover{
    position:absolute;
    width:min(75vw, 520px);
    aspect-ratio:16/10;
    height:auto;
    left:50%;
    top:50%;
    border-radius:20px;
    overflow:hidden;
    transition:.7s ease;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.cover img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:#fff;
}

.cover.active{

    transform:
        translate(-50%,-50%)
        translateZ(200px)
        scale(1.15);

    z-index:5;

}

.cover.left1{
    transform:
    translate(calc(-50% - var(--gap1)),-50%)
    rotateY(40deg)
    scale(.88);
}

.cover.right1{
    transform:
    translate(calc(-50% + var(--gap1)),-50%)
    rotateY(-40deg)
    scale(.88);
}

.cover.left2{
    transform:
    translate(calc(-50% - var(--gap2)),-50%)
    rotateY(50deg)
    scale(.72);
}

.cover.right2{
    transform:
    translate(calc(-50% + var(--gap2)),-50%)
    rotateY(-50deg)
    scale(.72);
}


.cf-btn{

    position:absolute;

    bottom:20px;

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:#0056d6;

    color:white;

    font-size:25px;

    cursor:pointer;

    z-index:100;

}

.prev{

    left:45%;

}

.next{

    right:45%;

}

/* Tablette */
@media (max-width:992px){

    :root{
        --card-width:55vw;
        --gap1:28vw;
        --gap2:46vw;
    }

}

/* Mobile */
@media (max-width:768px){

    :root{
        --card-width:65vw;
        --gap1:24vw;
        --gap2:40vw;
    }
    .cf-btn{
        display:none;
    }

}


/* Petit téléphone */
@media (max-width:480px){

    :root{
        --card-width:72vw;
        --gap1:22vw;
        --gap2:35vw;
    }

}




/* fin carousels  */


/* -------------------------------------------------------------------------
   2. Popup de sélection de fiche
   ------------------------------------------------------------------------- */
.popup-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(11,37,69,0.55);
  z-index:1000;
  justify-content:center;
  align-items:center;
  animation:gsfFadeIn .25s ease;
}
.popup-overlay.active{ display:flex; }

.popup-content{
  background:#fff;
  border-radius:12px;
  padding:32px;
  max-width:420px;
  width:90%;
  box-shadow:0 20px 60px rgba(11,37,69,0.35);
  animation:gsfSlideIn .3s ease;
  border-top:4px solid var(--gsf-gold);
}

.popup-content h3{
  margin:0 0 22px 0;
  color:var(--gsf-navy);
  text-align:center;
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:700;
}

.popup-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}

.option-btn{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--gsf-bg-soft);
  color:var(--gsf-navy);
  border:1px solid var(--gsf-border);
  border-radius:8px;
  padding:13px 16px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:all .2s ease;
}
.option-btn i{
  width:20px;
  text-align:center;
  color:var(--gsf-gold);
  font-size:16px;
}
.option-btn:hover{
  background:var(--gsf-navy);
  color:#fff;
  transform:translateX(4px);
  border-color:var(--gsf-navy);
}
.option-btn:hover i{ color:var(--gsf-gold-light); }

.close-btn{
  width:100%;
  background:transparent;
  color:var(--gsf-slate);
  border:1px solid var(--gsf-border);
  border-radius:8px;
  padding:11px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.close-btn:hover{ background:#fdecec; color:#c0392b; border-color:#f3c9c9; }

@keyframes gsfFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes gsfSlideIn{ from{transform:translateY(-40px);opacity:0} to{transform:translateY(0);opacity:1} }

/* -------------------------------------------------------------------------
   3. Présentation institutionnelle (container22 / cards22)
   ------------------------------------------------------------------------- */
.container22{
  max-width:1200px;
  margin:0 auto;
  padding:56px 16px;
  font-family:var(--font-body);
  background:var(--gsf-bg);
}

.brand22{ text-align:center; margin-bottom:44px; }

.brand22 h1{
  font-family:var(--font-display);
  font-size:2.3rem;
  font-weight:700;
  color:var(--gsf-navy);
  margin-bottom:14px;
  letter-spacing:.3px;
}
.brand22 h1 strong{ color:red; font-weight:700; }

.lead22{
  font-size:1.1rem;
  color:var(--gsf-slate);
  max-width:820px;
  margin:0 auto;
  line-height:1.7;
  font-weight:400;
}

.cards22{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:36px;
}

.card22{
  background:#fff;
  border:1px solid var(--gsf-border);
  border-radius:10px;
  box-shadow:var(--shadow-soft);
  padding:30px 26px;
  position:relative;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-top-color .22s ease;
}
.card22:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-mid);
  border-top-color:var(--gsf-gold);
}

.badge22{
  display:inline-block;
  background:var(--gsf-bg-soft);
  color:var(--gsf-navy);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:16px;
  border:1px solid var(--gsf-border);
}

.blob22{ display:none; } /* décor superflu retiré pour un rendu plus sobre */

.card22 h3{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:700;
  color:var(--gsf-navy);
  margin-bottom:12px;
}
.card22 p{
  font-size:1rem;
  color:var(--gsf-slate);
  margin-bottom:16px;
  line-height:1.6;
}

.features22{ list-style:none; padding:0; margin:0; }
.features22 li{
  position:relative;
  padding-left:26px;
  margin-bottom:10px;
  color:var(--gsf-ink);
  font-weight:500;
  font-size:.96rem;
}
.features22 li::before{
  content:'\f00c';
  font-family:'Font Awesome 5 Free';
  font-weight:900;
  position:absolute;
  left:0;
  top:1px;
  color:var(--gsf-gold);
  font-size:.85rem;
}

@media (max-width:900px){
  .cards22{ grid-template-columns:1fr 1fr; gap:20px; }
  .card22{ padding:24px 20px; }
  .brand22 h1{ font-size:1.7rem; }
}
@media (max-width:600px){
  .cards22{ grid-template-columns:1fr; gap:16px; }
  .brand22 h1{ font-size:1.4rem; }
  .lead22{ font-size:1rem; }
}

/* -------------------------------------------------------------------------
   4. Encart promotionnel (c33promo)
   ------------------------------------------------------------------------- */
.c33promo{
  max-width:820px;
  margin:60px auto;
  padding:38px 44px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--gsf-navy), var(--gsf-navy-2));
  color:#fff;
  box-shadow:var(--shadow-mid);
  text-align:center;
  font-family:var(--font-body);
  border:1px solid var(--gsf-navy);
}

.c33promo h2{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:700;
  margin-bottom:16px;
  color:#fff;
  line-height:1.4;
}

.c33promo p{
  font-size:1.05rem;
  line-height:1.75;
  color:#DCE4F0;
}

.c33cta{
  display:inline-block;
  margin-top:22px;
  font-weight:700;
  font-size:1.05rem;
  color: white;
  background: red;
  padding:13px 28px;
  border-radius:999px;
  letter-spacing:.2px;
}

@media(max-width:768px){
  .c33promo{ padding:28px 22px; }
  .c33promo h2{ font-size:1.4rem; }
  .c33promo p{ font-size:1rem; }
}

/* -------------------------------------------------------------------------
   5. Carrousel institutionnel — "Vie académique" (anciennement c33carousel)
   Signature visuelle : cadre net, ruban de légende sérif, navigation discrète.
   ------------------------------------------------------------------------- */
.c33carousel-container{
  position:relative;
  width:100%;
  max-width:1040px;
  height:420px;
  overflow:hidden;
  margin:60px auto;
  border-radius:8px;
  border:1px solid var(--gsf-border);
  box-shadow:var(--shadow-mid);
  background:var(--gsf-navy);
}

.c33carousel-track{
  display:flex;
  width:200%;
  height:100%;
  animation:c33scroll 28s linear infinite;
}

.c33carousel-slide{
  flex:1 0 25%;
  position:relative;
  height:100%;
}

.c33carousel-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(0.92) contrast(1.03);
  transition:transform 6s ease;
}
.c33carousel-container:hover .c33carousel-slide img{ transform:scale(1.06); }

/* voile de lisibilité pour la légende */
.c33carousel-slide::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(11,37,69,0.85) 0%, rgba(11,37,69,0) 42%);
  pointer-events:none;
}

.c33meta{
  position:absolute;
  bottom:18px;
  left:20px;
  right:20px;
  color:#fff;
  background:transparent;
  padding:0;
  border-radius:0;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.3px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
}
.c33meta::before{
  content:'\f19d'; /* graduation-cap */
  font-family:'Font Awesome 5 Free';
  font-weight:900;
  color:var(--gsf-gold-light);
  font-size:1rem;
}

/* fine bordure dorée en haut du cadre — signature institutionnelle */
.c33carousel-container::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--gsf-gold), var(--gsf-gold-light) 50%, var(--gsf-gold));
  z-index:3;
}

@keyframes c33scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

.c33btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.55);
  background:rgba(11,37,69,0.35);
  color:#fff;
  font-size:1.1rem;
  cursor:pointer;
  z-index:10;
  transition:background .25s ease, border-color .25s ease;
}
.c33btn:hover{ background:var(--gsf-gold); border-color:var(--gsf-gold); color:var(--gsf-navy); }
.c33btn.prev{ left:16px; }
.c33btn.next{ right:16px; }

.c33dots{
  position:absolute;
  bottom:18px;
  right:22px;
  left:auto;
  transform:none;
  display:flex;
  gap:7px;
  z-index:10;
}
.c33dot{
  width:8px;
  height:8px;
  border-radius:2px;
  background:rgba(255,255,255,0.4);
  cursor:pointer;
  transition:background .3s ease, width .3s ease;
}
.c33dot.active{
  background:var(--gsf-gold-light);
  width:22px;
}

@media (max-width:1024px){ .c33carousel-container{ height:360px; } }
@media (max-width:768px){ .c33carousel-container{ height:280px; margin:40px auto;} .c33meta{ font-size:1rem; } }
@media (max-width:480px){ .c33carousel-container{ height:220px; } .c33dots{ right:14px; } }

/* -------------------------------------------------------------------------
   6. Galerie campus — grille de carrousels (carousel5)
   ------------------------------------------------------------------------- */

.carousel-group5{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  justify-content:center;
  gap:2rem;
  max-width:1400px;
  margin:0 auto;
  padding:1.5rem 0 2.5rem;
}

.carousel5{
  width:100%;
  height:260px;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow-soft);
  background:#fff;
  border:1px solid var(--gsf-border);
  transition:box-shadow .25s ease, transform .25s ease;
}
.carousel5:hover{ box-shadow:var(--shadow-mid); transform:translateY(-4px); }

.carousel-track5{
  display:flex;
  height:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

.carousel-item5{ flex:0 0 100%; position:relative; height:100%; }

.carousel-item5 img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(0.95);
}

.carousel-item5::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(11,37,69,0.55), rgba(11,37,69,0) 55%);
}

.carousel-item5 .caption{
  position:absolute;
  bottom:10px;
  left:12px;
  right:12px;
  color:#fff;
  background:transparent;
  padding:0;
  border-radius:0;
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.3px;
  text-shadow:none;
  z-index:2;
}

.carousel-btn5{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.92);
  color:var(--gsf-navy);
  border:1px solid var(--gsf-border);
  border-radius:50%;
  width:34px;
  height:34px;
  cursor:pointer;
  font-size:.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(11,37,69,0.18);
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.carousel-btn5:hover{
  background:var(--gsf-gold);
  color:#fff;
  transform:translateY(-50%) scale(1.06);
}
.carousel-btn5.prev{ left:10px; }
.carousel-btn5.next{ right:10px; }

.carousel-dots5{
  position:absolute;
  bottom:10px;
  left:0; right:0;
  display:flex;
  justify-content:center;
  gap:.35rem;
  z-index:2;
}
.carousel-dot5{
  width:6px;
  height:6px;
  background:rgba(255,255,255,0.55);
  border-radius:50%;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
  border:none;
}
.carousel-dot5.active{
  background:var(--gsf-gold-light);
  transform:scale(1.4);
}

@media (min-width:900px) and (max-width:1399px){ .carousel-group5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:899px){ .carousel-group5{ grid-template-columns:1fr; gap:1.2rem; } .carousel5{ height:230px; } }

/* -------------------------------------------------------------------------
   7. Section partenaires
   ------------------------------------------------------------------------- */
.partners-section{ padding:56px 20px; background:var(--gsf-bg-soft); border-top:1px solid var(--gsf-border); }
.partners-inner{ max-width:1100px; margin:0 auto; text-align:center; }
.partners-inner h2{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:700;
  margin-bottom:8px;
  color:var(--gsf-navy);
}
.partners-sub{ margin-bottom:26px; color:var(--gsf-slate); }
.partners-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
  align-items:center;
  justify-items:center;
}
.partner{
  width:150px;
  height:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--gsf-border);
  border-radius:8px;
  padding:14px;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  opacity:0;
  transform:translateY(8px);
}
.partner img{ max-width:100%; max-height:100%; object-fit:contain; filter:grayscale(0.25); transition:filter .25s ease; }
.partner:hover{ transform:translateY(-5px); box-shadow:var(--shadow-mid); border-color:var(--gsf-gold); }
.partner:hover img{ filter:grayscale(0); }

.partners-grid .partner{ animation:partnersFade .6s ease forwards; }
.partners-grid .partner:nth-child(1){ animation-delay:.05s }
.partners-grid .partner:nth-child(2){ animation-delay:.09s }
.partners-grid .partner:nth-child(3){ animation-delay:.13s }
.partners-grid .partner:nth-child(4){ animation-delay:.17s }
.partners-grid .partner:nth-child(5){ animation-delay:.21s }
.partners-grid .partner:nth-child(6){ animation-delay:.25s }
.partners-grid .partner:nth-child(7){ animation-delay:.29s }
.partners-grid .partner:nth-child(8){ animation-delay:.33s }
.partners-grid .partner:nth-child(9){ animation-delay:.37s }
.partners-grid .partner:nth-child(10){ animation-delay:.41s }
.partners-grid .partner:nth-child(11){ animation-delay:.45s }
.partners-grid .partner:nth-child(12){ animation-delay:.49s }
.partners-grid .partner:nth-child(13){ animation-delay:.53s }

@keyframes partnersFade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

@media(max-width:1100px){ .partners-grid{ grid-template-columns:repeat(5,1fr); } .partner{ width:130px; height:94px; } }
@media(max-width:800px){ .partners-grid{ grid-template-columns:repeat(4,1fr); } .partner{ width:118px; height:88px; } }
@media(max-width:480px){ .partners-grid{ grid-template-columns:repeat(3,1fr); gap:10px; } .partner{ width:98px; height:74px; } .partners-inner h2{ font-size:1.2rem; } }

/* -------------------------------------------------------------------------
   8. Habillage léger des sections déjà stylées dans styles.css
   (services-section / service-card) — reste sans effet si ces classes
   sont redéfinies plus précisément dans styles.css.
   ------------------------------------------------------------------------- */
.section-title{ font-family:var(--font-display); color:var(--gsf-navy); }
.service-card .icon{ color:var(--gsf-gold); font-size:1.8rem; }

/* Etat initial : invisible, légèrement décalé */
.scroll-fade,
.reveal22 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Etat déclenché quand l'élément entre dans le viewport */
.scroll-fade.in-view,
.reveal22.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Délais d'apparition en cascade pour les cartes */
.delay-222.in-view { transition-delay: 0.15s; }
.delay-322.in-view { transition-delay: 0.3s; }


/* -------------------------------------------------------------------------
   Bandeau d'annonce défilant
   ------------------------------------------------------------------------- */
.gsf-ticker{
  width:100%;
  background:red;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  border-bottom:1px solid var(--gsf-gold-light);
}

.gsf-ticker-track{
  display:inline-flex;
  animation:gsf-ticker-scroll 22s linear infinite;
}

.gsf-ticker-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: white;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.03em;
  padding:10px 40px;
  white-space:nowrap;
}
.gsf-ticker-item i{ color:var(--gsf-navy); }

@keyframes gsf-ticker-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-33.333%); }
}

@media (max-width:600px){
  .gsf-ticker-item{ font-size:.8rem; padding:9px 24px; }
}

/* -------------------------------------------------------------------------
   Statistiques de l'établissement
   ------------------------------------------------------------------------- */
.stats22{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
  max-width:1100px;
  margin:0 auto 48px;
  padding:0 16px;
}

.stat22{
  text-align:center;
  padding:28px 16px;
  background:var(--gsf-bg-soft);
  border:1px solid var(--gsf-border);
  border-radius:10px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.stat22:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-soft);
}

.stat22-number{
  display:block;
  font-family:var(--font-display);
  font-size:2.4rem;
  font-weight:800;
  color:var(--gsf-navy);
  line-height:1.1;
}

.stat22-label{
  display:block;
  margin-top:8px;
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:600;
  color:var(--gsf-slate);
  text-transform:uppercase;
  letter-spacing:.05em;
}

@media (max-width:900px){
  .stats22{ grid-template-columns:repeat(2,1fr); }
  .stat22-number{ font-size:2rem; }
}
@media (max-width:480px){
  .stats22{ gap:14px; }
  .stat22{ padding:20px 10px; }
  .stat22-number{ font-size:1.7rem; }

  /* Le 5e élément (dernier) prend toute la ligne et se centre */
  .stat22:nth-child(5){
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }
}