/*
 * Interface de l'application. Palette des formulaires (« Bibliothèque -
 * Spécification - Charte graphique », section 6 ; Application, section 3) :
 * encre #232C33 ; bleu #468CAE réservé aux grands éléments (bandeaux, grands
 * titres) ; bleu foncé #2F6A88 pour tout texte, lien ou bouton ; petits
 * textes secondaires en #6B737B ; teinte, filet et champ des formulaires.
 * Police : Source Sans 3, fichiers de la remise (Application, section 3).
 * Aucun style en ligne : la politique de contenu du site n'en admet pas.
 */

@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../polices/source-sans-3/SourceSans3-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('../polices/source-sans-3/SourceSans3-Semibold.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../polices/source-sans-3/SourceSans3-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: italic; font-display: swap;
  src: url('../polices/source-sans-3/SourceSans3-It.ttf') format('truetype'); }

:root {
  color-scheme: light;
  --encre: #232C33;
  --bleu: #468CAE;
  --bleu-fonce: #2F6A88;
  --bleu-clair: #F2F7FA;
  --bleu-bordure: #B9CBD6;
  --gris: #6B737B;
  --teinte: #F3F5F7;
  --filet: #D5D9DD;
  --champ: #C2C8CE;
  --fond: #F3F5F7;
  --surface: #FFFFFF;
  --texte-sur-fonce: #FFFFFF;
  --erreur: #B3261E;
  --erreur-fond: #FDECEA;
  --erreur-bord: #E8A39C;
  --ok: #1F7A4D;
  --ok-fond: #E7F5EE;
  --ok-bord: #9FD1B6;
  --attention-fond: #FFF4E0;
  --attention-bord: #E8B65C;
  --attention-texte: #5C3D00;
  --ombre: 0 1px 2px rgba(35, 44, 51, .08);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --encre: #E6EAED;
    --bleu: #468CAE;
    --bleu-fonce: #8CC2DC;
    --bleu-clair: #1C2830;
    --bleu-bordure: #3A5566;
    --gris: #A3ABB3;
    --teinte: #20272D;
    --filet: #39434B;
    --champ: #4A555E;
    --fond: #14191D;
    --surface: #1B2126;
    --erreur: #F2B8B5;
    --erreur-fond: #3A1D1B;
    --erreur-bord: #8C3A33;
    --ok: #9FD8B8;
    --ok-fond: #15301F;
    --ok-bord: #2F6B48;
    --attention-fond: #3A2D10;
    --attention-bord: #8A6A20;
    --attention-texte: #F5DDA6;
    --ombre: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.45 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--encre);
  background: var(--fond);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--bleu-fonce); }
