/* ═══════════════════════════════════════════════════════════════════════
   SOMA — LE TIROIR V6, GRAMMAIRE PARTAGÉE
   ───────────────────────────────────────────────────────────────────────
   Né le 2026-08-22 (TICKET-TIROIR-DEVIS-V6). Le tiroir Détection était passé
   en V6 le 31/07 ; le tiroir Devis était resté à la grammaire d'avant, avec sa
   PROPRE largeur (480 px en dur) et son PROPRE fond (blanc). Deux tiroirs, deux
   vérités : Maxime l'a vu tout de suite (« il faut s'inspirer du drawer de
   detection »).

   Ce fichier est la SEULE source de la coquille et de la grammaire communes.
   On la change ici, les deux tiroirs suivent — même mécanique que la bascule
   en cartes de `css/soma-ligne.css`.

   Référence qui fait foi : mockups/tiroir-devis-COMPLET-2026-08-22.html
   (lui-même aligné sur mockups/tiroir-detections-V6-lecture-5s-2026-07-31.html).

   Convention de nommage : les règles portent les DEUX préfixes.
     .det-v6-*  → le tiroir Détection (existant, inchangé à l'écran)
     .sv6-*     → le tiroir Devis (et tout tiroir à venir)
   Un seul bloc de déclarations pour les deux : c'est ça, la source unique.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LA COQUILLE ───────────────────────────────────────────────────────
   593 px (= 780 − 24 %, demande Maxime du 01/08, validée à l'écran) et non
   480 px ; adaptatif sur petit écran ; fond GRIS NEUTRE — sans lui, les cartes
   blanches ne se détachent pas et la grammaire V6 s'effondre. */
.soma-tiroir {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: min(593px, 92vw);
  background: var(--soma-bg, #F7F7F8);
  border-left: 3px solid var(--green);
  box-shadow: -12px 0 48px rgba(0, 0, 0, .12);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.83, 0, .17, 1);
}
.soma-tiroir.open { transform: translateX(0); }

/* ── LE SOMMET — le chiffre, le verdict, le repère, la porte vers le détail ──
   UN SEUL CHEMIN POUR L'ŒIL : le nombre est le seul gros élément ; chaque
   étage est plus petit que le précédent. Plancher 11 px, zéro demi-pixel. */
.det-v6-top,
.sv6-top {
  background: var(--card); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 7px rgba(0, 0, 0, .04);
}
.det-v6-l1,
.sv6-l1 { display: flex; align-items: center; gap: 14px; }
.det-v6-n,
.sv6-n {
  font-size: 34px; font-weight: 900; line-height: 1;
  letter-spacing: -1.5px; font-variant-numeric: tabular-nums;
}
.det-v6-rc,
.sv6-rc { font-size: 16px; font-weight: 900; line-height: 1.15; }
/* La couleur DIT LA VÉRITÉ : vert au-dessus du taux, orange dessous, rouge no-go franc */
.det-v6-n.go, .det-v6-rc.go, .sv6-n.go, .sv6-rc.go { color: var(--green-dark); }
.det-v6-n.warn, .det-v6-rc.warn, .sv6-n.warn, .sv6-rc.warn { color: var(--yellow); }
.det-v6-n.danger, .det-v6-rc.danger, .sv6-n.danger, .sv6-rc.danger { color: var(--red); }
.det-v6-sub,
.sv6-sub { font-size: 11px; color: var(--muted); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.det-v6-lien,
.sv6-lien {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700;
  color: var(--green-dark); text-decoration: underline;
}

/* ── LES TITRES DE SECTION — courts, le complément en petit à droite ──
   26 px au-dessus, 10 px en dessous : c'est le VIDE qui sépare, pas les filets
   (constat Maxime 01/08 : « trop tassés, faut que ça respire »). */
.det-v6-st,
.sv6-st {
  display: flex; align-items: center; gap: 7px; padding: 0 4px;
  margin: 26px 0 10px;
  font-size: 11px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text2);
}
.det-v6-st::before,
.sv6-st::before { content: ''; width: 3px; height: 11px; border-radius: 2px; background: var(--muted2, rgba(122,148,128,.45)); flex: none; }
.det-v6-st .r,
.sv6-st .r { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ── LA CARTE — le contenant blanc de toute section ─────────────────── */
.det-v6-why,
.sv6-card { background: var(--card); border-radius: 12px; padding: 4px 13px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.det-v6-li,
.sv6-li { display: flex; gap: 9px; align-items: baseline; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .05); font-size: 12px; line-height: 1.4; }
.det-v6-li:first-child,
.sv6-li:first-child { border-top: 0; }
.det-v6-li .pt,
.sv6-li .pt { width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); flex: none; }
.det-v6-li b,
.sv6-li b { font-weight: 900; color: var(--text); }
.det-v6-li span,
.sv6-li span { color: var(--text2); }

