/* Ovation Studio Productivity.
   La direction artistique est celle de ovation-studio.be : Manrope en titres,
   DM Sans en texte, le degrade cyan vers bleu du logo pour l'action principale,
   et des formes en pilule. Mode clair uniquement, c'est l'identite de la maison.
   Les polices sont hebergees ici : la politique de securite interdit toute
   ressource externe, et une police qui n'arrive pas casse la mise en page. */

@font-face {
  font-family: "DM Sans";
  src: url("/assets/polices/dmsans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/polices/dmsans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/polices/dmsans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/polices/manrope-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/polices/manrope-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light only;

  --titre: Manrope, "DM Sans", system-ui, sans-serif;
  --texte: "DM Sans", Manrope, system-ui, -apple-system, sans-serif;

  --encre: #0f172a;
  --encre-douce: #64748b;
  --encre-pale: #94a3b8;

  --fond: #f4f7fb;
  --surface: #ffffff;
  --surface-douce: #f7fafd;
  --trait: #e5eaf1;
  --trait-fort: #cbd5e1;

  --bleu: #016ded;
  --cyan: #00b6f9;
  --degrade: linear-gradient(100deg, #00b6f9 0%, #016ded 100%);
  --accent-encre: #0a55b4;
  --accent-fond: #edf6ff;
  --accent-trait: #bcdcfb;
  --anneau: rgba(1, 109, 237, .18);

  --alerte: #b5261f;
  --alerte-fond: #fdf1ef;
  --alerte-trait: #f0c8c2;

  --rayon-s: 10px;
  --rayon: 14px;
  --rayon-l: 20px;
  --pilule: 999px;

  --ombre-s: 0 1px 2px rgba(15, 23, 42, .04);
  --ombre: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -18px rgba(15, 23, 42, .3);
  --ombre-l: 0 2px 6px rgba(15, 23, 42, .06), 0 26px 50px -24px rgba(15, 23, 42, .4);
  --ombre-bleue: 0 6px 18px -8px rgba(1, 109, 237, .5);

  --rail: 244px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 15px/1.55 var(--texte);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-fond); color: var(--accent-encre); }

/* Coque : rail de navigation a gauche sur grand ecran, barre d'onglets en bas
   sur mobile. Les cinq destinations sont toujours a portee, jamais repliees
   derriere un menu a ouvrir. ------------------------------------------------ */

.coque { display: flex; min-height: 100vh; }

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 16px 18px;
  background: var(--surface);
  border-right: 1px solid var(--trait);
  z-index: 20;
}

.marque { display: block; margin: 0 6px 26px; line-height: 0; }
.marque img { width: 132px; height: auto; }

.rail-nav { display: grid; gap: 3px; }

.rail-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--pilule);
  color: var(--encre-douce);
  text-decoration: none;
  font-size: 14.5px;
  transition: background .12s ease, color .12s ease;
}

.rail-nav a svg { flex: none; opacity: .8; }
.rail-nav a span { flex: 1; white-space: nowrap; }
.rail-nav a:hover { background: var(--surface-douce); color: var(--encre); }

.rail-nav a.actif {
  background: var(--degrade);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--ombre-bleue);
}

.rail-nav a.actif svg { opacity: 1; }

.badge {
  min-width: 21px;
  padding: 1px 7px;
  border-radius: var(--pilule);
  background: var(--bleu);
  color: #fff;
  font-family: var(--titre);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.badge.calme { background: var(--surface-douce); color: var(--encre-douce); box-shadow: inset 0 0 0 1px var(--trait); }
.rail-nav a.actif .badge { background: rgba(255, 255, 255, .25); color: #fff; box-shadow: none; }

.rail-pied { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--trait); }

.deconnexion button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--pilule);
  color: var(--encre-douce);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
}

.deconnexion button:hover { background: var(--surface-douce); color: var(--encre); }

.entete-mobile, .onglets { display: none; }

/* Structure ---------------------------------------------------------------- */

main {
  flex: 1;
  min-width: 0;
  margin-left: var(--rail);
  padding: 44px 44px 80px;
}

main > * { max-width: 940px; }

.bandeau { margin-bottom: 28px; }

h1 {
  font-family: var(--titre);
  font-size: 31px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

h2 {
  font-family: var(--titre);
  font-size: 17px;
  font-weight: 700;
  margin: 36px 0 13px;
  letter-spacing: -0.02em;
}

.resume { margin: 0; color: var(--encre-douce); font-size: 15px; }
.resume strong { color: var(--encre); font-weight: 600; }
.discret { color: var(--encre-douce); font-size: 13.5px; }
.bloc { display: block; }
.sans-coupure { white-space: nowrap; }
.attenue { opacity: .6; }

main a { color: var(--accent-encre); text-decoration-color: var(--accent-trait); }
main a:hover { text-decoration-color: currentColor; }

/* Bandeaux d'information ---------------------------------------------------- */

/* L'information reste calme, un filet de couleur suffit a la signaler. Le fond
   colore est reserve a ce qui demande une decision : sinon trois avis d'affilee
   forment un mur que l'oeil finit par ignorer. */
.avis {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 14px 17px 14px 20px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--ombre-s);
  overflow: hidden;
}

