:root{
--bg:#f4f6f7; --surface:#ffffff; --surface-2:#f0f2f4; --border:#e0e4e6;
--text:#141b1e; --text-dim:#5b686d; --primary:#0f766e; --primary-dim:#0b544e;
--primary-contrast:#ffffff; --danger:#b3261e; --danger-bg:#fbeae9;
--success:#166534; --success-bg:#eafaf0; --warn-bg:#fff7e6; --warn:#946200;
--radius:10px; --shadow:0 1px 2px rgba(20,27,30,.06), 0 1px 8px rgba(20,27,30,.04);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#12181a; --surface:#1b2326; --surface-2:#222b2e; --border:#2c363a;
--text:#e9eef0; --text-dim:#9aabb1; --primary:#2dd4bf; --primary-dim:#14b8a6;
--primary-contrast:#062622; --danger:#f2887f; --danger-bg:#3a201d;
--success:#7fe0a6; --success-bg:#132a1e; --warn-bg:#332a12; --warn:#f2c46d;
--shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 10px rgba(0,0,0,.25);
}
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
background:var(--bg); color:var(--text); font-family:var(--font);
font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
/* Un numéro de série ou un nom sans espace ne doit jamais élargir la page. */
overflow-wrap:break-word;
}
#app{min-height:100vh; display:flex; flex-direction:column;}
a{color:var(--primary); text-decoration:none;}
a:hover{text-decoration:underline;}
button, input, select, textarea{font-family:inherit; font-size:inherit; color:inherit;}
h1,h2,h3{margin:0 0 4px 0; font-weight:650;}
.muted{color:var(--text-dim);}
.small{font-size:13px;}

/* ---- topbar ---- */
.topbar{
display:flex; align-items:center; gap:14px; padding:10px 18px;
background:var(--surface); border-bottom:1px solid var(--border);
position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:-.01em;}
.brand .logo{
width:32px; height:32px; object-fit:contain; flex-shrink:0;
}
.brand .by{font-size:10.5px; color:var(--text-dim); font-weight:500; margin-top:1px;}
.topbar-spacer{flex:1;}
.org-pill{
font-size:12.5px; color:var(--text-dim); background:var(--surface-2);
border:1px solid var(--border); padding:4px 10px; border-radius:999px;
}
.badge-attente{
font-size:12.5px; font-weight:700; color:#fff; background:#b45309;
padding:4px 10px; border-radius:999px; margin-right:8px; white-space:nowrap;
}
.user-menu{position:relative;}
.user-btn{
display:flex; align-items:center; gap:8px; background:none; border:1px solid var(--border);
padding:6px 10px; border-radius:999px; cursor:pointer; color:var(--text);
}
.avatar{
width:24px; height:24px; border-radius:50%; background:var(--surface-2);
display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
border:1px solid var(--border); overflow:hidden;
}
.avatar img, .member .thumb img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block;}
.dropdown-fichier{
display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none;
padding:8px 10px; border-radius:6px; cursor:pointer; color:var(--text);
margin:0; font-size:inherit; font-weight:inherit; text-transform:none; letter-spacing:normal; line-height:inherit;
-webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.dropdown-fichier:hover{background:var(--surface-2);}
.dropdown-fichier.disabled{opacity:.6; cursor:default; pointer-events:none;}
.dropdown{
position:absolute; right:0; top:calc(100% + 6px); background:var(--surface);
border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
min-width:180px; padding:6px; display:none; z-index:30;
}
.dropdown.open{display:block;}
.dropdown button{
display:block; width:100%; text-align:left; background:none; border:none;
padding:8px 10px; border-radius:6px; cursor:pointer; color:var(--text);
}
.dropdown button:hover{background:var(--surface-2);}

/* ---- nav tabs ---- */
.tabs{
display:flex; gap:4px; padding:0 18px; background:var(--surface);
border-bottom:1px solid var(--border); overflow-x:auto;
}
.tab{
padding:11px 14px; font-size:13.5px; font-weight:600; color:var(--text-dim);
border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap;
}
.tab.active{color:var(--primary); border-bottom-color:var(--primary);}

main{flex:1; width:100%; max-width:920px; margin:0 auto; padding:20px 18px 60px; width:100%;}
.container-wide{max-width:1080px;}

/* ---- cards / surfaces ---- */
.card{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
padding:18px; box-shadow:var(--shadow);
}
.card + .card{margin-top:14px;}
.row{display:flex; align-items:center; gap:10px;}
.row.between{justify-content:space-between;}
.row.wrap{flex-wrap:wrap;}
.stack{display:flex; flex-direction:column; gap:10px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
/* Sans ceci, une cellule de grille refuse de se réduire sous la taille de son
contenu (QR code, nom à rallonge) et fait déborder toute la page. */
.grid-2 > *{min-width:0;}
@media(max-width:520px){.grid-2{grid-template-columns:1fr;}}

/* ---- forms ---- */
label{display:block; font-size:12.5px; font-weight:650; color:var(--text-dim); margin-bottom:4px; text-transform:uppercase; letter-spacing:.02em;}
.field{margin-bottom:12px;}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea{
width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:8px;
background:var(--surface); color:var(--text); outline:none;
}
input:focus, select:focus, textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);}
textarea{min-height:70px; resize:vertical;}
.hint{font-size:12px; color:var(--text-dim); margin-top:4px;}
.oblig{
font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
color:var(--danger); background:var(--danger-bg);
border-radius:99px; padding:1px 6px; margin-left:4px;
}

.btn{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
padding:9px 15px; border-radius:8px; border:1px solid var(--border);
background:var(--surface); color:var(--text); font-weight:600; font-size:13.5px;
cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--surface-2);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-primary{background:var(--primary); border-color:var(--primary); color:var(--primary-contrast);}
.btn-primary:hover{background:var(--primary-dim); border-color:var(--primary-dim);}
.btn-danger{color:var(--danger); border-color:var(--danger-bg);}
.btn-danger:hover{background:var(--danger-bg);}
.btn-sm{padding:6px 10px; font-size:12.5px;}
.btn-block{width:100%;}
.icon-btn{background:none; border:none; cursor:pointer; color:var(--text-dim); padding:4px;}
.icon-btn:hover{color:var(--text);}

/* ---- badges / alerts ---- */
.badge{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px;}
.badge-neutral{background:var(--surface-2); color:var(--text-dim);}
.badge-warn{background:var(--warn-bg); color:var(--warn);}
.badge-role{background:var(--surface-2); color:var(--primary); border:1px solid var(--border);}
.badge-off{background:var(--danger-bg); color:var(--danger);}
.alert{padding:11px 13px; border-radius:8px; font-size:13.5px; margin-bottom:14px;}
.alert-error{background:var(--danger-bg); color:var(--danger);}
.alert-success{background:var(--success-bg); color:var(--success);}
.alert-info{background:var(--surface-2); color:var(--text-dim);}
.alert-warn-admin{background:var(--warn-bg); color:var(--warn); margin-bottom:12px;}

/* ---- lists / tables ---- */
.list-item{
display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--border);
}
.list-item:last-child{border-bottom:none;}
.list-item .thumb{
width:38px; height:38px; border-radius:8px; background:var(--surface-2); flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--primary);
border:1px solid var(--border);
}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.02em; color:var(--text-dim); padding:8px 8px; border-bottom:1px solid var(--border);}
td{padding:10px 8px; border-bottom:1px solid var(--border); vertical-align:top;}
tr:last-child td{border-bottom:none;}

