/* Demandes exploitation : theme clair, une seule famille, accent bleu profond, statuts nommes. */
:root {
  --fond: #ffffff;
  --fond-2: #f3f5f8;
  --fond-3: #e8ecf1;
  --trait: #d6dce4;
  --trait-fort: #b7c0cc;
  --encre: #1b1f24;
  --encre-2: #5b6472;
  --encre-3: #667080;
  --accent: #1f4e9e;
  --accent-fonce: #173c7a;
  --accent-clair: #e6eef9;
  --accent-texte: #ffffff;
  --alerte: #b42318;
  --alerte-clair: #fde8e6;
  --ok: #1a7f4b;
  --ok-clair: #e3f4ea;
  --attention: #9a5b00;
  --attention-clair: #fff1dc;
  --info: #175d99;
  --info-clair: #e3effa;
  --ombre: 0 1px 2px rgba(20, 30, 50, .06), 0 6px 18px -8px rgba(20, 30, 50, .18);
  --rayon: 8px;
  --rayon-petit: 5px;
  --police: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --duree: 160ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scrollbar-color: var(--trait-fort) var(--fond-2); }
body {
  margin: 0; background: var(--fond-2); color: var(--encre);
  font-family: var(--police); font-size: .9375rem; line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--accent-clair); color: var(--accent-fonce); }
a { color: var(--accent); text-decoration: none; text-underline-offset: .15em; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
h1 { font-size: 1.375rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .25rem; line-height: 1.25; text-wrap: balance; }
h2 { font-size: 1rem; font-weight: 650; margin: 1.5rem 0 .5rem; }
h3 { font-size: .875rem; font-weight: 650; margin: 1.25rem 0 .5rem; color: var(--encre-2); text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 .75rem; }
time { white-space: nowrap; }
.sous { color: var(--encre-2); font-size: .8125rem; }
.sous-titre { color: var(--encre-2); max-width: 70ch; }
.vide { color: var(--encre-3); }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; flex: none; }

/* --- barre --- */
.barre {
  display: flex; align-items: center; gap: 1.5rem; padding: 0 1.25rem; height: 52px;
  background: var(--fond); border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 10;
}
.marque { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; color: var(--encre); font-size: 1rem; }
.marque .ico { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.marque:hover { text-decoration: none; }
.nav { display: flex; gap: .25rem; flex: 1; }
.nav a { padding: .4rem .7rem; border-radius: var(--rayon-petit); color: var(--encre-2); font-weight: 500; transition: background var(--duree) var(--ease), color var(--duree) var(--ease); }
.nav a:hover { background: var(--fond-2); color: var(--encre); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--accent-clair); color: var(--accent-fonce); }
.moi { display: flex; align-items: center; gap: .75rem; }
.compte { display: inline-flex; align-items: center; gap: .5rem; color: var(--encre); }
.compte:hover { text-decoration: none; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-clair); color: var(--accent-fonce); font-size: .75rem; font-weight: 650; letter-spacing: .02em; flex: none;
}
.avatar.petit { width: 22px; height: 22px; font-size: .625rem; margin-right: .35rem; }

