/* ═══════════════ STUDIA SUP — PAGE D'ACCUEIL PORTAIL ═══════════════ */

.page-accueil {
  background: var(--black);
  scroll-behavior: smooth;
}

/* Header */
.hd {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px;
  background: rgba(11,18,14,.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Le logo est la seule chose élastique de l'en-tête : il cède la place
   quand l'écran manque, avec un plancher pour rester lisible. Les
   actions à droite, elles, ne rétrécissent jamais — c'est ce qui
   garantit que « Candidater » n'est plus coupé, à AUCUNE largeur, sans
   dépendre d'une liste de tailles de téléphones à deviner. */
.hd__logo { flex: 0 1 auto; min-width: 88px; }
.hd__logo img { display: block; width: 180px; max-width: 100%; height: auto; }
.hd__nav { display: none; gap: 22px; margin-left: 8px; }
.hd__nav a {
  color: rgba(247,249,248,.78); text-decoration: none;
  font-size: .9rem; font-weight: 600;
  padding: 8px 2px;
}
.hd__nav a:hover { color: var(--white); }
.hd__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.hd__portal-btn, .hd__cta { min-height: 44px; padding: 10px 18px; font-size: .9rem; }
.hd__portal-btn { display: none; }
.hd__burger {
  background: none; border: 1px solid rgba(255,255,255,.2); color: var(--white);
  border-radius: 8px; min-width: 44px; min-height: 44px; font-size: 1.1rem; cursor: pointer;
}
@media (min-width: 1120px) {
  .hd { padding: 12px 32px; }
  .hd__nav { display: flex; }
  .hd__portal-btn { display: inline-flex; }
  .hd__burger { display: none; }
}
/* Petits écrans : logo + pastilles (langue, thème) + CTA dépassaient la
   largeur du téléphone, et « Candidater » se retrouvait coupé. Des
   largeurs de logo fixées par palier ne suffisaient pas : entre deux
   paliers (380–410 px, soit la plupart des iPhone récents) le compte
   ne tombait plus juste. On donne donc une taille de départ plus sage
   au logo et on le laisse se comprimer — voir .hd__logo plus haut.
   (Les pastilles langue/thème se resserrent dans css/main.css, où elles
   sont définies : l'inscription et les portails en profitent aussi.) */
@media (max-width: 560px) {
  .hd { padding: 12px 14px; gap: 10px; }
  .hd__logo img { width: 150px; }
  .hd__actions { gap: 6px; }
  .hd__cta { padding: 10px 13px; font-size: .82rem; }
}
@media (max-width: 379px) {
  .hd { padding: 12px 11px; gap: 8px; }
  .hd__cta { padding: 10px 10px; font-size: .76rem; }
}

/* ── Déroulant « Formations » (desktop, CSS seul) ─────────────── */
.hd__grp { position: relative; }
.hd__grp > a::after { content: ' ▾'; font-size: .72em; opacity: .7; }
.hd__menu {
  position: absolute; top: 100%; left: -14px; z-index: 60;
  min-width: 320px;
  background: rgba(11,18,14,.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 10px;
  display: none;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.hd__grp:hover .hd__menu,
.hd__grp:focus-within .hd__menu { display: block; }
.hd__menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: .88rem;
}
.hd__menu a:hover { background: rgba(255,255,255,.06); }
.hd__menu a:first-child {
  color: var(--green);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 9px 9px 0 0;
  margin-bottom: 4px;
}
.hd__menu-note {
  padding: 8px 12px 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(247,249,248,.45);
}

/* Nav mobile dépliée */
.hd.is-open .hd__nav {
  display: flex; flex-direction: column; gap: 4px;
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(11,18,14,.97);
  padding: 12px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Hero */
.hero-p {
  position: relative;
  min-height: 88dvh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-p__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,18,14,.55) 0%, rgba(11,18,14,.35) 45%, var(--black) 100%),
    url('../frames/desktop/f_001.webp') center 30% / cover no-repeat;
}
@media (max-width: 767px) {
  .hero-p__bg {
    background:
      linear-gradient(180deg, rgba(11,18,14,.5) 0%, rgba(11,18,14,.35) 45%, var(--black) 100%),
      url('../frames/mobile/f_001.webp') center / cover no-repeat;
  }
}
.hero-p__inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  padding: 96px 24px 72px;
}
.hero-p__eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 16px;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hero-p__title {
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  margin-bottom: 18px;
  text-shadow: 0 2px 24px rgba(0,0,0,.55);
}
.hero-p__title span { color: var(--green); }
.hero-p__sub { max-width: 54ch; font-size: 1.08rem; color: rgba(247,249,248,.88); margin-bottom: 30px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero-p__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Sections communes */
main section { padding: 72px 24px; }
.section-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.section-head__eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green); margin-bottom: 10px;
}
.section-head h2 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 800; line-height: 1.15; margin-bottom: 12px; }
.section-head__sub { color: rgba(247,249,248,.7); }

/* Stats → voir css/stats.css (strip glass + count-up) */

/* École → voir css/ecole.css (bento asymétrique + cachet MESRS) */

/* Filières */
.filieres__grid { display: grid; gap: 20px; max-width: 1100px; margin: 0 auto; }
@media (min-width: 900px) { .filieres__grid { grid-template-columns: repeat(3, 1fr); } }
.fcard {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.fcard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fcard__emoji { font-size: 1.7rem; }
.fcard h3 { font-size: 1.15rem; line-height: 1.25; }
.fcard p { font-size: .9rem; color: rgba(247,249,248,.75); }
.fcard__jobs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.fcard__jobs li {
  font-size: .74rem; padding: 4px 10px; border-radius: 99px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
}
.fcard__cta {
  margin-top: auto; align-self: flex-start;
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  color: #fff; text-decoration: none;
  background: var(--green); padding: 12px 18px; border-radius: 12px;
  min-height: 48px; display: inline-flex; align-items: center;
}
.fcard__cta:hover { background: var(--green-dark); }

/* Portails → voir css/portails.css (panneau unique + sélecteur de rôle) */

/* École connectée → voir css/connectee.css (conversation WhatsApp jouée au scroll) */

/* Admissions → voir css/admissions.css (timeline scrub + bandeau compte à rebours) */

/* Contact → intégré au bas de page, voir css/footer.css */

/* Modal portails */
.pmodal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pmodal[hidden] { display: none; }
.pmodal__card {
  position: relative;
  width: min(420px, 100%);
  background: #121b15; border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; padding: 36px 28px 30px;
  text-align: center; display: grid; gap: 12px; justify-items: center;
}
.pmodal__close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff; border: none; cursor: pointer;
}
.pmodal__ico { display: block; color: var(--green); }
.pmodal__ico svg { width: 40px; height: 40px; display: block; }
.pmodal__card h3 { font-size: 1.25rem; }
.pmodal__card p { font-size: .92rem; color: rgba(247,249,248,.75); }