/* ===========================================================================
   EN-TÊTE ET PIED DE PAGE DES DOCUMENTS (.etp-*)

   Écran : Components/Pages/Admin/EnTetePiedDocuments.razor, route
   /admin/entete-pied. Règle le couple transverse core.CompanyEnTetePied
   (db/1417), pendant textuel du logo core.CompanyLogo.

   SA PROPRE FEUILLE, ET SA LIGNE DANS App.razor — règle du dépôt : un écran
   nouveau n'ajoute plus rien à la queue de modele-erp.css, où deux branches
   ouvertes le même jour se heurtaient sur la dernière ligne du fichier et sur
   la clé de cache. Ce qui servira à deux écrans remonte au gabarit
   (section 11), jamais l'inverse.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-* de
   easytech-theme.css, et c'est par eux que le mode sombre passe.

   CE QUE CETTE FEUILLE PORTE, ET RIEN D'AUTRE : la grille de l'écran et
   l'APERÇU. L'aperçu ne redessine pas le PDF — il montre l'ORDRE des blocs
   (logo, identité, mention ajoutée, contenu, mention de pied, pagination), la
   seule chose qu'on ne peut pas deviner en lisant deux zones de texte. Les
   cartes, les champs et les boutons viennent du gabarit (.mx-*).
   =========================================================================== */

/* --- Grille ---------------------------------------------------------------
   Deux colonnes qui se replient sous 420 px sans media query : la saisie passe
   alors au-dessus de l'aperçu, ce qui est le bon ordre — on écrit d'abord. */
.etp-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
    align-items: start;
}
.etp-colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* --- Notes sous la saisie ------------------------------------------------- */
.etp-note {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 12px; padding: 9px 11px;
    background: var(--et-info-bg); border: 1px solid var(--et-info-bord);
    color: var(--et-ink); font-size: 13px; line-height: 1.45;
}
.etp-note i { color: var(--et-info); margin-top: 1px; }

.etp-trace {
    margin-top: 10px; font-size: 12px; color: var(--et-muted);
}

/* --- Aperçu ---------------------------------------------------------------
   La page est figurée par un cadre à fond de surface, pas par une ombre de
   feuille : ce n'est pas une prévisualisation fidèle, et lui en donner l'air
   ferait chercher des écarts de police et de marge qui n'existent que dans le
   PDF réel. */
.etp-page {
    border: 1px solid var(--et-form-border);
    background: var(--et-surface);
    padding: 14px 16px 10px;
    font-size: 12px;
}
.etp-haut { display: flex; gap: 12px; align-items: flex-start; }

.etp-logo {
    width: 64px; height: 32px; object-fit: contain; object-position: left center;
    flex: 0 0 auto;
}
.etp-logo-vide {
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--et-form-border);
    color: var(--et-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

/* LA PASTILLE DE SIGLE, quand aucun logo n'est déposé (ADM-03, db/1441). C'est à cela que
   sert le sigle, et l'aperçu doit le montrer tel qu'il sortira : lisible, pas en légende.
   Elle reprend le cadre pointillé du bloc vide et n'en change que le texte — un cadre plein
   laisserait croire à un logo déposé. */
.etp-logo-sigle {
    font-family: var(--et-font-mono);
    font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: var(--et-navy-ink);
}

.etp-ident { min-width: 0; flex: 1 1 auto; }
.etp-soc { font-weight: 700; color: var(--et-navy-ink); font-size: 13px; }
.etp-titre { font-weight: 600; color: var(--et-ink); font-size: 12px; }

/* CE QUE CET ÉCRAN AJOUTE, ET LUI SEUL : le liseré bleu marque, dans l'aperçu,
   la part du document qui vient d'ici — le reste vient du logo, de la fiche
   société et du gabarit d'impression. Sans cette distinction, l'aperçu laisse
   croire que tout se règle sur cet écran. */
.etp-ajout {
    margin-top: 3px; padding-left: 7px;
    border-left: 2px solid var(--et-blue);
    color: var(--et-muted);
    white-space: pre-wrap; word-break: break-word;
}
.etp-bas-ajout { margin: 10px 0 6px; }

.etp-filet { height: 2px; background: var(--et-blue); margin: 7px 0 0; }

.etp-corps {
    margin: 10px 0; padding: 16px 0;
    border: 1px dashed var(--et-form-border);
    text-align: center; color: var(--et-muted);
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}

.etp-bas {
    display: flex; justify-content: space-between; gap: 10px;
    padding-top: 6px; border-top: 1px solid var(--et-hairline);
    color: var(--et-muted); font-size: 12px;
}

.etp-legende {
    margin-top: 10px; font-size: 12px; color: var(--et-muted); line-height: 1.5;
}
.etp-legende a { color: var(--et-lien); }
.etp-legende a:hover { color: var(--et-lien-survol); }

/* --- Portée ---------------------------------------------------------------
   Inventaire tenu à la main, comme EtatsReglagesVente : ce qui est branché et
   ce qui ne l'est pas se distinguent à l'icône ET à la teinte, jamais à la
   teinte seule. */
.etp-portee { list-style: none; margin: 0; padding: 0; }
.etp-portee li {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 6px 0; font-size: 13px; line-height: 1.45;
    border-bottom: 1px solid var(--et-hairline);
}
.etp-portee li:last-child { border-bottom: 0; }
.etp-portee li i { margin-top: 2px; flex: 0 0 auto; }
.etp-portee li.est-oui i { color: var(--et-ok); }
.etp-portee li.est-non { color: var(--et-muted); }
.etp-portee li.est-non i { color: var(--et-inerte); }

/* Le cas « oui, mais autrement » — le rouleau de caisse, qui prend les mentions en repli
   et non en cumul. Ni la coche ni le tiret : les deux mentiraient. */
.etp-portee li.est-part i { color: var(--et-info); }