/* ═══════════════════════════════════════════════════════════════════════
   COLYSEE — feuille de l'application
   ═══════════════════════════════════════════════════════════════════════

   Portée : les écrans du portail connecté, hors administration lourde.
   Chargée par $pageCss = 'style-app.css'; avant partials/head.php.

   Pourquoi ce fichier existe
   ──────────────────────────
   Chaque page portait son propre bloc <style> : plus de treize cents
   lignes réparties sur quatorze pages. Chacune y redéfinissait ses
   champs, ses boutons, ses tableaux — donc sa propre petite charte.

   Le coût ne s'est vu qu'au moment de changer la charte générale : il a
   fallu repasser page par page, et ce qui a été oublié est resté visible.
   Une règle écrite dans une seule page n'est pas une règle, c'est une
   exception qui n'a pas encore été découverte.

   Ordre de cascade : tokens.css → style.css → ce fichier.
   On n'y écrit donc que ce qui est propre à un écran, jamais ce qui
   pourrait valoir partout — cela remonte dans style.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────── Page de connexion ─────────────────────── */

body.p-connexion { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
.login-card { background: #fff; padding: 44px 40px; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 400px; text-align: center; }
.logo-site { width: auto; max-width: 200px; height: auto; max-height: 100px; margin-bottom: 20px; }
/* Logo de l'application, au-dessus de la carte de connexion.
   Le PNG est détouré : aucun mélange de fond n'est nécessaire. */
.logo-accueil {
    width: auto; height: auto;
    max-width: 560px; max-height: 290px;
    margin-bottom: 30px;
}
/* Écrans peu hauts : on réduit pour garder le bouton visible sans défilement */
@media (max-height: 820px) {
    .logo-accueil { max-height: 200px; margin-bottom: 22px; }
}
@media (max-height: 680px) {
    .logo-accueil { max-height: 130px; margin-bottom: 16px; }
}
@media (max-width: 620px) {
    .logo-accueil { max-width: 88vw; }
}
h2 { color: var(--slate-900); margin-bottom: 28px; font-size: 1.4rem; }
.input-group { margin-bottom: 18px; text-align: left; }
label { display: block; margin-bottom: 6px; color: var(--slate-500); font-size: 0.85em; font-weight: 500; }
.login-card input { width: 100%; padding: 12px; font-size: 1em; border: 1px solid var(--trait-commande); border-radius: var(--radius-sm); box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; }
.login-card input:focus { outline: none; border-color: var(--indigo-500); box-shadow: var(--ring); }
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 46px; }
.pwd-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 44px; background: none; border: none; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--texte-faible); cursor: pointer; touch-action: manipulation; }
.pwd-toggle:hover { color: var(--slate-600); }
.pwd-toggle:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.pwd-toggle svg { width: 20px; height: 20px; }
.btn-login { width: 100%; padding: 12px; background-color: var(--indigo-600); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 1em; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.12s; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.btn-login:hover:not(:disabled) { background-color: var(--indigo-700); transform: translateY(-1px); }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-admin { width: 100%; padding: 12px; background-color: var(--slate-800); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 1em; font-weight: 600; cursor: pointer; display: none; text-decoration: none; transition: background 0.2s; }
.btn-admin:hover { background-color: var(--slate-900); }
#messageErreur { color: var(--danger-fg); background-color: var(--danger-bg); border: 1px solid var(--danger-bd); padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 16px; display: none; font-size: 0.9em; }

/* Contexte et pied identifiant : ils distinguent un service légitime
   d'une page de collecte d'identifiants. */
.contexte { font-size: 0.82rem; color: var(--slate-500); margin: 0 0 20px; line-height: 1.5; }
.pied-connexion { margin-top: 26px; text-align: center; max-width: 460px; }
.pied-connexion .editeur { font-size: 0.78rem; color: var(--slate-600); margin: 0 0 7px; }
.pied-connexion .editeur strong { color: var(--slate-800); }
.pied-connexion .liens { font-size: 0.78rem; color: var(--texte-faible); margin: 0 0 12px; line-height: 1.9; }
.pied-connexion .liens a { color: var(--slate-600); text-decoration: none; }
.pied-connexion .liens a:hover { color: var(--indigo-600); text-decoration: underline; }
.pied-connexion .signature { font-size: 0.72rem; color: var(--texte-faible); margin: 0; }


/* ─────────────────────── Tableau de bord ─────────────────────── */

body { min-height: 100vh; }
.n-corps { max-width: 940px; }

/* Les guides et la mention « bientôt » vivent dans le pied de page */
.n-pied svg { vertical-align: -3px; }

/* Répartition des moyens : réservée à la direction. C'est le badge
   qui le dit, pas une couleur de bouton — dans la charte de l'État,
   une teinte différente signale un statut, pas une audience. */
.badge-direction { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 3px 8px;
    background: var(--indigo-600); color: #fff; }
#ligneTrm { background: var(--gris-fond); }
#ligneTrm:hover { background: var(--indigo-50); }

/* ═══════════════ formulaire.php ═══════════════
   Portée : body.p-heures — posée par la page elle-même.
   Ces règles portaient les mêmes noms de classe que celles
   d'autres écrans (« .vide », « .card », « body »…) avec des
   valeurs différentes. La portée les empêche de se rencontrer :
   sans elle, la dernière feuille chargée l'emporterait, et le
   défaut n'apparaîtrait que sur la page d'à côté.
   ═══════════════════════════════════════════════ */
body.p-heures { min-height: 100vh; position: relative; }body.p-heures .n-corps { max-width: 1000px; }

        /* Changement de mot de passe : panneau flottant, inchangé dans son principe */body.p-heures .mdp-zone { display: none; background: var(--slate-800); padding: 10px; position: fixed;
            top: 62px; right: 20px; border-radius: 0; box-shadow: var(--shadow-lg); z-index: 999; width: 240px; }body.p-heures .mdp-zone input { width: 100%; margin: 0 0 6px; box-sizing: border-box; padding: 8px 10px;
            border: 1px solid var(--slate-600); border-radius: 0; font-size: 0.85em; }body.p-heures .mdp-zone .btn { width: 100%; }

        /* ── Une déclaration se lit comme une phrase ── */body.p-heures .n-saisie { border-top: 1px solid var(--trait); }body.p-heures .n-sl { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 0 22px;
            align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--trait); }body.p-heures .n-sl:hover { background: #FFFFFF; }body.p-heures .n-h { font-family: Spectral, Georgia, serif; font-size: 25px; font-weight: 600;
            font-variant-numeric: tabular-nums; line-height: 1; text-align: right; color: var(--slate-900); }body.p-heures .n-h.vide { color: var(--texte-faible); }body.p-heures .n-hl { font-size: 10px; color: var(--texte-faible); text-align: right; margin-top: 4px; letter-spacing: 0.03em; }body.p-heures .n-phrase { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
            font-size: 14.5px; color: var(--slate-800); }body.p-heures .n-phrase select, body.p-heures .n-phrase input {
            width: auto; border: none; border-bottom: 1.5px solid var(--trait-commande);
            background: transparent; font: inherit; font-size: 14.5px; color: var(--slate-900);
            padding: 2px 3px; border-radius: 0; cursor: pointer; }body.p-heures .n-phrase select:focus, body.p-heures .n-phrase input:focus {
            outline: none; border-bottom-color: var(--indigo-600); background: rgba(99,102,241,0.05); }body.p-heures .n-phrase input[type="text"] { min-width: 120px; }body.p-heures .n-phrase input::placeholder { color: var(--texte-faible); font-style: italic; }body.p-heures .n-phrase .prof-select { max-width: 210px; }

        /* Enregistrer : à la fois bouton et témoin d'état */body.p-heures .n-fin { display: flex; align-items: center; gap: 4px; }body.p-heures .btn-save { display: inline-flex; align-items: center; gap: 6px; background: var(--indigo-600);
            color: #fff; border: 1px solid var(--indigo-600); padding: 6px 13px; border-radius: 0;
            font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
            transition: background 0.2s, color 0.2s, border-color 0.2s; }body.p-heures .btn-save:hover { background: var(--indigo-700); border-color: var(--indigo-700); }body.p-heures .btn-save svg { width: 14px; height: 14px; }body.p-heures .btn-save.saved { background: transparent; border-color: transparent; color: var(--success-fg); font-weight: 500; }body.p-heures .btn-save.saved:hover { background: transparent; }body.p-heures .btn-remove { background: none; border: none; color: var(--texte-faible); cursor: pointer;
            padding: 5px 6px; line-height: 1; }body.p-heures .btn-remove:hover { color: var(--danger-fg); }body.p-heures .n-ajout { background: none; border: 1.5px dashed var(--trait-commande); color: var(--slate-500);
            width: 100%; padding: 13px; border-radius: 0; font: inherit; font-size: 13.5px;
            cursor: pointer; margin-top: 14px; }body.p-heures .n-ajout:hover { border-color: var(--indigo-500); color: var(--indigo-600); background: #FFFFFF; }body.p-heures .n-envoi { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }body.p-heures .n-btn { background: var(--indigo-600); color: #fff; border: none; padding: 12px 24px;
            border-radius: 0; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }body.p-heures .n-btn:hover { background: var(--indigo-700); }body.p-heures .n-note { font-size: 12.5px; color: var(--texte-second); }

        /* ── Historique ── */body.p-heures .history-section { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--trait); }body.p-heures .history-section .section-title { margin: 0 0 4px; color: var(--slate-900); }body.p-heures #tableHistorique { width: 100%; border-collapse: collapse; border: none; }body.p-heures #tableHistorique th { background: none; color: var(--texte-faible); text-transform: uppercase;
            font-size: 10.5px; letter-spacing: 0.06em; font-weight: 600; text-align: left;
            padding: 0 12px 9px 0; border-bottom: 1px solid var(--trait); }body.p-heures #tableHistorique td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--trait-clair);
            font-size: 13.5px; color: var(--slate-600); vertical-align: top; }body.p-heures .motif-refus-historique { display: block; font-size: 0.78em; color: var(--danger-fg);
            font-style: italic; margin-top: 4px; font-weight: 600; }body.p-heures .btn-edit-hist { background: #fff; color: var(--slate-600); border: 1px solid var(--slate-300);
            padding: 5px 11px; border-radius: 0; cursor: pointer; font-size: 0.8em; margin-top: 5px; }body.p-heures .btn-edit-hist:hover { border-color: var(--indigo-500); color: var(--indigo-600); }

        @media (max-width: 780px) {body.p-heures .n-sl { grid-template-columns: 70px minmax(0, 1fr); gap: 10px 14px; }body.p-heures .n-fin { grid-column: 1 / -1; justify-content: flex-end; }
        }
        @media print {body.p-heures .n-bar, body.p-heures .n-ajout, body.p-heures .n-envoi, body.p-heures .history-section, body.p-heures .mdp-zone, body.p-heures .footer-signature, body.p-heures .n-fin { display: none; }body.p-heures { background: #fff; padding: 0; }
        }

/* ═══════════════ ficheprojet.php ═══════════════
   Portée : body.p-projets — posée par la page elle-même.
   Ces règles portaient les mêmes noms de classe que celles
   d'autres écrans (« .vide », « .card », « body »…) avec des
   valeurs différentes. La portée les empêche de se rencontrer :
   sans elle, la dernière feuille chargée l'emporterait, et le
   défaut n'apparaîtrait que sur la page d'à côté.
   ═══════════════════════════════════════════════ */
:root {
            --primary: var(--indigo-500);
            --primary-dark: var(--indigo-600);
            --success: #10b981;
            --danger: #ef4444;
            --text: var(--slate-800);
            --text-light: var(--slate-500);
            --border: var(--slate-200);
            --bg: var(--slate-50);
        }

        /* Fond crème COLYSEE ; --bg reste réservé aux cartes internes */body.p-projets { padding: 0; min-height: 100vh; }

        /* ── Barre utilisateur ── */body.p-projets .user-bar {
            position: fixed; top: 0; left: 0; right: 0;
            background: rgba(15, 23, 42, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: white;
            border-bottom: 1px solid #FFFFFF;
            padding: 10px 20px;
            display: flex; align-items: center; justify-content: space-between;
            z-index: 100; font-size: 0.9em;
        }body.p-projets .user-bar .user-info { display: flex; align-items: center; gap: 10px; }body.p-projets .btn-logout { background: none; border: 1px solid #FFFFFF; color: white; padding: 8px 14px; border-radius: 0; cursor: pointer; font-size: 0.85em; touch-action: manipulation; display: inline-flex; align-items: center; min-height: 36px; }body.p-projets .btn-logout:hover { background: #FFFFFF; }body.p-projets .btn-back { background: none; border: 1px solid #FFFFFF; color: white; padding: 8px 14px; border-radius: 0; cursor: pointer; font-size: 0.85em; text-decoration: none; touch-action: manipulation; display: inline-flex; align-items: center; min-height: 36px; }body.p-projets .btn-back:hover { background: #FFFFFF; }
        @media (pointer: coarse) {body.p-projets .btn-logout, body.p-projets .btn-back { min-height: 44px; } }body.p-projets .page-wrap { max-width: 1000px; margin: 0 auto; padding: 38px 34px 46px; }

        /* ── Onglets ── */body.p-projets .tabs { display: flex; gap: 7px; margin-bottom: 26px; }body.p-projets .tab-btn {
            padding: 9px 17px; border: 1px solid transparent; border-radius: 0;
            background: none; color: var(--slate-500); font-weight: 500;
            cursor: pointer; font-size: 13.5px; font-family: inherit;
            transition: background 0.15s, color 0.15s;
            display: inline-flex; align-items: center; gap: 8px;
        }body.p-projets .tab-btn svg { width: 16px; height: 16px; }body.p-projets .tab-btn.active { background: var(--slate-900); color: #fff; box-shadow: none; }body.p-projets .tab-btn .cpt { font-variant-numeric: tabular-nums; font-size: 11.5px; opacity: 0.90; }body.p-projets .tab-btn:hover:not(.active) { background: #FFFFFF; color: var(--slate-800); }body.p-projets .tab-panel { display: none; }body.p-projets .tab-panel.active { display: block; }

        /* ── Liste fiches ── */body.p-projets .fiches-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--trait); }body.p-projets .fiche-card {
            background: none; border: none; border-bottom: 1px solid var(--trait);
            border-radius: 0; padding: 18px 4px;
            display: flex; align-items: center; gap: 16px;
            transition: background 0.15s;
        }body.p-projets .fiche-card:hover { background: #FFFFFF; box-shadow: none; }body.p-projets .fiche-info { flex: 1; min-width: 0; }body.p-projets .fiche-titre { font-weight: 600; color: var(--text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }body.p-projets .fiche-meta { font-size: 0.8rem; color: var(--texte-second); }body.p-projets .motif-refus { font-size: 0.78rem; color: #991b1b; margin-top: 4px; font-style: italic; }body.p-projets .badge {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 3px 10px; border-radius: 0; font-size: 0.8rem; font-weight: 600;
            white-space: nowrap; flex-shrink: 0;
        }body.p-projets .badge.en_attente { background: var(--warning-bg); color: var(--warning-fg); }body.p-projets .badge.valide { background: #d1fae5; color: #065f46; }body.p-projets .badge.refuse { background: var(--danger-bg); color: #991b1b; }body.p-projets .btn-delete {
            background: none; border: 1px solid var(--trait-commande); color: var(--texte-second);
            width: 40px; height: 40px; border-radius: 0; cursor: pointer;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
            transition: all 0.15s; touch-action: manipulation;
        }body.p-projets .btn-delete:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
        @media (pointer: coarse) {body.p-projets .btn-delete { width: 44px; height: 44px; } }body.p-projets .empty-state {
            text-align: center; padding: 46px 20px; color: var(--slate-500);
            background: #FFFFFF; border-radius: 0;
            border: 1.5px dashed var(--slate-300);
        }body.p-projets .empty-state svg { width: 48px; height: 48px; fill: none; stroke: var(--slate-300); stroke-width: 1.5; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; }

        /* ── Formulaire ── */body.p-projets .form-container { background: none; border-radius: 0; box-shadow: none; overflow: visible; }
        /* L'identité est portée par la barre du haut : l'en-tête de fiche
           n'a plus besoin d'un bandeau ni des logos. */body.p-projets .form-header { background: none; color: inherit; padding: 4px 0 26px; display: block; }body.p-projets .form-body { padding: 0; }body.p-projets fieldset { border: none; padding: 0; margin: 0 0 28px; }body.p-projets legend {
            display: flex; align-items: center; gap: 10px;
            font-weight: 600; font-size: 0.9375rem; color: var(--text);
            margin-bottom: 14px; padding: 0; width: 100%;
        }body.p-projets .legend-icon { width: 32px; height: 32px; border-radius: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }body.p-projets .legend-icon svg { width: 18px; height: 18px; fill: currentColor; }body.p-projets .li-identification { background: var(--indigo-50); color: var(--indigo-600); }body.p-projets .li-objectifs { background: var(--warning-bg); color: var(--warning-fg); }body.p-projets .li-description { background: var(--success-bg); color: var(--success-fg); }body.p-projets .li-budget { background: var(--indigo-50); color: var(--indigo-600); }body.p-projets .li-evaluation { background: var(--indigo-50); color: var(--indigo-600); }body.p-projets .li-disciplines { background: var(--indigo-50); color: var(--indigo-600); }body.p-projets .section-card { background: var(--bg); border-radius: 0; padding: 20px; border: 1px solid var(--border); }body.p-projets .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }body.p-projets .form-group { display: flex; flex-direction: column; }body.p-projets .form-group.full-width { grid-column: 1 / -1; }body.p-projets label { font-size: 0.875rem; font-weight: 500; color: var(--text); margin-bottom: 4px; }body.p-projets .optional { font-weight: 400; color: var(--texte-faible); font-size: 0.8rem; }body.p-projets .req { color: var(--danger-fg); font-weight: 700; margin-left: 2px; }body.p-projets .legende-oblig { display: flex; align-items: center; gap: 6px; background: var(--danger-bg); border: 1px solid var(--danger-bd); color: var(--danger-fg); font-size: 0.85rem; padding: 8px 14px; border-radius: 0; margin-bottom: 20px; }body.p-projets input[type="text"], body.p-projets textarea, body.p-projets select {
            width: 100%; padding: 8px 12px;
            border: 1.5px solid var(--trait-commande); border-radius: 0;
            font-size: 0.9375rem; font-family: inherit;
            background: white; color: var(--text);
            transition: border-color 0.15s, box-shadow 0.15s;
        }body.p-projets input[type="text"]:focus, body.p-projets textarea:focus, body.p-projets select:focus {
            outline: none; border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
        }body.p-projets textarea { min-height: 100px; resize: vertical; }body.p-projets select {
            cursor: pointer; appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 10px center; padding-right: 36px;
        }body.p-projets .checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }body.p-projets .checkbox-grid-3 { grid-template-columns: 1fr 1fr 1fr; }body.p-projets .checkbox-item {
            display: flex; align-items: flex-start; gap: 8px;
            padding: 8px 12px; border-radius: 0; background: white;
            border: 1.5px solid var(--trait-commande); cursor: pointer; transition: all 0.12s;
        }
        /* Conditions préalables, juste sous le titre de la fiche */body.p-projets .prealables {
            margin: 0; padding: 16px 26px 18px;
            background: #eff6ff; border-bottom: 1px solid #bfdbfe;
        }body.p-projets .prealables ul { margin: 0; padding-left: 18px; }body.p-projets .prealables li {
            font-size: 0.88rem; line-height: 1.55; color: #1e3a5f;
            margin-bottom: 9px;
        }body.p-projets .prealables li:last-child { margin-bottom: 0; }body.p-projets .prealables strong { color: var(--indigo-600); }

        /* Axes du projet d'établissement : intitulés longs, une seule colonne */body.p-projets .axe-titre {
            margin: 14px 0 7px; font-size: 0.82rem; font-weight: 700;
            color: var(--primary); text-transform: uppercase; letter-spacing: 0.02em;
            line-height: 1.35;
        }body.p-projets .axe-titre:first-of-type { margin-top: 4px; }body.p-projets .checkbox-grid.une-colonne { grid-template-columns: 1fr; }body.p-projets .checkbox-grid.une-colonne .checkbox-item label { line-height: 1.4; }body.p-projets .axe-num {
            display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
            text-align: center; border-radius: 0; margin-right: 6px;
            background: rgba(99,102,241,0.12); color: var(--primary);
            font-size: 0.72rem; font-weight: 700;
        }body.p-projets .checkbox-item:hover { border-color: var(--primary); }body.p-projets .checkbox-item:has(input:checked) { border-color: var(--primary); background: rgba(99,102,241,0.05); }body.p-projets .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--primary); flex-shrink: 0; }body.p-projets .checkbox-item label { font-weight: 400; font-size: 0.875rem; cursor: pointer; margin-bottom: 0; }body.p-projets .full-width { grid-column: 1 / -1; }body.p-projets .form-footer {
            padding: 20px 32px; border-top: 1px solid var(--border);
            display: flex; gap: 12px; justify-content: flex-end;
        }body.p-projets .btn-primary {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 10px 22px; border: none; border-radius: 0;
            background: var(--indigo-600);
            color: white; font-weight: 600; font-size: 0.9375rem;
            cursor: pointer; transition: all 0.15s;
            box-shadow: 0 2px 8px rgba(99,102,241,0.3);
        }body.p-projets .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99,102,241,0.4); }body.p-projets .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }body.p-projets .btn-secondary {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 10px 22px; border: 1.5px solid var(--trait-commande); border-radius: 0;
            background: white; color: var(--text); font-weight: 600; font-size: 0.9375rem;
            cursor: pointer; transition: all 0.15s;
        }body.p-projets .btn-secondary:hover { background: var(--bg); }body.p-projets .btn-primary svg, body.p-projets .btn-secondary svg { width: 18px; height: 18px; fill: currentColor; }

        /* Toast : styles communs (style.css) */

        @media (max-width: 640px) {body.p-projets .form-grid { grid-template-columns: 1fr; }body.p-projets .checkbox-grid, body.p-projets .checkbox-grid-3 { grid-template-columns: 1fr; }body.p-projets .form-body { padding: 20px; }body.p-projets .form-footer { flex-wrap: wrap; padding: 16px 20px; }
        }

