/* ═══════════════════════════════════════════════════════════════
   equipemaths.fr — feuille de style unique

   Organisation :
     1. Réglages de base et couleurs
     2. En-tête et navigation
     3. Blocs communs (cartes, boutons, messages)
     4. Accueil
     5. Progressions (le gros morceau)
     6. Documents · Évaluations
     7. Écrans étroits
   ═══════════════════════════════════════════════════════════════ */

/* ===== 1. RÉGLAGES DE BASE ===== */

*, *::before, *::after { box-sizing: border-box; }

:root {
    --fond:        #f5f7fb;
    --surface:     #ffffff;
    --surface-2:   #f0f3fa;
    --bord:        #e0e5f0;
    --bord-fort:   #c8d0e2;
    --texte:       #1b2138;
    --texte-doux:  #5d6784;
    --accent:      #4f46e5;
    --accent-doux: #eef0fe;
    --cyan:        #0e7490;
    --bleu:        #0369a1;
    --vert:        #15803d;
    --vert-doux:   #e8f7ee;
    --orange:      #b45309;
    --orange-doux: #fdf3e3;
    --rouge:       #be123c;
    --rouge-doux:  #fdeef2;
    --violet:      #7c3aed;
    --ombre:       0 1px 2px rgba(24, 32, 60, .06), 0 8px 24px rgba(24, 32, 60, .06);
    --ombre-forte: 0 8px 30px rgba(24, 32, 60, .16);
    --rayon:       14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond:        #0f1421;
        --surface:     #171d2e;
        --surface-2:   #1e2537;
        --bord:        #2a3348;
        --bord-fort:   #3d4863;
        --texte:       #e8ecf7;
        --texte-doux:  #9aa5c0;
        --accent:      #8b8bf7;
        --accent-doux: #232a4a;
        --cyan:        #38bdf8;
        --bleu:        #60a5fa;
        --vert:        #4ade80;
        --vert-doux:   #16301f;
        --orange:      #fbbf24;
        --orange-doux: #33270f;
        --rouge:       #fb7185;
        --rouge-doux:  #351520;
        --violet:      #c084fc;
        --ombre:       0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
        --ombre-forte: 0 8px 30px rgba(0, 0, 0, .45);
    }
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--texte);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; }
h2 { font-size: 1.2rem;  font-weight: 700; }
h3 { font-size: 1rem;    font-weight: 700; }

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 80px;
}

.hidden { display: none !important; }

.dialog-lien { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(20, 45, 65, .28); }
.dialog-lien-boite { width: min(420px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--bord-fort); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 30px rgba(20, 45, 65, .2); }
.dialog-lien-boite label { display: grid; gap: 8px; color: var(--bleu); font-weight: 700; }
.dialog-lien-boite input { box-sizing: border-box; width: 100%; padding: 9px 10px; border: 1px solid var(--bord-fort); border-radius: 6px; font: inherit; }
.dialog-lien-boite select { box-sizing: border-box; width: 100%; padding: 9px 10px; border: 1px solid var(--bord-fort); border-radius: 6px; background: var(--surface); color: var(--texte); font: inherit; }
.dialog-lien-boite > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Boîte « copier vers les autres classes » : cases à cocher en ligne. */
.copie-titre { margin: 0; color: var(--bleu); font-weight: 700; }
.copie-question { margin: 10px 0 0; }
.dialog-lien-boite .copie-classes { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.dialog-lien-boite .copie-classes label { display: flex; align-items: center; gap: 7px; color: var(--texte); font-weight: 600; }
.dialog-lien-boite .copie-classes input { width: auto; padding: 0; border: none; }
.copie-avertissement { margin: 10px 0 0; color: var(--rouge); font-size: .88rem; }

/* ===== 2. EN-TÊTE ET NAVIGATION ===== */

.entete {
    background: var(--surface);
    border-bottom: 1px solid var(--bord);
    position: sticky;
    top: 0;
    z-index: 20;
}

.entete-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 60px;
    flex-wrap: wrap;
}

