/* Studio OS. Calme, lisible d'un coup d'œil, tout sous le pouce sur téléphone.
   Une seule couleur vive (l'attention) ; le vert est réservé au résultat confirmé par un studio. */
:root {
  color-scheme: light dark;
  --papier: #f6f2ea; --surface: #fffdf8; --creux: #ece6da; --trait: #dcd4c4;
  --encre: #1f1c17; --doux: #6a6358;
  --accent: #b4492a; --sur-accent: #fff;
  --ambre: #8a5a00; --ambre-fond: #f6e8c8;
  --vert: #24694b; --rouge: #a3321f;
  --moi: #e6dfcf;
  --titre: ui-serif, Georgia, "Times New Roman", serif;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --hauteur: 100dvh;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #191714; --surface: #24211c; --creux: #2d2923; --trait: #3a352d;
    --encre: #f1ece2; --doux: #a9a194;
    --accent: #e27a55; --sur-accent: #1f1209;
    --ambre: #e3b35c; --ambre-fond: #3a2e16;
    --vert: #6fc29b; --rouge: #ef8d78;
    --moi: #3a352c;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
a:active, button:not(:disabled):active, summary:active { opacity: .6; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--papier); color: var(--encre); font: 17px/1.42 var(--texte); -webkit-text-size-adjust: 100%; }
#app { height: var(--hauteur); }
h1, h2, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demarrage { display: flex; align-items: center; justify-content: center; height: 100%; font: 500 24px var(--titre); color: var(--doux); }
.discret { color: var(--doux); font-size: 14px; }
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.extrait { display: block; overflow-wrap: anywhere; }
.une-ligne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--doux); }

/* Cadres */
.cadre { height: 100%; }
.ecran { height: 100%; display: flex; flex-direction: column; min-width: 0; }
.defile { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; overscroll-behavior: contain; }
.tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: calc(env(safe-area-inset-top) + 4px) 8px 4px 16px; }
.tete-lien { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--doux); border-radius: 50%; }
.fil-tete { padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; border-bottom: 1px solid var(--trait); }
.fil-tete h1 { font: 500 21px/1.2 var(--titre); overflow-wrap: anywhere; }
.bas { padding: 4px 8px calc(env(safe-area-inset-bottom) + 4px); border-top: 1px solid var(--trait); }

.connexion { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--doux); min-width: 0; }
.connexion i { width: 8px; height: 8px; border-radius: 50%; background: var(--doux); flex: none; }
.connexion[data-connexion="hors_ligne"] { color: var(--ambre); }
.connexion[data-connexion="hors_ligne"] i { background: var(--ambre); }
.connexion[data-connexion="en_direct"] i { background: var(--vert); }

/* Maintenant */
.phrase { padding: 8px 0 18px; }
.phrase h1 { font: 500 32px/1.15 var(--titre); letter-spacing: -.01em; }
.phrase p { color: var(--doux); margin-top: 6px; font-size: 15px; }
.section { margin-bottom: 22px; }
.section h2 { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--doux); margin-bottom: 8px; }
.cartes { display: flex; flex-direction: column; gap: 10px; }
.carte { background: var(--surface); border-radius: 16px; box-shadow: 0 0 0 1px var(--trait); overflow: hidden; border-left: 4px solid var(--accent); }
.carte.a-voir { border-left-color: var(--ambre); }
.carte.alerte { border-left-color: var(--rouge); }
.carte-corps { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 4px; min-height: 44px; }
.carte-corps strong { font-weight: 600; overflow-wrap: anywhere; }
.surtitre { display: block; font-size: 13px; color: var(--doux); overflow-wrap: anywhere; }
.bouton-carte { display: block; width: 100%; min-height: 48px; padding: 0 14px; background: none; border: 0; text-align: left; font-weight: 600; color: var(--accent); cursor: pointer; }

