/* ─────────────────────────────────────────────────────────────────────
   SITEmate — feuille de style

   Direction « Chantier » : le registre des outils qu'un conducteur de
   travaux a déjà ouverts à côté. Barre latérale sombre, fond gris,
   cartes blanches posées dessus. Le bleu porte l'action, l'ambre
   alerte, chaque état a sa pastille.

   ── Deux registres, un seul fichier ─────────────────────────────────

   TERRAIN — la conversation (body.fil). Elle s'ouvre dehors, sur un
   téléphone, au soleil, souvent avec des gants. Bulles franches, mes
   messages à droite, ceux des autres à gauche, cibles larges.

   BUREAU — planning, compte rendu, documents, équipe. Ils se lisent
   assis, sur un écran large, par quelqu'un qui compare des dates et des
   quantités. Barre latérale, cartes, tableaux à colonnes alignées.

   Les traiter pareil, c'est se tromper sur l'un des deux.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Encre et gris — légèrement bleutés, jamais un gris pur. */
  --encre: #161a1f;
  --encre-douce: #39414b;
  --gris-texte: #6b747e;
  --canevas: #eef0f2;
  --surface: #ffffff;
  --gris: #f3f5f7;
  --trait: #dde1e6;
  --rail-fond: #1d232b;
  --rail-texte: #b9c2cc;
  --rail-faible: #77828e;

  /* Une seule couleur porte l'action. */
  --bleu: #2f6ea8;
  --bleu-fonce: #255882;
  --bleu-pale: #eaf1f7;

  /* L'ambre alerte et signe la marque — il ne peint aucun bouton. */
  --ambre: #d98200;
  --ambre-pale: #fdf3e3;
  --ambre-texte: #7d4c00;

  --rouge: #c2372c;
  --rouge-pale: #fbe8e5;
  --vert: #137a52;
  --vert-pale: #e4f2ec;

  --rayon: 8px;
  --rayon-petit: 5px;
  --gouttiere: 16px;
  --rail-largeur: 236px;

  --ombre: 0 1px 2px rgba(22, 26, 31, 0.06), 0 1px 1px rgba(22, 26, 31, 0.04);
  --ombre-haute: 0 4px 14px -6px rgba(22, 26, 31, 0.22);

  --chiffres: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #e9edf1;
    --encre-douce: #c3cbd4;
    --gris-texte: #98a2ad;
    --canevas: #0f1318;
    --surface: #171c22;
    --gris: #1d232b;
    --trait: #2c333c;
    --rail-fond: #12161b;
    --rail-texte: #aab4c0;
    --rail-faible: #6d7885;

    --bleu: #5b9bd0;
    --bleu-fonce: #78b0de;
    --bleu-pale: #18242f;

    --ambre: #e8a13a;
    --ambre-pale: #2c2314;
    --ambre-texte: #e8a13a;

    --rouge: #ef6a5e;
    --rouge-pale: #331b19;
    --vert: #3cbd8b;
    --vert-pale: #12291f;

    --ombre: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ombre-haute: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canevas);
  color: var(--encre);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Les chiffres s'alignent. Une colonne de marges qui ondule ne se lit pas. */
.chiffres b, .compare b, .act-dates, .act-id, .dcma-val, .dcma-num,
.compteur, .effet, .cel, code, .heure, .sec { font-variant-numeric: tabular-nums; }

.loading { color: var(--gris-texte); padding: 48px 0; text-align: center; }

/* ================================================================== */
/*  La coquille                                                        */
/* ================================================================== */

#app { min-height: 100vh; min-height: 100dvh; }

.corps {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gouttiere) 64px;
  min-height: 100vh;
  min-height: 100dvh;
}

/* La barre latérale n'existe qu'à partir d'un écran large : sur un
   téléphone, l'écran appartient à la conversation. */
.rail { display: none; }

