/* ============================================================
   Consolidation de devis — habillage ESET
   Les valeurs ci-dessous sont à confirmer sur le portail de
   marque ESET ; elles sont regroupées ici pour n'avoir qu'un
   seul endroit à modifier.
   ============================================================ */

:root {
    --eset-vert:        #0094A1;   /* couleur du logo officiel */
    --eset-vert-fonce:  #00646E;
    --eset-vert-clair:  #E3F4F6;
    --eset-encre:       #0E1A22;
    --eset-ardoise:     #56656F;
    --eset-trait:       #DCE3E7;
    --eset-fond:        #F5F7F8;
    --eset-blanc:       #FFFFFF;
    --eset-alerte:      #C0392B;
    --eset-alerte-fond: #FCEDEB;

    --rayon:      4px;
    --pas:        8px;
    --largeur:    1080px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--eset-fond);
    color: var(--eset-encre);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

/* ---------------- Bandeau ---------------- */

.bandeau {
    background: var(--eset-encre);
    color: var(--eset-blanc);
    border-bottom: 3px solid var(--eset-vert);
}

.bandeau__contenu {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: calc(var(--pas) * 1.5) calc(var(--pas) * 2);
    display: flex;
    align-items: baseline;
    gap: calc(var(--pas) * 2);
    flex-wrap: wrap;
}

.marque {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.marque__point { color: var(--eset-vert); }

.bandeau__titre {
    font-size: 14px;
    color: #B6C2C9;
    padding-left: calc(var(--pas) * 2);
    border-left: 1px solid #33434D;
}

.bandeau__utilisateur {
    margin-left: auto;
    font-size: 13px;
    color: #B6C2C9;
}

/* ---------------- Page ---------------- */

.page {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: calc(var(--pas) * 4) calc(var(--pas) * 2) calc(var(--pas) * 8);
}

.page__intro { margin-bottom: calc(var(--pas) * 3); }

.page__intro h1 {
    margin: 0 0 calc(var(--pas) * 0.5);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.page__intro p {
    margin: 0;
    color: var(--eset-ardoise);
    max-width: 62ch;
}

/* ---------------- Blocs ---------------- */

.bloc {
    background: var(--eset-blanc);
    border: 1px solid var(--eset-trait);
    border-left: 3px solid var(--eset-vert);
    border-radius: var(--rayon);
    padding: calc(var(--pas) * 3);
    margin-bottom: calc(var(--pas) * 3);
}

.bloc__entete { margin-bottom: calc(var(--pas) * 2.5); }

.bloc__entete h2 {
    margin: 0 0 calc(var(--pas) * 0.5);
    font-size: 18px;
    font-weight: 600;
}

.bloc__entete p {
    margin: 0;
    font-size: 13.5px;
    color: var(--eset-ardoise);
    max-width: 64ch;
}

.sous-bloc {
    margin-top: calc(var(--pas) * 3);
    padding-top: calc(var(--pas) * 2.5);
    border-top: 1px solid var(--eset-trait);
}

.sous-bloc h3 {
    margin: 0 0 calc(var(--pas) * 2);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--eset-ardoise);
}

/* ---------------- Champs ---------------- */

.grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--pas) * 2) calc(var(--pas) * 2.5);
}

.champ { display: flex; flex-direction: column; min-width: 0; }
.champ--large  { grid-column: 1 / -1; }
.champ--etroit { max-width: 220px; }

.champ label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: calc(var(--pas) * 0.75);
}

.requis {
    font-weight: 400;
    font-size: 11.5px;
    color: var(--eset-ardoise);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: calc(var(--pas) * 0.5);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 9px 11px;
    font: inherit;
    font-size: 14.5px;
    color: var(--eset-encre);
    background: var(--eset-blanc);
    border: 1px solid var(--eset-trait);
    border-radius: var(--rayon);
    transition: border-color .12s ease, box-shadow .12s ease;
}

textarea { resize: vertical; }

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: none;
    border-color: var(--eset-vert);
    box-shadow: 0 0 0 3px var(--eset-vert-clair);
}

input[aria-invalid="true"] { border-color: var(--eset-alerte); }

.aide {
    margin: calc(var(--pas) * 0.5) 0 0;
    font-size: 12.5px;
    color: var(--eset-ardoise);
}

.aide--attention {
    color: var(--eset-encre);
    background: #FFF8E1;
    border-left: 3px solid #E0A800;
    padding: calc(var(--pas) * 1.25) calc(var(--pas) * 1.5);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    margin-top: calc(var(--pas) * 1.5);
    max-width: 62ch;
}