h1, h2, h3 { line-height: 1.2; }
h2 { font-size: 18px; margin: 0 0 12px; font-weight: 700; }
h3 { font-size: 16px; margin: 16px 0 8px; font-weight: 700; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; background: var(--teinte); padding: 0 4px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ en-tête et bandeau de démonstration */
.entete {
  background: #232C33; color: #FFFFFF;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; flex-wrap: wrap;
}
.entete .pastille {
  width: 36px; height: 36px; border-radius: 8px; background: var(--bleu); color: #FFFFFF;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: .5px; flex: none;
}
.entete .titre { font-size: 18px; font-weight: 600; margin: 0; }
.entete .societe { color: #C9D2D9; font-size: 14px; }
.entete .espace { flex: 1; }
.entete button { background: transparent; color: #FFFFFF; border-color: #5B6770; }
.entete button:hover { background: #33404A; }

.bandeau-demo {
  background: repeating-linear-gradient(135deg, var(--attention-fond) 0 18px, transparent 18px 36px), var(--attention-fond);
  border-bottom: 2px solid var(--attention-bord); color: var(--attention-texte);
  padding: 8px 16px; font-weight: 700; text-align: center; letter-spacing: .3px;
}

/* ------------------------------------------------------------ onglets */
.onglets { display: flex; gap: 4px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--filet); overflow-x: auto; }
.onglets a {
  display: block; padding: 12px 14px; text-decoration: none; color: var(--bleu-fonce); font-weight: 600;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.onglets a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--bleu); }
.onglets .espace { flex: 1; }
.sous-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 16px; }
.sous-onglets a {
  padding: 6px 12px; border-radius: 16px; text-decoration: none; font-size: 14px; font-weight: 600;
  color: var(--bleu-fonce); border: 1px solid var(--bleu-bordure); background: var(--surface);
}
.sous-onglets a[aria-current="page"] { background: #2F6A88; border-color: #2F6A88; color: #FFFFFF; }

main { max-width: 980px; margin: 0 auto; padding: 16px; }
main.etroit { max-width: 560px; }

/* ------------------------------------------------------------ blocs */
.bloc { background: var(--surface); border: 1px solid var(--filet); border-radius: 10px; padding: 16px; margin-bottom: 16px; box-shadow: var(--ombre); }
.bloc > h2:first-child { margin-top: 0; }
.bloc.accent { border-left: 4px solid var(--bleu); }
.grand-titre { font-size: 24px; font-weight: 700; margin: 8px 0 16px; }
.discret { color: var(--gris); font-size: 14px; }
.petit { font-size: 14px; }
.ligne { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ligne > .large { flex: 1; min-width: 200px; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.pile > * + * { margin-top: 8px; }
.separateur { border: 0; border-top: 1px solid var(--filet); margin: 16px 0; }

/* ------------------------------------------------------------ formulaires */
label { display: block; font-size: 14px; color: var(--gris); margin: 10px 0 4px; }
label.case { display: flex; align-items: center; gap: 8px; color: var(--encre); font-size: 15px; margin: 8px 0; }
label.case input { width: 18px; height: 18px; margin: 0; accent-color: var(--bleu-fonce); flex: none; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date],
input[type=tel], select, textarea {
  width: 100%; padding: 9px 11px; font-size: 16px; background: var(--surface);
  border: 1px solid var(--champ); border-radius: 8px;
}
textarea { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--bleu-fonce); outline-offset: 1px;
}
input[readonly] { background: var(--teinte); }
input.court { width: 110px; }
input.moyen { width: 170px; }
.aide { font-size: 13px; color: var(--gris); margin-top: 4px; }
.erreur-champ { color: var(--erreur); font-size: 14px; margin-top: 4px; }
fieldset { border: 1px solid var(--filet); border-radius: 8px; padding: 8px 12px 12px; margin: 12px 0; }
legend { color: var(--gris); font-size: 14px; padding: 0 4px; }
.intitule { font-size: 14px; font-weight: 400; color: var(--gris); margin: 10px 0 4px; }

/* ------------------------------------------------------------ boutons */
button, .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 15px; padding: 9px 15px; border-radius: 8px; cursor: pointer; text-decoration: none;
  border: 1px solid #2F6A88; background: #2F6A88; color: #FFFFFF; font-weight: 600;
}
button:hover, .bouton:hover { background: #25566F; }
button.second, .bouton.second { background: var(--surface); color: var(--bleu-fonce); border-color: var(--bleu-bordure); }
button.second:hover, .bouton.second:hover { background: var(--bleu-clair); }
button.petit, .bouton.petit { padding: 4px 10px; font-size: 13px; font-weight: 600; }
button.danger { background: var(--surface); color: var(--erreur); border-color: var(--erreur-bord); }
button.danger:hover { background: var(--erreur-fond); }
button.lien { background: none; border: 0; color: var(--bleu-fonce); padding: 0; text-decoration: underline; font-weight: 400; }
button:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: default; }
button[aria-busy="true"] { cursor: progress; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.choix button[aria-pressed="true"] { background: #2F6A88; color: #FFFFFF; border-color: #2F6A88; }
.choix button[aria-pressed="false"] { background: var(--surface); color: var(--bleu-fonce); border-color: var(--bleu-bordure); }
.choix input { width: 120px; }

/* ------------------------------------------------------------ messages */
.alerte { padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; font-size: 15px; border: 1px solid; }
.alerte.attention { background: var(--attention-fond); border-color: var(--attention-bord); color: var(--attention-texte); }
.alerte.erreur { background: var(--erreur-fond); border-color: var(--erreur-bord); color: var(--erreur); }
.alerte.ok { background: var(--ok-fond); border-color: var(--ok-bord); color: var(--ok); }
.alerte.info { background: var(--bleu-clair); border-color: var(--bleu-bordure); color: var(--encre); }
.alerte ul { margin: 6px 0 0; padding-left: 20px; }
.annonces { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; width: min(560px, calc(100% - 32px)); }
.annonces .alerte { box-shadow: 0 4px 16px rgba(0, 0, 0, .18); margin-bottom: 8px; }

/* ------------------------------------------------------------ registre */
.numero { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .3px; }
.numero.grand { font-size: 20px; }
.numero.barre { text-decoration: line-through; color: var(--gris); }
.code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.resultat { margin-top: 14px; padding: 14px; border: 2px solid var(--bleu); border-radius: 10px; background: var(--bleu-clair); }
.client { border-top: 1px solid var(--filet); padding: 12px 0; }
.client:first-child { border-top: 0; }
.tete { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
ul.dossiers { list-style: none; padding: 0; margin: 8px 0 0; }
ul.dossiers > li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-top: 1px dashed var(--filet); }
.fiche-ouverte { width: 100%; margin: 6px 0 4px; padding: 4px 12px; border-left: 3px solid var(--bleu); background: var(--bleu-clair); border-radius: 6px; }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--attention-bord); background: var(--attention-fond); color: var(--attention-texte); }
.badge.neutre { background: var(--teinte); border-color: var(--filet); color: var(--gris); }
.badge.ok { background: var(--ok-fond); border-color: var(--ok-bord); color: var(--ok); }
.badge.bleu { background: var(--bleu-clair); border-color: var(--bleu-bordure); color: var(--bleu-fonce); }
details { margin-top: 10px; }
summary { cursor: pointer; color: var(--bleu-fonce); }
details.consultations { width: 100%; margin: 0; font-size: 13px; color: var(--gris); }
details.consultations summary { color: var(--gris); }
details.consultations ul { margin: 4px 0 2px; padding-left: 18px; }
.sous-liste { width: 100%; padding-left: 12px; font-size: 14px; }
.sous-liste > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 2px 0; }

/* ------------------------------------------------------------ tableaux */
.tableau-defile { overflow-x: auto; }
table.donnees { border-collapse: collapse; width: 100%; font-size: 14px; }
table.donnees th { text-align: left; font-weight: 600; color: var(--gris); border-bottom: 1px solid var(--filet); padding: 6px 8px; white-space: nowrap; }
table.donnees td { border-bottom: 1px solid var(--filet); padding: 6px 8px; vertical-align: top; }
table.donnees td.nombre, table.donnees th.nombre { text-align: right; white-space: nowrap; }
table.donnees tr.total td { font-weight: 700; }
table.donnees.saisie td { padding: 4px; vertical-align: middle; }
table.donnees.saisie input { padding: 6px 8px; font-size: 15px; }
.actions-ligne { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
td.actions-ligne { justify-content: flex-end; }
.piece { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; align-items: flex-start; padding: 8px 0; border-top: 1px dashed var(--filet); }
pre.code { white-space: pre-wrap; word-break: break-all; background: var(--teinte); border: 1px solid var(--filet); border-radius: 8px; padding: 10px 12px; font-size: 15px; }

/* ------------------------------------------------------------ devis */
.statut { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 10px; border: 1px solid; }
.statut.brouillon { color: var(--attention-texte); background: var(--attention-fond); border-color: var(--attention-bord); }
.statut.enregistre { color: var(--bleu-fonce); background: var(--bleu-clair); border-color: var(--bleu-bordure); }
.statut.envoye { color: var(--ok); background: var(--ok-fond); border-color: var(--ok-bord); }
.ligne-devis { border: 1px solid var(--filet); border-radius: 8px; padding: 8px 12px 12px; margin: 10px 0; background: var(--surface); }
.ligne-devis .tete-ligne { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ligne-devis .tete-ligne strong { font-size: 15px; }
.totaux { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border: 1px solid var(--bleu-bordure); border-radius: 10px; padding: 10px 14px; margin-top: 16px; box-shadow: 0 -2px 10px rgba(0, 0, 0, .06); }
.totaux .chiffres { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.totaux .chiffres strong { font-size: 18px; }
.totaux .actions { margin-top: 8px; }
.totaux details { margin-top: 6px; font-size: 14px; }
.totaux details ul { margin: 4px 0 0; padding-left: 20px; max-height: 30vh; overflow-y: auto; }
.etat-sauvegarde { font-size: 13px; color: var(--gris); }
.etat-sauvegarde.erreur { color: var(--erreur); }
.montant-ligne { font-variant-numeric: tabular-nums; }
.adresse-bloc { border: 1px dashed var(--champ); border-radius: 8px; padding: 6px 12px 10px; margin: 8px 0; }
.mention { margin: 10px 0; }
.mention .entete-mention { display: flex; justify-content: space-between; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.releve { width: 100%; border-collapse: collapse; font-size: 14px; }
.releve td { padding: 4px 6px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.releve td:first-child { width: 28px; }

/* ------------------------------------------------------------ dialogues */
dialog { border: 1px solid var(--filet); border-radius: 12px; padding: 18px; max-width: min(520px, calc(100% - 32px)); background: var(--surface); color: var(--encre); }
dialog::backdrop { background: rgba(20, 25, 29, .55); }
dialog h2 { font-size: 18px; }
dialog.large { max-width: min(860px, calc(100% - 32px)); }

/* ------------------------------------------------------------ écrans d'accueil */
.accueil { max-width: 460px; margin: 32px auto; padding: 0 16px; }
.accueil .marque { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.accueil .marque .pastille { width: 44px; height: 44px; border-radius: 10px; background: var(--bleu); color: #FFFFFF; display: grid; place-items: center; font-weight: 700; }
.accueil .marque .nom { font-size: 22px; font-weight: 700; }
.diagnostic { font-size: 13px; color: var(--gris); }
.diagnostic td { padding: 2px 8px 2px 0; }

@media (max-width: 600px) {
  main { padding: 12px; }
  .bloc { padding: 12px; }
  .entete .societe { display: none; }
  .onglets { padding: 0 4px; gap: 0; }
  .onglets a { padding: 10px 9px; font-size: 15px; }
  /* totaux du devis : compacts, pour laisser la place à la saisie */
  .totaux { padding: 8px 10px; margin-top: 12px; }
  .totaux .chiffres { gap: 0 12px; font-size: 14px; }
  .totaux .chiffres strong { font-size: 16px; }
  .totaux .chiffres .discret { font-size: 12px; }
  .totaux .actions { margin-top: 6px; gap: 6px; }
  .totaux .actions button { padding: 7px 10px; font-size: 14px; }
}

@media print {
  .entete, .onglets, .actions, .annonces, .bandeau-demo { display: none; }
}