@media (min-width: 900px) {
  #app.avec-rail {
    display: grid;
    grid-template-columns: var(--rail-largeur) minmax(0, 1fr);
    /* La barre est collante et ne fait donc qu'un écran de haut. Sans
       ce fond porté par la grille elle-même, la colonne sombre
       s'arrête au milieu d'une page longue. */
    background: linear-gradient(
      to right,
      var(--rail-fond) 0 var(--rail-largeur),
      var(--canevas) var(--rail-largeur)
    );
  }

  .rail {
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: var(--rail-fond);
    color: var(--rail-texte);
    padding: 16px 12px 20px;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
  }

  .rail-marque {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: #fff;
    min-height: 0;
  }
  .rail-marque b { font-size: 15px; font-weight: 650; letter-spacing: -0.012em; }

  .rail-bloc { display: flex; flex-direction: column; gap: 1px; }
  .rail-bloc h5 {
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rail-faible);
    margin: 0 0 6px 8px;
  }
  .rail-pied { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

  .lien-rail {
    background: none;
    border: none;
    text-align: left;
    padding: 7px 9px;
    border-radius: var(--rayon-petit);
    color: var(--rail-texte);
    font: inherit;
    font-size: 13.5px;
    min-height: 0;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lien-rail:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
  .lien-rail.on { background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; }

  .corps { padding: 0 32px 72px; max-width: 1000px; margin: 0; }

  /* La barre latérale porte déjà la navigation : le bandeau du haut
     n'a plus à la répéter. L'appel, lui, n'est pas de la navigation —
     c'est une action, et elle reste à portée sur les deux registres. */
  #app.avec-rail .row-actions > button:not(.bouton-appel) { display: none; }
  #app.avec-rail .bar .back { display: none; }
}

/* ================================================================== */
/*  En-tête de page                                                    */
/* ================================================================== */

header.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 22px;
  position: sticky;
  top: 0;
  background: var(--canevas);
  z-index: 5;
}

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--rayon-petit);
  background: var(--ambre);
  color: #16191d;
  font-weight: 800;
  font-size: 14px;
  flex: 0 0 auto;
}

.bar h1 { font-size: 16px; margin: 0; font-weight: 650; letter-spacing: -0.012em; }
.bar .spacer { flex: 1; }

.back {
  background: none;
  border: none;
  padding: 6px 8px 6px 0;
  font-size: 14.5px;
  color: var(--gris-texte);
  cursor: pointer;
  min-height: 0;
}
.back:hover { color: var(--encre); }

/* ================================================================== */
/*  Typographie                                                        */
/* ================================================================== */

h2 { font-size: 24px; margin: 0 0 6px; letter-spacing: -0.022em; font-weight: 700; }
h3 {
  font-size: 11px;
  margin: 30px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gris-texte);
  font-weight: 700;
}
p.sub { color: var(--gris-texte); margin: 0 0 22px; font-size: 14.5px; max-width: 70ch; }
p.note { color: var(--gris-texte); font-size: 13.5px; line-height: 1.55; max-width: 78ch; }
a { color: var(--bleu); }

@media (min-width: 900px) {
  h2 { font-size: 28px; }
  p.sub { font-size: 15px; }
}

/* ================================================================== */
/*  Formulaires                                                        */
/* ================================================================== */

label { display: block; margin-bottom: 14px; }
label .txt { display: block; font-size: 12.5px; font-weight: 650; margin-bottom: 5px; }
label .hint { display: block; font-size: 12.5px; color: var(--gris-texte); margin-top: 4px; }

input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px évite le zoom automatique sur iPhone */
  padding: 11px 13px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--encre);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--bleu);
  outline-offset: -2px;
  border-color: var(--bleu);
}

button {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  padding: 12px 18px;
  cursor: pointer;
  min-height: 46px;
}
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--bleu); border-color: var(--bleu); color: #fff; width: 100%; }
button.primary:hover:not(:disabled) { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
button.ghost { background: var(--surface); color: var(--encre); border-color: var(--trait); box-shadow: var(--ombre); }
button.ghost:hover:not(:disabled) { border-color: var(--gris-texte); }
button.small { min-height: 34px; padding: 6px 12px; font-size: 13px; }
button.danger { background: var(--surface); color: var(--rouge); border-color: var(--trait); }
button.danger:hover:not(:disabled) { border-color: var(--rouge); }

@media (min-width: 900px) { button.primary { width: auto; min-width: 210px; } }

.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1 1 auto; }
.row-actions { display: flex; gap: 6px; }