.echanges { display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; box-shadow: 0 0 0 1px var(--trait); overflow: hidden; }
.echanges li + li { border-top: 1px solid var(--trait); }
.echanges a { display: flex; flex-direction: column; padding: 10px 14px; min-height: 60px; min-width: 0; }
.echange-tete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.echange-tete strong { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.echange-tete .discret { flex: none; }

.liste-route { display: flex; flex-direction: column; gap: 6px; }
.route { padding: 6px 12px; background: var(--creux); border-radius: 12px; min-width: 0; }
.route-texte { padding-top: 4px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.route-lien { min-height: 44px; }

/* États d'envoi */
.remise summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; list-style: none; cursor: pointer; font-size: 13px; color: var(--doux); }
.remise summary::-webkit-details-marker { display: none; }
.remise[open] summary { color: var(--encre); }
.remise > p { font-size: 14px; color: var(--doux); }
.remise[data-etat="resultat"] summary { color: var(--vert); font-weight: 600; }
.remise[data-etat="echec"] summary { color: var(--rouge); font-weight: 600; }
.remise[data-etat="incertain"] summary { color: var(--ambre); font-weight: 600; }
.pastilles { display: inline-flex; gap: 3px; }
.pastilles i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px currentColor; }
.pastilles i.plein { background: currentColor; }
.jalons { margin: 6px 0; font-size: 13px; color: var(--doux); }
.jalons li { display: flex; justify-content: space-between; gap: 16px; padding: 1px 0; }
.jalons li.fait { color: var(--encre); }
.issue { font-size: 14px; padding: 6px 10px; border-radius: 10px; background: var(--creux); overflow-wrap: anywhere; margin-bottom: 4px; }
.remise-locale { padding: 6px 0; font-size: 13px; color: var(--ambre); }
.remise-locale[data-etat="refuse"] { color: var(--rouge); }
.remise-locale[data-etat="envoi"] { color: var(--doux); }

/* Conversation */
.fil-defile { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.jour { align-self: center; font-size: 12px; color: var(--doux); padding: 4px 10px; }
.message { max-width: 86%; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.message.moi { align-self: flex-end; align-items: flex-end; }
.bulle { padding: 9px 13px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--trait); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.moi .bulle { background: var(--moi); box-shadow: none; }
.local .bulle { background: none; box-shadow: inset 0 0 0 1.5px var(--ambre); }
.alerte .bulle { box-shadow: inset 0 0 0 1.5px var(--rouge); }
.heure { font-size: 12px; color: var(--doux); padding: 0 4px; }
.message-pied { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 10px; min-height: 24px; }
.message-pied .heure { line-height: 24px; }
.message-pied:has(summary) .heure, .message-pied:has(.bouton-texte) .heure { line-height: 44px; }
.message.moi .message-pied { justify-content: flex-end; }
.message .bouton-texte { font-size: 14px; }
.remise-bloc { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; max-width: 100%; }
.route .remise-bloc { align-items: flex-start; }
.message.sollicitation { align-self: stretch; max-width: none; background: var(--surface); border-left: 4px solid var(--accent); border-radius: 14px; padding: 10px 14px 4px; gap: 4px; box-shadow: 0 0 0 1px var(--trait); }
.message.sollicitation strong, .message.sollicitation p { overflow-wrap: anywhere; }
.vide { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 24px 16px; color: var(--doux); }

/* Barre de parole */
.composeur { flex: none; border-top: 1px solid var(--trait); background: var(--papier); padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px); display: flex; flex-direction: column; gap: 6px; }
.composeur-ligne { display: flex; align-items: flex-end; gap: 6px; }
.composeur textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; resize: none; padding: 10px 14px; line-height: 24px; border: 1px solid var(--trait); border-radius: 22px; background: var(--surface); }
.composeur textarea:focus { outline: none; border-color: var(--accent); }
.envoyer { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: var(--sur-accent); cursor: pointer; }
.envoyer:disabled { background: var(--creux); color: var(--doux); cursor: default; }
.composeur-contexte { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-left: 12px; border-left: 3px solid var(--accent); font-size: 14px; }
.composeur-contexte > div { min-width: 0; padding: 2px 0; }
.composeur-contexte .extrait { max-height: 2.8em; overflow: hidden; color: var(--doux); }
.composeur-contexte .discret { display: block; font-size: 13px; }
.composeur-erreur { color: var(--rouge); font-size: 14px; }
.choix-studio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--doux); }
.choix-studio select { min-height: 44px; flex: 1; min-width: 0; background: transparent; border: 0; font-weight: 600; color: var(--encre); }
.bouton-icone { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; border-radius: 50%; color: var(--doux); font-size: 24px; cursor: pointer; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--accent); color: var(--sur-accent); font-weight: 600; cursor: pointer; }
.bouton:disabled { background: var(--creux); color: var(--doux); }
.bouton.danger { background: var(--rouge); color: var(--papier); }
.bouton-texte { min-height: 44px; min-width: 44px; padding: 0 2px; background: none; border: 0; font-weight: 600; color: var(--accent); cursor: pointer; }
.bouton-texte.danger { color: var(--rouge); }
.actions-ligne { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Entrée */
.entree { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 24px; max-width: 480px; margin: 0 auto; overflow-y: auto; }
.entree h1 { font: 500 36px/1.1 var(--titre); }
.entree form { display: flex; flex-direction: column; gap: 10px; }
.entree label { font-size: 14px; color: var(--doux); }
.entree input { min-height: 48px; padding: 0 14px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); width: 100%; }

