/* ==================================================================
   Esthétique Wibook / WiRent appliquée à l'espace technicien (mobile).
   Chargée après le style de la page : elle en reprend les classes et
   remplace les jetons. Fond greige, panneau blanc à large rayon,
   pastilles noires, cartes blanches cernées d'un filet.
   ================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --page:#F2F1EF; --canvas:#EAE8E4; --blanc:#FFFFFF; --encre:#111214; --encre-doux:#6C6A65; --filet:#D6D3CD;
  --terre:#B4543A; --terre-fond:#F6E3DC; --sauge:#5F7A55; --sauge-fond:#EDF1EA; --ambre:#9A6B1E; --ambre-fond:#F7EBD3;
  --ios:cubic-bezier(.32,.72,0,1);

  --bg:var(--canvas); --bg2:var(--page); --card:var(--blanc); --text:var(--encre); --sub:var(--encre-doux); --brd:var(--filet);
  --pri:var(--encre); --pri2:#2A2C31; --pri-glow:rgba(17,18,20,.08);
  --navy:var(--encre); --navy2:#2A2C31;
  --red:var(--terre); --red-bg:var(--terre-fond);
  --amb:var(--ambre); --amb-bg:var(--ambre-fond);
  --grn:var(--sauge); --grn-bg:var(--sauge-fond);
  --radius:22px; --shadow:none;
  --glass:var(--blanc); --glass-brd:var(--filet);
  --sheet-bg:var(--blanc); --inp-bg:var(--blanc);
}
[data-theme="dark"]{
  --page:#101114; --canvas:#17181B; --blanc:#1E2024; --encre:#F4F3F1; --encre-doux:#9B9892; --filet:#33353A;
  --terre-fond:rgba(180,84,58,.18); --sauge-fond:rgba(95,122,85,.2); --ambre-fond:rgba(154,107,30,.2);
  --bg:var(--canvas); --bg2:var(--page); --card:var(--blanc); --text:var(--encre); --sub:var(--encre-doux); --brd:var(--filet);
  --pri:var(--encre); --pri2:#D8D6D1; --pri-glow:rgba(244,243,241,.1); --navy:#2A2C31; --navy2:#33353A;
  --red:#E07B62; --amb:#D9A54A; --grn:#8FB283;
  --glass:var(--blanc); --glass-brd:var(--filet); --sheet-bg:var(--blanc); --inp-bg:var(--blanc);
}

body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;background:var(--canvas);color:var(--encre);letter-spacing:-.01em}
.app{background:var(--canvas)}

/* ---- Connexion et badge : page greige, carte blanche posée ---- */
.login,.cover{background:var(--canvas)}
.lbox{background:var(--blanc);backdrop-filter:none;border:1.5px solid var(--filet);border-radius:30px;padding:36px 28px;box-shadow:none}
[data-theme="dark"] .lbox{background:var(--blanc);border-color:var(--filet)}
.lbox h1{background:none;-webkit-text-fill-color:currentColor;color:var(--encre);font-size:26px;font-weight:700;letter-spacing:-.03em}
.lbox .ls{font-size:14px;color:var(--encre-doux)}
.badge-card{border-radius:30px;border-top:0;border:1.5px solid var(--filet);box-shadow:none}
.badge-chip{background:var(--terre-fond);color:var(--terre)}
.badge-tag{color:var(--encre-doux);border-top-color:var(--filet)}
.fg label,.fgrp label{font-size:12px;letter-spacing:.09em;color:var(--encre-doux)}
.inp,.fgrp select,.fgrp textarea{border:1.5px solid var(--filet);border-radius:18px;background:var(--blanc);color:var(--encre);font-size:16px;font-weight:500;padding:14px 16px;font-family:inherit}
.inp::placeholder{color:var(--encre-doux)}
.inp:focus,.fgrp select:focus,.fgrp textarea:focus{border-color:var(--encre);box-shadow:0 0 0 3px rgba(17,18,20,.08)}
.btn{border-radius:999px;font-size:16px;font-weight:600;letter-spacing:-.02em;padding:15px 20px;font-family:inherit}
.bp{background:var(--encre);color:var(--canvas);box-shadow:none}
.bo{background:var(--blanc);color:var(--encre);border:1.5px solid var(--filet)}
.lerr{border-radius:14px;backdrop-filter:none;font-size:13px}