.avis::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--degrade);
}

.avis + .avis { margin-top: -4px; }
.avis:last-of-type { margin-bottom: 22px; }
.avis a { color: var(--accent-encre); }

.avis.alerte {
  background: var(--alerte-fond);
  border-color: var(--alerte-trait);
  color: var(--alerte);
}

.avis.alerte::before { background: var(--alerte); }
.avis.alerte strong { color: inherit; }

.vide {
  background: var(--surface);
  border: 1px dashed var(--trait-fort);
  border-radius: var(--rayon-l);
  padding: 58px 24px;
  text-align: center;
}

.vide p { margin: 0 0 6px; font-size: 16px; }
.vide p.discret { font-size: 14px; margin-bottom: 0; }

/* Suggestions a valider ----------------------------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.suggestion {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 19px 22px;
  box-shadow: var(--ombre-s);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.suggestion:hover { box-shadow: var(--ombre); border-color: var(--trait-fort); }

.meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 13px;
  padding-right: 78px;
}

.client { font-family: var(--titre); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }

.formulaire {
  display: grid;
  grid-template-columns: 1fr 174px auto;
  gap: 9px;
  align-items: center;
}

.ecarter { position: absolute; top: 17px; right: 19px; }

/* Champs de saisie ---------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], select, textarea {
  font: inherit;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-s);
  padding: 10px 12px;
  width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}

select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

input::placeholder, textarea::placeholder { color: var(--encre-pale); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px var(--anneau);
}

button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Boutons ------------------------------------------------------------------- */

button.principal {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--degrade);
  border: 0;
  border-radius: var(--pilule);
  padding: 11px 22px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--ombre-bleue);
  transition: filter .12s ease, transform .06s ease;
}

button.principal:hover { filter: brightness(1.07) saturate(1.05); }
button.principal:active { transform: translateY(1px); }

.bouton-secondaire {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: var(--pilule);
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.bouton-secondaire:hover { border-color: var(--bleu); color: var(--accent-encre); background: var(--accent-fond); }
.bouton-secondaire:active { transform: translateY(1px); }

.discret-bouton {
  font: inherit;
  font-size: 13px;
  color: var(--encre-douce);
  background: none;
  border: 0;
  border-radius: var(--pilule);
  cursor: pointer;
  padding: 4px 9px;
}

.discret-bouton:hover { color: var(--alerte); background: var(--alerte-fond); }

/* Extraits deroulants ------------------------------------------------------- */

.extrait { margin-top: 12px; font-size: 14px; }

.extrait summary {
  cursor: pointer;
  color: var(--encre-douce);
  font-size: 13px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.extrait summary::-webkit-details-marker { display: none; }

.extrait summary::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}

.extrait[open] summary::before { transform: rotate(45deg); }
.extrait summary:hover { color: var(--encre); }

.extrait p {
  margin: 10px 0 0;
  padding: 14px 16px;
  background: var(--surface-douce);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-s);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--encre-douce);
  line-height: 1.6;
}

/* Tableaux ------------------------------------------------------------------ */

.tableau {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-s);
  font-size: 14px;
}

.tableau th, .tableau td {
  text-align: left;
  padding: 12px 15px;
  border-bottom: 1px solid var(--trait);
  vertical-align: middle;
}

.tableau th {
  font-family: var(--titre);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--encre-douce);
  background: var(--surface-douce);
}

.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover td { background: var(--surface-douce); }
.tableau input[type="checkbox"] { width: auto; accent-color: var(--bleu); }

.jauge {
  display: inline-block;
  min-width: 40px;
  padding: 2px 9px;
  border-radius: var(--pilule);
  font-family: var(--titre);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-encre);
  border: 1px solid var(--accent-trait);
}

/* Chronometre --------------------------------------------------------------- */

.chrono-actif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--accent-fond);
  border: 1px solid var(--accent-trait);
  border-radius: var(--rayon-l);
  padding: 16px 22px;
  margin-bottom: 24px;
}

.chrono-actif strong { font-family: var(--titre); font-weight: 700; letter-spacing: -0.02em; }

.pastille {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bleu);
  margin-right: 9px;
  box-shadow: 0 0 0 3px var(--anneau);
  animation: pulsation 2.4s ease-in-out infinite;
}

@keyframes pulsation { 50% { opacity: .35; } }

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

