/* =====================================================================
   ClarityEdge — feuille de style unique.
   Système de design : une palette, une échelle typographique (5 tailles),
   une échelle d'espacement, trois rayons, trois ombres. Rien d'autre.
   Thème clair : lisible en plein soleil sur un chantier.
   ===================================================================== */

:root{
  /* ---- couleurs : bleu profond, bleu-cyan clair, blanc, gris neutres ---- */
  --encre:#0B2545;          /* texte fort, titres, montants */
  --encre-2:#3D5372;        /* texte secondaire */
  --gris:#6B7C93;           /* texte discret */
  --gris-clair:#98A6B8;
  --ligne:#E3E9F0;          /* filets, bordures */
  --ligne-forte:#CBD6E2;
  --fond:#F4F7FA;           /* fond d'application */
  --surface:#FFFFFF;        /* cartes */
  --surface-2:#F7FAFC;      /* champs, zones secondaires */

  --bleu:#124E78;           /* couleur de marque */
  --bleu-fonce:#0C3A5C;
  --bleu-clair:#E8F1F8;     /* aplat doux */
  --cyan:#1E88A8;           /* accent vif, états actifs */
  --cyan-clair:#E4F3F7;

  --plus:#15803D;           /* impact positif */
  --moins:#B4232B;          /* impact négatif, danger */
  --ambre:#A85C00;          /* à vérifier, prix manquant */
  --ambre-clair:#FDF4E3;
  --vert-clair:#EAF6EE;
  --rouge-clair:#FCECEC;

  /* ---- typographie : 5 tailles, pas une de plus ---- */
  --t-xs:12.5px;   /* méta, horodatage */
  --t-s:14px;      /* secondaire */
  --t-m:15.5px;    /* corps, base de lecture */
  --t-l:18px;      /* titres de section */
  --t-xl:24px;     /* sous-total */
  --t-2xl:30px;    /* total du devis */

  /* ---- espacement ---- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;

  /* ---- rayons ---- */
  --r-s:10px; --r-m:14px; --r-l:20px; --r-rond:999px;

  /* ---- ombres ---- */
  --o1:0 1px 2px rgba(11,37,69,.05), 0 1px 3px rgba(11,37,69,.07);
  --o2:0 4px 12px rgba(11,37,69,.08), 0 1px 3px rgba(11,37,69,.06);
  --o3:0 -6px 28px rgba(11,37,69,.14);

  /* ---- gabarit ---- */
  --nav:66px;
  --safe:env(safe-area-inset-bottom,0px);
  --haut:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  font-size:var(--t-m);line-height:1.5;
  background:var(--fond);color:var(--encre);
  overflow:hidden;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit}
.screen{height:100%;display:flex;flex-direction:column}

/* icônes : un seul jeu, dessiné, jamais d'emoji dans l'interface */
.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;
   stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-4px}
.i.s{width:16px;height:16px;vertical-align:-3px}
.i.l{width:26px;height:26px;vertical-align:-6px}

/* ---------------------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  background:var(--surface);color:var(--encre);border:1px solid var(--ligne-forte);
  border-radius:var(--r-s);padding:0 var(--e4);min-height:46px;font-size:var(--t-s);
  font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:var(--o1);
  transition:background .12s,border-color .12s,transform .06s;
}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--bleu);border-color:var(--bleu);color:#fff}
.btn.primary:hover{background:var(--bleu-fonce)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--bleu)}
.btn.ghost:hover{background:var(--bleu-clair)}
.btn.danger{color:var(--moins);border-color:#E7C3C5}
.btn.danger:hover{background:var(--rouge-clair)}
.btn.small{min-height:44px;padding:0 var(--e3);font-size:var(--t-xs)}
.btn.big{min-height:54px;font-size:var(--t-m)}
.btn.bloc{width:100%}
.btn:disabled{opacity:.45;box-shadow:none;cursor:default}
.iconBtn{
  background:transparent;border:none;border-radius:var(--r-s);
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--encre-2);
}
.iconBtn:hover{background:var(--bleu-clair);color:var(--bleu)}
.row{display:flex;gap:var(--e2);align-items:center}
.row.wrap{flex-wrap:wrap}
.pousse{margin-left:auto}

/* ---------------------------------------------------------------- champs */
input,textarea,select{
  font:inherit;font-size:16px;              /* 16px : empêche le zoom automatique d'iOS */
  background:var(--surface);border:1px solid var(--ligne-forte);color:var(--encre);
  border-radius:var(--r-s);padding:12px var(--e3);width:100%;min-height:48px;
}
input::placeholder,textarea::placeholder{color:var(--gris-clair)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--cyan);outline-offset:-1px;border-color:var(--cyan)}
label{display:block;font-size:var(--t-s);font-weight:600;color:var(--encre-2);margin:var(--e4) 0 var(--e1)}
label input,label select,label textarea{margin-top:var(--e1);font-weight:400}
.aide{font-size:var(--t-xs);color:var(--gris);line-height:1.5}