/* ═══════════════════════════════════════════════════════════════════════
   LES PIÈCES PROPRES AU TIROIR DEVIS
   Le tiroir Devis répond à UNE question : « qu'est-ce qui me manque pour
   l'envoyer ? ». Pas « je prends ou pas » (Détection), pas « comment je gagne
   celle-là » (Commercial). D'où des pièces qui n'existent que là.
   ═══════════════════════════════════════════════════════════════════════ */

/* La jauge de complétude — sous le nombre, jamais à la place */
.sv6-jauge { height: 6px; border-radius: 100px; background: rgba(13, 27, 15, .08); overflow: hidden; margin: 9px 0 4px; }
.sv6-jauge i { display: block; height: 100%; border-radius: 100px; background: var(--yellow); transition: width .4s cubic-bezier(.16, 1, .3, 1); }
.sv6-jauge.go i { background: var(--green); }
.sv6-jauge.danger i { background: var(--red); }

/* Le badge d'un titre de section : « nouveau » / « existant ».
   ⚠️ PLANCHER 11 px — non négociable (design-guardian, gravé le 19/08). Le mockup
   descendait à 9 px sur ces quatre micro-textes (badge, pilule, libellés de la
   grille, source) ; la charte prime sur le pixel du mockup. Le cas des libellés
   était le plus net : l'ancien .devis-panel-info-label était à 11 px — les
   passer à 10 aurait été une VRAIE baisse, que le ticket interdit noir sur blanc. */
.sv6-badge { font-size: 11px; font-weight: 900; padding: 1px 7px; border-radius: 100px; letter-spacing: .04em; }
.sv6-badge.n { background: var(--green-soft); color: var(--green-dark); }
.sv6-st.neuf::before { background: var(--green); }

/* La source d'une carte, en pied : d'où sort ce qui est écrit au-dessus.
   Contrat de vérité — jamais un fait sans sa provenance. */
.sv6-src { font-size: 11px; color: var(--muted); font-style: italic; padding: 2px 0 7px; }

/* ── CE QUI MANQUE — critiques d'abord, chacun avec SON geste ────────── */
.sv6-bloq { display: flex; gap: 9px; align-items: baseline; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .05); font-size: 12px; line-height: 1.4; }
.sv6-bloq:first-child { border-top: 0; }
.sv6-bloq .pt { width: 6px; height: 6px; border-radius: 50%; flex: none; align-self: flex-start; margin-top: 5px; }
.sv6-bloq .pt.r { background: var(--red); }
.sv6-bloq .pt.j { background: var(--yellow); }
.sv6-bloq .d { color: var(--text2); }
.sv6-bloq b { font-weight: 900; color: var(--text); }
.sv6-bloq .go {
  margin-left: auto; border: 0; background: none; padding: 0 0 0 8px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 800;
  color: var(--green-dark); text-decoration: underline; white-space: nowrap;
}
.sv6-pill {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 100px;
  background: rgba(13, 27, 15, .06); font-size: 11px; font-weight: 900; color: var(--muted); margin-left: 5px;
}
.sv6-pill.crit { background: rgba(163, 58, 42, .09); color: var(--red); }

/* Le verrou d'envoi EXPLIQUÉ, jamais subi : il dit pourquoi et jusqu'où */
.sv6-verrou {
  display: flex; align-items: center; gap: 9px;
  background: rgba(163, 58, 42, .06); border: 1px solid rgba(163, 58, 42, .22);
  border-radius: 12px; padding: 9px 12px; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 800; color: var(--red);
}
.sv6-verrou span { font-weight: 400; color: var(--text2); }

