/* Synora : outil de travail du SAV. Sobre, dense, lisible.
   Une couleur = un sens, partout pareil :
   À traiter = pétrole · À valider = ambre · Relance prévue = bleu sobre · En attente du client = gris ·
   Clos = gris clair · Sensible = rouge (toujours avec le mot). Le libellé est toujours écrit.
   Messages : succès = vert · erreur = rouge · attention = ambre.
   Litiges (mêmes couleurs, même sens) : À préparer / En préparation = pétrole · Prêt à déposer = ambre ·
   Déposé = bleu sobre · Envoyé = gris · Gagné = vert · Perdu, Accepté, Remboursé = gris clair ·
   échéance à moins de 3 jours ou dépassée = rouge « Sensible », toujours avec les mots (« Urgent : dans 2 jours »,
   « Échéance dépassée »).

   CLASSES COMMUNES (à réutiliser dans toutes les pages, Pilotage compris ; pilotage.css vient après ce fichier)
   - Variables : --bg --paper --ink --muted --line --line-fort --accent --accent-hover --tint --amber --amberbg
     --red --redbg --blue --bluebg --grey --greybg --clos --closbg
   - Structure : .contenu (zone de la page) · .entete (titre h1 + outils) · .section-tete (titre h2 + lien)
     · .carte (bloc blanc) · .carte-table (bloc sans marge pour liste ou tableau) · .duo (2 colonnes)
   - Textes : h1 h2 h3 · .intro (phrase sous le titre, 72 signes de large) · .aide (texte discret) · .petit
     · .lien (lien d'action) · .texte-brut (texte à retours à la ligne gardés) · .fiche (liste « étiquette / valeur »)
   - Badges d'état : .chip + .chip-a_traiter | .chip-a_valider (= .chip-attention) | .chip-relance
     | .chip-attente_client | .chip-clos | .chip-sensible | .chip-ok (vert) | .chip-test · .tag (étiquette neutre : boutique, catégorie) · .compte (petit nombre dans
     un onglet) · .pastille (compteur du menu ; .pastille-urgente = rouge)
   - Liens d'action seuls sur leur ligne : .lien-bloc (zone de 44 px sur téléphone) · .liste-liens (liste de liens)
   - Boutons : .btn · .btn-principal · .btn-danger · .btn-petit (44 px sur téléphone)
   - Formulaires : label · input[type=text|search|date|password] · select · textarea (+ .court) · .champ
     (étiquette + champ) · .champ-q (champ large) · .champ-bouton · .recherche (ligne de filtres) · .form-pile
     (champs empilés) · .case (case à cocher)
   - Onglets : .onglets > .onglet (+ .actif) · Pagination : .pagination > a + .page-courante
   - Tableaux : .table-defile > .table-equipe (devient une liste empilée sur téléphone avec data-label)
     · lignes cliquables : .ligne-simple (grille texte / badge / date)
   - États vides : .vide (cadre en pointillés : dire pourquoi c'est vide et quoi faire)
   - Messages : .flash + .flash-ok | .flash-erreur | .flash-attention · .bandeau (+ -attention -sensible -erreur
     -cours) · .refus (phrase qui remplace un bouton interdit)
   - Chargement : .barre-charge et .spinner (gérés par app.js)
*/

