/* =====================================================================
   FormateurPro — Charte graphique CJC 2026
   Chevrier Jean Conseil & Formations · identité éditoriale CJC
   Fond crème · anthracite chaud · rouge brique · terre cuite

   Troisième passe (22/10/2026) : la feuille ne force plus tous les boutons
   en brique plein avec un relief. Hiérarchie :
     - action principale : plein brique (style posé par l'écran, ou .fp-btn-primary) ;
     - action secondaire : contour (bouton sans fond défini, ou .fp-btn-secondary) ;
     - lien texte : souligné brique (.fp-btn-link, ou bouton « background: none »).
   Les onglets, pastilles, choix et cases gardent leur état sélectionné.
   ===================================================================== */
:root {
  --fp-ref-terracotta: #B9472F;
  --fp-ref-terracotta-dark: #8F301F;
  --fp-ref-terracotta-mid: #A83D27;
  --fp-ref-surface: #FFFFFF;
  --fp-ref-navy: #2D2624;          /* anthracite chaud (texte) */
  --fp-ref-muted: #6B5F5A;         /* gris chaud, 6:1 sur blanc */
  --fp-ref-yellow: #FFF0BD;
  --fp-ref-tab: #F4EFEC;
  --fp-ref-border: #E2D4CD;
  --fp-ref-button-text: #FFFFFF;
  --cjc-brique: var(--fp-ref-terracotta);
  --cjc-brique-dark: var(--fp-ref-terracotta-dark);
  --cjc-terre: #A65A48;
  --cjc-brun: #7B3F33;
  --cjc-brique-soft: #F6E3DC;
  --cjc-ivoire: #F7F5F3;
  --cjc-blanc: #FFFDFB;
  --cjc-anthracite: var(--fp-ref-navy);
  --cjc-gris-chaud: var(--fp-ref-muted);
  --cjc-beige: #D8C7C0;
  --cjc-line: var(--fp-ref-border);
  /* Alias de compatibilité avec les modules existants. */
  --cjc-navy: var(--fp-ref-navy);
  --cjc-blue: var(--fp-ref-terracotta);
  --cjc-blue-dark: var(--fp-ref-terracotta-dark);
  --cjc-gold: var(--fp-ref-yellow);
  --cjc-ink: var(--fp-ref-navy);
  --cjc-muted: var(--fp-ref-muted);
  --cjc-bg: var(--fp-ref-surface);
  --cjc-white: var(--fp-ref-surface);
}

html, body { background: var(--cjc-ivoire) !important; color: var(--cjc-anthracite) !important; }
body { font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif !important; }

/* Surfaces : interface lumineuse, crème */
#root, .fp-app-shell, .fp-main-column { background: var(--cjc-ivoire) !important; }
.fp-main-scroll { background: var(--cjc-ivoire) !important; color: var(--cjc-anthracite) !important; }

/* ---------------------------------------------------------------------
   Barre latérale des espaces (formateur, apprenant, administrateur)
   --------------------------------------------------------------------- */
.fp-sidebar, .fp-topbar { border-color: var(--cjc-line) !important; }
#root .fp-sidebar { background: var(--fp-ref-terracotta) !important; }
.fp-topbar { background: var(--cjc-blanc) !important; color: var(--cjc-anthracite) !important; border-bottom: 1px solid var(--cjc-line) !important; }
.fp-sidebar .fp-brand-text, .fp-sidebar strong, .fp-sidebar h1, .fp-sidebar h2 { color: #FFFFFF !important; }
.fp-sidebar .fp-brand-text small, .fp-sidebar small { color: #F3DDD5 !important; }
.fp-brand-logo { width: 96px !important; height: 42px !important; object-fit: contain !important; object-position: center !important; border-radius: 7px !important; flex: 0 0 auto !important; box-shadow: 0 2px 6px rgba(0,0,0,.18) !important; }
.fp-sidebar-brand .fp-brand-text { min-width: 0; }
.fp-home-logo { filter: drop-shadow(0 8px 18px rgba(72,28,20,.24)); }
.fp-catalogue-logo { width: 250px !important; height: 104px !important; max-width: 72vw !important; object-fit: contain !important; object-position: left center !important; border-radius: 8px !important; filter: drop-shadow(0 5px 12px rgba(72,28,20,.24)); }
.fp-catalogue-signature { color: #FFFFFF !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: .16em !important; line-height: 1.35 !important; text-transform: uppercase; white-space: nowrap; }
.fp-catalogue-hero-signature { margin: 8px 0 12px !important; font-size: 16px !important; letter-spacing: .20em !important; }

#root .fp-side-nav-button {
  background: transparent !important;
  color: #FFF7F3 !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  justify-content: flex-start !important;
  text-align: left !important;
  border-radius: 0 10px 10px 0 !important;
}
#root .fp-side-nav-button * { color: inherit !important; }
#root .fp-side-nav-button:hover:not(:disabled) { background: rgba(255,255,255,.12) !important; filter: none !important; }
#root .fp-side-nav-button[aria-current="page"] {
  background: var(--fp-ref-terracotta-dark) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: inset 4px 0 0 #F3C9B8 !important;
}
#root .fp-sidebar-footer { color: #F3DDD5 !important; border-top-color: rgba(255,255,255,.3) !important; }
#root .fp-sidebar-footer button {
  background: transparent !important; color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.7) !important; box-shadow: none !important; font-weight: 700 !important;
}
#root .fp-sidebar-footer button:hover:not(:disabled) { background: rgba(255,255,255,.14) !important; }
#root .fp-sidebar-footer div { color: #F3DDD5 !important; }

