/* ==========================================================================
   ERP 3D — feuille de style du produit.

   Bâtie sur les jetons du BrickManagement Design System (brick-ds.css) :
   couleurs, rayons, ombres et polices viennent de là, on n'en invente pas.
   Ici on définit les composants propres à l'ERP, préfixés « e3- ».

   Deux publics, une seule grammaire : le back-office sur écran large et
   l'application terrain sur téléphone. Les cibles tactiles grossissent sous
   720 px, les tableaux se laissent défiler, rien ne change de sens.

   Fichier séparé (et non un <style> dans la mise en page) pour qu'il soit
   mis en cache par le navigateur et par le service worker hors ligne.
   ========================================================================== */

:root {
    --e3-largeur: 1200px;
    --e3-gouttiere: 28px;
    --e3-barre: 60px;

    /* États métier, dérivés des jetons du système. */
    --e3-ok-fond: var(--green-50);
    --e3-ok-texte: var(--green-800);
    --e3-attention-fond: var(--amber-50);
    --e3-attention-texte: var(--amber-800);
    --e3-alerte-fond: var(--red-50);
    --e3-alerte-texte: var(--red-800);

    --e3-transition: 120ms ease;
}

/* ── Socle ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--surface-2);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

code {
    font-family: var(--font-mono);
    font-size: .86em;
    background: var(--surface-sunken);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
}

/* Chiffres alignés en colonne : indispensable dans les tableaux de montants. */
.e3-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ── Barre du haut ─────────────────────────────────────────────────────── */

.e3-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--n-900);
    color: var(--n-0);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}

.e3-topbar__in {
    max-width: var(--e3-largeur);
    margin: 0 auto;
    padding: 0 var(--e3-gouttiere);
    height: var(--e3-barre);
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.e3-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}

.e3-brand a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--n-0);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -.01em;
    text-decoration: none;
}

.e3-brand__logo {
    display: block;
    flex: 0 0 auto;
}

.e3-brand__kicker {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pw-300);
    padding-left: var(--space-3);
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.e3-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.e3-nav::-webkit-scrollbar { display: none; }

.e3-nav a,
.e3-nav span {
    display: inline-flex;
    align-items: center;
    /* Une entrée de menu ne se comprime pas et ne se coupe pas : mieux vaut
       laisser la barre défiler que rendre « Conformité » illisible. */
    flex: 0 0 auto;
    white-space: nowrap;
    height: 32px;
    padding: 0 9px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--n-300);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--e3-transition), color var(--e3-transition);
}
.e3-nav a:hover { background: rgba(255, 255, 255, .09); color: var(--n-0); text-decoration: none; }
.e3-nav a.is-active { background: var(--accent); color: var(--n-0); }
.e3-nav span { color: rgba(255, 255, 255, .28); cursor: not-allowed; }

.e3-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}
.e3-user__name { font-size: 13px; font-weight: 500; color: var(--n-0); white-space: nowrap; }

/* Menu du compte. `e3-pop` est dessiné pour un fond clair : sur la barre
   sombre il faut sa propre bordure et sa propre teinte de survol. Le panneau,
   lui, retombe sur les surfaces claires du produit. */
.e3-compte { position: relative; flex: 0 0 auto; }

.e3-compte > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 5px;
    color: var(--n-0);
    font-size: 13px;
    font-weight: 500;
}

.e3-compte > summary::-webkit-details-marker { display: none; }
.e3-compte > summary::after {
    content: '';
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .7;
}
.e3-compte > summary:hover { background: rgba(255, 255, 255, .1); }
.e3-compte[open] > summary { background: rgba(255, 255, 255, .14); }

.e3-compte__panel {
    position: absolute;
    right: 0;
    z-index: 60;
    min-width: 210px;
    margin-top: 6px;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
}

.e3-compte__panel a,
.e3-compte__panel button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-body);
    font-family: inherit;
    font-size: 13.5px;
    text-decoration: none;
    cursor: pointer;
}

.e3-compte__panel a:hover,
.e3-compte__panel button:hover { background: var(--surface-2); }
.e3-compte__panel form { margin: 0; }

/* ── Bandeaux ──────────────────────────────────────────────────────────── */

.e3-flag {
    background: var(--e3-attention-fond);
    color: var(--n-800);
    border-bottom: 1px solid var(--border);
}
.e3-flag__in {
    max-width: var(--e3-largeur);
    margin: 0 auto;
    padding: 9px var(--e3-gouttiere);
    font-size: 12.5px;
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    flex-wrap: wrap;
}
.e3-flag__tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--e3-attention-texte);
    white-space: nowrap;
}

/* ── Contenu ───────────────────────────────────────────────────────────── */

.e3-wrap {
    max-width: var(--e3-largeur);
    margin: 0 auto;
    padding: var(--space-7) var(--e3-gouttiere) var(--space-12);
}

.e3-fil {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}
.e3-fil a { color: var(--text-secondary); }

.e3-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.e3-head h1 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin: 0 0 var(--space-2);
    color: var(--text-strong);
}
.e3-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    max-width: 70ch;
}

.e3-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Barre de filtres d'une liste : même place et même marge sur les trois
   écrans filtrables, pour ne pas confondre un filtre avec l'action de la page. */
