/* =========================================================
   7TH ROOM ACADEMY — DESIGN SYSTEM / SOCLE COMMUN
   ---------------------------------------------------------
   Ce fichier ne contient AUCUNE couleur d'univers.
   Il définit la structure, les espacements, les composants.

   Les couleurs arrivent ensuite avec l'un des deux fichiers :
     academy-creation.css  → univers sombre / vert  (MC, compo, beatmaking)
     academy-audio.css     → univers clair / bleu   (prise de son, mix, master)

   Ordre de chargement dans une page :
     <link rel="stylesheet" href="/assets/css/academy-base.css">
     <link rel="stylesheet" href="/assets/css/academy-audio.css">

   Toutes les couleurs passent par des variables : un composant
   écrit ici s'adapte automatiquement aux deux univers.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------
   1. VARIABLES DE STRUCTURE (identiques dans les 2 univers)
   --------------------------------------------------------- */
:root{
  --ac-titre:   'Montserrat', -apple-system, "Segoe UI", Roboto, sans-serif;
  --ac-texte:   'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;

  --ac-largeur:      1180px;
  --ac-largeur-lecon: 900px;

  --ac-r-carte:  20px;
  --ac-r-bloc:   16px;
  --ac-r-petit:  12px;
  --ac-r-pilule: 999px;

  --ac-esp-xs: 8px;
  --ac-esp-sm: 14px;
  --ac-esp-md: 22px;
  --ac-esp-lg: 36px;
  --ac-esp-xl: 60px;

  --ac-transition: .18s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------
   2. RÉINITIALISATION LÉGÈRE
   --------------------------------------------------------- */
.ac *, .ac *::before, .ac *::after{ box-sizing:border-box; }

.ac{
  font-family:var(--ac-texte);
  background:var(--ac-fond);
  color:var(--ac-texte-1);
  line-height:1.65;
  min-height:100vh;
  margin:0;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

.ac h1, .ac h2, .ac h3, .ac h4{
  font-family:var(--ac-titre);
  font-weight:800;
  letter-spacing:-0.5px;
  line-height:1.15;
  color:var(--ac-texte-1);
  margin:0 0 var(--ac-esp-sm);
}
.ac h1{ font-size:clamp(30px,5.2vw,54px); font-weight:900; }
.ac h2{ font-size:clamp(23px,3.4vw,34px); }
.ac h3{ font-size:clamp(18px,2.4vw,22px); }
.ac p{ margin:0 0 var(--ac-esp-sm); }
.ac a{ color:var(--ac-accent); }

.ac-conteneur{
  width:100%;
  max-width:var(--ac-largeur);
  margin:0 auto;
  padding:0 20px;
}
.ac-conteneur-lecon{ max-width:var(--ac-largeur-lecon); }

.ac-section{ padding:var(--ac-esp-xl) 0; }

/* Bloc qui change d'univers au milieu d'une page.
   On lui met .ac-univers + .ac-creation (ou .ac-audio) :
   il reprend alors le fond et les couleurs de cet univers,
   sans toucher au reste de la page. */
.ac-univers{
  background:var(--ac-fond);
  color:var(--ac-texte-1);
}
.ac-sur-titre{
  font-family:var(--ac-titre);
  font-weight:800;
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--ac-accent);
  margin-bottom:var(--ac-esp-xs);
}
.ac-muted{ color:var(--ac-texte-2); }

/* ---------------------------------------------------------
   3. EN-TÊTE ET NAVIGATION
   --------------------------------------------------------- */
.ac-header{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--ac-fond-header);
  border-bottom:1px solid var(--ac-bord);
  backdrop-filter:saturate(180%) blur(12px);
}
.ac-header-in{
  max-width:var(--ac-largeur);
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  gap:var(--ac-esp-md);
}
.ac-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.ac-logo img{ height:40px; width:auto; display:block; }
.ac-logo span{
  font-family:var(--ac-titre);
  font-weight:900;
  font-size:15px;
  letter-spacing:1px;
  color:var(--ac-texte-1);
  line-height:1.05;
}
.ac-logo small{
  display:block;
  font-size:9px;
  letter-spacing:4px;
  color:var(--ac-texte-2);
  font-weight:700;
}

.ac-nav{ display:flex; gap:4px; margin-left:auto; align-items:center; }
.ac-nav a{
  font-size:15px;
  font-weight:500;
  color:var(--ac-texte-2);
  text-decoration:none;
  padding:9px 14px;
  border-radius:var(--ac-r-petit);
  transition:color var(--ac-transition), background var(--ac-transition);
  white-space:nowrap;
}
.ac-nav a:hover{ color:var(--ac-texte-1); background:var(--ac-survol); }
.ac-nav a.actif{ color:var(--ac-accent); font-weight:600; }
.ac-nav a.actif::after{
  content:"";
  display:block;
  height:2px;
  border-radius:2px;
  background:var(--ac-accent);
  margin-top:4px;
}

