/* VUES D'ENTITÉS « LE STANDARD » (lot V3-11, 04/10/2026) — maquette WPM-ADMIN\maquette\ validée par Rémi.
   Grammaire : une phrase de verdict, des actions (les SEULS éléments encadrés), un bento des éléments
   vivants, puis toutes les sections en flux. États = point de couleur + texte, jamais un cadre.
   Bordures complètes ou rien (pas de liseré partiel). Pas de police externe : la pile du CRM.
   Téléphone d'abord ; le grand écran ajoute des colonnes, il ne remplace rien. Préfixe st- partout :
   aucune règle d'app.css n'est touchée, aucun écran existant ne change d'aspect. */
:root{
  --st-encre:#16181c;--st-encre-2:#4d5868;--st-filet:#d9dee6;--st-filet-2:#e8ecf1;--st-fond:#f5f6f3;--st-surface:#fff;
  --st-produit:#40620a;--st-produit-plein:#5f7d10;--st-produit-doux:#eef3e0;
  --st-alerte:#b4232a;--st-alerte-fond:#fcebec;--st-alerte-bord:#efc2c5;
  --st-attente:#8a5300;--st-attente-fond:#fdf1df;--st-attente-bord:#f1d29e;
  --st-bon:#16794a;--st-rayon:10px;
  --st-mono:ui-monospace,"Cascadia Mono",Consolas,"SFMono-Regular",Menlo,monospace;
}
.st-page{max-width:1240px;color:var(--st-encre)}
/* Largeur utile des écrans du lot à partir de 1000 px (maquette : jusqu'à ~1240 px de contenu). Le conteneur commun
   .content plafonne à 1200 px pour tous les écrans : on ne le desserre QUE quand il porte une page « Le Standard »,
   les autres écrans gardent exactement leur largeur. */
