/* ============================================================
   BIFA INSTITUTE — COUCHE DE FINITION
   ------------------------------------------------------------
   Ajustements de finition appliqués après le design validé.
   Aucune couleur, aucune composition, aucune taille de bloc n'est
   modifiée : on travaille uniquement le détail — rendu du texte,
   ancrage, états d'interaction, impression.
   Charte inchangée : navy #062E4D · bleu #29ABE2 · Playfair + Inter
   ============================================================ */

/* ------------------------------------------------------------
   1. ANCRAGE SOUS L'EN-TÊTE FIXE
   Les liens d'ancre amenaient le haut des sections sous l'en-tête
   fixe (et, sur les pages Formation, sous la barre secondaire) :
   40 px de titre étaient masqués. On réserve la hauteur réelle
   du bandeau, sous-bande comprise.
   ------------------------------------------------------------ */
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;                  /* en-tête 74 + respiration */
}
html:has(.fmn){ scroll-padding-top:146px; } /* en-tête 74 + sous-bande 53 */
@media (max-width:1023px){
  html{ scroll-padding-top:86px; }
  html:has(.fmn){ scroll-padding-top:130px; }
}
/* Repli pour les rares navigateurs sans :has() : la marge est alors
   portée par les cibles. Les deux mécanismes ne doivent jamais
   s'additionner, d'où le @supports. */
@supports not selector(:has(*)){
  html{ scroll-padding-top:0; }
  .band[id],.section[id],.hero[id],.cta-rappel[id]{ scroll-margin-top:96px; }
  .fmn ~ * .band[id]{ scroll-margin-top:146px; }
}

/* ------------------------------------------------------------
   2. RENDU DU TEXTE
   ------------------------------------------------------------ */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.h-display,.h-section{
  font-optical-sizing:auto;
  /* Les titres se répartissent sur des lignes équilibrées plutôt
     que de laisser un mot seul en dernière ligne. */
  text-wrap:balance;
}
p,li,.lead,.pitch,blockquote{
  text-wrap:pretty;          /* évite les lignes orphelines */
  overflow-wrap:break-word;  /* garde-fou sur les mots longs */
}
/* Chiffres alignés en colonne dans les tableaux, prix et compteurs */
.card-facts .price,.fiche-row,.stat .num,.num,.prog5-time,
.tl-row,.cat-figures b,.card-rank,.price{
  font-variant-numeric:tabular-nums;
}
/* Les grandes tailles de Playfair supportent un crénage plus serré */
h1,.h-display{letter-spacing:-.024em}
h2,.h-section{letter-spacing:-.016em}

/* Soulignés de liens en ligne : plus fins, mieux détachés */
.lead a,p a:not(.btn):not([class*="bn-"]):not([class*="fmn"]){
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
  transition:text-decoration-color .25s ease;
}
.lead a:hover,p a:not(.btn):hover{text-decoration-color:currentColor}

/* ------------------------------------------------------------
   3. SÉLECTION ET BARRE DE DÉFILEMENT
   ------------------------------------------------------------ */