.empty{text-align:center; padding:40px 20px; color:var(--text-dim);}
.empty .big{font-size:34px; margin-bottom:8px;}

.spinner{
width:20px; height:20px; border:2.5px solid var(--border); border-top-color:var(--primary);
border-radius:50%; animation:spin .7s linear infinite; margin:30px auto;
}
@keyframes spin{to{transform:rotate(360deg);}}
.center-screen{min-height:100vh; display:flex; align-items:center; justify-content:center;}

/* ---- auth screen ---- */
.auth-wrap{max-width:380px; margin:8vh auto; padding:0 18px;}
.auth-logo{display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:26px; text-align:center;}
.auth-logo .logo{width:52px; height:52px; object-fit:contain;}
.auth-toggle{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:10px; margin-bottom:18px;}
.auth-toggle button{flex:1; padding:8px; border:none; background:none; border-radius:7px; cursor:pointer; font-weight:650; color:var(--text-dim);}
.auth-toggle button.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow);}

/* ---- champ mot de passe avec aperçu ---- */
.pw-wrap{position:relative; display:block;}
.pw-wrap input{padding-right:44px;}
.pw-toggle{
position:absolute; right:5px; top:50%; transform:translateY(-50%);
display:flex; align-items:center; justify-content:center;
width:32px; height:32px; padding:0; border:none; border-radius:7px;
background:none; color:var(--text-dim); cursor:pointer;
}
.pw-toggle:hover{color:var(--text); background:var(--surface-2);}
.pw-toggle:focus-visible{outline:2px solid var(--primary); outline-offset:1px;}

/* ---- equipe : une carte par personne, avec des sections nettes (identité /
   rôle & accès / actions) au lieu d'une seule ligne qui s'empile en vrac. ---- */
.member{
display:flex; flex-direction:column;
margin:0 0 10px; border:1px solid var(--border); border-radius:12px;
background:var(--surface); overflow:hidden;
}
.member:last-child{margin-bottom:0;}
.member.cochee{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary);}
.member-invite{border-style:dashed;}
.membre-head{display:flex; align-items:flex-start; gap:11px; padding:13px 14px;}
.membre-head .who{flex:1; min-width:0;}
.membre-role-acces{display:flex; flex-direction:column; gap:10px; padding:11px 14px; border-top:1px solid var(--border);}
.membre-role-ligne{display:flex; align-items:center; flex-wrap:wrap; gap:10px;}
.membre-role-ligne select{width:auto; min-width:130px; padding:6px 8px;}
.membre-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:11px 14px; border-top:1px solid var(--border);}
/* Cloisonnement par métier : quels types un profil a le droit de voir */
.acces{
width:100%; margin-top:0; padding:10px 12px;
background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
}
.acces .case{
display:flex; align-items:center; gap:8px; margin:0 0 4px 0;
text-transform:none; font-weight:500; font-size:13.5px; color:var(--text);
letter-spacing:normal; cursor:pointer;
}
.acces .case input{width:auto; margin:0; flex-shrink:0;}
.acces-liste{
display:flex; flex-wrap:wrap; gap:4px 18px; margin:6px 0 0 24px;
}
.acces-liste .case{margin:0;}
.invite-link{
display:flex; gap:8px; align-items:center; background:var(--surface-2);
border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-top:8px; flex-wrap:wrap;
}
.invite-link code{
flex:1; min-width:140px; font-size:12px; word-break:break-all;
font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--text-dim);
}

/* ---- accueil ---- */
/* Pas d'animation sur cet écran : ça a été tenté (fondu + léger mouvement à
l'arrivée) mais le double rendu de l'accueil (un premier passage, puis un
second quelques centaines de ms après quand les chiffres arrivent du
serveur) provoquait des effets de bug visuellement gênants difficiles à
fiabiliser. Tout est donc statique, volontairement. */
.accueil-hero{
background:linear-gradient(120deg, var(--primary) 0%, var(--primary-dim) 45%, var(--primary) 100%);
color:var(--primary-contrast); border-radius:var(--radius);
padding:22px 22px 20px; margin-bottom:20px; box-shadow:var(--shadow);
}
.accueil-marque{display:flex; align-items:center; gap:14px; margin-bottom:12px;}
.accueil-marque img{width:44px; height:44px; object-fit:contain; flex-shrink:0;}
.accueil-titre{font-size:22px; font-weight:750; letter-spacing:-.02em; line-height:1.2;}
.accueil-org{font-size:13.5px; opacity:.85; margin-top:2px;}
.accueil-phrase{font-size:14px; line-height:1.55; opacity:.92; max-width:60ch; margin:0;}

.accueil-section-titre{
font-size:12px; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
color:var(--text-dim); margin-bottom:10px;
}
.etapes-accueil{
display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px;
}
.etape-accueil{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
padding:16px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow);
}
.etape-accueil.mise-en-avant{border-color:var(--primary);}
.etape-num{
width:28px; height:28px; border-radius:50%; background:var(--surface-2);
color:var(--primary); font-weight:800; font-size:14px;
display:flex; align-items:center; justify-content:center; margin-bottom:2px;
}
.etape-accueil.mise-en-avant .etape-num{background:var(--primary); color:var(--primary-contrast);}
.etape-titre{font-size:16px; font-weight:700; letter-spacing:-.01em;}
.etape-accueil p{font-size:13px; color:var(--text-dim); line-height:1.5; flex:1; margin:0;}
.etape-accueil .btn{align-self:flex-start; margin-top:4px;}

.accueil-chiffres{
display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:12px; margin-top:20px;
}
.chiffre{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
padding:16px; text-align:center;
}
.chiffre-val{font-size:30px; font-weight:750; color:var(--primary); line-height:1.1;}
.chiffre-lib{font-size:12.5px; color:var(--text-dim); margin-top:4px;}

