/* ============================================================
   BIFA INSTITUTE — Page « 5 ans / Graduation Day »
   Composants ajoutés à partir du dossier PDF de l'événement.
   S'appuie sur les variables de style.css (navy, blue, paper…)
   et n'altère aucune règle existante.
   ============================================================ */

/* ---------- Bandeau de parrainage (Hero) ---------- */
.parrainage{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue-soft);margin-bottom:18px;line-height:1.7;
}

/* ---------- Deux institutions ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.duo-card{
  background:#fff;border:1px solid var(--line-light);border-radius:14px;
  padding:30px 28px;position:relative;
  transition:transform .45s var(--ease),box-shadow .45s;
}
.duo-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.duo-card::before{
  content:"";position:absolute;left:28px;right:28px;top:0;height:3px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue));border-radius:0 0 3px 3px;
}
.duo-tag{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#0F6FA6;margin-bottom:12px;   /* bleu d'accent calibré AA */
}
.duo-card h3{font-size:1.24rem;margin-bottom:12px;color:var(--navy-800)}
.duo-card p{font-size:.92rem;color:var(--muted);line-height:1.7}
.duo-logo{height:38px;width:auto;margin-bottom:18px;opacity:.9}
@media (max-width:760px){.duo{grid-template-columns:1fr;gap:16px}}

/* ---------- Programme détaillé de la matinée ---------- */
.prog5{max-width:820px;margin:0 auto;border-top:1px solid var(--line-light)}
.prog5-row{
  display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:baseline;
  padding:18px 6px;border-bottom:1px solid var(--line-light);
  transition:background .35s;
}
.prog5-row:hover{background:var(--paper)}
.prog5-row.is-key{background:linear-gradient(90deg,rgba(41,171,226,.07),transparent)}
.prog5-time{
  font-family:var(--font-display);font-size:1.02rem;font-weight:600;
  color:#0F6FA6;white-space:nowrap;font-variant-numeric:tabular-nums;  /* AA */
}
.prog5-body b{display:block;font-size:1.02rem;color:var(--navy-800);line-height:1.4}
.prog5-body span{display:block;font-size:.87rem;color:var(--muted);margin-top:3px}
@media (max-width:640px){
  .prog5-row{grid-template-columns:1fr;gap:4px;padding:14px 4px}
  .prog5-time{font-size:.95rem}
}

/* ---------- Le parrain de la promotion ---------- */
.parrain{
  display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  background:var(--navy-800);border:1px solid var(--line-dark);border-radius:16px;
  padding:clamp(26px,3.4vw,44px);color:#fff;
}
.parrain-portrait{
  width:132px;height:132px;flex:none;border-radius:50%;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-950));
  border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:2.2rem;color:var(--blue-soft);
  overflow:hidden;
}
.parrain-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.parrain .lab{
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);margin-bottom:10px;
}
.parrain h3{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:6px}
.parrain .role{color:var(--blue-soft);font-size:.94rem;margin-bottom:14px}
.parrain p{color:var(--muted-light);font-size:.94rem;line-height:1.75;max-width:62ch}
.parrain .promo{
  display:inline-block;margin-top:18px;padding:8px 16px;border-radius:20px;
  background:rgba(41,171,226,.14);border:1px solid rgba(41,171,226,.34);
  color:#fff;font-size:.85rem;font-weight:600;
}
@media (max-width:700px){
  .parrain{grid-template-columns:1fr;gap:22px;text-align:left}
  .parrain-portrait{width:96px;height:96px}
}

/* ---------- Témoignages : cadre conservé, sans photo ----------
   Le conteneur reste en place et prêt à recevoir une image
   ultérieurement ; seule l'illustration est neutralisée.       */
.temoin-card .temoin-frame{
  height:104px;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-950));
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.temoin-card .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);
}
.temoin-card .temoin-frame .initials{
  position:relative;z-index:1;
  font-family:var(--font-display);font-size:1.9rem;color:var(--blue-soft);
  letter-spacing:.06em;
}

