/* Direction graphique « thermostat » : filets noirs de 1 px, rien d'arrondi au-delà de 2 px, Geist Mono partout.
   Le rose dit ce qui se passe maintenant, le bleu ce qui est réglé. (04-maquettes/Composants.dc.html) */
:root {
  --chaud: #E11D48;
  --chaud-texte: #BE123C;
  --froid: #0284C7;
  --froid-texte: #0369A1;
  --encre: #0F172A;
  --fond: #F8FAFC;
  --gris: #64748B;
  --gris-clair: #94A3B8;
  --filet-clair: #CBD5E1;
  --hachure: #E2E8F0;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 15px; }
a { color: var(--froid-texte); }
a:hover { color: #075985; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--froid); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cadre { max-width: 1440px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

/* Typographie */
.k { font-size: 13px; font-weight: 500; text-transform: uppercase; }
.s { font-size: 13px; color: var(--gris); }
.up { text-transform: uppercase; }
.gris { color: var(--gris); }
.L { font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.h1 { margin: 0; font-size: 48px; font-weight: 400; letter-spacing: -0.04em; line-height: 1.05; }
.h1-leger { margin: 0; font-size: 56px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.n { font-size: 30px; font-weight: 300; letter-spacing: -0.03em; margin: 0; }
.chaud { color: var(--chaud); }
.chaud-texte { color: var(--chaud-texte); }
.froid { color: var(--froid-texte); }
.pile { display: flex; flex-direction: column; gap: 10px; }
.pile2 { display: flex; flex-direction: column; gap: 2px; }
.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }

/* Boutons : un clic (rose), consentement (encre), confirmation forte (pleine largeur) */
.bt { font-size: 14px; font-weight: 500; text-transform: uppercase; min-height: 48px; padding: 0 22px; border-radius: 2px; border: 1px solid var(--encre); background: transparent; color: var(--encre); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.bt:hover { background: #F1F5F9; }
.bt.pr { background: var(--chaud); border-color: var(--chaud); color: #fff; }
.bt.pr:hover { background: var(--chaud-texte); }
.bt.dk { background: var(--encre); color: #fff; }
.bt.fort { min-height: 72px; font-size: 16px; border-radius: 0; }
.bt.danger { color: var(--chaud-texte); border-color: var(--chaud-texte); }
.bt-petit { min-height: 44px; }
.bt:disabled, .bt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.lien { background: none; border: none; padding: 0; font-size: 13px; text-transform: uppercase; color: var(--froid-texte); cursor: pointer; min-height: 32px; text-align: left; }
.lien:hover { text-decoration: underline; }

/* Grilles à filets */
.gr { display: grid; gap: 1px; background: var(--encre); border: 1px solid var(--encre); }
.gr > * { background: var(--fond); }
.tr { display: grid; gap: 16px; padding: 16px 0; border-top: 1px solid var(--encre); align-items: baseline; }
.tr.fin { border-bottom: 1px solid var(--encre); }

/* En-tête de l'espace client */
.tete { border-bottom: 1px solid var(--encre); }
.tete-in { min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 48px; }
.logo { font-family: Geist, sans-serif; font-weight: 600; font-size: 26px; letter-spacing: -0.04em; }
.logo span { color: var(--chaud); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 32px; font-size: 13px; text-transform: uppercase; flex-grow: 1; }
.nav a { color: var(--gris); text-decoration: none; }
.nav a[aria-current] { color: var(--encre); font-weight: 500; }
.client { font-size: 13px; }

/* Le thermomètre : quatre cases, une graduation */
.barre { border-bottom: 1px solid var(--encre); }
.barre-in { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.thermo { flex: 1 1 560px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--encre); min-height: 44px; }
.st li { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; text-transform: uppercase; border-left: 1px solid var(--encre); padding: 0 8px; text-align: center; color: var(--gris); }
.st li:first-child { border-left: none; }
.st li.cu { background: var(--chaud); color: #fff; font-weight: 500; }
.st li.ici { background: var(--encre); color: #fff; font-weight: 500; }
.st li.hz { background: repeating-linear-gradient(135deg, var(--hachure) 0 2px, transparent 2px 8px); color: #334155; }
.st li button { background: none; border: none; color: var(--froid-texte); text-transform: uppercase; font-size: 13px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; min-height: 42px; width: 100%; justify-content: center; }
.st li button:hover { text-decoration: underline; }
.ru { position: relative; height: 10px; background: repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 25%) 0 0/100% 10px no-repeat, repeating-linear-gradient(90deg, var(--gris-clair) 0 1px, transparent 1px 2.5%) 0 0/100% 5px no-repeat; }
.ru i { position: absolute; top: 0; height: 2px; transition: width .4s, left .4s; }
.ru b { position: absolute; top: -3px; height: 15px; border-left: 2px solid var(--chaud); transition: left .4s; }

/* Disposition : discussion à gauche, panneau à droite */
.corps { display: flex; flex-wrap: wrap; align-items: stretch; padding-left: 0; padding-right: 0; min-height: calc(100vh - 170px); }
#discussion { flex: 1 1 340px; max-width: 420px; min-width: 0; border-right: 1px solid var(--encre); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; align-self: flex-start; }
#fil { flex: 1 1 0; padding: 32px 32px 24px 40px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; min-height: 0; }
#fil > * { flex-shrink: 0; }
#form { padding: 0 32px 32px 40px; }
.saisie { display: flex; border: 1px solid var(--encre); }
.saisie input { flex-grow: 1; min-width: 0; min-height: 46px; border: none; background: transparent; font: inherit; font-size: 14px; color: var(--encre); padding: 0 16px; }
.saisie input:focus { outline: none; }
.saisie:focus-within { outline: 2px solid var(--froid); outline-offset: 2px; }
.saisie button { width: 48px; border: none; border-left: 1px solid var(--encre); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#panneau { flex: 999 1 560px; min-width: 0; padding: 40px 40px 56px; display: flex; flex-direction: column; gap: 28px; }
#panneau:focus { outline: none; }
.pied { padding-top: 16px; padding-bottom: 24px; border-top: 1px solid var(--encre); }
.onglets { display: none; }

/* Transcript : pas de bulles. Un clic ne ressemble jamais à un texte tapé. */
.msg { display: flex; flex-direction: column; gap: 6px; }
.who { font-size: 12px; font-weight: 500; text-transform: uppercase; }
.vous .who { color: var(--gris); }
.tx { margin: 0; font-size: 15px; line-height: 1.55; }
.vous .tx { font-weight: 500; }
.ev, .ac { font-size: 12px; text-transform: uppercase; display: flex; gap: 10px; align-items: center; line-height: 1.4; }
.ev { color: var(--gris); }
.ev:before { content: ""; width: 7px; height: 7px; border: 1px solid var(--gris); flex-shrink: 0; }
.ac { color: var(--froid-texte); }
.ac:before { content: ""; width: 8px; height: 8px; background: var(--froid); flex-shrink: 0; }
.ac.encours { color: var(--chaud); }
.ac.encours:before { background: var(--chaud); animation: pulse 1s infinite alternate; }
.ac.refus { color: var(--chaud-texte); }
.ac.refus:before { background: none; border: 1px solid var(--chaud-texte); }
@keyframes pulse { to { opacity: .25; } }

/* Règles graduées */
.regle-ans { position: relative; height: 18px; background: repeating-linear-gradient(90deg, var(--gris-clair) 0 1px, transparent 1px 10%) 0 100%/100% 6px no-repeat; border-bottom: 1px solid var(--encre); }
.regle-ans b, .regle-km b { position: absolute; bottom: 0; height: 100%; border-left: 2px solid var(--encre); }
.regle-km { position: relative; height: 16px; background: repeating-linear-gradient(90deg, var(--gris-clair) 0 1px, transparent 1px 6.667%) 0 100%/100% 5px no-repeat; border-bottom: 1px solid var(--encre); }

/* Diagnostic */
.tuile { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.barres { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 220px; border-bottom: 1px solid var(--encre); }
.barres > span { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; }
.bar { border: 1px solid var(--encre); border-bottom: none; display: block; }
.bar.hot { background: var(--chaud); border-color: var(--chaud); }
.bar.estime { border-style: dashed; }
.mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; font-size: 11px; color: var(--gris); text-align: center; text-transform: uppercase; }
.a-confirmer { border: 1px solid var(--chaud); }
.a-confirmer > .bandeau { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--chaud); color: #fff; }
.valeurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; padding: 24px 28px; align-items: end; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ input, .champ select { font: inherit; font-size: 24px; font-weight: 300; border: none; border-bottom: 1px solid var(--encre); background: transparent; color: var(--encre); padding: 4px 0; width: 100%; border-radius: 0; }

/* Travaux */
.table-defile { overflow-x: auto; }
.table-defile > div { min-width: 760px; }
.rang { display: grid; grid-template-columns: 28px 72px minmax(180px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(180px, 1.6fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--encre); align-items: center; }
.rang.tete-table { padding: 0 0 10px; border-top: none; font-size: 12px; text-transform: uppercase; color: var(--gris); }
.rang .montant { font-size: 26px; font-weight: 300; letter-spacing: -0.03em; }
.ck { width: 20px; height: 20px; accent-color: var(--chaud); margin: 0; }
.hyp { display: grid; grid-template-columns: 28px 72px 1fr; gap: 20px; padding: 0 0 20px; }
.hyp-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; font-size: 13px; line-height: 1.5; }
.variante { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(180px, 1.6fr); gap: 20px; padding: 14px 0 10px; align-items: center; }
.variante + .variante { border-top: 1px dashed var(--gris-clair); padding-top: 10px; }
.bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 24px; background: var(--encre); color: #fff; }
.bas .bt:not(.pr) { color: #fff; border-color: #fff; }
.alerte { border: 1px dashed var(--encre); padding: 16px 20px; font-size: 14px; line-height: 1.5; }

/* Revenus */
.op { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; cursor: pointer; min-height: 150px; }
.op.choisi { background: var(--encre) !important; color: #fff; }
.op.choisi .s { color: var(--filet-clair); }
.rd { width: 18px; height: 18px; accent-color: var(--encre); margin: 0; }
.refus { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px dashed var(--encre); cursor: pointer; margin-top: 8px; }
.refus.choisi { background: var(--encre); color: #fff; }
.echelle { height: 8px; background: repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 25%) 0 0/100% 8px no-repeat, repeating-linear-gradient(90deg, var(--gris-clair) 0 1px, transparent 1px 5%) 0 0/100% 4px no-repeat; }

/* Plan */
.reste { border: 1px solid var(--encre); padding: 20px 20px 20px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.geste { padding: 26px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.geste dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.geste dd { margin: 0; }
.ampleur { display: flex; flex-direction: column; gap: 18px; padding-top: 32px; border-top: 1px dashed var(--encre); }
.etiquette { font-size: 12px; text-transform: uppercase; border: 1px solid var(--encre); padding: 6px 12px; }

/* Artisans */
.carte { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.carte h2 { margin: 0; font-size: 16px; font-weight: 500; }
.sq { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--encre); vertical-align: -1px; }
.sq.plein { background: var(--froid); border-color: var(--froid); }
.sl { font-size: 14px; text-transform: uppercase; min-height: 48px; padding: 0 14px; border-radius: 2px; border: 1px solid var(--encre); background: transparent; cursor: pointer; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.sl:hover { background: #F1F5F9; }
.sl[aria-pressed="true"] { background: var(--chaud); border-color: var(--chaud); color: #fff; }
.ph { border: 1px dashed var(--gris-clair); min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: var(--gris-clair); }
.suite { text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 24px; border: none; cursor: pointer; min-height: 180px; }
.suite:hover { background: #F1F5F9 !important; }

/* Récapitulatif */
.recap { width: 100%; max-width: 820px; border: 1px solid var(--encre); }
.recap-date { padding: 28px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--encre); }
.recap-rangs { padding: 0 32px; }
.recap-rangs .tr { grid-template-columns: minmax(150px, 0.7fr) minmax(0, 2fr); line-height: 1.5; }
.recap-rangs .tr:first-child { border-top: none; }
.recap-actions { display: flex; flex-wrap: wrap; align-items: stretch; border-top: 1px solid var(--encre); }
.recap-actions .bt { border-radius: 0; }

@media (max-width: 1100px) {
  .h1 { font-size: 40px; }
}
/* Mobile : la bascule discussion et panneau en onglets (M1, M2) */
@media (max-width: 800px) {
  .cadre { padding-left: 16px; padding-right: 16px; }
  .nav, .client { display: none; }
  .tete-in { min-height: 56px; }
  .barre-in { padding-top: 12px; padding-bottom: 12px; gap: 10px 16px; }
  .barre-in > .pile2 { display: none; }
  .thermo { flex-basis: 100%; order: 2; }
  .st li { font-size: 11px; padding: 0 4px; }
  .st li .long { display: none; }
  .onglets { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 16px 0; border: 1px solid var(--encre); }
  .onglets button { font-size: 13px; text-transform: uppercase; min-height: 44px; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .onglets button[aria-selected="true"] { background: var(--encre); color: #fff; font-weight: 500; }
  .point { width: 7px; height: 7px; background: var(--chaud); display: inline-block; }
  .corps { padding: 0; min-height: 0; }
  #discussion { max-width: none; flex-basis: 100%; border-right: none; position: static; height: auto; }
  #fil { padding: 20px 16px; min-height: 50vh; overflow: visible; }
  #form { padding: 0 16px 20px; position: sticky; bottom: 0; background: var(--fond); padding-top: 8px; }
  #panneau { flex-basis: 100%; padding: 24px 16px 40px; }
  body[data-onglet="discussion"] #panneau { display: none; }
  body[data-onglet="panneau"] #discussion { display: none; }
  .h1 { font-size: 32px; }
  .h1-leger { font-size: 40px; }
  .reste { padding: 16px; }
  .geste { grid-template-columns: 1fr; }
  .recap-date, .recap-rangs { padding-left: 16px; padding-right: 16px; }
  .recap-rangs .tr { grid-template-columns: 1fr; gap: 4px; }
  .L.tres-grand { font-size: 72px !important; }
}