/* ===== Palette Terminale (VERT) ===== */
:root{
  --ci-green: #2e7d32;          /* vert principal (lisible) */
  --ci-green-weak: #e9f6ec;     /* vert très clair pour badges */
  --ci-deep: #1b5e20;           /* vert titre foncé */
  --ci-muted: #5e6a80;          /* texte secondaire */
  --ci-line: #e6ebf2;           /* traits/cartes */
  --ci-radius: 12px;
  --ci-shadow: 0 6px 24px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
}

/* Badge Terminale (vert) */
.theme-terminale .page-header .badge{
  background: var(--ci-green-weak);
  color: var(--ci-green);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
}

/* Titres en vert (pas de bleu) */
.theme-terminale .page-header h1{
  color: var(--ci-deep);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  margin: .2rem 0 .4rem;
}
.theme-terminale .prose h2{ color: var(--ci-deep); }

/* Texte secondaire (gris doux) */
.theme-terminale .page-header .muted{ color: var(--ci-muted); }

/* Cartes & encadrés */
.card{
  background:#fff; border:1px solid var(--ci-line);
  border-radius: var(--ci-radius); padding:16px 16px 14px; box-shadow: var(--ci-shadow);
}
.card h3{ margin-top:0; color: var(--ci-deep); }
.card + .card{ margin-top:16px; }

/* Callouts — bord vert pour “Objectif” et “À retenir” */
.callout{
  border:1px solid var(--ci-line);
  border-left:6px solid var(--ci-green);
  background:#f4fbf5; /* léger vert très pâle */
  padding:14px 16px; border-radius: var(--ci-radius); box-shadow: var(--ci-shadow);
  margin:16px 0 20px;
}
/* Variante alerte douce (orange) */
.callout.warn{
  border-left-color:#f7b733;
  background:#fff9ec;
}

/* Notes (boîtes info légères) */
.note{
  background:#f7faf9;
  border:1px solid var(--ci-line);
  border-radius: var(--ci-radius);
  padding:12px 14px;
  margin:12px 0;
}

/* Tableaux */
.tbl{ overflow-x:auto; }
.tbl table{
  width:100%; border-collapse:collapse; border:1px solid var(--ci-line);
  background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--ci-shadow);
}
.tbl thead tr{ background:#eef7f0; }          /* entête avec un soupçon de vert */
.tbl th, .tbl td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--ci-line); }
.tbl th{ font-weight:700; color: var(--ci-deep); }

/* Figures & galeries */
.fig{ margin:0; }
.fig img{ width:100%; height:auto; display:block; border-radius:8px; }
.fig figcaption{ text-align:center; color:#3c4a67; font-size:13px; margin-top:6px; }
.fig-wide{
  background:#fff; padding:12px; border:1px solid var(--ci-line);
  border-radius: var(--ci-radius); box-shadow: var(--ci-shadow);
}
.fig-row{ display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.fig-row .fig{
  flex:1 1 240px; background:#fff; padding:12px; border:1px solid var(--ci-line);
  border-radius: var(--ci-radius); box-shadow: var(--ci-shadow);
}

/* Détails / colonnes */
.details{
  margin-top:10px; background:#fff; border:1px solid var(--ci-line);
  border-radius: var(--ci-radius); padding:10px 14px; box-shadow: var(--ci-shadow);
}
.details summary{ font-weight:700; cursor:pointer; color: var(--ci-deep); }
.cols-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:6px 24px; }

/* Exemple (accent vert) */
.example{
  margin-top:10px; padding:12px 14px;
  border-left:4px solid var(--ci-green);
  background:#f3fcf4; border:1px solid var(--ci-line);
  border-radius: var(--ci-radius);
}

/* Utilitaires */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start; }
@media (max-width:1060px){ .grid-2{ grid-template-columns:1fr; } }
/* ==== Terminale (mêmes verts que "Structures de données I") ==== */
:root{
  --term-accent: #22c55e;      /* vert pilule/boutons (comme "Télécharger le .ipynb") */
  --term-accent-weak: #eafaf0; /* fond pâle vert */
  --term-title: #1f7a35;       /* vert foncé des titres */
  --term-muted: #5e6a80;
  --term-line: #e6ebf2;
}

/* Badge pilule : identique SD-I (fond vert + texte blanc + légère ombre) */
.theme-terminale .page-header .badge{
  background: var(--term-accent);
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(34,197,94,.25);
}

/* Titres verts */
.theme-terminale .page-header h1{ color: var(--term-title); }
.theme-terminale .prose h2{ color: var(--term-title); }

/* Callout principal : fond bleu très pâle + barre latérale VERTE arrondie (style SD-I) */
.theme-terminale .prose .callout{
  background:#eef6ff;          /* même bleu pâle que SD-I */
  border:0;
  border-radius:18px;
  padding:18px 20px 18px 22px;
  box-shadow: 0 8px 28px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  position:relative;
}
.theme-terminale .prose .callout::before{
  content:"";
  position:absolute; left:12px; top:12px; bottom:12px; width:8px;
  background: var(--term-accent);
  border-radius:999px;
}
.theme-terminale .prose .callout > *{ margin-left:14px; }

.theme-terminale .page-header .muted{ color: var(--term-muted); }

/* Cartes aside : mêmes rayons/ombres que SD-I */
.sidebar .card{
  border:1px solid var(--term-line);
  border-radius:22px;
  box-shadow: 0 16px 40px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);
  padding:18px 18px 16px;
}
.sidebar .card h3{ color:#0f172a; font-weight:800; }

/* Détails cosmétiques (mêmes angles/ombres) */
.tbl table,
.fig-wide, .fig-row .fig, .card{
  border-radius:18px;
  box-shadow: 0 12px 32px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
}

/* Listes de questions : une ligne par item + marge lisible */
.prose ol, .prose ul{
  padding-left: 1.25rem;
  margin: .6rem 0 1rem;
}
.prose ol li, .prose ul li{
  display: list-item;      /* force une puce/numéro par ligne */
  margin-bottom: .4rem;    /* espace entre questions */
}
.questions li{ margin-bottom: .6rem; } /* un peu plus d’air pour cette liste */

/* —— Largeurs d'images réutilisables (fonctionnent malgré width:100% ailleurs) —— */
.prose .fig img.w-95{ width:95% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-90{ width:90% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-85{ width:85% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-80{ width:80% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-75{ width:75% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-70{ width:70% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-66{ width:66% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-60{ width:60% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-50{ width:50% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-40{ width:40% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-33{ width:33% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-30{ width:30% !important; height:auto !important; display:block; margin:0 auto; }
.prose .fig img.w-25{ width:25% !important; height:auto !important; display:block; margin:0 auto; }

/* Par défaut: plein écran sur mobile (lisibilité) */
@media (max-width:640px){
  .prose .fig img[class^="w-"]:not(.keep),
  .prose .fig img[class*=" w-"]:not(.keep){
    width:100% !important;
  }
}
/* Ajoute la classe .keep si tu veux garder 30% même sur mobile */

/* Largeurs pour .tbl */
.tbl.w-60 { width:60% !important; margin:0 auto; }
.tbl.w-50 { width:50% !important; margin:0 auto; }
.tbl.w-40 { width:40% !important; margin:0 auto; }
.tbl.w-30 { width:30% !important; margin:0 auto; }

@media (max-width:640px){
  .tbl.w-60, .tbl.w-50, .tbl.w-40, .tbl.w-30 { width:100% !important; } /* lisible sur mobile */
}