::selection{background:rgba(41,171,226,.24);color:#062E4D}
.on-dark ::selection,.band--dark ::selection,.band--deep ::selection,
.hero ::selection,.hero-5ans ::selection{background:rgba(41,171,226,.34);color:#fff}

@media (min-width:1024px){
  html{scrollbar-width:thin;scrollbar-color:#B9CBDA transparent}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{
    background:#C4D3E0;border-radius:8px;
    border:3px solid transparent;background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{background:#9DB2C8;background-clip:content-box}
}

/* ------------------------------------------------------------
   4. INDICATEUR DE PROGRESSION DE LECTURE
   Une hairline sous l'en-tête, alimentée par --progress.
   Sur les pages longues, elle donne le repère qui manque.
   ------------------------------------------------------------ */
.bn::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;
  width:var(--progress,0%);
  background:linear-gradient(90deg,#1179B4,#29ABE2);
  transition:width .12s linear;
  pointer-events:none;
}

/* ------------------------------------------------------------
   5. ÉTATS D'INTERACTION
   ------------------------------------------------------------ */
.btn,.bn-pill,.bn-cta,.filter,.fmn-arw{
  -webkit-tap-highlight-color:transparent;
}
/* Retour tactile : le bouton s'enfonce légèrement au clic */
.btn:active,.bn-pill:active,.bn-cta:active{transform:translateY(1px) scale(.995)}
.fmn-arw:active:not(:disabled){transform:scale(.92)}

/* Ombres portées en deux couches : contact net + diffusion douce */
.card:hover,.offer:hover,.cat-card:hover,.duo-card:hover{
  box-shadow:0 1px 2px rgba(6,46,77,.06), 0 24px 44px -28px rgba(6,46,77,.42);
}

/* Les visuels en cours de chargement ne provoquent plus de flash blanc */
.card-media,.img-frame,.f-logo-box,.bn-f-ico{background-color:#EEF3F8}
.band--dark .card-media,.band--deep .card-media{background-color:#0A4470}

/* ------------------------------------------------------------
   6. COHÉRENCE DU FOCUS CLAVIER
   ------------------------------------------------------------ */
:focus-visible{outline:2px solid #1179B4;outline-offset:3px;border-radius:3px}
.on-dark :focus-visible,.band--dark :focus-visible,.band--deep :focus-visible,
.hero :focus-visible,.hero-5ans :focus-visible,.bn :focus-visible,.bf :focus-visible{
  outline-color:#8FD0F2;
}

/* ------------------------------------------------------------
   7. IMPRESSION
   Les fiches de session et les programmes sont imprimés par les
   services formation : on leur donne une sortie propre.
   ------------------------------------------------------------ */
@media print{
  .bn,.fmn,.infobar,.mobile-bar,.share-row,.bf-social,
  .cta-rappel,.video,.map-embed,.partners-marquee{display:none !important}
  body{background:#fff !important;color:#111 !important;font-size:11pt}
  .bifa-chrome{padding-top:0 !important}
  .band,.section{padding:14pt 0 !important;background:#fff !important;color:#111 !important;break-inside:avoid}
  h1,h2,h3,h4,.h-display,.h-section{color:#062E4D !important;break-after:avoid}
  .lead,p,li{color:#333 !important}
  a{color:#062E4D !important;text-decoration:none}
  /* L'URL des liens sortants est reportée à côté du libellé */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666}
  .card,.offer,.fiche,.enjeu-item,.duo-card,.info-card{
    border:1px solid #ccc !important;box-shadow:none !important;break-inside:avoid
  }
  .reveal,.sr{opacity:1 !important;transform:none !important}
  .faq-a{display:block !important;max-height:none !important}
}

/* ------------------------------------------------------------
   8. MOUVEMENT RÉDUIT
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bn::after{transition:none}
  .btn:active,.bn-pill:active,.bn-cta:active,.fmn-arw:active{transform:none}
}

/* ------------------------------------------------------------
   9. LISIBILITÉ DU HERO D'ACCUEIL
   La courbe « trajectoire » traversait le paragraphe d'accroche :
   le texte se lisait par-dessus un trait clair. On pose un voile
   dégradé derrière la colonne de texte — le motif reste visible
   sur toute la largeur, mais s'efface là où l'on lit.
   ------------------------------------------------------------ */
.hero .container{position:relative;z-index:2}
.hero-content{position:relative}
/* Voile très diffus : sur un dégradé lisse, un voile marqué se lisait
   comme un rectangle. Il s'estompe donc bien avant les bords. */
.hero-content::before{
  content:"";position:absolute;
  inset:-70px -140px -70px -120px;
  background:radial-gradient(75% 70% at 30% 50%,
             rgba(4,22,38,.52) 0%, rgba(4,22,38,.26) 42%, transparent 72%);
  filter:blur(10px);
  z-index:-1;pointer-events:none;
}
/* Le tracé « trajectoire » est adouci pour ne plus concurrencer la
   typographie ; le quadrillage technique disparaît au profit d'un
   dégradé construit sur les teintes mêmes du logo BIFA :
     #004070  bleu profond du monogramme
     #1080C0  bleu médian des barres
     #1090E0  pointe la plus claire
   ------------------------------------------------------------ */
.route-path{opacity:.42}
.hero-grid-lines{display:none}

.hero{
  background:
    /* halo haut-droit, bleu clair du logo */
    radial-gradient(1200px 720px at 88% -12%, rgba(16,144,224,.30), transparent 62%),
    /* reprise médiane, bleu des barres */
    radial-gradient(900px 620px at 6% 18%, rgba(16,128,192,.22), transparent 58%),
    /* assise basse, bleu profond du monogramme */
    radial-gradient(1000px 560px at 74% 108%, rgba(0,64,112,.55), transparent 64%),
    /* fond : du navy de la charte vers le bleu profond du logo */
    linear-gradient(155deg, #062E4D 0%, #06263F 42%, #041B2E 100%);
}
/* Voile de grain très léger : évite le banding sur les grands aplats
   de dégradé, sans introduire de motif visible. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}
/* Fondu vers la section suivante */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  pointer-events:none;z-index:1;
  background:linear-gradient(180deg, transparent, rgba(4,27,46,.55));
}

/* Hauteur du hero : plein écran reste la signature, mais la barre
   fixe est déduite et les marges internes resserrées. */
.hero{
  /* Plein écran reste la signature de la page, mais la hauteur est
     bornée : sur un grand moniteur, l'accroche ne se perdait plus
     au milieu de 400 px de vide. */
  min-height:clamp(540px,80svh,780px);
  padding-block:clamp(48px,4.6vw,68px);
}
@media (max-width:860px){
  .hero{min-height:auto;padding-block:52px 44px}
  .hero-content::before{inset:-24px -24px -24px -22px}
}

/* ------------------------------------------------------------
   10. TEXTE SECONDAIRE SUR FOND SOMBRE
   .on-dark .lead réglait le cas des sections sombres, mais le hero,
   le bandeau des 5 ans, la section Hub et la section formulaire ne
   portent pas cette classe : leur texte d'accroche restait au gris
   des fonds clairs (3,3:1 sur navy). On aligne tous les contextes.
   ------------------------------------------------------------ */
.hero .lead,.hero-5ans .lead,
.band-5 .lead,.hub-section .lead,.form-section .lead,
.on-darker .lead,
.hero p:not([class]),.hub-section p:not([class]){
  color:var(--muted-light);
}

/* ------------------------------------------------------------
   11. CHAMPS DE FORMULAIRE — largeur
   Les champs n'avaient ni width ni box-sizing : ils conservaient
   leur largeur intrinsèque (~291 px, soit la taille par défaut d'un
   input de 20 caractères). Résultat : sur un écran de 360 px ils
   dépassaient de 18 px du cadre, et sur 390-414 px ils ne le
   remplissaient pas. Concerne le formulaire de contact comme celui
   d'inscription de la page 5 ans.
   ------------------------------------------------------------ */
.fgroup{min-width:0}
.fgroup input,
.fgroup select,
.fgroup textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  display:block;
}
.fgroup textarea{resize:vertical}
/* La case à cocher de consentement garde sa taille propre */
.fgroup input[type="checkbox"],
.fgroup input[type="radio"]{width:auto;display:inline-block}

/* Le libellé long du bouton ne doit pas doubler sa hauteur */
.form-card .btn{min-height:52px;text-align:center}

/* ------------------------------------------------------------
   12. PANNEAU MOBILE — le menu ne tenait pas à l'écran
   Sous-menu Formations déplié, le contenu atteignait 1 233 px pour
   un panneau de 778 px : « Graduation Day » se retrouvait hors de
   vue, sans aucun indice qu'il fallait faire défiler.
   Trois correctifs : hauteur en dvh (barre d'adresse mobile),
   sous-menu resserré, et repère de défilement en bas de panneau.
   ------------------------------------------------------------ */
@media (max-width:1023px){
  .bn-nav{
    /* dvh suit la barre d'adresse des navigateurs mobiles ;
       le repli en vh sert aux navigateurs qui l'ignorent. */
    height:calc(100vh - var(--bn-h));
    height:calc(100dvh - var(--bn-h));
    bottom:auto;
    padding-bottom:56px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.28) transparent;
  }
  .bn-nav::-webkit-scrollbar{width:4px}
  .bn-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px}

  /* Repère de défilement : un fondu en pied de panneau */
  .bn.is-open::before{
    content:"";position:fixed;left:0;right:0;bottom:0;height:64px;z-index:3;
    background:linear-gradient(180deg,transparent,#062E4D 78%);
    pointer-events:none;
  }

  /* Sous-menu resserré : l'accroche de chaque formation, utile au
     survol sur grand écran, n'apporte rien dans une liste tactile. */
  .bn-mega .bn-f span span{display:none}
  .bn-mega .bn-f{padding:8px 6px;gap:10px}
  /* Deux colonnes : neuf formations tiennent en cinq rangées au lieu
     de neuf, le sous-menu perd près de 180 px. */
  .bn-mega .bn-grid{grid-template-columns:1fr 1fr;gap:2px 8px}
  .bn-mega .bn-f b{font-size:.86rem;line-height:1.25}
  .bn-mega .bn-f-ico{width:26px;height:26px}
  .bn-mega .bn-f b{font-size:.92rem}
  .bn-side{padding:14px}
  .bn-side p{display:none}
  .bn-side h4{font-size:.88rem;margin-bottom:10px}
  .bn-link{padding:13px 2px}
}

/* ------------------------------------------------------------
   13. MÉDIAS — deux tuiles seulement
   La grille était calibrée pour cinq tuiles (2fr 1fr 1fr, la vidéo
   sur deux rangées). Avec la vidéo et une seule galerie, elle se
   réorganise en deux blocs de même hauteur.
   ------------------------------------------------------------ */
.media-grid{grid-template-columns:1.6fr 1fr;grid-auto-rows:auto}
.media-tile{min-height:300px}
.media-tile.big{grid-row:span 1}
@media (max-width:767px){
  .media-grid{grid-template-columns:1fr}
  .media-tile{min-height:230px}
}
/* La règle .gallery-tile .icon{position:relative} (posée pour gérer
   l'empilement) annulait le positionnement absolu de la pastille :
   elle redevenait un élément de flux et chevauchait le libellé.
   On rétablit sa position en conservant son plan. */
.gallery-tile .icon{position:absolute;top:18px;left:18px;z-index:2}

/* ------------------------------------------------------------
   14. MENU « FORMATIONS » — libellé et chevron dissociés
   Le libellé mène désormais au catalogue « Formations à venir » ;
   le chevron, cible distincte, déplie la liste. Les deux restent
   perçus comme un seul élément de menu.
   ------------------------------------------------------------ */
.bn-has-mega{display:flex;align-items:center;gap:2px}
.bn-caretbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;margin:0;
  background:none;border:0;cursor:pointer;color:var(--bn-txt);
  border-radius:4px;transition:color .22s,background .22s;
}
.bn-caretbtn:hover{color:#fff;background:rgba(255,255,255,.09)}
.bn-caretbtn .bn-caret{width:10px;height:10px}
.bn-caretbtn[aria-expanded="true"]{color:#fff}
.bn-caretbtn[aria-expanded="true"] .bn-caret{transform:rotate(180deg)}
/* Le soulignement du libellé réagit aussi au survol du chevron */
.bn-has-mega:hover .bn-link::after,
.bn-has-mega.is-open .bn-link::after{right:0}
.bn-has-mega:hover .bn-link,
.bn-has-mega.is-open .bn-link{color:#fff}

@media (max-width:1023px){
  /* Sur mobile, la ligne se partage : le libellé occupe la largeur
     utile, le chevron devient une cible tactile confortable. */
  /* Le sous-menu passe à la ligne sous le couple libellé + chevron :
     sans retour à la ligne, il se rangeait en troisième colonne
     et débordait de l'écran. */
  .bn-menu > li.bn-has-mega{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0}
  .bn-has-mega .bn-link{flex:1 1 auto}
  .bn-caretbtn{width:48px;height:48px;flex:none;border-radius:8px}
  .bn-caretbtn .bn-caret{width:13px;height:13px}
  .bn-has-mega .bn-mega{flex:1 0 100%}
}

/* ------------------------------------------------------------
   15. CONTACT WHATSAPP — bouton flottant
   Monochrome, aux couleurs de la charte (navy → bleu) plutôt qu'au
   vert de la marque WhatsApp : l'icône reste immédiatement
   reconnaissable sans introduire une couleur étrangère au site.

   Trois barres fixes existent déjà en pied d'écran :
     .mobile-bar (pages Formation, z-index 90)
     .infobar    (page 5 ans, z-index 990)
   Le bouton se décale au-dessus d'elles dès qu'elles apparaissent,
   et respecte la zone sûre des écrans à encoche.
   ------------------------------------------------------------ */
.wa-fab{
  position:fixed;
  right:clamp(16px,2.4vw,28px);
  bottom:clamp(16px,2.4vw,28px);
  bottom:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-bottom));
  z-index:1100;
  display:inline-flex;align-items:center;gap:0;
  height:56px;padding:0 15px;
  border-radius:28px;
  background:linear-gradient(135deg,#0A4470,#1179B4);
  color:#fff;text-decoration:none;
  box-shadow:0 2px 6px rgba(6,46,77,.24), 0 14px 30px -12px rgba(6,46,77,.62);
  transition:transform .32s var(--ease,cubic-bezier(.22,1,.36,1)),
             box-shadow .32s ease, background .32s ease, gap .32s ease, padding .32s ease;
  -webkit-tap-highlight-color:transparent;
}
.wa-fab svg{flex:none}
.wa-fab-label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-family:var(--bn-font,'Inter',sans-serif);
  font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:max-width .32s var(--ease,cubic-bezier(.22,1,.36,1));
}
/* Le libellé se déploie au survol ou au focus, sur les appareils
   qui disposent d'un pointeur. Au doigt, l'icône seule suffit. */
@media (hover:hover){
  .wa-fab:hover,.wa-fab:focus-visible{
    gap:10px;padding-right:22px;
    background:linear-gradient(135deg,#1179B4,#29ABE2);
    transform:translateY(-3px);
    box-shadow:0 3px 8px rgba(6,46,77,.26), 0 22px 40px -14px rgba(6,46,77,.7);
  }
  .wa-fab:hover .wa-fab-label,
  .wa-fab:focus-visible .wa-fab-label{max-width:140px}
}
.wa-fab:active{transform:translateY(0) scale(.96)}

/* Décalage au-dessus des barres fixes du pied d'écran.
   Leur hauteur varie (l'infobar passe à la ligne sur mobile) : elle
   est mesurée à l'exécution et reportée dans --bar-h. La valeur par
   défaut de 0 laisse le bouton à sa place tant qu'aucune barre
   n'est déployée. */
.wa-fab{
  bottom:calc(clamp(16px,2.4vw,28px) + var(--bar-h,0px) + env(safe-area-inset-bottom));
}
@media (max-width:860px){
  .wa-fab{height:52px;padding:0 13px}
}

/* Jamais imprimé */
@media print{ .wa-fab{display:none !important} }

@media (prefers-reduced-motion:reduce){
  .wa-fab,.wa-fab-label{transition:none}
  .wa-fab:hover{transform:none}
}

/* ------------------------------------------------------------
   16. BANDEAU STICKY — icônes
   Les pictogrammes portaient un stroke #29ABE2 en attribut de
   présentation. Sur le dégradé bleu du bandeau, ils devenaient
   invisibles (1,6:1). La propriété CSS l'emporte sur l'attribut :
   ils passent en blanc, sans toucher au balisage.
   ------------------------------------------------------------ */
.infobar svg{stroke:#fff;opacity:.95}
.infobar span{display:inline-flex;align-items:center;gap:7px}
/* Même correction pour la barre d'action des pages Formation */
.mobile-bar svg{stroke:currentColor}