.bouton-lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--surface);
  color: var(--encre);
  text-decoration: none;
  box-shadow: var(--ombre);
}
.bouton-lien.primaire { background: var(--bleu); border-color: var(--bleu); color: #fff; }

/* ================================================================== */
/*  Messages du système                                                */
/* ================================================================== */

.alert {
  border-radius: var(--rayon);
  padding: 11px 13px;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.45;
  border: 1px solid transparent;
}
.alert.error { background: var(--rouge-pale); color: var(--rouge); border-color: var(--rouge); }
.alert.ok { background: var(--vert-pale); color: var(--vert); border-color: var(--vert); }
.alert.info { background: var(--bleu-pale); color: var(--encre); border-color: var(--trait); }

/* ================================================================== */
/*  Cartes et listes                                                   */
/* ================================================================== */

.card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 13px 15px;
  margin-bottom: 9px;
  background: var(--surface);
  box-shadow: var(--ombre);
  cursor: pointer;
  min-height: 0;
  font-weight: 400;
  transition: box-shadow 0.13s, border-color 0.13s;
}
.card:hover { box-shadow: var(--ombre-haute); border-color: var(--gris-texte); }
.card .name { font-weight: 650; font-size: 15.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.card .meta { color: var(--gris-texte); font-size: 13px; margin-top: 3px; }

.empty {
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  padding: 30px 20px;
  text-align: center;
  color: var(--gris-texte);
  font-size: 14px;
  margin-bottom: 16px;
  background: var(--surface);
}

.tag {
  display: inline-block;
  background: var(--gris);
  color: var(--gris-texte);
  border-radius: var(--rayon-petit);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.015em;
  vertical-align: 1px;
}
.tag.amber { background: var(--ambre-pale); color: var(--ambre-texte); }
.tag.vert { background: var(--vert-pale); color: var(--vert); }
.tag.rouge { background: var(--rouge-pale); color: var(--rouge); }

.member {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-bottom-width: 0;
  box-shadow: var(--ombre);
}
.member:first-of-type { border-radius: var(--rayon) var(--rayon) 0 0; }
.member:last-child { border-bottom-width: 1px; border-radius: 0 0 var(--rayon) var(--rayon); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bleu); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13.5px; flex: 0 0 auto;
}
.member .who { flex: 1; min-width: 0; }
.member .who b { display: block; font-weight: 650; font-size: 14.5px; }
.member .who span { display: block; color: var(--gris-texte); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.copybox {
  display: flex; gap: 8px; align-items: center;
  background: var(--gris); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 10px 12px; margin: 10px 0 4px;
}
.copybox code { font-size: 12px; word-break: break-all; flex: 1; font-family: var(--chiffres); }

.liste-note { margin: 0; padding-left: 20px; color: var(--gris-texte); font-size: 13.5px; line-height: 1.6; }
.liste-note li { margin-bottom: 6px; }

/* ================================================================== */
/*  Accueil non connecté                                               */
/* ================================================================== */

.hero { padding: 44px 0 8px; }
.hero .mark { font-size: 36px; font-weight: 800; letter-spacing: -0.035em; }
.hero .mark em { font-style: normal; color: var(--bleu); }
.hero p { color: var(--gris-texte); font-size: 15.5px; margin: 8px 0 28px; max-width: 46ch; }

.switch { text-align: center; margin-top: 18px; font-size: 14px; color: var(--gris-texte); }
.switch button { background: none; border: none; padding: 4px; font-weight: 650; text-decoration: underline; color: var(--bleu); min-height: 0; font-size: 14px; }

footer.foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--trait); color: var(--gris-texte); font-size: 12.5px; }

/* ================================================================== */
/*  TERRAIN — la conversation                                          */
/* ================================================================== */

body.fil .corps { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-bottom: 0; }
body.fil header.bar { margin-bottom: 0; flex-wrap: wrap; row-gap: 8px; }

body.fil .bar h1 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.fil .bar .spacer { display: none; }

/* Les onglets passent sous le titre, en bande défilante : c'est le
   geste du pouce, et « Réfection voirie — Rue Pasteur » plus quatre
   onglets ne tiennent pas côte à côte sur 390 px. */
body.fil .row-actions {
  flex: 1 0 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 7px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
body.fil .row-actions::-webkit-scrollbar { display: none; }
body.fil .row-actions button {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 36px;
  border-radius: 999px;
  font-size: 13px;
  padding: 7px 14px;
}
@media (min-width: 620px) {
  body.fil header.bar { flex-wrap: nowrap; }
  body.fil .bar .spacer { display: block; flex: 1; }
  body.fil .row-actions { flex: 0 0 auto; overflow: visible; }
}

.fil-sub {
  color: var(--gris-texte);
  font-size: 12.5px;
  margin: 0;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--trait);
}

.chat-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 12px;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  /* L'écart de base est petit : c'est celui qui sépare deux messages
     de la même personne. Le vrai souffle est ajouté plus bas, quand
     quelqu'un d'autre prend la parole. */
  gap: 6px;
}

.jour {
  text-align: center;
  font-size: 11px;
  font-weight: 650;
  color: var(--gris-texte);
  margin: 10px 0 4px;
  letter-spacing: 0.02em;
}