/* ---------------------------------------------------------------- connexion */
#login{align-items:center;justify-content:center;padding:var(--e5);background:
  radial-gradient(1200px 600px at 50% -10%, #EAF3FA 0%, var(--fond) 60%)}
.loginBox{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--r-l);padding:var(--e6) var(--e5);box-shadow:var(--o2)}
.marque{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:var(--e1)}
.marque svg{width:30px;height:30px}
.logo{font-size:var(--t-xl);font-weight:700;letter-spacing:-.02em;color:var(--encre)}
.sub{color:var(--gris);text-align:center;font-size:var(--t-s);margin-bottom:var(--e5)}
.loginBox .btn{width:100%;margin-top:var(--e5)}
.msgErr{color:var(--moins);font-size:var(--t-s);min-height:20px;margin-top:var(--e3);text-align:center}
.hint{color:var(--gris);font-size:var(--t-xs);text-align:center;margin-top:var(--e5);line-height:1.6}

/* ---------------------------------------------------------------- en-tête */
#top{
  display:flex;align-items:center;gap:var(--e2);padding:var(--e2) var(--e3);
  padding-top:calc(var(--e2) + var(--haut));
  background:var(--surface);border-bottom:1px solid var(--ligne);z-index:20;
}
#topTitle{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
#topName{font-size:var(--t-m);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
#topMeta{font-size:var(--t-xs);color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topTotal{font-weight:700;font-size:var(--t-m);white-space:nowrap;color:var(--encre);
  background:var(--bleu-clair);border-radius:var(--r-s);padding:6px 10px}

/* bandeau d'état (hors ligne, licence) */
#banner:empty{display:none}
#banner{display:flex;gap:var(--e2);align-items:flex-start;padding:10px var(--e4);
  font-size:var(--t-s);background:var(--ambre-clair);color:var(--ambre);
  border-bottom:1px solid #F0E0C4;line-height:1.45}
#banner.off{background:var(--surface-2);color:var(--encre-2);border-color:var(--ligne)}
#banner .i{margin-top:2px}

/* ---------------------------------------------------------------- vues */
#main{flex:1;min-height:0;position:relative;background:var(--fond)}
.view{display:none;position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--nav) + var(--safe))}
.view.active{display:flex;flex-direction:column}
.viewHead{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  padding:var(--e5) var(--e4) var(--e3)}
.viewHead h2{font-size:var(--t-l);font-weight:700;letter-spacing:-.01em}
.sectionTitre{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);padding:var(--e5) var(--e4) var(--e2)}
.vide{color:var(--gris);text-align:center;padding:var(--e6) var(--e5);line-height:1.7;font-size:var(--t-s)}
.vide b{display:block;color:var(--encre);font-size:var(--t-m);margin-bottom:var(--e2)}

/* ---------------------------------------------------------------- accueil */
#view-accueil{padding-bottom:calc(var(--nav) + var(--safe))}
.bonjour{padding:var(--e5) var(--e4) 0}
.bonjour h1{font-size:var(--t-xl);font-weight:700;letter-spacing:-.02em}
.bonjour p{color:var(--gris);font-size:var(--t-s);margin-top:2px}

.hero{margin:var(--e4);background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--r-m);box-shadow:var(--o2);overflow:hidden}
.hero .haut{padding:var(--e4) var(--e4) var(--e3);border-bottom:1px solid var(--ligne)}
.hero .etiq{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.hero h3{font-size:var(--t-l);font-weight:700;margin-top:var(--e1);line-height:1.3}
.hero .cli{color:var(--gris);font-size:var(--t-s);margin-top:2px}
.hero .chiffres{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e3);
  padding:var(--e3) var(--e4)}