@media (min-width:1000px){.content:has(> .st-page){max-width:1288px}.st-page{width:100%}}
.st-mono{font-family:var(--st-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.st-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.st-fil{font-size:13px;color:var(--st-encre-2);margin:0 0 6px}
.st-fil a{text-decoration:underline;text-underline-offset:2px}
.st-titre{font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
.st-verdict{margin:10px 0 0;font-size:17px;line-height:1.45;font-weight:500;max-width:64ch}
.st-verdict b{font-weight:700}
.st-sous{display:block;color:var(--st-encre-2);font-size:13px;font-weight:400}

/* Boutons : seuls éléments encadrés en plein. 44 px de cible. */
.st-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.st-actions--carte{margin-top:12px}
.st-actions form{margin:0}
.st-bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:9px;
  border:1px solid var(--st-filet);background:var(--st-surface);color:var(--st-encre);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;text-align:center}
.st-bouton--plein{background:var(--st-produit);border-color:var(--st-produit);color:#fff}
.st-bouton--petit{min-height:44px;padding:0 12px;font-size:13px}
.st-carte>.st-bouton{margin-top:12px}

/* États : point + texte. */
.st-etat{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.st-etat::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.st-etat--alerte{color:var(--st-alerte)}.st-etat--attente{color:var(--st-attente)}.st-etat--bon{color:var(--st-bon)}.st-etat--neutre{color:var(--st-encre-2)}

/* Bento : une colonne au téléphone, six au grand écran (largeurs posées par vue_bento_largeurs()). */
.st-bento{display:grid;gap:12px;margin-top:20px;grid-template-columns:minmax(0,1fr)}
.st-carte{background:var(--st-surface);border:1px solid var(--st-filet);border-radius:var(--st-rayon);padding:16px;min-width:0}
.st-carte__titre{font-size:13px;line-height:1.3;font-weight:600;color:var(--st-encre-2);margin:0 0 8px}
.st-carte__gros{font-size:24px;line-height:1.15;font-weight:800;letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
.st-carte__gros.st-mono,.st-ligne__montant.st-mono{font-family:inherit}   /* gros chiffres et montants : chiffres alignés (tnum) sans la chasse fixe, trop large en gras */
.st-carte__ligne{margin:6px 0 0;color:var(--st-encre-2)}
.st-carte--alerte{border-color:var(--st-alerte-bord);background:var(--st-alerte-fond)}
.st-carte--alerte .st-carte__gros{color:var(--st-alerte)}
.st-carte--attente{border-color:var(--st-attente-bord);background:var(--st-attente-fond)}
.st-liste-courte{list-style:none;margin:6px 0 0;padding:0}
.st-liste-courte li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--st-filet-2);min-width:0}
.st-liste-courte li:first-child{border-top:0}
.st-liste-courte li>span,.st-liste-courte li>a{min-width:0;overflow-wrap:anywhere}
.st-liste-courte li>a{text-decoration:none;flex:1}
.st-liste-courte form{margin:0;flex:none}
.st-liste-courte .st-retard>span>a{color:var(--st-alerte)}
.st-pouls{display:flex;flex-wrap:wrap;gap:6px 18px;margin:22px 0 0;color:var(--st-encre-2);font-size:14px}
.st-pouls span:first-child{font-weight:600;color:var(--st-encre)}
.st-pouls b{color:var(--st-encre)}

/* Barre d'ancres de la fiche : soulignée, collée sous la barre du haut. */
.st-ancres{position:sticky;top:0;z-index:5;background:var(--st-fond);margin:24px 0 0;border-bottom:1px solid var(--st-filet);
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.st-ancres::-webkit-scrollbar{display:none}
.st-ancres a{flex:none;display:flex;align-items:center;min-height:44px;padding:0 10px;text-decoration:none;color:var(--st-encre-2);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.st-ancres a[aria-current="true"]{color:var(--st-encre);border-bottom-color:var(--st-produit-plein)}

/* Sections et lignes : cartes empilées au téléphone, colonnes alignées au grand écran. */
.st-section{margin-top:26px;scroll-margin-top:56px}
.st-section__tete{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-bottom:10px}
.st-section__tete h3{font-size:18px;font-weight:700;margin:0}
.st-section__tete a{font-weight:600;color:var(--st-produit);text-decoration:underline;text-underline-offset:2px}
.st-lignes{background:var(--st-surface);border:1px solid var(--st-filet);border-radius:var(--st-rayon)}
.st-ligne{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:13px 16px;border-top:1px solid var(--st-filet-2);align-items:center}
.st-ligne:first-child{border-top:0}
.st-ligne__titre{font-weight:600;min-width:0;overflow-wrap:anywhere}
.st-ligne__titre a{text-decoration:none}
.st-ligne__titre a.st-etire::after{content:"";position:absolute;inset:0}   /* lien étiré : toute la ligne s'ouvre, sans onclick */
.st-ligne__sous{grid-column:1/-1;color:var(--st-encre-2);font-size:14px;min-width:0;overflow-wrap:anywhere}
.st-ligne__montant{text-align:right;font-weight:600;white-space:nowrap}
.st-ligne form,.st-ligne .st-bouton,.st-ligne a:not(.st-etire){position:relative;z-index:1}   /* les vrais gestes restent cliquables au-dessus du lien étiré */
.st-vide{padding:14px 16px;color:var(--st-encre-2);margin:0}
.st-deplie{padding:0 16px 14px}
.st-deplie summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--st-produit)}
.st-ligne:active{background:var(--st-fond)}

/* Écrans de liste : en-tête compté, bandeaux d'alerte bornés, filtres qui rejouent la même liste. */
.st-tete-liste{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.st-tete-liste p{margin:6px 0 0;color:var(--st-encre-2)}
.st-bandeaux{display:grid;gap:8px;margin-top:16px}
.st-bandeau{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 14px;border-radius:var(--st-rayon);
  border:1px solid var(--st-attente-bord);background:var(--st-attente-fond);color:#5a3a00;font-weight:500}
.st-bandeau--alerte{border-color:var(--st-alerte-bord);background:var(--st-alerte-fond);color:#7d1a1f}
.st-bandeau a{font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:2px;min-height:44px;display:inline-flex;align-items:center}
.st-filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0;padding:10px 0;border-bottom:1px solid var(--st-filet)}
.st-filtres input,.st-filtres select{min-height:44px;font-size:16px;font-family:inherit;border:1px solid var(--st-filet);border-radius:9px;background:var(--st-surface);padding:0 12px;color:var(--st-encre)}
.st-filtres input{flex:1 1 220px;min-width:0}
.st-filtres select{flex:1 1 160px;min-width:0}
.st-coche-filtre{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--st-encre-2)}
.st-coche-filtre input{width:20px;height:20px;min-height:0}
.st-filtres__n{margin-left:auto;font-size:13px;color:var(--st-encre-2);font-weight:600}
.st-liste{margin-top:14px}
.st-ligne--tete{display:none}
.st-qui{display:flex;align-items:center;gap:12px;min-width:0}
.st-initiales{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--st-produit-doux);color:var(--st-produit)}
.st-cellule{color:var(--st-encre-2);font-size:14px;min-width:0;overflow-wrap:anywhere}
.st-cellule b{color:var(--st-encre);font-weight:600}
.st-pager{display:flex;gap:8px;margin-top:14px}

/* Fiche technicien : position et journée. */
.st-position{display:flex;gap:12px;align-items:flex-start}
.st-position svg{width:26px;height:26px;flex:none;color:var(--st-produit-plein);margin-top:2px}
.st-source{font-size:12px;color:var(--st-encre-2)}
.st-journee{list-style:none;margin:6px 0 0;padding:0}
.st-journee li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;padding:9px 0;border-top:1px solid var(--st-filet-2);align-items:baseline}
.st-journee li:first-child{border-top:0}
.st-journee li>span{min-width:0;overflow-wrap:anywhere}
.st-journee .st-maintenant{background:var(--st-produit-doux);margin:0 -10px;padding:9px 10px;border-radius:8px}

/* Formulaires des fiches (modification fournisseur, interlocuteur). Champs à 16 px : pas de zoom iOS. */
.st-form{display:grid;gap:12px;padding:16px}
.st-form .st-champs{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.st-form label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--st-encre-2)}
.st-form input,.st-form select,.st-form textarea{min-height:44px;font-size:16px;font-family:inherit;border:1px solid var(--st-filet);border-radius:9px;padding:8px 12px;background:var(--st-surface);color:var(--st-encre);width:100%}
.st-form .st-aide{font-size:13px;font-weight:400;color:var(--st-encre-2)}
.st-form .st-coche{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--st-encre)}
.st-form .st-coche input{width:22px;min-height:22px}