/* ---------------------------------------------------------------------
   Titres, liens
   --------------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--cjc-anthracite) !important; }
a { color: var(--cjc-brique); }

/* ---------------------------------------------------------------------
   Boutons : un style sobre et hiérarchisé, sans relief « 3D »
   --------------------------------------------------------------------- */
#root button {
  font-weight: 700;
  border-radius: 10px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, filter .15s ease;
}
#root button:hover:not(:disabled) { filter: brightness(.95); }
#root button:active:not(:disabled) { filter: brightness(.9); }
#root button:disabled { opacity: .55; cursor: not-allowed; }

/* Bouton sans fond défini par l'écran : bouton secondaire à contour */
#root button:not([style*="background"]):not([class*="fp-cta"]):not(.fp-side-nav-button):not(.fp-menu-toggle):not(.fp-btn-primary):not(.fp-btn-link):not(.cjc-catalogue-filter) {
  background: var(--cjc-blanc);
  color: var(--cjc-brun);
  border: 1px solid #D8B4A6;
}

/* Classes explicites */
#root .fp-btn-primary {
  background: var(--cjc-brique) !important; color: #FFFFFF !important; border: 1px solid var(--cjc-brique) !important;
  padding: 10px 18px; min-height: 42px; font-weight: 800 !important; cursor: pointer;
}
#root .fp-btn-primary:hover:not(:disabled) { background: var(--cjc-brique-dark) !important; border-color: var(--cjc-brique-dark) !important; filter: none; }
#root .fp-btn-secondary {
  background: var(--cjc-blanc) !important; color: var(--cjc-brun) !important; border: 1px solid #C9A99F !important;
  padding: 10px 18px; min-height: 42px; font-weight: 700 !important; cursor: pointer;
}
#root .fp-btn-secondary:hover:not(:disabled) { background: var(--cjc-brique-soft) !important; filter: none; }
#root .fp-btn-link {
  background: none !important; border: 0 !important; color: #8A4A3C !important; padding: 6px 2px !important;
  text-decoration: underline; text-underline-offset: 3px; font-weight: 700 !important; box-shadow: none !important; cursor: pointer;
}

/* Raccourcis, cartes de navigation des pages « hub » et étapes du Studio :
   cartes blanches cliquables (plus de pavé brique plein dans une carte crème) */
#root .cjc-quick-access-btn {
  background: var(--cjc-blanc) !important; color: var(--cjc-brun) !important;
  border: 1px solid #D8B4A6 !important; font-weight: 700 !important; box-shadow: none !important;
}
#root .cjc-quick-access-btn:hover:not(:disabled) { background: var(--cjc-brique-soft) !important; filter: none; }
#root .cjc-studio-internal-btn,
#root .fp-hub-card {
  background: #FFFFFF !important; color: var(--cjc-anthracite) !important; text-align: left !important;
  border: 1px solid var(--cjc-line) !important; box-shadow: 0 1px 3px rgba(60,35,28,.06) !important;
  justify-content: flex-start !important; align-items: flex-start !important;
}
#root .cjc-studio-internal-btn:hover:not(:disabled),
#root .fp-hub-card:hover:not(:disabled) { border-color: var(--cjc-brique) !important; box-shadow: 0 4px 14px rgba(60,35,28,.10) !important; filter: none; }

/* ---------------------------------------------------------------------
   Cartes, champs, statuts
   --------------------------------------------------------------------- */
.fp-card { background: var(--cjc-blanc); border-color: var(--cjc-line) !important; box-shadow: 0 1px 3px rgba(60,35,28,.06) !important; }
input, select, textarea { background: var(--cjc-blanc) !important; border-color: var(--cjc-beige) !important; color: var(--cjc-anthracite) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--cjc-brique) !important; box-shadow: 0 0 0 3px rgba(185,71,47,.15) !important; }