/* ---- scanner QR (accueil) ---- */
.scanner-carte{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
padding:18px; margin-top:20px; display:flex; align-items:center; gap:16px; box-shadow:var(--shadow);
}
.scanner-carte-icone{
width:50px; height:50px; border-radius:13px; background:var(--accent-dim); color:var(--accent);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.scanner-carte-texte{flex:1; min-width:0;}
.scanner-carte-titre{font-weight:700; font-size:15.5px; margin-bottom:2px;}
.scanner-carte-texte p{font-size:13px; color:var(--text-dim); line-height:1.45; margin:0;}
.scanner-carte .btn{flex-shrink:0;}
@media(max-width:560px){
.scanner-carte{flex-direction:column; align-items:stretch; text-align:center;}
.scanner-carte-icone{align-self:center;}
.scanner-carte .btn{width:100%;}
}

.scanner-overlay{
position:fixed; inset:0; z-index:200; background:#000;
display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.scanner-overlay video{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
background:#000;
}
.scanner-overlay canvas{ display:none; }
.scanner-cadre{
position:relative; width:min(72vw, 280px); height:min(72vw, 280px);
border:3px solid rgba(255,255,255,.85); border-radius:20px;
box-shadow:0 0 0 2000px rgba(0,0,0,.45);
}
.scanner-fermer{
position:absolute; top:max(16px, env(safe-area-inset-top)); right:16px; z-index:1;
width:42px; height:42px; border-radius:50%; background:rgba(20,27,30,.6); color:#fff;
border:none; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
cursor:pointer;
}
.scanner-consigne{
position:absolute; bottom:max(30px, env(safe-area-inset-bottom)); left:16px; right:16px;
text-align:center; color:#fff; font-size:13.5px; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.scanner-erreur{
position:absolute; bottom:96px; left:16px; right:16px; text-align:center;
background:rgba(190,45,38,.94); color:#fff; padding:11px 14px; border-radius:11px;
font-size:13px; font-weight:600; line-height:1.4;
}

/* ---- modèles métiers ---- */
.modeles{
display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
gap:10px; margin-top:14px;
}
.modele{
background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
padding:14px; display:flex; flex-direction:column; gap:4px;
}
.modele-nom{font-weight:650; font-size:14.5px;}
.modele-types{
font-size:12px; color:var(--text-dim); line-height:1.45;
margin:6px 0 10px; flex:1;
}
.modele .btn{align-self:flex-start;}

/* ---- field builder (types) ---- */
.champ-row{display:grid; grid-template-columns:1fr 110px 32px; gap:8px; margin-bottom:8px; align-items:center;}

/* ---- en-tête d'une fiche équipement ---- */
.fiche-entete{display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.fiche-entete .titre{flex:1 1 160px; min-width:0;}
.fiche-entete .actions{display:flex; gap:6px; flex-wrap:wrap;}
/* Sur téléphone, les boutons passent sous le titre plutôt que de l'écraser. */
@media(max-width:520px){
.fiche-entete .titre{flex:1 1 100%;}
.fiche-entete .actions{width:100%;}
.fiche-entete .actions .btn{flex:1;}
}

/* ---- QR / impression d'étiquette ---- */
.qr-box{display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 0;}
/* Le QR est généré à taille fixe : on l'oblige à se réduire sur les petits écrans. */
.qr-box canvas{max-width:100%; height:auto;}
#print-area{display:none;}

/* Étiquette : uniquement le QR code et l'identifiant (immatriculation ou n° de
série). Tout le reste de l'application est retiré du flux d'impression —
pas masqué mais retiré, sinon certaines imprimantes sortent des pages vides.
Pensé pour une imprimante thermique d'étiquettes. */
@media print{
@page{ size:20mm 20mm; margin:1mm; }
html, body{ background:#fff !important; margin:0; padding:0; }
#app{ display:none !important; }
#print-area{
display:block !important;
width:18mm;
text-align:center;
color:#000;
overflow:hidden;
}
#print-area img{ display:block; margin:0 auto; }
#print-area .etiquette-id{
font-family:Arial, Helvetica, sans-serif;
font-weight:700; font-size:6pt; line-height:1.1; color:#000;
margin-top:0.6mm; letter-spacing:.01em;
word-break:break-all;
}
#print-area .etiquette-site{
font-family:Arial, Helvetica, sans-serif;
font-weight:700; font-size:6pt; line-height:1; color:#000;
margin-top:0.5mm; letter-spacing:.01em; white-space:nowrap;
}
}

/* ---- Consultation publique (scan du QR code, sans compte) ---- */
.pub-page{width:100%; max-width:820px; margin:0 auto; padding:18px 16px 48px;
box-sizing:border-box; min-width:0;}
.pub-page *{min-width:0;}
.pub-page table{width:100%; table-layout:fixed; overflow-wrap:break-word;}
/* Sur un telephone, un tableau a quatre colonnes devient illisible : chaque
intervention se replie alors en bloc, une ligne par information. */
@media(max-width:560px){
.pub-ivs{table-layout:auto;}
.pub-ivs thead{display:none;}
.pub-ivs, .pub-ivs tbody, .pub-ivs tr, .pub-ivs td{display:block; width:100%;}
.pub-ivs tr{padding:10px 0; border-bottom:1px solid var(--border);}
.pub-ivs tr:last-child{border-bottom:none;}
.pub-ivs td{border:none; padding:2px 0;}
.pub-ivs td[data-l]::before{
content:attr(data-l) " : "; color:var(--text-dim); font-weight:600;
}
.pub-ivs td.iv-date{font-weight:700; font-size:15px; padding-bottom:4px;}
}
.pub-entete{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
padding:14px 16px; border-radius:14px; margin-bottom:16px;
background:linear-gradient(135deg,#0d5a51,#0a3f3a); color:#fff;
}
.pub-entete img{width:38px; height:38px; border-radius:9px; flex:0 0 auto;}
.pub-entete .nom{font-weight:700; letter-spacing:.01em;}
.pub-entete .by{font-size:11px; opacity:.75;}
.pub-entete .org{margin-left:auto; font-size:12px; opacity:.9; min-width:0;}
.pub-connexion{
flex:0 0 auto; margin-left:10px;
font:inherit; font-size:13px; font-weight:600; line-height:1;
color:#fff; background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.35); border-radius:9px;
padding:9px 14px; cursor:pointer; white-space:nowrap;
}
.pub-connexion:hover{background:rgba(255,255,255,.24);}
.pub-titre{margin:0 0 2px; font-size:20px; line-height:1.25; word-break:break-word;}
.pub-lecture{
display:inline-flex; align-items:center; gap:6px;
font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px;
background:rgba(15,122,110,.12); color:var(--accent, #0f7a6e);
border:1px solid rgba(15,122,110,.25);
}
.alerte-serie{
margin-top:6px; font-size:13px; line-height:1.5;
padding:9px 11px; border-radius:9px;
background:rgba(200,120,20,.10); color:#8a5209;
border:1px solid rgba(200,120,20,.28);
}
.alerte-serie a{color:#8a5209; font-weight:600;}
.alerte-serie.vide{display:none;}
.pub-retire{
margin-left:8px;
background:rgba(200,120,20,.12); color:#a8630f;
border-color:rgba(200,120,20,.3);
}
.pub-pied{
margin-top:22px; text-align:center; font-size:12px; line-height:1.6;
color:var(--text-dim);
}
.pub-pied a{color:var(--text-dim);}
@media(max-width:480px){
.pub-entete .org{margin-left:auto; width:auto; text-align:right;}
.pub-connexion{margin-left:0; width:100%; padding:11px 14px;}
}

::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px;}

/* =========================================================================
Refonte visuelle : navigation par sidebar (bureau) / barre du bas (mobile),
à la place de l'ancienne rangée d'onglets horizontale.
========================================================================= */
:root{
--accent:#d97757; --accent-dim:#f5e1d8; --accent-contrast:#ffffff;
--sidebar-bg:#0a4f44; --sidebar-active:rgba(255,255,255,.14);
--bg-glow:
radial-gradient(1400px 900px at 92% -12%, rgba(14,118,106,.07), transparent 60%),
radial-gradient(1100px 850px at -12% 108%, rgba(217,119,87,.05), transparent 55%);
}
@media (prefers-color-scheme: dark){
:root{
--accent:#e2916b; --accent-dim:#3a2a20; --accent-contrast:#241209;
--sidebar-bg:#08211c;
--bg-glow:
radial-gradient(1400px 900px at 92% -12%, rgba(45,212,191,.05), transparent 60%),
radial-gradient(1100px 850px at -12% 108%, rgba(226,145,107,.04), transparent 55%);
}
}
body{background-image:var(--bg-glow); background-color:var(--bg); background-attachment:fixed;}
.badge-attente{background:var(--accent);}

.shell{display:flex; align-items:stretch; min-height:100vh;}
.sidebar{
width:232px; flex-shrink:0; background:var(--sidebar-bg); color:#fff;
display:flex; flex-direction:column; gap:22px; padding:22px 14px;
box-sizing:border-box; position:sticky; top:0; align-self:flex-start;
height:100vh; overflow-y:auto;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:0 8px;}
.sidebar-brand .logo{width:28px; height:28px; object-fit:contain; flex-shrink:0;}
.sidebar-brand .name{font-weight:800; font-size:15px; letter-spacing:-.01em;}
.sidebar-brand .by{font-size:10px; color:rgba(255,255,255,.6); margin-top:1px;}
.sidebar-nav{display:flex; flex-direction:column; gap:2px;}
.sidebar-link{
display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px;
color:rgba(255,255,255,.82); font-weight:600; font-size:13.5px; cursor:pointer;
}
.sidebar-link:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidebar-link.active{background:var(--sidebar-active); color:#fff;}
.sidebar-link svg{flex-shrink:0;}
.sidebar-spacer{flex:1;}
.sidebar-sync{
display:flex; align-items:center; gap:8px; background:rgba(217,119,87,.22);
border:1px solid rgba(217,119,87,.4); border-radius:11px; padding:9px 11px;
font-size:12px; font-weight:600; color:#fcd9c8;
}

.shell-main{flex:1; min-width:0; display:flex; flex-direction:column;}

.bottom-nav{display:none;}

@media(max-width:880px){
.sidebar{display:none;}
.bottom-nav{
display:flex; position:fixed; left:0; right:0; bottom:0; z-index:25;
background:var(--surface); border-top:1px solid var(--border);
align-items:center; justify-content:space-around;
padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav-item{
display:flex; flex-direction:column; align-items:center; gap:3px;
color:var(--text-dim); font-size:10px; font-weight:700; cursor:pointer;
flex:1; padding:5px 2px; min-width:0;
}
.bottom-nav-item span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.bottom-nav-item.active{color:var(--primary);}
main{padding-bottom:78px;}
}

/* =========================================================================
   v2.13 — Réglages, sélection multiple, modale, journal, support
   ========================================================================= */

/* ---- Onglets des réglages ---- */
.reglages-onglets{
display:flex; gap:4px; margin:0 0 16px; padding:4px; overflow-x:auto;
background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
scrollbar-width:none;
}
.reglages-onglets::-webkit-scrollbar{display:none;}
.reglages-onglet{
flex:1 0 auto; padding:8px 14px; border:none; border-radius:7px; background:none;
font-weight:650; font-size:13.5px; color:var(--text-dim); cursor:pointer; white-space:nowrap;
}
.reglages-onglet:hover{color:var(--text);}
.reglages-onglet.active{background:var(--surface); color:var(--primary); box-shadow:var(--shadow);}
.titre-carte{font-size:12.5px; text-transform:uppercase; letter-spacing:.02em; color:var(--text-dim);}

/* ---- Listes avec cases à cocher ---- */
.liste-select{padding:4px 18px;}
.tout-selectionner{
display:flex; align-items:center; gap:10px; margin:0; padding:12px 0 10px;
border-bottom:1px solid var(--border); cursor:pointer;
text-transform:none; letter-spacing:normal; font-size:13px; font-weight:600; color:var(--text-dim);
}
.tout-selectionner input, .case-sel{width:18px; height:18px; margin:0; flex-shrink:0; accent-color:var(--primary); cursor:pointer;}
.case-vide{width:18px; flex-shrink:0;}
.ligne-select{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border);}
.ligne-select:last-child{border-bottom:none;}
.ligne-select .thumb{
width:38px; height:38px; border-radius:8px; background:var(--surface-2); flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--primary);
border:1px solid var(--border);
}
.ligne-corps{flex:1; min-width:0; cursor:pointer;}
.ligne-titre{font-weight:650; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.ligne-chiffres{display:flex; gap:10px; flex-shrink:0;}
.ligne-date{flex-shrink:0;}
.cochee{background:color-mix(in srgb, var(--primary) 6%, transparent);
margin:0 -18px; padding-left:18px; padding-right:18px;}
.member.cochee{margin:0 0 10px;}
.btn-poubelle{color:var(--text-dim); border-radius:7px; padding:6px; display:flex;}
.btn-poubelle:hover{color:var(--danger); background:var(--danger-bg);}
@media(max-width:520px){
.ligne-date, .ligne-chiffres{display:none;}
}

.code-client{
font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; font-weight:700;
color:var(--primary); background:var(--surface-2); border:1px solid var(--border);
padding:1px 7px; border-radius:6px; letter-spacing:.03em;
}

/* ---- Barre d'actions groupées ---- */
.barre-selection{
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
position:sticky; top:62px; z-index:15;
background:var(--surface); border:1px solid var(--primary); border-radius:var(--radius);
padding:10px 14px; margin-bottom:12px; box-shadow:var(--shadow);
}
.barre-selection strong{margin-right:auto; font-size:13.5px;}
.btn-lien{border-color:transparent; background:none; color:var(--text-dim);}
.btn-danger-plein{background:var(--danger); border-color:var(--danger); color:#fff;}
.btn-danger-plein:hover{background:var(--danger); filter:brightness(.92);}
.badge-ok{background:var(--success-bg); color:var(--success);}

/* ---- Fenêtre modale ---- */
.modal-fond{
position:fixed; inset:0; z-index:100; background:rgba(10,15,17,.5);
display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal{
background:var(--surface); border:1px solid var(--border); border-radius:14px;
width:100%; max-width:480px; max-height:calc(100vh - 32px); overflow-y:auto;
padding:20px; box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.modal h3{font-size:17px; margin-bottom:6px;}
.motifs{display:flex; flex-wrap:wrap; gap:6px;}
.motif{
display:flex; align-items:center; gap:6px; margin:0; cursor:pointer;
padding:7px 12px; border:1px solid var(--border); border-radius:999px;
text-transform:none; letter-spacing:normal; font-size:13.5px; font-weight:600; color:var(--text);
}
.motif input{position:absolute; opacity:0; pointer-events:none;}
.motif.actif{border-color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary);}

/* ---- Interventions : actions et trace de modification ---- */
.table-iv td.iv-actions{white-space:nowrap; text-align:right;}
.table-iv td.iv-actions .btn{margin-left:4px;}
.iv-modif{font-size:11.5px; color:var(--text-dim); font-style:italic; margin-top:3px;}
.iv-edition td{padding:0;}
@media(max-width:620px){
.table-iv thead{display:none;}
.table-iv, .table-iv tbody, .table-iv tr, .table-iv td{display:block; width:100%;}
.table-iv tr{padding:10px 0; border-bottom:1px solid var(--border);}
.table-iv tr:last-child{border-bottom:none;}
.table-iv td{border:none; padding:2px 0;}
.table-iv td[data-l]::before{content:attr(data-l) " : "; color:var(--text-dim); font-weight:600;}
.table-iv td.iv-date{font-weight:700; font-size:15px; padding-bottom:4px;}
.table-iv td.iv-actions{text-align:left; padding-top:8px;}
.table-iv td.iv-actions .btn{margin:0 6px 0 0;}
}

/* ---- Journal / demandes de support ---- */
.journal-ligne{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--border);}
.journal-ligne:last-child{border-bottom:none;}
.journal-date{font-size:12px; color:var(--text-dim); width:118px; flex-shrink:0;}
.journal-corps{flex:1; min-width:0; font-size:13.5px;}
.journal-corps details{margin-top:4px;}
.journal-corps summary{cursor:pointer; color:var(--primary);}
.support-message{white-space:pre-wrap; background:var(--surface-2); border-radius:8px; padding:8px 10px; margin-top:6px; font-size:13.5px;}
@media(max-width:520px){
.journal-ligne{flex-direction:column; gap:2px;}
.journal-date{width:auto;}
}

/* ---- Pied de page support (toutes les pages) ---- */
.pied-support{
text-align:center; font-size:12.5px; color:var(--text-dim);
margin:28px auto 0; padding:14px 10px 0; border-top:1px solid var(--border); max-width:620px;
}
.pied-support a{font-weight:650;}
.auth-wrap .pied-support, .pub-page .pied-support{margin-top:22px;}
.member .thumb{
width:38px; height:38px; border-radius:8px; background:var(--surface-2); flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--primary);
border:1px solid var(--border); overflow:hidden;
}
/* Deux cartes côte à côte : pas de décalage vertical, et de l'air avant la suite. */
.grid-2 > .card + .card{margin-top:0;}
.grid-2 + .card{margin-top:14px;}

/* =========================================================================
   v2.14 — Finitions : mouvements, retours visuels, notifications, dialogues
   ========================================================================= */
html{-webkit-tap-highlight-color:transparent; scroll-behavior:smooth;}
body{text-rendering:optimizeLegibility;}
::selection{background:color-mix(in srgb, var(--primary) 25%, transparent);}

/* Arrivée sur une page : léger fondu vers le haut */
@keyframes entree{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
main.entree{animation:entree .22s cubic-bezier(.2,.7,.3,1) both;}

/* Boutons : réponse immédiate au toucher */
.btn, .icon-btn, .sidebar-link, .bottom-nav-item, .reglages-onglet, .motif{
transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s, opacity .15s;
}
.btn:active:not(:disabled), .icon-btn:active, .bottom-nav-item:active, .reglages-onglet:active{transform:scale(.97);}
.btn-primary{box-shadow:0 1px 2px rgba(15,118,110,.25);}
.btn-primary:hover{box-shadow:0 3px 10px rgba(15,118,110,.25);}
.btn:focus-visible, .icon-btn:focus-visible, a:focus-visible, .reglages-onglet:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.btn, .icon-btn{min-height:36px;}
.btn-sm{min-height:32px;}
@media(pointer:coarse){ .btn{min-height:42px;} .btn-sm{min-height:36px;} }
input, select, textarea{transition:border-color .15s, box-shadow .15s;}

/* Lignes cliquables */
.cliquable{transition:background-color .15s; border-radius:10px;}
.cliquable:hover{background:color-mix(in srgb, var(--primary) 5%, transparent);}
.liste-select .ligne-select{padding-left:6px; padding-right:6px;}
.liste-select .cochee{margin:0; padding-left:6px; padding-right:6px;}
.ligne-select .thumb{transition:transform .15s;}
.cliquable:hover .thumb{transform:scale(1.05);}
.rafraichit{opacity:.55; transition:opacity .2s; pointer-events:none;}
.liste-select{transition:opacity .2s;}
.compteur{display:inline-flex; align-items:center; gap:4px;}
.list-item .thumb svg, .ligne-select .thumb svg{color:var(--primary);}

/* Cartes : relief discret */
.card{transition:box-shadow .2s, border-color .2s;}
.etape-accueil{transition:transform .2s, box-shadow .2s, border-color .2s;}
.etape-accueil:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(20,27,30,.08);}
.empty .empty-icone{
width:58px; height:58px; margin:0 auto 12px; border-radius:16px; display:flex; align-items:center; justify-content:center;
background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary);
}
.card.empty{padding:40px 20px;}

/* Barre du haut : sur ordinateur, la marque est déjà dans la barre latérale */
@media(min-width:881px){ .topbar .brand{visibility:hidden;} }
.topbar{backdrop-filter:saturate(1.4) blur(8px); background:color-mix(in srgb, var(--surface) 88%, transparent);}

/* Barre du bas (mobile) : pastille sur l'onglet actif */
@media(max-width:880px){
.bottom-nav{backdrop-filter:saturate(1.4) blur(10px); background:color-mix(in srgb, var(--surface) 90%, transparent);}
.bottom-nav-item svg{padding:4px 14px; box-sizing:content-box; border-radius:999px; transition:background-color .2s;}
.bottom-nav-item.active svg{background:color-mix(in srgb, var(--primary) 14%, transparent);}
.barre-selection{top:8px;}
}

/* Démarrage */
.demarrage{flex-direction:column; gap:6px;}
.demarrage img{width:56px; height:56px; animation:pouls 1.4s ease-in-out infinite;}
@keyframes pouls{50%{transform:scale(.92); opacity:.75;}}

/* Squelettes de chargement */
.sq{background:linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 40%, var(--surface)) 50%, var(--surface-2) 75%);
background-size:200% 100%; animation:lueur 1.3s ease-in-out infinite; border-radius:6px;}
.sq-carre{width:38px; height:38px; border-radius:8px; flex-shrink:0;}
.sq-ligne{height:12px; margin:4px 0;}
.sq-fine{height:9px; opacity:.7;}
.sq-titre{height:22px; width:55%; margin-bottom:8px;}
@keyframes lueur{from{background-position:200% 0;} to{background-position:-200% 0;}}

/* Notifications */
#toasts{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:300;
display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(92vw, 420px);}
@media(max-width:880px){ #toasts{bottom:calc(82px + env(safe-area-inset-bottom));} }
.toast{pointer-events:auto; cursor:pointer; display:flex; align-items:center; gap:10px; width:100%;
background:#17201f; color:#f1f5f4; border-radius:12px; padding:11px 14px; font-size:14px; font-weight:550;
box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; transform:translateY(12px) scale(.98); transition:opacity .22s, transform .22s;}
.toast.visible{opacity:1; transform:none;}
.toast-icone{width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:800; background:#2dd4bf; color:#062622;}
.toast-erreur .toast-icone{background:#f2887f; color:#3a0d09;}
.toast-info .toast-icone{background:#9aabb1; color:#12181a;}
.toast-texte{flex:1; min-width:0;}

/* Boîtes de dialogue */
.dlg-fond{position:fixed; inset:0; z-index:250; background:rgba(10,15,17,.45); display:flex; align-items:center; justify-content:center;
padding:16px; opacity:0; transition:opacity .18s;}
.dlg-fond.visible{opacity:1;}
.dlg{background:var(--surface); border:1px solid var(--border); border-radius:16px; width:100%; max-width:440px;
max-height:calc(100vh - 32px); overflow-y:auto; padding:22px; box-shadow:0 20px 50px rgba(0,0,0,.3);
transform:translateY(10px) scale(.98); transition:transform .2s cubic-bezier(.2,.7,.3,1);}
.dlg-fond.visible .dlg{transform:none;}
.dlg-titre{font-size:16.5px; font-weight:700; line-height:1.35; margin-bottom:8px;}
.dlg-corps{font-size:14px; color:var(--text-dim); white-space:pre-line; line-height:1.55;}
.dlg-saisie{margin-top:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.dlg-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap;}
@media(max-width:480px){
.dlg-fond{align-items:flex-end; padding:0;}
.dlg{border-radius:18px 18px 0 0; max-width:none; padding-bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateY(30px);}
.dlg-actions .btn{flex:1;}
.modal-fond{align-items:flex-end; padding:0;}
.modal{border-radius:18px 18px 0 0; max-width:none; padding-bottom:calc(20px + env(safe-area-inset-bottom));}
}
.modal-fond{animation:fondu .18s both;}
.modal{animation:monte .22s cubic-bezier(.2,.7,.3,1) both;}
@keyframes fondu{from{opacity:0;}}
@keyframes monte{from{opacity:.4; transform:translateY(16px);}}

/* Mouvement réduit : on respecte le réglage du téléphone */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* =========================================================================
   v2.15 — Réglages simplifiés, compteurs, support à traiter / traitées
   ========================================================================= */
.onglet-compteur{
display:inline-block; min-width:20px; padding:1px 6px; margin-left:4px; border-radius:999px;
font-size:11.5px; font-weight:700; line-height:1.5; text-align:center;
background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border);
}
.onglet-compteur.alerte{background:var(--danger); color:#fff; border-color:var(--danger);}
.reglages-aide{margin:-6px 0 14px; font-size:13px; color:var(--text-dim);}
.segment{
display:inline-flex; gap:4px; padding:4px; border-radius:10px;
background:var(--surface-2); border:1px solid var(--border);
}
.segment button{
border:none; background:none; padding:7px 12px; border-radius:7px; cursor:pointer;
font-weight:650; font-size:13.5px; color:var(--text-dim);
}
.segment button.active{background:var(--surface); color:var(--primary); box-shadow:var(--shadow);}
.bloc-invite{
margin:12px 0 6px; padding:14px; border-radius:10px;
background:var(--surface-2); border:1px solid var(--border);
}
.btn-crayon{
border:none; background:none; cursor:pointer; padding:2px 6px; margin-left:2px; border-radius:6px;
font-size:14px; color:var(--text-dim); vertical-align:middle;
}
.btn-crayon:hover{color:var(--primary); background:var(--surface-2);}
.renommage{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:4px;}
.renommage input{flex:1; min-width:160px; padding:6px 10px;}

/* =========================================================================
   v2.16 — Couleur par rôle, espace fondateur, parc client
   ========================================================================= */
/* ---- Thème par rôle (posé sur <body data-role="…">) ---- */
body[data-role="utilisateur"]{
--primary:#1d4ed8; --primary-dim:#1e3a8a; --primary-contrast:#fff;
--sidebar-bg:linear-gradient(180deg,#123a8a 0%,#0c2461 100%);
--bg-glow:radial-gradient(1400px 900px at 92% -12%, rgba(29,78,216,.08), transparent 60%);
}
body[data-role="responsable"]{
--primary:#15803d; --primary-dim:#14532d; --primary-contrast:#fff;
--sidebar-bg:linear-gradient(180deg,#14532d 0%,#0b3a1f 100%);
--bg-glow:radial-gradient(1400px 900px at 92% -12%, rgba(21,128,61,.08), transparent 60%);
}
body[data-role="admin"]{
--primary:#6d28d9; --primary-dim:#4c1d95; --primary-contrast:#fff;
--sidebar-bg:linear-gradient(180deg,#3b0f7a 0%,#24094d 100%);
--bg-glow:radial-gradient(1400px 900px at 92% -12%, rgba(109,40,217,.08), transparent 60%);
}
/* Le thème Fondateur, toujours sombre même en mode clair, est isolé dans
   css/fondateur.css et ne s'applique qu'aux comptes identifiés comme tels. */
@media (prefers-color-scheme: dark){
body[data-role="utilisateur"]{--primary:#60a5fa; --primary-dim:#3b82f6; --primary-contrast:#0b1a33; --sidebar-bg:linear-gradient(180deg,#0f2150,#0a1735);}
body[data-role="responsable"]{--primary:#4ade80; --primary-dim:#22c55e; --primary-contrast:#052e16; --sidebar-bg:linear-gradient(180deg,#0e3a20,#082614);}
body[data-role="admin"]{--primary:#a78bfa; --primary-dim:#8b5cf6; --primary-contrast:#1e0b3d; --sidebar-bg:linear-gradient(180deg,#2a0c57,#180734);}
}

/* Badges et vignettes de rôle */
.badge-role.role-utilisateur, .thumb.role-utilisateur{background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe;}
.badge-role.role-responsable, .thumb.role-responsable{background:#dcfce7; color:#15803d; border-color:#bbf7d0;}
.badge-role.role-admin, .thumb.role-admin{background:#ede9fe; color:#6d28d9; border-color:#ddd6fe;}
.badge-role.role-fondateur, .thumb.role-fondateur{background:linear-gradient(135deg,#1b2350,#0b1026); color:#f3dc8f; border-color:#c9a227;}
@media (prefers-color-scheme: dark){
.badge-role.role-utilisateur, .thumb.role-utilisateur{background:#172554; color:#93c5fd; border-color:#1e3a8a;}
.badge-role.role-responsable, .thumb.role-responsable{background:#052e16; color:#86efac; border-color:#14532d;}
.badge-role.role-admin, .thumb.role-admin{background:#2e1065; color:#c4b5fd; border-color:#4c1d95;}
}

/* ---- Menu utilisateur ---- */
.user-nom{font-size:13px; font-weight:650; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media(max-width:640px){ .user-nom{display:none;} }
.dropdown{min-width:240px;}
.dropdown-entete{padding:10px 10px 12px; border-bottom:1px solid var(--border); margin-bottom:6px;}
.dropdown-nom{font-weight:700; font-size:14.5px;}
.dropdown button, .dropdown .dropdown-fichier{display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:500; line-height:1.3; text-transform:none; letter-spacing:normal; color:var(--text);}
.dropdown .dropdown-sortie{color:var(--danger);}
.dropdown-entete{display:flex; align-items:center; gap:12px;}
.dropdown-entete-txt{min-width:0; flex:1;}
.dropdown-entete-txt .small{overflow:hidden; text-overflow:ellipsis;}
.avatar-grand{
width:64px; height:64px; flex:none; border-radius:50%; overflow:hidden;
display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700;
background:var(--surface-2); border:2px solid var(--border);
}
.avatar-grand img{width:100%; height:100%; object-fit:cover; display:block;}
/* Pastille de la barre du haut : assez grande pour reconnaître la photo au téléphone */
.user-btn .avatar{width:36px; height:36px; font-size:13px;}
.user-btn{padding:4px 10px 4px 4px;}
@media(max-width:640px){ .user-btn{padding:3px;} .user-btn .avatar{width:40px; height:40px; font-size:14px;} .dropdown{min-width:min(280px, calc(100vw - 24px));} .avatar-grand{width:72px; height:72px; font-size:26px;} }
.nav-badge{
margin-left:auto; min-width:20px; padding:1px 6px; border-radius:999px; text-align:center;
font-size:11px; font-weight:800; background:var(--danger); color:#fff; line-height:1.5;
}
.bottom-nav-item{position:relative;}
.bottom-nav-item .nav-badge{position:absolute; top:2px; left:calc(50% + 6px); margin:0; padding:0 5px; font-size:10px;}
.sidebar-fondateur{
display:flex; align-items:center; gap:10px; margin:0 4px; padding:12px; border-radius:12px;
background:linear-gradient(135deg, rgba(212,175,55,.16), rgba(212,175,55,.04));
border:1px solid rgba(212,175,55,.35); color:var(--or-clair, #f3dc8f);
}
.sidebar-fondateur strong{display:block; font-size:12.5px; color:#fff;}
.sidebar-fondateur span{display:block; font-size:11px; opacity:.8;}

.accueil-deux{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;}
.accueil-deux > *{min-width:0;}
@media(max-width:900px){ .accueil-deux{grid-template-columns:1fr;} }
.echeance-pastille{
flex-shrink:0; min-width:52px; text-align:center; font-size:12px; font-weight:800; padding:6px 4px; border-radius:9px;
background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border);
}
.echeance-pastille.proche{background:var(--warn-bg); color:var(--warn); border-color:transparent;}
.echeance-pastille.retard{background:var(--danger-bg); color:var(--danger); border-color:transparent; text-transform:uppercase; font-size:10.5px;}

/* ---- Clients : liste pour 50 clients et plus ---- */
.barre-clients{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px;}
.barre-clients select{width:auto; min-width:150px;}
.recherche-client{
flex:1; min-width:220px; display:flex; align-items:center; gap:8px; padding:0 12px;
background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--text-dim);
}
.recherche-client input{border:none; background:none; padding:10px 0; box-shadow:none; outline:none; flex:1; min-width:0;}
.recherche-client:focus-within{border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);}
.avatar-client{
width:38px; height:38px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:13px; color:#fff;
background:linear-gradient(135deg, hsl(var(--teinte) 55% 45%), hsl(calc(var(--teinte) + 30) 60% 32%));
}
.chiffre-client{font-size:12.5px; color:var(--text-dim); white-space:nowrap;}
.chiffre-client strong{color:var(--text); font-size:14px;}
.ligne-client .ligne-chiffres{gap:14px;}
.chevron{color:var(--text-dim); font-size:20px; line-height:1; flex-shrink:0; padding-left:2px;}
.ligne-select.cliquable:hover{background:color-mix(in srgb, var(--primary) 4%, transparent);}

/* ---- Parc d'un client ---- */
.carte-parc{border-top:3px solid var(--primary);}
.parc-groupe{margin-top:12px;}
.parc-groupe-titre{font-size:12px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim);
padding-bottom:4px; border-bottom:1px solid var(--border);}
.journal-ligne{position:relative;}
.journal-suppr{position:absolute; right:0; top:10px;}
.journal-ligne .journal-corps{padding-right:36px;}
.choix-client{display:flex; align-items:center; gap:8px; margin:0; text-transform:none; letter-spacing:normal; font-size:12.5px; color:var(--text-dim); font-weight:600;}
.choix-client select{width:auto; min-width:160px; padding:6px 8px;}

/* ===== v2.16.6 : photos des interventions ===== */
.iv-apercus{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.iv-apercu{position:relative; width:72px; height:72px; border-radius:10px; overflow:hidden; background:var(--surface-2); border:1px solid var(--border);}
.iv-apercu img{width:100%; height:100%; object-fit:cover; display:block;}
.iv-apercu-x{position:absolute; top:3px; right:3px; width:24px; height:24px; border-radius:50%; border:0; background:rgba(0,0,0,.65); color:#fff; font-size:16px; line-height:24px; padding:0; cursor:pointer;}
.iv-photo-btn{display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
.iv-photo-btn.disabled{opacity:.5; pointer-events:none;}
.iv-vignettes{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.iv-vignette{width:52px; height:52px; padding:0; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--surface-2); cursor:zoom-in; display:inline-block;}
.iv-vignette img{width:100%; height:100%; object-fit:cover; display:block;}
.iv-vignette.attente{cursor:default; animation:pulse 1.2s ease-in-out infinite;}
.visionneuse{position:fixed; inset:0; z-index:220; background:rgba(8,10,12,.97); display:flex; flex-direction:column; color:#fff;}
.visionneuse-haut{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; padding-top:max(10px, env(safe-area-inset-top));}
.visionneuse-btn{background:rgba(255,255,255,.12); border:0; color:#fff; width:40px; height:40px; border-radius:50%; font-size:24px; cursor:pointer;}
.visionneuse-image{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; position:relative; padding:0 8px;}
.visionneuse-image img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px;}
.visionneuse-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.14); border:0; color:#fff; width:44px; height:44px; border-radius:50%; font-size:28px; line-height:40px; cursor:pointer;}
.visionneuse-nav.g{left:10px;} .visionneuse-nav.d{right:10px;}
.visionneuse-bas{display:flex; justify-content:center; gap:10px; padding:12px; padding-bottom:max(12px, env(safe-area-inset-bottom));}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ===== v2.16.7 : hors-ligne (équipements en attente) ===== */
.badge-attente{display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:650; background:var(--warn-bg); color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 35%, transparent); vertical-align:middle;}
.bandeau-hl{display:flex; gap:8px; align-items:flex-start; margin-bottom:14px;}
.bandeau-hl svg{flex:none; margin-top:2px;}
.ligne-select.en-attente .thumb{background:var(--warn-bg); color:var(--warn);}
.iv-attente-liste{display:flex; flex-direction:column; gap:8px; margin:12px 0;}
.iv-attente{padding:10px 12px; border:1px dashed color-mix(in srgb, var(--warn) 45%, transparent); background:var(--warn-bg); border-radius:10px;}

/* ===== v2.16.8 : Support → Modèles métier ===== */
.sous-menu{display:flex; gap:4px; padding:4px; margin:4px 0 16px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); overflow-x:auto;}
.sous-menu button{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; border:none; background:none; padding:9px 14px; border-radius:9px; cursor:pointer; font-weight:650; font-size:14px; color:var(--text-dim);}
.sous-menu button.active{background:var(--surface); color:var(--primary); box-shadow:var(--shadow);}

/* ===== Menu déroulant support (Demandes / Rapports / Stats / Modèles) ===== */
.sous-menu-drop{position:relative; margin:4px 0 16px;}
.sous-menu-trigger{display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font-weight:650; font-size:14px; cursor:pointer; box-shadow:var(--shadow); text-align:left;}
.sous-menu-trigger:hover{border-color:var(--primary-dim);}
.sous-menu-trigger-icon{display:flex; flex:none; color:var(--primary);}
.sous-menu-trigger-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sous-menu-trigger-chevron{display:flex; flex:none; color:var(--text-dim); transform:rotate(90deg); transition:transform .18s;}
.sous-menu-drop.open .sous-menu-trigger-chevron{transform:rotate(-90deg);}
.sous-menu-drop.open .sous-menu-trigger{border-color:var(--primary-dim); box-shadow:0 4px 14px rgba(20,27,30,.10);}
.sous-menu-panel{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:15; display:none; flex-direction:column; padding:6px; gap:2px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:0 12px 30px rgba(20,27,30,.16);}
.sous-menu-drop.open .sous-menu-panel{display:flex;}
.sous-menu-option{display:flex; align-items:center; gap:10px; width:100%; padding:10px; border:0; border-radius:9px; background:none; color:var(--text-dim); font-size:13.5px; font-weight:600; text-align:left; cursor:pointer;}
.sous-menu-option:hover{background:var(--surface-2); color:var(--text);}
.sous-menu-option.active{background:var(--surface-2); color:var(--primary); font-weight:700;}
.sous-menu-option-icon{display:flex; flex:none;}
.sous-menu-option-label{flex:1; min-width:0;}
.sous-menu-option svg:last-child{flex:none; color:var(--primary);}
.mm-grille{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px;}
.mm-grille > .card.mm-carte{display:flex; flex-direction:column; gap:6px; margin:0;}
.mm-actions{gap:6px; margin-top:auto; align-items:center;}
.mm-actions .mm-suppr{margin-left:auto;}
.mm-titre{font-weight:700; font-size:15.5px;}
.mm-chiffres{color:var(--text-dim);}
.mm-types{display:flex; flex-wrap:wrap; gap:5px; margin:4px 0 8px;}
.mm-puce{font-size:12px; padding:3px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);}
.mm-types-liste{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.mm-type{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
.mm-type.ouvert{border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow:var(--shadow);}
.mm-type-tete{display:flex; align-items:center; gap:8px; padding:8px 10px;}
.mm-type-plier{flex:none; width:30px; height:30px; border:none; background:var(--surface-2); border-radius:8px; cursor:pointer; color:var(--text-dim); font-size:14px;}
.mm-type-nom{flex:1; min-width:0; font-weight:650;}
.mm-type-n{flex:none; white-space:nowrap;}
.mm-type-actions, .mm-champ-actions{display:flex; gap:2px; flex:none;}
.mm-type-actions .icon-btn:disabled, .mm-champ-actions .icon-btn:disabled{opacity:.3; cursor:default;}
.mm-champs{padding:4px 12px 12px 48px;}
.mm-champ{display:grid; grid-template-columns:1fr 130px auto; gap:8px; align-items:center; margin-bottom:8px;}
@media (max-width:640px){
.sous-menu button{padding:8px 8px; font-size:13px; gap:5px;}
.mm-type-tete{flex-wrap:wrap;}
.mm-type-nom{flex-basis:calc(100% - 40px);}
.mm-type-n{margin-left:38px; margin-right:auto;}
.mm-champs{padding:4px 10px 12px;}
.mm-champ{grid-template-columns:1fr auto; padding-bottom:8px; border-bottom:1px dashed var(--border);}
.mm-champ input{grid-column:1 / -1;}
}

/* ===== v2.16.9 : mots de passe ===== */
.dlg-form .dlg-corps{margin-bottom:6px;}
.dlg-champ{display:block; margin-top:12px;}
.dlg-champ > span:first-child{display:block; font-size:12.5px; font-weight:650; color:var(--text-dim); margin-bottom:5px; text-transform:none; letter-spacing:0;}
.champ-mdp{position:relative; display:block;}
.champ-mdp input{width:100%; padding-right:44px;}
.dlg-oeil{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:none; background:none; color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:8px;}
.dlg-oeil:hover{background:var(--surface-2);}
.dlg-erreur{margin-top:12px; padding:9px 12px; border-radius:10px; background:var(--danger-bg); color:var(--danger); font-size:13.5px; font-weight:600;}
.btn-mdp{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.btn-deco{color:#b3261e; border-color:#e8b4ae;}

/* ===== v2.17.1 : un compte = un appareil ===== */
.appareil-ligne{display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin:2px 0; color:var(--text);}
.appareil-ligne svg{color:var(--text-dim);}
.btn-lien-petit{border:none; background:none; padding:0 2px; color:var(--primary); font-weight:650; font-size:12.5px; text-decoration:underline; cursor:pointer;}

/* ===== v2.17.2 : Journal d'activité ===== */
.activite-liste{padding:4px 16px;}
.activite-jour{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); padding:12px 0 4px;}
.activite-jour::first-letter{text-transform:uppercase;}
.activite-ligne{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--border);}
.activite-ligne:last-child{border-bottom:none;}
.activite-ico{flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.activite-ico.bleu{background:color-mix(in srgb, #2563eb 12%, transparent); color:#2563eb;}
.activite-ico.vert{background:color-mix(in srgb, #16a34a 12%, transparent); color:#16a34a;}
.activite-ico.or{background:color-mix(in srgb, #d97706 14%, transparent); color:#b45309;}
.activite-ico.rouge{background:color-mix(in srgb, #dc2626 12%, transparent); color:#dc2626;}
.activite-corps{flex:1; min-width:0;}
.activite-type{font-size:12.5px; font-weight:650; color:var(--text-dim);}
.activite-titre{font-weight:650; margin-top:1px; overflow-wrap:anywhere;}
.activite-detail{margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.activite-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px;}
.activite-archiver{flex:none; color:var(--text-dim);}

/* ---- Statistiques & export (v2.17.4) ---- */
.st-entete{margin-bottom:12px; gap:10px; align-items:flex-end;}
.st-source{display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text-dim);}
.st-source select{min-width:220px;}
.st-demo{display:flex; gap:8px; align-items:flex-start;}
.st-kpis{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:14px;}
.st-kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow);}
.st-kpi .v{font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--primary); line-height:1.1;}
.st-kpi .l{font-size:12.5px; color:var(--text-dim); margin-top:2px;}
.st-svg{width:100%; height:auto; display:block;}
.st-grille{stroke:var(--border); stroke-width:1;}
.st-axe{font-size:11px; fill:var(--text-dim);}
.st-fill{fill:var(--primary);}
.st-barre:hover .st-fill{opacity:.8;}
.st-deux{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
.st-deux .card{margin-top:0;}
.st-liste{display:flex; flex-direction:column; gap:9px; margin-top:6px;}
.st-ligne{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(60px, 1fr) 34px; gap:10px; align-items:center;}
.st-nom{min-width:0; font-size:13px;}
.st-nom span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600;}
.st-nom small{display:block; color:var(--text-dim); font-size:11.5px;}
.st-piste{height:10px; background:var(--surface-2); border-radius:0 4px 4px 0;}
.st-jauge{height:100%; background:var(--primary); border-radius:0 4px 4px 0;}
.st-val{text-align:right; font-weight:700; font-variant-numeric:tabular-nums; font-size:13px;}
.st-table-wrap{max-height:420px; overflow:auto; border:1px solid var(--border); border-radius:8px;}
.st-table{width:100%; border-collapse:collapse; font-size:13px;}
.st-table th{position:sticky; top:0; background:var(--surface-2); text-align:left; padding:8px 10px; font-size:12px; color:var(--text-dim); font-weight:650;}
.st-table td{padding:8px 10px; border-top:1px solid var(--border); vertical-align:top;}
.st-table .num{text-align:right; font-variant-numeric:tabular-nums;}
.st-table tr.st-archive td{opacity:.65;}
.st-type-mob{display:none;}
@media(max-width:640px){ .st-table th:nth-child(2), .st-table td:nth-child(2){display:none;} .st-type-mob{display:block;} .st-source{width:100%;} .st-axe{font-size:10px;} }
@media(max-width:760px){ .st-kpis{grid-template-columns:repeat(2, 1fr);} .st-deux{grid-template-columns:1fr;} .st-source select{min-width:0; width:100%;} .st-entete > div:last-child{width:100%;} .st-entete .btn{flex:1;} }

/* ---- Ordinateur autorisé par le téléphone (v2.17.5) ---- */
.poste-ecran .poste-carte{text-align:left;}
.poste-qr{display:flex; justify-content:center; align-items:center; min-height:236px; margin-bottom:12px;}
.poste-qr canvas{width:220px; height:220px; border-radius:10px; border:1px solid var(--border); background:#fff; padding:6px;}
.poste-etapes{margin:0 0 10px 18px; padding:0; line-height:1.6;}
.poste-pause-ico{width:56px; height:56px; border-radius:16px; background:var(--surface-2); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.bandeau-ordi{display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin-bottom:14px; font-size:13px; color:var(--text-dim);}
.bandeau-ordi .btn-lien-petit{margin-left:auto;}
.bandeau-ordi.alerte{background:var(--danger-bg); color:var(--danger); border-color:var(--danger); font-weight:600;}
.ordi-actif{color:var(--primary); font-weight:600;}

/* Champs issus du modèle métier attribué : visibles, non modifiables */
.champ-verrou input:disabled, .champ-verrou select:disabled{ opacity:.65; cursor:not-allowed; }
.champ-verrou{ grid-template-columns:1fr 110px 44px; }