/* NALHA — Espace client (maquette du portail)
   S'appuie sur styles.css (charte, Poppins, boutons, champs). Angles vifs, jaune / noir / blanc. */

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

.ec-connexion { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.ec-connexion-visuel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: clamp(28px, 4vw, 56px);
  background: var(--noir); color: var(--blanc);
}
.ec-connexion-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ec-connexion-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 38%, rgba(0,0,0,.94) 100%); }
.ec-connexion-hachures { position: absolute; top: 0; bottom: 0; right: 0; width: 28px; }
.ec-connexion-logo, .ec-connexion-texte { position: relative; z-index: 1; }
.ec-connexion-logo img { width: auto; height: 52px; }
.ec-connexion-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 580px; }
.ec-connexion-titre { font-size: clamp(36px, 4vw, 62px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.ec-connexion-titre .jaune { display: block; }
.ec-connexion-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.ec-connexion-liste li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.ec-connexion-liste .ico { width: 40px; height: 40px; padding: 8px; border: 2px solid var(--jaune); color: var(--jaune); }

.ec-connexion-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: clamp(32px, 5vw, 80px) var(--gouttiere); }
.ec-form { display: grid; gap: 18px; width: 100%; max-width: 440px; }
.ec-form-ico { display: grid; place-items: center; width: 56px; height: 56px; background: var(--jaune); }
.ec-form-ico .ico { width: 28px; height: 28px; }
.ec-form-titre { font-size: 38px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.ec-form-intro { margin-top: -8px; font-size: 15px; color: var(--encre); }
.ec-mdp { position: relative; display: block; }
.ec-mdp input { padding-right: 52px; }
.ec-voir {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; color: var(--encre);
}
.ec-voir .ico { width: 20px; height: 20px; }
.ec-form-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.ec-form-ligne a { font-weight: 600; border-bottom: 2px solid var(--jaune); }
.ec-case { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ec-case input { width: 18px; height: 18px; accent-color: var(--noir); }
.ec-form .bouton { width: 100%; margin-top: 4px; padding-block: 18px; }
.ec-aide { display: flex; align-items: center; gap: 14px; padding: 16px; font-size: 14px; color: var(--encre); border: 1px solid var(--filet); }
.ec-aide-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--noir); color: var(--jaune); }
.ec-aide-ico .ico { width: 22px; height: 22px; }
.ec-aide a { font-weight: 600; color: var(--noir); border-bottom: 2px solid var(--jaune); }
.ec-retour-site { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--encre); }
.ec-retour-site .ico { width: 18px; height: 18px; }
.ec-retour-site:hover { color: var(--noir); }

/* ---------- Cadre de l'application ---------- */

.ec-app { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.ec-menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px;
  padding: 28px 20px 24px;
  background: var(--noir); color: var(--blanc);
}
.ec-logo img { width: auto; height: 44px; }
.ec-menu-label { margin-top: -10px; font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--jaune); }
.ec-chantier { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--filet-clair); }
.ec-chantier small, .ec-interlocuteur small { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-claire); }
.ec-chantier strong { font-size: 16px; font-weight: 700; line-height: 1.3; }
.ec-mini-jauge { height: 6px; margin-top: 6px; background: rgba(255, 255, 255, .14); }
.ec-mini-jauge span { display: block; width: 64%; height: 100%; background: var(--jaune); }
.ec-chantier-pc { font-size: 12.5px; color: var(--encre-claire); }
.ec-nav { display: grid; gap: 4px; }
.ec-lien {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, .75);
  transition: background-color .2s, color .2s;
}
.ec-lien .ico { width: 20px; height: 20px; }
.ec-lien:hover { background: rgba(255, 255, 255, .08); color: var(--blanc); }
.ec-lien.est-actif { background: var(--jaune); color: var(--noir); font-weight: 600; }
.ec-pastille {
  display: grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px;
  font-size: 11px; font-style: normal; font-weight: 700; line-height: 1;
  border-radius: 10px; background: var(--jaune); color: var(--noir);
}
.ec-lien.est-actif .ec-pastille { background: var(--noir); color: var(--jaune); }
.ec-interlocuteur { display: grid; gap: 12px; margin-top: auto; padding: 16px; background: rgba(255, 255, 255, .07); }
.ec-interlocuteur-id { display: flex; align-items: center; gap: 12px; }
.ec-interlocuteur-id strong { display: block; font-size: 15px; line-height: 1.3; }
.ec-interlocuteur-id div span { font-size: 12.5px; color: var(--encre-claire); }
.ec-initiales {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  font-size: 14px; font-weight: 700; border-radius: 50%; background: var(--jaune); color: var(--noir);
}
.ec-interlocuteur .bouton { padding: 11px 14px; font-size: 13.5px; }
.ec-interlocuteur .bouton .ico { width: 18px; height: 18px; }
.ec-deconnexion { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--encre-claire); }
.ec-deconnexion .ico { width: 18px; height: 18px; }
.ec-deconnexion:hover { color: var(--jaune); }