.ac-burger{
  display:none;
  margin-left:auto;
  background:none;
  border:1px solid var(--ac-bord);
  border-radius:var(--ac-r-petit);
  color:var(--ac-texte-1);
  font-size:22px;
  line-height:1;
  padding:8px 12px;
  cursor:pointer;
}

@media (max-width:900px){
  .ac-burger{ display:block; }
  .ac-nav{
    display:none;
    position:absolute;
    left:0; right:0; top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--ac-fond-carte);
    border-bottom:1px solid var(--ac-bord);
    padding:8px;
  }
  .ac-nav.ouvert{ display:flex; }
  .ac-nav a{ padding:15px 16px; font-size:17px; }
  .ac-nav a.actif::after{ display:none; }
}

/* ---------------------------------------------------------
   4. BOUTONS
   --------------------------------------------------------- */
.ac-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--ac-texte);
  font-weight:700;
  font-size:15px;
  letter-spacing:.4px;
  padding:15px 28px;
  border-radius:var(--ac-r-pilule);
  border:2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform var(--ac-transition), background var(--ac-transition),
             border-color var(--ac-transition), color var(--ac-transition);
  min-height:50px;              /* confortable au doigt */
}
.ac-btn:hover{ transform:translateY(-2px); }
.ac-btn:active{ transform:translateY(0) scale(.985); }
.ac-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.ac-btn-1{ background:var(--ac-accent); color:var(--ac-sur-accent); }
.ac-btn-1:hover{ background:var(--ac-accent-2); }

.ac-btn-2{ background:transparent; color:var(--ac-accent); border-color:var(--ac-accent); }
.ac-btn-2:hover{ background:var(--ac-accent-doux); }

.ac-btn-3{ background:transparent; color:var(--ac-texte-2); border-color:var(--ac-bord); }
.ac-btn-3:hover{ color:var(--ac-texte-1); border-color:var(--ac-texte-2); }

.ac-btn-large{ width:100%; font-size:17px; padding:18px 28px; }

/* ---------------------------------------------------------
   5. HERO DE COURS
   --------------------------------------------------------- */
.ac-hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--ac-r-carte);
  background:var(--ac-fond-carte);
  border:1px solid var(--ac-bord);
  margin:var(--ac-esp-md) 0 var(--ac-esp-lg);
}
.ac-hero-in{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--ac-esp-lg);
  align-items:center;
  padding:clamp(28px,5vw,56px);
}
.ac-hero h1 .surligne{ color:var(--ac-accent); }
.ac-hero p{ font-size:clamp(15px,1.9vw,18px); color:var(--ac-texte-2); max-width:46ch; }
.ac-hero-actions{ display:flex; flex-wrap:wrap; gap:var(--ac-esp-sm); margin-top:var(--ac-esp-md); }
.ac-hero-visuel{
  border-radius:var(--ac-r-bloc);
  overflow:hidden;
  aspect-ratio:16/11;
  background:var(--ac-fond-2);
}
.ac-hero-visuel img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:860px){
  .ac-hero-in{ grid-template-columns:1fr; gap:var(--ac-esp-md); }
  .ac-hero-visuel{ order:-1; aspect-ratio:16/9; }
}

/* Bandeau de piliers sous le hero (Prise de son · Acoustique · Mixage…) */
.ac-piliers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--ac-esp-sm);
  padding:var(--ac-esp-md) 0;
  border-top:1px solid var(--ac-bord);
  border-bottom:1px solid var(--ac-bord);
  margin-bottom:var(--ac-esp-lg);
}
.ac-pilier{
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--ac-texte-2);
}
.ac-pilier .ico{ display:block; font-size:26px; margin-bottom:6px; color:var(--ac-accent); }

/* ---------------------------------------------------------
   6. CARTE DE COURS
   --------------------------------------------------------- */
