:root{
  --premiere:#2563eb;
  --accent:var(--premiere);

  --accent-soft:#eff6ff;
  --accent-border:#bfdbfe;

  --card:#f8fafc;
  --muted:#475569;
  --text:#0f172a;
}


/* =========================================================
   1. CONTENEURS
   ========================================================= */

.container{
  padding-left:clamp(12px,3vw,24px);
  padding-right:clamp(12px,3vw,24px);
}

.page{
  max-width:1200px;
  margin:0 auto;
  padding-bottom:40px;
}


/* =========================================================
   2. EN-TÊTE DES PAGES DE COURS
   ========================================================= */

.page-header{
  padding-top:1rem;
  padding-bottom:1.2rem;
}

.page-header .badge{
  display:inline-block;
  margin:0 0 1rem;
}

.page-header h1{
  margin:0;
  color:#0b1596;
}

.page-header .muted{
  margin-top:.8rem;
  color:var(--muted);
}


/* =========================================================
   3. BADGE
   ========================================================= */

.badge{
  padding:.28rem .66rem;

  background:var(--accent);
  color:#fff;

  border-radius:999px;

  font-weight:700;
}


/* =========================================================
   4. MISE EN PAGE DE LA LEÇON
   ========================================================= */

.lesson-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 320px;

  gap:28px;

  align-items:start;
}


/* =========================================================
   5. CONTENU PRINCIPAL
   ========================================================= */

.prose{
  position:relative;
  z-index:0;

  min-width:0;

  color:var(--text);

  font-size:1.06rem;
  line-height:1.72;
}

.prose h2{
  color:#0b1596;
}

.prose h3{
  color:#172554;
}


/* =========================================================
   6. SOMMAIRE DES COURS CLASSIQUES
   ========================================================= */

.course-toc{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:.55rem;

  margin:0 0 1.2rem;
  padding:1rem;

  border:1px solid var(--accent-border);
  border-radius:14px;

  background:#f8fbff;
}

.course-toc::before{
  content:"Sommaire du cours";

  grid-column:1 / -1;

  margin-bottom:.15rem;

  color:var(--text);

  font-size:.92rem;
  font-weight:800;
}

.course-toc a{
  display:flex;
  align-items:center;

  min-height:42px;

  padding:.55rem .7rem;

  border:1px solid var(--accent-border);
  border-radius:9px;

  background:#fff;
  color:#1e3a8a;

  font-size:.84rem;
  font-weight:700;
  line-height:1.25;

  text-decoration:none;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.course-toc a:hover{
  background:var(--accent-soft);
  border-color:#93c5fd;

  transform:translateY(-1px);
}

.course-toc a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}


/* =========================================================
   7. OBJECTIF DANS LE FIL DU COURS
   ========================================================= */

body.theme-premiere .prose .callout{
  margin:0 0 1.4rem;

  padding:14px 16px;

  border:0;
  border-left:4px solid #2563eb;
  border-radius:10px;

  background:#eff6ff;
  color:#0f172a;

  box-shadow:none;
}

body.theme-premiere .prose .callout::before{
  content:none;
}

/*
 * Relief uniquement sur le terme "Objectif."
 */

body.theme-premiere .prose .callout strong{
  text-shadow:
    1px 1px 1px rgba(15,23,42,.28);
}

/* =========================================================
   8. IMAGES DU COURS
   ========================================================= */

.prose figure{
  margin:1.5rem auto;

  text-align:center;
}

.prose figure img{
  display:block;

  width:auto;
  max-width:100%;
  height:auto;

  margin:0 auto;
}

.prose figure img.img-small{
  max-width:40%;
}

.prose figure img.img-medium{
  max-width:60%;
}

.prose figure img.img-large{
  max-width:80%;
}

.prose figcaption{
  margin-top:.6rem;

  color:var(--muted);

  font-size:.9rem;
  line-height:1.4;

  text-align:center;
}


/* =========================================================
   8. TABLEAUX DU COURS
   ========================================================= */

.prose .tbl{
  width:100%;
  max-width:100%;

  overflow-x:auto;

  margin:1.2rem 0;

  border:1px solid var(--accent-border);
  border-radius:12px;

  background:#fff;

  -webkit-overflow-scrolling:touch;
}

.prose .tbl table{
  display:table;

  width:max-content;
  min-width:100%;

  margin:0;

  border-collapse:collapse;

  font-size:.88rem;
  line-height:1.3;
}

.prose .tbl th,
.prose .tbl td{
  padding:.42rem .46rem;

  text-align:center;
  white-space:nowrap;

  border-right:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
}

.prose .tbl th{
  background:var(--accent-soft);
  color:#1e3a8a;

  font-weight:700;
}

.prose .tbl tr:last-child th,
.prose .tbl tr:last-child td{
  border-bottom:0;
}

.prose .tbl th:last-child,
.prose .tbl td:last-child{
  border-right:0;
}


/* =========================================================
   9. COLONNE LATÉRALE
   ========================================================= */

.sidebar{
  position:sticky;
  top:96px;

  align-self:start;

  z-index:10;

  display:grid;
  gap:18px;

  grid-auto-rows:max-content;
}


/* =========================================================
   10. CARTES LATÉRALES GÉNÉRIQUES
   ========================================================= */

