/* Soumission CVAC. Mobile d'abord, pensée pour les navigateurs intégrés
   aux applications: pas de unité viewport dynamique, pas de position sticky,
   pas de grille complexe sur petit écran. */

@font-face { font-family:'Switzer'; src:url('/fonts/Switzer-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Switzer'; src:url('/fonts/Switzer-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --obsidian:#101010;
  --carbon:#080808;
  --chalk:#f3f3f3;
  --smoke:#9c9c9c;
  --graphite:#212121;
  --iron:#474747;
  --accent:#C18F3C;
  --papier:#f4f1ea;
  --encre:#1c1a17;
  --encre-douce:#5c564d;
  --reglure:#ddd6c8;
  --sans:'Switzer', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--obsidian);-webkit-text-size-adjust:100%}

body{
  background:var(--obsidian);
  color:var(--chalk);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.col{
  max-width:760px;
  margin:0 auto;
  padding:40px 20px 72px;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Entrée ---------- */

.intro{
  color:var(--smoke);
  font-size:18px;
  line-height:1.55;
  max-width:44ch;
  margin-bottom:36px;
}

.label{
  font-size:16px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--smoke);
  margin-bottom:12px;
}

textarea#demande{
  display:block;
  width:100%;
  min-height:170px;
  padding:18px;
  background:var(--carbon);
  border:1px solid var(--graphite);
  border-radius:3px;
  color:var(--chalk);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.55;
  resize:vertical;
}
textarea#demande::placeholder{color:#6d6d6d;opacity:1}
textarea#demande:focus{border-color:var(--iron);outline:none}

.exemples{margin-top:22px}
.exemples-titre{
  display:block;
  font-size:16px;
  color:var(--smoke);
  margin-bottom:10px;
}
.exemples-liste{display:flex;flex-wrap:wrap;gap:8px}

.ex{
  flex:1 1 auto;
  min-height:44px;
  padding:10px 14px;
  background:transparent;
  border:1px solid var(--graphite);
  border-radius:3px;
  color:var(--chalk);
  font-family:var(--sans);
  font-size:16px;
  cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.ex:hover,.ex:active{border-color:var(--accent);color:var(--accent)}

.actions{display:flex;gap:10px;align-items:stretch;margin-top:26px}

.primaire{
  flex:1 1 auto;
  min-height:54px;
  padding:15px 24px;
  background:var(--accent);
  border:none;
  border-radius:3px;
  color:#151105;
  font-family:var(--sans);
  font-size:18px;
  font-weight:500;
  cursor:pointer;
  transition:opacity .2s var(--ease);
}
.primaire:hover{opacity:.9}
.primaire:disabled{opacity:.5;cursor:default}

.micro{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:0 18px;
  background:transparent;
  border:1px solid var(--graphite);
  border-radius:3px;
  color:var(--smoke);
  font-family:var(--sans);
  font-size:16px;
  cursor:pointer;
}
.micro:hover{border-color:var(--iron);color:var(--chalk)}
.micro.ecoute{border-color:var(--accent);color:var(--accent)}

.erreur{
  margin-top:16px;
  padding:12px 14px;
  border-left:2px solid var(--accent);
  background:var(--carbon);
  color:var(--chalk);
  font-size:16px;
}

/* Une entrée qui n'est pas une demande de travaux n'est pas une erreur:
   ton neutre, pas de filet d'accent, pas de rôle d'alerte. */
.note{
  margin-top:16px;
  padding:12px 14px;
  border-left:2px solid var(--graphite);
  background:var(--carbon);
  color:var(--smoke);
  font-size:16px;
  line-height:1.5;
}

/* ---------- État de travail ---------- */

.travail{margin-top:36px}
.etapes{list-style:none}
.etapes li{
  position:relative;
  padding-left:26px;
  color:#5f5f5f;
  font-size:16px;
  line-height:2.1;
  transition:color .3s var(--ease);
}
.etapes li::before{
  content:"";
  position:absolute;
  left:0;top:calc(1.05em - 3px);
  width:6px;height:6px;border-radius:50%;
  background:#3a3a3a;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.etapes li.encours{color:var(--chalk)}
.etapes li.encours::before{background:var(--accent);box-shadow:0 0 0 4px rgba(193,143,60,.15)}
.etapes li.faite{color:var(--smoke)}
.etapes li.faite::before{background:var(--iron)}

/* ---------- Le document ---------- */

.doc{
  margin-top:36px;
  background:var(--papier);
  color:var(--encre);
  border:1px solid #cfc7b6;
  border-radius:2px;
  padding:26px 20px 22px;
  font-size:17px;
  line-height:1.5;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
}

.doc-tete{border-bottom:2px solid var(--encre);padding-bottom:16px;margin-bottom:20px}

/* En-tête de l'entrepreneur. Identité d'abord, comme sur un papier à lettre. */
.doc-entreprise{
  padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid var(--reglure);
}
.doc-ent-nom{
  font-size:19px;font-weight:500;letter-spacing:.01em;
  color:var(--encre);margin-bottom:4px;
}
.doc-ent-lignes{font-size:16px;line-height:1.45;color:var(--encre-douce)}
.doc-ent-num{
  display:flex;flex-wrap:wrap;gap:2px 18px;
  margin-top:7px;
  font-family:var(--mono);font-size:16px;color:var(--encre-douce);
}
.doc-tete-h{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.doc-metier{
  font-family:var(--mono);
  font-size:16px;
  letter-spacing:.02em;
  color:var(--encre-douce);
}
.doc-type{
  font-size:16px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--encre);
}
.doc-titre{font-size:24px;font-weight:500;line-height:1.22;margin-bottom:14px}

.doc-meta{display:flex;flex-wrap:wrap;gap:6px 28px}
.doc-meta div{min-width:0}
.doc-meta dt{
  font-size:16px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-douce);
}
.doc-meta dd{font-size:17px;font-weight:500}

.doc-bloc{margin-bottom:22px}
.doc-h3{
  font-size:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-douce);
  padding-bottom:7px;margin-bottom:12px;
  border-bottom:1px solid var(--reglure);
}
.doc-resume{font-size:17px;color:var(--encre)}

/* Sur téléphone, quatre colonnes chiffrées ne tiennent pas dans la largeur
   utile: la ligne devient un bloc, description puis calcul, comme sur une
   soumission papier. Le tableau réapparaît sur écran large. */
.doc-table{width:100%;border-collapse:collapse;font-size:16px;display:block}
.doc-table thead{display:none}
.doc-table tbody{display:block}
.doc-table tr{
  display:block;
  padding:12px 0;
  border-bottom:1px solid var(--reglure);
}
.doc-table td{display:inline;padding:0;border:none}
.doc-table .c-desc{display:block;margin-bottom:5px}
.doc-table .c-qte,.doc-table .c-pu,.doc-table .c-tot{
  font-family:var(--mono);font-size:16px;color:var(--encre-douce);
  white-space:nowrap;
}
.doc-table .c-pu::before{content:" × "}
.doc-table .c-tot::before{content:" = "}
.doc-table .c-tot{font-weight:500;color:var(--encre)}
.c-unite{
  display:block;margin-top:3px;
  font-size:16px;color:var(--encre-douce);
}

.doc-totaux dl>div{
  display:flex;justify-content:space-between;gap:16px;
  padding:7px 0;font-size:17px;
}
.doc-totaux dt{color:var(--encre-douce)}
.doc-totaux dd{font-family:var(--mono);font-size:16px;white-space:nowrap}
.doc-totaux .grand{
  border-top:2px solid var(--encre);margin-top:6px;padding-top:12px;
  font-size:19px;font-weight:500;
}
.doc-totaux .grand dt{color:var(--encre);font-weight:500}
.doc-totaux .grand dd{font-size:19px;font-weight:500}

.doc-excl{list-style:none}
.doc-excl li{
  position:relative;padding-left:18px;margin-bottom:9px;
  font-size:17px;line-height:1.48;color:var(--encre);
}
.doc-excl li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--encre-douce);
}