.erreur {
    margin: calc(var(--pas) * 0.5) 0 0;
    font-size: 12.5px;
    color: var(--eset-alerte);
}

.erreur--bloc {
    background: var(--eset-alerte-fond);
    border-left: 3px solid var(--eset-alerte);
    padding: calc(var(--pas) * 1.25) calc(var(--pas) * 1.5);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    font-size: 13.5px;
}

.alerte {
    background: var(--eset-alerte-fond);
    border-left: 3px solid var(--eset-alerte);
    color: var(--eset-encre);
    padding: calc(var(--pas) * 1.5) calc(var(--pas) * 2);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    margin: 0 0 calc(var(--pas) * 3);
}

/* ---------------- Choix ---------------- */

.choix {
    border: 0;
    padding: 0;
    margin: 0 0 calc(var(--pas) * 3);
}

.choix legend {
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: calc(var(--pas) * 1.25);
}

.choix__option {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: calc(var(--pas) * 1.25);
    align-items: start;
    padding: calc(var(--pas) * 1.5);
    border: 1px solid var(--eset-trait);
    border-radius: var(--rayon);
    margin-bottom: calc(var(--pas) * 1);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.choix__option:hover { border-color: var(--eset-vert); }

.choix__option input { grid-row: 1 / 3; margin-top: 3px; accent-color: var(--eset-vert); }

.choix__option:has(input:checked) {
    border-color: var(--eset-vert);
    background: var(--eset-vert-clair);
}

.choix__titre  { font-weight: 600; font-size: 14.5px; }
.choix__detail { font-size: 13px; color: var(--eset-ardoise); }

.choix--durees[hidden] { display: none; }

.case {
    display: flex;
    align-items: center;
    gap: calc(var(--pas) * 1.25);
    font-size: 14px;
    margin-top: calc(var(--pas) * 2.5);
    cursor: pointer;
}

.case input { accent-color: var(--eset-vert); width: 16px; height: 16px; flex: 0 0 auto; }

.case small {
    display: block;
    font-size: 12.5px;
    color: var(--eset-ardoise);
}

.case--inline {
    display: inline-flex;
    margin: 0 calc(var(--pas) * 3) 0 0;
}

/* ---------------- Dépôt de fichiers ---------------- */

.depot { position: relative; }

.depot__input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
}

.depot__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--pas) * 0.75);
    padding: calc(var(--pas) * 4) calc(var(--pas) * 2);
    border: 2px dashed var(--eset-trait);
    border-radius: var(--rayon);
    background: #FAFCFB;
    cursor: pointer;
    text-align: center;
    transition: border-color .12s ease, background .12s ease;
}

.depot__zone:hover,
.depot__input:focus-visible + .depot__zone,
.depot.est-survole .depot__zone {
    border-color: var(--eset-vert);
    background: var(--eset-vert-clair);
}

.depot__action {
    font-weight: 600;
    color: var(--eset-vert-fonce);
    font-size: 15px;
}

.depot__glisser { font-size: 13px; color: var(--eset-ardoise); }

.depot__vide {
    margin: calc(var(--pas) * 1.5) 0 0;
    font-size: 13px;
    color: var(--eset-ardoise);
}

.liste-fichiers {
    list-style: none;
    margin: calc(var(--pas) * 2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--pas));
}

.fichier {
    display: flex;
    align-items: center;
    gap: calc(var(--pas) * 1.5);
    padding: calc(var(--pas) * 1.25) calc(var(--pas) * 1.5);
    border: 1px solid var(--eset-trait);
    border-radius: var(--rayon);
    background: var(--eset-blanc);
}

.fichier__rang {
    flex: 0 0 24px;
    height: 24px;
    display: grid;
    place-items: center;
    background: var(--eset-vert-clair);
    color: var(--eset-vert-fonce);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.fichier__nom {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.fichier__taille { font-size: 12.5px; color: var(--eset-ardoise); flex: 0 0 auto; }

.fichier--refuse { border-color: var(--eset-alerte); background: var(--eset-alerte-fond); }
.fichier--refuse .fichier__rang { background: var(--eset-alerte); color: #fff; }
.fichier__motif { font-size: 12.5px; color: var(--eset-alerte); flex: 0 0 auto; }

/* ---------------- Actions ---------------- */

.actions {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pas) * 1.25);
    align-items: flex-start;
}

.bouton {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--eset-blanc);
    background: var(--eset-vert);
    border: 0;
    border-radius: var(--rayon);
    padding: 12px 28px;
    cursor: pointer;
    transition: background .12s ease;
}

.bouton:hover  { background: var(--eset-vert-fonce); }
.bouton:active { transform: translateY(1px); }