/* Un message, c'est la bulle PUIS son heure, l'une sous l'autre. Ce
   petit décalage gris est ce qui sépare deux messages : sans lui, deux
   bulles se touchent et on ne sait plus où l'une finit. */
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
/* Une nouvelle prise de parole respire ; la suite du même auteur reste
   groupée. On l'obtient en AJOUTANT de la marge à la première, jamais
   en en retirant à la suivante : une marge négative ferait passer la
   bulle par-dessus l'heure du message précédent. */
.msg:not(.suite) { margin-top: 14px; }
.msg.suite { margin-top: 0; }
.msg.me { align-items: flex-end; }

/* Les miens à droite, en bleu plein. Les autres à gauche, sur une
   carte blanche. Au soleil, une bulle pâle sur fond clair disparaît. */
.bulle {
  max-width: 84%;
  border-radius: 16px;
  padding: 10px 13px 8px;
  font-size: 15px;
  line-height: 1.46;
  box-shadow: var(--ombre);
}
.msg.me .bulle {
  background: var(--bleu);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg:not(.me):not(.assistant) .bulle {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-bottom-left-radius: 4px;
}

.bulle .auteur { font-size: 11.5px; font-weight: 700; margin-bottom: 3px; color: var(--bleu); }
.bulle .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg > .heure { font-size: 11px; color: var(--gris-texte); padding: 0 6px; letter-spacing: 0.01em; }
.msg > .heure .attente { color: var(--ambre-texte); font-weight: 600; }
.msg.me .bulle .sec { color: rgba(255, 255, 255, 0.72); }
.msg.me .bulle .transcript { color: rgba(255, 255, 255, 0.88); border-left-color: rgba(255, 255, 255, 0.4); }
.msg.me .bulle .doc { color: #fff; }

.bulle .photo { display: block; max-width: 100%; border-radius: 9px; margin: 2px 0 5px; }
.bulle .vocal { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.bulle .vocal audio { height: 34px; max-width: 220px; }
.bulle .sec { font-size: 11.5px; color: var(--gris-texte); }

.bulle .transcript {
  font-size: 13.5px;
  font-style: italic;
  color: var(--gris-texte);
  border-left: 2px solid var(--trait);
  padding-left: 9px;
  margin: 5px 0 2px;
}

.bulle .doc { display: flex; align-items: center; gap: 9px; text-decoration: none; padding: 3px 0; color: var(--encre); }
.bulle .doc b { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.bulle .doc-ico { font-size: 22px; }

/* L'assistant : ni à droite ni à gauche. Une bande pleine largeur,
   bordée d'ambre. On doit voir sans lire que ce n'est pas un collègue. */
.msg.assistant { align-items: stretch; }
.msg.assistant .bulle {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--ambre);
  border-radius: var(--rayon);
  max-width: 100%;
  width: 100%;
}
.msg.assistant .auteur.assistant {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ambre-texte);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.auteur.assistant .pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--ambre);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: none;
}

.action-bulle {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: var(--surface);
  border-color: var(--ambre);
  color: var(--ambre-texte);
  font-weight: 650;
}

/* --- le compositeur --- */

.composer {
  border-top: 1px solid var(--trait);
  background: var(--surface);
  padding: 10px var(--gouttiere) max(10px, env(safe-area-inset-bottom));
  margin: 0 calc(-1 * var(--gouttiere));
}
.composer .etat { font-size: 12px; color: var(--gris-texte); padding: 0 2px 6px; min-height: 0; }
.composer .etat:empty { display: none; }
.composer .etat.erreur { color: var(--rouge); }
.composer .etat.attente { color: var(--gris-texte); font-weight: 600; }

.barre-outils { display: flex; align-items: flex-end; gap: 8px; }
.barre-outils textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  border-radius: 24px;
  padding: 12px 16px;
  max-height: 120px;
  min-height: 48px;
  line-height: 1.35;
  background: var(--gris);
}
.barre-outils textarea::placeholder { font-size: 15px; }

.rond {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--gris);
  border: 1px solid var(--trait);
  font-size: 19px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rond.envoi { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.rond.actif { background: var(--rouge); border-color: var(--rouge); color: #fff; animation: pulse 1.2s infinite; }

@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.55 } }
@media (prefers-reduced-motion: reduce) { .rond.actif { animation: none; } }

/* Sur un écran large la conversation reste étroite : une ligne de mille
   pixels ne se lit pas, et ce fil sera surtout lu sur un téléphone. */
@media (min-width: 900px) { body.fil .corps { max-width: 760px; } }

/* --- hors ligne --- */