.hero .montant{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.hero .unite{font-size:var(--t-xs);color:var(--gris);font-weight:600;margin-left:4px}
.hero .lignes{font-size:var(--t-xs);color:var(--gris);text-align:right}
.hero .actions{display:flex;gap:var(--e2);padding:0 var(--e4) var(--e4)}
.hero .actions .btn{flex:1}

.pcard{margin:0 var(--e4) var(--e2);background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--r-m);padding:var(--e3) var(--e4);cursor:pointer;box-shadow:var(--o1);
  display:grid;grid-template-columns:1fr auto;gap:2px var(--e3);align-items:center}
.pcard:hover{border-color:var(--ligne-forte);background:var(--surface-2)}
.pcard.active{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),var(--o1)}
.pcard b{font-size:var(--t-m);font-weight:650;grid-column:1}
.pcard .m{color:var(--gris);font-size:var(--t-xs);grid-column:1}
.pcard .t{grid-column:2;grid-row:1/3;font-weight:700;font-size:var(--t-m);text-align:right}
.pcard .puce{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:6px;vertical-align:1px}

.compte{margin:auto var(--e4) var(--e4);padding-top:var(--e4);border-top:1px solid var(--ligne);
  color:var(--gris);font-size:var(--t-xs);display:flex;justify-content:space-between;
  align-items:center;gap:var(--e3)}

/* ---------------------------------------------------------------- assistant */
/* la vue garde sa réserve basse : sans elle, la barre de saisie et le micro
   passeraient SOUS la barre de navigation et deviendraient inatteignables. */
#chatLog{flex:1;overflow-y:auto;padding:var(--e4) var(--e3) var(--e2);
  display:flex;flex-direction:column;gap:var(--e2)}
.msg{max-width:88%;padding:10px 14px;border-radius:var(--r-m);font-size:var(--t-m);
  line-height:1.5;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:var(--bleu);color:#fff;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--ligne);
  border-bottom-left-radius:5px;box-shadow:var(--o1)}
.msg.bot b{font-weight:650}
.msg .meta{display:block;margin-top:6px;font-size:var(--t-xs);color:var(--gris)}
/* Bouton d'action secondaire. Il sert dans les messages ET dans le bandeau d'alerte :
   la règle ne doit donc pas être limitée aux messages, sinon celui du bandeau apparaît nu. */
.lien{display:inline-flex;align-items:center;gap:6px;margin-top:var(--e2);margin-right:var(--e2);
  border:1px solid var(--ligne-forte);border-radius:var(--r-s);padding:0 var(--e3);min-height:44px;
  font-size:var(--t-s);font-weight:600;color:var(--bleu);text-decoration:none;background:var(--surface);
  cursor:pointer;white-space:nowrap}
.lien:hover{background:var(--bleu-clair)}
#banner .lien{border-color:#E0CBA0;color:var(--ambre);background:#fff}
#banner .lien:hover{background:var(--ambre-clair)}