.actions__note { margin: 0; font-size: 13px; color: var(--eset-ardoise); }

/* ---------------- Écrans étroits ---------------- */

@media (max-width: 720px) {
    .page { padding: calc(var(--pas) * 3) calc(var(--pas) * 1.5) calc(var(--pas) * 6); }
    .bloc { padding: calc(var(--pas) * 2); }
    .grille { grid-template-columns: 1fr; }
    .champ--etroit { max-width: none; }
    .bandeau__utilisateur { margin-left: 0; width: 100%; }
    .bouton { width: 100%; }
}

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

/* ---------------- Écran de connexion ---------------- */

.page-connexion {
    background: var(--eset-encre);
    min-height: 100vh;
}

.connexion {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: calc(var(--pas) * 3);
}

.connexion__carte {
    width: 100%;
    max-width: 380px;
    background: var(--eset-blanc);
    border-radius: var(--rayon);
    border-top: 3px solid var(--eset-vert);
    padding: calc(var(--pas) * 4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

.connexion__marque {
    text-align: center;
    margin-bottom: calc(var(--pas) * 4);
}

.marque--sombre { color: var(--eset-encre); }

.connexion__marque p {
    margin: calc(var(--pas) * 0.5) 0 0;
    font-size: 13px;
    color: var(--eset-ardoise);
}

.connexion .champ { margin-bottom: calc(var(--pas) * 2.5); }

.bouton--large { width: 100%; }

/* ---------------- Fil d'étapes ---------------- */

.etapes {
    display: flex;
    gap: calc(var(--pas) * 2);
    list-style: none;
    margin: 0 0 calc(var(--pas) * 3);
    padding: 0;
    flex-wrap: wrap;
}

.etapes__item {
    display: flex;
    align-items: center;
    gap: calc(var(--pas));
    font-size: 13px;
    color: var(--eset-ardoise);
}

.etapes__item span {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--eset-trait);
    font-size: 12px;
    font-weight: 700;
}

.etapes__item--actif { color: var(--eset-encre); font-weight: 600; }
.etapes__item--actif span { background: var(--eset-vert); border-color: var(--eset-vert); color: #fff; }
.etapes__item--fait span { background: var(--eset-vert-clair); border-color: var(--eset-vert); color: var(--eset-vert-fonce); }

.page--etroite { max-width: 720px; }

/* ---------------- Suivi de lecture ---------------- */

.fichier__etat { font-size: 13px; flex: 0 0 auto; color: var(--eset-ardoise); }
.fichier__etat[data-etat="encours"] { color: var(--eset-vert-fonce); }
.fichier__etat[data-etat="ok"]      { color: var(--eset-vert-fonce); font-weight: 600; }
.fichier__etat[data-etat="erreur"]  { color: var(--eset-alerte); }

.alerte--discrete {
    background: #FFF8E1;
    border-left-color: #E0A800;
}

/* ---------------- Signalements ---------------- */

.signalements {
    background: #FFF8E1;
    border-left: 3px solid #E0A800;
    border-radius: 0 var(--rayon) var(--rayon) 0;
    padding: calc(var(--pas) * 2);
    margin-bottom: calc(var(--pas) * 3);
}

.signalements h2 { margin: 0 0 calc(var(--pas)); font-size: 14px; }
.signalements ul { margin: 0; padding-left: calc(var(--pas) * 2.5); font-size: 13.5px; }
.signalements li { margin-bottom: calc(var(--pas) * 0.5); }

/* ---------------- Champ à compléter ---------------- */

/* Signale visuellement ce que l'extraction n'a pas pu remplir :
   sans repère, un champ vide se confond avec un champ pré-rempli. */
.champ--a-saisir {
    background: #FFF8E1;
    border-color: #E0A800 !important;
}

/* ---------------- Lignes extraites ---------------- */

.ligne-produit {
    border: 1px solid var(--eset-trait);
    border-radius: var(--rayon);
    padding: calc(var(--pas) * 2);
    margin-bottom: calc(var(--pas) * 1.5);
}

.ligne-produit:has(input[type="checkbox"]:not(:checked)) {
    opacity: .45;
    background: var(--eset-fond);
}

.case--titre { margin: 0 0 calc(var(--pas) * 1.5); }
.ligne-produit__source { font-size: 12px; color: var(--eset-ardoise); letter-spacing: .04em; }

.grille-ligne {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--pas) * 1.5);
}

.grille-ligne .champ--large { grid-column: span 3; }
.grille-ligne .champ--mini  { max-width: none; }

.ligne-produit label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--eset-ardoise);
}