.ac-grille{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--ac-esp-md);
}
@media (max-width:1000px){ .ac-grille{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .ac-grille{ grid-template-columns:1fr; } }

.ac-carte{
  display:flex;
  flex-direction:column;
  background:var(--ac-fond-carte);
  border:1px solid var(--ac-bord);
  border-radius:var(--ac-r-carte);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform var(--ac-transition), border-color var(--ac-transition),
             box-shadow var(--ac-transition);
}
.ac-carte:hover{
  transform:translateY(-4px);
  border-color:var(--ac-accent);
  box-shadow:var(--ac-ombre);
}
.ac-carte-img{
  position:relative;
  aspect-ratio:16/9;
  background:var(--ac-fond-2);
  overflow:hidden;
}
.ac-carte-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ac-carte-ico{
  position:absolute;
  left:14px; bottom:-18px;
  width:40px; height:40px;
  border-radius:11px;
  background:var(--ac-accent);
  color:var(--ac-sur-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  box-shadow:var(--ac-ombre);
}
.ac-carte-corps{ padding:26px 20px 20px; display:flex; flex-direction:column; flex:1; }
.ac-carte-corps h3{ margin:0 0 6px; text-transform:uppercase; letter-spacing:.3px; }
.ac-carte-corps p{ font-size:14px; color:var(--ac-texte-2); flex:1; }

.ac-carte-pied{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:var(--ac-esp-sm);
}
.ac-carte-pied .compte{
  font-size:12px;
  font-weight:600;
  color:var(--ac-texte-2);
  white-space:nowrap;
}
.ac-fleche{
  margin-left:auto;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--ac-accent);
  color:var(--ac-sur-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  flex:0 0 auto;
}
.ac-carte.verrou{ opacity:.55; pointer-events:none; }
.ac-badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:var(--ac-r-pilule);
  background:var(--ac-accent-doux);
  color:var(--ac-accent);
}

/* ---------------------------------------------------------
   7. BARRE DE PROGRESSION
   --------------------------------------------------------- */
.ac-progress{
  height:6px;
  flex:1;
  border-radius:var(--ac-r-pilule);
  background:var(--ac-fond-2);
  overflow:hidden;
}
.ac-progress span{
  display:block;
  height:100%;
  border-radius:var(--ac-r-pilule);
  background:var(--ac-accent);
  width:0;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------
   8. FIL D'ARIANE + EN-TÊTE DE LEÇON
   --------------------------------------------------------- */
.ac-fil{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 0;
  border-bottom:1px solid var(--ac-bord);
  font-size:13px;
  color:var(--ac-texte-2);
}
.ac-fil a{ color:var(--ac-texte-2); text-decoration:none; }
.ac-fil a:hover{ color:var(--ac-accent); }
.ac-fil .sep{ opacity:.4; }
.ac-fil .droite{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:210px;
}
.ac-fil .droite .pct{ font-weight:700; color:var(--ac-texte-1); }

.ac-lecon-entete{ padding:var(--ac-esp-lg) 0 var(--ac-esp-md); }
.ac-lecon-entete h1{ margin-bottom:6px; }
.ac-lecon-entete .accroche{
  font-family:var(--ac-titre);
  font-weight:700;
  font-size:clamp(17px,2.4vw,23px);
  color:var(--ac-texte-2);
  margin-bottom:var(--ac-esp-sm);
}

/* ---------------------------------------------------------
   9. BLOCS PÉDAGOGIQUES
   Langage visuel commun à tous les cours.
   --------------------------------------------------------- */
.ac-blocs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--ac-esp-sm);
  margin:var(--ac-esp-md) 0;
}
.ac-bloc{
  background:var(--ac-fond-carte);
  border:1px solid var(--ac-bord);
  border-radius:var(--ac-r-bloc);
  padding:20px 22px;
}
.ac-bloc-titre{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--ac-titre);
  font-weight:800;
  font-size:14px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--ac-accent);
  margin-bottom:12px;
}
.ac-bloc-titre .ico{ font-size:20px; }
.ac-bloc p:last-child{ margin-bottom:0; }
.ac-bloc ol, .ac-bloc ul{ margin:0; padding-left:20px; }
.ac-bloc li{ margin-bottom:8px; }
.ac-bloc li:last-child{ margin-bottom:0; }

/* Variante mise en avant : l'exercice */
.ac-bloc.exercice{
  background:var(--ac-accent-bloc);
  border-color:var(--ac-accent);
}
.ac-bloc.exercice .ac-bloc-titre{ color:var(--ac-sur-accent-bloc); }
.ac-bloc.exercice, .ac-bloc.exercice li, .ac-bloc.exercice p{ color:var(--ac-sur-accent-bloc); }

/* Réglages recommandés : lignes clé / valeur alignées */
.ac-reglages{ font-size:14px; }
.ac-reglages div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:7px 0;
  border-bottom:1px dashed var(--ac-bord);
}
.ac-reglages div:last-child{ border-bottom:none; }
.ac-reglages b{ font-weight:600; color:var(--ac-texte-2); }

