/* Classes utilitaires (remplacent les styles répétés écrits dans les écrans ; !important = même priorité qu'un style écrit dans l'élément) */
.t-mute12{font-size:12px !important;color:#646A76 !important}
.t-mute125{font-size:12.5px !important;color:#646A76 !important}
.t-mute13{font-size:13px !important;color:#646A76 !important}
.t-mute115{font-size:11.5px !important;color:#646A76 !important}
.t-mute{color:#646A76 !important}
.t-sub13{font-size:13px !important;color:#4B5160 !important}
.t-sub125{font-size:12.5px !important;color:#4B5160 !important}
.t-b135{font-size:13.5px !important;font-weight:600 !important}
.t-b15{font-size:15px !important;font-weight:600 !important}
.t-red{color:#B42318 !important}
.col2{display:flex !important;flex-direction:column !important;gap:2px !important}
.col3{display:flex !important;flex-direction:column !important;gap:3px !important}
.col6{display:flex !important;flex-direction:column !important;gap:6px !important}
.row8{display:flex !important;align-items:center !important;gap:8px !important}
.row-end{display:flex !important;justify-content:flex-end !important;gap:8px !important}
.row-sb{display:flex !important;justify-content:space-between !important;align-items:center !important}
/* Styles de base repris à l'identique du prototype « Atelier » */
*{box-sizing:border-box}
body{margin:0;background:#fff;color:#0F1115;font-family:Inter,system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
a{color:#1D3FAF;text-decoration:none}
a:hover{color:#17338F;text-decoration:underline}
input,textarea,select,button{font-family:inherit;color:inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:#1D3FAF !important;box-shadow:0 0 0 3px rgba(29,63,175,.12)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* Équivalents des style-hover du prototype */
.h-row:hover{background:#F7F8FA !important}
.h-kpi:hover{border-color:#CDD1D8 !important}
.h-blue:hover{background:#17338F !important}
.h-soft:hover{background:#F7F8FA !important}
.h-ink:hover{color:#0F1115 !important}
.h-x:hover{background:#F2F3F5 !important;color:#0F1115 !important}
.h-line:hover{border-color:#E1E3E8 !important}
.nav-item:hover{background:#F2F3F5}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#646A76 50%),linear-gradient(135deg,#646A76 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px !important}
textarea{resize:vertical}
.slot{background:repeating-linear-gradient(135deg,#F3F4F6 0 6px,#ECEEF1 6px 12px);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#9096A1;text-align:center;padding:8px}
.flash{animation:flash 1.3s}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px #D92D20}100%{box-shadow:none}}
.m-only{display:none !important}

/* ---------- Mobile / tablette : le prototype est figé à 1280 px, on l'adapte sans changer le desktop ---------- */
@media (max-width:1023px){
  .m-only{display:flex !important}
  .d-only{display:none !important}
  .shell{min-width:0 !important}
  .mbar{position:sticky;top:0;z-index:15;min-height:64px;padding-top:env(safe-area-inset-top) !important;background:#FAFAFB;border-bottom:1px solid #E7E8EB;display:flex;align-items:center;gap:10px;padding:0 12px}
  .side{transform:translateX(-100%);transition:transform .2s;width:272px !important;z-index:40 !important;box-shadow:12px 0 32px rgba(15,17,21,.12)}
  body.nav-open .side{transform:none}
  .side{padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;height:100dvh}   /* iPhone : le bas du menu jamais caché sous la barre d'accueil (09/10/2026) */
  .side-mask{position:fixed;inset:0;background:rgba(15,17,21,.35);z-index:39;display:none}
  body.nav-open .side-mask{display:block}
  .main{margin-left:0 !important}
  .page{padding:16px 16px 48px !important;max-width:none !important}
  .backbar{padding:10px 16px 0 !important}
  .mbar{overflow:hidden}
  @media (max-width:430px){.mbar-txt{display:none !important}}
  /* téléphone (09/10/2026) : barre du haut compacte, la cloche, la loupe et l'avatar restent toujours visibles */
  @media (max-width:600px){.mbar{gap:6px;padding:0 8px}.mbar .mb-logos{display:none !important}.mbar .gs-box{gap:4px !important;margin-right:4px !important;flex:none}}
  @media (max-width:430px){.mbar .mb-lbl{display:none !important}.mbar [data-a="openNav"]{padding:0 10px !important}.mbar [data-a="msgKenny"]{padding:0 10px !important}}
  .page.pb{padding-bottom:150px !important}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .g2,.g-chef,.g-devis,.g-new,.g-fhead,.g-zones,.g-hist,.g-set{grid-template-columns:minmax(0,1fr) !important}
  .g-fhead > :first-child{height:190px !important}
  .g-pt{grid-template-columns:96px minmax(0,1fr) !important}
  .g-pt > :last-child{grid-column:1 / -1;border-left:none !important;padding-left:0 !important;border-top:1px solid #EEF0F2;padding-top:12px}
  .chefcall{width:auto !important;border-left:none !important;padding:12px 0 0 !important;border-top:1px solid #EEF0F2}
  .thead{display:none !important}
  .trow{display:flex !important;flex-wrap:wrap;height:auto !important;padding:12px 16px !important;gap:6px 12px !important;align-items:center}
  .trow > *{min-width:0}
  .trow .c-hide{display:none !important}
  .trow .c-grow{flex:1 1 60%}
  .trow .c-full{flex:1 1 100%}
  .bbar{left:0 !important;padding:10px 12px calc(10px + env(safe-area-inset-bottom)) !important;flex-wrap:wrap;gap:8px !important}
  .bbar .bbar-txt{flex:1 1 100%;display:flex;gap:10px;flex-wrap:wrap}
  .bbar .bbar-btns{margin-left:0 !important;flex:1 1 100%}
  .bbar .bbar-btns button{flex:1;padding:0 10px !important}
  .panel{width:100% !important}
  .toast{margin-left:0 !important;bottom:140px !important;max-width:92vw}
  .plate-xl{width:100% !important;height:72px !important}
  .plate-xl input{font-size:34px !important}
  .sticky{position:static !important}
  .seg-scroll{overflow-x:auto;max-width:100%;scrollbar-width:none}
  .seg-scroll::-webkit-scrollbar{display:none}
  .wrap-m{flex-wrap:wrap}
  .modal-box{width:100% !important;max-height:92vh !important;border-radius:12px 12px 0 0 !important;align-self:flex-end}
  .fs16 input,.fs16 select,.fs16 textarea,input,select,textarea{font-size:16px !important}
  .mail-pad{padding:14px !important}
}
@media print{
  @page{size:A4 portrait;margin:12mm}
  body > #root{display:none !important}
  .print-doc{display:block !important}
}
.print-doc{display:none;font-family:Inter,system-ui,sans-serif;font-size:11px;color:#0F1115}
.print-doc table{width:100%;border-collapse:collapse;margin:0 0 10px}
.print-doc td,.print-doc th{border:1px solid #E7E8EB;padding:5px 7px;text-align:left;vertical-align:top}
.print-doc th{background:#FAFAFB;font-weight:600}
.print-doc .r td{background:#FDECEC}
.print-doc .photos img{width:31%;margin:1%;border-radius:6px}

/* ---------- Choix rapides (remplacent les menus déroulants) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:38px;padding:7px 12px;border-radius:8px;border:1px solid #E1E3E8;background:#fff;font-family:inherit;font-size:13px;font-weight:550;color:#2A2E36;cursor:pointer;text-align:left;line-height:1.25;transition:background .12s,border-color .12s,transform .06s;-webkit-tap-highlight-color:transparent}
.chip:hover{border-color:#B9C8F2;background:#F7F9FE}
.chip:active{transform:scale(.97)}
.chip.todo{color:#B42318;border-color:#F3D0CC}
.chip.info{color:#646A76;border-style:dashed}
.chip.fill{color:#1D3FAF}
.chip.on{background:#1D3FAF;border-color:#1D3FAF;color:#fff}
.chip.todo.on{background:#D92D20;border-color:#D92D20;color:#fff}
.chip.info.on{background:#4B5160;border-color:#4B5160;color:#fff}
.chip.more{border-style:dashed;color:#1D3FAF;background:transparent}
.chip.num{min-width:44px;text-align:center;justify-content:center}
.chip .ck{margin-right:6px}
.okall{height:28px;padding:0 10px;border-radius:7px;border:1px solid #B9C8F2;background:#fff;color:#1D3FAF;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.okall:hover{background:#F0F4FD}
.rowc{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 14px;border-top:1px solid #EEF0F2;background:#F0F4FD;cursor:pointer}
.rowc:hover{background:#E6ECFB}
.rowc .val{font-size:12.5px;font-weight:600;color:#1D3FAF;background:#fff;border:1px solid #B9C8F2;border-radius:6px;padding:3px 8px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pulse{animation:pulseRow 1s}
@keyframes pulseRow{0%,50%{box-shadow:inset 3px 0 0 #1D3FAF, 0 0 0 2px #B9C8F2}100%{box-shadow:none}}
.progress{height:6px;border-radius:3px;background:#EEF0F2;overflow:hidden;flex:1;min-width:120px}
.progress > span{display:block;height:100%;background:#1D3FAF;border-radius:3px;transition:width .3s}
.stickytabs{position:sticky;top:0;z-index:6;background:#fff;padding:8px 0;margin:0 0 4px}
.sheet-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 14px;border:none;border-bottom:1px solid #EEF0F2;background:#fff;font-family:inherit;font-size:14px;text-align:left;cursor:pointer}
.sheet-opt:hover{background:#F7F8FA}
.sheet-opt.on{background:#E6ECFB;color:#1D3FAF;font-weight:600}
.sheet-opt .dot{width:8px;height:8px;border-radius:50%;flex:none}
@media (max-width:1023px){
  .chip{min-height:44px;font-size:14px;padding:9px 13px}
  .chip.num{min-width:48px}
  .rowc{min-height:52px}
  .stickytabs{top:64px;padding:8px 0}
  .okall{height:32px}
}
@media (max-width:1023px){
  .bbar .bbar-btns{display:grid !important;grid-template-columns:1fr 1fr;gap:8px !important}
  .bbar .bbar-btns button{height:44px !important;font-size:13.5px !important;line-height:1.15}
  .bbar .bbar-txt{font-size:12.5px}
  .page.pb{padding-bottom:190px !important}
}
@media (max-width:1023px){ .type-stripe{left:0 !important;width:5px !important} }

/* ---------- Code couleur des réponses ---------- */
.chip.okg,.chip.ok{color:#166534;border-color:#CDEBD6}
.chip.done{color:#1D3FAF;border-color:#D3DDF7}
.chip.warn,.chip.info{color:#854D0E;border-color:#F0DB8C;border-style:solid}
.chip.tpl{color:#646A76;border-style:dashed}
.chip.okg.on,.chip.ok.on{background:#16A34A;border-color:#16A34A;color:#fff}
.chip.done.on{background:#1D3FAF;border-color:#1D3FAF;color:#fff}
.chip.warn.on,.chip.info.on{background:#EAB308;border-color:#EAB308;color:#422006}
.chip.tpl.on{background:#9096A1;border-color:#9096A1;color:#fff}
.chip.todo.on{background:#D92D20;border-color:#D92D20;color:#fff}
@media (max-width:1023px){ .gtabs{padding:12px 16px 0 !important;overflow-x:auto} }

/* Bandeau « Powered by Netlify » masqué (à couper aussi dans Netlify : Project configuration › General) */
#nl-badge-frame{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}

/* Devis : sur tablette ou petit ordinateur, l'aperçu client passe sous les lignes (la désignation et la corbeille restent visibles) */
@media (max-width:1439px){ .g-devis{grid-template-columns:minmax(0,1fr) !important} .g-devis .sticky{position:static !important} }
@media (max-width:1023px){ .q-lines{overflow-x:visible !important} .q-lines .trow input.c-full{border-color:#E1E3E8 !important;background:#fff !important;margin-left:0 !important} }
/* Téléphone : cibles tactiles d'au moins 40 px (jours du planning, onglets des garanties, sélecteurs) */
@media (max-width:760px){
  th[data-a="plDay"]{padding:10px 6px !important}
  td[data-a="plDay"] > div{height:34px !important}
  [data-a="gTab"]{min-height:40px;display:inline-flex !important;align-items:center}
  .seg-scroll > [data-a]{height:38px !important}
  [data-a="pilotOpen2"],[data-a="voOpt"]{min-height:40px}
  /* accueil : boutons d'action et barre de recherche sur toute la largeur, lisibles d'un coup d'œil */
  .wrap-m > button,.wrap-m > div{flex:1 1 100% !important;min-width:0 !important;width:100%}
  .wrap-m > button{min-height:50px;justify-content:center}
}
/* alerte qui clignote doucement (commande de pièces avant 11 h, retards) */
@keyframes pcPulse{0%,100%{box-shadow:0 0 0 0 rgba(180,35,24,.45)}50%{box-shadow:0 0 0 8px rgba(180,35,24,0)}}
.pc-pulse{animation:pcPulse 1.6s ease-in-out infinite}