.compteur {
  font-family: var(--titre);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-encre);
}

/* Formulaire d'ajout replie ------------------------------------------------- */

.ajout { margin-bottom: 26px; }

.ajout summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--encre-douce);
  font-size: 14px;
  padding: 9px 17px;
  border: 1px solid var(--trait);
  border-radius: var(--pilule);
  background: var(--surface);
  list-style: none;
  transition: border-color .12s ease, color .12s ease;
}

.ajout summary::-webkit-details-marker { display: none; }
.ajout summary::before { content: "+"; font-size: 17px; line-height: 1; }
.ajout[open] summary::before { content: "\2013"; }
.ajout summary:hover { border-color: var(--bleu); color: var(--accent-encre); }

.formulaire-ajout {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 2fr minmax(140px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 13px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-s);
}

/* Taches --------------------------------------------------------------------- */

/* Marges hautes et basses : les marges adjacentes fusionnent, deux groupes qui
   se suivent gardent donc un seul intervalle. */
.groupe { margin: 32px 0 36px; }

.groupe h2 { display: flex; align-items: center; gap: 10px; margin-top: 0; }

.tache {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 15px 20px;
  box-shadow: var(--ombre-s);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.tache:hover { box-shadow: var(--ombre); }

.tache.tourne {
  border-color: var(--accent-trait);
  background: var(--degrade) left / 4px 100% no-repeat, var(--surface);
}

.tache-tete { flex: 1; min-width: 250px; display: grid; gap: 7px; }

.tache-titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.tache-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.etiquette {
  font-size: 12px;
  color: var(--encre-douce);
  background: var(--surface-douce);
  border: 1px solid var(--trait);
  border-radius: var(--pilule);
  padding: 3px 11px;
  white-space: nowrap;
}

.echeance { font-size: 13px; color: var(--encre-douce); white-space: nowrap; }

.echeance.retard {
  color: var(--alerte);
  background: var(--alerte-fond);
  border-radius: var(--pilule);
  padding: 3px 11px;
}

/* Exigible avant sa date : une information, pas une alarme. D'ou l'accent de
   la maison plutot que le rouge, reserve a ce qui est en retard. */
.echeance.anticipee {
  color: var(--accent-encre);
  background: var(--accent-fond);
  border-radius: var(--pilule);
  padding: 3px 11px;
  white-space: normal;
}

/* La cellule d'actions empile le formulaire de facturation et le retour en
   arriere, qui ne doivent pas se toucher. */
.tableau td > form + form { margin-top: 8px; }

.tache-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tache-actions form { display: flex; align-items: center; gap: 4px; }

.temps-manuel { position: relative; }

.temps-manuel input {
  width: 80px;
  padding: 9px 34px 9px 12px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  border-radius: var(--pilule);
}

/* L'unite est calee sur le champ, pas sur le conteneur : sinon sa position
   depend de la largeur du bouton voisin, qui change d'un ecran a l'autre. */
.unite {
  position: absolute;
  left: 0;
  width: 80px;
  padding-right: 13px;
  text-align: right;
  font-size: 13px;
  color: var(--encre-douce);
  pointer-events: none;
}

/* Le bouton n'apparait qu'une fois le champ touche : il ne sert que lorsqu'on
   corrige une duree a la main. */
.temps-manuel .discret-bouton { opacity: 0; transition: opacity .12s; }
.temps-manuel:hover .discret-bouton,
.temps-manuel:focus-within .discret-bouton { opacity: 1; }

.tache .extrait { flex-basis: 100%; margin-top: 2px; }

/* Fiche client --------------------------------------------------------------- */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 17px 19px;
  display: grid;
  gap: 7px;
  box-shadow: var(--ombre-s);
}

.carte-titre {
  font-family: var(--titre);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--encre-douce);
}

