/* HABILLAGE-V1 (02/11, demande de JB : « l'interface a perdu beaucoup d'effets sympas, des couleurs, des contrastes
   qu'on a sur AutoPilot V1 ; inspire-t'en afin de ne pas déboussoler l'équipe »). PROPOSITION, à valider par JB sur la
   maquette avant d'être branchée (chargée en dernier). Valeurs relevées dans la V1 (~/dev/autopilot_dev, lecture seule) :
   src/index.css (ix), src/design-system.css (ds), src/styles/skin-next.css (sn), tailwind.config.ts (tw).
   Méthode : par les jetons partagés (--ap-*, --ombre-*), donc tous les écrans à la fois, sans réécrire un écran. */

:root{
  /* Fond bleuté de la V1 (ix:113) au lieu du gris presque blanc. */
  --ap-fond:213 62% 95%;
  --fond:213 62% 95%;
  /* Traits plus francs (ix:390, 580). */
  --ap-trait:220 17% 86%;
  --ap-trait-fort:220 17% 79%;
  /* Couleurs plus saturées, celles de la V1 (ix:146, 263-306). */
  --ap-action:213 91% 44%;
  --ap-action-fort:214 84% 36%;
  --ap-action-doux:213 95% 95%;
  --ap-vert:152 64% 32%;
  --ap-vert-doux:152 52% 95%;
  --ap-rouge:0 72% 45%;
  --ap-rouge-doux:0 88% 96%;
  --ap-ambre:32 90% 38%;
  /* Le relief des blocs de la V1 (« lumière » : reflet blanc dessus, ombre douce dessous, ix:593-594). */
  --ap-ombre-1:inset 0 1px 0 rgb(255 255 255/.9),0 1px 2px rgb(16 24 40/.05),0 8px 24px -12px rgb(16 24 40/.14);
  --ap-ombre-2:inset 0 1px 0 rgb(255 255 255/.9),0 2px 4px rgb(16 24 40/.06),0 14px 32px -12px rgb(16 24 40/.18);
  --ombre-1:var(--ap-ombre-1);
  --ombre-2:var(--ap-ombre-2);
  /* Le corps à 14 px comme la V1 (ds:101) ; titres de bloc plus pleins. */
  --ap-t-m:14px;
  /* Couleurs métier de la V1 (ix:341-357), pour les pastilles de pôle. */
  --metier-vente:142 76% 36%;--metier-atelier:21 90% 48%;--metier-nettoyage:45 93% 47%;--metier-transport:221 83% 53%;
  --metier-achat:192 91% 36%;--metier-administratif:271 81% 56%;--metier-finance:333 71% 51%;--metier-reglages:215 16% 47%;
}

body{background:hsl(213 62% 95%)}