[class*="badge"], [class*="tag"] { border-radius: 999px; }
.fp-toast { background: var(--cjc-blanc) !important; border-left-color: var(--cjc-brique) !important; color: var(--cjc-anthracite) !important; }
.fp-toast[data-type="warning"] { border-left-color: #C77D0A !important; }
.fp-toast[data-type="success"] { border-left-color: #159570 !important; }
.fp-toast[data-type="error"] { border-left-color: #B53A2B !important; }
#fp-video-help-modal { background: rgba(45,30,26,.82) !important; }
#fp-video-help-head { background: var(--fp-ref-terracotta) !important; }
#fp-video-help-close { color: var(--cjc-anthracite) !important; }
#fp-video-help-foot { color: var(--cjc-gris-chaud) !important; background: var(--cjc-blanc) !important; }

/* Barres de progression */
[class*="progress"] > div, [role="progressbar"] > div { background: var(--cjc-brique) !important; }
[class*="active"], [aria-selected="true"] { accent-color: var(--cjc-brique); }

#root input::placeholder { color: #8F827C !important; }

/* Signature discrète en bas des espaces */
.cjc-signature { color: var(--cjc-muted); font-size: 11px; letter-spacing: .02em; }

@media (max-width: 720px) {
  .fp-topbar { border-bottom: 3px solid var(--cjc-brique) !important; }
}

/* ---------------------------------------------------------------------
   Connexion administrateur
   --------------------------------------------------------------------- */
.cjc-admin-login {
  background: linear-gradient(145deg, var(--fp-ref-terracotta-dark) 0%, var(--fp-ref-terracotta) 58%, var(--fp-ref-terracotta-mid) 100%) !important;
}
.cjc-admin-login > div { border: 1px solid rgba(255,255,255,.6) !important; }
.cjc-admin-login > div > div:first-child {
  background: linear-gradient(145deg, var(--fp-ref-terracotta-dark), var(--fp-ref-terracotta)) !important;
}
.cjc-admin-login > div > div:first-child > div:nth-child(2) {
  background: var(--fp-ref-terracotta-mid) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
}
.cjc-admin-login > div > div:first-child > div:nth-child(3),
.cjc-admin-login > div > div:first-child > div:nth-child(4) { color: #FFFFFF !important; }
#root .cjc-admin-login .cjc-admin-login-back {
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  background: rgba(255,255,255,.12) !important;
}
#root .cjc-admin-login .cjc-admin-login-submit {
  background: var(--fp-ref-terracotta) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--fp-ref-terracotta) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
#root .cjc-admin-login .cjc-admin-login-submit:hover:not(:disabled) { background: var(--fp-ref-terracotta-dark) !important; }
.cjc-admin-login input { border-color: var(--cjc-beige) !important; }

/* Espace administrateur */
.cjc-admin-shell { background: var(--cjc-ivoire) !important; }
.cjc-admin-shell .fp-sidebar { border-right: 1px solid rgba(255,255,255,.2) !important; }
.cjc-admin-shell .fp-main-scroll { background: var(--cjc-ivoire) !important; }
.cjc-admin-shell .fp-global-search:focus { border-color: var(--fp-ref-terracotta) !important; box-shadow: 0 0 0 3px rgba(185,71,47,.16) !important; }

/* ==========================================================================
   Catalogue — conformité graphique CJC / FormateurPro 2026
   ========================================================================== */
#root .cjc-public-catalogue,
#root .cjc-catalogue-page {
  background: var(--cjc-ivoire) !important;
  color: var(--cjc-anthracite) !important;
}
#root .cjc-public-catalogue > div:first-child {
  background: var(--fp-ref-terracotta) !important;
}
#root .cjc-catalogue-page > h2 { color: var(--cjc-anthracite) !important; font-weight: 800 !important; }
#root .cjc-catalogue-page > p { color: var(--fp-ref-muted) !important; }

#root .cjc-catalogue-search {
  background: #FFFFFF !important;
  color: var(--cjc-anthracite) !important;
  border: 1px solid var(--cjc-beige) !important;
  box-shadow: none !important;
}
#root .cjc-catalogue-search:focus {
  outline: none !important;
  border-color: var(--fp-ref-terracotta) !important;
  box-shadow: 0 0 0 3px rgba(185,71,47,.16) !important;
}

/* Filtres : pastilles, l'active est pleine */
#root .cjc-catalogue-filter {
  background: #FFFFFF !important;
  color: var(--cjc-brun) !important;
  border: 1px solid var(--cjc-beige) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}