.carte-valeur {
  font-family: var(--titre);
  /* Un montant a cinq chiffres doit tenir sur une ligne sur un telephone :
     sans cela, le symbole euro part seul a la ligne suivante. */
  font-size: clamp(19px, 5.2vw, 25px);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.forfait {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 19px 21px;
  margin-bottom: 14px;
  box-shadow: var(--ombre-s);
}

.forfait-tete { margin-bottom: 13px; }
.forfait-tete strong { font-family: var(--titre); font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }

.jauge-barre {
  height: 9px;
  background: var(--surface-douce);
  border: 1px solid var(--trait);
  border-radius: var(--pilule);
  overflow: hidden;
}

.jauge-barre span { display: block; height: 100%; background: var(--degrade); border-radius: var(--pilule); }

.alerte-texte { color: var(--alerte); margin: 13px 0 0; }

.grille {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 19px 21px;
  display: grid;
  gap: 11px;
  max-width: 440px;
  box-shadow: var(--ombre-s);
}

.ligne-tarif { display: grid; grid-template-columns: 1fr 120px 50px; align-items: center; gap: 10px; }
.ligne-tarif label { font-size: 14px; }
.ligne-tarif input { text-align: right; }
.grille button { justify-self: start; margin-top: 5px; }

.case { display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.case input { width: auto; accent-color: var(--bleu); }

/* Mail de fin de tache -------------------------------------------------------- */

.carte-mail {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 22px;
  display: grid;
  gap: 13px;
  box-shadow: var(--ombre-s);
}

.ligne-champ { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; }
.ligne-champ label { font-size: 13px; color: var(--encre-douce); }

textarea { line-height: 1.65; padding: 15px 17px; resize: vertical; border-radius: var(--rayon); }

.actions-mail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.signature-mention { margin: 2px 0 0; }
.origine { margin-top: 24px; }

/* Facturation ---------------------------------------------------------------- */

.barre-facturation {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 16px 20px;
  margin-top: 20px;
  position: sticky;
  bottom: 14px;
  box-shadow: var(--ombre-l);
}

.barre-facturation label { font-size: 13px; color: var(--encre-douce); }
.barre-facturation input { width: auto; flex: 1; min-width: 190px; }

.actions-export { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.actions-export .bouton-secondaire { text-decoration: none; display: inline-block; }
.actions-export .discret { flex: 1; min-width: 240px; }

/* Connexion ------------------------------------------------------------------- */

.page-connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--fond);
}

.carte-connexion {
  width: 100%;
  max-width: 370px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 36px 32px;
  display: grid;
  gap: 6px;
  box-shadow: var(--ombre);
}

.carte-connexion .marque { justify-self: center; margin: 0 0 14px; }
.carte-connexion .marque img { width: 158px; }

.carte-connexion h1 {
  font-family: var(--texte);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--encre-douce);
  text-align: center;
  margin: 0 0 20px;
  letter-spacing: 0;
}

.carte-connexion label { font-size: 13px; color: var(--encre-douce); margin-top: 11px; }
.carte-connexion button { margin-top: 22px; padding: 12px; }
.carte-connexion .discret { text-align: center; margin: 0 0 6px; }

.erreur {
  margin: 0 0 10px;
  padding: 11px 14px;
  border-radius: var(--rayon-s);
  background: var(--alerte-fond);
  border: 1px solid var(--alerte-trait);
  color: var(--alerte);
  font-size: 14px;
}

/* Tablette --------------------------------------------------------------------- */

@media (max-width: 1180px) {
  :root { --rail: 212px; }
  main { padding: 36px 30px 80px; }
  .marque img { width: 118px; }
}

@media (max-width: 900px) {
  .formulaire { grid-template-columns: 1fr; }
  .meta { padding-right: 68px; }
  .formulaire-ajout { grid-template-columns: 1fr 1fr; }
  .formulaire-ajout > *:nth-child(3) { grid-column: 1 / -1; }
}

/* Mobile ----------------------------------------------------------------------
   Le rail devient une barre d'onglets en bas d'ecran : c'est la zone que le
   pouce atteint sans effort, et les cinq destinations restent visibles. */