/* Bloc d'acceptation. Balisage figé: aucun champ, aucune saisie. */
.doc-accept{margin-top:26px}
.doc-accept-note{font-size:16px;color:var(--encre-douce);margin-bottom:18px}
.doc-accept-lignes{display:flex;flex-wrap:wrap;gap:26px 32px}
.doc-accept-champ{flex:1 1 220px;min-width:0}
.doc-accept-trait{
  display:block;height:1px;background:var(--encre-douce);
  margin-bottom:6px;
}
.doc-accept-etiq{
  display:block;font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-douce);
}

.doc-pied{
  border-top:1px solid var(--reglure);padding-top:14px;
  font-size:16px;color:var(--encre-douce);
}
.doc-pied p+p{margin-top:5px}
.doc-source{font-style:italic}
.doc-exemple{font-size:16px;color:#8a8377}

/* ---------- Après ---------- */

.apres{margin-top:22px}
.copie-note{margin-top:11px;font-size:16px;color:var(--smoke)}
.copie-note.avis{color:var(--accent)}

.math{
  margin-top:26px;padding-top:18px;
  border-top:1px solid var(--graphite);
  font-size:16px;color:var(--smoke);line-height:1.9;
}
.math b{color:var(--chalk);font-weight:500;font-family:var(--mono)}

/* Tampon de repli pour la copie dans les navigateurs intégrés. */
.tampon{
  position:absolute;left:-9999px;top:0;
  width:1px;height:1px;opacity:0;
  border:none;background:transparent;color:transparent;
  font-family:var(--mono);font-size:16px;
}
.tampon.visible{
  position:static;left:auto;
  display:block;width:100%;height:220px;opacity:1;
  margin:0 auto;max-width:760px;padding:16px 20px;
  background:var(--carbon);border:1px solid var(--graphite);
  color:var(--chalk);font-family:var(--mono);font-size:16px;
}

/* ---------- Écrans larges ---------- */

@media (min-width:720px){
  body{font-size:19px}
  .col{padding:64px 32px 96px}
  .intro{font-size:19px}
  textarea#demande{font-size:19px;min-height:150px}
  .ex{flex:0 0 auto}
  .primaire{flex:0 0 auto;min-width:260px}
  .doc{padding:40px 40px 32px;font-size:18px}
  .doc-titre{font-size:29px}
  .doc-resume,.doc-excl li{font-size:18px}
  .doc-ent-nom{font-size:21px}
  .doc-ent-lignes,.doc-accept-note{font-size:17px}

  /* Écran large: le vrai tableau à quatre colonnes revient. */
  .doc-table{display:table}
  .doc-table thead{display:table-header-group}
  .doc-table tbody{display:table-row-group}
  .doc-table tr{display:table-row;padding:0;border-bottom:none}
  .doc-table th{
    display:table-cell;text-align:left;font-weight:500;
    letter-spacing:.05em;color:var(--encre-douce);
    padding-bottom:8px;border-bottom:1px solid var(--reglure);
  }
  .doc-table th.c-qte,.doc-table th.c-pu,.doc-table th.c-tot{text-align:right}
  .doc-table td{
    display:table-cell;padding:12px 0;
    border-bottom:1px solid var(--reglure);vertical-align:top;
  }
  .doc-table .c-desc{padding-right:12px;margin-bottom:0}
  .doc-table .c-qte,.doc-table .c-pu,.doc-table .c-tot{text-align:right;padding-left:10px}
  .doc-table .c-pu::before,.doc-table .c-tot::before{content:none}
  .doc-table,.doc-table th,.doc-table .c-qte,.doc-table .c-pu,.doc-table .c-tot{font-size:17px}
  .doc-totaux dl>div{font-size:18px}
  .doc-totaux .grand,.doc-totaux .grand dd{font-size:21px}
}

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

/* ---------- Impression ---------- */

@media print{
  html,body{background:#fff;color:#000}
  .col{max-width:none;padding:0}
  .intro,.saisie,.travail,.apres,.math,.tampon{display:none!important}
  .doc{
    margin:0;border:none;box-shadow:none;padding:0;
    background:#fff;font-size:11pt;
  }
  .doc-bloc{break-inside:avoid}
  .doc-table{font-size:10pt}
}