/* ---- En-tête : posé sur le greige, texte encre, sans marine ---- */
.hdr{background:var(--canvas);background-image:none;border-radius:0;padding:16px 20px 6px;box-shadow:none}
.hdr h1{color:var(--encre);font-size:23px;font-weight:700;letter-spacing:-.03em}
.hdr-logo{height:36px}
.pill{background:var(--blanc);border:1.5px solid var(--filet);color:var(--encre);border-radius:999px;padding:7px 14px;font-size:13px}
.ico-btn{background:var(--blanc);border:1.5px solid var(--filet);width:44px;height:44px;border-radius:50%;color:var(--encre)}
.hdr-av{border:2px solid var(--blanc);box-shadow:0 0 0 1.5px var(--filet);width:44px;height:44px}
.hdr-av-fb{background:#E1DFDA}
.hdr-av-fb svg{stroke:var(--encre)}
.hdr-menu{border:1.5px solid var(--filet);border-radius:22px;box-shadow:0 18px 40px -20px rgba(17,18,20,.35);padding:8px;background:var(--blanc)}
.hdr-menu button{border-radius:14px;font-size:15px}
.hdr-menu button:hover{background:var(--canvas)}
.hdr-menu button svg{stroke:var(--encre)}
.hdr-menu button.danger{color:var(--terre)} .hdr-menu button.danger svg{stroke:var(--terre)}

/* Barre de recherche : champ blanc en pilule, bouton filtre noir. */
.tbar{margin-top:14px;gap:10px}
.srch input{height:54px;border:1.5px solid var(--filet);border-radius:999px;background:var(--blanc);color:var(--encre);font-size:16px;font-weight:500;padding-left:46px;box-shadow:none;font-family:inherit}
.srch input::placeholder{color:var(--encre-doux);font-weight:400}
.srch input:focus{border-color:var(--encre);box-shadow:0 0 0 3px rgba(17,18,20,.08)}
.srch svg{left:18px;stroke:var(--encre-doux)}
.fbtn{height:54px;background:var(--encre);color:var(--canvas);border-radius:999px;padding:0 22px;font-size:16px;font-weight:600;letter-spacing:-.02em;box-shadow:none;font-family:inherit}
.fbtn .dot{background:var(--canvas);color:var(--encre)}

/* Statistiques : trois pastilles blanches cernées. */
.stats{padding:14px 20px 4px;gap:8px}
.st{background:var(--blanc);backdrop-filter:none;border:1.5px solid var(--filet);border-radius:18px;padding:12px}
.st .n{font-size:22px;font-weight:700;letter-spacing:-.03em}
.st .l{font-size:11px;letter-spacing:.09em}

/* Ruban de la semaine. */
.week-strip{padding:10px 20px 6px}
.wk-card{background:var(--blanc);border:1.5px solid var(--filet);border-radius:18px;width:62px}
.wk-card .wk-badge{background:var(--canvas);color:var(--encre-doux)}
.wk-card.has .wk-badge{background:var(--encre);color:var(--canvas)}
.wk-card.today{border-color:var(--encre-doux)}
.wk-card.today .wk-day{color:var(--encre)}
.wk-card.sel{background:var(--encre);border-color:var(--encre);box-shadow:none}
.wk-card.sel .wk-badge{background:rgba(255,255,255,.2)}

/* ---- Liste : un panneau blanc qui remonte, cartes cernées d'un filet ---- */
.list{background:var(--blanc);border-radius:30px 30px 0 0;padding:22px 16px 46px;min-height:calc(100vh - 150px);margin-top:10px}
.tk{background:var(--blanc);border:1.5px solid var(--filet);border-radius:22px;margin-bottom:12px;box-shadow:none}
.tk:active{transform:scale(.985)}
.tk-body{padding:16px 18px;gap:10px}
.tk-name{font-size:17px;font-weight:700;letter-spacing:-.02em}
.tk-num{font-size:12.5px;color:var(--encre-doux)}
.tk-hour{background:var(--encre);color:var(--canvas);border-radius:999px;padding:7px 12px;box-shadow:none}
.tk-hour svg{stroke:var(--canvas)}
.tk-tech{background:var(--canvas);color:var(--encre);border-radius:999px;padding:4px 10px}
.tk-tech svg{stroke:var(--encre)}
.tk-tel{background:var(--sauge-fond);color:var(--sauge);border-radius:999px;padding:7px 13px}
.tk-metier{color:var(--encre-doux)}
.tk-exp-sm{background:var(--canvas);color:var(--encre-doux);border-radius:999px;padding:3px 9px}
.tk-exp-sm.tr{background:var(--terre-fond);color:var(--terre)}
.tk-exp-sm.tj{background:var(--ambre-fond);color:var(--ambre)}
.tk-exp-sm.tv{background:var(--sauge-fond);color:var(--sauge)}
.tk-line svg{stroke:var(--encre-doux)}
.tk-sep .ln{border-top:1.5px dashed var(--filet)}
.tk-sep .dot{background:var(--filet)}
.tk-sep .ic,.tk-sep .ic svg{color:var(--encre-doux);stroke:var(--encre-doux)}
.tag{border-radius:999px;padding:3px 9px;font-size:10.5px}
.tk.tk-fr{background:var(--terre-fond);border-color:var(--terre);box-shadow:none}
.tk.tk-fr .tk-name{color:var(--terre)}
.tk-fr-badge{background:var(--terre)}
.tk-day{background:var(--encre);color:var(--canvas);border-radius:22px;box-shadow:none}
.tk-day .ico{background:rgba(255,255,255,.14)}
.tk-day .n{background:var(--canvas);color:var(--encre);border-radius:999px}
.tk-gal{border-radius:999px}
.mt{color:var(--encre-doux)}

/* ---- Feuilles glissantes : blanches, rayon 30, poignée discrète ---- */
.sheet{background:var(--blanc);border-radius:30px 30px 0 0;box-shadow:none}
.sheet.on{box-shadow:0 -20px 60px -30px rgba(17,18,20,.35)}
.s-handle{background:var(--filet);width:44px;height:5px;border-radius:999px}
.s-hdr h2{font-size:23px;font-weight:700;letter-spacing:-.03em}
.s-hdr .sub{color:var(--encre-doux);font-size:14px}
.ov{background:rgba(17,18,20,.42)}
.qd-hero{border-bottom-color:var(--filet)}
.qd-hero .qd-av{background:var(--terre-fond);color:var(--terre);border-radius:16px}
.qd-hst{background:var(--canvas);border:0;border-radius:999px;color:var(--encre-doux)}
.qd-actions .qd-act{background:var(--blanc);border:1.5px solid var(--filet);border-radius:18px;color:var(--encre);font-family:inherit}
.qd-actions .qd-act.pri{background:var(--encre);color:var(--canvas);border-color:var(--encre)}
.qd-sec h3,.ds h3,.doc-form-section-title{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-doux)}
.qd-field,.df{background:var(--blanc);border:1.5px solid var(--filet);border-radius:18px}
.qd-field svg,.df-ic svg{stroke:var(--encre-doux)}
.df-ic{background:var(--canvas);border-radius:13px}
.df.fr-red{background:var(--terre-fond);border-color:var(--terre)}
.df.fr-red .df-ic{background:rgba(180,84,58,.15)}
.di .dl{color:var(--encre-doux);font-size:11.5px;letter-spacing:.06em}
.dg{gap:10px}
.di{background:var(--canvas);border-radius:16px;padding:12px 14px}