.bandeau-reseau {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--rouge);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
}
.msg.en-attente .bulle { opacity: 0.6; }
.msg.refuse .bulle { opacity: 1; border: 1px solid var(--rouge); }
.msg .echec { color: var(--rouge); font-size: 12.5px; font-weight: 600; margin-top: 6px; line-height: 1.4; }

/* ================================================================== */
/*  BUREAU — le compte rendu                                           */
/* ================================================================== */

.cr-tete { margin-bottom: 18px; }
.cr-tete .tag { margin: 0 0 8px; display: inline-block; }
.cr-tete h2 { text-transform: capitalize; }

.cr-synthese {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--encre);
  border-radius: var(--rayon);
  padding: 14px 16px;
  margin-bottom: 8px;
  box-shadow: var(--ombre);
}
.cr-synthese p { margin: 0; font-size: 15.5px; line-height: 1.55; }

.cr-section h3 { margin-top: 26px; }
.cr-section.vide h3 { color: var(--trait); }
.cr-section .compteur {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--gris);
  color: var(--gris-texte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.obs {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-bottom-width: 0;
  padding: 13px 15px;
  position: relative;
  box-shadow: var(--ombre);
}
.obs:first-of-type { border-radius: var(--rayon) var(--rayon) 0 0; }
.obs:last-child { border-bottom-width: 1px; border-radius: 0 0 var(--rayon) var(--rayon); }
.obs-txt { font-size: 15px; line-height: 1.5; max-width: 84ch; }
.obs-txt.attention { border-left: 3px solid var(--ambre); padding-left: 11px; margin-left: -3px; }
.obs-txt.critique { border-left: 3px solid var(--rouge); padding-left: 11px; margin-left: -3px; font-weight: 600; }
.obs-src { font-size: 12.5px; color: var(--gris-texte); margin-top: 4px; }
.obs > button { margin-top: 8px; }
.obs textarea { font-size: 15px; }

.cr-clarifier {
  background: var(--ambre-pale);
  border: 1px solid var(--ambre);
  border-radius: var(--rayon);
  padding: 4px 16px 16px;
  margin-top: 26px;
}
.cr-clarifier h3 { margin-top: 18px; color: var(--ambre-texte); }

.cr-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cr-photos figure { margin: 0; }
.cr-photos img { width: 100%; border-radius: var(--rayon); display: block; border: 1px solid var(--trait); }
.cr-photos figcaption { font-size: 12.5px; color: var(--gris-texte); margin-top: 5px; line-height: 1.4; }
@media (min-width: 900px) { .cr-photos { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

.attendu {
  color: var(--gris-texte);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 4px;
  padding: 11px 13px;
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  background: var(--surface);
}
.note.depense { margin-top: 14px; }

/* ================================================================== */
/*  BUREAU — la bibliothèque                                           */
/* ================================================================== */

.depot {
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  padding: 16px;
  margin-bottom: 10px;
  background: var(--surface);
}
.depot label { margin-bottom: 10px; }
.depot .note { margin: 10px 0 0; }
.depot .etat { font-size: 13.5px; margin-top: 10px; color: var(--gris-texte); }
.depot .etat.erreur { color: var(--rouge); font-weight: 600; }

.meta.erreur-doc { color: var(--rouge); margin-top: 6px; line-height: 1.45; }

.reprise-planning {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--rayon);
  background: var(--bleu-pale);
  border: 1px solid var(--trait);
}
.reprise-planning .note { margin: 0; }
.reprise-planning .hint { display: block; font-size: 12.5px; color: var(--gris-texte); margin-top: 8px; }
.reprise-planning label { margin: 0; }
.reprise-planning label .txt { font-size: 12.5px; }
.reprise h3 { margin-top: 22px; }

.extrait {
  border-left: 3px solid var(--trait);
  padding: 8px 0 8px 12px;
  margin-bottom: 12px;
}
.extrait-src { font-size: 12.5px; font-weight: 650; color: var(--gris-texte); margin-bottom: 4px; }
.extrait-txt { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* ================================================================== */
/*  BUREAU — le planning                                               */
/* ================================================================== */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 18px 0 12px;
}
.chiffres > div {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 13px 15px;
  box-shadow: var(--ombre);
}
.chiffres .lbl, .compare .lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gris-texte);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 4px;
}
.chiffres b { font-size: 21px; letter-spacing: -0.025em; }
@media (min-width: 900px) { .chiffres b { font-size: 24px; } }

.note.mention { font-style: italic; margin-top: 6px; }

.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; }
.compare > div { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px 14px; }
.compare b { font-size: 17px; }