.entete-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.retour-accueil {
    margin-left: auto;
    padding: 6px 0;
    color: var(--texte-doux);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.retour-accueil:hover,
.retour-accueil:focus-visible {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.retour-accueil + .entete-meta { margin-left: 0; }

.version-site {
    color: var(--texte-doux);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.marque {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    color: var(--texte);
    text-decoration: none;
    white-space: nowrap;
}

.marque > span:not(.marque-initiale) { color: var(--bleu); text-decoration: none; }
.marque-finales { color: var(--rouge) !important; }

.nav { display: flex; gap: 4px; flex-wrap: wrap; }

.nav a {
    padding: 7px 13px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--texte-doux);
    font-weight: 600;
    font-size: .93rem;
    white-space: nowrap;
}

.nav a:hover { background: var(--surface-2); color: var(--texte); }

.nav a.actif { background: var(--accent-doux); color: var(--accent); }

/* ===== 3. BLOCS COMMUNS ===== */

.carte {
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 20px 22px;
    box-shadow: var(--ombre);
}

.sous-titre { color: var(--texte-doux); margin-top: -.2em; }

.btn {
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 9px;
    border: 1px solid var(--bord-fort);
    background: var(--surface);
    color: var(--texte);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: default; }

.btn.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.principal:hover:not(:disabled) { filter: brightness(1.08); }

.btn.danger:hover:not(:disabled) { background: var(--rouge-doux); border-color: var(--rouge); color: var(--rouge); }

.message {
    border-radius: 10px;
    padding: 12px 15px;
    margin: 0 0 18px;
    font-size: .93rem;
    border: 1px solid transparent;
}

.message.info    { background: var(--accent-doux); border-color: var(--accent); color: var(--texte); }
.message.attention { background: var(--orange-doux); border-color: var(--orange); color: var(--texte); }
.message.erreur  { background: var(--rouge-doux);  border-color: var(--rouge);  color: var(--texte); }

.vide {
    color: var(--texte-doux);
    font-style: italic;
    padding: 26px 4px;
    text-align: center;
}

footer.pied {
    max-width: 1080px;
    margin: 0 auto;
    padding: 26px 20px 40px;
    color: var(--texte-doux);
    font-size: .85rem;
    border-top: 1px solid var(--bord);
}

/* ===== 4. ACCUEIL ===== */

.rubriques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.rubrique {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 22px;
    box-shadow: var(--ombre);
    transition: transform .12s ease, box-shadow .12s ease;
}

.rubrique:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }

.rubrique .emoji { font-size: 1.9rem; display: block; margin-bottom: 10px; }
.rubrique h2 { margin-bottom: 6px; }
.rubrique p { margin: 0; color: var(--texte-doux); font-size: .93rem; }

/* ===== 5. PROGRESSIONS ===== */

.barre-outils {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.onglets {
    display: flex;
    gap: 6px;
    background: var(--surface-2);
    padding: 5px;
    border-radius: 11px;
    border: 1px solid var(--bord);
}

.onglets button {
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    padding: 7px 18px;
    border: none;
    background: transparent;
    color: var(--texte-doux);
    border-radius: 8px;
    cursor: pointer;
}

.onglets button:hover { color: var(--texte); }

.onglets button.actif {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--ombre);
}

/* Signature : le nom reste bleu, avec ses dernières lettres en rouge. */
.marque { text-decoration: none; }
.marque-initiale { text-decoration: none; }

/* ===== 9. THÈME CAHIER ===== */

@media screen {
    :root {
        --fond:        #fffaf3;
        --surface:     #fffaf3;
        --surface-2:   #f5f1e8;
        --bord:        rgba(31, 143, 211, .42);
        --bord-fort:   rgba(23, 79, 120, .55);
        --texte:       #174f78;
        --texte-doux:  #526b7d;
        --accent:      #174f78;
        --accent-doux: #e1edf3;
        --bleu:        #174f78;
        --vert:        #287453;
        --vert-doux:   #e5f0e8;
        --orange:      #a45a20;
        --orange-doux: #f5e9dc;
        --rouge:       #a93440;
        --rouge-doux:  #f4e3e4;
        --violet:      #654a8f;
        --ombre:       0 5px 18px rgba(23, 53, 76, .07);
        --ombre-forte: 0 10px 24px rgba(23, 53, 76, .12);
    }

    body {
        background-color: var(--fond);
        background-image: repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 31px,
            rgba(31, 143, 211, .32) 31px,
            rgba(31, 143, 211, .32) 32px
        );
        color: var(--texte);
        position: relative;
    }

    body::before {
        content: '';
        position: fixed;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: max(28px, calc(50% - 640px + 52px));
        width: 2px;
        background: #a93440;
    }

    .entete {
        background: rgba(255, 250, 243, .94);
        border-bottom: 0;
        box-shadow: none;
    }

    .entete-inner {
        max-width: 1280px;
        min-height: 76px;
        padding-left: 80px;
    }

    .marque { color: var(--texte); }
    .marque span { color: var(--bleu); }
    .marque small {
        margin-left: 22px;
        color: var(--texte-doux);
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: 0;
    }

    .nav { margin-left: auto; }
    .nav a { color: var(--texte-doux); }
    .nav a:hover { background: transparent; color: var(--texte); }
    .nav a.actif {
        background: transparent;
        color: var(--texte);
        box-shadow: inset 0 -2px var(--rouge);
    }

    .wrap { max-width: 1280px; padding-left: 80px; }

    .carte,
    .ligne,
    .doc,
    table.evals,
    .compteur-pages,
    .btn,
    .onglets {
        background: rgba(255, 250, 243, .94);
    }

    .btn { color: var(--texte); }
    .btn.principal { background: var(--texte); border-color: var(--texte); }

    .accueil .entete { position: static; }
    .accueil .nav { display: none; }
    .accueil .wrap {
        min-height: calc(100vh - 76px);
        display: flex;
        align-items: center;
        padding-top: 50px;
        padding-bottom: 90px;
    }

    .accueil .rubriques {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        margin: 0;
    }

    .accueil .rubrique {
        min-height: 128px;
        padding: 24px 28px 24px 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 0;
        border-radius: 0;
        background: rgba(255, 250, 243, .94);
        box-shadow: inset 14px 0 #174f78, var(--ombre);
    }

    .accueil .rubrique:nth-child(2) {
        box-shadow: inset 14px 0 #f2eee3, inset 15px 0 rgba(23, 79, 120, .18), var(--ombre);
    }

    .accueil .rubrique:nth-child(3) {
        box-shadow: inset 14px 0 #a93440, var(--ombre);
    }

    .accueil .rubrique:hover {
        transform: translateX(8px);
        box-shadow: inset 14px 0 #174f78, var(--ombre-forte);
    }

    .accueil .rubrique:nth-child(2):hover {
        box-shadow: inset 14px 0 #f2eee3, inset 15px 0 rgba(23, 79, 120, .18), var(--ombre-forte);
    }

    .accueil .rubrique:nth-child(3):hover {
        box-shadow: inset 14px 0 #a93440, var(--ombre-forte);
    }

    .accueil .rubrique h2 {
        margin: 0;
        padding-left: 0;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: clamp(1.7rem, 4vw, 2.5rem);
        font-weight: 600;
    }

    .fleche-rubrique {
        width: 50px;
        height: 50px;
        border: 2px solid currentColor;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 1.5rem;
    }

    .pied { background: rgba(255, 250, 243, .9); }
}

