/* echanges.css — LES ÉCHANGES AVEC MAESTRO (option B, 24/10/2026), chargé par presentation.html et index.html.
   Charte du portail (DESIGN.md) : thème clair ; Josefin Sans pour l'interface et les chiffres, Cormorant
   Garamond pour la voix ; vert forêt = ce qui se lit, avocat = ce qui s'actionne ; le survol allume l'or.
   Cibles tactiles >= 44 px ; aucune largeur fixe : pas de défilement horizontal à 320 px.
   Couleurs = jetons de maestro-brand (exports/tokens.json, contrastes mesurés dans tokens-contrast.json) :
   or #b8913a = décor seulement (2,94:1 sur blanc) ; or foncé #8a6f29 = contour de focus (4,79:1 blanc,
   4,43:1 crème : >= 3:1) ; or texte #7a5e1a = petit texte or (6,1:1 blanc, 5,64:1 crème). */
.ech { --ech-v: #1a3d2b; --ech-av: #3C5E2E; --ech-or: #b8913a; --ech-orf: #8a6f29; --ech-ord: #7a5e1a; --ech-ag: #C8CCC8;
  --ech-label: #626b64; --ech-encre: #1f2a24; --ech-creme: #f7f6f2; --ech-err: #8c3a2a;
  --ech-ok: #1a7a4a; --ech-ok-bg: #e3f1e8; --ech-ambre: #5a4413; --ech-ambre-bg: #fdf6e8; --ech-err-bg: #f4e8e4; --ech-bord-champ: #7f8781; --ech-rep-meta: #dce2d9;
  font-family: 'Cormorant Garamond', Georgia, serif; color: var(--ech-encre); max-width: 760px; min-width: 0; }
.ech-bandeau { font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: var(--ech-v);
  background: var(--ech-creme); border-left: 3px solid var(--ech-or); padding: 10px 14px; margin: 0 0 14px; }
.ech-suivi { display: inline-flex; align-items: center; min-height: 44px; font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 14px; color: var(--ech-av); margin: 0 0 14px; }
.ech-suivi:hover { color: var(--ech-ord); }
.ech-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ech-filtre, .ech-bascule { min-height: 44px; padding: 0 14px; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 13px;
  border: 1px solid var(--ech-ag); border-radius: 22px; background: #fff; color: var(--ech-av); cursor: pointer; }
/* `.ech-bascule` (option C, C1.12) : le second bouton du fil d'une ligne (« Proposer un autre produit » dans le panneau
   du bas, « Écrire un simple commentaire » sous le formulaire du produit), à l'allure des filtres. */
.ech-filtre[aria-pressed="true"], .ech-filtre:hover, .ech-bascule:hover { border-color: var(--ech-or); color: var(--ech-ord); }
/* L'état « choisi » se lit aussi par la forme (graisse, liseré doublé en or foncé), pas par la seule couleur. */
.ech-filtre[aria-pressed="true"] { font-weight: 700; border-color: var(--ech-orf); box-shadow: inset 0 0 0 1px var(--ech-orf); }
.ech-fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ech-msg { max-width: 88%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--ech-ag); background: #fff;
  overflow-wrap: anywhere; }
.ech-msg.ech-client { align-self: flex-end; background: var(--ech-creme); }
/* Les réponses de Maestro sur fond avocat (décision de Namur du 28/10/2026, proposition A de la maquette) : fond avocat,
   texte blanc (7,4:1), auteur et date --ech-rep-meta (5,6:1), filet or à gauche comme les boutons des e-mails Maestro.
   Fil général ET fil sous une prestation (même bulle). La bulle n'a ni survol ni curseur : elle ne se lit pas comme
   un bouton. La bulle du client ne change pas (crème, à droite). */
.ech-msg.ech-maestro { align-self: flex-start; background: var(--ech-av); color: #fff; border: 0;
  border-left: 3px solid var(--ech-or); border-radius: 4px 10px 10px 4px; }