/* Navigation : la barre marine en dégradé de la V1 (ix:831), l'élément actif en dégradé azur avec liseré (ix:1294). */
.n1-colonne{background:linear-gradient(165deg,hsl(214 57% 20%),hsl(216 56% 11%))!important;box-shadow:1px 0 0 hsl(216 56% 8%)}
.n1-col-e{transition:background .15s,color .15s}
.n1-col-e.on{background:linear-gradient(95deg,hsl(213 92% 56%/.32),hsl(213 92% 56%/.08))!important;box-shadow:inset 3px 0 0 hsl(213 95% 62%);color:#fff}
.n1-col-e.on .ux-icone{color:hsl(213 95% 62%)}

/* Blocs et cartes : bords arrondis un peu plus, relief au survol (ix:768-827). */
.ct,.ck-bloc,.ck-tuile,.aj-carte,.aj-tuile,.ag-card,.rc-carte{transition:box-shadow .15s,transform .12s}
.ct:hover,.ck-tuile:hover,.aj-tuile:hover,.ag-card:hover{box-shadow:var(--ap-ombre-2)}

/* Titres : graisse 700 et un peu plus grands (tw:396, ds:88-93). */
main.page h1{font-weight:700;letter-spacing:-.015em}
main.page h2{font-weight:700}

/* Boutons : appui visible (button.tsx:38, active:scale .98). */
main.page button:active:not(:disabled),main.page a.btn:active{transform:scale(.98)}

/* Pastilles d'état plus contrastées. */
.ot-mot[data-ton="rouge"]{background:hsl(0 88% 94%);color:hsl(0 72% 40%)}
.ot-mot[data-ton="vert"]{background:hsl(152 52% 92%);color:hsl(152 70% 26%)}
.ot-mot[data-ton="bleu"]{background:hsl(213 95% 93%);color:hsl(213 88% 38%)}

/* Apparition douce des écrans (ix:913, fade-in .4s). */
@keyframes hv1-entree{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
main.page>*{animation:hv1-entree .3s cubic-bezier(.16,1,.3,1)}

/* Couleur du pôle sur chaque entrée de la barre, comme les sections colorées de la V1 (Vente vert, Atelier orange,
   Logistique bleu, Achat turquoise, Administratif violet, Finance rose : ix:341-357). */
.n1-col-e[data-colonne="Leads"] .ux-icone,.n1-col-e[data-colonne="Offres"] .ux-icone,.n1-col-e[data-colonne="Stock"] .ux-icone,
.n1-col-e[data-colonne="Clients"] .ux-icone,.n1-col-e[data-colonne="Reprises"] .ux-icone{color:hsl(var(--metier-vente)/.95)}
.n1-col-e[data-colonne="Atelier"] .ux-icone{color:hsl(var(--metier-atelier))}
.n1-col-e[data-colonne="Transports"] .ux-icone{color:hsl(221 90% 66%)}
.n1-col-e[data-colonne="Achats"] .ux-icone{color:hsl(192 80% 52%)}
.n1-col-e[data-colonne="Dossiers"] .ux-icone{color:hsl(271 85% 72%)}
.n1-col-e[data-colonne="Chiffres"] .ux-icone{color:hsl(333 80% 66%)}
.n1-col-e[data-colonne="Cockpit"] .ux-icone,.n1-col-e[data-colonne="Équipe"] .ux-icone{color:hsl(213 95% 72%)}
.n1-col-e.on .ux-icone{filter:drop-shadow(0 0 6px currentColor)}

/* COCKPIT-V1 (02/11) : sections de la barre de gauche comme la V1 (titre de pôle et sa pastille de couleur) et compteur
   orange. Colonne étroite (72 px) : un trait de la couleur du pôle ; colonne large (≥ 1 281 px) : le titre. */
.n1-col-sec{display:block;height:2px;margin:7px 14px 5px;border-radius:2px;font-size:0;background:hsl(var(--pole,215 16% 47%)/.7)}
.n1-col-sec[data-pole="vente"]{--pole:var(--metier-vente)}
.n1-col-sec[data-pole="atelier"]{--pole:var(--metier-atelier)}
.n1-col-sec[data-pole="administratif"]{--pole:var(--metier-administratif)}
.n1-col-sec[data-pole="logistique"]{--pole:var(--metier-transport)}
.n1-col-sec[data-pole="achat"]{--pole:var(--metier-achat)}
.n1-col-sec[data-pole="pilotage"]{--pole:var(--metier-reglages)}
.n1-col-e{position:relative}
.n1-col-compte{position:absolute;top:4px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:hsl(17 90% 46%);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center;line-height:1}
@media (min-width:1281px){
  .n1-col-sec{height:auto;margin:12px 6px 4px;background:none;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:hsl(214 32% 70%);display:flex;align-items:center;gap:7px}
  .n1-col-sec::before{content:"";width:7px;height:7px;border-radius:999px;background:hsl(var(--pole))}
  .n1-col-compte{position:static;margin-left:auto}
}

/* COCKPIT-V1 bloc 3 (02/11) : la barre de préparation de la V1 (PipelineAtelierFlux, PREPA_STAGE_COLOR) — une couleur
   par étape (Transport bleu, Méca. orange, Esthét. jaune, Prêt vert clair, Livraison vert), en chevrons, 56 px ;
   la légende reprend les mêmes points. */
.aj-flux-v1{height:56px;gap:0}
.aj-flux-v1 .aj-st{border-radius:0;font-weight:700;clip-path:polygon(0 0,calc(100% - min(8px,20%)) 0,100% 50%,calc(100% - min(8px,20%)) 100%,0 100%,min(8px,20%) 50%)}
.aj-flux-v1 .aj-st:first-child{border-radius:6px 0 0 6px;clip-path:polygon(0 0,calc(100% - min(8px,20%)) 0,100% 50%,calc(100% - min(8px,20%)) 100%,0 100%)}
.aj-flux-v1 .aj-st:last-child{border-radius:0 6px 6px 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,min(8px,20%) 50%)}
.aj-flux-v1 .aj-st:only-child{border-radius:6px;clip-path:none}
.aj-prepa :is(.aj-s1){background:hsl(var(--metier-transport));color:#fff}
.aj-prepa :is(.aj-s2){background:hsl(var(--metier-atelier));color:#fff}
.aj-prepa :is(.aj-s3){background:hsl(var(--metier-nettoyage));color:hsl(222 47% 11%)}
.aj-prepa :is(.aj-s4){background:hsl(141 79% 85%);color:hsl(222 47% 11%)}
.aj-prepa :is(.aj-s5){background:hsl(142 72% 29%);color:#fff}
/* Chiffres fixes dans la barre, comme la V1 : le comptage depuis zéro repartait à chaque relecture (toutes les 60 s). */
.aj-flux-v1 .aj-n{animation:none;transition:none}

/* Retour de l'antichambre (02/11) — la grille du Cockpit de la V1 au bureau : « À traiter » sur deux tiers (quatre cartes
   par rangée), le planning sur un tiers et sur toute la hauteur, la préparation puis les affaires sous « À traiter ».
   Chaque boîte prend la hauteur de son contenu : jamais de boîte vide étirée. */
@media (min-width:1280px){
  .aj-grille-jour,.aj-grille-jour.aj-sans-mois{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
  .aj-grille-jour{grid-template-areas:'mois planning' 'traiter planning' 'prepa planning' 'milieu planning'}
  .aj-grille-jour.aj-sans-mois{grid-template-areas:'traiter planning' 'prepa planning' 'milieu planning'}
  .aj-grille-jour .aj-z-mois{grid-column:1/-1;grid-row:1}
  .aj-grille-jour:not(.aj-sans-mois) .aj-z-planning{grid-row:2/span 3}
  .aj-z-prepa{grid-area:prepa;min-width:0}
  .aj-z-traiter .aj-traiter .aj-tuiles.n1-tuiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .aj-z-traiter>.aj-carte,.aj-z-milieu>.aj-carte,.aj-z-planning>.aj-carte{flex:0 0 auto}
  .aj-z-prepa .aj-prepa{margin-top:0;padding:var(--ap-e3) var(--ap-e4);border-top:0;border-radius:var(--ap-r-l);background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset}
}
@media (min-width:1024px) and (max-width:1279px){
  .aj-z-prepa{grid-column:1/-1}
}
/* Aucune phrase technique sur l'écran du gérant : le détail reste dans la page (lecteurs d'écran, recettes) mais ne se voit pas. */
.aj-calmes-d,.aj-silences{display:none}
/* Un libellé du bandeau ne se coupe jamais : il passe à la ligne. */
.aj-k-lib,.aj-bandeau .aj-k-lib{white-space:normal;overflow:visible;text-overflow:clip}

/* COCKPIT-V1 (03/11) : affaires en cours — bascule récentes / anciennes et menu ⋮ de la ligne (AffairesEnCoursCard). */
.aj-affaires{position:relative}
.aj-ordre{display:inline-flex;gap:4px;margin:-2px 0 6px;padding:2px;border-radius:999px;background:hsl(var(--fond))}
.aj-ordre-b{border:0;background:transparent;font:inherit;font-size:12px;line-height:1;padding:7px 12px;border-radius:999px;color:hsl(var(--doux));cursor:pointer;min-height:30px}
.aj-ordre-b[aria-pressed="true"]{background:hsl(var(--carte));color:hsl(var(--encre));font-weight:600;box-shadow:0 1px 2px hsl(220 40% 20%/.12)}
.aj-lg-ligne{display:flex;align-items:center;gap:2px;border-top:1px solid hsl(var(--trait))}
.aj-lg-ligne:first-child{border-top:0}
.aj-lg-ligne>.aj-lg{flex:1 1 auto;min-width:0;border-top:0}
.aj-menu{position:relative;flex:0 0 auto}
.aj-menu-b{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:hsl(var(--doux));cursor:pointer}
.aj-menu-b:hover,.aj-menu-b[aria-expanded="true"]{background:hsl(var(--fond));color:hsl(var(--encre))}
.aj-menu-b svg{width:18px;height:18px;fill:currentColor}
.aj-menu-p{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:232px;padding:6px;border-radius:12px;background:hsl(var(--carte));box-shadow:0 10px 30px hsl(220 40% 20%/.18),0 0 0 1px hsl(var(--trait))}
.aj-menu-l{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;font-size:14px;color:hsl(var(--encre));text-decoration:none;white-space:nowrap}
.aj-menu-l:hover{background:hsl(var(--fond))}
.aj-menu-rouge{color:hsl(var(--rouge))}
.aj-menu-v1{font-size:11px;font-weight:600;color:hsl(var(--doux));padding:2px 6px;border-radius:6px;background:hsl(var(--fond))}
.aj-menu-s{border:0;border-top:1px solid hsl(var(--trait));margin:4px 6px}
.aj-menu-voile{position:fixed;inset:0;z-index:29;border:0;background:transparent;cursor:default}
@media (max-width:767px){
  /* Au téléphone : textes ≥ 15 px, cibles ≥ 44 px (règle de JB). */
  .aj-ordre-b{font-size:15px;min-height:44px;padding:0 14px}
  .aj-menu-l{font-size:15px;min-height:44px}
  .pv dl.pv-kv{font-size:15px}
  /* L'âge du parc reste au Cockpit du téléphone (il était dans la rangée retirée le 02/11) : sa ligne, sous le mois. */
  .aj-bandeau,.aj-bandeau[data-compteurs]{flex-wrap:wrap;max-height:none!important;row-gap:0}
  .aj-bandeau [data-compteur="age"]{display:flex!important;flex:1 0 100%;border-left:0!important;padding-left:0!important}
  .aj-bandeau [data-compteur="age"] .aj-k-lib{font-size:0}
  .aj-bandeau [data-compteur="age"] .aj-k-lib::after{content:"Âge du parc";font-size:13px}
  .aj-bandeau [data-compteur="age"] small{font-size:13px;color:hsl(0 0% 100%/.78)}
  .aj-bandeau,.aj-bandeau[data-compteurs]{padding:2px 12px 8px!important}
  .aj-bandeau [data-compteur="age"]{min-height:28px}
  /* Affaires : la voiture et le client en entier (jamais coupés), sur deux lignes s'il le faut. */
  .aj-affaires .aj-tx b{white-space:normal;overflow:visible;text-overflow:clip}
}
/* La ligne d'affaire est enveloppée (menu ⋮, 03/11) : les mêmes plafonds que `recadrage.css` (8, 11 au très grand écran ; toutes au réglage). */
.aj-affaires .aj-lignes>.aj-lg-ligne:nth-child(n+9){display:none}
@media (min-width:1800px){.aj-affaires .aj-lignes>.aj-lg-ligne:nth-child(n+9){display:flex}.aj-affaires .aj-lignes>.aj-lg-ligne:nth-child(n+12){display:none}}
[data-p-aujourdhui-affaires="toutes"] .aj-affaires .aj-lignes>.aj-lg-ligne:nth-child(n){display:flex}
/* Retour de l'antichambre (03/11) : la barre de préparation de la V1 reste au téléphone, pleine largeur, sous « À traiter ». */
@media (max-width:767px){
  .aj-grille-jour,.aj-grille-jour.aj-sans-mois{grid-template-areas:'traiter' 'prepa' 'mois' 'planning' 'milieu'}
  .aj-z-prepa{grid-area:prepa;min-width:0}
  .aj-page .aj-z-prepa .aj-prepa{display:grid!important;margin-top:0;padding:12px 14px;border-top:0;border-radius:14px;background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset}
  .aj-z-prepa .aj-p-tete{font-size:15px}
  .aj-z-prepa .aj-flux-v1{height:48px}
  .aj-z-prepa .aj-legende{font-size:15px}
}
button.ds-a-completer{border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;min-height:28px}
/* Antichambre (03/11) : jamais un faux zéro. Le chiffre qui « roulait » depuis 0 restait figé sur 0 tant que le navigateur
   lisait la V1 (3-4 s) : il s'affiche d'emblée à sa valeur (dernière connue pendant la relecture). */
.aj-page .aj-n,.n1-tuile .aj-n{animation:none!important;transition:none!important}

/* ═══ FINESSE DU COCKPIT (03/11, retour de JB : « assez proche, mais graphiquement un peu grossier ») ═══
   Comme la V1 : chiffres grands mais semi-gras, petites capitales grises, traits fins, ombres légères, une icône
   fine par carte, un seul bouton plein (« En premier »). Rythme : 16 px entre les boîtes, rayon 12 px, titres 15 px. */
.aj-page{--fin-gris:220 9% 46%;--fin-trait:220 14% 90%}
.aj-grille-jour{gap:16px!important}
.aj-page :is(.aj-carte,.aj-traiter,.aj-z-prepa .aj-prepa,.aj-planning,.aj-affaires){border-radius:12px!important;box-shadow:0 1px 2px rgb(16 24 40/.05),0 4px 16px -8px rgb(16 24 40/.10)!important}
.aj-page :is(.aj-ct h2,.aj-p-tete b){font-size:15px!important;font-weight:600!important;letter-spacing:-.005em}
.aj-page .aj-ct-n,.aj-page .aj-p-tete .ck-num{font-weight:500;color:hsl(var(--fin-gris))}
/* Bandeau du mois : libellés en petites capitales grises, chiffres semi-gras. */
.aj-bandeau .aj-k-lib{font-size:11px!important;font-weight:500!important;letter-spacing:.07em;color:hsl(0 0% 100%/.6)!important}
.aj-bandeau .aj-k-n,.aj-bandeau .aj-k-v b{font-weight:600!important}
.aj-bandeau .aj-k-s{color:hsl(0 0% 100%/.62)!important}
/* Cartes « À traiter ». */
main.page .n1-tuile{border-left-width:2px!important;border-color:hsl(var(--fin-trait))!important;box-shadow:0 1px 2px rgb(16 24 40/.04)!important;border-radius:12px!important}
main.page .n1-tuile.n1-n0{border-left-color:hsl(0 65% 52%)!important}
main.page .n1-tuile.n1-n1{border-left-color:hsl(36 85% 52%)!important}
main.page .n1-tuile.n1-prem{box-shadow:0 0 0 1.5px hsl(var(--ap-action)),0 4px 14px -6px hsl(var(--ap-action)/.35)!important}
.n1-t-tete{display:flex;align-items:center;gap:10px;min-width:0}
.n1-t-ic{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:hsl(var(--ap-action-doux));color:hsl(var(--ap-action))}
.n1-t-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.n1-t-ic[data-pole="administratif"]{background:hsl(var(--metier-administratif)/.10);color:hsl(var(--metier-administratif))}
.n1-t-ic[data-pole="finance"]{background:hsl(var(--metier-finance)/.10);color:hsl(var(--metier-finance))}
.n1-t-ic[data-pole="logistique"]{background:hsl(var(--metier-transport)/.10);color:hsl(var(--metier-transport))}
.n1-t-ic[data-pole="atelier"]{background:hsl(var(--metier-atelier)/.10);color:hsl(var(--metier-atelier))}
main.page .n1-tuile .n1-t-ch .aj-t-chiffre{font-weight:600!important;letter-spacing:-.02em}
main.page .n1-tuile .n1-t-lb{font-weight:600!important;color:hsl(var(--encre))}
main.page .n1-tuile .n1-t-dt{color:hsl(var(--fin-gris))}
.n1-sev{font-size:11px!important;font-weight:600!important;letter-spacing:.06em}
/* Un seul bouton plein : les autres gestes deviennent un lien discret. */
main.page .n1-tuile a.n1-t-geste.n1-t-geste-lien,main.page .n1-tuile a.n1-t-geste.n1-t-geste-lien:visited{background:none!important;border:0!important;box-shadow:none!important;color:hsl(var(--ap-action))!important;padding:0!important;min-height:0!important;font-weight:500!important;font-size:13px!important}
main.page .n1-tuile a.n1-t-geste.n1-t-geste-lien::after{content:"\00a0›"}
main.page .n1-tuile a.n1-t-geste.n1-t-geste-lien:hover{text-decoration:underline}
/* Préparation : légende grise, chiffres semi-gras. */
.aj-z-prepa .aj-flux-v1 .aj-n{font-weight:600}
.aj-z-prepa .aj-legende{color:hsl(var(--fin-gris))}
/* Planning : l'heure à gauche, la pastille du jour (verte aujourd'hui), texte en graisse normale. */
.aj-planning .aj-ev.aj-ev-date{grid-template-columns:44px 40px minmax(0,1fr);gap:10px}
.aj-planning .aj-ev.aj-ev-date:has(.aj-v){grid-template-columns:44px 40px auto minmax(0,1fr)}
.aj-pl-h{font-size:13px;font-variant-numeric:tabular-nums;color:hsl(var(--encre));text-align:right}
.aj-pl-h.aj-journee{color:hsl(var(--fin-gris))}
.aj-pl-j{display:grid;justify-items:center;align-content:center;width:40px;height:40px;border-radius:8px;border:1px solid hsl(var(--fin-trait));background:hsl(var(--carte));line-height:1}
.aj-pl-j small{font-size:9px;font-weight:600;letter-spacing:.04em;color:hsl(var(--fin-gris))}
.aj-pl-j b{font-size:15px;font-weight:600;margin-top:2px;color:hsl(var(--encre))}
.aj-pl-j.aj-pl-auj{border-color:hsl(var(--ap-vert)/.45);background:hsl(var(--ap-vert-doux))}
.aj-pl-j.aj-pl-auj :is(small,b){color:hsl(var(--ap-vert))}
.aj-planning .aj-ev .aj-tx b{font-weight:500!important}
.aj-planning .aj-ev .aj-tx small{color:hsl(var(--fin-gris))}
.aj-planning .aj-jour{font-size:11px!important;font-weight:600!important;letter-spacing:.07em;color:hsl(var(--fin-gris))!important}
/* Affaires : une étiquette de statut, l'alerte « Pas rappelé » en orange léger. */
.aj-affaires .aj-tx b{font-weight:500!important}
.aj-affaires .aj-tags{gap:6px;margin-top:4px}
.aj-affaires .aj-tag{font-weight:500!important;border-radius:6px;padding:3px 7px}
.aj-affaires .aj-tag-rappel{background:hsl(32 100% 95%)!important;color:hsl(28 80% 38%)!important;box-shadow:inset 0 0 0 1px hsl(32 90% 80%)}
.aj-affaires .aj-chaudes{font-weight:500;color:hsl(28 80% 42%)}
/* La bulle « Un souci ? » : une icône discrète en bas à droite, jamais sur le contenu. */
.bl-bouton{width:40px!important;height:40px!important;padding:0!important;justify-content:center;gap:0!important;background:hsl(var(--ap-carte))!important;color:hsl(220 9% 46%);border:1px solid hsl(220 14% 88%)!important;box-shadow:0 2px 8px rgb(16 24 40/.10)!important;opacity:.85;font-size:17px!important}
.bl-bouton:hover{opacity:1}
.bl-txt,.bl-pastille{display:none!important}
/* Finesse au téléphone : la carte garde sa ligne compacte (chiffre | libellé | geste) ; l'icône s'efface, le lien garde 44 px. */
@media (max-width:600px){
  main.page .n1-tuile .n1-t-tete{grid-area:ch;align-self:center;justify-content:center}
  main.page .n1-tuile .n1-t-ic{display:none}
  main.page .n1-tuile a.n1-t-geste.n1-t-geste-lien{min-height:44px!important;font-size:15px!important;align-items:center}
}
@media (max-width:767px){.aj-bandeau [data-compteur="age"] .aj-k-lib{font-size:0!important}}

/* ═══ FINESSE DE L'ATELIER (03/11, retour de JB : « idem, très grossier ») — la carte de la Prépa mécanique de la V1 ═══ */
.ct-col{background:color-mix(in srgb,var(--ct-corps-col) 28%,hsl(213 62% 97%))!important;border:2px solid color-mix(in srgb,var(--ct-tete-col) 70%,white);border-radius:12px!important}
.ct-col>header{background:color-mix(in srgb,var(--ct-tete-col) 45%,white)!important;border-radius:10px 10px 0 0!important;padding:9px 12px!important}
.ct-col>header h2{font-size:14px!important;font-weight:600!important}
.ct-n{font-size:12px!important;font-weight:600;color:hsl(220 9% 40%)!important;font-variant-numeric:tabular-nums}
.ct-n-ct{font-size:11px;font-weight:600;color:hsl(28 80% 38%);background:hsl(36 100% 94%);border-radius:999px;padding:1px 7px}
.ct-bandeau{font-size:12px!important}
.ct{border:1px solid hsl(220 14% 90%)!important;border-left:1px solid hsl(220 14% 90%)!important;border-radius:12px!important;box-shadow:0 1px 2px rgb(16 24 40/.05)!important}
.ct:hover{box-shadow:0 4px 14px -6px rgb(16 24 40/.18)!important}
.ct-photo{height:116px!important}
/* « URGENT » : petite étiquette en haut à gauche, pas un bandeau plein. */
.ct-urgent{display:inline-flex;align-items:center;gap:3px;left:6px!important;top:6px!important;background:hsl(0 0% 100%/.92)!important;color:hsl(0 70% 45%)!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:.04em;padding:2px 7px!important;border-radius:6px!important;box-shadow:0 1px 2px rgb(0 0 0/.12)}
.ct-urgent svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Le mot d'état et les km en coin de photo : le même petit style, une couleur. */
.ct-etat{right:6px!important;top:6px!important}
.ct-etat .ct-mot,.ct-etat .ot-mot{font-size:10.5px!important;font-weight:600!important;padding:2px 7px!important;border-radius:6px!important;background:hsl(0 0% 100%/.92)!important;box-shadow:0 1px 2px rgb(0 0 0/.12)}
.ct-km{font-size:10.5px!important;padding:1px 7px!important;border-radius:6px!important;background:hsl(220 30% 14%/.62)!important}
.ct-corps{gap:6px!important;padding:9px 10px 9px!important}
.ct-titre b{font-size:13.5px!important;font-weight:600!important}
.ct-titre small{font-size:12px!important;color:hsl(220 9% 46%)!important}
/* Clé et plaque comme la V1 : « N° de clé » en chip, la plaque avec sa bande bleue et des chiffres à chasse fixe. */
.ct-ident{gap:6px!important}
.ct-cle{height:22px!important;min-width:22px!important;font-size:12px!important;font-weight:700}
.ct-cle.vide{display:inline-flex;align-items:center;gap:4px;height:22px!important;padding:0 7px!important;border:1px solid hsl(220 14% 86%)!important;border-radius:6px!important;font-size:11.5px!important;color:hsl(220 9% 46%)!important;background:hsl(0 0% 100%)!important}
.ct-cle.vide svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-plaque{display:inline-flex;align-items:center;height:22px;padding:0 7px!important;border:1px solid hsl(220 14% 80%)!important;border-radius:4px!important;font-size:12px!important;font-weight:600;letter-spacing:.04em;background:#fff}
.ct-plaque.ct-plaque-fr{padding-left:12px!important;background:linear-gradient(90deg,#1d4ed8 0 7px,#fff 7px)!important;border-color:hsl(220 30% 60%)!important}
/* L'avancement : une rangée de petites icônes (vert fait, orange en cours, gris à faire, rouge bloqué). */
.ct-avance{display:flex!important;gap:7px!important;align-items:center}
.ct-avance span{display:inline-grid!important;place-items:center;width:20px!important;height:20px!important;padding:0!important;background:none!important;border-radius:0!important;color:hsl(220 9% 72%)!important}
.ct-avance span svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ct-avance span[data-ton="vert"]{color:hsl(152 64% 34%)!important}
.ct-avance span[data-ton="ambre"]{color:hsl(32 90% 44%)!important}
.ct-avance span[data-ton="rouge"]{color:hsl(0 70% 50%)!important}
/* Une seule ligne d'alerte, fine : le CT quand il demande quelque chose, les mots d'alerte en texte. */
.ct-alerte-ct{font-size:12px;font-weight:600;color:hsl(32 90% 38%)}
.ct-alerte-ct[data-ton="rouge"]{color:hsl(0 70% 45%)}
.ct-mots .ct-mot,.ct-mots .ot-mot{font-size:12px!important;font-weight:600!important;background:none!important;padding:0!important;box-shadow:none!important}
.ct-livraison{font-size:12px!important;padding:3px 7px!important;border-radius:6px!important}
/* Qui : le nom en petite étiquette grise en capitales, comme la V1 ; le temps passé à droite, fin. */
.ct-pied{font-size:12px!important}
.ct-qui{font-size:10.5px!important;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:hsl(220 9% 40%)!important;background:hsl(220 14% 94%);border-radius:5px;padding:2px 6px}
.ct-ici{font-size:12px!important}
.ct-pied .ct-mot,.ct-pied .ot-mot{font-size:11px!important;font-weight:600!important;letter-spacing:.04em;padding:2px 6px!important;border-radius:5px!important}
.ct-b{min-height:36px!important;font-size:13px!important;font-weight:600!important;box-shadow:none!important}
/* Filtres en chips fines. */
.ct-filtre{min-height:32px!important;font-size:13px!important;padding:0 11px!important}
.ct-filtre b{font-weight:600!important}
@media (max-width:767px){
  .ct-titre b,.ct-titre small,.ct-pied,.ct-alerte-ct,.ct-mots .ct-mot,.ct-mots .ot-mot,.ct-livraison,.ct-ici,.ct-plaque,.ct-filtre,.ct-b{font-size:15px!important}
  .ct-b{min-height:44px!important}.ct-filtre{min-height:44px!important}
  .ct-urgent,.ct-etat .ct-mot,.ct-etat .ot-mot,.ct-pied .ct-mot,.ct-pied .ot-mot,.ct-km,.ct-cle,.ct-cle.vide,.ct-qui,.ct-n,.ct-n-ct{font-size:15px!important}
  .ct-cle,.ct-cle.vide,.ct-plaque{height:26px!important}
  .ct-avance span{width:24px!important;height:24px!important}
  /* Fiche de travail au téléphone : le retour et les cases à 15 px (règle de JB). */
  .at3-retour,.at3-case{font-size:15px!important}
}
/* Antichambre (03/11) : au téléphone, « … » (Imprimer, Mode télé) de l'Atelier n'est plus une boîte seule sur sa ligne : il
   rejoint la ligne des onglets, à droite de « Filtres » (place réservée, rien ne se chevauche). */
@media (max-width:767px){
  body:has(.ct-atelier) .n1-ecran:has(.n1-puce-filtres){padding-right:52px;box-sizing:border-box}
  body:has(.ct-atelier) .ct-haut>details.v4-plus{position:absolute;top:-44px;right:4px;z-index:5}
  body:has(.ct-atelier) .ct-haut>details.v4-plus>summary{width:44px;height:40px;border-radius:999px}
}

/* Stock (03/11, inventaire V1 → V2) : le menu ⋮ de chaque ligne, comme la V1 ; la fiche dans la V2, les gestes dans la V1. */
.st-ln{position:relative}
.st-lm{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:3}
.st-lm-b{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:hsl(220 9% 46%);cursor:pointer}
.st-lm-b:hover,.st-lm-b[aria-expanded="true"]{background:hsl(213 62% 95%);color:hsl(222 47% 11%)}
@media (min-width:768px){.st[data-stock] :is(.st-th,.st-ln){padding-right:44px!important}}
.st-lm-b svg{width:16px;height:16px;fill:currentColor}
.st-lm-p{position:absolute;right:0;top:calc(100% + 4px);z-index:40;display:grid;min-width:210px;padding:6px;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgb(16 24 40/.18),0 0 0 1px hsl(220 14% 90%)}
.st-lm-l{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;color:hsl(222 47% 11%);text-align:left;cursor:pointer;white-space:nowrap}
.st-lm-l:hover{background:hsl(213 62% 96%)}
.st-lm-v1{font-size:11px;font-weight:600;color:hsl(220 9% 46%);padding:2px 6px;border-radius:6px;background:hsl(213 62% 95%)}
.st-lm-voile{position:fixed;inset:0;z-index:30;border:0;background:transparent;cursor:default}
@media (max-width:767px){.st-lm{display:none}}
/* Stock, finesse : le trait de situation à 2 px. */
.st[data-stock] .st-liste:not(.st-arch) .st-ln[data-situation]::before{width:2px!important}
.st[data-stock] .st-ln[data-a-traiter]{box-shadow:inset 2px 0 0 hsl(var(--orange-vif))!important}
/* Le menu ⋮ d'une ligne déborde de sa case (les cases de la ligne coupent ce qui dépasse). */
.st[data-stock] .st-liste .st-ln>.st-lm{overflow:visible!important;min-width:0}
.st[data-stock] .st-liste .st-ln:has(.st-lm-p){z-index:50}
/* Stock, barre de sélection (V1 StockVente.tsx:1313) : Exporter CSV et Archiver en boutons discrets sur le fond sombre. */
.st-selbar .st-btn:not(.prim){background:transparent!important;color:#fff!important;border:1px solid hsl(0 0% 100%/.35)!important;box-shadow:none!important;gap:6px}
.st-selbar .st-btn:not(.prim):hover{background:hsl(0 0% 100%/.12)!important}
.st-selbar .st-btn .st-lm-v1{background:hsl(0 0% 100%/.18);color:#fff}
@media (max-width:767px){.st-selbar [data-geste-sel]{display:none}}
/* Antichambre 03/11 : une barre ou un volet masqué sort ENTIÈREMENT de l'écran (2 px et l'ombre de la barre de sélection
   dépassaient en bas, front/stock.css:193) ; masqué = invisible aussi, après l'animation. */
.st-selbar{translate:-50% calc(100% + 64px);visibility:hidden;transition:translate .32s var(--ressort),visibility 0s linear .32s}
.st-selbar.on{translate:-50% 0;visibility:visible;transition:translate .32s var(--ressort),visibility 0s}
@media (max-width:767px){
  .aj-volet:not(.on),.ck-volet:not(.on){transform:translateY(calc(100% + 64px))}
}
/* Stock, « Chiffres » de la V1 (StockVente.tsx:1173) : petit menu du bandeau de synthèse. */
.st-chiffres{position:relative;display:inline-flex;align-items:center}
.st-chiffres>summary{list-style:none;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;font-size:13px;font-weight:600;color:hsl(220 9% 46%);cursor:pointer}
.st-chiffres>summary::-webkit-details-marker{display:none}
.st-chiffres>summary:hover,.st-chiffres[open]>summary{background:hsl(213 62% 95%);color:hsl(222 47% 11%)}
.st-chiffres>summary .ch{font-size:10px}
.st-chiffres-p{position:absolute;left:0;top:calc(100% + 6px);z-index:45;width:260px;display:grid;gap:8px;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgb(16 24 40/.18),0 0 0 1px hsl(220 14% 90%)}
.st-chiffres-p .st-chiffres-t{margin:0 0 2px;font-size:14px;font-weight:700;color:hsl(222 47% 11%)}
.st-chiffres-p>div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.st-chiffres-p>div>span{color:hsl(220 9% 46%)}
.st-chiffres-p b{font-weight:700;color:hsl(222 47% 11%)}
.st-chiffres-p b[data-ton=rouge]{color:hsl(0 72% 45%)}.st-chiffres-p b[data-ton=orange]{color:hsl(28 90% 40%)}.st-chiffres-p b[data-ton=vert]{color:hsl(142 60% 32%)}
.st-chiffres-p b.vide{color:hsl(220 9% 46%);font-weight:600}
@media (max-width:767px){.st-chiffres>summary{min-height:44px;font-size:15px}.st-chiffres-p{left:auto;right:0;width:min(300px,calc(100vw - 32px))}.st-chiffres-p>div{font-size:15px}}
/* Stock, ⋯ › Affichage : l'intitulé « Trier par » devant le tri CO₂ (comme « Trier la liste » de la V1). */
.st-tri-l{display:block;margin:6px 0 2px;font-size:12px;font-weight:600;color:hsl(220 9% 46%)}
@media (max-width:767px){.st-tri-l{font-size:15px}}
/* Fiche, bandeau (inventaire 03/11) : description du catalogue, SOH, régime de TVA, « Prêtée », LP n° en lien. */
.s2-bandeau .s2-desc{min-width:0;max-width:60ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;opacity:.75}
.s2-bandeau .s2-puces li[data-puce=lp] a{color:inherit;text-decoration:underline;text-decoration-color:hsl(0 0% 100%/.4);text-underline-offset:2px}
.s2-bandeau .s2-puces li[data-ton=vert]{color:hsl(142 70% 72%)}
.s2-bandeau .s2-puces li[data-ton=orange]{color:hsl(36 95% 68%)}
.s2-bandeau .s2-puces li[data-ton=rouge]{color:hsl(0 90% 75%)}
.s2-bandeau .s2-puces li[data-puce=tva][data-a-verifier=true]{opacity:.75;font-style:italic}
@media (max-width:767px){.s2-bandeau .s2-desc{display:none}}
/* Stock : « Réservée » (V1 parcoursVehicule.ts:992) — l'étape Vendue, même couleur. */
@media (min-width:768px){.st[data-stock][data-mode=client] .st-liste:not(.st-arch) .st-ln .s5-em[data-etat="reservee"]{color:hsl(var(--ap-vert))}}
/* Stock (JB 03/11, « plus discret ») : le n° de clé en petit texte gris, sans fond (bureau et téléphone). */
.st[data-stock] .st-liste .st-cle{background:none!important;color:hsl(220 9% 46%)!important;border:0!important;box-shadow:none!important;padding:0!important;min-width:0!important;height:auto!important;border-radius:0!important;font-size:12px!important;font-weight:500!important;line-height:inherit!important}
@media (max-width:767px){.st[data-stock] .st-liste .st-cle{font-size:13px!important}}
/* Stock › ⋮ › Passer en vendu (V1 MarquerVenduDialog) : fenêtre sobre, champs de 44 px. */
.ap-conf.st-vendre{display:grid;gap:12px;width:min(460px,100%)}
.st-vendre .st-vendre-l{margin:-6px 0 0;font-size:14px;color:hsl(220 9% 46%)}
.st-vendre .st-vendre-bdc{margin:0;font-size:13px;font-weight:600;color:hsl(142 60% 30%)}
.st-vendre .st-vendre-refus{margin:0;padding:10px 12px;border-radius:10px;background:hsl(0 86% 97%);color:hsl(0 70% 38%);font-size:14px;line-height:1.4}
.st-vendre .st-vendre-v1{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:hsl(221 83% 45%);text-decoration:none}
.st-vendre .st-vendre-c{display:grid;gap:6px;font-size:13px;font-weight:600;color:hsl(220 9% 40%)}
.st-vendre .st-vendre-c :is(input,select){height:44px;padding:0 12px;border:1px solid hsl(220 14% 86%);border-radius:10px;background:#fff;font:inherit;font-size:15px;font-weight:500;color:hsl(222 47% 11%);transition:border-color .15s,box-shadow .15s}
.st-vendre .st-vendre-c :is(input,select):focus{outline:0;border-color:hsl(221 83% 53%);box-shadow:0 0 0 3px hsl(221 83% 53%/.15)}
.st-vendre .st-vendre-n{margin:-6px 0 0;font-size:12.5px;color:hsl(220 9% 46%)}
.st-vendre .st-vendre-frais{display:grid;gap:8px;padding:10px 12px;border-radius:10px;background:hsl(38 92% 96%);color:hsl(28 80% 30%);font-size:13.5px}
.st-vendre .st-vendre-frais p{margin:0}
.st-vendre .st-vendre-frais label{display:flex;align-items:center;gap:8px;min-height:32px;font-weight:600;cursor:pointer}
.st-vendre .st-vendre-frais input{width:18px;height:18px;accent-color:hsl(28 80% 40%)}
.ap-conf.st-vendre .ap-conf-oui:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:767px){.st-vendre .st-vendre-c{font-size:15px}.st-vendre .st-vendre-n,.st-vendre .st-vendre-frais{font-size:15px}}
/* Une vente n'est pas un geste destructeur : bouton principal bleu (pas le rouge des confirmations de suppression). */
.ap-conf.st-vendre .ap-conf-oui{background:hsl(221 83% 53%);border-color:hsl(221 83% 53%);color:#fff}
.ap-conf.st-vendre .ap-conf-oui:not(:disabled):hover{background:hsl(221 83% 47%)}
/* JB (03/11) : au téléphone, la barre du bas devient une PILULE FLOTTANTE semi-translucide avec flou (référence :
   docs/references-jb/2026-11-03-youtube-barre-du-bas.png) — le contenu défile dessous ; l'onglet actif dans une
   capsule claire ; mêmes entrées, icônes, libellés et pastille rouge des leads. */
@media (max-width:767px){
  .ux-barre-bas.n1-bas.g1-bas{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:62px;min-height:0;padding:5px;gap:2px;border:1px solid hsl(0 0% 100%/.10);border-top:1px solid hsl(0 0% 100%/.14);border-radius:9999px;background:hsl(216 54% 13%/.72);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:0 10px 30px rgb(2 8 23/.28),0 1px 0 hsl(0 0% 100%/.06) inset;transition:background .2s ease}
  .ux-barre-bas.n1-bas.g1-bas a{border-radius:9999px;padding:0;gap:3px;transition:background .18s ease,color .18s ease}
  .ux-barre-bas.n1-bas.g1-bas a.active{background:hsl(0 0% 100%/.14)}
  .ux-barre-bas.n1-bas.g1-bas a:active{background:hsl(0 0% 100%/.08)}
  .ux-barre-bas.n1-bas.g1-bas a.active .g1-trait{display:none}
  .ux-barre-bas.n1-bas.g1-bas a.active .g1-icone{stroke:#fff;stroke-width:2.1}
  .ux-barre-bas.n1-bas.g1-bas .g1-l{letter-spacing:-.01em}
  .ux-barre-bas.n1-bas.g1-bas .g1-pastille{box-shadow:0 0 0 2px hsl(216 54% 16%),0 1px 2px rgba(0,0,0,.3)}
  body:has(.n1-bas) main.page:not(:has(.pv-tel)):not(:has(.dm)){padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body:has(.n1-bas) .bl-bouton{bottom:calc(82px + env(safe-area-inset-bottom))!important}
}