.choix-activite {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--trait);
  margin: 0;
}
.choix-activite input { width: auto; flex: 0 0 auto; margin-top: 3px; }
.choix-activite .pourquoi { color: var(--gris-texte); font-size: 13.5px; }

.avertissements { margin: 14px 0; }
.avertissements summary { cursor: pointer; font-size: 13.5px; color: var(--gris-texte); font-weight: 650; }
.avertissements ul { margin-top: 10px; }

/* Le tableau des activités : des colonnes alignées sur un écran large,
   des lignes empilées sur un téléphone. */
.table-planning {
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.entete-act { display: none; }
.ligne-act { padding: 12px 15px; border-top: 1px solid var(--trait); }
.ligne-act:first-of-type { border-top: none; }
.ligne-act.critique { box-shadow: inset 3px 0 0 var(--rouge); }
.ligne-act.faite { opacity: 0.55; }
.act-nom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.act-id { font-size: 11px; color: var(--gris-texte); font-family: var(--chiffres); }
.act-dates { font-size: 13px; color: var(--gris-texte); margin-top: 3px; }
.act-dates .cel + .cel::before { content: ' · '; color: var(--trait); }

@media (min-width: 900px) {
  .entete-act {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 96px 96px 104px;
    gap: 14px;
    padding: 10px 15px;
    background: var(--gris);
    border-bottom: 1px solid var(--trait);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gris-texte);
  }
  .entete-act span:not(:first-child) { text-align: right; }

  .ligne-act {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 96px 96px 104px;
    gap: 14px;
    align-items: baseline;
  }
  .ligne-act:hover { background: var(--gris); }
  .act-dates { display: contents; margin-top: 0; }
  .act-dates .cel { display: block; text-align: right; font-size: 13px; }
  .act-dates .cel + .cel::before { content: none; }
  .act-dates .marge { font-weight: 650; color: var(--encre-douce); }
  .ligne-act.critique .marge { color: var(--rouge); }
}

/* --- les 14 contrôles --- */

