/* JOKKO CRM Immobilier — feuille de style (sans étape de compilation) */
:root {
  --bleu: #02516C; --bleu-fonce: #013b4f; --bleu-clair: #e6f0f4;
  --rouge: #E0262F; --rouge-clair: #fdecec;
  --vert: #1f8a4c; --vert-clair: #e7f5ec;
  --orange: #c56a00; --orange-clair: #fff3e0;
  --info: #1d6fb8; --info-clair: #e8f1fb;
  --gris-0: #ffffff; --gris-1: #f6f8f9; --gris-2: #eef1f3; --gris-3: #d9dfe3; --gris-5: #8a959c; --gris-7: #4a555c; --gris-9: #1b2327;
  --rayon: 10px; --ombre: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(2,81,108,.06);
  font-size: 15px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--gris-9); background: var(--gris-1); line-height: 1.45; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0; }
h2 { font-size: 1.12rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
small, .muted { color: var(--gris-5); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; } .mt-s { margin-top: .5rem; }

/* Mise en page */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 252px; background: var(--bleu); color: #fff; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1rem .9rem; background: #fff; }
.sidebar .brand img { height: 38px; }
.sidebar nav { padding: .5rem 0 2rem; }
.sidebar .groupe { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); padding: .9rem 1.1rem .3rem; }
.sidebar a { display: flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.9); padding: .45rem 1.1rem; font-size: .92rem; border-left: 3px solid transparent; }
.sidebar a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.sidebar a.actif { background: rgba(255,255,255,.14); border-left-color: var(--rouge); color: #fff; font-weight: 600; }
.sidebar .compteur { margin-left: auto; background: var(--rouge); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .45rem; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid var(--gris-2); padding: .6rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 5; }
.topbar .recherche { flex: 1; max-width: 420px; }
.topbar .recherche input { width: 100%; }
.topbar .user { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--bleu); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; }
.content { padding: 1.5rem; max-width: 1400px; width: 100%; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-head .sous { color: var(--gris-5); margin-top: .2rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.burger { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--bleu); }

/* Cartes */
.card { background: #fff; border: 1px solid var(--gris-2); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.card-head h2 { margin: 0; }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stat { background: #fff; border: 1px solid var(--gris-2); border-radius: var(--rayon); padding: 1rem 1.1rem; box-shadow: var(--ombre); }
.stat .lib { font-size: .8rem; color: var(--gris-5); text-transform: uppercase; letter-spacing: .03em; }
.stat .val { font-size: 1.45rem; font-weight: 700; margin-top: .25rem; color: var(--bleu-fonce); }
.stat .det { font-size: .82rem; color: var(--gris-7); margin-top: .15rem; }
.stat.alerte .val { color: var(--rouge); }
.stat.ok .val { color: var(--vert); }
.stat.attention .val { color: var(--orange); }

/* Tableaux */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .55rem .6rem; border-bottom: 1px solid var(--gris-2); text-align: left; vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris-5); font-weight: 600; background: var(--gris-1); }
tbody tr:hover { background: #fafcfd; }
td.num, th.num { text-align: right; white-space: nowrap; }
.dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: .35rem .9rem; font-size: .92rem; margin: 0; }
.dl dt { color: var(--gris-5); }
.dl dd { margin: 0; }

/* Badges et barres */
.badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; background: var(--gris-2); color: var(--gris-7); }
.badge.success { background: var(--vert-clair); color: var(--vert); }
.badge.danger { background: var(--rouge-clair); color: var(--rouge); }
.badge.warning { background: var(--orange-clair); color: var(--orange); }
.badge.info { background: var(--info-clair); color: var(--info); }
.badge.neutral { background: var(--bleu-clair); color: var(--bleu); }
.progress { height: 8px; background: var(--gris-2); border-radius: 999px; overflow: hidden; min-width: 80px; }
.progress > span { display: block; height: 100%; background: var(--bleu); border-radius: 999px; }
.progress.vert > span { background: var(--vert); }
.progress-lbl { display: flex; align-items: center; gap: .5rem; }
.progress-lbl .progress { flex: 1; }