/* Onglets d'une fiche : pastilles, la choisie en noir. */
.tabs{gap:8px;background:transparent;border:0;padding:0 0 12px}
.tab{height:44px;border-radius:999px;border:1.5px solid var(--filet);background:transparent;color:var(--encre);font-weight:600;font-size:14.5px;letter-spacing:-.01em;font-family:inherit}
.tab.on,[data-theme="dark"] .tab.on{background:var(--encre);color:var(--canvas);border-color:var(--encre);box-shadow:none}
.dv-tabs{gap:8px}
.dv-tab{border-radius:999px;border:1.5px solid var(--filet);background:transparent;color:var(--encre);font-family:inherit}
.dv-tab.on{background:var(--encre);color:var(--canvas);border-color:var(--encre)}
.dv-tab.on .dv-cnt{background:rgba(255,255,255,.2);color:var(--canvas)}

/* Boutons secondaires, dictée, documents, matériel. */
.dv-btn,.mt-add button,.pgr button,.sc-btn,.upload-zone,.sign-actions .btn,.fbar .btn{border-radius:999px;font-family:inherit}
.dv-btn{background:var(--blanc);border:1.5px solid var(--filet);color:var(--encre);font-weight:600}
.dv-btn.pri{background:var(--encre);color:var(--canvas);border-color:var(--encre)}
.dv-mic,.qd-mic{background:var(--encre);color:var(--canvas);border-radius:999px;box-shadow:none}
.dv-mic.rec{background:var(--terre)}
.dv-hint,.dv-status,.sc-hint{color:var(--encre-doux)}
.dv-ta,.dv-search input,.mt-add input,.upload-form textarea{border:1.5px solid var(--filet);border-radius:18px;background:var(--blanc);color:var(--encre);font-family:inherit;font-size:15px}
.dv-line,.mt-line,.mt-dos,.doc-card,.mc,.mt-grp{background:var(--blanc);border:1.5px solid var(--filet);border-radius:18px;box-shadow:none}
.dv-line.hc{background:var(--canvas)}
.dv-code{background:var(--canvas);border-radius:999px;color:var(--encre)}
.dv-tot{background:var(--encre);color:var(--canvas);border-radius:18px}
.mt-chip{border-radius:999px;border:1.5px solid var(--filet);background:transparent;color:var(--encre);font-family:inherit}
.mt-chip.on.acheter{background:var(--ambre-fond);color:var(--ambre);border-color:transparent}
.mt-chip.on.commande{background:#DCE6F2;color:#2D4E7E;border-color:transparent}
.mt-chip.on.achete{background:var(--terre-fond);color:var(--terre);border-color:transparent}
.mt-chip.on.camion{background:var(--canvas);color:var(--encre);border-color:transparent}
.mt-chip.on.charge{background:var(--sauge-fond);color:var(--sauge);border-color:transparent}
.doc-ico,.mc-ic{background:var(--canvas);color:var(--encre);border-radius:14px}
.doc-ico svg,.mc-ic svg{stroke:var(--encre)}
.upload-zone{border:1.5px dashed var(--filet);border-radius:22px;background:var(--canvas)}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--encre);background:var(--blanc)}
.upload-msg.ok,.sign-msg.ok{background:var(--sauge-fond);color:var(--sauge);border-radius:14px}
.upload-msg.err,.sign-msg.err{background:var(--terre-fond);color:var(--terre);border-radius:14px}
.sign-canvas-wrap{border:1.5px solid var(--filet);border-radius:22px;background:var(--blanc)}
.gal-cell{border-radius:16px}
.gal-cell .gal-tag{border-radius:999px;background:rgba(17,18,20,.7)}
.doc-cb-row,.doc-radio-row{border:1.5px solid var(--filet);border-radius:16px;background:var(--blanc)}
.doc-cb-row:has(input:checked),.doc-radio-row:has(input:checked){border-color:var(--encre);background:var(--canvas)}
.doc-form-section{border:1.5px solid var(--filet);border-radius:22px;background:var(--blanc)}
.doc-form-section-title::before{background:var(--encre)}
.pgr button{background:var(--blanc);border:1.5px solid var(--filet);color:var(--encre)}
.pgr span{color:var(--encre-doux)}
.add-btn{background:var(--encre);color:var(--canvas);border-radius:50%;box-shadow:0 12px 24px -12px rgba(17,18,20,.5)}
.theme-btn{background:var(--blanc);border:1.5px solid var(--filet);color:var(--encre);border-radius:50%}
.spin{border-color:var(--filet);border-top-color:var(--encre)}
.ld p{color:var(--encre-doux)}
.sc-toast{background:var(--encre);color:var(--canvas);border-radius:999px}
.sc-save{background:var(--encre);color:var(--canvas);border-radius:999px}
.badge-hint{color:var(--encre-doux)}

