.lesson-wrap{max-width:1200px;margin:0 auto;padding:22px 20px}
.lesson-grid{display:grid;grid-template-columns:260px 1fr 300px;gap:18px}
@media (max-width:1100px){.lesson-grid{grid-template-columns:1fr;gap:14px}}
.sidebar{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:var(--shadow);position:sticky;top:76px;height:max-content}
.sidebar h3{margin:0 0 8px;text-align:center}
.sidebar a{display:block;padding:6px 8px;border-radius:10px;border:1px solid transparent}
.sidebar a:hover{border-color:var(--border)}
.objectifs{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow);position:sticky;top:76px;height:max-content}
.objectifs h3{margin-top:0}
.hero-lesson{position:relative;min-height:320px;display:grid;place-items:center;overflow:hidden;border-radius:18px}
.hero-lesson img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(10%)}
.hero-lesson .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.25))}
.hero-lesson .inner{position:relative;color:#fff;text-align:center;padding:50px 10px}
.hero-lesson h1{margin:0;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 3px 18px rgba(0,0,0,.45)}
.section-block{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-top:16px;box-shadow:var(--shadow)}
.section-block h2{margin:0 0 8px}
.badge{display:inline-block;background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;border-radius:999px;padding:3px 10px;font-size:12px;margin-left:6px}
.open-link{font-size:12px;margin-left:8px}

/* ============ Leçons : titres colorés par niveau ============ */
/* Règle commune : bannière et titres utilisent les variables */
.lesson .hero-lesson .lesson-title,
.hero-lesson.no-hero-bg .lesson-title{
  color:var(--lesson-title-color,#000099);
  text-shadow:4px 4px 4px var(--lesson-title-shadow,#aaa);
}
.lesson .hero-lesson .lesson-title{
  font-weight:800;text-transform:uppercase;letter-spacing:3px;text-align:center;
  margin:0 0 12px;font-size:clamp(28px,3.8vw,40px)
}
.lesson article h2{
  font-weight:700;margin:32px 0 14px;
  color:var(--lesson-title-color,#000099);
  text-shadow:2px 2px 2px rgba(0,0,0,.08)
}

/* Largeur de référence (idem .lesson-wrap) */
:root{--page-max:1200px;--page-pad:20px}

/* Rubriques (pas leçons) */
body:not(.lesson) .hero-lesson{min-height:auto;padding:0;background:none;box-shadow:none;border-radius:0}
body:not(.lesson) .hero-lesson>img,body:not(.lesson) .hero-lesson>.overlay{display:none}
body:not(.lesson) .hero-lesson .inner{max-width:var(--page-max);margin:0 auto;padding:28px var(--page-pad)}
body:not(.lesson) .hero-lesson .lesson-title{font-size:clamp(32px,3.6vw,50px);margin:0 0 12px}

/* Bannière sans image */
.hero-lesson.no-hero-bg img,.hero-lesson.no-hero-bg .overlay{display:none!important}
.hero-lesson.no-hero-bg{background:none!important;box-shadow:none!important;padding:2rem 1rem}
.hero-lesson.no-hero-bg .inner{position:static;transform:none;margin:0 auto;max-width:1100px}
.hero-lesson.no-hero-bg .lesson-title{font-size:3rem;font-weight:bold;text-transform:uppercase;text-align:center;margin-bottom:40px}

/* Fond global */
html,body{background:#fff!important}

/* === Couleurs par niveau (leçons) === */
/* Première : ancien bleu */
.lesson.level-premiere{
  --lesson-title-color:#000099;
  --lesson-title-shadow:#aaa;
  --rubric-blue:#000099;
}
/* Terminale : vert */
.lesson.level-terminale{
  --lesson-title-color:#0b7d2c;
  --lesson-title-shadow:#bfe8cc;
  --rubric-blue:#0b7d2c;
}
.sidebar .card {
    margin-bottom: 2rem;   /* ou 1.5rem selon ta préférence */
}
.sidebar .card ul {
    list-style-type: square;
}

/* Forcer aussi les titres d'encadrés latéraux */
.sidebar h3,.objectifs h3{color:var(--lesson-title-color)!important}
.section-block h2{color:var(--lesson-title-color)!important}

/* === Pages “rubriques” avec class thème (si utilisé) === */
.theme-premiere .page-header h1{color:#000099!important}
.theme-premiere .prose h2,.theme-premiere main h2{color:#000099!important}
.theme-terminale .page-header h1{color:#0b7d2c!important}
.theme-terminale .prose h2,.theme-terminale main h2{color:#0b7d2c!important}

.prose ul { list-style-type: square; }

/* Liens ancrés dans H2 */
.prose h2 a{color:inherit!important;text-decoration:underline;text-underline-offset:3px}

/* ==== Exergue des titres cliquables / sommaire ==== */
.sidebar a{
  color:var(--rubric-blue,#000099)!important;
  font-weight:600;position:relative;border-radius:10px;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease
}
.sidebar a::before{content:"›";margin-right:.45rem;opacity:.7}
.sidebar a:hover{background:#eef6ff;border-color:#b6daff;transform:translateX(2px)}
.sidebar a:focus-visible{outline:2px solid var(--rubric-blue,#000099);outline-offset:2px}

/* Titres cliquables dans le contenu */
.section-block h2 a{
  color:var(--rubric-blue,#000099)!important;
  text-decoration:underline;text-underline-offset:3px;font-weight:700;cursor:pointer
}
.section-block h2 a::after{content:" ↗";font-weight:400;opacity:.75}
.section-block h2 a:hover{text-decoration-thickness:2px}

/* Hover/Focus en vert pour Terminale (sommaire) */
.lesson.level-terminale .sidebar a:hover{background:#ecfdf5;border-color:#bbf7d0}
.lesson.level-terminale .sidebar a:focus-visible{outline-color:#0b7d2c}

/* Badge Terminale vert (optionnel) */
.lesson.level-terminale .badge{background:#dcfce7;color:#166534;border-color:#bbf7d0}

.intro-block { padding: 22px 24px; }
.intro-block p { margin: 0 0 14px; line-height: 1.7; font-size: 18px; color: #334155; }
.intro-block p:last-child { margin-bottom: 0; }
/* === OBJECTIFS : accent visuel léger et cohérent par niveau === */
.objectifs{
  border-left: 4px solid var(--lesson-title-color, #0d6efd);
  background: #fafcff;                /* fallback très clair */
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}



.lesson.level-premiere .objectifs{
  background: #f5f8ff;                /* bleu très clair */
  border-color: #0d6efd;
}
.lesson.level-terminale .objectifs{
  background: #f2fbf5;                /* vert très clair */
  border-color: #0b7d2c;
}

/* Titre et puces accordées à la couleur du niveau */
.objectifs h3{
  letter-spacing:.2px; font-weight: 800;
  color: var(--lesson-title-color, #0d6efd);
  margin-top: 0;
}

/* Couleur des puces (navigateurs récents) */
.objectifs ul{
  padding-left: 1.2rem;
  margin: .5rem 0 0 0;
}
.objectifs li::marker{
  color: var(--lesson-title-color, #0d6efd);
}

/* Lisibilité : interligne et petits espacements */
.objectifs li{
  line-height: 1.45;
  margin: .35rem 0;
}

/* === Objectifs : accents par niveau === */

/* Première (bleu – déjà en place, rappel pour symétrie) */
.lesson.level-premiere .objectifs h3 { color:#0d6efd; }
.lesson.level-premiere .objectifs li::marker { color:#0d6efd; }
.lesson.level-premiere .objectifs { border-left:4px solid #b6daff; }

/* Terminale (vert) */
.lesson.level-terminale .objectifs h3 { color:#0b7d2c; }
.lesson.level-terminale .objectifs li::marker { color:#0b7d2c; }
.lesson.level-terminale .objectifs { border-left:4px solid #bbf7d0; }

/* option doux: petite ombre pour mieux détacher la colonne objectifs */
.objectifs { box-shadow: 0 10px 24px rgba(0,0,0,.06); }

/* === HERO : titre lisible SANS bandeau === */
.hero-lesson .lesson-title{
  /* pas de cartouche */
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* lisibilité du texte uniquement */
  color: var(--lesson-title-color, #000099);
  text-shadow:
    0 4px 20px rgba(0,0,0,.55),   /* halo sombre pour détacher */
    0 1px 0 rgba(255,255,255,.10);
}

/* fin trait autour des lettres (si dispo) */
@supports (-webkit-text-stroke: 1px white){
  .hero-lesson .lesson-title{
    -webkit-text-stroke: 1px rgba(0,0,0,.08);
  }
}

/* overlay léger pour aider la lecture, sans masquer l’image */
.hero-lesson .overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,6,23,.60), rgba(2,6,23,.30)),
    radial-gradient(circle at 50% 55%, rgba(2,6,23,0) 0%, rgba(2,6,23,.20) 55%, rgba(2,6,23,.40) 100%);
  mix-blend-mode: multiply;
}

/* conserver la taille/centrage du héros */
.hero-lesson{
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
}
.hero-lesson img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(10%);
}
.hero-lesson .inner{
  position: relative;
  color: #fff;
  text-align: center;
  padding: 50px 10px;
}

 .b2h { max-width: 720px; background:#fff; border:1px solid #dfe3e6; border-radius:12px;
         padding:16px 18px; box-shadow:0 4px 18px rgba(0,0,0,.06); }
  .b2h h4 { margin:.2rem 0 0.6rem; font-size:1.05rem; }
  .b2h code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
              font-variant-numeric: tabular-nums; }

  .steps { margin:0; padding-left:1.1rem; }
  .steps li { margin:.6rem 0; }

  .bits { display:flex; align-items:baseline; gap:.5rem; margin:.3rem 0 .4rem; }
  .lsb { color:#6b7280; font-size:.9em; }

  .groups { display:flex; align-items:center; gap:.5rem; margin:.3rem 0 .2rem; }
  .group { border:1px solid #cfd8dc; border-radius:10px; padding:.25rem .5rem; letter-spacing:.06em; }
  .sep { color:#9aa3a9; }

  .pad { opacity:.45; }

  .note { margin:.2rem 0 0; color:#445; font-size:.92em; }

  .map { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.5rem; margin:.5rem 0; }
  .cell { border:1px dashed #cfd8dc; border-radius:10px; padding:.35rem .5rem; text-align:center; }

  .result { margin:.2rem 0 0; font-size:1.02rem; }
/* Addition binaire : signe | chiffres (grille) | base */
.bin-add{
  display:inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --cols: 6; /* longueur du résultat (ici 110000 → 6 colonnes) */
}
.bin-add .row{
  display:flex; align-items:baseline; gap:.6rem;
}
.bin-add .sign{ display:inline-block; width:1ch; text-align:center; }
.bin-add .base{ display:inline-block; width:1.2ch; }

/* Grille des chiffres : N colonnes fixes */
.bin-add .digits{
  display:grid;
  grid-template-columns: repeat(var(--cols), 1ch);
  gap:.35rem;
  text-align:center;
  font-variant-numeric: tabular-nums;
}
.bin-add .pad{ opacity:0; }                  /* blanc invisible pour calage à droite */

.bin-add .carry .digits span{ color:#d22; }  /* retenue en rouge */
.bin-add .sum .digits{ border-top:1px solid #333; padding-top:.25rem; }

/* Multiplication binaire : 3 colonnes (signe | chiffres | base) */
.bin-mul{
  display:inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --cols: 10; /* ← nb de colonnes = nb de chiffres du résultat */
}

.bin-mul .row{
  display:flex; align-items:baseline; gap:.6rem;
}

.bin-mul .sign{ display:inline-block; width:1ch; text-align:center; }
.bin-mul .base{ display:inline-block; width:1.2ch; }

/* Grille des chiffres : N colonnes fixes (1ch) */
.bin-mul .digits{
  display:grid;
  grid-template-columns: repeat(var(--cols), 1ch);
  gap:.35rem;
  text-align:center;
  font-variant-numeric: tabular-nums;
}

/* espaces invisibles pour caler à gauche/droite */
.bin-mul .pad{ opacity:0; }

/* Lignes horizontales */
.bin-mul .rule .digits{ border-top:1px solid #333; height:0; }

/* (optionnel) emphase légère sur les produits partiels */
.bin-mul .pp .digits span{ opacity:.95; }

/* Retire le décor du composant figure existant */
.fig--naked { background:none; border:0; box-shadow:none; padding:0; border-radius:0; }

/* Fond perdu horizontal : compense le padding interne de .card */
.bleed-x {
  margin-left: calc(-1 * var(--card-pad, 1rem));
  margin-right: calc(-1 * var(--card-pad, 1rem));
}
.fig-row {
  display: flex;
  justify-content: center;
  gap: 2rem;       /* espace horizontal entre les figures */
  flex-wrap: wrap; /* passe en colonne si l'écran est trop étroit */
}
.fig-row figure {
  text-align: center;
  flex: 1 1 auto;
  max-width: 250px;
}

/* Indentation douce des listes dans le contenu */
.prose :where(ul, ol) {
  margin-left: .5rem;      /* léger décalage global */
  padding-left: 1.25rem;   /* garde des puces lisibles */
}

/* Dans une card, on rentre un peu plus les listes */
.card :where(ul, ol) {
  margin-left: .25rem;
  padding-left: 1.25rem;
}

/* Listes "questions" si tu veux un look numéroté propre */
.prose ol.questions { 
  margin-left: .5rem; 
  padding-left: 1.25rem; 
}

/* =========================================
   ACCORDÉON — Gestion des processus
   ========================================= */

/* Le conteneur ne doit pas décaler par rapport aux autres liens */
.sidebar .toc-accordion {
  margin: 0.3rem 0;
  padding: 0;
}

/* Summary = même style visuel que les liens de niveau 1 */
.sidebar .toc-accordion > summary {
  list-style: none;          /* pas de style de liste */
  display: block;
  margin: 0.35rem 0;         /* même marge que tes <a> */
  padding: 0;
  font-size: 1em;
  font-weight: 600;          /* en gras, comme les autres titres */
  color: #0a662e;
  cursor: pointer;
}

/* supprime le triangle natif */
.sidebar .toc-accordion > summary::-webkit-details-marker {
  display: none;
}

/* Préfixe "› •" comme pour les autres lignes du contenu */
.sidebar .toc-accordion > summary::before {
  content: "› • ";
  color: #0a662e;
  margin-right: 0.15rem;
  font-weight: 600;
}

/* =========================================
   Sous-séances (niveau 2)
   ========================================= */

.sidebar .toc-sub {
  margin: 0.2rem 0 0.4rem 2rem;  /* indentation sous Gestion des processus */
  padding-left: 0;
}

/* chaque séance = ligne avec petit carré vert */
.sidebar .toc-sub li {
  list-style: none;              /* pas de bullet natif */
  margin: 0.04rem 0;
  padding-left: 0.9rem;          /* espace pour le carré */
  position: relative;
}

/* carré vert, plus petit et correctement centré */
.sidebar .toc-sub li::before {
  content: "■";
  color: #0a662e;
  position: absolute;
  left: 0;
  top: 0.4em;                    /* décale vers le bas pour centrer */
  font-size: 0.4em;              /* carré plus petit */
}

/* texte des sous-puces : plus petit pour marquer la hiérarchie */
.sidebar .toc-sub a {
  font-size: 0.82em;
  color: #0a662e;
  text-decoration: none;
  line-height: 1.2em;
}

/* hover */
.sidebar .toc-sub a:hover {
  text-decoration: underline;
}

/* très important : aucun chevron "›" ajouté devant les sous-liens */
.sidebar .toc-sub a::before {
  content: none !important;
}

.fig-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    margin: 1.2rem 0;
}

.fig-row .fig {
    flex: 1;
    text-align: center;
}

.fig-row .fig-img {
    max-width: 100%;
    height: auto;
}

/* ---- Personnalisation individuelle (tu modifies seulement ces tailles) ---- */

/* Image 1 */
.fig-not-int {
    width: 60%;    /* change ici pour ajuster individuellement */
}

/* Image 2 */
.fig-not-usa {
    width: 70%;    /* change ici pour ajuster individuellement */
}

/* ————————————————————————————————
   TABLES DE VÉRITÉ (toutes les .tbl.truth)
   ———————————————————————————————— */

.tbl.truth {
    display: flex;
    justify-content: center;
    margin: 1.2rem 0 1.6rem 0;
}

.tbl.truth table {
    border-collapse: collapse;
    width: auto;                  /* largeur minimale, pas pleine page */
    min-width: 160px;             /* pour éviter l'écrasement */
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.95rem;
}

/* En-tête */
.tbl.truth thead th {
    background: #f3f3f3;
    padding: 0.4rem 0.7rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #ccc;
    white-space: nowrap;
}

/* Cellules */
.tbl.truth td,
.tbl.truth th {
    padding: 0.3rem 0.55rem;      /* compact */
    text-align: center;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    width: 52px;                  /* largeur des colonnes (ajuste ici) */
}

/* Pas de bordure droite sur la dernière colonne */
.tbl.truth td:last-child,
.tbl.truth th:last-child {
    border-right: none;
}

/* Pas de bordure basse sur la dernière ligne */
.tbl.truth tbody tr:last-child td {
    border-bottom: none;
}

/* Survol léger */
.tbl.truth tbody tr:hover {
    background: #fafafa;
}


/* ========= IMAGES RESPONSIVES ========= */
.prose img,
.sidebar img,
.fig img,
figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========= TABLES RESPONSIVES ========= */
/* Conteneur générique pour les tables (tu l'utilises déjà : .tbl small, etc.) */
.tbl {
  margin-block: 1.5rem;
  overflow-x: auto;              /* scroll horizontal si besoin */
  -webkit-overflow-scrolling: touch; /* scroll fluide sur mobile */
}

/* Table à l'intérieur du conteneur */
.tbl table {
  width: 100%;
  border-collapse: collapse;
}

/* Zébrage par défaut sur toutes les tables dans .tbl */
.tbl tbody tr:nth-child(even) {
  background-color: #f9fafb;     /* gris très clair */
}

/* Option : légèrement plus foncé au survol */
.tbl tbody tr:hover {
  background-color: #f1f5f9;
}

/* Tableau "Unités de débit" : réglages fins */
.tbl-unites caption {
  font-weight: 600;
  margin-bottom: 0.6rem;              /* espace entre titre et tableau */
}

.tbl-unites th,
.tbl-unites td {
  border: 1px solid #c8c8c8;
  padding: 0.45rem 0.6rem;            /* padding propre */
}

.tbl-unites thead th {
  background-color: #f2f2f2;
  text-align: center;
}

/* Centrer la colonne "Symbole" (2ᵉ colonne) */
.tbl-unites td:nth-child(2) {
  text-align: center;
}

/* Comparaison Avant/Après (2 images) */
.compare{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block: 1.5rem;
}

.compare__item{
  margin:0;
  border: 1px solid var(--border-muted, #d7d7d7);
  border-radius: 16px;
  background: var(--bg-card, #fff);
  overflow:hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}

/* Zone image : même hauteur pour les 2, centrage propre */
.compare__media{
  background: #f6f7f9;
  padding: .75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 240px; /* ajuste si tes images sont très hautes/basses */
}

.compare__media img{
  width:100%;
  height:auto;
  max-height: 320px;   /* évite une image gigantesque */
  object-fit: contain;
}

/* Légendes alignées, lisibles */
.compare__cap{
  padding: .75rem .85rem .9rem;
  font-size: .92rem;
  line-height: 1.35;
  color: #333;
  border-top: 1px solid var(--border-muted, #e3e3e3);
}

/* Badge Avant/Après */
.compare__tag{
  display:inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e40af;
  margin-right: .5rem;
}

/* Responsive */
@media (max-width: 820px){
  .compare{
    grid-template-columns: 1fr;
  }
  .compare__media{
    min-height: 200px;
  }
}

/* Tableaux avec quadrillage */
.tbl table {
  width: 100%;
  border-collapse: collapse; /* indispensable pour un vrai quadrillage */
  margin-block: 1rem;
  font-size: 0.95rem;
}

/* Bordures */
.tbl th,
.tbl td {
  border: 1px solid #cfcfcf;
  padding: 0.5rem 0.75rem;
}

/* En-tête */
.tbl thead th {
  background: #f1f3f5;
  font-weight: 600;
  text-align: center;
}

/* Alignements */
.tbl tbody td:nth-child(1),
.tbl tbody td:nth-child(3) {
  text-align: center;
}

.tbl tbody td:nth-child(2) {
  text-align: center;
  font-family: monospace;
}

/* Optionnel : lignes alternées (zébrage léger) */
.tbl tbody tr:nth-child(even) {
  background: #fafafa;
}

/* Responsive : scroll horizontal propre */
.tbl {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}