.e3-filtres { margin-bottom: var(--space-5); }

/* ── Boutons ───────────────────────────────────────────────────────────── */

.e3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--e3-transition), border-color var(--e3-transition), color var(--e3-transition);
}
.e3-btn:hover { background: var(--surface-2); border-color: var(--n-400); color: var(--text-body); text-decoration: none; }
.e3-btn:active { background: var(--surface-sunken); }
.e3-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.e3-btn[disabled], .e3-btn:disabled { opacity: .5; cursor: not-allowed; }

.e3-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.e3-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }
.e3-btn--primary:active { background: var(--accent-press); }

.e3-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .22); color: var(--n-0); }
.e3-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: var(--n-0); }

.e3-btn--danger { color: var(--red-700); border-color: var(--red-600); }
.e3-btn--danger:hover { background: var(--e3-alerte-fond); color: var(--red-800); border-color: var(--red-700); }

.e3-btn--sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.e3-btn--block { width: 100%; }

/* ── Cartes ────────────────────────────────────────────────────────────── */

.e3-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-5);
    overflow: hidden;
}

.e3-card__head {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.e3-card__title {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-strong);
    letter-spacing: -.005em;
}
.e3-card__note { font-size: 12.5px; color: var(--text-muted); }
.e3-card__body { padding: var(--space-5); }

/* ── Tableaux ──────────────────────────────────────────────────────────── */

.e3-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.e3-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.e3-table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: var(--space-3) var(--space-5);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.e3-table td {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}
.e3-table tbody tr:last-child td { border-bottom: 0; }
.e3-table tbody tr { transition: background var(--e3-transition); }
.e3-table tbody tr:hover { background: var(--surface-2); }
.e3-table a { font-weight: 500; }

.e3-sous { color: var(--text-muted); font-size: 12.5px; }
.e3-inactif { opacity: .55; }

/* ── Étiquettes d'état ─────────────────────────────────────────────────── */

.e3-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    background: var(--surface-sunken);
    color: var(--text-secondary);
}
.e3-tag--ok { background: var(--e3-ok-fond); color: var(--e3-ok-texte); }
.e3-tag--attention { background: var(--e3-attention-fond); color: var(--e3-attention-texte); }
.e3-tag--alerte { background: var(--e3-alerte-fond); color: var(--e3-alerte-texte); }
.e3-tag--accent { background: var(--accent-tint); color: var(--accent-strong); }
.e3-tag--neutre { background: var(--surface-sunken); color: var(--text-muted); }
a.e3-tag:hover { text-decoration: none; filter: brightness(.97); }

/* Pastille de niveau, reprise du code couleur de la carte de chaleur. */
.e3-niveau {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: baseline;
    flex: 0 0 auto;
}

/* ── Chiffres clés ─────────────────────────────────────────────────────── */

.e3-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.e3-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4) var(--space-5);
    position: relative;
    overflow: hidden;
}
.e3-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent-border);
}
.e3-stat--alerte::before { background: var(--red-600); }
.e3-stat--attention::before { background: var(--amber-600); }
.e3-stat--ok::before { background: var(--green-600); }

.e3-stat__k {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.e3-stat__v {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin-top: var(--space-1);
    color: var(--text-strong);
}
.e3-stat__v--petit { font-size: 17px; }

/* ── Listes de définitions ─────────────────────────────────────────────── */

.e3-def { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4) var(--space-6); }
.e3-def__k {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.e3-def__v { font-size: 14px; color: var(--text-body); margin-top: 3px; }
.e3-def__v--long { white-space: pre-line; }

/* ── Formulaires ───────────────────────────────────────────────────────── */

.e3-form { display: grid; gap: var(--space-4); }
.e3-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); }

.e3-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.e3-fld > label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.e3-aide { font-size: 12px; color: var(--text-muted); font-weight: 400; }

