:root {
  --teal: #2e9aa4;
  --teal-fonce: #1f7b84;
  --navy: #00003a;
  --cyan: #8ecdd4;
  --fond: #eef2f5;
  --carte: #ffffff;
  --bord: #d5dee5;
  --texte: #1d2b36;
  --texte-doux: #63798a;
  --rouge: #b3261e;
  --vert: #1b7f4f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
  font-size: 14px;
}

/* ------------------------------------------------------------------ barre */
.barre {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--carte);
  border-bottom: 1px solid var(--bord);
  position: sticky;
  top: 0;
  z-index: 20;
}
.barre-logo { height: 34px; }
.barre-titre h1 { margin: 0; font-size: 16px; letter-spacing: .2px; }
.barre-titre p { margin: 2px 0 0; font-size: 12px; color: var(--texte-doux); }

/* ----------------------------------------------------------------- pages */
main {
  display: grid;
  grid-template-columns: minmax(430px, 500px) 1fr;
  gap: 20px;
  padding: 20px;
  align-items: start;
}
@media (max-width: 1100px) {
  main { grid-template-columns: 1fr; }
}

.saisie { display: flex; flex-direction: column; gap: 14px; }

.bloc {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin: 0;
}
.bloc legend {
  font-weight: 650;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--teal-fonce);
  padding: 0 6px;
}