.ec-principal { min-width: 0; }
.ec-mobile-barre, .ec-onglets { display: none; }
.ec-barre {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 3vw, 48px) 28px;
  border-bottom: 1px solid var(--filet);
}
.ec-surtitre { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--encre); }
.ec-titre { font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.ec-sous-titre { margin-top: 4px; font-size: 17px; color: var(--encre); }
.ec-retour-lien { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--encre); white-space: nowrap; }
.ec-retour-lien .ico { width: 18px; height: 18px; }
.ec-retour-lien:hover { color: var(--noir); }
.ec-contenu { display: grid; gap: clamp(20px, 2vw, 28px); max-width: 1320px; padding: clamp(20px, 3vw, 48px); }

/* ---------- Cartes ---------- */

.ec-carte { min-width: 0; padding: clamp(20px, 2.2vw, 30px); background: var(--blanc); border: 1px solid var(--filet); }
.ec-carte-tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.ec-carte-titre { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ec-carte-titre .ico { width: 22px; height: 22px; }
.ec-carte-jaune { background: var(--jaune); border-color: var(--jaune); }
.ec-etat { padding: 5px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--noir); color: var(--jaune); }
.ec-badge-nouveau { display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--noir); color: var(--jaune); }
.ec-lien-tout { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; font-size: 13.5px; font-weight: 600; white-space: nowrap; border-bottom: 2px solid var(--jaune); }
.ec-lien-tout .ico { width: 16px; height: 16px; }

/* ---------- Tableau de bord ---------- */

.ec-grille-accueil { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.ec-avancement, .ec-images { grid-column: span 2; }
.ec-documents { grid-column: 1 / -1; }
.ec-documents .ec-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.ec-documents .ec-docs li { padding: 0; border-bottom: 0; }
.ec-avancement-corps { display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 40px); }
.ec-grand-pc { font-size: clamp(72px, 8vw, 124px); font-weight: 800; line-height: .82; letter-spacing: -.05em; }
.ec-grand-pc span { margin-left: 4px; font-size: .45em; letter-spacing: 0; }
.ec-avancement-detail { flex: 1; display: grid; gap: 12px; padding-bottom: 4px; }
.ec-jauge { height: 14px; background: rgba(0, 0, 0, .08); }
.ec-jauge span { display: block; height: 100%; background: var(--jaune); }
.ec-avancement-note { font-size: 14.5px; color: var(--encre); }
.ec-avancement-note strong { color: var(--noir); }
.ec-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--filet); }
.ec-phases li { display: grid; gap: 6px; }
.ec-phase-barre { height: 6px; background: rgba(0, 0, 0, .1); }
.ec-phase-barre span { display: block; height: 100%; background: var(--noir); }
.ec-phases li.est-encours .ec-phase-barre span { background: var(--jaune); }
.ec-phases strong { margin-top: 4px; font-size: 14px; font-weight: 600; }
.ec-phases small { font-size: 12.5px; color: var(--encre); }