@media screen and (max-width: 640px) {
    body::before { left: 27px; }
    .entete-inner { padding-left: 48px; }
    .marque small { display: block; margin-left: 0; }
    .nav { margin-left: 0; }
    .wrap { padding-left: 48px; }
    .accueil .wrap { padding-top: 36px; padding-bottom: 60px; }
    .accueil .rubriques { gap: 24px; }
    .accueil .rubrique { min-height: 112px; padding: 18px 16px 18px 30px; }
    .fleche-rubrique { width: 40px; height: 40px; }
}

.compteur-pages {
    padding: 7px 12px;
    border: 1px solid var(--bord);
    border-radius: 9px;
    background: var(--surface);
    color: var(--texte-doux);
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Témoin d'enregistrement */
.statut {
    margin-left: auto;
    font-size: .87rem;
    font-weight: 600;
    color: var(--texte-doux);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.statut.ok        { color: var(--vert); }
.statut.en-cours  { color: var(--texte-doux); }
.statut.probleme  { color: var(--rouge); }

/* Le code de l'équipe, au bout de la barre d'outils. Le formulaire
   prend la place du bouton une fois qu'on a cliqué dessus : sur une
   barre déjà chargée, une boîte de dialogue en plus serait de trop. */
.verrou { display: flex; align-items: center; gap: 6px; }

.verrou input {
    font: inherit;
    font-size: .9rem;
    width: 140px;
    padding: 7px 11px;
    border-radius: 9px;
    border: 1px solid var(--bord-fort);
    background: var(--surface);
    color: var(--texte);
}

.verrou input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-doux);
}

