/* 87-demande-plus — 23/10/2026 (user)
   Trois précisions qui changent la vie de celui qui organise :
     • « au plus tard le… » : jusqu'où la livraison peut glisser ;
     • « cette mission ne doit pas bouger » : elle ne glisse pas, le conducteur sera là ;
     • « quelqu'un part avec lui ? » : le renfort, choisi parmi les gens réellement libres.
   Et le bandeau qui rappelle, en grand, qu'on est en train de MODIFIER une demande
   existante — pas d'en créer une nouvelle. */

/* « Au plus tard » : un champ discret, sous les heures. */
.dmd-tard{margin-top:12px}
.dmd-tard .dmd-in{max-width:220px}

/* La case « ne doit pas bouger » reprend la case « urgent », en bleu. */
.dmd-fige.on{box-shadow:inset 0 0 0 1.5px #2447C8;background:color-mix(in srgb,#2447C8 6%,var(--s1))}
.dmd-fige.on i{background:#2447C8}
.dmd-fige.on b{color:#2447C8}

/* Le renfort : les mêmes pastilles que pour le chauffeur, avec la raison dessous. */
.dmd-renfort{margin-top:10px}
.dmd-pers-avec{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.dmd-pers-avec .dmd-pers{align-items:flex-start;text-align:left}
.dmd-pers-avec .dmd-pers span{display:flex;flex-direction:column;gap:1px;min-width:0}
.dmd-pers-avec .dmd-pers small{font:500 11.5px/1.3 'Outfit',sans-serif;color:var(--mu);white-space:normal}

/* Le bandeau de modification : impossible à rater. */
.dmd-modif-bandeau{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,#2447C8 8%,var(--s1));
  box-shadow:inset 0 0 0 1.5px #2447C8}
.dmd-modif-bandeau span{display:flex;flex-direction:column;gap:2px;min-width:0}
.dmd-modif-bandeau b{font:800 14.5px 'Outfit',sans-serif;color:#2447C8}
.dmd-modif-bandeau small{font:500 12.5px 'Outfit',sans-serif;color:var(--mu)}

/* L'assistant, sur la page d'accueil (23/10/2026). Ce que la personne dit, et ce que
   l'application en fait. Sobre, lisible, sans effet. */
.sv-ia{padding:56px 0 48px;background:var(--bg)}
.sv-ia-t{margin:0 0 10px;font:800 clamp(24px,3.4vw,36px)/1.15 'Outfit',sans-serif;color:var(--tx);text-align:center}
.sv-ia-s{margin:0 auto 26px;max-width:620px;text-align:center;font:500 16px/1.55 'Outfit',sans-serif;color:var(--mu)}
.sv-ia-ex{max-width:760px;margin:0 auto;padding:22px 24px;border-radius:20px;background:var(--s1);
  box-shadow:0 1px 0 var(--brd) inset,0 10px 30px -22px rgba(15,23,42,.5)}
.sv-ia-dit{margin:0 0 18px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,#2447C8 7%,transparent);
  border-left:3px solid #2447C8;font:500 15px/1.6 'Outfit',sans-serif;color:var(--tx)}
.sv-ia-l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sv-ia-l li{position:relative;padding-left:26px;font:500 14.5px/1.5 'Outfit',sans-serif;color:var(--tx2,var(--tx))}
.sv-ia-l li::before{content:'';position:absolute;left:4px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--or)}
.sv-ia-l b{font-weight:700;color:var(--tx)}
.sv-ia-f{margin:18px 0 0;font:600 14px/1.5 'Outfit',sans-serif;color:var(--mu);text-align:center}
@media(max-width:640px){.sv-ia{padding:40px 0 34px}.sv-ia-ex{padding:18px 16px;border-radius:16px}}

/* ── Une étape à la fois (23/10/2026) ──────────────────────────────────────
   « Trop d'étapes, les conducteurs vont avoir la flemme. » Celles qui sont
   réglées se referment sur une ligne : le titre, la réponse, et de quoi la
   rouvrir. Seule la question du moment est ouverte. */
.dmd-pliee{ padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
.dmd-pliee-b{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:11px 14px; border-radius:14px; border:1px solid var(--brd); background:var(--s1);
  font:inherit; transition:border-color .12s, background .12s;
}
.dmd-pliee-b:hover{ border-color:var(--mu); }
.dmd-pliee-n{
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--s2); color:var(--mu); font:700 12.5px 'Outfit',sans-serif;
}
.dmd-pliee.ok .dmd-pliee-n{ background:#16A34A; }
.dmd-pliee.ok .dmd-pliee-n::after{
  content:''; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-1px);
}
.dmd-pliee-t{ display:grid; gap:1px; min-width:0; flex:1; }
.dmd-pliee-t small{ font:600 11.5px/1.2 'Outfit',sans-serif; color:var(--mu); }
.dmd-pliee-t b{ font:600 14.5px/1.3 'Outfit',sans-serif; color:var(--tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dmd-pliee-vide{ color:var(--mu) !important; font-weight:500 !important; }
.dmd-pliee-ch{ flex:none; font:700 12.5px/1 'Outfit',sans-serif; color:var(--or); }
.dmd-fiche > .dmd-etape + .dmd-etape{ margin-top:10px; }
.dmd-ouverte{ scroll-margin-top:90px; }
@media(max-width:560px){
  .dmd-pliee-b{ padding:10px 12px; gap:10px; }
  .dmd-pliee-t b{ font-size:14px; }
}

/* 24/10/2026 10h30 (user : « ne le mets pas entre des pages comme si tu ne parlais pas déjà de
   ça dans une autre »). L'exemple de l'assistant vit dans sa section.
   29/10/2026 13h12 (user : « la partie assistant vocal est vraiment moche, il y a des points
   partout »). Plus aucun point : la phrase du conducteur est une bulle de message, ce que
   Stockéo comprend est une liste cochée, chaque titre porte son pictogramme (micro, étincelle).
   Un seul cadre, une seule couleur d'accent. Tout est préfixé par #assistant : le panneau de
   l'assistant dans l'appli a aussi une classe .ia-ex, et son style écrasait celui-ci. */
/* Le panneau de l'assistant dans l'appli (« Par exemple ») recevait jusqu'ici ces trois réglages
   de l'ancienne règle sans préfixe : on les lui garde, pour qu'il ne change pas d'un pixel. */
.ia-ex{margin-top:20px;grid-template-columns:1fr;align-items:start;
  box-shadow:0 1px 0 rgba(15,23,42,.06) inset,0 14px 34px -26px rgba(15,23,42,.45)}
@media(max-width:860px){.ia-ex{margin-top:18px}}
#assistant .ia-ex{margin:22px 0 0;display:grid;grid-template-columns:1fr;gap:18px;
  align-items:start;padding:20px 22px;border-radius:20px;background:#fff;
  border:1px solid rgba(15,23,42,.07);box-shadow:0 18px 40px -30px rgba(15,23,42,.5)}
#assistant .ia-ex-col{min-width:0}
#assistant .ia-ex-qui{display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font:700 11.5px/1 'Outfit',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#64748B}
#assistant .ia-ex-qui::before{content:'';flex:none;width:22px;height:22px;border-radius:50%;
  background:#0F172A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/13px no-repeat}
#assistant .ia-ex-qui-b::before{background:#F97316 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5l-6.3 2.2L12 19l-2.2-6.3L3.5 10.5l6.3-2.2z'/%3E%3C/svg%3E") center/13px no-repeat}
#assistant .ia-ex-dit{margin:0;padding:13px 16px;border-radius:18px 18px 18px 6px;background:#F1F5F9;
  font:500 15px/1.6 'Outfit',sans-serif;color:#0F172A}
#assistant .ia-ex-l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#assistant .ia-ex-l li{position:relative;padding-left:30px;font:500 14.5px/1.5 'Outfit',sans-serif;color:#334155}
#assistant .ia-ex-l li::before{content:'';position:absolute;left:4px;top:3px;width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F97316' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
#assistant .ia-ex-l b{font-weight:700;color:#0F172A}
#assistant .ia-ex-f{grid-column:1/-1;margin:0;padding:12px 14px;border-radius:12px;background:#FFF7ED;
  text-align:center;font:600 13.5px/1.45 'Outfit',sans-serif;color:#9A3412}
@media(max-width:860px){
  #assistant .ia-ex{gap:16px;padding:0;margin-top:18px;border:0;box-shadow:none;background:transparent}
  #assistant .ia-ex-dit{font-size:14.5px;line-height:1.55}
}