.dcma {
  border: 1px solid var(--trait);
  border-left-width: 3px;
  border-radius: var(--rayon);
  padding: 12px 15px;
  margin-bottom: 8px;
  background: var(--surface);
  box-shadow: var(--ombre);
}
.dcma.ok { border-left-color: var(--vert); }
.dcma.ko { border-left-color: var(--rouge); }
.dcma.na { border-left-color: var(--trait); opacity: 0.75; }
.dcma-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dcma-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--rayon-petit);
  background: var(--gris); color: var(--gris-texte);
  font-size: 11.5px; font-weight: 700; flex: 0 0 auto; font-family: var(--chiffres);
}
.dcma-etat { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.dcma.ok .dcma-etat { color: var(--vert); }
.dcma.ko .dcma-etat { color: var(--rouge); }
.dcma.na .dcma-etat { color: var(--gris-texte); }
.dcma-val { font-size: 15px; font-weight: 650; margin-top: 7px; }
.dcma-seuil, .dcma-detail { font-size: 13px; color: var(--gris-texte); margin-top: 3px; line-height: 1.45; }

/* --- le pointage : ce qui attend une décision --- */

.pointage .proposition { cursor: default; border-left: 3px solid var(--bleu); }
.pointage .proposition .effet { color: var(--encre-douce); font-weight: 600; margin-top: 6px; }
.pointage .etat { font-size: 13px; margin-top: 8px; color: var(--gris-texte); }
.pointage .etat.ok { color: var(--vert); font-weight: 650; }
.pointage .etat.erreur { color: var(--rouge); font-weight: 650; }
.pointage .etat:empty { display: none; }

/* Une action qui détruit ne se confond pas avec les autres : elle est
   en bas, séparée, et elle le dit. */
.zone-danger {
  margin-top: 40px;
  padding: 16px;
  border: 1px solid var(--trait);
  border-left: 3px solid var(--rouge);
  border-radius: var(--rayon);
  background: var(--surface);
}
.zone-danger h3 { margin-top: 0; color: var(--rouge); border: none; }
.zone-danger .note { margin-bottom: 14px; }

.card .effet { color: var(--encre-douce); font-weight: 600; margin-top: 6px; }

/* ================================================================== */
/*  Annoter une photo                                                  */
/*                                                                     */
/*  L'éditeur prend tout l'écran : on dessine avec le doigt, et une     */
/*  fenêtre à moitié cachée par le clavier ne sert à rien.             */
/* ================================================================== */

.bouton-annoter { margin: 2px 0 6px; }
.msg.me .bouton-annoter { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.origine-photo { display: block; font-size: 12px; margin-bottom: 4px; }
.msg.me .origine-photo { color: rgba(255, 255, 255, 0.85); }

.voile-annot {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 13, 17, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.fenetre-annot {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  width: min(880px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fenetre-annot header { display: flex; align-items: center; gap: 10px; }
.fenetre-annot header b { font-size: 15px; }
.fenetre-annot header .spacer { flex: 1; }
.fenetre-annot .note { margin: 0; }
.fenetre-annot .etat { font-size: 13px; color: var(--gris-texte); }
.fenetre-annot .etat.erreur { color: var(--rouge); font-weight: 600; }
.fenetre-annot .etat:empty { display: none; }
.fenetre-annot .row > button { flex: 1 1 auto; }

.zone-toile {
  background: var(--gris);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.toile-annot {
  max-width: 100%;
  max-height: 58vh;
  display: block;
  touch-action: none; /* sinon le geste fait défiler la page au lieu de dessiner */
  cursor: crosshair;
}

.outils-annot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.groupe-outil { display: flex; gap: 5px; }
.groupe-outil.couleurs { gap: 7px; }

.outil.on { background: var(--bleu); border-color: var(--bleu); color: #fff; }

.pastille-couleur {
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--trait);
  cursor: pointer;
}
.pastille-couleur.on { border-color: var(--encre); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--encre); }

/* ─────────────────────────────────────────────────────────────────────
   L'appel

   Il ne prend pas l'écran : on reste dans la conversation pendant qu'on
   parle, et on peut ouvrir le planning sans raccrocher. D'où un panneau
   posé dans un coin, repliable, qui survit au changement d'écran.
   ───────────────────────────────────────────────────────────────────── */

.appel-panneau {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--vert);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-haute);
}

.appel-panneau.replie .appel-gens,
.appel-panneau.replie .appel-corps,
.appel-panneau.replie .appel-etat,
.appel-panneau.replie .appel-actions {
  display: none;
}

.appel-tete {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.appel-tete .spacer { flex: 1; }

.appel-chrono {
  font-family: var(--chiffres);
  font-size: 13px;
  color: var(--gris-texte);
  font-variant-numeric: tabular-nums;
}

.appel-plier {
  border: 0;
  background: none;
  color: var(--gris-texte);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

/* La pastille bat : c'est le seul signe qui dit « en ce moment ». */
.appel-pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vert);
  flex: none;
  animation: appel-bat 1.6s ease-in-out infinite;
}
@keyframes appel-bat {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .appel-pastille { animation: none; }
}

.appel-gens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.appel-gen {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gris);
  border: 1px solid var(--trait);
  color: var(--encre-douce);
}
.appel-gen.moi { background: var(--bleu-pale); border-color: var(--bleu); color: var(--bleu-fonce); }
.appel-gen.relie { background: var(--vert-pale); border-color: var(--vert); color: var(--vert); }
.appel-gen.vide { background: none; border-style: dashed; color: var(--gris-texte); }

.appel-corps {
  max-height: 180px;
  overflow-y: auto;
  background: var(--gris);
  border-radius: var(--rayon-petit);
  padding: 8px 10px;
}

.appel-dits p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--encre);
}
.appel-dits p:last-child { margin-bottom: 0; }
.appel-dits b { color: var(--encre-douce); }
.appel-dits .appel-vide { color: var(--gris-texte); font-size: 12px; }

.appel-etat { font-size: 12px; color: var(--gris-texte); min-height: 1em; }
.appel-etat.erreur { color: var(--rouge); }
.appel-etat.ok { color: var(--vert); }

.appel-actions { display: flex; gap: 8px; }

.appel-btn {
  flex: 1;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--trait);
  background: var(--surface);
  color: var(--encre);
  cursor: pointer;
}
.appel-btn:hover { background: var(--gris); }
.appel-btn.actif { background: var(--ambre-pale); border-color: var(--ambre); color: var(--ambre-texte); }
.appel-btn.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.appel-btn.danger:hover { filter: brightness(0.94); }
.appel-btn[disabled] { opacity: 0.6; cursor: default; }

/* Les flux audio : présents dans la page, jamais montrés. */
.appel-sons { display: none; }

.appel-bandeau {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--vert-pale);
  border: 1px solid var(--vert);
  border-radius: var(--rayon);
  color: var(--encre);
}
.appel-bandeau .spacer { flex: 1; }

.appel-refus {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 70;
  width: min(420px, calc(100vw - 32px));
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--rouge);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-haute);
}
.appel-refus p { margin: 6px 0 10px; font-size: 13px; color: var(--encre-douce); }