.verrou-erreur {
    color: var(--rouge);
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

/* La liste.
   Une progression fait 20 à 26 chapitres : si chaque ligne affiche son
   descriptif complet, il faut faire défiler longuement pour voir
   l'ensemble de l'année. Les descriptifs sont donc repliés par défaut
   et une ligne tient sur une seule hauteur de texte. */
.liste { display: flex; flex-direction: column; gap: 5px; }

/* Une ligne = UNE seule rangée de 5 colonnes :
   poignée · numéro · chevron · contenu · actions.
   Chaque enfant est placé explicitement : sans ça, le placement
   automatique de la grille intervertit le contenu et les boutons.
   La colonne du numéro a une largeur plancher, et non fixe : les
   pastilles s'alignent d'une ligne à l'autre, et un numéro écrit à la
   main plus long que deux chiffres — « 20 bis » — tient quand même. */
.ligne {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 9px;
    padding: 6px 11px;
    display: grid;
    grid-template-columns: 18px minmax(34px, auto) 20px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: start;
    box-shadow: inset 3px 0 0 var(--domaine, transparent), 0 1px 2px rgba(24, 32, 60, .05);
}

/* Le domaine du programme, repris du code couleur d'iParcours : les
   nombres et calculs (N…) en orange, les grandeurs, mesures et la
   géométrie (G…) en vert, l'organisation et la gestion de données (D…)
   en bleu. La couleur se pose sur la tranche gauche de la ligne et sur
   la référence elle-même ; une seule variable les commande.

   La tranche est une ombre INTÉRIEURE et non une bordure : une bordure
   de 3 px décalerait le contenu de 2 px, et les lignes sans référence
   ne s'aligneraient plus avec les autres. Une référence hors des trois
   domaines — « A1 » pour l'algorithmique, un simple numéro — n'a pas de
   couleur attitrée et garde le cyan. */
.ligne[data-domaine="N"] { --domaine: var(--orange); }
.ligne[data-domaine="G"] { --domaine: var(--vert); }
.ligne[data-domaine="D"] { --domaine: var(--bleu); }

/* Le titre prend lui aussi la couleur de son domaine : c'est lui qu'on
   lit, et la couleur y dit d'un coup d'œil de quoi parle le chapitre. */
.ligne[data-domaine] .titre-chap { color: var(--domaine); }

/* La page du cahier, repérée dans le descriptif : c'est ce qu'on cherche
   en premier en préparant une séance, et ça se perdait dans la phrase. */
.descriptif .page,
.page.page-lien { color: var(--violet); font-weight: 700; }
.page.page-lien {
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.page.page-lien:hover,
.page.page-lien:focus-visible { color: var(--accent); }
.pages-ajoutees { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; margin-top: 5px; }
.corrections-ajoutees { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; margin-top: 5px; }
.ressources-groupe { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; margin-top: 5px; }
.pages-label { color: var(--texte-doux); font-size: .76rem; font-weight: 700; }
.partie-visible {
    display: inline-flex;
    align-items: center;
    margin-left: 3px;
    vertical-align: middle;
}
.partie-visible input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.page-ajoute { display: inline-flex; align-items: center; gap: 2px; }
.page-ajoute .page-lien { color: var(--violet); font-size: .78rem; font-weight: 700; }
.correction-ajoute { display: inline-flex; align-items: center; gap: 2px; }
.cours-ajoute .doc-source { color: var(--bleu); }

.ligne:hover { border-color: var(--bord-fort); }

/* Le marqueur de dépôt se pose en absolute dans l'interligne : une
   bordure de 3 px aurait grossi la ligne visée, fait sauter le contenu
   sous le curseur, et le marqueur aurait clignoté avant/après. */
.ligne.survol-avant::before,
.ligne.survol-apres::after {
    content: '';
    position: absolute;
    left: 5px;
    right: 5px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    z-index: 2;
}
.ligne.survol-avant::before { top: -4px; }
.ligne.survol-apres::after { bottom: -4px; }
.ligne.en-deplacement { opacity: .4; }

.poignee {
    grid-column: 1;
    cursor: grab;
    color: var(--bord-fort);
    font-size: .95rem;
    line-height: 1.6;
    user-select: none;
    text-align: center;
}

.poignee:active { cursor: grabbing; }

.numero {
    grid-column: 2;
    font-weight: 800;
    font-size: .9rem;
    color: var(--accent);
    background: var(--accent-doux);
    border-radius: 6px;
    text-align: center;
    padding: 1px 4px;
    line-height: 1.5;
    white-space: nowrap;
}

/* La pastille est aussi une case de saisie : le numéro se corrige à la
   main. Les règles communes des champs modifiables (plus bas) lui
   donneraient le fond gris des autres champs et un débord de 4 px qui la
   ferait mordre sur la poignée et le chevron ; elle garde donc son aplat
   et sa largeur, et ne signale la saisie possible que par un liseré. */
.numero[contenteditable] {
    padding: 1px 4px;
    margin: 0;
    cursor: text;
}

.numero[contenteditable]:hover { background: var(--accent-doux); box-shadow: inset 0 0 0 1px var(--accent); }
.numero[contenteditable]:focus { background: var(--accent-doux); }

/* Chevron de dépliage : masque et montre le descriptif. */
.chevron {
    grid-column: 3;
    font: inherit;
    font-size: .7rem;
    line-height: 1.5;
    padding: 0;
    width: 20px;
    border: none;
    background: transparent;
    color: var(--texte-doux);
    cursor: pointer;
    transition: transform .12s ease;
}

.chevron:hover { color: var(--accent); }
.chevron[aria-expanded="true"] { transform: rotate(90deg); }

.corps { grid-column: 4; min-width: 0; }
.ligne:not(.vacances):not(.note):not(.evaluation):not(.bloc) .corps { cursor: pointer; }

.titre-chap {
    display: inline-block;
    max-width: 100%;
    font-weight: 650;
    font-size: .95rem;
    line-height: 1.45;
    outline: none;
}
.titre-chap[contenteditable] { cursor: text; }

/* « pre-wrap » conserve les retours à la ligne saisis avec Maj+Entrée :
   le descriptif sert à lister les séances du chapitre, une par ligne. */
.descriptif {
    color: var(--texte-doux);
    font-size: .89rem;
    line-height: 1.5;
    margin-top: 5px;
    padding-bottom: 3px;
    white-space: pre-wrap;
    outline: none;
}

/* Les champs modifiables */
[contenteditable] { border-radius: 6px; padding: 1px 4px; margin: -1px -4px; }
[contenteditable]:hover  { background: var(--surface-2); }
[contenteditable]:focus  { background: var(--surface-2); box-shadow: 0 0 0 2px var(--accent); }
[contenteditable]:empty::before {
    content: attr(data-vide);
    color: var(--bord-fort);
    font-style: italic;
}

.actions {
    grid-column: 5;
    display: flex;
    align-items: center;
    gap: 1px;
}

.mini {
    font: inherit;
    font-size: .8rem;
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--texte-doux);
    cursor: pointer;
}

.mini:hover:not(:disabled) { background: var(--surface-2); color: var(--texte); border-color: var(--bord); }
.mini:disabled { opacity: .25; cursor: default; }
.mini.ajouter-ici { color: var(--vert); }
.mini.ajouter-ici:hover { background: var(--vert-doux); border-color: var(--vert); }
.mini.supprimer:hover { background: var(--rouge-doux); color: var(--rouge); border-color: var(--rouge); }
.mini.confirme { background: var(--rouge); color: #fff; border-color: var(--rouge); width: auto; padding: 0 9px; font-size: .75rem; font-weight: 700; }

/* La référence au chapitre du manuel iParcours. Un nombre seul au bout
   d'une ligne ne dirait pas ce qu'il compte : le « iP. » qui le précède
   est ajouté par la feuille de style, donc il ne se retrouve ni dans la
   saisie ni dans les données enregistrées. */
.iparcours {
    font-size: .78rem;
    font-weight: 700;
    color: var(--domaine, var(--cyan));
    white-space: nowrap;
    outline: none;
    margin-right: 4px;
}

.iparcours:not(:empty)::before {
    content: 'iP. ';
    color: var(--texte-doux);
    font-weight: 600;
}

/* Boutons et invite « + iParcours » ne se montrent qu'au survol de la
   ligne : l'œil doit suivre la liste des chapitres, pas une colonne de
   symboles identiques répétés vingt-six fois. Une référence déjà
   renseignée, elle, reste toujours affichée — c'est une information.
   Sur écran tactile, où le survol n'existe pas, tout reste visible. */
@media (hover: hover) {
    .actions .mini,
    .iparcours:empty { transition: opacity .12s ease; }

    .ligne:not(:hover) .actions .mini:not(.confirme):not(:focus-visible),
    .ligne:not(:hover) .iparcours:empty:not(:focus-visible) { opacity: 0; }
}

/* Vacances et notes : ni numéro ni chevron, donc 3 colonnes seulement.
   Le contenu remonte en colonne 2 et les actions en colonne 3. */
.ligne.vacances,
.ligne.note {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    border-style: dashed;
    box-shadow: none;
}

.ligne.vacances .corps,
.ligne.note .corps { grid-column: 2; }

.ligne.vacances .actions,
.ligne.note .actions { grid-column: 3; }

/* Évaluation intercalée dans la progression : elle n'a pas de numéro de
   chapitre, mais garde le même alignement que les séparateurs. */
.ligne.evaluation {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    background: var(--rouge-doux);
    border-color: var(--rouge);
}
.ligne.evaluation .corps { grid-column: 2; cursor: default; }
/* L'en-tête plie et déplie l'évaluation : il l'annonce au survol. */
.ligne.evaluation .evaluation-ligne { cursor: pointer; }
.ligne.evaluation .actions { grid-column: 3; }
.evaluation-ligne { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.evaluation-ligne .mini.ajouter-ici { margin-left: auto; align-self: center; }
.evaluation-titre { color: var(--rouge); }
.evaluation-badge {
    color: var(--rouge);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.evaluation-meta,
.evaluation-documents {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 9px;
    margin-top: 5px;
    font-size: .8rem;
}
.evaluation-date { color: var(--texte-doux); }
.evaluation-publication { display: inline-flex; align-items: center; gap: 4px; color: var(--rouge); font-size: .78rem; font-weight: 700; }
.evaluation-publication input { accent-color: var(--rouge); }
.evaluation-document { display: inline-flex; align-items: center; gap: 4px; }
.evaluation-document .mini { width: 22px; height: 22px; }

/* Plusieurs sujets d'une même évaluation : un seul bloc, une ligne
   par sujet. */
.evaluation-sujets { margin-top: 3px; }
.evaluation-sujet {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
    padding-top: 6px;
}
.evaluation-sujet + .evaluation-sujet {
    border-top: 1px dashed var(--bord-fort);
    margin-top: 6px;
}
.evaluation-sujet-nom { color: var(--rouge); font-weight: 700; min-width: 70px; }
.evaluation-sujet .evaluation-publication { margin-left: auto; }
.evaluation-sujet .evaluation-documents { flex-basis: 100%; margin-top: 0; }

/* Séparateur de vacances */
.ligne.vacances {
    background: var(--vert-doux);
    border-color: var(--vert);
    margin: 4px 0;
}

.ligne.vacances .titre-chap {
    color: var(--vert);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .78rem;
    font-weight: 800;
}

/* Note libre */
.ligne.note { background: var(--surface-2); }

.ligne.note .corps { font-size: .87rem; font-style: italic; color: var(--texte-doux); white-space: pre-wrap; }

/* Titre de bloc : une période de l'année — « Calcul littéral et espace »,
   « Thalès »… Le bloc n'est qu'une ligne posée dans la liste ; les lignes
   qui le suivent jusqu'au prochain bloc s'indencent sous lui (classe
   « dans-bloc », posée par le JS). Supprimer la ligne du bloc ne supprime
   que l'enseigne : les chapitres restent, simplement hors bloc. */
.ligne.bloc {
    background: var(--accent-doux);
    border-color: var(--accent);
    margin: 9px 0 4px;
}

.ligne.bloc .titre-chap {
    color: var(--accent);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.ligne.bloc .corps { grid-column: 2 / span 3; cursor: default; }
.ligne.bloc .actions { grid-column: 5; }

.ligne.dans-bloc { margin-left: 26px; }

.ajouts {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.aide {
    font-size: .85rem;
    color: var(--texte-doux);
    margin: 16px 0 0;
}

/* Titre du niveau : invisible à l'écran, où l'onglet actif le dit déjà,
   et repris sur le papier où il n'y a plus d'onglets. */
.titre-impression { display: none; }

/* Sur grand écran aussi, les chapitres restent dans une seule colonne.
   Cela suit l'ordre de l'année et évite que deux chapitres voisins soient
   séparés entre la gauche et la droite. */

/* ===== 6. DOCUMENTS · ÉVALUATIONS ===== */

.docs-groupe { margin-top: 26px; }
.docs-groupe h2 { margin: 0 0 10px; font-size: 1.15rem; }
.docs-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.seances { margin-top: 8px; }
/* La colonne du nom a une largeur FIXE : les rangées Cours / Pages /
   Corrigés démarrent à la même verticale dans tous les chapitres, au
   lieu de zigzaguer selon la longueur de chaque nom. Le champ de
   renommage, lui, épouse toujours le texte saisi. */
.seance-ligne { display: grid; grid-template-columns: 76px 330px minmax(0, 1fr); column-gap: 12px; row-gap: 7px; align-items: start; margin: 10px 0; }
.seance-numero { color: var(--texte-doux); font-size: .78rem; font-weight: 700; padding-top: 2px; }
.seance-texte { min-width: 0; width: fit-content; max-width: 100%; }
.seance-liens { grid-column: 3; grid-row: 1; min-width: 0; display: grid; align-content: start; gap: 6px; }
.seance-docs, .seance-actions { min-width: 0; display: flex; align-items: center; gap: 7px 9px; flex-wrap: wrap; }
.seance-actions { row-gap: 5px; }
/* Étiquettes Cours / Pages / Corrigés de même largeur : les boutons de
   chaque rangée démarrent au même endroit au lieu de former un escalier. */
.seance-liens .pages-label { flex: none; width: 72px; }
.pdf-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.seance-faite { display: inline-flex; align-items: center; gap: 4px; color: var(--texte-doux); font-size: .76rem; white-space: nowrap; }
.seance-faite input { accent-color: var(--accent); }
.doc-source, .pdf-eleve { font-size: .78rem; font-weight: 700; }
.doc-source { color: var(--accent); white-space: nowrap; }
.pdf-eleve { color: var(--rouge); white-space: normal; overflow-wrap: anywhere; }
.ressource {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .82rem;
}
.ressource a { color: var(--accent); font-weight: 700; }
.ressource-ajout { font-size: .75rem; padding: 3px 7px; }
.supprimer-ressource { margin-left: auto; }
.seance-docs .supprimer-ressource { margin-left: 0; }
.supprimer-seance { color: var(--rouge); }
.ajouter-seance { margin-top: 6px; font-size: .78rem; padding: 5px 9px; }
@media (max-width: 700px) { .seance-ligne { grid-template-columns: 1fr; gap: 4px; } .seance-liens { grid-column: 1; grid-row: auto; } }

.doc {
    display: block;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 13px 15px;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.doc:hover { border-color: var(--accent); transform: translateY(-2px); background: #fffdf9; }
.doc h3 { margin: 0 0 8px; font-size: .98rem; }
.doc .etiquette {
    display: inline-block;
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-doux);
    color: var(--accent);
}
.doc-action {
    float: right;
    margin-top: 1px;
    color: var(--texte-doux);
    font-size: .78rem;
    font-weight: 700;
}
.doc-action span { color: var(--accent); font-size: 1rem; }

@media (max-width: 720px) {
    .docs-grille { grid-template-columns: 1fr; }
}

.tableau-zone { overflow-x: auto; margin-top: 20px; }

table.evals {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
}

table.evals th, table.evals td {
    text-align: left;
    padding: 11px 13px;
    border-bottom: 1px solid var(--bord);
    font-size: .92rem;
    vertical-align: top;
}

table.evals th {
    background: var(--surface-2);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texte-doux);
}

table.evals tr:last-child td { border-bottom: none; }
table.evals td [contenteditable] { display: block; min-height: 1.4em; }

/* ===== 7. ÉCRANS ÉTROITS ===== */

@media (max-width: 640px) {
    .wrap { padding: 20px 14px 60px; }
    h1 { font-size: 1.45rem; }

    .entete-inner { gap: 10px; padding: 10px 14px; }
    .nav a { padding: 6px 10px; font-size: .87rem; }

    /* Au doigt, le glisser-déposer natif ne fonctionne pas : on retire
       la poignée. Les flèches ▲▼ prennent le relais et doivent donc
       rester atteignables en permanence — c'est le seul moyen de
       réordonner sur téléphone. On ne masque rien, on resserre. */
    .barre-outils { gap: 8px; }
    .onglets { width: 100%; }
    .onglets button { flex: 1; padding-inline: 8px; }
    .barre-outils .btn { min-height: 44px; }

    .ligne { grid-template-columns: minmax(30px, auto) 44px minmax(0, 1fr) auto; gap: 4px; padding: 6px 8px; }
    .poignee { display: none; }
    .numero  { grid-column: 1; }
    .chevron { grid-column: 2; }
    .corps   { grid-column: 3; }
    .actions { grid-column: 4; }
    .chevron { width: 44px; min-height: 44px; }
    .mini    { width: 44px; height: 44px; }   /* cible confortable au doigt */
    .iparcours { display: none; }             /* réapparaît une fois la ligne dépliée */
    .ligne.deplie .iparcours { display: inline; }

    .ligne.vacances, .ligne.note { grid-template-columns: minmax(0, 1fr) auto; }
    .ligne.vacances .corps, .ligne.note .corps { grid-column: 1; }
    .ligne.vacances .actions, .ligne.note .actions { grid-column: 2; }

    .statut { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .rubrique { transition: none; }
}

/* ===== 8. IMPRESSION ET PDF ===== */

/* Le PDF est produit par le navigateur lui-même : le bouton 🖨️ ouvre la
   boîte d'impression, où « Enregistrer au format PDF » sert de
   destination. Pas de bibliothèque à embarquer, et le résultat suit le
   format de papier choisi par chacun.
   Le JavaScript déplie tous les chapitres avant l'impression — un
   chapitre replié n'a pas de descriptif dans la page, il n'est pas
   écrit — et remet la vue comme elle était ensuite. */
@media print {
    /* Les couleurs sont reprises du thème clair, jamais du thème sombre :
       un collègue dont le système est en sombre imprimerait sinon des
       pages noires. Le papier reste blanc et les grandes surfaces vides ;
       la couleur ne sert qu'à repérer — le numéro du chapitre, la bande
       de vacances, la référence iParcours et le domaine du programme.
       Les gris sont un cran plus soutenus qu'à l'écran, où le
       rétroéclairage aide à lire. */
    :root {
        --fond:        #fff;
        --surface:     #fff;
        --surface-2:   #fff;
        --bord:        #c3cbdd;
        --bord-fort:   #a3aec7;
        --texte:       #171c30;
        --texte-doux:  #49536e;
        --accent:      #4338ca;
        --accent-doux: #eceefe;
        --cyan:        #0b647d;
        --bleu:        #0b5aa0;
        --violet:      #6d28d9;
        --orange:      #9a4506;
        --vert:        #126f35;
        --vert-doux:   #e4f5ea;
        --ombre:       none;
        --ombre-forte: none;
    }

    @page { size: A4 portrait; margin: 14mm; }

    /* Sans ça, le navigateur laisse tomber les aplats à l'impression —
       la pastille du numéro et la bande de vacances sortiraient blanches,
       à moins de penser à cocher « Graphiques d'arrière-plan ». */
    body {
        background: #fff;
        -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
    }

    /* Tout ce qui sert à modifier n'a rien à faire sur le papier. */
    .entete,
    .barre-outils,
    .ajouts,
    .aide,
    .pied,
    .message,
    .poignee,
    .chevron,
    .actions .mini,
    h1,
    .sous-titre { display: none !important; }

    .wrap { max-width: none; padding: 0; }

    .titre-impression {
        display: block;
        font-size: 1.3rem;
        font-weight: 750;
        margin: 0 0 10px;
    }

    /* Détaillé : une seule colonne. Les descriptifs sont dépliés, et une
       liste de séances coupée en deux demi-colonnes se lirait mal. */
    .liste { display: block; column-count: 1; }

    /* Compact : rien que les titres, donc deux colonnes de journal —
       l'année entière tient alors sur une page. Les vacances et les
       enseignes de bloc suivent le flot et n'occupent qu'une colonne ;
       seules les notes les traversent. */
    body.pdf-compact .liste { column-count: 2; column-gap: 8mm; }

    body.pdf-compact .liste > .note { column-span: all; }

    body.pdf-compact .ligne { break-inside: avoid; margin-bottom: 1px; }

    /* Un chapitre coupé entre deux pages, titre d'un côté et séances de
       l'autre, obligerait à feuilleter pour le lire. */
    .ligne {
        break-inside: avoid;
        margin-bottom: 3px;
        border-radius: 0;
        border-width: 0 0 1px;
        padding: 3px 0;
    }

    /* La bande de vacances garde son vert et son aplat : c'est le repère
       qui se retrouve le plus vite en parcourant une page. */
    .ligne.vacances {
        background: var(--vert-doux);
        border: 1px solid var(--vert);
        border-radius: 4px;
        margin: 9px 0 5px;
        padding: 4px 8px;
    }

    .ligne.note { border-bottom: 0; }

    /* Le numéro reprend sa pastille : sur une page dense, c'est par lui
       qu'on retrouve un chapitre dont on parle en réunion. La pastille
       étant elle aussi une case de saisie, il faut passer devant la règle
       qui efface le fond de tous les champs modifiables, juste en
       dessous — d'où le sélecteur plus précis et le « !important ». */
    .ligne .numero {
        background: var(--accent-doux) !important;
        color: var(--accent);
        border-radius: 4px;
        padding: 1px 4px;
    }

    /* Les cases de saisie ne doivent pas se voir comme telles. */
    [contenteditable] {
        background: none !important;
        box-shadow: none !important;
        padding: 0;
        margin: 0;
    }

    /* Une invite grise (« Titre du chapitre », « + iParcours ») n'a pas
       à s'imprimer : sur le papier, une case vide reste vide. */
    [contenteditable]:empty::before { content: ''; }

    .titre-chap { font-size: .95rem; color: var(--texte); }
    .descriptif { font-size: .85rem; color: var(--texte-doux); }

    /* La référence garde la couleur de son domaine, comme à l'écran, et
       la tranche colorée de la ligne s'imprime aussi : c'est ce qui
       permet de voir d'un coup d'œil, sur le papier, comment l'année se
       partage entre nombres, géométrie et données. */
    .iparcours { font-weight: 700; color: var(--domaine, var(--cyan)); }
}

/* Les règles mobiles historiques sont plus haut dans la feuille. Cette
   correction finale conserve la marge du cahier sur les petits écrans. */
@media screen and (max-width: 640px) {
    .entete-inner { padding-left: 48px; }
    .wrap { padding-left: 48px; }
    .accueil .wrap { padding-left: 48px; }
}

/* Navigation entre les feuilles : l'ancienne page glisse à gauche et la
   suivante arrive de la droite. Les navigateurs plus anciens gardent une
   navigation instantanée normale. */
@view-transition { navigation: auto; }

@media screen and (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: page-sort .28s cubic-bezier(.4, 0, 1, 1) both;
    }

    ::view-transition-new(root) {
        animation: page-entre .34s cubic-bezier(0, 0, .2, 1) both;
    }
}

@keyframes page-sort {
    to { transform: translateX(-12%); opacity: 0; }
}

@keyframes page-entre {
    from { transform: translateX(12%); opacity: 0; }
}

/* Le bouton de connexion reste visible dans tous les en-têtes du site. */
@media screen {
    .entete-meta > #verrou { margin-left: 4px; }

    .connexion-entete {
        appearance: none;
        width: 18px;
        height: 22px;
        padding: 0;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: transparent;
        font: inherit;
        font-size: 0;
        font-weight: 750;
        cursor: pointer;
    }

    .connexion-entete:hover,
    .connexion-entete:focus-visible {
        color: transparent;
        outline: none;
        box-shadow: 0 0 0 2px var(--accent-doux);
    }

    .barre-outils {
        padding: 12px;
        background: color-mix(in srgb, #174f78 9%, #fffaf3);
        border-block: 1px solid rgba(23, 79, 120, .22);
    }

    .barre-outils .btn,
    .barre-outils .compteur-pages,
    .barre-outils .onglets {
        background: #e8eff1;
    }

    .onglets button.actif {
        background: var(--texte);
        color: var(--fond);
        box-shadow: none;
    }

    .ligne { background: #edf2f3; }
    .ligne[data-domaine="N"] { background: #f5ece2; }
    .ligne[data-domaine="G"] { background: #e7f1e9; }
    .ligne[data-domaine="D"] { background: #e5eef4; }
    .ligne.note { background: #eee9f2; }

    .ligne:hover {
        border-color: var(--domaine, var(--texte));
        filter: saturate(1.08);
    }

    .numero { background: rgba(255, 250, 243, .78); }
}

/* Progression volontairement éditoriale : une liste, pas une pile de cartes. */
@media screen {
    .barre-outils {
        padding: 12px 14px;
        background: color-mix(in srgb, #174f78 9%, #fffaf3);
        border: 1px solid rgba(23, 79, 120, .18);
        border-radius: 8px;
    }

    .barre-outils .btn,
    .barre-outils .compteur-pages,
    .barre-outils .onglets {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .barre-outils .btn {
        padding: 7px 2px;
        border: 0;
        border-bottom: 1px solid transparent;
    }

    .barre-outils .btn:hover:not(:disabled) {
        background: transparent;
        border-bottom-color: var(--rouge);
    }

    .onglets {
        padding: 0;
        border: 0;
        gap: 18px;
    }

    .onglets button {
        padding: 7px 2px;
        border-radius: 0;
    }

    .onglets button.actif {
        background: transparent;
        color: var(--texte);
        box-shadow: inset 0 -3px var(--rouge);
    }

    .compteur-pages {
        padding-inline: 2px;
        border: 0;
    }

    .ligne,
    .ligne[data-domaine="N"],
    .ligne[data-domaine="G"],
    .ligne[data-domaine="D"],
    .ligne.note {
        background: color-mix(in srgb, #174f78 9%, #fffaf3);
        border: 1px solid rgba(23, 79, 120, .18);
        border-radius: 8px;
        box-shadow: none;
    }

    .ligne:hover {
        background: color-mix(in srgb, #174f78 14%, #fffaf3);
        border-color: var(--domaine, rgba(23, 79, 120, .36));
        filter: none;
    }

    .ligne[data-domaine] .titre-chap { color: var(--texte); }

    .ligne[data-domaine] .numero {
        color: var(--domaine);
        background: transparent;
    }

    .ligne.vacances {
        background: rgba(232, 244, 235, .72);
        border: 0;
        border-block: 1px solid rgba(40, 116, 83, .45);
    }

    .ajouts .btn {
        background: transparent;
        color: var(--texte);
        border: 0;
        border-bottom: 1px solid var(--bord-fort);
        border-radius: 0;
        padding-inline: 2px;
    }

    .ligne:not(.vacances):not(.note):not(.evaluation) {
        grid-template-columns: 18px minmax(34px, auto) minmax(0, 1fr) auto;
        cursor: pointer;
    }

    .ligne:not(.vacances):not(.note):not(.evaluation) .corps { grid-column: 3; }
    .ligne:not(.vacances):not(.note):not(.evaluation) .actions { grid-column: 4; }
    .chevron { display: none; }
}

@media screen and (max-width: 640px) {
    .ligne:not(.vacances):not(.note):not(.evaluation) {
        grid-template-columns: minmax(30px, auto) minmax(0, 1fr) auto;
    }

    .ligne:not(.vacances):not(.note):not(.evaluation) .numero { grid-column: 1; }
    .ligne:not(.vacances):not(.note):not(.evaluation) .corps { grid-column: 2; }
    .ligne:not(.vacances):not(.note):not(.evaluation) .actions { grid-column: 3; }
}