:root {
  --bg: #f3f4f1;
  --paper: #fff;
  --ink: #213338;
  --muted: #566569;
  --line: #d9dfdc;
  --line-fort: #a8b6b0;
  --accent: #214f55;
  --accent-hover: #1a3f44;
  --tint: #eaf1ee;
  --amber: #755019;
  --amberbg: #fbf1dc;
  --amber-line: #e6d3a4;
  --red: #913b35;
  --redbg: #fbece9;
  --red-line: #e8bdb7;
  --blue: #2d5379;
  --bluebg: #e3ecf5;
  --blue-line: #bccfe3;
  --grey: #4b5a5e;
  --greybg: #e8ebe9;
  --clos: #5d6a6e;
  --closbg: #f1f3f1;
  --side: #203238;
  --focus: #a85b0a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 15px; line-height: 1.5; background: var(--bg); color: var(--ink); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1 { font-size: 22px; line-height: 1.3; font-weight: 650; }
h2 { font-size: 17px; line-height: 1.35; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
small, .petit { font-size: 13px; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; }

.saut { position: fixed; top: -100px; left: 16px; z-index: 100; background: #fff; color: var(--ink); padding: 12px 16px; border-radius: 6px; }
.saut:focus { top: 8px; }

/* ---------- Barre de chargement et indicateurs ---------- */
.barre-charge { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .15s; }
.barre-charge.active { opacity: 1; }
.barre-charge::before { content: ""; display: block; width: 40%; height: 100%; background: var(--accent); animation: glisse 1.1s ease-in-out infinite; }
@keyframes glisse { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes tourne { to { transform: rotate(360deg); } }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne .8s linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .barre-charge::before { animation: none; width: 100%; }
  .spinner { animation-duration: 2.4s; }
}

/* ---------- Structure ---------- */
.appli { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--side); color: #e5edea; }          /* le fond couvre toute la hauteur de la page */
.lateral-contenu { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 20px 12px; }
.marque { display: block; padding: 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -.3px; color: #fff; text-decoration: none; }
.lateral nav { display: grid; gap: 16px; }
.nav-titre { padding: 0 12px 4px; font-size: 12.5px; color: #a9bdb7; }
.nav-groupe ul { display: grid; gap: 2px; }
.nav-lien { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 6px; color: #d6e3df; text-decoration: none; }
.nav-lien:hover { background: #2c444a; color: #fff; }
.nav-lien.actif { background: #36585d; color: #fff; font-weight: 650; }
.pastille { min-width: 22px; padding: 0 7px; border-radius: 11px; background: var(--amberbg); color: var(--amber); font-size: 12.5px; font-weight: 700; text-align: center; }
.pastille-urgente { background: var(--redbg); color: var(--red); }
.lateral-pied { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid #435a60; font-size: 13.5px; color: #c9d8d3; }
.lateral-pied strong { display: block; color: #fff; }
.lateral-pied span { display: block; margin-bottom: 4px; }
.lien-bouton { background: none; border: 0; padding: 8px 0; color: #d6e3df; text-decoration: underline; text-underline-offset: 3px; text-align: left; min-height: 40px; }
.lien-bouton:hover { color: #fff; }
.haut { display: none; }

.contenu { min-width: 0; max-width: 1280px; width: 100%; padding: 24px 32px 28px; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pied { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.intro { max-width: 72ch; margin-bottom: 16px; color: var(--muted); }
.aide { font-size: 13.5px; color: var(--muted); }
.aide a { font-weight: 600; }
.donnees { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.pad-aide { padding: 12px 16px; }
.lien { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.lien:hover { color: var(--accent-hover); }
.liste-liens li + li { margin-top: 4px; }
.muted { color: var(--muted); font-weight: 400; }
.pas-de-coupure { white-space: nowrap; }
.fuseau-ligne { margin: 6px 0 0; font-size: 13px; }
.aide-statuts { margin-top: 6px; display: grid; gap: 2px; font-size: 13px; }
/* formulaire de suivi : « Mettre à jour » est le premier bouton dans le code (la touche Entrée l'active) ;
   l'ordre à l'écran remonte les boutons de délai juste sous la date */
.form-suivi .champ-statut { order: 1; } .form-suivi .champ-action { order: 2; } .form-suivi .champ-note-suivi { order: 3; }
.form-suivi .champ-date { order: 4; } .form-suivi .delais { order: 5; } .form-suivi .btn-suivi { order: 6; }
.delais { display: flex; flex-wrap: wrap; gap: 8px; }
.delais .btn { flex: 1 1 auto; padding: 4px 8px; font-size: 13px; }

/* ---------- Messages et bandeaux ---------- */
.messages { display: grid; gap: 8px; margin-bottom: 16px; }
.flash { padding: 11px 16px; border-radius: 6px; border: 1px solid var(--line-fort); background: #fff; font-weight: 550; }
.flash-ok { background: #e4f3e7; border-color: #a6d3b1; color: #1e5a33; }       /* succès : vert, distinct de « À traiter » (pétrole) */
.flash-erreur { background: var(--redbg); border-color: var(--red-line); color: var(--red); }
.flash-attention, .flash-info { background: var(--amberbg); border-color: var(--amber-line); color: var(--amber); }
.bandeau { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--line-fort); border-radius: 6px; background: #fff; }
.bandeau p + p { margin-top: 8px; }
.bandeau-cours { background: var(--tint); border-color: #b7d2cb; color: var(--accent); align-items: center; }
.bandeau-attention, .bandeau-valider { background: var(--amberbg); border-color: var(--amber-line); color: #5e3f12; display: block; }
.bandeau-sensible, .bandeau-erreur { background: var(--redbg); border-color: var(--red-line); color: var(--red); display: block; }
.flash, .bandeau, .refus { overflow-wrap: anywhere; }        /* une longue adresse e-mail ne fait jamais déborder la page */
.refus { padding: 10px 14px; border-left: 4px solid var(--amber-line); background: var(--amberbg); color: #5e3f12; border-radius: 0 6px 6px 0; max-width: 72ch; }
.spinner { margin-top: 2px; }

/* ---------- Boutons et champs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-fort); border-radius: 6px; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; }
.btn:hover { background: var(--tint); }
.btn-principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-principal:hover { background: var(--accent-hover); }
.btn-danger { color: var(--red); border-color: #d3a29d; }
.btn-danger:hover { background: var(--redbg); }
.btn-petit { min-height: 34px; padding: 4px 12px; font-size: 14px; }
.btn:disabled, .btn[aria-busy="true"] { cursor: not-allowed; background: #e5e8e5; border-color: #cdd4d1; color: #566569; }
.btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne .8s linear infinite; }

label { display: block; font-weight: 600; font-size: 14px; }
input[type=text], input[type=search], input[type=password], input[type=date], input[type=url], select, textarea {
  width: 100%; max-width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-fort); border-radius: 6px; background: #fff; }
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
input[type=checkbox] { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px; }
.champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.champ-erreur { color: var(--red); font-weight: 600; font-size: 14px; margin-top: 4px; }
.champ-q { flex: 1 1 380px; }
.filtres-plus { display: contents; }
.btn-filtres { display: none; }
.champ-bouton { flex-direction: row; align-items: center; gap: 14px; }
.case { display: flex; align-items: center; min-height: 40px; font-weight: 500; }
.recherche { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; margin-bottom: 16px; }
.recherche .champ:not(.champ-q):not(.champ-bouton) { flex: 0 1 170px; }
.form-pile { display: grid; gap: 12px; }
.form-etroit { max-width: 420px; }

/* ---------- Pastilles d'état ---------- */
.chip { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid transparent; border-radius: 4px; font-size: 12.5px; font-weight: 650; line-height: 1.6; white-space: nowrap; }
.chip-a_traiter { background: #dcebe8; color: var(--accent); border-color: #b7d2cb; }
.chip-a_valider, .chip-attention { background: var(--amberbg); color: var(--amber); border-color: var(--amber-line); }
.chip-relance { background: var(--bluebg); color: var(--blue); border-color: var(--blue-line); }
.chip-attente_client { background: var(--greybg); color: var(--grey); border-color: #cdd4d1; }
.chip-clos { background: var(--closbg); color: var(--clos); border-color: #dfe3e0; }
.chip-ok { background: #e4f3e7; color: #1e5a33; border-color: #a6d3b1; }
.chip-sensible { background: var(--redbg); color: var(--red); border-color: var(--red-line); }
.chip-test { background: #fff; color: var(--muted); border: 1px dashed var(--line-fort); }
.tag { display: inline-block; padding: 0 8px; border-radius: 4px; background: #eceeec; color: #3f4e52; font-size: 12.5px; font-weight: 600; line-height: 1.6; }

/* ---------- Onglets ---------- */
.onglets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.onglet { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; margin-bottom: -1px; border: 1px solid transparent; border-radius: 6px 6px 0 0; color: var(--muted); font-weight: 600; text-decoration: none; }
.onglet:hover { color: var(--ink); background: #e9eeeb; }
.onglet.actif { background: #fff; color: var(--ink); border-color: var(--line); border-bottom-color: #fff; }
.compte { min-width: 22px; padding: 0 6px; border-radius: 11px; background: #e3e8e5; color: #3b4b4f; font-size: 12.5px; font-weight: 700; text-align: center; }
.onglet.actif .compte { background: var(--accent); color: #fff; }
.barre-vue { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.barre-vue .onglets { margin-bottom: 0; border-bottom: 0; }

/* ---------- Liste des tickets ---------- */
.liste-tickets { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tk-item + .tk-item { border-top: 1px solid var(--line); }
.tk { position: relative; display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr) auto 84px;
  grid-template-areas: "nom sujet etats quand" "mail extrait infos quand" "demande demande demande demande";
  column-gap: 16px; row-gap: 1px; padding: 10px 16px 10px 22px; color: inherit; text-decoration: none; }
.tk:hover, a.lt:hover { background: #f6f8f5; }
.tk::before, .lt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--line-fort); }
.tk.etat-a_traiter::before, .lt.etat-a_traiter::before { background: var(--accent); }
.tk.etat-a_valider::before, .lt.etat-a_valider::before { background: #c58a1d; }
.tk.etat-relance::before, .lt.etat-relance::before { background: #4a79a8; }
.tk.etat-attente_client::before, .lt.etat-attente_client::before { background: #9aa5a8; }
.tk.etat-clos::before, .lt.etat-clos::before { background: #d4d9d6; }
.lt.etat-ok::before { background: #3f8f5a; }
.tk-nom { grid-area: nom; font-weight: 650; }
.tk-mail { grid-area: mail; font-size: 13px; color: var(--muted); }
.tk-sujet { grid-area: sujet; font-weight: 650; }
.tk-extrait { grid-area: extrait; color: var(--muted); font-size: 14px; }
.tk-extrait em { font-style: normal; font-weight: 600; color: var(--ink); }
.tk-etats { grid-area: etats; justify-self: end; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tk-date-relance { color: var(--blue); font-weight: 600; }
.tk-infos { grid-area: infos; justify-self: end; max-width: 380px; font-size: 13px; color: var(--muted); text-align: right; }   /* bornée : le sujet garde sa place */
.tk-quand { grid-area: quand; justify-self: end; align-self: start; font-size: 13px; color: var(--muted); white-space: nowrap; }
.tk-demande { grid-area: demande; margin-top: 6px; padding: 6px 10px; border-radius: 4px; background: var(--amberbg); color: #5e3f12; font-size: 14px; }
.tk-nom, .tk-mail, .tk-sujet, .tk-extrait { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vide { padding: 28px 24px; border: 1px dashed var(--line-fort); border-radius: 8px; background: #fafbf9; }
.vide p + p { margin-top: 6px; color: var(--muted); }
.vide .btn { margin-top: 10px; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pagination a, .page-courante { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; text-decoration: none; color: var(--ink); }
.page-courante { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* ---------- Litiges ---------- */
.lt { position: relative; display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto 160px;
  grid-template-areas: "nom motif etats echeance" "mail infos etats echeance";
  column-gap: 16px; row-gap: 1px; padding: 10px 16px 10px 22px; color: inherit; text-decoration: none; }
.lt-nom { grid-area: nom; font-weight: 650; }
.lt-mail { grid-area: mail; font-size: 13px; color: var(--muted); }
.lt-motif { grid-area: motif; }
.lt-infos { grid-area: infos; font-size: 13px; color: var(--muted); }
.lt-etats { grid-area: etats; align-self: center; justify-self: end; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lt-echeance { grid-area: echeance; align-self: center; justify-self: end; text-align: right; }
.lt-echeance-titre { font-size: 13px; color: var(--muted); }
.lt-nom, .lt-mail, .lt-motif { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.reste { display: block; font-size: 13px; color: var(--muted); }
.marche { margin: 0; padding-left: 24px; list-style: decimal; }
.marche li { margin: 6px 0; }
.marche-carte { margin-bottom: 16px; }
.dossier .bloc .btn { margin-top: 12px; }
.flash-dossier { margin: 0 0 12px; }
.aide-onglet { margin: 6px 0 10px; }
.litige-echeance { margin-left: 8px; }
.bandeau.termine { margin-top: 8px; }
.reste-urgent, .tk-meta .reste-urgent, .tk-meta .mail.reste-urgent { color: var(--red); font-weight: 650; }
.lecture-barre { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 24px; margin-bottom: 4px; }
.lecture-barre .recherche { flex: none; flex-wrap: nowrap; margin-bottom: 16px; }
.lecture { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; }
.lecture-fiche { margin: 12px 0 0; }
.lt-shopify { display: grid; justify-items: start; gap: 6px; margin-top: 14px; }
.bandeau-info { display: block; border-left: 4px solid var(--line-fort); }
.ancre { margin: -2px 0 14px; }
.checklist li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.checklist li:first-child { border-top: 0; padding-top: 0; }
.checklist .chip { flex: none; min-width: 74px; justify-content: center; }
.liste-echanges li, .pieces li { padding: 9px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.liste-echanges li:first-child, .pieces li:first-child { border-top: 0; padding-top: 0; }
.liste-echanges li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.champ-dossier { margin-bottom: 18px; }
.champ-dossier-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.champ-dossier .aide { margin-bottom: 4px; }
.dossier-texte { min-height: 110px; max-height: 560px; field-sizing: content; }
.dossier-texte[readonly] { background: #f3f4f1; }
.pieces .dossier-texte { margin-top: 6px; }
.champ-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.adresses-memes { display: block; }
.expedition + .expedition { margin-top: 8px; }
.passages { display: grid; gap: 4px; margin-top: 6px; }
.commande-pied { padding: 0 16px 14px; }
.ecrire { max-width: 820px; }
.ecrire .carte { margin-bottom: 14px; }
.ecrire .repondre > .aide { margin-bottom: 14px; }

/* ---------- Page ticket ---------- */
.tk-entete { margin-bottom: 16px; }
.retour { margin-bottom: 6px; font-size: 14px; }
.tk-entete h1 { margin-bottom: 8px; overflow-wrap: anywhere; }
.tk-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 12px; }
.tk-meta dt { font-size: 12.5px; color: var(--muted); }
.tk-meta dd { font-weight: 600; overflow-wrap: anywhere; }
.tk-meta .mail { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.tk-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.tk-principal, .tk-lateral { min-width: 0; }
.section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.section-tete small { color: var(--muted); font-weight: 400; margin-left: 6px; }

.msg { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.msg header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.msg-role { padding: 0 8px; border-radius: 4px; background: #eceeec; color: #3f4e52; font-size: 12.5px; font-weight: 650; }
.msg-quand { margin-left: auto; font-size: 13px; color: var(--muted); }
.msg-corps { padding: 14px 16px 16px; max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-boutique { background: #f1f6f4; border-color: #cfe0da; }
.msg-boutique header { border-bottom-color: #cfe0da; }
.msg-boutique .msg-role { background: #d6e7e2; color: var(--accent); }

.repondre { margin-top: 20px; padding: 16px 18px 18px; border: 1px solid var(--line-fort); border-radius: 8px; background: #fff; }
.repondre h2 { margin-bottom: 10px; }
.repondre + .repondre { margin-top: 16px; }
.contexte-sortant { margin-bottom: 12px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--line-fort); border-radius: 8px; background: #fff; }
.contexte-sortant .texte-brut { margin-top: 6px; color: var(--muted); }
.conseil { margin-bottom: 14px; padding: 10px 14px; border-left: 4px solid #b7d2cb; background: var(--tint); border-radius: 0 6px 6px 0; max-width: 72ch; }
.conseil p + p { margin-top: 4px; }
.composer label { margin-bottom: 6px; }
.composer textarea { min-height: 220px; }
.composer textarea.court, textarea.court { min-height: 72px; }
.composer textarea[readonly] { background: #f3f4f1; }
.compteur { margin: 4px 0 12px; font-size: 13px; color: var(--muted); text-align: right; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pli { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.pli summary, .panneau summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.pli summary::-webkit-details-marker, .panneau summary::-webkit-details-marker { display: none; }
.pli summary::after, .panneau summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .12s; }
.pli[open] summary::after, .panneau[open] summary::after { transform: rotate(-135deg); }
.pli summary { justify-content: flex-start; }
.pli summary::after { margin-left: 4px; }
.pli > label { margin-top: 8px; }
.pli > textarea { margin: 6px 0 10px; }
.pli > .btn { margin-bottom: 4px; }
.bloc { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.bloc textarea { margin: 6px 0 10px; }

.panneau { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.panneau summary { padding: 6px 14px; justify-content: space-between; }
.panneau-corps { padding: 4px 14px 14px; display: grid; gap: 10px; }
.panneau summary .compte { margin-left: 8px; }
.fiche { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; }
.fiche dt { color: var(--muted); }
.fiche dd { overflow-wrap: anywhere; }
.panneau .fiche { grid-template-columns: minmax(0, 1fr); gap: 0; }
.panneau .fiche dt { font-size: 12.5px; }
.panneau .fiche dd { margin-bottom: 8px; }
.notes { display: grid; gap: 10px; }
.note-tete { font-size: 13.5px; color: var(--muted); }
.note-texte, .texte-brut { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.historique { display: grid; gap: 8px; }
.historique li { padding-left: 10px; border-left: 3px solid var(--line); font-size: 14px; }
.h-quand { display: block; font-size: 12.5px; color: var(--muted); }
.h-detail { display: block; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- Commandes, cartes, tableaux ---------- */
.commandes { display: grid; gap: 14px; }
.commande { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.commande header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.commande-date { margin-left: auto; font-size: 13px; color: var(--muted); }
.commande .fiche { padding: 12px 16px 14px; }
.carte { margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.carte h2 { margin-bottom: 10px; }
.carte-table { padding: 0; overflow: hidden; }
.carte-acces { border-color: var(--amber-line); background: var(--amberbg); }
.carte-acces .fiche { margin-top: 10px; }
.carte-acces code { padding: 2px 6px; border-radius: 4px; background: #fff; border: 1px solid var(--amber-line); }
.mdp { font-size: 17px; font-weight: 700; letter-spacing: .5px; user-select: all; }
.table-defile { overflow-x: auto; }
.table-equipe { width: 100%; border-collapse: collapse; text-align: left; }
.table-equipe th, .table-equipe td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table-equipe thead th { background: #fafbf9; font-size: 13px; font-weight: 650; }
.table-equipe tbody tr:last-child > * { border-bottom: 0; }
.table-equipe tbody th { font-weight: 650; }
.table-equipe td[data-label="Dernière connexion"] { white-space: nowrap; }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.liste-simple { display: grid; gap: 10px; }
.ligne-simple { display: grid; grid-template-columns: minmax(0, 1fr) auto 130px; gap: 16px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.ligne-simple:hover { background: #f6f8f5; }
.ligne-simple strong, .ligne-simple small { display: block; }
.ligne-simple small { color: var(--muted); }
.ligne-historique { padding: 11px 16px; border-bottom: 1px solid var(--line); }
.colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.colonne { padding: 12px; border-radius: 8px; background: #e8ece7; min-width: 0; }
.colonne h3 { margin-bottom: 10px; }
.tuile { display: block; margin-bottom: 8px; padding: 10px 12px; border: 1px solid #cbd5ce; border-radius: 6px; background: #fff; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.tuile strong, .tuile small { display: block; }
.tuile small { color: var(--muted); margin-top: 2px; }
.agenda-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.jour { min-width: 0; padding: 12px; border-right: 1px solid var(--line); }
.jour:last-child { border-right: 0; }
.jour h3 { margin-bottom: 10px; }
.pole-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pole small { display: block; color: var(--muted); }
.pole p { margin: 6px 0; font-size: 14px; }
.report-body { overflow-wrap: anywhere; }

/* ---------- Pages publiques : connexion, erreurs ---------- */
.public { display: grid; place-items: start center; min-height: 100vh; padding: 10vh 16px 32px; }
.carte-public { width: 100%; max-width: 400px; padding: 28px 28px 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.marque-public { padding: 0; margin-bottom: 14px; color: var(--accent); }
.carte-public h1 { margin-bottom: 16px; }
.carte-public .btn { width: 100%; }
.carte-public .aide { margin-top: 14px; }
.erreur-page { max-width: 560px; }
.erreur-texte { margin-bottom: 18px; font-size: 16px; max-width: 60ch; }
.erreur-page .btn { width: auto; }

/* ---------- Tablette ---------- */
@media (max-width: 1180px) {
  .tk { grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto 80px; grid-template-areas: "nom sujet etats quand" "mail extrait extrait quand" "infos infos infos infos" "demande demande demande demande"; }
  .tk-infos { justify-self: start; }
  .lt { grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto 140px; }
  .tk-colonnes { grid-template-columns: minmax(0, 1fr) 290px; }
  .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .semaine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Téléphone et petite tablette : une colonne, menu en haut ---------- */
@media (max-width: 899px) {
  .appli { display: block; }
  .lateral { display: none; }
  .haut { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 4px 16px; background: var(--side); color: #fff; }
  .haut-titre { font-weight: 650; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-mobile summary { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #5d7479; border-radius: 6px; font-weight: 600; cursor: pointer; list-style: none; }
  .menu-mobile summary::-webkit-details-marker { display: none; }
  .menu-mobile-panneau { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 54px); overflow-y: auto; overflow-x: hidden; padding: 8px 16px 16px; background: var(--side); border-top: 1px solid #435a60; }
  .menu-mobile-panneau nav { display: grid; gap: 12px; }
  .menu-mobile .nav-lien { min-height: 46px; }
  .contenu { padding: 16px 16px 24px; }
  .tk-colonnes { grid-template-columns: minmax(0, 1fr); }
  .duo, .pole-grille { grid-template-columns: minmax(0, 1fr); }
  .semaine, .colonnes { grid-template-columns: minmax(0, 1fr); }
  .jour { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  /* liens d'action : zone cliquable de 44 px minimum */
  .lien-bloc, .lien-ancre, .champ-bouton .lien, .section-tete .lien, .liste-liens a, .liste-echanges a, .fuseau-ligne .lien, .expedition > .lien, .pieces .lien { display: inline-flex; align-items: center; min-height: 44px; }
  .pagination a, .page-courante { min-height: 44px; min-width: 44px; }
  .menu-mobile .lien-bouton { min-height: 46px; }
  .delais .btn { font-size: 15px; }
  .recherche input::placeholder { font-size: 14px; }
  h1 { font-size: 21px; }
  .btn { min-height: 44px; }
  .btn-petit { min-height: 44px; }
  input[type=text], input[type=search], input[type=password], input[type=date], input[type=url], select { min-height: 44px; font-size: 16px; }
  textarea { font-size: 16px; }
  .case { min-height: 44px; }
  .recherche .champ:not(.champ-q):not(.champ-bouton) { flex: 1 1 100%; }
  .champ-q { order: 1; flex-basis: 100%; }
  .champ-bouton { order: 2; width: 100%; }
  .btn-filtres { order: 3; width: 100%; }
  .btn-filtres:not([hidden]) { display: inline-flex; }
  .btn-filtres::after { content: ""; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
  .btn-filtres[aria-expanded="true"]::after { transform: rotate(-135deg); }
  .filtres-plus { order: 4; flex: 1 1 100%; display: grid; gap: 12px; }
  .champ-bouton .btn { flex: 1; }
  .onglets { gap: 6px; border-bottom: 0; }
  .onglet { flex: 1 1 auto; min-height: 44px; margin: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; justify-content: center; }
  .onglet.actif { background: var(--accent); color: #fff; border-color: var(--accent); }
  .onglet.actif .compte { background: #fff; color: var(--accent); }
  .tk { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom quand" "sujet sujet" "extrait extrait" "etats etats" "infos infos" "demande demande"; padding: 12px 14px 12px 20px; row-gap: 3px; }
  .lt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nom" "motif" "infos" "etats" "echeance"; padding: 12px 14px 12px 20px; row-gap: 3px; }
  .lt-mail { display: none; }
  .lt-nom, .lt-motif { white-space: normal; overflow-wrap: anywhere; }
  .lt-etats, .lt-echeance { justify-self: start; justify-content: flex-start; text-align: left; margin-top: 4px; }
  .lt-echeance .reste { display: inline; margin-left: 6px; }
  .lecture-barre { display: block; }
  .lecture-barre .recherche { flex-wrap: wrap; }
  .lecture .btn { flex: 1 1 auto; }
  .btn-copier { min-height: 44px; min-width: 88px; }
  .liste-echanges li .btn, .commande-pied .btn { width: 100%; }
  .checklist li { flex-direction: column; gap: 4px; }
  .tk-mail { display: none; }
  .tk-etats { justify-self: start; justify-content: flex-start; margin-top: 4px; }
  .tk-quand { align-self: center; }
  .tk-sujet, .tk-extrait { white-space: normal; }
  .tk-extrait { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tk-meta { gap: 8px 20px; }
  .composer textarea { min-height: 180px; }
  .actions { flex-direction: column; align-items: stretch; }
  .dossier .actions { gap: 14px; }
  .a-faire .marche a { display: inline-flex; align-items: center; min-height: 44px; }
  .actions .btn { width: 100%; }
  .pli > .btn, .bloc > .btn, .panneau-corps .btn { width: 100%; }
  .panneau summary, .pli summary { min-height: 48px; }
  .fiche { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fiche dd { margin-bottom: 8px; }
  .msg-quand { margin-left: 0; width: 100%; }
  .repondre { padding: 14px; }
  .carte { padding: 14px; }
  .carte-public { padding: 22px 18px; }
  .public { padding-top: 6vh; }
  .ligne-simple { grid-template-columns: minmax(0, 1fr) auto; }
  .ligne-simple > small { grid-column: 1 / -1; }
  .table-equipe thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-equipe, .table-equipe tbody, .table-equipe tr, .table-equipe td, .table-equipe th { display: block; }
  .table-equipe tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .table-equipe th, .table-equipe td { padding: 2px 0; border: 0; }
  .table-equipe td[data-label]::before { content: attr(data-label) " : "; color: var(--muted); }
  .table-equipe td[data-label="Actions"] { margin-top: 8px; }
  .table-equipe td[data-label="Actions"]::before { content: none; }
  .table-actions form { flex: 1 1 100%; }
  .table-actions .btn { width: 100%; }
  .agenda-tete { flex-direction: column; align-items: flex-start; }
  .commande-date { margin-left: 0; width: 100%; }
}