/* Formulaires */
label { display: block; font-size: .84rem; font-weight: 600; color: var(--gris-7); margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=url], input[type=tel], input[type=search], input[type=file], select, textarea {
  width: 100%; padding: .5rem .65rem; border: 1px solid var(--gris-3); border-radius: 8px; font: inherit; background: #fff; color: var(--gris-9);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(2,81,108,.25); border-color: var(--bleu); }
textarea { min-height: 80px; }
.field { margin-bottom: .85rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: .45rem; font-weight: 500; }
.check input { width: auto; }
.erreur { color: var(--rouge); font-size: .8rem; margin-top: .2rem; }
.inline-form { display: inline; }
.filtres { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filtres .field { margin: 0; min-width: 150px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: .35rem; padding: .48rem .9rem; border-radius: 8px; border: 1px solid var(--bleu); background: var(--bleu); color: #fff; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--bleu-fonce); text-decoration: none; }
.btn.sec { background: #fff; color: var(--bleu); }
.btn.sec:hover { background: var(--bleu-clair); }
.btn.rouge { background: var(--rouge); border-color: var(--rouge); }
.btn.vert { background: var(--vert); border-color: var(--vert); }
.btn.petit { padding: .25rem .55rem; font-size: .78rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Messages */
.flash { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .92rem; }
.flash.ok { background: var(--vert-clair); color: var(--vert); border: 1px solid #bfe3cc; }
.flash.err { background: var(--rouge-clair); color: var(--rouge); border: 1px solid #f5c2c4; }
.flash.info { background: var(--info-clair); color: var(--info); border: 1px solid #c7dcf2; }
.vide { text-align: center; color: var(--gris-5); padding: 1.5rem; }

/* Onglets */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--gris-3); margin-bottom: 1rem; overflow-x: auto; }
.tabs a { padding: .55rem .9rem; color: var(--gris-7); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.actif { color: var(--bleu); border-bottom-color: var(--rouge); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--bleu); }

/* Étapes / timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 .9rem 1.6rem; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--gris-3); }
.timeline li::after { content: ""; position: absolute; left: 10px; top: 18px; bottom: 0; width: 2px; background: var(--gris-2); }
.timeline li:last-child::after { display: none; }
.timeline li.fait::before { background: var(--vert); }
.timeline li.encours::before { background: var(--rouge); box-shadow: 0 0 0 4px var(--rouge-clair); }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px dashed var(--gris-2); }
.checklist li .txt { flex: 1; }
.checklist li.fait .txt { color: var(--gris-5); text-decoration: line-through; }

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.galerie figure { margin: 0; background: #fff; border: 1px solid var(--gris-2); border-radius: 8px; overflow: hidden; }
.galerie img { width: 100%; height: 120px; object-fit: cover; display: block; }
.galerie figcaption { padding: .4rem .5rem; font-size: .78rem; }

/* Pipeline (kanban) */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.kanban .col { background: var(--gris-2); border-radius: var(--rayon); padding: .6rem; }
.kanban .col h3 { font-size: .82rem; display: flex; justify-content: space-between; }
.kanban .item { background: #fff; border-radius: 8px; padding: .55rem .6rem; margin-bottom: .5rem; font-size: .86rem; box-shadow: var(--ombre); }

/* Connexion */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%); padding: 1rem; }
.auth .box { background: #fff; border-radius: 14px; padding: 2rem; width: 100%; max-width: 420px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.auth .box img { display: block; max-width: 230px; margin: 0 auto 1.25rem; }
.auth .pied { text-align: center; color: rgba(255,255,255,.75); font-size: .8rem; margin-top: 1rem; }

/* Espace client */
.client-top { background: #fff; border-bottom: 3px solid var(--rouge); }
.client-top .in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; }
.client-top img { height: 40px; }
.client-nav { background: var(--bleu); }
.client-nav .in { max-width: 1100px; margin: 0 auto; display: flex; gap: .1rem; overflow-x: auto; padding: 0 .5rem; }
.client-nav a { color: rgba(255,255,255,.9); padding: .65rem .8rem; white-space: nowrap; font-size: .9rem; }
.client-nav a.actif { background: rgba(255,255,255,.15); color: #fff; font-weight: 600; }
.client-main { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.footer { text-align: center; color: var(--gris-5); font-size: .8rem; padding: 1.5rem 1rem; }

@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-side { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .sidebar { position: fixed; left: -260px; z-index: 20; transition: left .2s; }
  .sidebar.ouvert { left: 0; }
  .burger { display: inline-block; }
  .content { padding: 1rem; }
  .g2, .g3, .form-grid { grid-template-columns: 1fr; }
  .topbar { padding: .5rem 1rem; }
  .topbar .recherche { display: none; }
}
@media (max-width: 520px) { .g4 { grid-template-columns: 1fr; } .dl { grid-template-columns: 1fr; } .dl dt { margin-top: .4rem; } }
@media print { .sidebar, .topbar, .actions, .btn { display: none !important; } .content { padding: 0; } }
@media (min-width: 900px) { .client-nav .in { flex-wrap: wrap; } }

/* v1.1 : tableaux de bord par profil */
.ligne-action { display: flex; gap: .5rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--gris-2); flex-wrap: wrap; }
.ligne-action:last-child { border-bottom: 0; }
.alerte-txt { color: var(--rouge); }
.ok-txt { color: var(--vert); }
.alerte-liste p { margin: .3rem 0; }
.gravite { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; background: var(--orange); }
.gravite.haute { background: var(--rouge); }
.mini-barre { height: .45rem; background: var(--gris-2); border-radius: 999px; overflow: hidden; min-width: 70px; }
.mini-barre span { display: block; height: 100%; background: var(--bleu); }
.mini-barre span.depasse { background: var(--rouge); }
.actions-rapides { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3 { grid-template-columns: 1fr; } }

/* v1.2 · commercial et DCM */
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g6, .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .g6, .g5, .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.semaine { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: .5rem; overflow-x: auto; }
.semaine .jour { padding: .6rem; margin: 0; }
.semaine .jour.auj { border: 2px solid var(--bleu); }
.semaine h3 { font-size: .85rem; display: flex; justify-content: space-between; margin: 0 0 .4rem; }
.rdv { display: block; background: var(--gris-2); border-radius: 8px; padding: .4rem .5rem; margin-bottom: .4rem; font-size: .82rem; color: inherit; border-left: 3px solid var(--bleu); }
.rdv.annule { opacity: .55; border-left-color: #999; } .rdv.effectue { border-left-color: #1a8f4c; } .rdv.a_confirmer, .rdv.a_reprogrammer { border-left-color: #d98c00; }
.bloc-kpi { margin-bottom: 1rem; }
.bloc-kpi h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-texte, #666); margin: .2rem 0 .4rem; }
.alerte-bandeau { background: #fff4e5; border: 1px solid #f0b54a; border-radius: var(--rayon); padding: .7rem 1rem; margin-bottom: 1rem; font-weight: 600; }
.a-traiter { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .4rem; }
.a-traiter a, .a-traiter span { display: block; padding: .45rem .6rem; border-radius: 8px; background: var(--gris-2); color: inherit; }
.a-traiter .zero { opacity: .55; }
.sommaire { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.sommaire a { font-size: .8rem; padding: .25rem .6rem; border-radius: 99px; background: var(--gris-2); color: inherit; }
.carte-vente { border: 1px solid var(--gris-2); border-radius: var(--rayon); padding: .7rem .8rem; }
.carte-vente .chiffres { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; font-size: .85rem; }
.parcours { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .8rem; }
.parcours span { padding: .15rem .5rem; border-radius: 99px; background: var(--gris-2); }
.galerie img { width: 140px; height: 105px; object-fit: cover; border-radius: 8px; }
.photo-carte { display: inline-block; width: 160px; margin: 0 .5rem .6rem 0; vertical-align: top; font-size: .8rem; }
.photo-carte img { width: 160px; height: 120px; object-fit: cover; border-radius: 8px; display: block; }
.kanban .item .ligne { display: flex; justify-content: space-between; gap: .4rem; }
.mini-barre.ok span { background: #1a8f4c; }
.a-traiter a.actif { outline: 2px solid var(--bleu); }
.kanban .item .prob { font-size: .75rem; padding: 0 .35rem; border-radius: 99px; background: var(--gris-2); }
.kanban .col .total { font-size: .75rem; color: var(--gris-7); margin: -.2rem 0 .5rem; }
.kanban .item select { font-size: .75rem; padding: .1rem; width: 100%; margin-top: .3rem; }
.pastille { display: inline-block; white-space: nowrap; font-size: .82rem; }
.onglet-compte { font-size: .72rem; background: var(--gris-2); border-radius: 99px; padding: 0 .4rem; margin-left: .2rem; }
.suivi-360 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
.suivi-360 div { background: var(--gris-2); border-radius: 8px; padding: .45rem .6rem; font-size: .85rem; }
.suivi-360 strong { display: block; font-size: 1rem; }
.barres-pr > div { display: grid; grid-template-columns: 70px 1fr auto; gap: .5rem; align-items: center; margin-bottom: .3rem; }

/* v1.2 · Lot 2 : Direction générale */
.participants { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem 1.2rem; }
.participants h3 { font-size: .85rem; margin: 0 0 .3rem; color: var(--gris-5); }
.alerte-table td { vertical-align: top; }
.gravite-lib { font-size: .74rem; font-weight: 600; }
.gravite-lib.haute { color: var(--rouge); } .gravite-lib.moyenne { color: var(--orange); } .gravite-lib.basse { color: var(--gris-5); }
.compare { font-size: .8rem; }
.compare.hausse { color: var(--vert); } .compare.baisse { color: var(--rouge); }
.histo { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--gris-3); }
.histo li { padding: .3rem 0 .5rem .8rem; position: relative; font-size: .9rem; }
.histo li::before { content: ''; position: absolute; left: -6px; top: .65rem; width: 10px; height: 10px; border-radius: 50%; background: var(--bleu); }
.note-dir { border-left: 3px solid var(--gris-3); padding: .4rem .8rem; margin: .5rem 0; }
.note-dir.difficulte { border-color: var(--rouge); } .note-dir.resultat { border-color: var(--vert); } .note-dir.action_corrective { border-color: var(--orange); }
.note-dir.observation { border-color: var(--bleu); } .note-dir.rapport { border-color: var(--info); }

/* v1.2 · Remarques du 21/10 : aperçus, sections repliables, menu, performance, installation */
a.stat.cliquable { display: block; color: inherit; transition: border-color .15s, transform .15s; }
a.stat.cliquable:hover { text-decoration: none; border-color: var(--bleu); transform: translateY(-1px); }
.tendance { font-size: .78rem; font-weight: 600; margin-left: .3rem; }
.tendance.hausse { color: var(--vert); } .tendance.baisse { color: var(--rouge); }
.sidebar .groupe.repliable { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.sidebar .groupe.repliable::after { content: '▾'; font-size: .8rem; opacity: .7; transition: transform .15s; }
.sidebar .groupe.repliable.ferme::after { transform: rotate(-90deg); }
.sidebar .groupe.repliable:hover { color: #fff; }
.card > h2.pli, .card > h3.pli { cursor: pointer; position: relative; padding-right: 1.4rem; }
.card > h2.pli::after, .card > h3.pli::after { content: '▾'; position: absolute; right: 0; top: 0; color: var(--gris-5); font-size: .85rem; transition: transform .15s; }
.card.replie > h2.pli::after, .card.replie > h3.pli::after { transform: rotate(-90deg); }
.card.replie > :not(h2):not(h3) { display: none; }
.card.replie > h2, .card.replie > h3 { margin-bottom: 0; }
.apercu { position: fixed; inset: 0; z-index: 50; }
.apercu-fond { position: absolute; inset: 0; background: rgba(15, 30, 38, .35); }
.apercu-panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--gris-1); box-shadow: -8px 0 24px rgba(0,0,0,.15); display: flex; flex-direction: column; }
.apercu-tete { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .8rem 1rem; background: #fff; border-bottom: 1px solid var(--gris-3); }
.apercu-tete strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu-tete span { flex-shrink: 0; }
.apercu-corps { padding: 1rem; overflow-y: auto; flex: 1; }
.apercu-corps .page-head .actions { display: none; }
body.apercu-ouvert { overflow: hidden; }
.tabs-dash { margin-bottom: 1rem; }
.courbe { width: 100%; height: auto; display: block; }
.courbe .grille { stroke: var(--gris-2); stroke-width: 1; }
.courbe .axe { fill: var(--gris-5); font-size: 11px; }
.courbe .s1 { stroke: var(--bleu); stroke-width: 2; fill: none; }
.courbe .s2 { stroke: var(--gris-5); stroke-width: 2; fill: none; stroke-dasharray: 4 3; }
.courbe .p1 { fill: var(--bleu); stroke: #fff; stroke-width: 2; }
.courbe .p2 { fill: var(--gris-5); stroke: #fff; stroke-width: 2; }
.courbe .zone { fill: var(--bleu); opacity: .07; }
.courbe .barre { fill: var(--bleu); }
.courbe .barre.neg { fill: var(--rouge); }
.courbe .cible { fill: transparent; cursor: pointer; }
.legende { display: flex; gap: 1rem; font-size: .8rem; color: var(--gris-7); margin: .3rem 0 0; flex-wrap: wrap; }
.legende i { display: inline-block; width: 14px; height: 2px; background: var(--bleu); vertical-align: middle; margin-right: .3rem; }
.legende i.n1 { background: var(--gris-5); }
.tip { position: absolute; z-index: 60; background: var(--gris-9); color: #fff; font-size: .78rem; padding: .3rem .5rem; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.album-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.album { display: block; background: #fff; border: 1px solid var(--gris-2); border-radius: var(--rayon); overflow: hidden; color: inherit; box-shadow: var(--ombre); }
.album:hover { text-decoration: none; border-color: var(--bleu); }
.album .couverture { position: relative; aspect-ratio: 4 / 3; background: var(--gris-2); display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.album .couverture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album .couverture img:first-child { grid-row: span 2; }
.album .couverture img:only-child { grid-column: span 2; }
.album .nombre { position: absolute; right: .5rem; bottom: .5rem; background: rgba(0,0,0,.65); color: #fff; font-size: .75rem; border-radius: 99px; padding: .1rem .5rem; }
.album .info { padding: .6rem .8rem; }
.album .info strong { display: block; }
.installer { background: transparent; border: 1px solid var(--bleu); color: var(--bleu); }
@media (max-width: 700px) { .apercu-panneau { width: 100%; } }
.fil { font-size: .8rem; color: var(--gris-5, #667); margin-bottom: .2rem; }
/* Performance : courbes, tendances, classement */
.tendance.neutre { color: var(--gris-7); }
.courbe.spark { height: 30px; margin: .3rem 0 .1rem; }
.courbe.spark .s1 { stroke-width: 1.5; }
.courbe .zero { stroke: var(--gris-3); }
.courbe .objectif { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 6 4; }
.courbe .axe.obj { fill: var(--orange); }
.courbe .axe.fort { fill: var(--gris-9); font-weight: 600; font-size: 12px; }
.courbe .cible:hover { fill: var(--bleu); opacity: .05; }
.legende i.obj { background: var(--orange); }
.courbe-fig { margin: 0; }
.perf-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 1rem; }
.perf-carte .resume { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .85rem; margin: .2rem 0 .6rem; }
.perf-carte .resume strong { font-size: 1.15rem; }
.perf-carte .def { font-size: .78rem; color: var(--gris-5); margin-top: .4rem; }
.perf-table td.num, .perf-table th.num { white-space: nowrap; }
.album-grille > .card { grid-column: 1 / -1; }
.tabs-dash .compteur-onglet { background: var(--rouge); color: #fff; border-radius: 99px; font-size: .7rem; padding: 0 .4rem; margin-left: .2rem; }
.masquer-zero > .zero { display: none; }
/* v1.2 · Contrôle de gestion */
tr.ligne-alerte td { background: #fff4f4; }
.circuit { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.circuit li { border: 1px solid var(--gris-3); border-radius: 8px; padding: .6rem .7rem; background: #fff; }
.circuit li.fait { border-color: var(--vert); background: #f2fbf5; }
.import-ok td { background: #f2fbf5; } .import-rejet td { background: #fff4f4; } .import-doublon td { background: #fff9ec; }
.mapping-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem 1rem; }
.g6 .stat .val, .g5 .stat .val { font-size: 1.15rem; }

/* v1.2 · Planning (frise) */
.gantt { border: 1px solid var(--gris-3); border-radius: 10px; overflow: hidden; background: var(--gris-0); }
.gantt-ligne { display: grid; grid-template-columns: minmax(150px, 30%) 1fr; border-bottom: 1px solid var(--gris-3); min-height: 2rem; }
.gantt-ligne:last-child { border-bottom: 0; }
.gantt-entete { background: var(--gris-1); font-size: .72rem; color: var(--gris-5); min-height: 1.7rem; }
.gantt-lib { padding: .35rem .6rem; font-size: .82rem; border-right: 1px solid var(--gris-3); overflow: hidden; text-overflow: ellipsis; }
.gantt-lib small { display: block; font-size: .7rem; }
.gantt-ligne.niv1 .gantt-lib { padding-left: 1.4rem; font-size: .78rem; }
.gantt-ligne.niv0 { background: color-mix(in srgb, var(--bleu-clair) 35%, transparent); }
.gantt-zone { position: relative; min-height: 1.9rem; }
.gantt-mois { position: absolute; top: .35rem; transform: translateX(2px); white-space: nowrap; border-left: 1px solid var(--gris-3); padding-left: 3px; }
.gantt-auj { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rouge); opacity: .55; }
.gantt-barre { position: absolute; top: .55rem; height: .8rem; border-radius: 4px; background: var(--bleu-clair); overflow: hidden; display: inline-block; }
.gantt-barre .gantt-fait { display: block; height: 100%; background: var(--bleu); }
.gantt-barre.retard { background: var(--rouge-clair); } .gantt-barre.retard .gantt-fait { background: var(--rouge); }
.gantt-barre.bloque { background: var(--orange-clair); } .gantt-barre.bloque .gantt-fait { background: var(--orange); }
.gantt-barre.fini { background: var(--vert-clair); } .gantt-barre.fini .gantt-fait { background: var(--vert); }
.gantt-barre.futur { background: var(--gris-1); border: 1px dashed var(--gris-5); }
.gantt-jalon { position: absolute; top: .5rem; width: .8rem; height: .8rem; background: var(--bleu); transform: translateX(-50%) rotate(45deg); display: inline-block; }
.gantt-jalon.retard { background: var(--rouge); } .gantt-jalon.fini { background: var(--vert); }
.gantt-sans { position: absolute; top: .5rem; left: .5rem; }
.legende-gantt { font-size: .75rem; color: var(--gris-5); display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; margin-top: .4rem; }
.legende-gantt .gantt-barre, .legende-gantt .gantt-jalon { position: static; width: 1.4rem; margin-right: .25rem; vertical-align: middle; }
.legende-gantt .gantt-jalon { width: .7rem; height: .7rem; transform: rotate(45deg); }
@media (max-width: 700px) { .gantt-ligne { grid-template-columns: 110px 1fr; } .gantt-mois { font-size: .62rem; } }
/* v1.2 · Étapes et trois avancements */
.etapes-frise { display: grid; grid-template-columns: repeat(9, 1fr); gap: .3rem; margin: .5rem 0 1rem; }
.etapes-frise .et { border-radius: 8px; padding: .45rem .4rem; font-size: .72rem; background: var(--gris-1); border: 1px solid var(--gris-3); text-align: center; }
.etapes-frise .et strong { display: block; font-size: .8rem; }
.etapes-frise .et.terminee { background: var(--vert-clair); border-color: var(--vert); }
.etapes-frise .et.en_cours { background: var(--bleu-clair); border-color: var(--bleu); }
.etapes-frise .et.bloquee { background: var(--orange-clair); border-color: var(--orange); }
.etapes-frise .et.retard { box-shadow: inset 0 -3px 0 var(--rouge); }
.etapes-frise.n5 { grid-template-columns: repeat(5, 1fr); }
.etapes-frise.n6 { grid-template-columns: repeat(6, 1fr); }
.etapes-frise.n7 { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 700px) { .etapes-frise.n7 { grid-template-columns: repeat(4, 1fr); } }
.etapes-frise .et a { color: inherit; display: block; }
@media (max-width: 900px) { .etapes-frise, .etapes-frise.n5, .etapes-frise.n6 { grid-template-columns: repeat(3, 1fr); } }
.carte-sites { height: 520px; border-radius: 10px; border: 1px solid var(--gris-3); }
.trois-av { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (max-width: 700px) { .trois-av { grid-template-columns: 1fr; } }

/* Lot 5 · calendrier juridique et matrice des risques */
.calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--gris-3); border: 1px solid var(--gris-3); border-radius: 8px; overflow: hidden; }
.cal-tete { background: var(--gris-1); text-align: center; font-size: .75rem; font-weight: 600; padding: .3rem; color: var(--gris-7); }
.cal-jour { background: #fff; min-height: 84px; padding: .25rem; font-size: .72rem; display: flex; flex-direction: column; gap: 2px; }
.cal-jour.hors { background: var(--gris-1); color: var(--gris-5); }
.cal-jour.aujourdhui { box-shadow: inset 0 0 0 2px var(--rouge); }
.cal-jour .num { font-weight: 600; }
.cal-ev { display: block; border-radius: 4px; padding: 1px 4px; background: var(--bleu-clair); color: var(--bleu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.audience { background: var(--rouge-clair); color: var(--rouge); }
.cal-ev.delai_recours { background: var(--orange-clair); color: var(--orange); }
.cal-ev.fait, .cal-ev.annule, .cal-ev.reporte { opacity: .5; text-decoration: line-through; }
.matrice { width: 100%; border-collapse: collapse; }
.matrice th, .matrice td { border: 1px solid var(--gris-3); padding: .5rem; text-align: center; }
.matrice td { font-weight: 700; font-size: 1rem; }
.matrice td.niv-haut { background: var(--rouge-clair); color: var(--rouge); }
.matrice td.niv-moyen { background: var(--orange-clair); color: var(--orange); }
.matrice td.niv-bas { background: var(--vert-clair); color: var(--vert); }
@media (max-width: 700px) { .cal-jour { min-height: 56px; } .cal-ev { font-size: .62rem; } }
.ligne-ok td { background: var(--vert-clair); }
.mb-s { margin-bottom: .35rem; }
.inline-form input { width: auto; display: inline-block; margin: 0 .25rem; }
/* Lot 8 · RH et paie */
.flex-entre { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
button.lien { background: none; border: 0; color: var(--rouge); cursor: pointer; padding: 0 .25rem; font: inherit; }
.etapes-paie { grid-template-columns: repeat(6, 1fr); }
.bulletin-section { border-top: 1px solid var(--gris-3); padding-top: .6rem; margin-top: .6rem; }
.bulletin-total td { font-weight: 700; background: var(--gris-1); }
.net-a-payer { font-size: 1.6rem; font-weight: 700; color: var(--bleu); }
.bandeau-indicatif { background: var(--orange-clair); border: 1px solid var(--orange); border-radius: 8px; padding: .5rem .8rem; margin-bottom: 1rem; }
@media (max-width: 700px) { .etapes-paie { grid-template-columns: repeat(3, 1fr); } }
ul.arbre, ul.arbre ul { list-style: none; padding-left: 1rem; margin: .2rem 0; border-left: 2px solid var(--gris-3); }
ul.arbre li { padding: .15rem 0; }

/* Lot 9 · actions de masse et partage */
.barre-masse { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; margin-bottom: 10px; border: 1px dashed var(--bord, #d8dee6); border-radius: 8px; background: var(--fond-doux, #f7f9fb); }
.barre-masse.active { border-style: solid; border-color: var(--primaire, #0b4f6c); background: #eef6fa; }
.barre-masse .compte { font-weight: 600; min-width: 110px; }
.barre-masse select { width: auto; min-width: 180px; }
.barre-masse .lien { margin-left: auto; }
td.case, th.case { width: 28px; padding-right: 0; }
tr.ligne-suspendue td { opacity: .65; }
.partage-canaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.lien-copie { display: flex; gap: 6px; } .lien-copie input { flex: 1; font-size: 13px; }
/* Lot 10 · Archivage : barres horizontales des rapports */
.barre-h { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr 2.5rem; gap: .5rem; align-items: center; padding: .2rem 0; font-size: .85rem; }
.barre-h strong { text-align: right; }
/* Horaire de travail : jours cochés sur une ligne */
.jours-cases { display: flex; flex-wrap: wrap; gap: .2rem .8rem; padding-top: .3rem; }
.jours-cases .check { margin: 0; }
/* v1.3 */
form.surbrillance, .card.surbrillance { box-shadow: 0 0 0 3px #E0262F55; transition: box-shadow .3s; }
.nowrap { white-space: nowrap; }
.btn.btn-archives { background: #E0262F; border-color: #E0262F; color: #fff; font-weight: 600; }
.btn.btn-archives:hover { background: #b81d25; border-color: #b81d25; color: #fff; }
.topbar .btn-archives-haut { white-space: nowrap; }
@media (max-width: 760px) { .topbar .btn-archives-haut span { display: none; } }
.pieces-fiche .pieces-tete { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
.pieces-fiche .pieces-ajout { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-top: .75rem; }
.pieces-fiche .pieces-ajout .field { flex: 1 1 18rem; margin: 0; }
.field.pieces-jointes input[type=file] { width: 100%; padding: .5rem; border: 1px dashed #9db4bf; border-radius: 8px; background: #f7fafb; }
.import-partage { margin-bottom: 1rem; }
.petit-lien { font-size: .82rem; }
.champ-autre { margin-top: .4rem; }

/* v1.4 · sauvegarde complète */
.inline-details { display: inline-block; }
.inline-details > summary { list-style: none; cursor: pointer; display: inline-block; }
.inline-details > summary::-webkit-details-marker { display: none; }
.inline-details[open] { display: block; margin: .4rem 0; }
.menu-recherche { padding: .7rem .9rem .5rem; position: sticky; top: 0; z-index: 2; background: var(--bleu); }
.menu-recherche input { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; border-radius: 8px; padding: .5rem .7rem; font-size: .9rem; }
.menu-recherche input::placeholder { color: rgba(255,255,255,.7); }
.menu-recherche input:focus { outline: 2px solid #fff; background: rgba(255,255,255,.2); }
.menu-recherche-vide { color: rgba(255,255,255,.75); font-size: .85rem; padding: .4rem .2rem 0; }
.bandeau-action { display: block; background: #EEF5F8; border: 1px solid #BFD6E0; border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; color: inherit; line-height: 1.5; }
.bandeau-action.ok { background: #EAF7EE; border-color: #9BD3AE; }
.bandeau-action .inline-form, .bandeau-action .btn { margin-left: .5rem; vertical-align: middle; }
a.bandeau-action.lien-bloc { text-decoration: none; }
a.bandeau-action.lien-bloc:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* v1.4 · To Day */
.today-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.today-cote { position: sticky; top: 1rem; min-width: 0; }
.today-tete { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gris-2); padding-bottom: .7rem; margin-bottom: .8rem; }
.today-titre { margin: 0; letter-spacing: .06em; }
.today-outils { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.segment { display: inline-flex; border: 1px solid var(--gris-2); border-radius: 8px; overflow: hidden; }
.segment a { padding: .3rem .65rem; font-size: .85rem; color: inherit; text-decoration: none; border-left: 1px solid var(--gris-2); }
.segment a:first-child { border-left: 0; }
.segment a.actif { background: var(--bleu); color: #fff; }
.today-jour { margin-bottom: 1rem; }
.today-jour h3 { font-size: 1rem; margin: .4rem 0 .6rem; }
.today-jour.est-aujourdhui h3 { color: var(--bleu); }
.today-tache { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .6rem; border: 1px solid var(--gris-2); border-radius: 10px; margin-bottom: .5rem; background: #fff; }
.today-tache.faite .today-texte { text-decoration: line-through; color: #7a8790; }
.today-case { border: 0; background: none; font-size: 1.45rem; line-height: 1; cursor: pointer; padding: 0 .1rem; color: var(--bleu); }
.today-tache.faite .today-case { color: var(--vert); }
.today-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; padding-top: .15rem; }
.today-menu > summary { list-style: none; cursor: pointer; padding: 0 .4rem; font-weight: 700; color: #7a8790; }
.today-menu > summary::-webkit-details-marker { display: none; }
.today-menu[open] { flex-basis: 100%; }
.today-tache:has(.today-menu[open]) { flex-wrap: wrap; }
.today-menu-corps { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.today-menu-corps form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.today-menu-corps input[type=text] { min-width: 12rem; flex: 1; }
.today-vide { color: #7a8790; font-style: italic; margin: .3rem 0 .6rem; }
.today-ajout { display: flex; gap: .5rem; margin-top: .4rem; }
.today-ajout input { flex: 1; min-width: 0; }
.today-progression { border-top: 1px solid var(--gris-2); padding-top: .8rem; }
.today-progression .barre { height: 12px; background: var(--gris-2, #e5e9ec); border-radius: 999px; overflow: hidden; margin-top: .4rem; }
.today-progression .barre span { display: block; height: 100%; background: var(--vert); transition: width .3s; }
.cal-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.cal-tete a { text-decoration: none; padding: 0 .5rem; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-js { font-size: .7rem; color: #7a8790; padding: .2rem 0; }
.cal-j { position: relative; padding: .35rem 0 .45rem; border-radius: 6px; color: inherit; text-decoration: none; font-size: .85rem; }
.cal-j:hover { background: var(--bleu-clair); }
.cal-j.hors { color: #b5bec4; }
.cal-j.auj { font-weight: 700; color: var(--bleu); outline: 1px solid var(--bleu); }
.cal-j.choisi { background: var(--bleu); color: #fff; }
.cal-j i { position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--bleu); }
.cal-j i.ok { background: var(--vert); }
.cal-j i.retard { background: var(--rouge); }
.today-sugg { display: flex; gap: .5rem; align-items: flex-start; justify-content: space-between; padding: .45rem 0; border-bottom: 1px dashed var(--gris-2); }
.today-sugg span { min-width: 0; overflow-wrap: anywhere; }
.today-bloc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; }
.today-bloc h2 { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
@media (max-width: 900px) { .today-grille, .today-bloc { grid-template-columns: minmax(0, 1fr); } .today-cote { position: static; } }

/* v1.4 · aucun bloc ni texte qui se chevauche : les colonnes peuvent rétrécir, les longs textes passent à la ligne, les tableaux défilent dans leur carte */
.grid > *, .form-grid > *, .g-side > * { min-width: 0; }
.stat .val, .stat .lib, .stat .det, .card h2, .card h3, .bandeau-action, .et { overflow-wrap: anywhere; }
.card:has(> table), .card:has(> div > table:not(.table-wrap table)) { overflow-x: auto; }
@media (max-width: 760px) {
  .topbar { gap: .5rem; flex-wrap: wrap; }
  .topbar .user .right { display: none; }
  .topbar .installer { font-size: 0; padding: .3rem .5rem; }
  .topbar .installer::before { content: '📲'; font-size: 1rem; }
  .page-head { flex-wrap: wrap; }
  .page-head .actions { flex-wrap: wrap; }
}

/* v1.4 · droits à cocher */
.droits-grille { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: start; }
.droits-liste { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow-y: auto; padding: .8rem; }
.droits-liste a { display: flex; flex-direction: column; padding: .45rem .6rem; border-radius: 8px; color: inherit; text-decoration: none; border-left: 3px solid transparent; }
.droits-liste a small { color: #7a8790; }
.droits-liste a:hover { background: var(--bleu-clair); }
.droits-liste a.actif { background: var(--bleu-clair); border-left-color: var(--rouge); font-weight: 600; }
.droits-domaines { columns: 2 320px; column-gap: 1rem; }
.droits-domaine { break-inside: avoid; border: 1px solid var(--gris-2); border-radius: 10px; padding: .4rem .8rem .6rem; margin: 0 0 1rem; }
.droits-domaine legend { font-weight: 700; padding: 0 .3rem; }
.droits-domaine legend .petit-lien { border: 0; background: none; cursor: pointer; font-weight: 400; padding: 0; }
label.droit { display: block; padding: .2rem 0; overflow-wrap: anywhere; }
label.droit small.code { display: none; }
label.droit:hover small.code { display: inline; }
label.droit.ajoute { color: var(--vert); }
label.droit.ajoute::after { content: ' ✚'; }
label.droit.retire { text-decoration: line-through; color: #8a949b; }
.droits-perso { border: 1px solid var(--gris-2); border-radius: 10px; padding: .6rem .9rem; }
@media (max-width: 900px) { .droits-grille { grid-template-columns: minmax(0, 1fr); } .droits-liste { position: static; max-height: none; } }

/* v1.5 · fiche de transmission aux archives */
.fiche-archivage h2.mt { border-top: 1px solid var(--bord, #e3e6ea); padding-top: 14px; }
.fiche-direction { border: 1px dashed var(--bord, #d5dae0); border-radius: 10px; padding: 10px 14px; margin: 6px 0 4px; min-width: 0; }
.fiche-direction legend { font-weight: 600; padding: 0 6px; }
.fiche-direction[hidden] { display: none; }
.analyse-auto { background: #eef6ff; border: 1px solid #b9d7f5; border-radius: 10px; padding: 10px 12px; margin: 8px 0; overflow-wrap: anywhere; }
.analyse-auto[hidden] { display: none; }
.question-arch { border-left: 3px solid #f0a020; padding: 4px 0 4px 12px; margin-bottom: 14px; overflow-wrap: anywhere; }
.question-arch.repondue { border-left-color: #2e7d32; }
.question-arch .reponse { background: #f4f8f4; border-radius: 8px; padding: 8px 10px; }
.modeles-questions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.modeles-questions .btn { white-space: normal; text-align: left; }

/* v1.5 · primes */
.case-mini { width: 6.5em; min-width: 0; }
.case-note { width: 12em; min-width: 0; }
.table-primes input[type=text] { min-width: 9em; }
.table-primes td, .table-primes th { white-space: nowrap; }
.table-primes tfoot th { border-top: 2px solid var(--bord, #d5dae0); }
.ligne-nouvelle td { background: #f7faf7; }
.mois-courant { padding: 0 6px; align-self: center; }

/* v1.5 · apparence de l'entreprise */
.marque-apercu { background: #fff; border: 1px solid var(--gris-3); border-radius: 8px; padding: 10px; min-height: 70px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.marque-apercu img { max-height: 60px; max-width: 100%; }
.marque-apercu.petit img { max-height: 48px; }
.couleur-ligne { display: flex; align-items: center; gap: 10px; }
.couleur-ligne input[type=color] { width: 56px; height: 38px; padding: 2px; }
.police-apercu { font-size: 1.15rem; background: var(--gris-1); padding: 10px 12px; border-radius: 8px; overflow-wrap: anywhere; }
.maquette { display: flex; border: 1px solid var(--gris-3); border-radius: 10px; overflow: hidden; min-height: 180px; }
.maquette-menu { width: 42%; background: var(--menu, var(--bleu)); color: var(--menu-texte, #fff); display: flex; flex-direction: column; gap: 6px; padding: 10px; font-size: .85rem; }
.maquette-menu img { background: #fff; border-radius: 6px; padding: 4px; max-height: 34px; max-width: 100%; object-fit: contain; }
.maquette-menu .actif { border-left: 3px solid var(--rouge); padding-left: 6px; font-weight: 600; }
.maquette-corps { flex: 1; padding: 12px; min-width: 0; }
.sidebar a { color: var(--menu-texte, rgba(255,255,255,.9)); }

/* v1.5 · Administration des ventes */
.etapes-frise.n8 { grid-template-columns: repeat(8, 1fr); }
.etapes-frise a.et { color: inherit; }
.etapes-frise a.et:hover { text-decoration: none; border-color: var(--bleu); }
.etapes-frise .et.derogation { background: #fff8e1; border-color: #c9a227; }
.etapes-frise .et.sans_objet { opacity: .6; }
@media (max-width: 900px) { .etapes-frise.n8 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .etapes-frise.n8 { grid-template-columns: repeat(2, 1fr); } }
.adv-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.adv-nav a { background: #fff; border: 1px solid var(--gris-3); border-radius: 999px; padding: 4px 11px; font-size: .82rem; color: var(--gris-7); }
.adv-nav a b { color: var(--bleu); font-weight: 700; margin-right: 2px; }
.adv-nav a.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.adv-nav a.actif b { color: #fff; }
.adv-nav a:hover { text-decoration: none; border-color: var(--bleu); }
.alerte-adv { border-bottom: 1px solid var(--gris-2); padding: 6px 0; }
.alerte-adv summary { cursor: pointer; overflow-wrap: anywhere; }
.alerte-adv ul { margin: 6px 0 4px; }
.etape-ligne { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--gris-2); }
.etape-ligne .num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--gris-2); }
.etape-ligne.fait .num { background: var(--vert); color: #fff; }
.etape-ligne.en_cours .num { background: var(--bleu); color: #fff; }
.etape-ligne.derogation .num { background: #c9a227; color: #fff; }
.etape-ligne .etape-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 340px; }
.etape-ligne .etape-actions form { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.etape-ligne .etape-actions input[type=text] { min-width: 0; width: 150px; }
@media (max-width: 700px) { .etape-ligne { grid-template-columns: 34px 1fr; } .etape-ligne .etape-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; } }
.piece-ok { color: var(--vert); } .piece-ko { color: var(--rouge); }
.version-ancienne { opacity: .65; }

/* v1.6 · Lignes signalées (gravite) : la ligne reste une vraie ligne de tableau, le signal est un liseré à gauche. */
tr.gravite { display: table-row; width: auto; height: auto; border-radius: 0; margin: 0; background: transparent; }
tr.gravite > td:first-child { box-shadow: inset 4px 0 0 var(--orange); }
tr.gravite.haute > td:first-child, tr.gravite.critique > td:first-child { box-shadow: inset 4px 0 0 var(--rouge); }
tr.gravite.haute > td, tr.gravite.critique > td { background: #fff7f7; }
tr.gravite.basse > td:first-child { box-shadow: inset 4px 0 0 var(--gris-3); }
div.gravite, li.gravite { display: block; width: auto; height: auto; border-radius: 0; margin: 0; background: transparent; }

/* v1.6 · Pages : 15 lignes par page, navigation Précédent / Suivant */
.pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0; font-size: .85rem; }
.pages .pages-info { color: var(--gris-5); margin-right: 8px; }
.pages .pg { display: inline-block; min-width: 32px; text-align: center; padding: 5px 9px; border: 1px solid var(--gris-3); border-radius: 6px; background: #fff; color: var(--bleu); cursor: pointer; line-height: 1.2; }
.pages .pg.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 600; }
.pages .pg.off { color: var(--gris-3); cursor: default; }
.pages button.pg { font: inherit; }
tr.pg-cache { display: none; }
.champ-fixe { padding: 9px 12px; border: 1px solid var(--gris-3); border-radius: 8px; background: var(--gris-1, #f6f7f9); }
/* v1.6 · Application installée : flèches Retour / Avancer / Actualiser */
.nav-app { display: inline-flex; gap: 4px; align-items: center; flex-shrink: 0; }
.nav-app[hidden] { display: none; }
.nav-app button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--gris-3); background: #fff; color: var(--bleu); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0; }
.nav-app button:disabled { opacity: .35; cursor: default; }
.client-nav .nav-app button { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); margin: 5px 2px; }
/* v1.6 · double authentification */
.qr-2fa { margin: 8px 0; } .qr-2fa img, .qr-2fa svg { width: 180px; height: 180px; image-rendering: pixelated; border: 6px solid #fff; box-shadow: 0 0 0 1px var(--gris-3); }
.cle-2fa { font-size: .9rem; letter-spacing: .05rem; word-break: break-all; }
.codes-secours { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 8px 0; }
.codes-secours code { background: #fff; padding: 4px 6px; border-radius: 4px; text-align: center; }
.etapes-2fa { padding-left: 1.2rem; } .etapes-2fa li { margin-bottom: 6px; }
/* v1.6 · Sécurité et accès */
.bandeau-reseau { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: #fff; border: 1px solid var(--gris-3); border-left: 5px solid var(--gris-5); font-size: .9rem; }
.bandeau-reseau.actif { border-left-color: var(--vert); } .bandeau-reseau.observation { border-left-color: var(--orange); }
.bandeau-reseau small { flex-basis: 100%; color: var(--gris-5); }
.ligne-appareil { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; padding: 4px 0; border-bottom: 1px dashed var(--gris-2, #eee); }
.ligne-appareil:last-child { border-bottom: 0; }
.decision-acces { display: flex; flex-wrap: wrap; gap: 4px; } .decision-acces select, .decision-acces input { max-width: 170px; font-size: .82rem; padding: 4px 6px; }
.lien-btn { background: none; border: 0; color: var(--bleu); text-decoration: underline; cursor: pointer; font: inherit; font-size: .82rem; padding: 0; }
.cases-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 10px; max-height: 260px; overflow: auto; margin-bottom: 8px; font-size: .85rem; }
/* v1.6 · Installation et serveur */
.btn.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.manuel h2 { color: var(--bleu); border-bottom: 2px solid var(--gris-3); padding-bottom: 4px; margin-top: 22px; font-size: 1.1rem; }
.manuel .cmd { background: #0f1720; border-radius: 8px; padding: 8px 10px; margin: 8px 0; position: relative; }
.manuel .cmd code { color: #9fe870; font-family: Consolas, Menlo, monospace; font-size: .88rem; white-space: pre-wrap; word-break: break-all; display: block; padding-right: 64px; background: none; }
.manuel .cmd .com { color: #a8b3bd; margin: 4px 0 0; font-size: .82rem; }
.manuel .copier { position: absolute; top: 6px; right: 6px; background: #2b3a47; color: #fff; border: 0; border-radius: 5px; font-size: .72rem; padding: 3px 8px; cursor: pointer; }
.manuel .erreur { border-left: 4px solid var(--rouge); background: #fff7f7; padding: 6px 12px; margin: 12px 0; border-radius: 6px; }
.manuel .sympt { margin: 4px 0; } .manuel .cause { margin: 2px 0 6px; color: var(--gris-5); }
.reinit h3 { margin-top: 16px; color: var(--bleu); }

/* v1.6 · barres horizontales : jamais plus larges que le bloc (téléphone) */
.barre-h { grid-template-columns: minmax(0, 40%) minmax(0, 1fr) 2.5rem; }
.barre-h > span { overflow-wrap: anywhere; min-width: 0; }
.barre-h .progress-lbl { min-width: 0; }
/* v1.6 · formulaires « Modifier » ouverts dans une ligne de tableau : fenêtre centrée sur téléphone */
@media (max-width: 700px) {
  td details > form.card[style*="absolute"] { position: fixed !important; left: 16px; right: 16px; top: 10vh; min-width: 0 !important; max-height: 80vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
}
@media (max-width: 520px) {
  .barre-h { grid-template-columns: minmax(0, 1fr) 2.5rem; row-gap: .15rem; }
  .barre-h > span { grid-column: 1 / -1; }
}

/* v1.7 · Paramètres RH : circuit de validation et règles par thème */
.etapes-frise.n4 { grid-template-columns: repeat(4, 1fr); }
.validation-paie { border-left: 4px solid var(--orange); }
.validation-paie.statut-valide { border-left-color: var(--vert); }
.validation-paie.statut-renvoye { border-left-color: var(--rouge); }
.validation-paie .vp-etat { margin: .2rem 0 .6rem; }
.validation-paie .vp-form { border-top: 1px solid var(--gris-3); padding-top: .6rem; }
.validation-paie .actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.liste-simple { list-style: none; padding: 0; margin: .4rem 0 0; }
.liste-simple li { padding: .3rem 0; border-bottom: 1px solid var(--gris-2, #eee); font-size: .88rem; }
details.theme-regles > summary, details.repli > summary { cursor: pointer; list-style: none; }
details.theme-regles > summary h2, details.repli > summary h2 { display: inline; margin: 0; }
details.theme-regles > summary::after, details.repli > summary::after { content: '▾'; float: right; color: var(--gris-5, #888); }
details.theme-regles[open] > summary, details.repli[open] > summary { margin-bottom: .6rem; }
.barre-enregistrer { position: sticky; bottom: 0; z-index: 3; background: var(--gris-1); padding: .6rem 0; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
@media (max-width: 700px) { .etapes-frise.n4 { grid-template-columns: repeat(2, 1fr); } }

/* v1.7 · Pages protégées : filigrane, copie bloquée, écran flouté, impression blanche */
.filigrane-jokko { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background-repeat: repeat; }
body.conf-copie { -webkit-user-select: none; user-select: none; }
body.conf-copie input, body.conf-copie textarea, body.conf-copie select, body.conf-copie [contenteditable] { -webkit-user-select: text; user-select: text; }
body.conf-floute > *:not(.filigrane-jokko) { filter: blur(14px); transition: filter .1s; }
body.conf-floute::after { content: '🔒 Contenu masqué : revenez sur la fenêtre JOKKO'; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2147483001; font: 600 1.1rem system-ui, sans-serif; color: var(--bleu, #02516C); background: rgba(255,255,255,.35); }
@media print {
  body.conf-impr > * { display: none !important; }
  body.conf-impr::before { content: 'Impression désactivée : page confidentielle JOKKO.'; display: block; padding: 3cm 1cm; font: 16pt Arial, sans-serif; text-align: center; }
}
/* v1.7 · paiement en ligne */
.actions-paiement { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.btn.wave { background: #1dc8f2; border-color: #1dc8f2; color: #0b2a4a; }
.btn.orange_money { background: #ff7900; border-color: #ff7900; color: #fff; }
/* v1.7 · signature électronique (fiche contrat) */
.ligne-signature { padding: .5rem 0; border-bottom: 1px solid var(--gris-2); }
.ligne-signature:last-of-type { border-bottom: 0; }
code.selectionnable { user-select: all; word-break: break-all; }

/* v1.7 · Bloc « Actions » des fiches */
.actions-fiche .case { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; font-size: .9rem; }
.actions-fiche .danger-txt { color: #b42318; }
.actions-fiche .liste-actions-fiche td { vertical-align: top; }
.actions-fiche .field[hidden] { display: none; }
@media (max-width: 640px) { .actions-fiche .liste-actions-fiche thead { display: none; } .actions-fiche .liste-actions-fiche tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; padding: .5rem 0; border-bottom: 1px solid var(--gris-2, #e5e7eb); } .actions-fiche .liste-actions-fiche td { border: 0; padding: 0; } .actions-fiche .liste-actions-fiche td:first-child { grid-column: 1 / -1; } }

/* Version de démonstration */
.demo-limites { background: var(--gris-1, #f3f5f7); border-radius: 8px; padding: .6rem .8rem; font-size: .88rem; text-align: center; }
.demo-profils { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; margin: 1rem 0; }
.demo-profil { display: flex; flex-direction: column; gap: .2rem; text-align: left; padding: .75rem .9rem; border: 1px solid #d6dde3; border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.demo-profil:hover, .demo-profil:focus { border-color: var(--primaire, #02516C); box-shadow: 0 0 0 3px rgba(2, 81, 108, .12); }
.demo-profil small { color: #5b6670; font-size: .8rem; }
.demo-mention { text-align: center; font-size: .8rem; }
/* Bandeau de la démo (modèle : VERSION DE DÉMONSTRATION … Voir l'espace : [direction]) */
.bandeau-demo { background: #fdf8e6; color: #7a4a0c; border-bottom: 1px solid #f1d58a; padding: .55rem 1.2rem; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; justify-content: space-between; }
.bandeau-demo .bd-texte strong { font-weight: 700; }
.bandeau-demo a { color: #7a4a0c; font-weight: 600; }
.bandeau-demo .bd-texte { flex: 0 1 auto; }
.bandeau-demo .bd-quitter { display: inline; }
.bandeau-demo .bd-espaces { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3rem; margin-left: auto; flex: 1 1 32rem; }
.bandeau-demo .bd-espaces span { margin-right: .2rem; }
.bandeau-demo .bd-espaces button { font: inherit; font-size: .8rem; font-weight: 500; color: #4a3a1a; background: #fff; border: 1.5px solid #f1cf6b; border-radius: 999px; padding: .16rem .7rem; cursor: pointer; line-height: 1.3; }
.bandeau-demo .bd-espaces button:hover, .bandeau-demo .bd-espaces button:focus-visible { border-color: #d97a06; outline: none; }
.bandeau-demo .bd-espaces button.actif { background: #d97a06; border-color: #d97a06; color: #fff; font-weight: 600; }
.bandeau-demo .bd-quitter button { font: inherit; font-size: .82rem; background: none; border: 0; color: #7a4a0c; text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 760px) { .bandeau-demo { padding: .5rem .8rem; } .bandeau-demo .bd-espaces { margin-left: 0; flex: 1 1 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: .15rem; } .bandeau-demo .bd-espaces button { flex: none; } }
/* Page Accès démo */
.demo-acces { grid-template-columns: minmax(270px, 1fr) minmax(0, 2.3fr); align-items: start; }
@media (max-width: 980px) { .demo-acces { grid-template-columns: 1fr; } }
.demo-nouveau .btn.bloc { width: 100%; justify-content: center; }
.demo-remise { font-size: .84rem; border-top: 1px solid var(--gris-2, #e6e9ec); padding-top: .8rem; margin-top: 1rem; }
.lien-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--bleu, #02516C); cursor: pointer; font-weight: 500; text-decoration: none; }
.lien-btn:hover { text-decoration: underline; }
.lien-btn.rouge { color: var(--orange, #c56a00); }
.lien-btn.copie, .demo-actions .copie { color: var(--vert, #1f8a4c); }
.demo-liste td { vertical-align: middle; }
.demo-testeur .muted { font-size: .85rem; margin: .1rem 0 .3rem; }
.demo-erreur { color: var(--rouge, #E0262F); font-size: .82rem; margin-top: .3rem; max-width: 34rem; }
.demo-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.demo-actions form { display: inline; margin: 0; }
.demo-actions a { color: var(--vert, #1f8a4c); font-weight: 500; text-decoration: none; }
.demo-actions a:hover { text-decoration: underline; }
.demo-actions-bas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem .8rem; }
.demo-lien-ligne { display: flex; gap: .5rem; flex-wrap: wrap; }
.demo-lien-ligne input { flex: 1 1 18rem; min-width: 0; }
.demo-espaces-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .1rem .8rem; }