@media (max-width: 780px) {
  body { font-size: 16px; }

  /* Le rail disparait : la coque redevient un simple empilement, sinon
     l'en-tete et le contenu se partageraient la largeur en deux colonnes. */
  .coque { display: block; }
  .rail { display: none; }

  .entete-mobile {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--trait);
  }

  .entete-mobile .marque { margin: 0; }
  .entete-mobile .marque img { width: 112px; }
  .entete-mobile .deconnexion button { width: auto; }

  main {
    margin-left: 0;
    padding: 24px 16px calc(88px + env(safe-area-inset-bottom));
  }

  main > * { max-width: none; }

  h1 { font-size: 26px; }
  .bandeau { margin-bottom: 22px; }

  .onglets {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--trait);
  }

  .onglets a {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 7px 2px 5px;
    border-radius: var(--rayon);
    color: var(--encre-douce);
    text-decoration: none;
    font-size: 10.5px;
    line-height: 1.2;
    text-align: center;
  }

  .onglets a.actif { color: var(--bleu); font-weight: 600; }

  /* Sept destinations sur la largeur d'un telephone : le libelle doit pouvoir
     se raccourcir plutot que de pousser la barre hors de l'ecran. */
  .onglets a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (max-width: 400px) {
    .onglets a { font-size: 9.5px; padding-inline: 1px; }
    .onglets { gap: 1px; padding-inline: 4px; }
  }

  .onglets a .badge {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: 4px;
    min-width: 17px;
    font-size: 10.5px;
    line-height: 16px;
    padding: 0 5px;
  }

  /* Les tableaux deviennent des fiches : chaque cellule porte son intitule,
     sinon les colonnes perdent leur sens une fois l'en-tete masque. */
  .tableau { display: block; background: none; border: 0; box-shadow: none; overflow: visible; }
  .tableau thead { display: none; }
  .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }

  .tableau tr {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-s);
    padding: 13px 16px;
    margin-bottom: 10px;
  }

  .tableau td { border: 0; padding: 3px 0; }
  .tableau tbody tr:hover td { background: none; }

  .tableau td[data-libelle]::before {
    content: attr(data-libelle);
    display: block;
    font-family: var(--titre);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--encre-douce);
    margin-bottom: 1px;
  }

  .tableau td:empty { display: none; }

  .sans-coupure { white-space: normal; }
  .cartes { grid-template-columns: 1fr 1fr; }
  .formulaire-ajout, .ligne-tarif { grid-template-columns: 1fr; }
  .ligne-champ { grid-template-columns: 1fr; gap: 5px; }
  .actions-mail { display: grid; }
  .actions-mail .principal, .actions-mail .bouton-secondaire { width: 100%; }
  .barre-facturation { position: static; }
  .barre-facturation button { width: 100%; }
  .vide { padding: 46px 18px; }

  /* Le temps et le chronometre partagent une ligne, Termine prend toute la
     largeur : c'est l'action principale, elle doit se viser au pouce. */
  .tache-actions { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 9px; }
  .tache-actions form:last-child { grid-column: 1 / -1; }
  .tache-actions form:last-child .principal { width: 100%; padding: 13px; }
  .tache-actions form:nth-child(2) { justify-content: flex-end; }

  /* Au doigt, un texte seul ne se lit pas comme un bouton : on lui donne un
     contour pour qu'on sache qu'il se touche. */
  .temps-manuel .discret-bouton { opacity: 1; border: 1px solid var(--trait); padding: 8px 13px; }

  .ecarter { top: 15px; right: 15px; }
}

/* Source de la tache -----------------------------------------------------------
   D'ou vient la demande : qui l'a ecrite, sur quelle boite, quand, et le texte
   exact. Replie par defaut, pour ne pas encombrer la liste. */

.source summary { font-weight: 500; }

.source-detail {
  margin-top: 11px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}

.source-entete {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 16px;
  margin: 0;
  padding: 14px 17px;
  background: var(--surface-douce);
  border-bottom: 1px solid var(--trait);
  font-size: 13.5px;
}

.source-entete dt {
  font-family: var(--titre);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--encre-douce);
  align-self: center;
}

.source-entete dd { margin: 0; overflow-wrap: anywhere; }

.source-corps {
  margin: 0;
  padding: 16px 18px;
  background: var(--surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--encre-douce);
  font-size: 14px;
  line-height: 1.6;
}

/* Livrables -------------------------------------------------------------------- */

.livrables { margin-bottom: 16px; }

.livrable {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 16px 20px;
  box-shadow: var(--ombre-s);
}

.livrable-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.livrable-nom { font-family: var(--titre); font-weight: 700; letter-spacing: -0.02em; }
.livrable-lien { margin: 0; overflow-wrap: anywhere; }
.livrable-lien .bloc { margin-top: 2px; }
.livrable-couper { position: absolute; top: 15px; right: 16px; }

/* Depot d'un livrable ----------------------------------------------------------- */

.depot-cadre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 13px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-s);
}

.depot-formulaire { display: grid; align-content: start; gap: 11px; }
.depot-formulaire:first-child { border-right: 1px solid var(--trait); padding-right: 22px; }
.depot-formulaire button { justify-self: start; }

.depot-ligne { display: grid; gap: 5px; }
.depot-ligne label { font-size: 13px; color: var(--encre-douce); }

.depot-ligne input[type="file"] {
  font: inherit;
  font-size: 13.5px;
  padding: 9px 12px;
  border: 1px dashed var(--trait-fort);
  border-radius: var(--rayon-s);
  background: var(--surface-douce);
  width: 100%;
}

.depot-ligne input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 13px;
  margin-right: 11px;
  padding: 6px 14px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--pilule);
  background: var(--surface);
  color: var(--encre);
  cursor: pointer;
}

.depot-note { margin: 2px 0 4px; line-height: 1.45; }

@media (max-width: 780px) {
  .depot-cadre { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .depot-formulaire:first-child {
    border-right: 0;
    padding-right: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--trait);
  }
  .depot-formulaire button { justify-self: stretch; width: 100%; }
  .livrable-couper { position: static; margin-top: 10px; }
  .source-entete { grid-template-columns: 1fr; gap: 0 0; }
  .source-entete dt { margin-top: 8px; }
  .source-entete dt:first-child { margin-top: 0; }
}

