/* CRM Taxi MOYAL v2 — écran CHAUFFEURS (styles propres, préfixe ch- / scope #ecran-chauffeurs) */

#ecran-chauffeurs svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.plein svg.ic,.feuille svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- outils de liste ---------- */
.ch-tools{padding:0 18px 10px}
.ch-search{position:relative}
.ch-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink2);pointer-events:none}
.ch-search input{width:100%;height:50px;border:1px solid var(--line);background:var(--pan);color:var(--ink);padding:0 48px 0 42px;font:600 16px/1 var(--f-b);outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.ch-search input:focus{border-color:var(--y);box-shadow:0 0 0 1px var(--y)}
.ch-search input::placeholder{color:var(--mute)}
.ch-search .ch-x{position:absolute;right:0;top:0;width:48px;height:50px;display:grid;place-items:center;color:var(--ink2)}
.ch-filtres{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}
.ch-filtres button{min-height:48px;border:1px solid var(--line);font:700 10.5px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.ch-filtres button span{font:800 15px/1 var(--f-d);color:var(--ink)}
.ch-filtres button.on{border-color:var(--y);color:var(--ink);box-shadow:inset 0 0 0 1px var(--y)}
.ch-filtres button.on span{color:var(--ink)}
.ch-vide{padding:30px 0;color:var(--ink2);text-align:center}

/* ---------- lignes ---------- */
#ecran-chauffeurs .row.ch-row{grid-template-columns:8px 1fr auto;cursor:pointer}
#ecran-chauffeurs .row.ch-row.open{background:linear-gradient(90deg,rgba(255,195,0,.08),transparent 60%)}
#ecran-chauffeurs .row.ch-row.dep .tick{background:#D6D4CC}
#ecran-chauffeurs .row.ch-row.dep .nm{color:var(--ink2)}
.ch-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ch-b{font:700 10px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;padding:5px 6px 4px;border:1px solid var(--line);color:var(--ink2);white-space:nowrap}
.ch-b.r{border-color:rgba(255,77,77,.6);color:var(--r)}
.ch-b.c{border-color:rgba(56,232,255,.5);color:var(--c)}
.ch-b.o{border-color:rgba(255,122,0,.6);color:var(--o)}
.ch-b.g{border-color:rgba(61,255,143,.45);color:var(--g)}
.ch-b.y{border-color:rgba(255,195,0,.6);color:var(--ink)}
.ch-tel{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink2)}
.ch-tel.off{opacity:.3;pointer-events:none}
.ch-acts{display:flex;gap:6px;align-items:center}

/* ---------- fiche ---------- */
.ch-fiche .hd,.ch-side .hd{position:sticky;top:0;background:var(--bg);padding:calc(12px + var(--sat)) 18px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);z-index:1}
.ch-fiche .hd h2,.ch-side .hd h2{margin:0;font:800 16px/1.1 var(--f-d);letter-spacing:.1em;text-transform:uppercase}
.ch-fiche .hd h2 small,.ch-side .hd h2 small{display:block;font:700 11px/1 var(--f-d);letter-spacing:.14em;color:var(--ink2);margin-top:4px}
.ch-fiche .corps,.ch-side .corps{padding:6px 18px 20px}
.ch-kpis{margin:10px 0 10px!important}
.ch-kpis span.r{color:var(--r)} .ch-kpis span.g{color:var(--g)} .ch-kpis span.o{color:var(--o)} .ch-kpis span.c{color:var(--c)}
.ch-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 6px}
.ch-actions .btn-l{justify-content:center;height:48px;padding:0 8px;text-align:center}
.ch-actions .btn-l.y{border-color:var(--y);color:var(--ink)}
.ch-actions a.btn-l{text-decoration:none}
.ch-sec{border-top:2px solid var(--line);margin-top:6px}
.ch-sec-hd{width:100%;display:flex;justify-content:space-between;align-items:center;min-height:52px;text-align:left;color:var(--ink)}
.ch-sec-hd h3{margin:0;font:800 13px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase}
.ch-sec-hd h3 small{margin-left:10px;color:var(--ink2);font:700 11px/1 var(--f-d);letter-spacing:.1em}
.ch-sec-hd h3 small.r{color:var(--r)} .ch-sec-hd h3 small.o{color:var(--o)}
.ch-sec-hd svg{transition:transform .15s;color:var(--ink2)}
.ch-sec.on .ch-sec-hd svg{transform:rotate(180deg);color:var(--ink)}
.ch-sec-body{display:none;padding:2px 0 16px}
.ch-sec.on .ch-sec-body{display:block}
.ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 12px}
.ch-grid div.w{grid-column:1/-1}
.ch-grid b{display:block;font:700 10px/1 var(--f-d);letter-spacing:.16em;color:var(--ink2);margin-bottom:5px;text-transform:uppercase}
.ch-grid span,.ch-grid a{font:700 15px/1.25 var(--f-b);word-break:break-word;color:var(--ink);text-decoration:none}
.ch-grid a{color:var(--c)}
.ch-grid span.mute{color:var(--mute);font-weight:600}
.ch-ligne-btn{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
.ch-ligne-btn .btn-l{flex:1;justify-content:center;min-width:120px}

/* ---------- formulaires ---------- */
.ch-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ch-form .w{grid-column:1/-1}
.ch-form h4{grid-column:1/-1;margin:10px 0 0;font:800 11px/1 var(--f-d);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-top:1px solid var(--line);padding-top:12px}
.ch-ch{display:block;min-width:0}
.ch-ch>span{display:block;font:700 10px/1 var(--f-d);letter-spacing:.16em;color:var(--ink2);margin-bottom:5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-ch input,.ch-ch select,.ch-ch textarea{width:100%;min-height:48px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 16px/1.3 var(--f-b);padding:10px 12px;outline:none;border-radius:0;-webkit-appearance:none;appearance:none;box-sizing:border-box}
.ch-ch input:focus,.ch-ch select:focus,.ch-ch textarea:focus{border-color:var(--y)}
.ch-ch input::placeholder,.ch-ch textarea::placeholder{color:var(--mute)}
.ch-ch select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A39A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:20px;padding-right:38px}
.ch-ch textarea{min-height:88px;resize:vertical}
.ch-ch input[type=date]{min-height:48px;line-height:1}
.ch-ch input.num{text-align:right;font:800 20px/1 var(--f-d)}
.ch-ch input[readonly]{color:var(--ink2);background:var(--pan)}
.ch-ch.err input,.ch-ch.err select{border-color:var(--r)}
.ch-file{display:flex;align-items:center;gap:10px;min-height:48px;border:1px dashed var(--line);padding:0 12px;color:var(--ink2);font:600 13px/1.3 var(--f-b);cursor:pointer}
.ch-file.ok{border-style:solid;border-color:var(--g);color:var(--g)}
.ch-file input{display:none}
.ch-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}
.ch-btns .btn-y{grid-column:1/-1}
.ch-btns .btn-l{justify-content:center}
.ch-note{font-size:13.5px;color:var(--ink2);line-height:1.45;margin:8px 0}
.ch-note b{color:var(--ink)}
.ch-note.warn{border:1px solid var(--o);padding:8px 10px;color:var(--ink)}
.ch-note.err{border:1px solid var(--r);padding:8px 10px;color:var(--ink)}
.ch-solde{border:1px solid var(--line);padding:10px 12px;margin-top:8px}
.ch-solde div{display:flex;justify-content:space-between;gap:10px;min-height:30px;align-items:center;font:600 14px/1.2 var(--f-b);color:var(--ink2)}
.ch-solde div b{font:800 18px/1 var(--f-d);color:var(--ink)}
.ch-solde div.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:6px;color:var(--ink)}
.ch-solde div.tot b{color:var(--ink);font-size:22px}