/* --- page --- */
.page { max-width: 1440px; margin: 0 auto; padding: 1.25rem 1.25rem 4rem; }
.page-etroite { max-width: 860px; }
.page-centree { max-width: 460px; padding-top: 8vh; }
.entete-page { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.etat-collecte { color: var(--encre-2); font-size: .8125rem; margin: 0; }

.flashs { margin-bottom: 1rem; transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.flashs.efface { opacity: 0; transform: translateY(-4px); pointer-events: none; }
.flash { padding: .6rem .9rem; border-radius: var(--rayon-petit); border: 1px solid var(--trait); background: var(--fond); margin: 0 0 .5rem; animation: entree 240ms var(--ease); }
.flash.ok { border-color: #b7e2c7; background: var(--ok-clair); color: #0f5a33; }
.flash.erreur { border-color: #f1b6b0; background: var(--alerte-clair); color: #7d1a12; }
@keyframes entree { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.erreur { padding: .6rem .9rem; border-radius: var(--rayon-petit); background: var(--alerte-clair); color: #7d1a12; border: 1px solid #f1b6b0; }
.erreur-inline { color: var(--alerte); }

/* --- tuiles --- */
.tuiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .625rem; margin-bottom: 1rem; }
.tuile {
  display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem; background: var(--fond); border: 1px solid var(--trait);
  border-radius: var(--rayon); color: var(--encre); transition: border-color var(--duree) var(--ease), box-shadow var(--duree) var(--ease), transform var(--duree) var(--ease);
}
.tuile:hover { text-decoration: none; border-color: var(--trait-fort); box-shadow: var(--ombre); transform: translateY(-1px); }
.tuile[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tuile .nombre { font-size: 1.5rem; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; }
.tuile .libelle { font-size: .8125rem; color: var(--encre-2); }
.tuile.alerte .nombre { color: var(--alerte); }

/* --- filtres --- */
.filtres {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.6fr) auto; gap: .625rem; align-items: end;
  padding: .875rem; background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); margin-bottom: .75rem;
}
.filtres label { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; color: var(--encre-2); font-weight: 500; min-width: 0; }
.actions-filtres { display: flex; gap: .375rem; }
.plus-filtres { display: none; }
.compte-resultats { color: var(--encre-2); font-size: .8125rem; margin: 0 0 .5rem .25rem; }

/* --- champs et boutons --- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
  font: inherit; color: var(--encre); background: var(--fond); border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit);
  padding: .45rem .6rem; width: 100%; min-width: 0; transition: border-color var(--duree) var(--ease), box-shadow var(--duree) var(--ease);
  caret-color: var(--accent);
}
input:hover, select:hover, textarea:hover { border-color: var(--encre-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-clair); }
input::placeholder, textarea::placeholder { color: var(--encre-3); }
input[readonly] { background: var(--fond-2); color: var(--encre-2); }
textarea { resize: vertical; line-height: 1.4; }
select { appearance: none; -webkit-appearance: none; padding-right: 1.9rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .5rem center; background-size: 1rem; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-weight: 550; cursor: pointer;
  padding: .45rem .85rem; border-radius: var(--rayon-petit); border: 1px solid var(--trait-fort); background: var(--fond); color: var(--encre);
  white-space: nowrap; transition: background var(--duree) var(--ease), border-color var(--duree) var(--ease), color var(--duree) var(--ease), transform var(--duree) var(--ease);
}
.bouton:hover { background: var(--fond-2); border-color: var(--encre-3); text-decoration: none; }
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.bouton.principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.bouton.discret { border-color: transparent; background: transparent; color: var(--encre-2); }
.bouton.discret:hover { background: var(--fond-2); color: var(--encre); }
.bouton.large { width: 100%; padding: .6rem 1rem; }
button.lien { font: inherit; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; }
.formulaire { display: flex; flex-direction: column; gap: .875rem; }
.formulaire label { display: flex; flex-direction: column; gap: .3rem; font-size: .8125rem; font-weight: 550; color: var(--encre-2); }
.formulaire.compact { gap: .75rem; }
.rangee { display: flex; gap: .375rem; align-items: stretch; }
.rangee > select, .rangee > input { flex: 1; }
.aide { color: var(--encre-2); font-size: .8125rem; margin-top: 1rem; }

/* --- puces et badges --- */
.puce { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 550; line-height: 1.5; white-space: nowrap; background: var(--fond-3); color: var(--encre-2); }
.puce.type-devis { background: #e9e4fb; color: #4a2fa3; }
.puce.type-vacation { background: #e0f2f4; color: #0f5f6b; }
.puce.type-a_trier { background: var(--attention-clair); color: var(--attention); }
.puce.etat-nouvelle { background: var(--info-clair); color: var(--info); }
.puce.etat-prise_en_charge { background: var(--attention-clair); color: var(--attention); }
.puce.etat-devis_envoye { background: #e9e4fb; color: #4a2fa3; }
.puce.etat-vacation_creee { background: var(--ok-clair); color: var(--ok); }
.puce.etat-close, .puce.etat-sans_suite { background: var(--fond-3); color: var(--encre-2); }
.badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .45rem; border-radius: 4px; font-size: .6875rem; font-weight: 550; background: var(--fond-3); color: var(--encre-2); border: 1px solid transparent; }
.badge.urgent { background: var(--alerte-clair); color: var(--alerte); }
.badge.nouveau { background: var(--info-clair); color: var(--info); }
.badge.repondu { background: var(--ok-clair); color: var(--ok); }
.boite { display: inline-block; padding: .05rem .4rem; margin: .1rem .2rem .1rem 0; border-radius: 4px; background: var(--fond-2); border: 1px solid var(--trait); font-size: .6875rem; color: var(--encre-2); white-space: nowrap; }

/* --- liste --- */
.liste { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); }
.liste thead th:first-child { border-top-left-radius: var(--rayon); }
.liste thead th:last-child { border-top-right-radius: var(--rayon); }
.liste tbody tr:last-child td:first-child { border-bottom-left-radius: var(--rayon); }
.liste tbody tr:last-child td:last-child { border-bottom-right-radius: var(--rayon); }
.liste th { text-align: left; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-2); padding: .6rem .75rem; background: var(--fond-2); border-bottom: 1px solid var(--trait); }
.liste td { padding: .65rem .75rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.liste tbody tr:last-child td { border-bottom: 0; }
.liste .sous { display: block; }
.ligne { cursor: pointer; transition: background var(--duree) var(--ease); }
.ligne:hover { background: var(--fond-2); }
.ligne:focus-visible { outline-offset: -2px; }
.ligne.est-nouvelle .sujet { font-weight: 650; }
.col-sujet { width: 42%; }
.col-date { white-space: nowrap; }
.sujet { color: var(--encre); font-weight: 550; display: block; }
.sujet:hover { color: var(--accent); }
.liste.simple td { vertical-align: middle; }
.actions-ligne { display: flex; gap: .25rem; justify-content: flex-end; }
.actions-ligne form { display: inline; }
tr.en-erreur td { background: #fff7f6; }
.pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.vide-etat { padding: 3rem 1.5rem; text-align: center; background: var(--fond); border: 1px dashed var(--trait-fort); border-radius: var(--rayon); }
.vide-etat h2 { margin-top: 0; }
.vide-etat p { color: var(--encre-2); max-width: 52ch; margin: 0 auto; }
ul.simple { padding-left: 1.2rem; }
ul.simple li { margin-bottom: .25rem; }

/* --- connexion --- */
.carte-connexion { background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.75rem; box-shadow: var(--ombre); }
.carte-connexion h1 { margin-bottom: .5rem; }

/* --- fiche --- */
.retour { display: inline-flex; align-items: center; gap: .3rem; color: var(--encre-2); font-size: .8125rem; margin-bottom: .75rem; }
.entete-fiche { margin-bottom: 1rem; }
.meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 .75rem; }
.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem 1.25rem; margin: 0; padding: .75rem 1rem; background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); }
.infos dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-2); font-weight: 600; }
.infos dd { margin: .1rem 0 0; }
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.traitement { background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem 1.125rem 1.25rem; position: sticky; top: 68px; order: 2; }
.traitement h2 { margin-top: 0; }
.resume { font-size: .875rem; color: var(--encre-2); }
.journal { list-style: none; padding: 0; margin: 0; font-size: .8125rem; }
.journal li { padding: .4rem 0; border-top: 1px solid var(--trait); color: var(--encre-2); }
.journal time { color: var(--encre-3); font-size: .75rem; display: block; }
.journal strong { color: var(--encre); }
.fil { order: 1; min-width: 0; }
.fil h2 { margin-top: 0; }
.message { background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem 1.125rem; margin-bottom: .75rem; }
.message.sortant { background: var(--accent-clair); border-color: #c9d8f0; }
.entete-message { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.entete-message .qui { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entete-message .qui .sous { overflow-wrap: anywhere; }
.entete-message time { color: var(--encre-2); font-size: .8125rem; }
.ou { font-size: .75rem; color: var(--encre-2); margin: 0 0 .5rem; }
.objet-message { font-weight: 550; margin-bottom: .5rem; }
.corps { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 78ch; font-size: .9375rem; line-height: 1.5; }
.corps.cite { color: var(--encre-2); font-size: .875rem; border-left: 1px solid var(--trait-fort); padding-left: .75rem; margin-top: .5rem; }
details { margin-top: .5rem; }
summary { cursor: pointer; color: var(--accent); font-size: .8125rem; font-weight: 550; list-style: none; display: inline-flex; align-items: center; gap: .3rem; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--duree) var(--ease); }
details[open] > summary::before { transform: rotate(45deg); }
.preuves ul { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--encre-2); font-size: .8125rem; }
.pieces { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pieces li { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--fond-2); font-size: .8125rem; }
.lien-invitation { background: var(--ok-clair); border: 1px solid #b7e2c7; border-radius: var(--rayon); padding: 1rem 1.125rem; margin-bottom: 1.25rem; }
.lien-invitation h2 { margin-top: 0; }

/* --- petits ecrans --- */
@media (max-width: 1100px) {
  .tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filtres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtres .recherche { grid-column: span 2; }
}
@media (max-width: 900px) {
  .fiche { grid-template-columns: 1fr; }
  .traitement { position: static; order: 1; }
  .fil { order: 2; }
  .col-sujet { width: auto; }
}
@media (max-width: 720px) {
  .barre { height: auto; padding: .5rem .75rem; gap: .35rem .75rem; flex-wrap: wrap; }
  .marque { font-size: .9375rem; }
  .nav { order: 3; width: 100%; overflow-x: auto; gap: .125rem; padding-bottom: .1rem; scrollbar-width: none; }
  .nav a { white-space: nowrap; padding: .35rem .6rem; }
  .moi { margin-left: auto; gap: .25rem; }
  .compte .nom { display: none; }
  .page { padding: .75rem .75rem 3rem; }
  .entete-page { margin-bottom: .5rem; }
  .tuiles { display: flex; overflow-x: auto; gap: .5rem; padding-bottom: .25rem; scrollbar-width: none; }
  .tuile { flex: 0 0 7.25rem; padding: .55rem .7rem; }
  .tuile .nombre { font-size: 1.25rem; }
  .tuile .libelle { font-size: .75rem; white-space: nowrap; }
  .filtres { grid-template-columns: 1fr 1fr; padding: .625rem; }
  .filtres label:not(.recherche) { display: none; }
  .filtres.ouverts label:not(.recherche) { display: flex; }
  .filtres .recherche, .actions-filtres { grid-column: span 2; }
  .plus-filtres { display: inline-flex; grid-column: span 2; justify-content: flex-start; padding-left: 0; }
  .liste, .liste tbody, .liste tr, .liste td { display: block; width: 100%; }
  .liste thead { display: none; }
  .liste tr { padding: .5rem .75rem .75rem; border-bottom: 1px solid var(--trait); }
  .liste td { padding: .2rem 0; border: 0; }
  .liste td[data-titre]::before { content: attr(data-titre) " "; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); margin-right: .35rem; }
  .liste td.col-sujet::before { display: none; }
  .liste td.col-sujet { order: -1; padding-bottom: .4rem; }
  .liste tr.ligne { display: flex; flex-direction: column; }
  .actions-ligne { justify-content: flex-start; }
  .infos { grid-template-columns: 1fr 1fr; }
}
/* --- liste compacte avec fiche a droite --- */
.page-liste { max-width: 1900px; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.colonne-liste { min-width: 0; }
.panneau { display: none; }
.liste.compacte td { padding: .5rem .6rem; }
.liste.compacte th.col-date, .liste.compacte td.col-date { width: 6.25rem; }
.liste.compacte .col-boites { width: 15%; }
.liste.compacte .col-resp { width: 11%; white-space: nowrap; }
.liste.compacte .col-etat { width: 9%; }
.liste thead th { position: sticky; top: 52px; z-index: 1; }
.ligne-haut { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .2rem; }
.ligne-haut .societe { font-size: .75rem; color: var(--encre-2); }
.liste.compacte .sujet { display: inline; }
.expediteur { display: inline; font-size: .8125rem; color: var(--encre-2); margin-left: .4rem; }
.expediteur .sous { display: inline; }
.apercu { display: block; font-size: .8125rem; color: var(--encre-3); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70ch; }
.ligne.selectionnee { background: var(--accent-clair); box-shadow: inset 1px 0 0 var(--accent); }
.ligne.selectionnee:hover { background: var(--accent-clair); }
body.chargement-liste #zone-resultats { opacity: .55; transition: opacity var(--duree) var(--ease); cursor: progress; }
.fiche-barre { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.flash-fiche { margin: 0 0 .75rem; transition: opacity 600ms var(--ease); }
.flash-fiche.efface { opacity: 0; }
.infos .large { grid-column: 1 / -1; }

@media (min-width: 1100px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1fr) minmax(480px, 42%); }
  .panneau {
    display: block; position: sticky; top: 64px; max-height: calc(100vh - 76px); overflow: auto; overscroll-behavior: contain;
    background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem 1.125rem 1.5rem;
    transition: opacity var(--duree) var(--ease); scrollbar-width: thin;
  }
  .panneau.chargement { opacity: .55; cursor: progress; }
  .panneau-vide { text-align: center; color: var(--encre-2); padding: 4rem 1rem; }
  .panneau-vide .ico.grand { width: 2.75rem; height: 2.75rem; color: var(--trait-fort); stroke-width: 1.5; margin-bottom: .75rem; }
  .panneau-vide p { max-width: 36ch; margin: 0 auto .5rem; }
  .panneau h1 { font-size: 1.125rem; }
  .panneau .fiche { grid-template-columns: 1fr; gap: 1rem; }
  .panneau .traitement { position: static; order: 1; }
  .panneau .fil { order: 2; }
  .panneau .infos { grid-template-columns: 1fr 1fr; }
  .panneau .corps { font-size: .9rem; }
  .panneau .entete-message { flex-wrap: wrap; }
  .panneau .entete-message time { width: 100%; padding-left: 2.5rem; margin-top: -.25rem; }
}
@media (max-width: 720px) {
  .apercu { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .liste thead th { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}