/* Remplissage des jauges, par pas de 5 %. Ces classes remplacent les styles
   ecrits dans la page : la politique de securite n'a plus a tolerer le style
   en ligne, qui est aussi la porte d'entree la plus courante des injections. */

.remplissage-0 { width: 0%; }
.remplissage-5 { width: 5%; }
.remplissage-10 { width: 10%; }
.remplissage-15 { width: 15%; }
.remplissage-20 { width: 20%; }
.remplissage-25 { width: 25%; }
.remplissage-30 { width: 30%; }
.remplissage-35 { width: 35%; }
.remplissage-40 { width: 40%; }
.remplissage-45 { width: 45%; }
.remplissage-50 { width: 50%; }
.remplissage-55 { width: 55%; }
.remplissage-60 { width: 60%; }
.remplissage-65 { width: 65%; }
.remplissage-70 { width: 70%; }
.remplissage-75 { width: 75%; }
.remplissage-80 { width: 80%; }
.remplissage-85 { width: 85%; }
.remplissage-90 { width: 90%; }
.remplissage-95 { width: 95%; }
.remplissage-100 { width: 100%; }

/* Projets ---------------------------------------------------------------------- */

.projet {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 18px 21px;
  box-shadow: var(--ombre-s);
  display: grid;
  gap: 12px;
}

.projet-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.projet-intitule {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.025em;
}

.projet-tete .bloc { margin-top: 3px; }
.projet-statut select { width: auto; min-width: 132px; }

.projet-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.projet-avancement { display: flex; align-items: center; gap: 8px; }
.projet-avancement input { width: 84px; text-align: right; border-radius: var(--pilule); }

@media (max-width: 780px) {
  .projet-statut { width: 100%; }
  .projet-statut select { width: 100%; }
  .projet-avancement { width: 100%; justify-content: space-between; }
}

/* Jauge de confiance de la releve, par pas de 5 %. */
.jauge-0 { background: linear-gradient(to right, var(--accent-fond) 0%, transparent 0%); }
.jauge-5 { background: linear-gradient(to right, var(--accent-fond) 5%, transparent 5%); }
.jauge-10 { background: linear-gradient(to right, var(--accent-fond) 10%, transparent 10%); }
.jauge-15 { background: linear-gradient(to right, var(--accent-fond) 15%, transparent 15%); }
.jauge-20 { background: linear-gradient(to right, var(--accent-fond) 20%, transparent 20%); }
.jauge-25 { background: linear-gradient(to right, var(--accent-fond) 25%, transparent 25%); }
.jauge-30 { background: linear-gradient(to right, var(--accent-fond) 30%, transparent 30%); }
.jauge-35 { background: linear-gradient(to right, var(--accent-fond) 35%, transparent 35%); }
.jauge-40 { background: linear-gradient(to right, var(--accent-fond) 40%, transparent 40%); }
.jauge-45 { background: linear-gradient(to right, var(--accent-fond) 45%, transparent 45%); }
.jauge-50 { background: linear-gradient(to right, var(--accent-fond) 50%, transparent 50%); }
.jauge-55 { background: linear-gradient(to right, var(--accent-fond) 55%, transparent 55%); }
.jauge-60 { background: linear-gradient(to right, var(--accent-fond) 60%, transparent 60%); }
.jauge-65 { background: linear-gradient(to right, var(--accent-fond) 65%, transparent 65%); }
.jauge-70 { background: linear-gradient(to right, var(--accent-fond) 70%, transparent 70%); }
.jauge-75 { background: linear-gradient(to right, var(--accent-fond) 75%, transparent 75%); }
.jauge-80 { background: linear-gradient(to right, var(--accent-fond) 80%, transparent 80%); }
.jauge-85 { background: linear-gradient(to right, var(--accent-fond) 85%, transparent 85%); }
.jauge-90 { background: linear-gradient(to right, var(--accent-fond) 90%, transparent 90%); }
.jauge-95 { background: linear-gradient(to right, var(--accent-fond) 95%, transparent 95%); }
.jauge-100 { background: linear-gradient(to right, var(--accent-fond) 100%, transparent 100%); }

/* Rodage de la releve ----------------------------------------------------------
   Deux boutons par ligne, et un bilan qui dit ou on en est. La mise en service
   n'apparait que lorsqu'elle est justifiee par les chiffres. */

.rodage {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 20px 22px;
  margin-bottom: 26px;
  box-shadow: var(--ombre-s);
}

.rodage .cartes { margin-bottom: 14px; }
.rodage .carte { box-shadow: none; background: var(--surface-douce); }
.rodage .carte .discret { font-size: 12.5px; line-height: 1.35; }
.rodage-note { margin: 0 0 16px; line-height: 1.5; }