/* Validation de leçon */
.ac-valider{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  background:var(--ac-valide-fond);
  border:1px solid var(--ac-valide-bord);
  border-radius:var(--ac-r-bloc);
  padding:18px 22px;
  margin:var(--ac-esp-md) 0;
}
.ac-valider .rond{
  width:38px; height:38px;
  border-radius:50%;
  border:2px solid var(--ac-valide-bord);
  color:var(--ac-valide-bord);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  flex:0 0 auto;
}
.ac-valider .txt strong{ display:block; font-family:var(--ac-titre); font-size:15px; letter-spacing:.5px; }
.ac-valider .txt span{ font-size:13px; color:var(--ac-texte-2); }
.ac-valider .ac-btn{ margin-left:auto; }
@media (max-width:600px){ .ac-valider .ac-btn{ margin-left:0; width:100%; } }

/* Lecteur audio avant / après */
.ac-audio{ display:flex; flex-direction:column; gap:10px; }
.ac-audio-ligne{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
}
.ac-audio-ligne .lire{
  width:34px; height:34px;
  border-radius:50%;
  border:none;
  background:var(--ac-accent);
  color:var(--ac-sur-accent);
  font-size:13px;
  cursor:pointer;
  flex:0 0 auto;
}
.ac-audio-ligne .duree{ margin-left:auto; color:var(--ac-texte-2); font-size:12px; }

/* Navigation entre leçons */
.ac-lecon-nav{
  display:flex;
  gap:var(--ac-esp-sm);
  flex-wrap:wrap;
  margin:var(--ac-esp-lg) 0 var(--ac-esp-xl);
}
.ac-lecon-nav .ac-btn{ flex:1; min-width:180px; }

/* Prochaines leçons */
.ac-prochaines{ margin-bottom:var(--ac-esp-xl); }
.ac-prochaines h3{
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ac-texte-2);
  margin-bottom:var(--ac-esp-sm);
}
.ac-prochaines-liste{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;
}
.ac-prochaine{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--ac-bord);
  border-radius:var(--ac-r-petit);
  background:var(--ac-fond-carte);
  text-decoration:none;
  color:inherit;
  transition:border-color var(--ac-transition);
}
.ac-prochaine:hover{ border-color:var(--ac-accent); }
.ac-prochaine .num{
  font-family:var(--ac-titre);
  font-weight:900;
  font-size:19px;
  color:var(--ac-texte-2);
}
.ac-prochaine .lbl{ font-size:13px; line-height:1.35; }

/* ---------------------------------------------------------
   10. SOMMAIRE DU COURS
   --------------------------------------------------------- */
.ac-sommaire{
  background:var(--ac-fond-carte);
  border:1px solid var(--ac-bord);
  border-radius:var(--ac-r-carte);
  padding:22px;
}
.ac-sommaire-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-bottom:1px solid var(--ac-bord);
  padding:14px 6px;
  font-family:var(--ac-texte);
  font-size:15px;
  color:var(--ac-texte-1);
  cursor:pointer;
  transition:color var(--ac-transition);
}
.ac-sommaire-item:last-child{ border-bottom:none; }
.ac-sommaire-item:hover{ color:var(--ac-accent); }
.ac-sommaire-item .num{
  font-family:var(--ac-titre);
  font-weight:800;
  font-size:13px;
  color:var(--ac-texte-2);
  min-width:24px;
}
.ac-sommaire-item .etat{ margin-left:auto; font-size:15px; }
.ac-sommaire-item.termine .etat{ color:var(--ac-valide-bord); }
.ac-sommaire-item.actif{ color:var(--ac-accent); font-weight:600; }

/* ---------------------------------------------------------
   11. PIED DE PAGE
   --------------------------------------------------------- */
.ac-footer{
  border-top:1px solid var(--ac-bord);
  margin-top:var(--ac-esp-xl);
  padding:var(--ac-esp-lg) 0;
}
.ac-footer-in{
  max-width:var(--ac-largeur);
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:var(--ac-esp-md);
  flex-wrap:wrap;
}
.ac-footer-mots{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--ac-texte-2);
  font-weight:700;
}
.ac-footer-mots span::after{ content:" ·"; opacity:.5; }
.ac-footer-mots span:last-child::after{ content:""; }
.ac-footer-fin{ margin-left:auto; font-size:12px; color:var(--ac-texte-2); }

/* ---------------------------------------------------------
   12. APPARITION DOUCE (animation discrète)
   --------------------------------------------------------- */
.ac-apparait{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.ac-apparait.vu{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .ac *, .ac *::before, .ac *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .ac-apparait{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------
   13. AJUSTEMENTS MOBILE
   --------------------------------------------------------- */
@media (max-width:600px){
  .ac-section{ padding:var(--ac-esp-lg) 0; }
  .ac-conteneur{ padding:0 16px; }
  .ac-bloc{ padding:18px; }
  .ac-fil .droite{ width:100%; min-width:0; margin-left:0; }
  .ac-lecon-nav .ac-btn{ min-width:0; width:100%; }
}