.ech-msg.ech-maestro .ech-meta { color: var(--ech-rep-meta); font-weight: 600; }
.ech-msg.ech-maestro a { color: #fff; }
.ech-meta { font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12px; color: var(--ech-label); margin-bottom: 4px; }
.ech-texte { font-size: 18px; line-height: 1.5; white-space: pre-wrap; }
.ech-vide, .ech-info { font-size: 17px; color: var(--ech-label); margin: 6px 0; }
/* Fil coupé aux échanges les plus récents (lecture bornée par le serveur) : une phrase discrète, au-dessus. */
.ech-info.ech-tronque { font-size: 15px; margin: 0 0 8px; }
.ech-ecrire { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.ech-label { font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 13px; letter-spacing: .04em; color: var(--ech-v); }
/* Bordure des champs à 3:1 au moins (option C, C1 : point M3, jeton --ech-bord-champ, 3,69:1 sur blanc). */
.ech-champ { box-sizing: border-box; width: 100%; min-height: 110px; padding: 10px 12px; resize: vertical;
  font: 17px/1.5 'Cormorant Garamond', Georgia, serif; color: var(--ech-encre); border: 1px solid var(--ech-bord-champ); border-radius: 6px; }
.ech-champ:focus-visible, .ech-envoyer:focus-visible, .ech-filtre:focus-visible, .ech-suivi:focus-visible,
.ech-bascule:focus-visible { outline: 3px solid var(--ech-orf); outline-offset: 2px; }
.ech-champ[readonly] { background: var(--ech-creme); }
.ech-garde { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.ech-compteur { font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12px; color: var(--ech-label); text-align: right;
  font-variant-numeric: tabular-nums; }
.ech-compteur.ech-trop { color: var(--ech-err); }
.ech-rattache, .ech-delai { font-size: 16px; color: var(--ech-label); margin: 0; }
.ech-envoyer { align-self: flex-start; min-height: 44px; padding: 0 22px; font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 14px; letter-spacing: .05em; color: #fff; background: var(--ech-av); border: 1px solid var(--ech-av);
  border-radius: 4px; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; }
/* Le survol allume l'or sans sacrifier la lecture : le fond passe au vert sapin (texte blanc 12:1), la bordure
   et un trait bas s'allument en or (4,09:1 sur le vert). Jamais de texte blanc sur l'or (2,94:1). */
.ech-envoyer:hover { background: var(--ech-v); border-color: var(--ech-or); box-shadow: inset 0 -3px 0 var(--ech-or); }
/* Pendant l'envoi : `aria-disabled` (le bouton garde le focus du clavier), même aspect que `disabled`. */
.ech-envoyer:disabled, .ech-envoyer[aria-disabled="true"] { opacity: .6; cursor: progress; }
/* La zone annoncée vit hors du bloc refait à chaque rendu : un refus ou un accusé y reste lisible. */
.ech-annonce { font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 14px; color: var(--ech-v); min-height: 1.4em; margin: 8px 0 0; }
.ech-mention { font-size: 15px; color: var(--ech-label); margin: 16px 0 0; }
@media (max-width: 480px) { .ech-msg { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ech-envoyer { transition: none; } }
/* ---- B2 : commentaires par prestation (echanges-lignes.js) ----
   L'emplacement sous chaque carte (.carte-actions, posé par devis-cartes.js) et le panneau du bas (posé dans
   <body>) vivent HORS de .ech : ils reçoivent ici les mêmes jetons de couleur. Vide = invisible (sans accès). */
.carte-actions, .ech-panneau-bas { --ech-v: #1a3d2b; --ech-av: #3C5E2E; --ech-or: #b8913a; --ech-orf: #8a6f29; --ech-ord: #7a5e1a;
  --ech-ag: #C8CCC8; --ech-label: #626b64; --ech-encre: #1f2a24; --ech-creme: #f7f6f2; --ech-err: #8c3a2a;
  --ech-ok: #1a7a4a; --ech-ok-bg: #e3f1e8; --ech-ambre: #5a4413; --ech-ambre-bg: #fdf6e8; --ech-err-bg: #f4e8e4; --ech-bord-champ: #7f8781; --ech-rep-meta: #dce2d9; }
.carte-actions:empty { display: none; }
/* Lot replié (devis-cartes.js : la carte .md-lot perd la classe « open ») : son corps n'a plus de hauteur, mais ses
   boutons resteraient atteignables au clavier et lus par les lecteurs d'écran. Cachés tant que le lot est replié. */
.md-lot:not(.open) .carte-actions { visibility: hidden; }
.carte-actions { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* « Proposer un autre produit » (option C, C1.12) a l'allure de « Commenter » (sélecteur commun) sans en porter la classe. */
.ech-commenter, .ech-proposer { min-height: 44px; padding: 0 14px; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12px;
  letter-spacing: .04em; color: var(--ech-av); background: #fff; border: 1px solid var(--ech-ag); border-radius: 22px; cursor: pointer; }
/* Le survol (et le fil ouvert) allume l'or : liseré or, texte or foncé (6,1:1 sur blanc). */
.ech-commenter:hover, .ech-commenter[aria-expanded="true"],
.ech-proposer:hover, .ech-proposer[aria-expanded="true"] { border-color: var(--ech-or); color: var(--ech-ord); }
/* Le repère « Réponse de Maestro » de la carte : l'avocat (7,4:1 sur la carte blanche) et un petit carré aux couleurs
   de la bulle (décision du 28/10/2026). */
.ech-reponse-maestro { display: inline-flex; align-items: center; gap: 6px; font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 700; color: var(--ech-av); }
.ech-reponse-maestro::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--ech-av);
  box-shadow: inset 2px 0 0 var(--ech-or); }
/* Le fil sous la carte : la voix (Cormorant) pour les messages, comme le fil général. */
.ech-ligne-fil { flex-basis: 100%; min-width: 0; margin-top: 6px; display: flex; flex-direction: column; gap: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif; color: var(--ech-encre); }
.ech-ligne-fil .ech-champ { min-height: 88px; }
.ech-ligne-bandeau { font-size: 16px; line-height: 1.45; color: var(--ech-v); background: var(--ech-creme);
  border-left: 3px solid var(--ech-or); padding: 8px 10px; margin: 0; overflow-wrap: anywhere; }
.ech-sous-titre { font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 14px; color: var(--ech-v); margin: 18px 0 8px; }
.ech-liste-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ech-aller-ligne { display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; width: 100%; min-height: 44px; text-align: left;
  padding: 8px 12px; background: #fff; border: 1px solid var(--ech-ag); border-radius: 6px; cursor: pointer; font: inherit; color: inherit; }
.ech-aller-ligne:hover { border-color: var(--ech-or); }
.ech-aller-titre { font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 13px; color: var(--ech-v); overflow-wrap: anywhere; }
.ech-extrait { font-size: 16px; color: var(--ech-label); overflow-wrap: anywhere; }
.ech-disparu { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.ech-postes { font-size: 16px; color: var(--ech-label); margin: 12px 0 0; }
/* Le panneau du bas (téléphone) : fenêtre posée au-dessus de la barre du bas (30) et du bouton du Conseiller (40),
   sous la fenêtre de signature (1000). */
.ech-panneau-fond { position: fixed; inset: 0; background: rgba(10, 14, 12, .45); z-index: 60; }
.ech-panneau-bas { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
  z-index: 61; background: #fff; border-radius: 14px 14px 0 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; font-family: 'Cormorant Garamond', Georgia, serif; color: var(--ech-encre); }
/* L'en-tête du panneau (poignée, titre, « Fermer ») reste en vue quand le contenu défile (option C, C1.12 : point M5 du
   plan, maquette validée) ; il porte le haut du panneau (padding de 10 px) et sert de repère à « Fermer ». */
.ech-panneau-tete { position: sticky; top: 0; z-index: 2; background: #fff; padding-top: 10px; margin-bottom: 2px; }
.ech-poignee { width: 40px; height: 4px; border-radius: 2px; background: var(--ech-ag); margin: 0 auto 10px; }
.ech-panneau-titre { font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.4; color: var(--ech-v);
  margin: 0 0 8px; padding-right: 92px; min-height: 44px; overflow-wrap: anywhere; }
.ech-fermer { position: absolute; top: 14px; right: 0; min-height: 44px; padding: 0 14px; font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 13px; color: var(--ech-av); background: #fff; border: 1px solid var(--ech-ag); border-radius: 22px; cursor: pointer; }
.ech-fermer:hover { border-color: var(--ech-or); color: var(--ech-ord); }
.ech-commenter:focus-visible, .ech-proposer:focus-visible, .ech-aller-ligne:focus-visible, .ech-fermer:focus-visible { outline: 3px solid var(--ech-orf); outline-offset: 2px; }
/* ---- Option C, vague C1.12 : « Proposer un autre produit » (règles de la maquette validée, jetons --ech-*) ---- */
.ech-produit { margin: 0; padding: 10px 12px 14px; border: 1px solid var(--ech-ag); border-radius: 8px; background: #fff;
  display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ech-produit legend { padding: 0 6px; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: var(--ech-v); }
.ech-consigne { margin: 0 0 4px; padding: 8px 10px; background: var(--ech-creme); border-left: 3px solid var(--ech-or);
  font-size: 16px; line-height: 1.45; color: var(--ech-v); }
.ech-groupe { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-top: 4px; }
/* 16 px : le téléphone ne grossit pas la page quand le champ prend le focus. */
.ech-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; font: 16px/1.4 'Josefin Sans', system-ui, sans-serif;
  color: var(--ech-encre); background: #fff; border: 1px solid var(--ech-bord-champ); border-radius: 6px; }
.ech-input[readonly] { background: var(--ech-creme); }
/* Champ fautif : bordure doublée, couleur d'erreur (l'erreur est aussi écrite sous le champ). */
.ech-input[aria-invalid="true"], .ech-champ[aria-invalid="true"] { border-color: var(--ech-err); box-shadow: inset 0 0 0 1px var(--ech-err); }
.ech-aide { margin: 0; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12px; line-height: 1.4; color: var(--ech-label);
  overflow-wrap: anywhere; }
.ech-site { margin: 0; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 13px; font-weight: 700; color: var(--ech-ok);
  overflow-wrap: anywhere; }
.ech-erreur { margin: 0; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.4; color: var(--ech-err);
  overflow-wrap: anywhere; }
.ech-actions-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; }
/* Le lien de SA proposition, dans le fil du client (décision 7) : souligné, coupé n'importe où (adresse longue). */
.ech-lien-produit { overflow-wrap: anywhere; color: var(--ech-av); text-decoration: underline; }
.ech-lien-produit:hover { color: var(--ech-ord); }
.ech-input:focus-visible, .ech-lien-produit:focus-visible { outline: 3px solid var(--ech-orf); outline-offset: 2px; }
/* ---- Option C, vague C1 : avis par ligne et récapitulatif (echanges-avis.js, posés par echanges-lignes.js) ----
   Règles de la maquette validée par Namur le 26/10/2026 (décision 1), écrites avec les jetons --ech-*. Contrastes mesurés
   par la maquette : textes AA ; bordure des champs #7f8781 = 3,69:1 (point M3 du plan). */
/* Le récapitulatif vit hors de .ech et des emplacements : il reçoit ses propres jetons. En haut du devis, aligné sur
   les cartes (marges de 14 px de la page du devis) ; en tête du volet de la présentation, sans marge (voir plus bas). */
.recap-avis { --ech-v: #1a3d2b; --ech-av: #3C5E2E; --ech-or: #b8913a; --ech-orf: #8a6f29; --ech-ord: #7a5e1a; --ech-ag: #C8CCC8;
  --ech-label: #626b64; --ech-encre: #1f2a24; --ech-creme: #f7f6f2; --ech-err: #8c3a2a;
  --ech-ok: #1a7a4a; --ech-ok-bg: #e3f1e8; --ech-ambre: #5a4413; --ech-ambre-bg: #fdf6e8; --ech-err-bg: #f4e8e4; --ech-bord-champ: #7f8781; --ech-rep-meta: #dce2d9;
  background: #fff; border-radius: 13px; box-shadow: 0 1px 10px rgba(0, 0, 0, .06); padding: 12px 14px; margin: 14px 14px 2px;
  font-family: 'Josefin Sans', system-ui, sans-serif; }
.recap-n { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--ech-v); }
.recap-n b { font-weight: 700; font-variant-numeric: tabular-nums; }
.recap-note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ech-label); }
/* Le corps du lot est le CONTENEUR de référence des cartes : leurs règles suivent la largeur de la carte, pas celle de
   l'écran (posé ici : devis-cartes.css et devis-cartes.js restent inchangés). */
.md-lot-body { container-type: inline-size; container-name: carte; }
/* La rangée d'avis prend toute la largeur de l'emplacement. */
.avis-bloc { flex-basis: 100%; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.avis { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.avis-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 4px 14px;
  font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.15;
  text-align: center; color: var(--ech-av); background: #fff; border: 1px solid var(--ech-ag); border-radius: 22px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s; }
/* Le survol allume l'or. */
.avis-b:where(:not(:disabled)):hover { border-color: var(--ech-or); color: var(--ech-ord); }
/* Avis donné : lisible par la FORME (coche dessinée, graisse, liseré doublé), pas par la seule couleur. */
.avis-b[aria-pressed="true"] { font-weight: 700; box-shadow: inset 0 0 0 1px currentColor; }
.avis-b[aria-pressed="true"]::before { content: ''; flex: none; width: 9px; height: 5px; border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.avis-accord[aria-pressed="true"], .avis-retenir[aria-pressed="true"] { background: var(--ech-ok-bg); border-color: var(--ech-ok); color: var(--ech-ok); }
.avis-discuter[aria-pressed="true"] { background: var(--ech-ambre-bg); border-color: var(--ech-ambre); color: var(--ech-ambre); }
.avis-retirer[aria-pressed="true"], .avis-sans[aria-pressed="true"] { background: var(--ech-err-bg); border-color: var(--ech-err); color: var(--ech-err); }
/* Devis signé (lecture seule) : boutons désactivés, l'avis final reste lisible en entier ; les autres en pointillé,
   sans transparence. */
.avis-b:disabled { cursor: default; }
.avis-b:disabled:not([aria-pressed="true"]) { color: var(--ech-label); border-style: dashed; }
/* Ligne modifiée depuis l'avis : l'ancien avis, grisé (couleur d'étiquette, pointillé) ; les trois boutons sont libres. */
.avis-ancien { margin: 2px 0 0; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12.5px; line-height: 1.5; color: var(--ech-label);
  overflow-wrap: anywhere; }
.puce-ancien { display: inline-block; margin-right: 4px; padding: 0 8px; border: 1px dashed var(--ech-bord-champ); border-radius: 999px;
  font-weight: 700; color: var(--ech-label); }
.avis-pourquoi { align-self: flex-start; min-height: 44px; padding: 0 2px; background: none; border: 0;
  font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12.5px; color: var(--ech-av); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.avis-pourquoi:hover { color: var(--ech-ord); }
/* Zone annoncée : toujours présente (jamais masquée quand elle est vide), seule sa phrase change. */
.avis-annonce { margin: 0; min-height: 1.2em; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12px; color: var(--ech-label); }
.avis-b:focus-visible, .avis-pourquoi:focus-visible { outline: 3px solid var(--ech-orf); outline-offset: 2px; }
/* Carte étroite (téléphone, ou volet étroit de la présentation même sur grand écran) : la rangée d'avis prend toute la
   largeur de la carte, sous l'intitulé ET sous le prix. Réglé sur la largeur de la carte, pas de l'écran. */
@container carte (max-width: 640px) {
  .md-presta:has(> .md-presta-d > .carte-actions:not(:empty)) { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px; row-gap: 0; align-items: start; }
  .md-presta:has(> .md-presta-d > .carte-actions:not(:empty)) > .md-presta-d { display: contents; }
  .md-presta:has(> .md-presta-d > .carte-actions:not(:empty)) > .md-presta-d > * { grid-column: 1; }
  .md-presta:has(> .md-presta-d > .carte-actions:not(:empty)) > .md-presta-m { grid-column: 2; grid-row: 1 / span 4; }
  .md-presta:has(> .md-presta-d > .carte-actions:not(:empty)) > .md-presta-d > .carte-actions { grid-column: 1 / -1; }
  .avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .avis-b { padding: 4px 6px; }
}
/* Présentation, volet « Le détail du budget » : son corps est le conteneur « volet » ; le récapitulatif y est en tête,
   sans ombre, avec le liseré des cartes du volet. */
.detail-budget-corps { container-type: inline-size; container-name: volet; }
.detail-budget-corps .recap-avis { margin: 0 0 10px; box-shadow: none; border: 1px solid #f0efed; }
/* Volet étroit (téléphone) : quantité et prix passent sous la prestation, comme dans le portail en ligne ; les lignes
   qui portent des actions gardent cette colonne (la rangée d'avis y a déjà toute la largeur). */
@media (max-width: 480px) {
  .detail-budget-corps .md-presta,
  .detail-budget-corps .md-presta:has(> .md-presta-d > .carte-actions:not(:empty)) { display: flex; flex-direction: column; }
  .detail-budget-corps .md-presta:has(> .md-presta-d > .carte-actions:not(:empty)) > .md-presta-d { display: block; width: 100%; }
  .detail-budget-corps .md-presta-m { align-items: flex-start; }
}
@container volet (max-width: 320px) {
  .detail-budget-corps .md-lot-head { flex-wrap: wrap; row-gap: 4px; }
  .detail-budget-corps .md-presta,
  .detail-budget-corps .md-presta:has(> .md-presta-d > .carte-actions:not(:empty)) { display: flex; flex-direction: column; }
  .detail-budget-corps .md-presta:has(> .md-presta-d > .carte-actions:not(:empty)) > .md-presta-d { display: block; width: 100%; }
  .detail-budget-corps .md-presta-m { align-items: flex-start; }
  .detail-budget-corps .md-chev { order: 2; }
  .detail-budget-corps .md-ht { order: 3; flex-basis: 100%; padding-left: 42px; }
}
@media (prefers-reduced-motion: reduce) { .avis-b { transition: none; } }
/* ---- Postes nécessaires et postes induits (décisions de Namur du 30/10/2026 ; maquette v2 validée) ----
   Mention des postes nécessaires : encadré vert pâle (choisi par Namur). Encadrés posés par postes-lies.js : « Part
   avec » (rouge des retraits), postes liés et poste gardé (vert pâle), question de la dépose et pose sur l'existant
   (ambre). Textes AA sur leurs fonds (jetons --ech-* de C1). */
.avis-necessaire { margin: 0; padding: 6px 10px; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12.5px;
  line-height: 1.45; color: var(--ech-v); background: #f3f6f2; border-left: 3px solid #c9d6c6; border-radius: 0 6px 6px 0; }
.pl-encadre { margin: 0; padding: 8px 10px; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12.5px;
  line-height: 1.5; border-left: 3px solid; border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
.pl-encadre p { margin: 0; }
.pl-encadre p + p, .pl-encadre ul + p { margin-top: 4px; }
.pl-encadre ul { margin: 4px 0 0; padding-left: 18px; }
.pl-fort { font-weight: 700; }
.pl-part { color: var(--ech-err); background: var(--ech-err-bg); border-color: #e3c9c1; }
.pl-lies, .pl-garde { color: var(--ech-v); background: #f3f6f2; border-color: #c9d6c6; }
.pl-depose, .pl-existant { color: var(--ech-ambre); background: var(--ech-ambre-bg); border-color: #e7d3a1; }
.pl-indicatif { color: var(--ech-label); }
.pl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pl-b { min-height: 44px; padding: 0 14px; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: var(--ech-av); background: #fff; border: 1px solid var(--ech-ag); border-radius: 22px; cursor: pointer; }
.pl-b:where(:not(:disabled)):hover { border-color: var(--ech-or); color: var(--ech-ord); }
.pl-lien { min-height: 44px; padding: 4px 2px; background: none; border: 0; font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 12.5px; line-height: 1.5; color: var(--ech-av); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.pl-lien:where(:not(:disabled)):hover { color: var(--ech-ord); }
.pl-b:disabled, .pl-lien:disabled { cursor: default; color: var(--ech-label); border-style: dashed; text-decoration-style: dashed; }
.pl-b:focus-visible, .pl-lien:focus-visible { outline: 3px solid var(--ech-orf); outline-offset: 2px; }
/* Poste qui part avec un autre : son montant barré, son intitulé en couleur d'étiquette ; la ligne reste lisible. */
.md-presta.ech-part .md-presta-t { text-decoration: line-through; color: #626b64; }
.md-presta.ech-part .md-presta-dt { color: #626b64; }
@container carte (max-width: 640px) { .avis.avis-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---- OPTION C (C1.15, 27/10/2026) : l'APERÇU CLIENT ouvert depuis l'administration (décision 9 de Namur, 26/10) ----
   Règles de la maquette validée (`.apercu-bandeau`, `lectureSeule`). La page du devis en lecture seule : le bandeau est
   une rangée de la page (le corps est une colonne de 100dvh qui ne défile pas : il reste en vue sans position collante) ;
   les contrôles désactivés se lisent SANS transparence (pointillé, couleur d'étiquette) ; l'avis donné reste lisible en
   entier (règle des avis, plus haut). Jetons --apercu-* de la maquette (vert forêt, texte blanc 11,9:1, or du liseré). */
.apercu-bandeau { --apercu-bg: #1a3d2b; --apercu-texte: #ffffff; --apercu-or: #c9a24a; flex: none; position: relative; z-index: 35;
  box-sizing: border-box; max-width: 100%; padding: 0 16px; background: var(--apercu-bg); color: var(--apercu-texte);
  border-bottom: 3px solid var(--apercu-or); }
.apercu-bandeau:focus { outline: none; }
.apercu-bandeau:focus-visible { outline: 3px solid var(--apercu-or); outline-offset: -6px; }
.apercu-bandeau-in { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 8px 0;
  font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 13.5px; line-height: 1.4; letter-spacing: .02em; overflow-wrap: anywhere; }
.apercu-bandeau-in svg { flex: none; width: 20px; height: 20px; color: var(--apercu-or); }
.apercu-bandeau-in b { font-weight: 700; letter-spacing: .06em; }
/* « Le client n'a aucun lien actif… » : sous la phrase, alignée sur son texte (après l'œil). */
.apercu-sans-lien { margin: 0; padding: 0 0 8px 30px; font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 13px;
  line-height: 1.4; overflow-wrap: anywhere; }
/* Les boutons de ligne de l'aperçu (désactivés, décrits par le bandeau). */
.ech-commenter:disabled, .ech-commenter:disabled:hover, .ech-proposer:disabled, .ech-proposer:disabled:hover {
  cursor: default; color: var(--ech-label); border-color: var(--ech-ag); border-style: dashed; }
.avis-pourquoi:disabled, .avis-pourquoi:disabled:hover { cursor: default; color: var(--ech-label); text-decoration-style: dashed; }
/* « Répondre dans l'administration », sous chaque fil de l'aperçu (cible de 44 px). */
.apercu-repondre { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  font-family: 'Josefin Sans', system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ech-av);
  text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.apercu-repondre:hover { color: var(--ech-ord); }
.apercu-repondre:focus-visible { outline: 3px solid var(--ech-orf); outline-offset: 2px; }
/* Ce qui écrit, sur la page (hors des échanges) : « Signer le devis », le Conseiller (onglets, champ, envoi, puces). */
.sign-cta:disabled, .sign-cta:disabled:hover { cursor: default; background: #fff; color: #626b64; border: 1px dashed #7f8781;
  border-left: 3px solid #7f8781; box-shadow: none; transform: none; }
.ch-onglet:disabled, .ch-onglet:disabled:hover, .mtab-btn:disabled { cursor: default; color: #626b64; }
.mtab-btn:disabled svg { stroke-dasharray: 3 2; }
.suggestion:disabled, .suggestion:disabled:hover { cursor: default; color: #626b64; background: #fff; border-style: dashed; transform: none; }
#input:disabled { cursor: default; background: #f7f6f2; }
.send-btn:disabled { cursor: default; transform: none; }