/* Bouton "Demander des photos au client" · meme patron que dans la fiche
     (.doc-add-btn de fiche.css) pour un look identique partout. */
  .doc-add-btn {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    height: 30px; padding: 0 12px;
    background: var(--canvas); color: var(--primary);
    border: 1px solid var(--primary); border-radius: var(--r-pill);
    font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background 0.15s, color 0.15s;
  }
  .doc-add-btn:hover { background: var(--primary); color: var(--on-primary); }
  .doc-add-btn svg { width: 13px; height: 13px; }

  /* ── Slot "Chargé de projet" en tete · reprend le look du team-strip de la
     fiche (avatar + engrenage + picker). Classes copiees de fiche.css. ── */
  .assign-strip {
    display: flex; align-items: center;
    margin-bottom: var(--space-base);
    padding: 10px 14px;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
  }
  .team-role-group { display: flex; align-items: center; gap: 10px; position: relative; }
  .role-avatars { display: flex; align-items: center; flex-shrink: 0; }
  .role-avatars .mini-avatar {
    width: 28px; height: 28px;
    border-radius: var(--r-full);
    background: var(--surface-dark);
    color: var(--on-dark);
    font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--canvas);
    margin-left: -8px; flex-shrink: 0; cursor: default;
    transition: transform 0.12s;
  }
  .role-avatars .mini-avatar:first-child { margin-left: 0; }
  .role-avatars .mini-avatar:hover { z-index: 2; transform: translateY(-1px); }
  .role-avatars .mini-avatar.empty,
  .role-avatars .mini-avatar.plus {
    background: var(--primary-soft); color: var(--primary);
    border-style: dashed; cursor: pointer;
  }
  .role-avatars .mini-avatar.plus:hover {
    background: var(--primary-soft); color: var(--primary);
    border-color: var(--primary); border-style: solid;
  }
  .role-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .role-label {
    font-size: 10px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .role-status {
    font-size: 13px; color: var(--ink); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
  }

  /* Picker popover (ancre au slot) · single-select chargé */
  .team-picker-overlay { position: fixed; inset: 0; background: transparent; z-index: 1000; }
  .team-picker {
    position: absolute;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-hover);
    width: 240px; max-height: 50vh;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .team-picker-head {
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--hairline-soft);
    font-size: 11px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .team-picker-list { flex: 1; overflow-y: auto; padding: 4px 0; }
  .team-picker-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; cursor: pointer;
    font-size: 13px; color: var(--ink);
    transition: background 0.1s;
    background: none; border: none; width: 100%; text-align: left; font-family: inherit;
  }
  .team-picker-row:hover { background: var(--surface-soft); }
  .team-picker-row .tp-check { margin-left: auto; color: var(--primary); flex-shrink: 0; }
  .team-picker-row .tp-check svg { width: 15px; height: 15px; }
  @media (max-width: 640px) {
    .team-picker-overlay { background: color-mix(in srgb, var(--ink) 30%, transparent); }
    .team-picker {
      position: fixed !important;
      left: 12px !important; right: 12px !important;
      bottom: 12px !important; top: auto !important;
      width: auto !important; max-height: 60vh;
    }
  }

  .content { background: var(--surface-soft); padding: 0 !important; }
  .form-wrap { max-width: 820px; margin: 0 auto; padding: var(--space-lg) var(--space-xl) var(--space-xxl); }

  .back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--muted); text-decoration: none;
    margin-bottom: var(--space-base); cursor: pointer;
  }
  .back-link:hover { color: var(--ink); }
  .back-link svg { width: 14px; height: 14px; }

  /* Bouton retour · petit rond avec fleche (temporaire) */
  .btn-back-round {
    width: 36px; height: 36px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--hairline); border-radius: var(--r-full);
    background: var(--surface-soft); color: var(--muted);
    text-decoration: none; cursor: pointer;
    margin-bottom: var(--space-base);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .btn-back-round:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
  .btn-back-round svg { width: 16px; height: 16px; pointer-events: none; }

  /* Selecteur d'arrondissement · trigger + panneau de pastilles depliable */
  .pill-picker { position: relative; }
  .pill-picker-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--r-pill);
    border: 1px solid var(--hairline); background: var(--canvas);
    font-size: 13px; color: var(--muted); cursor: pointer; font-family: inherit;
    transition: border-color 0.15s;
  }
  .pill-picker-trigger:hover { border-color: var(--primary); }
  .pill-picker-trigger.has-value { color: var(--ink); }
  .pill-picker-trigger svg { width: 14px; height: 14px; color: var(--muted); }
  .pill-picker-panel {
    margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px; border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: var(--surface-soft); max-height: 220px; overflow-y: auto;
  }
  .pill-picker-panel[hidden] { display: none; }

  /* Panneau arrondissement / source · rangee PLEINE LARGEUR dans la grille
     (span les 2 colonnes), donc toujours dans la carte, sans calcul de largeur. */
  .pp-panel-row { grid-column: 1 / -1; margin-top: 4px; }

  h1.page-title { font-size: 28px; line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 4px; }
  .page-sub { color: var(--body); font-size: 13px; margin-bottom: var(--space-lg); }

  /* Autosave status bar · discret, pas de couleur agressive */
  .save-bar {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--muted);
    margin-bottom: var(--space-base);
    height: 20px;
  }
  .save-bar svg { width: 12px; height: 12px; flex-shrink: 0; }
  .save-bar.saved  { color: var(--semantic-up); }
  .save-bar.saving { color: var(--muted); }
  .save-bar.error  { color: var(--semantic-down); }

  .form-card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-base);
  }
  .section-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .section-row svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }
  .section-title { font-size: 15px; font-weight: 600; color: var(--ink); }
  .section-help { font-size: 12px; color: var(--muted); margin-bottom: var(--space-base); margin-left: 26px; }

  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .field.full { grid-column: 1 / -1; }
  @media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .field.full { grid-column: 1; }
  }

  .field label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
  .field label .req { color: var(--semantic-down); }
  .field label .opt { color: var(--muted-soft); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 4px; }
  .field input,
  .field select,
  .field textarea {
    width: 100%; border: 1px solid var(--hairline); background: var(--input-bg);
    border-radius: var(--r-sm); padding: 10px 12px;
    font-size: 13px; font-family: inherit; color: var(--ink);
    outline: none; transition: border-color 0.15s; box-sizing: border-box;
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus { border-color: var(--primary); }
  .field textarea { resize: vertical; min-height: 80px; }

  /* Champs empiles directement dans une carte (ex. bloc Travaux · types puis
     description) · leur donner de l'air, ils ne sont pas dans une form-grid. */
  .form-card > .field + .field { margin-top: var(--space-lg); }
  .helper { font-size: 11px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
  .helper svg { width: 11px; height: 11px; flex-shrink: 0; }

  .chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip {
    padding: 7px 14px; border-radius: var(--r-pill);
    border: 1px solid var(--hairline); background: var(--canvas);
    font-size: 12px; color: var(--ink); cursor: pointer;
    transition: all 0.15s; user-select: none;
  }
  .chip:hover { border-color: var(--primary); color: var(--primary); }
  .chip.selected { background: var(--primary); border-color: var(--primary); color: #fff; }

  .drop-zone {
    border: 2px dashed var(--hairline); border-radius: var(--r-md);
    padding: var(--space-lg) var(--space-base); text-align: center;
    background: var(--surface-soft); cursor: pointer; transition: all 0.15s;
  }
  .drop-zone:hover, .drop-zone.dragging {
    border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
  }
  .drop-zone .drop-icon { display: inline-flex; margin-bottom: 8px; }
  .drop-zone .drop-icon svg { width: 28px; height: 28px; color: var(--muted); }
  .drop-zone:hover .drop-icon svg { color: var(--primary); }
  .drop-zone .drop-text { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
  .drop-zone .drop-sub { font-size: 11px; color: var(--muted); }

  .actions-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-base) var(--space-xl);
    background: var(--canvas); border: 1px solid var(--hairline);
    border-radius: var(--r-xl); flex-wrap: wrap; gap: var(--space-base);
  }
  .actions-bar .left { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
  .actions-bar .right { display: flex; gap: var(--space-xs); align-items: center; }
  .actions-bar .btn { height: 40px; padding: 0 18px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }

  /* Bascule "Message vocal" · leve les champs obligatoires sauf le telephone.
     Vit en haut a droite de la 1re carte (dans .section-row, qui est en flex ·
     margin-left:auto la colle a droite). Volontairement discrete · c'est
     l'exception, pas la voie normale. Elle s'allume en jaune quand elle est
     active pour qu'on ne cree pas une fiche incomplete sans s'en rendre compte. */
  #vocal-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    margin-left: auto; flex-shrink: 0;
    height: 30px; padding: 0 12px;
    border: 1px dashed var(--hairline); border-radius: var(--r-pill);
    font-size: 12px; color: var(--muted); cursor: pointer; user-select: none;
  }
  #vocal-toggle:hover { border-color: var(--primary); color: var(--body); }
  #vocal-toggle input { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
  /* Mobile · la pastille passe sous le titre plutot que de l'ecraser. */
  @media (max-width: 560px) {
    .section-row { flex-wrap: wrap; }
    #vocal-toggle { margin-left: 26px; width: auto; }
  }
  /* Asterisque d'un champ devenu facultatif en mode message vocal. */
  .req.req-off { opacity: .25; }

  #vocal-toggle.on {
    border-style: solid; border-color: var(--accent-yellow);
    background: var(--surface-soft); color: var(--ink); font-weight: 600;
  }

  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .spin { animation: spin 1s linear infinite; }

  @media (max-width: 768px) {
    .form-wrap { padding: var(--space-base); }
    .form-card { padding: var(--space-base); }
    h1.page-title { font-size: 22px; }
    .actions-bar { flex-direction: column; align-items: stretch; }
    .actions-bar .right .btn { flex: 1; justify-content: center; }
  }

  /* ── Champ Description · bande titre + micro (meme look que les notes du
     suivi · voir workflow-engine.js .wfe-note-box). Prefixe nd- pour eviter
     les collisions. ─────────────────────────────────────────────────────── */
  .nd-note-box { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
  .nd-note-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--surface-strong); color: var(--ink);
    font-size: 12px; font-weight: 600; padding: 8px 12px;
  }
  .nd-note-head .req { color: var(--semantic-down); }
  .nd-note-ta {
    display: block; border: none; border-radius: 0; background: var(--canvas);
    width: 100%; box-sizing: border-box; min-height: 96px;
    font-family: inherit; font-size: 13px; line-height: 1.5; padding: 10px 12px;
    color: var(--ink); resize: vertical;
  }
  .nd-note-ta:focus { border: none; box-shadow: none; outline: none; }

  /* Bouton micro (cree par dictee.js · classe soum-mic-btn). Cette page ne
     charge pas la CSS du suivi, donc on redefinit ici le strict necessaire. */
  .soum-mic-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; flex: 0 0 auto;
    background: var(--canvas); color: var(--body);
    border: 1px solid var(--hairline); border-radius: var(--r-full);
    cursor: pointer; vertical-align: middle;
    transition: background .15s, color .15s, border-color .15s;
  }
  .soum-mic-btn:hover { border-color: var(--primary); color: var(--primary); }
  .soum-mic-btn.is-rec { width: auto; height: 26px; min-width: 26px; padding: 0 12px; background: var(--surface-dark); color: var(--on-dark); border-color: transparent; }
  .soum-mic-btn.is-busy { color: var(--primary); border-color: var(--primary); cursor: default; }
  .soum-mic-spin { animation: soum-mic-rot .8s linear infinite; transform-origin: 50% 50%; }
  @keyframes soum-mic-rot { to { transform: rotate(360deg); } }
  .soum-mic-wave { display: inline-flex; align-items: center; gap: 2.5px; height: 15px; }
  .soum-mic-wave i { display: block; width: 2px; border-radius: 999px; background: currentColor; }
  .soum-mic-wave.is-live i { height: 4px; transition: none; }
  .soum-mic-wave:not(.is-live) i { height: 100%; transform: scaleY(0.3); transform-origin: center; animation: soum-mic-eq .9s ease-in-out infinite; }
  .soum-mic-wave:not(.is-live) i:nth-child(1){animation-delay:0s}
  .soum-mic-wave:not(.is-live) i:nth-child(2){animation-delay:.15s}
  .soum-mic-wave:not(.is-live) i:nth-child(3){animation-delay:.3s}
  .soum-mic-wave:not(.is-live) i:nth-child(4){animation-delay:.45s}
  .soum-mic-wave:not(.is-live) i:nth-child(5){animation-delay:.6s}
  @keyframes soum-mic-eq { 0%,100%{transform:scaleY(0.25)} 50%{transform:scaleY(1)} }

  /* ── Validation champs obligatoires ──────────────────────────────────── */
  .field.invalid input,
  .field.invalid textarea,
  .field.invalid .pill-picker-trigger,
  .field.invalid .nd-note-box { border-color: var(--semantic-down); }
  .field.invalid .chip-group { outline: 1px solid var(--semantic-down); outline-offset: 3px; border-radius: var(--r-pill); }

  .req-banner {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: var(--space-base); padding: 10px var(--space-base);
    background: #fff1f0; border: 1px solid var(--semantic-down);
    border-radius: var(--r-md); color: var(--semantic-down); font-size: 13px;
  }
  .req-banner-lead { font-weight: 600; }

/* Champ facultatif mais fortement souhaitable · le courriel n'est pas
   obligatoire (une demande par telephone peut ne pas en avoir), mais sans
   lui on ne peut ni envoyer le lien de depot de photos, ni les suivis
   automatiques. On le marque donc plus fort que ": optionnel" sans le
   passer en rouge, qui est reserve au vraiment obligatoire. */
.field label .reco {
  color: var(--primary); font-weight: 600;
  text-transform: none; letter-spacing: 0; margin-left: 4px;
}
.field-note {
  font-size: 11px; color: var(--muted-soft);
  margin-top: 5px; line-height: 1.4;
}