/* ── INFORMATIONS GÉNÉRALES — la grille 2 colonnes ───────────────────── */
.sv6-ig { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 11px 13px; }
.sv6-ig .lb { font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sv6-ig .vl { font-size: 13px; font-weight: 800; line-height: 1.3; margin-top: 1px; }
.sv6-ig .vl.sm { font-size: 12px; font-weight: 700; color: var(--text2); }
.sv6-ig .vl.eur { font-variant-numeric: tabular-nums; }
.sv6-ig .vl.ttc { color: var(--green-dark); }
/* Ce qu'on ne sait pas s'écrit en gris et se tait — jamais une valeur déduite */
.sv6-ig .vl.vide { color: var(--muted2, rgba(122,148,128,.45)); font-weight: 400; }

/* ── DEMANDES DE PRIX — les consultations fournisseurs ───────────────── */
.sv6-four { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid rgba(0, 0, 0, .05); font-size: 12px; }
.sv6-four:first-child { border-top: 0; }
.sv6-four .nm { font-weight: 800; flex: 0 0 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv6-four .st { color: var(--text2); }
.sv6-four .st.att { color: var(--red); font-weight: 800; }
.sv6-four .eur { margin-left: auto; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv6-four .eur.vide { color: var(--muted2, rgba(122,148,128,.45)); font-weight: 400; }

/* ── STATUT — la ligne de transfo + les 2 gestes existants ───────────── */
.sv6-stat { display: flex; align-items: center; gap: 9px; padding: 11px 13px; font-size: 12.5px; }
.sv6-stat b { font-weight: 900; }
.sv6-acts { display: flex; gap: 7px; padding: 0 13px 11px; }
.sv6-acts .b {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; border-radius: 100px; border: 1px solid var(--border); background: var(--card);
  font-family: inherit; font-size: 11.5px; font-weight: 800; color: var(--text); cursor: pointer;
}
.sv6-acts .b:hover { border-color: var(--green); color: var(--green-dark); }
.sv6-acts .b svg { width: 13px; height: 13px; stroke: var(--green-dark); fill: none; stroke-width: 2; }

/* ── LE PIED COLLANT — il ne défile plus ─────────────────────────────
   Même verdict design que la V6 Détection : il fallait traverser tout le
   tiroir pour atteindre les gestes. */
.sv6-pied {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; gap: 6px; padding: 10px 13px;
  background: var(--card); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);
}
.sv6-b {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: 100px; padding: 9px 0; border: 1px solid var(--border); background: var(--card);
  font-family: inherit; font-size: 11.5px; font-weight: 800; color: var(--text);
  cursor: pointer; white-space: nowrap;
}
.sv6-b:hover { border-color: var(--green); color: var(--green-dark); }
.sv6-b svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
/* UNE seule action pleine par tiroir — la pilule graphite, comme en V6 Détection */
.sv6-b.ink { background: var(--text); color: var(--white); border-color: transparent; }
.sv6-b.ink:hover { background: var(--text2); color: var(--white); }
.sv6-b.off { opacity: .4; cursor: not-allowed; }
.sv6-b.off:hover { border-color: var(--border); color: var(--text); }

/* ── LA CROIX EN LOSANGE — la croix canonique des tiroirs ──────────────
   Quatre éclats verts qui se referment au survol. Le tiroir Devis portait un
   « ✕ » en dur (caractère-emoji interdit, règle 18) : il reprend celle-ci. */
.det-panel-close, .soma-x {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--text, #0D1B0F);
  background: var(--card, #fff);
  color: var(--text, #0D1B0F);
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 82;
  overflow: hidden;
  padding: 0;
  transition: border-color .5s;
}
.det-panel-close .det-x, .soma-x .det-x { position: relative; z-index: 2; transition: color .3s; }
.det-panel-close:hover .det-x, .soma-x:hover .det-x { color: var(--white, #fff); }
.det-panel-close .det-shard, .soma-x .det-shard {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--green);
  transition: all .3s cubic-bezier(.83, 0, .17, 1);
}
.det-panel-close .det-shard.s1, .soma-x .det-shard.s1 { top: 100%; left: 0; }
.det-panel-close:hover .det-shard.s1, .soma-x:hover .det-shard.s1 { top: 75%; }
.det-panel-close .det-shard.s2, .soma-x .det-shard.s2 { top: 0; left: 100%; }
.det-panel-close:hover .det-shard.s2, .soma-x:hover .det-shard.s2 { left: 75%; }
.det-panel-close .det-shard.s3, .soma-x .det-shard.s3 { top: 0; right: 100%; }
.det-panel-close:hover .det-shard.s3, .soma-x:hover .det-shard.s3 { right: 75%; }
.det-panel-close .det-shard.s4, .soma-x .det-shard.s4 { bottom: 100%; right: 0; }
.det-panel-close:hover .det-shard.s4, .soma-x:hover .det-shard.s4 { bottom: 75%; }