.e3-inp, .e3-sel, .e3-txt {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-body);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    transition: border-color var(--e3-transition), box-shadow var(--e3-transition);
}
.e3-inp::placeholder, .e3-txt::placeholder { color: var(--text-faint); }
.e3-inp:hover, .e3-sel:hover, .e3-txt:hover { border-color: var(--n-400); }
.e3-inp:focus, .e3-sel:focus, .e3-txt:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.e3-txt { min-height: 82px; resize: vertical; line-height: 1.5; }
.e3-sel { appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236F6F89' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.e3-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13.5px; color: var(--text-secondary); cursor: pointer; }
.e3-check input { width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }
.e3-checks { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Choix en pastilles : utilisables avec des gants, sans viser. */
.e3-choix { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.e3-choix input { position: absolute; opacity: 0; pointer-events: none; }
.e3-choix label {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background var(--e3-transition), border-color var(--e3-transition), color var(--e3-transition);
}
.e3-choix label:hover { border-color: var(--n-400); }
.e3-choix input:checked + label {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
    font-weight: 500;
}
.e3-choix input:focus-visible + label { box-shadow: var(--focus-ring); }

.e3-bloc { margin-bottom: var(--space-5); }
.e3-bloc__titre { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-2); }

/* ── Messages ──────────────────────────────────────────────────────────── */

.e3-msg {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: 13.5px;
    margin-bottom: var(--space-5);
    border: 1px solid transparent;
}
.e3-msg > * + * { margin-top: var(--space-2); }
.e3-msg--ok { background: var(--e3-ok-fond); color: var(--e3-ok-texte); border-color: rgba(22, 101, 52, .18); }
.e3-msg--err { background: var(--e3-alerte-fond); color: var(--e3-alerte-texte); border-color: rgba(153, 27, 27, .18); }
.e3-msg--info { background: var(--surface-lavender-soft); color: var(--accent-strong); border-color: var(--accent-border); }
.e3-msg--neutre { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
.e3-msg--attention { background: var(--e3-attention-fond); color: var(--e3-attention-texte); border-color: rgba(146, 64, 14, .18); }
.e3-msg ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.e3-msg a { color: inherit; text-decoration: underline; }

/* ── État vide ─────────────────────────────────────────────────────────── */

.e3-vide {
    padding: var(--space-10) var(--space-5);
    text-align: center;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

/* ── Grilles de page ───────────────────────────────────────────────────── */

.e3-grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }

/* ── Panneau surgissant et ajout en ligne ──────────────────────────────── */

.e3-pop { position: relative; display: inline-block; }
.e3-pop > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--text-secondary);
    background: var(--surface);
}
.e3-pop > summary::-webkit-details-marker { display: none; }
.e3-pop > summary:hover { background: var(--surface-2); }
.e3-pop[open] > summary { background: var(--surface-sunken); border-color: var(--n-400); }
.e3-pop__panel {
    position: absolute;
    right: 0;
    z-index: 40;
    width: 330px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
    padding: var(--space-4);
    margin-top: 6px;
    text-align: left;
    font-weight: 400;
}

.e3-ajout {
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-2);
}
.e3-ajout > summary { cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); }
.e3-ajout > summary:hover { color: var(--text-body); }
.e3-ajout > form { margin-top: var(--space-4); }

/* ── Application terrain ───────────────────────────────────────────────── */

.e3-terrain { max-width: 660px; margin: 0 auto; }

.e3-progres {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
    margin: var(--space-3) 0 var(--space-1);
}
.e3-progres__barre { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 240ms ease; }

.e3-postes { display: grid; gap: var(--space-2); }

.e3-poste {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--e3-transition), transform var(--e3-transition);
}
.e3-poste:hover { border-color: var(--accent-border); text-decoration: none; }
.e3-poste:active { transform: scale(.995); }
.e3-poste__num {
    flex: 0 0 58px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 14px;
    color: var(--text-strong);
}
.e3-poste__corps { flex: 1 1 auto; min-width: 0; }
.e3-poste__titre { display: block; font-weight: 500; font-size: 14.5px; color: var(--text-strong); }
.e3-poste__detail { display: block; font-size: 12.5px; color: var(--text-muted); }
.e3-poste--fait { background: var(--e3-ok-fond); border-color: rgba(22, 101, 52, .2); }
.e3-poste--actif { border-color: var(--red-600); }

.e3-histo { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.e3-histo__item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: 12.5px;
    background: var(--surface);
}

.e3-signature {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    touch-action: none;
    width: 100%;
    height: 190px;
    display: block;
    cursor: crosshair;
}
.e3-signature-img { max-width: 320px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }

.e3-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.e3-galerie img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    display: block;
}

.e3-planwrap { overflow-x: auto; }

/* ── Hors ligne (jalon 5) ──────────────────────────────────────────────── */

.e3-reseau {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 80;
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: var(--n-900);
    color: var(--n-0);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-overlay);
}
.e3-reseau.is-visible { display: inline-flex; }
.e3-reseau--hors-ligne { background: var(--amber-800); }
.e3-reseau--synchro { background: var(--accent); }
.e3-reseau--ok { background: var(--green-700); }
.e3-reseau__point {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
    flex: 0 0 auto;
}

.e3-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--e3-attention-texte);
    background: var(--e3-attention-fond);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}

/* ── Adaptation aux petits écrans ──────────────────────────────────────── */