/* Accès */
.acces { padding-top: 16px; }
.participants { display: flex; flex-direction: column; gap: 10px; }
.participants > li { padding: 10px 14px; background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--trait); min-width: 0; }
.participant-tete { overflow-wrap: anywhere; }
.accesses > li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 0; border-top: 1px solid var(--trait); margin-top: 6px; }
.accesses > li > div:first-child { display: flex; flex-direction: column; flex: 1 1 150px; min-width: 0; overflow-wrap: anywhere; }
.lien-invitation { padding: 10px; background: var(--creux); border-radius: 10px; font-size: 14px; overflow-wrap: anywhere; user-select: all; margin: 8px 0; }

/* Activité */
.activite { padding-top: 14px; }
.journal { display: flex; flex-direction: column; }
.journal li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--trait); }
.journal a, .journal li > span:last-child { overflow-wrap: anywhere; }
.journal a { min-height: 24px; }

/* Grand écran : trois colonnes, chacune son rôle ; le texte garde une largeur de lecture. */
.bureau { display: grid; grid-template-columns: 380px minmax(0, 1fr); }
.bureau.avec-suivi { grid-template-columns: 380px minmax(0, 1fr) 320px; }
.rail { min-width: 0; border-right: 1px solid var(--trait); background: var(--creux); height: var(--hauteur); }
.rail .carte, .rail .echanges { background: var(--surface); }
.rail .route { background: var(--papier); }
.rail .phrase h1 { font-size: 28px; }
.centre { min-width: 0; height: var(--hauteur); background: var(--papier); }
.suivi { min-width: 0; height: var(--hauteur); border-left: 1px solid var(--trait); padding: 22px 18px; overflow-y: auto; }
.suivi .section h2 { font-size: 13px; }
.bureau .fil-defile, .bureau .activite, .bureau .acces { padding-left: max(24px, calc((100% - 760px) / 2)); padding-right: max(24px, calc((100% - 760px) / 2)); }
.bureau .fil-tete { padding-left: max(24px, calc((100% - 760px) / 2)); padding-right: max(24px, calc((100% - 760px) / 2)); min-height: 76px; display: flex; align-items: center; }
.bureau .composeur { padding-left: max(24px, calc((100% - 760px) / 2)); padding-right: max(24px, calc((100% - 760px) / 2)); padding-top: 12px; padding-bottom: 14px; }
.bureau .message { max-width: 72%; }
.bureau .fil-tete h1 { font-size: 26px; }