/* ============================================================================
   ORBISIA — ESPACE CLIENT (prototype, 25.09.2026)
   Reproduction fidèle des maquettes : fond clair nacré, cartes blanches à
   coins doux, bleu Orbisia, encre marine, typographie Manrope très grasse
   pour les titres.
   ============================================================================ */

:root {
  --ec-bleu: #0f66f5;
  --ec-bleu-fonce: #0a52d6;
  --ec-bleu-50: #eaf1ff;
  --ec-bleu-100: #d8e6ff;
  --ec-encre: #0c1a3d;
  --ec-texte: #1f2d4f;
  --ec-doux: #6a7894;
  --ec-pale: #95a2bc;
  --ec-trait: #e6ecf6;
  --ec-trait-fort: #d9e2f1;
  --ec-carte: #ffffff;
  --ec-fond: #f5f8fd;
  --ec-vert: #1f9d57;
  --ec-vert-50: #e6f7ee;
  --ec-orange: #f08a1c;
  --ec-orange-50: #fff2e3;
  --ec-rouge: #e5484d;
  --ec-rouge-50: #fdecec;
  --ec-violet: #7a45f0;
  --ec-violet-50: #f1ebff;
  --ec-ombre: 0 1px 2px rgba(16, 38, 88, .04), 0 8px 24px rgba(16, 38, 88, .06);
  --ec-rayon: 16px;
  --ec-rail: 256px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ec-texte);
  background: var(--ec-fond);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex: none; }
:focus-visible { outline: 2px solid var(--ec-bleu); outline-offset: 2px; }

/* Le fond nacré d'Orbisia, fixe derrière tout */
.ec-fond {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(247, 250, 255, .55), rgba(247, 250, 255, .55)),
    url(img/fond.webp) right bottom / cover no-repeat,
    #f4f7fd;
}
#ec-app { position: relative; z-index: 1; min-height: 100vh; }

/* ── Connexion ───────────────────────────────────────────────────────────── */
.ec-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
  align-items: center;
  gap: 40px;
  padding: 48px 5vw;
}
.ec-login-marque { padding-left: 4vw; }
.ec-login-logo { display: flex; align-items: center; gap: 22px; }
.ec-login-logo img { width: 124px; height: 124px; object-fit: contain; }
.ec-login-logo span { font-size: 78px; font-weight: 800; letter-spacing: -2.5px; color: var(--ec-encre); }
.ec-login-slogan { margin: 10px 0 0; font-size: 27px; font-weight: 500; color: #7f8aa3; letter-spacing: -.3px; }
.ec-login-filet { width: 70px; height: 3px; margin: 34px 0 40px; border-radius: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); }
.ec-login-atouts { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.ec-login-atouts li { display: flex; align-items: center; gap: 20px; }
.ec-login-atouts .ec-pastille-ico { width: 62px; height: 62px; border-radius: 18px; background: rgba(234, 241, 255, .85); color: var(--ec-bleu); }
.ec-login-atouts strong { display: block; font-size: 17px; font-weight: 600; color: #2a3656; }
.ec-login-atouts small { font-size: 15px; color: #8c97ae; }

.ec-login-carte {
  justify-self: end;
  width: min(622px, 100%);
  padding: 34px 40px 36px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 6px rgba(16, 38, 88, .05), 0 30px 60px rgba(16, 38, 88, .10);
  text-align: center;
}
.ec-login-cadenas {
  display: grid; place-items: center;
  width: 168px; height: 168px; margin: 0 auto 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #e8efff 0 50%, rgba(232, 239, 255, .45) 51% 70%, transparent 71%);
  color: var(--ec-bleu);
}
.ec-login-carte h1 { margin: 0 0 26px; font-size: 31px; font-weight: 800; letter-spacing: -.8px; color: var(--ec-encre); }
.ec-champ { display: grid; gap: 8px; margin-bottom: 22px; text-align: left; }
.ec-champ > span { font-size: 17px; font-weight: 600; color: var(--ec-encre); }
.ec-saisie {
  display: flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 16px;
  border: 1.5px solid var(--ec-trait-fort);
  border-radius: 8px;
  background: #fff;
  color: #6f7d97;
}
.ec-saisie:focus-within { border-color: var(--ec-bleu); box-shadow: 0 0 0 3px rgba(15, 102, 245, .12); }
.ec-saisie input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 18px; color: var(--ec-encre); }
.ec-saisie input::placeholder { color: #9ba6bc; }
.ec-saisie button { border: 0; background: none; padding: 4px; color: #4b5877; }
.ec-login-options { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 22px; }
.ec-case { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; color: #2a3656; cursor: pointer; }
.ec-case input { width: 22px; height: 22px; margin: 0; accent-color: var(--ec-bleu); }
.ec-lien { color: var(--ec-bleu); font-weight: 600; font-size: 17px; }
.ec-btn-grand {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; height: 56px;
  border: 0; border-radius: 6px;
  background: var(--ec-bleu); color: #fff;
  font-size: 20px; font-weight: 600;
}
.ec-btn-grand:hover { background: var(--ec-bleu-fonce); }
.ec-login-pied {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--ec-trait);
  font-size: 15px; color: #7a869f;
}
.ec-login-pied .ec-pastille-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--ec-bleu-50); color: var(--ec-bleu); }

/* ── Coquille : barre latérale + contenu ─────────────────────────────────── */
.ec-coque { display: grid; grid-template-columns: var(--ec-rail) minmax(0, 1fr); min-height: 100vh; }
.ec-rail {
  position: sticky; top: 0;
  display: flex; flex-direction: column;
  height: 100vh;
  padding: 20px 10px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .55));
  border-right: 1px solid rgba(221, 230, 245, .9);
  backdrop-filter: blur(18px);
}
.ec-marque { display: flex; align-items: center; gap: 10px; padding: 0 16px 26px; }
.ec-marque img { width: 56px; height: 56px; object-fit: contain; }
.ec-marque strong { display: block; font-size: 36px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; color: var(--ec-encre); }
.ec-marque small { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: #6c7a98; letter-spacing: .1px; text-align: center; }
.ec-nav { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ec-nav a {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  height: 50px; padding: 0 16px 0 22px;
  border-radius: 10px;
  font-size: 16px; font-weight: 500; color: #1d2a4d;
}
.ec-nav a:hover { background: rgba(234, 241, 255, .6); }
.ec-nav a.actif { background: var(--ec-bleu-50); color: var(--ec-bleu); font-weight: 600; }
.ec-nav a.actif::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ec-bleu); }
.ec-nav .ec-badge { margin-left: auto; }
.ec-badge {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px;
  background: var(--ec-rouge); color: #fff;
  font-size: 12.5px; font-weight: 700;
}
.ec-rail-bas { margin-top: auto; display: grid; gap: 4px; padding: 0 12px; }
.ec-rail-bas a { display: flex; align-items: center; gap: 14px; padding: 14px 8px; font-size: 13.5px; font-weight: 500; color: #3a4768; border-top: 1px solid var(--ec-trait); }

.ec-principal { min-width: 0; padding: 22px 26px 40px 30px; }
.ec-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; min-height: 58px; }
.ec-haut-droite { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.ec-org {
  display: inline-flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 16px 0 14px;
  border: 1px solid var(--ec-trait); border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(16, 38, 88, .05);
  font-size: 15.5px; font-weight: 600; color: #1c3a8a;
}
.ec-cloche { position: relative; border: 0; background: none; padding: 6px; color: #2a3656; }
.ec-cloche .ec-badge { position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; font-size: 11.5px; }
.ec-profil { display: inline-flex; align-items: center; gap: 12px; padding-left: 20px; border-left: 1px solid var(--ec-trait); font-size: 15.5px; font-weight: 600; color: var(--ec-encre); }
.ec-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(180deg, #e4e9f3, #c5cedf); color: #5c6884; overflow: hidden; }
.ec-devise { margin: 14px 0 0; text-align: right; font-size: 15px; font-style: italic; color: #6d7a96; line-height: 1.45; }

.ec-titre { margin: 8px 0 22px; }
.ec-titre h1 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -1.2px; color: var(--ec-encre); line-height: 1.1; }
.ec-titre p { margin: 6px 0 0; font-size: 22px; font-weight: 500; color: #5d6a86; letter-spacing: -.2px; }
.ec-ariane { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 15px; color: #56627d; }
.ec-ariane .sep { color: #a9b3c7; }

/* ── Cartes & briques communes ───────────────────────────────────────────── */
.ec-carte { background: var(--ec-carte); border: 1px solid rgba(226, 233, 245, .9); border-radius: var(--ec-rayon); box-shadow: var(--ec-ombre); }
.ec-carte-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ec-carte-tete h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.4px; color: var(--ec-encre); }
.ec-carte-tete .ec-voir { margin-left: auto; }
.ec-voir { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ec-bleu); white-space: nowrap; }
.ec-pastille-ico { display: grid; place-items: center; flex: none; }
.ec-ico-rond { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ec-bleu-50); color: var(--ec-bleu); }

.ec-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ec-kpi { display: flex; align-items: center; gap: 20px; padding: 18px 22px; min-height: 100px; }
.ec-kpi .ec-ico-rond { width: 70px; height: 70px; }
.ec-kpi strong { display: block; font-size: 34px; font-weight: 800; letter-spacing: -1px; color: var(--ec-encre); line-height: 1.05; }
.ec-kpi span { font-size: 16.5px; color: #3f4b69; }
.ec-kpi .ec-kpi-fl { margin-left: auto; color: #2a3656; }
.ton-bleu { background: var(--ec-bleu-50); color: var(--ec-bleu); }
.ton-orange { background: var(--ec-orange-50); color: var(--ec-orange); }
.ton-vert { background: var(--ec-vert-50); color: var(--ec-vert); }
.ton-violet { background: var(--ec-violet-50); color: var(--ec-violet); }
.ton-rouge { background: var(--ec-rouge-50); color: var(--ec-rouge); }

.ec-statut { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 15px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ec-statut::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ec-statut.avec-ico::before { display: none; }
.st-cours { background: var(--ec-vert-50); color: #15803d; }
.st-cours::before { background: #22a55a; }
.st-planifie { background: var(--ec-orange-50); color: #c2610c; }
.st-planifie::before { background: var(--ec-orange); }
.st-termine { background: var(--ec-vert-50); color: #15803d; }
.st-confirme { background: var(--ec-vert-50); color: #15803d; }
.st-attente { background: var(--ec-orange-50); color: #c2610c; }
.st-demande { background: var(--ec-bleu-50); color: var(--ec-bleu); }
.st-refuse { background: var(--ec-rouge-50); color: #d02f36; }
.st-payee { background: var(--ec-vert-50); color: #15803d; }
.st-apayer { background: var(--ec-orange-50); color: #c2610c; }
.st-retard { background: var(--ec-rouge-50); color: #d02f36; }

.ec-barre { position: relative; height: 12px; border-radius: 6px; background: #e8edf6; overflow: hidden; }
.ec-barre i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, #1d6cf6, #1f5be8); }
.ec-barre-ligne { display: flex; align-items: center; gap: 16px; }
.ec-barre-ligne .ec-barre { flex: 1; }
.ec-barre-ligne b { font-size: 19px; font-weight: 800; color: var(--ec-encre); }

.ec-meta { display: flex; align-items: center; gap: 14px; }
.ec-meta small { display: block; font-size: 13px; color: #6b7894; }
.ec-meta strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--ec-encre); }
.ec-meta svg { color: #4d5b7c; }
.ec-metas { display: flex; gap: 0; }
.ec-metas > .ec-meta { flex: 1; padding-right: 18px; }
.ec-metas > .ec-meta + .ec-meta { padding-left: 18px; border-left: 1px solid var(--ec-trait); }

.ec-etapes { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 14px; }
.ec-etapes::before { content: ""; position: absolute; left: 8.33%; right: 8.33%; top: 14px; height: 3px; background: #dfe5ef; }
.ec-etapes .ec-etapes-av { position: absolute; left: 8.33%; top: 14px; height: 3px; background: var(--ec-bleu); }
.ec-etape { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.ec-etape .pt { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #c5ccd8; color: #fff; }
.ec-etape.fait .pt { background: var(--ec-bleu); }
.ec-etape.cours .pt { background: #fff; box-shadow: inset 0 0 0 3px var(--ec-bleu); }
.ec-etape.cours .pt::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ec-bleu); }
.ec-etape b { margin-top: 6px; font-size: 14px; font-weight: 600; color: #22304f; line-height: 1.2; }
.ec-etape small { font-size: 12.5px; color: #7a869f; }
.ec-etape.cours small { color: var(--ec-bleu); font-weight: 600; }

.ec-photo { position: relative; overflow: hidden; border-radius: 10px; background: #dfe6f0; }
.ec-photo svg { width: 100%; height: 100%; }

.ec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--ec-bleu); color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap; }
.ec-btn:hover { background: var(--ec-bleu-fonce); }
.ec-btn.large { width: 100%; height: 50px; font-size: 17px; }
.ec-btn-contour { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border: 1.5px solid var(--ec-bleu); border-radius: 8px; background: #fff; color: var(--ec-bleu); font-size: 16px; font-weight: 700; white-space: nowrap; }
.ec-btn-contour:hover { background: var(--ec-bleu-50); }
.ec-btn-gris { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 1px solid var(--ec-trait-fort); border-radius: 8px; background: #fff; color: #2a3656; font-size: 15px; font-weight: 600; }
.ec-icone-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--ec-trait); border-radius: 8px; background: #fff; color: #3b4868; }
.ec-icone-btn:hover { background: var(--ec-bleu-50); color: var(--ec-bleu); }
.ec-plus { border: 0; background: none; color: #3b4868; padding: 4px; }

.ec-recherche { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px; border: 1px solid var(--ec-trait-fort); border-radius: 10px; background: #fff; color: #6f7d97; }
.ec-recherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ec-encre); }
.ec-recherche input::placeholder { color: #8f9bb3; }
.ec-pilules { display: flex; gap: 12px; flex-wrap: wrap; }
.ec-pilule { height: 40px; padding: 0 22px; border: 1px solid var(--ec-trait-fort); border-radius: 20px; background: rgba(255, 255, 255, .9); color: #2a3656; font-size: 15px; font-weight: 500; }
.ec-pilule.actif { border-color: var(--ec-bleu); background: var(--ec-bleu); color: #fff; font-weight: 600; }
.ec-select { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px; border: 1px solid var(--ec-trait-fort); border-radius: 10px; background: #fff; font-size: 15.5px; font-weight: 600; color: var(--ec-encre); white-space: nowrap; }
.ec-select .fl { margin-left: auto; color: #4d5b7c; }

.ec-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 13px; font-size: 12.5px; font-weight: 600; }
.tag-reseaux { background: var(--ec-bleu-50); color: #2563eb; }
.tag-fibre { background: var(--ec-violet-50); color: #7c3aed; }
.tag-voirie { background: var(--ec-orange-50); color: #c2610c; }
.tag-terrassement { background: var(--ec-vert-50); color: #15803d; }
.tag-genie { background: #eef1f6; color: #4b5877; }
.tag-plans { background: var(--ec-bleu-50); color: #2563eb; }
.tag-rapports { background: var(--ec-vert-50); color: #15803d; }
.tag-autorisations { background: var(--ec-orange-50); color: #c2610c; }
.tag-techniques { background: var(--ec-violet-50); color: #7c3aed; }
.tag-nouveau { height: 22px; padding: 0 9px; border-radius: 6px; background: var(--ec-bleu-50); color: var(--ec-bleu); font-size: 12px; }

.ec-activite { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ec-activite li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--ec-trait); }
.ec-activite li:first-child { border-top: 0; padding-top: 4px; }
.ec-activite .ec-ico-rond { width: 38px; height: 38px; border-radius: 10px; }
.ec-activite strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ec-encre); }
.ec-activite small { font-size: 13px; color: #6b7894; }
.ec-activite time { font-size: 12.5px; color: #8591a8; white-space: nowrap; }

.ec-grille-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ec-vignette .ec-photo { aspect-ratio: 1.8; }
.ec-vignette b { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: #22304f; }
.ec-vignette small { font-size: 12.5px; color: #7a869f; }

/* ── Tableau de bord ─────────────────────────────────────────────────────── */
.ec-db { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(360px, 1fr); gap: 16px; }
.ec-projet-vedette { padding: 18px 20px 22px; }
.ec-projet-tete { display: grid; grid-template-columns: 254px minmax(0, 1fr); gap: 22px; }
.ec-projet-tete .ec-photo { height: 190px; }
.ec-projet-tete h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.6px; color: var(--ec-encre); }
.ec-projet-tete .ref { margin: 6px 0 0; font-size: 15.5px; color: #66728e; }
.ec-projet-tete .ec-titre-ligne { display: flex; align-items: flex-start; gap: 12px; }
.ec-projet-tete .ec-titre-ligne .ec-plus { margin-left: auto; }
.ec-projet-tete .ec-statut { margin-left: auto; }
.ec-etiquette { margin: 16px 0 8px; font-size: 14.5px; font-weight: 500; color: #2a3656; }
.ec-projet-vedette .ec-metas { margin-top: 22px; }
.ec-sous-titre { margin: 26px 0 6px; padding-top: 16px; border-top: 1px solid var(--ec-trait); font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--ec-encre); }

.ec-reserver { padding: 20px 20px 22px; }
.ec-reserver p.intro { margin: -4px 0 18px; font-size: 15px; color: #66728e; }
.ec-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ec-encre); }
.ec-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.ec-type {
  display: grid; justify-items: center; gap: 4px;
  padding: 16px 10px 14px;
  border: 1.5px solid var(--ec-trait-fort); border-radius: 10px;
  background: #fff; text-align: center;
}
.ec-type svg { color: #3b4868; }
.ec-type b { margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--ec-encre); }
.ec-type small { font-size: 12.5px; color: #7a869f; }
.ec-type.actif { border-color: #4f8cf7; background: #f3f7ff; box-shadow: 0 0 0 1px #4f8cf7; }
.ec-type.actif svg, .ec-type.actif b { color: #1d4fd8; }
.ec-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.ec-champ-sel { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border: 1px solid var(--ec-trait-fort); border-radius: 8px; background: #fff; font-size: 15.5px; font-weight: 500; color: var(--ec-encre); }
.ec-champ-sel .fl { margin-left: auto; color: #4d5b7c; }
.ec-champ-sel svg:first-child { color: #4d5b7c; }

.ec-db-bas { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(360px, 1fr); gap: 16px; margin-top: 16px; }
.ec-db-bas > .ec-carte { padding: 18px 20px; }

/* ── Mes chantiers ───────────────────────────────────────────────────────── */
.ec-outils { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.ec-outils .ec-recherche { width: min(572px, 42%); }
.ec-chantiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ec-chantier { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; padding: 14px 18px 16px; }
.ec-chantier .ec-photo { height: 186px; }
.ec-chantier h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: var(--ec-encre); }
.ec-chantier .ref { margin: 4px 0 0; font-size: 14.5px; color: #6f7b96; }
.ec-chantier .lieu { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 15px; color: #2a3656; }
.ec-chantier .lieu svg { color: #3b4868; }
.ec-chantier .ec-titre-ligne { display: flex; align-items: flex-start; gap: 10px; }
.ec-chantier .ec-titre-ligne .ec-plus { margin-left: auto; margin-top: -2px; }
.ec-chantier .ec-statut { margin-top: 20px; }
.ec-chantier .haut { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.ec-chantier .ec-etiquette { margin: 10px 0 8px; font-size: 14px; }
.ec-chantier .ec-barre-ligne b { font-size: 18px; }
.ec-chantier .ec-metas { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ec-trait); }
.ec-chantier .ec-metas strong { font-size: 15px; }
.ec-chantier .ec-voir { grid-column: 1 / -1; margin-top: 2px; font-size: 16px; }

/* ── Détail d'un chantier ────────────────────────────────────────────────── */
.ec-titre-statut { display: flex; align-items: center; gap: 16px; }
.ec-onglets { display: flex; gap: 6px; padding: 0 12px; margin-bottom: 18px; border-radius: 14px; }
.ec-onglets a { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 24px; border-bottom: 3px solid transparent; font-size: 16.5px; font-weight: 500; color: #2a3656; }
.ec-onglets a.actif { border-bottom-color: var(--ec-bleu); color: var(--ec-bleu); font-weight: 700; }
.ec-detail { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(360px, 1fr); gap: 16px; }
.ec-detail > .ec-carte { padding: 18px 22px 22px; }
.ec-gros { font-size: 42px; font-weight: 800; letter-spacing: -1.5px; color: var(--ec-encre); margin: 6px 0 10px; }
.ec-metas.quatre > .ec-meta { flex: 1; }
.ec-adresse { display: flex; align-items: flex-start; gap: 16px; margin-top: 18px; padding: 16px 0; border-top: 1px solid var(--ec-trait); border-bottom: 1px solid var(--ec-trait); }
.ec-adresse small { font-size: 13px; color: #6b7894; }
.ec-adresse strong { display: block; font-size: 16px; font-weight: 500; color: var(--ec-encre); }
.ec-intervention { padding: 18px 20px; border-radius: 12px; background: #f4f8ff; }
.ec-intervention-tete { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #dfe8f7; }
.ec-intervention-tete .ec-ico-rond { width: 52px; height: 52px; border-radius: 12px; background: #fff; }
.ec-intervention-tete strong { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--ec-encre); }
.ec-intervention-tete small { font-size: 15px; color: #56627d; }
.ec-intervention-tete .ec-statut { margin-left: auto; }
.ec-intervention .ec-metas { padding: 14px 0; border-bottom: 1px solid #dfe8f7; }
.ec-intervention .ec-meta b { display: block; font-size: 15px; font-weight: 600; color: var(--ec-encre); }
.ec-intervention .ec-meta small { font-size: 14px; }
.ec-intervention-type { display: flex; gap: 16px; padding-top: 14px; }
.ec-intervention-type b { display: block; font-size: 15px; font-weight: 700; color: var(--ec-encre); }
.ec-intervention-type p { margin: 4px 0 0; font-size: 14.5px; color: #56627d; line-height: 1.45; }
.ec-detail-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, 1.02fr); gap: 16px; margin-top: 16px; }
.ec-detail-bas > .ec-carte { padding: 16px 18px; }
.ec-docs-recents { display: grid; margin: 0; padding: 0; list-style: none; }
.ec-docs-recents li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ec-trait); }
.ec-docs-recents li:first-child { border-top: 0; }
.ec-docs-recents strong { display: block; font-size: 14px; font-weight: 600; color: var(--ec-encre); }
.ec-docs-recents small { font-size: 12.5px; color: #7a869f; }
.ec-docs-recents time { font-size: 12.5px; color: #7a869f; }

.ec-fichier { display: grid; place-items: center; width: 34px; height: 38px; border-radius: 6px; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .3px; }
.f-pdf { background: #e5383b; }
.f-doc { background: #2b6cf0; }
.f-xls { background: #1f9d57; }
.f-zip { background: #f0a020; }

/* ── Planning / Réservations ─────────────────────────────────────────────── */
.ec-planning { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(360px, 1fr); gap: 16px; }
.ec-calendrier { position: relative; padding: 16px 0 0; overflow: hidden; }
.ec-cal-tete { display: flex; align-items: center; gap: 14px; padding: 0 16px 14px; }
.ec-cal-tete h2 { margin: 0 20px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.6px; color: var(--ec-encre); }
.ec-cal-nav { display: inline-flex; border: 1px solid var(--ec-trait-fort); border-radius: 8px; overflow: hidden; }
.ec-cal-nav button { width: 36px; height: 38px; border: 0; background: #fff; color: #2a3656; }
.ec-cal-nav button + button { border-left: 1px solid var(--ec-trait); }
.ec-segment { display: inline-flex; margin-left: auto; padding: 3px; border: 1px solid var(--ec-trait); border-radius: 10px; background: #f6f8fc; }
.ec-segment button { height: 34px; padding: 0 22px; border: 0; border-radius: 7px; background: none; color: #3b4868; font-size: 15px; font-weight: 500; }
.ec-segment button.actif { background: var(--ec-bleu); color: #fff; font-weight: 700; }
.ec-grille-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ec-trait); }
.ec-grille-cal .jr { padding: 10px 0; text-align: center; font-size: 15px; font-weight: 600; color: #3b4868; border-bottom: 1px solid var(--ec-trait); }
.ec-cellule { position: relative; min-height: 88px; padding: 8px 8px 6px 12px; border-right: 1px solid var(--ec-trait); border-bottom: 1px solid var(--ec-trait); }
.ec-cellule:nth-child(7n) { border-right: 0; }
.ec-cellule .n { font-size: 14px; font-weight: 600; color: #2a3656; }
.ec-cellule.hors .n { color: #a7b1c4; }
.ec-cellule.auj { box-shadow: inset 2px 0 0 var(--ec-bleu); }
.ec-cellule.auj .n { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px 0 0 -6px; border-radius: 50%; background: var(--ec-bleu); color: #fff; }
.ec-evt { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; margin-top: 6px; padding: 7px 8px; border-radius: 6px; font-size: 12px; line-height: 1.3; }
.ec-evt b { font-size: 12.5px; font-weight: 700; }
.ec-evt span { display: block; color: inherit; opacity: .85; }
.ev-refuse { background: #fde3e3; color: #c52a30; }
.ev-confirme { background: #dcf3e5; color: #147a43; }
.ev-attente { background: #fde8cf; color: #b8560a; }
.ev-demande { background: #dfeaff; color: #1d4fd8; }
.ec-evt.etendu { position: absolute; left: 4px; right: calc(-100% + 4px); z-index: 2; }
.ec-legende { display: flex; gap: 24px; padding: 14px 18px; font-size: 13.5px; color: #3b4868; }
.ec-legende span { display: inline-flex; align-items: center; gap: 8px; }
.ec-legende i { width: 11px; height: 11px; border-radius: 50%; }

.ec-modale {
  position: absolute; left: 58px; right: -2px; bottom: 0; z-index: 5;
  padding: 18px 18px 16px;
  border-radius: 16px 16px 0 0;
  background: #fff;
  box-shadow: 0 -10px 40px rgba(16, 38, 88, .16);
}
.ec-modale h3 { margin: 0 0 14px; font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--ec-encre); }
.ec-modale .fermer { position: absolute; top: 14px; right: 16px; border: 0; background: none; color: #3b4868; }
.ec-modale-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.ec-modale .ec-types { margin-bottom: 14px; }
.ec-modale .ec-type { padding: 12px 8px; }
.ec-modale .ec-type b { font-size: 15px; }
.ec-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ec-date { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--ec-trait-fort); border-radius: 8px; font-size: 15px; color: var(--ec-encre); }
.ec-date .cal { margin-left: auto; color: #4d5b7c; }
.ec-date em { font-style: normal; color: #6b7894; }
.ec-textarea { position: relative; min-height: 50px; padding: 10px 12px; border: 1px solid var(--ec-trait-fort); border-radius: 8px; font-size: 14.5px; color: var(--ec-encre); }
.ec-textarea small { position: absolute; right: 10px; bottom: 6px; font-size: 11.5px; color: #8591a8; }
.ec-modale-pied { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ec-modale-pied .ec-legende { padding: 0; margin-right: auto; }

.ec-demandes { padding: 18px 16px 12px; }
.ec-demande { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto 20px; gap: 14px; align-items: center; padding: 12px; margin-bottom: 8px; border: 1px solid var(--ec-trait); border-radius: 12px; background: #fff; }
.ec-demande .ec-ico-rond { width: 56px; height: 56px; border-radius: 50%; }
.ec-demande strong { display: block; font-size: 16px; font-weight: 700; color: var(--ec-encre); }
.ec-demande small { display: block; font-size: 14px; color: #56627d; }
.ec-demande .d { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: #2a3656; }
.ec-jour-detail { margin-top: 16px; padding: 18px 18px 18px; }
.ec-jour-detail h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--ec-encre); }
.ec-jour-detail .tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ec-jour-ligne { display: flex; gap: 16px; padding: 10px 0; font-size: 15px; color: #2a3656; }
.ec-jour-ligne small { display: block; color: #6b7894; font-size: 14px; }
.ec-jour-ligne svg { color: #3b4868; margin-top: 2px; }

/* ── Photos ──────────────────────────────────────────────────────────────── */
.ec-filtres { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ec-filtres .ec-recherche { width: 250px; height: 42px; }
.ec-filtres .ec-pilule { height: 40px; padding: 0 18px; }
.ec-tri { display: grid; gap: 0; height: 46px; padding: 4px 14px; border: 1px solid var(--ec-trait-fort); border-radius: 10px; background: #fff; min-width: 160px; }
.ec-tri small { font-size: 11.5px; color: #6b7894; }
.ec-tri span { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ec-encre); }
.ec-vue { display: inline-flex; border: 1px solid var(--ec-trait-fort); border-radius: 8px; overflow: hidden; }
.ec-vue button { width: 46px; height: 44px; border: 0; background: #fff; color: #3b4868; }
.ec-vue button.actif { background: var(--ec-bleu); color: #fff; }
.ec-photos { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 16px; }
.ec-mur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ec-carte-photo { padding: 6px 6px 10px; cursor: pointer; }
.ec-carte-photo.actif { border-color: var(--ec-bleu); box-shadow: 0 0 0 1.5px var(--ec-bleu), var(--ec-ombre); }
.ec-carte-photo .ec-photo { aspect-ratio: 1.38; border-radius: 10px; }
.ec-carte-photo .ec-plus-photo { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(255, 255, 255, .92); color: #3b4868; }
.ec-carte-photo .ligne1 { display: flex; align-items: center; justify-content: space-between; margin: 8px 6px 0; font-size: 13px; color: #56627d; }
.ec-carte-photo b { display: block; margin: 4px 6px 10px; font-size: 14.5px; font-weight: 600; color: var(--ec-encre); }
.ec-carte-photo .pied { display: flex; align-items: center; gap: 16px; margin: 0 6px; font-size: 13px; color: #56627d; }
.ec-carte-photo .pied .ec-tag { margin-right: auto; }
.ec-carte-photo .pied span { display: inline-flex; align-items: center; gap: 6px; }
.ec-avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 100%; }
.ec-avant-apres .lbl { position: absolute; top: 8px; z-index: 1; padding: 4px 10px; border-radius: 6px; color: #fff; font-size: 12.5px; font-weight: 700; }
.ec-panneau { padding: 14px 16px 16px; }
.ec-panneau .ec-photo { height: 214px; }
.ec-panneau .fermer { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .95); color: #22304f; }
.ec-caroussel { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #22304f; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.ec-compteur { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 12px; background: rgba(12, 26, 61, .72); color: #fff; font-size: 12.5px; font-weight: 700; }
.ec-panneau h3 { margin: 16px 0 2px; font-size: 20px; font-weight: 800; letter-spacing: -.4px; color: var(--ec-encre); }
.ec-panneau .date { font-size: 15px; color: #56627d; }
.ec-auteur { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--ec-trait); }
.ec-auteur strong { display: block; font-size: 15px; font-weight: 700; color: var(--ec-encre); }
.ec-auteur small { font-size: 13px; color: #6b7894; }
.ec-panneau p { margin: 0 0 12px; font-size: 14.5px; color: #3b4868; line-height: 1.5; }
.ec-panneau .actions { display: grid; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ec-trait); }

/* ── Plans ───────────────────────────────────────────────────────────────── */
.ec-plans { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 12px; align-items: start; }
.ec-plans-liste { padding: 18px 14px 20px; min-height: 740px; }
.ec-plans-liste h2 { margin: 0 0 14px 6px; font-size: 20px; font-weight: 800; letter-spacing: -.4px; color: var(--ec-encre); }
.ec-plans-liste .rech { display: flex; gap: 10px; margin-bottom: 16px; }
.ec-plans-liste .ec-recherche { height: 42px; flex: 1; }
.ec-plan-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 14px; border-radius: 8px; cursor: pointer; }
.ec-plan-item.actif { background: var(--ec-bleu-50); box-shadow: inset 3px 0 0 var(--ec-bleu); }
.ec-plan-item strong { display: block; font-size: 15px; font-weight: 700; color: var(--ec-encre); }
.ec-plan-item .ec-statut { height: 24px; margin-top: 6px; padding: 0 10px; font-size: 12.5px; background: #eef1f6; color: #4b5877; }
.ec-plan-item .ec-statut::before { background: #8e99ae; }
.ec-plan-item.actif .ec-statut { background: transparent; color: var(--ec-vert); padding-left: 0; }
.ec-plan-item.actif .ec-statut::before { background: #22a55a; }
.ec-plan-item svg { color: #3b4868; }
.ec-visionneuse { padding: 16px 18px 18px; }
.ec-vis-tete { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.ec-vis-tete h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--ec-encre); }
.ec-vis-tete p { margin: 6px 0 0; font-size: 15px; color: #56627d; }
.ec-vis-tete .ec-statut { margin-top: -2px; }
.ec-vis-tete .btns { display: flex; gap: 12px; margin-left: auto; }
.ec-vis-corps { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 12px; }
.ec-vis-cadre { position: relative; border: 1px solid var(--ec-trait); border-radius: 10px; overflow: hidden; background: #fbfcfe; }
.ec-vis-outils { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ec-trait); background: #fff; }
.ec-vis-outils .grp { display: inline-flex; align-items: center; border: 1px solid var(--ec-trait-fort); border-radius: 8px; overflow: hidden; }
.ec-vis-outils .grp button, .ec-vis-outils .grp span { display: grid; place-items: center; min-width: 40px; height: 36px; border: 0; background: #fff; color: #3b4868; font-size: 14px; }
.ec-vis-outils .grp span { min-width: 64px; border-left: 1px solid var(--ec-trait); border-right: 1px solid var(--ec-trait); font-weight: 600; color: var(--ec-encre); }
.ec-vis-outils .sep { width: 1px; height: 26px; background: var(--ec-trait); margin: 0 6px; }
.ec-vis-outils .solo { display: grid; place-items: center; width: 40px; height: 38px; border: 0; background: none; color: #3b4868; }
.ec-plan-svg { display: block; width: 100%; height: auto; }
.ec-commentaires { position: absolute; left: 12px; bottom: 12px; width: 290px; padding: 14px 14px 12px; border: 1px solid var(--ec-trait); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(16, 38, 88, .14); }
.ec-commentaires h4 { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--ec-encre); }
.ec-commentaires .fermer { position: absolute; top: 10px; right: 10px; border: 0; background: none; color: #3b4868; }
.ec-com { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--ec-trait); border-radius: 10px; }
.ec-com .ini { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ec-bleu-50); color: var(--ec-bleu); font-size: 13px; font-weight: 800; }
.ec-com strong { display: block; font-size: 13.5px; color: var(--ec-encre); }
.ec-com small { font-size: 11.5px; color: #7a869f; }
.ec-com p { margin: 6px 0 0; font-size: 12.5px; color: #3b4868; line-height: 1.45; }
.ec-com-saisie { display: flex; gap: 8px; margin-top: 10px; }
.ec-com-saisie input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--ec-trait-fort); border-radius: 8px; font-size: 13px; }
.ec-com-saisie button { display: grid; place-items: center; width: 44px; height: 40px; border: 0; border-radius: 8px; background: var(--ec-bleu); color: #fff; }
.ec-versions { padding: 4px 4px 0 6px; }
.ec-versions h3 { margin: 0 0 16px; font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--ec-encre); }
.ec-version { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.ec-version::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: -4px; width: 2px; background: #dfe5ef; }
.ec-version:last-child::before { display: none; }
.ec-version .pt { width: 18px; height: 18px; margin-top: 8px; border-radius: 50%; background: #a8b2c4; box-shadow: 0 0 0 4px #fff; }
.ec-version.actuelle .pt { background: var(--ec-bleu); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--ec-bleu-100); }
.ec-version .bloc { padding: 10px 12px; border-radius: 10px; }
.ec-version.actuelle .bloc { background: #f0f5ff; }
.ec-version strong { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; color: var(--ec-encre); }
.ec-version strong .ec-statut { height: 26px; font-size: 13px; }
.ec-version small { display: block; margin: 4px 0 6px; font-size: 13.5px; color: #56627d; }
.ec-version p { margin: 0; font-size: 13.5px; color: #3b4868; line-height: 1.45; }

/* ── Documents ───────────────────────────────────────────────────────────── */
.ec-docs { display: grid; grid-template-columns: minmax(0, 1fr) 418px; gap: 14px; align-items: start; }
.ec-docs .ec-kpis { grid-column: 1; margin-bottom: 0; }
.ec-docs .ec-kpi { min-height: 96px; padding: 14px 18px; gap: 16px; }
.ec-docs .ec-kpi .ec-ico-rond { width: 64px; height: 64px; }
.ec-table { width: 100%; border-collapse: collapse; }
.ec-table th { padding: 14px 10px; text-align: left; font-size: 14px; font-weight: 700; color: #2a3656; white-space: nowrap; }
.ec-table th .tri { display: inline-block; margin-left: 6px; color: #9aa6bd; vertical-align: middle; }
.ec-table thead tr { background: #f5f8fd; }
.ec-table td { padding: 16px 10px; border-top: 1px solid var(--ec-trait); font-size: 14.5px; color: #2a3656; vertical-align: middle; }
.ec-table tbody tr.actif { background: #f3f7ff; }
.ec-table tbody tr { cursor: pointer; }
.ec-table .doc { display: flex; align-items: center; gap: 14px; }
.ec-table .doc strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--ec-encre); }
.ec-table .maj strong { display: block; font-weight: 500; color: var(--ec-encre); }
.ec-table .maj small { font-size: 13px; color: #6b7894; }
.ec-table .act { display: flex; gap: 14px; color: #3b4868; }
.ec-pagination { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--ec-trait); font-size: 14px; color: #56627d; }
.ec-pages { display: flex; gap: 8px; }
.ec-pages button { display: grid; place-items: center; min-width: 36px; height: 36px; border: 1px solid var(--ec-trait-fort); border-radius: 8px; background: #fff; color: #2a3656; font-size: 14px; font-weight: 600; }
.ec-pages button.actif { border-color: var(--ec-bleu); background: var(--ec-bleu); color: #fff; }
.ec-doc-panneau { grid-column: 2; grid-row: 1 / span 2; padding: 16px 20px 20px; }
.ec-doc-panneau h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ec-encre); }
.ec-doc-panneau .tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ec-doc-titre { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.ec-doc-titre strong { display: block; font-size: 18px; font-weight: 800; color: var(--ec-encre); letter-spacing: -.3px; }
.ec-doc-titre .ligne { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; color: #56627d; }
.ec-dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 12px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ec-trait); font-size: 14px; }
.ec-dl dt { color: #56627d; }
.ec-dl dd { margin: 0; color: var(--ec-encre); font-weight: 500; }
.ec-apercu { height: 150px; margin: 10px 0 18px; border: 1px solid var(--ec-trait); border-radius: 8px; overflow: hidden; background: #fff; }
.ec-histo { display: grid; gap: 10px; margin: 10px 0 20px; padding: 0; list-style: none; }
.ec-histo li { display: grid; grid-template-columns: 16px 34px 150px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; color: #3b4868; }
.ec-histo i { width: 10px; height: 10px; border-radius: 50%; background: #c2cad8; }
.ec-histo li.actuelle i { background: var(--ec-bleu); }
.ec-histo b { font-weight: 800; color: var(--ec-encre); }
.ec-histo .ec-statut { height: 24px; padding: 0 10px; font-size: 12.5px; }
.ec-histo .ec-statut::before { display: none; }
.ec-deux-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Messages ────────────────────────────────────────────────────────────── */
.ec-msg { display: grid; grid-template-columns: 374px minmax(0, 1fr) 384px; gap: 12px; align-items: stretch; min-height: 752px; }
.ec-convs { padding: 18px 14px 12px; }
.ec-convs .tete { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 16px; }
.ec-convs h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--ec-encre); }
.ec-convs .ec-btn { height: 40px; font-size: 14.5px; padding: 0 14px; }
.ec-convs .ec-recherche { height: 44px; }
.ec-mini-onglets { display: flex; gap: 20px; margin: 14px 0 6px; padding: 0 10px; border-bottom: 1px solid var(--ec-trait); }
.ec-mini-onglets button { height: 40px; padding: 0 6px; border: 0; border-bottom: 3px solid transparent; background: none; font-size: 15px; color: #2a3656; }
.ec-mini-onglets button.actif { border-bottom-color: var(--ec-bleu); color: var(--ec-bleu); font-weight: 700; }
.ec-conv { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 10px; border-bottom: 1px solid var(--ec-trait); cursor: pointer; }
.ec-conv.actif { background: #eef4ff; border-radius: 8px; box-shadow: inset 3px 0 0 var(--ec-bleu); }
.ec-conv strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ec-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-conv .qui { font-size: 13.5px; color: #3b4868; }
.ec-conv .der { display: block; font-size: 13px; color: #6b7894; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-conv .droite { display: grid; justify-items: end; gap: 12px; font-size: 12.5px; color: #7a869f; align-self: start; padding-top: 2px; }
.ec-visage { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #dfe5ef; }
.ec-visage svg { width: 100%; height: 100%; }
.ec-fil { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ec-fil-tete { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--ec-trait); }
.ec-fil-tete .ec-visage { width: 66px; height: 66px; }
.ec-fil-tete strong { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--ec-encre); }
.ec-fil-tete .qui { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #3b4868; }
.ec-fil-tete .qui i { width: 9px; height: 9px; border-radius: 50%; background: #22a55a; }
.ec-fil-tete small { font-size: 13.5px; color: #6b7894; }
.ec-fil-tete .icos { display: flex; gap: 22px; margin-left: auto; color: #2a3656; }
.ec-fil-corps { flex: 1; padding: 12px 22px; overflow: auto; }
.ec-jour { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; font-size: 13.5px; color: #56627d; }
.ec-jour::before, .ec-jour::after { content: ""; flex: 1; height: 1px; background: var(--ec-trait); }
.ec-bulle-ligne { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.ec-bulle-ligne .ec-visage { width: 42px; height: 42px; }
.ec-bulle-ligne .nom { font-size: 13.5px; font-weight: 700; color: var(--ec-encre); }
.ec-bulle-ligne .nom time { margin-left: 8px; font-weight: 500; color: #7a869f; font-size: 12px; }
.ec-bulle { display: inline-block; margin-top: 6px; padding: 12px 14px; border-radius: 4px 12px 12px 12px; background: #f1f4f9; font-size: 14.5px; color: #1f2d4f; }
.ec-bulle-ligne.moi { grid-template-columns: minmax(0, 1fr) 46px; text-align: right; }
.ec-bulle-ligne.moi .ec-bulle { border-radius: 12px 4px 12px 12px; background: #e6efff; text-align: left; }
.ec-bulle-ligne.moi .lu { display: block; margin-top: 4px; color: var(--ec-bleu); }
.ec-piece { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 320px; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--ec-trait); border-radius: 10px; background: #fff; }
.ec-piece strong { display: block; font-size: 14px; font-weight: 700; color: var(--ec-encre); }
.ec-piece small { font-size: 12.5px; color: #6b7894; }
.ec-image-msg { position: relative; width: 290px; height: 150px; margin-top: 8px; border-radius: 10px; overflow: hidden; }
.ec-image-msg time { position: absolute; right: -44px; bottom: 0; font-size: 11.5px; color: #7a869f; }
.ec-composer { display: flex; align-items: center; gap: 12px; padding: 12px 16px 16px; }
.ec-composer .champ { flex: 1; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border: 1px solid var(--ec-trait-fort); border-radius: 12px; background: #fff; }
.ec-composer .champ input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 15px; }
.ec-composer .envoyer { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--ec-bleu); color: #fff; }
.ec-composer .clip { border: 0; background: none; color: #3b4868; }
.ec-info { padding: 18px 16px; }
.ec-info .tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ec-info h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--ec-encre); letter-spacing: -.4px; }
.ec-info .ec-photo { height: 150px; }
.ec-info .nom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 12px; font-size: 16.5px; font-weight: 800; color: var(--ec-encre); letter-spacing: -.3px; }
.ec-info .nom .ec-statut { height: 26px; font-size: 12.5px; }
.ec-info-ligne { display: grid; grid-template-columns: 26px 110px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; font-size: 14.5px; }
.ec-info-ligne span { color: #3b4868; }
.ec-info-ligne b { font-weight: 500; color: var(--ec-encre); }
.ec-info-ligne small { display: block; font-size: 12.5px; color: #6b7894; }
.ec-info-ligne svg { color: #3b4868; }
.ec-partages { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--ec-trait); }
.ec-partages .tete2 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 17px; font-weight: 800; color: var(--ec-encre); }
.ec-partage { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 22px; gap: 10px; align-items: center; padding: 8px 0; }
.ec-partage strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--ec-encre); }
.ec-partage small { font-size: 12px; color: #7a869f; }
.ec-partage time { font-size: 12.5px; color: #56627d; }
.ec-partage .fic { color: #e5383b; }
.ec-partage .fic.zip { color: #f0a020; }

/* ── Factures ────────────────────────────────────────────────────────────── */
.ec-fact { display: grid; grid-template-columns: minmax(0, 1fr) 414px; gap: 14px; align-items: start; }
.ec-fact .ec-kpi strong { font-size: 30px; letter-spacing: -.6px; }
.ec-fact-liste { padding: 18px 16px 0; min-height: 632px; }
.ec-fact-filtres { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ec-fact-filtres .ec-recherche { flex: 1; }
.ec-fact-filtres .ec-select { height: 44px; font-weight: 500; }
.ec-mini-seg { display: inline-flex; padding: 4px; border: 1px solid var(--ec-trait); border-radius: 10px; background: #f6f8fc; }
.ec-mini-seg button { height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: none; font-size: 13px; color: #3b4868; }
.ec-mini-seg button.actif { background: #dfe9ff; color: #1d4fd8; font-weight: 700; }
.ec-fact .ec-table td { padding: 22px 10px; }
.ec-fact .ec-table .num { color: var(--ec-bleu); font-weight: 600; }
.ec-fact .ec-table .mt { font-weight: 800; color: var(--ec-encre); }
.ec-fact .ec-table .act { gap: 10px; }
.ec-fact .ec-table .act .ec-icone-btn { width: 42px; height: 42px; }
.ec-fact .ec-statut { height: 34px; padding: 0 14px; font-size: 14.5px; }
.ec-fact-detail { padding: 16px 20px 20px; }
.ec-fact-detail .tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ec-fact-detail h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ec-encre); }
.ec-fact-detail .tete .ec-plus { margin-left: auto; }
.ec-fact-num { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ec-fact-num strong { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--ec-encre); }
.ec-fact-num .ec-statut { height: 34px; }
.ec-fact-bloc { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.ec-fact-bloc small { font-size: 13px; color: #56627d; }
.ec-fact-bloc b { display: block; font-size: 14.5px; font-weight: 500; color: var(--ec-encre); }
.ec-fact-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ec-trait); }
.ec-fact-dates .ec-fact-bloc { padding: 4px 0; }
.ec-prest h4 { margin: 14px 0 8px; font-size: 16px; font-weight: 800; color: var(--ec-encre); }
.ec-prest .l { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14.5px; color: #2a3656; }
.ec-prest .tot { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ec-trait); }
.ec-total { display: flex; justify-content: space-between; align-items: center; margin: 10px -6px 14px; padding: 12px 14px; border-radius: 8px; background: #edf3ff; font-size: 21px; font-weight: 800; color: var(--ec-encre); }
.ec-qr { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--ec-trait); border-radius: 10px; }
.ec-qr strong { display: block; font-size: 16px; font-weight: 800; color: var(--ec-encre); }
.ec-qr p { margin: 6px 0 0; font-size: 14px; color: #56627d; line-height: 1.45; }
.ec-fact-detail .ec-deux-btns { margin-top: 16px; }

/* ── Adaptations ─────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .ec-db, .ec-db-bas, .ec-detail, .ec-planning, .ec-photos, .ec-docs, .ec-fact { grid-template-columns: minmax(0, 1fr); }
  .ec-doc-panneau { grid-column: auto; grid-row: auto; }
  .ec-msg { grid-template-columns: 320px minmax(0, 1fr); }
  .ec-msg .ec-info { display: none; }
  .ec-detail-bas { grid-template-columns: minmax(0, 1fr); }
  .ec-chantiers { grid-template-columns: minmax(0, 1fr); }
  .ec-vis-corps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ec-coque { grid-template-columns: minmax(0, 1fr); }
  .ec-rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 12px; }
  .ec-marque { padding: 0 8px; }
  .ec-nav { display: flex; overflow-x: auto; }
  .ec-nav a { height: 42px; white-space: nowrap; }
  .ec-rail-bas { display: none; }
  .ec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-login { grid-template-columns: minmax(0, 1fr); }
  .ec-login-marque { display: none; }
  .ec-login-carte { justify-self: center; }
  .ec-mur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-msg { grid-template-columns: minmax(0, 1fr); }
  .ec-plans { grid-template-columns: minmax(0, 1fr); }
  .ec-chantier, .ec-projet-tete { grid-template-columns: minmax(0, 1fr); }
  .ec-haut { flex-wrap: wrap; }
  .ec-devise { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Message de retour (prototype) ───────────────────────────────────────── */
.ec-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 50;
  max-width: min(560px, calc(100vw - 32px));
  padding: 14px 20px; border-radius: 12px;
  background: var(--ec-encre); color: #fff;
  font-size: 15px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(12, 26, 61, .25);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.ec-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.ec-titre-statut { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ec-titre-statut .ec-statut { font-size: 15px; letter-spacing: 0; }
.ec-vignette, .ec-carte-photo { color: inherit; }
.ec-calendrier { min-height: 640px; }

/* ── Ajustements après contrôle visuel (25.09.2026) ──────────────────────── */
.ec-kpi strong { white-space: nowrap; }
.ec-fact .ec-kpi strong { font-size: clamp(22px, 1.7vw, 30px); }
.ec-table td { white-space: nowrap; }
.ec-table td .doc strong, .ec-table td small { white-space: normal; }
.ec-outils .ec-recherche { width: min(440px, 32%); }
.ec-outils .ec-pilules { flex-wrap: nowrap; }
.ec-outils .ec-pilule { white-space: nowrap; }
.ec-cal-tete h2 { white-space: nowrap; margin-right: 8px; }
.ec-filtres .ec-pilules { flex-wrap: nowrap; }
.ec-filtres .ec-pilule { white-space: nowrap; }


/* ============================================================================
   V2 — fidélité aux maquettes (25.09.2026)
   ============================================================================ */
.ec-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
img.ec-visage { display: block; flex: none; border-radius: 50%; object-fit: cover; background: #e6ebf3; }
.ec-principal { padding: 18px 26px 30px 32px; }

/* En-tête : titre à gauche, commandes + devise à droite */
.ec-haut { align-items: flex-start; margin-bottom: 14px; }
.ec-haut-gauche { min-width: 0; padding-top: 34px; }
.ec-haut-col { display: grid; justify-items: end; gap: 12px; margin-left: auto; }
.ec-haut-droite { gap: 26px; }
.ec-titre { margin: 0; }
.ec-titre h1 { font-size: 42px; letter-spacing: -1.4px; }
.ec-titre p { font-size: 23px; color: #56627d; margin-top: 4px; }
.ec-org { height: 44px; padding: 0 16px 0 14px; font-size: 15.5px; color: #1d4fd8; border-radius: 10px; }
.ec-org svg:first-child { color: #1d4fd8; }
.ec-profil { font-weight: 600; font-size: 15px; }
.ec-devise { margin: 0; font-size: 15px; line-height: 1.4; }
.ec-btn-haut { height: 48px; padding: 0 22px; font-size: 17px; border-radius: 8px; margin-top: 10px; }
.ec-ariane { margin: -26px 0 12px; font-size: 15.5px; color: #3b4868; }
.ec-ariane a { display: inline-flex; color: #3b4868; }
.ec-ariane .sep { color: #8e99ae; }

/* Barre latérale : icône pleine sur l'élément actif */
.ec-marque strong { font-size: 38px; }
.ec-nav a { font-size: 15.5px; }
.ec-nav a.actif svg { fill: currentColor; fill-opacity: .16; stroke-width: 2.1; }

/* Cartes : titre précédé d'une pastille d'icône */
.ec-carte-tete { gap: 12px; }
.ec-tete-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ec-bleu-50); color: var(--ec-bleu); flex: none; }
.ec-carte-tete h2 { font-size: 21px; }
.ec-kpi strong { font-size: 34px; }
.ec-kpi span { font-size: 17px; color: #3a4768; }
.ec-kpi .ec-ico-rond { width: 72px; height: 72px; }

/* Pastilles de statut avec icône */
.ec-statut.avec-ico { gap: 7px; }
.ec-statut.sans-point::before { display: none; }
.st-termine, .st-confirme, .st-payee { background: #e8f7ee; color: #15803d; }
.st-attente, .st-apayer { background: #fff1e0; color: #c2610c; }
.st-demande { background: #e6efff; color: #1d4fd8; }
.st-demande::before { background: #1d6cf6; }
.st-refuse, .st-retard { background: #fdeaea; color: #d02f36; }

/* Dashboard */
.ec-db { grid-template-columns: minmax(0, 1.82fr) minmax(380px, 1fr); }
.ec-db-bas { grid-template-columns: minmax(0, 1.82fr) minmax(380px, 1fr); }
.ec-projet-vedette { padding: 18px 20px 20px; }
.ec-projet-tete { grid-template-columns: 254px minmax(0, 1fr); }
.ec-projet-tete .ec-photo { height: 188px; }
.ec-titre-ligne { display: flex; align-items: flex-start; gap: 10px; }
.ec-titre-ligne .ec-plus { margin-left: auto; margin-top: -4px; }
.ec-ref-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.ec-ref-ligne .ref { margin: 0; font-size: 15.5px; color: #66728e; }
.ec-projet-tete .ec-statut { margin: 0; }
.ec-sous-titre { font-size: 18px; margin: 18px 0 4px; }
.ec-sous-titre.sans-trait { border-top: 0; padding-top: 0; margin-top: 18px; }
.ec-types { gap: 14px; }
.ec-type { padding: 16px 10px; }
.ec-type small { font-size: 13px; }
.ec-reserver .ec-deux { margin-top: 4px; }
.ec-grille-photos .ec-photo { aspect-ratio: 2; }
.ec-vignette b { font-weight: 500; font-size: 13.5px; }

/* Mes chantiers */
.ec-outils .ec-recherche { width: 572px; max-width: 45%; height: 48px; }
.ec-outils .ec-pilule { height: 40px; padding: 0 22px; font-size: 16px; }
.ec-chantier { grid-template-columns: 232px minmax(0, 1fr); gap: 20px; padding: 14px 18px 12px; }
.ec-chantier .ec-photo { height: 186px; }
.ec-chantier h3 { font-size: 19.5px; }
.ec-chantier .ref { font-size: 15px; color: #7a869f; }
.ec-chantier .ec-statut { margin: 0; }
.ec-chantier .lieu { margin-top: 4px; }
.ec-chantier .ec-metas { border-top: 0; padding-top: 8px; margin-top: 10px; }
.ec-chantier .ec-voir { font-size: 16.5px; font-weight: 500; }

/* Détail d'un chantier */
.ec-onglets { padding: 0 12px; }
.ec-onglets a { font-size: 16.5px; }
.ec-gros { font-size: 40px; margin: 0 0 4px; }
.ec-detail .ec-metas.quatre { margin-top: 18px; }
.ec-adresse { border-bottom: 1px solid var(--ec-trait); border-top: 0; padding: 14px 0 16px; margin-top: 8px; }
.ec-intervention-tete { align-items: center; }
.ec-intervention-tete > svg { color: var(--ec-bleu); }
.ec-intervention-tete strong { font-size: 19px; }
.ec-intervention .ec-meta svg { color: var(--ec-bleu); }
.ec-intervention-type > svg { color: #3b4868; }
.ec-intervention-type .sous { display: block; margin-top: 4px; font-size: 14.5px; color: #3b4868; }
.ec-detail-bas { grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr) minmax(0, 1fr); }
.ec-detail-bas .ec-carte-tete h2 { font-size: 17px; }
.ec-detail-bas .ec-carte-tete .ec-voir { font-size: 13.5px; }
.ec-detail-bas .ec-grille-photos .ec-photo { aspect-ratio: 1.25; }
.ec-fic { display: block; flex: none; }

/* Planning */
.ec-planning { grid-template-columns: minmax(0, 1.83fr) minmax(380px, 1fr); position: relative; }
.ec-planning:has(.ec-modale) { padding-bottom: 250px; }
.ec-calendrier { overflow: visible; }
.ec-cal-tete h2 { margin: 0 14px 0 4px; }
.ec-cal-tete .ec-cal-nav { margin-left: 8px; }
.ec-auj { color: var(--ec-bleu); height: 38px; }
.ec-cellule { min-height: 86px; }
.ec-evt { grid-template-columns: 17px minmax(0, 1fr); padding: 6px 8px; font-size: 12px; }
.ec-evt b { display: block; font-size: 12.5px; }
.ec-evt span { font-size: 11.5px; }
.ev-demande { background: #e3edff; color: #1d4fd8; }
.ec-modale { top: calc(100% - 16px); bottom: auto; left: 58px; right: 0; border-radius: 16px; box-shadow: 0 16px 50px rgba(16, 38, 88, .20); }
.ec-modale .ec-champ-sel { height: 44px; font-size: 14px; }
.ec-modale .ec-date { font-size: 14px; }
.ec-modale .ec-date > svg:first-child { color: #4d5b7c; }
.ec-date em { margin-right: 4px; }
.ec-label-doux { font-style: normal; font-weight: 500; color: #7a869f; }
.ec-modale-pied .ec-legende span { font-size: 13px; }
.ec-planning-droite { display: grid; gap: 16px; align-content: start; }
.ec-ico-carre { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 12px; }
.ec-demande { grid-template-columns: 58px minmax(0, 1fr) auto 20px; }
.ec-jour-detail { margin-top: 0; }
.ec-jour-equipe { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.ec-jour-equipe strong { display: block; font-size: 16.5px; font-weight: 700; color: var(--ec-encre); }
.ec-jour-equipe small { font-size: 14.5px; color: #56627d; }
.ec-jour-ligne { align-items: flex-start; }
.ec-btn-contour.large { width: 100%; height: 50px; margin-top: 8px; font-size: 17px; }

/* Photos */
.ec-filtres .ec-select { height: 46px; }
.ec-filtres .ec-recherche { width: 250px; height: 42px; }
.ec-photos { grid-template-columns: minmax(0, 1fr) 390px; }
.ec-carte-photo .ec-photo { aspect-ratio: 1.4; }
.ec-carte-photo .ligne1 svg { color: #3b4868; }
.ec-carte-photo b { font-weight: 500; }
.ec-carte-photo .pied { justify-content: flex-end; }
.ec-panneau .ec-photo { height: 214px; }
.ec-panneau .fermer { width: 30px; height: 30px; top: 8px; right: 8px; }
.ec-panneau .ec-auteur { border-top: 0; padding-top: 0; margin: 10px 0 12px; }
.ec-panneau .ec-auteur > svg { color: #3b4868; }
.ec-panneau .ec-tag { margin-bottom: 4px; }

/* Plans */
.ec-plans { grid-template-columns: 294px minmax(0, 1fr); }
.ec-plans-liste { min-height: 0; align-self: stretch; }
.ec-plans-liste .ec-icone-btn { width: 44px; height: 42px; }
.ec-plan-item { padding: 16px 12px; }
.ec-plan-item .ec-statut { display: inline-flex; height: 24px; margin-top: 8px; }
.ec-plan-item.actif .ec-statut { background: none; color: #15803d; padding: 0; }
.ec-vis-tete h2 { display: flex; align-items: center; gap: 14px; font-size: 22px; }
.ec-vis-tete .ec-btn-contour { height: 50px; font-size: 17px; font-weight: 600; }
.ec-vis-corps { grid-template-columns: minmax(0, 1fr) 290px; }
.ec-vis-outils .grp button { font-size: 20px; }
.ec-plan-zone { position: relative; }
.ec-plan-zone > img { display: block; width: 100%; height: auto; }
.ec-commentaires { left: 10px; bottom: 10px; width: 296px; }
.ec-com { border: 0; padding: 8px 4px; }
.ec-com-ouvrir { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--ec-trait-fort); border-radius: 8px; background: #fff; font-weight: 600; color: var(--ec-encre); }
.ec-versions h3 { font-size: 20px; }
.ec-version .bloc { padding: 12px 14px; }
.ec-version.actuelle .bloc { background: #eef4ff; }
.ec-version strong { font-size: 18px; }
.ec-version strong .ec-statut { height: 26px; }

/* Documents */
.ec-filtres-docs .ec-select { width: 264px; height: 46px; font-size: 16px; font-weight: 500; }
.ec-filtres-docs .ec-recherche { width: 336px; height: 46px; }
.ec-filtres-docs .ec-pilule { height: 42px; padding: 0 22px; font-size: 15px; }
.ec-docs { grid-template-columns: minmax(0, 1fr) 415px; }
.ec-docs-table { grid-column: 1; padding: 16px 18px 0; overflow: hidden; }
.ec-docs-table .ec-table thead tr { background: #f3f6fb; }
.ec-docs-table .ec-table th:first-child { border-radius: 8px 0 0 8px; }
.ec-docs-table .ec-table th:last-child { border-radius: 0 8px 8px 0; }
.ec-table .doc strong { font-weight: 600; }
.ec-table .doc .ec-tag { margin-top: 4px; }
.ec-table td.centre, .ec-table th.centre { text-align: center; }
.ec-table .act svg { color: #3b4868; }
.ec-docs-table .ec-pagination { margin: 0 -18px; }
.ec-doc-titre .ligne { gap: 12px; color: #56627d; }
.ec-dl { grid-template-columns: 170px minmax(0, 1fr); }
.ec-apercu { height: auto; }
.ec-apercu img { display: block; width: 100%; height: auto; }
.ec-histo-tete { display: flex; align-items: center; justify-content: space-between; }
.ec-histo li { grid-template-columns: 16px 30px 150px minmax(0, 1fr) auto; }
.ec-histo .ec-tag { height: 22px; font-size: 12px; }

/* Messages */
.ec-msg { grid-template-columns: 370px minmax(0, 1fr) 380px; min-height: 0; }
.ec-conv { grid-template-columns: 54px minmax(0, 1fr) auto; }
.ec-conv strong { font-size: 14.5px; }
.ec-conv .qui { display: block; }
.ec-conv .ec-badge { background: var(--ec-rouge); }
.ec-fil-tete .icos { color: #3b4868; }
.ec-fil-tete .qui .sep { color: #8e99ae; }
.ec-bulle-ligne { grid-template-columns: 44px minmax(0, 1fr); }
.ec-bulle-ligne.moi { grid-template-columns: minmax(0, 1fr) 44px; }
.ec-bulle-ligne .nom time { margin-left: 10px; }
.ec-bulle-ligne.moi .ec-bulle { background: #e8f0fe; }
.ec-image-msg { width: 290px; height: 146px; overflow: visible; }
.ec-image-msg img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.ec-image-msg time { right: -48px; }
.ec-composer .champ svg { color: #56627d; }
.ec-info .ec-photo { height: 152px; }
.ec-info-ligne { grid-template-columns: 26px 110px minmax(0, 1fr); }
.ec-info-ligne > svg { color: #3b4868; }
.ec-info > .ec-btn.large { margin-top: 12px; }
.ec-partage .fic { color: #e5383b; }

/* Factures */
.ec-fact { grid-template-columns: minmax(0, 1fr) 414px; }
.ec-fact-liste { min-height: 632px; }
.ec-fact-filtres .ec-recherche { flex: 0 1 296px; }
.ec-fact-filtres .ec-select { font-weight: 500; }
.ec-mini-seg { margin-left: auto; }
.ec-fact .ec-table td { padding: 20px 10px; font-size: 15px; }
.ec-fact .ec-table td.num { color: var(--ec-bleu); }
.ec-fact .ec-table .act { justify-content: center; }
.ec-fact-detail .tete > svg { color: var(--ec-bleu); }
.ec-fact-detail .tete h3 { font-size: 20px; }
.ec-fact-num strong { font-size: 21px; }
.ec-fact-bloc { grid-template-columns: 30px minmax(0, 1fr); }
.ec-fact-bloc > svg { color: #3b4868; }
.ec-prest .l { font-size: 14.5px; }
.ec-total { background: #eaf1ff; font-size: 20px; }
.ec-qr { grid-template-columns: 96px minmax(0, 1fr); }

@media (max-width: 1280px) {
  .ec-planning:has(.ec-modale) { padding-bottom: 0; }
  .ec-modale { position: relative; top: auto; left: auto; margin: 12px; }
  .ec-docs-table { grid-column: auto; }
}


/* ============================================================================
   V3 — DESIGN ORBISIA (25.09.2026)
   Demande : « fais-le avec le design d'Orbisia ». Le contenu des maquettes
   reste ; la matière vient de l'application : jetons repris du CSS compilé
   (index-*.css) et des retouches validées (orbisia-ajouts.css) — encre
   #071442, bleu #0b4dff, filets #dfe8f6, coins 8px, Manrope, échelle
   13,5 / 15 / 33, bandeau « Performance » bleu → violet, bandes de verre,
   barre d'onglets bleu nuit pleine largeur.
   ============================================================================ */
:root {
  --navy: #071442;
  --blue: #0b4dff;
  --blue-50: #edf3ff;
  --border: #dfe8f6;
  --muted: #52658e;
  --filet: #eef3fb;
  --survol: #f7faff;
  --radius: 8px;
  --gradient: linear-gradient(135deg, #13a6ff 0%, #1358ff 25%, #6d35ff 58%, #ff2fc2 100%);
  --ec-bleu: #0b4dff;
  --ec-bleu-fonce: #0a3fd6;
  --ec-bleu-50: #edf3ff;
  --ec-encre: #071442;
  --ec-texte: #071442;
  --ec-trait: #eef3fb;
  --ec-trait-fort: #dfe8f6;
  --ec-rayon: 8px;
  --ec-ombre: none;
  --ec-rail: 250px;
}
body { font-size: 13.5px; color: var(--navy); background: #fff; }
.ec-fond { background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)), url(img/fond.webp) right top / cover no-repeat, #fff; }

/* ── Menu latéral ────────────────────────────────────────────────────────── */
.ec-rail { padding: 18px 12px 14px; background: rgba(255,255,255,.72); border-right: 1px solid #e6edf8; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.ec-marque { gap: 8px; padding: 0 6px 22px; }
.ec-marque img { width: 28px; height: 28px; }
.ec-marque strong { font-size: 22px; font-weight: 800; letter-spacing: -.8px; }
.ec-rail-section { margin: 0 0 6px; padding: 0 8px; font-size: 11px; font-weight: 600; color: var(--muted); }
.ec-nav { gap: 2px; }
.ec-nav a { height: 34px; gap: 10px; padding: 0 10px; border-radius: var(--radius); font-size: 13px; font-weight: 500; color: var(--navy); }
.ec-nav a svg { color: #3d5286; }
.ec-nav a:hover { background: var(--survol); }
.ec-nav a.actif { background: var(--blue-50); color: var(--blue); font-weight: 600; }
.ec-nav a.actif svg { color: var(--blue); fill: none; }
.ec-nav a.actif::before { display: none; }
.ec-nav .ec-badge { min-width: 18px; height: 18px; font-size: 11px; background: #e5484d; }
.ec-rail-bas { padding: 0 4px; }
.ec-rail-bas a { padding: 10px 6px; font-size: 12.5px; color: var(--navy); border-top: 1px solid var(--filet); gap: 10px; }

/* ── Barre du haut ───────────────────────────────────────────────────────── */
.ec-principal { padding: 0; display: flex; flex-direction: column; min-height: 100vh; }
.ec-barre-haut { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 22px; background: rgba(255,255,255,.78); border-bottom: 1px solid var(--filet); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.ec-onglet-page { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; font-size: 12px; font-weight: 600; color: var(--blue); }
.ec-barre-droite { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ec-org { height: 34px; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.ec-org svg:first-child { color: var(--blue); }
.ec-rond { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--navy); padding: 0; }
.ec-rond:hover { background: var(--blue-50); }
.ec-cloche i { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px #fff; }
.ec-avatar-ini { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #1358ff, #6d35ff 60%, #c43bff); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px rgba(19, 88, 255, .3); }

/* ── Page ────────────────────────────────────────────────────────────────── */
.ec-contenu { padding: 26px 40px 40px; }
.ec-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.ec-entete h1 { margin: 0; font-size: clamp(25px, 2.1vw, 33px); font-weight: 700; letter-spacing: -.045em; line-height: 1.15; color: var(--navy); }
.ec-entete p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.ec-ariane { margin: 0 0 10px; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ec-ariane a { color: var(--muted); }
.ec-titre-statut { gap: 12px; }
.ec-titre-statut .ec-statut { font-size: 12px; }
.ec-btn-haut { height: 44px; margin: 0; padding: 0 18px; font-size: 13.5px; }

/* ── Accueil (vue d'ensemble) ────────────────────────────────────────────── */
.ec-accueil { display: flex; align-items: center; gap: 30px; margin: 8px 0 22px; }
.ec-accueil h1 { margin: 0; font-size: clamp(28px, 2.5vw, 40px); line-height: 1.18; letter-spacing: -1.6px; font-weight: 800; color: var(--navy); }
.ec-accueil .g1 { color: #1661ff; }
.ec-accueil .g2 { background: linear-gradient(90deg, #6d35ff, #c43bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ec-puce { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; font-size: 11.5px; color: var(--navy); white-space: nowrap; }
.ec-puce i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d57; }
.ec-rac-titre { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--navy); }
.ec-raccourcis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.ec-rac { display: grid; justify-items: center; gap: 8px; width: 78px; font-size: 11.5px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--navy); }
.ec-rac span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 6px 14px rgba(7, 20, 66, .22); transition: transform .15s ease; }
.ec-rac:hover span { transform: translateY(-2px); }

.ec-perf { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.6fr repeat(4, minmax(150px, 1fr)); gap: 12px; margin: 0 0 20px; min-height: 236px; padding: 46px 20px 20px; color: #fff; border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius);
  background: radial-gradient(circle at 12% 108%, rgba(0,224,255,.72), transparent 32%), radial-gradient(circle at 100% 4%, rgba(218,86,255,.55), transparent 29%), linear-gradient(110deg, #0878f9, #143ff4 44%, #5d35f1, #973dec); }
.ec-perf::before, .ec-perf::after { position: absolute; z-index: -1; content: ""; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; pointer-events: none; }
.ec-perf::before { width: 480px; height: 480px; top: -330px; right: -90px; box-shadow: 0 0 70px #ffffff14 inset; }
.ec-perf::after { width: 620px; height: 320px; left: 190px; bottom: -250px; transform: rotate(-12deg); }
.ec-perf-label { position: absolute; top: 12px; left: 50%; transform: translate(-50%); padding: 5px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: #ffffff1f; color: #ffffffe6; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ec-perf-vedette { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 14px 16px; color: #fff; }
.ec-perf-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); }
.ec-perf-vedette small, .ec-perf-carte .tete { font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #ffffffc7; }
.ec-perf-vedette strong { display: block; margin: 8px 0 4px; font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.ec-perf-courbe { display: block; width: 100%; height: 70px; }
.ec-perf-mois { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: #ffffffb3; }
.ec-perf-vedette em { display: block; margin-top: 8px; font-style: normal; font-size: 11.5px; font-weight: 700; text-align: right; }
.ec-perf-carte { display: flex; flex-direction: column; min-height: 170px; padding: 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; background: #ffffff1c; box-shadow: 0 12px 30px #11187024; color: #fff; transition: transform .18s; }
.ec-perf-carte:hover { transform: translateY(-2px); }
.ec-perf-carte .tete { display: flex; align-items: center; gap: 10px; }
.ec-perf-ico.petit { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.ec-perf-carte strong { margin: 16px 0 8px; font-size: 31px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.ec-perf-puce { align-self: flex-start; padding: 3px 9px; border-radius: 6px; background: rgba(46, 212, 150, .9); color: #053b27; font-size: 11px; font-weight: 800; }
.ec-perf-carte small { margin-top: auto; font-size: 11.5px; color: #ffffffc7; }

/* ── Cartes, titres, textes ──────────────────────────────────────────────── */
.ec-carte { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; background: #fff; }
.ec-carte-tete { gap: 10px; margin-bottom: 14px; }
.ec-carte-tete h2, .ec-carte-tete h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.ec-tete-ico { width: auto; height: auto; background: none; color: var(--blue); }
.ec-tete-ico svg { width: 18px; height: 18px; }
.ec-voir { font-size: 12.5px; font-weight: 600; color: var(--blue); }
.ec-label { font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.ec-etiquette { font-size: 12px; color: var(--muted); margin: 12px 0 6px; }
.ec-meta small { font-size: 11.5px; color: var(--muted); }
.ec-meta strong { font-size: 13.5px; font-weight: 600; }
.ec-meta svg { width: 18px; height: 18px; color: var(--muted); }
.ec-barre { height: 8px; background: #e9eef8; }
.ec-barre i { background: var(--blue); }
.ec-barre-ligne b { font-size: 14px; }

/* Indicateurs des pages : bande de verre, comme Factures & devis */
.ec-kpis { gap: 12px; padding: 14px; border-radius: var(--radius); background-color: #f7f7f7;
  background-image: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)), url(img/fond.webp);
  background-size: auto, cover; background-position: 0 0, right bottom; background-attachment: scroll, fixed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(20,48,105,.08); }
.ec-kpi { min-height: 0; padding: 14px 16px; gap: 14px; border: 1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.55); }
.ec-kpi .ec-ico-rond { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); color: var(--blue); }
.ec-kpi .ec-ico-rond svg { width: 20px; height: 20px; }
.ec-kpi .ec-ico-rond.ton-orange { color: #c2660c; }
.ec-kpi .ec-ico-rond.ton-vert { color: #0f8a4d; }
.ec-kpi .ec-ico-rond.ton-violet { color: #7a3ff0; }
.ec-kpi .ec-ico-rond.ton-rouge { color: #d0344c; }
.ec-kpi strong, .ec-fact .ec-kpi strong { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.ec-kpi span { font-size: 12.5px; color: var(--muted); }
.ec-kpi .ec-kpi-fl svg { width: 16px; height: 16px; }

/* Pastilles de statut aux couleurs d'Orbisia */
.ec-statut { height: 24px; padding: 0 9px; gap: 6px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.ec-statut::before { width: 7px; height: 7px; }
.ec-statut svg { width: 14px; height: 14px; }
.st-cours, .st-termine, .st-confirme, .st-payee { background: #e6f7ee; color: #0f8a4d; }
.st-planifie, .st-attente, .st-apayer { background: #fdf1e3; color: #c2660c; }
.st-refuse, .st-retard { background: #fdecef; color: #d0344c; }
.st-demande { background: var(--blue-50); color: var(--blue); }
.ec-tag { height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; }

/* Boutons et contrôles */
.ec-btn, .ec-btn-contour { height: 44px; padding: 0 18px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; }
.ec-btn { background: var(--blue); }
.ec-btn.large, .ec-btn-contour.large { height: 44px; font-size: 13.5px; }
.ec-btn-contour { border: 1px solid var(--border); color: var(--blue); }
.ec-btn-gris { height: 38px; border-color: var(--border); border-radius: var(--radius); font-size: 12.5px; }
.ec-recherche { height: 38px; border-color: var(--border); border-radius: var(--radius); }
.ec-recherche input { font-size: 13px; }
.ec-select, .ec-champ-sel, .ec-date { height: 38px; border-color: var(--border); border-radius: var(--radius); font-size: 12.5px; font-weight: 600; }
.ec-pilule { height: 32px; padding: 0 14px; border-color: var(--border); font-size: 12.5px; }
.ec-pilule.actif { background: var(--blue); border-color: var(--blue); }
.ec-outils .ec-recherche { height: 38px; width: 380px; }
.ec-outils .ec-pilule, .ec-filtres-docs .ec-pilule { height: 32px; padding: 0 14px; font-size: 12.5px; }
.ec-filtres-docs .ec-select, .ec-filtres-docs .ec-recherche, .ec-filtres .ec-select { height: 38px; font-size: 12.5px; }
.ec-segment button { height: 30px; font-size: 12.5px; padding: 0 16px; }
.ec-segment button.actif, .ec-vue button.actif { background: var(--blue); }
.ec-mini-seg button.actif { background: var(--blue-50); color: var(--blue); }
.ec-icone-btn { border-color: var(--border); border-radius: var(--radius); }
.ec-type { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 10px; }
.ec-type b { font-size: 13.5px; }
.ec-type small { font-size: 11.5px; }
.ec-type.actif { border-color: var(--blue); background: var(--blue-50); box-shadow: none; }
.ec-type.actif svg, .ec-type.actif b { color: var(--blue); }
.ec-type svg { width: 24px; height: 24px; }

/* Tableaux au format Orbisia */
.ec-table th { padding: 11px 12px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ec-table thead tr, .ec-docs-table .ec-table thead tr { background: #f7f9fd; }
.ec-table td, .ec-fact .ec-table td { padding: 11px 12px; font-size: 12.5px; border-top: 1px solid var(--filet); }
.ec-table tbody tr:hover { background: var(--survol); }
.ec-table tbody tr.actif { background: var(--blue-50); }
.ec-table .doc strong, .ec-table .maj strong { font-size: 12.5px; }
.ec-table .maj small { font-size: 11.5px; }
.ec-fact .ec-table .act .ec-icone-btn { width: 32px; height: 32px; }
.ec-table .act svg { width: 18px; height: 18px; }
.ec-pagination { font-size: 12.5px; padding: 12px 16px; }
.ec-pages button { min-width: 32px; height: 32px; border-color: var(--border); font-size: 12.5px; }
.ec-pages button.actif { background: var(--blue); border-color: var(--blue); }

/* Onglets du chantier : bande bleu nuit pleine largeur, onglet actif en pastille */
.ec-onglets.ec-carte { display: flex; gap: 4px; margin: 0 -40px 20px; padding: 8px 40px; border: 0; border-radius: 0; background: var(--navy); overflow-x: auto; scrollbar-width: none; }
.ec-onglets a { height: auto; padding: 10px 13px; border: 0; border-radius: 22px; font-size: 13px; font-weight: 500; color: #ffffffb8; }
.ec-onglets a svg { width: 17px; height: 17px; opacity: .85; }
.ec-onglets a:hover { color: #fff; background: #ffffff17; }
.ec-onglets a.actif { color: #fff; font-weight: 600; background: var(--blue); }

/* ── Ajustements par écran ───────────────────────────────────────────────── */
.ec-db, .ec-db-bas { gap: 16px; }
.ec-projet-vedette { padding: 20px 22px; }
.ec-projet-tete { grid-template-columns: 220px minmax(0, 1fr); }
.ec-projet-tete .ec-photo { height: 160px; border-radius: var(--radius); }
.ec-projet-tete h2, .ec-chantier h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.ec-ref-ligne .ref, .ec-chantier .ref { font-size: 12.5px; color: var(--muted); }
.ec-sous-titre { font-size: 15px; font-weight: 700; }
.ec-etape b { font-size: 12.5px; }
.ec-etape small { font-size: 11.5px; }
.ec-etape .pt { width: 24px; height: 24px; }
.ec-etape.cours .pt::after { width: 10px; height: 10px; }
.ec-etapes::before, .ec-etapes .ec-etapes-av { top: 11px; }
.ec-etape.fait .pt, .ec-etapes .ec-etapes-av { background: var(--blue); }
.ec-etape.cours .pt { box-shadow: inset 0 0 0 3px var(--blue); }
.ec-etape.cours .pt::after { background: var(--blue); }
.ec-reserver, .ec-db-bas > .ec-carte, .ec-detail > .ec-carte, .ec-detail-bas > .ec-carte { padding: 20px 22px; }
.ec-reserver p.intro { font-size: 12.5px; color: var(--muted); }
.ec-activite strong { font-size: 13px; }
.ec-activite small, .ec-activite time { font-size: 11.5px; color: var(--muted); }
.ec-activite .ec-ico-rond { width: 34px; height: 34px; border-radius: 10px; }
.ec-activite .ec-ico-rond svg { width: 17px; height: 17px; }
.ec-vignette b { font-size: 12.5px; font-weight: 600; }
.ec-vignette small { font-size: 11.5px; color: var(--muted); }
.ec-photo { border-radius: var(--radius); }

.ec-chantier { padding: 14px 16px 12px; grid-template-columns: 200px minmax(0, 1fr); }
.ec-chantier .ec-photo { height: 160px; }
.ec-chantier .lieu { font-size: 12.5px; color: var(--muted); }
.ec-chantier .ec-voir { font-size: 13px; font-weight: 600; }
.ec-chantiers { gap: 16px; }

.ec-gros { font-size: 33px; letter-spacing: -.045em; }
.ec-adresse small { font-size: 11.5px; color: var(--muted); }
.ec-adresse strong { font-size: 13.5px; font-weight: 600; }
.ec-intervention { background: var(--blue-50); border-radius: var(--radius); }
.ec-intervention-tete strong { font-size: 15px; }
.ec-intervention-tete small { font-size: 12.5px; }
.ec-intervention-type b { font-size: 13px; }
.ec-intervention-type .sous, .ec-intervention-type p { font-size: 12.5px; }
.ec-docs-recents strong { font-size: 12.5px; }
.ec-docs-recents small, .ec-docs-recents time { font-size: 11.5px; color: var(--muted); }

.ec-cal-tete h2 { font-size: 20px; letter-spacing: -.03em; }
.ec-grille-cal .jr { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ec-cellule { border-color: var(--filet); min-height: 80px; }
.ec-cellule .n { font-size: 12.5px; }
.ec-cellule.auj .n { background: var(--blue); width: 24px; height: 24px; }
.ec-cellule.auj { box-shadow: inset 2px 0 0 var(--blue); }
.ec-evt b { font-size: 11.5px; }
.ec-evt span { font-size: 10.5px; }
.ec-legende { font-size: 12px; }
.ec-modale { border-radius: var(--radius); }
.ec-modale h3, .ec-jour-detail h3 { font-size: 15px; font-weight: 700; }
.ec-demande { border-color: var(--border); border-radius: var(--radius); padding: 10px 12px; }
.ec-demande strong, .ec-jour-equipe strong { font-size: 13.5px; }
.ec-demande small, .ec-demande .d, .ec-jour-equipe small { font-size: 12px; }
.ec-ico-carre { width: 44px; height: 44px; border-radius: 10px; }
.ec-ico-carre svg { width: 22px; height: 22px; }
.ec-demande { grid-template-columns: 44px minmax(0, 1fr) auto 18px; }
.ec-jour-ligne { font-size: 13px; }
.ec-jour-ligne small { font-size: 12px; color: var(--muted); }

.ec-carte-photo b { font-size: 13px; font-weight: 600; }
.ec-carte-photo .ligne1, .ec-carte-photo .pied { font-size: 12px; color: var(--muted); }
.ec-carte-photo.actif { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.ec-panneau h3 { font-size: 15px; font-weight: 700; }
.ec-panneau .date, .ec-panneau p { font-size: 12.5px; color: var(--muted); }
.ec-auteur strong { font-size: 13px; }
.ec-auteur small { font-size: 11.5px; color: var(--muted); }

.ec-plans-liste h2, .ec-versions h3, .ec-vis-tete h2 { font-size: 15px; font-weight: 700; }
.ec-plan-item { border-radius: var(--radius); }
.ec-plan-item strong { font-size: 13px; }
.ec-plan-item.actif { background: var(--blue-50); box-shadow: none; }
.ec-vis-tete p { font-size: 12.5px; color: var(--muted); }
.ec-vis-tete .ec-btn-contour { height: 38px; font-size: 12.5px; }
.ec-vis-cadre { border-color: var(--border); border-radius: var(--radius); }
.ec-version strong { font-size: 13.5px; }
.ec-version small, .ec-version p { font-size: 12px; }
.ec-version.actuelle .bloc { background: var(--blue-50); }
.ec-com strong { font-size: 12.5px; }

.ec-doc-panneau h3, .ec-fact-detail h3 { font-size: 15px; font-weight: 700; }
.ec-doc-titre strong { font-size: 14px; }
.ec-dl { font-size: 12.5px; grid-template-columns: 140px minmax(0, 1fr); }
.ec-dl dt { color: var(--muted); }
.ec-histo li { font-size: 12px; }

.ec-convs h2, .ec-info h2 { font-size: 15px; font-weight: 700; }
.ec-conv { border-bottom-color: var(--filet); }
.ec-conv strong { font-size: 13px; }
.ec-conv .qui, .ec-conv .der, .ec-conv .droite { font-size: 12px; }
.ec-conv.actif { background: var(--blue-50); box-shadow: none; }
.ec-fil-tete strong { font-size: 15px; font-weight: 700; }
.ec-fil-tete .qui, .ec-fil-tete small { font-size: 12.5px; }
.ec-bulle { font-size: 13px; border-radius: 4px 10px 10px 10px; }
.ec-bulle-ligne.moi .ec-bulle { background: var(--blue-50); }
.ec-bulle-ligne .nom { font-size: 12.5px; }
.ec-composer .champ { height: 44px; border-color: var(--border); border-radius: var(--radius); }
.ec-composer .envoyer { width: 44px; height: 44px; background: var(--blue); }
.ec-info .nom { font-size: 14px; }
.ec-info-ligne { font-size: 12.5px; }
.ec-info-ligne span { color: var(--muted); }
.ec-partages .tete2 { font-size: 13.5px; }
.ec-partage strong { font-size: 12.5px; }

.ec-fact-num strong { font-size: 17px; }
.ec-fact-bloc small { font-size: 11.5px; color: var(--muted); }
.ec-fact-bloc b { font-size: 13px; }
.ec-prest h4 { font-size: 13.5px; }
.ec-prest .l { font-size: 12.5px; }
.ec-total { font-size: 17px; background: var(--blue-50); border-radius: var(--radius); }
.ec-qr { border-color: var(--border); border-radius: var(--radius); }
.ec-qr strong { font-size: 13.5px; }
.ec-qr p { font-size: 12px; }

/* Connexion : mêmes jetons */
.ec-login-carte { border-radius: 12px; }
.ec-login-carte h1 { font-size: 27px; letter-spacing: -.045em; color: var(--navy); }
.ec-btn-grand { background: var(--blue); border-radius: var(--radius); font-size: 16px; }
.ec-saisie { border: 1px solid var(--border); border-radius: var(--radius); }
.ec-lien { color: var(--blue); }
.ec-login-logo span { color: var(--navy); }

@media (max-width: 1400px) {
  .ec-perf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-perf-vedette { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ec-contenu { padding: 20px 16px 32px; }
  .ec-onglets.ec-carte { margin: 0 -16px 16px; padding: 8px 16px; }
  .ec-barre-haut { padding: 0 12px; }
  .ec-org { display: none; }
  .ec-accueil { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* V3 — corrections après contrôle (25.09.2026) */
.ec-kpis { background: rgba(237, 243, 255, .62); background-image: none; border: 1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 0 rgba(20,48,105,.06); }
.ec-kpi { background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.95); }
.ec-docs { grid-template-rows: auto 1fr; align-items: start; }
.ec-docs-table { align-self: start; }
.ec-detail-bas .ec-carte-tete h2 { font-size: 15px; }
.ec-detail-bas .ec-carte-tete .ec-voir, .ec-db-bas .ec-carte-tete .ec-voir { font-size: 12px; }
.ec-carte-tete h2 { white-space: nowrap; }
.ec-carte-tete { flex-wrap: nowrap; }
.ec-carte-tete .ec-voir { margin-left: auto; }
.ec-intervention .ec-meta small { font-size: 11.5px; color: var(--muted); }
.ec-intervention .ec-meta strong { font-size: 13px; }
.ec-meta svg { width: 18px; height: 18px; }
.ec-docs-recents li { grid-template-columns: 30px minmax(0, 1fr) auto 24px; }

.ec-mini-seg button { white-space: nowrap; font-size: 12px; padding: 0 10px; }
.ec-fact .ec-statut, .ec-fact-num .ec-statut { height: 24px; padding: 0 9px; font-size: 12px; }
.ec-evt div { min-width: 0; }
.ec-evt b, .ec-evt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ── « Demander une équipe » : vraie fenêtre modale (demande du 25.09.2026) ──
   Voile bleu nuit flouté, fenêtre centrée, fermeture par ×, Annuler, Échap
   ou clic sur le voile. Elle s'ouvre depuis n'importe quel écran. */
body.ec-bloque { overflow: hidden; }
.ec-voile { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(7, 20, 66, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: ec-voile .18s ease-out; }
.ec-voile .ec-modale { position: relative; inset: auto; top: auto; left: auto; right: auto; bottom: auto; width: min(880px, 100%); max-height: calc(100vh - 32px); overflow: auto; margin: 0; padding: 22px 24px 20px; border-radius: var(--radius); background: #fff; box-shadow: 0 40px 90px rgba(9, 22, 56, .3); animation: ec-modale .22s cubic-bezier(.22, 1, .36, 1); }
.ec-voile .ec-modale:focus { outline: none; }
.ec-voile .ec-modale h3 { margin: 0 0 16px; font-size: 17px; font-weight: 700; }
.ec-voile .ec-modale .fermer { top: 16px; right: 16px; }
.ec-voile .ec-modale-pied { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); }
.ec-espace { margin-right: auto; }
.ec-planning:has(.ec-modale) { padding-bottom: 0; }
@keyframes ec-voile { from { opacity: 0; } }
@keyframes ec-modale { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (max-width: 700px) { .ec-voile .ec-modale-grille { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ec-voile, .ec-voile .ec-modale { animation: none; } }
.ec-voile .ec-champ-sel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Documents : indicateurs et tableau dans une même colonne ; le panneau de droite ne les écarte plus. */
.ec-docs { grid-template-rows: none; align-items: start; }
.ec-docs-gauche { display: grid; gap: 14px; min-width: 0; }
.ec-docs .ec-doc-panneau { grid-column: 2; grid-row: 1; }

/* ── Messages : la page tient dans la fenêtre, sans défilement de page ──────
   La page prend exactement la hauteur de l'écran ; les trois colonnes
   remplissent l'espace sous le titre et défilent chacune à l'intérieur. */
@media (min-width: 901px) {
  .ec-principal.ec-page-messages { height: 100vh; min-height: 0; overflow: hidden; }
  .ec-page-messages .ec-contenu { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 24px; }
  .ec-page-messages .ec-entete { flex: none; }
  .ec-page-messages .ec-msg { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .ec-page-messages .ec-convs, .ec-page-messages .ec-info { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .ec-page-messages .ec-fil { min-height: 0; }
  .ec-page-messages .ec-fil-corps { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .ec-page-messages .ec-info { display: flex; flex-direction: column; }
  .ec-page-messages .ec-info .ec-photo { flex: none; }
  .ec-page-messages .ec-info > .ec-btn.large { margin-top: auto; flex: none; }
  .ec-page-messages .ec-partages { margin-bottom: 14px; }
}
/* Double coche « lu » sous la bulle, alignée à droite */
.ec-bulle-ligne.moi .lu { display: flex; justify-content: flex-end; }

/* Messages : colonnes proportionnelles, la discussion garde toujours la place principale */
@media (min-width: 1281px) {
  .ec-msg { grid-template-columns: minmax(260px, .9fr) minmax(420px, 2fr) minmax(280px, .95fr); }
}
.ec-fil-tete > div:not(.icos) { min-width: 0; }
.ec-fil-tete strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-fil-tete .icos { flex: none; }

@media (min-width: 1281px) {
  .ec-msg { grid-template-columns: minmax(300px, 1fr) minmax(380px, 1.8fr) minmax(290px, .95fr); }
}
.ec-convs .tete { gap: 10px; }
.ec-convs .tete .ec-btn { height: 36px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
.ec-partage { grid-template-columns: 24px minmax(0, 1fr) auto 20px; }
.ec-partage strong, .ec-partage small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-partage time { white-space: nowrap; }
.ec-info-ligne { grid-template-columns: 24px 96px minmax(0, 1fr); gap: 10px; }


/* ============================================================================
   PAGES À HAUTEUR D'ÉCRAN (demande du 25.09.2026 : « pareil partout »)
   La page prend exactement la hauteur de la fenêtre ; le bloc principal
   remplit l'espace sous le titre et seules ses zones intérieures défilent.
   Vue d'ensemble et fiche chantier restent en défilement normal : leur
   contenu est trop long pour un écran.
   ============================================================================ */
@media (min-width: 901px) {
  .ec-principal.ec-plein { height: 100vh; min-height: 0; overflow: hidden; }
  .ec-plein .ec-contenu { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 24px; }
  .ec-plein .ec-contenu > * { flex: none; }
  .ec-plein .ec-contenu > :is(.ec-msg, .ec-fact, .ec-docs, .ec-photos, .ec-plans, .ec-planning, .ec-chantiers) { flex: 1; min-height: 0; margin-bottom: 0; }
  .ec-plein :is(.ec-kpis, .ec-outils, .ec-filtres) { margin-bottom: 14px; }

  /* Mes chantiers */
  .ec-plein .ec-chantiers { overflow-y: auto; align-content: start; padding: 1px 2px 2px; scrollbar-width: thin; }

  /* Factures */
  .ec-plein .ec-fact { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ec-plein .ec-fact-liste { min-height: 0; display: flex; flex-direction: column; }
  .ec-plein .ec-fact-liste > div[style] { flex: 1; min-height: 0; overflow: auto; }
  .ec-plein .ec-fact-detail { min-height: 0; overflow-y: auto; scrollbar-width: thin; }

  /* Documents */
  .ec-plein .ec-docs { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ec-plein .ec-docs-gauche { grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  .ec-plein .ec-docs-gauche .ec-kpis { margin-bottom: 0; }
  .ec-plein .ec-docs-table { display: flex; flex-direction: column; min-height: 0; align-self: stretch; }
  .ec-plein .ec-docs-table > div[style] { flex: 1; min-height: 0; overflow: auto; }
  .ec-plein .ec-doc-panneau { min-height: 0; overflow-y: auto; align-self: stretch; scrollbar-width: thin; }

  /* Photos */
  .ec-plein .ec-photos { grid-template-rows: minmax(0, 1fr); }
  .ec-plein .ec-mur { min-height: 0; overflow-y: auto; align-content: start; padding: 2px; scrollbar-width: thin; }
  .ec-plein .ec-panneau { min-height: 0; overflow-y: auto; scrollbar-width: thin; }

  /* Plans : le plan s'ajuste à la place disponible */
  .ec-plein .ec-plans { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ec-plein .ec-plans-liste { min-height: 0; overflow-y: auto; }
  .ec-plein .ec-visionneuse { display: flex; flex-direction: column; min-height: 0; }
  .ec-plein .ec-vis-corps { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .ec-plein .ec-vis-cadre { display: flex; flex-direction: column; min-height: 0; }
  .ec-plein .ec-plan-zone { flex: 1; min-height: 0; overflow: hidden; background: #fff; }
  .ec-plein .ec-plan-zone > img { width: 100%; height: 100%; object-fit: contain; }
  .ec-plein .ec-versions { min-height: 0; overflow-y: auto; scrollbar-width: thin; }

  /* Planning : les semaines se partagent la hauteur */
  .ec-plein .ec-planning { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ec-plein .ec-calendrier { display: flex; flex-direction: column; min-height: 0; }
  .ec-plein .ec-grille-cal { flex: 1; min-height: 0; grid-template-rows: auto repeat(5, minmax(0, 1fr)); }
  .ec-plein .ec-cellule { min-height: 0; }
  .ec-plein .ec-planning-droite { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
}


/* ============================================================================
   SANS CONTOURS (demande du 25.09.2026 : « enlève toutes les couleurs de
   cadre, de partout »). Aucun cadre n'a plus de bordure colorée. Les cartes
   restent lisibles par une ombre très douce ; les champs et filtres par un
   fond gris-bleu léger ; les éléments sélectionnés par un fond bleu clair.
   Les filets de séparation (lignes de tableau, grille du calendrier) restent.
   ============================================================================ */
:is(.ec-carte, .ec-kpi, .ec-kpis, .ec-perf, .ec-perf-carte, .ec-perf-ico, .ec-type, .ec-demande,
    .ec-recherche, .ec-select, .ec-champ-sel, .ec-date, .ec-textarea, .ec-saisie, .ec-tri,
    .ec-pilule, .ec-btn-contour, .ec-btn-gris, .ec-icone-btn, .ec-org, .ec-onglet-page, .ec-puce,
    .ec-segment, .ec-mini-seg, .ec-cal-nav, .ec-vue, .ec-pages button, .ec-vis-cadre, .ec-vis-outils .grp,
    .ec-qr, .ec-piece, .ec-composer .champ, .ec-com, .ec-com-saisie input, .ec-com-ouvrir, .ec-apercu,
    .ec-carte-photo, .ec-commentaires, .ec-login-carte, .ec-modale, .ec-intervention, .ec-kpi .ec-ico-rond) {
  border: 0 !important;
}
/* (ombre des cartes retirée le 25.09.2026 — « enlève les ombres ») */
.ec-perf, .ec-perf-carte, .ec-kpis, .ec-kpi { box-shadow: none !important; }
.ec-kpis { background: rgba(237, 243, 255, .55); }
.ec-kpi { background: rgba(255, 255, 255, .8); }

/* Champs, listes déroulantes, filtres : fond léger au lieu du contour */
:is(.ec-recherche, .ec-select, .ec-champ-sel, .ec-date, .ec-textarea, .ec-saisie, .ec-tri,
    .ec-composer .champ, .ec-com-saisie input, .ec-segment, .ec-mini-seg, .ec-cal-nav, .ec-vue,
    .ec-vis-outils .grp, .ec-org, .ec-onglet-page, .ec-puce) { background: #f1f5fb !important; }
.ec-cal-nav button, .ec-vis-outils .grp button, .ec-vis-outils .grp span, .ec-vue button { background: transparent; border: 0 !important; }
.ec-vue button.actif { background: var(--blue); }
.ec-pilule { background: #f1f5fb; }
.ec-pilule.actif { background: var(--blue); }
.ec-pages button { background: #f1f5fb; }
.ec-pages button.actif { background: var(--blue); }
.ec-saisie:focus-within, .ec-recherche:focus-within { box-shadow: 0 0 0 2px rgba(11, 77, 255, .25); }

/* Boutons secondaires : fond bleu clair au lieu du contour */
.ec-btn-contour { background: var(--blue-50) !important; }
.ec-btn-contour:hover { background: #dfe9ff !important; }
.ec-btn-gris, .ec-icone-btn { background: #f1f5fb !important; }

/* Sélection : fond au lieu du contour bleu */
.ec-type { background: #f5f8fd; }
.ec-type.actif { background: var(--blue-50); box-shadow: none; }
.ec-carte-photo.actif { background: var(--blue-50); }
.ec-demande { background: #f7f9fd; }
.ec-piece, .ec-qr, .ec-com { background: #f7f9fd; }
.ec-apercu { background: #f7f9fd; }
.ec-vis-cadre { background: #f7f9fd; }
.ec-vis-outils { border-bottom: 0; background: #fff; }
.ec-commentaires { box-shadow: 0 10px 30px rgba(16, 38, 88, .14); }


/* ── SANS OMBRES (demande du 25.09.2026 : « et les ombres ») ───────────────
   Plus aucune ombre, nulle part. Le focus clavier passe par un contour
   (outline) pour rester visible. */
*, *::before, *::after { box-shadow: none !important; }
.ec-saisie:focus-within, .ec-recherche:focus-within { outline: 2px solid rgba(11, 77, 255, .35); outline-offset: 0; }

/* Éléments qui n'étaient dessinés que par une ombre : redessinés autrement */
.ec-etape.cours .pt { background: #fff; border: 3px solid var(--blue); }
.ec-cellule.auj { border-left: 2px solid var(--blue); }
.ec-version.actuelle .pt { background: var(--blue); outline: 2px solid var(--blue-50); outline-offset: 2px; }
.ec-carte-photo.actif { outline: 2px solid var(--blue); outline-offset: -2px; background: #fff; }


/* ============================================================================
   MENU LATÉRAL EN ICÔNES (48px) + LOGO DANS LA BARRE DU HAUT (25.09.2026)
   Les libellés sont masqués visuellement mais restent lus par les lecteurs
   d'écran, et s'affichent au survol (attribut title).
   ============================================================================ */
:root { --ec-rail: 48px; }
.ec-coque { grid-template-columns: 48px minmax(0, 1fr); }
.ec-rail { width: 48px; padding: 62px 6px 12px; align-items: center; }
.ec-nav { gap: 4px; justify-items: center; }
.ec-nav a { position: relative; justify-content: center; width: 36px; height: 36px; padding: 0; gap: 0; }
.ec-nav a > span:not(.ec-badge), .ec-rail-bas a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ec-nav .ec-badge { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; font-size: 9.5px; margin: 0; }
.ec-rail-bas { display: grid; justify-items: center; gap: 4px; padding: 0; }
.ec-rail-bas a { justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius); }
.ec-rail-bas a:hover { background: var(--survol); }
.ec-rail-bas a:first-child { border-top: 0; }

/* Logo dans la barre du haut, à gauche de l'onglet de page */
.ec-barre-haut { padding-left: 16px; }
.ec-marque-haut { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }
.ec-marque-haut img { width: 26px; height: 26px; object-fit: contain; }
.ec-marque-haut strong { font-size: 20px; font-weight: 800; letter-spacing: -.8px; color: var(--navy); }

@media (max-width: 900px) {
  .ec-coque { grid-template-columns: minmax(0, 1fr); }
  .ec-rail { width: auto; padding: 8px 12px; }
  .ec-nav { display: flex; }
}


/* ── Menu latéral en verre, comme celui d'Orbisia (25.09.2026) ──────────────
   Les couches du « Moderne » de l'application : teinte blanche translucide
   plus dense en haut, flou fort qui SATURE le fond, liseré lumineux sur la
   tranche. Sous le verre, l'image de fond fixée à l'écran : ses courbes
   bleues et violettes transparaissent, comme dans Orbisia. Sans ombre. */
.ec-rail {
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .40) 100%),
    url(img/fond.webp);
  background-size: auto, cover;
  background-position: 0 0, right bottom;
  background-repeat: no-repeat;
  background-attachment: scroll, fixed;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, .75);
  outline: 1px solid rgba(20, 48, 105, .07);
}
.ec-nav a:hover, .ec-rail-bas a:hover { background: rgba(255, 255, 255, .6); }
.ec-nav a.actif { background: rgba(255, 255, 255, .85); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ec-rail { background-image: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .8)), url(img/fond.webp); }
}
@media (prefers-reduced-transparency: reduce) {
  .ec-rail { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* ── Menu latéral fixe à l'écran (25.09.2026) ───────────────────────────────
   Épinglé au bord gauche : il ne défile jamais avec la page. Le contenu
   reste dans la deuxième colonne de la grille. */
@media (min-width: 901px) {
  .ec-rail { position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; height: auto; }
  .ec-principal { grid-column: 2; }
}


/* ── Menu latéral bleu nuit (25.09.2026) ────────────────────────────────────
   Fond #071442, la couleur des raccourcis ronds et des barres d'onglets.
   Verre sombre : teinte bleu nuit très dense, le flou reste dessous.
   Icônes blanches adoucies ; page active en pastille bleue, comme l'onglet
   actif de la barre bleu nuit. */
.ec-rail {
  background-image:
    linear-gradient(180deg, rgba(7, 20, 66, .96) 0%, rgba(7, 20, 66, .92) 100%),
    url(img/fond.webp);
  border-right: 1px solid rgba(255, 255, 255, .08);
  outline: 0;
}
.ec-nav a, .ec-rail-bas a { color: #ffffffb8; }
.ec-nav a svg, .ec-rail-bas a svg { color: currentColor; }
.ec-nav a:hover, .ec-rail-bas a:hover { background: #ffffff17; color: #fff; }
.ec-nav a.actif { background: var(--blue); color: #fff; }
.ec-nav a.actif svg { color: #fff; fill: none; }
.ec-nav .ec-badge { outline: 2px solid #071442; }
.ec-nav a:focus-visible, .ec-rail-bas a:focus-visible { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 1px; }
@media (prefers-reduced-transparency: reduce) {
  .ec-rail { background: #071442; }
}


/* ── Bulles au survol du menu latéral (25.09.2026) ──────────────────────────
   Remplace l'infobulle native du navigateur : bulle bleu nuit avec une
   petite pointe, à droite de l'icône, au survol comme au clavier. */
.ec-rail [data-bulle] { position: relative; }
.ec-rail [data-bulle]::after,
.ec-rail [data-bulle]::before {
  position: absolute; top: 50%; pointer-events: none; opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
.ec-rail [data-bulle]::after {
  content: attr(data-bulle);
  left: calc(100% + 14px);
  transform: translate(-4px, -50%);
  padding: 7px 11px; border-radius: var(--radius);
  background: #0b1b4d; color: #fff;
  font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  z-index: 40;
}
.ec-rail [data-bulle]::before {
  content: "";
  left: calc(100% + 8px);
  transform: translate(-4px, -50%);
  border: 6px solid transparent; border-right-color: #0b1b4d; border-left: 0;
  z-index: 40;
}
.ec-rail [data-bulle]:hover::after, .ec-rail [data-bulle]:hover::before,
.ec-rail [data-bulle]:focus-visible::after, .ec-rail [data-bulle]:focus-visible::before {
  opacity: 1; transform: translate(0, -50%);
}
@media (prefers-reduced-motion: reduce) { .ec-rail [data-bulle]::after, .ec-rail [data-bulle]::before { transition: none; } }
@media (max-width: 900px) { .ec-rail [data-bulle]::after, .ec-rail [data-bulle]::before { display: none; } }


/* ── Documents joints à la demande d'équipe (25.09.2026) ───────────────────── */
.ec-pieces { margin-top: 14px; }
.ec-depot { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px dashed #c9d6ee !important; border-radius: var(--radius); background: #f7f9fd; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.ec-depot:hover, .ec-depot.survol { background: var(--blue-50); border-color: var(--blue) !important; }
.ec-depot input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ec-depot:focus-within { outline: 2px solid rgba(11, 77, 255, .35); }
.ec-depot-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--blue); }
.ec-depot b { color: var(--blue); font-weight: 600; }
.ec-depot > span:last-child { font-size: 13px; color: var(--navy); }
.ec-depot small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.ec-pieces-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ec-pieces-liste li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 28px; gap: 10px; align-items: center; padding: 8px 8px 8px 10px; border-radius: var(--radius); background: #f1f5fb; }
.ec-pieces-liste strong { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-pieces-liste small { font-size: 11.5px; color: var(--muted); }
.ec-pieces-liste button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--muted); }
.ec-pieces-liste button:hover { background: #fdecef; color: #d0344c; }
/* L'animation d'ouverture ne rejoue plus à chaque ajout de fichier */
.ec-voile, .ec-voile .ec-modale { animation: none; }
.ec-voile.anime { animation: ec-voile .18s ease-out; }
.ec-voile.anime .ec-modale { animation: ec-modale .22s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .ec-voile.anime, .ec-voile.anime .ec-modale { animation: none; } }

.ec-depot, .ec-depot:hover, .ec-depot.survol { border: 0 !important; }
.ec-depot.survol { outline: 2px dashed rgba(11, 77, 255, .45); outline-offset: -2px; }


/* ── Pastilles de notification sur les raccourcis ronds (25.09.2026) ───────── */
.ec-rac span { position: relative; }
.ec-rac .ec-badge { position: absolute; top: -4px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; outline: 2px solid #fff; }

.ec-rac span.ec-badge { display: inline-grid; place-items: center; width: auto; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #e5484d; color: #fff; transform: none; transition: none; }
.ec-rac:hover span.ec-badge { transform: none; }


/* ── Fiche chantier : carte cliquable, onglets propres au chantier (25.09.2026) ── */
.ec-chantier[data-action] { cursor: pointer; transition: background .15s ease; }
.ec-chantier[data-action]:hover { background: #fbfcff; }
.ec-chantier[data-action]:hover h3 { color: var(--blue); }
.ec-chantier[data-action]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ec-onglet-bloc { padding: 20px 22px; }
.ec-vide { display: grid; justify-items: center; gap: 6px; padding: 34px 16px; text-align: center; color: var(--muted); }
.ec-vide svg { color: #9fb0d0; }
.ec-vide strong { font-size: 14px; color: var(--navy); }
.ec-vide span { font-size: 12.5px; }
.ec-frise { position: relative; margin: 8px 0 0; padding: 0; list-style: none; }
.ec-frise li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.ec-frise li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: #e3e9f4; }
.ec-frise li:last-child::before { display: none; }
.ec-frise li.fait::before { background: var(--blue); }
.ec-frise .pt { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #c5ccd8; color: #fff; }
.ec-frise li.fait .pt { background: var(--blue); }
.ec-frise li.cours .pt { background: #fff; border: 3px solid var(--blue); }
.ec-frise strong { display: block; font-size: 13.5px; font-weight: 700; }
.ec-frise small { font-size: 12px; color: var(--muted); }
.ec-frise li.cours small { color: var(--blue); font-weight: 600; }
.ec-frise p { margin: 4px 0 0; font-size: 12.5px; color: #3b4868; }
.ec-metas-colonne { display: grid; gap: 16px; }
.ec-metas-colonne > .ec-meta { padding: 0 !important; border: 0 !important; }
.ec-mur-fiche { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ec-plans-fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ec-plan-fiche { display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 14px; border-radius: var(--radius); background: #f5f8fd; color: var(--navy); }
.ec-plan-fiche:hover { background: var(--blue-50); }
.ec-plan-fiche strong { display: block; font-size: 13px; font-weight: 600; }
.ec-plan-fiche .ec-statut { margin-top: 6px; background: #eef2f9; color: #64769c; }
.ec-plan-fiche .ec-statut.st-cours { background: #e6f7ee; color: #0f8a4d; }
.ec-conv-fiche { border-radius: var(--radius); background: #f5f8fd; }
.ec-detail .ec-demande { margin-bottom: 8px; }


/* ── Fiche chantier : colonne de droite alignée entre le haut et le bas ─────
   La rangée du bas a trois colonnes (1,05 / 0,85 / 1 fr, 16px d'écart).
   La colonne de droite du haut prend exactement la largeur de la troisième :
   (largeur − 2 écarts) ÷ 2,9. */
@media (min-width: 1281px) {
  .ec-detail-bas { grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr) minmax(0, 1fr); gap: 16px; }
  .ec-detail { grid-template-columns: minmax(0, 1fr) calc((100% - 32px) / 2.9); gap: 16px; }
}


/* ── Fiche chantier : la barre d'onglets s'aligne sur les cartes ────────────
   Même bord gauche et même bord droit que les cartes du dessous (plus de
   débord pleine largeur). Toujours sans arrondi. */
.ec-onglets.ec-carte { margin: 0 0 16px; padding: 8px; border-radius: 0; }
@media (max-width: 900px) { .ec-onglets.ec-carte { margin: 0 0 16px; padding: 8px; } }

/* Barre d'onglets de la fiche : léger arrondi, le même que les cartes (8px). */
.ec-onglets.ec-carte { border-radius: var(--radius); }

/* Documents sans bande de chiffres : le tableau occupe toute la colonne. */
.ec-plein .ec-docs-gauche { grid-template-rows: minmax(0, 1fr); }


/* ============================================================================
   V4 — ÉCRANS BRANCHÉS SUR L'API (25.09.2026)
   ============================================================================ */
.ec-chargement { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50vh; color: var(--muted); font-size: 13.5px; }
.ec-chargement span { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--blue-50); border-top-color: var(--blue); animation: ec-tourne .8s linear infinite; }
@keyframes ec-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ec-chargement span { animation: none; } }
.ec-erreur { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius); background: #fdecef; color: #b4233a; font-size: 13px; font-weight: 600; text-align: left; }
.ec-erreur[hidden] { display: none; }
.ec-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.ec-photo-vide { display: grid; place-items: center; background: linear-gradient(135deg, #eef3fb, #e3eaf6); color: #9fb0d0; }
.ec-projet-vedette[data-action] { cursor: pointer; }

/* Vrais champs de saisie (fenêtres, filtres) */
select.ec-champ-sel, input.ec-date, textarea.ec-textarea { width: 100%; font: inherit; font-size: 13px; font-weight: 500; color: var(--navy); border: 0; outline: 0; }
select.ec-champ-sel, input.ec-date { height: 40px; padding: 0 12px; border-radius: var(--radius); background: #f1f5fb; }
textarea.ec-textarea { min-height: 76px; padding: 10px 12px; border-radius: var(--radius); background: #f1f5fb; resize: vertical; }
select.ec-champ-sel:focus, input.ec-date:focus, textarea.ec-textarea:focus { box-shadow: none !important; outline: 2px solid rgba(11, 77, 255, .35); }
.ec-modale label { display: block; }
.ec-modale label + label, .ec-modale .ec-dates + label { margin-top: 10px; }
.ec-modale .ec-dates { gap: 12px; margin-bottom: 10px; }
.ec-modale .ec-champ-sel { margin-bottom: 12px; }
.ec-modale-etroite { width: min(560px, 100%) !important; }
.ec-select select { border: 0; outline: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--navy); max-width: 260px; }

/* Vue d'ensemble : jauge d'avancement moyen (pas de courbe inventée) */
.ec-perf-jauge { height: 10px; margin: 18px 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.ec-perf-jauge i { display: block; height: 100%; border-radius: 6px; background: #fff; }

/* Planning */
.ec-cellule { cursor: pointer; }
.ec-cellule:hover { background: #fafcff; }
.ec-cellule.choisi { background: var(--blue-50); }
.ec-evt-plus { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.ec-demande { cursor: pointer; }
.ec-jour-bloc { padding: 10px 0; border-top: 1px solid var(--filet); }
.ec-jour-bloc:first-of-type { border-top: 0; padding-top: 0; }
.ec-jour-bloc .ec-jour-equipe .ec-statut { margin-left: auto; }
.ec-jour-bloc .ec-btn-gris { margin-top: 6px; }

/* Plans : PDF dans la visionneuse */
.ec-plan-zone iframe { display: block; width: 100%; height: 100%; min-height: 480px; border: 0; background: #fff; }
.ec-coms { display: grid; gap: 8px; }
.ec-versions .ec-com-saisie { margin-top: 10px; }

/* Messages : initiales à la place des portraits */
.ec-avatar-ini.petit { width: 40px; height: 40px; font-size: 12px; flex: none; }
.ec-conv { grid-template-columns: 40px minmax(0, 1fr) auto; }
.ec-bulle-ligne { grid-template-columns: 40px minmax(0, 1fr); }
.ec-bulle-ligne.moi { grid-template-columns: minmax(0, 1fr) 40px; }
.ec-composer .clip { display: grid; place-items: center; cursor: pointer; color: #3b4868; }
.ec-image-msg { display: block; width: 260px; height: auto; margin-top: 8px; }
.ec-image-msg img { height: auto; max-height: 200px; }
a.ec-piece { color: inherit; }

/* Menu latéral : 60px (25.09.2026) — icônes un peu plus grandes, pastilles recalées. */
:root { --ec-rail: 60px; }
.ec-coque { grid-template-columns: 60px minmax(0, 1fr); }
.ec-rail { width: 60px; padding-left: 8px; padding-right: 8px; }
.ec-nav a, .ec-rail-bas a { width: 44px; height: 42px; }
.ec-nav a svg, .ec-rail-bas a svg { width: 21px; height: 21px; }
.ec-nav .ec-badge { top: 3px; right: 3px; }
@media (max-width: 900px) { .ec-coque { grid-template-columns: minmax(0, 1fr); } .ec-rail { width: auto; } }

/* Aucune ombre, même sur les éléments visés précisément (une règle plus
   précise l'emporterait sur `*` à priorité égale). */
.ec-carte, .ec-login-carte, .ec-carte-photo, .ec-modale, .ec-commentaires, .ec-rac span, .ec-avatar-ini, .ec-perf-carte, .ec-toast { box-shadow: none !important; }

/* Seule exception à « aucune ombre » : le bandeau bleu-violet de la vue
   d'ensemble, demandé le 25.09.2026. Ombre teintée de sa propre couleur,
   pour qu'il flotte sans salir le fond. */
.ec-contenu .ec-perf.ec-perf { box-shadow: 0 18px 40px -12px rgba(52, 62, 240, .45), 0 6px 14px -6px rgba(110, 53, 240, .30) !important; }


/* ════════════════════════════════════════════════════════════════════════════
   « DEMANDER UNE ÉQUIPE » EN 4 ÉTAPES (25.09.2026)
   Maquettes validées : Équipe et adresse · Planification · Documents ·
   Validation. Le client saisit l'adresse de l'intervention au lieu de choisir
   un chantier. Les contours passent par `border` (les ombres sont coupées
   partout dans l'espace client).
   ════════════════════════════════════════════════════════════════════════════ */
.ec-voile .ec-modale.ec-modale-etapes { width: min(760px, 100%); padding: 26px 28px 22px; }
.ec-voile .ec-modale-etapes h3 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 20px; }
.ec-modale-etapes h4 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: var(--navy); }
.ec-modale-etapes .ec-etape-intro { margin: 4px 0 14px; font-size: 13px; color: var(--muted); }

/* Frise des étapes */
.ec-etapes-dem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 22px; padding: 0; list-style: none; }
.ec-etapes-dem li { position: relative; display: grid; justify-items: center; text-align: center; }
.ec-etapes-dem li::before { content: ""; position: absolute; top: 16px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 2px; background: #dfe7f4; }
.ec-etapes-dem li:first-child::before { display: none; }
.ec-etapes-dem li.fait::before, .ec-etapes-dem li.cours::before { background: var(--blue); }
.ec-etapes-dem li > button, .ec-etapes-dem li { font: inherit; }
.ec-etapes-dem li > button { display: grid; justify-items: center; gap: 0; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.ec-etapes-dem .pt { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #d3ddef; background: #fff; color: var(--navy); font-size: 13.5px; font-weight: 700; position: relative; z-index: 1; }
.ec-etapes-dem .lib { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ec-etapes-dem li.fait .pt, .ec-etapes-dem li.cours .pt { background: var(--blue); border-color: var(--blue); color: #fff; }
.ec-etapes-dem li.fait .lib, .ec-etapes-dem li.cours .lib { color: var(--blue); }
.ec-etapes-dem li > button:hover .lib { text-decoration: underline; }
.ec-etapes-dem li > button:focus-visible { outline: 2px solid rgba(11, 77, 255, .4); outline-offset: 4px; border-radius: 8px; }

/* Étape 1 : type d'équipe et adresse */
.ec-modale-etapes .ec-titre-etape { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--navy); }
.ec-modale-etapes .ec-types { margin-bottom: 20px; }
.ec-modale-etapes .ec-type.actif { outline: 1.5px solid var(--blue); outline-offset: -1.5px; }
.ec-adresse-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ec-adresse-grille .large { grid-column: 1 / -1; }
.ec-modale label.ec-flottant { display: grid; gap: 2px; padding: 9px 14px 10px; border: 1px solid #d9e2f1; border-radius: 10px; background: #fff; cursor: text; transition: border-color .15s; }
.ec-modale label.ec-flottant + label.ec-flottant { margin-top: 0; }
.ec-flottant > span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ec-flottant input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--navy); }
.ec-flottant input::placeholder { color: #a3b0c9; font-weight: 500; }
.ec-flottant:focus-within { border-color: var(--blue); }
.ec-flottant.en-erreur { border-color: #d0344c; }
.ec-champ-msg { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: #b4233a; }
.ec-modale label.en-erreur .ec-date { outline: 1.5px solid #d0344c; }

/* Étape 2 : planification */
.ec-titre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.ec-puce { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; padding: 5px 12px; border-radius: 999px; background: var(--blue-50); color: var(--blue); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-modale-etapes .ec-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ec-modale-etapes .ec-dates .ec-champ-sel { margin-bottom: 0; }

/* Étape 3 : documents */
.ec-depot.ec-depot-grand { flex-direction: column; justify-content: center; text-align: center; gap: 10px; padding: 22px 16px; border: 1.5px dashed #c9d6ee !important; background: #f7f9fd; }
.ec-depot.ec-depot-grand.survol { border-color: var(--blue) !important; outline: 0; }
.ec-pieces-etape { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ec-pieces-etape li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 32px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #f3f6fb; }
.ec-pieces-etape strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-pieces-etape small { font-size: 11.5px; color: var(--muted); }
.ec-ajoute { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #e6f7ee; color: #0f8a4d; font-size: 12px; font-weight: 700; }
.ec-pieces-etape button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.ec-pieces-etape button:hover { background: #fdecef; color: #d0344c; }
.ec-lien { margin-top: 12px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Étape 4 : validation */
.ec-recap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ec-recap-col { display: grid; gap: 12px; }
.ec-recap-carte { padding: 14px 16px; border: 1px solid #e3e9f4; border-radius: 10px; background: #fff; }
.ec-recap-carte header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ec-recap-carte h5 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--navy); }
.ec-modifier { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 6px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--blue); cursor: pointer; }
.ec-modifier:hover { background: var(--blue-50); }
.ec-recap-carte dl { margin: 0; }
.ec-recap-ligne { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid #eef2f8; font-size: 13px; }
.ec-recap-ligne:first-child { border-top: 0; }
.ec-recap-ligne dt { color: var(--muted); }
.ec-recap-ligne dd { margin: 0; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.ec-recap-docs { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.ec-recap-docs li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: #f3f6fb; font-size: 13px; font-weight: 600; }
.ec-recap-docs li span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-recap-vide { margin: 4px 0 0; font-size: 13px; color: var(--muted); font-weight: 500; }
.ec-note-info { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--blue-50); color: var(--blue); font-size: 13px; font-weight: 600; }
.ec-note-info svg { flex: none; }

/* Pied : boutons */
.ec-modale-etapes .ec-modale-pied .ec-btn svg { order: 0; }
.ec-modale-etapes .ec-modale-pied button[type=submit]:not(:has(svg:first-child)) svg { margin-left: 2px; }

@media (max-width: 700px) {
  .ec-voile .ec-modale.ec-modale-etapes { padding: 20px 16px 16px; }
  .ec-etapes-dem .lib { font-size: 11px; }
  .ec-adresse-grille, .ec-recap, .ec-modale-etapes .ec-dates { grid-template-columns: minmax(0, 1fr); }
  .ec-pieces-etape li { grid-template-columns: 26px minmax(0, 1fr) 32px; }
  .ec-pieces-etape .ec-ajoute { display: none; }
}
/* Ajustements après contrôle visuel */
.ec-modale-etapes h4 { border: 0 !important; padding: 0 !important; }
.ec-modale-etapes .ec-dates { align-items: start; }
.ec-modale-etapes .ec-dates > label + label { margin-top: 0; }
.ec-modale-etapes .ec-dates + label { margin-top: 12px; }
.ec-depot.ec-depot-grand { align-items: center; }
.ec-depot.ec-depot-grand > span:last-child { text-align: center; }
.ec-modale label.ec-flottant:focus-within { border-color: var(--blue) !important; }
.ec-modale label.ec-flottant.en-erreur { border-color: #d0344c !important; }
.ec-depot.ec-depot-grand .ec-depot-ico { align-self: center; margin: 0 auto; }

/* ── Recherche d'adresse (swisstopo) : liste de suggestions ─────────────── */
.ec-modale label.ec-flottant { position: relative; }
.ec-suggestions { position: absolute; z-index: 5; top: calc(100% + 6px); left: -1px; right: -1px; max-height: 280px; overflow: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid #d9e2f1; border-radius: 10px; background: #fff; }
.ec-suggestions li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--navy); }
.ec-suggestions li svg { grid-row: span 2; color: var(--blue); }
.ec-suggestions li b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-suggestions li small { font-size: 12px; color: var(--muted); }
.ec-suggestions li:hover, .ec-suggestions li[aria-selected="true"] { background: var(--blue-50); }
.ec-suggestions li[aria-selected="true"] b { color: var(--blue); }
/* La liste déborde de la fenêtre si besoin, au lieu d'être coupée. */
.ec-voile .ec-modale.ec-modale-etapes:has(.ec-suggestions) { overflow: visible; }

/* ── Ouverture des fenêtres : la bascule 3D d'Orbisia (26.09.2026) ─────────
   « Toutes les modales doivent s'ouvrir avec l'effet 3D comme dans Orbisia » :
   même mouvement que l'application (translate3d(0,-48px,0) rotateX(-42deg)
   scale(.965) → repos, 1 s, cubic-bezier(.18,.89,.32,1.18), fondu .64 s,
   pivot en haut). Seulement à l'ouverture (`.anime`) : un nouveau rendu de
   la fenêtre (étape, pièce jointe) ne la refait pas basculer. */
@keyframes ec-modale-bascule { from { transform: translate3d(0, -48px, 0) rotateX(-42deg) scale(.965); } to { transform: none; } }
@keyframes ec-modale-fondu { from { opacity: 0; } to { opacity: 1; } }
.ec-voile { perspective: 1500px; perspective-origin: 50% 24%; }
.ec-voile .ec-modale { transform-origin: 50% 0%; backface-visibility: hidden; }
.ec-voile.anime { animation: ec-modale-fondu .2s ease both; }
.ec-voile.anime .ec-modale { animation: ec-modale-bascule 1s cubic-bezier(.18, .89, .32, 1.18) both, ec-modale-fondu .64s ease both; }
@media (prefers-reduced-motion: reduce) { .ec-voile.anime .ec-modale { animation: ec-modale-fondu .2s ease both; } }

/* ════════════════════════════════════════════════════════════════════════════
   REFONTE AU DESIGN D'ORBISIA (26.09.2026) — toutes les pages sauf la vue
   d'ensemble (`main.ec-oz`, posé par `coque()`). Maquettes validées
   (« parfait ») : page blanche, tuiles grises, « À surveiller » en carte
   blanche, colonne de droite en cartes grises, tableaux plats, petites
   capitales, dégradé sur la fin des titres, aucun trait de séparation.
   ════════════════════════════════════════════════════════════════════════════ */
body:has(.ec-oz) .ec-fond { display: none; }
body:has(.ec-oz) { background: #fff; }
#ec-app .ec-oz { background: #fff; container-type: inline-size; }
#ec-app .ec-oz .ec-contenu { padding: 26px 32px 40px; max-width: none; }   /* toute la largeur de l'écran (28.09.2026) */
#ec-app .ec-oz .ec-entete { align-items: flex-start; margin-bottom: 20px; }
#ec-app .ec-oz .ec-entete h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
#ec-app .ec-oz .ec-entete p { margin-top: 4px; }
#ec-app .ec-oz .ec-deg { background: linear-gradient(110deg, #0878f9, #143ff4 44%, #5d35f1 72%, #973dec); -webkit-background-clip: text; background-clip: text; color: transparent; }
#ec-app .ec-oz .ec-btn-haut { height: 40px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 700; }
#ec-app .ec-oz .ec-btn-haut svg { width: 16px; height: 16px; }

/* Tuiles */
#ec-app .ec-oz .ec-tuiles { display: grid; gap: 12px; margin-bottom: 24px; }
#ec-app .ec-oz .ec-tuile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border-radius: 8px; background: #f8f9fb; }
#ec-app .ec-oz .ec-tuile .ic { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--blue); }
#ec-app .ec-oz .ec-tuile .ic svg { width: 18px; height: 18px; }
#ec-app .ec-oz .ec-tuile b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ec-app .ec-oz .ec-tuile small { display: block; color: var(--muted); font-size: 11.5px; }
#ec-app .ec-oz .ec-tuile.ton-vert .ic { color: #0f8a4d; }
#ec-app .ec-oz .ec-tuile.ton-orange .ic { color: #c2660c; }
#ec-app .ec-oz .ec-tuile.ton-rouge .ic, #ec-app .ec-oz .ec-tuile.ton-rouge b { color: #c8321f; }

/* Grille : contenu + colonne de 380 px */
#ec-app .ec-oz .ec-oz-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
#ec-app .ec-oz .ec-oz-col { display: grid; gap: 20px; align-content: start; min-width: 0; }
#ec-app .ec-oz .ec-bloc > h2, #ec-app .ec-oz .ec-surv > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
#ec-app .ec-oz :is(.ec-bloc, .ec-surv) > h2 .n { padding: 1px 8px; border-radius: 7px; background: var(--blue-50); color: var(--blue); font-size: 11.5px; font-weight: 800; }
#ec-app .ec-oz .ec-bloc.gris { padding: 18px 20px; border-radius: 8px; background: #f8f9fb; }
#ec-app .ec-oz .ec-surv { padding: 18px 20px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 12px 30px rgba(20, 48, 105, .08); }
#ec-app .ec-oz .ec-surv ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#ec-app .ec-oz .ec-surv li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #f8f9fb; }
#ec-app .ec-oz .ec-surv .ic2 { flex: none; align-self: flex-start; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
#ec-app .ec-oz .ec-surv .t-r { background: #fdeeec; color: #c8321f; }
#ec-app .ec-oz .ec-surv .t-o { background: #fdf1e3; color: #c2660c; }
#ec-app .ec-oz .ec-surv .t-b { background: var(--blue-50); color: var(--blue); }
#ec-app .ec-oz .ec-surv .tx { min-width: 0; flex: 1; }
#ec-app .ec-oz .ec-surv b { display: block; font-size: 13px; }
#ec-app .ec-oz .ec-surv small { display: block; color: var(--muted); font-size: 12px; }
#ec-app .ec-oz .ec-btn-s { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--navy); font: inherit; font-size: 11.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
#ec-app .ec-oz .ec-btn-s:hover { border-color: #c9d7ee; background: var(--blue-50); }
#ec-app .ec-oz .ec-lignes { display: grid; gap: 8px; }
#ec-app .ec-oz .ec-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #fff; font-size: 12.5px; }
#ec-app .ec-oz .ec-ligne > svg { color: var(--blue); }
#ec-app .ec-oz .ec-ligne > span:not(.ec-statut) { min-width: 0; flex: 1; }
#ec-app .ec-oz .ec-ligne b { display: block; font-size: 13px; }
#ec-app .ec-oz .ec-ligne small { display: block; color: var(--muted); font-size: 11.5px; }
#ec-app .ec-oz .ec-muet { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }
#ec-app .ec-oz .ec-bloc.gris .ec-activite { gap: 6px; }
#ec-app .ec-oz .ec-bloc.gris .ec-activite li { padding: 10px 12px; border: 0; border-radius: 8px; background: #fff; }
#ec-app .ec-oz .ec-bloc.gris .ec-vide { padding: 16px 8px; }

/* Outils : recherche grise + filtres segmentés avec compteurs */
#ec-app .ec-oz .ec-outils { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#ec-app .ec-oz .ec-outils .ec-recherche { flex: 0 1 340px; width: auto; height: 36px; border: 0 !important; border-radius: 8px; background: #f8f9fb !important; box-shadow: none; }
#ec-app .ec-oz .ec-outils .ec-recherche svg { width: 16px; height: 16px; }
#ec-app .ec-oz .ec-seg { display: inline-flex; gap: 2px; max-width: 100%; overflow-x: auto; padding: 3px; border-radius: 9px; background: #f8f9fb; }
#ec-app .ec-oz .ec-seg button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
#ec-app .ec-oz .ec-seg button.actif { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(20, 48, 105, .08); }
#ec-app .ec-oz .ec-seg button b { font-size: 10.5px; color: var(--muted); }

/* Mes chantiers : cartes grises en ligne */
#ec-app .ec-oz .ec-chantiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#ec-app .ec-oz .ec-ch-oz { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px; border: 0; border-radius: 8px; background: #f8f9fb; box-shadow: none; }
#ec-app .ec-oz .ec-ch-oz:hover { background: #f1f4f9; }
#ec-app .ec-oz .ec-ch-oz > .ec-photo { width: 150px; height: 104px; margin: 0; border-radius: 8px; overflow: hidden; }
#ec-app .ec-oz .ec-ch-oz > .ec-photo img { width: 100%; height: 100%; object-fit: cover; }
#ec-app .ec-oz .ec-ch-corps { min-width: 0; }
#ec-app .ec-oz .ec-ch-corps h3 { margin: 0; font-size: 14.5px; font-weight: 800; }
#ec-app .ec-oz .ec-ch-l2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 10px; color: var(--muted); font-size: 12px; }
#ec-app .ec-oz .ec-ch-l2 > span:not(.ec-statut) { display: inline-flex; align-items: center; gap: 4px; }
#ec-app .ec-oz .ec-ch-l2 svg { width: 13px; height: 13px; }
#ec-app .ec-oz .ec-ch-dates { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; color: var(--muted); font-size: 12px; }
#ec-app .ec-oz .ec-ch-dates b { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
#ec-app .ec-oz .ec-ch-oz .ec-voir { grid-column: 3; grid-row: 1; align-self: center; margin: 0; white-space: nowrap; font-size: 12.5px; font-weight: 700; }
#ec-app .ec-oz .ec-ch-oz .ec-voir svg { width: 14px; height: 14px; }
#ec-app .ec-oz .ec-barre-ligne { gap: 10px; }
#ec-app .ec-oz .ec-barre-ligne b { min-width: 40px; text-align: right; font-size: 12.5px; }
#ec-app .ec-oz .ec-statut { border-radius: 999px; font-size: 11.5px; font-weight: 700; }

/* Tableaux plats */
#ec-app .ec-oz .ec-table-cadre { overflow-x: auto; }
#ec-app .ec-oz .ec-table-oz { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
#ec-app .ec-oz .ec-table-oz th { padding: 8px 10px; border: 0 !important; background: none; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; }
#ec-app .ec-oz .ec-table-oz td { padding: 12px 10px; border: 0 !important; background: none; font-variant-numeric: tabular-nums; }
#ec-app .ec-oz .ec-table-oz tbody tr { cursor: pointer; }
#ec-app .ec-oz .ec-table-oz tbody tr:hover td { background: #f8f9fb; }
#ec-app .ec-oz .ec-table-oz tr.actif td { background: var(--blue-50); }
#ec-app .ec-oz .ec-table-oz tr.actif td:first-child { box-shadow: inset 3px 0 0 var(--blue); border-radius: 8px 0 0 8px; }
#ec-app .ec-oz .ec-table-oz tr.actif td:last-child { border-radius: 0 8px 8px 0; }
#ec-app .ec-oz .ec-table-oz :is(th, td).mt { text-align: right; }
#ec-app .ec-oz .ec-table-oz td.mt { font-weight: 800; white-space: nowrap; }
#ec-app .ec-oz .ec-table-oz td.rouge { color: #c8321f; font-weight: 700; }
#ec-app .ec-oz .ec-table-oz .ec-icone-btn { width: 30px; height: 30px; border-radius: 7px; background: #f8f9fb !important; }
#ec-app .ec-oz .ec-table-oz .ec-icone-btn svg { width: 15px; height: 15px; }

/* Factures : détail en carte grise */
#ec-app .ec-oz .ec-fact-detail .ec-fact-num { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
#ec-app .ec-oz .ec-fact-detail .ec-fact-num strong { font-size: 16px; font-weight: 800; }
#ec-app .ec-oz .ec-fact-detail .ec-fact-num .ec-statut { margin-left: auto; }
#ec-app .ec-oz .ec-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
#ec-app .ec-oz .ec-champs > div { min-width: 0; padding: 10px 12px; border-radius: 8px; background: #fff; }
#ec-app .ec-oz .ec-champs > .large { grid-column: 1 / -1; }
#ec-app .ec-oz .ec-champs small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a99b8; }
#ec-app .ec-oz .ec-champs b { display: block; margin-top: 2px; font-size: 13px; overflow-wrap: anywhere; }
#ec-app .ec-oz .ec-champs .rouge b { color: #c8321f; }
#ec-app .ec-oz .ec-fact-detail .ec-prest { padding: 12px 14px; border: 0; border-radius: 8px; background: #fff; }
#ec-app .ec-oz .ec-fact-detail .ec-prest h4 { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a99b8; }
#ec-app .ec-oz .ec-fact-detail .ec-prest .l { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0 !important; font-size: 12.5px; }
#ec-app .ec-oz .ec-fact-detail .ec-prest .l span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
#ec-app .ec-oz .ec-fact-detail .ec-prest .l.sep { margin-top: 6px; }
#ec-app .ec-oz .ec-fact-detail .ec-total { margin: 8px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 15px; font-weight: 800; }
#ec-app .ec-oz .ec-fact-detail .ec-qr { margin-top: 10px; padding: 12px; border: 0; border-radius: 8px; background: #fff; }
#ec-app .ec-oz .ec-fact-detail .ec-deux-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
#ec-app .ec-oz .ec-fact-detail .ec-deux-btns a { height: 38px; border-radius: 9px; font-size: 12.5px; }
#ec-app .ec-oz .ec-fact-detail .ec-deux-btns .ec-btn-contour { background: #fff !important; box-shadow: inset 0 0 0 1px var(--border); }

@container (max-width: 1080px) {
  #ec-app .ec-oz .ec-oz-grille { grid-template-columns: minmax(0, 1fr); }
  #ec-app .ec-oz .ec-oz-droite { order: -1; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
}
@container (max-width: 820px) {
  #ec-app .ec-oz .ec-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #ec-app .ec-oz .ec-ch-oz { grid-template-columns: 110px minmax(0, 1fr); }
  #ec-app .ec-oz .ec-ch-oz > .ec-photo { width: 110px; height: 84px; }
  #ec-app .ec-oz .ec-ch-oz .ec-voir { grid-column: 2; grid-row: auto; justify-self: start; }
}
@container (max-width: 520px) {
  #ec-app .ec-oz .ec-contenu { padding: 18px 16px 30px; }
  #ec-app .ec-oz .ec-tuiles { grid-template-columns: minmax(0, 1fr) !important; }
  #ec-app .ec-oz .ec-ch-oz { grid-template-columns: minmax(0, 1fr); }
  #ec-app .ec-oz .ec-ch-oz > .ec-photo { width: 100%; height: 140px; }
  #ec-app .ec-oz .ec-ch-oz .ec-voir { grid-column: auto; grid-row: auto; }
}
/* Correctifs : la feuille retire toutes les ombres (`* { box-shadow: none !important }`) ;
   la carte « À surveiller » et l'onglet actif gardent la leur, comme dans Orbisia. */
#ec-app .ec-oz .ec-surv { box-shadow: 0 0 0 1px var(--border), 0 12px 30px rgba(20, 48, 105, .08) !important; }
#ec-app .ec-oz .ec-seg button.actif { box-shadow: 0 1px 2px rgba(20, 48, 105, .1) !important; }
#ec-app .ec-oz .ec-table-oz tr.actif td:first-child { box-shadow: inset 3px 0 0 var(--blue) !important; }
#ec-app .ec-oz .ec-tuile[class*="ton-"] { background: #f8f9fb; color: inherit; }
#ec-app .ec-oz .ec-tuile:not(.ton-rouge) b { color: var(--navy); }

/* ── Autres pages (Planning, Photos, Plans, Documents, Messages, fiche) ────
   Contenu principal à plat sur fond blanc ; panneaux de droite en cartes
   grises (#f8f9fb) aux blocs intérieurs blancs ; aucun trait. */
#ec-app .ec-oz .ec-carte { border: 0 !important; border-radius: 8px; }
#ec-app .ec-oz :is(.ec-planning-droite > .ec-carte, .ec-doc-panneau, .ec-panneau, .ec-plans-liste, .ec-convs, .ec-info,
  .ec-detail > .ec-carte + .ec-carte, .ec-detail-bas > .ec-carte) { padding: 18px 20px; background: #f8f9fb !important; }
#ec-app .ec-oz :is(.ec-calendrier, .ec-docs-table, .ec-visionneuse, .ec-fil, .ec-detail > .ec-carte:first-child, .ec-onglet-bloc) { background: #fff !important; }
#ec-app .ec-oz :is(.ec-docs-table, .ec-detail > .ec-carte:first-child, .ec-onglet-bloc) { padding-left: 0; padding-right: 0; }
#ec-app .ec-oz :is(.ec-metas > *, .ec-metas, .ec-docs-recents li, .ec-activite li, .ec-pagination, .ec-sous-titre, .ec-histo-tete, .ec-dl dt, .ec-dl dd,
  .ec-intervention-tete, .ec-intervention .ec-metas, .ec-fil-tete, .ec-composer, .ec-conv, .ec-mini-onglets, .ec-cal-tete, .ec-vis-tete,
  .ec-info-ligne, .ec-jour-bloc, .ec-jour-ligne, .ec-demande, .ec-version, .ec-versions, .ec-com, .ec-histo li, .ec-adresse, .ec-panneau .actions, .ec-panneau .ec-auteur) { border: 0 !important; }
#ec-app .ec-oz :is(.ec-metas > *, .ec-sous-titre)::before, #ec-app .ec-oz :is(.ec-metas > *, .ec-sous-titre)::after { display: none; }
#ec-app .ec-oz .ec-carte-tete h2, #ec-app .ec-oz .ec-plans-liste > h2, #ec-app .ec-oz .ec-convs .tete h2, #ec-app .ec-oz .ec-doc-panneau .tete h3,
#ec-app .ec-oz .ec-versions h3, #ec-app .ec-oz .ec-jour-detail h3 { font-size: 15px !important; font-weight: 800 !important; letter-spacing: -.01em; }
#ec-app .ec-oz .ec-carte-tete .ec-tete-ico { display: none; }
#ec-app .ec-oz .ec-filtres { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
#ec-app .ec-oz .ec-filtres :is(.ec-select, .ec-recherche) { height: 36px; border: 0 !important; border-radius: 8px; background: #f8f9fb !important; font-size: 12.5px; }
#ec-app .ec-oz .ec-filtres :is(.ec-select, .ec-recherche) svg { width: 16px; height: 16px; }

/* Blocs blancs dans les cartes grises */
#ec-app .ec-oz :is(.ec-planning-droite, .ec-doc-panneau, .ec-convs, .ec-info, .ec-detail, .ec-detail-bas, .ec-plans-liste) :is(.ec-demande, .ec-jour-bloc, .ec-conv, .ec-intervention, .ec-plan-item, .ec-activite li, .ec-docs-recents li, .ec-dl) { border: 0 !important; border-radius: 8px; background: #fff; }
#ec-app .ec-oz :is(.ec-demande, .ec-conv, .ec-plan-item) + :is(.ec-demande, .ec-conv, .ec-plan-item) { margin-top: 6px; }
#ec-app .ec-oz .ec-conv.actif, #ec-app .ec-oz .ec-plan-item.actif { background: var(--blue-50) !important; box-shadow: inset 3px 0 0 var(--blue) !important; }
#ec-app .ec-oz .ec-doc-panneau .ec-dl { padding: 10px 12px; }
#ec-app .ec-oz .ec-docs-recents, #ec-app .ec-oz .ec-activite { display: grid; gap: 6px; }
#ec-app .ec-oz :is(.ec-docs-recents li, .ec-activite li) { padding: 10px 12px; }

/* Calendrier : cases en tuiles, sans quadrillage */
#ec-app .ec-oz .ec-calendrier { padding: 0; }
#ec-app .ec-oz .ec-cal-tete { padding: 0 0 12px; }
#ec-app .ec-oz .ec-cal-tete h2 { font-size: 17px; font-weight: 800; }
#ec-app .ec-oz .ec-grille-cal { gap: 4px; border: 0 !important; background: none; }
#ec-app .ec-oz .ec-grille-cal .jr { border: 0 !important; background: none; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--muted); }
#ec-app .ec-oz .ec-cellule { border: 0 !important; border-radius: 8px; background: #f8f9fb; box-shadow: none !important; }
#ec-app .ec-oz .ec-cellule.hors { background: #fbfcfd; }
#ec-app .ec-oz .ec-cellule:hover { background: #eef2f8; }
#ec-app .ec-oz .ec-cellule.choisi { background: var(--blue-50); box-shadow: inset 0 0 0 1.5px var(--blue) !important; }
#ec-app .ec-oz .ec-cellule.auj { border: 0 !important; }
#ec-app .ec-oz .ec-legende { border: 0 !important; padding: 12px 0 0; }

/* Photos */
#ec-app .ec-oz .ec-carte-photo { padding: 8px 8px 10px; border: 0 !important; border-radius: 8px; background: #f8f9fb; }
#ec-app .ec-oz .ec-carte-photo:hover { background: #eef2f8; }
#ec-app .ec-oz .ec-carte-photo.actif { background: var(--blue-50); outline: 1.5px solid var(--blue); outline-offset: -1.5px; }
#ec-app .ec-oz .ec-carte-photo .ec-photo { border-radius: 6px; overflow: hidden; }
#ec-app .ec-oz .ec-panneau .ec-photo { border-radius: 8px; overflow: hidden; }
#ec-app .ec-oz .ec-panneau .actions { display: grid; gap: 8px; }
#ec-app .ec-oz .ec-panneau .actions > * { height: 40px; border-radius: 9px; font-size: 13px; }
#ec-app .ec-oz .ec-panneau .ec-btn-contour { background: #fff !important; box-shadow: inset 0 0 0 1px var(--border) !important; }

/* Documents */
#ec-app .ec-oz .ec-table-oz thead, #ec-app .ec-oz .ec-table-oz thead tr { background: none !important; }
#ec-app .ec-oz .ec-docs-table .ec-pagination { margin: 0; padding: 12px 10px 0; background: none; }
#ec-app .ec-oz .ec-doc-panneau .ec-deux-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#ec-app .ec-oz :is(.ec-doc-panneau, .ec-info) :is(.ec-btn, .ec-btn-contour) { height: 40px; border-radius: 9px; font-size: 13px; }
#ec-app .ec-oz .ec-doc-panneau .ec-btn-contour { background: #fff !important; box-shadow: inset 0 0 0 1px var(--border) !important; }
#ec-app .ec-oz .ec-histo li { border-radius: 8px; background: #fff; }

/* Messages */
#ec-app .ec-oz .ec-mini-onglets { display: inline-flex; gap: 2px; margin: 12px 0 10px; padding: 3px; border-radius: 9px; background: #fff; }
#ec-app .ec-oz .ec-mini-onglets button { height: 30px; padding: 0 12px; border: 0 !important; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
#ec-app .ec-oz .ec-mini-onglets button.actif { background: var(--blue-50); color: var(--blue); }
#ec-app .ec-oz .ec-convs .tete .ec-btn { height: 36px; border-radius: 9px; font-size: 12.5px; }
#ec-app .ec-oz .ec-info .ec-info-ligne { border-radius: 8px; background: #fff; padding: 10px 12px; margin-top: 6px; }
#ec-app .ec-oz .ec-info .ec-photo { border-radius: 8px; overflow: hidden; }
#ec-app .ec-oz .ec-composer .champ input, #ec-app .ec-oz .ec-composer .champ { border-radius: 10px; }

/* Fiche chantier : intervention en blanc dans sa carte grise */
#ec-app .ec-oz .ec-detail .ec-intervention { background: #fff !important; }
#ec-app .ec-oz .ec-detail .ec-btn.large { height: 44px; border-radius: 9px; font-size: 13.5px; }

/* ── Connexion, version « métier » (26.09.2026) ─────────────────────────── */
body:has(.ec-lg) .ec-fond { display: none; }
body:has(.ec-lg) { background: #fff; }
#ec-app .ec-lg { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(440px, .85fr); min-height: 100vh; }
#ec-app .ec-lg-gauche { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 44px 56px; color: #fff; background: #071442; }
#ec-app .ec-lg-gauche::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px), linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; }
#ec-app .ec-lg-gauche::after { content: ""; position: absolute; right: -180px; bottom: -220px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, #0b4dff55, transparent 65%); pointer-events: none; }
#ec-app .ec-lg-gauche > * { position: relative; z-index: 1; }
#ec-app .ec-lg-ent { display: flex; align-items: center; gap: 12px; }
#ec-app .ec-lg-ent .log { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #071442; font-weight: 800; font-size: 13px; }
#ec-app .ec-lg-ent b { display: block; font-size: 16px; }
#ec-app .ec-lg-ent small { display: block; color: #ffffffa6; font-size: 12px; }
#ec-app .ec-lg-gauche h2 { margin: auto 0 12px; max-width: 520px; font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: #fff; }
#ec-app .ec-lg-gauche h2 span { background: linear-gradient(110deg, #5ea8ff, #8f7dff 60%, #c38bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#ec-app .ec-lg-intro { margin: 0; max-width: 470px; color: #ffffffc4; font-size: 14.5px; line-height: 1.55; }
#ec-app .ec-lg-suivi { margin-top: 34px; max-width: 560px; padding: 20px 22px; border-radius: 14px; background: #fff; color: var(--navy); box-shadow: 0 30px 70px rgba(0, 0, 0, .35) !important; }
#ec-app .ec-lg-suivi .t { display: flex; align-items: center; gap: 10px; }
#ec-app .ec-lg-suivi .t b { display: block; font-size: 14.5px; }
#ec-app .ec-lg-suivi .t small { display: block; color: var(--muted); font-size: 12px; }
#ec-app .ec-lg-suivi .t .ec-statut { margin-left: auto; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
#ec-app .ec-lg-etapes { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 18px 0 6px; }
#ec-app .ec-lg-etapes::before { content: ""; position: absolute; left: 10%; right: 10%; top: 10px; height: 2px; background: #e3e9f4; }
#ec-app .ec-lg-etapes::after { content: ""; position: absolute; left: 10%; width: 40%; top: 10px; height: 2px; background: var(--blue); }
#ec-app .ec-lg-etapes > div { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
#ec-app .ec-lg-etapes i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e3e9f4; color: #fff; }
#ec-app .ec-lg-etapes .f { color: var(--navy); }
#ec-app .ec-lg-etapes .f i { background: var(--blue); }
#ec-app .ec-lg-etapes .c { color: var(--blue); }
#ec-app .ec-lg-etapes .c i { background: #fff; box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 6px #fff, inset 0 0 0 12px var(--blue) !important; }
#ec-app .ec-lg-suivi .bas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
#ec-app .ec-lg-suivi .bas div { padding: 10px 12px; border-radius: 8px; background: #f8f9fb; font-size: 12px; }
#ec-app .ec-lg-suivi .bas small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a99b8; }
#ec-app .ec-lg-suivi .bas b { display: block; margin-top: 2px; font-size: 12.5px; }
#ec-app .ec-lg-pts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; max-width: 720px; }
#ec-app .ec-lg-pts span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: #ffffff14; color: #ffffffd9; font-size: 12.5px; font-weight: 600; }
#ec-app .ec-lg-pts svg { color: #8fb8ff; }
#ec-app .ec-lg-pied { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 28px; color: #ffffff99; font-size: 12.5px; }
#ec-app .ec-lg-droite { display: flex; flex-direction: column; justify-content: center; padding: 44px 64px; background: #fff; }
#ec-app .ec-lg-form { width: 100%; max-width: 400px; margin: 0 auto; }
#ec-app .ec-lg-lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
#ec-app .ec-lg-form h1 { margin: 8px 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); text-align: left; }
#ec-app .ec-lg-sous { margin: 0 0 26px; color: var(--muted); font-size: 14px; }
#ec-app .ec-lg-form .ec-champ { display: block; margin: 0 0 16px; }
#ec-app .ec-lg-form .ec-champ > span:first-child { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--navy); }
#ec-app .ec-lg-form .ec-saisie { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid var(--border) !important; border-radius: 10px; background: #fff !important; color: var(--muted); }
#ec-app .ec-lg-form .ec-saisie:focus-within { border-color: var(--blue) !important; outline: 0; box-shadow: 0 0 0 4px #0b4dff14 !important; }
#ec-app .ec-lg-form .ec-saisie input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--navy); }
#ec-app .ec-lg-form .ec-saisie button { display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; }
#ec-app .ec-lg-form .ec-login-options { display: flex; justify-content: flex-end; margin: -4px 0 20px; }
#ec-app .ec-lg-form .ec-lien { color: var(--blue); font-weight: 600; font-size: 13px; text-decoration: none; }
#ec-app .ec-lg-form .ec-btn-grand { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
#ec-app .ec-lg-form .ec-btn-grand:hover { background: #0d2166; }
#ec-app .ec-lg-form .ec-btn-grand:disabled { opacity: .6; cursor: wait; }
#ec-app .ec-lg-aide { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: #f8f9fb; color: var(--muted); font-size: 12.5px; }
#ec-app .ec-lg-aide .ic { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--blue); }
#ec-app .ec-lg-aide b { display: block; color: var(--navy); font-size: 13px; }
#ec-app .ec-lg-propulse { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 40px 0 0; color: #8a99b8; font-size: 12px; }
#ec-app .ec-lg-propulse img { width: 16px; height: 16px; }
#ec-app .ec-lg-propulse b { color: var(--muted); }
/* Liens légaux sous la connexion (28.09.2026). */
#ec-app .ec-lg-legal { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: 12px; color: #8a99b8; }
#ec-app .ec-lg-legal a { color: var(--muted); text-decoration: none; font-weight: 600; }
#ec-app .ec-lg-legal a:hover { color: var(--blue, #0b4dff); text-decoration: underline; }
#ec-app .ec-lg-form .ec-erreur { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; background: #fdeeec; color: #c8321f; font-size: 13px; }
@media (max-width: 980px) {
  #ec-app .ec-lg { grid-template-columns: minmax(0, 1fr); }
  #ec-app .ec-lg-gauche { padding: 28px 24px 32px; }
  #ec-app .ec-lg-gauche h2 { margin-top: 32px; font-size: 28px; }
  #ec-app .ec-lg-suivi, #ec-app .ec-lg-pts { display: none; }
  #ec-app .ec-lg-pied { margin-top: 18px; padding-top: 0; }
  #ec-app .ec-lg-droite { padding: 32px 20px 40px; }
}

/* ── Paramètres › Accès de l'équipe (28.09.2026) ───────────────────────── */
#ec-app .ec-oz .ec-eq-espace { height: 18px; }
#ec-app .ec-oz .ec-pil { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
#ec-app .ec-oz .ec-pil i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#ec-app .ec-oz .ec-pil.ok { color: #0f8a4d; background: #e6f7ee; }
#ec-app .ec-oz .ec-pil.att { color: #c2660c; background: #fdf1e3; }
#ec-app .ec-oz .ec-pil.neu { color: var(--muted); background: #eef2f8; }
#ec-app .ec-oz .ec-pil.bl { color: var(--blue); background: var(--blue-50); }
#ec-app .ec-oz .ec-pil.vi { color: #5d35f1; background: #f1ecff; }
#ec-app .ec-oz .ec-eq-grille { grid-template-columns: minmax(0, 1fr) 400px; }
#ec-app .ec-oz .ec-eq-table td { vertical-align: middle; }
#ec-app .ec-oz .ec-eq-table tbody tr { cursor: default; }
#ec-app .ec-oz .ec-eq-table tbody tr:nth-child(odd) td { background: #fbfcfd; }
#ec-app .ec-oz .ec-eq-qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
#ec-app .ec-oz .ec-eq-qui .ini { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); font-size: 11.5px; font-weight: 800; }
#ec-app .ec-oz .ec-eq-qui .ini.r-responsable { background: #f1ecff; color: #5d35f1; }
#ec-app .ec-oz .ec-eq-qui b { display: block; font-size: 13px; }
#ec-app .ec-oz .ec-eq-qui small { display: block; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
#ec-app .ec-oz .ec-eq-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#ec-app .ec-oz .ec-eq-chips span { padding: 2px 8px; border-radius: 6px; background: #eef2f8; font-size: 11px; font-weight: 600; white-space: nowrap; }
#ec-app .ec-oz .ec-eq-dr { display: flex; gap: 4px; }
#ec-app .ec-oz .ec-eq-dr span { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: #e6f7ee; color: #0f8a4d; }
#ec-app .ec-oz .ec-eq-dr span.non { background: #eef2f8; color: #b7c2d6; }
#ec-app .ec-oz .ec-eq-act { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
#ec-app .ec-oz .ec-eq-note { margin: 12px 0 0; }
#ec-app .ec-oz .ec-champs-profil { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Formulaire (carte grise) et fenêtre de modification */
#ec-app :is(.ec-eq-form, .ec-eq-modale) > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 800; }
#ec-app :is(.ec-eq-form, .ec-eq-modale) label { display: block; margin-bottom: 12px; }
#ec-app :is(.ec-eq-form, .ec-eq-modale) .ec-eq-lbl { display: block; margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a99b8; }
#ec-app .ec-eq-form input { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: #fff; font: inherit; font-size: 13px; color: var(--navy); outline: 0; }
#ec-app .ec-eq-form input:focus { box-shadow: 0 0 0 2px rgba(11, 77, 255, .35) !important; }
#ec-app .ec-eq-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#ec-app .ec-eq-err { display: block; margin: 4px 0 0; color: #c8321f; font-size: 11.5px; font-style: normal; }
#ec-app p.ec-eq-err { margin: -4px 0 12px; }
#ec-app .ec-eq-choix { display: grid; gap: 6px; margin-bottom: 12px; }
#ec-app .ec-eq-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: #fff; font: inherit; color: var(--navy); text-align: left; cursor: pointer; }
#ec-app .ec-eq-modale .ec-eq-opt, #ec-app .ec-eq-modale .ec-eq-bascule, #ec-app .ec-eq-modale .ec-eq-cases button { background: #f8f9fb; }
#ec-app .ec-eq-opt .r { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9d4e8 !important; }
#ec-app .ec-eq-opt.on { box-shadow: 0 0 0 1.5px var(--blue) !important; }
#ec-app .ec-eq-opt.on .r { box-shadow: inset 0 0 0 5px var(--blue) !important; }
#ec-app .ec-eq-opt b, #ec-app .ec-eq-bascule b { display: block; font-size: 12.5px; }
#ec-app .ec-eq-opt small, #ec-app .ec-eq-bascule small { display: block; color: var(--muted); font-size: 11.5px; }
#ec-app .ec-eq-cases { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px 26px; }
#ec-app .ec-eq-cases button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: #fff; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--navy); cursor: pointer; }
#ec-app .ec-eq-cases button small { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; }
#ec-app .ec-eq-cases button i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #c9d4e8 !important; }
#ec-app .ec-eq-cases button.on i { background: var(--blue); box-shadow: none !important; }
#ec-app .ec-eq-droits { display: grid; gap: 6px; margin-bottom: 14px; }
#ec-app .ec-eq-bascule { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: #fff; font: inherit; color: var(--navy); text-align: left; cursor: pointer; }
#ec-app .ec-eq-bascule .tg { position: relative; flex: none; margin-left: auto; width: 36px; height: 20px; border-radius: 999px; background: #d3dbe9; transition: background-color .18s; }
#ec-app .ec-eq-bascule .tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.25, 1, .5, 1); }
#ec-app .ec-eq-bascule .tg.on { background: var(--blue); }
#ec-app .ec-eq-bascule .tg.on::after { transform: translateX(16px); }
#ec-app .ec-eq-go { width: 100%; height: 40px; justify-content: center; border-radius: 9px; font-size: 13px; }
#ec-app .ec-eq-form .ec-muet { margin: 10px 0 0; }
#ec-app .ec-eq-lien { display: grid; gap: 4px; margin-bottom: 12px; padding: 10px 12px; border-radius: 9px; background: #fdf1e3; font-size: 12px; }
#ec-app .ec-eq-lien small { color: var(--muted); font-size: 11.5px; }
#ec-app .ec-eq-lien input { height: 34px; font-size: 11.5px; }
#ec-app .ec-eq-modale { width: min(560px, 100%) !important; }
#ec-app .ec-lg-regle { margin: -6px 0 18px; font-size: 12px; }
@container (max-width: 1080px) { #ec-app .ec-oz .ec-eq-grille { grid-template-columns: minmax(0, 1fr); } }
#ec-app .ec-oz .ec-ligne > .ec-pil { flex: none; }

/* ── Récapitulatif de la demande (étape 4) : plus de cartes qui se chevauchent
   (28.09.2026). Un nom de fichier ou un complément sans espace élargissait sa
   colonne au-delà de sa piste ; les cartes passaient l'une sur l'autre. */
.ec-recap > *, .ec-recap-col, .ec-recap-carte { min-width: 0; }
.ec-recap-carte { overflow: hidden; }
.ec-recap-carte header h5 { flex: 1; min-width: 0; }
.ec-recap-docs li { min-width: 0; }
.ec-recap-docs li span { flex: 1; }
.ec-recap-ligne dd, .ec-recap-ligne dt { min-width: 0; overflow-wrap: anywhere; }

/* ── Planning : la colonne de droite défile ; ses cartes ne touchent plus
   ses bords (la carte « À surveiller » perdait son ombre et collait en haut,
   à gauche et à droite). Même respiration tout autour qu'en bas. */
#ec-app .ec-oz .ec-planning-droite { padding: 14px; margin: -14px -14px 0; }

/* ── Détail d'une réservation ─────────────────────────────────────────── */
#ec-app .ec-evt[data-action], #ec-app .ec-demande[data-action] { cursor: pointer; }
#ec-app .ec-evt[data-action]:hover { filter: brightness(.97); }
.ec-voile .ec-dd-modale { width: min(760px, 100%); }
.ec-dd-tete { display: flex; align-items: center; gap: 12px; margin: 0 36px 16px 0; }
.ec-dd-tete h3 { margin: 0 !important; font-size: 17px; font-weight: 800; }
.ec-dd-tete small { display: block; color: var(--muted); font-size: 12.5px; }
.ec-dd-tete .ec-statut { margin-left: auto; border-radius: 999px; }
.ec-dd-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ec-dd-bloc { min-width: 0; padding: 14px 16px; border-radius: 10px; background: #f8f9fb; }
.ec-dd-bloc.ec-dd-large { margin-top: 10px; }
.ec-dd-bloc h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a99b8; }
.ec-dd-bloc h4 .n { padding: 0 7px; border-radius: 6px; background: var(--blue-50); color: var(--blue); letter-spacing: 0; }
.ec-dd-bloc dl { margin: 0; display: grid; gap: 6px; }
.ec-dd-l { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 10px; font-size: 13px; }
.ec-dd-l dt { color: var(--muted); }
.ec-dd-l dd { margin: 0; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.ec-dd-bloc p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--navy); overflow-wrap: anywhere; }
.ec-dd-qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ec-dd-qui .ini { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #f1ecff; color: #5d35f1; font-size: 12px; font-weight: 800; }
.ec-dd-qui div { display: grid; min-width: 0; }
.ec-dd-qui b { font-size: 13.5px; }
.ec-dd-qui a { color: var(--blue); font-size: 12.5px; text-decoration: none; overflow-wrap: anywhere; }
.ec-dd-docs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ec-dd-docs li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px 7px 10px; border-radius: 8px; background: #fff; }
.ec-dd-docs li > span { flex: 1; min-width: 0; }
.ec-dd-docs b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-dd-docs small { font-size: 11px; color: var(--muted); }
.ec-dd-docs .ec-icone-btn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; }
.ec-dd-motif { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: #fdf1e3; color: #8a4a08; font-size: 13px; }
.ec-dd-motif b { display: block; }
@media (max-width: 640px) { .ec-dd-grille { grid-template-columns: minmax(0, 1fr); } }

/* ── Fermeture des fenêtres : bascule 3D à l'envers (28.09.2026) ─────────── */
@keyframes ec-modale-rebascule { from { transform: none; opacity: 1; } to { transform: translate3d(0, -48px, 0) rotateX(-42deg) scale(.965); opacity: 0; } }
@keyframes ec-voile-sortie { from { opacity: 1; } to { opacity: 0; } }
.ec-voile.ferme { animation: ec-voile-sortie .34s ease .02s both; pointer-events: none; }
.ec-voile.ferme .ec-modale { animation: ec-modale-rebascule .36s cubic-bezier(.55, 0, .75, .4) both; }
@media (prefers-reduced-motion: reduce) { .ec-voile.ferme, .ec-voile.ferme .ec-modale { animation: none; } }

/* ── « Nouveau chef de chantier » en fenêtre ──────────────────────────────── */
#ec-app .ec-oz .ec-eq-grille.seule { grid-template-columns: minmax(0, 1fr); }
#ec-app .ec-eq-modale .ec-eq-deux { margin-top: 2px; }
#ec-app .ec-eq-modale input { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: #f8f9fb; font: inherit; font-size: 13px; color: var(--navy); outline: 0; }
#ec-app .ec-eq-modale input:focus { box-shadow: 0 0 0 2px rgba(11, 77, 255, .35) !important; background: #fff; }
#ec-app .ec-eq-modale h3 .ec-deg { background: linear-gradient(110deg, #0878f9, #143ff4 44%, #5d35f1 72%, #973dec); -webkit-background-clip: text; background-clip: text; color: transparent; }
#ec-app .ec-eq-modale .ec-muet { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
#ec-app .ec-eq-modale .ec-eq-lien input { background: #fff; }
#ec-app .ec-eq-modale .ec-eq-deux > label { margin-top: 0; }
#ec-app .ec-eq-modale .ec-eq-deux { align-items: start; }

/* ── La société à laquelle le compte est rattaché, en haut (28.09.2026) ─── */
#ec-app .ec-barre-droite .ec-org.ec-org-lie, #ec-app .ec-barre-droite .ec-org.ec-org-aucune { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 9px; }
#ec-app .ec-barre-droite .ec-org > span { display: grid; line-height: 1.15; text-align: left; }
#ec-app .ec-barre-droite .ec-org small { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8a99b8; }
#ec-app .ec-barre-droite .ec-org b { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--navy); }
#ec-app .ec-barre-droite .ec-org.ec-org-aucune { background: #fdf1e3 !important; }
#ec-app .ec-barre-droite .ec-org.ec-org-aucune svg { color: #c2660c; }
#ec-app .ec-barre-droite .ec-org.ec-org-aucune b { color: #c2660c; }
#ec-app .ec-barre-droite .ec-org.ec-org-ent svg { color: #5d35f1; }
@media (max-width: 1100px) { #ec-app .ec-barre-droite .ec-org.ec-org-ent { display: none; } }

/* ── Aide & support (28.09.2026) ─────────────────────────────────────────── */
#ec-app .ec-oz .ec-aide-contacts { display: grid; gap: 12px; margin-bottom: 26px; }
#ec-app .ec-oz .ec-aide-ct { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px; border-radius: 8px; background: #f8f9fb; color: var(--navy); text-decoration: none; cursor: pointer; transition: background-color .15s; }
#ec-app .ec-oz .ec-aide-ct:hover { background: #eef2f8; }
#ec-app .ec-oz .ec-aide-ct .ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--blue); }
#ec-app .ec-oz .ec-aide-ct > span:not(.ic) { min-width: 0; flex: 1; }
#ec-app .ec-oz .ec-aide-ct b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ec-app .ec-oz .ec-aide-ct small { display: block; color: var(--muted); font-size: 12px; }
#ec-app .ec-oz .ec-aide-ct > svg:last-child { flex: none; color: var(--blue); }
#ec-app .ec-oz .ec-aide-gauche { gap: 26px; }
#ec-app .ec-oz .ec-aide-rech { display: flex; align-items: center; gap: 8px; height: 40px; margin-bottom: 12px; padding: 0 14px; border: 0 !important; border-radius: 9px; background: #f8f9fb !important; }
#ec-app .ec-oz .ec-aide-rech input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--navy); }
#ec-app .ec-oz .ec-faq { display: grid; gap: 6px; }
#ec-app .ec-oz .ec-faq-q { border-radius: 8px; background: #f8f9fb; }
#ec-app .ec-oz .ec-faq-q .t { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--navy); text-align: left; cursor: pointer; }
#ec-app .ec-oz .ec-faq-q .t > span:nth-child(2) { flex: 1; }
#ec-app .ec-oz .ec-faq-q .t .n { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: #fff; color: var(--blue); }
#ec-app .ec-oz .ec-faq-q .t > svg:last-child { flex: none; color: var(--muted); transition: transform .2s cubic-bezier(.25, 1, .5, 1); }
#ec-app .ec-oz .ec-faq-q.on .t > svg:last-child { transform: rotate(180deg); }
#ec-app .ec-oz .ec-faq-q .r { display: none; padding: 0 16px 14px 50px; }
#ec-app .ec-oz .ec-faq-q.on .r { display: block; }
#ec-app .ec-oz .ec-faq-q .r p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
#ec-app .ec-oz .ec-faq-q .r a { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--blue); font-size: 12.5px; font-weight: 700; text-decoration: none; }
#ec-app .ec-oz .ec-aide-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
#ec-app .ec-oz .ec-aide-gd { display: flex; flex-direction: column; padding: 14px; border-radius: 8px; background: #f8f9fb; color: var(--navy); text-decoration: none; transition: background-color .15s; }
#ec-app .ec-oz .ec-aide-gd:hover { background: #eef2f8; }
#ec-app .ec-oz .ec-aide-gd .ic { width: 34px; height: 34px; margin-bottom: 10px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--blue); }
#ec-app .ec-oz .ec-aide-gd b { font-size: 13px; }
#ec-app .ec-oz .ec-aide-gd small { margin-top: 2px; color: var(--muted); font-size: 12px; }
#ec-app .ec-oz .ec-aide-gd em { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--blue); font-size: 12px; font-style: normal; font-weight: 700; }
#ec-app .ec-oz a.ec-aide-coord { color: var(--navy); text-decoration: none; }
#ec-app .ec-oz a.ec-aide-coord:hover b { color: var(--blue); }
#ec-app .ec-oz .ec-aide-coord small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a99b8; }
#ec-app .ec-oz .ec-aide-coord b { overflow-wrap: anywhere; }
#ec-app .ec-oz .ec-aide-pb { width: 100%; height: 40px; justify-content: center; font-size: 12.5px; }
@container (max-width: 820px) { #ec-app .ec-oz .ec-aide-contacts { grid-template-columns: minmax(0, 1fr) !important; } }
/* Aide & support et Paramètres, en bas du rail : même état actif que les entrées du haut. */
.ec-rail-bas a.actif { background: var(--blue); color: #fff; }
.ec-rail-bas a.actif svg { color: #fff; fill: none; }

/* ── Réservation : changement de date, documents (28.09.2026) ──────────── */
.ec-dd-modale .ec-dd-chg-btn { display: inline-flex; align-items: center; gap: 7px; }
.ec-dd-suppr:hover { background: #fdeeec !important; color: #c8321f; }
.ec-dd-ajout { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: 32px; padding: 0 12px; border-radius: 8px; background: #fff; color: var(--blue); font-size: 12px; font-weight: 700; cursor: pointer; }
.ec-dd-ajout:hover { background: var(--blue-50); }
.ec-dd-chg { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--blue-50); color: var(--navy); font-size: 13px; }
.ec-dd-chg > svg { color: var(--blue); flex: none; margin-top: 1px; }
.ec-dd-chg > div { flex: 1; min-width: 0; }
.ec-dd-chg b { display: block; }
.ec-dd-chg ol { margin: 4px 0; padding-left: 18px; }
.ec-dd-chg p { margin: 4px 0; color: var(--muted); font-style: italic; }
.ec-dd-chg small { color: var(--muted); font-size: 11.5px; }
.ec-dd-chg .ec-btn-s { flex: none; align-self: center; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.ec-chg-actuel { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 9px; background: #f8f9fb; font-size: 13px; }
.ec-chg-actuel svg { color: var(--blue); }
.ec-chg .ec-eq-lbl { display: block; margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a99b8; }
.ec-chg .ec-eq-lbl .ec-muet { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.ec-chg-lignes { display: grid; gap: 6px; }
.ec-chg-ligne { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 30px; gap: 8px; align-items: end; padding: 10px 12px; border-radius: 9px; background: #f8f9fb; }
.ec-chg-ligne .no { width: 24px; height: 24px; margin-bottom: 8px; border-radius: 7px; display: grid; place-items: center; background: #fff; color: var(--blue); font-size: 11.5px; font-weight: 800; }
.ec-chg-ligne label { display: grid; gap: 4px; margin: 0 !important; min-width: 0; }
.ec-chg-ligne small { font-size: 11px; color: var(--muted); }
.ec-chg-ligne small em { font-style: normal; color: #8a99b8; }
.ec-chg-ligne input, .ec-chg-ligne select { width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; color: var(--navy); outline: 0; }
.ec-chg-ligne :is(input, select):focus { box-shadow: 0 0 0 2px rgba(11, 77, 255, .35) !important; }
.ec-chg-moins { width: 30px; height: 30px; margin-bottom: 4px; border: 0; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--muted); cursor: pointer; }
.ec-chg-moins:hover { background: #fdeeec; color: #c8321f; }
.ec-chg-plus { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--blue-50); color: var(--blue); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ec-chg .ec-eq-err { display: block; margin: 8px 0 0; color: #c8321f; font-size: 12px; }
.ec-chg-msg { display: block; margin: 14px 0 0 !important; }
.ec-chg-msg textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: #f8f9fb; font: inherit; font-size: 13px; color: var(--navy); resize: vertical; outline: 0; }
.ec-chg-msg textarea:focus { box-shadow: 0 0 0 2px rgba(11, 77, 255, .35) !important; background: #fff; }
.ec-chg .ec-note-info { margin: 12px 0 0; }
@media (max-width: 640px) { .ec-chg-ligne { grid-template-columns: 26px minmax(0, 1fr) 30px; } .ec-chg-ligne label:nth-of-type(3) { grid-column: 2; } }
.ec-voile .ec-dd-modale label.ec-dd-ajout { display: inline-flex !important; flex-direction: row; align-items: center; gap: 6px; margin: 8px 0 0 !important; }

/* ── Annulation : règle des 48 h (28.09.2026) ───────────────────────────── */
.ec-note-regle { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: #fdf1e3; color: #8a4a08; font-size: 13px; line-height: 1.45; }
.ec-note-regle svg { flex: none; margin-top: 1px; color: #c2660c; }
.ec-remplace { display: flex; gap: 10px; align-items: flex-start; margin: -4px 0 14px; padding: 10px 14px; border-radius: 10px; background: #e6f7ee; color: #0b5e35; font-size: 13px; }
.ec-remplace svg { flex: none; color: #0f8a4d; margin-top: 1px; }
.ec-ann-modale { width: min(620px, 100%) !important; }
.ec-ann-regle { padding: 14px 16px; border-radius: 10px; background: #fdf1e3; color: #8a4a08; font-size: 13px; }
.ec-ann-regle b { display: block; font-size: 14px; color: #7a3f06; }
.ec-ann-regle p { margin: 6px 0 0; line-height: 1.5; }
.ec-ann-choix { display: grid; gap: 8px; margin: 14px 0 0; }
.ec-ann-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: 10px; background: #f8f9fb; font: inherit; color: var(--navy); text-align: left; cursor: pointer; transition: background-color .15s; }
.ec-ann-opt > span { flex: 1; min-width: 0; }
.ec-ann-opt b { display: block; font-size: 13.5px; }
.ec-ann-opt small { display: block; color: var(--muted); font-size: 12px; }
.ec-ann-opt.reco { background: #e6f7ee; }
.ec-ann-opt.reco > svg:first-child { color: #0f8a4d; }
.ec-ann-opt.reco:hover { background: #d6f1e3; }
.ec-ann-opt.danger > svg:first-child { color: #c8321f; }
.ec-ann-opt.danger:hover { background: #fdeeec; }
.ec-dd-factu { background: #fdeeec !important; color: #8f2416 !important; }
.ec-dd-factu svg { color: #c8321f; }
.ec-dd-remplacee { background: #e6f7ee !important; }
.ec-dd-remplacee svg { color: #0f8a4d !important; }
.ec-dd-remplacee b, .ec-dd-factu b { display: block; }

/* ── Documents obligatoires à la réservation (28.09.2026) ──────────────────
   Étape 3 : au moins un document, ou les confier à un chef de chantier. */
.ec-depot.ec-depot-grand.en-erreur { border-color: #e79aa6 !important; background: #fdf3f5; }
.ec-doc-oblig { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; }
.ec-confier-offre { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #f8f9fb; color: var(--navy); font-size: 12.5px; }
.ec-confier-offre > svg { color: var(--blue); flex: none; }
.ec-confier-offre span { flex: 1; min-width: 0; color: var(--muted); }
.ec-confier-offre span b { display: block; color: var(--navy); font-size: 13px; }
.ec-confier-offre .ec-btn-gris { flex: none; white-space: nowrap; }
.ec-confier-rien { margin: 12px 0 0; font-size: 12.5px; }
.ec-confier { display: grid; gap: 12px; margin: 4px 0 10px; }
.ec-confier label { display: grid; gap: 5px; }
.ec-recap-confie { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; color: var(--navy); }
.ec-recap-confie svg { color: var(--blue); flex: none; margin-top: 1px; }
/* Fenêtre d'une réservation qui attend ses documents. */
.ec-dd-docs-attente { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: #fdf1e3; color: #6d3906; font-size: 13px; }
.ec-dd-docs-attente > svg { color: #c2660c; flex: none; margin-top: 1px; }
.ec-dd-docs-attente b { display: block; color: #8a4708; }
.ec-dd-docs-attente em { display: block; margin-top: 4px; font-style: italic; }
@media (max-width: 640px) { .ec-confier-offre { flex-wrap: wrap; } .ec-confier-offre .ec-btn-gris { width: 100%; } }
/* Un bouton principal désactivé doit le paraître (« Envoyer la demande » sans document). */
#ec-app .ec-btn:disabled, .ec-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ── Chantier : aperçu à droite (Photos, Plans, Documents, Comptes-rendus) — 28.09.2026 ── */
#ec-app .ec-apercu-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 46%); gap: 20px; align-items: start; }
#ec-app .ec-apercu-grille > div:first-child { min-width: 0; }
#ec-app .ec-apercu { position: sticky; top: 90px; display: grid; gap: 12px; padding: 14px; max-height: calc(100dvh - 120px); overflow: auto; }
#ec-app .ec-apercu-zone { border-radius: 12px; background: var(--ec-fond); overflow: hidden; display: grid; place-items: center; min-height: 240px; }
#ec-app .ec-apercu-zone img { display: block; max-width: 100%; max-height: calc(100dvh - 330px); object-fit: contain; }
#ec-app .ec-apercu-zone iframe { width: 100%; height: calc(100dvh - 330px); min-height: 420px; border: 0; background: #fff; }
#ec-app .ec-apercu-infos strong { display: block; font-size: 15px; color: var(--ec-encre); overflow-wrap: anywhere; }
#ec-app .ec-apercu-infos small { color: var(--ec-doux); font-size: 12.5px; }
#ec-app .ec-apercu-btns { display: flex; flex-wrap: wrap; gap: 8px; }
#ec-app .ec-mur-apercu { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
#ec-app button.ec-carte-photo, #ec-app button.ec-plan-fiche, #ec-app button.ec-doc-ligne { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
#ec-app button.ec-carte-photo.actif { box-shadow: 0 0 0 2px var(--ec-bleu) !important; }
#ec-app button.ec-plan-fiche { margin-bottom: 8px; }
#ec-app button.ec-plan-fiche.actif, #ec-app button.ec-doc-ligne.actif { background: var(--ec-bleu-50); box-shadow: inset 3px 0 0 var(--ec-bleu); }
#ec-app .ec-docs-liste { display: grid; gap: 6px; }
#ec-app button.ec-doc-ligne { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--ec-fond); color: var(--ec-texte); }
#ec-app button.ec-doc-ligne strong { display: block; color: var(--ec-encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ec-app button.ec-doc-ligne small, #ec-app button.ec-doc-ligne time { color: var(--ec-doux); font-size: 12px; }
@media (max-width: 900px) {
  #ec-app .ec-apercu-grille { grid-template-columns: minmax(0, 1fr); }
  #ec-app .ec-apercu { position: static; max-height: none; }
  #ec-app .ec-apercu-zone iframe { height: 70dvh; }
}
#ec-app .ec-apercu { position: sticky; }
#ec-app .ec-apercu-fermer { position: absolute; top: 20px; right: 20px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(16, 38, 88, .15); font-size: 20px; line-height: 1; color: var(--ec-encre); cursor: pointer; }
#ec-app .ec-apercu-fermer:hover { background: #fff; color: var(--ec-bleu); }

/* ── Comptes-rendus du chantier et signature du client (28.09.2026) ── */
#ec-app .ec-cr-liste { display: flex; flex-direction: column; gap: 10px; }
#ec-app .ec-cr-ligne { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 14px 16px; border: 1px solid #e6e9f0; border-radius: 12px; background: #f8f9fb; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
#ec-app .ec-cr-ligne:hover { border-color: #c9d4ee; background: #fff; }
#ec-app .ec-cr-ligne.actif { border-color: #1d4fd8; background: #fff; box-shadow: 0 0 0 3px rgba(29, 79, 216, .12); }
#ec-app .ec-cr-ligne:focus-visible { outline: 2px solid #1d4fd8; outline-offset: 2px; }
#ec-app .ec-cr-date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 58px; border-radius: 10px; background: #fff; border: 1px solid #e6e9f0; }
#ec-app .ec-cr-date b { font-size: 21px; line-height: 1; color: #071442; }
#ec-app .ec-cr-date small { margin-top: 4px; font-size: 11px; color: #6b7690; white-space: nowrap; }
#ec-app .ec-cr-corps { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#ec-app .ec-cr-corps strong { font-size: 15px; color: #071442; }
#ec-app .ec-cr-corps strong em { font-style: normal; font-weight: 500; color: #6b7690; }
#ec-app .ec-cr-corps > span:not(.ec-cr-pieds) { font-size: 13.5px; color: #4d5b7c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ec-app .ec-cr-pieds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
#ec-app .ec-cr-pieds i { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #eef1f7; color: #4d5b7c; }
#ec-app .ec-cr-pieds i.ok { background: #e8f7ee; color: #15803d; }
#ec-app .ec-cr-pieds i.a { background: #fff1e0; color: #c2610c; }

#ec-app .ec-apercu .ec-cr-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-right: 36px; }
#ec-app .ec-apercu .ec-cr-tete small { font-size: 12px; color: #6b7690; font-weight: 600; letter-spacing: .02em; }
#ec-app .ec-apercu .ec-cr-tete h2 { margin: 2px 0 0; font-size: 19px; color: #071442; }
#ec-app .ec-apercu .ec-cr-tete .ec-btn-contour { height: 38px; padding: 0 12px; font-size: 13.5px; gap: 6px; flex: none; }
#ec-app .ec-apercu h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #6b7690; }
#ec-app .ec-cr-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
#ec-app .ec-cr-cases > div { padding: 10px 12px; border-radius: 10px; background: #f8f9fb; }
#ec-app .ec-cr-cases small { display: block; font-size: 11.5px; color: #6b7690; }
#ec-app .ec-cr-cases b { display: block; margin-top: 2px; font-size: 14px; color: #071442; }
#ec-app .ec-cr-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#ec-app .ec-cr-texte { margin: 0; white-space: pre-line; font-size: 14px; line-height: 1.55; color: #26324f; }
#ec-app .ec-cr-equipe { display: flex; flex-wrap: wrap; gap: 6px; }
#ec-app .ec-cr-equipe span { padding: 5px 10px; border-radius: 999px; background: #f8f9fb; border: 1px solid #e6e9f0; font-size: 13px; }
#ec-app .ec-cr-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
#ec-app .ec-cr-photos a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #eef1f7; }
#ec-app .ec-cr-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ec-app .ec-cr-sigs { display: grid; gap: 10px; }
#ec-app .ec-cr-sig { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #e6e9f0; border-radius: 12px; background: #fff; }
#ec-app .ec-cr-sig small { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #6b7690; }
#ec-app .ec-cr-sig b { font-size: 14.5px; color: #071442; }
#ec-app .ec-cr-sig .ok { font-size: 12.5px; font-weight: 600; color: #15803d; }
#ec-app .ec-cr-sig .gris { font-size: 12.5px; color: #6b7690; }
#ec-app .ec-cr-sig.a-signer { border: 1.5px dashed #9fb4ea; background: #f7f9ff; }
#ec-app .ec-cr-trace { width: 100%; max-width: 260px; height: 64px; margin: 2px 0; }
#ec-app .ec-cr-trace polyline { fill: none; stroke: #071a57; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#ec-app .ec-cr-nom { height: 42px; margin: 6px 0 8px; padding: 0 12px; border: 1px solid #d5dbe8; border-radius: 8px; font: inherit; font-size: 14.5px; background: #fff; }
#ec-app .ec-cr-nom:focus { outline: none; border-color: #1d4fd8; box-shadow: 0 0 0 3px rgba(29, 79, 216, .14); }
#ec-app .ec-cr-sig .ec-apercu-btns .ec-btn, #ec-app .ec-cr-sig .ec-apercu-btns .ec-btn-contour { height: 42px; font-size: 14px; padding: 0 14px; gap: 8px; }
#ec-app .ec-cr-qr:empty { display: none; }
#ec-app .ec-cr-qr { display: flex; gap: 14px; align-items: center; margin-top: 10px; padding: 12px; border-radius: 10px; background: #fff; border: 1px solid #e6e9f0; }
#ec-app .ec-cr-qr-img { flex: none; width: 150px; height: 150px; }
#ec-app .ec-cr-qr-img svg { width: 100%; height: 100%; display: block; }
#ec-app .ec-cr-qr p { margin: 0; font-size: 13px; line-height: 1.45; color: #4d5b7c; }
#ec-app .ec-cr-qr p b { display: block; margin-bottom: 4px; font-size: 14.5px; color: #071442; }
#ec-app .ec-cr-qr p em { display: block; margin-top: 8px; font-style: normal; font-weight: 600; color: #1d4fd8; font-variant-numeric: tabular-nums; }
#ec-app .ec-cr-err:empty { display: none; }
#ec-app .ec-cr-err { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #d02f36; }
@media (max-width: 520px) { #ec-app .ec-cr-qr { flex-direction: column; text-align: center; } #ec-app .ec-cr-cases { grid-template-columns: 1fr 1fr; } }

/* Le pavé couché — même dessin que la PWA (avance, compte-rendu). */
html.ec-signature-ouverte, html.ec-signature-ouverte body { overflow: hidden; }
.ec-pave-voile { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; gap: 14px; padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: #f4f6fb; color: #071442; font-family: inherit; animation: ec-pave-in .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes ec-pave-in { from { opacity: 0; } to { opacity: 1; } }
.ec-pave-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ec-pave-tete h2 { margin: 0; font-size: 22px; }
.ec-pave-sous { margin-top: 3px; font-size: 13.5px; color: #4d5b7c; }
.ec-pave-consigne { font-size: 13px; color: #6b7690; }
.ec-pave-zone { position: relative; flex: 1; min-height: 0; border-radius: 16px; background: #fff; border: 1.5px dashed #9fb4ea; box-shadow: 0 1px 2px rgba(7, 20, 66, .06), 0 8px 24px rgba(7, 20, 66, .06); overflow: hidden; }
.ec-pave-zone canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.ec-pave-base { position: absolute; left: 8%; right: 8%; bottom: 26%; border-bottom: 1.5px solid #c9d4ee; pointer-events: none; }
.ec-pave-gestes { display: flex; align-items: center; gap: 10px; }
.ec-pave-gestes .ec-btn, .ec-pave-gestes .ec-btn-contour { height: 46px; padding: 0 20px; border-radius: 8px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; }
.ec-pave-gestes .ec-btn { border: 0; background: #1d4fd8; color: #fff; }
.ec-pave-gestes .ec-btn-contour { border: 1.5px solid #1d4fd8; background: #fff; color: #1d4fd8; }
.ec-pave-effacer { height: 46px; padding: 0 14px; border: 0; background: none; color: #4d5b7c; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ec-pave-msg { flex: 1; font-size: 13.5px; font-weight: 600; color: #d02f36; text-align: right; }
/* Téléphone en portrait : le pavé est tourné pour se signer couché. */
@media (orientation: portrait) and (max-width: 820px) {
  .ec-pave-voile { inset: auto; top: 0; left: 0; width: 100dvh; height: 100dvw; transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
  .ec-pave-consigne { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ec-pave-voile { animation: none; } }

/* Heures effectuées / programmées sous la barre d'avancement (28.09.2026). */
#ec-app .ec-heures { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13.5px; color: #4d5b7c; font-variant-numeric: tabular-nums; }
#ec-app .ec-heures svg { flex: none; color: #1d4fd8; }
#ec-app .ec-heures b { color: #071442; }

/* ── Télécharger en .zip : sélection et barre du bas (28.09.2026) ── */
#ec-app .ec-zip-outil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
#ec-app .ec-zip-outil .ec-btn-contour { height: 38px; padding: 0 14px; font-size: 14px; gap: 8px; }
#ec-app .ec-zip-outil.actif > span { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 14px; font-weight: 600; color: #1d4fd8; }
#ec-app .ec-zip-choix { position: relative; cursor: pointer; }
#ec-app .ec-zip-case { position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 2px solid #fff; background: rgba(7, 20, 66, .28); color: transparent; box-shadow: 0 1px 4px rgba(7, 20, 66, .25); transition: background .15s, border-color .15s; }
#ec-app .ec-zip-choix.coche .ec-zip-case { background: #1d4fd8; border-color: #1d4fd8; color: #fff; }
#ec-app .ec-zip-choix.coche { outline: 2.5px solid #1d4fd8; outline-offset: 2px; }
/* Dans les listes (documents, plans), la case prend sa place en tête de ligne. */
#ec-app .ec-doc-ligne.ec-zip-choix, #ec-app .ec-plan-fiche.ec-zip-choix { padding-left: 50px; }
#ec-app .ec-doc-ligne .ec-zip-case, #ec-app .ec-plan-fiche .ec-zip-case { top: 50%; left: 14px; transform: translateY(-50%); background: #fff; border-color: #c3cce0; box-shadow: none; }
#ec-app .ec-doc-ligne.coche .ec-zip-case, #ec-app .ec-plan-fiche.coche .ec-zip-case { background: #1d4fd8; border-color: #1d4fd8; }
#ec-app .ec-doc-ligne.coche, #ec-app .ec-plan-fiche.coche { outline-offset: -1px; background: #f5f8ff; }

#ec-app .ec-zip-barre { position: fixed; z-index: 800; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-radius: 14px; background: #071442; color: #fff; box-shadow: 0 2px 6px rgba(7, 20, 66, .18), 0 16px 40px rgba(7, 20, 66, .28); animation: ec-zip-monte .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes ec-zip-monte { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
#ec-app .ec-zip-compte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#ec-app .ec-zip-compte b { font-size: 15px; font-variant-numeric: tabular-nums; }
#ec-app .ec-zip-cr { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #c9d4f2; cursor: pointer; }
#ec-app .ec-zip-cr input { width: 16px; height: 16px; accent-color: #4f7dff; margin: 0; }
#ec-app .ec-zip-annuler { height: 42px; padding: 0 14px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
#ec-app .ec-zip-annuler:hover { background: rgba(255, 255, 255, .08); }
#ec-app .ec-zip-annuler:focus-visible, #ec-app .ec-zip-barre .ec-btn:focus-visible { outline: 2px solid #9fb8ff; outline-offset: 2px; }
#ec-app .ec-zip-barre .ec-btn { height: 42px; padding: 0 16px; font-size: 14.5px; gap: 8px; background: #2f63ff; text-decoration: none; }
#ec-app .ec-zip-barre .ec-btn.inactif { opacity: .45; pointer-events: none; }
/* La barre ne doit rien cacher : de la place sous la dernière ligne. */
#ec-app .ec-onglet-bloc:has(+ .ec-zip-barre) { margin-bottom: 96px; }
@media (max-width: 600px) {
  #ec-app .ec-zip-barre { flex-wrap: wrap; padding: 12px; }
  #ec-app .ec-zip-compte { flex-basis: 100%; }
  #ec-app .ec-zip-barre .ec-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { #ec-app .ec-zip-barre { animation: none; } }

/* ── Compte-rendu en MODALE, au modèle du bureau (orb-crm) — 28.09.2026 ── */
#ec-app .ec-cr-ligne { align-items: center; }
#ec-app .ec-cr-ligne > svg:last-child { flex: none; margin-left: auto; color: #8a99b8; transition: transform .15s, color .15s; }
#ec-app .ec-cr-ligne:hover > svg:last-child { color: #1d4fd8; transform: translateX(2px); }
.ec-voile .ec-modale.ec-crm { width: min(1040px, 100%); height: min(700px, calc(100dvh - 32px)); max-height: none; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ec-crm-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px 14px; border-bottom: 1px solid #eef3fb; }
.ec-crm-tete small { font-size: 11.5px; font-weight: 600; color: #8a99b8; letter-spacing: .02em; }
.ec-crm-tete h2 { margin: 2px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: #071442; }
.ec-crm-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ec-crm-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: #eef3ff; color: #1d4fd8; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ec-crm-btn:hover { background: #dfe9ff; }
.ec-crm-x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f4f6fa; color: #52658e; cursor: pointer; }
.ec-crm-x:hover { background: #e8edf6; color: #071442; }
.ec-crm-btn:focus-visible, .ec-crm-x:focus-visible { outline: 2px solid #1d4fd8; outline-offset: 2px; }
.ec-crm-vide { flex: 1; display: grid; place-items: center; }
.ec-crm-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.ec-crm-gauche { min-height: 0; overflow-y: auto; padding: 18px 24px 24px; border-right: 1px solid #eef3fb; }
.ec-crm-droite { min-height: 0; overflow-y: auto; padding: 18px 20px; background: #fafbfd; display: grid; gap: 12px; align-content: start; }
.ec-crm-cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ec-crm-cases > div { padding: 9px 11px; border-radius: 8px; background: #f4f6fa; min-width: 0; }
.ec-crm-cases small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a99b8; }
.ec-crm-cases b { display: block; margin-top: 3px; font-size: 13px; color: #071442; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-crm-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ec-voile .ec-crm-gauche h3 { margin: 18px 0 6px; font-size: 12.5px; font-weight: 800; color: #071442; }
.ec-crm-texte { margin: 0; font-size: 13px; line-height: 1.55; white-space: pre-line; color: #26324f; }
.ec-crm-equipe { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-crm-equipe span { padding: 4px 9px; border-radius: 7px; background: #f4f6fa; font-size: 12px; }
.ec-crm-photos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ec-crm-photos a { display: block; aspect-ratio: 1; border-radius: 7px; overflow: hidden; background: #f4f6fa; }
.ec-crm-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-crm-sig { padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #dfe8f6; display: grid; gap: 4px; align-content: start; }
.ec-crm-sig small { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #8a99b8; }
.ec-crm-sig > b { font-size: 13px; color: #071442; }
.ec-crm-sig .ok { font-size: 11px; font-weight: 700; color: #0f8a4d; }
.ec-crm-sig .gris { font-size: 11px; color: #52658e; }
.ec-crm-sig.a-signer { box-shadow: 0 0 0 1.5px #9fb4ea; background: #f7f9ff; }
.ec-crm-sig .ec-cr-trace { width: 100%; max-width: 280px; height: 56px; margin: 4px 0; }
.ec-crm-sig .ec-cr-trace polyline { fill: none; stroke: #071a57; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ec-crm-nom { height: 34px; margin-top: 4px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #dfe8f6; font: inherit; font-size: 12.5px; color: #071442; }
.ec-crm-nom:focus { outline: none; box-shadow: inset 0 0 0 1.5px #1d4fd8; }
.ec-crm-gestes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ec-crm-gestes .ec-btn { height: 34px; padding: 0 12px; font-size: 12.5px; gap: 6px; }
.ec-crm-qr:empty { display: none; }
.ec-crm-qr { display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 10px; border-radius: 9px; background: #f4f6fa; }
.ec-crm-qr .ec-cr-qr-img { width: 112px; height: 112px; flex: none; border-radius: 6px; overflow: hidden; background: #fff; }
.ec-crm-qr .ec-cr-qr-img svg { width: 100%; height: 100%; display: block; }
.ec-crm-qr p { margin: 0; font-size: 11.5px; line-height: 1.5; color: #52658e; }
.ec-crm-qr p b { display: block; color: #071442; font-size: 12px; }
.ec-crm-qr p em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; font-weight: 600; color: #c2660c; font-variant-numeric: tabular-nums; }
.ec-crm-err:empty { display: none; }
.ec-crm-err { margin: 4px 0 0; font-size: 11.5px; font-weight: 600; color: #c8321f; }
@media (max-width: 860px) {
  .ec-voile .ec-modale.ec-crm { height: calc(100dvh - 24px); }
  .ec-crm-corps { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .ec-crm-gauche, .ec-crm-droite { overflow: visible; }
  .ec-crm-gauche { border-right: 0; border-bottom: 1px solid #eef3fb; }
  .ec-crm-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-crm-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ec-crm-tete { padding: 16px 16px 12px; }
  .ec-crm-tete h2 { font-size: 17px; }
  .ec-crm-actions .ec-statut { display: none; }
}
.ec-crm-tete h2 .ec-deg { background: linear-gradient(110deg, #0878f9, #143ff4 44%, #5d35f1 72%, #973dec); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Déposer photos, plans, documents (28.09.2026) ── */
.ec-voile .ec-modale.ec-dep-modale { width: min(680px, 100%); padding: 24px 26px 20px; }
.ec-dep-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-right: 36px; }
.ec-dep-tete .ec-ico-carre { width: 48px; height: 48px; }
.ec-voile .ec-dep-tete h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.ec-dep-tete h3 .ec-deg { background: linear-gradient(110deg, #0878f9, #143ff4 44%, #5d35f1 72%, #973dec); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ec-dep-tete small { font-size: 13px; color: #52658e; }
.ec-dep-genres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ec-dep-genres button { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 0; border-radius: 10px; background: #f8f9fb; box-shadow: inset 0 0 0 1px #e6eaf2; font: inherit; text-align: left; color: #071442; cursor: pointer; transition: box-shadow .15s, background .15s; }
.ec-dep-genres button svg { flex: none; color: #52658e; margin-top: 1px; }
.ec-dep-genres button b { display: block; font-size: 14px; }
.ec-dep-genres button small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: #6b7690; }
.ec-dep-genres button.actif { background: #f3f7ff; box-shadow: inset 0 0 0 2px #1d4fd8; }
.ec-dep-genres button.actif svg { color: #1d4fd8; }
.ec-dep-genres button:disabled:not(.actif) { opacity: .45; cursor: not-allowed; }
.ec-dep-genres button:focus-visible { outline: 2px solid #1d4fd8; outline-offset: 2px; }
.ec-dep-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; max-height: min(320px, 38dvh); overflow-y: auto; }
.ec-dep-liste li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #f8f9fb; }
.ec-dep-liste li.erreur { background: #fdf1f0; box-shadow: inset 0 0 0 1px #f3c6c1; }
.ec-dep-liste li.ok { background: #effaf3; }
.ec-dep-liste img, .ec-dep-ico { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: #fff; }
.ec-dep-infos { min-width: 0; display: grid; gap: 2px; }
.ec-dep-infos input { height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: #071442; }
.ec-dep-infos input:hover:not(:disabled) { background: #fff; border-color: #dfe5f0; }
.ec-dep-infos input:focus { outline: none; background: #fff; border-color: #1d4fd8; }
.ec-dep-infos small { padding: 0 8px; font-size: 11.5px; color: #6b7690; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-dep-infos small em { font-style: normal; font-weight: 600; color: #c8321f; }
.ec-dep-etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #52658e; white-space: nowrap; }
.ec-dep-etat.ok { color: #0f8a4d; }
.ec-dep-retirer { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #6b7690; cursor: pointer; }
.ec-dep-retirer:hover { background: #fff; color: #c8321f; }
.ec-dep-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: #52658e; }
.ec-dep-note svg { flex: none; margin-top: 1px; color: #1d4fd8; }
.ec-dep-modale .ec-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) {
  .ec-voile .ec-modale.ec-dep-modale { padding: 20px 16px 16px; }
  .ec-dep-genres { grid-template-columns: minmax(0, 1fr); }
  .ec-dep-genres button small { display: none; }
}
.ec-voile .ec-modale .ec-dep-genres button.actif { background: #f3f7ff; box-shadow: inset 0 0 0 2px #1d4fd8 !important; }

/* ── Personnes déjà connues, dans l'invitation d'un chef de chantier (28.09.2026) ── */
.ec-connus { margin: 0 0 16px; padding: 12px; border-radius: 12px; background: #f8f9fb; }
.ec-connus-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ec-connus-tete .ec-eq-lbl { margin: 0; }
.ec-connus-tete small { font-size: 11.5px; color: #6b7690; }
.ec-connus-rech { display: flex; align-items: center; gap: 8px; height: 36px; margin-bottom: 8px; padding: 0 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #e3e8f2; color: #6b7690; }
.ec-connus-rech input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 13px; color: #071442; outline: none; }
.ec-connus-rech:focus-within { box-shadow: inset 0 0 0 1.5px #1d4fd8; }
.ec-connus-liste { display: grid; gap: 6px; max-height: 196px; overflow-y: auto; }
.ec-connu { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e3e8f2; font: inherit; text-align: left; color: #071442; cursor: pointer; transition: box-shadow .15s, background .15s; }
.ec-connu:hover { box-shadow: inset 0 0 0 1px #b9c8ea; }
.ec-connu.on { background: #f3f7ff; box-shadow: inset 0 0 0 1.5px #1d4fd8; }
.ec-connu:focus-visible { outline: 2px solid #1d4fd8; outline-offset: 2px; }
.ec-connu-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e8eeff; color: #1d4fd8; font-size: 11px; font-weight: 800; }
.ec-connu-txt { min-width: 0; display: grid; }
.ec-connu-txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-connu-txt small { font-size: 11px; color: #6b7690; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-connu-src { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #f1f3f8; font-size: 10.5px; font-weight: 700; color: #52658e; white-space: nowrap; }
.ec-connu.on .ec-connu-src { background: #1d4fd8; color: #fff; }
.ec-connu--acces .ec-connu-av { background: #e6f7ee; color: #0f8a4d; }
.ec-connu--acces .ec-connu-src { background: #e6f7ee; color: #0f8a4d; }
.ec-connus--vide p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }

/* ── Supprimer un accès (28.09.2026) ── */
#ec-app .ec-oz .ec-btn-s.ec-btn-s--danger { width: 30px; padding: 0; justify-content: center; color: #c8321f; }
#ec-app .ec-oz .ec-btn-s.ec-btn-s--danger:hover { border-color: #f3c6c1; background: #fdf1f0; }
.ec-lien-danger { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 700; color: #c8321f; cursor: pointer; }
.ec-lien-danger:hover { background: #fdf1f0; }

/* ── Petits écrans : dernier mot (28.09.2026) ──
   Des règles plus bas dans le fichier (« Dashboard », V3…) redonnaient
   deux colonnes fixes (dont une de 380 px mini) après les @media d'origine :
   sur téléphone, « Avancement du chantier » était écrasé et « Réserver une
   équipe » débordait. Ce bloc passe en dernier et remet une seule colonne. */
@media (max-width: 1280px) {
  #ec-app .ec-db, #ec-app .ec-db-bas,
  #ec-app .ec-planning, #ec-app .ec-photos, #ec-app .ec-docs, #ec-app .ec-fact,
  #ec-app .ec-vis-corps { grid-template-columns: minmax(0, 1fr); }
  #ec-app .ec-docs .ec-doc-panneau, #ec-app .ec-docs .ec-docs-table, #ec-app .ec-docs .ec-kpis { grid-column: auto; grid-row: auto; }
}
@media (max-width: 900px) {
  #ec-app .ec-projet-tete, #ec-app .ec-chantier { grid-template-columns: minmax(0, 1fr); }
  #ec-app .ec-projet-tete .ec-photo { height: 180px; }

  /* Pages en deux ou trois volets (plans, messages) : un volet sous l'autre. */
  #ec-app .ec-plans, #ec-app .ec-msg { grid-template-columns: minmax(0, 1fr); }
  #ec-app .ec-mur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Largeurs fixes pensées pour l'écran d'ordinateur. */
  #ec-app .ec-filtres .ec-recherche, #ec-app .ec-filtres-docs .ec-recherche,
  #ec-app .ec-filtres-docs .ec-select, #ec-app .ec-fact-filtres .ec-recherche { width: 100%; max-width: 100%; flex: 1 1 100%; }
  #ec-app .ec-image-msg { width: min(290px, 100%); }
  #ec-app .ec-image-msg time { right: auto; }
  #ec-app .ec-commentaires { width: auto; right: 10px; }
  #ec-app .ec-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }

  /* Menu : barre d'icônes fixée en bas, comme une application. Avant, le
     rail devenait un bloc bleu nuit en haut (Paramètres, Aide, Déconnexion
     empilés) haut de 300 px. Une seule ligne, défilable si l'écran est étroit. */
  #ec-app .ec-rail {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 40;
    width: auto; height: auto; margin: 0;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    border-right: 0; border-top: 1px solid rgba(255, 255, 255, .08);
  }
  #ec-app .ec-rail::-webkit-scrollbar { display: none; }
  #ec-app .ec-rail nav { flex: none; }
  #ec-app .ec-nav, #ec-app .ec-rail-bas {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px;
    margin: 0; padding: 0; overflow: visible;
  }
  #ec-app .ec-rail-bas { flex: none; margin-left: 4px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .14); }
  #ec-app .ec-nav a, #ec-app .ec-rail-bas a { flex: none; width: 44px; height: 44px; padding: 0; border: 0; justify-content: center; }
  #ec-app .ec-nav a > span:not(.ec-badge), #ec-app .ec-rail-bas a > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #ec-app .ec-principal { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* Barre du haut : logo, cloche, avatar. L'onglet « Vue d'ensemble » et les
     pastilles Société / Entreprise faisaient déborder la page en largeur. */
  #ec-app .ec-barre-haut { gap: 8px; padding: 0 12px; }
  #ec-app .ec-barre-haut .ec-onglets-page,
  #ec-app .ec-barre-haut .ec-barre-droite .ec-org { display: none; }
  #ec-app .ec-barre-droite { flex: none; gap: 6px; }

  /* Ce qui est fixé en bas passe au-dessus de la barre d'icônes. */
  .ec-toast { bottom: calc(76px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
  #ec-app .ec-zip-barre { bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* Filet de sécurité : jamais de défilement horizontal de la page. */
  html, body { overflow-x: clip; }
}

/* ═══ Demandes d'intervention (29.09.2026) ═══════════════════════════════════
   Le client entre les informations ; l'entreprise contacte et fixe les dates. */
#ec-app .ec-di-st { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 700; white-space: nowrap; }
#ec-app .ec-di-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#ec-app .ec-di-st.t-bleu { background: var(--ec-bleu-50); color: var(--ec-bleu); }
#ec-app .ec-di-st.t-orange { background: var(--ec-orange-50); color: #b8660b; }
#ec-app .ec-di-st.t-vert { background: var(--ec-vert-50); color: var(--ec-vert); }
#ec-app .ec-di-st.t-violet { background: var(--ec-violet-50); color: var(--ec-violet); }
#ec-app .ec-di-st.t-gris { background: #eef1f6; color: #5b6887; }
#ec-app .ec-di-liste { display: grid; gap: 10px; }
#ec-app .ec-di-carte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: 12px; background: #f8f9fb; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background .15s; }
#ec-app .ec-di-carte:hover { background: #f1f4fa; }
#ec-app .ec-di-carte-txt { display: grid; gap: 4px; min-width: 0; }
#ec-app .ec-di-carte-txt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ec-app .ec-di-carte-txt small { font-size: 12px; color: var(--ec-doux); }
#ec-app .ec-di-fl { color: var(--ec-pale); }
#ec-app .ec-di-jauge { display: block; height: 6px; border-radius: 3px; background: #e6ecf6; overflow: hidden; max-width: 360px; }
#ec-app .ec-di-jauge i { display: block; height: 100%; background: linear-gradient(90deg, #0b4dff, #7a3ff0); }
.ec-voile .ec-di-modale { width: min(860px, 100%); }
#ec-app .ec-di-sur { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8a99b8; margin-bottom: 2px; }
#ec-app .ec-di-modale h3 { margin: 0 0 12px; }
#ec-app .ec-di-titre { display: flex; align-items: center; gap: 12px; margin-right: 36px; }
#ec-app .ec-di-titre h3 { margin: 0; }
#ec-app .ec-di-meta { margin: 4px 0 0; font-size: 12.5px; }
#ec-app .ec-di-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
#ec-app .ec-di-champs .l { grid-column: 1 / -1; }
#ec-app .ec-di-modale label { display: block; }
#ec-app .ec-di-modale .ec-eq-lbl { display: block; margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a99b8; }
#ec-app .ec-di-modale :is(input, select, textarea) { width: 100%; min-height: 40px; padding: 9px 12px; border: 1.5px solid transparent; border-radius: 9px; background: #f8f9fb; font: inherit; font-size: 13px; color: var(--ec-encre); outline: 0; }
#ec-app .ec-di-modale :is(input, select, textarea):focus { border-color: var(--ec-bleu); background: #fff; }
#ec-app .ec-di-modale textarea { resize: vertical; line-height: 1.4; }
#ec-app .ec-di-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 16px 0 8px; font-size: 13.5px; }
#ec-app .ec-di-sec span { display: flex; gap: 14px; }
#ec-app .ec-lien { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ec-bleu); cursor: pointer; }
#ec-app .ec-di-fics { display: flex; flex-wrap: wrap; gap: 8px; }
#ec-app .ec-di-fic { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 6px 0 10px; border-radius: 9px; background: #f8f9fb; font-size: 12.5px; }
#ec-app .ec-di-fic a { display: inline-flex; align-items: center; gap: 6px; color: var(--ec-encre); text-decoration: none; font-weight: 600; }
#ec-app .ec-di-fic button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--ec-doux); cursor: pointer; }
#ec-app .ec-di-fic.plus { padding: 0 12px; border: 1.5px dashed #c3cce0; background: #fff; color: var(--ec-bleu); font-weight: 700; cursor: pointer; }
#ec-app .ec-di-coller { display: grid; gap: 8px; margin-bottom: 10px; justify-items: end; }
#ec-app .ec-di-table { overflow-x: auto; }
#ec-app .ec-di-table table { width: 100%; border-collapse: collapse; }
#ec-app .ec-di-table th { text-align: left; padding: 6px 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a99b8; }
#ec-app .ec-di-table td { padding: 3px 3px; }
#ec-app .ec-di-table td:last-child { width: 40px; }
#ec-app .ec-di-table input { min-height: 36px; padding: 7px 9px; font-size: 12.5px; }
#ec-app .ec-di-table .ec-icone-btn { width: 32px; height: 32px; }
#ec-app .ec-di-aide { margin: 14px 0 0; font-size: 12px; }
#ec-app .ec-di-consignes { margin: 12px 0 0; font-size: 13px; }
#ec-app .ec-di-note { display: flex; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--ec-bleu-50); font-size: 13px; color: var(--ec-texte); }
#ec-app .ec-di-note svg { flex: none; color: var(--ec-bleu); }
#ec-app .ec-di-note b { display: block; font-size: 12px; color: var(--ec-bleu); }
#ec-app .ec-di-avance { display: grid; gap: 6px; margin: 16px 0 10px; font-size: 13px; }
#ec-app .ec-di-avance .ec-di-jauge { max-width: none; }
#ec-app .ec-di-pers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#ec-app .ec-di-k { padding: 11px 13px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--ec-trait); }
#ec-app .ec-di-k.ok { box-shadow: 0 0 0 1.5px #bfe6cf; }
#ec-app .ec-di-k-tete { display: flex; align-items: center; gap: 10px; }
#ec-app .ec-di-k-tete > div { flex: 1; min-width: 0; }
#ec-app .ec-di-k-tete b { display: block; font-size: 13.5px; }
#ec-app .ec-di-k-tete small { display: block; font-size: 12px; color: var(--ec-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ec-app .ec-di-k-tete .ec-icone-btn { width: 30px; height: 30px; }
#ec-app .ec-di-rdv { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 10px; border-radius: 9px; background: var(--ec-vert-50); color: var(--ec-vert); font-size: 13px; font-weight: 800; }
#ec-app .ec-di-trace { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ec-doux); }
#ec-app .ec-di-plus { margin-top: 10px; }
#ec-app .ec-di-ajout { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1.2fr auto auto; gap: 6px; align-items: center; margin-top: 10px; }
#ec-app .ec-di-ajout input { min-height: 36px; padding: 7px 9px; font-size: 12.5px; }
#ec-app .ec-evt-di { cursor: pointer; }
@media (max-width: 720px) {
  #ec-app .ec-di-champs { grid-template-columns: 1fr; }
  #ec-app .ec-di-ajout { grid-template-columns: 1fr 1fr; }
  #ec-app .ec-di-carte { grid-template-columns: minmax(0, 1fr) auto; }
  #ec-app .ec-di-carte > .ec-ico-carre, #ec-app .ec-di-carte > .ec-di-fl { display: none; }
}
#ec-app .ec-di-modale label.ec-di-fic { display: inline-flex; }
#ec-app .ec-di-sec b .ec-muet { display: inline; font-weight: 500; }
#ec-app .ec-di-coller .ec-btn-s, #ec-app .ec-di-ajout .ec-btn-s { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--ec-bleu); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* ── « Nouvelle demande d'intervention » au dessin de la maquette (29.09.2026) ── */
.ec-voile .ec-di-modale.ec-di-nouvelle { width: min(600px, 100%); padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
#ec-app .ec-di-nouvelle .ec-di-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 22px 24px 10px; }
#ec-app .ec-di-nouvelle .ec-di-tete h3 { margin: 2px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--ec-encre); }
#ec-app .ec-di-modale h3 .ec-deg { background: linear-gradient(110deg, #0878f9, #143ff4 44%, #5d35f1 72%, #973dec); -webkit-background-clip: text; background-clip: text; color: transparent; }
#ec-app .ec-di-fermer { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 9px; background: #f4f6fa; color: #52658e; cursor: pointer; }
#ec-app .ec-di-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 24px 18px; }
#ec-app .ec-di-nouvelle .ec-di-champs { gap: 12px 12px; }
#ec-app .ec-voile .ec-di-modale :is(input, select, textarea) { width: 100%; min-height: 38px; padding: 9px 11px; border: 1.5px solid transparent; border-radius: 9px; background: #f5f7fb; font: inherit; font-size: 12.5px; color: var(--ec-encre); outline: 0; box-shadow: none; }
#ec-app .ec-voile .ec-di-modale select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8a99b8 50%), linear-gradient(135deg, #8a99b8 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
#ec-app .ec-voile .ec-di-modale :is(input, select, textarea):focus { border-color: var(--ec-bleu); background-color: #fff; }
#ec-app .ec-di-periode { display: flex; align-items: center; gap: 6px; }
#ec-app .ec-di-periode em { font-style: normal; font-size: 12px; color: var(--ec-doux); }
#ec-app .ec-di-nouvelle .ec-di-sec { margin: 18px 0 8px; font-size: 13px; }
#ec-app .ec-di-sep { color: var(--ec-pale); }
#ec-app .ec-di-nouvelle .ec-lien { font-size: 11.5px; }
#ec-app .ec-di-type { font-style: normal; font-size: 9px; font-weight: 800; color: #fff; padding: 2px 4px; border-radius: 3px; background: #8a99b8; }
#ec-app .ec-di-type.t-pdf { background: #e14b3b; } #ec-app .ec-di-type.t-img { background: #7a45f0; }
#ec-app .ec-di-type.t-xls { background: #1f9d57; } #ec-app .ec-di-type.t-doc { background: #0f66f5; }
#ec-app .ec-di-nouvelle .ec-di-fic { min-height: 32px; font-size: 11.5px; background: #f5f7fb; }
#ec-app .ec-di-nouvelle .ec-di-fic.plus { background: #fff; }
#ec-app .ec-di-nouvelle .ec-di-table th { padding: 6px 6px; border-bottom: 1px solid var(--ec-trait); font-size: 10px; }
#ec-app .ec-di-nouvelle .ec-di-table td { padding: 8px 6px; border-bottom: 1px solid #f0f2f7; font-size: 11.5px; vertical-align: middle; }
#ec-app .ec-di-nouvelle .ec-di-table td b { font-size: 12px; }
#ec-app .ec-di-nouvelle .ec-di-table td:last-child { width: 28px; }
#ec-app .ec-di-nouvelle .ec-di-st { height: 22px; padding: 0 8px; font-size: 10.5px; }
#ec-app .ec-di-x { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--ec-pale); cursor: pointer; }
#ec-app .ec-di-x:hover { background: #f4f6fa; color: var(--ec-rouge); }
#ec-app .ec-di-saisie td { border-bottom: 0 !important; padding: 8px 3px 0 !important; }
#ec-app .ec-voile .ec-di-saisie input { min-height: 34px; padding: 7px 9px; font-size: 12px; }
#ec-app .ec-di-ajout-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 34px; border: 1.5px dashed #c3cce0; border-radius: 9px; background: #fff; color: var(--ec-bleu); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#ec-app .ec-di-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--ec-trait); background: #fafbfd; }
#ec-app .ec-di-pied small { font-size: 11.5px; color: var(--ec-doux); max-width: 280px; }
#ec-app .ec-di-pied > span { display: flex; gap: 8px; flex: none; }
@media (max-width: 720px) {
  #ec-app .ec-di-nouvelle .ec-di-table thead { display: none; }
  #ec-app .ec-di-pied { flex-direction: column; align-items: stretch; }
}
/* Suggestions d'adresses suisses sous un champ `data-geo` (29.09.2026). */
#ec-app .ec-di-geo-hote { position: relative; }
#ec-app .ec-di-sugg { position: fixed; z-index: 400; margin: 0; padding: 5px; list-style: none; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--ec-trait), 0 14px 34px rgba(16, 38, 88, .16); max-height: 260px; overflow-y: auto; }
#ec-app .ec-di-sugg li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
#ec-app .ec-di-sugg li svg { grid-row: span 2; color: var(--ec-bleu); }
#ec-app .ec-di-sugg li b { font-size: 12.5px; color: var(--ec-encre); }
#ec-app .ec-di-sugg li small { font-size: 11px; color: var(--ec-doux); }
#ec-app .ec-di-sugg li:hover, #ec-app .ec-di-sugg li[aria-selected="true"] { background: var(--ec-bleu-50); }
#ec-app .ec-di-table { overflow: visible; }

/* ═══ « Suivi des contacts » (29.09.2026, maquette) ════════════════════════
   Fenêtre étroite ; une carte par personne avec sa frise en quatre temps ;
   le pied gris reste collé en bas quand la liste défile. */
.ec-voile .ec-di-modale.ec-di-suivi { width: min(600px, 100%); padding: 22px 22px 0; }
#ec-app .ec-di-suivi .fermer { top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 9px; background: #f1f3f8; color: var(--ec-encre); }
#ec-app .ec-di-suivi .fermer:hover { background: #e6eaf2; }
#ec-app .ec-di-suivi .ec-di-sur { margin: 0 44px 4px 0; }
#ec-app .ec-di-suivi h3 { margin: 0 44px 0 0; font-size: 24px; letter-spacing: -.02em; }
#ec-app .ec-di-suivi .ec-di-meta { margin: 4px 44px 0 0; }
#ec-app .ec-di-suivi .ec-di-avance { gap: 8px; margin: 16px 0 14px; }
#ec-app .ec-di-suivi .ec-di-avance > span:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
#ec-app .ec-di-suivi .ec-di-avance em { font-style: normal; font-weight: 700; color: #5b6887; }
#ec-app .ec-di-suivi .ec-di-avance em.ok { color: var(--ec-vert); }
#ec-app .ec-di-suivi .ec-di-jauge { height: 7px; border-radius: 4px; }
#ec-app .ec-di-suivi .ec-di-pers { gap: 10px; }
/* La feuille retire toutes les ombres : les contours sont de vraies bordures. */
#ec-app .ec-di-suivi .ec-di-k { padding: 14px 16px; border: 1px solid #dfe5ef; border-radius: 12px; }
#ec-app .ec-di-suivi .ec-di-k-tete { align-items: flex-start; gap: 8px; }
#ec-app .ec-di-suivi .ec-di-k-tete b { font-size: 14.5px; }
#ec-app .ec-di-suivi .ec-di-k-tete small { margin-top: 2px; }
#ec-app .ec-di-suivi .ec-di-k-tete .ec-di-st { height: 24px; font-size: 11.5px; }
#ec-app .ec-di-suivi .ec-di-k-tete .ec-icone-btn { width: 24px; height: 24px; color: var(--ec-doux); }
/* La frise : quatre temps sur une ligne, la ligne bleue jusqu'au temps en cours. */
#ec-app .ec-di-frise { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 0; padding: 0; }
#ec-app .ec-di-frise::before, #ec-app .ec-di-frise::after { content: ""; position: absolute; top: 5px; left: 5px; height: 3px; border-radius: 2px; }
#ec-app .ec-di-frise::before { right: 0; background: #e3e8f1; }
#ec-app .ec-di-frise::after { width: calc(var(--av) - 5px); background: var(--ec-bleu); }
#ec-app .ec-di-frise li { position: relative; z-index: 1; display: grid; gap: 1px; min-width: 0; padding-right: 6px; }
#ec-app .ec-di-frise i { box-sizing: border-box; width: 13px; height: 13px; margin-bottom: 6px; border: 2px solid #cfd6e3; border-radius: 50%; background: #fff; }
#ec-app .ec-di-frise li.fait i { border-color: var(--ec-bleu); background: var(--ec-bleu); }
#ec-app .ec-di-frise li.cour i { border: 2.5px solid var(--ec-bleu); background: #fff; }
#ec-app .ec-di-frise b { font-size: 12.5px; color: #a3aec4; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ec-app .ec-di-frise small { font-size: 11.5px; color: #a3aec4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ec-app .ec-di-frise li:is(.fait, .cour) b { color: var(--ec-encre); }
#ec-app .ec-di-frise li:is(.fait, .cour) small { color: var(--ec-texte); }
#ec-app .ec-di-suivi .ec-di-rdv { margin-top: 12px; padding: 9px 12px; border-radius: 9px; font-size: 13px; }
#ec-app .ec-di-k-note { margin: 10px 0 0; font-size: 12.5px; font-style: italic; color: var(--ec-texte); }
#ec-app .ec-di-suivi .ec-di-plus { margin-top: 12px; }
/* Le pied gris, collé en bas de la fenêtre. */
#ec-app .ec-di-suivi .ec-di-suivi-pied { position: sticky; bottom: 0; z-index: 2; margin: 20px -22px 0; padding: 14px 22px; border-top: 1px solid var(--ec-trait); background: #f8f9fb; }
#ec-app .ec-di-suivi-pied small { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--ec-texte); }
#ec-app .ec-di-suivi-pied > span { display: flex; gap: 8px; flex: none; }
@media (max-width: 560px) {
  #ec-app .ec-di-suivi-pied { flex-wrap: wrap; }
  #ec-app .ec-di-frise b { font-size: 11.5px; }
}

/* Occupation anonyme par les autres clients (29.09.2026). */
#ec-app .ec-occupe { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 7px; border-radius: 6px; background: #eef0f4; color: #6b7489; font-size: 10.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ec-app .ec-occupe svg { flex: none; }
#ec-app .ec-occupe > span { display: grid; min-width: 0; }
#ec-app .ec-occupe > span b { font-weight: 700; color: #5b6478; }
#ec-app .ec-occupe { white-space: normal; }

/* ── Équipe déjà réservée (29.09.2026) ─────────────────────────────────────
   Étape 1 : un type pris aux dates connues est grisé, non cliquable.
   Étape 2 : les jours déjà pris de l'équipe choisie. Panneau du jour : l'état
   des deux équipes, sans le grand bloc vide « Rien ce jour-là ». */
#ec-app .ec-type.pris { cursor: not-allowed; background: #f3f4f7; border-color: var(--border); box-shadow: none; opacity: 1; }
#ec-app .ec-type.pris svg, #ec-app .ec-type.pris b { color: #9aa3b5; }
#ec-app .ec-type.pris small { color: #b4541a; font-weight: 600; }
.ec-types-msg { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.ec-dispo { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 4px; padding: 9px 12px; border-radius: 8px; background: #f3f4f7; color: #4a5575; font-size: 12.5px; line-height: 1.45; }
.ec-dispo svg { flex: none; margin-top: 1px; color: #9aa3b5; }
.ec-dispo b { display: block; color: var(--navy, #071442); font-weight: 700; }
.ec-dispo.libre { background: var(--ec-vert-50); color: #1c6b41; }
.ec-dispo.libre svg { color: var(--ec-vert); }
.ec-dispo-jour { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ec-dispo-eq { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--ec-vert-50); }
.ec-dispo-eq svg { grid-row: span 2; color: var(--ec-vert); }
.ec-dispo-eq b { font-size: 12.5px; font-weight: 700; color: var(--navy, #071442); }
.ec-dispo-eq em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #1c6b41; }
.ec-dispo-eq.pris { background: #f3f4f7; }
.ec-dispo-eq.pris svg { color: #9aa3b5; }
.ec-dispo-eq.pris em { color: #6b7488; }
.ec-jour-rien { margin: 0; padding: 4px 2px; color: var(--muted, #52658e); font-size: 12.5px; }
#ec-app .ec-jour-detail .tete { gap: 10px; margin-bottom: 12px; }
#ec-app .ec-btn-petit { height: 32px; padding: 0 12px; gap: 6px; font-size: 12.5px; white-space: nowrap; }

/* ── Vue Mois / Semaine (01.10.2026) ─────────────────────────────────────── */
.ec-vue-cal { display: inline-flex; gap: 3px; margin-left: auto; padding: 3px; border-radius: 10px; background: #f1f4fa; }
.ec-vue-cal button { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--muted, #52658e); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ec-vue-cal button[aria-pressed="true"] { background: #fff; color: var(--blue, #0b4dff); box-shadow: 0 1px 2px rgba(9, 22, 56, .08); }
.ec-vue-cal button:focus-visible { outline: 2px solid var(--blue, #0b4dff); outline-offset: 1px; }
.ec-cal-tete h2 small { margin-left: 8px; color: var(--muted, #52658e); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.ec-grille-semaine .jr b { margin-left: 4px; color: var(--ec-encre, #071442); font-weight: 800; }
.ec-grille-semaine .ec-cellule { min-height: 420px; }
.ec-grille-semaine .ec-cellule .n { display: none; }
.ec-grille-semaine .ec-cellule.auj { background: color-mix(in srgb, var(--blue, #0b4dff) 4%, #fff); }
.ec-grille-semaine .ec-evt { margin-top: 8px; }
.ec-jsem { display: none; }

@media (max-width: 760px) {
  .ec-vue-cal { margin-left: 0; }
  /* Sur téléphone, la semaine se lit en liste : un jour par ligne. */
  .ec-grille-semaine { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; }
  .ec-grille-semaine .jr { display: none; }
  .ec-grille-semaine .ec-cellule { min-height: 64px; border-right: 0; }
  .ec-grille-semaine .ec-cellule .n { display: inline; }
  .ec-grille-semaine .ec-jsem { display: inline; margin-left: 8px; color: var(--muted, #52658e); font-size: 12.5px; font-weight: 600; text-transform: capitalize; }
}

/* ── Semaine avec les heures (01.10.2026) ────────────────────────────────── */
.ec-grille-semaine { display: none !important; }
.ec-semaine-heures { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ec-hentete, .ec-hjournee { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap: 4px; }
.ec-hentete { padding: 4px 0 8px; }
.ec-hjour { padding: 4px 0; border-radius: 8px; text-align: center; cursor: pointer; }
.ec-hjour:hover { background: #f3f6fb; }
.ec-hjour small { display: block; color: var(--muted, #52658e); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ec-hjour b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; font-size: 16px; font-weight: 800; color: var(--ec-encre, #071442); }
.ec-hjour.auj b { border-radius: 50%; background: var(--blue, #0b4dff); color: #fff; font-size: 14.5px; }
.ec-hjour.choisi { background: var(--blue-50, #edf3ff); }
.ec-hjournee { padding: 4px 0 8px; border-bottom: 1px solid #e8edf5; }
.ec-hjournee > span { align-self: center; padding-right: 8px; color: var(--muted, #52658e); font-size: 11px; text-align: right; }
.ec-hjournee > div { display: grid; align-content: start; gap: 4px; min-width: 0; cursor: pointer; }
.ec-hjournee .ec-evt, .ec-hjournee .ec-occupe { margin: 0; }
.ec-hcorps { display: grid; grid-template-columns: 56px minmax(0, 1fr); flex: 1; min-height: 0; padding-top: 10px; overflow-y: auto; }
.ec-hheures { position: relative; }
.ec-hheures span { position: absolute; right: 8px; transform: translateY(-50%); color: var(--muted, #52658e); font-size: 11px; font-variant-numeric: tabular-nums; }
.ec-hjours { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
  background-image: linear-gradient(to bottom, #e6ebf3 1px, transparent 1px); }
.ec-hcol { position: relative; border-radius: 8px; background: rgba(248, 249, 251, .72); cursor: pointer; }
.ec-hcol:hover { background: rgba(238, 242, 248, .8); }
.ec-hcol.we { background: rgba(241, 243, 247, .9); }
.ec-hcol.choisi { background: rgba(237, 243, 255, .65); box-shadow: inset 0 0 0 1.5px var(--blue, #0b4dff); }
.ec-hbloc { position: absolute; display: flex; z-index: 1; }
.ec-hbloc .ec-evt { flex: 1; min-width: 0; margin: 0; overflow: hidden; }
.ec-evt-h { padding: 5px 7px !important; font-size: 11.5px !important; align-content: start; }
.ec-evt-h b { font-size: 12px !important; }
.ec-maintenant { position: absolute; left: 0; right: 0; z-index: 2; height: 2px; background: #e5484d; pointer-events: none; }
.ec-maintenant::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }

@media (max-width: 760px) {
  .ec-semaine-heures { display: none; }
  .ec-grille-semaine { display: grid !important; }
}

/* ── Calendrier des dates (02.10.2026) : les jours où l'équipe est déjà
   réservée sont grisés et hachurés, et ne se choisissent pas. ───────────── */
.ec-dp-cadre { display: block; }
.ec-dp-champ { width: 100%; background: #fff; text-align: left; cursor: pointer; font: inherit; font-weight: 600; color: var(--navy, #071442); transition: border-color .15s, box-shadow .15s; }
.ec-dp-champ svg { flex: none; color: #4d5b7c; }
.ec-dp-champ .vide { color: var(--ec-pale, #95a2bc); font-weight: 500; }
.ec-dp-champ:hover { border-color: #c3d4f2; }
.ec-dp-champ[aria-expanded="true"], .ec-dp-champ:focus-visible { outline: 0; border-color: var(--blue, #0b4dff); box-shadow: 0 0 0 3px rgba(11, 77, 255, .14); }
.en-erreur .ec-dp-champ { border-color: var(--ec-rouge, #e5484d); }
.ec-chg-ligne .ec-dp-champ { height: 38px; padding: 0 10px; gap: 8px; font-size: 13px; }

.ec-dp { position: fixed; z-index: 300; width: 292px; padding: 12px; border-radius: 14px; background: #fff; color: var(--navy, #071442);
  box-shadow: 0 0 0 1px rgba(7, 20, 66, .07), 0 18px 44px -12px rgba(9, 22, 56, .35); font: 13px/1.3 Manrope, Inter, system-ui, sans-serif;
  animation: ec-dp-in .16s cubic-bezier(.22, 1, .36, 1); transform-origin: top left; }
@keyframes ec-dp-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.ec-dp-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ec-dp-tete b { font-size: 14px; font-weight: 800; }
.ec-dp-nav { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: #f3f6fc; color: var(--navy, #071442); cursor: pointer; }
.ec-dp-nav:hover { background: #e8eefa; }
.ec-dp-nav:disabled { opacity: .35; cursor: default; }
.ec-dp-sem, .ec-dp-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ec-dp-sem span { padding: 4px 0; text-align: center; color: #8a99b8; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; }
.ec-dp-j { position: relative; height: 34px; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.ec-dp-j:hover { background: #edf3ff; }
.ec-dp-j:focus-visible { outline: 2px solid var(--blue, #0b4dff); outline-offset: 1px; }
.ec-dp-j.we { color: #8a99b8; }
.ec-dp-j.auj { box-shadow: inset 0 0 0 1.5px #b9cbf0; }
.ec-dp-j.entre { border-radius: 0; background: #edf3ff; }
.ec-dp-j.borne { background: #dbe6ff; color: var(--blue, #0b4dff); }
.ec-dp-j.choisi { background: var(--blue, #0b4dff); color: #fff; box-shadow: 0 4px 10px -4px rgba(11, 77, 255, .7); }
.ec-dp-j.hors { color: #c3cbdb; background: none; cursor: not-allowed; }
/* Réservé : grisé, hachuré, barré — lisible sans la couleur. */
.ec-dp-j.pris { color: #9aa3b5; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1.5px;
  background: repeating-linear-gradient(135deg, #eef1f6 0 4px, #e3e7ef 4px 8px); }
.ec-dp-j.hors:hover { background: none; }
.ec-dp-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #eef3fb; color: #52658e; font-size: 11.5px; }
.ec-dp-leg span { display: inline-flex; align-items: center; gap: 6px; }
.ec-dp-leg i { width: 14px; height: 14px; border-radius: 4px; }
.ec-dp-leg i.pris { background: repeating-linear-gradient(135deg, #eef1f6 0 3px, #d6dbe6 3px 6px); }
.ec-dp-leg i.libre { background: #fff; box-shadow: inset 0 0 0 1.5px #d9e2f1; }
@media (max-width: 380px) { .ec-dp { width: calc(100vw - 16px); } }
@media (prefers-reduced-motion: reduce) { .ec-dp { animation: none; } }

/* ── Demander un accès · Mot de passe oublié · Nouveau mot de passe (05.10.2026) ── */
#ec-app a.ec-lg-aide-lien { text-decoration: none; transition: background .15s, box-shadow .15s; }
#ec-app a.ec-lg-aide-lien:hover { background: #eef3ff; box-shadow: inset 0 0 0 1px #d6e2ff; }
#ec-app a.ec-lg-aide-lien:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#ec-app .ec-lg-aide-lien > span:nth-child(2) { flex: 1; min-width: 0; }
#ec-app .ec-lg-aide-lien .fl { flex: none; color: var(--blue); display: grid; }
#ec-app .ec-lg-opt { font-style: normal; font-weight: 500; color: var(--muted); }
#ec-app .ec-lg-form .ec-saisie.ec-saisie-err { border-color: #e8a59c !important; background: #fff8f7 !important; }
#ec-app .ec-lg-err { display: block; margin-top: 5px; font-style: normal; font-size: 12px; font-weight: 600; color: #c8321f; }
#ec-app .ec-lg-form .ec-saisie.ec-saisie-zone { height: auto; align-items: flex-start; padding: 10px 14px; }
#ec-app .ec-lg-form .ec-saisie-zone textarea { flex: 1; min-width: 0; min-height: 66px; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--navy); resize: vertical; }
#ec-app .ec-lg-fini { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; margin: 4px 0 22px; padding: 14px 16px; border-radius: 12px; background: #e9f8f0; color: #0b5d34; font-size: 13.5px; line-height: 1.5; }
#ec-app .ec-lg-fini .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #0f8a4d; }
#ec-app .ec-lg-fini b:first-child { display: block; }
#ec-app .ec-lg-fini b { color: #0b5d34; }
#ec-app .ec-lg-retour { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 16px; color: var(--blue); font-size: 13px; font-weight: 700; text-decoration: none; }
#ec-app .ec-lg-retour:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ── Demi-journées (06.10.2026) ─────────────────────────────────────────────
   Une équipe réservée le matin reste réservable l'après-midi, et inversement :
   la carte d'équipe le dit, l'horaire se choisit en cartes (la moitié prise
   barrée, avec le motif), le calendrier hachure la moitié prise du jour. */
#ec-app .ec-type.partiel small { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: #fff4e6; color: #a5520f; font-weight: 700; }
#ec-app .ec-type.partiel small svg { flex: none; }
#ec-app .ec-type.partiel.actif small { background: #e6f7ee; color: #0f7a45; }
.ec-types-note { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 2px; color: #52658e; font-size: 12.5px; line-height: 1.45; }
.ec-types-note svg { flex: none; margin-top: 1px; color: #4f8cf7; }
.ec-horaires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.ec-horaire { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #d9e2f1; border-radius: 10px; background: #fff; color: var(--navy, #071442); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ec-horaire:hover:not(:disabled) { border-color: #9db8f5; }
.ec-horaire:focus-visible { outline: 2px solid var(--blue, #0b4dff); outline-offset: 2px; }
.ec-horaire b { font-size: 13.5px; font-weight: 800; }
.ec-horaire span { color: #52658e; font-size: 12px; font-variant-numeric: tabular-nums; }
.ec-horaire em { font-style: normal; font-size: 11.5px; font-weight: 700; }
.ec-horaire.libre em { color: #0f7a45; }
.ec-horaire.actif { border-color: var(--blue, #0b4dff); background: #f3f7ff; box-shadow: 0 0 0 1px var(--blue, #0b4dff); }
.ec-horaire.pris { cursor: not-allowed; background: #f3f4f7; color: #9aa3b5; }
.ec-horaire.pris b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ec-horaire.pris span { color: #9aa3b5; }
.ec-horaire.pris em { color: #b4541a; }
@media (max-width: 560px) { .ec-horaires { grid-template-columns: minmax(0, 1fr); } }
.ec-dp-j.demi-matin { background: repeating-linear-gradient(135deg, #f6e7d3 0 3px, #ecd2ae 3px 6px) top / 100% 50% no-repeat; }
.ec-dp-j.demi-apres { background: repeating-linear-gradient(135deg, #f6e7d3 0 3px, #ecd2ae 3px 6px) bottom / 100% 50% no-repeat; }
.ec-dp-j.demi-matin::after, .ec-dp-j.demi-apres::after { content: ""; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #e08a2c; }
.ec-dp-j.demi-matin.choisi, .ec-dp-j.demi-apres.choisi { background: var(--blue, #0b4dff); color: #fff; }
.ec-dp-leg i.demi { background: linear-gradient(#fff 0 50%, transparent 50%), repeating-linear-gradient(135deg, #f6e7d3 0 3px, #ecd2ae 3px 6px); box-shadow: inset 0 0 0 1.5px #ecd2ae; }
.ec-dp-info { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 10px; border-radius: 9px; background: #fff7ed; color: #7a3f0b; font-size: 12px; line-height: 1.45; }
.ec-dp-info svg { flex: none; margin-top: 1px; }
.ec-dispo-eq.partiel em { color: #a5520f; }

/* Occupation d'un autre client posée aux heures (06.10.2026) : grise et hachurée,
   distincte des réservations du client, sans clic (rien à ouvrir). */
.ec-evt.ec-evt-occ { background: repeating-linear-gradient(135deg, #f1f3f7 0 6px, #e8ebf1 6px 12px); color: #5b6478; box-shadow: inset 3px 0 0 #b6bdcc; cursor: default; }
.ec-evt.ec-evt-occ svg { color: #8a93a8; }
.ec-evt.ec-evt-occ b { color: #4a5368; }


/* ═══ Portail client au gabarit de référence (06.10.2026, maquette validée
   « parfait ») — celui de Demandes clients au bureau. Tout vit sous
    (pages ROUTES_REF de ec.js) : rien ne fuit ailleurs. ═══ */

/* ═══ Maquette : Planning / Réservations du portail client au design de
   référence (celui de Demandes clients du bureau). Préfixe pr- : rien ne
   se mélange avec ec.css. ═══════════════════════════════════════════════ */
#ec-app .pr {
  --fond: #f5f7fb; --trait: #e8edf5; --faint: #8a99b8; --muted: #52658e;
  --vert: #0f8a4d; --vert-50: #e6f7ee; --orange: #c2660c; --orange-50: #fdf1e3; --rouge: #c8321f; --rouge-50: #fdecea; --violet: #6d35ff;
  --ombre-ref: 0 1px 2px rgba(9,22,56,.05), 0 8px 24px -14px rgba(9,22,56,.18);
}
#ec-app .ec-contenu.pr { background: linear-gradient(180deg, #f3f6fc, #eef2f9); min-height: 100%; }
.pr .carte { padding: 18px 20px; border-radius: 12px; background: #fff; box-shadow: var(--ombre-ref); min-width: 0; }
.pr .lab { display: block; color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pr .lien { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pr .deg2 { background: linear-gradient(110deg, #0878f9, #143ff4 44%, #5d35f1 72%, #973dec); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr h2 { margin: 0; font-size: 14px; font-weight: 800; color: var(--navy); }
.pr h2 .n { margin-left: 4px; color: var(--faint); font-weight: 600; font-size: 12.5px; }
.pr .tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pr .tete .droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Bandeau */
.pr .id { display: grid; grid-template-columns: 360px minmax(0, 1fr); padding: 0; overflow: hidden; margin-bottom: 16px; }
.pr .pan { padding: 20px 22px; background: linear-gradient(160deg, #0b1d5c, #071442 70%); color: #fff; }
.pr .pan .lab { color: #8fa3d8; }
.pr .pan strong { display: block; margin: 6px 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.pr .pan p { margin: 0; color: #b9c6ea; font-size: 12.5px; line-height: 1.5; }
.pr .rail { display: flex; height: 6px; margin-top: 18px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.16); }
.pr .rail i { height: 100%; }
.pr .rail-l { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 10.5px; color: #8fa3d8; font-weight: 600; }
.pr .faits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pr .fait { padding: 18px 20px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.pr .fait + .fait { box-shadow: inset 1px 0 0 var(--trait); }
.pr .fait b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
.pr .fait b.f-v { color: var(--vert); } .pr .fait b.f-o { color: var(--orange); } .pr .fait b.f-bl { color: var(--blue); } .pr .fait b.f-g { color: #b4bdd0; }
.pr .fait small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.pr .fait .lien { justify-self: start; margin-top: 4px; }

/* Corps */
.pr .grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.pr .col { display: grid; gap: 16px; min-width: 0; }
.pr .seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--fond); }
.pr .seg button { height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pr .seg button.on { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(9,22,56,.1); }
.pr .seg button b { margin-left: 3px; color: var(--faint); font-weight: 600; font-size: 12px; }
.pr .nav-r { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: var(--fond); color: var(--navy); cursor: pointer; }
.pr .rech { display: flex; align-items: center; gap: 8px; flex: 0 1 300px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--fond); color: var(--faint); font-size: 12.5px; }

/* Semaine aux heures */
.pr .sem { --h: 42px; display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
.pr .sem-tete { display: contents; }
.pr .sem-tete > div { padding: 6px 4px 10px; text-align: center; border-bottom: 1px solid var(--trait); }
.pr .sem-tete small { display: block; color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pr .sem-tete b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin-top: 3px; border-radius: 50%; font-size: 15px; font-weight: 800; color: var(--navy); }
.pr .sem-tete .auj b { background: var(--blue); color: #fff; }
.pr .sem-tete .choisi { background: #f3f7ff; border-radius: 10px 10px 0 0; box-shadow: inset 0 -2px 0 var(--blue); }
.pr .sem-tete .dispo { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; }
.pr .dispo.libre { color: var(--vert); } .pr .dispo.demi { color: var(--orange); } .pr .dispo.pris { color: var(--faint); }
.pr .heures { position: relative; }
.pr .heures span { position: absolute; right: 8px; transform: translateY(-50%); color: var(--faint); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr .colj { position: relative; border-left: 1px solid var(--trait); background-image: linear-gradient(var(--trait) 1px, transparent 1px); background-size: 100% var(--h); }
.pr .colj.we { background-color: #fafbfd; }
.pr .colj.choisi { background-color: #f8faff; }
.pr .bloc { position: absolute; left: 4px; right: 4px; display: grid; align-content: start; gap: 1px; padding: 6px 8px; border-radius: 8px; font-size: 11px; line-height: 1.3; overflow: hidden; }
.pr .bloc b { font-size: 11.5px; font-weight: 800; }
.pr .bloc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .bloc.occ { background: repeating-linear-gradient(135deg, #f1f3f7 0 6px, #e8ebf1 6px 12px); color: #5b6478; box-shadow: inset 3px 0 0 #b6bdcc; }
.pr .bloc.occ b { color: #4a5368; }
.pr .bloc.libre { border: 1.5px dashed #9bd3b4; background: #f2fbf6; color: #0b6139; cursor: pointer; }
.pr .bloc.libre .lien { justify-self: start; margin-top: 2px; color: #0b6139; font-size: 11px; }
.pr .bloc.conf { background: var(--vert-50); color: #0b6139; box-shadow: inset 3px 0 0 var(--vert); }
.pr .maint { position: absolute; left: 0; right: 0; height: 2px; background: var(--rouge); }
.pr .maint::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); }
.pr .leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.pr .leg span { display: inline-flex; align-items: center; gap: 6px; }
.pr .leg i { width: 12px; height: 12px; border-radius: 4px; }
.pr .defile { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }   /* la dernière heure (18:00) dépasse d'une demi-ligne */
.pr .defile > .sem { min-width: 640px; }

/* Liste des demandes */
.pr table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pr th { padding: 0 8px 10px; border-bottom: 1px solid var(--trait); color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.pr td { padding: 10px 8px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.pr tbody tr:not(.mois):hover td { background: #fafbfd; cursor: pointer; }
.pr tr.mois td { padding: 14px 8px 8px; border-bottom: 0; }
.pr tr.mois b { font-size: 12.5px; font-weight: 800; }
.pr tr.mois span { margin-left: 8px; color: var(--faint); font-size: 11.5px; font-weight: 600; }
.pr .eq { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.pr .eq i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--blue-50); color: var(--blue); }
.pr .eq i.gc { background: #f2ecff; color: var(--violet); }
.pr .quand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.pr .quand b { display: block; font-size: 12.5px; }
.pr .quand small { display: block; color: var(--faint); font-size: 11px; }
.pr .cal { width: 38px; height: 40px; border-radius: 10px; background: var(--blue-50); display: grid; place-items: center; align-content: center; line-height: 1.05; flex: none; }
.pr .cal small { color: var(--blue); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.pr .cal b { font-size: 15px; font-weight: 800; color: var(--navy); }
.pr .cal.r { background: var(--rouge-50); } .pr .cal.r small { color: var(--rouge); }
.pr .cal.g { background: var(--fond); } .pr .cal.g small { color: var(--faint); }
.pr .lieu b { display: block; max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .lieu small { display: block; color: var(--faint); font-size: 11px; }
.pr .pj { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--fond); color: var(--muted); font-size: 11.5px; font-weight: 700; }
.pr .pas { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pr .pas i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pr .pas.v { background: var(--vert-50); color: var(--vert); } .pr .pas.r { background: var(--rouge-50); color: var(--rouge); } .pr .pas.g { background: var(--fond); color: var(--muted); } .pr .pas.o { background: var(--orange-50); color: var(--orange); }
.pr .recue { display: block; margin-top: 3px; color: var(--faint); font-size: 11px; white-space: nowrap; }

/* Colonne de droite */
.pr .alerte { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
.pr .alerte + .alerte { border-top: 1px solid var(--trait); }
.pr .alerte .ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--rouge-50); color: var(--rouge); font-weight: 800; }
.pr .alerte b { display: block; font-size: 12.5px; }
.pr .alerte small { display: block; color: var(--muted); font-size: 11.5px; }
.pr .alerte .lien { display: inline-block; margin-top: 4px; font-size: 11.5px; }
.pr .jour-eq { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; }
.pr .jour-eq + .jour-eq { border-top: 1px solid var(--trait); }
.pr .jour-eq b { display: block; font-size: 12.5px; }
.pr .jour-eq small { display: block; color: var(--muted); font-size: 11.5px; }
.pr .demis { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 6px; }
.pr .demis span { height: 18px; display: grid; place-items: center; border-radius: 5px; font-size: 10px; font-weight: 800; }
.pr .demis .l { background: var(--vert-50); color: var(--vert); }
.pr .demis .p { background: repeating-linear-gradient(135deg, #f1f3f7 0 4px, #e3e7ee 4px 8px); color: #7a8399; }
.pr .ico-eq { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--blue-50); color: var(--blue); }
.pr .ico-eq.gc { background: #f2ecff; color: var(--violet); }
.pr .bande7 { display: grid; grid-template-columns: 74px repeat(7, minmax(0, 1fr)); gap: 3px; align-items: center; font-size: 11px; }
.pr .bande7 .j { text-align: center; color: var(--faint); font-weight: 800; font-size: 10px; text-transform: uppercase; line-height: 1.2; }
.pr .bande7 .j b { display: block; color: var(--navy); font-size: 12.5px; }
.pr .bande7 .nom { font-weight: 700; font-size: 11.5px; }
.pr .case { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; height: 26px; }
.pr .case i { border-radius: 3px; }
.pr .case i.l { background: #bfe8d1; } .pr .case i.p { background: repeating-linear-gradient(135deg, #e9ecf2 0 3px, #d6dbe6 3px 6px); } .pr .case i.we { background: #f3f5f9; }
.pr .barre { display: grid; grid-template-columns: 82px minmax(0, 1fr) 22px; gap: 10px; align-items: center; padding: 6px 0; font-size: 12.5px; font-weight: 700; }
.pr .barre .t { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--fond); }
.pr .barre .t i { height: 100%; }
.pr .barre em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.pr .leg-b { display: flex; gap: 12px; margin-top: 8px; color: var(--muted); font-size: 11px; font-weight: 600; }
.pr .leg-b span { display: inline-flex; align-items: center; gap: 5px; } .pr .leg-b i { width: 8px; height: 8px; border-radius: 2px; }

@media (max-width: 1240px) { .pr .grille { grid-template-columns: minmax(0, 1fr); } .pr .faits { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pr .fait:nth-child(4) { box-shadow: none; } }
@media (max-width: 1240px) { .pr .id { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .pr .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr .fait { padding: 14px 16px; box-shadow: inset 0 1px 0 var(--trait) !important; }
  .pr .fait:nth-child(2n) { box-shadow: inset 1px 1px 0 var(--trait) !important; }
  .pr .carte { padding: 16px; }
  .pr .tete .droite { margin-left: 0; width: 100%; justify-content: space-between; }
  .pr .liste-dem .col-lieu, .pr .liste-dem .col-doc { display: none; }
  .pr .rech { flex-basis: 100%; }
  /* Téléphone : les filtres défilent, l'équipe se réduit à son icône, la date de réception se tait. */
  .pr .liste-dem .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pr .eq { gap: 0; font-size: 0; }
  .pr .recue { display: none; }
  .pr th, .pr td { padding-left: 4px; padding-right: 4px; }
}
/* ── Briques des autres pages (même gabarit) ───────────────────────────── */
.pr .pr-filtres { margin: -4px 0 12px; }
.pr .pr-sel { flex: 0 0 auto; gap: 8px; color: var(--navy); font-weight: 700; cursor: pointer; }
.pr .pr-sel b { font-weight: 700; } .pr .pr-chev { color: var(--faint); }
.pr .pr-vide { display: grid; justify-items: center; gap: 4px; padding: 34px 16px; text-align: center; }
.pr .pr-vide > span { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 14px; background: var(--fond); color: #8a99b8; }
.pr .pr-vide b { font-size: 13.5px; } .pr .pr-vide small { max-width: 44ch; color: var(--muted); font-size: 12px; line-height: 1.5; }
.pr .pr-vide .lien { margin-top: 8px; }
.pr .pr-muet { margin: 0; color: var(--muted); font-size: 12.5px; }
.pr .pr-chantier { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px; border-radius: 10px; background: #fafbfd; }
.pr .pr-vignette, .pr .pr-img { display: grid; place-items: center; border-radius: 10px; color: rgba(255,255,255,.85); background: linear-gradient(135deg, #3d4a63, #1e2638); }
.pr .pr-vignette { height: 84px; }
.pr .pr-img.p2 { background: linear-gradient(135deg, #4b5a74, #262f44); } .pr .pr-img.p3 { background: linear-gradient(135deg, #7a6a52, #3a3328); }
.pr .pr-ch-corps { display: grid; gap: 6px; min-width: 0; align-content: center; }
.pr .pr-ch-tete { display: flex; align-items: center; gap: 10px; } .pr .pr-ch-tete b { font-size: 14px; }
.pr .pr-ch-tete .lien { margin-left: auto; }
.pr .pr-ch-corps > small { display: flex; align-items: center; gap: 4px; color: var(--faint); font-size: 11.5px; }
.pr .pr-prog { display: flex; align-items: center; gap: 10px; } .pr .pr-prog b { font-size: 12px; font-variant-numeric: tabular-nums; }
.pr .pr-prog .t { flex: 1; height: 6px; border-radius: 3px; background: var(--fond); overflow: hidden; } .pr .pr-prog .t i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.pr .pr-ch-pied { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 11.5px; }
.pr .pr-ch-pied span { display: inline-flex; align-items: center; gap: 4px; } .pr .pr-ch-pied b { color: var(--navy); }
.pr .pr-act { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; }
.pr .pr-act + .pr-act { border-top: 1px solid var(--trait); }
.pr .pr-act b { display: block; font-size: 12.5px; } .pr .pr-act small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .pr-act em { font-style: normal; color: var(--faint); font-size: 11px; white-space: nowrap; }
.pr .pr-pt { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--blue-50); color: var(--blue); }
.pr .pr-pt.v { background: var(--vert-50); color: var(--vert); } .pr .pr-pt.r { background: var(--rouge-50); color: var(--rouge); }
.pr .pr-jour-tete { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 10px; } .pr .pr-jour-tete b { font-size: 12.5px; } .pr .pr-jour-tete span { color: var(--faint); font-size: 11.5px; font-weight: 600; }
.pr .pr-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pr .pr-galerie figure { margin: 0; padding: 6px; border-radius: 12px; background: #fafbfd; cursor: pointer; }
.pr .pr-galerie figure.sel { background: #f3f7ff; box-shadow: inset 0 0 0 2px var(--blue); }
.pr .pr-galerie .pr-img { aspect-ratio: 4 / 3; }
.pr .pr-galerie figcaption { padding: 8px 4px 2px; } .pr .pr-galerie figcaption b { display: block; font-size: 12.5px; } .pr .pr-galerie figcaption small { color: var(--faint); font-size: 11px; }
.pr .pr-img.grand { aspect-ratio: 4 / 3; } .pr .pr-img.moyen { aspect-ratio: 16 / 7; }
.pr .pr-infos { display: grid; margin-top: 12px; }
.pr .pr-info { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 0; font-size: 12.5px; }
.pr .pr-info + .pr-info { border-top: 1px solid var(--trait); }
.pr .pr-info > span { color: var(--faint); } .pr .pr-info small { color: var(--muted); font-size: 11.5px; } .pr .pr-info b { font-weight: 700; }
.pr .pr-actions { display: grid; gap: 10px; justify-items: center; margin-top: 14px; } .pr .pr-actions .ec-btn { width: 100%; justify-content: center; }
.pr .pr-deux { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; } .pr .pr-apercu { min-height: 420px; }
.pr .pr-etapes { counter-reset: e; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pr .pr-etapes li { counter-increment: e; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.pr .pr-etapes li::before { content: counter(e); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-50); color: var(--blue); font-size: 11.5px; font-weight: 800; }
.pr .pr-etapes b { display: block; font-size: 12.5px; } .pr .pr-etapes small { grid-column: 2; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.pr .pr-astuce { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 10px; background: var(--fond); }
.pr .pr-astuce > svg { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: #fff; color: var(--blue); }
.pr .pr-astuce b { display: block; font-size: 12.5px; } .pr .pr-astuce small { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
/* Messages */
.pr .pr-carte-msg { padding: 0; overflow: hidden; } .pr .pr-carte-msg > .tete { padding: 18px 20px 0; }
.pr .pr-msg { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 560px; border-top: 1px solid var(--trait); margin-top: 4px; }
.pr .pr-fils { padding: 14px 12px; border-right: 1px solid var(--trait); } .pr .pr-fils .pr-filtres { margin: 0 0 8px; }
.pr .pr-fil { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pr .pr-fil.on { background: #f3f7ff; box-shadow: inset 3px 0 0 var(--blue); }
.pr .pr-fil b { display: block; font-size: 12.5px; } .pr .pr-fil small, .pr .pr-fil em { display: block; color: var(--muted); font-size: 11px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .pr-fil em { color: var(--faint); } .pr .pr-fil time { color: var(--faint); font-size: 10.5px; white-space: nowrap; }
.pr .pr-fil-ouvert { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.pr .pr-fil-tete { padding: 14px 18px; border-bottom: 1px solid var(--trait); } .pr .pr-fil-tete b { display: block; font-size: 13px; } .pr .pr-fil-tete small { color: var(--faint); font-size: 11.5px; }
.pr .pr-bulles { padding: 16px 18px; } .pr .pr-bulle { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.pr .pr-bulle small { color: var(--faint); font-size: 11px; } .pr .pr-bulle small b { color: var(--navy); }
.pr .pr-bulle p { margin: 6px 0 0; padding: 12px 14px; border-radius: 4px 12px 12px 12px; background: var(--fond); font-size: 12.5px; line-height: 1.55; max-width: 62ch; }
.pr .pr-saisie { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--trait); }
.pr .pr-saisie > span { flex: 1; height: 38px; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; background: var(--fond); color: var(--faint); font-size: 12.5px; }
.pr .pr-envoi { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
@media (max-width: 1240px) { .pr .pr-deux { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .pr .pr-chantier { grid-template-columns: minmax(0, 1fr); } .pr .pr-vignette { height: 120px; }
  .pr .pr-ch-tete { flex-wrap: wrap; } .pr .pr-ch-tete .lien { margin-left: 0; }
  .pr .pr-msg { grid-template-columns: minmax(0, 1fr); } .pr .pr-fils { border-right: 0; border-bottom: 1px solid var(--trait); }
  .pr .pr-filtres .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
}

/* ── Les éléments déjà en place, habillés au gabarit ──────────────────────
   Les vues gardent leurs gestes (data-action, data-champ) : seul l'habit
   change. Le fond couvre toute la hauteur : pas de blanc en bas. */
#ec-app .ec-principal.ec-ref { min-height: 100vh; min-height: 100dvh; background: linear-gradient(180deg, #f3f6fc, #eef2f9); }
#ec-app .ec-principal.ec-ref .ec-contenu.pr { flex: 1 0 auto; min-height: calc(100dvh - 64px); background: transparent; padding-bottom: 40px; }
#ec-app .ec-contenu.pr > .ec-entete { margin-bottom: 18px; }
/* Segments */
.pr .ec-seg { display: inline-flex; flex-wrap: nowrap; gap: 3px; padding: 3px; border: 0; border-radius: 10px; background: var(--fond); box-shadow: none; }
.pr .ec-seg button { height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: none; }
.pr .ec-seg button.actif { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(9, 22, 56, .1); }
.pr .ec-seg button b { margin-left: 4px; background: none; color: var(--faint); font-weight: 600; font-size: 12px; padding: 0; }
/* Recherche et sélecteur */
.pr .ec-recherche, .pr .ec-select { display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 0; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fond); box-shadow: none; color: var(--faint); }
.pr .ec-recherche { flex: 0 1 300px; }
.pr .ec-recherche input, .pr .ec-select select { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--navy); font: inherit; font-size: 12.5px; outline: none; }
.pr .ec-select select { font-weight: 700; cursor: pointer; }
.pr .ec-recherche:focus-within, .pr .ec-select:focus-within { box-shadow: 0 0 0 2px var(--blue); }
/* Cartes */
.pr .carte .ec-chantiers, .pr .carte .ec-lignes { display: grid; gap: 10px; }
.pr .carte .ec-ligne { padding: 10px 0; border: 0; background: none; }
.pr .carte .ec-ligne + .ec-ligne { border-top: 1px solid var(--trait); }
.pr .alerte .ic.t-o { background: var(--orange-50); color: var(--orange); }
.pr .alerte .ic.t-b { background: var(--blue-50); color: var(--blue); }
.pr .alerte .lien { display: inline-block; margin-top: 4px; font-size: 11.5px; }
.pr .tete .droite { gap: 14px; }
.pr .pr-esp { margin: 12px 0 2px; }
.pr .pr-lab-sec { margin: 14px 0 6px; }
/* Activité récente */
.pr .carte .ec-activite { display: grid; margin: 0; padding: 0; list-style: none; }
.pr .carte .ec-activite li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border: 0; background: none; }
.pr .carte .ec-activite li + li { border-top: 1px solid var(--trait); }
.pr .carte .ec-activite .ec-ico-rond { width: 30px; height: 30px; border-radius: 9px; }
.pr .carte .ec-activite .ec-ico-rond svg { width: 15px; height: 15px; }
.pr .carte .ec-activite strong { font-size: 12.5px; } .pr .carte .ec-activite small { font-size: 11.5px; color: var(--muted); }
.pr .carte .ec-activite time { color: var(--faint); font-size: 11px; white-space: nowrap; }
/* Mes chantiers : une ligne par chantier */
.pr .ec-chantier.ec-ch-oz { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px; border: 0; border-radius: 10px; background: #fafbfd; box-shadow: none; cursor: pointer; }
.pr .ec-chantier.ec-ch-oz:hover { background: #f3f7ff; }
.pr .ec-chantier.ec-ch-oz > :first-child { width: 120px; height: 84px; border-radius: 10px; overflow: hidden; }
.pr .ec-chantier.ec-ch-oz > :first-child img { width: 100%; height: 100%; object-fit: cover; }
.pr .ec-ch-oz h3 { margin: 0 0 4px; font-size: 14px; }
.pr .ec-ch-oz .ec-ch-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--faint); font-size: 11.5px; }
.pr .ec-ch-oz .ec-ch-dates { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; color: var(--muted); font-size: 11.5px; }
.pr .ec-ch-oz .ec-ch-dates b { color: var(--navy); }
.pr .ec-ch-oz .ec-voir { align-self: start; color: var(--blue); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.pr .ec-ch-oz .ec-voir svg { display: none; }
.pr .ec-ch-oz .ec-voir::after { content: " →"; }
/* Photos */
.pr .ec-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pr .ec-carte-photo { margin: 0; padding: 6px; border: 0; border-radius: 12px; background: #fafbfd; box-shadow: none; cursor: pointer; }
.pr .ec-carte-photo.actif { background: #f3f7ff; box-shadow: inset 0 0 0 2px var(--blue); }
.pr .ec-carte-photo > :first-child { aspect-ratio: 4 / 3; width: 100%; border-radius: 9px; overflow: hidden; }
.pr .ec-carte-photo img { width: 100%; height: 100%; object-fit: cover; }
.pr .ec-carte-photo .ligne1 { padding: 8px 4px 0; color: var(--faint); font-size: 11px; }
.pr .ec-carte-photo b { display: block; padding: 2px 4px; font-size: 12.5px; }
.pr .ec-carte-photo .pied { padding: 2px 4px 4px; }
.pr .carte .ec-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #1e2638; }
.pr .carte .ec-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Plans */
.pr .ec-plan-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px; border-radius: 10px; cursor: pointer; }
.pr .ec-plan-item + .ec-plan-item { margin-top: 4px; }
.pr .ec-plan-item.actif { background: #f3f7ff; box-shadow: inset 3px 0 0 var(--blue); }
.pr .ec-plan-item strong { display: block; font-size: 12.5px; } .pr .ec-plan-item .ec-statut { font-size: 11px; }
.pr .pr-apercu .ec-plan-zone { height: min(62vh, 620px); margin-top: 10px; border-radius: 10px; background: var(--fond); overflow: hidden; display: grid; place-items: center; }
.pr .pr-apercu .ec-plan-zone img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pr .pr-apercu .ec-plan-zone iframe { width: 100%; height: 100%; border: 0; }
.pr .carte .ec-coms { display: grid; gap: 10px; max-height: 340px; overflow-y: auto; }
.pr .carte .ec-com-saisie { display: flex; gap: 8px; margin-top: 12px; }
.pr .carte .ec-com-saisie input { flex: 1; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fond); font: inherit; font-size: 12.5px; }
.pr .carte .ec-com-saisie button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
/* Documents */
.pr .ec-table-cadre { overflow-x: auto; }
.pr .ec-table-oz tbody tr { cursor: pointer; }
.pr .ec-table-oz tbody tr.actif td { background: #f3f7ff; }
.pr .ec-table-oz tbody tr.actif td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.pr .ec-table-oz .doc { display: flex; align-items: center; gap: 10px; }
.pr .ec-table-oz .act { display: flex; gap: 8px; color: var(--muted); }
.pr .ec-doc-titre { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.pr .ec-doc-titre strong { display: block; font-size: 13px; }
.pr .carte .ec-apercu { margin-top: 12px; border-radius: 10px; overflow: hidden; }
.pr .carte .ec-apercu img { width: 100%; display: block; }
.pr .ec-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: var(--muted); font-size: 12px; }
/* Messages */
.pr .pr-msg { min-height: 0; height: min(72vh, 680px); }
.pr .pr-fils { overflow-y: auto; }
.pr .pr-fils .ec-mini-onglets { display: inline-flex; gap: 3px; margin-bottom: 8px; padding: 3px; border-radius: 10px; background: var(--fond); }
.pr .pr-fils .ec-mini-onglets button { height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pr .pr-fils .ec-mini-onglets button.actif { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(9, 22, 56, .1); }
.pr .pr-fils .ec-mini-onglets b { margin-left: 3px; color: var(--faint); font-weight: 600; }
.pr .pr-fils .ec-conv { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.pr .pr-fils .ec-conv.actif { background: #f3f7ff; box-shadow: inset 3px 0 0 var(--blue); }
.pr .pr-fils .ec-conv strong { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .pr-fils .ec-conv .qui, .pr .pr-fils .ec-conv .der { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr .pr-fils .ec-conv .droite { display: grid; justify-items: end; gap: 4px; color: var(--faint); font-size: 10.5px; }
.pr .pr-fil-ouvert.ec-fil { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pr .pr-fil-ouvert .ec-fil-tete { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--trait); }
.pr .pr-fil-ouvert .ec-fil-tete strong { display: block; font-size: 13px; } .pr .pr-fil-ouvert .ec-fil-tete small { color: var(--faint); font-size: 11.5px; }
.pr .pr-fil-ouvert .ec-fil-corps { min-height: 0; overflow-y: auto; padding: 16px 18px; }
.pr .pr-fil-ouvert .ec-composer { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--trait); }
.pr .pr-fil-ouvert .ec-composer .champ { flex: 1; }
.pr .pr-fil-ouvert .ec-composer input[type="text"] { width: 100%; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--fond); font: inherit; font-size: 12.5px; }
.pr .pr-fil-ouvert .ec-composer .envoyer { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pr .pr-fil-ouvert .ec-composer .clip { color: var(--muted); cursor: pointer; }
.pr .carte > .ec-photo-chantier, .pr .carte > img { width: 100%; border-radius: 10px; }
/* Factures */
.pr .ec-fact-detail .ec-deux-btns { display: grid; gap: 8px; margin-top: 12px; }
/* Demandes d'intervention */
.pr .carte .ec-di-liste { display: grid; gap: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
.pr .carte .ec-di-carte { border-radius: 10px; background: #fafbfd; box-shadow: none; border: 0; }
/* Planning : la grille aux heures au gabarit */
.pr .pr-cal .ec-grille-cal:not(.ec-grille-semaine) { border-radius: 10px; overflow: hidden; }
.pr .pr-cal .ec-hjour .dispo { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; }
.pr .pr-cal .ec-hjour .dispo.libre { color: var(--vert); } .pr .pr-cal .ec-hjour .dispo.demi { color: var(--orange); } .pr .pr-cal .ec-hjour .dispo.pris { color: var(--faint); }
.pr .ec-evt.ec-evt-libre { display: block; border: 1.5px dashed #9bd3b4; background: #f2fbf6; color: #0b6139; box-shadow: none; cursor: pointer; }
.pr .ec-evt.ec-evt-libre span { display: block; }
.pr .ec-evt.ec-evt-libre .lien { margin-top: 2px; color: #0b6139; font-size: 11px; }
.pr .pr-cal .ec-legende { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); }
.pr .pr-cal .ec-legende i { border-radius: 4px; }
.pr .pr-table-dem { width: 100%; }
.pr .pr-jour .ec-jour-bloc { display: grid; gap: 6px; margin-top: 10px; padding: 12px; border: 0; border-radius: 10px; background: #fafbfd; }
.pr .pr-jour .ec-jour-bloc .lien { justify-self: start; }
.pr .pr-jour .ec-jour-equipe { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pr .pr-jour .ec-jour-equipe .ec-ico-carre { width: 34px; height: 34px; border-radius: 10px; }
.pr .pr-jour .ec-jour-ligne { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; color: var(--muted); font-size: 12px; }
@media (max-width: 680px) {
  .pr .ec-chantier.ec-ch-oz { grid-template-columns: minmax(0, 1fr); }
  .pr .ec-chantier.ec-ch-oz > :first-child { width: 100%; height: 140px; }
  .pr .pr-msg { height: auto; }
  .pr .pr-fil-ouvert .ec-fil-corps { max-height: 60vh; }
  .pr .pr-filtres .ec-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pr .ec-recherche { flex-basis: 100%; }
  .pr .pr-table-dem .col-lieu, .pr .pr-table-dem .col-doc { display: none; }
  .pr .pr-table-dem .eq { gap: 0; font-size: 0; }
  .pr .pr-table-dem .recue { display: none; }
  #ec-app .ec-contenu.pr > .ec-entete { flex-wrap: wrap; gap: 12px; }
}

/* ── Fenêtre « Demande d'intervention » : trois blocs numérotés ─────────── */
#ec-app .pr-fen-di .ec-di-corps { display: grid; gap: 12px; background: #f5f7fb; }
#ec-app .pr-fen-di .pr-bloc { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(9,22,56,.05), 0 8px 24px -14px rgba(9,22,56,.18); }
#ec-app .pr-fen-di .pr-bloc .lab { display: block; color: #8a99b8; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
#ec-app .pr-fen-di .pr-bloc .lab b.n { margin-left: 4px; color: var(--blue); }
#ec-app .pr-fen-di .pr-bloc .lab em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }
#ec-app .pr-fen-di .ec-di-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0; }
#ec-app .pr-fen-di .ec-di-sec > span:last-child { display: flex; flex-wrap: wrap; gap: 6px 14px; }
#ec-app .pr-fen-di .ec-di-fics { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1.5px dashed #c9d6ee; border-radius: 10px; }
.pr .carte .ec-version { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; }
.pr .carte .ec-version + .ec-version { border-top: 1px solid var(--trait); }
.pr .carte .ec-version .pt { position: static; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: #c9d3e6; }
.pr .carte .ec-version.actuelle .pt { background: var(--blue); }
.pr .carte .ec-version .bloc { display: grid; gap: 2px; padding: 0; border: 0; background: none; box-shadow: none; }
.pr .carte .ec-version strong { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pr .carte .ec-version small { color: var(--muted); font-size: 11.5px; }
/* Légende du calendrier : elle passe à la ligne ; un sujet de conversation long aussi. */
.pr .pr-cal .ec-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pr .pr-fil-ouvert, .pr .pr-fil-ouvert .ec-fil-corps { min-width: 0; }
.pr .pr-fil-ouvert .ec-fil-tete > div { min-width: 0; }
.pr .pr-fil-ouvert .ec-fil-tete strong { white-space: normal; overflow-wrap: anywhere; }
.pr .pr-fil-ouvert .ec-bulle { overflow-wrap: anywhere; }

/* ── Occupation nommée + menu en haut (06.10.2026) ──────────────────────── */
/* « Monté le menu en haut » : les icônes du rail commencent en haut, plus
   sous la hauteur de la barre (62 px). */
@media (min-width: 901px) { #ec-app .ec-rail { padding-top: 14px; } }
/* Le jour choisi : qui intervient, où, à quelle heure. */
.pr .jour-eq .pr-resa { display: flex; align-items: flex-start; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.pr .jour-eq .pr-resa svg { flex: none; margin-top: 2px; color: var(--faint); }
.pr .jour-eq .pr-resa b { color: var(--navy); }
/* Le bloc d'occupation porte trois lignes : qui, équipe et heures, où. */
.pr .ec-evt.ec-evt-occ span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Fiche d'un chantier au gabarit (06.10.2026, maquette validée) ────────── */
.pr.pr-fiche .ec-entete h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr.pr-fiche .ec-entete h1 .ec-statut { font-size: 12px; }
.pr .pr-ariane { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--faint); font-size: 12px; }
.pr .pr-ariane a { color: var(--muted); text-decoration: none; } .pr .pr-ariane a:hover { color: var(--blue); }
.pr .pr-ariane i { font-style: normal; } .pr .pr-ariane b { color: var(--muted); font-weight: 600; }
.pr .pr-boutons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pr .pr-btn-sec { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 700; }
.pr .pr-onglets { display: flex; gap: 4px; margin: 0 0 16px; padding: 6px; border-radius: 12px; background: #071442; overflow-x: auto; scrollbar-width: none; }
.pr .pr-onglets::-webkit-scrollbar { display: none; }
.pr .pr-onglets a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; color: #c7d2ec; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; flex: none; }
.pr .pr-onglets a:hover { background: rgba(255,255,255,.08); color: #fff; }
.pr .pr-onglets a.on { background: var(--blue); color: #fff; }
.pr .pr-onglets a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pr .pr-grand { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 2px 0 10px; color: var(--navy); }
.pr .pr-grand-s { font-size: 26px; margin-bottom: 2px; }
.pr .pr-esp-s { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pr .pr-quatre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pr .pr-quatre > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; padding: 10px 12px; border-radius: 10px; background: #fafbfd; min-width: 0; }
.pr .pr-quatre > div > span { grid-row: span 2; color: var(--faint); }
.pr .pr-quatre small { color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pr .pr-quatre b { font-size: 12.5px; overflow-wrap: anywhere; }
.pr .pr-deux-egal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pr .pr-vignettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pr .pr-vignettes a { display: block; border-radius: 9px; overflow: hidden; }
.pr .pr-vignettes .ec-photo { aspect-ratio: 4 / 3; height: auto; border-radius: 9px; }
.pr .pr-vignettes .ec-photo img { width: 100%; height: 100%; object-fit: cover; }
.pr .pr-cr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 14px; border: 0; border-radius: 12px; background: #fafbfd; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pr .pr-cr + .pr-cr { margin-top: 8px; }
.pr .pr-cr:hover { background: #f3f7ff; }
.pr .pr-cr .cal { width: 44px; height: 48px; }
.pr .pr-cr-txt { min-width: 0; }
.pr .pr-cr-txt b { display: block; font-size: 13px; } .pr .pr-cr-txt b em { font-style: normal; font-weight: 500; color: var(--muted); }
.pr .pr-cr-txt small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.pr .pr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pr .pr-chips .ec-statut { font-size: 11px; }
.pr .pr-docs-fiche { display: grid; gap: 6px; }
.pr .pr-docs-fiche .ec-doc-ligne { width: 100%; }
.pr .pr-apercu-ch .ec-photo { height: auto; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.pr .pr-apercu-ch .ec-photo img { width: 100%; height: 100%; object-fit: cover; }
.pr .pr-apercu-ch .ec-apercu-zone { height: 260px; border-radius: 10px; overflow: hidden; background: #f5f7fb; }
.pr .pr-apercu-ch .ec-apercu-zone iframe, .pr .pr-apercu-ch .ec-apercu-zone img { width: 100%; height: 100%; border: 0; object-fit: contain; }
.pr .pr-apercu-ch .ec-apercu-infos { margin-top: 10px; } .pr .pr-apercu-ch .ec-apercu-infos strong { display: block; font-size: 13px; } .pr .pr-apercu-ch .ec-apercu-infos small { color: var(--muted); font-size: 11.5px; }
.pr .pr-apercu-ch .ec-apercu-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pr .pr-fil-fiche { display: grid; gap: 12px; }
.pr .pr-fil-fiche .pr-fil-tete b { display: block; font-size: 13.5px; } .pr .pr-fil-fiche .pr-fil-tete small { color: var(--muted); font-size: 12px; }
.pr .pr-fil-fiche .ec-fil-corps { max-height: none; overflow: visible; padding: 14px; border-radius: 12px; background: #fafbfd; }
.pr .pr-table-fiche td:nth-child(3) { white-space: nowrap; }
@media (max-width: 1240px) { .pr .pr-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .pr .pr-deux-egal { grid-template-columns: minmax(0, 1fr); }
  .pr .pr-quatre { grid-template-columns: minmax(0, 1fr); }
  .pr.pr-fiche .ec-entete { flex-wrap: wrap; }
  .pr .pr-boutons { width: 100%; } .pr .pr-boutons > * { flex: 1; justify-content: center; }
  .pr .pr-cr { grid-template-columns: 44px minmax(0, 1fr); } .pr .pr-cr > .lien { grid-column: 2; justify-self: start; }
}
.pr .pr-proch { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.pr .pr-proch .cal { display: grid; place-items: center; align-content: center; width: 44px; height: 48px; border-radius: 10px; background: var(--blue-50); color: var(--blue); }
.pr .pr-proch .cal small { font-size: 10px; font-weight: 800; text-transform: uppercase; } .pr .pr-proch .cal b { font-size: 18px; line-height: 1; }
.pr .pr-proch > div b { display: block; font-size: 13.5px; } .pr .pr-proch > div small { color: var(--muted); font-size: 12px; }
.pr .pr-proch + .pr-chips { margin: 10px 0 4px; }
.pr .pr-fil-fiche .pr-actions { display: flex; justify-content: flex-start; } .pr .pr-fil-fiche .pr-actions .ec-btn { width: auto; flex: none; }

/* ── Fenêtres au gabarit (06.10.2026) : Ajouter au chantier, Compte-rendu,
   Demander une équipe. En-tête blanc, corps gris en blocs blancs, pied. ── */
#ec-app .ec-voile .ec-modale.pr-fx { width: min(760px, 100%); padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
#ec-app .ec-voile .ec-modale.pr-fx.pr-fx-large { width: min(1060px, 100%); }
#ec-app .pr-fx-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 20px 24px 16px; border-bottom: 1px solid #e8edf5; background: #fff; }
#ec-app .pr-fx-titre { min-width: 0; }
#ec-app .pr-fx-sur { display: block; color: #8a99b8; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
#ec-app .ec-voile .pr-fx-tete h3 { margin: 4px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: var(--ec-encre, #071442); }
#ec-app .pr-fx-tete h3 .ec-deg { background: linear-gradient(110deg, #0878f9, #143ff4 44%, #5d35f1 72%, #973dec); -webkit-background-clip: text; background-clip: text; color: transparent; }
#ec-app .pr-fx-act { display: flex; align-items: center; gap: 12px; flex: none; }
#ec-app .pr-fx-act .lien { color: var(--ec-bleu, #0b4dff); font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
#ec-app .pr-fx-x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: #f5f7fb; color: #4a5575; cursor: pointer; }
#ec-app .pr-fx-x:hover { background: #e9eef7; color: #071442; }
#ec-app .pr-fx-corps { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 12px; align-content: start; padding: 14px 16px; background: #f5f7fb; }
#ec-app .pr-fx .pr-bloc { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(9,22,56,.05), 0 8px 24px -14px rgba(9,22,56,.18); min-width: 0; }
#ec-app .pr-fx .pr-bloc .lab, #ec-app .pr-fx .lab { display: block; color: #8a99b8; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
#ec-app .pr-fx .lab em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; color: #52658e; }
#ec-app .pr-fx .pr-bloc > .lien { justify-self: start; border: 0; background: none; padding: 0; color: var(--ec-bleu, #0b4dff); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
#ec-app .pr-fx-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid #e8edf5; background: #fff; }
#ec-app .pr-fx-pied > small { display: flex; gap: 6px; align-items: flex-start; color: #6b7a99; font-size: 11.5px; line-height: 1.45; max-width: 420px; }
#ec-app .pr-fx-pied > small svg { flex: none; margin-top: 1px; }
#ec-app .pr-fx-pied > span { display: flex; gap: 8px; flex: none; }
#ec-app .pr-fx-note, #ec-app .pr-fx-texte { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: #52658e; font-size: 12px; line-height: 1.5; }
#ec-app .pr-fx-texte { display: block; }
/* Types (Quoi, équipe) */
#ec-app .pr-fx .pr-types3, #ec-app .pr-fx .pr-types2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#ec-app .pr-fx .pr-types2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#ec-app .pr-fx .pr-type { display: grid; justify-items: start; gap: 3px; padding: 12px 14px; border: 1px solid #e3e9f3; border-radius: 10px; background: #fff; color: #071442; font: inherit; text-align: left; cursor: pointer; }
#ec-app .pr-fx .pr-type:hover:not(:disabled) { border-color: #b9c9ec; }
#ec-app .pr-fx .pr-type svg { color: #6b7a99; margin-bottom: 4px; } #ec-app .pr-fx .pr-type b { font-size: 13px; } #ec-app .pr-fx .pr-type small { color: #6b7a99; font-size: 11.5px; }
#ec-app .pr-fx .pr-type.on { border-color: var(--ec-bleu, #0b4dff); background: #f3f7ff; box-shadow: 0 0 0 1px var(--ec-bleu, #0b4dff); } #ec-app .pr-fx .pr-type.on svg { color: var(--ec-bleu, #0b4dff); }
#ec-app .pr-fx .pr-type:disabled { cursor: default; opacity: .55; }
#ec-app .pr-fx .pr-type.on:disabled { opacity: 1; }
#ec-app .pr-fx .pr-type.pris small { color: #c8321f; font-weight: 700; }
#ec-app .pr-fx .pr-libre { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: #e6f7ee; color: #0f7a45; font-weight: 700; }
/* Zone de dépôt et fichiers */
#ec-app .pr-fx .pr-depot { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 14px; border: 1.5px dashed #c9d6ee; border-radius: 10px; background: #fafbfd; color: #52658e; text-align: center; cursor: pointer; }
#ec-app .pr-fx .pr-depot:hover, #ec-app .pr-fx .pr-depot.survol { border-color: var(--ec-bleu, #0b4dff); background: #f3f7ff; }
#ec-app .pr-fx .pr-depot.en-erreur { border-color: #e5484d; }
#ec-app .pr-fx .pr-depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#ec-app .pr-fx .pr-depot span { font-size: 13px; } #ec-app .pr-fx .pr-depot b { color: #071442; } #ec-app .pr-fx .pr-depot small { color: #8a99b8; font-size: 11.5px; }
#ec-app .pr-fx .pr-depot:focus-within { outline: 2px solid var(--ec-bleu, #0b4dff); outline-offset: 2px; }
#ec-app .pr-fx .pr-fic-liste { display: flex; flex-wrap: wrap; gap: 8px; }
#ec-app .pr-fx .pr-fic { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 8px 6px 6px; border-radius: 10px; background: #f5f7fb; font-size: 12px; font-weight: 600; color: #071442; }
#ec-app .pr-fx .pr-fic > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ec-app .pr-fx .pr-fic small { color: #8a99b8; font-weight: 500; white-space: nowrap; }
#ec-app .pr-fx .pr-fic button { display: grid; place-items: center; border: 0; background: none; color: #8a99b8; cursor: pointer; padding: 2px; }
#ec-app .pr-fx .ec-dep-liste { margin: 0; }
/* Frise des étapes, dans l'en-tête */
#ec-app .pr-fx .pr-frise { display: flex; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
#ec-app .pr-fx ol.pr-frise > li { display: inline-flex; align-items: center; height: 30px; border-radius: 999px; background: #f5f7fb; color: #8a99b8; font-size: 12px; font-weight: 700; }
#ec-app .pr-fx ol.pr-frise > li:not(.fait), #ec-app .pr-fx ol.pr-frise > li > button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 5px; }
#ec-app .pr-fx ol.pr-frise > li > button { border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
#ec-app .pr-fx ol.pr-frise > li > button:hover { background: #d8f1e4; }
#ec-app .pr-fx .pr-frise li span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #8a99b8; font-size: 11px; box-shadow: inset 0 0 0 1.5px #d9e2f1; }
#ec-app .pr-fx ol.pr-frise > li.cours { background: #edf3ff; color: var(--ec-bleu, #0b4dff); } #ec-app .pr-fx .pr-frise li.cours span { background: var(--ec-bleu, #0b4dff); color: #fff; box-shadow: none; }
#ec-app .pr-fx ol.pr-frise > li.fait { color: #0f8a4d; background: #e6f7ee; } #ec-app .pr-fx .pr-frise li.fait span { background: #0f8a4d; color: #fff; box-shadow: none; }
/* Bascule « je n'ai pas les documents » */
#ec-app .pr-fx .pr-bascule { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
#ec-app .pr-fx .pr-bascule b { display: block; font-size: 13px; color: #071442; } #ec-app .pr-fx .pr-bascule small { color: #6b7a99; font-size: 12px; }
#ec-app .pr-fx .pr-tg { position: relative; flex: none; width: 40px; height: 24px; border: 0; border-radius: 999px; background: #d9e2f1; cursor: pointer; transition: background .15s; }
#ec-app .pr-fx .pr-tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: transform .15s; }
#ec-app .pr-fx .pr-tg.on { background: var(--ec-bleu, #0b4dff); } #ec-app .pr-fx .pr-tg.on::after { transform: translateX(16px); }
#ec-app .pr-fx .pr-tg:focus-visible { outline: 2px solid var(--ec-bleu, #0b4dff); outline-offset: 2px; }
/* Étapes de la demande */
#ec-app .pr-fx.ec-modale-etapes .ec-dates { margin: 0; gap: 10px; }
#ec-app .pr-fx.ec-modale-etapes .ec-dates .ec-label { margin-bottom: 5px; }
#ec-app .pr-fx.ec-modale-etapes .ec-horaires { margin: 0; }
#ec-app .pr-fx.ec-modale-etapes .ec-dispo { margin: 0; }
#ec-app .pr-fx.ec-modale-etapes .ec-adresse-grille { margin: 0; }
#ec-app .pr-fx.ec-modale-etapes .ec-textarea { min-height: 40px; }
#ec-app .pr-fx.ec-modale-etapes .ec-erreur:not([hidden]) { margin: 0; }
#ec-app .pr-fx.ec-modale-etapes .ec-remplace { margin: 0; }
#ec-app .pr-fx.ec-modale-etapes .ec-note-regle { margin: 0; }
#ec-app .pr-fx .pr-deux-egal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#ec-app .pr-fx .pr-infos { display: grid; }
#ec-app .pr-fx .pr-info { display: grid; grid-template-columns: 22px 84px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 0; font-size: 12.5px; }
#ec-app .pr-fx .pr-info + .pr-info { border-top: 1px solid #e8edf5; } #ec-app .pr-fx .pr-info > span { color: #8a99b8; } #ec-app .pr-fx .pr-info small { color: #52658e; font-size: 11.5px; } #ec-app .pr-fx .pr-info b { color: #071442; overflow-wrap: anywhere; }
#ec-app .pr-fx .pr-note-ok { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 11px 14px; border-radius: 10px; background: #e6f7ee; color: #0b6139; font-size: 12.5px; line-height: 1.5; }
#ec-app .pr-fx .pr-note-ok svg { flex: none; margin-top: 1px; }
/* Compte-rendu */
#ec-app .pr-fx .pr-cr-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; }
#ec-app .pr-fx .pr-cr-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
#ec-app .pr-fx .pr-quatre-s { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#ec-app .pr-fx .pr-quatre-s > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; padding: 10px 12px; border-radius: 10px; background: #f5f7fb; min-width: 0; }
#ec-app .pr-fx .pr-quatre-s > div > span { grid-row: span 2; color: #8a99b8; }
#ec-app .pr-fx .pr-quatre-s small { color: #8a99b8; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
#ec-app .pr-fx .pr-quatre-s b { font-size: 12.5px; color: #071442; overflow-wrap: anywhere; }
#ec-app .pr-fx.ec-crm .ec-crm-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
#ec-app .pr-fx.ec-crm .ec-crm-texte { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: #24304f; white-space: pre-line; }
#ec-app .pr-fx.ec-crm .ec-crm-sig { margin: 0; border: 0; }
#ec-app .pr-fx.ec-crm .ec-crm-sig > b { font-size: 13px; color: #071442; }
#ec-app .pr-fx.ec-crm .ec-crm-sig .ok { color: #0f8a4d; font-size: 11.5px; font-weight: 700; }
#ec-app .pr-fx.ec-crm .ec-crm-sig .gris { color: #8a99b8; font-size: 12px; }
#ec-app .pr-fx.ec-crm .ec-crm-sig .ec-cr-trace { display: block; width: 100%; max-width: 220px; height: 54px; }
#ec-app .pr-fx.ec-crm .ec-crm-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
#ec-app .pr-fx.ec-crm .ec-crm-photos .ec-photo { aspect-ratio: 4 / 3; height: auto; border-radius: 9px; overflow: hidden; }
#ec-app .pr-fx.ec-crm .ec-crm-photos img { width: 100%; height: 100%; object-fit: cover; }
#ec-app .pr-fx.ec-crm .ec-crm-equipe { margin: 0; }
@media (max-width: 680px) {
  #ec-app .pr-fx-tete { padding: 16px 16px 12px; }
  #ec-app .pr-fx-corps { padding: 12px; }
  #ec-app .pr-fx-pied { flex-wrap: wrap; padding: 12px 16px; } #ec-app .pr-fx-pied > small { flex-basis: 100%; max-width: none; }
  #ec-app .pr-fx-pied > span { width: 100%; } #ec-app .pr-fx-pied > span > * { flex: 1; justify-content: center; }
  #ec-app .pr-fx .pr-types3, #ec-app .pr-fx .pr-types2, #ec-app .pr-fx .pr-deux-egal, #ec-app .pr-fx .pr-cr-grille { grid-template-columns: minmax(0, 1fr); }
  #ec-app .pr-fx .pr-quatre-s { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ec-app .pr-fx-tete:not(:has(.pr-frise)) { flex-wrap: wrap; }
  #ec-app .pr-fx ol.pr-frise > li:not(.cours) { font-size: 0; }
  #ec-app .pr-fx ol.pr-frise > li:not(.fait):not(.cours), #ec-app .pr-fx ol.pr-frise > li.fait > button { gap: 0; padding: 0 5px; }
  #ec-app .pr-fx.ec-modale-etapes .ec-dates { grid-template-columns: minmax(0, 1fr); }
}

/* ── Arrondis comme le hero de la Vue d'ensemble (06.10.2026) : la carte
   « Suivi des chantiers » porte `--radius` (8 px). Cartes, bandeau, fenêtres
   et leurs blocs prennent ce même rayon ; l'intérieur reste un cran en dessous. ── */
#ec-app .pr .carte, #ec-app .pr .carte.id, #ec-app .ec-carte:not(.ec-carte-photo), #ec-app .ec-surv, #ec-app .ec-bloc { border-radius: var(--radius); }
#ec-app .pr .carte.id { overflow: hidden; }
#ec-app .ec-voile .ec-modale { border-radius: var(--radius); }
#ec-app .pr-fx .pr-bloc, #ec-app .pr-fen-di .pr-bloc, #ec-app .pr-fx .pr-depot { border-radius: var(--radius); }
#ec-app .pr .ec-carte-photo, #ec-app .pr .pr-cr, #ec-app .pr .pr-quatre > div, #ec-app .pr .ec-doc-ligne, #ec-app .pr .pr-fil-fiche .ec-fil-corps, #ec-app .pr .pr-galerie figure,
#ec-app .pr .pr-apercu-ch .ec-photo, #ec-app .pr .pr-apercu-ch .ec-apercu-zone, #ec-app .pr .ec-ch-oz, #ec-app .pr-fx .pr-type, #ec-app .pr-fx .pr-quatre-s > div, #ec-app .pr-fx .pr-note-ok,
#ec-app .pr .pr-guide, #ec-app .pr .ec-faq-q { border-radius: 6px; }

/* ── Paramètres et Aide au gabarit (06.10.2026) ── */
.pr .pr-seg-page { margin: 0 0 14px; }
.pr .pr-eq-table td { vertical-align: middle; }
.pr .pr-eq-table .ec-eq-act { display: flex; align-items: center; justify-content: flex-end; gap: 12px; white-space: nowrap; }
.pr .pr-eq-table .ec-eq-act .lien { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--blue); cursor: pointer; }
.pr .pr-eq-sup { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: #fdecea; color: #c8321f; cursor: pointer; }
.pr .pr-eq-sup:hover { background: #fbd9d5; }
.pr .pr-eq-quand { white-space: nowrap; color: var(--muted); font-size: 12px; }
.pr .pr-fait-long { font-size: 15px; overflow-wrap: anywhere; }
.pr .pr-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pr .pr-guide { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px 14px; background: #fafbfd; color: inherit; text-decoration: none; }
.pr .pr-guide:hover { background: #f3f7ff; }
.pr .pr-guide .pr-pt { grid-row: span 2; }
.pr .pr-guide b { font-size: 13px; } .pr .pr-guide small { color: var(--muted); font-size: 12px; }
.pr .pr-guide .lien { grid-column: 2; font-style: normal; font-size: 12px; font-weight: 700; color: var(--blue); margin-top: 4px; }
.pr .ec-faq { display: grid; gap: 8px; }
.pr .ec-faq-q { background: #fafbfd; }
.pr .ec-faq-q .r .lien { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--blue); text-decoration: none; }
.pr .pr-info b a { color: var(--blue); text-decoration: none; }
@media (max-width: 680px) { .pr .pr-guides { grid-template-columns: minmax(0, 1fr); } }
.pr .pr-eq-table td:first-child { min-width: 210px; }
.pr .pr-eq-table .ec-eq-qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pr .pr-eq-table .ec-eq-qui > span:last-child { min-width: 0; }
.pr .pr-eq-table .ec-eq-qui b { display: block; white-space: nowrap; }
.pr .pr-eq-table .ec-eq-qui small { display: block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11.5px; }
#ec-app .ec-voile .ec-modale.pr-fx.pr-fx-etroite { width: min(560px, 100%); }
#ec-app .pr-fx.ec-eq-modale .ec-eq-deux { margin: 0; }
#ec-app .pr-fx.ec-eq-modale label { display: grid; gap: 5px; }
#ec-app .pr-fx.ec-eq-modale .ec-eq-lbl em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; }
#ec-app .pr-fx.ec-eq-modale input:not([type=file]) { width: 100%; min-height: 40px; padding: 9px 12px; border: 1.5px solid transparent; background: #f5f7fb; font: inherit; font-size: 13px; color: #071442; outline: 0; }
#ec-app .pr-fx.ec-eq-modale input:focus { border-color: var(--ec-bleu, #0b4dff); background: #fff; }
#ec-app .pr-fx.ec-eq-modale .ec-eq-choix, #ec-app .pr-fx.ec-eq-modale .ec-eq-cases, #ec-app .pr-fx.ec-eq-modale .ec-connus { margin: 0; }
#ec-app .pr-fx.ec-eq-modale .pr-bascule + .pr-bascule { padding-top: 10px; border-top: 1px solid #e8edf5; }
#ec-app .pr-fx-pied .ec-lien-danger { display: inline-flex; align-items: center; gap: 6px; }
.pr .fait b.pr-fait-long { white-space: normal; overflow: visible; text-overflow: clip; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
/* Le bandeau reste bord à bord à toutes les largeurs (06.10.2026) : sous 680 px,
   `.pr .carte { padding: 16px }` l'encastrait dans la carte, angles carrés. */
#ec-app .pr .carte.id { padding: 0; overflow: hidden; }

/* ── Fiche chantier · Vue d'ensemble « pro » (06.10.2026, proposition) ── */
.pr .pr-synth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--trait); }
.pr .pr-synth > div { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--trait); min-width: 0; }
.pr .pr-synth > div.large { grid-column: span 1; }
.pr .pr-synth dt { color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pr .pr-synth dd { margin: 3px 0 0; color: var(--navy); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.pr .pr-synth-etapes { margin-top: 14px; }
.pr .pr-journal { display: grid; }
.pr .pr-jr-jour { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
.pr .pr-jr-jour + .pr-jr-jour { border-top: 1px solid var(--trait); }
.pr .pr-jr-jour > .cal { position: sticky; top: 76px; }
.pr .pr-jr-date { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.pr .pr-jr-ligne { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; }
.pr .pr-jr-ligne + .pr-jr-ligne { border-top: 1px dashed var(--trait); }
.pr .pr-jr-txt { min-width: 0; }
.pr .pr-jr-txt b { display: block; font-size: 13px; color: var(--navy); }
.pr .pr-jr-txt small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr .pr-jr-txt .pr-chips { margin-top: 6px; }
.pr .pr-jr-a { padding-top: 2px; white-space: nowrap; }
.pr .pr-jr-ph { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pr .pr-jr-ph a { display: block; width: 64px; height: 48px; border-radius: 6px; overflow: hidden; background: #e9eef7; }
.pr .pr-jr-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr .pr-ligne-vide { margin: 0; color: var(--muted); font-size: 12.5px; }
.pr .pr-actions-g { margin-top: 10px; }
.pr .pr-pieces { display: grid; }
.pr .pr-piece { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; gap: 10px; align-items: center; padding: 9px 0; color: inherit; text-decoration: none; }
.pr .pr-piece + .pr-piece { border-top: 1px solid var(--trait); }
.pr .pr-piece b { display: block; font-size: 12.5px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr .pr-piece small { display: block; color: var(--muted); font-size: 11.5px; }
.pr .pr-piece > svg:last-child { color: var(--faint); }
.pr .pr-piece:hover b { color: var(--blue); }
.pr .pr-contact { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.pr .pr-contact .ec-avatar-ini { width: 40px; height: 40px; }
.pr .pr-contact b { display: block; font-size: 13px; color: var(--navy); } .pr .pr-contact small { color: var(--muted); font-size: 12px; }
@media (max-width: 680px) {
  .pr .pr-synth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr .pr-jr-jour { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pr .pr-jr-jour > .cal { display: none; }
  .pr .pr-jr-ligne { grid-template-columns: 28px minmax(0, 1fr); } .pr .pr-jr-a { grid-column: 2; }
}
.pr .pr-synth-etapes .ec-etape b { font-size: 12.5px; font-weight: 700; letter-spacing: 0; white-space: normal; overflow: visible; color: var(--navy); }   /* `.fait` d’une étape ≠ `.fait` du bandeau */

/* ── Fiche chantier · Avancement « pro » (06.10.2026, proposition) ── */
.pr .pr-kpi3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr .pr-kpi3 > div { padding: 2px 16px 0; min-width: 0; }
.pr .pr-kpi3 > div:first-child { padding-left: 0; }
.pr .pr-kpi3 > div + div { box-shadow: inset 1px 0 0 var(--trait); }
.pr .pr-kpi3 b { display: block; margin: 4px 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.pr .pr-kpi3 b.ok { color: var(--vert); }
.pr .pr-kpi3 small { color: var(--muted); font-size: 12px; }
.pr .pr-prog-fin { margin-top: 16px; } .pr .pr-prog-fin .t { height: 4px; }
.pr .pr-prog-mini { gap: 8px; min-width: 120px; } .pr .pr-prog-mini .t { height: 4px; } .pr .pr-prog-mini b { font-size: 11.5px; color: var(--muted); }
.pr .pr-table-etapes td:first-child { display: flex; align-items: center; gap: 10px; }
.pr .pr-etape-n { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--blue-50); color: var(--blue); font-size: 11px; font-weight: 800; }
.pr .pr-table-heures td.n { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.pr .pr-table-heures td.tr { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pr .pr-table-heures .d { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr .pr-table-heures tfoot td { padding-top: 10px; border-top: 1px solid var(--trait); color: var(--navy); font-size: 12px; font-weight: 800; }
.pr .pr-interv { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; }
.pr .pr-interv + .pr-interv { border-top: 1px solid var(--trait); }
.pr .pr-interv b { display: block; font-size: 12.5px; color: var(--navy); } .pr .pr-interv small { color: var(--muted); font-size: 11.5px; }
.pr .pr-interv .ec-statut { font-size: 11px; }
@media (max-width: 680px) {
  .pr .pr-kpi3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pr .pr-kpi3 > div { padding: 0; } .pr .pr-kpi3 > div + div { box-shadow: none; padding-top: 12px; border-top: 1px solid var(--trait); }
  .pr .pr-table-heures td.tr, .pr .pr-table-heures th:nth-child(3) { display: none; }
}

/* ── Fenêtre « Quoi de neuf ? » (06.10.2026) ── */
#ec-app .ec-voile .ec-modale.pr-fx.pr-fx-nouv { width: min(620px, 100%); }
#ec-app .pr-fx .pr-nouv { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
#ec-app .pr-fx .pr-nouv + .pr-nouv { padding-top: 12px; border-top: 1px solid #e8edf5; }
#ec-app .pr-fx .pr-nouv .pr-pt { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #edf3ff; color: #0b4dff; }
#ec-app .pr-fx .pr-nouv b { display: block; font-size: 13.5px; color: #071442; }
#ec-app .pr-fx .pr-nouv p { margin: 3px 0 0; color: #52658e; font-size: 12.5px; line-height: 1.5; }
/* « Comment y accéder » : étapes numérotées (06.10.2026). */
#ec-app .pr-fx .pr-nouv-etapes { display: grid; gap: 6px; margin: 9px 0 2px; padding: 10px 12px; border-radius: 10px; background: #f4f7fd; list-style: none; counter-reset: etape; }
#ec-app .pr-fx .pr-nouv-etapes li { position: relative; padding-left: 26px; color: #2c3e66; font-size: 12.5px; line-height: 1.45; counter-increment: etape; }
#ec-app .pr-fx .pr-nouv-etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #0b4dff; color: #fff; font-size: 10.5px; font-weight: 700; }
#ec-app .pr-fx .pr-nouv .lien { display: inline-block; margin-top: 6px; color: #0b4dff; font-size: 12.5px; font-weight: 700; text-decoration: none; }

/* ── Traits de séparation du bandeau (06.10.2026) : ils étaient dessinés en
   `box-shadow`, que la règle globale `* { box-shadow: none !important }` du
   portail effaçait sur ordinateur et tablette. Ils passent en bordures. ── */
@media (min-width: 1241px) {
  #ec-app .pr .faits > .fait + .fait, #ec-app .pr .pr-kpi3 > div + div { border-left: 1px solid var(--trait); }
}
@media (min-width: 681px) and (max-width: 1240px) {
  #ec-app .pr .faits > .fait:not(:nth-child(3n + 1)) { border-left: 1px solid var(--trait); }
  #ec-app .pr .faits > .fait:nth-child(n + 4) { border-top: 1px solid var(--trait); }
  #ec-app .pr .pr-kpi3 > div + div { border-left: 1px solid var(--trait); }
}

/* ── Suggestions d'adresse : dans le flux, sous le champ (06.10.2026) ──────
 * Client : « il faut qu'il s'adapte au contenu ». Flottante, la liste était
 * rognée par le défilement de la fenêtre. Posée après le champ, elle prend sa
 * place : la fenêtre s'agrandit (jusqu'à la hauteur de l'écran). */
#ec-app .ec-suggestions, .ec-suggestions { grid-column: 1 / -1; position: static; top: auto; left: auto; right: auto; max-height: none; overflow: visible; margin: 6px 0 0; }

/* ── Éditeur de plans (06.10.2026) ─────────────────────────────────────────
 * « Ouvrir dans l'éditeur » sur un PDF : le geste principal du panneau ;
 * « Télécharger » passe en second. Les lignes PDF s'ouvrent au double-clic. */
#ec-app .pr-btn-editeur { display: flex; width: 100%; margin: 14px 0 0; }
#ec-app .ec-btn.ec-btn-sec { background: #edf3ff; color: var(--blue, #075bff); }
#ec-app tr[data-pdf="1"], #ec-app .ec-doc-ligne[data-pdf="1"] { cursor: pointer; }

/* ── Modifié dans l'éditeur de plans (07.10.2026) : comme la liste du bureau ── */
#ec-app small.ec-doc-sous { display: block; margin-top: 1px; color: #6b7a99; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
#ec-app small.ec-edition { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 2px; color: #1d4fd8; font-size: 11px; font-weight: 600; line-height: 1.35; white-space: normal; overflow: hidden; max-width: 300px; }
#ec-app .ec-histo li small.ec-edition { grid-column: 2 / -1; font-weight: 500; max-width: none; -webkit-line-clamp: 3; margin: -2px 0 4px; }
#ec-app .ec-table-docs-ch .doc { position: relative; }
#ec-app .ec-table-docs-ch tr.ec-zip-choix { outline: 0; }
#ec-app .ec-table-docs-ch tr.ec-zip-choix .doc { padding-left: 34px; }
#ec-app .ec-table-docs-ch tr.ec-zip-choix .ec-zip-case { top: 50%; left: 0; transform: translateY(-50%); background: #fff; border-color: #c3cce0; box-shadow: none; }
#ec-app .ec-table-docs-ch tr.ec-zip-choix.coche td { background: #f3f7ff; }
#ec-app .ec-table-docs-ch tr.ec-zip-choix.coche .ec-zip-case { background: #1d4fd8; border-color: #1d4fd8; color: #fff; }
@media (max-width: 680px) { #ec-app small.ec-doc-sous, #ec-app small.ec-edition { max-width: 220px; } }

/* Ligne choisie d'un tableau : à angles droits, sans arrondi (07.10.2026). */
#ec-app .ec-table-oz tbody tr td, #ec-app .ec-table-oz tbody tr.actif td,
#ec-app .ec-table-oz tbody tr.actif td:first-child, #ec-app .ec-table-oz tbody tr.actif td:last-child { border-radius: 0 !important; }

/* ══ L'entreprise propose les dates (08.10.2026, maquette client-dates-proposees.html) ══ */
.ec-planifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ec-planif { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border: 1px solid #d9e2f1; border-radius: 10px; background: #fff; color: var(--navy, #071442); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ec-planif .pi { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #f2f5fb; color: #52658e; }
.ec-planif b { display: block; font-size: 13.5px; font-weight: 700; }
.ec-planif small { display: block; margin-top: 2px; color: #52658e; font-size: 12px; line-height: 1.4; }
.ec-planif:hover { border-color: #9db8f5; }
.ec-planif.on { border-color: var(--blue, #0b4dff); box-shadow: inset 0 0 0 1px var(--blue, #0b4dff), 0 6px 18px -10px rgba(11, 77, 255, .55); }
.ec-planif.on .pi { background: #eaf1ff; color: var(--blue, #0b4dff); }
.ec-planif:focus-visible, .ec-sp:focus-visible { outline: 2px solid var(--blue, #0b4dff); outline-offset: 2px; }
.ec-sps { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.ec-sp { height: 32px; padding: 0 12px; border: 1px solid #d9e2f1; border-radius: 8px; background: #fff; color: var(--navy, #071442); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ec-sp:hover { border-color: #9db8f5; }
.ec-sp.on { border-color: var(--blue, #0b4dff); background: var(--blue, #0b4dff); color: #fff; }
.ec-label-err { color: #c8321f; }
.pr-table-dem .cal.a-prop { background: #eef3ff; color: #1a56ff; }
.pr-table-dem .cal.a-prop b { color: #1a56ff; }

.ec-offre { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px; border-radius: 12px; background: #f6f8fc; border: 1px solid #e6ebf3; }
.ec-ofil { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.ec-ofil span { display: inline-flex; align-items: center; gap: 6px; color: #8a99b8; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ec-ofil span i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; background: #dfe5ef; color: #fff; }
.ec-ofil span.ok { color: #0f8a4d; } .ec-ofil span.ok i { background: #0f8a4d; }
.ec-ofil span.on { color: var(--blue, #0b4dff); } .ec-ofil span.on i { background: var(--blue, #0b4dff); }
.ec-ofil b { flex: 1 1 14px; min-width: 14px; height: 2px; margin: 0 8px; background: #dfe5ef; }
.ec-offre-msg { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #eaf1ff; color: #28407a; font-size: 12.5px; line-height: 1.45; }
.ec-offre-msg b { color: var(--navy, #071442); }
.ec-offre-liste { display: grid; gap: 8px; }
.ec-offre-opt { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e3e9f3; }
.ec-offre-opt .jour { width: 44px; height: 48px; border-radius: 10px; background: #eaf1ff; color: var(--blue, #0b4dff); display: grid; place-items: center; align-content: center; text-align: center; line-height: 1.05; }
.ec-offre-opt .jour b { font-size: 17px; }
.ec-offre-opt .jour small { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ec-offre-opt > span:nth-child(2) b { display: block; font-size: 13.5px; }
.ec-offre-opt > span:nth-child(2) small { display: block; color: #52658e; font-size: 12px; }
.ec-offre-note { margin: 0; color: #52658e; font-size: 12px; }
.ec-offre-note .lien { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--blue, #0b4dff); font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ec-offre-refus { display: grid; gap: 6px; }
.ec-offre-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 640px) {
  .ec-planifs { grid-template-columns: minmax(0, 1fr); }
  .ec-offre-opt { grid-template-columns: 44px minmax(0, 1fr); }
  .ec-offre-opt .ec-btn { grid-column: 1 / -1; width: 100%; }
}

/* ── Demandes d'intervention dans le chantier (08.10.2026) ── */
#ec-app .ec-di-ch { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: #eef3ff; color: #1a56ff; font-size: 12px; font-weight: 600; }
.pr .pr-di-gens tbody tr { cursor: pointer; }
.pr .pr-di-gens td small { display: block; color: #8a99b8; font-size: 11.5px; }
.pr .pr-di-gens .ec-di-st { white-space: nowrap; }
.pr .carte .pr-di-orph { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pr .carte .pr-di-orph > span:not(.ec-di-st) { flex: 1; min-width: 0; display: grid; }
.pr .carte .pr-di-orph small { color: #8a99b8; }
@media (max-width: 680px) {
  .pr .pr-di-gens thead { display: none; }
  .pr .pr-di-gens tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid #eef1f6; }
  .pr .pr-di-gens tbody td { padding: 0; border: 0; }
  .pr .pr-di-gens tbody td:nth-child(2) { display: none; }
  .pr .pr-di-gens tbody td:nth-child(4) { grid-column: 1 / -1; font-size: 12.5px; }
  .pr .pr-di-gens tbody td:nth-child(4) .pr-muet { display: none; }
}

/* ── PV de réception signé par le client (08.10.2026) ── */
#ec-app .pr-pv-alerte { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 0 0 16px; padding: 16px 18px; border-radius: 8px; background: #fff; border-left: 4px solid #c2660c; }
#ec-app .pr-pv-alerte .ico { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; background: #fdf1e3; color: #c2660c; }
#ec-app .pr-pv-alerte b { display: block; font-size: 14.5px; color: #071442; }
#ec-app .pr-pv-alerte p { margin: 2px 0 0; color: #52658e; font-size: 13px; }
#ec-app .ec-pvm .ec-pv-o { color: #c2660c; }
#ec-app .ec-pvm .ec-pv-coche { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px 12px; border-radius: 9px; background: #f4f6fa; font-size: 12.5px; color: #071442; cursor: pointer; }
#ec-app .ec-pvm .ec-pv-coche input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #1a56ff; }
#ec-app .ec-pvm .ec-pv-res { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#ec-app .ec-pvm .ec-pv-res th { text-align: left; padding: 0 6px 7px; border-bottom: 1.5px solid #071442; color: #8a99b8; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
#ec-app .ec-pvm .ec-pv-res td { padding: 9px 6px; border-bottom: 1px solid #e6ebf3; vertical-align: top; color: #071442; }
#ec-app .ec-pvm .ec-pv-res td.n { width: 28px; font-weight: 800; }
#ec-app .ec-pvm .ec-pv-res td.d { width: 104px; color: #c2660c; font-weight: 600; white-space: nowrap; }
#ec-app .pr-synth .lien { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #1a56ff; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 680px) {
  #ec-app .pr-pv-alerte { grid-template-columns: 46px minmax(0, 1fr); }
  #ec-app .pr-pv-alerte .ec-btn { grid-column: 1 / -1; justify-content: center; }
}

/* ── Langue de l'interface (08.10.2026) : Français / Deutsch ───────────────
   Sélecteur à deux boutons ; l'actif est lu sur <html data-langue>, posé par
   ec-langue.js : aucun nouveau rendu n'est nécessaire au changement. */
#ec-app .ec-langue { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #e3e8f2; border-radius: 8px; background: #f5f8fd; }
#ec-app .ec-langue button { border: 0; background: transparent; padding: 6px 14px; border-radius: 6px; font: 600 13px/1.2 Manrope, system-ui, sans-serif; color: #5b6785; cursor: pointer; }
#ec-app .ec-langue button:hover { color: #071442; }
#ec-app .ec-langue button:focus-visible { outline: 2px solid #3b6ff5; outline-offset: 1px; }
:root[data-langue=fr] #ec-app .ec-langue [data-v=fr],
:root[data-langue=de] #ec-app .ec-langue [data-v=de] { background: #fff; color: #071442; box-shadow: 0 1px 3px rgba(7, 20, 66, .12); }
#ec-app .ec-lg-droite { position: relative; }
#ec-app .ec-lg-langue { position: absolute; top: 24px; right: 28px; }
#ec-app .pr-langue { margin-top: 12px; }
@media (max-width: 680px) {
  #ec-app .ec-lg-langue { position: static; align-self: flex-end; margin-bottom: 18px; }
}

/* ── Bandeaux (marine + chiffres) avec une ombre, partout (08.10.2026) ──────
   Deux couches comme les barres du bureau : un contact net et une ombre
   portée diffuse, teintées du marine des bandeaux. `!important` : la feuille
   retire toutes les ombres (`*, *::before, *::after { box-shadow: none !important }`). */
#ec-app .pr .carte.id { box-shadow: 0 1px 2px rgba(7, 20, 66, .08), 0 10px 28px rgba(7, 20, 66, .12) !important; }

/* ── Demande d'intervention : adresses proposées dans le flux (08.10.2026) ──
   « Ça coupe en bas » : la liste n'est plus posée en `fixed` sur la page mais
   sous son champ ; elle prend toute la largeur et reçoit une ombre pour
   ressortir (`!important` : la feuille retire toutes les ombres). */
#ec-app .ec-di-sugg { position: static; grid-column: 1 / -1; width: auto; max-height: 264px; margin: -4px 0 2px; box-shadow: 0 0 0 1px var(--ec-trait, #e3e8f2), 0 12px 28px rgba(7, 20, 66, .16), 0 2px 6px rgba(7, 20, 66, .08) !important; }
#ec-app td > .ec-di-sugg { margin: 6px 0 0; min-width: 280px; }

/* Logo de l'entreprise à la connexion (portail par entreprise, 08.10.2026). */
#ec-app .ec-lg-ent .log.log-img { padding: 4px; overflow: hidden; }
#ec-app .ec-lg-ent .log.log-img img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }


/* Barre d'icônes du bas, mobile uniquement (08.10.2026) : plus haute, cibles
   tactiles plus grandes. Le contenu, les toasts et la barre ZIP suivent. */
@media (max-width: 900px) {
  #ec-app .ec-rail { padding: 14px 10px calc(8px + env(safe-area-inset-bottom)); gap: 6px; }   /* sous les icônes : zone d’accueil iPhone + 8 px, sans vide */
  #ec-app .ec-nav, #ec-app .ec-rail-bas { gap: 6px; }
  #ec-app .ec-nav a, #ec-app .ec-rail-bas a { width: 52px; height: 54px; border-radius: 14px; }
  #ec-app .ec-nav a svg, #ec-app .ec-rail-bas a svg { width: 25px; height: 25px; }
  #ec-app .ec-principal { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
  .ec-toast { bottom: calc(102px + env(safe-area-inset-bottom)); }
  #ec-app .ec-zip-barre { bottom: calc(98px + env(safe-area-inset-bottom)); }
}

/* 08.10.2026 (soir) — Barre du bas mobile : icônes remontées de 12 px et bleu nuit
   prolongé jusqu'au bord de l'écran (Safari iOS laissait voir la page dessous). */
@media (max-width: 900px) {
  /* Ombres pleines plutôt qu'un ::after : la barre défile en largeur (overflow), un ::after y serait rogné. */
  #ec-app .ec-rail { box-shadow: 0 80px 0 0 #071442, 0 160px 0 0 #071442; }
  #ec-app .ec-principal { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .ec-toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
  #ec-app .ec-zip-barre { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ════════════════════════════════════════════════════════════════════════════
   08.10.2026 (soir) — Mobile : bouton grille en haut + menu « Toutes les pages »
   en plein écran avec Retour (ec-menu-mobile.js), comme dans Orbisia.
   ════════════════════════════════════════════════════════════════════════════ */
.ec-mm-bouton { display: none !important; }
.ec-mm { display: none; }
@media (max-width: 900px) {
  #ec-app .ec-barre-haut .ec-mm-bouton {
    display: grid !important; place-items: center; width: 42px; height: 42px; flex: none;
    border: 1px solid #e3e9f4; border-radius: 50%; background: #fff; color: var(--navy, #071442); cursor: pointer;
  }
  #ec-app .ec-barre-haut .ec-mm-bouton[aria-expanded="true"] { background: #1f4cff; border-color: #1f4cff; color: #fff; }
  html.ec-mm-ouvert, html.ec-mm-ouvert body { overflow: hidden; }
  .ec-mm {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 9500;
    background: #fff; color: #071442; font-family: inherit;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  }
  .ec-mm-tete {
    flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 16px 12px; border-bottom: 1px solid #e3e9f4; background: #fff;
  }
  .ec-mm-retour {
    display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px 0 8px;
    border: 0; border-radius: 12px; background: #fff; color: #071442; cursor: pointer;
    box-shadow: 0 1px 0 #e3e9f4, 0 4px 14px rgba(7, 20, 66, .08);
    font: inherit; font-size: 15px; font-weight: 700;
  }
  .ec-mm-tete h2 { flex: 1 0 100%; margin: 4px 4px 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: #071442; }
  .ec-mm-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 24px; }
  .ec-mm-section { margin: 18px 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a97b1; }
  .ec-mm-ligne {
    display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 14px; margin: 0 -6px;
    border-radius: 12px; color: #071442; text-decoration: none; font-size: 16.5px; font-weight: 600;
  }
  .ec-mm-ligne svg { flex: none; width: 22px; height: 22px; color: #5b6887; }
  .ec-mm-ligne.actif { background: #eaf0ff; color: #1f4cff; }
  .ec-mm-ligne.actif svg { color: #1f4cff; }
  .ec-mm-lib { flex: 1 1 auto; min-width: 0; }
  .ec-mm-badge { flex: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #e03b3b; color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   25.10.2026 — Contrôle mobile de toutes les pages (iPhone, 390 px de large).
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Étapes du chantier : sur une ligne, 7 étapes ne tenaient pas (la dernière
     sortait de l'écran). Sur téléphone, frise verticale. */
  #ec-app .ec-etapes { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
  #ec-app .ec-etapes::before, #ec-app .ec-etapes .ec-etapes-av { display: none; }
  #ec-app .ec-etape { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 0; justify-items: start; align-items: center; text-align: left; padding-bottom: 14px; }
  #ec-app .ec-etapes > .ec-etape { padding: 0 0 14px; background: none; box-shadow: none !important; }   /* `.pr .fait` (bandeau) visait aussi les étapes faites */
  #ec-app .ec-etapes > .ec-etape:last-child { padding-bottom: 0; }
  #ec-app .ec-etape .pt { grid-row: span 2; align-self: start; position: relative; z-index: 1; }
  #ec-app .ec-etape b { margin-top: 0; }
  #ec-app .ec-etape b, #ec-app .ec-etape small { grid-column: 2; }
  #ec-app .ec-etape:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: #dfe5ef; }
  #ec-app .ec-etape.fait:not(:last-child)::before { background: var(--blue, #0b4dff); }

  /* Dates / chef de projet : deux par ligne au lieu de trois colonnes serrées. */
  #ec-app .ec-metas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  #ec-app .ec-metas > .ec-meta { padding: 0; border-left: 0; }
}
@media (max-width: 640px) {
  /* Fiche chantier › Avancement : tableau des étapes à 4 colonnes, illisible
     sur téléphone (la période tenait sur 4 lignes, le statut était coupé).
     Une carte par étape : nom + statut, puis période et barre dessous. */
  #ec-app .pr .pr-table-etapes, #ec-app .pr .pr-table-etapes tbody { display: block; width: 100%; }
  #ec-app .pr .pr-table-etapes thead { display: none; }
  #ec-app .pr .pr-table-etapes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--trait, #e6ecf5); }
  #ec-app .pr .pr-table-etapes tr:last-child { border-bottom: 0; }
  #ec-app .pr .pr-table-etapes td { display: block; padding: 0; border: 0; min-width: 0; }
  #ec-app .pr .pr-table-etapes td:nth-child(1) { display: flex; grid-column: 1; grid-row: 1; }
  #ec-app .pr .pr-table-etapes td:nth-child(4) { grid-column: 2; grid-row: 1; }
  #ec-app .pr .pr-table-etapes td:nth-child(2) { grid-column: 1 / -1; padding-left: 32px; font-size: 12.5px; color: var(--muted, #6b7690); }
  #ec-app .pr .pr-table-etapes td:nth-child(3) { grid-column: 1 / -1; padding-left: 32px; }
  #ec-app .pr .pr-table-etapes .pr-prog-mini { min-width: 0; }
}
@media (max-width: 640px) {
  /* Interventions de la fiche chantier : le statut était coupé à droite
     (« Docum… »). Sur téléphone, sans la colonne Personnes (visible dans le
     détail) et le statut peut passer sur deux lignes. */
  #ec-app .pr .pr-table-fiche th:nth-child(3), #ec-app .pr .pr-table-fiche td:nth-child(3) { display: none; }
  #ec-app .pr .pr-table-dem .ec-statut { white-space: normal; height: auto; min-height: 26px; padding-top: 4px; padding-bottom: 4px; line-height: 1.2; }
}