.rodage-action {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--trait);
}

.ligne-rodage {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 17px 20px;
  box-shadow: var(--ombre-s);
  display: grid;
  gap: 7px;
}

.ligne-rodage.discrete { background: var(--surface-douce); }
.ligne-rodage.jugee { border-color: var(--accent-trait); }

.ligne-rodage-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ligne-rodage-titre { margin: 0; font-weight: 500; line-height: 1.4; }
.ligne-rodage .discret { margin: 0; overflow-wrap: anywhere; }

.verdict { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }

.puce {
  font: inherit;
  font-size: 13.5px;
  color: var(--encre-douce);
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: var(--pilule);
  padding: 7px 16px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.puce:hover { border-color: var(--bleu); color: var(--accent-encre); }

/* Le verdict retenu se voit sans avoir a le chercher. */
.puce.choisie {
  color: #fff;
  background: var(--degrade);
  border-color: transparent;
  font-weight: 600;
  box-shadow: var(--ombre-bleue);
}

.puce.contraire:hover { border-color: var(--alerte); color: var(--alerte); background: var(--alerte-fond); }
.puce.contraire.choisie { background: var(--alerte); box-shadow: none; }

@media (max-width: 780px) {
  .rodage { padding: 18px; }
  .rodage .cartes { grid-template-columns: 1fr; }
  .rodage-action .principal, .rodage-action .bouton-secondaire { width: 100%; }
  .verdict { display: grid; grid-template-columns: 1fr 1fr; }
  .verdict form { display: grid; }
  .puce { width: 100%; padding: 11px 12px; }
}

/* Projets sur la fiche client, echeanciers -------------------------------------
   Le chiffre le plus important du dossier : il vient avant tout le reste, et
   se lit sans avoir a ouvrir quoi que ce soit. */

.projet-fiche {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 19px 21px;
  margin-bottom: 14px;
  box-shadow: var(--ombre-s);
}

.projet-fiche-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.projet-fiche-tete .bloc { margin-top: 3px; }

.projet-chiffres {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding: 13px 0;
  margin-bottom: 4px;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.projet-chiffres .chiffre-titre { display: block; }
.projet-fiche .tableau { margin-top: 14px; }
.projet-fiche .avis.ecart { margin: 14px 0 0; font-size: 13.5px; }

/* Un manque se signale, il ne se cache pas : c'est le seul endroit ou l'on
   verra qu'une information reste a fournir. */
.manquant {
  color: var(--alerte);
  background: var(--alerte-fond);
  border-radius: var(--pilule);
  padding: 2px 10px;
  font-size: 13px;
  white-space: nowrap;
}

.carte.urgent { border-color: var(--accent-trait); background: var(--accent-fond); }
.carte.urgent .carte-valeur { color: var(--accent-encre); }
.carte .discret { font-size: 12.5px; line-height: 1.35; }

.marquer-facturee { display: flex; gap: 7px; align-items: center; }
.marquer-facturee input { width: 130px; font-size: 13.5px; padding: 7px 11px; border-radius: var(--pilule); }

.discret-bouton.neutre:hover { color: var(--accent-encre); background: var(--accent-fond); }

/* Termine : l'action la plus lourde du systeme, donc la moins voyante. Sur un
   telephone, un bouton plein pleine largeur se touche par accident. */
.bouton-terminer {
  font: inherit;
  font-size: 14px;
  color: var(--encre-douce);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--pilule);
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s ease, color .12s ease;
}

.bouton-terminer:hover { border-color: var(--encre-douce); color: var(--encre); }

@media (max-width: 780px) {
  .projet-chiffres { gap: 20px; font-size: 16px; }
  .marquer-facturee { width: 100%; }
  .marquer-facturee input { flex: 1; width: auto; }

  /* Demarrer prend la largeur, Termine reste une petite pilule a cote. */
  .tache-actions form:last-child { grid-column: auto; }
  .tache-actions form:nth-child(3) { grid-column: 1 / -1; }
  .tache-actions form:nth-child(3) .principal { width: 100%; padding: 13px; }
  .tache-actions form:last-child .bouton-terminer { width: auto; }
}

/* Echeances modifiables ---------------------------------------------------------
   Tout se renomme, se corrige et se supprime. Sauf ce qui est parti chez le
   client : une echeance facturee s'annule par ecriture inverse. */

.echeancier { gap: 9px; margin-top: 14px; }

.echeance-ligne {
  background: var(--surface-douce);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 14px 17px;
}

.echeance-ligne.etat-exigible { border-color: var(--accent-trait); background: var(--accent-fond); }
.echeance-ligne.etat-facturee { background: var(--surface); }

.echeance-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.echeance-nom { flex: 1; min-width: 200px; }
.echeance-libelle { font-weight: 550; }

.echeance-montant {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.etat-echeance {
  font-size: 12.5px;
  color: var(--encre-douce);
  white-space: nowrap;
}

.etat-echeance.exigible { color: var(--accent-encre); font-weight: 600; }
.etat-echeance.facturee { color: var(--succes); }
.etat-echeance.retard { color: var(--alerte); font-weight: 600; }

.echeance-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 11px;
}

.echeance-modif, .projet-modif, .tache-modif { margin-top: 10px; }
.echeance-annuler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}