.ec-dernier-cr { display: flex; flex-direction: column; gap: 6px; }
.ec-dernier-cr .ec-carte-tete { margin-bottom: 10px; }
.ec-cr-nom { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.ec-cr-date { font-size: 14px; font-weight: 500; }
.ec-cr-points { display: grid; gap: 10px; margin: 16px 0 20px; }
.ec-cr-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.ec-cr-points .ico { width: 20px; height: 20px; margin-top: 1px; padding: 3px; background: var(--noir); color: var(--jaune); stroke-width: 2.4; }
.ec-dernier-cr .bouton { align-self: flex-start; padding: 13px 20px; }

.ec-images-grille { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; aspect-ratio: 16 / 7; }
.ec-vignette { position: relative; display: block; overflow: hidden; background: var(--noir); }
.ec-vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ec-vignette:hover img { transform: scale(1.04); }
.ec-vignette-grande { grid-row: span 2; }
.ec-vignette-video { grid-column: span 2; }
.ec-lecture {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: var(--jaune); color: var(--noir);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.ec-lecture .ico { width: 24px; height: 24px; margin-left: 3px; fill: var(--noir); }
.ec-duree { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; font-size: 12px; font-weight: 600; background: rgba(0, 0, 0, .78); color: var(--blanc); }

.ec-etapes-liste li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.ec-etapes-liste li:first-child { padding-top: 0; }
.ec-etapes-liste li:last-child { padding-bottom: 0; border-bottom: 0; }
.ec-date {
  display: grid; place-items: center; align-content: center; flex: none; width: 56px; height: 56px;
  font-size: 11px; font-weight: 600; line-height: 1.1; text-transform: uppercase; border: 2px solid var(--noir);
}
.ec-date b { font-size: 20px; font-weight: 800; }
.ec-etapes-liste li.est-encours .ec-date { background: var(--jaune); border-color: var(--jaune); }
.ec-etapes-liste strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ec-etapes-liste small { font-size: 13px; color: var(--encre); }

.ec-docs li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.ec-docs li:first-child { padding-top: 0; }
.ec-docs li:last-child { padding-bottom: 0; border-bottom: 0; }
.ec-docs div { flex: 1; min-width: 0; }
.ec-docs strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.ec-docs small { font-size: 12.5px; color: var(--encre); }
.ec-doc-ico { display: grid; place-items: center; flex: none; width: 42px; height: 50px; font-size: 11px; font-weight: 700; letter-spacing: .06em; background: var(--noir); color: var(--jaune); }
.ec-docs a, .ec-btn-icone { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid var(--filet); transition: background-color .2s, border-color .2s; }
.ec-docs a:hover, .ec-btn-icone:hover { background: var(--jaune); border-color: var(--jaune); }
.ec-docs .ico, .ec-btn-icone .ico { width: 20px; height: 20px; }

/* ---------- Résumé chiffré (devis, planning) ---------- */

.ec-resume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.ec-resume-bloc { display: grid; gap: 4px; padding: 22px 24px; border: 1px solid var(--filet); border-top: 4px solid var(--jaune); }
.ec-resume-bloc small { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--encre); }
.ec-resume-bloc strong { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.ec-resume-bloc span { font-size: 13.5px; color: var(--encre); }
.ec-resume-noir { background: var(--noir); color: var(--blanc); border-color: var(--noir); border-top-color: var(--jaune); }
.ec-resume-noir small, .ec-resume-noir span { color: var(--encre-claire); }
.ec-resume-noir strong { color: var(--jaune); }

/* ---------- Devis ---------- */

.ec-table li {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr) 52px;
  align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--filet);
}
.ec-table li:last-child { border-bottom: 0; padding-bottom: 0; }
.ec-table li.ec-table-tete { padding: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--encre); }
.ec-table-doc { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ec-table-doc strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ec-table-doc small { font-size: 12.5px; color: var(--encre); }
.ec-table-date { font-size: 14px; color: var(--encre); }
.ec-table-montant { font-size: 15px; font-weight: 700; white-space: nowrap; }
.ec-table li.ec-ligne-a-valider { padding-left: 16px; padding-right: 8px; background: rgba(246, 186, 4, .16); box-shadow: inset 4px 0 0 var(--jaune); }
.ec-statut { display: inline-block; padding: 5px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid rgba(0, 0, 0, .25); }
.ec-statut-ok { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.ec-statut-attente, .ec-statut-cours { background: var(--jaune); border-color: var(--jaune); color: var(--noir); }

.ec-encart { display: flex; align-items: center; gap: 20px; padding: 22px 26px; background: var(--noir); color: var(--blanc); }
.ec-encart-ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; background: var(--jaune); color: var(--noir); }
.ec-encart-ico .ico { width: 26px; height: 26px; }
.ec-encart > div { flex: 1; }
.ec-encart strong { font-size: 17px; }
.ec-encart p { font-size: 14.5px; color: var(--encre-claire); }
.ec-encart .bouton .ico { width: 20px; height: 20px; }

/* ---------- Planning ---------- */

.ec-legende { display: flex; gap: 18px; font-size: 13px; color: var(--encre); }
.ec-legende li { display: flex; align-items: center; gap: 8px; }
.ec-legende i { width: 22px; height: 10px; border: 1.5px solid var(--noir); }
.ec-legende i.est-fait { background: var(--noir); }
.ec-legende i.est-encours { background: var(--jaune); border-color: var(--jaune); }

.gantt { --nom: 250px; position: relative; padding-bottom: 40px; }
.gantt::before {
  content: ""; position: absolute; top: 0; bottom: 40px; left: var(--nom); right: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px calc(100% / var(--mois, 14)));
}
.gantt-tete, .gantt-ligne { display: grid; grid-template-columns: var(--nom) repeat(var(--mois, 14), minmax(0, 1fr)); align-items: center; }
.gantt-tete { padding-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--encre); border-bottom: 2px solid var(--noir); }
.gantt-tete > span { grid-row: 2; text-align: center; }
.gantt-tete > .gantt-annee { grid-row: 1; padding: 0 0 6px 8px; text-align: left; font-size: 13px; font-weight: 700; color: var(--noir); }
.gantt-tete .est-courant { font-weight: 800; color: var(--noir); }
.gantt-ligne { min-height: 50px; border-bottom: 1px solid var(--filet); }
.gantt-nom { grid-column: 1; grid-row: 1; padding-right: 16px; font-size: 14px; font-weight: 500; line-height: 1.35; }
.gantt-barre {
  grid-row: 1; display: flex; align-items: center; justify-content: flex-end; height: 18px; margin-inline: 2px;
  border: 1.5px solid var(--noir); background: var(--blanc);
}
.gantt-barre.est-fait { background: var(--noir); }
.gantt-barre.est-encours { background: var(--jaune); border-color: var(--jaune); }
.gantt-barre b { padding-right: 6px; font-size: 11px; font-weight: 700; }
.gantt-jalon { grid-row: 1; justify-self: center; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--noir); border-radius: 50%; background: var(--blanc); }
.gantt-jalon .ico { width: 18px; height: 18px; }
.gantt-aujourdhui {
  position: absolute; top: 30px; bottom: 34px;
  left: calc(var(--nom) + (100% - var(--nom)) * var(--aujourdhui) / var(--mois, 14));
  border-left: 2px dashed var(--noir); pointer-events: none;
}
.gantt-aujourdhui b {
  position: absolute; top: calc(100% + 6px); left: 0; transform: translateX(-50%);
  padding: 3px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--noir); color: var(--jaune);
}

