/* ===== Charte : couleurs actuelles de l'appli, centralisées ici ===== */
        :root {
            --brand: #0f766e;          /* vert sarcelle : boutons principaux, liens, titre */
            --brand-hover: #115e59;
            --brand-soft: #f0fdfa;
            --focus: #14b8a6;
            --text: #1e293b;
            --muted: #64748b;
            --subtle: #94a3b8;
            --border: #cbd5e1;
            --surface: #ffffff;
            --surface-alt: #f1f5f9;
            --danger: #dc2626;
            --danger-soft: #fef2f2;
            --ok: #15803d;
            --ok-soft: #f0fdf4;
            --warn: #b45309;
            --radius: 0.5rem;
        }

        /* ===== Champs ===== */
        .lbl { display:block; font-size:0.8rem; font-weight:500; margin-bottom:0.25rem; }
        .lbl i { color:var(--subtle); font-style:normal; font-weight:400; font-size:0.72rem; }
        .in { width:100%; border:1px solid var(--border); border-radius:var(--radius); padding:0.5rem 0.75rem; outline:none; background:var(--surface); }
        .in:focus { box-shadow:0 0 0 2px var(--focus); border-color:var(--focus); }
        .in:disabled, .in[readonly] { background:var(--surface-alt); color:var(--muted); cursor:not-allowed; }
        .field-error { border-color:var(--danger) !important; box-shadow:0 0 0 1px var(--danger); }
        /* Étoile des champs obligatoires (cf. refreshRequiredMarks dans app.js). */
        .req-mark::after { content:" *"; color:var(--danger); font-weight:600; }

        /* ===== Boutons ===== */
        .btn { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; border-radius:var(--radius);
            padding:0.5rem 1rem; font-weight:600; line-height:1.25; white-space:nowrap; border:1px solid transparent; }
        .btn-primary { background:var(--brand); color:#fff; } .btn-primary:hover { background:var(--brand-hover); }
        .btn-ghost { border-color:var(--border); background:var(--surface); } .btn-ghost:hover { background:var(--surface-alt); }
        .btn-danger { color:var(--danger); border-color:#fecaca; background:var(--surface); } .btn-danger:hover { background:var(--danger-soft); }
        .btn[disabled] { opacity:0.65; cursor:not-allowed; }
        .btn:focus-visible, .lang-toggle button:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
        .spinner { display:inline-block; width:0.85em; height:0.85em; margin-right:0.45em; vertical-align:-0.15em;
            border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .6s linear infinite; }
        @keyframes spin { to { transform:rotate(360deg); } }
        /* Boutons « Ouvrir » des listes pendant l'ouverture d'un dossier (cf. openFromList). */
        button.open[disabled] { opacity:0.6; cursor:wait; }
        /* Cellule des boutons d'une liste de dossiers : « Ouverture… » ne doit pas faire passer « Supprimer » à la ligne. */
        .list-actions { white-space:nowrap; }

        /* ===== Icônes : fichiers SVG de public/icons, teintés par la couleur du texte ===== */
        .ico::before { content:""; display:inline-block; flex:none; width:1.05em; height:1.05em; vertical-align:-0.18em;
            margin-right:0.35em; background-color:currentColor; -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat; }
        .btn.ico::before { margin-right:0; }
        .ico.is-loading::before { display:none; } /* le spinner de withLoading remplace l'icône */
        .ico-download { --ico:url("/icons/download.svg"); }
        .ico-upload { --ico:url("/icons/upload.svg"); }
        .ico-alert { --ico:url("/icons/alert.svg"); }
        .ico-check { --ico:url("/icons/check.svg"); }
        .ico-error { --ico:url("/icons/error.svg"); }
        .ico-file { --ico:url("/icons/file.svg"); }
        .ico-close { --ico:url("/icons/close.svg"); }
        .ico-mail { --ico:url("/icons/mail.svg"); }
        .ico-chat { --ico:url("/icons/chat.svg"); }
        .ico-phone { --ico:url("/icons/phone.svg"); }

        /* Bouton icône seule (fermer une fenêtre, supprimer une ligne) : le libellé est dans aria-label. */
        .icon-btn { display:inline-flex; align-items:center; justify-content:center; flex:none; width:2rem; height:2rem;
            border-radius:var(--radius); color:var(--subtle); }
        .icon-btn::before { content:""; width:1.1rem; height:1.1rem; background-color:currentColor;
            -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat; }
        .icon-btn:hover { color:var(--text); background:var(--surface-alt); }
        .icon-btn-danger:hover { color:var(--danger); background:var(--danger-soft); }
        .icon-btn:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }

        /* ===== Messages d'état : le ton (succès / erreur) porte la couleur et l'icône ===== */
        .status-ok, .status-error { display:inline-flex; align-items:flex-start; gap:0.4rem; }
        .status-ok { color:var(--ok) !important; }
        .status-error { color:var(--danger) !important; }
        .status-ok::before, .status-error::before { content:""; flex:none; width:1.05em; height:1.05em; margin-top:0.1em; background-color:currentColor;
            -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat; }
        .status-ok { --ico:url("/icons/check.svg"); }
        .status-error { --ico:url("/icons/error.svg"); }

        /* ===== Divers ===== */
        .hidden { display:none; }
        /* Champs réservés à l'admin : masqués (et non plus seulement grisés) pour un
           utilisateur, cf. applyAdminOnlyFieldLocks. Classe dédiée plutôt que
           "hidden" pour ne pas entrer en conflit avec les autres règles
           d'affichage d'un même champ (ex. phrase d'engagement selon le template). */
        .admin-hidden { display:none !important; }
        .lang-toggle { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
        .lang-toggle button { padding:0.35rem 0.6rem; font-size:0.75rem; font-weight:600; color:#475569; background:var(--surface); }
        .lang-toggle button:hover { background:var(--surface-alt); }
        .lang-toggle button.active { background:var(--brand); color:#fff; }

        /* ===== En-tête : sur écran étroit, la navigation passe dans un menu ===== */
        .app-header-inner { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; }
        .app-nav { display:flex; align-items:center; gap:0.5rem; }
        .nav-toggle { display:none; }
        .nav-toggle::before { content:""; width:1.25rem; height:1.25rem; background-color:currentColor;
            -webkit-mask:url("/icons/menu.svg") center / contain no-repeat; mask:url("/icons/menu.svg") center / contain no-repeat; }
        .nav-toggle[aria-expanded="true"]::before { -webkit-mask-image:url("/icons/close.svg"); mask-image:url("/icons/close.svg"); }
        @media (max-width: 899px) {
            .nav-toggle { display:inline-flex; padding:0.45rem; }
            .app-header-inner { position:relative; flex-wrap:wrap; }
            .app-nav { display:none; position:absolute; top:calc(100% + 0.5rem); right:0; z-index:40; min-width:14rem;
                flex-direction:column; align-items:stretch; padding:0.5rem; background:var(--surface);
                border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 10px 25px rgba(15,23,42,0.12); }
            .app-nav.open { display:flex; }
            .app-nav .btn { justify-content:flex-start; border-color:transparent; }
            .app-nav .whoami { padding:0.4rem 0.75rem; border-bottom:1px solid var(--surface-alt); margin-bottom:0.25rem; }
        }

        /* ===== Fenêtres modales, liens de contact, champs compacts ===== */
        .z-modal { z-index:50; }
        .modal-panel { max-height:calc(100vh - 2rem); overflow-y:auto; }
        .contact-link { display:flex; align-items:center; gap:0.5rem; color:var(--brand); padding:0.15rem 0; }
        .contact-link:hover { text-decoration:underline; }
        .contact-link::before { margin-right:0; }
        .in-compact { width:auto; padding:1px 4px; }

        /* ===== Tableaux : sur petit écran, chaque ligne devient une carte (cf. labelCells dans app.js) ===== */
        @media (max-width: 639px) {
            .rtable thead { display:none; }
            .rtable tr { display:block; padding:0.75rem 1rem; border-bottom:1px solid var(--surface-alt); }
            .rtable tr:last-child { border-bottom:0; }
            .rtable td { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:0.2rem 0 !important; text-align:left; }
            .rtable td[data-label]::before { content:attr(data-label); color:var(--muted); font-size:0.75rem; flex:none; }
            .rtable td:not([data-label]) { justify-content:flex-start; }
            .rtable td:empty { display:none; }
            .rtable td:first-child { font-weight:600; font-size:0.95rem; padding-bottom:0.35rem !important; }
            .rtable td:first-child::before { display:none; } /* la première colonne (nom) sert de titre à la carte */
            /* Espaces : l'espace actif passe avant les espaces inactifs. */
            .space-active { order:-1; }
            .rtable .list-actions { justify-content:flex-start; gap:1rem; padding-top:0.5rem !important; }
        }

        /* ===== Éditeur : barre d'actions fixe et sommaire des sections ===== */
        .main-wide { max-width:80rem; }
        .editor-bar { position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
            gap:0.5rem; margin:0 -1rem 1rem; padding:0.6rem 1rem; background:rgba(241,245,249,0.96);
            -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); }
        .editor-jump { width:auto; max-width:14rem; padding:0.45rem 0.6rem; font-size:0.85rem; }
        .editor-nav { display:none; flex-direction:column; gap:0.1rem; font-size:0.85rem; }
        .editor-nav a { padding:0.4rem 0.7rem; border-left:2px solid transparent; color:var(--muted); border-radius:0 0.375rem 0.375rem 0; line-height:1.3; }
        .editor-nav a:hover { color:var(--text); background:var(--surface-alt); }
        .editor-nav a.active { color:var(--brand); border-left-color:var(--brand); background:var(--brand-soft); font-weight:600; }
        #doc-form > section { scroll-margin-top:5.5rem; }
        @media (min-width: 640px) { .editor-bar { margin-inline:-1.5rem; padding-inline:1.5rem; } }
        @media (min-width: 1100px) {
            .editor-layout { display:grid; grid-template-columns:15rem minmax(0,1fr); gap:1.5rem; align-items:start; }
            .editor-nav { display:flex; position:sticky; top:5rem; max-height:calc(100vh - 6rem); overflow-y:auto; }
            .editor-jump { display:none; }
        }
        @media (max-width: 639px) {
            .editor-bar .btn { padding:0.4rem 0.7rem; font-size:0.85rem; }
            .editor-bar #status-top { order:10; flex-basis:100%; text-align:left; }
            .editor-jump { max-width:9.5rem; }
        }