/* =====================================================================================================
   Portail Green — interface TÉLÉPHONE / TABLETTE. Chargée par layout.php avec media="(max-width:900px)" :
   un ordinateur ne lit JAMAIS ce fichier. Demande Stéphane 22/09/2026 : « une interface de pro, pratique et
   belle, centrée, pas des boutons d'un côté et de l'autre », pour toutes les catégories (iPhone 17 Pro = 402 × 874).
   1) Coque (≤900 px) : barre du haut ☰ · logo · ＋, tiroir de menu, feuille « Créer », onglets en bas.
   2) Contenu téléphone (≤700 px) : titres centrés, boutons en grilles régulières, tableaux en fiches,
      formulaires pleine largeur, zones tactiles de 44 px mini, champs à 16 px (sinon Safari zoome).
   ===================================================================================================== */
:root{--m-bar:#2e3338;--m-bg:#f2f3f5;--m-line:#e5e8eb;--m-text:#1f2733;--m-muted:#6b7480;--m-r:14px;--m-tab:58px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--m-bg);-webkit-tap-highlight-color:rgba(44,167,55,.14)}
body.has-mtabs{padding-bottom:calc(var(--m-tab) + env(safe-area-inset-bottom))}
svg.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
a[href^="tel:"]{white-space:nowrap}

/* ---------- 1. Barre du haut : ☰ à gauche, logo au centre, ＋ à droite ---------- */
header.top{position:sticky;top:0;z-index:900;height:auto;min-height:56px;padding:env(safe-area-inset-top) 6px 0;gap:0;flex-wrap:nowrap;justify-content:space-between}
header.top:not(:has(.mnav-btn)){justify-content:center}
header.top nav{display:none}
header.top .logo-link{display:flex;align-items:center;justify-content:center;padding:6px 10px}
header.top img.logo{height:26px}
.mnav-btn,.mplus-btn{display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;width:46px;height:46px;padding:0;border:0;border-radius:12px;background:none;color:#fff;cursor:pointer}
.mnav-btn svg.ico,.mplus-btn svg.ico{width:26px;height:26px}
.mnav-btn:active,.mplus-btn:active{background:rgba(255,255,255,.15)}
.m-spacer{display:block;width:46px;flex-shrink:0}
.mb{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e02020;color:#fff;font:700 11px/18px -apple-system,system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--m-bar)}
.mb[hidden]{display:none}

/* ---------- Tiroir de menu (même contenu que le menu latéral de l'ordinateur) ---------- */
.side,.mdrawer{display:block;position:fixed;top:0;bottom:0;left:0;z-index:1001;width:min(86vw,330px);padding:0;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transform:translateX(-100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
body.mnav-open .side,body.mnav-open .mdrawer{transform:none;visibility:visible;transition:transform .25s ease;box-shadow:12px 0 40px rgba(0,0,0,.28)}
body.mnav-open,body.mplus-open{overflow:hidden}
.shell{display:block}
.mnav-head{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:1;padding:calc(12px + env(safe-area-inset-top)) 12px 12px 18px;background:var(--m-bar);color:#fff}
.mnav-head img{height:24px}
.mnav-head span{flex:1;min-width:0;text-align:right;font-size:14px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnav-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.mnav-close svg.ico{width:20px;height:20px}
.side nav,.mdrawer nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0;padding:10px 10px calc(28px + env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none;background:none}
.side nav a,.mdrawer nav a{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:12px;background:none;font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--m-text);opacity:1}
.side nav a:hover,.mdrawer nav a:hover{text-decoration:none;background:#f1f5f1}
.side nav a.active,.mdrawer nav a.active,.mdrawer nav a.cta.active{background:var(--green);color:#fff;box-shadow:none}
.mdrawer nav a.cta{background:#e8f5e9;color:var(--green-dark);font-weight:600}
.side nav a>span[id]{margin-left:auto}
.side nav .mnav-only{display:flex}
.side .sep{display:block;margin:8px 10px;border-top:1px solid var(--m-line)}
.side .sechead{width:auto;padding:12px 14px 4px;font-size:12px;letter-spacing:.07em}
.mnav-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(15,20,25,.45)}
body.mnav-open .mnav-backdrop,body.mplus-open .mnav-backdrop{display:block}

/* ---------- Feuille « Créer » (bouton ＋) ---------- */
.mplus-sheet{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:1002;padding:8px;border-radius:20px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.35)}
body.mplus-open .mplus-sheet{display:block}
.mplus-title{padding:8px 0 6px;text-align:center;font-size:13px;font-weight:600;color:var(--m-muted)}
.mplus-sheet a{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 16px;border-radius:14px;font-size:17px;font-weight:500;color:var(--m-text)}
.mplus-sheet a:hover{text-decoration:none}
.mplus-sheet a:active{background:#f1f5f1}
.mplus-sheet a svg.ico{color:var(--green)}
.mplus-cancel{display:block;width:100%;min-height:54px;margin-top:6px;border:0;border-radius:14px;background:#f2f3f5;font:600 17px -apple-system,system-ui,sans-serif;color:var(--m-text);cursor:pointer}

/* ---------- Onglets en bas (masqués pendant la saisie : le clavier de l'iPhone les ferait sauter) ---------- */
.mtabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:950;padding:3px 2px env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--m-line)}
body.typing .mtabs,body.mnav-open .mtabs,body.mplus-open .mtabs{display:none}
body.typing.has-mtabs{padding-bottom:0}
.mtab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;height:52px;color:#7a828c;font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.mtab:hover{text-decoration:none}
.mtab.active{color:var(--green-dark)}
.mtab.active svg.ico{stroke:var(--green)}
.mtab .mb{top:0;right:auto;left:calc(50% + 4px);box-shadow:0 0 0 2px #fff}
.mtab.cta svg.ico{width:34px;height:34px;padding:6px;margin-top:-6px;border-radius:50%;background:var(--green);stroke:#fff}

/* ---------- Tableaux trop larges (tablette) : défilement dans leur carte ---------- */
.tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wrap{overflow-wrap:break-word}
.wrap img{max-width:100%}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}

/* =====================================================================================================
   2. CONTENU — TÉLÉPHONE (≤700 px)
   ===================================================================================================== */
@media(max-width:700px){
  .wrap,.shell .wrap{margin:14px auto 10px;padding:0 12px}
  footer{padding:18px 0 26px}
  h1{font-size:24px;line-height:1.2;margin:2px 0 6px;text-align:center}
  h1[style*="display:flex"]{justify-content:center;column-gap:10px!important;row-gap:2px!important}
  h2{font-size:18px;line-height:1.3;margin:20px 0 10px}
  .card h2,.card h3{text-align:center}
  .sub{margin:0 0 16px;font-size:14px;text-align:center}
  .card{padding:16px;margin-bottom:14px;border-radius:var(--m-r);border-color:var(--m-line);box-shadow:0 1px 2px rgba(16,24,40,.05)}
  .flash,.notice{border-radius:12px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:14px 8px;border-radius:var(--m-r)}
  .stat .num{font-size:26px}
  .row2{grid-template-columns:minmax(0,1fr)!important}
  th,td{padding:8px}

  /* Boutons : 44 px mini, texte centré, coins arrondis identiques partout */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 16px;border-radius:12px;font-size:15px;line-height:1.2;text-align:center;vertical-align:middle}
  .btn.sec{border-color:#d3d8de}

  /* Titre de page + boutons (motif « h1 à gauche, boutons poussés à droite ») → titre centré puis boutons en grille
     régulière ; l'action principale (bouton vert) passe en premier, en pleine largeur */
  .wrap div[style*="display:flex"]:has(>h1){flex-wrap:wrap!important;justify-content:center;align-items:stretch!important;gap:8px!important;margin-bottom:14px}
  .wrap div[style*="display:flex"]:has(>h1)>h1{flex:1 1 100%;order:-2;margin:0 0 4px!important}
  .wrap div[style*="display:flex"]:has(>h1)>*:not(h1){margin:0!important}
  .wrap div[style*="display:flex"]:has(>h1)>span:empty{display:none}
  .wrap div[style*="display:flex"]:has(>h1)>.btn,.wrap div[style*="display:flex"]:has(>h1)>form{flex:1 1 28%;min-width:0}
  .wrap div[style*="display:flex"]:has(>h1)>.btn:not(.sec),.wrap div[style*="display:flex"]:has(>h1)>form:has(>.btn:not(.sec)),
  .wrap div[style*="display:flex"]:has(>h1)>form:has(input:not([type=hidden]),select){flex-basis:100%;order:-1}
  .wrap div[style*="display:flex"]:has(>h1)>.btn{padding:10px 8px}
  .wrap div[style*="display:flex"]:has(>h1)>form>.btn{width:100%}

  /* Titre de carte + bouton « … → » → centrés, le bouton sous le titre */
  .card div[style*="display:flex"]:has(>h2){flex-direction:column;align-items:center!important;justify-content:center;gap:10px!important;text-align:center}
  .card div[style*="display:flex"]:has(>h2)>*{margin-left:0!important;margin-right:0!important}
  .card div[style*="display:flex"]:has(>h2)>.btn{min-height:38px;padding:6px 16px!important;border-radius:20px}

  /* Lignes de liste en flex (nom, pastilles… puis actions poussées à droite) : tout passe à la ligne proprement,
     les actions forment une rangée centrée en bas de la ligne */
  .card div[style*="display:flex"]{flex-wrap:wrap}
  .card div[style*="display:flex"]>[style*="margin-left:auto"]{margin-left:0!important}
  .card div[style*="display:flex"]>span[style*="margin-left:auto"]:has(form,.btn){flex-basis:100%;justify-content:center;gap:8px!important}
  .card div[style*="display:flex"]>span[style*="margin-left:auto"]:has(form,.btn)>form{flex:1}
  .card div[style*="display:flex"]>span[style*="margin-left:auto"]:has(form,.btn)>form>.btn{width:100%}

  /* Formulaires : pleine largeur, champs de 48 px, bouton d'envoi pleine largeur */
  label{margin:14px 0 6px;font-size:14px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),select,textarea{min-height:48px;border-radius:12px;border-color:#d3d8de}
  input[type=file]{font-size:15px!important;padding:8px}
  textarea{min-height:110px}
  input[type=checkbox],input[type=radio]{width:22px!important;height:22px;accent-color:var(--green);vertical-align:middle}
  form>.mt:has(>.btn),form>div.mt:has(>button){display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  form>.mt>.btn,form>div.mt>button.btn{width:100%;min-height:50px;font-size:16px}
  form:not([style*="display:inline"]):not([style*="display:flex"]):not([style*="inline-flex"])>button.btn:only-of-type{width:100%;min-height:50px}
  label:has(>input[type=checkbox]):has(>b){display:block!important}
  label:has(>input[type=checkbox]):has(>b)>input{margin:0 8px 0 0}
  .wrap p>.btn:only-child{display:flex;width:100%}
  select[style*="width:auto"]{width:100%!important}
  .grid>.stat:last-child:nth-child(odd){grid-column:1/-1}

  /* Tableaux → fiches (script de layout.php : classe mstack + data-label pris des en-têtes ; mflow sans en-tête) */
  table.mstack,table.mstack>tbody,table.mstack>tbody>tr,table.mstack>tr,table.mstack td{display:block;width:auto}
  table.mstack tr.mhead{display:none}
  table.mstack>tbody>tr,table.mstack>tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:14px 2px;border-bottom:1px solid var(--m-line)}
  table.mstack>tbody>tr:last-child,table.mstack>tr:last-child{border-bottom:0}
  table.mstack td{display:block;min-width:0;padding:0;border:0;text-align:left!important;font-size:15px;white-space:normal!important;overflow-wrap:anywhere}
  table.mstack td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:11px;font-weight:700;color:var(--m-muted);text-transform:uppercase;letter-spacing:.04em;line-height:1.3;overflow-wrap:normal}
  table.mstack td[data-label=""]::before{display:none}
  table.mstack td:first-child,table.mstack td.mwide,table.mstack td[colspan]{grid-column:1/-1}
  table.mstack td:first-child{font-size:16px;font-weight:600}
  table.mstack td:first-child::before{display:none}
  table.mstack td:has(.btn){grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  table.mstack td:has(.btn)::before{flex-basis:100%;margin:0}
  table.mstack td:has(.btn)>.btn,table.mstack td:has(.btn)>form{flex:1 1 auto;min-width:0;margin:0!important}
  table.mstack td:has(.btn)>form>.btn{width:100%}
  table.mstack td:has(.btn)>span:has(.btn),table.mstack td:has(.btn)>div:has(.btn){display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px}
  table.mstack td:has(.btn)>span:has(.btn)>*,table.mstack td:has(.btn)>div:has(.btn)>*{flex:1 1 auto;margin:0!important}
  table.mstack td:has(.btn) form>.btn{width:100%}
  table.mstack td:empty{display:none}
  table.mstack tr:hover td{background:none}
  table.mstack td input,table.mstack td select{width:100%}
  table.mflow,table.mflow>tbody{display:block;width:auto}
  table.mflow>tbody>tr,table.mflow>tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--m-line)}
  table.mflow>tbody>tr:last-child,table.mflow>tr:last-child{border-bottom:0}
  table.mflow td,table.mflow th{display:block;padding:0;border:0}
  table.mflow tr:hover td{background:none}
  td .pill{white-space:nowrap}
  table.mflow td:nth-child(2):not(:has(.pill)){flex:1 1 calc(100% - 64px)}

  /* Accueil : bandeau « À rappeler » sur 2 lignes (titre + bouton, puis le détail par nature) */
  .qrband{flex-wrap:wrap!important;justify-content:center;gap:8px 12px!important;padding:14px!important;text-align:center}
  .qrband>h2{flex-basis:100%;text-align:center}
  .qrband>span{order:3;flex-basis:100%;white-space:normal!important;overflow:visible!important;text-align:center}
  .qrband>.btn{margin:0!important;order:4;flex-basis:100%;min-height:44px}

  /* Liste Atelier : une fiche par dossier (n° + date, client, appareil, statut) */
  table.mcards,table.mcards>tbody{display:block}
  table.mcards tr:has(>th){display:none!important}
  table.mcards td{white-space:normal!important}
  table.mcards td:has(>.btn,>form>.btn){display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  table.mcards td:has(>.btn,>form>.btn)>.btn,table.mcards td:has(>.btn,>form>.btn)>form{flex:1 1 0;min-width:0;margin:0!important}
  table.mcards td:has(>.btn,>form>.btn)>form>.btn{width:100%}
  table.mcards>tbody>tr,table.mcards>tr{display:block;padding:12px 2px;border-bottom:1px solid var(--m-line)}
  table.mcards>tbody>tr:last-child{border-bottom:0}
  table.mcards td{display:block;padding:2px 0;border:0}
  table.mcards tr:hover td{background:none}
  table.savlist>tbody>tr,table.savlist>tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
  table.savlist td:nth-child(5){grid-column:2;grid-row:1;color:var(--m-muted);font-size:12px;text-align:right}
  table.savlist td:nth-child(n+2):nth-child(-n+4){grid-column:1/-1}
  table.savlist td:first-child{font-size:16px}
  .savtabs{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -12px 8px!important;padding:2px 12px 8px}
  .savtabs::-webkit-scrollbar{display:none}
  .savtabs>*{flex-shrink:0}
  .savtabs .btn{min-height:36px;padding:6px 14px!important;border-radius:18px;font-size:14px!important}
  .m-par{display:block;margin:0 0 14px;text-align:center;font-size:14px}

  /* Planning RDV : un jour à la fois (puces Lun…Sam) */
  .rdvdays{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:0 0 12px}
  .rdvdays button{min-width:0;padding:8px 2px;border:1px solid var(--m-line);border-radius:12px;background:#fff;color:var(--m-text);font:600 13px/1.2 -apple-system,system-ui,sans-serif;cursor:pointer}
  .rdvdays button small{display:block;margin-top:2px;font-weight:500;font-size:11px;color:var(--m-muted)}
  .rdvdays button.today{border-color:var(--green)}
  .rdvdays button.on{background:var(--green);border-color:var(--green);color:#fff}
  .rdvdays button.on small{color:#e8f5e9}
  #rdvgrid{min-width:0!important}
  #rdvgrid[data-d] tr>:nth-child(n+2){display:none}
  #rdvgrid[data-d="0"] tr>:nth-child(2),#rdvgrid[data-d="1"] tr>:nth-child(3),#rdvgrid[data-d="2"] tr>:nth-child(4),
  #rdvgrid[data-d="3"] tr>:nth-child(5),#rdvgrid[data-d="4"] tr>:nth-child(6),#rdvgrid[data-d="5"] tr>:nth-child(7){display:table-cell}
  #rdvgrid td{padding-top:5px;padding-bottom:5px}
  #rdvgrid td:not(:first-child){font-size:14px!important}
  #rdvgrid tr>:first-child{padding:5px 6px 5px 0;white-space:nowrap}

  /* Fiche atelier : en-tête « nom · fiche · tél · adresse · code… » → une information par ligne */
  .msub{line-height:1.75}
  .msub .dot{display:block;height:0;overflow:hidden}
  .msub a[href^="tel:"]{color:var(--green-dark)!important;font-weight:600}
  .rwho{display:block;margin:3px 0 1px}
  .rmore{display:block;line-height:1.55}
  .rmore .dot0{display:none}
  .rmore .dot{display:block;height:0;overflow:hidden}
  .rmore a[href^="tel:"]{color:var(--green-dark)!important;font-weight:600}
  /* Fiche atelier : barre de documents en grille régulière (2 par ligne, le petit 📧 accolé à sa facture) */
  .mtools{display:flex;flex-wrap:wrap;gap:8px}
  .mtools>a.btn,.mtools>button.btn,.mtools>form{flex:1 1 calc(50% - 4px);margin:0}
  .mtools>form>.btn{width:100%}
  .mtools>form:has(>input[name=which]) .btn::after{content:" Envoyer la facture PEC";font-size:14px}
  .m-lbl{display:inline}
  .mtools>form:has(>input[name=which][value=rep]) .btn::after{content:" Envoyer la facture réparation"}
  /* Onglets de la Vente : une seule bande qui défile au doigt */
  .mchips{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -12px 14px!important;padding:2px 12px 8px}
  .mchips::-webkit-scrollbar{display:none}
  .mchips>*{flex-shrink:0}
  .mchips>span[style*="flex:1"]{display:none}
  .mchips>.btn{min-height:36px;padding:6px 14px!important;border-radius:18px}
  /* Rangées de 2-3 boutons (Ouvrir / Vu, Enregistrer / Ajouter…) : largeurs égales, côte à côte */
  .wrap div[style*="display:flex"]:not(.mchips):not(.savtabs):not(.mtools):not(:has(>h1,>h2)):not(:has(>:not(.btn,form))):not(:has(>:nth-child(4))){flex-wrap:nowrap!important;gap:8px!important}
  .wrap div[style*="display:flex"]:not(.mchips):not(.savtabs):not(.mtools):not(:has(>h1,>h2)):not(:has(>:not(.btn,form))):not(:has(>:nth-child(4)))>*{flex:1 1 0;min-width:0;margin:0!important}
  .wrap div[style*="display:flex"]:not(.mchips):not(.savtabs):not(.mtools):not(:has(>h1,>h2)):not(:has(>:not(.btn,form))):not(:has(>:nth-child(4)))>form>.btn{width:100%}
  /* Rangées de 4 boutons ou plus (onglets de statut, familles…) : pastilles centrées */
  .wrap div[style*="display:flex"]:not(.mchips):not(.savtabs):not(.mtools):not(:has(>h1,>h2)):has(>.btn~.btn~.btn~.btn){justify-content:center}
  .wrap div[style*="display:flex"]:not(.mchips):not(.savtabs):not(.mtools):not(:has(>h1,>h2)):has(>.btn~.btn~.btn~.btn)>.btn{min-height:36px;border-radius:18px}

  /* Utilitaires : version téléphone d'un bloc (m-actions) / masqué sur téléphone (d-only) */
  .d-only{display:none!important}
  .m-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-top:10px}
  .m-actions>.btn,.m-actions>form>.btn{width:100%}
}
/* Frise du parcours atelier, téléphone ET tablette / paysage (≤ 900 px) — 28/10/2026, iPhone 17 Pro portrait : la frise, tassée
   sur la ligne des filtres, passait par-dessus « 🗑 » et « ⏰ Hors délai » et sortait de l'écran. 1re ligne : Tous · Hors délai · 🗑 ;
   2e ligne : la frise seule, qui défile au doigt, chaque étape à sa largeur (rond + compteur + libellé lisibles). */
.savtabs.savtl{flex-wrap:wrap!important;overflow:visible;row-gap:10px}
.savtl>.btn,.savtl>select{order:1}
.savtl>a[href*="st=abandonne"]{order:2}
.savtl>select{order:3}
.savtabs.savtl>.tl-line{order:4;flex:0 0 100%;min-width:0;max-width:100%;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 4px}
.savtl>.tl-line::-webkit-scrollbar{display:none}
.savtl .tl-st{flex:0 0 auto;min-width:74px;padding:2px 6px}
.savtl .tl-st::before{left:0;width:100%}
.savtl .tl-st:first-child::before{display:block;left:50%;width:50%}
.savtl .tl-st:last-child::before{width:50%}
@media(prefers-reduced-motion:reduce){.side,.mdrawer{transition:none!important}}