.ec-planning-liste { display: none; }
.ec-planning-liste li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0 14px 24px; border-bottom: 1px solid var(--filet); }
.ec-planning-liste li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border: 2px solid var(--noir); border-radius: 50%; background: var(--blanc);
}
.ec-planning-liste li.est-fait::before { background: var(--noir); }
.ec-planning-liste li.est-encours::before { background: var(--jaune); border-color: var(--jaune); }
.ec-planning-liste strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ec-planning-liste small { font-size: 13px; color: var(--encre); }

/* ---------- Photos et vidéos ---------- */

.ec-filtres { display: flex; flex-wrap: wrap; gap: 10px; }
.ec-semaine { display: grid; gap: 18px; }
.ec-semaine[hidden] { display: none; }
.ec-semaine + .ec-semaine { padding-top: 28px; border-top: 1px solid var(--filet); }
.ec-semaine-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.ec-semaine-titre { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ec-semaine-tete p { font-size: 14px; color: var(--encre); }
.ec-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ec-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--noir); }
.ec-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ec-media:hover img { transform: scale(1.04); }
.ec-media-legende {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--blanc);
  background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent);
}
.ec-media-video { box-shadow: inset 0 0 0 3px var(--jaune); }
.ec-media-video img { opacity: .85; }
.ec-media.est-cache { display: none; }

/* ---------- Comptes rendus ---------- */