@media (max-width: 900px) {
    .e3-grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* Sous 1440 px, le nom de l'entreprise cède la place aux sections : il
   renseigne, elles servent. Mesuré sur un écran de portable à 1340 px, où
   « Conformité » se retrouvait coupée. Le nom du produit, lui, ne bouge
   jamais : c'est la seule chose qui dise où l'on est. */
@media (max-width: 1440px) {
    .e3-brand__kicker { display: none; }
}

@media (max-width: 720px) {
    :root { --e3-gouttiere: 16px; }

    .e3-topbar__in { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: var(--space-3); }
    .e3-nav { order: 3; width: 100%; padding-bottom: 2px; }
    .e3-user { margin-left: auto; }
    .e3-user__name { display: none; }

    .e3-head h1 { font-size: 21px; }
    .e3-wrap { padding-top: var(--space-5); }

    /* Le pouce d'abord : cibles plus hautes, texte assez grand pour que
       le navigateur mobile ne zoome pas au focus. */
    .e3-btn { height: 44px; font-size: 15px; padding: 0 16px; }
    .e3-btn--sm { height: 36px; font-size: 13.5px; }
    .e3-check { min-height: 44px; }
    .e3-check input { width: 22px; height: 22px; }
    .e3-inp, .e3-sel, .e3-txt { font-size: 16px; padding: 10px 12px; }
    .e3-actions { gap: var(--space-2); }

    .e3-card__head, .e3-card__body { padding: var(--space-4); }
    .e3-table th, .e3-table td { padding: var(--space-3) var(--space-4); }

    .e3-pop__panel { position: fixed; left: 16px; right: 16px; width: auto; top: auto; }
}

/* ── Confort et impression ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

@media print {
    .e3-topbar, .e3-flag, .e3-actions, .e3-reseau, .e3-ajout, .e3-pop { display: none !important; }
    body { background: #fff; }
    .e3-card { box-shadow: none; break-inside: avoid; }
}

/* ── Compléments d'écrans ──────────────────────────────────────────────── */

/* Cellule du tableau de conformité : une étiquette d'état + sa date. */
.e3-cellule { min-width: 152px; }
.e3-cellule__date { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }

/* En-tête de colonne à deux niveaux (libellé + précision). */
.e3-table th .e3-sous { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Barre proportionnelle : évolution de l'activité, volumes. */
.e3-barre {
    display: inline-block;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--red-700);
    vertical-align: middle;
}

/* Feuille de route du tableau de bord. */
.e3-jalons { display: grid; gap: var(--space-3); }
.e3-jalon { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; }
.e3-jalon__code { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-muted); }
.e3-jalon__titre { font-weight: 500; color: var(--text-strong); font-size: 13.5px; }

/* Champ de recherche en tête de carte. */
.e3-recherche { display: flex; gap: var(--space-2); align-items: center; }
.e3-recherche .e3-inp { width: 250px; height: 34px; }

/* Sélecteur compact dans une cellule de tableau. */
.e3-sel--compact { height: 32px; padding: 4px 26px 4px 8px; font-size: 13px; }

/* Bloc de code : le XML de la facture électronique. */
.e3-xml {
    background: var(--n-950);
    color: #D7E0EE;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.55;
    overflow: auto;
    max-height: 380px;
    white-space: pre;
}

/* Résumé d'avancement de la tournée. */
.e3-resume { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.e3-resume strong { font-size: 15px; color: var(--text-strong); }

@media (max-width: 720px) {
    .e3-recherche { width: 100%; }
    .e3-recherche .e3-inp { width: auto; flex: 1 1 auto; height: 44px; }
}

/* La cellule de conformité empile son état puis son bouton d'édition. */
.e3-cellule .e3-pop { display: block; margin-top: var(--space-2); }

/* Les références (numéros de lot, de certificat) ne se coupent pas en deux. */
.e3-table code { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   AGENDA — mois, semaine, journée par technicien.

   Un rendez-vous est posé en pourcentage de la journée ouvrée, jamais en
   pixels : la colonne peut changer de hauteur sans qu'aucune position ne se
   décale. Les visites qui se chevauchent sont réparties en couloirs par le
   serveur, qui fournit `left` et `width` — la feuille de style ne fait que
   les appliquer.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --e3-ag-hauteur: 46px;          /* hauteur d'une heure sur écran large */
    --e3-ag-gouttiere: 58px;
    --e3-ag-col-min: 148px;
}

/* ── Barre de pilotage ─────────────────────────────────────────────────── */

.e3-ag-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.e3-ag-nav { display: flex; gap: 6px; flex: 0 0 auto; }
.e3-ag-nav .e3-btn { min-width: 38px; }

.e3-ag-titre {
    flex: 1 1 auto;
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: -.01em;
}

.e3-ag-outils { display: flex; gap: var(--space-2); align-items: center; flex: 0 1 auto; min-width: 0; }
/* Le filtre accepte de rétrécir ; le sélecteur de vues, jamais — c'est la
   commande principale de l'écran, et à demi rognée elle devient un piège. */
.e3-ag-outils .e3-sel { flex: 0 1 210px; min-width: 0; }
.e3-ag-vues { flex: 0 0 auto; }

.e3-ag-vues {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    overflow: hidden;
    background: var(--surface);
}
.e3-ag-vue {
    padding: 7px 15px;
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    border-right: 1px solid var(--border);
    transition: background var(--e3-transition), color var(--e3-transition);
}
.e3-ag-vue:last-child { border-right: 0; }
.e3-ag-vue:hover { background: var(--surface-2); color: var(--text-body); }
.e3-ag-vue--actif { background: var(--accent); color: var(--text-on-accent); }
.e3-ag-vue--actif:hover { background: var(--accent-hover); color: var(--text-on-accent); }

/* Confirmation d'un déplacement. */
.e3-ag-flash {
    margin: 0 0 var(--space-3);
    padding: 10px 14px;
    border-radius: var(--radius-2);
    background: var(--e3-ok-fond);
    color: var(--e3-ok-texte);
    font-size: 14.5px;
    border: 1px solid rgba(22, 101, 52, .18);
}
.e3-ag-flash--err {
    background: var(--e3-alerte-fond);
    color: var(--e3-alerte-texte);
    border-color: rgba(153, 27, 27, .18);
}

/* ── Vue semaine et vue journée ────────────────────────────────────────── */

.e3-ag-grille {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    overflow: hidden;
}

.e3-ag-entetes,
.e3-ag-corps { display: flex; }

.e3-ag-entetes {
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 3;
}

.e3-ag-entete {
    flex: 1 1 0;
    min-width: var(--e3-ag-col-min);
    padding: 9px 10px;
    text-align: center;
    border-left: 1px solid var(--border-subtle);
    overflow: hidden;
}
.e3-ag-entete:first-of-type { border-left: 0; }
.e3-ag-entete a { text-decoration: none; display: block; }
.e3-ag-entete__jour {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.e3-ag-entete__date {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.e3-ag-entete--aujourdhui { background: var(--accent-tint-soft); }
.e3-ag-entete--aujourdhui .e3-ag-entete__jour { color: var(--accent-strong); }
.e3-ag-entete--weekend { background: var(--surface-sunken); }

.e3-ag-corps {
    position: relative;
    height: calc(var(--e3-ag-hauteur) * 13);
    overflow: visible;
}

/* Colonne des heures. */
.e3-ag-gouttiere {
    position: relative;
    flex: 0 0 var(--e3-ag-gouttiere);
    width: var(--e3-ag-gouttiere);
    border-right: 1px solid var(--border);
    background: var(--surface-2);
}
.e3-ag-entetes .e3-ag-gouttiere { border-right: 1px solid var(--border); }
.e3-ag-heure {
    position: absolute;
    right: 7px;
    transform: translateY(-50%);
    line-height: 1;
    font-size: 10.5px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.e3-ag-heure--debut { transform: translateY(0); }
.e3-ag-heure--fin { transform: translateY(-100%); }

.e3-ag-col {
    position: relative;
    flex: 1 1 0;
    min-width: var(--e3-ag-col-min);
    border-left: 1px solid var(--border-subtle);
}
.e3-ag-col:first-of-type { border-left: 0; }
.e3-ag-col--aujourdhui { background: var(--accent-tint-soft); }
.e3-ag-col--weekend { background: var(--surface-sunken); }
.e3-ag-col--orpheline { background: var(--e3-attention-fond); }
.e3-ag-col.e3-ag-cible { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent-border); }

.e3-ag-ligne {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--border-subtle);
    pointer-events: none;
}

/* Le trait de l'heure courante : il rend la journée lisible d'un coup d'œil. */
.e3-ag-maintenant {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--red-600);
    z-index: 2;
    pointer-events: none;
}
.e3-ag-maintenant::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red-600);
}