/* ═══════════════ rentree.php ═══════════════
   Portée : body.p-rentree — posée par la page elle-même.
   Ces règles portaient les mêmes noms de classe que celles
   d'autres écrans (« .vide », « .card », « body »…) avec des
   valeurs différentes. La portée les empêche de se rencontrer :
   sans elle, la dernière feuille chargée l'emporterait, et le
   défaut n'apparaîtrait que sur la page d'à côté.
   ═══════════════════════════════════════════════ */
body.p-rentree .n-corps { max-width: 940px; }

        /* Avancement */body.p-rentree .avance { display:flex; align-items:center; gap:14px; margin:0 0 26px; flex-wrap:wrap; }body.p-rentree .rail { flex:1; min-width:180px; height:6px; border-radius: 0;
            background:var(--trait-clair); overflow:hidden; }body.p-rentree .rail i { display:block; height:100%; background:var(--indigo-600);
            border-radius: 0; transition:width .45s cubic-bezier(.4,0,.2,1); }body.p-rentree .avance small { font-size:12.5px; color:var(--texte-second); white-space:nowrap;
            font-variant-numeric:tabular-nums; }body.p-rentree .echeance { display:inline-flex; align-items:center; gap:7px; padding:5px 12px;
            border-radius: 0; background:var(--warning-bg); color:var(--warning-fg); border:1px solid var(--warning-bd);
            font-size:12.5px; font-weight:600; }body.p-rentree .echeance.urgent { background:var(--danger-bg); color:var(--danger-fg); border-color:var(--danger-bd); }body.p-rentree .echeance.passe { background:var(--slate-100); color:var(--slate-500); border-color:var(--slate-200); }

        /* Sections */body.p-rentree .sec { background:var(--carte); border:1px solid var(--trait); border-radius: 0;
            margin-bottom:16px; overflow:hidden; }body.p-rentree .sec-tete { display:flex; align-items:center; gap:14px; padding:17px 22px;
            cursor:pointer; user-select:none; }body.p-rentree .sec-tete:hover { background:rgba(99,102,241,.03); }body.p-rentree .num { width:27px; height:27px; flex:none; border-radius: 0; display:grid;
            place-items:center; font-size:12.5px; font-weight:600;
            background:var(--trait-clair); color:var(--texte-second); }body.p-rentree .sec.fait .num { background:var(--success-fg); color:#fff; }body.p-rentree .sec-tete h2 { flex:1; margin:0; font-size:16.5px; font-weight:600;
            letter-spacing:-.01em; }body.p-rentree .sec-tete h2 small { display:block; font-size:12.5px; font-weight:400;
            color:var(--texte-second); margin-top:1px; }body.p-rentree .chevron { color:var(--texte-faible); transition:transform .25s; }body.p-rentree .sec.ouvert .chevron { transform:rotate(180deg); }body.p-rentree .sec-corps { display:none; padding:4px 22px 22px; border-top:1px solid var(--trait-clair); }body.p-rentree .sec.ouvert .sec-corps { display:block; }

        /* Champs */body.p-rentree .champ { margin:16px 0; }body.p-rentree .champ .aide { font-size:12.5px; color:var(--texte-second); font-weight:400;
            margin:0 0 7px; }body.p-rentree .sec input[type=text], body.p-rentree .sec input[type=tel], body.p-rentree .sec input[type=email], body.p-rentree .sec textarea, body.p-rentree .sec select {
            width:100%; padding:9px 12px; border:1px solid var(--trait-commande);
            border-radius: 0; font:inherit; font-size:14px; background:#fff;
            color:var(--slate-900); }body.p-rentree .sec textarea { min-height:76px; resize:vertical; line-height:1.5; }body.p-rentree .sec input:focus, body.p-rentree .sec textarea:focus, body.p-rentree .sec select:focus { outline:0;
            border-color:var(--indigo-600); box-shadow:0 0 0 3px rgba(99,102,241,.13); }
        @media(max-width:720px){body.p-rentree .duo { grid-template-columns:1fr; } }body.p-rentree .connu { display:flex; flex-wrap:wrap; gap:26px; padding:15px 18px;
            border-radius: 0; background:var(--indigo-50); border:1px solid var(--indigo-100);
            margin:16px 0 4px; }body.p-rentree .connu > div span { display:block; font-size:11.5px; color:var(--texte-second);
            letter-spacing:.03em; text-transform:uppercase; }body.p-rentree .connu > div b { font-size:14.5px; font-weight:600; }body.p-rentree .connu .note { flex-basis:100%; font-size:12.5px; color:var(--texte-second);
            margin:0; }body.p-rentree .connu .note a { color:var(--indigo-600); }body.p-rentree .connu.manque { background:var(--warning-bg); border-color:var(--warning-bd); }

        /* Oui / non / peut-être */body.p-rentree .choix { display:inline-flex; border:1px solid var(--slate-300); border-radius: 0;
            overflow:hidden; background:#fff; }body.p-rentree .choix button { border:0; background:transparent; padding:8px 15px; cursor:pointer;
            font:500 13.5px inherit; color:var(--slate-500);
            border-right:1px solid var(--trait-commande); }body.p-rentree .choix button:last-child { border-right:0; }body.p-rentree .choix button.on { background:var(--indigo-600); color:#fff; font-weight:600; }body.p-rentree .ligne-choix { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
            padding:11px 0; border-bottom:1px solid var(--trait-clair); }body.p-rentree .ligne-choix:last-of-type { border-bottom:0; }body.p-rentree .ligne-choix p { margin:0; flex:1; min-width:230px; font-size:14px; }body.p-rentree .ligne-choix p small { display:block; color:var(--texte-second); font-size:12.5px; }body.p-rentree .ligne-choix input[type=text] { width:190px; flex:none; }body.p-rentree .coche { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
            font-size:13.5px; }body.p-rentree .coche input { width:17px; height:17px; accent-color:var(--indigo-600);
            cursor:pointer; }

        /* Tableaux de lignes */body.p-rentree .lignes { width:100%; border-collapse:collapse; margin-top:6px; }body.p-rentree .lignes th { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
            color:var(--texte-second); font-weight:600; text-align:left;
            padding:0 8px 8px; border-bottom:1px solid var(--trait); background:transparent; }body.p-rentree .lignes td { padding:6px 4px; }body.p-rentree .lignes input, body.p-rentree .lignes select { padding:8px 10px; font-size:13.5px; }body.p-rentree .sup { border:0; background:transparent; color:var(--texte-faible); cursor:pointer;
            font-size:18px; line-height:1; padding:4px 6px; border-radius: 0; }body.p-rentree .sup:hover { background:var(--danger-bg); color:var(--danger-fg); }body.p-rentree .ajout { margin-top:10px; border:1px dashed var(--slate-300); background:transparent;
            border-radius: 0; padding:9px 16px; cursor:pointer; font:500 13.5px inherit;
            color:var(--indigo-600); }body.p-rentree .ajout:hover { background:var(--indigo-50); border-color:var(--indigo-600); }body.p-rentree .total-serv { margin-top:12px; padding:11px 15px; border-radius: 0;
            background:var(--success-bg); border:1px solid var(--success-bd); font-size:13.5px;
            display:flex; justify-content:space-between; }body.p-rentree .total-serv b { font-family:Spectral; font-size:17px;
            font-variant-numeric:tabular-nums; }

        /* Convenance : la hiérarchie */body.p-rentree .rang { display:flex; align-items:center; gap:13px; padding:12px 14px;
            border:1px solid var(--trait); border-radius: 0; margin-bottom:9px;
            background:#fff; transition:border-color .2s, background .2s; }body.p-rentree .rang.choisi { border-color:var(--indigo-600); background:var(--indigo-50); }body.p-rentree .pastilles { display:flex; gap:5px; flex:none; }body.p-rentree .pastilles button { width:31px; height:31px; border-radius: 0;
            border:1px solid var(--trait-commande); background:#fff; cursor:pointer;
            font:600 13px inherit; color:var(--texte-faible); }body.p-rentree .pastilles button.on { background:var(--indigo-600); border-color:var(--indigo-600);
            color:#fff; }body.p-rentree .rang p { margin:0; flex:1; font-size:14px; }body.p-rentree .rang p small { display:block; color:var(--texte-second); font-size:12.5px; }body.p-rentree .rang input[type=text] { width:160px; flex:none; }body.p-rentree .rappel { padding:13px 16px; border-radius: 0; background:var(--warning-bg);
            border:1px solid var(--warning-bd); font-size:12.5px; color:var(--warning-fg);
            margin-bottom:16px; line-height:1.5; }

        /* Pied d'action */body.p-rentree .actions { position:sticky; bottom:0; display:flex; align-items:center; gap:14px;
            padding:15px 22px; margin-top:22px; border:1px solid var(--trait);
            border-radius: 0; background:#FFFFFF;
            backdrop-filter:blur(8px); flex-wrap:wrap; }body.p-rentree .actions .note { flex:1; min-width:180px; font-size:12.5px; color:var(--texte-second); }body.p-rentree .btn { border:0; border-radius: 0; padding:13px 24px; font:600 14.5px inherit;
            cursor:pointer; min-height:48px; }body.p-rentree .btn-1 { background:var(--indigo-600); color:#fff; }body.p-rentree .btn-1:hover { background:var(--indigo-700); }body.p-rentree .btn-2 { background:var(--carte); border:1px solid var(--trait-commande); color:var(--slate-900); }body.p-rentree .ferme { padding:22px; border:1px solid var(--trait); border-radius: 0;
            background:var(--carte); color:var(--slate-600); font-size:14px; }

