/* Espace client YH Consulting — charte maison */
:root {
  --oxide: #CC0202;
  --oxide-sombre: #A00101;
  --ink: #141213;
  --ink-doux: #4A4547;
  --gris: #8A8386;
  --trait: #E3DFE0;
  --fond: #FAF8F8;
  --carte: #FFFFFF;
  --ok: #1B7F4B;
  --ok-fond: #E8F4ED;
  --attente: #B4700A;
  --attente-fond: #FBF1E0;
  --alerte: #C0261E;
  --alerte-fond: #FBE9E8;
  --neutre: #5C5659;
  --neutre-fond: #EFECED;
  --rayon: 4px;
  --titre: "Raleway", "Segoe UI", sans-serif;
  --texte: "Open Sans", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--fond);
}

h1, h2, h3 { font-family: var(--titre); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
a { color: var(--oxide); }

.barre { background: var(--ink); color: #fff; border-bottom: 3px solid var(--oxide); }
.barre .dedans {
  max-width: 1080px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.marque {
  font-family: var(--titre); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 0.95rem; color: #fff; text-decoration: none;
}
.marque span { color: var(--oxide); }
.barre nav { display: flex; gap: 18px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.barre nav a { color: #E8E4E5; text-decoration: none; font-size: 0.85rem; }
.barre nav a:hover { color: #fff; }
.barre .bouton.discret { color: #E8E4E5; border-color: rgba(255, 255, 255, 0.28); }
.barre .bouton.discret:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: #fff; }
.qui { font-size: 0.78rem; color: var(--gris); }

main { max-width: 1080px; margin: 0 auto; padding: 32px 20px 72px; }
.entete { margin-bottom: 28px; }
.entete p { color: var(--ink-doux); margin: 6px 0 0; }
.surtitre {
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--oxide); margin: 0 0 6px;
}

section { margin-bottom: 36px; }
section > h2 { padding-bottom: 8px; border-bottom: 1px solid var(--trait); margin-bottom: 14px; }

.grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.carte {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 16px 18px;
}
.carte h3 { margin-bottom: 4px; }
.carte .meta { font-size: 0.8rem; color: var(--gris); }
.carte.appel { border-left: 3px solid var(--oxide); }

.chiffre { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.legende { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris); }

.tableau { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--trait); }
.tableau th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gris); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--trait);
}
.tableau td { padding: 12px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau tr:last-child td { border-bottom: none; }
.tableau .nombre {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.defilant { overflow-x: auto; }
.ref { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-doux); }

.etat {
  display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.etat.ok { background: var(--ok-fond); color: var(--ok); }
.etat.attente { background: var(--attente-fond); color: var(--attente); }
.etat.alerte { background: var(--alerte-fond); color: var(--alerte); }
.etat.neutre { background: var(--neutre-fond); color: var(--neutre); }

.bouton, button.bouton {
  display: inline-block; font-family: var(--texte); font-size: 0.88rem; font-weight: 600;
  padding: 10px 20px; border-radius: var(--rayon); border: 1px solid var(--oxide);
  background: var(--oxide); color: #fff; text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--oxide-sombre); border-color: var(--oxide-sombre); }
.bouton.discret { background: transparent; color: var(--ink); border-color: var(--trait); }
.bouton.discret:hover { background: #fff; border-color: var(--ink); }
.bouton.mini { padding: 6px 12px; font-size: 0.8rem; }
.bouton[disabled] { opacity: 0.45; cursor: not-allowed; }

label {
  display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-doux); margin-bottom: 5px;
}
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], textarea, select {
  width: 100%; padding: 10px 12px; font-family: var(--texte); font-size: 0.95rem;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid rgba(204, 2, 2, 0.35); outline-offset: 1px; border-color: var(--oxide);
}
textarea { min-height: 90px; resize: vertical; }
.champ { margin-bottom: 14px; }
.duo { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
fieldset {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 16px 18px; margin: 0 0 18px; background: var(--carte);
}
legend { font-family: var(--titre); font-weight: 700; padding: 0 8px; font-size: 0.95rem; }
.coche {
  display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem;
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink);
}
.coche input { width: auto; margin-top: 4px; }
input[type=checkbox] { accent-color: var(--oxide); width: auto; }
.option { margin-top: 3px; }
.option.fixe { visibility: hidden; }

.message { padding: 12px 16px; border-radius: var(--rayon); margin-bottom: 18px; font-size: 0.9rem; }
.message.erreur { background: var(--alerte-fond); color: var(--alerte); border: 1px solid #F0C9C6; }
.message.succes { background: var(--ok-fond); color: var(--ok); border: 1px solid #C4E2D2; }
.message.info { background: var(--neutre-fond); color: var(--neutre); border: 1px solid var(--trait); }
.vide { color: var(--gris); font-style: italic; }

.accueil { min-height: 100vh; display: grid; place-items: center; padding: 28px 20px; }
.boite {
  width: 100%; max-width: 400px; background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 32px;
}
.boite .marque { color: var(--ink); display: block; margin-bottom: 4px; }
.boite h1 { font-size: 1.35rem; margin-bottom: 20px; }
.boite .bouton { width: 100%; text-align: center; }
.sous-boite { margin-top: 18px; font-size: 0.82rem; text-align: center; }

.ligne-devis {
  display: flex; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--trait); align-items: flex-start;
}
.ligne-devis:last-child { border-bottom: none; }
.ligne-devis .corps { flex: 1; min-width: 0; }
.ligne-devis .intitule { font-weight: 600; }
.ligne-devis .description { font-size: 0.87rem; color: var(--ink-doux); margin-top: 2px; }
.ligne-devis .prix {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; font-weight: 600;
}
.groupe {
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--oxide); margin: 22px 0 2px;
}
.total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0 0; border-top: 2px solid var(--ink); margin-top: 8px;
}
.total .chiffre { font-size: 1.9rem; }

.signature-zone {
  border: 1px dashed var(--gris); border-radius: var(--rayon); background: #fff;
  touch-action: none; display: block; width: 100%; max-width: 420px; height: 150px;
}
.preuve { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-doux); line-height: 1.8; }
.preuve img {
  display: block; max-width: 320px; margin-top: 8px;
  border: 1px solid var(--trait); background: #fff;
}

.phases { list-style: none; margin: 10px 0 0; padding: 0; }
.phases li { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--trait); }
.phases li:last-child { border-bottom: none; }
.phases .num { font-family: var(--mono); font-size: 0.78rem; color: var(--gris); min-width: 24px; }
.phases .quoi { flex: 1; min-width: 0; }

.pied { max-width: 1080px; margin: 0 auto; padding: 0 20px 40px; font-size: 0.78rem; color: var(--gris); }

@media (max-width: 640px) {
  h1 { font-size: 1.4rem; }
  main { padding: 24px 16px 56px; }
  .duo { grid-template-columns: 1fr; }
  .barre .dedans { padding: 12px 16px; gap: 12px; }
  .barre nav { margin-left: 0; width: 100%; gap: 14px; }
  .ligne-devis { flex-wrap: wrap; }
}

.lien-invitation { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.lien-invitation .ref { word-break: break-all; font-size: 0.72rem; }

/* --- tableau de bord --- */
.entete-page {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
}
.entete-page .titre { min-width: 0; }
.entete-page p { color: var(--ink-doux); margin: 6px 0 0; }

.tuiles {
  display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  overflow: hidden; margin-bottom: 34px;
}
.tuile { background: var(--carte); padding: 16px 18px 18px; }
.tuile .legende { display: block; margin-bottom: 6px; min-height: 2.1em; }
.tuile .chiffre { display: block; line-height: 1.15; }
.tuile .note { font-size: 0.78rem; color: var(--gris); margin-top: 4px; }
.tuile .note.alerte { color: var(--alerte); }
.tuile.vedette { background: var(--ink); }
.tuile.vedette .legende { color: rgba(255, 255, 255, 0.55); }
.tuile.vedette .chiffre { color: #fff; }
.tuile.vedette .note { color: rgba(255, 255, 255, 0.6); }

.a_traiter { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.a_traiter li {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: 13px 2px; border-bottom: 1px solid var(--trait);
}
.a_traiter .puce {
  width: 6px; height: 6px; border-radius: 50%; background: var(--oxide);
  flex: none; transform: translateY(-2px);
}
.a_traiter .puce.calme { background: var(--gris); }
.a_traiter .quoi { flex: 1; min-width: 200px; }
.a_traiter .quoi strong { font-weight: 600; }
.a_traiter .appoint { font-family: var(--mono); font-size: 0.8rem; color: var(--gris); }

.colonnes { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; align-items: start; }
.rien { padding: 18px; border: 1px dashed var(--trait); border-radius: var(--rayon); color: var(--gris); }

@media (max-width: 760px) {
  .colonnes { grid-template-columns: 1fr; }
  .entete-page { align-items: flex-start; }
}

/* --- devis public : pas de barre de navigation, une simple signature visuelle --- */
.bandeau-public {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 26px;
  border-bottom: 3px solid var(--oxide);
}
.bandeau-public .marque { color: var(--ink); }
.bandeau-public .marque span { color: var(--oxide); }

/* Note explicative sous un champ : du texte courant, pas de la donnée technique. */
.aide { display: block; margin-top: 5px; font-size: 0.8rem; color: var(--gris); line-height: 1.45; }

/* --- visite d'un espace par l'administration --- */
.bandeau-visite { background: var(--attente-fond); border-bottom: 1px solid #E9D5AE; }
.bandeau-visite .dedans {
  max-width: 1080px; margin: 0 auto; padding: 11px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--attente);
}
.bandeau-visite .dedans span { flex: 1; min-width: 240px; }
.bandeau-visite .bouton.discret { border-color: #E0C48E; color: var(--attente); background: #fff; }
.bandeau-visite .bouton.discret:hover { border-color: var(--attente); }

/* --- devis pas à pas --- */
.jalons {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 28px; padding: 0; font-size: 0.72rem;
}
.jalons li {
  padding: 5px 12px; border: 1px solid var(--trait); border-radius: 999px;
  color: var(--gris); background: var(--carte); cursor: pointer; white-space: nowrap;
  font-family: var(--mono); letter-spacing: 0.02em;
}
.jalons li:hover { border-color: var(--gris); color: var(--ink-doux); }
.jalons li.fait { color: var(--ink-doux); border-color: var(--ink-doux); }
.jalons li.ici {
  background: var(--ink); border-color: var(--ink); color: #fff; cursor: default;
}

.etape h1 { margin-bottom: 4px; }
.etape[hidden] { display: none !important; }

.pas {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 28px; padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--trait); background: var(--fond);
}
.pas .pas-total {
  margin-left: auto; font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gris);
}
.pas .pas-total b {
  font-family: var(--mono); font-size: 1.05rem; color: var(--ink);
  letter-spacing: 0; margin-left: 6px;
}
.pas #precedent[hidden], .pas #suivant[hidden], .pas #signer[hidden] { display: none; }

.recap-ligne {
  display: flex; gap: 14px; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--trait);
}
.recap-ligne:last-child { border-bottom: none; }
.recap-ligne .prix { font-family: var(--mono); white-space: nowrap; font-weight: 600; }

@media (max-width: 640px) {
  .pas { gap: 10px; }
  .pas .pas-total { width: 100%; margin-left: 0; order: -1; }
}

/* Retouche d'une ligne de devis, repliée par défaut pour ne pas noyer la lecture. */
.retouche { margin: -4px 0 14px; padding-left: 0; }
.retouche > summary {
  cursor: pointer; font-size: 0.75rem; color: var(--gris);
  text-transform: uppercase; letter-spacing: 0.06em; list-style: none;
}
.retouche > summary::-webkit-details-marker { display: none; }
.retouche > summary::before { content: "+ "; color: var(--oxide); }
.retouche[open] > summary::before { content: "− "; }
.retouche > summary:hover { color: var(--ink); }
.retouche form { margin-top: 12px; padding: 14px; background: var(--fond); border-radius: var(--rayon); }

/* ---- Tableau de bord d'administration ------------------------------------ */
.tb-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.tb-entete h1 { margin: 2px 0 10px; font-size: 1.9rem; }
.tb-date { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gris); }
.tb-statuts { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-statut { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--neutre-fond); color: var(--neutre); }
.tb-statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tb-statut.ok { background: var(--ok-fond); color: var(--ok); }
.tb-statut.attente { background: var(--attente-fond); color: var(--attente); }
.tb-statut.alerte { background: var(--alerte-fond); color: var(--alerte); }

.tb-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 34px; }
.tb-chiffre { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.tb-chiffre strong { font-family: var(--mono); font-size: 1.65rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.tb-legende { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris); }
.tb-note { font-size: 0.8rem; color: var(--gris); }
.tb-chiffre.vedette { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--oxide); }
.tb-chiffre.vedette strong { color: #fff; }
.tb-chiffre.vedette .tb-legende, .tb-chiffre.vedette .tb-note { color: rgba(255,255,255,.6); }
.tb-chiffre.alerte { border-color: var(--alerte); }
.tb-chiffre.alerte .tb-note { color: var(--alerte); font-weight: 600; }

.tb-bloc { margin-bottom: 34px; min-width: 0; }
.tb-titre-bloc { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tb-titre-bloc h2 { margin: 0; font-size: 1.15rem; border: 0; padding: 0; }
.tb-titre-bloc p { margin: 0; font-size: 0.82rem; color: var(--gris); }

.tb-pipeline { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); align-items: start; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.tb-colonne { background: var(--neutre-fond); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 150px; border-top: 3px solid var(--gris); }
.tb-colonne.envoye { border-top-color: var(--attente); }
.tb-colonne.signe { border-top-color: var(--oxide); }
.tb-colonne.cours { border-top-color: var(--ink); }
.tb-colonne.livre { border-top-color: var(--ok); }
.tb-col-tete { display: flex; justify-content: space-between; align-items: center; }
.tb-col-nom { font-family: var(--titre); font-weight: 700; font-size: 0.92rem; }
.tb-compte { font-family: var(--mono); font-size: 0.75rem; background: var(--carte); border-radius: 999px; padding: 1px 9px; color: var(--ink-doux); }
.tb-col-aide { font-size: 0.75rem; color: var(--gris); margin: -4px 0 2px; }
.tb-carte { display: flex; flex-direction: column; gap: 4px; background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; padding: 11px 12px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tb-carte:hover { border-color: var(--oxide); box-shadow: 0 4px 14px rgba(20,18,19,.08); transform: translateY(-1px); }
.tb-carte-titre { font-weight: 600; font-size: 0.88rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-carte-qui { font-size: 0.76rem; color: var(--gris); }
.tb-carte-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.tb-pastille { font-size: 0.7rem; color: var(--ink-doux); background: var(--neutre-fond); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.tb-pastille:empty { display: none; }
.tb-pastille.alerte { background: var(--attente-fond); color: var(--attente); font-weight: 600; }
.tb-montant { font-family: var(--mono); font-weight: 700; font-size: 0.86rem; white-space: nowrap; }
.tb-barre { height: 4px; background: var(--neutre-fond); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.tb-barre span { display: block; height: 100%; background: var(--ok); }
.tb-vide { font-size: 0.78rem; color: var(--gris); text-align: center; padding: 22px 6px; border: 1px dashed var(--trait); border-radius: 8px; }

.tb-duo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; }
.tb-taches, .tb-fil { list-style: none; margin: 0; padding: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; }
.tb-taches li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--trait); }
.tb-taches li:last-child, .tb-fil li:last-child { border-bottom: 0; }
.tb-point { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--gris); }
.tb-taches li.alerte .tb-point { background: var(--alerte); }
.tb-taches li.attente .tb-point { background: var(--attente); }
.tb-tache { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; min-width: 0; }
.tb-sous { font-size: 0.76rem; color: var(--gris); }
.tb-sous.alerte { color: var(--alerte); font-weight: 600; }
.tb-fil li { padding: 11px 14px; border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; gap: 2px; }
.tb-fil-quoi { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-calme { background: var(--carte); border: 1px dashed var(--trait); border-radius: 10px; padding: 22px; font-size: 0.86rem; color: var(--ink-doux); }
.tb-calme strong { display: block; color: var(--ok); margin-bottom: 2px; }

.tb-liste { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.tb-rangee { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--trait); text-decoration: none; color: inherit; }
.tb-rangee:last-child { border-bottom: 0; }
.tb-rangee:hover { background: var(--fond); }
.tb-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--titre); font-weight: 700; flex-shrink: 0; }
.tb-rangee-corps { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.88rem; }
.tb-rangee-corps strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-rangee-fin { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

@media (max-width: 900px) {
  .tb-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-duo { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 560px) {
  .tb-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tb-entete .bouton { width: 100%; text-align: center; }
  .tb-titre-bloc p { display: none; }
  .tb-chiffre strong { font-size: 1.25rem; }
  .tb-pipeline { grid-template-columns: repeat(4, 78%); scroll-snap-type: x mandatory; }
  .tb-colonne { scroll-snap-align: start; }
}
.tb-chiffre, .tb-colonne, .tb-carte, .tb-taches li, .tb-fil li { min-width: 0; }
.tb-pastille.neutre { background: var(--fond); border: 1px dashed var(--trait); }

/* ---- Menu « Créer » ------------------------------------------------------- */
.tb-creer { position: relative; }
.tb-creer > summary { list-style: none; cursor: pointer; }
.tb-creer > summary::-webkit-details-marker { display: none; }
.tb-creer-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 290px; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; box-shadow: 0 12px 32px rgba(20,18,19,.14); padding: 6px; display: flex; flex-direction: column; }
.tb-creer-liste a { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 7px; text-decoration: none; color: var(--ink); }
.tb-creer-liste a:hover { background: var(--fond); }
.tb-creer-liste strong { font-size: 0.9rem; }
.tb-creer-liste span { font-size: 0.76rem; color: var(--gris); }
.tb-date a { color: inherit; }

/* ---- Page de création ----------------------------------------------------- */
.cr-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cr-type { padding: 8px 16px; border: 1px solid var(--trait); border-radius: 999px; text-decoration: none; color: var(--ink-doux); background: var(--carte); font-weight: 600; font-size: 0.88rem; }
.cr-type:hover { border-color: var(--ink); color: var(--ink); }
.cr-type.actif { background: var(--ink); color: #fff; border-color: var(--ink); }
.cr-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 26px 28px; max-width: 760px; }
.cr-etape { display: flex; gap: 16px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--trait); }
.cr-num { width: 28px; height: 28px; border-radius: 50%; background: var(--oxide); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.cr-corps { flex: 1; min-width: 0; }
.cr-titre { display: block; font-family: var(--titre); font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.cr-corps select { width: 100%; }
.cr-suite { font-size: 0.84rem; color: var(--gris); margin: 0 0 14px; }

/* ---- Fiche client ---------------------------------------------------------- */
.fc-identite { display: flex; gap: 16px; align-items: center; }
.tb-avatar.grand { width: 56px; height: 56px; font-size: 1.5rem; }
.fc-actions { display: flex; gap: 10px; align-items: center; }
.tb-chiffre strong small { font-size: 0.8rem; font-weight: 400; margin-left: 2px; }
.tb-chiffre.vedette strong small { color: rgba(255,255,255,.7); }
.fc-grille { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 26px; }
.fc-lien { font-size: 0.84rem; font-weight: 600; color: var(--oxide); text-decoration: none; }
.fc-lien:hover { text-decoration: underline; }
.fc-projet { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.fc-projet-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.fc-phases { list-style: none; margin: 10px 0 0; padding: 0; }
.fc-phases li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.86rem; border-top: 1px solid var(--trait); }
.fc-phases li.livree span:first-child, .fc-phases li.validee span:first-child { color: var(--gris); text-decoration: line-through; }
.fc-contact { padding: 12px 14px; border-bottom: 1px solid var(--trait); }
.fc-contact:last-child { border-bottom: 0; }
.fc-contact .bouton { margin-top: 6px; align-self: flex-start; }
.tb-rangee-fin form { margin: 0; }

@media (max-width: 900px) {
  .fc-grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 560px) {
  .fc-actions { width: 100%; }
  .fc-actions > * { flex: 1; }
  .fc-actions .bouton { width: 100%; text-align: center; }
  .tb-creer-liste { right: auto; left: 0; width: min(290px, calc(100vw - 40px)); }
  .cr-carte { padding: 18px 16px; }
  .cr-etape { gap: 10px; }
}

/* ---- Prospection Codeur ---------------------------------------------------- */
.pr-operations { margin-bottom: 18px; }
.pr-generer { padding: 14px; gap: 8px; width: 340px; }
.pr-generer label { margin: 0; }
.pr-carte { background: var(--carte); border: 1px solid var(--trait); border-left: 3px solid var(--gris); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pr-carte.attente { border-left-color: var(--attente); }
.pr-carte.ok { border-left-color: var(--ok); }
.pr-carte.alerte { border-left-color: var(--alerte); }
.pr-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.pr-titre { min-width: 0; }
.pr-titre h2 { font-size: 1.02rem; border: 0; padding: 0; margin: 0 0 2px; }
.pr-titre p, .pr-carte > p { margin: 0; }
.pr-marques { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pr-note { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; }
.pr-note small { font-size: 0.7rem; font-weight: 400; color: var(--gris); }
.pr-raison { font-size: 0.86rem; color: var(--ink-doux); }
.pr-texte > summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--oxide); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pr-longueur { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--gris); }
.pr-longueur.alerte { color: var(--attente); }
.pr-texte pre { margin: 10px 0 0; padding: 14px 16px; background: var(--fond); border: 1px solid var(--trait); border-radius: 8px; font-family: var(--texte); font-size: 0.88rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pr-actions form { margin: 0; display: flex; gap: 8px; }
.pr-actions > a:first-child { margin-right: auto; }
.pr-ecarter { position: relative; }
.pr-ecarter > summary { list-style: none; }
.pr-ecarter > summary::-webkit-details-marker { display: none; }
.pr-ecarter form { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 10; width: 300px; padding: 10px; background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; box-shadow: 0 12px 32px rgba(20,18,19,.14); }
.barre nav a.ici { color: #fff; box-shadow: 0 2px 0 var(--oxide); }

@media (max-width: 560px) {
  .pr-tete { flex-direction: column; gap: 8px; }
  .pr-actions { justify-content: flex-start; }
  .pr-actions .bouton { text-align: center; }
  .pr-ecarter form { right: auto; left: 0; width: min(300px, calc(100vw - 72px)); }
  .pr-generer { width: min(340px, calc(100vw - 40px)); }
}

/* ---- Chiffres cliquables et pages de détail -------------------------------- */
a.tb-chiffre { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.tb-chiffre:hover, a.tb-chiffre:focus-visible { border-color: var(--oxide); box-shadow: 0 4px 14px rgba(20,18,19,.08); transform: translateY(-1px); }
a.tb-chiffre .tb-note::after { content: " →"; }
.af-total { font-family: var(--mono); font-weight: 700; font-size: 1.5rem; }
.af-rangee { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--trait); }
.af-rangee:last-child { border-bottom: 0; }
.af-rangee:hover { background: var(--fond); }
.af-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.af-corps > a { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.af-corps > a:hover { color: var(--oxide); }
.af-raison { font-size: 0.82rem; color: var(--ink-doux); }
.af-liens { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; font-size: 0.78rem; margin-top: 2px; }
.af-fin { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
@media (max-width: 560px) {
  .af-rangee { flex-direction: column; gap: 8px; }
  .af-fin { flex-direction: row; align-items: center; }
}

/* ---- page de connexion : encre à gauche, papier à droite, filets, pas de carte ---- */
main:has(> .connexion) { max-width: none; padding: 0; margin: 0; }
main:has(> .connexion) + footer { display: none; }   /* la page occupe tout l'écran, rien ne défile */
.connexion-tete h2 { white-space: nowrap; }
.connexion { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); background: var(--fond); }
.connexion-encre { position: relative; background: var(--ink); color: #E8E4E5; padding: clamp(28px, 5vw, 64px) clamp(28px, 6vw, 88px) clamp(28px, 5vw, 56px) calc(clamp(28px, 6vw, 88px) + 34px); display: flex; flex-direction: column; justify-content: space-between; border-right: 3px solid var(--oxide); }
.connexion-encre::before { content: "ESPACE CLIENT · YH CONSULTING · PARIS · TANGER"; position: absolute; left: clamp(14px, 2vw, 26px); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.24em; color: rgba(255,255,255,0.5); white-space: nowrap; }
.connexion-encre::after { content: ""; position: absolute; left: calc(clamp(14px, 2vw, 26px) + 18px); top: clamp(28px, 5vw, 64px); bottom: clamp(28px, 5vw, 56px); width: 1px; background: rgba(255,255,255,0.16); }
.connexion-encre .marque { align-self: flex-start; display: inline-flex; align-items: baseline; }
.connexion-encre .marque small { font-family: var(--mono); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.55); margin-left: 14px; text-transform: uppercase; }
.connexion-eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); margin: 0; }
.connexion-encre .connexion-eyebrow { color: rgba(255,255,255,0.55); }
.connexion-encre h1 { font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 0.94; letter-spacing: -0.04em; font-weight: 800; color: #fff; max-width: 13ch; margin: 28px 0 22px; }
.connexion-encre h1 em { font-style: normal; color: #EE5A4E; }
.connexion-texte { color: rgba(255,255,255,0.78); max-width: 44ch; font-size: 0.98rem; margin: 0; }
.connexion-bas { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.connexion-bas b { width: 8px; height: 8px; background: var(--oxide); display: inline-block; }
.connexion-papier { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 72px); }
.connexion-carte { width: min(100%, 420px); }
.connexion-tete { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 22px; }
.connexion-tete .num { font-family: var(--mono); font-size: 0.72rem; color: var(--oxide); letter-spacing: 0.1em; }
.connexion-tete h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -0.03em; font-weight: 800; margin: 0; }
.connexion-tete .connexion-eyebrow { margin-left: auto; }
.connexion-sous { margin: 0 0 24px; color: var(--ink-doux); font-size: 0.95rem; max-width: 40ch; }
.connexion .message.erreur { margin-bottom: 18px; }
.fournisseurs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.fournisseur { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 108px; padding: 18px 12px; background: var(--fond); color: var(--ink); font-size: 0.86rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; transition: background 0.2s, color 0.2s; }
.fournisseur + .fournisseur { border-left: 1px solid var(--ink); }
.fournisseur:only-child { grid-column: 1 / -1; }
.fournisseur svg { width: 26px; height: 26px; }
.fournisseur span { display: block; }
.fournisseur small { display: block; font-family: var(--mono); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); margin-top: 3px; }
.fournisseur:hover { background: var(--ink); color: #fff; }
.fournisseur:hover small { color: rgba(255,255,255,0.55); }
.connexion-separateur { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }
.connexion-separateur::before, .connexion-separateur::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.connexion-form { display: grid; }
.connexion-form label { margin: 0 0 4px; }
.connexion-form input[type=email], .connexion-form input[type=password] { border: 0; border-bottom: 1px solid #B8B2B4; border-radius: 0; background: transparent; padding: 10px 0 12px; margin-bottom: 18px; font-size: 1.02rem; box-shadow: none; }
.connexion-form input:focus { outline: none; border-bottom: 2px solid var(--oxide); padding-bottom: 11px; box-shadow: none; }
.connexion-form .bouton { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; min-height: 52px; padding: 0 18px 0 22px; font-size: 0.95rem; background: var(--ink); border-color: var(--ink); border-radius: 0; }
.connexion-form .bouton:hover { background: #201E1F; border-color: #201E1F; }
.connexion-form .bouton svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.connexion-pied { margin: 30px 0 0; display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.connexion-pied a { color: var(--oxide); }
@media (max-width: 860px) {
  .connexion { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .connexion-encre { border-right: 0; border-bottom: 3px solid var(--oxide); padding-left: clamp(24px, 6vw, 40px); }
  .connexion-encre::before, .connexion-encre::after { display: none; }
  .connexion-encre h1 { font-size: 2.3rem; margin: 18px 0 12px; }
  .connexion-texte { display: none; }
  .connexion-bas { margin-top: 14px; }
  .connexion-papier { align-items: flex-start; padding-top: 28px; }
}

/* ---- barre du haut, comme le tableau de bord du bot Codeur ---- */
.barre { border-bottom: 1px solid rgba(255,255,255,.08); }
.barre .dedans { max-width: 1240px; padding: 0 clamp(16px, 4vw, 48px); min-height: 62px; gap: 0 28px; flex-wrap: nowrap; }
.barre .marque { display: inline-flex; align-items: baseline; white-space: nowrap; }
.barre .marque small { font-family: var(--mono); font-weight: 400; font-size: .62rem; letter-spacing: .18em; color: rgba(255,255,255,.55); margin-left: 14px; text-transform: uppercase; }
.barre .onglets { display: flex; gap: 2px; margin-left: 12px; align-self: stretch; }
.barre .onglets a { position: relative; display: inline-flex; align-items: center; padding: 0 14px; min-height: 62px; color: rgba(255,255,255,.6); font-weight: 600; font-size: .92rem; text-decoration: none; transition: color .2s; }
.barre .onglets a:hover, .barre .onglets a[aria-current="page"] { color: #fff; }
.barre .onglets a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--oxide); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.barre .onglets a[aria-current="page"]::after { transform: scaleX(1); }
.barre .qui { margin-left: auto; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; }
.barre .quitter { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.barre .quitter:hover { color: #fff; }
@media (max-width: 760px) {
  .barre .dedans { flex-wrap: wrap; padding-top: 12px; }
  .barre .marque small, .barre .qui { display: none; }
  .barre .onglets { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .barre .onglets a { min-height: 46px; }
  .barre .quitter { margin-left: auto; }
}

/* ---- tableau de bord : bandeau encre, chiffres, blocs numérotés à filets ---- */
main.plein { max-width: none; padding: 0 0 72px; }
.db-dedans { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
@media (min-width: 1100px) { main.plein { padding-left: 62px; } }
.db-rail { display: none; }
@media (min-width: 1100px) {
  .db-rail { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: 62px; border-right: 1px solid var(--trait); flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 0; z-index: 5; background: var(--fond); }
  .db-rail span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
  .db-rail i { display: block; width: 1px; flex: 1; margin: 18px 0; background: var(--trait); }
  .db-rail b { width: 8px; height: 8px; background: var(--oxide); }
  body:has(.db-rail) .barre { padding-left: 62px; }
}
.db-eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin: 0; }
.db-bandeau { background: var(--ink); color: rgba(255,255,255,.9); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 3px solid var(--oxide); margin-bottom: 8px; }
.db-bandeau .db-dedans { padding-top: 40px; }
.db-bandeau .db-eyebrow { color: rgba(255,255,255,.55); }
.db-titre-jour { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.db-titre-jour h1 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: .98; letter-spacing: -.035em; font-weight: 800; color: #fff; max-width: 16ch; margin: 10px 0 0; }
.db-titre-jour h1 em { font-style: normal; color: #EE5A4E; }
.db-sous { margin: 14px 0 0; color: rgba(255,255,255,.78); max-width: 62ch; font-size: .95rem; }
.db-bandeau .tb-creer > summary.bouton { min-height: 44px; display: inline-flex; align-items: center; border-radius: 0; }
.db-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 34px; border-top: 1px solid rgba(255,255,255,.16); }
.db-chiffre { padding: 20px 20px 24px 0; border-right: 1px solid rgba(255,255,255,.16); min-width: 0; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: background .2s; }
.db-chiffre + .db-chiffre { padding-left: 20px; }
.db-chiffre:last-child { border-right: 0; }
.db-chiffre:hover { background: rgba(255,255,255,.04); }
.db-chiffre strong { display: block; font-family: var(--titre); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -.035em; margin: 10px 0 8px; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.db-note { font-size: .8rem; color: rgba(255,255,255,.55); }
.db-chiffre.alerte strong, .db-chiffre.alerte .db-eyebrow { color: #EE5A4E; }
@media (max-width: 760px) {
  .db-titre-jour { grid-template-columns: 1fr; }
  .db-chiffres { grid-template-columns: 1fr 1fr; }
  .db-chiffre:nth-child(2) { border-right: 0; }
  .db-chiffre:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.16); }
  .db-chiffre:nth-child(3) { padding-left: 0; }
}

.db-bloc { margin-top: 44px; min-width: 0; }
.db-tete { display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.db-tete h2 { margin: 0; padding: 0; border: 0; font-size: 1.35rem; letter-spacing: -.015em; }
.db-num { font-family: var(--mono); font-size: .72rem; color: var(--oxide); letter-spacing: .1em; }
.db-tete p { margin: 0 0 0 auto; font-size: .8rem; color: var(--gris); text-align: right; }
.db-colonnes { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 56px; }
@media (max-width: 900px) { .db-colonnes { grid-template-columns: 1fr; } }

.db-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--trait); }
.db-colonne { border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.db-col-tete { display: flex; justify-content: space-between; align-items: baseline; }
.db-col-nom { font-family: var(--titre); font-weight: 700; font-size: 1rem; }
.db-compte { font-family: var(--titre); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; line-height: 1; }
.db-colonne.signe .db-compte { color: var(--oxide); }
.db-col-aide { font-family: var(--mono); font-size: .7rem; color: var(--gris); margin: 6px 0 10px; }
.db-ligne { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid var(--trait); text-decoration: none; color: inherit; }
.db-ligne:hover .db-ligne-titre { color: var(--oxide); }
.db-ligne-titre { font-weight: 600; font-size: .9rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.db-ligne-sous { font-size: .8rem; color: var(--gris); }
.db-ligne-sous.alerte { color: var(--oxide); font-weight: 600; }
.db-ligne-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.db-etiquette { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-doux); background: var(--neutre-fond); padding: 4px 7px; white-space: nowrap; }
.db-etiquette:empty { display: none; }
.db-etiquette.alerte { color: #fff; background: var(--oxide); }
.db-montant { font-family: var(--mono); font-weight: 700; font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-barre { height: 3px; background: var(--neutre-fond); margin-top: 6px; }
.db-barre span { display: block; height: 100%; background: var(--ok); }
.db-vide { font-size: .8rem; color: var(--gris); padding: 14px 0 0; border-top: 1px solid var(--trait); }
@media (max-width: 900px) { .db-pipeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .db-pipeline { grid-template-columns: 1fr; } }

.db-liste { list-style: none; margin: 0; padding: 0; }
.db-liste > li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.db-liste > li:last-child { border-bottom: 0; }
.db-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
a.db-corps:hover .db-ligne-titre { color: var(--oxide); }
.db-fin { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.db-quand { font-family: var(--mono); font-size: .72rem; color: var(--gris); min-width: 9ch; padding-top: 2px; }
.db-puce { width: 9px; height: 9px; background: var(--ink); opacity: .35; flex-shrink: 0; margin-top: 7px; }
.db-liste li.alerte .db-puce, .db-liste li.attente .db-puce { background: var(--oxide); opacity: 1; }
.db-liste li.alerte { background: rgba(204,2,2,.06); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.db-initiale { width: 34px; height: 34px; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; flex-shrink: 0; }
.db-calme { padding: 26px 0; color: var(--ink-doux); font-size: .95rem; }
.db-calme strong { display: block; color: var(--ok); font-family: var(--titre); font-size: 1.15rem; margin-bottom: 4px; }

/* ---- tableau de bord, version aérée (demande de Yassine) ---- */
.db-dedans { max-width: 1320px; padding: 0 clamp(20px, 5vw, 72px); }
.db-bandeau .db-dedans { padding-top: clamp(48px, 7vw, 96px); }
.db-titre-jour { gap: 40px; }
.db-titre-jour h1 { font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: .94; margin-top: 18px; max-width: 15ch; }
.db-sous { margin-top: 22px; font-size: 1rem; }
.db-chiffres { margin-top: clamp(44px, 6vw, 72px); }
.db-chiffre { padding: 30px 28px 36px 0; }
.db-chiffre + .db-chiffre { padding-left: 28px; }
.db-chiffre strong { font-size: clamp(2.2rem, 4.2vw, 3.8rem); margin: 16px 0 12px; }
.db-bandeau { margin-bottom: 24px; }
.db-bloc { margin-top: clamp(56px, 8vw, 96px); }
.db-tete { padding-bottom: 16px; gap: 16px; }
.db-tete h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.db-colonnes { gap: 0 clamp(48px, 7vw, 104px); }
.db-pipeline { margin-top: 0; }
.db-colonne { padding: 26px 24px 28px; }
.db-col-nom { font-size: 1.08rem; }
.db-compte { font-size: 2.2rem; }
.db-col-aide { margin: 10px 0 18px; }
.db-ligne { padding: 18px 0; gap: 5px; }
.db-ligne-titre { font-size: .95rem; }
.db-liste > li { padding: 22px 0; gap: 20px; }
.db-liste li.alerte { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.db-quand { min-width: 10ch; }
.db-calme { padding: 36px 0; }
.db-initiale { width: 40px; height: 40px; }
@media (max-width: 760px) {
  .db-chiffre { padding: 22px 16px 26px 0; }
  .db-chiffre + .db-chiffre { padding-left: 16px; }
  .db-chiffre:nth-child(3) { padding-left: 0; }
  .db-colonne { padding: 22px 18px; }
}

/* ---- cartes séparées (demande de Yassine) ---- */
.db-chiffres { border-top: 0; gap: clamp(12px, 1.6vw, 20px); }
.db-chiffre, .db-chiffre + .db-chiffre { border: 1px solid rgba(255,255,255,.16); padding: 26px 26px 30px; }
.db-chiffre:last-child { border-right: 1px solid rgba(255,255,255,.16); }
.db-chiffre:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.03); }
.db-chiffre.alerte { border-color: #EE5A4E; }
.db-bandeau .db-dedans { padding-bottom: clamp(36px, 5vw, 56px); }
.db-pipeline { border-left: 0; gap: clamp(12px, 1.6vw, 20px); margin-top: 24px; }
.db-colonne { border: 1px solid var(--trait); background: #fff; transition: border-color .2s; }
.db-colonne:hover { border-color: var(--ink); }
.db-colonne.signe { border-top: 3px solid var(--oxide); }
.db-colonne.envoye { border-top: 3px solid var(--ink); }
@media (max-width: 760px) {
  .db-chiffre, .db-chiffre + .db-chiffre, .db-chiffre:nth-child(3) { padding: 20px 18px 24px; }
  .db-chiffre:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.16); }
}

.db-chiffre strong { font-size: clamp(1.9rem, 3vw, 3rem); }

/* ---- cartes : aplats plutôt que filets, hauteur au contenu ---- */
.db-chiffre, .db-chiffre + .db-chiffre, .db-chiffre:last-child { border: 0; background: #1F1D1E; padding: 28px 28px 30px; }
.db-chiffre:hover { background: #2A2728; }
.db-chiffre.alerte { box-shadow: inset 0 3px 0 #EE5A4E; }
.db-pipeline { align-items: start; }
.db-colonne { border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--trait); padding: 24px 24px 22px; }
.db-colonne:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.db-colonne.envoye, .db-colonne.signe { border-top: 0; }
.db-colonne.envoye { box-shadow: inset 0 3px 0 var(--ink), inset 0 0 0 1px var(--trait); }
.db-colonne.signe { box-shadow: inset 0 3px 0 var(--oxide), inset 0 0 0 1px var(--trait); }
.db-col-aide { margin-bottom: 4px; }
.db-vide { border-top: 0; padding: 14px 0 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) { .db-chiffre, .db-chiffre + .db-chiffre, .db-chiffre:nth-child(3) { padding: 20px 18px 22px; } }

/* ---- espacement intermédiaire ---- */
.db-dedans { max-width: 1280px; padding: 0 clamp(18px, 4vw, 56px); }
.db-bandeau .db-dedans { padding-top: clamp(36px, 4.5vw, 60px); padding-bottom: clamp(28px, 3.5vw, 40px); }
.db-titre-jour h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); margin-top: 12px; }
.db-sous { margin-top: 16px; }
.db-chiffres { margin-top: clamp(28px, 3.5vw, 44px); gap: 14px; }
.db-chiffre, .db-chiffre + .db-chiffre, .db-chiffre:last-child { padding: 22px 24px 24px; }
.db-chiffre strong { margin: 12px 0 8px; }
.db-bloc { margin-top: clamp(40px, 5vw, 60px); }
.db-tete { padding-bottom: 12px; }
.db-tete h2 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
.db-colonnes { gap: 0 clamp(36px, 5vw, 72px); }
.db-pipeline { gap: 14px; margin-top: 18px; }
.db-colonne { padding: 20px 20px 18px; }
.db-ligne { padding: 14px 0; }
.db-liste > li { padding: 16px 0; gap: 16px; }
.db-calme { padding: 26px 0; }

/* ---- barre du haut alignée sur le contenu ---- */
.barre .dedans { max-width: 1280px; padding: 0 clamp(18px, 4vw, 56px); align-items: center; }
.barre .marque { align-items: center; line-height: 1; }
.barre .marque small, .barre .onglets a { line-height: 1; }
.barre .qui, .barre .quitter { line-height: 1; display: inline-flex; align-items: center; }
.barre form { display: flex; align-items: center; }
@media (min-width: 1100px) { body:has(.db-rail) .barre .dedans { padding-left: clamp(18px, 4vw, 56px); } }

/* carte Activité : un type par ligne, cliquable */
.db-ligne-type .db-ligne-pied { margin-top: 0; }
.db-ligne-type .db-montant { font-size: 1rem; }
.db-retour { padding-top: 28px; margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.db-retour a { color: var(--gris); text-decoration: none; }
.db-retour a:hover { color: var(--oxide); }
.db-bloc-premier { margin-top: 18px; }

/* fiche de demande du site */
.db-demande { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 28px; margin-top: 22px; }
.db-fiche { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-content: start; }
.db-fiche dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); padding-top: 3px; }
.db-fiche dd { margin: 0; font-size: .95rem; }
.db-message { background: #fff; box-shadow: inset 0 0 0 1px var(--trait); padding: 22px 24px; white-space: pre-wrap; line-height: 1.6; }
.db-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.db-actions .bouton { border-radius: 0; }
@media (max-width: 760px) { .db-demande { grid-template-columns: 1fr; } }

/* nom cliquable dans la barre */
.barre a.qui { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.barre a.qui:hover, .barre a.qui[aria-current="page"] { color: #fff; border-bottom-color: var(--oxide); }

/* Mon compte : disponibilités */
.cp-semaine { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cp-jour { padding: 18px 16px; }
.cp-jour-tete { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; text-transform: none; letter-spacing: 0; font-family: var(--texte); cursor: pointer; }
.cp-jour-tete input { width: 18px; height: 18px; accent-color: var(--oxide); margin: 0; }
.cp-jour:has(input[type=checkbox]:not(:checked)) .cp-plage { opacity: .35; }
.cp-plage { padding: 10px 0; border-top: 1px solid var(--trait); display: grid; gap: 6px; }
.cp-heures { display: flex; align-items: center; gap: 4px; }
.cp-heures i { font-style: normal; color: var(--gris); font-size: .8rem; }
.cp-heures input[type=time] { width: 100%; min-width: 0; padding: 6px 4px; border: 0; border-bottom: 1px solid #B8B2B4; border-radius: 0; background: transparent; font-family: var(--mono); font-size: .82rem; }
.cp-heures input:focus { outline: none; border-bottom: 2px solid var(--oxide); }
.cp-regles { margin-top: 14px; }
.cp-regles .db-colonne, .cp-bloques { padding: 18px 20px; display: grid; gap: 10px; }
.cp-valeur { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: .85rem; color: var(--gris); }
.cp-valeur input { width: 90px; padding: 4px 0; border: 0; border-bottom: 1px solid #B8B2B4; border-radius: 0; background: transparent; font-family: var(--titre); font-weight: 800; font-size: 1.6rem; color: var(--ink); }
.cp-valeur input:focus { outline: none; border-bottom: 2px solid var(--oxide); }
.cp-bloques { margin-top: 14px; }
.cp-bloques textarea { font-family: var(--mono); font-size: .85rem; border-radius: 0; }
.cp-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-form { display: grid; gap: 6px; align-content: start; padding: 22px 24px; }
.cp-form .db-col-nom { margin-bottom: 8px; }
.cp-form label { margin: 8px 0 0; }
.cp-form input { border-radius: 0; }
.cp-form .bouton { margin-top: 14px; justify-self: start; border-radius: 0; }
@media (max-width: 1100px) { .cp-semaine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cp-semaine, .cp-deux { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cp-semaine, .cp-deux, .cp-regles { grid-template-columns: 1fr; } }
.cp-heures { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
.cp-heures input[type=time] { width: 100%; min-width: 0; padding: 6px 0; font-size: .85rem; }
.cp-heures input[type=time]::-webkit-calendar-picker-indicator { display: none; }

/* agenda synchronisé */
.cp-agenda { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.cp-texte { margin: 14px 0 0; font-size: .9rem; color: var(--ink-doux); line-height: 1.5; }
.cp-texte.alerte { color: var(--oxide); }
.cp-fournisseurs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cp-fournisseurs .bouton, .cp-agenda form .bouton { border-radius: 0; }
.cp-agenda form { margin-top: 16px; }
@media (max-width: 900px) { .cp-agenda { grid-template-columns: 1fr; } }

.cp-agenda-actions { display: flex; gap: 16px; margin-top: 6px; }
.cp-agenda-actions form { margin: 0; }
.cp-agenda-actions .lien { background: none; border: 0; padding: 0; cursor: pointer; color: var(--oxide); font-size: .8rem; font-weight: 600; }
.cp-agenda-actions .lien:hover { text-decoration: underline; }

.cp-ics { display: grid; gap: 6px; margin-top: 14px; }
.cp-ics-ligne { display: flex; gap: 8px; }
.cp-ics-ligne input { flex: 1; min-width: 0; }

/* ---- Prise de rendez-vous (espace client) */
.rdv-jours { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.rdv-jour {
  display: grid; justify-items: center; gap: 2px; min-width: 58px; padding: 8px 6px;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte);
  color: var(--ink); text-decoration: none; transition: border-color .2s, background .2s;
}
.rdv-jour span { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.rdv-jour strong { font-family: var(--titre); font-size: 1.15rem; line-height: 1.1; }
.rdv-jour:hover { border-color: var(--ink-doux); }
.rdv-jour[aria-current="date"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rdv-jour[aria-current="date"] span { color: rgba(255,255,255,.75); }
.rdv-form { display: grid; gap: 10px; max-width: 720px; }
.rdv-form label[for] { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-doux); margin-top: 8px; }
.rdv-heures { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.rdv-heures legend { font-size: .85rem; color: var(--ink-doux); margin-bottom: 8px; padding: 0; }
.rdv-heure { position: relative; cursor: pointer; }
.rdv-heure input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rdv-heure span {
  display: grid; place-items: center; min-height: 44px; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--carte); font-family: var(--mono); font-size: .9rem; transition: border-color .2s, background .2s, color .2s;
}
.rdv-heure:hover span { border-color: var(--oxide); color: var(--oxide); }
.rdv-heure input:checked + span { background: var(--oxide); border-color: var(--oxide); color: #fff; }
.rdv-heure input:focus-visible + span { outline: 2px solid var(--oxide); outline-offset: 2px; }
.rdv-form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte); }
.rdv-form .bouton { justify-self: start; margin-top: 6px; }

.cp-verrou { border: 0; padding: 0; margin: 0; min-width: 0; }
.cp-verrou:disabled { opacity: .6; }