/* ── Un rendez-vous ────────────────────────────────────────────────────── */

.e3-ag-bloc {
    position: absolute;
    border-radius: var(--radius-1);
    background: var(--accent-tint-soft);
    border: 1px solid var(--accent-border);
    border-left: 3px solid var(--accent);
    overflow: hidden;
    z-index: 1;
    cursor: grab;
    transition: box-shadow var(--e3-transition), transform var(--e3-transition);
}
.e3-ag-bloc:hover { box-shadow: var(--shadow-2, 0 4px 12px rgba(20, 29, 56, .14)); z-index: 2; }
.e3-ag-bloc[draggable="false"] { cursor: default; }
.e3-ag-bloc--glisse { opacity: .4; }

.e3-ag-bloc__lien {
    display: block;
    padding: 3px 6px;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.e3-ag-bloc__heure {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}
.e3-ag-bloc__site {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-strong);
    /* Deux lignes au plus : au-delà, le nom du site pousse le client hors du
       bloc et c'est le bloc voisin qui devient illisible. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Trois paliers, dictés par la hauteur réelle du bloc — une heure vaut 46 px.
   Sans eux, la dernière ligne se retrouve tranchée par le bord du bloc, ce qui
   est plus sale qu'une information absente. Chaque palier n'affiche que ce qui
   tient vraiment. */

/* Moins d'une heure et demie : l'heure et le site sur une seule ligne. */
.e3-ag-bloc--court .e3-ag-bloc__client,
.e3-ag-bloc--court .e3-ag-bloc__tech { display: none; }

/* Moins de deux heures : on ajoute le client, sans le nom du technicien. */
.e3-ag-bloc--moyen .e3-ag-bloc__tech { display: none; }

/* Les deux petits paliers partagent la même mise en ligne. */
/* Les points de suspension se posent sur la ligne, pas sur le mot : c'est le
   conteneur qui coupe, l'élément en ligne ne saurait pas le faire. */
.e3-ag-bloc--court .e3-ag-bloc__lien,
.e3-ag-bloc--moyen .e3-ag-bloc__lien {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.e3-ag-bloc--moyen .e3-ag-bloc__client { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e3-ag-bloc--court .e3-ag-bloc__site,
.e3-ag-bloc--moyen .e3-ag-bloc__site {
    display: inline;
    -webkit-line-clamp: none;
    overflow: visible;
}
.e3-ag-bloc__client,
.e3-ag-bloc__tech {
    display: block;
    font-size: 11px;
    line-height: 1.25;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Trois rendez-vous côte à côte : on ne garde que l'essentiel. */
.e3-ag-bloc--etroit .e3-ag-bloc__client,
.e3-ag-bloc--etroit .e3-ag-bloc__tech { display: none; }

.e3-ag-bloc--urgence { background: var(--e3-alerte-fond); border-color: rgba(153, 27, 27, .25); border-left-color: var(--red-600); }
.e3-ag-bloc--urgence .e3-ag-bloc__heure { color: var(--red-800); }
.e3-ag-bloc--ponctuel { border-left-color: var(--amber-600); }
.e3-ag-bloc--retard { border-left-color: var(--red-600); }
.e3-ag-bloc--faite { background: var(--e3-ok-fond); border-left-color: var(--green-600); opacity: .85; }
.e3-ag-bloc--faite .e3-ag-bloc__heure { color: var(--green-800); }

.e3-ag-bloc__pastille {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 11px;
    color: var(--green-700);
}

/* ── Vue mois ──────────────────────────────────────────────────────────── */

.e3-ag-mois {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    overflow: hidden;
}
.e3-ag-mois__jours {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.e3-ag-mois__jours span {
    padding: 8px;
    text-align: center;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.e3-ag-mois__semaine {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border-subtle);
}
.e3-ag-mois__semaine:last-child { border-bottom: 0; }

.e3-ag-jour {
    min-height: 104px;
    padding: 5px 6px 7px;
    border-left: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.e3-ag-jour:first-child { border-left: 0; }
.e3-ag-jour--hors { background: var(--surface-2); }
.e3-ag-jour--hors .e3-ag-jour__numero { color: var(--text-faint); }
.e3-ag-jour--weekend { background: var(--surface-sunken); }
.e3-ag-jour--aujourdhui { background: var(--accent-tint-soft); }
.e3-ag-jour.e3-ag-cible { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent-border); }

.e3-ag-jour__tete { display: flex; align-items: center; justify-content: space-between; }
.e3-ag-jour__numero {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: center;
    border-radius: 999px;
    padding: 1px 0;
}
.e3-ag-jour--aujourdhui .e3-ag-jour__numero { background: var(--accent); color: var(--text-on-accent); }
.e3-ag-jour__reste { font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.e3-ag-jour__liste { display: flex; flex-direction: column; gap: 2px; }

.e3-ag-puce {
    border-radius: var(--radius-1);
    background: var(--accent-tint-soft);
    border-left: 3px solid var(--accent);
    cursor: grab;
}
.e3-ag-puce a {
    display: flex;
    gap: 5px;
    align-items: baseline;
    padding: 2px 5px;
    text-decoration: none;
    color: inherit;
}
.e3-ag-puce__heure { font-size: 10px; font-weight: 600; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.e3-ag-puce__site {
    font-size: 11.5px;
    color: var(--text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.e3-ag-puce--urgence { background: var(--e3-alerte-fond); border-left-color: var(--red-600); }
.e3-ag-puce--ponctuel { border-left-color: var(--amber-600); }
.e3-ag-puce--retard { border-left-color: var(--red-600); }
.e3-ag-puce--faite { background: var(--e3-ok-fond); border-left-color: var(--green-600); }
.e3-ag-puce--glisse, .e3-ag-bloc--glisse { opacity: .4; }

.e3-ag-jour__plus { font-size: 10.5px; color: var(--text-link); text-decoration: none; padding-left: 5px; }

/* ── Fenêtre de création ───────────────────────────────────────────────── */

.e3-modal {
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    padding: 0;
    width: min(560px, calc(100vw - 32px));
    background: var(--surface);
    color: var(--text-body);
    box-shadow: 0 24px 60px -20px rgba(20, 29, 56, .4);
}
.e3-modal::backdrop { background: rgba(20, 29, 56, .45); }
.e3-modal__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.e3-modal__tete h2 { margin: 0; font-size: 17px; }
.e3-modal__corps { padding: 18px 20px; display: flex; flex-direction: column; gap: var(--space-3); }
.e3-modal__pied {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* ── Sur tablette et téléphone ─────────────────────────────────────────── */

@media (max-width: 900px) {
    .e3-ag-barre { gap: var(--space-2); }
    .e3-ag-titre { order: -1; flex: 1 0 100%; font-size: 17px; }
    .e3-ag-outils { flex: 1 1 auto; justify-content: flex-end; }
}

@media (max-width: 720px) {
    :root { --e3-ag-hauteur: 40px; --e3-ag-col-min: 120px; }

    /* La semaine ne tient pas sur un téléphone : elle se laisse défiler
       horizontalement plutôt que de se comprimer jusqu'à l'illisible. */
    .e3-ag-grille { overflow-x: auto; }
    .e3-ag-entetes, .e3-ag-corps { min-width: 640px; }

    .e3-ag-vue { padding: 10px 14px; }        /* cibles tactiles */
    .e3-ag-nav .e3-btn { min-width: 44px; height: 44px; }

    .e3-ag-jour { min-height: 78px; }
    .e3-ag-puce__site { font-size: 10.5px; }
    .e3-ag-mois__jours span { font-size: 10px; }
}

/* Listes numérotées d'instructions (abonnement à l'agenda, modes d'emploi). */
.e3-liste { margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }
.e3-liste li { margin: 4px 0; }
.e3-card__body > p { margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: 14.8px; }
.e3-card__body > p:last-child { margin-bottom: 0; }

/* Retrouver un poste en tapant son code — le filet du dispositif QR. */
.e3-retrouver { margin: 0 0 var(--space-4); }
.e3-retrouver label { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.e3-retrouver__ligne { display: flex; gap: var(--space-2); max-width: 420px; }
.e3-retrouver__ligne .e3-inp { flex: 1 1 auto; font-family: 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; }
.e3-retrouver .e3-aide { display: block; margin-top: 6px; }
@media (max-width: 720px) {
    .e3-retrouver__ligne { max-width: none; }
    .e3-retrouver__ligne .e3-inp, .e3-retrouver__ligne .e3-btn { height: 44px; }
}

/* Pagination maison — les vues fournies par Laravel visent Tailwind. */
.e3-pagination {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    justify-content: flex-end;
}
.e3-pagination__etat { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.e3-pagination [aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (max-width: 720px) {
    .e3-pagination { justify-content: space-between; }
    .e3-pagination .e3-btn { height: 44px; }
}

/* Bloc de totaux d'un document commercial : aligné à droite, chiffres alignés. */
.e3-totaux {
    margin: 18px 0 0 auto;
    border-collapse: collapse;
    min-width: 300px;
}
.e3-totaux td { padding: 7px 0; font-size: 14.5px; color: var(--text-secondary); }
.e3-totaux td + td { padding-left: var(--space-5); }
.e3-totaux__final td {
    border-top: 2px solid var(--border-strong);
    padding-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-strong);
}
@media (max-width: 720px) { .e3-totaux { min-width: 0; width: 100%; } }

/* ══════════════════════════════════════════════════════════════════════════
   ÉCRANS D'ENTRÉE — connexion, double authentification.

   Ils portaient encore le kit du CRM (`gestco-*`, design/styles.css) : c'était
   la première chose qu'un prospect voyait du produit, et ce n'était pas le
   produit. Ils utilisent maintenant les mêmes jetons que le reste.
   ══════════════════════════════════════════════════════════════════════════ */

body.e3-auth {
    /* Un fond sobre, traversé d'une lueur de la couleur de marque : l'écran
       d'entrée doit être reconnaissable sans être bruyant. */
    background:
        radial-gradient(1100px 620px at 50% -10%, var(--accent-tint-soft), transparent 70%),
        var(--surface-2);
    min-height: 100vh;
}

.e3-auth__ecran {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
}

.e3-auth__carte {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    box-shadow: 0 24px 60px -28px rgba(20, 29, 56, .34);
    overflow: hidden;
}

.e3-auth__marque {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}
.e3-auth__logo { flex: 0 0 auto; border-radius: 12px; }
.e3-auth__nom {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--text-strong);
    line-height: 1.15;
}
.e3-auth__baseline {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    letter-spacing: .01em;
    margin-top: 2px;
}

.e3-auth__corps { padding: var(--space-5); }
.e3-auth__titre {
    margin: 0 0 var(--space-4);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-strong);
}
.e3-auth__form { display: flex; flex-direction: column; gap: var(--space-4); }
.e3-auth__form .e3-inp { width: 100%; }

.e3-btn--bloc { width: 100%; justify-content: center; height: 44px; }

.e3-auth__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: var(--space-3) var(--space-5);
    background: var(--surface-2);
    border-top: 1px solid var(--border-subtle);
    font-size: 12.5px;
    color: var(--text-muted);
}
.e3-auth__pied a { color: var(--text-link); font-weight: 500; text-decoration: none; }
.e3-auth__pied a:hover { text-decoration: underline; }
.e3-auth__url {
    margin-left: auto;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--text-faint);
}

.e3-auth__aide {
    max-width: 420px;
    margin: 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .e3-auth__ecran { padding: var(--space-4) var(--space-3); justify-content: flex-start; padding-top: var(--space-6); }
    .e3-auth__url { margin-left: 0; flex: 1 0 100%; }
    .e3-auth__form .e3-inp { height: 44px; }
}

/* Le code à six chiffres : gros, espacé, centré — on le recopie d'un téléphone. */
.e3-auth__code {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 22px;
    letter-spacing: .32em;
    text-align: center;
    height: 48px;
}

/* Le QR d'enrôlement. Fond blanc en dur et non un jeton : un lecteur de QR
   exige le contraste noir sur blanc, il ne suit pas le thème. */
.e3-auth__qr {
    display: flex;
    justify-content: center;
    padding: 12px;
    margin: 4px 0 14px;
    background: #fff;
    border: var(--border-width) solid var(--border);
    border-radius: 10px;
}

.e3-auth__qr svg {
    display: block;
    width: 176px;
    height: 176px;
}

/* La clé recopiée à la main quand la caméra ne veut pas : espacée pour qu'on
   distingue le 0 du O, et sélectionnable d'un geste. */
.e3-auth__cle {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: .14em;
    text-align: center;
    word-break: break-all;
    padding: 10px 12px;
    margin: 0 0 16px;
    background: var(--surface-2);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: 8px;
    user-select: all;
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — cadrans, semaine dense, lignes à traiter
   ══════════════════════════════════════════════════════════════════════════ */

/* Les cadrans reprennent le dessin des `e3-stat` mais sont cliquables : chaque
   chiffre mène à l'écran où l'on agit dessus. Un nombre qui n'ouvre rien ne
   sert qu'à décorer. */
.e3-cadrans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.e3-cadran {
    position: relative;
    overflow: hidden;
    display: block;
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}

.e3-cadran::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent-border);
}

.e3-cadran:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-overlay);
    transform: translateY(-1px);
}

.e3-cadran--alerte::before { background: var(--red-600); }
.e3-cadran--attention::before { background: var(--amber-600); }
.e3-cadran--ok::before { background: var(--green-600); }

.e3-cadran__k {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.e3-cadran__v {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: var(--text-strong);
}

.e3-cadran__u { font-size: 14px; color: var(--text-muted); }

.e3-cadran__d {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* ── La semaine dense ──────────────────────────────────────────────────── */

.e3-card--agenda .e3-card__head { flex-wrap: wrap; gap: var(--space-3); }

.e3-card__body--serre { padding: 0; }

.e3-sem__barre {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;
}

.e3-sem__compte {
    font-size: 12.5px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.e3-sem__nav { display: flex; gap: 4px; }

.e3-sem {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--border-subtle);
}

/* `display: grid` bat le `display: none` que l'attribut `hidden` tient de la
   feuille du navigateur : sans cette ligne, les neuf semaines chargées
   d'avance s'affichent toutes, empilées. */
.e3-sem[hidden] { display: none; }

.e3-sem__jour {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 190px;
    border-right: 1px solid var(--border-subtle);
}
.e3-sem__jour:last-child { border-right: 0; }
.e3-sem__jour--weekend { background: var(--surface-2); }
.e3-sem__jour--passe .e3-sem__liste { opacity: .55; }
.e3-sem__jour--aujourdhui { background: var(--accent-tint-soft); }

.e3-sem__entete {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 9px var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
}
.e3-sem__entete:hover { background: var(--surface-2); }

.e3-sem__nom {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-body);
}
.e3-sem__date { font-size: 11.5px; color: var(--text-muted); }
.e3-sem__jour--aujourdhui .e3-sem__nom { color: var(--accent); }

.e3-sem__liste {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-2);
    min-width: 0;
}

/* Une visite tient sur trois lignes serrées : l'heure, le site, qui y va.
   C'est le minimum pour décider ; le reste est dans l'agenda complet. */
.e3-sem__visite {
    display: block;
    min-width: 0;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-border);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
}
.e3-sem__visite:hover { border-left-color: var(--accent); background: var(--accent-tint-soft); }

.e3-sem__visite--realisee { border-left-color: var(--green-600); opacity: .75; }
.e3-sem__visite--annulee { border-left-color: var(--n-400); opacity: .5; }

.e3-sem__heure {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
}

.e3-sem__site,
.e3-sem__tech {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.e3-sem__site { font-size: 12.5px; font-weight: 500; color: var(--text-body); }
.e3-sem__tech { font-size: 11.5px; color: var(--text-muted); }
.e3-sem__tech[data-sans-tech] { color: var(--amber-700); }

.e3-sem__vide {
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text-faint);
}

/* ── Lignes « à traiter » ──────────────────────────────────────────────── */

.e3-ligne {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 9px var(--space-3);
    margin: 0 calc(-1 * var(--space-3));
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    text-decoration: none;
}
.e3-ligne + .e3-ligne { border-top: 1px solid var(--border-subtle); }
.e3-ligne:hover { background: var(--surface-2); }

.e3-ligne--alerte { border-left-color: var(--red-600); }
.e3-ligne--attention { border-left-color: var(--amber-600); }
.e3-ligne--accent { border-left-color: var(--accent); }

.e3-ligne__famille {
    flex: 0 0 auto;
    width: 78px;
    padding-top: 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.e3-ligne__corps { min-width: 0; }
.e3-ligne__corps strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-body); }
.e3-ligne__corps .e3-sous { display: block; }

/* Sous 1100 px la semaine ne tient plus en sept colonnes : elle se déroule
   verticalement, un jour par ligne. Le doigt fait défiler, il ne vise pas. */
@media (max-width: 1100px) {
    .e3-sem { grid-template-columns: minmax(0, 1fr); }
    .e3-sem__jour { min-height: 0; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
    .e3-sem__jour:last-child { border-bottom: 0; }
    .e3-sem__entete { border-bottom: 0; }
    .e3-sem__liste { padding-top: 0; }
    .e3-sem__visite { display: flex; align-items: baseline; gap: var(--space-3); }
    .e3-sem__heure { width: 44px; flex: 0 0 auto; }
    .e3-sem__site { flex: 1 1 auto; }
    .e3-sem__tech { flex: 0 0 auto; }
}

/* ── En-têtes de colonne triables ──────────────────────────────────────── */

.e3-tri {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.e3-tri:hover { color: var(--text-body); }
.e3-tri:hover .e3-tri__fleche { opacity: .75; }

/* La flèche garde sa place même inactive : sans cela, l'en-tête saute d'un
   caractère au premier clic et toute la colonne se décale. */
.e3-tri__fleche {
    font-size: 10px;
    opacity: .3;
    transition: opacity .12s;
}

.e3-tri--actif { color: var(--accent); }
.e3-tri--actif .e3-tri__fleche { opacity: 1; }