.formulaire-echeance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 11px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.formulaire-echeance label { display: grid; gap: 4px; font-size: 14px; }
.formulaire-echeance label.case { display: flex; align-items: center; grid-column: 1 / -1; }
.formulaire-echeance .discret { font-size: 12.5px; }

.echeance-modif-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--trait);
}

/* Ce qu'une tache debloque a la facturation. */
.debloque {
  font-size: 12px;
  color: var(--accent-encre);
  background: var(--accent-fond);
  border: 1px solid var(--accent-trait);
  border-radius: var(--pilule);
  padding: 2px 10px;
  white-space: nowrap;
}

/* Contacts ---------------------------------------------------------------------- */

.contacts { gap: 9px; }

.contact {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 14px 17px;
  box-shadow: var(--ombre-s);
}

.contact-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-nom { font-weight: 550; margin-right: 8px; }
.contact-tete .bloc { margin-top: 3px; }

.fiche-client { max-width: 620px; }
.fiche-client label { display: grid; gap: 4px; font-size: 14px; }
.fiche-client .discret { font-size: 12.5px; }
.ligne-double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 780px) {
  .formulaire-echeance, .ligne-double { grid-template-columns: 1fr; }
  .echeance-actions .bouton-secondaire { width: 100%; }
  .marquer-facturee { flex-wrap: wrap; }
}

/* --- Relevé ligne par ligne ------------------------------------------- */

.raccourci { margin: 0 0 18px; }

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 22px;
}

/* Les champs du formulaire occupent toute la largeur par défaut, ce qui
   empilerait les cinq filtres les uns sous les autres. Ici ils tiennent en
   ligne, la recherche prenant la place qui reste. */
.filtres input[type="search"] { flex: 1 1 240px; min-width: 0; }
.filtres select { flex: 0 1 auto; width: auto; }

.filtres select,
.filtres input[type="search"] {
  padding: 9px 12px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-m);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: 14px;
}

.filtres select:focus-visible,
.filtres input[type="search"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Une entrée n'est pas une dépense : elle ne doit pas se lire comme telle. */
.positif { color: var(--vert, #0a7d4b); }

.pagination {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin: 22px 0 0;
  font-size: 14px;
}

@media (max-width: 700px) {
  .filtres { gap: 8px; }
  .filtres select { flex: 1 1 calc(50% - 4px); }
}

/* --- Agents et constats ------------------------------------------------ */

.constat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 16px 18px 14px 21px;
  box-shadow: var(--ombre-s);
  overflow: hidden;
}

/* Le filet de couleur suffit à hiérarchiser. Trois fonds colorés d'affilée
   forment un mur que l'oeil finit par ignorer, et le gardien perd sa voix. */
.constat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--trait-fort);
}

.constat.grave::before { background: var(--alerte); }
.constat.calme::before { background: var(--trait); }

.constat-texte { margin: 0 0 5px; font-size: 15px; line-height: 1.5; }
.constat-preuve { margin: 0 0 11px; font-size: 13px; }

.constat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.constat-actions form { display: inline-flex; align-items: center; gap: 7px; }

.constat-actions .rappel select {
  width: auto;
  padding: 5px 26px 5px 9px;
  font-size: 13px;
  border-radius: var(--rayon-s);
}

.alerte-ligne td:first-child { box-shadow: inset 3px 0 0 var(--alerte); }

@media (max-width: 700px) {
  .constat-actions { gap: 8px; }
  .constat-actions .rappel { flex: 1 1 100%; }
}

/* --- Briefing ---------------------------------------------------------- */

.briefing {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  padding: 26px 30px 22px;
  box-shadow: var(--ombre-s);
  margin-bottom: 18px;
}

.briefing-partie {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 22px 0 9px;
  color: var(--accent-encre);
}

.briefing-partie:first-child { margin-top: 0; }

.briefing-liste { margin: 0; padding-left: 19px; display: grid; gap: 7px; }
.briefing-liste li { line-height: 1.5; }

.briefing.ancien { box-shadow: none; background: var(--surface-douce); }
.briefing.ancien .briefing-partie { font-size: 14px; color: var(--encre-douce); }

@media (max-width: 700px) {
  .briefing { padding: 20px 18px 16px; }
}