/* ---------- relevé, règlements ---------- */
.ch-rel{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;min-height:50px;border-top:1px solid var(--line2);width:100%;text-align:left}
.ch-rel b{font:700 13.5px/1.2 var(--f-b)}
.ch-rel small{display:block;font:600 10.5px/1.25 var(--f-d);letter-spacing:.08em;color:var(--ink2);margin-top:3px;text-transform:uppercase}
.ch-rel small .r{color:var(--r)}
.ch-rel .t{font:800 17px/1 var(--f-d);text-align:right}
.ch-rel .t.ok{color:var(--g)} .ch-rel .t.ar{color:var(--o);font-size:12px;letter-spacing:.1em} .ch-rel .t.r{color:var(--r)} .ch-rel .t.z{color:var(--mute)}
.ch-rel .t.g{color:var(--g)}

/* ---------- documents, congés ---------- */
.ch-doc{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;min-height:54px;border-top:1px solid var(--line2);width:100%;text-align:left}
.ch-doc .ti{font:700 14px/1.2 var(--f-b);color:var(--ink)}
.ch-doc small{display:block;font:600 10.5px/1.2 var(--f-d);letter-spacing:.08em;color:var(--ink2);margin-top:3px;text-transform:uppercase}
.ch-doc .ouv{flex:1;text-align:left;min-height:44px}
.ch-doc .sup,.ch-doc .mod{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink2)}
.ch-doc .sup:active,.ch-doc .mod:active{border-color:var(--y);color:var(--ink)}

