/* Afoo Académie — feuille de style consolidée
   ============================================================
   SYSTÈME DE COULEURS
   Deux couleurs de marque (vert #A2C03A, marine #181E2C), et des
   variations dérivées pour éviter qu'un vert unique soit répété
   partout. Logique d'usage :
   - Vert = action principale (CTA, prix, succès, progression)
   - Marine = structure/autorité (titres, en-têtes, badges neutres,
     zones "espace formateur/admin" pour les distinguer visuellement
     des zones grand public comme le catalogue)
   - Les tons clairs (green-50/navy-50) servent de fonds de section
     doux, jamais de blanc pur partout — ça évite le rendu plat.
   ============================================================ */

:root {
  /* Vert — action, succès, mise en avant */
  --afoo-green:        #A2C03A;
  --afoo-green-dark:   #7C9426;  /* hover, texte sur fond clair */
  --afoo-green-darker: #5E7020;  /* accents forts, bordures actives */
  --afoo-green-50:     #F3F6E9;  /* fond de section très doux */
  --afoo-green-100:    #E4EBCB;  /* fond de badge/carte sélectionnée */

  /* Marine — structure, titres, zones "back-office" */
  --afoo-navy:         #181E2C;
  --afoo-navy-soft:    #2A3244;  /* variante plus douce pour texte secondaire sombre */
  --afoo-navy-50:      #F3F4F6;  /* fond de section neutre (alternance avec green-50) */

  /* États — le succès reste dans la famille verte de marque ;
     l'avertissement et le danger gardent des teintes distinctes
     (ambre/rouge) volontairement, pour rester lisibles comme des
     signaux d'attention — mélanger toutes les couleurs au vert
     nuirait à la clarté de ces statuts. */
  --afoo-warning-bg: #fef3c7; --afoo-warning-text: #92400e;
  --afoo-success-bg: var(--afoo-green-100); --afoo-success-text: var(--afoo-green-darker);
  --afoo-danger:      #b32d2e;

  --afoo-border: #e5e7eb;
  --afoo-radius: 12px;
  --afoo-font: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* Police des mockups d'origine, appliquée uniquement à nos propres
   composants (préfixe de classe "afoo-") — jamais au reste du thème
   ou d'un autre plugin, pour ne rien casser ailleurs sur le site. */
[class^="afoo-"], [class*=" afoo-"] { font-family: var(--afoo-font); }

.afoo-table-wrap { overflow-x:auto; }
      .afoo-table { width:100%; border-collapse:collapse; font-size:14px; font-family:sans-serif; }
      .afoo-table th { background:#A2C03A; color:white; padding:12px 14px; text-align:left; white-space:nowrap; }
      .afoo-table td { padding:11px 14px; border-bottom:1px solid #eee; color:#333; }
      .afoo-table tr:hover td { background:#f9fdf2; }
      .afoo-badge { padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
      .afoo-badge-attente  { background:#fff3cd; color:#856404; }
      .afoo-badge-confirme { background:#d4edda; color:#155724; }
      .afoo-badge-annule   { background:#f8d7da; color:#721c24; }

.afoo-catalogue-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; margin:20px 0; }
      .afoo-module-card { background:#fff; border:1px solid var(--afoo-border); border-top:4px solid var(--afoo-green); border-radius:var(--afoo-radius); padding:22px; display:flex; flex-direction:column; gap:10px; transition:box-shadow .25s ease, transform .25s ease; }
      .afoo-module-card:hover { box-shadow:0 10px 24px rgba(24,30,44,0.08); transform:translateY(-3px); }
      .afoo-module-card.est-verrouille { opacity:0.7; background:var(--afoo-navy-50); border-top-color:var(--afoo-navy-soft); }
      .afoo-module-card.est-verrouille:hover { transform:none; box-shadow:none; }
      .afoo-module-titre { font-size:16px; font-weight:700; color:var(--afoo-navy); margin:0; }
      .afoo-module-prix { font-size:18px; font-weight:800; color:var(--afoo-green-dark); }
      .afoo-module-btn { display:inline-block; text-align:center; padding:10px 16px; border-radius:8px; font-weight:700; font-size:14px; text-decoration:none; }
      .afoo-module-btn-acheter  { background:var(--afoo-green); color:#fff; }
      .afoo-module-btn-acceder  { background:var(--afoo-navy); color:#fff; }
      .afoo-module-btn-verrou   { background:#e2e8f0; color:#94a3b8; cursor:not-allowed; }

.afoo-espace-module { background:#fff; border:1px solid #e0e0e0; border-radius:12px; padding:22px; margin-bottom:20px; }
      .afoo-espace-module h3 { margin:0 0 6px 0; font-size:17px; color:var(--afoo-navy); }
      .afoo-progress-bar { background:#e2e8f0; border-radius:20px; height:8px; width:100%; margin:10px 0 16px 0; overflow:hidden; }
      .afoo-progress-fill { background:var(--afoo-green); height:100%; }
      .afoo-lecon-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-top:1px solid #f0f0f0; font-size:14px; }
      .afoo-lecon-row:first-of-type { border-top:none; }
      .afoo-lecon-badge { font-size:12px; padding:3px 10px; border-radius:20px; font-weight:700; }
      .afoo-lecon-badge.termine       { background:var(--afoo-success-bg); color:var(--afoo-success-text); }
      .afoo-lecon-badge.non_commence  { background:#f1f5f9; color:#64748b; }
      .afoo-lecon-btn { font-size:12px; font-weight:700; color:var(--afoo-green); text-decoration:none; }

.afoo-form-module { background:#fff; border:1px solid #e0e0e0; border-radius:12px; padding:22px; margin-bottom:20px; }
      .afoo-form-module h3 { margin:0 0 4px 0; font-size:17px; color:var(--afoo-navy); }
      .afoo-form-module .afoo-statut { font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; }
      .afoo-statut.brouillon { background:#fef3c7; color:#92400e; }
      .afoo-statut.publie    { background:var(--afoo-success-bg); color:var(--afoo-success-text); }
      .afoo-lecon-form { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-top:16px; padding-top:16px; border-top:1px solid #f0f0f0; }
      .afoo-lecon-form input[type=text], .afoo-lecon-form select { padding:8px 10px; border:1px solid #e0e0e0; border-radius:6px; font-size:13px; }
      .afoo-btn-mini { background:var(--afoo-green); color:#fff; border:none; padding:8px 16px; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer; }
      .afoo-btn-publier { display:inline-block; margin-top:12px; background:var(--afoo-navy); color:#fff; padding:8px 16px; border-radius:6px; font-size:13px; font-weight:700; text-decoration:none; }

.afoo-cand-form { max-width:560px; background:#fff; border:1px solid #e0e0e0; border-radius:12px; padding:28px; }
      .afoo-cand-form .champ { margin-bottom:16px; }
      .afoo-cand-form label { display:block; font-size:13px; font-weight:600; color:var(--afoo-navy); margin-bottom:6px; }
      .afoo-cand-form input, .afoo-cand-form textarea { width:100%; padding:10px 12px; border:1px solid #e0e0e0; border-radius:6px; font-size:14px; }
      .afoo-cand-submit { background:var(--afoo-green); color:#fff; border:none; padding:12px; width:100%; border-radius:6px; font-weight:700; cursor:pointer; }
      #afoo-cand-message { margin-top:14px; font-size:14px; }

/* Point 3 — édition post-création (module + leçons), utilisé dans
   le dashboard formateur ET la page admin "Modules". */
.afoo-module-edit-form { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; padding:14px; background:var(--afoo-navy-50); border-radius:8px; }
      .afoo-module-edit-form input[type=text], .afoo-module-edit-form input[type=number],
      .afoo-module-edit-form textarea { padding:7px 10px; border:1px solid var(--afoo-border); border-radius:6px; font-size:13px; }
      .afoo-module-edit-form input[type=text] { flex:2; min-width:160px; }
      .afoo-module-edit-form textarea { flex:3; min-width:200px; resize:vertical; }
      .afoo-module-edit-form input[type=number] { flex:1; min-width:90px; }

.afoo-lecon-edit-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid #f0f0f0; }
      .afoo-lecon-edit-row:first-of-type { border-top:none; }
      .afoo-lecon-edit-form { display:flex; gap:6px; flex:1; align-items:center; }
      .afoo-lecon-edit-form input[type=text] { flex:1; padding:6px 9px; border:1px solid var(--afoo-border); border-radius:6px; font-size:13px; }
      .afoo-lecon-edit-form select { padding:6px 8px; border:1px solid var(--afoo-border); border-radius:6px; font-size:13px; }
      .afoo-btn-tiny { background:var(--afoo-navy); color:#fff; border:none; padding:6px 12px; border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
      .afoo-lecon-edit-actions { display:flex; gap:8px; align-items:center; white-space:nowrap; }
      .afoo-lecon-edit-actions a { color:var(--afoo-navy-soft); text-decoration:none; font-size:13px; }
      .afoo-lecon-edit-actions a.afoo-lecon-suppr { color:var(--afoo-danger); font-weight:700; }



/* Point 5 — page "Détail formation" (single par module) */
.afoo-apercu-bandeau { background:var(--afoo-warning-bg); color:var(--afoo-warning-text); text-align:center; padding:10px; font-size:13px; font-weight:600; border-radius:8px; margin-bottom:16px; }

.afoo-detail-hero { background:linear-gradient(135deg, var(--afoo-navy) 0%, var(--afoo-navy-soft) 100%); background-size:cover; background-position:center; border-radius:var(--afoo-radius); padding:60px 40px; margin-bottom:30px; }
      .afoo-detail-hero-inner { max-width:720px; }
      .afoo-detail-badge { display:inline-block; background:rgba(255,255,255,0.15); color:#fff; padding:5px 14px; border-radius:20px; font-size:12.5px; font-weight:700; margin-bottom:16px; }
      .afoo-detail-hero h1 { color:#fff; font-size:32px; font-weight:800; margin:0 0 14px 0; line-height:1.25; }
      .afoo-detail-tagline { color:rgba(255,255,255,0.88); font-size:16px; line-height:1.6; margin:0; }

.afoo-detail-body { display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:start; }
      @media (max-width:820px) { .afoo-detail-body { grid-template-columns:1fr; } }

.afoo-detail-section { background:#fff; border:1px solid var(--afoo-border); border-radius:var(--afoo-radius); padding:26px; margin-bottom:22px; }
      .afoo-detail-section h2 { font-size:19px; color:var(--afoo-navy); margin:0 0 16px 0; }
      .afoo-detail-section p { font-size:14.5px; color:#444; line-height:1.7; }
      .afoo-detail-audience { margin-top:14px; padding-top:14px; border-top:1px solid #f0f0f0; font-style:italic; color:#666 !important; }

.afoo-detail-objectifs { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
      .afoo-detail-objectifs li { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:#333; }
      .afoo-check { color:var(--afoo-green-dark); font-weight:800; flex-shrink:0; }

.afoo-detail-programme { list-style:none; margin:0; padding:0; }
      .afoo-detail-programme li { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid #f0f0f0; }
      .afoo-detail-programme li:first-child { border-top:none; }
      .afoo-programme-num { width:26px; height:26px; background:var(--afoo-green-100); color:var(--afoo-green-darker); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
      .afoo-programme-titre { flex:1; font-size:14px; color:#333; }

.afoo-formateur-card { display:flex; align-items:center; gap:14px; }
      .afoo-formateur-avatar { width:48px; height:48px; border-radius:50%; background:var(--afoo-green); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex-shrink:0; }

.afoo-detail-sidebar { position:sticky; top:20px; }
      .afoo-detail-cta-card { background:#fff; border:1px solid var(--afoo-border); border-radius:var(--afoo-radius); padding:26px; }
      .afoo-detail-prix { font-size:26px; font-weight:800; color:var(--afoo-green-dark); margin-bottom:16px; text-align:center; }
      .afoo-detail-prereq-warning { font-size:13px; color:var(--afoo-warning-text); background:var(--afoo-warning-bg); padding:10px 12px; border-radius:8px; margin-bottom:12px; }
      .afoo-detail-recap { list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid #f0f0f0; display:grid; gap:8px; font-size:13px; color:#555; }

/* Point 4 — salle de classe (complétion automatique) */
.afoo-classe-fil { font-size:13px; margin-bottom:14px; }
      .afoo-classe-fil a { color:var(--afoo-navy-soft); text-decoration:none; }
.afoo-classe-titre { font-size:24px; color:var(--afoo-navy); margin:0 0 20px 0; }
.afoo-classe-player { margin-bottom:20px; }
.afoo-classe-deja-termine { background:var(--afoo-success-bg); color:var(--afoo-success-text); padding:10px 14px; border-radius:8px; font-size:13.5px; font-weight:600; margin-bottom:14px; }
.afoo-classe-pdf-note { font-size:12.5px; color:#999; margin-top:8px; font-style:italic; }
.afoo-classe-confirmation { background:var(--afoo-green-100); color:var(--afoo-green-darker); padding:16px 20px; border-radius:12px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
      .afoo-classe-confirmation a { color:var(--afoo-navy); text-decoration:underline; font-weight:700; }

/* Zones de dépôt de fichier — reprend le style ".upload-box" du
   mockup "Soumettre un nouveau module" (bordure en pointillés,
   surbrillance verte au survol). Portée volontairement restreinte à
   nos propres formulaires (descendants d'un conteneur "afoo-") pour
   ne pas restyler les champs file d'autres plugins/formulaires du
   site — un sélecteur global input[type=file] aurait été trop large. */
.afoo-cand-form input[type="file"],
.afoo-lecon-form input[type="file"],
.afoo-module-edit-form input[type="file"],
.wrap input[type="file"] {
  display: block;
  width: 100%;
  padding: 16px;
  border: 2px dashed var(--afoo-border);
  border-radius: 10px;
  background: var(--afoo-navy-50);
  font-family: var(--afoo-font);
  font-size: 13px;
  color: var(--afoo-navy-soft);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  margin-top: 4px;
}
.afoo-cand-form input[type="file"]:hover,
.afoo-lecon-form input[type="file"]:hover,
.afoo-module-edit-form input[type="file"]:hover,
.wrap input[type="file"]:hover { border-color: var(--afoo-green); background: var(--afoo-green-50); }