.ec-cr-grille { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.ec-cr { display: grid; gap: 26px; }
.ec-cr-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 22px; border-bottom: 2px solid var(--noir); }
.ec-cr-titre { margin-top: 10px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.ec-cr-meta { margin-top: 4px; font-size: 14px; color: var(--encre); }
.ec-cr-tete .bouton { padding: 12px 18px; }
.ec-cr-tete .bouton .ico { width: 18px; height: 18px; }
.ec-cr-chiffres { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--filet); }
.ec-cr-chiffres > div { padding: 16px 20px; }
.ec-cr-chiffres > div + div { border-left: 1px solid var(--filet); }
.ec-cr-chiffres dt { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--encre); }
.ec-cr-chiffres dd { font-size: 20px; font-weight: 700; line-height: 1.4; }
.ec-cr-chiffres small { margin-left: 6px; padding: 2px 6px; font-size: 12px; font-weight: 700; vertical-align: middle; background: var(--jaune); }
.ec-cr-bloc h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.ec-cr-bloc h3 .ico { width: 24px; height: 24px; padding: 3px; background: var(--noir); color: var(--jaune); stroke-width: 2.2; }
.ec-cr-liste { display: grid; gap: 8px; padding-left: 34px; }
.ec-cr-liste li { position: relative; font-size: 15px; line-height: 1.6; }
.ec-cr-liste li::before { content: ""; position: absolute; left: -20px; top: .7em; width: 7px; height: 7px; background: var(--jaune); }
.ec-cr-valider { padding: 20px 22px; background: var(--jaune); }
.ec-cr-valider .ec-cr-liste li::before { background: var(--noir); }
.ec-cr-medias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ec-cr-archives { position: sticky; top: 24px; }
.ec-cr-index a { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-bottom: 1px solid var(--filet); transition: background-color .2s; }
.ec-cr-index li:last-child a { border-bottom: 0; }
.ec-cr-index b { display: grid; place-items: center; flex: none; width: 40px; height: 40px; font-size: 15px; font-weight: 800; border: 2px solid var(--noir); }
.ec-cr-index strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.ec-cr-index small { font-size: 12.5px; color: var(--encre); }
.ec-cr-index a:hover { background: rgba(246, 186, 4, .2); }
.ec-cr-index li.est-actif a { background: var(--jaune); }
.ec-cr-index li.est-actif b { background: var(--noir); border-color: var(--noir); color: var(--jaune); }
.ec-cr-index li.est-actif small { color: rgba(0, 0, 0, .75); }

/* ---------- Visionneuse photo ---------- */

.ec-visionneuse { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 56px 16px; background: rgba(0, 0, 0, .94); }
.ec-visionneuse[hidden] { display: none; }
.ec-visionneuse img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ec-visionneuse-fermer { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 48px; height: 48px; background: var(--jaune); border: 0; cursor: pointer; }
.ec-visionneuse-fermer .ico { width: 24px; height: 24px; }

/* ---------- Portail en service : cas vides, aperçu du bureau, grilles selon le nombre d'images ---------- */

.ec-apercu { position: sticky; top: 0; z-index: 40; padding: 10px var(--gouttiere); font-size: 13.5px; font-weight: 500; text-align: center; background: var(--jaune); color: var(--noir); }
.ec-apercu a { margin-left: 8px; font-weight: 700; border-bottom: 2px solid var(--noir); }
.ec-apercu + .ec-app .ec-menu { top: 41px; height: calc(100vh - 41px); }
.ec-form-erreur { padding: 12px 16px; font-size: 14px; font-weight: 500; background: var(--noir); color: var(--blanc); box-shadow: inset 4px 0 0 var(--jaune); }
.ec-form-info { padding: 12px 16px; font-size: 14px; line-height: 1.5; background: rgba(246, 186, 4, .2); box-shadow: inset 4px 0 0 var(--jaune); }
.ec-vide { font-size: 14.5px; line-height: 1.6; color: var(--encre); }
.ec-carte-jaune .ec-vide { color: var(--noir); }
.ec-vide-carte { padding-block: clamp(28px, 4vw, 48px); }
.ec-autres { display: grid; gap: 2px; margin-top: -10px; }
.ec-autres a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--encre-claire); border: 1px dashed var(--filet-clair); }
.ec-autres a:hover { color: var(--jaune); }
.ec-autres .ico { width: 16px; height: 16px; flex: none; }
.ec-yt { transform: scale(1.34); }
.ec-vignette:hover .ec-yt, .ec-media:hover .ec-yt { transform: scale(1.4); }
.ec-images-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ec-images-1 > * { grid-column: 1 / -1; grid-row: 1 / -1; }
.ec-images-2, .ec-images-3 { grid-template-columns: 2fr 1fr; }
.ec-images-2 > :nth-child(2) { grid-row: span 2; }
.ec-images-3 > .ec-vignette-video { grid-column: auto; }
.ec-images-4:not(:has(.ec-vignette-video)) > :last-child { grid-column: span 2; }
.ec-cr-index li.est-nouveau b { background: var(--jaune); border-color: var(--jaune); }
.ec-cr-index li.est-nouveau strong::after { content: "Nouveau"; margin-left: 8px; padding: 2px 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; background: var(--noir); color: var(--jaune); }
.ec-bureau-liste { display: grid; border-top: 1px solid var(--filet); }
.ec-bureau-liste li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.ec-bureau-liste div { flex: 1; min-width: 0; }
.ec-bureau-liste strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ec-bureau-liste small { font-size: 12.5px; color: var(--encre); }
.ec-bureau-liste a { font-size: 13.5px; font-weight: 600; border-bottom: 2px solid var(--jaune); }

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