/* Fenêtre de création (le formulaire d'avant, posé dans un <dialog>). */
.st-dialogue{border:none;border-radius:14px;padding:0;max-width:560px;width:calc(100vw - 32px);box-shadow:0 24px 60px -20px rgba(0,0,0,.35)}
.st-dialogue__tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--st-filet)}
.st-dialogue__corps{padding:16px}

/* Entrée en cascade (40 ms entre éléments, posée par assets/vues.js). L'état de REPOS est visible :
   sans JavaScript, ou avec « réduire les animations », tout s'affiche d'emblée. */
.st-anime .st-entre{animation:st-arriver .32s ease-out both}
@keyframes st-arriver{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.st-anime .st-entre{animation:none}}

/* Survol : seulement sur un vrai pointeur (au doigt, un :hover reste collé après le tap). */
@media (hover:hover) and (pointer:fine){
  .st-bouton:hover{border-color:var(--st-encre-2)}
  .st-bouton--plein:hover{background:#34500a;border-color:#34500a}
  .st-lignes .st-ligne:not(.st-ligne--tete):hover{background:#f8f9fb}
  .st-ancres a:hover{color:var(--st-encre)}
  .st-liste-courte li>a:hover{text-decoration:underline}
}

/* Grand écran : colonnes. */
@media (min-width:760px){
  .st-titre{font-size:30px}
  .st-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .st-b-1{grid-column:span 1}.st-b-2{grid-column:span 2}.st-b-3{grid-column:span 3}.st-b-4{grid-column:span 4}.st-b-5{grid-column:span 5}.st-b-6{grid-column:span 6}
  .st-ligne{grid-template-columns:minmax(0,2fr) minmax(0,3fr) 170px 120px}
  .st-ligne__sous{grid-column:auto}
  .st-ligne--l{grid-template-columns:var(--st-cols)}
  .st-ligne--tete{display:grid;font-size:12px;font-weight:700;color:var(--st-encre-2);padding-top:10px;padding-bottom:10px;background:#f7f8fa;border-radius:var(--st-rayon) var(--st-rayon) 0 0}
  .st-ligne--l .st-mob{display:none}
  .st-form .st-champs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:759px){
  /* Téléphone : qui + montant en tête, le détail dessous, l'état en pied. Rien n'est coupé, rien ne défile de côté. */
  .st-ligne--l{grid-template-columns:minmax(0,1fr) auto}
  .st-ligne--l .st-bureau{display:none}
  .st-ligne--l .st-qui{grid-column:1;grid-row:1}
  .st-ligne--l .st-ligne__montant{grid-column:2;grid-row:1}
  .st-ligne--l .st-ligne__sous{grid-column:1/-1;grid-row:2;padding-left:50px}
  .st-ligne--l>.st-etat{grid-column:1/-1;grid-row:3;padding-left:50px}
  .st-ligne:not(.st-ligne--l)>.st-etat{grid-column:1}
  .st-actions .st-bouton{flex:1 1 auto}
  .st-filtres__n{margin-left:0;width:100%}
}
/* Barre du haut au téléphone (04/10, retour de Rémi) : trois rangées nettes au lieu d'un tas où le choix de
   boutique se coupait (« JM Se… »). 1) titre + cloche, aide, compte ; 2) recherche pleine largeur ;
   3) boutique (prend la place) + « Noter ». Rien n'est retiré, seul l'ordre change. */
@media (max-width:640px){
  .top{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:8px}
  .top .tools{display:contents}
  .top .crumb{order:1;flex:1 1 0;min-width:0}
  .top .crumb h1{overflow-wrap:anywhere}
  .top .cloche,.top .aide-ancre,.top .me{order:2}
  .top .topsearch{order:3;flex:1 1 100%}
  .top .soc{order:4;flex:1 1 0;min-width:0}
  .top .soc select{width:100%;max-width:none;min-height:44px;font-size:16px}
  .top .noter-btn{order:5}
}
@media print{.st-ancres,.st-filtres,.st-actions{display:none!important}}