/* ---------- aperçu papier (contrat, lettres) ---------- */
.ch-papier{background:#fff;color:#111;padding:26px 28px;font:11.5px/1.65 "Times New Roman",Times,serif;margin-top:14px;max-width:780px;box-shadow:0 0 0 1px var(--line)}
.ch-papier .ent{font-size:10.5px;line-height:1.4;margin-bottom:14px}
.ch-papier .ent b{font-size:11.5px}
.ch-papier h1{text-align:center;font-size:12.5px;border:3px double #111;padding:8px 10px;margin:0 0 14px;font-weight:700}
.ch-papier p{margin:0 0 6px;text-align:justify}
.ch-papier p.strong{font-weight:700}
.ch-papier p.center{text-align:center;font-weight:700;text-decoration:underline;margin:12px 0}
.ch-papier p.art{font-weight:700;font-style:italic;text-decoration:underline;margin-top:10px}
.ch-papier p.em{font-style:italic;margin-top:6px}
.ch-papier .lignes{margin:0 0 6px 20px}
.ch-papier .sec{background:#1A1A18;color:#fff;font-weight:700;padding:3px 6px;font-size:10.5px;margin:10px 0 6px}
.ch-papier .kv{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted #999;padding:2px 0;margin-bottom:3px}
.ch-papier .kv.strong{font-weight:700;border-bottom:1px solid #111}
.ch-papier .chk{padding-left:20px;position:relative;text-align:left}
.ch-papier .chk::before{content:"";position:absolute;left:2px;top:4px;width:9px;height:9px;border:1px solid #111}
.ch-papier .chk.on{font-weight:700}
.ch-papier .chk.on::before{content:"X";font-size:9px;line-height:9px;text-align:center;font-weight:700}
.ch-papier ul{margin:4px 0 6px 20px;padding:0}
.ch-papier hr{border:0;border-top:1px solid #999;margin:8px 0}
.ch-papier .fait{text-align:center;margin-top:16px}
.ch-papier .sign{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;text-align:center}
.ch-papier .sign p{text-align:center;margin:0 0 3px}
.ch-papier .sign .l{border-top:1px solid #111;margin-top:40px;padding-top:4px;font-size:10px}
.ch-papier .sign .pt{font-size:10.5px;color:#4A4A46}

/* ---------- étapes (résiliation) ---------- */
.ch-steps{list-style:none;margin:10px 0;padding:0;border:1px solid var(--line)}
.ch-steps li{min-height:40px;display:flex;gap:10px;align-items:center;font:600 14px/1.3 var(--f-b);color:var(--ink2);padding:6px 12px;border-top:1px solid var(--line2)}
.ch-steps li:first-child{border-top:0}
.ch-steps li i{width:10px;height:10px;border-radius:50%;background:#D6D4CC;flex:none;font-style:normal}
.ch-steps li.ok{color:var(--ink)} .ch-steps li.ok i{background:var(--g);box-shadow:0 0 8px var(--g)}
.ch-steps li.enc{color:var(--ink)} .ch-steps li.enc i{background:var(--y);box-shadow:0 0 8px var(--y)}
.ch-steps li.err{color:var(--r)} .ch-steps li.err i{background:var(--r);box-shadow:0 0 8px var(--r)}

/* ---------- ordinateur ---------- */
@media (min-width:900px){
  #ecran-chauffeurs .ch-wrap.avec-fiche{display:grid;grid-template-columns:minmax(0,1fr) 560px;align-items:start}
  #ecran-chauffeurs .ch-side{display:none}
  #ecran-chauffeurs .ch-wrap.avec-fiche .ch-side{display:block;position:sticky;top:0;height:100dvh;overflow:auto;border-left:1px solid var(--line);background:var(--bg2)}
  .ch-side .hd{background:var(--bg2);padding-top:22px}
  .ch-filtres{max-width:560px}
  .ch-search{max-width:560px}
  .ch-2col{display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);gap:22px;align-items:start}
  .ch-2col .ch-papier{position:sticky;top:84px;max-height:calc(100dvh - 104px);overflow:auto;margin-top:0}
  .ch-form.large{grid-template-columns:repeat(3,1fr)}
  .ch-form.large .w{grid-column:1/-1}
  .ch-form.large .w2{grid-column:span 2}
  #ecran-chauffeurs .row.ch-row{grid-template-columns:8px 1fr auto}
}
@media (max-width:899px){
  #ecran-chauffeurs .ch-side{display:none}
}

/* ---------- compléments r100 ---------- */
.ch-cases{display:grid;grid-template-columns:1fr;gap:6px;margin:4px 0}
.ch-case{display:flex;align-items:center;gap:12px;min-height:46px;border:1px solid var(--line);padding:0 12px;font:600 14px/1.3 var(--f-b);color:var(--ink2);cursor:pointer}
.ch-case input{width:22px;height:22px;accent-color:var(--y);margin:0;flex:none}
.ch-case:has(input:checked){border-color:var(--y);color:var(--ink)}
.ch-ch{position:relative}
.ch-adr{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--bg2);border:1px solid var(--y);max-height:260px;overflow:auto;box-shadow:0 18px 40px rgba(0,0,0,.16)}
.ch-adr button{display:block;width:100%;text-align:left;padding:10px 12px;border-top:1px solid var(--line2);font:600 14px/1.3 var(--f-b)}
.ch-adr button small{display:block;font:600 11px/1 var(--f-d);letter-spacing:.08em;color:var(--ink2);margin-top:3px}
.ch-adr button:active{background:rgba(255,195,0,.12)}
.ch-actions .btn-l.off{opacity:.35;pointer-events:none}
.ch-actions .btn-l.danger{border-color:rgba(255,77,77,.5);color:var(--r)}
.ch-rel .t.o{color:var(--o)}
#ecran-chauffeurs .top{padding-bottom:6px}
.ch-fiche .ch-papier{margin-top:0}
@media (min-width:900px){.ch-cases{grid-template-columns:1fr 1fr}.ch-form.large .ch-cases{grid-column:1/-1}}

/* ---------- fiche chauffeur r101 : 4 tuiles + frise des semaines (maquette B) ---------- */
.ch-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.ch-fact{background:var(--soft);border-radius:12px;padding:10px 12px;min-height:76px}
.ch-fact .l{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.ch-fact .v{font-size:22px;font-weight:800;letter-spacing:-.3px;margin-top:4px;white-space:nowrap}
.ch-fact .s{font-size:12px;font-weight:700;color:var(--ink2);margin-top:2px}
.ch-fact.bad{background:var(--ret-bg)} .ch-fact.bad .v,.ch-fact.bad .l,.ch-fact.bad .s{color:var(--ret-ink)}
.ch-fact.warn{background:var(--par-bg)} .ch-fact.warn .v,.ch-fact.warn .l,.ch-fact.warn .s{color:var(--par-ink)}
.ch-fact.ok{background:var(--pay-bg)} .ch-fact.ok .v,.ch-fact.ok .l,.ch-fact.ok .s{color:var(--pay-ink)}
.ch-frise{padding:4px 0 12px;border-bottom:1px solid var(--line2);margin-bottom:8px}
.ch-frise-t{font-size:12px;font-weight:800;color:var(--ink2);margin-bottom:8px}
.ch-frise-b{display:grid;grid-template-columns:repeat(26,1fr);gap:4px}
.chw{display:block;aspect-ratio:1;border-radius:50%;border:2px solid #D5D3CB;background:#fff}
.chw.paye{background:#22C55E;border-color:#22C55E} .chw.partiel{background:#F59E0B;border-color:#F59E0B}
.chw.retard{background:#DC2626;border-color:#DC2626} .chw.arret{background:#A8A6A0;border-color:#A8A6A0}
.chw.cur{box-shadow:0 0 0 3px var(--y)}
.ch-frise-l{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--ink2)}
.ch-frise-l span{display:inline-flex;align-items:center;gap:5px}
.ch-frise-l i.chw{width:11px;height:11px;aspect-ratio:auto;flex:none}
@media (max-width:899px){
  .ch-facts{grid-template-columns:1fr 1fr;gap:8px}
  .ch-frise-b{grid-template-columns:repeat(13,1fr)}
}