/* Ecam Studio — portail clients. Disposition façon Drive, marque Ecam (rouge). */
:root {
  --fond: #f6f8fb;
  --carte: #ffffff;
  --encre: #1f2329;
  --gris: #4a5260;
  --gris-clair: #79808c;
  --trait: #e3e6ea;
  --survol: #f1f3f6;
  --recherche: #e9eef6;
  --marque: #c63d17;
  --marque-fonce: #a8320f;
  --marque-pale: #f6d9cf;
  --marque-tres-pale: #fdf1ec;
  --marque-texte: #8a2a0e;
  --ok-fond: #ddf3e6; --ok: #14653a;
  --attente-fond: #fdebd3; --attente: #7a4100;
  --cours-fond: #e4e9fb; --cours: #2b3c8f;
  --verif-fond: #efe5fa; --verif: #5b2a8c;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fond);
  color: var(--encre);
  font: 14px/1.45 "Figtree", system-ui, sans-serif;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--marque); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
.cache { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— Cadre ——— */
.entete { display: flex; align-items: center; gap: 24px; padding: 10px 20px; }
.logo { display: flex; align-items: center; gap: 10px; width: 236px; flex-shrink: 0; font-size: 21px; font-weight: 600; }
.logo .badge-admin { font-size: 12px; font-weight: 700; background: var(--encre); color: #fff; border-radius: 6px; padding: 2px 8px; }
.recherche { flex: 1; max-width: 720px; display: flex; align-items: center; gap: 12px; background: var(--recherche); border-radius: 999px; padding: 0 18px; height: 46px; }
.recherche input { flex: 1; border: 0; background: none; font-size: 16px; outline: none; min-width: 0; }
.utilisateur { margin-left: auto; position: relative; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--marque-pale); color: var(--marque-texte); font-weight: 700; }
.menu-utilisateur { position: absolute; right: 0; top: 46px; z-index: 20; width: 260px; }

.corps { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px 0; min-height: calc(100vh - 66px); }
.cote { flex: 1 1 220px; max-width: 256px; padding: 8px 0 0 12px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.cote a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 16px; border-radius: 999px; }
.cote a span.lien { display: flex; align-items: center; gap: 14px; }
.cote a:hover { background: #eceff3; color: var(--encre); }
.cote a.actif { background: var(--marque-pale); font-weight: 600; }
.cote .titre-groupe { margin: 18px 16px 6px; color: var(--gris); font-size: 13px; font-weight: 600; }
.compte-nb { font-size: 12px; font-weight: 700; background: #eceff3; border-radius: 999px; padding: 1px 8px; }
.compte-nb.fort { background: var(--marque); color: #fff; }
.bouton-nouveau { display: flex; align-items: center; gap: 12px; background: #fff; border: 0; border-radius: 16px; padding: 16px 22px; box-shadow: 0 1px 3px rgba(31,35,41,.25); font-weight: 600; font-size: 15px; width: max-content; margin-bottom: 14px; }
.bouton-nouveau:hover { box-shadow: 0 2px 8px rgba(31,35,41,.28); background: var(--marque-tres-pale); }

.principal { flex: 999 1 640px; min-width: 0; background: var(--carte); border-radius: 16px; padding: 12px 24px 96px; position: relative; display: flex; flex-direction: column; gap: 16px; }
h1.fil { margin: 10px 0 0; font-size: 24px; font-weight: 500; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h1.fil a { color: var(--gris); }
h1.fil .sep { color: var(--gris-clair); }

/* ——— Menus ——— */
.menu { background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(31,35,41,.22); padding: 8px 0; }
.menu button, .menu a { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 10px 16px; text-align: left; }
.menu button:hover, .menu a:hover { background: var(--survol); color: var(--encre); }
.menu button:disabled { color: var(--gris-clair); cursor: not-allowed; }
.menu .separateur { height: 1px; background: var(--trait); margin: 6px 0; }
.menu .info { padding: 8px 16px; color: var(--gris); font-size: 13px; }
.menu-nouveau { position: absolute; top: 70px; left: 24px; z-index: 20; width: 290px; }

/* ——— Liste façon Drive ——— */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.filtres select { border: 1px solid var(--gris-clair); background: #fff; border-radius: 8px; padding: 6px 10px; }
.tableau { overflow-x: auto; }
.lignes { min-width: 640px; }
.ligne { display: grid; grid-template-columns: minmax(0, 1fr) 190px 150px 44px; align-items: center; gap: 12px; padding: 0 12px; min-height: 48px; border-bottom: 1px solid var(--trait); }
.ligne.avec-client { grid-template-columns: minmax(0, 1fr) 170px 190px 140px 44px; }
.ligne.titres { font-weight: 600; }
a.ligne:hover { background: var(--survol); color: var(--encre); }
.ligne .nom { display: flex; align-items: center; gap: 14px; font-weight: 500; min-width: 0; }
.ligne .nom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne .discret { color: var(--gris); }
.vide { padding: 48px 16px; text-align: center; color: var(--gris); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vide strong { color: var(--encre); font-size: 17px; font-weight: 600; }

.etat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; width: max-content; }
.etat-preparation { background: var(--attente-fond); color: var(--attente); }
.etat-a_monter, .etat-montage { background: var(--cours-fond); color: var(--cours); }
.etat-relecture { background: var(--verif-fond); color: var(--verif); }
.etat-livre { background: var(--ok-fond); color: var(--ok); }
.etat-montage::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3f56c7; }

/* ——— Boutons ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 11px 20px; font-weight: 600; min-height: 44px; border: 1px solid var(--gris-clair); background: #fff; }
.btn:hover { background: var(--survol); color: var(--encre); }
.btn-plein { background: var(--marque); border-color: var(--marque); color: #fff; }
.btn-plein:hover { background: var(--marque-fonce); color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-lien { border: 0; background: none; color: var(--marque); font-weight: 600; padding: 0; }

/* ——— Projet ——— */
.bandeau { background: var(--marque-tres-pale); border: 1px solid #f3cdbf; border-radius: 14px; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.bandeau .texte { flex: 1 1 320px; }
.bandeau .texte p { margin: 0; }
.bandeau .texte .fort { font-size: 17px; font-weight: 600; }
.bandeau .texte .doux { color: var(--gris); margin-top: 2px; }
.champ { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.champ select, .champ input, .champ textarea { border: 1px solid #c9ced6; border-radius: 10px; padding: 10px; background: #fff; font-weight: 400; font-size: 14px; min-height: 44px; }
.deux-colonnes { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.deux-colonnes > .large { flex: 999 1 440px; min-width: 0; }
.deux-colonnes > .etroit { flex: 1 1 280px; }
.notes { border: 1px solid var(--trait); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.notes textarea { font: inherit; border: 1px solid #c9ced6; border-radius: 10px; padding: 10px; resize: vertical; min-height: 140px; }
.notes .aide { margin: 0; color: var(--gris); font-size: 13px; }
.depot { border: 2px dashed #c9ced6; border-radius: 14px; padding: 28px 16px; text-align: center; color: var(--gris); }
.depot strong { display: block; color: var(--encre); font-size: 16px; margin-bottom: 4px; }

.en-cours { border-radius: 18px; background: #f1f4fb; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; overflow: hidden; }
.en-cours .titre { margin: 0; font-size: 26px; font-weight: 600; }
.en-cours .doux { margin: 6px 0 0; color: var(--gris); font-size: 15px; max-width: 52ch; }
.pellicule-cadre { width: 100%; max-width: 420px; height: 22px; overflow: hidden; border-radius: 4px; background: var(--encre); }
.pellicule { width: 200%; height: 22px; background-image: repeating-linear-gradient(90deg, var(--encre) 0 10px, #f1f4fb 10px 18px); background-size: 18px 8px; background-repeat: repeat-x; background-position: 0 7px; }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bobine { animation: tourne 2.4s linear infinite; }
.pellicule { animation: defile 3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .bobine, .pellicule { animation: none; } }

.historique { list-style: none; margin: 0; padding: 0; color: var(--gris); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.admin-etats { border: 1px dashed var(--gris-clair); border-radius: 14px; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-etats .etiquette { font-weight: 600; margin-right: 6px; }

/* ——— Messages ——— */
.message { padding: 10px 14px; border-radius: 10px; font-weight: 500; }
.message.erreur { background: #fde7e4; color: #8a1c0b; }
.message.ok { background: var(--ok-fond); color: var(--ok); }
.toast { position: fixed; left: 24px; bottom: 24px; z-index: 50; background: var(--encre); color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25); max-width: calc(100% - 48px); }

/* ——— Fenêtre ——— */
dialog { border: 0; border-radius: 16px; padding: 24px; width: min(440px, calc(100% - 32px)); box-shadow: 0 8px 32px rgba(31,35,41,.3); }
dialog::backdrop { background: rgba(31,35,41,.35); }
dialog h2 { margin: 0 0 16px; font-size: 20px; font-weight: 600; }
dialog form { display: flex; flex-direction: column; gap: 14px; }
dialog .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ——— Connexion ——— */
.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.carte-connexion { background: #fff; border-radius: 24px; padding: 40px 36px; width: min(420px, 100%); box-shadow: 0 1px 3px rgba(31,35,41,.15); display: flex; flex-direction: column; gap: 18px; }
.carte-connexion h1 { margin: 0; font-size: 26px; font-weight: 600; }
.carte-connexion p { margin: 0; color: var(--gris); }
.carte-connexion form { display: flex; flex-direction: column; gap: 14px; }

/* ——— Admin ——— */
.bloc-client { border: 1px solid var(--trait); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.bloc-client h2 { margin: 0; font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acces { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 8px 0; border-top: 1px solid var(--trait); }
.secret { font-family: ui-monospace, Consolas, monospace; background: var(--survol); padding: 8px 10px; border-radius: 8px; user-select: all; word-break: break-all; }

@media (max-width: 760px) {
  .entete { flex-wrap: wrap; gap: 12px; }
  .logo { width: auto; }
  .recherche { order: 3; flex-basis: 100%; }
  .corps { padding: 0 8px 8px; }
  .cote { max-width: none; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; padding: 0; gap: 6px; }
  .cote .titre-groupe, .cote .pied { display: none; }
  .bouton-nouveau { margin-bottom: 0; }
  .principal { padding: 12px 14px 96px; }
  .menu-nouveau { top: 64px; left: 0; }
}