/* ---------- Rappel de date d'échéance ---------- */
.deadline{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:0 auto 26px;padding:12px 20px;max-width:640px;
  background:rgba(41,171,226,.1);border:1px solid rgba(41,171,226,.3);
  border-radius:8px;font-size:.88rem;color:var(--navy-800);text-align:center;
}
.deadline b{color:#0F6FA6}
.on-dark .deadline{color:#fff;background:rgba(41,171,226,.16)}

/* ---------- Emplacement à compléter (aucune invention) ---------- */
.a-completer{
  border:1px dashed var(--line-strong,#C5D2DE);border-radius:10px;
  padding:18px 20px;font-size:.85rem;color:var(--muted);
  background:repeating-linear-gradient(135deg,rgba(41,171,226,.04) 0 8px,transparent 8px 16px);
}
.a-completer b{display:block;color:var(--navy-800);margin-bottom:4px;font-size:.9rem}

/* ---------- Compaction de la page événement ---------- */
.evt .section{padding-block:clamp(38px,4.2vw,58px)}
.evt .band-5{padding:clamp(34px,3.8vw,48px) 0}
.evt .band-5 .depuis{margin-bottom:24px}
.evt .section-head{margin-bottom:clamp(20px,2.3vw,30px)}
.evt .timeline .tl-item{padding-bottom:22px}
.evt .audience-grid{margin-top:22px}
.evt .hero-5ans{padding-block:clamp(56px,6vw,84px)}
.evt .prog5-row{padding:14px 6px}
.evt .infos-grid,.evt .why-grid,.evt .temoin-grid{gap:clamp(14px,1.7vw,20px)}
.evt .info-card,.evt .why-card{padding:clamp(20px,2.2vw,26px)}
.evt .map-embed{margin-top:26px}

/* Mobile : les séries de cartes passent en défilement horizontal,
   comme sur les pages Formation. Rien n'est retiré, tout reste
   accessible d'un balayage — et la page perd un tiers de sa hauteur. */
@media (max-width:860px){
  .evt .section{padding-block:30px}
  .evt .hero-5ans{padding-block:46px}
  .evt .why-grid,
  .evt .temoin-grid,
  .evt .infos-grid{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:-20px;padding:0 20px 6px;
  }
  .evt .why-grid::-webkit-scrollbar,
  .evt .temoin-grid::-webkit-scrollbar,
  .evt .infos-grid::-webkit-scrollbar{display:none}
  .evt .why-grid > *,
  .evt .temoin-grid > *,
  .evt .infos-grid > *{flex:0 0 84%;scroll-snap-align:center;min-width:0}
  .evt .infos-grid > *{flex:0 0 68%}
}

@media (prefers-reduced-motion:reduce){
  .duo-card,.temoin-card,.prog5-row{transition:none!important}
}

/* ---------- Formulaire : le choix du type de participation
     ajoute une quatrième option ; sans repli, la rangée imposait
     sa largeur minimale à la grille et débordait sur mobile. ---------- */
.evt .fgrid{min-width:0}
.evt .fgrid > *{min-width:0}
.evt .radio-row{flex-wrap:wrap;gap:10px}
.evt .radio-chip{flex:1 1 132px;min-width:0;padding:12px 10px;font-size:.88rem}
@media (max-width:420px){
  .evt .radio-chip{flex:1 1 100%;padding:11px 12px;justify-content:flex-start}
}

/* ============================================================
   HERO ÉVÉNEMENT — version aérée
   Le hero portait huit blocs empilés (badge, titre, deux sous-titres,
   ligne de parrainage, carte événement à trois lignes, compte à
   rebours, deux boutons + note). Il en porte six, dans l'ordre du
   dossier PDF : les deux institutions, le parrainage, le titre de
   campagne, l'intitulé de la matinée, la ligne date-lieu-horaire,
   puis le compte à rebours et les actions.
   ============================================================ */

/* Le hero s'ouvre désormais sur la ligne de parrainage */
.hero-5ans .parrainage{
  margin-bottom:clamp(18px,2.2vw,26px);
}

/* Titre en bas de casse : Playfair y gagne en élégance, mais réclame
   un crénage un peu plus serré et une interligne plus courte que
   les capitales. */
.evt .hero-5ans h1{
  text-transform:none;
  letter-spacing:-.022em;
  line-height:1.02;
}
.evt .hero-5ans h1 .thousand{letter-spacing:-.03em}

/* Intitulé de la matinée, sous le titre de campagne */
.hero-5ans .sub{
  font-size:clamp(1.02rem,1.9vw,1.32rem);
  color:#DCE7F2;max-width:640px;margin:0 auto;
  line-height:1.5;
}
.br-sm{display:none}

/* Date · lieu · horaire, sur une seule ligne comme dans le dossier */
.hero-meta{
  margin:clamp(22px,2.8vw,32px) auto 0;
  font-size:clamp(.9rem,1.5vw,1rem);
  color:#C8D9E8;line-height:2;
  max-width:760px;
}
.hero-meta b{color:var(--blue-soft);font-weight:600}
.hero-meta .sep{color:rgba(41,171,226,.55);margin:0 10px}

/* Compte à rebours : resserré, il ne concurrence plus le titre */
.evt .countdown{margin:clamp(28px,3.4vw,40px) 0 clamp(24px,3vw,34px)}
.evt .cd-unit{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.14);
  padding:14px 10px;min-width:84px;
}
.evt .cd-unit .val{font-size:clamp(1.6rem,3vw,2rem)}

.hero-actions-5{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}
.evt .hero-5ans .note{margin-top:20px}

/* Le hero respire : moins de hauteur imposée, plus d'air interne */
.evt .hero-5ans{
  min-height:auto;
  padding:clamp(120px,13vw,168px) 0 clamp(64px,7vw,96px);
}

@media (max-width:760px){
  .br-sm{display:block}
  .hero-meta{line-height:2.2}
  .hero-meta .sep{display:block;height:0;margin:0;overflow:hidden;color:transparent}
  .hero-actions-5{flex-direction:column;align-items:stretch}
  .hero-actions-5 .btn{width:100%;justify-content:center}
  .evt .cd-unit{min-width:0;flex:1 1 0;padding:12px 4px}
  .evt .countdown{gap:8px;flex-wrap:nowrap}
}

/* Filet de séparation entre deux sections claires consécutives */
.evt .section + .section{border-top:1px solid rgba(6,46,77,.07)}
.evt .on-dark + .section,.evt .section + .on-dark,
.evt .hub-section + .section,.evt .section + .hub-section,
.evt .form-section + .section,.evt .section + .form-section{border-top-color:transparent}

/* ------------------------------------------------------------
   S'Y RENDRE — trois encadrés
   La grille était calibrée pour cinq cartes. Date et horaire ayant
   été retirés (ils figurent au hero et dans le déroulé), elle passe
   à trois colonnes plus larges, mieux proportionnées au texte.
   ------------------------------------------------------------ */
.evt .infos-grid{
  /* Les trois encadrés occupent toute la largeur du conteneur :
     la contrainte de 960 px, héritée d'une grille à cinq colonnes,
     laissait deux marges vides de part et d'autre. */
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:none;
  gap:clamp(18px,2.2vw,26px);
}
.evt .info-card{
  padding:clamp(30px,3.4vw,44px) clamp(24px,2.8vw,34px);
  /* Alignement par le haut : centré verticalement, les libellés se
     décalaient d'une carte à l'autre selon la longueur du texte. */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
.evt .info-card .ic{font-size:1.7rem;margin-bottom:16px}
.evt .info-card .lab{margin-bottom:10px}
.evt .info-card b{font-size:1.06rem}
@media (max-width:860px){
  .evt .infos-grid > *{flex:0 0 76%}
}

/* ============================================================
   PAGE D'INSCRIPTION ISOLÉE
   Un tunnel court : rappel de l'événement, formulaire, trois
   questions. Rien d'autre ne doit détourner de l'action.
   ============================================================ */
.insc .insc-recap{
  padding-top:calc(var(--bn-h,74px) + clamp(40px,4.6vw,64px));
  background:linear-gradient(160deg,#062E4D 0%,#06263F 55%,#041B2E 100%);
  color:#fff;
}
.insc-recap-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,4.6vw,68px);align-items:center;
}
.insc-recap .eyebrow{color:var(--blue)}
.insc-recap .eyebrow::before{background:var(--blue)}
.insc-recap h2{color:#fff;margin-bottom:16px}
.insc-recap .lead{color:var(--muted-light);max-width:52ch}
.insc-recap .link-arrow{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  color:var(--blue-soft);font-weight:600;font-size:.92rem;text-decoration:none;
  border-bottom:1px solid rgba(124,199,239,.4);padding-bottom:3px;
  transition:color .25s,border-color .25s;
}
.insc-recap .link-arrow:hover{color:#fff;border-color:#fff}

/* Récapitulatif en liste de définitions : lisible, imprimable,
   et correctement restitué par les lecteurs d'écran. */
.insc-facts{
  margin:0;padding:clamp(22px,2.6vw,30px);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
}
.insc-facts > div{
  display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.insc-facts > div:last-child{border-bottom:0;padding-bottom:0}
.insc-facts > div:first-child{padding-top:0}
.insc-facts dt{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-soft);
}
.insc-facts dd{margin:0;font-size:1rem;font-weight:600;color:#fff;line-height:1.4}
.insc-facts dd span{
  display:block;font-size:.8rem;font-weight:400;color:var(--muted-light);margin-top:4px;
}

/* Le formulaire n'est plus une section parmi d'autres : il porte
   la page, sur fond clair pour maximiser la lisibilité des champs. */
.insc .form-section{
  background:var(--paper-soft,#F1F6FA) !important;
  padding-block:clamp(44px,5vw,72px);
}
.insc .form-card{background:#fff;box-shadow:0 1px 2px rgba(6,46,77,.05),0 30px 60px -40px rgba(6,46,77,.4)}
.insc .form-card h2,.insc .form-card .fsub{color:var(--navy-800)}
.insc .form-card .eyebrow{color:#0F6FA6}
.insc .form-card .eyebrow::before{background:#0F6FA6}
.insc .form-card label{color:var(--navy-800)}
.insc .form-card input,.insc .form-card select{
  background:#fff;border-color:#D8E2EC;color:var(--navy-900);
}
.insc .form-card input::placeholder{color:#94A8BB}
.insc .form-card .radio-chip{border-color:#D8E2EC;color:var(--navy-800)}
.insc .form-card .consent,.insc .form-card .consent a{color:var(--muted)}

@media (max-width:900px){
  .insc-recap-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:520px){
  .insc-facts > div{grid-template-columns:1fr;gap:4px;padding:11px 0}
}

/* ------------------------------------------------------------
   PARCOURS DE LA DEMANDE — trois étapes
   Le formulaire n'inscrit pas : il ouvre une demande. Le rendre
   explicite avant le premier champ évite l'attente déçue.
   ------------------------------------------------------------ */
.insc-etapes{
  list-style:none;counter-reset:etape;margin:0 0 clamp(24px,2.8vw,32px);padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.insc-etapes li{
  counter-increment:etape;position:relative;
  padding:14px 16px 14px 44px;
  background:var(--paper);border:1px solid var(--line-light);border-radius:10px;
}
.insc-etapes li::before{
  content:counter(etape);
  position:absolute;left:14px;top:14px;
  width:20px;height:20px;border-radius:50%;
  background:#1179B4;color:#fff;
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.insc-etapes b{display:block;font-size:.86rem;color:var(--navy-800);line-height:1.35}
.insc-etapes span{display:block;font-size:.78rem;color:var(--muted);margin-top:3px;line-height:1.45}
@media (max-width:760px){
  .insc-etapes{grid-template-columns:1fr;gap:8px}
}