.sidebar .card{
  margin:0;
  padding:18px 20px;

  background:#fff;

  border:1px solid #e2e8f0;
  border-radius:18px;

  box-shadow:
    0 8px 24px rgba(15,23,42,.07),
    0 1px 3px rgba(15,23,42,.04);
}

.sidebar .card h3{
  margin:0 0 12px;

  color:#0f172a;

  font-weight:800;

  text-align:center;
}


/* =========================================================
   11. CARTE OBJECTIFS
   ========================================================= */

body.theme-premiere .sidebar .card.objectives{
  padding:18px 20px;

  background:#fff;

  border:1px solid #dbe5ef;
  border-radius:18px;
}

body.theme-premiere .sidebar .card.objectives h3{
  margin:0 0 12px;

  color:#0f172a;

  font-size:1.25rem;
  font-weight:800;
  line-height:1.2;

  text-align:center;

  /*
   * Petit relief typographique.
   * Pas de changement de couleur.
   */
  text-shadow:
    1px 1px 1px rgba(15,23,42,.28);
}

body.theme-premiere .sidebar .card.objectives ul{
  margin:0;
  padding-left:1.25rem;
}

body.theme-premiere .sidebar .card.objectives li{
  margin-bottom:.35rem;

  line-height:1.45;
}

body.theme-premiere .sidebar .card.objectives li:last-child{
  margin-bottom:0;
}


/* =========================================================
   12. "LE SAVIEZ-VOUS ?"
   ========================================================= */

body.theme-premiere .sidebar .card.tips{
  padding:18px 20px;

  background:#f8fafc;

  border:1px solid #dbe5ef;
  border-left:4px solid #94a3b8;
  border-radius:18px;

  /*
   * Relief de carte discret.
   * La couleur reste neutre.
   */
  box-shadow:
    0 8px 24px rgba(15,23,42,.07),
    0 1px 3px rgba(15,23,42,.04);
}

body.theme-premiere .sidebar .card.tips h3{
  margin:0 0 12px;

  color:#0f172a;

  font-weight:800;

  text-align:center;

  /*
   * Même relief typographique que "Objectifs".
   */
  text-shadow:
    1px 1px 1px rgba(15,23,42,.28);
}

body.theme-premiere .sidebar .card.tips .small{
  color:#475569;
}

body.theme-premiere .sidebar .card.tips code{
  color:#1e3a8a;
}


/* =========================================================
   13. TEXTE SECONDAIRE
   ========================================================= */

.small{
  color:var(--muted);

  font-size:.95rem;
}


/* =========================================================
   14. BOUTONS
   ========================================================= */

.btn{
  display:inline-block;

  padding:.6rem 1rem;

  border-radius:10px;

  background:var(--accent);
  color:#fff;

  text-decoration:none;
  font-weight:600;
}

.btn:hover{
  opacity:.92;
}


/* =========================================================
   15. BLOC NOTEBOOK
   ========================================================= */

.notebook-panel{
  margin:0 0 1.8rem;
  padding:1.3rem 1.4rem;

  border:1px solid #bfdbfe;
  border-left:4px solid var(--accent);
  border-radius:14px;

  background:#f8fbff;

  box-shadow:
    0 8px 24px rgba(15,23,42,.07);
}

.notebook-kicker{
  display:block;

  margin-bottom:.35rem;

  color:#475569;

  font-size:.8rem;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.06em;
}

.notebook-title{
  margin:0 0 .6rem;

  color:#0b1596;

  font-size:1.45rem;
}

.notebook-intro{
  margin:0 0 1rem;

  color:#334155;

  line-height:1.6;
}

.notebook-actions{
  display:flex;
  flex-wrap:wrap;

  gap:.7rem;

  margin-bottom:1rem;
}

.notebook-primary{
  background:var(--accent);
  color:#fff;
}

.notebook-secondary{
  background:#fff;
  color:#1d4ed8;

  border:1px solid #93c5fd;

  box-shadow:none;
}

.notebook-secondary:hover{
  background:#eff6ff;

  opacity:1;
}

.notebook-help{
  margin:0;

  color:#475569;

  font-size:.92rem;
  line-height:1.5;
}


/* =========================================================
   16. NOTEBOOKS / RESSOURCES PLUS ANCIENNES
   ========================================================= */

.nb-list{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

  gap:18px;

  margin-top:8px;
}

.card.nb{
  display:flex;
  flex-direction:column;

  gap:10px;
}

.card.nb .actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}


/* =========================================================
   17. ANCRES DU COURS
   ========================================================= */

.prose section[id],
.prose h2[id],
.prose h3[id]{
  scroll-margin-top:100px;
}


/* =========================================================
   18. RESPONSIVE
   ========================================================= */

@media (max-width:1024px){

  .lesson-grid{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:static;
  }

}


@media (max-width:760px){

  .course-toc{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media (max-width:520px){

  .page-header{
    padding-top:.8rem;
  }

  .course-toc{
    grid-template-columns:1fr;
  }

  .course-toc a{
    min-height:auto;
  }

  .prose .tbl table{
    font-size:.82rem;
  }

  .notebook-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .notebook-actions .btn{
    text-align:center;
  }
  .prose figure img.img-small,
  .prose figure img.img-medium,
  .prose figure img.img-large{
    max-width:100%;
  }

}