/* réflexion : trois points, jamais de texte technique */
.reflexion{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--ligne);border-radius:var(--r-m);border-bottom-left-radius:5px;box-shadow:var(--o1)}
.reflexion i{width:7px;height:7px;border-radius:50%;background:var(--gris-clair);animation:respire 1.3s infinite}
.reflexion i:nth-child(2){animation-delay:.18s}
.reflexion i:nth-child(3){animation-delay:.36s}
@keyframes respire{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* squelette de chargement : la page paraît prête avant de l'être */
.sk{background:linear-gradient(90deg,var(--surface-2) 25%,#EEF3F8 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:glisse 1.3s infinite;border-radius:var(--r-s);height:14px}
@keyframes glisse{0%{background-position:100% 0}100%{background-position:0 0}}

/* démarrage rapide, une seule fois */
#depart{margin:0 var(--e3) var(--e2);background:var(--bleu-clair);border:1px solid #CFE2F0;
  border-radius:var(--r-m);padding:var(--e4);font-size:var(--t-s);line-height:1.6}
#depart:empty{display:none}
#depart h4{font-size:var(--t-m);font-weight:700;margin-bottom:var(--e2)}
#depart ul{margin:0 0 var(--e3) 18px}
#depart li{margin-bottom:4px}

#chips{display:flex;gap:var(--e2);overflow-x:auto;padding:var(--e1) var(--e3) var(--e2);
  flex:none;scrollbar-width:none}
#chips::-webkit-scrollbar{display:none}
#chips:empty{display:none}
.chip{flex:none;font-size:var(--t-s);padding:0 var(--e4);min-height:42px;border:1px solid var(--ligne-forte);
  border-radius:var(--r-rond);color:var(--encre-2);background:var(--surface);cursor:pointer;
  display:inline-flex;align-items:center;box-shadow:var(--o1)}
.chip:hover{background:var(--bleu-clair);border-color:var(--bleu);color:var(--bleu)}

/* ---- état du micro : repos · écoute · transcription · traitement · vérification ---- */
#voiceBar:empty{display:none}
#voiceBar{margin:0 var(--e3) var(--e2);border-radius:var(--r-m);padding:var(--e3) var(--e4);
  flex:none;border:1px solid var(--ligne);background:var(--surface);box-shadow:var(--o1)}
#voiceBar .lbl{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris);display:flex;align-items:center;gap:6px}
#voiceBar .txt{font-size:var(--t-m);margin:var(--e2) 0 2px;color:var(--encre);line-height:1.45}
#voiceBar .raw{font-size:var(--t-xs);color:var(--gris);line-height:1.5}
#voiceBar .acts{display:flex;gap:var(--e2);margin-top:var(--e3)}
#voiceBar .acts .btn{flex:1;min-height:46px}
#voiceBar.ecoute{border-color:var(--moins);background:var(--rouge-clair)}
#voiceBar.ecoute .lbl{color:var(--moins)}
#voiceBar.travail{border-color:var(--cyan);background:var(--cyan-clair)}
#voiceBar.travail .lbl{color:var(--cyan)}
#voiceBar.fait{border-color:var(--cyan);background:var(--surface);box-shadow:0 0 0 1px var(--cyan),var(--o1)}
#voiceBar.fait .lbl{color:var(--cyan)}
#voiceBar.souci{border-color:#EFD9AE;background:var(--ambre-clair)}
#voiceBar.souci .lbl{color:var(--ambre)}

/* onde sonore pendant l'écoute */
.onde{display:flex;align-items:center;gap:3px;height:24px;margin-top:var(--e2)}
.onde i{width:3px;border-radius:2px;background:var(--moins);animation:onde .9s infinite ease-in-out}
.onde i:nth-child(1){animation-delay:0s}.onde i:nth-child(2){animation-delay:.1s}
.onde i:nth-child(3){animation-delay:.2s}.onde i:nth-child(4){animation-delay:.3s}
.onde i:nth-child(5){animation-delay:.4s}.onde i:nth-child(6){animation-delay:.5s}
.onde i:nth-child(7){animation-delay:.6s}
@keyframes onde{0%,100%{height:6px}50%{height:22px}}

/* ---- carte de confirmation : ce que Michael lit avant de dire oui ---- */
#pending:empty{display:none}
#pending{margin:0 var(--e3) var(--e2);background:var(--surface);border:1px solid var(--cyan);
  border-radius:var(--r-m);flex:none;box-shadow:0 0 0 1px var(--cyan),var(--o2);overflow:hidden}
/* Une carte de confirmation ne doit JAMAIS cacher ce qu'elle demande d'approuver.
   Tout ce qui suit est écrit pour que rien ne puisse être rogné, quelle que soit la
   largeur de l'écran ou la longueur des libellés et des montants. */
.pAction{padding:var(--e3) var(--e4) var(--e2);max-height:42vh;overflow-y:auto}
.pAction .quoi{font-size:var(--t-l);font-weight:700;line-height:1.3;letter-spacing:-.01em;
  overflow-wrap:anywhere}
.pAction .ou + .quoi,.pAction .quoi + .quoi{margin-top:10px;padding-top:10px;border-top:1px solid var(--ligne)}
.pAction .ou{font-size:var(--t-s);color:var(--gris);margin-top:2px;overflow-wrap:anywhere}
.pAction .suppose{font-size:var(--t-xs);color:var(--ambre);margin-top:6px;overflow-wrap:anywhere}