@media (max-width: 560px) {
  .appel-panneau {
    left: 12px;
    right: 12px;
    width: auto;
  }
  .appel-corps { max-height: 130px; }
}

/* L'appel est la seule action du bandeau : on la distingue. */
.bouton-appel { border-color: var(--vert); color: var(--vert); font-weight: 600; }
.bouton-appel:hover { background: var(--vert-pale); }

/* ================================================================== */
/*  La liste des chantiers                                             */
/* ================================================================== */

/* Ouvrir d'un côté, supprimer de l'autre : les deux gestes sont sur la
   même ligne, mais la corbeille reste discrète tant qu'on ne la vise
   pas. Une suppression ne doit jamais être à portée de pouce distrait. */
.carte-chantier {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin-bottom: 10px;
  overflow: hidden;
}

.carte-chantier .carte-ouvrir {
  flex: 1;
  text-align: left;
  background: none;
  border: 0;
  padding: 14px 16px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  min-width: 0;
}
.carte-chantier .carte-ouvrir:hover { background: var(--gris); }
.carte-chantier .name { font-weight: 650; font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.carte-chantier .meta { color: var(--gris-texte); font-size: 12.5px; margin-top: 3px; }

.carte-supprimer {
  flex: none;
  width: 52px;
  border: 0;
  border-left: 1px solid var(--trait);
  background: none;
  color: var(--gris-texte);
  font-size: 16px;
  cursor: pointer;
  opacity: 0.55;
}
.carte-supprimer:hover { background: var(--rouge-pale); color: var(--rouge); opacity: 1; }

.carte-confirme {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--rouge-pale);
  font-size: 13.5px;
  color: var(--encre);
}
.carte-confirme .spacer { flex: 1; }
.carte-chantier.confirme .carte-confirme { display: flex; }

@media (max-width: 520px) {
  .carte-confirme { font-size: 12.5px; padding: 0 8px; }
}

/* ================================================================== */
/*  La mémoire du chantier                                            */
/* ================================================================== */

.voile-memoire {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px 16px;
  background: rgba(22, 26, 31, 0.55);
  overflow-y: auto;
}

.fenetre-memoire {
  width: min(680px, 100%);
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-haute);
  padding: 16px 18px 20px;
}

.fenetre-memoire header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.fenetre-memoire header .spacer { flex: 1; }
.fenetre-memoire > .note { margin: 8px 0 14px; }

.champ-memoire {
  width: 100%;
  padding: 13px 14px;
  font-size: 16px; /* 16px : en dessous, iOS zoome tout seul sur le champ */
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--gris);
  color: var(--encre);
}
.champ-memoire:focus { outline: 2px solid var(--bleu); outline-offset: 1px; background: var(--surface); }

/* La phrase du haut : ce que la mémoire a trouvé, et rien de plus. */
.memoire-reponse {
  font-size: 15px;
  line-height: 1.5;
  padding: 11px 13px;
  border-radius: var(--rayon-petit);
  background: var(--gris);
  color: var(--encre-douce);
}
.memoire-reponse:empty { display: none; }
.memoire-reponse.trouve { background: var(--bleu-pale); color: var(--bleu-fonce); font-weight: 600; }
/* Ne rien trouver n'est pas une erreur : c'est une réponse. */
.memoire-reponse.vide { background: var(--ambre-pale); color: var(--ambre-texte); }

.memoire-pieces { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.memoire-piece {
  border: 1px solid var(--trait);
  border-left: 3px solid var(--trait);
  border-radius: var(--rayon-petit);
  padding: 11px 13px;
}
.memoire-piece.photo { border-left-color: var(--bleu); }
.memoire-piece.vocal { border-left-color: var(--vert); }
.memoire-piece.appel { border-left-color: var(--vert); }
.memoire-piece.document { border-left-color: var(--gris-texte); }
.memoire-piece.compte-rendu { border-left-color: var(--ambre); }

.memoire-piece header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}
.memoire-ico { font-size: 14px; }
.memoire-quand { color: var(--gris-texte); font-size: 12px; }

.memoire-extrait {
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--encre);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.memoire-vignette {
  display: block;
  max-height: 160px;
  border-radius: var(--rayon-petit);
  margin: 0 0 9px;
}

.lecture-seule { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.lecture-seule .note { margin: 0; }
.lecture-seule button { align-self: flex-start; }

@media (max-width: 560px) {
  .voile-memoire { padding: 0; }
  .fenetre-memoire { width: 100%; min-height: 100%; border-radius: 0; }
}