/* ==========================================================================================
   ÉCRAN — ATELIER DE REPRISE (.atr-*)

   Le volet intercalé entre la lecture d'une source Odoo et son écriture : ce qui a été lu,
   ce que la simulation en dit, et les retouches possibles avant d'écrire.

   UN FICHIER À LUI, ET C'EST LA RÈGLE DU GABARIT : ces classes servent UN écran. Les
   ajouter à la queue de « modele-erp.css » aurait fait de sa dernière ligne — et de sa clé
   de cache — un point de collision entre toutes les branches qui ajoutent un écran.
   Le jour où deux écrans partagent une de ces classes, elle monte dans le gabarit ; jamais
   l'inverse, sinon un écran finirait par dépendre de la feuille d'un autre pour s'afficher.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*, comme partout ailleurs.
   ========================================================================================== */

.atr-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--et-hairline);
}

.atr-note {
    font-size: 13px;
    color: var(--et-muted);
}

/* Les compteurs de verdict — lus ENSEMBLE : « 40 créées » ne veut rien dire sans le nombre
   de refus à côté, et c'est la juxtaposition qui fait le sens. */
.atr-verdicts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.atr-v {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 650;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
    color: var(--et-ink);
}

.atr-v-ok { border-color: var(--et-ok); color: var(--et-ok); }
.atr-v-ko { border-color: var(--et-danger); color: var(--et-danger-ink); }
.atr-v-neutre { color: var(--et-muted); }

/* Les outils sont REPLIÉS par défaut : on vient d'abord regarder, et une barre d'outils
   ouverte inviterait à retoucher avant d'avoir lu le verdict. */
.atr-outils {
    margin: 10px 0 14px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
}

.atr-outils > summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 650;
    color: var(--et-ink);
}

.atr-outils-corps {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 0 14px 14px;
}

.atr-outils-corps label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 650;
    color: var(--et-form-label);
}

.atr-outils-corps .form-control,
.atr-outils-corps .form-select { min-width: 150px; }

/* LE JOURNAL DES RETOUCHES. Un lot modifié en silence avant écriture serait indiscernable
   de ce que la source a rendu — l'écart ne se verrait plus jamais, ni au rapport ni dans
   Odoo. Il est donc à l'écran, pas dans une console. */
.atr-journal {
    margin: 0;
    padding: 0 14px 14px 30px;
    font-size: 13px;
    color: var(--et-muted);
}

.atr-journal li { margin-bottom: 3px; }

/* Sous 720 px, les outils passent en colonne : côte à côte, les champs tombaient sous la
   largeur où l'on distingue encore ce qu'on saisit. Géométrie seule, aucune couleur. */
@media (max-width: 720px) {
    .atr-outils-corps { flex-direction: column; align-items: stretch; }
    .atr-outils-corps .form-control,
    .atr-outils-corps .form-select { min-width: 0; width: 100%; }
}

/* ------------------------------------------------------------------------------------------
   LE VOLET DE TRAITEMENT D'UNE LIGNE QUI COINCE

   Sous la grille et non dans la rangée : les gestes proposés dépendent de CE QUI manque, et
   un formulaire replié dans chaque ligne aurait rendu illisible l'écran où l'on vient
   justement lire des valeurs.
   ------------------------------------------------------------------------------------------ */

.atr-traite {
    margin: 10px 0;
    border: 1px solid var(--et-danger-bord);
    background: var(--et-surface);
}

.atr-traite-tete {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--et-hairline);
    font-size: 13px;
    color: var(--et-danger-ink);
}

.atr-traite-tete > button { margin-left: auto; }

.atr-traite-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 14px;
}

.atr-traite-actions label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 650;
    color: var(--et-form-label);
}

.atr-traite-actions .form-control { min-width: 190px; }

.atr-actions-ligne { display: flex; gap: 5px; justify-content: flex-end; }

@media (max-width: 720px) {
    .atr-traite-actions { flex-direction: column; align-items: stretch; }
    .atr-traite-actions .form-control { min-width: 0; width: 100%; }
    .atr-traite-tete > button { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CRÉER CE QUI MANQUE (.atr-creation)

   Au-dessus des boutons et non dans le tiroir d'outils : ce n'est pas une
   retouche du lot, c'est une CONDITION de l'envoi — et une condition qu'on
   ne découvre pas en dépliant quelque chose. Elle se lit avant de simuler,
   puisque c'est la simulation qui en dira les conséquences.
   ══════════════════════════════════════════════════════════════════════════════ */

.atr-creation {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
    margin-top: 10px; padding: 8px 10px;
    background: var(--et-surface-2); border: 1px solid var(--et-hairline);
}

.atr-creation-titre {
    font-size: 13px; font-weight: 600; color: var(--et-ink);
    display: inline-flex; align-items: center; gap: 6px;
}

.atr-creation-case {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0; font-size: 13px; color: var(--et-ink); cursor: pointer;
}
.atr-creation-case input { margin: 0; cursor: pointer; }

/* La note prend toute la largeur restante et passe à la ligne sous les cases
   quand il n'en reste pas : c'est une phrase, pas une étiquette. */
.atr-creation-note { flex: 1 1 260px; min-width: 0; }

/* Sous 720 px, les cases s'empilent : deux libellés côte à côte tombaient à
   deux caractères par ligne. Géométrie seule. */
@media (max-width: 720px) {
    .atr-creation { flex-direction: column; align-items: flex-start; }
    .atr-creation-note { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CE QUE LA SIMULATION DIT DU LOT (.atr-annonce)

   Les lignes de rapport en position 0 ne portent sur aucune ligne du fichier :
   elles parlent du lot. Le recollage les sautait — or c'est là que s'annoncent
   les fiches qui SERAIENT créées, et un lot qui passe au vert sans les nommer
   crée des doublons en silence.

   Au-dessus des compteurs et non dedans : un compteur se lit d'un coup d'œil,
   une liste de codes se LIT. C'est en lisant qu'on reconnaît « DUPOND » à côté
   de « DUPONT ».
   ══════════════════════════════════════════════════════════════════════════════ */

.atr-annonces { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* Le filet de gauche porte la couleur d'état, l'encre prend le rang -ink :
   la charte réserve la couleur d'état à un aplat, un filet ou une marque. */
.atr-annonce {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 7px 10px; border-left: 3px solid;
    font-size: 13px; line-height: 1.45;
    overflow-wrap: anywhere;
}
.atr-annonce > i { flex: 0 0 auto; margin-top: 2px; }

.atr-annonce.est-info {
    background: var(--et-info-bg); border-left-color: var(--et-form-blue);
    color: var(--et-ink);
}

/* L'ambre ne tient pas le seuil de 3:1 comme filet : c'est --et-avertissement-mark
   qui le porte, même teinte, luminosité descendue. */
.atr-annonce.est-avertissement {
    background: var(--et-avertissement-bg); border-left-color: var(--et-avertissement-mark);
    color: var(--et-avertissement-ink);
}

.atr-annonce.est-erreur {
    background: var(--et-danger-badge-bg); border-left-color: var(--et-danger);
    color: var(--et-danger-ink);
}