/* Avant / Après / Impact : une ligne chacun, intitulé à gauche, montant à droite.
   Trois colonnes côte à côte ne peuvent pas se réduire sous la largeur d'un montant :
   sur un écran de 360 px, « IMPACT » et son chiffre étaient coupés. */
.pChiffres{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  background:var(--surface-2);padding:var(--e2) var(--e4)}
.pChiffres div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
  padding:5px 0;border-bottom:1px solid var(--ligne)}
.pChiffres div:last-child{border-bottom:none}
.pChiffres .k{font-size:var(--t-xs);color:var(--gris);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;flex:none}
.pChiffres .v{font-size:var(--t-m);font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pChiffres .v.plus{color:var(--plus)}
.pChiffres .v.moins{color:var(--moins)}
.pChiffres div:last-child .v{font-size:var(--t-l)}

.pNote{padding:var(--e2) var(--e4) 0;font-size:var(--t-xs);color:var(--ambre);overflow-wrap:anywhere}
/* L'action principale occupe toute la largeur ; les deux autres se partagent la ligne
   suivante. Sur une seule ligne, « Annuler » débordait de 7 px. */
.pActs{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2);padding:var(--e3) var(--e4)}
.pActs .btn{min-height:50px;min-width:0;padding:0 var(--e3);white-space:normal;line-height:1.2}
.pActs .btn.primary{grid-column:1/-1}

/* ---- saisie + micro : une seule barre, un seul bouton ---- */
#inputRow{display:flex;gap:var(--e2);padding:var(--e2) var(--e3);
  border-top:1px solid var(--ligne);background:var(--surface);flex:none;align-items:flex-end}
#chatInput{flex:1;min-height:52px;max-height:120px;resize:none;border-radius:var(--r-m);
  padding:14px var(--e4);background:var(--surface-2);font-size:16px}
#btnVoice{
  flex:none;min-width:58px;height:52px;border:none;border-radius:var(--r-m);cursor:pointer;
  background:var(--bleu);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:var(--t-s);font-weight:700;padding:0 var(--e4);box-shadow:0 2px 10px rgba(18,78,120,.28);
  transition:background .15s,box-shadow .15s;
}
#btnVoice:hover{background:var(--bleu-fonce)}
#btnVoice .i{width:22px;height:22px}
#btnVoice.enregistre{background:var(--moins);box-shadow:0 2px 14px rgba(180,35,43,.35);animation:battement 1.4s infinite}
@keyframes battement{0%,100%{box-shadow:0 2px 14px rgba(180,35,43,.35)}50%{box-shadow:0 2px 22px rgba(180,35,43,.6)}}

/* ---------------------------------------------------------------- devis */
#devisTete{position:sticky;top:0;z-index:6;background:var(--fond);padding:var(--e3) var(--e3) 0}
.resume{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-m);
  box-shadow:var(--o2);overflow:hidden}
.resume .corps{padding:var(--e4)}
.resume .k{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.resume .total{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin-top:2px}
.resume .ligne2{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);margin-top:var(--e2);
  font-size:var(--t-s);color:var(--encre-2)}
.resume .ligne2 b{font-weight:650;color:var(--encre)}
.etiquette{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:650;
  border-radius:var(--r-rond);padding:3px 10px;background:var(--bleu-clair);color:var(--bleu)}
.etiquette.att{background:var(--ambre-clair);color:var(--ambre)}
.etiquette.ok{background:var(--vert-clair);color:var(--plus)}
.etiquette.neutre{background:var(--surface-2);color:var(--gris);border:1px solid var(--ligne)}

#versions{display:flex;gap:4px;padding:var(--e2) var(--e4) var(--e3);overflow-x:auto;scrollbar-width:none}
#versions::-webkit-scrollbar{display:none}
#versions button{flex:none;min-height:44px;padding:0 var(--e4);border-radius:var(--r-rond);
  border:1px solid var(--ligne-forte);background:var(--surface);font-size:var(--t-s);font-weight:650;
  color:var(--encre-2);cursor:pointer}
#versions button.active{background:var(--encre);border-color:var(--encre);color:#fff}

