/* ═══════════════════════════════════════════════════════════════
   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;
    --vert:        #15803d;
    --vert-doux:   #e8f7ee;
    --orange:      #b45309;
    --orange-doux: #fdf3e3;
    --rouge:       #be123c;
    --rouge-doux:  #fdeef2;
    --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;
        --vert:        #4ade80;
        --vert-doux:   #16301f;
        --orange:      #fbbf24;
        --orange-doux: #33270f;
        --rouge:       #fb7185;
        --rouge-doux:  #351520;
        --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; }

/* ===== 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;
}

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

.marque span { color: var(--accent); }

.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);
}

/* 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); }

/* La liste */
.liste { display: flex; flex-direction: column; gap: 9px; }

/* Une ligne = UNE seule rangée de 4 colonnes :
   poignée · numéro · contenu · actions.
   Chaque enfant est placé explicitement : sans ça, le placement
   automatique de la grille intervertit le contenu et les boutons. */
.ligne {
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 20px 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    box-shadow: var(--ombre);
}

.ligne.survol-avant { border-top: 3px solid var(--accent); }
.ligne.survol-apres { border-bottom: 3px solid var(--accent); }
.ligne.en-deplacement { opacity: .4; }

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

.poignee:active { cursor: grabbing; }

.numero {
    grid-column: 2;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--accent);
    background: var(--accent-doux);
    border-radius: 8px;
    text-align: center;
    padding: 2px 0;
}

.corps { grid-column: 3; min-width: 0; }

.titre-chap {
    font-weight: 700;
    font-size: 1.02rem;
    outline: none;
}

.descriptif {
    color: var(--texte-doux);
    font-size: .92rem;
    margin-top: 3px;
    outline: none;
}

.note-chap {
    margin-top: 7px;
    font-size: .87rem;
    color: var(--orange);
    background: var(--orange-doux);
    border-radius: 7px;
    padding: 5px 9px;
    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: 4;
    display: flex;
    align-items: center;
    gap: 3px;
}

.mini {
    font: inherit;
    font-size: .9rem;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 7px;
    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.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 10px; font-size: .8rem; font-weight: 700; }

.seances {
    font-size: .82rem;
    font-weight: 700;
    color: var(--cyan);
    white-space: nowrap;
    outline: none;
}

/* Vacances et notes : pas de numéro, donc 3 colonnes seulement.
   Le contenu remonte en colonne 2 et les actions en colonne 3. */
.ligne.vacances,
.ligne.note {
    grid-template-columns: 20px 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; }

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

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

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

.ligne.note .corps { font-size: .9rem; font-style: italic; color: var(--texte-doux); }

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

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

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

.docs { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }

.doc {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 17px 19px;
    box-shadow: var(--ombre);
    text-decoration: none;
    color: inherit;
}

.doc:hover { border-color: var(--accent); }
.doc .emoji { font-size: 1.7rem; line-height: 1; }
.doc h3 { margin-bottom: 3px; }
.doc p { margin: 0; color: var(--texte-doux); font-size: .9rem; }
.doc .etiquette {
    display: inline-block;
    margin-top: 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-doux);
    color: var(--accent);
}

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

table.evals {
    width: 100%;
    min-width: 780px;
    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 on passe le
       contenu sous le numéro et les boutons, faute de largeur. */
    .ligne { grid-template-columns: 38px minmax(0, 1fr); gap: 8px 10px; }
    .poignee { display: none; }
    .numero  { grid-column: 1; grid-row: 1; }
    .actions { grid-column: 2; grid-row: 1; justify-content: flex-end; }
    .corps   { grid-column: 1 / -1; grid-row: 2; }

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

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

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