#root .cjc-catalogue-filter:hover:not(:disabled) { border-color: var(--fp-ref-terracotta) !important; filter: none; }
#root .cjc-catalogue-filter.is-active {
  background: var(--fp-ref-terracotta) !important;
  color: #FFFFFF !important;
  border-color: var(--fp-ref-terracotta) !important;
}

#root .cjc-catalogue-card {
  background: #FFFFFF !important;
  border: 1px solid var(--cjc-line) !important;
  box-shadow: 0 1px 3px rgba(60,35,28,.06) !important;
  transition: box-shadow .18s ease, border-color .18s ease !important;
}
#root .cjc-catalogue-card:hover {
  border-color: rgba(185,71,47,.42) !important;
  box-shadow: 0 8px 22px rgba(60,35,28,.10) !important;
}
#root .cjc-catalogue-card-visual {
  background: linear-gradient(145deg, #F7EAE4 0%, #EFD9CF 100%) !important;
  border-bottom: 1px solid rgba(185,71,47,.16) !important;
}
#root .cjc-catalogue-badge {
  background: #FFFFFF !important;
  color: var(--cjc-brun) !important;
  border: 1px solid rgba(123,63,51,.25) !important;
  font-weight: 800 !important;
}
/* « Voir le programme » : action secondaire à contour ; « Demander l'inscription » : action principale */
#root .cjc-catalogue-secondary {
  background: #FFFFFF !important;
  color: var(--cjc-brun) !important;
  border: 1px solid #C9A99F !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
#root .cjc-catalogue-secondary:hover:not(:disabled) { background: var(--cjc-brique-soft) !important; filter: none; }
#root .cjc-catalogue-card > div:last-child > button:last-child:not(:disabled) {
  background: var(--fp-ref-terracotta) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--fp-ref-terracotta) !important;
  box-shadow: none !important;
}
#root .cjc-catalogue-card > div:last-child > button:last-child:not(:disabled):hover { background: var(--fp-ref-terracotta-dark) !important; filter: none; }
#root .cjc-catalogue-card > div:last-child > button:last-child:disabled {
  background: #EFE8E4 !important;
  color: #5B4F4A !important;
  border: 1px solid #D8C7C0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Fenêtre programme : bandeau terre cuite */
#root .cjc-catalogue-page [style*="position: fixed"] > div { border: 1px solid rgba(185,71,47,.20) !important; }
#root .cjc-catalogue-page [style*="position: sticky"] {
  background: linear-gradient(145deg, var(--cjc-brun), var(--cjc-terre)) !important;
  color: #FFFFFF !important;
}

@media (max-width: 760px) {
  #root .cjc-public-catalogue > div:first-child,
  #root .cjc-public-catalogue > div:nth-child(2),
  #root .cjc-public-catalogue > div:nth-child(3) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #root .fp-catalogue-signature { font-size: 10px !important; letter-spacing: .08em !important; }
  #root .cjc-catalogue-card { width: min(100%, 340px) !important; }
  #root .cjc-catalogue-page > div[style*="flex-wrap: wrap"] { justify-content: center !important; }
}

/* =====================================================================
   Inscription / connexion / essai
   ===================================================================== */
#root .cjc-auth-page { background: linear-gradient(135deg, #F7F5F3 0%, #EEE3DE 100%) !important; }
#root .cjc-auth-card {
  background: #FFFDFB !important;
  border: 1px solid #D8C7C0 !important;
  box-shadow: 0 20px 60px rgba(92,58,50,.14) !important;
}
#root .cjc-auth-header {
  background: linear-gradient(135deg, #7B3F33 0%, #A65A48 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.24) !important;
}
#root .cjc-auth-header button { color: #FFFFFF !important; font-weight: 700 !important; }
#root .cjc-auth-card input:not([type="checkbox"]) {
  background: #FFFDFB !important;
  border-color: #D8C7C0 !important;
  color: #2D2D2D !important;
}
#root .cjc-auth-card input:not([type="checkbox"]):focus {
  outline: none !important;
  border-color: #A65A48 !important;
  box-shadow: 0 0 0 3px rgba(166,90,72,.14) !important;
}
#root .cjc-auth-card input[type="checkbox"] { accent-color: #A65A48; }
#root .cjc-auth-card a:hover { text-decoration: underline !important; }
@media (max-width: 560px) {
  #root .cjc-auth-page { padding: 12px !important; align-items: flex-start !important; }
  #root .cjc-auth-card { width: 100% !important; border-radius: 16px !important; }
  #root .cjc-auth-header { padding: 28px 18px !important; }
  #root .cjc-auth-tabs button { font-size: 13px !important; padding: 12px 4px !important; }
}