/* ============================================================
   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);
  /* Icône À CÔTÉ du texte : colonne 1 pour le picto, colonne 2 pour le
     libellé, la valeur et la précision. Présentation plus compacte, et
     les trois cartes restent alignées quelle que soit la longueur du
     texte (l'icône occupe toute la hauteur de la colonne de gauche). */
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(14px,1.4vw,18px);
  align-items:start;
  text-align:left;
}
.evt .info-card .ic{
  grid-column:1;grid-row:1 / span 3;
  font-size:1.7rem;margin-bottom:0;line-height:1;padding-top:2px;
}
.evt .info-card .lab,
.evt .info-card b,
.evt .info-card > span{grid-column:2}
.evt .info-card .lab{margin-bottom:8px}
.evt .info-card b{font-size:1.06rem}

@media (max-width:560px){
  /* Sur petit écran, la colonne de texte devient trop étroite :
     on repasse à la disposition verticale d'origine. */
  .evt .info-card{
    display:flex;flex-direction:column;align-items:center;
    justify-content:flex-start;text-align:center;
  }
  .evt .info-card .ic{margin-bottom:14px;padding-top:0}
}
@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,#EDF3F9) !important;   /* se détache nettement du blanc voisin */
  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)}
.insc .form-card input::placeholder,
.insc .form-card textarea::placeholder{color:#5F7893}   /* 4,6:1 sur blanc */

/* ------------------------------------------------------------------
   Bloc de partage — la section porte ici un fond CLAIR (.insc), alors
   que .share-btn est défini pour fond sombre (texte blanc, bordure
   blanche à 10 %). Les trois liens tombaient à 1,1:1 : invisibles.
   On les repasse en pastilles blanches à texte bleu institutionnel.
   ------------------------------------------------------------------ */
.insc .share-btn{
  background:#fff;
  border-color:#CBD9E6;
  color:#0A4470;                        /* 10,4:1 sur blanc */
  box-shadow:0 1px 2px rgba(6,46,77,.06);
}
.insc .share-btn:hover,
.insc .share-btn:focus-visible{
  background:#0A4470;
  border-color:#0A4470;
  color:#fff;                           /* 10,1:1 */
  transform:translateY(-3px);
  box-shadow:0 12px 26px -14px rgba(10,68,112,.6);
}

/* Messages de confirmation / d'erreur : les teintes d'origine sont
   calibrées pour la carte sombre et devenaient illisibles sur blanc
   (1,6:1 et 1,9:1). */
.insc .form-msg.ok{
  background:#E8F7EE;border-color:#9BD8B4;color:#0F6B3E;    /* 6,0:1 */
}
.insc .form-msg.err{
  background:#FCEBE9;border-color:#EFB3AB;color:#B03024;    /* 5,5:1 */
}

@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}
}