/* Sur tablette et ordinateur : la colonne s'élargit, comme l'espace abonné. */
@media (min-width:768px){
  .hdr{padding:22px 34px 8px}
  .stats,.week-strip{padding-left:34px;padding-right:34px}
  .list{border-radius:34px 34px 0 0;padding:32px 34px 40px}
  .sheet{max-width:640px;left:50%;transform:translateX(-50%) translateY(100%);border-radius:30px}
  .sheet.on{transform:translateX(-50%) translateY(0)}
}

/* ---- Teintes WiTheram : des tuiles colorées dans les feuilles de détail ----
   Chaque champ reçoit une teinte selon son rang, stable d'une fiche à
   l'autre : l'œil retrouve l'adresse à sa couleur avant de lire son libellé. */
:root{
  --t1:#A9CEC4;--t1e:#175449; --t2:#E9B565;--t2e:#4B3512; --t3:#D59BA0;--t3e:#6A2129;
  --t4:#C4BBD9;--t4e:#3E2F5E; --t5:#C9CE94;--t5e:#4A5220; --t6:#F0A868;--t6e:#6A3A10; --t7:#DCEDE7;--t7e:#26332F;
}
.qd-hero .qd-av{background:var(--t2);color:var(--t2e)}
.qd-hst{background:var(--t7);color:var(--t7e)} .qd-hst b{color:inherit}
.qd-hst:nth-child(2){background:var(--t1);color:var(--t1e)}
.qd-hst:nth-child(3){background:var(--t4);color:var(--t4e)}
.qd-hst:nth-child(4){background:var(--t5);color:var(--t5e)}
.qd-actions .qd-act{background:var(--t7);color:var(--t7e);border:0}
.qd-actions .qd-act:nth-child(2){background:var(--t2);color:var(--t2e)}
.qd-actions .qd-act:nth-child(3){background:var(--t4);color:var(--t4e)}
.qd-actions .qd-act:nth-child(4){background:var(--t3);color:var(--t3e)}
.qd-actions .qd-act.pri{background:var(--encre);color:var(--canvas)}
.qd-field,.df{border:0}
.qd-field:nth-of-type(7n+1),.df:nth-of-type(7n+1){background:var(--t1);color:var(--t1e)}
.qd-field:nth-of-type(7n+2),.df:nth-of-type(7n+2){background:var(--t2);color:var(--t2e)}
.qd-field:nth-of-type(7n+3),.df:nth-of-type(7n+3){background:var(--t4);color:var(--t4e)}
.qd-field:nth-of-type(7n+4),.df:nth-of-type(7n+4){background:var(--t5);color:var(--t5e)}
.qd-field:nth-of-type(7n+5),.df:nth-of-type(7n+5){background:var(--t7);color:var(--t7e)}
.qd-field:nth-of-type(7n+6),.df:nth-of-type(7n+6){background:var(--t3);color:var(--t3e)}
.qd-field:nth-of-type(7n+7),.df:nth-of-type(7n+7){background:var(--t6);color:var(--t6e)}
.qd-field svg,.df-ic svg{stroke:currentColor}
.qd-field .qf-l,.df-l{color:inherit;opacity:.72}
.qd-field .qf-v,.df-v,.df-v a{color:inherit}
.df-ic{background:rgba(255,255,255,.55)}
.df.fr-red{background:var(--terre)!important;color:#fff!important;border:0}
.df.fr-red .df-ic{background:rgba(255,255,255,.2)} .df.fr-red .df-ic svg{stroke:#fff}
.df.fr-red .df-l,.df.fr-red .df-v{color:#fff}
.df-empty{color:inherit;opacity:.5}
.di{background:var(--t7);color:var(--t7e)}
.di:nth-child(4n+2){background:var(--t1);color:var(--t1e)}
.di:nth-child(4n+3){background:var(--t2);color:var(--t2e)}
.di:nth-child(4n+4){background:var(--t4);color:var(--t4e)}
.di .dl,.di .dv{color:inherit} .di .dl{opacity:.72}
.doc-ico{background:var(--t4);color:var(--t4e)} .doc-ico svg{stroke:var(--t4e)}
.doc-card:nth-child(even) .doc-ico{background:var(--t1);color:var(--t1e)} .doc-card:nth-child(even) .doc-ico svg{stroke:var(--t1e)}
.mc-ic{background:var(--t2);color:var(--t2e)} .mc-ic svg{stroke:var(--t2e)}
.mc:nth-child(2) .mc-ic{background:var(--t1)} .mc:nth-child(2) .mc-ic svg{stroke:var(--t1e)}
.mc:nth-child(3) .mc-ic{background:var(--t4)} .mc:nth-child(3) .mc-ic svg{stroke:var(--t4e)}
.mc:nth-child(4) .mc-ic{background:var(--t3)} .mc:nth-child(4) .mc-ic svg{stroke:var(--t3e)}
.mc:nth-child(5) .mc-ic{background:var(--t5)} .mc:nth-child(5) .mc-ic svg{stroke:var(--t5e)}
.qd-mic,.dv-mic{background:var(--t1e);color:#fff}
.dv-tot{background:var(--t2);color:var(--t2e)}
.tk-day{background:var(--t1e)}
/* Compteurs de la page d'accueil, en tuiles teintées comme le tableau de bord WiTheram. */
.st{border:0;background:var(--t7);color:var(--t7e)} .st .l{color:inherit;opacity:.72}
.st.sr{background:var(--t3);color:var(--t3e)} .st.sr .n{color:inherit}
.st.sj{background:var(--t2);color:var(--t2e)} .st.sj .n{color:inherit}
.st.sv{background:var(--t1);color:var(--t1e)} .st.sv .n{color:inherit}
.tk-tel{background:var(--t1);color:var(--t1e)}
.tk-hour{background:var(--t1e)}
.qd-tel{background:var(--t7);color:var(--t7e);border:0;border-radius:18px}
.qd-tel:nth-child(2){background:var(--t5);color:var(--t5e)}
.qd-tel .qf-l{color:inherit;opacity:.72} .qd-tel .qf-v{color:inherit}
.qd-mic{border-radius:22px}
/* ---- Retenue dans la feuille du dossier : les champs redeviennent neutres.
   La couleur reste aux badges, à l'avatar, à la franchise et à la dictée. */
.qd-field,.df,.qd-field:nth-of-type(n),.df:nth-of-type(n){background:var(--canvas);color:var(--encre);border:0}
.qd-field svg,.df-ic svg{stroke:var(--t1e)}
.df-ic{background:rgba(23,84,73,.10)}
.qd-field .qf-l,.df-l{color:var(--encre-doux);opacity:1}
.qd-field .qf-v,.df-v,.df-v a{color:var(--encre)}
.qd-tel,.qd-tel:nth-child(n){background:var(--canvas);color:var(--encre)}
.qd-tel .qf-l{color:var(--encre-doux);opacity:1} .qd-tel .qf-v{color:var(--encre)}
.di,.di:nth-child(n){background:var(--canvas);color:var(--encre)}
.di .dl{color:var(--encre-doux);opacity:1} .di .dv{color:var(--encre)}
.qd-actions .qd-act,.qd-actions .qd-act:nth-child(n){background:var(--canvas);color:var(--encre)}
.qd-actions .qd-act.pri{background:var(--encre);color:var(--canvas)}
.doc-ico,.doc-card:nth-child(even) .doc-ico{background:rgba(23,84,73,.10);color:var(--t1e)} .doc-ico svg,.doc-card:nth-child(even) .doc-ico svg{stroke:var(--t1e)}
.mc-ic,.mc:nth-child(n) .mc-ic{background:rgba(23,84,73,.10)} .mc-ic svg,.mc:nth-child(n) .mc-ic svg{stroke:var(--t1e)}
.df.fr-red{background:var(--terre)!important;color:#fff!important}