/* deux rangées : l'action principale seule, les trois autres dessous.
   Sur une seule rangée, les libellés se faisaient couper (« De… », « An… »). */
/* Les libellés disent l'action en entier. Sur un écran étroit ils passent à la ligne
   plutôt que d'être coupés : « Revenir en a… » n'explique plus rien. */
#devisActions{display:grid;grid-template-columns:1fr 1fr 52px;gap:var(--e2);padding:0 var(--e3) var(--e3)}
#devisActions .btn{min-width:0;padding:0 10px;white-space:normal;line-height:1.15;min-height:52px}
#devisActions .btn span{overflow:visible}
#devisActions #aPdf{grid-column:1/-1;min-height:48px}
#devisActions #aPlus{padding:0}

#alerts{padding:0 var(--e3);display:flex;flex-direction:column;gap:var(--e2)}
#alerts:empty{display:none}
.alert{display:flex;gap:10px;align-items:flex-start;background:var(--ambre-clair);border:1px solid #F0E0C4;
  color:var(--ambre);border-radius:var(--r-m);padding:var(--e3) var(--e4);font-size:var(--t-s);line-height:1.5}
.alert .i{margin-top:2px;flex:none}
.alert.info{background:var(--bleu-clair);border-color:#CFE2F0;color:var(--bleu)}
.alert.ok{background:var(--vert-clair);border-color:#CBE7D4;color:var(--plus)}
.alert b{font-weight:700}
.alert .detail{color:var(--encre-2);font-weight:400;margin-top:6px}

#quote{padding:var(--e3)}
.lot{margin-bottom:var(--e5)}
.lotHead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3);
  padding:0 var(--e1) var(--e2);font-weight:700;font-size:var(--t-l);letter-spacing:-.01em}
.lotHead .tot{font-size:var(--t-m);white-space:nowrap}
.lotHead .etiquette{font-weight:650;vertical-align:2px;margin-left:2px}
.subHead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3);
  padding:var(--e3) var(--e1) 6px;font-weight:650;font-size:var(--t-s);color:var(--encre-2)}
.subHead .tot{color:var(--encre);white-space:nowrap}

.line{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-m);
  padding:var(--e3) var(--e4);margin-bottom:var(--e2);cursor:pointer;box-shadow:var(--o1);
  display:grid;grid-template-columns:1fr auto;gap:3px var(--e3)}
.line:hover{border-color:var(--ligne-forte);background:var(--surface-2)}
.line.hl{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),var(--o1)}
.line .d{font-size:var(--t-m);font-weight:600;grid-column:1;line-height:1.35}
.line .q{font-size:var(--t-s);color:var(--gris);grid-column:1}
.line .tot{font-weight:700;text-align:right;grid-column:2;grid-row:1/3;align-self:center;
  font-size:var(--t-m);white-space:nowrap}
.line .etiquette{margin-left:6px;vertical-align:1px}
.line .aCompleter{grid-column:1/-1;margin-top:var(--e2)}
.line .aCompleter .btn{width:100%}
.statut{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;
  background:var(--gris-clair)}
.statut.confirmed{background:var(--plus)}
.statut.proposed{background:var(--cyan)}
.statut.check{background:var(--ambre)}
.statut.error{background:var(--moins)}

#totals{padding:var(--e4) var(--e4) var(--e5);border-top:1px solid var(--ligne);background:var(--surface);
  display:grid;grid-template-columns:1fr auto;gap:var(--e2) var(--e4);font-size:var(--t-s)}
#totals .k{color:var(--gris)}
#totals .fort{font-size:var(--t-l);font-weight:700}

