/* Darwin — Factures électroniques.
   Sobre et lisible : l'outil sert à convertir des factures, pas à impressionner.
   Le bordeaux est celui de la charte du groupe. */

:root {
  --bordeaux: #7c1c33;
  --bordeaux-clair: #9d3350;
  --encre: #1c1c1e;
  --gris: #5c5c66;
  --gris-clair: #e6e6ea;
  --fond: #f6f6f8;
  --blanc: #ffffff;
  --vert-net: #17693a;
  --ambre: #a86a00;
  --rouge: #a4262c;
  --rayon: 8px;
  --ombre: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .05);
}

* { box-sizing: border-box; }

/* Une règle d'affichage écrite ici l'emporte sur le « display:none » que le
   navigateur applique à un élément masqué : sans cette ligne, `.connexion`
   (display:grid) restait visible par-dessus l'application une fois connecté.
   Vécu — l'écran de connexion ne partait jamais. */
[hidden] { display: none !important; }

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

h1, h2, h3 { color: var(--bordeaux); font-weight: 600; }
h2 { font-size: 1.25rem; margin: 0 0 .25rem; }
h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; }
a { color: var(--bordeaux); }

/* --- connexion --------------------------------------------------------- */

.connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.carte-connexion {
  width: 100%;
  max-width: 380px;
  background: var(--blanc);
  padding: 32px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.carte-connexion h1 { margin: 0; font-size: 1.4rem; }
.sous-titre { margin: .25rem 0 1.75rem; color: var(--gris); font-size: .9rem; }
.aide-connexion { margin: 1rem 0 0; font-size: .85rem; color: var(--gris); text-align: center; }

label {
  display: block;
  margin: 1rem 0 .3rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gris);
}

input[type="email"], input[type="password"], input[type="text"], input:not([type]) {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  font: inherit;
  background: var(--blanc);
}

input:focus { outline: 2px solid var(--bordeaux-clair); outline-offset: 1px; }

.bouton-principal {
  margin-top: 1.5rem;
  width: 100%;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--rayon);
  background: var(--bordeaux);
  color: var(--blanc);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.bouton-principal:hover { background: var(--bordeaux-clair); }
.bouton-principal:disabled { background: var(--gris); cursor: not-allowed; }

.lien {
  background: none;
  border: 0;
  color: var(--bordeaux);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}

.erreur {
  margin: 1rem 0 0;
  padding: 10px 12px;
  border-radius: var(--rayon);
  background: #fdeaea;
  color: var(--rouge);
  font-size: .9rem;
}

/* --- bandeau ------------------------------------------------------------ */

.bandeau {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-clair);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marque { font-weight: 700; color: var(--bordeaux); padding: 16px 0; }
.onglets { display: flex; gap: 4px; flex: 1; }

.onglet {
  border: 0;
  background: none;
  font: inherit;
  padding: 18px 16px;
  cursor: pointer;
  color: var(--gris);
  border-bottom: 3px solid transparent;
}

.onglet.actif { color: var(--bordeaux); border-bottom-color: var(--bordeaux); font-weight: 600; }
.compte { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--gris); }

/* --- vues --------------------------------------------------------------- */

.vue { max-width: 1040px; margin: 0 auto; padding: 32px 24px 64px; }
.note { color: var(--gris); font-size: .9rem; margin: .25rem 0 0; }
.encadre { background: var(--blanc); padding: 12px 14px; border-radius: var(--rayon); border-left: 3px solid var(--gris); }

.entete-vue { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.entete-vue .bouton-principal { margin-top: 0; width: auto; white-space: nowrap; }

/* --- dépôt -------------------------------------------------------------- */

.depot {
  background: var(--blanc);
  border: 2px dashed var(--gris-clair);
  border-radius: var(--rayon);
  padding: 56px 24px;
  text-align: center;
}

.depot.survol { border-color: var(--bordeaux); background: #fdf7f8; }
.depot-titre { margin: 0; font-size: 1.15rem; font-weight: 600; }
.depot-detail { margin: .4rem 0 0; color: var(--gris); }
.depot .bouton-principal { width: auto; padding: 11px 28px; }
.depot-note { margin: 1.5rem 0 0; font-size: .85rem; color: var(--gris); }

.en-cours { background: var(--blanc); padding: 24px; border-radius: var(--rayon); text-align: center; box-shadow: var(--ombre); }
.barre { height: 6px; background: var(--gris-clair); border-radius: 3px; overflow: hidden; }
.barre-remplissage { height: 100%; width: 35%; background: var(--bordeaux); border-radius: 3px; animation: glisse 1.1s ease-in-out infinite; }

@keyframes glisse {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .barre-remplissage { animation: none; width: 100%; }
}

/* --- résultats ---------------------------------------------------------- */

.resume { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.resume .bouton-principal { margin-top: 0; width: auto; white-space: nowrap; }

.carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin-top: 16px;
  overflow: hidden;
}

.carte-entete { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gris-clair); }
.carte-entete.sans-suite { border-bottom: 0; }
.carte-titre { font-weight: 600; flex: 1; }
.carte-sous-titre { color: var(--gris); font-size: .85rem; font-weight: 400; }
.carte-corps { padding: 14px 18px; }
.carte-corps ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.carte-corps li { margin: .2rem 0; }
.marche { margin-top: .75rem; padding: 10px 12px; border-radius: var(--rayon); background: #fff8e8; }
.montant { font-variant-numeric: tabular-nums; color: var(--gris); font-size: .9rem; white-space: nowrap; }

.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pastille.conforme { background: var(--vert-net); }
.pastille.reserve  { background: var(--ambre); }
.pastille.refusee  { background: var(--rouge); }

.etiquette { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.etiquette.conforme { background: #e6f4ec; color: var(--vert-net); }
.etiquette.reserve  { background: #fdf0d9; color: var(--ambre); }
.etiquette.refusee  { background: #fdeaea; color: var(--rouge); }

/* --- tableau clients ---------------------------------------------------- */

table { width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--gris-clair); }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris); background: #fafafc; }
tbody tr:last-child td { border-bottom: 0; }
td.identifiant { font-variant-numeric: tabular-nums; }
td.actions-ligne { text-align: right; white-space: nowrap; }
.vide { padding: 40px; text-align: center; color: var(--gris); background: var(--blanc); border-radius: var(--rayon); }
/* Ce qu'on a fait au passage, dit à la personne plutôt que fait dans son dos. */
.avis { margin-bottom: 12px; padding: 11px 16px; background: #fdf0d9; color: var(--ambre); border-radius: var(--rayon); font-size: .9rem; }

/* --- aide --------------------------------------------------------------- */

.aide { max-width: 68ch; }
dl.aide dt { margin-top: .9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
dl.aide dd { margin: .15rem 0 0 18px; color: var(--gris); }

/* --- fenêtre ------------------------------------------------------------ */

dialog {
  border: 0;
  border-radius: var(--rayon);
  padding: 28px;
  width: min(460px, 92vw);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .22);
}

dialog::backdrop { background: rgba(0, 0, 0, .4); }
dialog h2 { margin-top: 0; }
.champ-note { margin: .3rem 0 0; font-size: .8rem; color: var(--gris); }
.actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 1.75rem; }
.actions .bouton-principal { margin-top: 0; width: auto; }

@media (max-width: 720px) {
  .bandeau { flex-wrap: wrap; gap: 0 16px; padding: 0 16px; }
  .onglets { order: 3; width: 100%; }
  .onglet { padding: 14px 12px; }
  .vue { padding: 24px 16px 48px; }
  .resume, .entete-vue { flex-direction: column; align-items: stretch; }
}