@media (max-width: 1180px) {
  .ec-grille-accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-avancement, .ec-images { grid-column: 1 / -1; }
  .ec-cr-grille { grid-template-columns: 1fr; }
  .ec-cr-archives { position: static; }
  .gantt { --nom: 200px; }
}

/* ---------- Mobile : barre du haut et onglets en bas, comme une application ---------- */

@media (max-width: 900px) {
  .ec-app { grid-template-columns: 1fr; }
  .ec-menu { display: none; }
  .ec-mobile-barre {
    position: sticky; top: 0; z-index: 20;
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px var(--gouttiere); background: var(--noir);
  }
  .ec-mobile-barre img { width: auto; height: 34px; }
  .ec-mobile-actions { display: flex; align-items: center; gap: 10px; }
  .ec-mobile-wa { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--jaune); color: var(--jaune); }
  .ec-mobile-wa .ico { width: 22px; height: 22px; }
  .ec-onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--noir); border-top: 3px solid var(--jaune);
  }
  .ec-onglet { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 9px; font-size: 10.5px; font-weight: 500; line-height: 1.2; text-align: center; color: rgba(255, 255, 255, .7); }
  .ec-onglet .ico { width: 22px; height: 22px; }
  .ec-onglet.est-actif { color: var(--jaune); font-weight: 600; }
  .ec-onglet .ec-pastille { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; margin: 0; font-size: 10px; }
  .ec-principal { padding-bottom: 80px; }
  .ec-barre { padding: 22px var(--gouttiere) 18px; }
  .ec-retour-lien { display: none; }
  .ec-contenu { padding: 18px var(--gouttiere) 28px; }

  .ec-grille-accueil { grid-template-columns: 1fr; }
  .ec-documents .ec-docs { grid-template-columns: 1fr; row-gap: 14px; }
  .ec-avancement-corps { flex-direction: column; align-items: stretch; gap: 16px; }
  .ec-phases { grid-template-columns: 1fr 1fr; }
  .ec-images-grille { grid-template-columns: 1fr 1fr; grid-template-rows: none; aspect-ratio: auto; gap: 8px; }
  .ec-vignette { aspect-ratio: 4 / 3; }
  .ec-vignette-grande, .ec-vignette-video { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .ec-images-2 > :nth-child(2), .ec-images-3:has(.ec-vignette-video) > :nth-child(2), .ec-images-3 > .ec-vignette-video { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .ec-apercu { position: static; }
  .ec-bureau-liste li { flex-wrap: wrap; }
  .ec-resume { grid-template-columns: 1fr; }
  .ec-table li.ec-table-tete { display: none; }
  .ec-table li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "doc doc" "date montant" "statut actions";
    gap: 10px 12px;
  }
  .ec-table-doc { grid-area: doc; }
  .ec-table-date { grid-area: date; }
  .ec-table-montant { grid-area: montant; justify-self: end; }
  .ec-table li > span:nth-child(4) { grid-area: statut; }
  .ec-table-actions { grid-area: actions; justify-self: end; }
  .ec-encart { flex-direction: column; align-items: flex-start; }
  .gantt, .ec-legende { display: none; }
  .ec-planning-liste { display: block; }
  .ec-galerie { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ec-media-legende { padding: 20px 8px 8px; font-size: 11.5px; }
  .ec-cr-tete { flex-direction: column; }
  .ec-cr-chiffres { grid-auto-flow: row; }
  .ec-cr-chiffres > div + div { border-left: 0; border-top: 1px solid var(--filet); }
  .ec-cr-liste { padding-left: 26px; }
  .ec-cr-medias { grid-template-columns: 1fr 1fr; }

  .ec-connexion { grid-template-columns: 1fr; }
  .ec-connexion-visuel { gap: 40px; padding-bottom: 36px; }
  .ec-connexion-liste { display: none; }
  .ec-connexion-hachures { width: 16px; }
  .ec-connexion-logo img { height: 42px; }
  .ec-form-titre { font-size: 32px; }
}