/* marge : simple d'abord, détail replié */
.marge{margin:0 var(--e3) var(--e3);background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--r-m);box-shadow:var(--o1);overflow:hidden}
.marge .tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);padding:var(--e3) var(--e4)}
.marge .tete .k{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.marge .val{font-size:var(--t-xl);font-weight:700;line-height:1.1}
.marge .detail{border-top:1px solid var(--ligne);padding:var(--e3) var(--e4);background:var(--surface-2);
  font-size:var(--t-s);color:var(--encre-2);line-height:1.6}
.marge .detail div{padding:3px 0}
.stepper{display:flex;align-items:center;gap:var(--e2)}
.stepper input{width:82px;text-align:center;font-weight:700;min-height:46px;padding:0}
.stepper .btn{min-width:46px;padding:0;font-size:var(--t-l);font-weight:600}

/* ---------------------------------------------------------------- fiche projet */
#ficheForm{padding:0 var(--e4) var(--e6)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e3)}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
details.bloc{border:1px solid var(--ligne);border-radius:var(--r-m);background:var(--surface);
  margin-top:var(--e4);box-shadow:var(--o1)}
details.bloc>summary{cursor:pointer;list-style:none;padding:var(--e4);font-weight:650;font-size:var(--t-s);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e2)}
details.bloc>summary::-webkit-details-marker{display:none}
details.bloc>summary .i{transition:transform .15s;color:var(--gris)}
details.bloc[open]>summary .i{transform:rotate(180deg)}
details.bloc .dedans{padding:0 var(--e4) var(--e4)}
details.bloc .dedans label:first-child{margin-top:0}

/* ---------------------------------------------------------------- navigation */
#nav{display:flex;background:var(--surface);border-top:1px solid var(--ligne);
  padding-bottom:var(--safe);position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--nav) + var(--safe));z-index:15;box-shadow:0 -1px 0 rgba(11,37,69,.04)}
#nav button{flex:1;background:transparent;border:none;color:var(--gris);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  position:relative;font-size:var(--t-xs);font-weight:600;padding-top:3px}
#nav button span{font-size:12px}
#nav button .i{width:23px;height:23px}
#nav button.active{color:var(--bleu);font-weight:700}
#nav button.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--bleu)}
#nav .pastille{position:absolute;top:6px;left:50%;margin-left:6px;min-width:16px;height:16px;
  border-radius:var(--r-rond);background:var(--ambre);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ---------------------------------------------------------------- menu, feuille, message court */
.menu{position:absolute;right:var(--e3);top:58px;background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--r-m);padding:var(--e2);z-index:40;min-width:268px;box-shadow:var(--o2)}
.menu button{display:flex;align-items:center;gap:var(--e3);width:100%;text-align:left;background:transparent;
  border:none;padding:12px var(--e3);font-size:var(--t-s);font-weight:600;border-radius:var(--r-s);cursor:pointer;
  min-height:46px}
.menu button:hover{background:var(--bleu-clair);color:var(--bleu)}
.menu button.danger{color:var(--moins)}
.menu button.danger:hover{background:var(--rouge-clair)}
.menu hr{border:none;border-top:1px solid var(--ligne);margin:var(--e2) 0}

.sheet{position:fixed;inset:0;background:rgba(11,37,69,.45);z-index:50;display:flex;
  align-items:flex-end;justify-content:center;backdrop-filter:blur(2px)}
.sheet[hidden],.menu[hidden]{display:none!important}
.sheetBox{background:var(--surface);border-radius:var(--r-l) var(--r-l) 0 0;width:100%;max-width:660px;
  max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--o3);animation:monte .18s ease-out}
@keyframes monte{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sheetHead{display:flex;justify-content:space-between;align-items:center;gap:var(--e3);
  padding:var(--e4);border-bottom:1px solid var(--ligne)}
.sheetHead b{font-size:var(--t-l);font-weight:700;letter-spacing:-.01em}
#sheetBody{padding:var(--e4) var(--e4) calc(var(--e5) + var(--safe));overflow-y:auto;font-size:var(--t-s);line-height:1.6}
#sheetBody .btn{margin-top:var(--e2)}
#sheetBody table{width:100%;border-collapse:collapse;font-size:var(--t-s)}
#sheetBody td,#sheetBody th{padding:10px 6px;border-bottom:1px solid var(--ligne);text-align:left;vertical-align:top}
#sheetBody td.n{text-align:right;white-space:nowrap;font-weight:650}
#sheetBody tr[data-ref]{cursor:pointer}
#sheetBody tr[data-ref]:hover{background:var(--surface-2)}
.enTete{color:var(--gris);font-size:var(--t-xs);line-height:1.55}
.aCompleterTexte{color:var(--ambre);font-weight:700}

#toast{position:fixed;top:calc(var(--e3) + var(--haut));left:50%;transform:translateX(-50%);
  background:var(--encre);color:#fff;border-radius:var(--r-s);padding:12px var(--e4);
  font-size:var(--t-s);font-weight:600;display:none;max-width:92%;z-index:70;box-shadow:var(--o2)}