/* ═══════════════ moncompte.php ═══════════════
   Portée : body.p-compte — posée par la page elle-même.
   Ces règles portaient les mêmes noms de classe que celles
   d'autres écrans (« .vide », « .card », « body »…) avec des
   valeurs différentes. La portée les empêche de se rencontrer :
   sans elle, la dernière feuille chargée l'emporterait, et le
   défaut n'apparaîtrait que sur la page d'à côté.
   ═══════════════════════════════════════════════ */
body.p-compte .n-corps { max-width: 720px; }body.p-compte .bloc { background:var(--carte); border:1px solid var(--trait); border-radius: 0;
            padding:22px 24px; margin-bottom:16px; }body.p-compte .bloc h2 { margin:0 0 4px; font-size:16.5px; font-weight:600;
            letter-spacing:-.01em; }body.p-compte .bloc > p.intro { margin:0 0 18px; font-size:13px; color:var(--texte-second); }body.p-compte .champ { margin-bottom:15px; }body.p-compte .bloc input { width:100%; padding:9px 12px; border:1px solid var(--trait-commande);
            border-radius: 0; font:inherit; font-size:14px; background:#fff;
            color:var(--slate-900); }body.p-compte .bloc input:focus { outline:0; border-color:var(--indigo-600);
            box-shadow:0 0 0 3px rgba(99,102,241,.13); }
        @media(max-width:640px){body.p-compte .duo { grid-template-columns:1fr; } }

        /* Ce que la direction tient */body.p-compte .fige { display:flex; flex-wrap:wrap; gap:26px; padding:14px 17px;
            border-radius: 0; background:var(--gris-fond); border:1px solid var(--trait); }body.p-compte .fige > div span { display:block; font-size:11.5px; color:var(--texte-second);
            letter-spacing:.03em; text-transform:uppercase; }body.p-compte .fige > div b { font-size:14.5px; font-weight:600; }body.p-compte .fige p { flex-basis:100%; margin:0; font-size:12.5px; color:var(--texte-second); }body.p-compte .regle { font-size:12.5px; color:var(--texte-second); margin:-6px 0 15px;
            line-height:1.5; }body.p-compte .regle b { color:var(--slate-800); }body.p-compte .pied { display:flex; align-items:center; gap:13px; flex-wrap:wrap; }body.p-compte .pied .msg { font-size:12.5px; flex:1; min-width:150px; }body.p-compte .msg.ok { color:var(--success-fg); }body.p-compte .msg.err { color:var(--danger-fg); }body.p-compte .btn { border:0; border-radius: 0; padding:11px 22px; font:600 14px inherit;
            cursor:pointer; min-height:44px; background:var(--indigo-600); color:#fff; }body.p-compte .btn:hover { background:var(--indigo-700); }body.p-compte .btn.fant { background:var(--carte); border:1px solid var(--trait); color:var(--slate-900); }

/* ═══════════════ factures.php ═══════════════
   Portée : body.p-factures — posée par la page elle-même.
   Ces règles portaient les mêmes noms de classe que celles
   d'autres écrans (« .vide », « .card », « body »…) avec des
   valeurs différentes. La portée les empêche de se rencontrer :
   sans elle, la dernière feuille chargée l'emporterait, et le
   défaut n'apparaîtrait que sur la page d'à côté.
   ═══════════════════════════════════════════════ */
body.p-factures .fx-corps { max-width: 980px; margin: 0 auto; padding: 26px 34px 60px; }body.p-factures .fx-ch { flex: 1 1 190px; border: 1px solid var(--slate-200); background: #FFF;
            padding: 14px 16px; }body.p-factures .fx-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }body.p-factures .fx-tab thead th { background: transparent !important; text-align: left;
            font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
            color: var(--texte-second); font-weight: 600; padding: 9px 10px;
            border-bottom: 1.5px solid var(--slate-900); }body.p-factures .fx-tab td { padding: 12px 10px; border-bottom: 1px solid var(--trait);
            color: var(--slate-800); vertical-align: middle; }body.p-factures .puce { display: inline-block; padding: 2px 9px; font-size: .72rem;
            font-weight: 600; border: 1px solid; }body.p-factures .puce.annulee { color: var(--slate-500); border-color: var(--slate-300);
            text-decoration: line-through; }body.p-factures .bt { border: 1px solid var(--slate-900); background: #FFF; color: var(--slate-900);
            padding: 5px 12px; font-size: .8rem; font-weight: 600; cursor: pointer;
            border-radius: 0; text-decoration: none; display: inline-block; }body.p-factures .fx-note { border-left: 3px solid var(--indigo-600); background: rgba(0,0,145,.04);
            padding: 13px 16px; margin-top: 26px; font-size: .85rem;
            color: var(--slate-700); line-height: 1.6; }body.p-factures .vide { text-align: center; color: var(--slate-500); padding: 40px; font-size: .92rem; }