/* ==========================================================================
   Pages de cours (chapitres) + liste des chapitres d'un module
   ========================================================================== */

/* ---------- Fil d'Ariane ---------- */
.breadcrumb {
    font-size: 14px;
    color: #718096;
    margin-bottom: 8px;
}
.breadcrumb a { color: #0066cc; text-decoration: none; font-weight: bold; }
.breadcrumb a:hover { text-decoration: underline; }

.chap-label {
    display: inline-block;
    background: #e6f0fa;
    color: #0066cc;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 6px;
}

/* ---------- Liste des chapitres (page module) ---------- */
.section-heading {
    color: #00235a;
    font-size: 20px;
    margin: 30px 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapters { display: grid; gap: 14px; margin-bottom: 30px; }

.chapter-link {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    text-decoration: none;
    color: #2d3748;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.chapter-link:hover {
    transform: translateY(-2px);
    border-color: #0066cc;
    box-shadow: 0 8px 18px rgba(0, 35, 90, 0.08);
}

.chapter-num {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #0066cc;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chapter-body { flex: 1; min-width: 0; }
.chapter-title { font-weight: bold; font-size: 16px; color: #00235a; }
.chapter-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; font-size: 13px; color: #718096; }
.chapter-arrow { color: #a0aec0; }

.chapter-link.soon { opacity: 0.55; pointer-events: none; }
.chapter-link.soon .chapter-num { background: #a0aec0; }

/* ---------- Contenu du cours ---------- */
.cours { color: #2d3748; font-size: 16px; line-height: 1.75; }
.cours h2 {
    color: #00235a;
    font-size: 21px;
    margin: 32px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e2e8f0;
}
.cours h2:first-child { margin-top: 0; }
.cours h3 { border: 0; font-size: 18px; margin: 22px 0 8px; padding: 0; }
.cours p { margin: 0 0 14px; }
.cours ul, .cours ol { padding-left: 22px; margin: 0 0 14px; }
.cours ul { list-style: disc; }
.cours li { margin-bottom: 6px; }
.cours strong { color: #00235a; }

/* Encadrés : Définition, Exemple, Remarque, À retenir */
.bloc {
    border-radius: 10px;
    padding: 14px 18px;
    margin: 18px 0;
    border-left: 5px solid;
}
.bloc > :last-child { margin-bottom: 0; }
.bloc-titre { font-weight: bold; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }

.bloc.definition { background: #ebf4ff; border-color: #0066cc; }
.bloc.definition .bloc-titre { color: #0066cc; }
.bloc.exemple    { background: #f0fff4; border-color: #38a169; }
.bloc.exemple .bloc-titre { color: #2f855a; }
.bloc.remarque   { background: #fffaf0; border-color: #dd6b20; }
.bloc.remarque .bloc-titre { color: #c05621; }
.bloc.retenir    { background: #faf5ff; border-color: #6f42c1; }
.bloc.retenir .bloc-titre { color: #6f42c1; }

/* Tableaux */
.table-wrap { overflow-x: auto; margin: 18px 0; }
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau th { background: #00235a; color: #ffffff; text-align: left; padding: 10px 12px; }
.tableau td { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
.tableau tr:nth-child(even) td { background: #f7fafc; }

/* Images du cours */
.cours figure { margin: 18px 0; text-align: center; }
.cours figure img { max-width: 100%; border-radius: 8px; }
.cours figcaption { font-size: 13px; color: #718096; margin-top: 6px; }
.exercice figure, .efm-body figure { margin: 14px 0; text-align: center; }
.exercice figure img, .efm-body figure img { max-width: 100%; border-radius: 8px; }
.exercice figcaption, .efm-body figcaption { font-size: 13px; color: #718096; margin-top: 6px; }
/* Galerie d'images (mobilier...) : 2 colonnes sur téléphone */
.fig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.fig-grid figure { margin: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; }
.fig-grid figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 6px; }
.fig-grid figcaption { font-weight: 600; color: #00235a; }
/* Schéma de gondole (cases produits) */
.tableau.gondole td { text-align: center; font-weight: 700; border: 1px solid #cbd5e0; }

/* ---------- Exercices + correction cachée ---------- */
.exercice {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 18px;
    line-height: 1.7;
    color: #2d3748;
}
.exercice-titre { font-weight: bold; color: #28a745; font-size: 17px; margin-bottom: 8px; }
.exercice ol, .exercice ul { padding-left: 22px; }
.exercice ul { list-style: disc; }

.correction { margin-top: 12px; }
.correction summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    background: #28a745;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 20px;
}
.correction summary::-webkit-details-marker { display: none; }
.correction summary:hover { background: #218838; }
.correction .when-open { display: none; }
.correction[open] .when-open { display: inline; }
.correction[open] .when-closed { display: none; }
.correction[open] summary { background: #718096; }
.correction-body {
    margin-top: 12px;
    background: #f0fff4;
    border-left: 4px solid #28a745;
    border-radius: 8px;
    padding: 12px 16px;
}
.correction-body > :last-child { margin-bottom: 0; }

/* ---------- Navigation entre chapitres ---------- */
.chap-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.chap-nav a, .chap-nav span {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    background: #ffffff;
    border: 2px solid #0066cc;
    color: #0066cc;
}
.chap-nav a:hover { background: #0066cc; color: #ffffff; }
.chap-nav span { border-color: #e2e8f0; color: #a0aec0; }

/* ---------- Sections dépliables (Exercices, Vidéos) sous le cours ---------- */
details.section-fold { padding: 0; }
details.section-fold > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 25px;
    cursor: pointer;
    list-style: none;
    font-size: 19px;
    font-weight: bold;
    color: #00235a;
    border-radius: 12px;
}
details.section-fold > summary::-webkit-details-marker { display: none; }
details.section-fold > summary:hover { background: #f7fafc; }
.fold-title { flex: 1; display: flex; align-items: center; gap: 10px; }
.fold-count {
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    background: var(--fold-color, #0066cc);
    padding: 4px 12px;
    border-radius: 20px;
}
.fold-icon { color: #a0aec0; transition: transform 0.2s ease; }
details.section-fold[open] > summary .fold-icon { transform: rotate(180deg); }
details.section-fold[open] > summary { border-bottom: 2px solid #edf2f7; border-radius: 12px 12px 0 0; }
.fold-body { padding: 20px 25px 25px; }

/* ---------- Chapitre suivant / précédent ---------- */
.next-chapter {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
    padding: 22px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0066cc, #00235a);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 35, 90, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.next-chapter:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 35, 90, 0.25); }
.next-chapter .nc-body { flex: 1; min-width: 0; }
.next-chapter .nc-label { display: block; font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
.next-chapter .nc-title { display: block; font-size: 19px; font-weight: bold; margin-top: 4px; }
.next-chapter .nc-arrow {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.next-chapter.fin { background: linear-gradient(135deg, #28a745, #1e7e34); }

.prev-chapter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: #718096;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}
.prev-chapter:hover { color: #0066cc; }

/* ---------- EFM : liste des sujets / état vide ---------- */
.efm-empty {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    color: #718096;
}
.efm-empty > i {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: #fdecee;
    color: #dc3545;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.efm-empty strong { display: block; color: #4a5568; font-size: 16px; }
.efm-empty span { font-size: 14px; }

/* Liste des EFM : chaque sujet est une ligne dépliable.
   <details class="efm-item" data-type="general|regional|local" data-annee="2024" data-lieu="Casablanca-Settat">
   Les badges et les filtres sont générés par module-tabs.js à partir de ces attributs. */
.efm-list { display: grid; gap: 12px; }
.efm-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #dc3545;
    border-radius: 12px;
}
.efm-item[data-type="regional"] { border-left-color: #dc3545; }
.efm-item[data-type="local"]    { border-left-color: #38a169; }
.efm-item[data-type="general"]  { border-left-color: #0066cc; }
.efm-item > summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    border-radius: 12px;
}
.efm-item > summary::-webkit-details-marker { display: none; }
.efm-item > summary:hover { background: #f7fafc; }
.efm-item[open] > summary { border-bottom: 1px solid #edf2f7; border-radius: 12px 12px 0 0; }
.efm-num {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: #fdecee;
    color: #dc3545;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.efm-item[data-type="local"] .efm-num   { background: #f0fff4; color: #2f855a; }
.efm-item[data-type="general"] .efm-num { background: #ebf4ff; color: #0066cc; }
.efm-head { flex: 1; min-width: 0; }
.efm-item-title { font-weight: bold; color: #00235a; font-size: 16px; }
.efm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.efm-tag {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 9px;
    border-radius: 12px;
    background: #edf2f7;
    color: #4a5568;
}
.efm-tag.t-regional { background: #fdecee; color: #c53030; }
.efm-tag.t-local    { background: #f0fff4; color: #2f855a; }
.efm-tag.t-general  { background: #ebf4ff; color: #0066cc; }
.efm-tag.t-national { background: #faf5ff; color: #6f42c1; }
.efm-item[data-type="national"] { border-left-color: #6f42c1; }
.efm-item[data-type="national"] .efm-num { background: #faf5ff; color: #6f42c1; }
.efm-item > summary .fold-icon { color: #a0aec0; transition: transform 0.2s ease; }
.efm-item[open] > summary .fold-icon { transform: rotate(180deg); }
.efm-body { padding: 16px 20px 20px; color: #2d3748; line-height: 1.8; }
.efm-body > :first-child { margin-top: 0; }
.efm-body ol { padding-left: 22px; }

/* Filtres EFM (affichés automatiquement à partir de 4 sujets) */
.efm-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.efm-chip {
    font: inherit;
    font-size: 14px;
    font-weight: bold;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #4a5568;
    cursor: pointer;
}
.efm-chip[aria-pressed="true"] { background: #00235a; border-color: #00235a; color: #ffffff; }
.efm-select {
    font: inherit;
    font-size: 14px;
    padding: 7px 12px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #4a5568;
}
.efm-count { margin-left: auto; font-size: 13px; color: #718096; font-weight: bold; }
.efm-none { color: #718096; padding: 10px 2px; }

/* ==========================================================================
   Protection du contenu
   ========================================================================== */
.protege .container {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.protege img { -webkit-user-drag: none; pointer-events: none; }

/* Filigrane "TSC COMMERCE" sur tout l'écran (apparaît sur les captures) */
.protege::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300'%3E%3Ctext x='210' y='150' text-anchor='middle' transform='rotate(-30 210 150)' font-family='Segoe UI,Arial,sans-serif' font-size='20' font-weight='700' fill='%2300235a' fill-opacity='0.045'%3ETSC COMMERCE %E2%80%A2 OTHMAN ZT%3C/text%3E%3C/svg%3E");
}

/* Logo du site répété en filigrane : toute capture d'écran porte le logo */
.protege::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 901;
    pointer-events: none;
    background-image: url("watermark-logo.png");
    background-repeat: repeat;
    background-position: 20px 40px;
    opacity: 0.045;
}

/* Message rapide (ex : copie bloquée) */
.protect-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    background: #00235a;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    z-index: 2000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Impression bloquée */
@media print {
    .protege > * { display: none !important; }
    .protege::before { display: none; }
    .protege::after {
        content: "Impression non autorisée. Contenu protégé : TSC COMMERCE";
        position: static;
        background: none;
        opacity: 1;
        display: block;
        padding: 80px 20px;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        color: #00235a;
    }
}

@media (max-width: 480px) {
    .cours { font-size: 15px; }
    .chapter-link { padding: 14px; gap: 12px; }
    .chapter-num { width: 40px; height: 40px; font-size: 18px; }
}


/* Module divisé en parties : chaque partie s'ouvre au clic */
.part-fold { margin-bottom: 16px; }
.part-fold > summary { list-style: none; cursor: pointer; }
.part-fold > summary::-webkit-details-marker { display: none; }
.part-fold > summary .chapter-num { font-size: 16px; }
.part-fold > summary .part-arrow { margin-left: auto; color: #0066cc; transition: transform .2s; }
.part-fold[open] > summary { border-color: #0066cc; }
.part-fold[open] > summary .part-arrow { transform: rotate(180deg); }
.part-fold > .chapters { margin: 12px 0 0 18px; padding-left: 14px; border-left: 3px solid #cfe0f5; }

/* Journal comptable et tableaux de calcul */
.tableau td.num, .tableau th.num { text-align: right; white-space: nowrap; }
.tableau.journal .jn { font-weight: 700; color: #00235a; margin-right: 6px; }
.tableau.journal tr.j-cr td.jc { padding-left: 30px; }
.tableau.journal tr.j-date td { text-align: center; color: #00235a; background: linear-gradient(#00235a, #00235a) center / 100% 1.5px no-repeat, #ffffff !important; padding-top: 10px; padding-bottom: 10px; }
.tableau.journal tr.j-date td strong { background: #ffffff; padding: 0 12px; letter-spacing: .3px; }
.tableau.journal tr.j-lib td { font-style: italic; }
.tableau.journal tr.j-lib td { background: #ffffff !important; color: #4a5568; font-size: 14px; border-bottom: 2px solid #cbd5e0; }
.bilan-mob { display: none; }

/* Indication de défilement horizontal (ajoutée par module-tabs.js) */
.table-wrap.is-scrollable { position: relative; }
.table-wrap.is-scrollable::before {
    content: "\2190  glisser  \2192"; display: block; text-align: right;
    font-size: 12px; color: #718096; margin-bottom: 4px; position: sticky; left: 0;
}

/* ===================== Téléphone ===================== */
@media (max-width: 600px) {
    body[data-layout="chapitre"] .container { padding: 0 8px; margin-top: 20px; }
    body[data-layout="chapitre"] .card { padding: 14px 12px; border-radius: 10px; }
    body[data-layout="chapitre"] details.section-fold { padding: 0; }
    .fold-body { padding: 12px 8px 14px; }
    .exercice { padding: 12px 10px; }
    .correction-body { padding: 10px 6px; }
    .bloc { padding: 10px 10px; }
    .cours h2 { font-size: 19px; }
    .tableau { font-size: 13px; }
    .tableau th, .tableau td { padding: 7px 6px; }
    .tableau.journal tr.j-cr td.jc { padding-left: 18px; }
    .tableau.journal tr.j-lib td { font-size: 12px; }
    .bilan-desk { display: none; }
    .bilan-mob { display: block; }
}
.tableau.gl td:not(:first-child) { white-space: nowrap; }

/* Organigrammes (arbre vertical, lisible sur téléphone) */
.orgtree { margin: 12px 0 16px; }
.orgtree ul, .cours .orgtree ul, .exercice .orgtree ul, .efm-body .orgtree ul { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid #cbd5e0; }
.orgtree > ul, .cours .orgtree > ul, .exercice .orgtree > ul, .efm-body .orgtree > ul { border-left: none; padding-left: 0; }
.orgtree li { position: relative; margin: 7px 0; padding-left: 14px; }
.orgtree li::before { content: ""; position: absolute; left: 0; top: 15px; width: 12px; border-top: 2px solid #cbd5e0; }
.orgtree > ul > li { padding-left: 0; }
.orgtree > ul > li::before { display: none; }
.orgtree .n { display: inline-block; background: #eef4ff; border: 1px solid #0066cc; border-radius: 8px; padding: 5px 10px; font-weight: 600; color: #00235a; font-size: 14px; line-height: 1.35; }
.orgtree .n.top { background: #00235a; border-color: #00235a; color: #fff; }
.orgtree .n.staff { background: #fff8e6; border: 1px dashed #d69e2e; color: #7b4a00; font-style: italic; }
.orgtree .n.div { background: #fffbea; border-color: #d69e2e; }

/* Évaluation du module : carte qui s'ouvre au clic + recherche */
.efm-fold { margin: 26px 0 16px; }
.efm-fold > summary { list-style: none; cursor: pointer; border: 2px solid #c6d8f0; background: linear-gradient(135deg, #f3f8ff, #ffffff); }
.efm-fold > summary::-webkit-details-marker { display: none; }
.efm-fold > summary .chapter-num { background: #00235a; color: #fff; font-size: 17px; }
.efm-fold > summary .chapter-meta { flex-wrap: wrap; }
.efm-fold > summary .part-arrow { color: #0066cc; transition: transform .2s; }
.efm-fold-hint { margin-left: auto; font-size: 13px; font-weight: bold; color: #0066cc; white-space: nowrap; padding-right: 6px; }
.efm-fold > summary .when-open, .efm-fold[open] > summary .when-closed { display: none; }
.efm-fold[open] > summary .when-open { display: inline; }
.efm-fold[open] > summary { border-color: #0066cc; }
.efm-fold[open] > summary .part-arrow { transform: rotate(180deg); }
.efm-fold-body { margin-top: 14px; }
.efm-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #c6d8f0; border-radius: 26px; padding: 4px 6px 4px 16px; margin-bottom: 12px; }
.efm-search:focus-within { border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0,102,204,.12); }
.efm-search > i { color: #0066cc; font-size: 16px; }
.efm-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15px; padding: 9px 0; background: transparent; color: #2d3748; }
.efm-search input::-webkit-search-cancel-button { display: none; }
.efm-search-clear { border: 0; background: #edf2f7; color: #4a5568; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
@media (max-width: 600px) {
  .efm-fold-hint { display: none; }
  .efm-search input { font-size: 16px; } /* évite le zoom automatique sur iPhone */
}

/* Filigrane plus discret sur téléphone (lecture plus confortable) */
@media (max-width: 600px) {
    .protege::before { opacity: .75; }
    .protege::after { opacity: 0.035; background-size: 240px auto; }
}

/* Organigrammes « classiques » : racine en haut, directions côte à côte, services empilés */
.orgchart-wrap { --oc: #8aa4c8; overflow-x: auto; margin: 14px 0 20px; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; }
.orgchart { display: flex; flex-direction: column; align-items: center; width: max-content; min-width: 100%; }
.orgchart .n { display: inline-block; background: #eef4ff; border: 1.5px solid #0066cc; border-radius: 8px; padding: 6px 11px; font-weight: 600; color: #00235a; font-size: 14px; line-height: 1.3; text-align: center; }
.orgchart .n.top { background: #00235a; border-color: #00235a; color: #fff; padding: 8px 16px; }
.orgchart .n.div { background: #fff6dc; border-color: #d69e2e; }
.orgchart .n.staff { background: #fff8e6; border: 1.5px dashed #d69e2e; color: #7b4a00; font-style: italic; max-width: 190px; }
.oc-trunk { position: relative; align-self: stretch; height: 20px; }
.oc-trunk::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid var(--oc); }
.oc-trunk.has-staff { height: auto; padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.oc-staff { position: relative; margin-left: calc(50% + 26px); }
.oc-staff::before { content: ""; position: absolute; right: 100%; top: 50%; width: 25px; border-top: 2px dashed #d69e2e; }
.orgchart ul.oc-row { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; }
.orgchart ul.oc-row.eq { align-self: stretch; }
.orgchart ul.oc-row > li { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 20px 6px 0; margin: 0; }
.orgchart ul.oc-row.eq > li { flex: 1 1 0; }
.orgchart ul.oc-row > li::before, .orgchart ul.oc-row > li::after { content: ""; position: absolute; top: 0; height: 20px; width: 50%; border-top: 2px solid var(--oc); }
.orgchart ul.oc-row > li::before { right: 50%; }
.orgchart ul.oc-row > li::after { left: 50%; border-left: 2px solid var(--oc); }
.orgchart ul.oc-row > li:first-child::before, .orgchart ul.oc-row > li:last-child::after { border-top: 0; }
.orgchart ul.oc-row > li:last-child::before { border-right: 2px solid var(--oc); border-radius: 0 8px 0 0; }
.orgchart ul.oc-row > li:first-child::after { border-radius: 8px 0 0 0; }
.orgchart ul.oc-row > li:only-child::before { display: none; }
.orgchart ul.oc-row > li:only-child::after { border-radius: 0; }
.oc-unit { display: inline-flex; flex-direction: column; align-items: stretch; max-width: 210px; }
.oc-unit > .n { display: block; }
.orgchart ul.oc-col { list-style: none; margin: 0 0 0 12px; padding: 0; }
.orgchart ul.oc-col > li { position: relative; margin: 0; padding: 6px 0 0 14px; text-align: left; }
.orgchart ul.oc-col > li::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 22px; border-left: 2px solid var(--oc); border-bottom: 2px solid var(--oc); border-bottom-left-radius: 6px; }
.orgchart ul.oc-col > li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--oc); }
.orgchart ul.oc-col > li:last-child::after { display: none; }
.orgchart ul.oc-col .n { background: #fff; font-weight: 500; font-size: 13.5px; text-align: left; }
.orgchart ul.oc-col ul.oc-col .n { background: #f7fafc; }
/* Structure fonctionnelle : plusieurs chefs vers une même case */
.orgchart ul.oc-row > li { flex-wrap: wrap; }
.oc-down { flex-basis: 100%; height: 18px; position: relative; }
.oc-down::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid var(--oc); }
.oc-merge { position: relative; align-self: stretch; height: 20px; }
.oc-merge::before { content: ""; position: absolute; top: 0; left: calc(50% / var(--n)); right: calc(50% / var(--n)); border-top: 2px solid var(--oc); }
.oc-merge::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid var(--oc); }
.orgchart-wrap.is-scrollable::before { content: "\2190  glisser  \2192"; display: block; text-align: center; font-size: 12px; color: #718096; margin-bottom: 6px; position: sticky; left: 0; }
@media (max-width: 600px) {
    .orgchart .n { font-size: 12px; padding: 5px 8px; }
    .orgchart ul.oc-col .n { font-size: 12px; }
    .oc-unit { max-width: 140px; }
    .orgchart ul.oc-row > li { padding-left: 3px; padding-right: 3px; }
}

/* NB avant le corrigé */
.try-first { margin: 14px 0 8px; padding: 8px 12px; background: #fff8e1; border-left: 4px solid #f0b429; border-radius: 6px; font-size: 14px; color: #7a5a00; line-height: 1.5; }
.try-first strong { color: #b7791f; }

/* EFM : les grands tableaux défilent dans leur cadre, la page ne déborde jamais */
.efm-list { grid-template-columns: minmax(0, 1fr); }
.efm-list > *, .efm-item, .efm-body, .efm-fold, .efm-fold-body, .efm-body .correction, .efm-body .correction-body { min-width: 0; max-width: 100%; }
.efm-body .table-wrap, .efm-body .orgchart-wrap { max-width: 100%; overflow-x: auto; }

/* Carte des chapitres et carte EFF */
.chap-fold { margin-top: 10px; }
.chap-fold > summary .chapter-num { background: #0066cc; }
.chap-fold .chapters { margin-top: 4px; }
.eff-fold > summary .chapter-num { background: #b7791f; }
.eff-fold > summary { border-color: #f0d9a8; background: linear-gradient(135deg, #fffaf0, #ffffff); }
.eff-fold[open] > summary { border-color: #b7791f; }

/* Dialogues de vente (vendeur / client) */
.dialogue { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.dlg-titre { font-weight: 700; color: #00235a; margin-bottom: 8px; }
.dlg-titre i { color: #0066cc; margin-right: 4px; }
.dialogue .dlg { margin: 6px 0; padding: 8px 12px; border-radius: 10px; line-height: 1.5; max-width: 92%; }
.dialogue .dlg-v { background: #e8f1fd; border-left: 3px solid #0066cc; }
.dialogue .dlg-c { background: #fff7e6; border-left: 3px solid #d69e2e; margin-left: auto; }
.dialogue .dlg-who { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #00235a; margin-bottom: 2px; }
.dialogue .dlg-c .dlg-who { color: #975a16; }
.dialogue .dlg-didas { font-style: italic; color: #718096; font-size: 14px; margin: 4px 0; text-align: center; }
@media (max-width: 600px) { .dialogue { padding: 10px; } .dialogue .dlg { max-width: 100%; } }

/* ===== Schéma de flux (crédit documentaire, remise documentaire…) =====
   <div class="flux"> 4 .flux-acteur puis des .flux-etape avec style="grid-column:a / b" ; .g = flèche vers la gauche */
.flux { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 4px; row-gap: 2px; margin: 16px 0 22px; font-size: 13px; position: relative; }
.flux-acteur { background: #00235a; color: #fff; border-radius: 8px; padding: 6px 4px; text-align: center; font-weight: 700; font-size: 12px; line-height: 1.25; margin-bottom: 6px; }
.flux-acteur small { display: block; font-weight: 400; opacity: .85; font-size: 11px; }
.flux-etape { position: relative; padding: 2px 6px 12px; text-align: center; color: #1a202c; line-height: 1.3; }
.flux-etape b { display: inline-block; background: #0066cc; color: #fff; border-radius: 50%; width: 19px; height: 19px; line-height: 19px; font-size: 11px; margin-right: 4px; }
.flux-etape::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 4px; border-top: 2px solid #0066cc; }
.flux-etape::before { content: ""; position: absolute; bottom: 0; right: 10%; border: 5px solid transparent; border-left: 8px solid #0066cc; border-right: 0; }
.flux-etape.g::before { right: auto; left: 10%; border-left: 0; border-right: 8px solid #0066cc; }
.flux-etape.seul::after, .flux-etape.seul::before { display: none; }
.flux-etape.seul { background: #f0fff4; border-radius: 8px; padding: 4px 6px; margin: 2px 0 6px; }
.flux-etape.ok::after { border-color: #2f855a; } .flux-etape.ok::before { border-left-color: #2f855a; } .flux-etape.ok.g::before { border-right-color: #2f855a; border-left-color: transparent; } .flux-etape.ok b { background: #2f855a; }
.flux-etape.doc::after { border-top-style: dashed; }
.flux-legende { font-size: 13px; color: #4a5568; margin: -12px 0 18px; }
@media (max-width: 480px) { .flux { font-size: 12px; } .flux-acteur { font-size: 11px; } }
.flux-etape.lien::before { display: none; } .flux-etape.lien::after { border-top-width: 3px; border-top-style: double; }

/* ===== Chaîne d'étapes verticale (chaîne logistique, dédouanement, arbre de décision) ===== */
.etapes { margin: 16px auto 22px; max-width: 520px; display: flex; flex-direction: column; align-items: stretch; }
.etapes .et { background: #eef4ff; border: 1.5px solid #0066cc; border-radius: 10px; padding: 8px 12px; color: #00235a; font-size: 14px; line-height: 1.35; position: relative; }
.etapes .et strong { color: #00235a; }
.etapes .et .num { display: inline-block; background: #0066cc; color: #fff; border-radius: 50%; width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 12px; font-weight: 700; margin-right: 6px; }
.etapes .et small { display: block; color: #4a5568; font-size: 12.5px; margin-top: 2px; }
.etapes .fl { text-align: center; color: #0066cc; font-size: 18px; line-height: 1; padding: 3px 0; }
.etapes .fl span { font-size: 12px; color: #4a5568; margin-left: 6px; }
.etapes .zone { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: #00235a; border-radius: 6px; padding: 3px 8px; margin: 8px 0 6px; }
.etapes .zone.mer { background: #2b6cb0; } .etapes .zone.arr { background: #2f855a; }
.etapes .et.q { background: #fff6dc; border-color: #d69e2e; color: #7b4a00; font-weight: 600; text-align: center; }
.etapes .et.res { background: #f0fff4; border-color: #38a169; color: #22543d; }
.etapes .et.grave { background: #fff5f5; border-color: #e53e3e; color: #742a2a; }
.etapes .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.etapes .duo > div { display: flex; flex-direction: column; }
.etapes .duo .lab { text-align: center; font-weight: 700; font-size: 13px; color: #4a5568; padding: 2px 0; }
.etapes .liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }

/* ===== Liner terms : bande quai / sous palan / bord ===== */
.liner { margin: 16px 0 6px; overflow-x: auto; }
.liner table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 13px; }
.liner th, .liner td { border: 1px solid #cbd5e0; padding: 6px 5px; text-align: center; }
.liner th { background: #00235a; color: #fff; font-weight: 600; }
.liner td.l { text-align: left; font-weight: 600; color: #00235a; background: #f7fafc; }
.liner td.n { background: #2b6cb0; color: #fff; font-weight: 600; }
.liner td.m { background: #fff6dc; color: #7b4a00; }

/* ===== Arbre vertical simple (le texte passe à la ligne, pas de défilement) ===== */
.arbre { margin: 14px 0 20px; font-size: 14px; }
.arbre .r { display: inline-block; background: #00235a; color: #fff; font-weight: 700; border-radius: 8px; padding: 6px 12px; }
.arbre ul { list-style: none; margin: 0 0 0 14px; padding: 0; border-left: 2px solid #8aa4c8; }
.arbre li { position: relative; margin: 0; padding: 6px 0 0 16px; }
.arbre li::before { content: ""; position: absolute; left: 0; top: 18px; width: 12px; border-top: 2px solid #8aa4c8; }
.arbre li:last-child { border-left: 2px solid #fff; margin-left: -2px; }
.arbre li:last-child::before { left: 0; }
.arbre .n { display: inline-block; background: #eef4ff; border: 1.5px solid #0066cc; border-radius: 8px; padding: 4px 9px; color: #00235a; font-weight: 600; line-height: 1.3; }
.arbre .n.div { background: #fff6dc; border-color: #d69e2e; }
.arbre ul ul .n { background: #fff; font-weight: 500; }
.arbre .n small { font-weight: 400; color: #4a5568; }

/* ===================== Composants visuels réutilisables (pilote M205, nov. 2026) ===================== */
/* --- Bannière de chapitre (créée par module-tabs.js) --- */
.bandeau { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 22px 20px; margin: 4px 0 22px; color: #fff;
  background: linear-gradient(135deg, var(--bd1, #00235a) 0%, var(--bd2, #0066cc) 100%); box-shadow: 0 8px 22px rgba(0,35,90,.18); }
.bandeau::before, .bandeau::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.bandeau::before { width: 220px; height: 220px; right: -60px; top: -80px; }
.bandeau::after { width: 140px; height: 140px; right: 70px; bottom: -90px; background: rgba(255,255,255,.06); }
.bandeau .bd-mod { font-size: 12.5px; opacity: .85; letter-spacing: .3px; position: relative; z-index: 1; }
.bandeau .bd-num { display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 700; margin: 8px 0 6px; position: relative; z-index: 1; }
.bandeau h1 { color: #fff !important; margin: 0 0 10px; font-size: 26px; line-height: 1.25; max-width: calc(100% - 86px); position: relative; z-index: 1; }
.bandeau .bd-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; opacity: .92; position: relative; z-index: 1; }
.bandeau .bd-meta i { margin-right: 5px; }
.bandeau .bd-ico { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 1; }
@media (max-width: 480px) { .bandeau { padding: 18px 16px 16px; } .bandeau h1 { font-size: 21px; max-width: calc(100% - 62px); } .bandeau .bd-ico { width: 52px; height: 52px; font-size: 22px; right: 12px; top: 30px; transform: none; } }

/* --- Fil des étapes d'un processus (étape courante en évidence) --- */
.parcours { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 10px 0 20px; padding: 12px; background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
.parcours .pc-titre { flex-basis: 100%; font-size: 12.5px; font-weight: 700; color: #4a5568; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.parcours .pc { background: #fff; border: 1.5px solid #cbd5e0; color: #4a5568; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.parcours .pc.ok { border-color: #9ae6b4; color: #2f855a; background: #f0fff4; }
.parcours .pc.ici { background: #0066cc; border-color: #0066cc; color: #fff; box-shadow: 0 0 0 3px rgba(0,102,204,.2); }
.parcours .sep { color: #a0aec0; font-size: 11px; }

/* --- Pyramide (niveaux du bas vers le haut ; écrire du haut vers le bas) --- */
.pyramide { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px auto 20px; max-width: 520px; width: 100%; }
.pyramide .py { color: #fff; text-align: center; padding: 8px 10px; border-radius: 6px; font-weight: 700; font-size: 14px; line-height: 1.25; box-sizing: border-box; }
.pyramide .py small { display: block; font-weight: 400; font-size: 12px; opacity: .9; }
.pyramide.inv .py { border-radius: 6px; }

/* --- Cartes (lettre ou icône + titre + texte) --- */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 20px; }
.cartes .ct { background: #fff; border: 1.5px solid #e2e8f0; border-top: 4px solid var(--c, #0066cc); border-radius: 10px; padding: 10px 12px; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.cartes .ct .big { font-size: 26px; font-weight: 800; color: var(--c, #0066cc); line-height: 1; }
.cartes .ct .big i { font-size: 22px; }
.cartes .ct b { display: block; color: #00235a; margin: 6px 0 3px; font-size: 14.5px; }
.cartes .ct span { display: block; color: #4a5568; font-size: 13px; line-height: 1.4; }

/* --- Chaîne horizontale (A → B → C), verticale sur téléphone --- */
.chaine { display: flex; align-items: stretch; gap: 0; margin: 14px 0 20px; }
.chaine .ch { flex: 1 1 0; background: #eef4ff; border: 1.5px solid #0066cc; border-radius: 10px; padding: 10px; text-align: center; color: #00235a; font-size: 13.5px; line-height: 1.35; }
.chaine .ch b { display: block; font-size: 15px; margin-bottom: 3px; }
.chaine .ch i.fas { font-size: 20px; color: #0066cc; display: block; margin-bottom: 5px; }
.chaine .fl { display: flex; align-items: center; justify-content: center; color: #0066cc; font-size: 20px; padding: 0 6px; }
.chaine-retour { text-align: center; font-size: 13px; color: #2f855a; font-weight: 600; margin: -12px 0 18px; }
@media (max-width: 560px) { .chaine { flex-direction: column; } .chaine .fl { padding: 3px 0; transform: rotate(90deg); } }

/* --- Pile (couches empilées : sandwich, etc.) --- */
.pile { max-width: 380px; margin: 14px auto 20px; display: flex; flex-direction: column; gap: 4px; }
.pile .pl { border-radius: 10px; padding: 9px 12px; text-align: center; font-weight: 600; font-size: 14px; }
.pile .pl.a { background: #c6f6d5; color: #22543d; } .pile .pl.p { background: #fed7d7; color: #742a2a; font-size: 16px; font-weight: 800; }

/* Matrice 2 x 2 (SWOT, Ansoff...) : .matrice > .mx-h (en-têtes) + .mx (cases, --c couleur) */
.matrice { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; margin: 14px 0 20px; font-size: 13.5px; }
.matrice .mx-h { display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; color: #4a5568; font-size: 12.5px; padding: 4px; }
.matrice .mx-h.v { writing-mode: vertical-rl; transform: rotate(180deg); }
.matrice .mx { border-radius: 10px; padding: 10px 12px; color: #1a202c; background: color-mix(in srgb, var(--c, #0066cc) 12%, #fff); border: 1.5px solid var(--c, #0066cc); line-height: 1.4; }
.matrice .mx b { display: block; color: var(--c, #0066cc); font-size: 15px; margin-bottom: 3px; }
/* Schéma SVG responsive */
.schema-svg { margin: 14px 0 20px; text-align: center; }
.schema-svg svg { width: 100%; max-width: 620px; height: auto; }
.schema-svg figcaption { font-size: 12.5px; color: #4a5568; margin-top: 4px; }

/* Signature dans le texte du cours (outils/signer-chapitres.sh) */
.tsc-sign { margin: 18px 0 8px; text-align: right; font-size: 12px; color: #94a3b8; font-style: italic; letter-spacing: .2px; }
@media (prefers-color-scheme: dark) { .tsc-sign { color: #64748b; } }

/* Formules (M109 Statistique) : <p class="formule">, fractions [[num//den]] -> .frac */
.formule { text-align: center; font-size: 1.08em; background: rgba(0,102,204,.07); border: 1px solid rgba(0,102,204,.25); border-radius: 10px; padding: 12px 10px; margin: 12px 0; overflow-x: auto; line-height: 2.2; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 3px; line-height: 1.35; }
.frac > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 5px 1px; }
.frac > span:last-child { padding: 1px 5px 0; }

/* --- Lettre type (correspondance) --- */
.lettre { background: #fff; border: 1px solid #cbd5e0; border-radius: 8px; padding: 18px 20px; margin: 14px 0 18px; font-size: 14.5px; line-height: 1.55; box-shadow: 0 2px 6px rgba(0,0,0,.04); overflow-wrap: anywhere; }
.lettre p { margin: 0 0 10px; }
.lettre .dr { text-align: right; }
.lettre .obj { font-weight: 700; }
.lettre .obj u { text-decoration: underline; }
.lettre .sig { text-align: right; margin-top: 14px; }
.lettre .ref { font-size: 13px; color: #4a5568; }
.lettre .ann { display: block; font-size: 12px; color: #b7791f; font-style: italic; }
@media (max-width: 480px) { .lettre { padding: 14px; font-size: 14px; } }

/* --- Pages en arabe (container.ar, dir=rtl) --- */
.ar { font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', Arial, sans-serif; }
.ar .cours, .ar .exercice, .ar .correction-body, .ar .bloc { line-height: 1.95; font-size: 16.5px; }
.ar ul, .ar ol { padding-right: 1.4em; padding-left: 0; }
.ar th, .ar td { text-align: right; }
.ar .formule { direction: rtl; }
.ar .lettre .dr, .ar .lettre .sig { text-align: left; }