/* ======================================================================
   Ordinateur : la place en plus sert à VOIR, pas à entasser.
   Gauche : projets · Centre : assistant · Droite : devis + total collant.
   ====================================================================== */
@media (min-width:980px){
  #nav{display:none}
  .view{padding-bottom:0;position:static;display:flex!important;flex-direction:column;min-height:0}
  #main{display:grid;grid-template-columns:300px minmax(380px,1fr) minmax(440px,1.25fr);
    grid-template-areas:'accueil chat devis'}
  #view-accueil{grid-area:accueil;border-right:1px solid var(--ligne);overflow-y:auto;background:var(--surface)}
  #view-chat{grid-area:chat;border-right:1px solid var(--ligne);background:var(--fond)}
  #view-devis{grid-area:devis;overflow-y:auto}
  #view-fiche{position:fixed;inset:64px 0 0 0;z-index:30;background:var(--fond);display:none!important;
    max-width:820px;margin:0 auto;border:1px solid var(--ligne);border-radius:var(--r-l) var(--r-l) 0 0;
    overflow-y:auto;box-shadow:var(--o3)}
  #view-fiche.active{display:flex!important}
  #btnAccueil{display:none}
  .hero{margin:var(--e3)}
  .hero .montant{font-size:var(--t-xl)}
  .hero .actions{flex-direction:column}
  .bonjour{padding:var(--e4) var(--e3) 0}
  .bonjour h1{font-size:var(--t-l)}
  .pcard{margin:0 var(--e3) var(--e2)}
  .compte{margin:auto var(--e3) var(--e3)}
  #inputRow{padding-bottom:var(--e3)}
  .sheet{align-items:center}
  .sheetBox{border-radius:var(--r-l);max-height:82vh}
  #sheetBody{padding-bottom:var(--e5)}
  .menu{position:fixed;right:var(--e4);top:62px}
}

/* Petit écran : on resserre le haut du devis pour laisser voir les articles,
   sans jamais masquer le total, les prix manquants ni les alertes. */
@media (max-width:400px){
  #devisTete{padding:var(--e2) var(--e2) 0}
  .resume .corps{padding:var(--e3) var(--e3) var(--e2)}
  .resume .total{font-size:26px}
  .resume .ligne2{gap:6px var(--e3);margin-top:6px}
  #versions{padding:var(--e2) var(--e3) var(--e2)}
  #devisActions{gap:6px;padding:0 var(--e2) var(--e2)}
  #devisActions .btn{min-height:50px;padding:0 6px;font-size:12.5px}
  .pAction{padding:var(--e3) var(--e3) var(--e2)}
  .pChiffres{padding:var(--e2) var(--e3)}
  .pActs{padding:var(--e3) var(--e3);gap:6px}
  .pActs .btn{padding:0 var(--e2);font-size:13px}
  #alerts{padding:0 var(--e2);gap:6px}
  .alert{padding:var(--e2) var(--e3)}
  .marge{margin:0 var(--e2) var(--e2)}
  .marge .tete{padding:var(--e2) var(--e3)}
  .marge .val{font-size:20px}
  .stepper .btn{min-width:44px}
  .stepper input{width:64px}
  #quote{padding:var(--e2)}
  .lot{margin-bottom:var(--e4)}
  .line{padding:var(--e2) var(--e3);margin-bottom:6px}
}

/* tablette : deux colonnes, l'assistant garde la vedette.
   Tout le contenu du devis suit la MÊME largeur : sinon le résumé flotte au milieu
   d'un bloc étroit au-dessus de cartes deux fois plus larges. */
@media (min-width:720px) and (max-width:979px){
  .view{padding-bottom:calc(var(--nav) + var(--safe))}
  .msg{max-width:74%}
  #view-devis > *,#view-accueil > *,#view-fiche > *{max-width:720px;width:100%;margin-left:auto;margin-right:auto}
  #devisTete{position:sticky}
  .compte{margin-top:auto}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{body{background:#fff}#nav,#top,#inputRow{display:none}}