/* =====================================================================
   FormateurPro — correctifs de l'audit du 16 octobre 2026
   § 4 Affichage et ergonomie : en-tête mobile, fenêtres, contrastes,
   zones à toucher (44 px minimum), accueil public.
   Chargée après charte-cjc-2026.css.
   ===================================================================== */

/* ---- Accueil et pages publiques ------------------------------------ */
.fp-landing, .fp-landing-static { background: #B9472F; color: #FFFFFF; }
.fp-public-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 16px 20px;
}
.fp-public-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.fp-public-brand img, img.fp-home-logo {
  width: 300px !important; height: 100px !important; max-width: 70vw !important;
  object-fit: contain; object-position: left center; filter: none !important; border-radius: 0;
}
.fp-public-nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.fp-hero { max-width: 980px; margin: 0 auto; padding: 48px 20px 64px; text-align: center; }
.fp-hero-eyebrow {
  display: inline-block; background: rgba(60,20,12,.32); color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 6px 16px;
  font-size: 14px; font-weight: 700; margin: 0 0 22px;
}
#root .fp-hero-title, .fp-hero-title {
  color: #FFFFFF !important; font-size: clamp(30px, 5.2vw, 48px); line-height: 1.15;
  font-weight: 800; letter-spacing: -0.5px; margin: 0 0 18px;
}
.fp-hero-lead { font-size: 18px; line-height: 1.6; color: #FFFFFF; max-width: 760px; margin: 0 auto 28px; }
.fp-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.fp-hero-note { margin-top: 18px; font-size: 14.5px; color: #FFFFFF; }

.fp-cta-primary, .fp-cta-secondary, .fp-cta-dark, .fp-cta-outline {
  min-height: 48px; padding: 13px 28px; border-radius: 12px; font-size: 16px; font-weight: 800; cursor: pointer;
}
#root .fp-cta-primary, .fp-cta-primary { -webkit-text-fill-color: #7B3F33 !important; background: #FFFFFF !important; color: #7B3F33 !important; border: 1px solid #FFFFFF !important; }
#root .fp-cta-secondary, .fp-cta-secondary { -webkit-text-fill-color: #FFFFFF !important; background: transparent !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; }
#root .fp-cta-dark, .fp-cta-dark { -webkit-text-fill-color: #FFFFFF !important; background: #7B3F33 !important; color: #FFFFFF !important; border: 1px solid #7B3F33 !important; }
#root .fp-cta-outline, .fp-cta-outline { -webkit-text-fill-color: #7B3F33 !important; background: #FFFFFF !important; color: #7B3F33 !important; border: 2px solid #7B3F33 !important; }

#root .fp-public-nav .fp-nav-solid { background: #FFFFFF !important; color: #7B3F33 !important; -webkit-text-fill-color: #7B3F33 !important; border-color: #FFFFFF !important; }
.fp-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.fp-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.fp-landing section[aria-labelledby="fp-qui"] h2 { color: #FFFFFF !important; }
.fp-legal-footer a { color: #7B3F33 !important; }

/* La charte impose une couleur de titre sombre : elle reste lisible sur fond clair,
   mais pas sur les bandeaux colorés. */
.fp-catalogue-hero h1, .fp-catalogue-hero p { color: #FFFFFF !important; }
.cjc-auth-header h1, .cjc-auth-header p { color: #FFFFFF !important; }

/* ---- Fenêtres (fiche programme, demande d'inscription) -------------- */
.fp-modal-overlay { overscroll-behavior: contain; }
.fp-modal-overlay > * { max-height: calc(100vh - 32px); }
.cjc-public-catalogue { transform: none !important; }

/* ---- Zones à toucher et lisibilité ----------------------------------- */
.cjc-catalogue-filter { min-height: 40px; }
.cjc-catalogue-secondary { min-height: 40px; }
#root .cjc-catalogue-card button { min-height: 40px; }

/* ---- Bouton « Mode d'emploi vidéo » ---------------------------------
   Troisième passe : pastille ronde discrète (44 px), et une marge en bas des
   pages pour qu'elle ne recouvre jamais la fin d'un contenu. */
#fp-video-help-btn {
  right: 16px !important; bottom: 16px !important; width: 44px; height: 44px; min-height: 44px;
  padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #FFFDFB !important; color: #B9472F !important; border: 1px solid #D8B4A6 !important;
  box-shadow: 0 4px 12px rgba(60,35,28,.16) !important; opacity: .92;
}
#fp-video-help-btn::before { content: "▶"; font-size: 15px; line-height: 1; color: #B9472F; margin-left: 3px; }
#fp-video-help-btn:hover, #fp-video-help-btn:focus-visible { background: #B9472F !important; opacity: 1; }
#fp-video-help-btn:hover::before, #fp-video-help-btn:focus-visible::before { color: #FFFFFF; }
#root .fp-main-scroll { padding-bottom: 76px !important; }
.fp-legal-footer { padding-bottom: 72px !important; }
@media (max-width: 720px) {
  /* Sur mobile, le bouton flottant ne recouvre plus les actions des pages publiques :
     le mode d'emploi reste accessible depuis le pied de page. */
  body.fp-public #fp-video-help-btn, body.fp-public #fp-appearance { display: none !important; }
  #fp-video-help-btn { right: 12px !important; bottom: 12px !important; }

  .fp-public-header { justify-content: center; padding: 12px 12px 4px; }
  .fp-public-brand img, img.fp-home-logo { width: 220px !important; height: 74px !important; }
  .fp-public-nav { justify-content: center; width: 100%; gap: 8px; }
  .fp-public-nav button { flex: 1 1 calc(50% - 8px); padding: 10px 8px !important; font-size: 14px !important; }
  .fp-hero { padding: 28px 16px 44px; }
  .fp-hero-lead { font-size: 16.5px; }
  .fp-hero-actions > button { width: 100%; }
  .cjc-auth-card { border-radius: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #root button:not(:disabled), #root button:hover:not(:disabled) { transform: none !important; transition: none !important; }
}

/* ---- Impression de la fiche programme -------------------------------- */
@media print {
  body > #root, #fp-video-help-btn, #fp-video-help-modal { display: none !important; }
  .fp-modal-overlay { position: static !important; background: none !important; padding: 0 !important; }
  .fp-modal-overlay > * { box-shadow: none !important; max-height: none !important; overflow: visible !important; width: 100% !important; }
  .fp-modal-overlay button { display: none !important; }
}

/* Titres des fenêtres sur bandeau coloré */
#root .fp-programme-card h2, .fp-modal-overlay h2#fp-programme-titre, .fp-modal-overlay h2#fp-demande-titre { color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* Sélecteur d'apparence clair / sombre : retiré (troisième passe, thème clair imposé) */
#fp-appearance { display: none !important; }

/* Correctif audit § 3 : pas d'animation d'apparition sur les pages publiques
   (le contenu était invisible tant que l'animation n'avait pas joué). */
#root > .fp-landing-static, #root > .fp-landing, #root > .cjc-public-catalogue, #root > .cjc-auth-page { animation: none !important; }

/* Espaces internes (audit § 4) : libellés lisibles sur la barre latérale et bandeau d'information */
.fp-sidebar .fp-brand-text div { color: #FFFFFF !important; }
.fp-demo-notice { background: #FFF4D6; color: #5C3A00; border-bottom: 1px solid #F0D79A; padding: 8px 16px; font-size: 13px; text-align: center; font-family: 'DM Sans', 'Segoe UI', sans-serif; }
@media (max-width: 720px) {
  .fp-dashboard-learner { flex-direction: column !important; }
  .fp-dashboard-learner > * { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; }
}

/* =====================================================================
   Troisième passe (22/10/2026) — lot 1 : écrans en erreur, mobile
   ===================================================================== */

/* Garde-fou d'erreur : message propre au lieu d'une page blanche */
.fp-error-panel { max-width: 640px; margin: 32px auto; padding: 28px; background: #FFFDFB; border: 1px solid #E4D3CC; border-left: 4px solid #B9472F; border-radius: 14px; color: #2D2D2D; }
#root .fp-error-panel h2 { font-size: 20px; margin: 0 0 8px; color: #7B3F33 !important; }
.fp-error-panel p { margin: 0 0 18px; line-height: 1.55; color: #4A3B36; }
.fp-error-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* F5 avec une session ouverte : l'accueil statique ne clignote pas avant la réouverture de l'espace */
html.fp-reprise .fp-landing-static { visibility: hidden; }
html.fp-reprise body { background: #F7F5F3 !important; }

/* Bouton « Menu » des espaces : masqué sur ordinateur */
.fp-menu-toggle { display: none; }

@media (max-width: 720px) {
  /* Barre supérieure compacte : logo + bouton Menu ; le menu complet s'ouvre en tiroir */
  .fp-app-shell .fp-sidebar {
    flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important;
    justify-content: space-between !important; padding: 8px 12px !important; gap: 0 !important;
    max-height: 100dvh; overflow-y: auto;
  }
  .fp-app-shell .fp-sidebar-brand { padding: 0 !important; }
  #root .fp-app-shell .fp-brand-logo { width: 84px !important; height: 38px !important; }
  #root .fp-menu-toggle {
    display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px !important;
    background: #FFFDFB !important; color: #7B3F33 !important; -webkit-text-fill-color: #7B3F33 !important;
    border: 1px solid #FFFDFB !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 800 !important;
    box-shadow: none !important; transform: none !important;
  }
  #root .fp-menu-toggle * { color: #7B3F33 !important; -webkit-text-fill-color: #7B3F33 !important; }
  .fp-menu-toggle-icone { font-size: 18px; line-height: 1; }
  .fp-app-shell .fp-sidebar .fp-sidebar-nav,
  .fp-app-shell .fp-sidebar .fp-sidebar-footer { display: none !important; }
  .fp-app-shell .fp-sidebar.is-open .fp-sidebar-nav {
    display: flex !important; flex-direction: column !important; flex: 0 0 100% !important;
    overflow: visible !important; gap: 2px; padding: 10px 0 4px !important; margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,.28);
  }
  #root .fp-app-shell .fp-sidebar.is-open .fp-side-nav-button {
    width: 100% !important; justify-content: flex-start !important; text-align: left !important;
    padding: 10px 12px !important; min-height: 46px; border-radius: 10px !important; margin: 0 !important;
  }
  #root .fp-app-shell .fp-sidebar.is-open .fp-nav-label { display: inline !important; }
  .fp-app-shell .fp-sidebar.is-open .fp-sidebar-footer {
    display: block !important; flex: 0 0 100% !important; padding: 10px 0 6px !important;
    border-top: 1px solid rgba(255,255,255,.28) !important;
  }
  .fp-app-shell .fp-sidebar.is-open .fp-sidebar-footer button { min-height: 46px; }

  /* La barre d'outils ne reste plus collée en haut : elle prenait jusqu'à 270 px */
  .fp-app-shell .fp-topbar { position: static !important; }

  /* Aucune page ne défile en largeur : grilles empilées, tableaux défilants dans leur cadre */
  .fp-main-scroll, .fp-main-column { max-width: 100vw; }
  .fp-main-scroll > * { max-width: 100%; }
  #root .fp-grille-empilable { grid-template-columns: minmax(0, 1fr) !important; }
  #root .fp-main-scroll table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #root .fp-main-scroll img { max-width: 100%; height: auto; }
  #root .fp-main-scroll select, #root .fp-main-scroll input, #root .fp-main-scroll textarea { max-width: 100%; min-width: 0; }
  #root .fp-main-scroll label { min-width: 0; }

  /* Hub d'import : fenêtre dans l'écran */
  .fp-hub-overlay { align-items: flex-start !important; padding: 8px !important; }
}