label { display: block; font-size: 12px; color: var(--texte-doux); margin-bottom: 10px; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input, select, textarea {
  width: 100%;
  margin-top: 4px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  color: var(--texte);
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(46, 154, 164, .35);
  border-color: var(--teal);
}
textarea { resize: vertical; }

.aide { font-size: 11.5px; color: var(--texte-doux); margin: 4px 0 0; }
kbd {
  font: inherit; font-size: 10.5px; padding: 1px 4px;
  border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: 4px; background: #fafcfd;
}
.lien {
  border: 0; background: none; color: var(--teal-fonce);
  font: inherit; font-size: 11.5px; text-decoration: underline; cursor: pointer; padding: 0;
}

/* ------------------------------------------------------------ suggestions */
.recherche { position: relative; }
.suggestions {
  position: absolute;
  z-index: 15;
  left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20, 40, 60, .16);
  max-height: 320px;
  overflow-y: auto;
}
.suggestions li {
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.suggestions li.actif, .suggestions li:hover { background: #e9f5f6; }
.suggestions .titre { font-size: 13px; }
.suggestions .reference { font-size: 11px; color: var(--texte-doux); font-family: ui-monospace, Menlo, monospace; }
.suggestions .prix { font-size: 12px; white-space: nowrap; color: var(--teal-fonce); font-variant-numeric: tabular-nums; }
.suggestions .prix.absent { color: #b07d18; }
.suggestions .aucun { color: var(--texte-doux); cursor: default; }

/* ---------------------------------------------------------------- lignes */
.lignes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ligne-article {
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 8px 9px;
  background: #fbfdfe;
}
.ligne-article .haut { display: flex; gap: 6px; align-items: center; }
.ligne-article .haut input { flex: 1; margin: 0; }
.ligne-article .bas {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px; font-size: 11.5px; color: var(--texte-doux);
}
.ligne-article .bas input { margin: 0; padding: 4px 5px; font-size: 12px; }
.ligne-article .etiquette { white-space: nowrap; }
.ligne-article .champ-reference {
  flex: 1; min-width: 80px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
}
.ligne-article .champ-quantite { width: 46px; text-align: right; flex: none; }
.ligne-article .champ-prix { width: 78px; text-align: right; flex: none; }
.ligne-article .montant {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-weight: 650; color: var(--texte); white-space: nowrap; font-size: 12.5px;
}
.ligne-article input.prix-absent { border-color: #e0b355; background: #fffaf0; }
.ligne-article .photo-nom {
  margin-top: 5px; font-size: 11px; color: var(--teal-fonce);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bouton-icone {
  border: 1px solid transparent; background: none; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 5px 6px; border-radius: 5px; color: var(--texte-doux);
}
.bouton-icone:hover { background: #eef3f6; color: var(--texte); }
.bouton-icone.avec-photo { color: var(--teal-fonce); background: #e9f5f6; }
.vide { color: var(--texte-doux); font-size: 12px; font-style: italic; margin: 10px 0 0; }

/* ---------------------------------------------------------------- totaux */
.totaux {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 12px 16px;
}
.totaux div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.totaux strong { font-variant-numeric: tabular-nums; }
.totaux .total-ttc {
  border-top: 1px solid var(--bord);
  margin-top: 6px; padding-top: 8px; font-size: 15px; color: var(--navy);
}
.totaux .lettres { margin: 8px 0 0; font-size: 11.5px; color: var(--texte-doux); font-style: italic; }

/* --------------------------------------------------------------- actions */
.actions { display: flex; gap: 10px; }
button.principal, button.secondaire {
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 10px 16px; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
}
button.principal { background: var(--teal); color: #fff; flex: 1; }
button.principal:hover { background: var(--teal-fonce); }
button.principal:disabled { background: #a9c6ca; cursor: progress; }
button.secondaire { background: #fff; border-color: var(--bord); color: var(--texte); }
button.secondaire:hover { background: #f4f8f9; }

.message {
  border-radius: 10px; padding: 12px 14px; font-size: 13px;
  border: 1px solid var(--bord); background: var(--carte);
}
.message.succes { border-color: #b7ddc7; background: #f1faf4; }
.message.erreur { border-color: #eec4c1; background: #fdf3f2; color: var(--rouge); }
.message a { color: var(--teal-fonce); font-weight: 600; }
.message .fichiers { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- aperçu */
.apercu { position: sticky; top: 78px; }
.apercu-entete {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--texte-doux); margin-bottom: 8px; padding: 0 2px;
}
.apercu-entete span:first-child { font-weight: 650; text-transform: uppercase; letter-spacing: .8px; color: var(--teal-fonce); }
.apercu-cadre { position: relative; overflow: hidden; }

/* Réplique de la page A4 du modèle Word */
.page {
  width: 210mm;
  min-height: 297mm;
  padding: 2.54cm 0.735cm 2.54cm 0.635cm;
  background: #fff;
  box-shadow: 0 6px 26px rgba(20, 40, 60, .18);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
  font-family: Calibri, Carlito, "Lucida Grande", "Helvetica Neue", Arial, sans-serif;
  font-size: 11pt;
  color: #000;
  line-height: 1.28;
}
.page .logo { position: absolute; left: 0.82cm; top: 0.50cm; width: 6.05cm; height: 1.71cm; }
.page .numero { text-align: right; font-family: Cambria, Georgia, serif; font-weight: bold; font-size: 12pt; }
.page .date { text-align: right; font-weight: bold; font-size: 12pt; margin-top: 0.55cm; }

.page .entetes { display: flex; gap: 0.32cm; margin: 0.35cm 0 0 0.36cm; }
.page .etiquette { font-family: Cambria, Georgia, serif; font-size: 8pt; margin-bottom: 2px; }
.page .bloc-emetteur, .page .bloc-client {
  font-family: Cambria, Georgia, serif;
  font-size: 8pt;
  color: #00003a;
  padding: 4px 6px;
  min-height: 2.9cm;
  line-height: 1.45;
}
.page .bloc-emetteur { width: 9.27cm; background: #8ecdd4; border-top: 2px solid #8ecdd4; }
.page .bloc-client { width: 9.45cm; border: 1px solid #808080; }
.page .bloc-emetteur .nom, .page .bloc-client .nom { font-weight: bold; }
.page .bloc-emetteur .lien { color: #0000ff; }

.page table.articles { width: 19.58cm; border-collapse: collapse; margin-top: 0.5cm; table-layout: fixed; }
.page table.articles th, .page table.articles td {
  border: 1px solid #000; padding: 2px 3px; text-align: center; vertical-align: top;
  word-wrap: break-word; font-size: 10pt;
}
.page table.articles th { font-weight: bold; font-size: 9.5pt; letter-spacing: -.1px; padding: 3px 1px; }
.page table.articles td.reference { font-size: 9.5pt; }
.page table.articles tr.article td { height: 1.6cm; }
.page table.articles td.photo img { max-width: 3.4cm; max-height: 3.9cm; }
.page table.articles td.vide { border: 0; }
.page table.articles td.libelle { text-align: left; }
.page .arrete { font-weight: bold; font-size: 10pt; margin-top: 1.6cm; }
.page .cgv { margin-top: 2.4cm; margin-left: 0.87cm; position: relative; }
.page .cgv .titre { font-weight: bold; text-decoration: underline; font-size: 8pt; }
.page .cgv ul { margin: 2px 0 0; padding-left: 16px; font-size: 7pt; }
.page .cgv .cachet { position: absolute; left: 14.53cm; top: 0.33cm; width: 4.4cm; height: 1.4cm; }
.page .pied {
  position: absolute; left: 0.635cm; right: 0.735cm; bottom: 1.1cm;
  text-align: center; font-family: Cambria, Georgia, serif; font-size: 7pt; line-height: 1.35;
}
.page .pied a, .page .pied .lien { color: #0000ff; text-decoration: underline; }

/* ------------------------------------------------------------- connexion */
body.page-connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(160deg, #eef2f5 0%, #dfeaee 100%);
}
.carte-connexion {
  /* L'écran principal met `main` en grille à deux colonnes : la carte de
     connexion, qui est aussi un `main`, doit revenir à un flux simple. */
  display: block;
  padding: 28px 26px 22px;
  width: 100%;
  max-width: 380px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 28px 26px 22px;
  box-shadow: 0 12px 40px rgba(20, 40, 60, .10);
  text-align: center;
}
.logo-connexion { height: 42px; margin-bottom: 16px; }
.carte-connexion h1 { margin: 0; font-size: 18px; }
.carte-connexion .sous-titre {
  margin: 6px 0 22px; font-size: 13px; color: var(--texte-doux);
}
.carte-connexion form { text-align: left; }
.carte-connexion label { font-size: 12px; margin-bottom: 14px; }
.carte-connexion input { padding: 10px 11px; font-size: 15px; }
.carte-connexion button.principal { width: 100%; margin-top: 4px; padding: 12px; }
.erreur-connexion {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #eec4c1;
  background: #fdf3f2;
  color: var(--rouge);
  font-size: 13px;
  text-align: left;
}
.aide-connexion {
  margin: 18px 0 0; font-size: 11.5px; color: var(--texte-doux);
}

/* ------------------------------------------------- identité dans la barre */
.barre-compte {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--texte-doux);
  white-space: nowrap;
}
.barre-compte .nom { font-weight: 650; color: var(--texte); }
.barre-compte .role {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  background: #e9f5f6; color: var(--teal-fonce);
  padding: 2px 7px; border-radius: 20px;
}
.barre-compte a {
  color: var(--texte-doux); text-decoration: none;
  border: 1px solid var(--bord); border-radius: 6px; padding: 5px 10px;
}
.barre-compte a:hover { background: #f4f8f9; color: var(--texte); }

/* -------------------------------------------------------------- menu barre */
.barre-menu { display: flex; gap: 6px; margin-left: 24px; }
.barre-menu a {
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--texte-doux); padding: 7px 13px; border-radius: 7px;
}
.barre-menu a:hover { background: #f0f5f7; color: var(--texte); }
.barre-menu a.actif { background: #e5f2f3; color: var(--teal-fonce); }

/* --------------------------------------------------------------- historique */
main.historique {
  display: block;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
}

.filtres { margin-bottom: 16px; }
.grille-filtres {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1fr;
  gap: 12px;
  align-items: end;
}
main.historique[data-role="employe"] .grille-filtres { grid-template-columns: 2fr 1fr 1fr; }
.grille-filtres label { margin-bottom: 0; }
.pied-filtres {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; gap: 12px; flex-wrap: wrap;
}
.resume { font-size: 12.5px; color: var(--texte-doux); }
.resume strong { color: var(--texte); font-variant-numeric: tabular-nums; }

/* Une grille plutôt qu'un tableau : les mêmes colonnes deviennent des cartes
   empilées sur téléphone, sans dupliquer le contenu. */
.tableau-devis {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 10px;
  overflow: hidden;
}
.entete-devis, .ligne-devis {
  display: grid;
  /* La dernière colonne est large et les boutons calés à droite : cela
     dégage l'espace demandé entre le montant TTC et le bouton PDF, sans
     décaler le reste des colonnes. */
  grid-template-columns: 190px 96px minmax(130px, 1fr) 110px 130px 130px 140px;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
}
main.historique[data-role="employe"] .entete-devis,
main.historique[data-role="employe"] .ligne-devis {
  grid-template-columns: 190px 96px minmax(130px, 1fr) 130px 130px 140px;
}
main.historique[data-role="employe"] .colonne-employe { display: none; }

.entete-devis {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  font-weight: 600; color: var(--texte-doux);
  border-bottom: 1px solid var(--bord); background: #fafcfd;
}
.ligne-devis { border-bottom: 1px solid #eef2f5; font-size: 13px; }
.ligne-devis:last-child { border-bottom: 0; }
.ligne-devis:hover { background: #f7fbfb; }
.ligne-devis .numero { font-weight: 650; color: var(--navy); }
.ligne-devis .client { font-weight: 550; }
.ligne-devis .employe { color: var(--texte-doux); }
.entete-devis .montant, .ligne-devis .montant {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ligne-devis .montant.ttc { font-weight: 650; }
.ligne-devis .etiquette-mobile { display: none; }

.actions-devis { display: flex; gap: 4px; justify-content: flex-end; }
.actions-devis a, .actions-devis button {
  border: 1px solid var(--bord); background: #fff; border-radius: 6px;
  padding: 4px 7px; font-size: 12px; line-height: 1.4;
  color: var(--teal-fonce); text-decoration: none; cursor: pointer;
}
.actions-devis a:hover, .actions-devis button:hover { background: #eef7f8; }
.actions-devis .absent { color: var(--texte-doux); border-style: dashed; cursor: default; }

.detail-devis {
  padding: 4px 16px 16px;
  background: #f7fbfb;
  border-bottom: 1px solid #eef2f5;
  font-size: 12.5px;
}
.detail-devis table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.detail-devis th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--texte-doux); padding: 4px 8px 4px 0;
}
.detail-devis td { padding: 4px 8px 4px 0; border-top: 1px solid #e4edef; }
.detail-devis td.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail-devis .coordonnees { color: var(--texte-doux); white-space: pre-line; margin: 6px 0 0; }
.detail-devis .lettres { font-style: italic; color: var(--texte-doux); margin: 8px 0 0; }

.pagination { display: flex; justify-content: center; margin-top: 16px; }

@media (max-width: 900px) {
  .grille-filtres,
  main.historique[data-role="employe"] .grille-filtres { grid-template-columns: 1fr 1fr; }
  .grille-filtres .filtre-large { grid-column: 1 / -1; }

  .entete-devis { display: none; }
  .entete-devis, .ligne-devis,
  main.historique[data-role="employe"] .ligne-devis {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 12px 14px;
  }
  .ligne-devis { border-bottom: 1px solid var(--bord); }
  .ligne-devis .numero { grid-column: 1; font-size: 13.5px; }
  .ligne-devis .date { grid-column: 2; text-align: right; color: var(--texte-doux); font-size: 12px; }
  .ligne-devis .client { grid-column: 1 / -1; }
  .ligne-devis .employe { grid-column: 1 / -1; font-size: 12px; }
  .ligne-devis .montant { grid-column: 1 / -1; text-align: left; font-size: 12.5px; }
  .ligne-devis .montant.ht { color: var(--texte-doux); }
  .ligne-devis .etiquette-mobile { display: inline; color: var(--texte-doux); }
  .actions-devis { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; }
  .detail-devis { padding: 0 14px 14px; }
}

/* ------------------------------------------------- barre sur petit écran */
@media (max-width: 760px) {
  .barre {
    flex-wrap: wrap;
    padding: 10px 14px 0;
    gap: 8px 12px;
  }
  .barre-logo { height: 26px; }
  .barre-titre { min-width: 0; flex: 1; }
  .barre-titre h1 {
    font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .barre-titre p { display: none; }

  .barre-compte { margin-left: auto; gap: 8px; font-size: 12px; }
  .barre-compte .role { display: none; }
  .barre-compte .nom { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Le menu passe sur sa propre ligne, en pleine largeur */
  .barre-menu {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 0;
    border-top: 1px solid var(--bord);
  }
  .barre-menu a {
    flex: 1;
    text-align: center;
    border-radius: 0;
    padding: 11px 8px;
    border-bottom: 2px solid transparent;
  }
  .barre-menu a.actif { background: none; border-bottom-color: var(--teal); }
}

@media (max-width: 560px) {
  /* Sur un écran étroit, l'onglet actif indique déjà où l'on se trouve :
     le titre laisse la place au nom et au bouton de déconnexion. */
  .barre-titre { display: none; }
  .barre-compte { margin-left: auto; }
}

/* ---------------------------------------------------------- administration */
main.administration {
  display: block;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
}
main.administration .bloc { margin-bottom: 16px; }
.entete-section {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.entete-section h2 { margin: 0; font-size: 15px; font-weight: 600; }
.entete-section h2 strong { color: var(--teal-fonce); }
.boutons-section { display: flex; gap: 8px; flex-wrap: wrap; }
button.compact { padding: 7px 13px; font-size: 12.5px; flex: none; }
.bouton-lien {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--bord); background: #fff; color: var(--texte);
  text-decoration: none; display: inline-block;
}
.bouton-lien:hover { background: #f4f8f9; }
label.case { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
label.case input { width: auto; margin: 0; }
.indice { color: var(--texte-doux); font-weight: 400; }

/* tableaux d'administration */
.tableau-comptes, .tableau-produits {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 10px; overflow: hidden;
}
.entete-comptes, .ligne-compte {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 145px 52px 118px 160px 52px 330px;
  gap: 10px; align-items: center; padding: 10px 16px;
}
.entete-produits, .ligne-produit {
  display: grid;
  grid-template-columns: 170px minmax(160px, 1fr) 140px 140px 160px;
  gap: 10px; align-items: center; padding: 8px 16px;
}
.entete-comptes, .entete-produits {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  font-weight: 600; color: var(--texte-doux);
  background: #fafcfd; border-bottom: 1px solid var(--bord);
}
.ligne-compte, .ligne-produit { border-bottom: 1px solid #eef2f5; font-size: 13px; }
.ligne-compte:last-child, .ligne-produit:last-child { border-bottom: 0; }
.ligne-compte.inactif, .ligne-produit.inactif { background: #fbfbfc; color: var(--texte-doux); }
.nom-compte { font-weight: 650; }
.ligne-compte .identifiant, .ligne-produit .reference {
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--texte-doux);
}
.ligne-compte .initiale { font-weight: 650; color: var(--teal-fonce); }
.ligne-compte .discret { color: var(--texte-doux); font-size: 12px; }
.entete-comptes .nombre, .ligne-compte .nombre,
.entete-produits .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  background: #eef2f5; color: var(--texte-doux); padding: 2px 6px; border-radius: 20px;
}

.actions-compte, .actions-produit { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.actions-compte button, .actions-produit button {
  border: 1px solid var(--bord); background: #fff; border-radius: 6px;
  padding: 4px 8px; font-size: 11.5px; cursor: pointer; color: var(--teal-fonce);
}
.actions-compte button:hover, .actions-produit button:hover { background: #eef7f8; }
.actions-compte button.danger { color: var(--rouge); }
.actions-compte button.danger:hover { background: #fdf3f2; }

.ligne-produit input[data-champ] {
  margin: 0; padding: 5px 8px; font-size: 12.5px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.ligne-produit input.sans-prix { border-color: #e0b355; background: #fffaf0; }
.ligne-produit.enregistre { animation: eclair-vert 1.2s ease-out; }
.ligne-produit.refuse { animation: eclair-rouge 1.2s ease-out; }
@keyframes eclair-vert { from { background: #e4f6ec; } to { background: transparent; } }
@keyframes eclair-rouge { from { background: #fdecea; } to { background: transparent; } }

.message.attente { border-color: #cfe0e6; background: #f2f8fa; }

/* fenêtres modales */
dialog.fenetre {
  border: 0; border-radius: 14px; padding: 24px;
  width: min(520px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(20, 40, 60, .25);
}
dialog.fenetre::backdrop { background: rgba(20, 40, 60, .35); }
dialog.fenetre h2 { margin: 0 0 18px; font-size: 16px; }
dialog.fenetre label { margin-bottom: 14px; }
.erreur-fenetre {
  margin: 0 0 14px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid #eec4c1; background: #fdf3f2; color: var(--rouge); font-size: 12.5px;
}
.actions-fenetre { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }

@media (max-width: 900px) {
  .entete-comptes, .entete-produits { display: none; }
  .ligne-compte, .ligne-produit {
    grid-template-columns: 1fr auto;
    gap: 4px 10px; padding: 12px 14px;
    border-bottom: 1px solid var(--bord);
  }
  .ligne-compte > span, .ligne-produit > span { grid-column: 1 / -1; }
  .ligne-compte .nom-compte, .ligne-produit .titre { grid-column: 1; font-weight: 650; }
  .ligne-compte .identifiant, .ligne-produit .reference { grid-column: 2; text-align: right; }
  .ligne-produit .nombre { display: flex; align-items: center; gap: 8px; }
  .ligne-produit .nombre::before {
    content: attr(data-etiquette); font-size: 11.5px; color: var(--texte-doux);
  }
  .ligne-produit input[data-champ] { max-width: 130px; }
  .actions-compte, .actions-produit { justify-content: flex-start; margin-top: 6px; }
}

/* ------------------------------------------------- écran de saisie mobile */
.onglets-mobile { display: none; }

@media (max-width: 1100px) {
  main { padding: 14px; gap: 14px; }

  .onglets-mobile {
    display: flex;
    gap: 6px;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 10px;
    padding: 4px;
    position: sticky;
    top: var(--hauteur-barre, 96px);
    z-index: 15;
    /* Prolonge le fond vers le haut : sans cela, le contenu défilerait dans
       l'espace laissé entre la barre et les onglets. */
    box-shadow: 0 -14px 0 var(--fond);
  }
  .onglets-mobile button {
    flex: 1;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--texte-doux);
    padding: 9px 8px;
    border-radius: 7px;
    cursor: pointer;
  }
  .onglets-mobile button.actif { background: #e5f2f3; color: var(--teal-fonce); }

  /* Une seule des deux vues à la fois */
  main[data-vue="saisie"] .apercu { display: none; }
  main[data-vue="apercu"] .saisie { display: none; }

  .apercu { position: static; }
  .apercu-entete { display: none; }

  /* 16 px minimum sur les champs : en deçà, iOS zoome à chaque fois qu'on
     touche une case, et l'on perd la page de vue. */
  input, select, textarea { font-size: 16px; padding: 10px 11px; }
  .ligne-article .bas input,
  .ligne-article .haut input { font-size: 16px; }

  /* La ligne référence / quantité / prix / montant ne tient pas sur la
     largeur d'un téléphone : elle se répartit sur trois rangées. */
  .ligne-article .bas { flex-wrap: wrap; row-gap: 8px; }
  .ligne-article .champ-reference { flex: 1 1 100%; min-width: 0; }
  .ligne-article .champ-quantite { width: 68px; }
  .ligne-article .champ-prix { width: 104px; }
  .ligne-article .montant { flex: 1 1 100%; margin-left: 0; text-align: right; font-size: 14px; }
  .bloc { padding: 14px; }
  .bloc legend { font-size: 11.5px; }

  .suggestions li { padding: 11px 10px; }
  .suggestions .titre { font-size: 14px; }

  /* Le bouton de génération reste à portée de pouce */
  .saisie { padding-bottom: 4px; }
  .actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--fond) 72%, transparent);
    padding: 12px 0 calc(10px + env(safe-area-inset-bottom));
    margin: 0 -2px;
    z-index: 12;
  }
  .actions .principal { flex: 1; }
  .actions .secondaire { flex: none; }
  button.principal, button.secondaire { padding: 13px 14px; font-size: 14px; }
}

@media (max-width: 1100px) {
  .hors-mobile { display: none; }
}

@media (max-width: 620px) {
  .grille-2 { grid-template-columns: 1fr; }
}

/* Libellés courts réservés au téléphone */
.mobile-seul { display: none; }
@media (max-width: 1100px) {
  .mobile-seul { display: inline; }
}
@media (max-width: 760px) {
  .barre-menu a { padding: 11px 4px; font-size: 12.5px; }
}

@media (max-width: 900px) {
  /* Sur une fiche empilée, chaque valeur porte son intitulé */
  .ligne-compte .initiale,
  .ligne-compte .discret,
  .ligne-compte .nombre { display: flex; gap: 8px; text-align: left; }
  .ligne-compte .initiale::before,
  .ligne-compte .discret::before,
  .ligne-compte .nombre::before {
    content: attr(data-etiquette) " :";
    color: var(--texte-doux); font-weight: 400; font-size: 12.5px;
    min-width: 120px;
  }
}

/* ------------------------------------------------- conditions générales */
#conditions {
  min-height: 92px;
  line-height: 1.5;
}
@media (max-width: 1100px) {
  /* Plus haute au doigt : on y écrit plusieurs lignes, et le clavier tactile
     mange déjà la moitié de l'écran. */
  #conditions { min-height: 140px; }
}
.detail-devis .conditions {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #e4edef;
  color: var(--texte-doux);
  white-space: pre-line;
}
.detail-devis .conditions .intitule {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}