.ligne-produit input, .ligne-produit select {
    width: 100%;
    padding: 7px 9px;
    font: inherit;
    font-size: 13.5px;
    border: 1px solid var(--eset-trait);
    border-radius: var(--rayon);
    background: var(--eset-blanc);
}

/* ---------------- Repli ---------------- */

.repli {
    margin-top: calc(var(--pas) * 2.5);
    border-top: 1px solid var(--eset-trait);
    padding-top: calc(var(--pas) * 2);
}

.repli summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--eset-vert-fonce);
    margin-bottom: calc(var(--pas) * 2);
}

.lien-secondaire {
    font-size: 13.5px;
    color: var(--eset-ardoise);
}

.bandeau__utilisateur a { color: #B6C2C9; }

@media (max-width: 720px) {
    .grille-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grille-ligne .champ--large { grid-column: span 2; }
}

/* ---------------- Aide à la saisie de la TVA ---------------- */

.recherche-tva {
    display: flex;
    align-items: center;
    gap: calc(var(--pas));
    flex-wrap: wrap;
    margin-top: calc(var(--pas));
}

.lien-outil {
    font: inherit;
    font-size: 12.5px;
    color: var(--eset-vert-fonce);
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    padding: 0 0 1px;
    cursor: pointer;
}

.lien-outil:hover { color: var(--eset-encre); }

.recherche-tva__ou {
    font-size: 12.5px;
    color: var(--eset-ardoise);
}

.recherche-tva__siren {
    width: 140px;
    padding: 5px 8px !important;
    font-size: 12.5px !important;
}

.recherche-tva__message {
    width: 100%;
    margin: calc(var(--pas) * 0.5) 0 0;
    font-size: 12.5px;
}

.recherche-tva__message[data-etat="ok"]     { color: var(--eset-vert-fonce); }
.recherche-tva__message[data-etat="erreur"] { color: var(--eset-alerte); }

/* ---------------- Administration ---------------- */

.onglets-admin {
    display: flex;
    gap: calc(var(--pas) * 0.5);
    border-bottom: 1px solid var(--eset-trait);
    margin-bottom: calc(var(--pas) * 3);
}

.onglets-admin__item {
    padding: calc(var(--pas) * 1.25) calc(var(--pas) * 2);
    font-size: 14px;
    color: var(--eset-ardoise);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.onglets-admin__item:hover { color: var(--eset-encre); }

.onglets-admin__item--actif {
    color: var(--eset-encre);
    font-weight: 600;
    border-bottom-color: var(--eset-vert);
}

.cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: calc(var(--pas) * 2);
    margin-bottom: calc(var(--pas) * 3);
}

.carte {
    background: var(--eset-blanc);
    border: 1px solid var(--eset-trait);
    border-left: 3px solid var(--eset-vert);
    border-radius: var(--rayon);
    padding: calc(var(--pas) * 2);
    display: flex;
    flex-direction: column;
    gap: calc(var(--pas) * 0.5);
}

.carte__valeur {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--eset-encre);
}

.carte__libelle {
    font-size: 12.5px;
    color: var(--eset-ardoise);
}

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tableau th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--eset-ardoise);
    padding: calc(var(--pas)) calc(var(--pas) * 1.25);
    border-bottom: 1px solid var(--eset-trait);
    white-space: nowrap;
}

.tableau td {
    padding: calc(var(--pas) * 1.25);
    border-bottom: 1px solid var(--eset-trait);
    vertical-align: middle;
}

.tableau tr:last-child td { border-bottom: 0; }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; }

.ligne--inactive { opacity: .5; }

.etiquette {
    display: inline-block;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--eset-fond);
    color: var(--eset-ardoise);
    margin-left: calc(var(--pas) * 0.5);
}

.etiquette--vert {
    background: var(--eset-vert-clair);
    color: var(--eset-vert-fonce);
}

.texte-alerte { color: var(--eset-alerte); font-weight: 600; }

.formulaire-inline {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pas) * 0.75);
    margin: 0;
}

.formulaire-inline select,
.formulaire-inline input[type="text"] {
    padding: 5px 8px;
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--eset-trait);
    border-radius: var(--rayon);
    background: var(--eset-blanc);
}

.cellule-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--pas) * 1.5);
    flex-wrap: wrap;
}

.repli--compact {
    margin: 0;
    border: 0;
    padding: 0;
}

.repli--compact summary {
    margin: 0;
    font-size: 12.5px;
    font-weight: 400;
}

@media (max-width: 720px) {
    .tableau { font-size: 13px; }
    .tableau th, .tableau td { padding: calc(var(--pas)); }
}