/* ══════════════════════════════════════════════════════════════════════════
   idmp_desk.css - LA VUE ORDINATEUR ET TABLETTE PAYSAGE DES PAGES DE DETAIL
   ══════════════════════════════════════════════════════════════════════════

   POURQUOI UN SEUL FICHIER POUR CINQ PAGES. Gloire, 29 aout 2026 : "mon
   probleme sur ordinateur c'est que l'espace est pas optimise et c'est moche
   [...] je veux ce style, cette police, ce fond transparent mis en avant".
   Cinq pages du meme parcours ne peuvent pas avoir cinq grammaires. Un seul
   fichier, une seule barriere de media, un seul numero de cache : deux pages
   ne peuvent pas deriver l'une de l'autre sans qu'on le voie ici.

   LA BARRIERE. min-width 1000 et min-height 620. La tablette en paysage
   (1024x768) passe, la tablette en portrait (768 de large) non, le telephone
   couche (932x430, trop court) non plus. Sous cette barriere, RIEN de ce
   fichier ne s'applique : les mises en page telephone et tablette portrait
   restent exactement ce qu'elles etaient.

   LE PRINCIPE. Ce qui etait derriere une fenetre ou un sous-onglet devient
   une COLONNE QUI DEFILE. Sur un ecran large, une fenetre modale cache la
   moitie de l'information pour en montrer un tiers ; une colonne les montre
   toutes et remplit l'espace qui etait vide. La page, elle, ne defile jamais :
   c'est la colonne qui defile a l'interieur d'une hauteur d'ecran.

   LE FOND. Pas de cartes grises posees sur du noir. Une lueur rouge en haut
   a gauche, le contenu directement dessus, et des filets d'un pixel pour
   separer. Les seuls aplats sont les appels a l'action importants, en orange,
   un seul par ecran.
   ══════════════════════════════════════════════════════════════════════════ */

body.dkp,
body.dkp-espace,
body.dkp-admin{
  --dk-or:#FF3019;
  --dk-tx:#FFFFFF;
  --dk-mu:#8E94A1;
  --dk-mu2:#666C79;
  --dk-fil:rgba(255,255,255,.085);
  --dk-fil2:rgba(255,255,255,.15);
  --dk-pad:clamp(26px,3vw,54px);
}

/* HORS BARRIERE : ni colonne de droite, ni element reserve au grand ecran.
   POSE AVANT les barrieres et non apres. Une regle de meme poids ecrite plus
   bas dans la feuille l'emporte sur celle d'un @media : placee en fin de
   fichier, cette ligne masquait pour toujours ce que la barriere venait
   d'afficher. */
.dkside,.dkonly,.dk-help{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   LA LUEUR, POUR TOUTES LES FICHES ET A TOUTES LES TAILLES
   Elle etait declaree DANS la barriere ordinateur depuis la refonte du 29
   aout, et personne ne s'en etait apercu : les fiches n'avaient donc AUCUNE
   lueur sur telephone. Gloire la demande partout le 30 aout, sur les deux
   versions. Sortie de la barriere, une seule declaration sert les deux : la
   regle jumelle qui vivait a l'interieur portait exactement les memes
   valeurs, elle n'avait plus de raison d'etre.

   ELLE NE VISE QUE LES FICHES, jamais le tableau de bord : lui poser une
   lueur en position fixe la ferait passer par-dessus sa barre laterale.

   Elle est FIXE et derriere tout : un fond qui glisse avec le texte donne le
   mal de mer, sur un grand ecran comme au pouce.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   LA PORTE DES ETAPES
   "Les etapes de l'acompte a la livraison", posee sous le bouton d'action de
   chaque ecran qui en a un. Elle ne porte ni fond ni cadre, seulement un
   filet : c'est une reassurance, elle ne dispute rien a l'orange du CTA.
   Le style vit ici et non dans chaque page : quatre ecrans l'utilisent, et
   quatre copies auraient diverge au premier retouche.
   ══════════════════════════════════════════════════════════════════════════ */
.et-lien{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:9px 2px;
  border:0;background:transparent;color:#B9BDC6;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:700;text-align:left;line-height:1.3;
  -webkit-tap-highlight-color:transparent;
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:color .14s,border-color .14s}
.et-lien > i{font-size:18px;color:#FF3019;flex:0 0 auto}
.et-lien:hover{color:#fff;border-color:#FF3019}
.et-lien:active{opacity:.75}
/* .dkonly est declare AVANT ce bloc et pese autant : la regle ecrite plus bas
   l'emporte, et la porte reservee au grand ecran s'affichait sur telephone.
   On rend la main a .dkonly ici, la barriere la reprendra plus bas. */
.et-lien.dkonly{display:none}

body.dkp{background:#000}
body.dkp::before{
  content:'';position:fixed;left:0;top:0;right:0;bottom:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120vh 90vh at 8% -18%,rgba(255,48,25,.20),rgba(255,48,25,0) 62%),
    radial-gradient(90vh 70vh at 96% 108%,rgba(255,48,25,.10),rgba(255,48,25,0) 60%);
}
/* Les racines de page CONNUES sont remontees au-dessus de la lueur. Jamais
   body.dkp > * : les fenetres plein ecran sont en position:fixed a ce niveau
   et perdraient leur ancrage. Bug paye le 29 aout 2026. */
body.dkp > .wrap,
body.dkp > .page,
body.dkp > .app,
body.dkp > .top,
body.dkp > main{position:relative;z-index:1}

@media (min-width:1000px) and (min-height:620px) {

/* ── 1. LE SOCLE COMMUN ────────────────────────────────────────────────── */

/* Les jetons sont declares ICI et non dans la barriere : ils sont demandes
   par des regles qui vivent HORS barriere (la ligne d'alerte, les sous-vues
   telephone). Une variable non declaree rend la declaration invalide, et la
   propriete retombe sur l'heritage : sur telephone, les textes gris passaient
   tous en blanc, sans erreur ni trace. Paye le 29 aout 2026. */
/* LA LUEUR A ETE SORTIE DE CETTE BARRIERE le 30 aout 2026 : elle est
   declaree plus haut, hors media, et vaut donc aussi sur telephone. Voir le
   bloc "LA LUEUR, POUR TOUTES LES FICHES". */
/* SEULE LA RACINE DE LA PAGE EST REMONTEE, PAS TOUS LES ENFANTS DU CORPS.
   La regle "body.dkp > *" imposait position:relative a TOUT enfant direct du
   corps : le configurateur, la visionneuse, les fenetres modales et le
   bandeau de chargement sont en position:fixed et posés a ce niveau. Ils
   perdaient leur position fixe et disparaissaient sous la page. Bug paye le
   29 aout 2026 : le bouton Configurer ouvrait un configurateur invisible.

   On nomme donc les racines une par une. Une page dont la racine n'est pas
   listee affiche simplement la lueur par-dessus, ce qui se voit tout de
   suite, la ou une fenetre morte ne se voit pas. */
body.dkp > .wrap,
body.dkp > .page,
body.dkp > .app,
body.dkp > main{position:relative;z-index:1}

/* ── 2. LES PRIMITIVES DE TEXTE ────────────────────────────────────────── */

.dk-eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dk-or);margin:0 0 14px;
}
.dk-eyebrow i{font-size:15px}
body.dkp .dk-eyebrow.dkonly{display:flex}
  /* .dkonly est masque hors barriere : la porte des etapes le redevient ici,
     en inline-flex et non en block, sans quoi le filet ferait toute la
     largeur de la colonne. */
  body.dkp .et-lien.dkonly{display:inline-flex}
.dk-eyebrow s{text-decoration:none;color:var(--dk-mu2);letter-spacing:.12em}

.dk-h1{
  font-size:clamp(34px,3.5vw,58px);font-weight:800;letter-spacing:-.032em;line-height:.95;
  margin:0;overflow-wrap:anywhere;
}
.dk-h1 em{font-style:normal;color:var(--dk-or)}
.dk-h1 small{display:block;margin-top:12px;font-size:15px;font-weight:600;letter-spacing:0;color:var(--dk-mu)}

.dk-lead{margin-top:14px;font-size:16px;line-height:1.55;color:var(--dk-mu);max-width:46ch}

/* ── 3. LA COLONNE QUI DEFILE ──────────────────────────────────────────── */

/* Le fondu haut et bas dit que ca continue, sans barre ni fleche. Sur les
   navigateurs sans masque, la colonne defile pareil : c'est de l'ornement,
   jamais une condition de lecture. */
/* LE FONDU EPARGNE LA GOUTTIERE, et il a fallu le lui apprendre. Un masque
   s applique a TOUT l element, sa barre de defilement comprise : le fondu
   mangeait donc les 18 px du haut et les 22 px du bas de la barre elle-meme,
   c est-a-dire exactement la zone ou la bille et les deux reperes se
   trouvent. Prouve au banc avec un masque binaire : la moitie haute de la
   barre disparaissait, rail et repere compris. Le defaut etait discret tant
   que la bille s arretait loin des bords ; en la ramenant a 11 px, on l
   amenait en plein dans le fondu.

   Le masque est donc pose en DEUX couches : la premiere porte le fondu sur
   le contenu, large de tout sauf la gouttiere ; la seconde couvre la
   gouttiere en opaque. Les couches d un masque s additionnent par defaut, la
   barre reste donc pleinement peinte. 16px est la largeur declaree plus bas
   pour [data-dksb]::-webkit-scrollbar : les deux valeurs doivent bouger
   ensemble. */
.dk-scroll{
  min-height:0;overflow-y:auto;overflow-x:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%),linear-gradient(#000,#000);
          mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%),linear-gradient(#000,#000);
    -webkit-mask-size:calc(100% - 16px) 100%,16px 100%;
          mask-size:calc(100% - 16px) 100%,16px 100%;
    -webkit-mask-position:left top,right top;
          mask-position:left top,right top;
    -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
}

/* Le titre de rubrique COLLE en haut de sa colonne : dans une longue liste,
   on sait toujours ce qu'on lit. Le fond noir sous le titre est necessaire,
   sinon les lignes passent au travers. */
.dk-sec{padding:0 0 clamp(20px,2.6vh,34px)}
.dk-sec-h{
  position:sticky;top:0;z-index:3;background:#000;
  display:flex;align-items:center;gap:10px;
  padding:14px 0 11px;margin-bottom:4px;border-bottom:1px solid var(--dk-fil);
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;
}
.dk-sec-h i{font-size:16px;color:var(--dk-or)}
.dk-sec-h b{margin-left:auto;font-weight:700;letter-spacing:.04em;color:var(--dk-mu2);text-transform:none;font-size:12px}

/* ── 4. LES LIGNES ET LES PASTILLES ────────────────────────────────────── */

.dk-kv{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14.5px}
.dk-kv:last-child{border-bottom:0}
.dk-kv > span:first-child{flex:1;min-width:0;color:var(--dk-mu)}
.dk-kv > span:last-child{flex:0 0 auto;text-align:right;font-weight:700;color:#fff}
.dk-kv u{text-decoration:none;color:var(--dk-mu2);font-weight:600}
.dk-kv.tot{border-top:1px solid var(--dk-fil2);border-bottom:0;margin-top:6px;padding-top:14px;font-size:17px}
.dk-kv.tot > span:first-child{color:#fff;font-weight:800}
.dk-kv.tot > span:last-child{font-size:19px;font-weight:800}

.dk-chip{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;
  border:1px solid var(--dk-fil2);border-radius:11px;background:transparent;color:#fff;
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;
}
.dk-chip i{font-size:16px;color:var(--dk-or)}
.dk-chip:hover{border-color:var(--dk-or);background:rgba(255,48,25,.07)}
.dk-chip:active{transform:translateY(1px)}
.dk-chip em{font-style:normal;color:var(--dk-mu2);font-weight:600}

.dk-tag{
  display:inline-flex;align-items:center;gap:7px;height:29px;padding:0 12px;
  border:1px solid var(--dk-fil);border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dk-mu);
}
.dk-tag.or{border-color:rgba(255,48,25,.42);color:#FF7A5C}
.dk-tag.ok{border-color:rgba(37,196,106,.42);color:#41D07E}

/* L'UNIQUE APLAT DE LA PAGE. Un seul par ecran : celui qui fait avancer la
   commande. Tout le reste est transparent, donc celui-la se voit sans avoir
   besoin de clignoter. */
.dk-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 30px;border:0;border-radius:14px;
  background:var(--dk-or);color:#fff;font-family:inherit;font-size:16px;font-weight:800;
  cursor:pointer;transition:filter .15s,transform .08s;
}
.dk-cta i{font-size:19px}
.dk-cta:hover{filter:brightness(1.09)}
.dk-cta:active{transform:translateY(1px)}
.dk-cta.plein{width:100%}

/* ── 5. LE VISUEL LIBRE ────────────────────────────────────────────────── */

/* La machine n'est pas dans une boite. Detouree sur le fond noir, avec sa
   propre ombre portee, elle a l'air d'un objet et non d'une vignette de
   catalogue. C'est tout l'ecart entre l'accueil telephone et ces pages. */
.dk-vis{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}
.dk-vis img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.72))}

/* ── 6. LA LIGNE D'AIDE ────────────────────────────────────────────────── */
/* Deux mises en relation ne meritent pas deux boutons. Une phrase au bas de
   la colonne suffit, et elle ne prend pas la place d'une information. */
.dk-help{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--dk-mu)}
.dk-help a,.dk-help button{appearance:none;border:0;background:transparent;padding:0;font-family:inherit;
  font-size:inherit;font-weight:800;color:#fff;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dk-help a:hover,.dk-help button:hover{color:var(--dk-or)}
.dk-help s{text-decoration:none;color:var(--dk-mu2)}

}

/* ══════════════════════════════════════════════════════════════════════════
   config_detail - MA CONFIGURATION
   ══════════════════════════════════════════════════════════════════════════
   AVANT : trois cartes empilees au centre d'un ecran de 1 440, quatre
   pastilles ouvrant quatre fenetres, et 40 % de la hauteur vide sous le tout.
   Le client voyait une facture, pas une machine.

   APRES : la machine a gauche, en grand, detouree sur la lueur, avec son prix
   et le seul bouton qui compte. A droite, la colonne qui defile porte ce qui
   etait dans les fenetres : ce qu'il a choisi, la fiche technique, le
   deroule de la commande. Rien n'est cache, rien ne se superpose, et les
   deux colonnes tiennent dans une hauteur d'ecran.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px) {

body.dkp-config .wrap{
  display:grid;width:min(1600px,100%);
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"top top" "body side";
  column-gap:clamp(34px,4vw,74px);row-gap:0;
  padding:clamp(20px,2.4vh,32px) var(--dk-pad) clamp(14px,1.8vh,24px);
}
body.dkp-config .top{grid-area:top;border-bottom:1px solid var(--dk-fil);padding-bottom:16px;margin-bottom:clamp(16px,2.4vh,30px)}
body.dkp-config .back{font-size:12px;letter-spacing:.15em;gap:11px}
body.dkp-config .back i{font-size:19px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--dk-fil2);border-radius:11px}
body.dkp-config .back:hover i{border-color:var(--dk-or);color:var(--dk-or)}
body.dkp-config .ref{font-size:12px;letter-spacing:.15em;font-weight:800;color:var(--dk-mu2)}

/* LA COLONNE DE GAUCHE. Elle ne defile pas : ce qu'elle porte doit tenir a
   l'ecran, sinon le prix et le bouton passeraient sous la ligne de flottaison
   et la page aurait rate son seul travail. */
body.dkp-config .body{grid-area:body;overflow:hidden;display:flex;flex-direction:column;gap:0}

/* Les cartes disparaissent. Elles ne portaient ni information ni hierarchie,
   seulement un cadre autour de chaque paragraphe. */
body.dkp-config .card{border:0;background:transparent;border-radius:0}
body.dkp-config .card-bd{padding:0}

/* Le troisieme repere annoncait le prix cle en main, que le montant de 44 px
   pose 200 pixels plus bas annonce deja. Deux fois la meme somme sur un meme
   ecran, c'est une hesitation, pas une insistance. */
body.dkp-config .spec:nth-child(3){display:none}
body.dkp-config .specs{justify-content:flex-start}

body.dkp-config .ttl{
  font-size:clamp(34px,3.4vw,56px);font-weight:800;letter-spacing:-.032em;line-height:.95;
  text-align:left;text-transform:uppercase;margin:0 0 clamp(12px,1.8vh,22px);
}

/* Le visuel prend toute la place restante de la colonne, sans cadre ni fond.
   min-height:0 sur le parent flex, sinon l'image impose sa hauteur naturelle
   et pousse le prix hors de l'ecran. */
/* La carte machine est la SEULE elastique de la colonne. Sans cette chaine
   de flex:1 et min-height:0, l'image imposait sa hauteur naturelle et le prix
   comme le bouton passaient sous la ligne de flottaison : la page aurait
   perdu la seule chose qu'elle doit montrer. */
body.dkp-config #carte-machine{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.dkp-config #carte-machine > .card-bd{flex:1;min-height:0;display:flex;flex-direction:column}
body.dkp-config .mach{display:flex;flex-direction:column;gap:clamp(12px,1.8vh,22px);flex:1;min-height:0;align-items:stretch}
body.dkp-config .mach-img{
  flex:1;min-height:0;max-height:none;aspect-ratio:auto;
  border:0;background:transparent;border-radius:0;
}
body.dkp-config .mach-img img{max-width:96%;max-height:100%;filter:drop-shadow(0 34px 44px rgba(0,0,0,.72))}
body.dkp-config .mach-img i{font-size:88px}

/* Les trois reperes passent sur une ligne, sans pastille : le libelle porte
   deja l'information, le cercle n'etait que du remplissage. */
body.dkp-config .specs{flex:0 0 auto;flex-direction:row;gap:clamp(20px,2.6vw,44px);
  padding-top:clamp(12px,1.7vh,20px);border-top:1px solid var(--dk-fil)}
body.dkp-config .spec{gap:11px;flex:0 0 auto}
body.dkp-config .spec-ic{width:34px;height:34px;border-radius:10px;font-size:16px;border-color:var(--dk-fil2)}
body.dkp-config .spec-l{font-size:10px;letter-spacing:.14em;color:var(--dk-mu2)}
body.dkp-config .spec-v{font-size:17px}

/* Le prix et la decision, sur une seule ligne : le montant a gauche, le
   bouton a droite. Empiles, ils faisaient deux blocs pleine largeur au bas
   d'une colonne deja haute. */
body.dkp-config .body > .card:last-of-type,
body.dkp-config .body > .card + .card{flex:0 0 auto}
body.dkp-config .prix{
  text-align:left;font-size:clamp(30px,2.9vw,44px);letter-spacing:-.03em;
}
body.dkp-config .prix small{font-size:14px;margin-top:5px}
body.dkp-config .cta{width:auto;height:56px;margin-top:0;padding:0 30px;border-radius:14px;font-size:15.5px}
body.dkp-config .cta-or{animation:none;box-shadow:0 14px 34px rgba(255,48,25,.30)}
body.dkp-config .cta-blanc{animation:none}

/* Prix + bouton cote a cote : on transforme la carte en rangee. La marge
   haute vient du filet, pas d'un vide arbitraire. */
body.dkp-config #carte-prix .card-bd{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2.4vw,38px);
  flex-wrap:wrap;padding-top:clamp(14px,2vh,22px);margin-top:clamp(12px,1.8vh,20px);
  border-top:1px solid var(--dk-fil);
}
body.dkp-config .msg{flex:1 1 100%;margin-top:4px}

/* Les trois pastilles qui ouvraient une fenetre n'ont plus lieu d'etre : leur
   contenu est a droite, en entier. Seul le devis reste, parce qu'il produit
   un fichier et non un affichage. */
body.dkp-config .acts{display:flex;gap:10px;flex:0 0 auto;margin-top:clamp(10px,1.5vh,16px)}
body.dkp-config .acts .act{display:none}
body.dkp-config .acts #btn-devis{
  display:inline-flex;height:40px;width:auto;padding:0 15px;border-radius:11px;
  border-color:var(--dk-fil2);background:transparent;font-size:13.5px;
}
body.dkp-config .acts #btn-devis:hover{border-color:var(--dk-or);background:rgba(255,48,25,.07)}
body.dkp-config .help{justify-content:flex-start;padding:12px 0 0;font-size:13px}

body.dkp-config .remise{flex:0 0 auto;padding:0;border:0;background:transparent;margin-top:clamp(10px,1.5vh,16px)}
body.dkp-config .remise-t,body.dkp-config .cd{display:none}
body.dkp-config .cd-1l{display:block;text-align:left;font-size:13px}

body.dkp-config .staff-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
body.dkp-config .staff-acts .cta{height:42px;padding:0 16px;font-size:13px;border-radius:11px}

/* ══ LA VUE DU CONSEILLER, AU MEME REGIME QUE LE RESTE ════════════════════
   Ajoutee le 1er septembre 2026, apres un degat visuel signale par Gloire.

   CE QUI S EST PASSE. Cette colonne a ete dessinee pour le CLIENT, et sa
   regle est qu elle ne defile pas : la carte machine est la seule elastique,
   flex:1 avec min-height:0, et elle absorbe seule toute la compression. La
   vue du conseiller pose EN PLUS sept lignes d identite, un menu d attribution
   et deux actions dans cette meme colonne. L elastique a donc absorbe le
   surplus jusqu au bout : photo mesuree a 0 px de haut, carte machine a 34
   pour 67 de contenu, et les deux reperes debordant par-dessus le prix. Ce
   n etait pas un chevauchement de style, c etait une colonne ecrasee.

   LE DISCRIMINANT EST .app, le cadre que idmp_shell.js ne batit que pour le
   personnel : tout ce bloc est donc invisible au client, dont la vue garde
   exactement la geometrie d origine.

   Le bloc client emprunte la langue de la page et n invente rien : filets
   dk-fil, libelles en petites capitales espacees comme .spec-l, valeurs au
   corps de .spec-v, aucun cadre ni fond. Il se lit comme les reperes qui le
   precedent, pas comme un formulaire rapporte. */

/* PLUS RIEN N EST ELASTIQUE DANS CETTE COLONNE, et c est tout le correctif.
   Chez le client la colonne ne defile pas, donc la carte machine doit ceder
   pour que le prix reste visible : d ou la chaine flex:1 / min-height:0 qui
   l autorise a rétrécir SOUS son contenu. Chez le conseiller la colonne
   defile, cette elasticite n a plus de raison d etre, et elle devient
   nuisible : la carte se comprimait a 34 px pour 67 de contenu, et ce qu elle
   ne pouvait plus contenir sortait par-dessus le bouton et le devis, puisque
   rien ne rogne un debordement en overflow visible.

   Chaque maillon de la chaine doit etre repris : en laisser un seul en flex:1
   avec min-height:0 suffit a reproduire l ecrasement. */
body.dkp-config .app #carte-machine,
body.dkp-config .app #carte-machine > .card-bd,
body.dkp-config .app .mach{flex:0 0 auto;min-height:auto}
body.dkp-config .app .mach{gap:clamp(10px,1.4vh,16px)}
body.dkp-config .app .mach-img{flex:0 0 auto;height:clamp(120px,17vh,190px)}

/* La colonne defile, elle, plutot que d ecraser ce qu elle porte. L attribut
   data-dksb-bloc lui donne la barre visible : sans lui idmp_scroll.js la
   prendrait pour la page, elle depasse 72 % de la hauteur. */
body.dkp-config .app .body{overflow-y:auto;padding-right:6px}

body.dkp-config .cli-h{
  font-size:10px;letter-spacing:.14em;color:var(--dk-mu2);gap:8px;
  padding-top:clamp(11px,1.6vh,18px);margin:clamp(11px,1.6vh,18px) 0 0;
  border-top:1px solid var(--dk-fil);
}
body.dkp-config .cli-h i{font-size:13px;color:var(--dk-or)}
body.dkp-config .cli-g{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(18px,2.4vw,40px);
  background:transparent;border:0;border-radius:0;margin-top:2px;
}
body.dkp-config .cli-l{
  background:transparent;padding:7px 0;gap:14px;
  border-bottom:1px solid var(--dk-fil);
}
body.dkp-config .cli-l span{font-size:11px;letter-spacing:.05em;color:var(--dk-mu2)}
body.dkp-config .cli-l b{font-size:13.5px}
body.dkp-config .cli-sel{
  height:42px;border-radius:12px;border-color:var(--dk-fil2);
  background:transparent;font-size:13.5px;margin-top:8px;
}
/* Le neutre prend la teinte du dessin, mais PAS les deux etats : cette regle
   pese (0,2,1) et battait .cli-msg.ok et .cli-msg.ko, restees en (0,2,0). Le
   vert du succes et le rouge de l echec viraient au meme gris que
   "Enregistrement...". Ce n est pas cosmetique : l UPDATE d attribution peut
   etre refuse par la RLS en 204 muet, attribuer() le detecte sur r.data.length
   et n a que cette couleur pour le dire. */
body.dkp-config .cli-msg{font-size:11.5px;color:var(--dk-mu2)}
body.dkp-config .cli-msg.ok{color:#3FD07A}
body.dkp-config .cli-msg.ko{color:#F87171}

/* LA COLONNE DE DROITE. Elle n'existe que sur grand ecran : sur telephone le
   meme contenu reste dans ses fenetres, ou il coute zero pixel tant qu'on ne
   l'ouvre pas. */
body.dkp-config .dkside{grid-area:side;display:block}
body.dkp-config .dkside .lg{font-size:14.5px;padding:11px 2px}
body.dkp-config .dkside .cat{padding:16px 2px 8px}
body.dkp-config .dkside .et{padding:15px 2px}

/* La fenetre modale n'a plus de raison de s'ouvrir sur grand ecran, mais on
   ne la desactive pas : un lien profond ou une traduction pourrait encore
   l'appeler, et une fenetre vide vaut mieux qu'une erreur. */
}

/* Hors barriere, la colonne de droite n'existe pas : le contenu reste dans
   les fenetres, comme avant. */

/* ══════════════════════════════════════════════════════════════════════════
   sav_detail - UNE REQUETE SAV
   ══════════════════════════════════════════════════════════════════════════
   AVANT : deux cartes de 1 000 pixels de large pour un paragraphe et une
   reponse, la carte de gauche vide sur 250 pixels de haut, et les deux textes
   plafonnes a 28vh et 24vh donc coupes alors qu'il restait de la place.

   APRES : la requete se lit comme un dossier. A gauche l'identite (machine,
   reference, statut, dates), a droite la conversation qui defile : ce que le
   client a decrit, puis ce que l'atelier a repondu. Les plafonds de hauteur
   sautent, c'est la colonne qui defile.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px) {

body.dkp-sav .page{padding:clamp(20px,2.4vh,32px) var(--dk-pad) clamp(16px,2vh,26px);gap:0}
body.dkp-sav .top{width:min(1600px,100%);border-bottom:1px solid var(--dk-fil);padding-bottom:16px;margin-bottom:clamp(18px,2.6vh,32px)}
body.dkp-sav .back{font-size:12px;letter-spacing:.15em;gap:11px}
body.dkp-sav .back > i{width:38px;height:38px;font-size:19px;border-color:var(--dk-fil2);background:transparent}
body.dkp-sav .back span{max-width:none}

body.dkp-sav .content{
  width:min(1600px,100%);
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  column-gap:clamp(34px,4.4vw,80px);
}
body.dkp-sav .card{background:transparent;border:0;border-radius:0;padding:0;overflow:visible}

body.dkp-sav .summary{justify-content:flex-start}
body.dkp-sav .eyebrow{letter-spacing:.19em;font-size:11.5px;margin-bottom:16px}
body.dkp-sav .title{font-size:clamp(34px,3.4vw,56px);letter-spacing:-.032em;line-height:.95;margin-bottom:12px}
body.dkp-sav .ref{font-size:14px;color:var(--dk-mu);margin-bottom:clamp(24px,3.4vh,44px)}

/* Les quatre reperes perdent leurs cadres : quatre boites grises alignees
   n'apportent rien qu'un filet ne dise mieux. */
body.dkp-sav .meta{margin-top:0;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.4vw,40px)}
body.dkp-sav .meta-item{border:0;border-top:1px solid var(--dk-fil);background:transparent;border-radius:0;padding:15px 0}
body.dkp-sav .meta-label{font-size:10px;letter-spacing:.14em;color:var(--dk-mu2);margin-bottom:6px}
body.dkp-sav .meta-value{font-size:17px}

body.dkp-sav .details{min-height:0;display:flex;flex-direction:column}
/* Les deux textes ne sont plus plafonnes : c'est la colonne qui defile, donc
   une reponse longue se lit en entier au lieu d'etre tronquee a 24vh. */
body.dkp-sav .section-label{
  position:sticky;top:0;z-index:3;background:#000;
  padding:0 0 11px;margin-bottom:4px;border-bottom:1px solid var(--dk-fil);
  font-size:11.5px;letter-spacing:.16em;color:#fff;
}
/* Les mots du client, en grand. C'est lui qui a decrit la panne : sa phrase
   merite le corps de texte le plus large de la page, pas la taille d'une
   mention legale. */
body.dkp-sav .description{
  max-height:none;overflow:visible;border:0;background:transparent;border-radius:0;padding:20px 0 0;
  font-size:clamp(17px,1.35vw,20px);line-height:1.58;color:#DDE1E8;flex:0 0 auto;
}
/* La reponse prend la hauteur restante. Une carte de 90 pixels sous 400
   pixels de noir se lit comme un oubli ; la meme carte etiree jusqu'au bas de
   la colonne se lit comme la reponse d'un atelier. */
body.dkp-sav .answer{
  margin-top:clamp(22px,3vh,36px);border-radius:16px;padding:clamp(20px,2.2vw,30px);
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
body.dkp-sav .answer-text{flex:1;min-height:0;overflow-y:auto}
body.dkp-sav .answer-head{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
body.dkp-sav .answer-text{max-height:none;overflow:visible;font-size:15.5px;line-height:1.62}

/* LA CHRONOLOGIE. Elle occupe le milieu de la colonne, entre l'identite et
   les reperes : c'est elle qui donne a la page sa hauteur, et elle le fait
   avec de l'information et non avec de la marge. */
body.dkp-sav .dk-chrono{display:flex;flex-direction:column;gap:0;margin:auto 0 clamp(24px,3.4vh,44px)}
body.dkp-sav .dk-chrono-l{display:flex;align-items:center;gap:15px;padding:15px 0;border-top:1px solid var(--dk-fil)}
body.dkp-sav .dk-chrono-l > i{
  flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
  border:1px solid var(--dk-fil);color:var(--dk-mu2);font-size:17px;
}
body.dkp-sav .dk-chrono-l.on > i{border-color:rgba(37,196,106,.45);color:#41D07E}
body.dkp-sav .dk-chrono-l span{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dk-mu2);margin-bottom:4px}
body.dkp-sav .dk-chrono-l b{font-size:16px;font-weight:800}
body.dkp-sav .dk-chrono-l:not(.on) b{color:var(--dk-mu2);font-weight:700}

/* Les reperes tombent au bas de la colonne : c'est la ou l'oeil va chercher
   les references, et cela ancre la page au lieu de la laisser flotter. */
body.dkp-sav .meta{margin-top:0}

body.dkp-sav .dk-help{margin-top:clamp(20px,2.6vh,32px);padding-top:clamp(18px,2.4vh,28px);border-top:1px solid var(--dk-fil)}

}



/* ══════════════════════════════════════════════════════════════════════════
   alerte_detail - L'ANNONCE TROUVEE POUR VOUS
   ══════════════════════════════════════════════════════════════════════════
   AVANT : la photo dans un cadre noir sur un fond noir, le nom du modele
   ecrit deux fois (une fois au-dessus de l'image, une fois dans la colonne),
   les criteres dans huit petites boites, et le tout tasse dans le tiers haut
   de l'ecran.

   APRES : la machine occupe la gauche en entier, detouree, sans cadre. La
   droite devient une page de vente : ce qu'on a cherche, ce qu'on a trouve,
   combien, et le seul bouton qui engage. Les criteres passent en lignes.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px) {

body.dkp-alerte .page{padding:clamp(20px,2.4vh,32px) var(--dk-pad) clamp(16px,2vh,26px);gap:0}
body.dkp-alerte .top{width:min(1600px,100%);border-bottom:1px solid var(--dk-fil);padding-bottom:16px;margin-bottom:clamp(16px,2.4vh,28px)}
body.dkp-alerte .back{font-size:12px;letter-spacing:.15em;gap:11px}
body.dkp-alerte .back i{font-size:19px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--dk-fil2);border-radius:11px}
body.dkp-alerte .back:hover i{border-color:var(--dk-or);color:var(--dk-or)}
body.dkp-alerte .back span{max-width:none}
body.dkp-alerte .stage{width:min(1600px,100%)}

body.dkp-alerte .found{
  grid-template-columns:minmax(0,1.16fr) minmax(400px,.84fr);
  column-gap:clamp(34px,4.4vw,80px);
}

/* Le nom etait ecrit deux fois sur le meme ecran : au-dessus de l'image en
   petites capitales, et dans la colonne de droite. On garde celui de droite,
   qui devient le titre de la page. */
body.dkp-alerte .product-title{display:none}
body.dkp-alerte .visual{grid-template-rows:minmax(0,1fr) auto;gap:clamp(12px,1.8vh,20px)}

/* La photo sort de sa boite. Un cadre noir sur un fond noir n'encadre rien :
   il ajoute juste un lisere gris autour d'un objet deja detoure. */
body.dkp-alerte .hero{border:0;background:transparent;border-radius:0}
/* Le fond noir de la balise image dessinait un rectangle plus sombre que la
   lueur, visible comme un cadre alors qu'on venait d'enlever le cadre. */
body.dkp-alerte .hero img{background:transparent;filter:drop-shadow(0 34px 46px rgba(0,0,0,.75))}
/* Une seule photo : la rangee de vignettes montre une vignette entre deux
   fleches qui ne menent nulle part. */
body.dkp-alerte .thumb-row.solo{display:none}
body.dkp-alerte .counter{top:0;right:0;background:transparent;border:0;color:var(--dk-mu2);
  font-size:11.5px;letter-spacing:.14em}
body.dkp-alerte .arrow{width:46px;height:46px;background:rgba(255,255,255,.04);border-color:var(--dk-fil2)}
body.dkp-alerte .arrow:hover{background:#fff;color:#000;border-color:#fff}
body.dkp-alerte .thumb{border-width:1px;border-color:var(--dk-fil);border-radius:11px;background:transparent}
body.dkp-alerte .thumb.on{border-color:var(--dk-or)}
body.dkp-alerte .thumb-arrow{border-color:var(--dk-fil2);background:transparent}

/* La colonne de droite se lit de haut en bas comme une page de vente : d'ou
   vient cette annonce, ce que c'est, combien, ce qu'on avait demande, et la
   decision. Elle est ancree en haut, plus centree : centre, le bouton
   remontait au milieu de l'ecran et laissait un vide sous lui. */
body.dkp-alerte .info{justify-content:flex-start;gap:0}
body.dkp-alerte .mode-row{gap:8px;margin-bottom:clamp(16px,2.2vh,26px)}
body.dkp-alerte .pill{height:29px;padding:0 12px;border-radius:999px;border-color:var(--dk-fil);
  background:transparent;color:var(--dk-mu);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
body.dkp-alerte .pill.orange{border-color:rgba(255,48,25,.42);color:#FF7A5C;background:transparent}

body.dkp-alerte .found-name{
  font-size:clamp(32px,3.2vw,52px);letter-spacing:-.032em;line-height:.96;
  margin-bottom:clamp(18px,2.4vh,30px);
}

/* Le prix quitte sa carte : sur un fond deja sombre, un degrade gris autour
   d'un chiffre ne fait que le rapetisser. */
body.dkp-alerte .price-card{
  border:0;border-top:1px solid var(--dk-fil);border-bottom:1px solid var(--dk-fil);
  background:transparent;border-radius:0;padding:clamp(16px,2.2vh,26px) 0;
}
body.dkp-alerte .price-label{font-size:10px;letter-spacing:.14em;color:var(--dk-mu2);margin-bottom:9px}
body.dkp-alerte .price{font-size:clamp(38px,3.8vw,60px);letter-spacing:-.035em}
body.dkp-alerte .ttc{font-size:15px;color:var(--dk-mu);margin-top:9px}

/* Les criteres etaient huit boites de 9 pixels de texte. Ce sont des lignes :
   ce qu'on a demande a gauche, ce que ca vaut a droite. La colonne defile si
   la recherche etait detaillee. */
body.dkp-alerte .criteria{
  display:block;margin:clamp(14px,2vh,22px) 0 0;min-height:0;overflow-y:auto;
  }
body.dkp-alerte .criterion{
  display:flex;align-items:baseline;gap:16px;
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.05);border-radius:0;padding:11px 0;
}
body.dkp-alerte .criterion span{
  flex:1;min-width:0;margin:0;font-size:13px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--dk-mu);
}
body.dkp-alerte .criterion strong{flex:0 0 auto;font-size:15px;white-space:normal;text-align:right}

body.dkp-alerte .actes{margin-top:auto;padding-top:clamp(18px,2.4vh,28px);gap:11px}
body.dkp-alerte .order-btn{height:58px;border-radius:14px;font-size:16px;box-shadow:0 14px 34px rgba(255,48,25,.30)}
body.dkp-alerte .alt-btn{height:44px;border-radius:12px;border-color:var(--dk-fil2);font-size:13.5px}
body.dkp-alerte .alt-btn:hover{border-color:var(--dk-or);background:rgba(255,48,25,.07);color:#fff}
body.dkp-alerte .order-note{text-align:left;font-size:12.5px;color:var(--dk-mu2)}

/* L'ATTENTE. Une carte de 680 pixels au milieu d'un ecran de 1 600 : le logo
   qui respire est bon, le cadre autour ne sert a rien. On garde le souffle,
   on enleve la boite, et le texte passe a la taille d'une annonce. */
body.dkp-alerte .pending-card{
  width:min(760px,100%);border:0;background:transparent;padding:0;
}
body.dkp-alerte .pending h1{font-size:clamp(38px,3.6vw,58px);letter-spacing:-.032em;line-height:.98;margin-bottom:16px}
body.dkp-alerte .pending p{font-size:17px;line-height:1.6}

}

/* ══════════════════════════════════════════════════════════════════════════
   ad_detail - LA FICHE D'UNE MACHINE (avant configuration)
   ══════════════════════════════════════════════════════════════════════════
   AVANT : le nom du modele en 19 pixels centres tout en haut, la photo a
   gauche, et a droite une carte de 300 pixels flottant au milieu de 700
   pixels de noir. La fiche technique etait derriere un bouton, l'appel a
   l'action a cote de lui, en haut, la ou personne ne decide encore.

   APRES : la machine occupe la gauche en entier. La droite se lit comme une
   page de vente : le nom en grand, le prix, ce qui est deja dedans, les
   reperes, puis la fiche technique qui defile et remplit la colonne. Les deux
   boutons descendent au bas, la ou on decide, et le bouton Configurer porte
   seul l'orange.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px) {

body.dkp-ad .offer-shell{padding:0 var(--dk-pad) clamp(16px,2vh,26px)}
body.dkp-ad .offer-back{border-bottom:1px solid var(--dk-fil);padding-bottom:15px;margin-bottom:clamp(16px,2.4vh,28px);
  font-size:12px;letter-spacing:.15em;gap:11px}
body.dkp-ad .offer-back i{font-size:19px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--dk-fil2);border-radius:11px}
body.dkp-ad .offer-back:hover i{border-color:var(--dk-or);color:var(--dk-or)}
/* Le libelle du retour garde son retour a la ligne : le supprimer collait
   les deux mots, et le remplacer par un texte fabrique en CSS aurait fait
   sortir la phrase du moteur de traduction. */
body.dkp-ad .offer-back span{line-height:1.25}

/* Le titre du haut cede la place a celui de la colonne. */
body.dkp-ad .offer-shell > .offer-title{display:none}
body.dkp-ad .offer-grid{grid-template-columns:minmax(0,1.2fr) minmax(420px,.8fr);gap:clamp(34px,4.4vw,80px)}

/* La photo sort de sa boite noire, comme sur l'alerte. */
body.dkp-ad .offer-gallery .gal-stage,
body.dkp-ad .offer-gallery .gal-track,
body.dkp-ad .offer-gallery .gal-slide{background:transparent}
body.dkp-ad .offer-gallery .gal-slide img{background:transparent;filter:drop-shadow(0 34px 46px rgba(0,0,0,.75))}
body.dkp-ad .offer-thumb-strip,
body.dkp-ad .offer-gallery .gal-thumbs{background:transparent}
body.dkp-ad .offer-gallery .gthumb,
body.dkp-ad .offer-gallery .gthumb img{background:transparent !important;border-color:var(--dk-fil)}
body.dkp-ad .offer-gallery .gthumb.on{border-color:var(--dk-or)}
body.dkp-ad .offer-gallery .gal-nav{border-color:var(--dk-fil2);background:rgba(255,255,255,.04)}
body.dkp-ad .offer-gallery .gal-nav:hover{background:#fff;color:#000;border-color:#fff}
body.dkp-ad .gal-count{background:transparent;color:var(--dk-mu2);font-size:11.5px;letter-spacing:.12em;top:0;right:0}

/* La colonne se lit de haut en bas et n'a plus de trou : titre, prix, ce
   qu'il y a dedans, reperes, fiche qui defile, decision. */
body.dkp-ad .offer-side{justify-content:flex-start;gap:0;min-height:0}
body.dkp-ad .offer-title-dk{
  display:block;margin:0 0 clamp(10px,1.4vh,18px);padding:0;border:0;
  font-size:clamp(28px,2.6vw,44px);font-weight:800;letter-spacing:-.032em;line-height:.96;
  text-transform:uppercase;white-space:normal;
}
body.dkp-ad .offer-title-dk b{color:var(--dk-or)}

/* La carte de resume perd son cadre : sur un fond deja noir, un lisere gris
   autour du prix ne fait que le rapetisser. */
body.dkp-ad .offer-summary{
  border:0;border-top:1px solid var(--dk-fil);border-radius:0;background:transparent;
  padding:clamp(11px,1.5vh,17px) 0 0;gap:clamp(8px,1.1vh,12px);flex:0 0 auto;
}
body.dkp-ad .offer-sum-mid{gap:7px}
body.dkp-ad .offer-price{font-size:clamp(34px,3vw,50px);letter-spacing:-.035em}
body.dkp-ad .offer-ttc{margin-top:4px;font-size:14px;color:var(--dk-mu)}
body.dkp-ad .offer-pre{gap:4px}
body.dkp-ad .offer-pre li{font-size:13.5px;color:#C7CBD4}
body.dkp-ad .offer-chip{min-height:27px;padding:0 10px;border-radius:999px;border-color:var(--dk-fil);
  background:transparent;color:var(--dk-mu);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
body.dkp-ad .offer-chip.ton{background:transparent;border-color:rgba(255,48,25,.42);color:#FF7A5C}
body.dkp-ad .offer-chip b{color:#fff}
body.dkp-ad .veh-meta{padding-top:7px;border-color:var(--dk-fil)}
body.dkp-ad .veh-iconbtn{width:32px;height:32px;border-color:var(--dk-fil2);background:transparent}

/* LA FICHE TECHNIQUE PREND LA HAUTEUR RESTANTE. C'est elle qui remplit la
   colonne : sans elle, le bouton flottait au milieu de 400 pixels de vide. */
/* Le haut titre/prix gardait une echelle de page vitrine et ne laissait plus
   qu'une ligne de fiche visible sur les vues admin et tablette paysage. On
   garantit desormais une vraie fenetre de lecture a la fiche ; les quelques
   pixels necessaires sont recuperes sur les marges et non sur son contenu. */
body.dkp-ad .offer-dkfiche{display:flex;flex-direction:column;flex:1;min-height:180px;margin-top:clamp(8px,1.1vh,12px)}
body.dkp-ad .offer-dkfiche .fiche{border:0;border-radius:0;background:transparent;overflow:visible}
body.dkp-ad .offer-dkfiche .fiche-cat + .fiche-cat{border-top:0}
body.dkp-ad .offer-dkfiche .fiche-cat-hd{
  background:transparent;color:var(--dk-or);padding:16px 0 8px;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
/* La bande grise une ligne sur deux venait de la vue tableau claire de
   l'administration. Dans une colonne posee sur la lueur, elle dessine des
   barres qui n'ont plus rien a separer : un filet suffit. */
body.dkp-ad .offer-dkfiche .fiche-row,
body.dkp-ad .offer-dkfiche .fiche-row:nth-child(even){
  display:flex;align-items:baseline;gap:16px;padding:10px 0;background:transparent;
  border-bottom:1px solid rgba(255,255,255,.05);
}
body.dkp-ad .offer-dkfiche .fiche-c1{flex:1;min-width:0;padding:0;border:0;border-right:0;background:transparent;
  font-size:13.5px;font-weight:600;color:var(--dk-mu)}
body.dkp-ad .offer-dkfiche .fiche-c2{flex:0 0 auto;padding:0;border:0;background:transparent;
  font-size:14.5px;font-weight:700;color:#fff;text-align:right}

/* Les deux boutons descendent au bas de la colonne, la ou on decide. Le
   bouton qui ouvrait la fiche n'a plus d'objet : elle est juste au-dessus. */
body.dkp-ad .offer-actions2{order:9;margin-top:clamp(9px,1.2vh,13px);padding-top:clamp(9px,1.2vh,13px);
  border-top:1px solid var(--dk-fil);grid-template-columns:1fr;gap:10px;flex:0 0 auto}
body.dkp-ad .offer-actions2 .offer-fiche{display:none}
body.dkp-ad .offer-config{height:52px;border-radius:14px;font-size:16px;font-weight:800;
  box-shadow:0 14px 34px rgba(255,48,25,.30)}
body.dkp-ad .veh-launch{order:9;margin-top:clamp(9px,1.2vh,13px);height:52px;border-radius:14px;font-size:16px;
  box-shadow:0 14px 34px rgba(255,48,25,.30);flex:0 0 auto}
body.dkp-ad .offer-admin-actions{order:10;flex:0 0 auto;margin-top:8px}
body.dkp-ad .offer-admin-actions button{min-height:44px}
/* Fiche vehicule : le bouton Options incluses reste, la fiche technique est
   deja dans la colonne. Deux boutons cote a cote quand il en reste deux. */
body.dkp-ad .offer-shell--veh .offer-actions2 .offer-fiche:last-child{display:inline-flex;height:44px;border-radius:12px;
  border-color:var(--dk-fil2);font-size:14px;font-weight:700}
body.dkp-ad .offer-shell--veh .offer-actions2 .offer-fiche:last-child:hover{border-color:var(--dk-or);background:rgba(255,48,25,.07)}
body.dkp-ad .offer-shell--veh > .offer-title,
body.dkp-ad .offer-shell--veh > .offer-grid{padding-left:0;padding-right:0}

}

/* ══════════════════════════════════════════════════════════════════════════
   order_detail - MA COMMANDE (coque client #odc)
   ══════════════════════════════════════════════════════════════════════════
   AVANT : deux cartes, et a droite trois lignes a chevron qui remplacaient
   l'ecran par un sous-onglet. Suivre la commande, Documents, Paiements :
   trois clics pour trois informations qui tiennent toutes dans la colonne,
   et un ecran de 1 440 qui n'affichait jamais que l'une des trois.

   APRES : la machine a gauche, sans cadre. A droite, TOUT est la, empile dans
   une colonne qui defile : le conseiller, le suivi, les paiements, les
   documents, la configuration, la fiche, le chat. Les lignes a chevron
   disparaissent, les titres de section restent colles en haut de la colonne
   pour qu'on sache toujours ou on est.

   Les vues restent des vues : sous la barriere, la navigation par sous-onglet
   est intacte. C'est la seule facon de tenir sur un telephone.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px) {

body.odc-on #odc{padding:clamp(20px,2.4vh,32px) var(--dk-pad) clamp(14px,1.8vh,24px);gap:0}

body.dkp-order .odc-top{width:min(1600px,100%);border-bottom:1px solid var(--dk-fil);
  padding-bottom:16px;margin-bottom:clamp(16px,2.4vh,28px)}
body.dkp-order .odc-back{font-size:12px;letter-spacing:.15em;gap:11px}
body.dkp-order .odc-back i{font-size:19px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--dk-fil2);border-radius:11px}
body.dkp-order .odc-back:hover i{border-color:var(--dk-or);color:var(--dk-or)}
body.dkp-order .odc-back span{max-width:none}
body.dkp-order .odc-ref{font-size:12px;letter-spacing:.15em;color:var(--dk-mu2);text-align:left;margin:2px 0 0}

body.dkp-order .odc-stage{
  width:min(1600px,100%);
  grid-template-columns:minmax(0,1.04fr) minmax(440px,.96fr);
  column-gap:clamp(34px,4.4vw,74px);
}

/* ── colonne de gauche : la machine ── */
/* QUATRE RANGEES, PAS TROIS : la reference est descendue sous le titre le
   30 aout 2026, et une grille compte ses PISTES, pas ses enfants. Avec trois
   rangees declarees pour quatre enfants, la reference tombait dans une piste
   de zero pixel et disparaissait de l ordinateur sans que rien ne le signale. */
body.dkp-order .odc-mach{padding:0;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(12px,1.8vh,20px)}
/* Elle appartient au titre : le gap de la grille l en eloignait de vingt pixels. */
body.dkp-order .odc-ref{margin-top:calc(2px - clamp(12px,1.8vh,20px)) !important}
body.dkp-order .odc-ttl{
  font-size:clamp(32px,3.2vw,54px);font-weight:800;letter-spacing:-.032em;line-height:.95;
  text-align:left;text-transform:uppercase;white-space:normal;overflow:visible;
}
body.dkp-order .odc-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
  gap:clamp(12px,1.8vh,20px);min-height:0}
body.dkp-order .odc-photo{min-height:0}
body.dkp-order .odc-photo img{filter:drop-shadow(0 34px 44px rgba(0,0,0,.72))}
body.dkp-order .odc-specs{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
  gap:clamp(16px,2.2vw,36px);padding-top:clamp(12px,1.7vh,20px);border-top:1px solid var(--dk-fil)}
body.dkp-order .odc-sp{flex:0 0 auto;gap:11px}
body.dkp-order .odc-sp i{width:34px;height:34px;border-radius:10px;font-size:16px;border-color:var(--dk-fil2)}
body.dkp-order .odc-sp-k{font-size:10px;letter-spacing:.14em;color:var(--dk-mu2)}
body.dkp-order .odc-sp-v{font-size:17px}
body.dkp-order .odc-sp.hi .odc-sp-v{font-size:24px}

/* Les deux pastilles deviennent des ancres : leur contenu est desormais dans
   la colonne de droite, elles y font defiler au lieu de changer d'ecran. */
body.dkp-order .odc-mbtns{display:flex;gap:10px;padding-top:clamp(12px,1.7vh,18px);border-top:1px solid var(--dk-fil)}
body.dkp-order .odc-chip{height:40px;padding:0 15px;border:1px solid var(--dk-fil2);border-radius:11px;gap:8px;
  font-size:13.5px;font-weight:700}
body.dkp-order .odc-chip:hover{border-color:var(--dk-or);background:rgba(255,48,25,.07)}
body.dkp-order .odc-chip i{width:auto;height:auto;border:0;background:transparent;border-radius:0;font-size:16px;color:var(--dk-or)}
body.dkp-order .odc-chip:hover i{transform:none}

/* ── colonne de droite : TOUT, empile, qui defile ── */
body.dkp-order .odc-pane{
  display:flex;flex-direction:column;grid-template-rows:none;
  min-height:0;overflow-y:auto;overflow-x:hidden;
  }
/* Toutes les vues sont visibles a la fois. L'ordre du balisage n'est pas
   l'ordre de lecture d'un client : il veut savoir ou en est sa commande, ce
   qu'il doit payer, ce qu'il a recu, puis ce qu'il a choisi. */
body.dkp-order .odc-view{display:flex !important;grid-area:auto;overflow:visible;flex:0 0 auto;
  padding-bottom:clamp(18px,2.4vh,30px)}
body.dkp-order #odc-v-home {order:1}
body.dkp-order #odc-v-suivi{order:2}
body.dkp-order #odc-v-pay  {order:3}
body.dkp-order #odc-v-docs {order:4}
body.dkp-order #odc-v-video{order:5}
body.dkp-order #odc-v-config{order:6}
body.dkp-order #odc-v-fiche{order:7}
body.dkp-order #odc-v-chat {order:8}
body.dkp-order .odc-view.odc-home{overflow:visible}

/* Les trois lignes a chevron n'ont plus de destination : elles ouvraient ce
   qui est maintenant juste en dessous. */
body.dkp-order .odc-rows{display:none}

/* L'entete d'une vue devient un titre de section, colle en haut de la colonne
   pendant qu'on lit la section. Le chevron de retour n'a plus d'objet. */
body.dkp-order .odc-vh{
  position:sticky;top:0;z-index:3;background:#000;
  padding:14px 0 11px;margin-bottom:6px;border-bottom:1px solid var(--dk-fil);
}
body.dkp-order .odc-x{display:none}
body.dkp-order .odc-vh-t{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff}
body.dkp-order .odc-vb{overflow:visible;min-height:0}

body.dkp-order .odc-cons{padding:0 0 clamp(18px,2.4vh,28px);border-bottom:1px solid var(--dk-fil)}
body.dkp-order .odc-cons-t{text-align:left;font-size:11.5px;letter-spacing:.16em}

/* Le chat garde sa hauteur propre : dans une colonne qui defile, une zone de
   messages sans plafond ferait fuir le champ de saisie vers le bas. */
body.dkp-order .odc-chat{display:flex;flex-direction:column;min-height:0}
body.dkp-order .odc-msgs{height:clamp(220px,30vh,340px);overflow-y:auto}

}

/* ══════════════════════════════════════════════════════════════════════════
   dashboard client - LES QUATRE RUBRIQUES A ONGLETS
   (Lancer une alerte, Mes commandes, Mes configurations, Requetes SAV)
   ══════════════════════════════════════════════════════════════════════════
   AVANT : un titre de 18 pixels, une reglette d'onglets grise, et surtout une
   grande boite #2C2D33 qui remplissait l'ecran qu'il y ait une ligne dedans ou
   aucune. Une commande unique flottait en haut de 700 pixels de gris.

   APRES : plus de boite. Le titre prend la taille des pages de detail, les
   onglets deviennent des libelles poses sur un filet, et la liste s'ecrit
   directement sur le fond. Un ecran vide n'est plus un cadre vide : c'est le
   bloc qui explique la rubrique (voir VIDES dans idmp_dashboard.html).

   AUCUNE REGLE DE display SUR UN .sec ICI. Les rubriques sont masquees par
   `.sec{display:none}` et revelees par `.sec.on` : une regle de plus fort
   poids sans `.on` rallumerait la rubrique sous tous les onglets. Deja paye.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px) {

/* ── l'en-tete de rubrique ── */
body.dkp-espace .content{padding:clamp(20px,2.4vh,30px) var(--dk-pad) 0}
body.dkp-espace .sec-hd{align-items:flex-end;margin-bottom:0;padding-bottom:clamp(14px,2vh,22px)}
body.dkp-espace .sec-ttl{
  font-size:clamp(30px,3vw,46px);font-weight:800;letter-spacing:-.032em;line-height:1;
}
body.dkp-espace .sec-sub{font-size:15px;color:var(--dk-mu);margin-top:11px;max-width:56ch;line-height:1.5}

/* Le bouton d'action de la rubrique : le seul aplat orange de l'ecran. */
body.dkp-espace .sec-hd > button{
  height:48px !important;padding:0 22px !important;border-radius:13px !important;
  font-size:14.5px !important;box-shadow:0 12px 30px rgba(255,48,25,.26);
}

/* ── la reglette d'onglets, sans chrome ── */
body.dkp-espace .it-bar.browser{
  gap:clamp(18px,2.2vw,34px);margin:0;border-bottom:1px solid var(--dk-fil);align-items:center;
}
body.dkp-espace .it-bar.browser .it-tab{
  height:auto;padding:0 0 13px;border:0;border-radius:0;background:transparent;
  color:var(--dk-mu2);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  margin:0;top:0;position:relative;
}
body.dkp-espace .it-bar.browser .it-tab::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;
}
body.dkp-espace .it-bar.browser .it-tab:hover{background:transparent;color:#C9CDD6}
body.dkp-espace .it-bar.browser .it-tab.on{
  height:auto;background:transparent;color:#fff;border-color:transparent;top:0;
}
body.dkp-espace .it-bar.browser .it-tab.on::after{background:var(--dk-or)}
body.dkp-espace .it-bar.browser .it-tab .n{
  background:transparent;color:var(--dk-mu2);font-size:11.5px;padding:0 0 0 7px;
}
body.dkp-espace .it-bar.browser .it-tab.on .n{background:transparent;color:var(--dk-or)}

/* ── la surface de contenu perd sa boite ── */
body.dkp-espace .it-body{
  background:transparent;border:0;border-radius:0;padding:clamp(6px,1vh,14px) 0 clamp(18px,2.4vh,30px);
  }
body.dkp-espace .kol-hd{display:none}
body.dkp-espace .kol,body.dkp-espace .it-pane{gap:0}

/* ── le bloc d'explication, en grand ── */
body.dkp-espace .it-empty-rich,
body.dkp-espace .cfg-vide .it-empty-rich{max-width:60ch;padding:clamp(30px,6vh,72px) 18px}
body.dkp-espace .ite-ic{width:56px;height:56px;border-radius:17px;font-size:26px;margin-bottom:6px}
body.dkp-espace .ite-t{font-size:clamp(26px,2.5vw,38px);letter-spacing:-.028em;line-height:1.08}
body.dkp-espace .ite-p{font-size:16px;line-height:1.62}
body.dkp-espace .ite-cta{height:54px;padding:0 28px;font-size:15.5px}

/* ── les configurations : memes onglets, en libelles ── */
body.dkp-espace .cfg-tabs{
  gap:clamp(18px,2.2vw,34px);margin:0 0 clamp(6px,1vh,14px);border-bottom:1px solid var(--dk-fil);
}
body.dkp-espace .cfg-tab{
  height:auto;padding:0 0 13px;border:0;border-radius:0;background:transparent;
  color:var(--dk-mu2);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  position:relative;
}
body.dkp-espace .cfg-tab::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;
}
body.dkp-espace .cfg-tab.on{color:#fff}
body.dkp-espace .cfg-tab.on::after{background:var(--dk-or)}
body.dkp-espace .cfg-vide{padding:0}

/* ── LA VUE LISTE ──────────────────────────────────────────────────────────
   Une ligne par element, separee par un filet, sans cadre ni fond. Les cartes
   de chaque rubrique ont des classes differentes (heritees de trois epoques) :
   on les ramene toutes a la meme ligne plutot que d'en reecrire trois. */
body.dkp-espace .cfg-card{
  border:0 !important;border-bottom:1px solid rgba(255,255,255,.06) !important;
  border-radius:0 !important;background:transparent !important;
  margin:0;padding:clamp(14px,1.9vh,20px) 6px !important;gap:clamp(14px,1.6vw,22px);
  transition:background .14s;
}
body.dkp-espace .cfg-card:hover{background:rgba(255,255,255,.028) !important}
body.dkp-espace .cfg-img{flex:0 0 clamp(96px,8vw,128px);height:clamp(70px,6vw,92px)}
body.dkp-espace .cfg-t{font-size:clamp(16px,1.4vw,20px);letter-spacing:-.012em}
body.dkp-espace .cfg-s{font-size:13px;color:var(--dk-mu2)}
body.dkp-espace .cfg-p{font-size:clamp(18px,1.6vw,23px);letter-spacing:-.02em}
body.dkp-espace .cfg-p small{font-size:12px;margin-top:3px}

/* Les commandes : meme ligne que les configurations. Les !important repondent
   a ceux de idmp_black.css (612-616), qui impose fond, bordure et rayon a
   toute carte de kanban cliente. Sans eux, la ligne restait une boite. */
body.dkp-espace .kcard{
  border:0 !important;border-bottom:1px solid rgba(255,255,255,.06) !important;
  border-radius:0 !important;background:transparent !important;
  margin:0;padding:clamp(14px,1.9vh,20px) 6px !important;transition:background .14s;
}
body.dkp-espace .kcard:hover{background:rgba(255,255,255,.028) !important;border-color:rgba(255,255,255,.06) !important}
body.dkp-espace .kcard-nm{font-size:clamp(15px,1.3vw,18px)}

/* Les alertes et les requetes SAV ont leur propre bloc, hors barriere, plus
   bas dans cette feuille : Gloire a demande le meme dessin sur telephone.
   Les regles qui annulaient ici leurs styles en ligne ont ete retirees le
   29 aout 2026 : ces styles n'existent plus, les deux fabriques posent
   desormais des classes. */

}

/* ══════════════════════════════════════════════════════════════════════════
   dashboard client - MON COMPTE
   ══════════════════════════════════════════════════════════════════════════
   Demande de Gloire du 29 aout 2026 : "tu me redesign Mon compte aussi [...]
   tu strike parametre et tu mets les elements de parametre dans mon compte.
   Dans Mon compte tous les elements doivent tenir sur une page".

   ON NE REFAIT PAS LA GRILLE. idmp_black.css (1520-1780) la regle deja, avec
   DEUX variantes eprouvees : une bande photo pleine largeur entre 1025 et
   1359, et une troisieme colonne au-dela de 1360 ou la photo devient un
   pilier. Premiere tentative du 29 aout : replacer les cartes moi-meme. La
   carte photo, qui portait un dessin different par variante, s'est retrouvee
   etiree sur 300 pixels et l'ecran a gagne 185 pixels de debordement au lieu
   d'en perdre. Ces regles ont ete retirees.

   CE FICHIER NE FAIT DONC QUE DEUX CHOSES :
   1. loger la carte Preferences dans CHACUNE des deux variantes, sans toucher
      au placement des six autres ;
   2. habiller : cartes transparentes, filets, typographie des pages de detail.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   MON COMPTE : UN SOMMAIRE ET UNE COLONNE, COMME PARTOUT AILLEURS
   ══════════════════════════════════════════════════════════════════════════
   Gloire, 29 aout 2026 : "c'est chaotique, structure mieux, inspire toi des
   autres plateformes web".

   CE QUI NE MARCHAIT PAS. La grille de idmp_black.css range les sept cartes
   en mosaique : trois colonnes, deux rangees, des hauteurs inegales. Une
   mosaique n'a pas d'ordre de lecture. J'ai essaye deux fois de la reordonner
   par themes ; le probleme n'etait pas l'ordre, c'etait la mosaique.

   CE QUE FONT LES AUTRES, ET CE QU'ON FAIT MAINTENANT : un sommaire etroit a
   gauche, une seule colonne de contenu a droite, chaque section annoncee par
   son titre. On cherche un reglage par son NOM, jamais par sa position.

   UN ARBITRAGE ASSUME. Une colonne unique ne tient pas dans une hauteur
   d'ecran, alors que la mosaique y tenait. C'est le prix de la lisibilite, et
   il est paye a decouvert : le sommaire reste colle a gauche, il montre en
   permanence les sept sections et la ligne active suit la lecture. On ne perd
   jamais de vue ni ou l'on est, ni ce qui reste. Rien n'est masque, a la
   difference d'un jeu de sous-onglets.

   LA GRILLE DE idmp_black.css EST ENTIEREMENT REPRISE ICI, placements
   compris : la laisser agir en partie donnerait deux mises en page qui se
   disputent les memes cartes.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px) {

body.dkp-espace #sec-compte.on{
  display:grid !important;
  grid-template-columns:clamp(178px,15vw,236px) minmax(0,1fr) !important;
  grid-template-rows:none !important;
  grid-auto-rows:min-content !important;
  column-gap:clamp(26px,3vw,58px) !important;
  row-gap:0 !important;
  align-content:start !important;
  align-items:start !important;
  height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  }

body.dkp-espace #sec-compte.on > .sec-hd{grid-column:1 / -1 !important;grid-row:auto !important}

/* Le sommaire enjambe toutes les rangees et reste colle : c'est lui qui
   remplace la vue d'ensemble que la mosaique donnait.

   PLUS DE FILET VERTICAL depuis le 30 aout 2026, a la demande de Gloire.
   Il en portait un a droite, plus son padding : deux separateurs pour une
   seule separation, puisque la grille pose deja un column-gap de 26 a 58 px
   entre les deux colonnes. Le trait ne separait donc rien que l'espace ne
   separait mieux, et il coupait l'ecran en deux a la verticale.
   Le padding part avec lui : ces quinze pixels reviennent aux libelles, qui
   en manquaient ("Informations personnelles" tombait sur deux lignes). */
body.dkp-espace #sec-compte.on .ac-rail{
  display:flex;flex-direction:column;gap:2px;
  grid-column:1 !important;grid-row:2 / span 99 !important;
  position:sticky;top:0;align-self:start;
  padding-right:0;border-right:0;
}
body.dkp-espace .ac-lnk{
  display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;
  border:0;border-radius:9px;background:transparent;color:var(--dk-mu);
  font-family:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer;
  transition:background .14s,color .14s;
}
body.dkp-espace .ac-lnk i{flex:0 0 auto;font-size:16px;color:var(--dk-mu2)}
body.dkp-espace .ac-lnk span{flex:1;min-width:0;line-height:1.25}
body.dkp-espace .ac-lnk:hover{background:rgba(255,255,255,.04);color:#fff}
body.dkp-espace .ac-lnk.on{background:rgba(255,48,25,.10);color:#fff;font-weight:800}
body.dkp-espace .ac-lnk.on i{color:var(--dk-or)}
body.dkp-espace .ac-lnk-bas{margin-top:10px;padding-top:12px;border-top:1px solid var(--dk-fil);border-radius:0 0 9px 9px}
body.dkp-espace .ac-lnk-bas i{color:var(--dk-mu2)}
body.dkp-espace .ac-lnk-bas:hover{color:#F87171}
body.dkp-espace .ac-lnk-bas:hover i{color:#F87171}

/* TOUTES les cartes dans la colonne de droite, dans l'ordre du balisage.
   Les placements explicites de idmp_black.css (grid-column 1/3, 3/5, 5/7 et
   leurs grid-row) sont annules un par un : un seul survivant suffirait a
   ramener une carte dans le sommaire. */
body.dkp-espace #sec-compte.on .account-card{
  grid-column:2 !important;grid-row:auto !important;
  max-width:min(760px,100%) !important;width:100%;
  margin:0 !important;
  background:transparent !important;border:0 !important;
  border-top:1px solid var(--dk-fil) !important;border-radius:0 !important;
  padding:clamp(18px,2.4vh,26px) 0 clamp(18px,2.4vh,26px) !important;
}
body.dkp-espace #sec-compte.on .account-profile-card{border-top:0 !important;padding-top:clamp(4px,1vh,10px) !important}
body.dkp-espace #sec-compte.on .account-theme-card{display:none !important}

/* Le titre de chaque section reprend la graisse des rubriques. */
body.dkp-espace #sec-compte.on .account-card > div:first-child{
  font-size:15px !important;font-weight:800 !important;margin-bottom:clamp(11px,1.6vh,16px) !important;
}

body.dkp-espace #sec-compte.on input,
body.dkp-espace #sec-compte.on select{
  background:rgba(255,255,255,.028) !important;border:1px solid var(--dk-fil) !important;
  height:clamp(38px,4.4vh,44px) !important;font-size:13.5px !important;
}
body.dkp-espace #sec-compte.on input:focus,
body.dkp-espace #sec-compte.on select:focus{border-color:var(--dk-or) !important}
body.dkp-espace #sec-compte.on label{font-size:11px !important;margin-bottom:5px !important}
body.dkp-espace #sec-compte.on .fg-c{margin-bottom:12px !important}

/* Les champs se rangent en deux colonnes dans une colonne de 760 : une seule
   file de champs sur 760 px de large, c'est un formulaire qui s'etire. */
body.dkp-espace #sec-compte.on .account-personal-card,
body.dkp-espace #sec-compte.on .account-company-card,
body.dkp-espace #sec-compte.on .account-security-card{
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(12px,1.4vw,18px);
}
body.dkp-espace #sec-compte.on .account-personal-card > div:first-child,
body.dkp-espace #sec-compte.on .account-company-card > div:first-child,
body.dkp-espace #sec-compte.on .account-security-card > div:first-child,
body.dkp-espace #sec-compte.on .fg-wide,
body.dkp-espace #sec-compte.on [id^="msg-"]{grid-column:1 / -1}
body.dkp-espace #sec-compte.on .account-security-fields{display:contents}

/* La bande profil : avatar, texte et progression sur une ligne. */
/* flex-direction EXPLICITE : la variante 1360 de idmp_black.css met cette
   carte en colonne centree pour son ancienne place de pilier droit. Sans
   cette ligne, elle restait centree au milieu de la nouvelle colonne. */
body.dkp-espace #sec-compte.on .account-profile-card{
  display:flex !important;flex-direction:row !important;align-items:center;
  justify-content:flex-start !important;text-align:left !important;
  gap:clamp(16px,2vw,26px);
}
body.dkp-espace #sec-compte.on .account-profile-card > div:nth-child(2){
  flex-direction:row !important;align-items:center !important;text-align:left !important;
}
body.dkp-espace #sec-compte.on .account-profile-card > div:nth-child(2) > div:first-child{margin-top:0 !important}
body.dkp-espace #sec-compte.on .account-profile-card > div:first-child{
  width:72px !important;height:72px !important;font-size:24px !important;
}
body.dkp-espace #sec-compte.on .account-profile-card > div:nth-child(2){
  flex:1;min-width:0;display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);flex-wrap:wrap;
}
body.dkp-espace #sec-compte.on .account-profile-card > div:nth-child(2) > div:last-child{
  flex:1 1 200px;min-width:180px;max-width:none !important;margin-top:0 !important;
}

/* Type de compte : deux boutons cote a cote, pas etires sur 760. */
body.dkp-espace #sec-compte.on .account-type-choices{max-width:420px}

/* La suppression, en pied de colonne et en retrait. */
body.dkp-espace #sec-compte.on .account-delete-card{
  display:flex !important;align-items:center;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap;
  border-top-color:var(--dk-fil) !important;
}
body.dkp-espace #sec-compte.on .account-delete-card > div:first-child{
  color:var(--dk-mu2) !important;font-size:11px !important;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:0 !important;flex:0 0 100%;
}
body.dkp-espace #sec-compte.on .account-delete-card > div:first-child i{color:var(--dk-mu2) !important}
body.dkp-espace #sec-compte.on .account-delete-card > div:nth-child(2){
  flex:1;min-width:260px;color:var(--dk-mu2) !important;font-size:12px !important;margin-bottom:0 !important;
}
body.dkp-espace #sec-compte.on .account-delete-card > button{
  flex:0 0 auto;height:auto !important;padding:0 !important;border:0 !important;background:transparent !important;
  color:var(--dk-mu) !important;font-size:12.5px !important;font-weight:700 !important;
  text-decoration:underline;text-underline-offset:3px;box-shadow:none !important;transition:color .14s;
}
body.dkp-espace #sec-compte.on .account-delete-card > button:hover{color:#F87171 !important}

/* ── la carte Preferences ── */
body.dkp-espace .ap-grp{margin-bottom:clamp(11px,1.5vh,17px)}
body.dkp-espace .ap-lbl{
  font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dk-mu2);margin-bottom:8px;
}
body.dkp-espace .ap-langs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-width:520px}
body.dkp-espace .ap-lang{
  display:flex;align-items:center;gap:7px;min-width:0;height:36px;padding:0 11px;
  border:1px solid var(--dk-fil);border-radius:10px;background:transparent;color:var(--dk-mu);
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .14s,color .14s;
}
body.dkp-espace .ap-lang .f{font-size:14px;line-height:1;flex:0 0 auto}
body.dkp-espace .ap-lang:hover{border-color:var(--dk-fil2);color:#fff}
body.dkp-espace .ap-lang.on{border-color:var(--dk-or);color:#fff}

body.dkp-espace .ap-seg{display:inline-flex;gap:4px;border:1px solid var(--dk-fil);border-radius:11px;padding:3px}
body.dkp-espace .ap-seg button{
  min-width:66px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--dk-mu);
  font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.06em;cursor:pointer;
}
body.dkp-espace .ap-seg button.on{background:var(--dk-or);color:#fff}
body.dkp-espace .ap-hint{margin-top:8px;font-size:12px;line-height:1.5;color:var(--dk-mu2);max-width:52ch}

body.dkp-espace .ap-row{display:flex;align-items:center;gap:14px;padding:9px 0;border-top:1px solid rgba(255,255,255,.05);max-width:620px}
body.dkp-espace .ap-row:first-of-type{border-top:0}
body.dkp-espace .ap-row-t{flex:1;min-width:0}
body.dkp-espace .ap-row-t b{display:block;font-size:13px;font-weight:700;color:#fff}
body.dkp-espace .ap-row-t em{display:block;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--dk-mu2);margin-top:2px}

body.dkp-espace .ap-row .mnp-sw{
  flex-shrink:0;width:46px;height:27px;border-radius:999px;border:0;cursor:pointer;padding:0;
  position:relative;background:rgba(255,255,255,.13);transition:background .18s;
  -webkit-appearance:none;appearance:none;
}
body.dkp-espace .ap-row .mnp-sw::after{
  content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
body.dkp-espace .ap-row .mnp-sw.on{background:var(--dk-or)}
body.dkp-espace .ap-row .mnp-sw.on::after{transform:translateX(19px)}
body.dkp-espace .ap-row .mnp-sw:disabled{opacity:.5;cursor:default}

body.dkp-espace .ap-legal{
  display:flex;align-items:center;gap:12px;max-width:520px;height:50px;padding:0 14px;
  border:1px solid var(--dk-fil);border-radius:12px;background:transparent;color:#fff;
  font-family:inherit;cursor:pointer;text-align:left;transition:border-color .14s,background .14s;
}
body.dkp-espace .ap-legal:hover{border-color:var(--dk-or);background:rgba(255,48,25,.06)}
body.dkp-espace .ap-legal > i:first-child{font-size:19px;color:var(--dk-or);flex:0 0 auto}
body.dkp-espace .ap-legal span{flex:1;min-width:0}
body.dkp-espace .ap-legal b{display:block;font-size:13.5px;font-weight:700}
body.dkp-espace .ap-legal em{display:block;font-style:normal;font-size:11.5px;color:var(--dk-mu2);margin-top:1px}
body.dkp-espace .ap-legal .go{font-size:16px;color:var(--dk-mu2);flex:0 0 auto}
body.dkp-espace .ap-legal:hover .go{color:var(--dk-or)}

}

/* Hors barriere, la carte Preferences et le sommaire n'existent pas : le
   telephone a ses propres ecrans de reglage et ses propres tuiles. */
@media (max-width:999px), (max-height:619px){
  .account-prefs-card,.ac-rail{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   LA LIGNE D'ALERTE ET LA LIGNE SAV, TELEPHONE COMME ORDINATEUR
   ══════════════════════════════════════════════════════════════════════════
   Ce bloc est HORS BARRIERE, volontairement : Gloire a demande le meme dessin
   sur telephone. C'est le seul de ce fichier dans ce cas, et il ne peut pas
   fuir ailleurs, les classes .rech-card n'existant que dans l'espace client.

   Les !important repondent a ceux de idmp_black.css (574 et 1449), qui impose
   fond, cadre, rayon et remplissage a ces memes cartes. La feuille est
   chargee APRES le theme sombre sur le tableau de bord : a poids egal, c'est
   la derniere qui gagne.
   ══════════════════════════════════════════════════════════════════════════ */
body.dkp-espace .rech-card{
  display:flex !important;align-items:center;gap:clamp(12px,1.3vw,18px);
  background:transparent !important;background-image:none !important;
  border:0 !important;border-bottom:1px solid rgba(255,255,255,.06) !important;
  border-radius:0 !important;box-shadow:none !important;
  padding:clamp(13px,1.7vh,18px) 4px !important;
  cursor:pointer;transition:background .14s;
}
body.dkp-espace .rech-card:hover{background:rgba(255,255,255,.03) !important;border-color:rgba(255,255,255,.06) !important}

/* Le visuel : la machine trouvee quand il y en a une, sinon le pictogramme de
   l'etat. Une ligne sans ancrage a gauche se lit comme un paragraphe. */
body.dkp-espace .rc-vis{
  flex:0 0 clamp(76px,7vw,104px);height:clamp(58px,5.4vw,76px);
  border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.032);
}
body.dkp-espace .rc-vis img{max-width:92%;max-height:92%;width:auto;height:auto;object-fit:contain}
body.dkp-espace .rc-vis i{font-size:clamp(21px,2vw,26px);color:#5E636D}
body.dkp-espace .rc-vis-ic{background:rgba(255,48,25,.09)}
body.dkp-espace .rc-vis-ic i{color:var(--dk-or)}

body.dkp-espace .rc-bd{flex:1;min-width:0}
body.dkp-espace .rc-top{display:flex;align-items:baseline;gap:12px}
body.dkp-espace .rc-t{
  flex:1;min-width:0;font-size:clamp(14.5px,1.3vw,17px);font-weight:800;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em;
}
body.dkp-espace .rc-dt{flex:0 0 auto;font-size:11.5px;color:var(--dk-mu2)}
body.dkp-espace .rc-cr{margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--dk-mu)}

/* LE RESULTAT N'EST PLUS UN ENCADRE. Il etait dessine en vert clair sur vert
   pale, deux couleurs de theme clair posees en dur : sur fond noir, la boite
   sautait aux yeux avant la machine qu'elle annonce. Ne reste que la coche,
   dans un vert lisible sur noir, et le nom de la machine en blanc. */
body.dkp-espace .rc-res{
  margin-top:7px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-size:clamp(13px,1.15vw,14.5px);
}
body.dkp-espace .rc-res > i{flex:0 0 auto;font-size:15px;color:#41D07E;position:relative;top:2px}
body.dkp-espace .rc-res b{font-weight:800;color:#fff}
body.dkp-espace .rc-px{color:#41D07E;font-weight:700}
body.dkp-espace .rc-att{
  margin-top:7px;display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;color:#E3B94A;
}

/* Le chevron remplace le bouton orange pleine largeur : la ligne entiere
   ouvrait deja la fiche, le bouton doublait un geste qui existait. */
body.dkp-espace .rc-go{
  flex:0 0 auto;font-size:20px;color:#3A3B43;transition:color .14s,transform .14s;
}
body.dkp-espace .rech-card:hover .rc-go{color:var(--dk-or);transform:translateX(2px)}

/* Sur telephone, la rangee du haut peut manquer de largeur pour le nom ET la
   date : le nom garde la ligne, la date passe dessous avec les criteres. */
@media (max-width:520px){
  body.dkp-espace .rc-vis{flex-basis:64px;height:50px}
  body.dkp-espace .rc-t{white-space:normal}
  body.dkp-espace .rc-go{font-size:18px}
}

/* ══════════════════════════════════════════════════════════════════════════
   TELEPHONE : LES SOUS-VUES PRENNENT LE MEME DESSIN QUE L'ORDINATEUR
   ══════════════════════════════════════════════════════════════════════════
   Gloire, 29 aout 2026 : "tu me fais le meme design style pour la version
   mobile (touche pas au catalogue)".

   Ce qui change : l'en-tete de sous-vue perd son fond de carte et son filet
   de separation, le titre passe a la taille du narrateur de l'accueil, et
   les onglets quittent leurs pastilles cerclees pour devenir des libelles en
   petites capitales poses sur un filet, avec le meme trait orange sous
   l'actif que sur grand ecran. Le bouton d'action garde son orange : c'est
   le seul aplat de l'ecran, et sur telephone il est aussi la cible.

   LE CATALOGUE EST HORS PERIMETRE. Il porte .mob-subhd-cat, et cette classe
   annule ici tout ce que le bloc pose. C'est la seule garantie qui tienne :
   les deux ecrans partagent .mob-subhd.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px), (orientation:portrait) and (max-width:1024px){

  body.dkp-espace .mob-subview .mob-subhd:not(.mob-subhd-cat){
    align-items:flex-start;background:transparent;border-bottom:0;
    padding:calc(var(--mnavh) + 14px) 18px 14px;gap:13px;
  }
  body.dkp-espace .mob-subhd:not(.mob-subhd-cat) .mob-back{
    width:40px;height:40px;border-radius:12px;background:transparent;
    border-color:rgba(255,255,255,.15);margin-top:2px;
  }
  body.dkp-espace .mob-subhd:not(.mob-subhd-cat) .mob-subhd-ttl{
    font-size:clamp(24px,7vw,31px);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  }
  body.dkp-espace .mob-subhd:not(.mob-subhd-cat) .mob-subhd-sub{
    font-size:13px;line-height:1.45;margin-top:7px;color:var(--dk-mu);
  }

  /* Les onglets. Meme grammaire que la vue ordinateur : des libelles, un
     filet, un trait orange sous l'actif. Sur telephone ils defilent
     horizontalement si la place manque, sans jamais se serrer. */
  body.dkp-espace .mob-subview .it-bar{
    gap:22px;padding:0 18px;margin:0 0 2px;
    border-bottom:1px solid rgba(255,255,255,.085);
  }
  body.dkp-espace .mob-subview .it-tab{
    height:auto;min-height:0;padding:0 0 12px;border:0;border-radius:0;background:transparent;
    color:var(--dk-mu2);font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
    position:relative;gap:7px;
  }
  body.dkp-espace .mob-subview .it-tab::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;
  }
  body.dkp-espace .mob-subview .it-tab.on{color:#fff;border-color:transparent}
  body.dkp-espace .mob-subview .it-tab.on::after{background:var(--dk-or)}
  body.dkp-espace .mob-subview .it-tab .n{
    min-width:0;height:auto;padding:0;background:transparent;color:var(--dk-mu2);font-size:11.5px;
  }
  body.dkp-espace .mob-subview .it-tab.on .n{background:transparent;color:var(--dk-or)}

  /* Le bouton d'action se cale sur la gouttiere de 18 px de l'en-tete. */
  body.dkp-espace .mob-subview .it-cta{
    width:calc(100% - 36px);margin:14px 18px 12px;height:50px;border-radius:14px;font-size:15px;
    box-shadow:0 12px 28px rgba(255,48,25,.26);
  }

  /* Les memes onglets, pour Mes configurations qui a les siens. */
  body.dkp-espace #mob-sub-configurations .cfg-tabs{
    gap:22px;margin:0 0 2px;border-bottom:1px solid rgba(255,255,255,.085);
  }
  body.dkp-espace #mob-sub-configurations .cfg-tab{
    height:auto;padding:0 0 12px;border:0;border-radius:0;background:transparent;
    color:var(--dk-mu2);font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
    position:relative;
  }
  body.dkp-espace #mob-sub-configurations .cfg-tab::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;
  }
  body.dkp-espace #mob-sub-configurations .cfg-tab.on{color:#fff}
  body.dkp-espace #mob-sub-configurations .cfg-tab.on::after{background:var(--dk-or)}

  /* Les lignes de liste perdent leur cadre, comme sur grand ecran.

     .mob-kcard EST ARRIVEE LE 30 AOUT 2026, et elle explique la remarque de
     Gloire : "la previsualisation de la commande dans l onglet commande, je
     veux qu elle soit avec bloc transparent comme les autres onglets". Les
     configurations, les alertes et le SAV rendent leurs lignes en .cfg-card
     ou .kcard, toutes deux aplaties ici. Mes commandes, sur telephone, a sa
     propre carte, heritee d une autre epoque : elle gardait donc son fond
     clair, son cadre et son rayon de 15 px au milieu de trois rubriques
     devenues des listes. Une classe de plus dans ce selecteur, et les
     quatre rubriques se lisent enfin de la meme facon. */
  body.dkp-espace .mob-subbody .cfg-card,
  body.dkp-espace .mob-subbody .mob-kcard,
  body.dkp-espace .mob-subbody .kcard{
    border:0 !important;border-bottom:1px solid rgba(255,255,255,.06) !important;
    border-radius:0 !important;background:transparent !important;
    margin:0 !important;padding:14px 4px !important;
  }
  /* La pastille d icone garde son cercle : c est un pictogramme, pas un bloc.
     Le chevron, lui, s eteint : il repetait la fleche que porte deja la
     ligne entiere, et son gris clair d origine criait sur un fond noir. */
  body.dkp-espace .mob-subbody .mob-kcard-chev{color:var(--dk-mu2)}
  body.dkp-espace .mob-subbody .mob-kcard-ref{color:var(--dk-mu2);letter-spacing:.06em}
  body.dkp-espace .mob-subbody .mob-kcard-nm{color:#fff;font-size:15px}
  body.dkp-espace .mob-subbody .rech-card{padding:14px 4px !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMINISTRATION - LE MEME DESSIN DE RUBRIQUE, SAUF SUR LES KANBAN
   ══════════════════════════════════════════════════════════════════════════
   Gloire, 29 aout 2026 : "le design des categories est nickel, tu fais le
   meme pour la version admin (sauf pour les vues kanban)".

   LES CINQ ECRANS EN KANBAN SONT NOMMES, PAS DEVINES. Affaires,
   Configurations, Commandes, Transport maritime et Transport terrestre
   portent un .kb a colonnes : leur titre reste petit (un titre de 46 px
   preleve quarante pixels sur une colonne qui en manque deja) et leurs
   cartes gardent leur cadre, qui est ce qui distingue une carte deplacable
   d'une ligne de liste.

   Les listes a onglets, elles, prennent exactement le dessin du client :
   c'est le meme composant, les memes classes, et il n'y avait aucune raison
   que l'equipe travaille dans un ecran moins soigne que ses clients.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px) {

/* ══ UN SEUL EN-TETE POUR TOUTE L ADMINISTRATION ═══════════════════════════
   Onze rubriques portaient ici un titre a clamp(26px,2.4vw,38px) en 800, les
   six autres restant sur la regle de base a 18px en 700. Mesure au banc en
   1440 px : 34,56 px contre 18 px, presque le double, selon qu on ouvrait
   Clients ou Affaires. Rien ne justifiait cette coupure, qui suivait la
   presence ou l absence de kanban et non une hierarchie de lecture.

   La reference est desormais l en-tete d Affaires, arbitre par Gloire le
   3 septembre 2026 : 18 px / 700 pour le titre, 13 px a 2 px du titre pour le
   sous-titre, soit exactement la regle de base de idmp_admin.html. La
   surcharge est donc retiree plutot que reglee : une regle qui recopie la
   base est une regle a maintenir pour rien.

   Ne pas la reintroduire pour une seule rubrique. Le jour ou un titre doit
   grossir, il grossit partout ou il ne grossit pas.

   MON COMPTE est le seul cas qui demande encore une regle, et elle est
   ci-dessous : idmp_black.css lui impose clamp(19px,1.5vw,23px) en
   !important depuis un selecteur d identifiant SANS garde de theme, donc la
   regle fuit du client vers l administration. Le piege est celui que CLAUDE.md
   documente sur #sec-compte. On ne touche pas a la regle du client, on pose
   le garde-fou du cote administration.
   ══════════════════════════════════════════════════════════════════════════ */
body.dkp-admin #sec-compte.on > .sec-hd .sec-ttl{
  font-size:18px !important;font-weight:700;letter-spacing:normal;
}

/* ── la reglette d'onglets : Recherches et Requetes SAV ── */
body.dkp-admin .it-bar.browser{
  gap:clamp(16px,2vw,30px);margin:0;border-bottom:1px solid var(--dk-fil);align-items:center;
}
body.dkp-admin .it-bar.browser .it-tab{
  height:auto;padding:0 0 12px;border:0;border-radius:0;background:transparent;
  color:var(--dk-mu2);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  margin:0;top:0;position:relative;
}
body.dkp-admin .it-bar.browser .it-tab::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;
}
body.dkp-admin .it-bar.browser .it-tab:hover{background:transparent;color:#C9CDD6}
body.dkp-admin .it-bar.browser .it-tab.on{height:auto;background:transparent;color:#fff;border-color:transparent;top:0}
body.dkp-admin .it-bar.browser .it-tab.on::after{background:var(--dk-or)}
body.dkp-admin .it-bar.browser .it-tab .n{background:transparent;color:var(--dk-mu2);font-size:11px;padding:0 0 0 6px}
body.dkp-admin .it-bar.browser .it-tab.on .n{background:transparent;color:var(--dk-or)}

body.dkp-admin .it-body{
  background:transparent;border:0;border-radius:0;padding:clamp(6px,1vh,12px) 0 clamp(16px,2vh,26px);
  }

/* ── les lignes de liste de ces deux ecrans ────────────────────────────────
   Leurs fabriques (arechCard, asavCard) ecrivent le style EN LIGNE, comme le
   faisaient celles du client : une feuille ne peut pas gagner contre un
   attribut style, d'ou les !important. On ne reecrit pas les fabriques ici :
   elles ne servent que ces deux ecrans, et le gain ne vaut pas le risque sur
   une page de 12 000 lignes. */
body.dkp-admin #arech-col-j7 > div[onclick],
body.dkp-admin #arech-col-m1 > div[onclick],
body.dkp-admin #arech-col-exp > div[onclick],
body.dkp-admin #arech-col-avo > div[onclick],
body.dkp-admin #arech-col-pay > div[onclick],
body.dkp-admin #arech-col-cmd > div[onclick],
body.dkp-admin #asav-col-neuf > div[onclick],
body.dkp-admin #asav-col-cours > div[onclick],
body.dkp-admin #asav-col-traitee > div[onclick]{
  background:transparent !important;border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;border-radius:0 !important;
  padding:clamp(13px,1.7vh,18px) 6px !important;transition:background .14s !important;
}
body.dkp-admin #arech-col-j7 > div[onclick]:hover,
body.dkp-admin #arech-col-m1 > div[onclick]:hover,
body.dkp-admin #arech-col-exp > div[onclick]:hover,
body.dkp-admin #arech-col-avo > div[onclick]:hover,
body.dkp-admin #arech-col-pay > div[onclick]:hover,
body.dkp-admin #arech-col-cmd > div[onclick]:hover,
body.dkp-admin #asav-col-neuf > div[onclick]:hover,
body.dkp-admin #asav-col-cours > div[onclick]:hover,
body.dkp-admin #asav-col-traitee > div[onclick]:hover{background:rgba(255,255,255,.03) !important}

/* ── LE TABLEAU DE BORD A SES PROPRES ONGLETS ────────────────────────────
   Directeur / Commercial ne passent pas par IDMPTabs : ce sont deux boutons
   .ovt en balisage statique, dessines en pastilles oranges pleines. C'etait
   le dernier jeu d'onglets de l'application a ne pas parler la meme langue
   que les autres, et il est sur l'ecran d'accueil de l'equipe.

   ovOnglet() RECONSTRUIT la className des deux boutons a chaque bascule
   (bd.className = 'ovt' + (k === 'dir' ? ' on' : '')) : toute classe ajoutee
   par ailleurs serait emportee. On style donc .ovt et .ovt.on, jamais une
   troisieme classe. */
body.dkp-admin #ov-tabs{
  gap:clamp(16px,2vw,30px);margin-bottom:clamp(14px,2vh,22px);
  border-bottom:1px solid var(--dk-fil);
}
body.dkp-admin .ovt{
  height:auto;padding:0 0 12px;border:0;border-radius:0;background:transparent;
  color:var(--dk-mu2);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  position:relative;
}
body.dkp-admin .ovt::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;
}
body.dkp-admin .ovt:hover{color:#C9CDD6}
body.dkp-admin .ovt.on{background:transparent;border-color:transparent;color:#fff}
body.dkp-admin .ovt.on::after{background:var(--dk-or)}
body.dkp-admin .ovt i{font-size:14px;margin-right:6px}

/* Le bloc d'explication d'un onglet vide, si l'administration en recoit un
   jour : meme dessin que chez le client, en plus sobre. */
body.dkp-admin .it-empty-rich{max-width:56ch;padding:clamp(26px,5vh,56px) 18px}
body.dkp-admin .ite-t{font-size:clamp(22px,2vw,30px)}

}

/* ══════════════════════════════════════════════════════════════════════════
   TELEPHONE : LE CATALOGUE PREND LES MEMES ONGLETS QUE LE RESTE
   ══════════════════════════════════════════════════════════════════════════
   Gloire, 30 aout 2026 : "le systeme d'onglet que t'as mis partout pour
   requete SAV, alerte, mes commandes et mes config, je veux que tu le mettes
   dans le catalogue au niveau de Mini-pelle, chargeuse, tondeuse et vehicule
   et pour les elements de filtre (tonnage etc.) : CTA sans contour, celui qui
   est en cours souligne d'orange".

   Deux rangees etaient concernees, et elles ne parlaient meme pas la meme
   langue entre elles : les quatre familles etaient des pastilles CERCLEES
   dont l'active passait en orange, les paliers de tonnage des pastilles
   PLEINES dont l'active passait en aplat orange. Trois grammaires sur un
   ecran qui en avait deja une.

   Les deux rangees deviennent des libelles poses sur un filet, trait orange
   sous l'actif. C'est la grammaire des quatre autres rubriques, et c'est
   desormais la seule de l'espace client.
   ══════════════════════════════════════════════════════════════════════════ */
/* LA BANDE COUVRE AUSSI LE TELEPHONE COUCHE. Un iPhone en paysage mesure
   844 x 390 : plus large que 768, donc hors de la premiere condition, et en
   paysage, donc hors de la seconde. Il ne recevait NI les onglets soulignes
   du telephone NI ceux de l ordinateur, et gardait les pastilles pleines de
   la charte d origine. (max-height:560px) est le discriminant du depot pour
   le telephone couche : une tablette couchee fait au moins 768 de haut. */
@media (max-width:768px), (orientation:portrait) and (max-width:1024px),
       (orientation:landscape) and (max-height:560px){

  /* ── les quatre familles ──────────────────────────────────────────────
     LE SELECTEUR NE PASSE PAS PAR .ih-cathead. Ce conteneur est celui de
     l'en-tete PARTAGE (fiche annonce, administration) ; dans le catalogue du
     tableau de bord, les memes onglets vivent sous .mob-subhd.mob-subhd-cat.
     Premiere tentative ecrite pour le mauvais ancetre : elle n'a rien touche.

     LES !important REPONDENT A CEUX DE idmp_black.css (416-418), qui impose
     fond et couleur de bordure a toute pastille de famille. */
  /* CENTREES, ET NON PLUS RANGEES A GAUCHE. Gloire, 30 aout 2026, capture a
     l'appui : "cette partie je la veux centree et non alignee a gauche sur
     tablette portrait et mobile". Sur une tablette, quatre libelles de dix
     pixels serres dans le coin superieur gauche laissaient les deux tiers de
     la barre vides.

     LE DEFILEMENT HORIZONTAL CEDE LA PLACE AU RETOUR A LA LIGNE, et ce n'est
     pas un detail : centrer un conteneur qui defile rend son debut
     inatteignable des que le contenu deborde, et la barre etant masquee
     (scrollbar-width:none) rien ne dirait qu'il faut faire glisser. Avec
     flex-wrap, le trop-plein passe a la ligne, centre lui aussi, et reste
     visible.

     LES MARGES DEVIENNENT UN GAP. Une margin-right sur chaque onglet
     decalerait le centrage d'une demi-marge, et le dernier de chaque ligne
     garderait la sienne apres un retour a la ligne. */
  body.dkp-espace .cat-tabs,
  body.dkp-espace .cat-tabs.cat-tabs-4{
    display:flex !important;grid-template-columns:none !important;
    gap:0 clamp(15px,2.6vw,34px) !important;
    justify-content:center;flex-wrap:wrap;
    overflow-x:visible;scrollbar-width:none;
    border-bottom:1px solid rgba(255,255,255,.085);
  }
  body.dkp-espace .cat-tabs::-webkit-scrollbar{display:none}
  /* LA TAILLE SUIT LA LARGEUR DISPONIBLE. "Rends la taille des categories
     responsive, le texte est plus gros s'il y a de la place, avec une limite
     pour des raisons esthetiques, car sur tablette c'est ridiculement petit."
     Le plancher garde le telephone tel qu'il etait, 10,5 px ; le plafond a
     17 px empeche le ridicule inverse sur une tablette de 1 024. */
  body.dkp-espace .cat-tab,
  body.dkp-espace .cat-tabs-4 .cat-tab{
    flex:0 0 auto;min-width:0;height:auto !important;padding:0 0 12px !important;margin-right:0;
    border:0 !important;border-radius:0 !important;background:transparent !important;
    color:var(--dk-mu2) !important;
    font-size:clamp(10.5px,1.75vw,17px) !important;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;
    position:relative;box-shadow:none !important;white-space:nowrap;
  }
  body.dkp-espace .cat-tab::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;
  }
  /* LE SELECTEUR REPREND idmp-client ET dark, et ce n'est pas de la
     surenchere. La regle qui peint l'onglet actif en orange translucide
     s'ecrit `body.idmp-client.dark .cat-tab.on-chargeuses` avec !important :
     quatre classes. `body.dkp-espace .cat-tab.on-chargeuses` n'en a que
     trois et perdait, !important ou pas. Le corps du tableau de bord porte
     les deux classes, on les reprend, et le fond disparait enfin. */
  body.dkp-espace.idmp-client.dark .cat-tab.on-mp,
  body.dkp-espace.idmp-client.dark .cat-tab.on-pk,
  body.dkp-espace.idmp-client.dark .cat-tab.on-chargeuses,
  body.dkp-espace.idmp-client.dark .cat-tab.on-tondeuse,
  body.dkp-espace .cat-tab.on-mp,
  body.dkp-espace .cat-tab.on-pk,
  body.dkp-espace .cat-tab.on-chargeuses,
  body.dkp-espace .cat-tab.on-tondeuse{
    color:#fff !important;background:transparent !important;
    border-color:transparent !important;box-shadow:none !important;
  }
  body.dkp-espace .cat-tab.on-mp::after,
  body.dkp-espace .cat-tab.on-pk::after,
  body.dkp-espace .cat-tab.on-chargeuses::after,
  body.dkp-espace .cat-tab.on-tondeuse::after{background:var(--dk-or)}

  /* ── les paliers de tonnage et les autres filtres rapides ──
     Ils vivent SOUS les familles : deux filets se toucheraient, on laisse
     donc respirer et seul le trait orange marque l'actif. */
  body.dkp-espace .ih-tonwrap .i-tons,
  body.dkp-admin .ih-tonwrap .i-tons,
  body.dkp-espace .i-tons,
  body.dkp-admin .i-tons{
    gap:0 clamp(18px,3vw,40px) !important;padding:11px 0 3px !important;margin-top:0 !important;
    justify-content:center;flex-wrap:wrap;overflow-x:visible;
  }
  body.dkp-espace .i-ton-b,
  body.dkp-admin .i-ton-b{
    flex:0 0 auto;height:auto !important;padding:0 0 9px !important;margin-right:0;
    border:0 !important;border-radius:0 !important;background:transparent !important;
    color:var(--dk-mu2) !important;
    font-size:clamp(11.5px,1.85vw,18px) !important;font-weight:800;letter-spacing:.13em;
    text-transform:uppercase;
    position:relative;box-shadow:none !important;
  }
  body.dkp-espace .i-ton-b::after,
  body.dkp-admin .i-ton-b::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;
  }
  body.dkp-espace .i-ton-b:hover,
  body.dkp-admin .i-ton-b:hover{background:transparent !important}
  body.dkp-espace .i-ton-b.on,
  body.dkp-admin .i-ton-b.on{background:transparent !important;color:#fff !important}
  body.dkp-espace .i-ton-b.on::after,
  body.dkp-admin .i-ton-b.on::after{background:var(--dk-or)}

  /* LE TELEPHONE COUCHE EST LARGE MAIS BAS. Un iPhone en paysage mesure
     844 x 390 : la largeur ferait grandir les libelles jusqu'a 15 px, sur
     390 pixels de hauteur ou chaque ligne compte. Il reprend les tailles
     d'origine, qui etaient les bonnes pour lui. */
  @media (orientation:landscape) and (max-height:560px){
    body.dkp-espace .cat-tab,
    body.dkp-espace .cat-tabs-4 .cat-tab{font-size:10.5px !important}
    body.dkp-espace .i-ton-b,
    body.dkp-admin .i-ton-b{font-size:11.5px !important}
  }

  /* ── LE FILET DE L'EN-TETE SE RANGE SUR CELUI DES ANNONCES ──
     Gloire a entoure les deux le 30 aout 2026 : celui de l'en-tete allait
     d'un bord a l'autre de l'ecran, celui qui separe deux annonces s'arretait
     a quinze pixels de chaque cote. Deux traits de meme nature dessines a
     deux largeurs : l'oeil lit une rupture la ou il n'y en a pas.

     LA BORDURE EST REMPLACEE PAR UN FOND, pas retrecie : une border-bottom se
     dessine toujours sur toute la largeur de la boite, quel que soit le
     padding. Un degre plat de 1 px, pose au bas et large de 100 % moins les
     deux quinze pixels de padding, tombe exactement sur le filet de
     .ih-cardwrap, dont la portee est fixee par le padding:15px de
     .mob-subbody. */
  body.dkp-espace .mob-subhd.mob-subhd-cat{
    border-bottom:0 !important;
    background-image:linear-gradient(rgba(255,255,255,.11),rgba(255,255,255,.11));
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:calc(100% - 30px) 1px;
    /* HUIT PIXELS SEPARAIENT LA PILULE DE NAVIGATION DU PREMIER ONGLET.
       Mesure au banc a 375x812 : la pilule finit a 66, l'onglet commence a
       74. Gloire, 31 aout 2026 : "mets les 4 onglets un peu plus bas par
       rapport a la nav barre, que ce soit plus facile de cliquer sur eux".
       Le pouce qui vise "Mini-pelles" arrivait sur le bord de la pilule.
       Seize pixels de plus, et la zone cliquable demarre franchement en
       dessous. Le padding de l'entete est celui du tableau de bord
       (--mnavh + 8px) : on le reecrit ici plutot que la-bas, la consigne ne
       visant que le catalogue. */
    padding-top:calc(var(--mnavh,90px) + 24px) !important;
  }
  /* LA CIBLE ELLE-MEME GRANDIT. L'onglet ne mesurait que 26 px de haut, tout
     en bas de sa boite : le texte, plus douze pixels sous lui pour le trait
     orange, et rien au-dessus. Huit pixels de coiffe portent la cible a
     34 px sans deplacer le trait, qui reste colle au bas de la boite. */
  body.dkp-espace .mob-subhd-cat .cat-tab{padding-top:8px !important}

  /* LE TELEPHONE COUCHE GARDE SON ENTETE COMPACTE : 390 pixels de hauteur ne
     supportent pas vingt-quatre pixels de vide en plus. */
  @media (orientation:landscape) and (max-height:560px){
    body.dkp-espace .mob-subhd.mob-subhd-cat{
      padding-top:calc(var(--mnavh,90px) + 8px) !important;
    }
    body.dkp-espace .mob-subhd-cat .cat-tab{padding-top:2px !important}
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LES PALIERS DE FILTRE, VERSION ORDINATEUR
   Meme consigne que sur mobile, appliquee au meme endroit : "oublie le CTA
   avec contour, tu fais CTA sans contour et celui qui est en cours est
   souligne d'orange". Sur grand ecran les quatre familles vivent dans la
   barre laterale, il ne reste donc que la rangee des paliers, et elle
   arrivait encore en pastilles : l'active en aplat orange, les autres
   cerclees de blanc a 16 %. Elle parle maintenant la meme langue que le
   reste de l'espace client.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px){
  body.dkp-espace .i-tons,
  body.dkp-admin .i-tons{
    gap:0 !important;padding:2px 0 0 !important;
    border-bottom:1px solid var(--dk-fil);
  }
  body.dkp-espace .i-ton-b,
  body.dkp-admin .i-ton-b{
    flex:0 0 auto;height:auto !important;min-height:0 !important;
    padding:0 0 11px !important;margin-right:26px;
    border:0 !important;border-radius:0 !important;background:transparent !important;
    color:var(--dk-mu2) !important;
    font-size:11.5px !important;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
    position:relative;box-shadow:none !important;transition:color .14s;
  }
  body.dkp-espace .i-ton-b:last-child,
  body.dkp-admin .i-ton-b:last-child{margin-right:0}
  body.dkp-espace .i-ton-b::after,
  body.dkp-admin .i-ton-b::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;
  }
  body.dkp-espace .i-ton-b:hover,
  body.dkp-admin .i-ton-b:hover{background:transparent !important;color:var(--dk-tx) !important}
  body.dkp-espace .i-ton-b.on,
  body.dkp-admin .i-ton-b.on{background:transparent !important;color:var(--dk-tx) !important}
  body.dkp-espace .i-ton-b.on::after,
  body.dkp-admin .i-ton-b.on::after{background:var(--dk-or)}
}

/* ══════════════════════════════════════════════════════════════════════════
   UNE SEULE FLECHE RETOUR, MOBILE ET ORDINATEUR
   Demande de Gloire du 30 aout 2026 : "fais en sorte d'uniformiser toutes les
   fleches retour version mobile et ordinateur et qu'elles soient compatibles
   avec le nouveau design".

   Il y avait DEUX familles qui ne se parlaient pas :
     - les fiches redessinees (alerte, SAV, configuration, commande) portaient
       une grande fleche fine suivie d'un micro-libelle, sans cadre ;
     - la fiche annonce et le tableau de bord portaient un carre cercle de
       38 px, une barre pleine largeur avec fond et bordure, ou une pilule
       cerclee de 44 px de haut.
   Plus le configurateur, qui empilait son libelle sur deux lignes.

   C'est la premiere famille qui gagne : c'est celle des ecrans refaits, et
   c'est la seule sans cadre. Le glyphe devient ti-arrow-left partout, y
   compris la ou ti-arrow-back-up faisait sa boucle : a 30 px, la fleche
   droite se lit d'un coup d'oeil, la boucle demande un temps d'analyse.

   LE display N'EST JAMAIS TOUCHE. `body.ad-mini-offer .offer-back{display:none}`
   pese autant que les selecteurs d'ici et vit dans une balise <style> posee
   AVANT cette feuille : le forcer aurait rallume un bouton que la fiche
   compacte cache exprès.
   ══════════════════════════════════════════════════════════════════════════ */
body.dkp .back,
body.dkp .odc-back,
body.dkp .offer-back,
body.dkp .back-btn,
body.dkp .mob-back,
body.dkp .mob-back-bar,
body.dkp .ih-retour-b,
body.dkp .icf-back,
body.dkp-espace .back-btn,
body.dkp-espace .mob-back,
body.dkp-espace .ih-retour-b,
body.dkp-espace .icf-back,
body.dkp-admin .back,
body.dkp-admin .back-btn,
body.dkp-admin .icf-back,
body.dkp-admin .aback-row{
  align-items:center;gap:11px !important;
  width:auto;min-width:0;height:auto !important;min-height:0 !important;
  padding:0 !important;
  border:0 !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;
  color:#FFFFFF !important;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif !important;
  font-size:11.5px !important;font-weight:800 !important;
  letter-spacing:.11em !important;text-transform:uppercase;
  line-height:1.15 !important;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .14s,opacity .14s;
}
body.dkp .back > i,
body.dkp .odc-back > i,
body.dkp .offer-back > i,
body.dkp .back-btn > i,
body.dkp .mob-back > i,
body.dkp .mob-back-bar > i,
body.dkp .ih-retour-b > i,
body.dkp .icf-back > i,
body.dkp-espace .back-btn > i,
body.dkp-espace .mob-back > i,
body.dkp-espace .ih-retour-b > i,
body.dkp-espace .icf-back > i,
body.dkp-admin .back > i,
body.dkp-admin .back-btn > i,
body.dkp-admin .icf-back > i,
body.dkp-admin .aback-row > i{
  flex:0 0 auto;
  /* LA FLECHE N'EST PLUS ENCADREE. Le configurateur enfermait la sienne dans
     un carre arrondi de 40 px (fond #14161B, filet #2B2E36) : c'etait le
     dernier cadre de la serie, et il posait une boite la ou les autres pages
     n'ont qu'un glyphe. */
  width:auto !important;height:auto !important;
  border:0 !important;border-radius:0 !important;background:transparent !important;
  font-size:clamp(26px,2.1vw,32px) !important;font-weight:400 !important;
  line-height:1 !important;color:inherit !important;
}
/* Le libelle est SECONDAIRE : la fleche porte l'action, le mot dit ou elle
   mene. Deux blancs cote a cote auraient fait deux titres. */
body.dkp .back > span,
body.dkp .odc-back > span,
body.dkp .offer-back > span,
body.dkp .back-btn > span,
body.dkp .ih-retour-b > span,
body.dkp .icf-back > span,
body.dkp .mob-back-bar > span,
body.dkp-espace .back-btn > span,
body.dkp-espace .ih-retour-b > span,
body.dkp-espace .icf-back > span,
body.dkp-admin .back > span,
body.dkp-admin .back-btn > span,
body.dkp-admin .icf-back > span,
body.dkp-admin .aback-row > span{
  color:#8E94A1;max-width:none;white-space:normal;
}
body.dkp .back:hover,
body.dkp .odc-back:hover,
body.dkp .offer-back:hover,
body.dkp .back-btn:hover,
body.dkp .mob-back:hover,
body.dkp .mob-back-bar:hover,
body.dkp .ih-retour-b:hover,
body.dkp .icf-back:hover,
body.dkp-espace .back-btn:hover,
body.dkp-espace .mob-back:hover,
body.dkp-espace .ih-retour-b:hover,
body.dkp-espace .icf-back:hover,
body.dkp-admin .back:hover,
body.dkp-admin .back-btn:hover,
body.dkp-admin .icf-back:hover,
body.dkp-admin .aback-row:hover{color:var(--dk-or) !important;background:transparent !important}
body.dkp .back:hover > span,
body.dkp .odc-back:hover > span,
body.dkp .offer-back:hover > span,
body.dkp .back-btn:hover > span,
body.dkp .mob-back-bar:hover > span,
body.dkp .ih-retour-b:hover > span,
body.dkp .icf-back:hover > span,
body.dkp-espace .back-btn:hover > span,
body.dkp-espace .ih-retour-b:hover > span,
body.dkp-espace .icf-back:hover > span,
body.dkp-admin .back:hover > span,
body.dkp-admin .back-btn:hover > span,
body.dkp-admin .icf-back:hover > span,
body.dkp-admin .aback-row:hover > span{color:#FFFFFF}
body.dkp .back:active,
body.dkp .odc-back:active,
body.dkp .offer-back:active,
body.dkp .back-btn:active,
body.dkp .mob-back:active,
body.dkp .mob-back-bar:active,
body.dkp .ih-retour-b:active,
body.dkp .icf-back:active,
body.dkp-espace .back-btn:active,
body.dkp-espace .mob-back:active,
body.dkp-espace .ih-retour-b:active,
body.dkp-espace .icf-back:active,
body.dkp-admin .back:active,
body.dkp-admin .back-btn:active,
body.dkp-admin .icf-back:active,
body.dkp-admin .aback-row:active{color:var(--dk-or) !important;opacity:.75}
/* La barre de retour de la fiche annonce garde sa place sous la navigation,
   mais rend son fond plein et son cadre : il ne reste que le filet du bas,
   celui qui separe du contenu. */
body.dkp .mob-back-bar{
  border-bottom:1px solid var(--dk-fil) !important;border-radius:0 !important;
  padding:calc(var(--mnavh,90px) + 8px) 14px 13px !important;
}
/* Le retour de l'en-tete de catalogue partage n'est plus une pilule : la
   rangee qui l'entoure n'a donc plus de raison de reserver sa hauteur. */
body.dkp .ih-cathead .ih-retour,
body.dkp-espace .ih-cathead .ih-retour{padding:2px 0 4px !important}

/* ══════════════════════════════════════════════════════════════════════════
   LA BARRE DE DEFILEMENT : UN RAIL, ET UN ROND QUI COULISSE DESSUS
   Deuxieme version, 30 aout 2026. La premiere ne montrait QUE le pouce :
   "on voit le point de scroll mais pas la barre qui peut aller de bas en
   haut [...] fine barre blanche (plus ou moins transparente) et rond orange
   ou on sait instinctivement qu'il coulisse sur la barre".

   LE RAIL EST DESSINE DANS LE FOND DE LA PISTE, en trois couches : un trait
   de deux pixels centre dans la gouttiere, et un point plus clair a chaque
   extremite pour marquer le debut et la fin de la course. Un pseudo-element
   n'etait pas possible : ::-webkit-scrollbar-track n'en accepte pas.

   LE POUCE EST UNE PILULE, pas un rectangle : bord arrondi complet, largeur
   de douze pixels obtenue par une bordure transparente et background-clip,
   hauteur minimale de trente pixels pour rester attrapable a la souris. Sur
   un contenu long il devient un vrai rond.

   SEULS LES PETITS BLOCS SONT CONCERNES. "Je ne veux pas de barre de scroll
   visible pour catalogue, je ne veux que pour les mini-blocs comme ca" :
   c'est idmp_scroll.js qui applique la regle, en refusant de marquer les
   conteneurs qui occupent presque tout l'ecran, ceux-la etant la page
   elle-meme et non un bloc.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px){

  /* Retour a auto obligatoire : idmp_black.css pose scrollbar-width sur tout
     le document avec l'etoile, et Chrome ignore alors ::-webkit-scrollbar. */
  body.dkp [data-dksb],
  body.dkp-espace [data-dksb],
  body.dkp-admin [data-dksb]{scrollbar-width:auto;scrollbar-color:auto}

  @supports (-moz-appearance:none){
    body.dkp [data-dksb],
    body.dkp-espace [data-dksb],
    body.dkp-admin [data-dksb]{
      scrollbar-width:thin;
      scrollbar-color:var(--dk-th,#FF3019) rgba(255,255,255,.10);
    }
  }

  body.dkp [data-dksb]::-webkit-scrollbar,
  body.dkp-espace [data-dksb]::-webkit-scrollbar,
  body.dkp-admin [data-dksb]::-webkit-scrollbar{width:16px;height:16px}

  body.dkp [data-dksb]::-webkit-scrollbar-track,
  body.dkp-espace [data-dksb]::-webkit-scrollbar-track,
  body.dkp-admin [data-dksb]::-webkit-scrollbar-track{
    /* Les deux reperes sont a 6px du bord, donc leur CENTRE tombe a 11px :
       exactement la ou la bille du pouce s arrete en butee, une fois qu elle
       coulisse dans son pouce (voir --dk-pos dans idmp_scroll.js). Ils
       etaient a 10px, pour une bille qui s arretait a une demi-hauteur de
       pouce du bord, soit 259px sur la colonne de config_detail. */
    background:
      radial-gradient(circle at center, rgba(255,255,255,.72) 0 2.5px, rgba(255,255,255,0) 2.5px)
        center top 6px / 100% 10px no-repeat,
      radial-gradient(circle at center, rgba(255,255,255,.72) 0 2.5px, rgba(255,255,255,0) 2.5px)
        center bottom 6px / 100% 10px no-repeat,
      linear-gradient(to right,
        rgba(255,255,255,0) calc(50% - 1.5px),
        rgba(255,255,255,.30) calc(50% - 1.5px),
        rgba(255,255,255,.30) calc(50% + 1.5px),
        rgba(255,255,255,0) calc(50% + 1.5px));
    border-radius:0;
  }
  body.dkp [data-dksb]::-webkit-scrollbar-corner,
  body.dkp-espace [data-dksb]::-webkit-scrollbar-corner,
  body.dkp-admin [data-dksb]::-webkit-scrollbar-corner{background:transparent}

  /* LE POUCE EST UN ROND, PAS UN BATON. "Le thumb, fais le rond, c'est
     mieux." La hauteur d'un pouce de barre native est imposee par le
     navigateur, proportionnelle au contenu : on ne peut pas la forcer a
     douze pixels. On dessine donc le rond DANS le pouce, par un degre
     radial de diametre fixe centre sur lui. La zone de prise reste la
     hauteur entiere, ce qui est confortable a la souris, et l'oeil ne voit
     qu'une bille orange qui coulisse sur le rail. Le centre de la bille
     tombe pile sur le centre de la fenetre affichee : la position lue est
     exacte. */
  body.dkp [data-dksb]::-webkit-scrollbar-thumb,
  body.dkp-espace [data-dksb]::-webkit-scrollbar-thumb,
  body.dkp-admin [data-dksb]::-webkit-scrollbar-thumb{
    background:
      radial-gradient(circle at center,
        var(--dk-th,#FF3019) 0 5.5px,
        rgba(255,48,25,.30) 5.5px 8px,
        rgba(255,255,255,0) 8px) center var(--dk-pos,50%) / 100% 22px no-repeat;
    border:0;border-radius:0;min-height:26px;
  }

  /* L AXE HORIZONTAL A SA PROPRE POSITION, et il la lui fallait. Aucune de
     ces regles ne portait de garde d axe : ::-webkit-scrollbar declare
     width ET height, et la feuille dessine meme un -corner, donc elle sert
     bien les deux axes. Une barre horizontale recevait ainsi --dk-pos, qui
     est calculee sur le defilement VERTICAL du meme conteneur : la bille y
     partait a gauche ou a droite sans rapport avec ce qu on lisait, et sur
     un tableau qui ne defile qu horizontalement elle restait figee.
     Les deux tableaux concernes sont Contacts et Affaires de l admin, qui
     posent overflow-x:auto sur .crm-defile. */
  body.dkp [data-dksb]::-webkit-scrollbar-thumb:horizontal,
  body.dkp-espace [data-dksb]::-webkit-scrollbar-thumb:horizontal,
  body.dkp-admin [data-dksb]::-webkit-scrollbar-thumb:horizontal{
    background:
      radial-gradient(circle at center,
        var(--dk-th,#FF3019) 0 5.5px,
        rgba(255,48,25,.30) 5.5px 8px,
        rgba(255,255,255,0) 8px) var(--dk-posx,50%) center / 22px 100% no-repeat;
    min-height:0;min-width:26px;
  }
  body.dkp [data-dksb]::-webkit-scrollbar-track:horizontal,
  body.dkp-espace [data-dksb]::-webkit-scrollbar-track:horizontal,
  body.dkp-admin [data-dksb]::-webkit-scrollbar-track:horizontal{
    background:
      radial-gradient(circle at center, rgba(255,255,255,.72) 0 2.5px, rgba(255,255,255,0) 2.5px)
        left 6px center / 10px 100% no-repeat,
      radial-gradient(circle at center, rgba(255,255,255,.72) 0 2.5px, rgba(255,255,255,0) 2.5px)
        right 6px center / 10px 100% no-repeat,
      linear-gradient(to bottom,
        rgba(255,255,255,0) calc(50% - 1.5px),
        rgba(255,255,255,.30) calc(50% - 1.5px),
        rgba(255,255,255,.30) calc(50% + 1.5px),
        rgba(255,255,255,0) calc(50% + 1.5px));
  }
  body.dkp [data-dksb]::-webkit-scrollbar-thumb:hover,
  body.dkp-espace [data-dksb]::-webkit-scrollbar-thumb:hover,
  body.dkp-admin [data-dksb]::-webkit-scrollbar-thumb:hover{
    background:
      radial-gradient(circle at center,
        #FFFFFF 0 6.5px,
        rgba(255,255,255,.34) 6.5px 9px,
        rgba(255,255,255,0) 9px) center var(--dk-pos,50%) / 100% 22px no-repeat;
  }
  body.dkp [data-dksb]::-webkit-scrollbar-thumb:horizontal:hover,
  body.dkp-espace [data-dksb]::-webkit-scrollbar-thumb:horizontal:hover,
  body.dkp-admin [data-dksb]::-webkit-scrollbar-thumb:horizontal:hover{
    background:
      radial-gradient(circle at center,
        #FFFFFF 0 6.5px,
        rgba(255,255,255,.34) 6.5px 9px,
        rgba(255,255,255,0) 9px) var(--dk-posx,50%) center / 22px 100% no-repeat;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LA RANGEE DES PALIERS RESPIRE
   "Le tonnage est trop pres des mini-pelles, rapproche-le un peu plus du
   titre en haut, qu'il y ait un espace avec les annonces." Mesure au banc :
   l'en-tete laissait 23 px au-dessus de la rangee et ZERO en dessous, la
   grille demarrant au pixel ou le filet se terminait. Les deux valeurs sont
   inversees : huit pixels au-dessus, la rangee appartient au titre ; vingt-
   six en dessous, les annonces commencent ailleurs.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (min-height:620px){
  body.dkp-espace #ih-tonwrap-desk,
  body.dkp-espace #ih-tonwrap-tabs,
  body.dkp-espace .ih-tonwrap{margin-top:-15px !important;margin-bottom:26px !important}
}


/* ══════════════════════════════════════════════════════════════════════════
   LE TELEPHONE COUCHE A SA BARRE, ET ELLE EST A DROITE
   Demande de Gloire du 30 aout 2026 : "pour mobile version paysage, donc
   mobile navigateur paysage, mets une nav barre a droite, comme la nav barre
   appli mobile mais verticale et a droite".

   CE QU'IL Y AVAIT : rien. La coque telephone ne s'active que sous 768 px ou
   en portrait ; un iPhone couche mesure 844 x 390 et tombe entre les deux.
   La barre laterale de l'ordinateur est masquee a cette taille, la barre
   flottante du telephone n'est pas montee. Il ne restait que le bouton
   burger de l'en-tete invite.

   CE QU'ON FAIT : on rend son rail a l'ecran, mais couche a droite et taille
   comme la pilule de l'application, pictogrammes seuls. On ne monte PAS la
   coque telephone : elle changerait toute la mise en page pour resoudre un
   probleme de navigation.

   LE POUCE EST A DROITE quand on tient un telephone couche a deux mains :
   c'est la raison de ce cote, et c'est ce que Gloire a demande.
   ══════════════════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (max-height:560px){

  body.dkp-espace:not(.guest) aside.sb{
    display:flex !important;
    position:fixed;right:9px;top:50%;transform:translateY(-50%);
    left:auto;bottom:auto;width:58px;height:auto;max-height:94vh;
    flex-direction:column;padding:7px 0;
    border:1px solid rgba(255,255,255,.11);border-radius:29px;
    background:rgba(9,9,11,.94);
    box-shadow:0 10px 34px rgba(0,0,0,.6);
    z-index:60;overflow:hidden;
  }
  /* Le logo, le bloc utilisateur et les intertitres n'ont pas leur place sur
     58 px de large : le rail ne garde que ce qui navigue. */
  body.dkp-espace:not(.guest) aside.sb .sb-top,
  body.dkp-espace:not(.guest) aside.sb .sb-bot,
  body.dkp-espace:not(.guest) aside.sb .sb-grp{display:none !important}

  body.dkp-espace:not(.guest) aside.sb .sb-nav{
    display:flex;flex-direction:column;gap:1px;
    padding:0 5px;overflow-y:auto;scrollbar-width:none;
  }
  body.dkp-espace:not(.guest) aside.sb .sb-nav::-webkit-scrollbar{display:none}

  /* font-size:0 efface le libelle sans toucher au balisage ; le pictogramme
     et la pastille de compteur retrouvent le leur juste apres. */
  body.dkp-espace:not(.guest) aside.sb .sbi{
    width:48px;height:44px;min-height:0;padding:0;margin:0;
    justify-content:center;border-radius:15px;font-size:0;gap:0;
  }
  body.dkp-espace:not(.guest) aside.sb .sbi > i{font-size:20px;width:auto}
  body.dkp-espace:not(.guest) aside.sb .sbi .sbi-badge{
    position:absolute;top:4px;right:4px;font-size:9px;min-width:15px;height:15px;
    line-height:15px;padding:0 3px;
  }
  body.dkp-espace:not(.guest) aside.sb .sbi{position:relative}

  /* Le contenu se decale pour ne pas passer sous le rail. */
  body.dkp-espace:not(.guest) .main,
  body.dkp-espace:not(.guest) .content{padding-right:78px}
}

/* ══════════════════════════════════════════════════════════════════════════
   LA FICHE COMMANDE PERD SES BOITES, TELEPHONE ET ORDINATEUR
   Demande de Gloire du 30 aout 2026 : "pour order_detail et config_detail, je
   veux que la version mobile et la version ordinateur soient nouveau design
   plus lueur rouge, tu gardes la meme structure sur mobile mais tu fais le
   nouveau design, je ne veux pas de bloc ni de contour de bloc, je veux que ce
   soit epure au max, et des blocs a fond transparent".

   LA STRUCTURE NE BOUGE PAS, seulement sa peau : suivi, paiements, total,
   documents et messagerie gardent leur place et leur ordre. Chacun perd son
   fond, son cadre et son rayon, et recoit un filet au-dessus quand il suit
   un autre bloc. Ce qui portait l'information continue de la porter ; ce qui
   ne portait qu'une bordure disparait.

   LA PASTILLE D'ICONE GARDE SON CERCLE : c'est un pictogramme, pas un bloc,
   et sans cadre il flotte au milieu du vide.
   ══════════════════════════════════════════════════════════════════════════ */
body.dkp-order .odc-sui,
body.dkp-order .odc-pay,
body.dkp-order .odc-tot,
body.dkp-order .odc-msgs{
  background:transparent !important;border:0 !important;border-radius:0 !important;
}
body.dkp-order .odc-pay,
body.dkp-order .odc-tot{
  border-top:1px solid var(--dk-fil) !important;
  padding-left:2px !important;padding-right:2px !important;
}
body.dkp-order .odc-sui{padding-left:2px !important;padding-right:2px !important}
body.dkp-order .odc-msgs{
  border-top:1px solid var(--dk-fil) !important;
  padding-left:2px !important;padding-right:2px !important;
}
/* Un document reste une LIGNE cliquable, pas une carte : filet du bas, rien
   d'autre, et le dernier n'en a pas. */
body.dkp-order .odc-doc{
  background:transparent !important;border:0 !important;border-radius:0 !important;
  border-bottom:1px solid var(--dk-fil) !important;
  padding-left:2px !important;padding-right:2px !important;
}
body.dkp-order .odc-doc:last-child{border-bottom:0 !important}

/* ── LE TELEPHONE ET LA TABLETTE PORTRAIT RECOIVENT LE MEME TRAITEMENT ──────
   Gloire, 30 aout 2026 : "order_detail version mobile a toujours un visuel
   obsolete, je veux le nouveau visuel avec lueur et bloc sans contour et bloc
   transparent". Il avait raison et c'etait mesurable : trois elements de la
   coque gardaient leur peau d'origine sous la barriere ordinateur, parce que
   les regles qui les aplatissaient etaient enfermees dedans.

   LA LUEUR NE PEUT PAS VENIR DU CORPS. #odc est en position:fixed avec un
   z-index de 60 : le ::before pose sur body.dkp passe DERRIERE lui et ne se
   voit jamais. C'est pour cela que la recette est repeinte ici, sur la coque
   elle-meme, et non heritee.

   CE QUI RESTE ENCADRE : les pastilles, les pictogrammes et les boutons. Un
   contour sur une commande dit qu'on peut appuyer dessus ; sur un bloc de
   contenu, il ne dit rien que l'espace ne dise mieux.
   ══════════════════════════════════════════════════════════════════════════ */
body.dkp-order #odc{
  background:
    radial-gradient(120vh 90vh at 8% -18%,rgba(255,48,25,.20),rgba(255,48,25,0) 62%),
    radial-gradient(90vh 70vh at 96% 108%,rgba(255,48,25,.10),rgba(255,48,25,0) 60%),
    #000;
}
body.dkp-order .odc-card{border:0 !important;background:transparent !important;border-radius:0 !important}
body.dkp-order .odc-photo{background:transparent !important;border:0 !important;border-radius:0 !important}
/* Les trois lignes de navigation deviennent des lignes, pas des cartes :
   meme convention que les documents traites juste au-dessus. */
body.dkp-order .odc-row{
  background:transparent !important;border:0 !important;border-radius:0 !important;
  border-bottom:1px solid var(--dk-fil) !important;
  padding-left:2px !important;padding-right:2px !important;
}
body.dkp-order .odc-row:last-child{border-bottom:0 !important}
body.dkp-order .odc-row:hover{background:rgba(255,255,255,.035) !important}
/* Le titre de la carte machine perd son filet du bas s'il en avait un : sans
   cadre autour, un trait isole se lit comme une coupure. */
body.dkp-order .odc-cons{border:0 !important;background:transparent !important}

/* ══════════════════════════════════════════════════════════════════════════
   LA REPONSE DU SAV : UN ACCENT, PLUS UNE BOITE
   Elle etait le dernier bloc cercle de la fiche SAV : fond vert a 8 %, cadre
   vert et rayon de 16 px, au milieu d'une page qui n'a plus aucun cadre. Ce
   qui doit la distinguer, ce n'est pas un contour, c'est qu'elle vient de
   quelqu'un d'autre : un filet vertical a gauche le dit aussi bien, et laisse
   le texte respirer sur toute la largeur.
   ══════════════════════════════════════════════════════════════════════════ */
body.dkp-sav .answer{
  background:transparent !important;border:0 !important;border-radius:0 !important;
  border-left:2px solid rgba(37,196,106,.55) !important;
  padding-left:15px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA FICHE CONFIGURATION PERD SES BOITES SUR TELEPHONE
   Sur ordinateur elle n'en a plus depuis la refonte du 29 aout ; sur
   telephone elle empilait encore quatre cartes cerclees de #2B2E36 sur fond
   #0E0F13. Meme consigne, meme reponse : la structure ne bouge pas, seule la
   peau tombe. Chaque carte devient une section separee par un filet, et la
   premiere n'en a pas.

   LA CARTE DU PRIX GARDE SON FOND, et c'est le seul. Elle porte le montant et
   le bouton de commande : c'est le point de decision de l'ecran, il a le
   droit de se detacher. Un fond a peine plus clair suffit, sans cadre.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px), (orientation:portrait) and (max-width:1024px){
  body.dkp-config .card{
    background:transparent !important;border:0 !important;border-radius:0 !important;
    border-top:1px solid var(--dk-fil) !important;
    padding-left:2px !important;padding-right:2px !important;
    margin-top:16px !important;padding-top:18px !important;
  }
  body.dkp-config .card:first-of-type{
    border-top:0 !important;margin-top:0 !important;padding-top:0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLUS DE PASTILLES A NOMBRE DANS L'ADMINISTRATION
   Demande de Gloire du 31 aout 2026 : "dans admin je ne veux plus qu'il y ait
   les espece de truc orange avec des nombres".

   CE QUI DISPARAIT, ET OU. L'inventaire a trouve trois familles :
     1. les pastilles de NOTIFICATION, orange plein : la cloche de la barre du
        haut, l'en-tete du panneau, la cloche du tableau de bord mobile et le
        compteur SAV du menu mobile ;
     2. les COMPTEURS D'EN-TETE DE COLONNE des kanbans (.kcnt), poses sur des
        en-tetes qui virent a l'orange de marque en fin de pipeline : ce sont
        eux, les plus visibles, "les trucs oranges avec des nombres" ;
     3. les COMPTEURS D'ONGLET, .it-tab .n en bureau et .kbt-n sur telephone,
        qui repetent les memes nombres sous une autre forme.

   POURQUOI EN CSS ET NON EN RETIRANT LE BALISAGE. updateBadge() de
   idmp_admin.html ecrit sans garde de nullite :
       badge.textContent = cnt; badge.style.display = 'flex';
   Supprimer #notif-badge du balisage leverait donc une TypeError qui casserait
   la fonction, appelee a l'initialisation et a chaque chargement des
   notifications. Et renderSavAdmin repose display:'inline-block' sur
   #mob-badge-sav a chaque rendu, ce qui exige de toute facon un !important.
   On masque, le code continue de compter dans le vide, et rien ne casse.

   PORTEE : body.dkp-admin, c'est-a-dire /admin et lui seul. L'espace CLIENT
   garde ses pastilles : sa cloche et ses compteurs ne sont pas concernes, et
   c'etait le piege principal de cette demande.
   ═══════════════════════════════════════════════════════════════════════════ */
body.dkp-admin #notif-badge,
body.dkp-admin #notif-panel-cnt,
body.dkp-admin #mob-ov-bell-badge,
body.dkp-admin #mob-badge-sav,
body.dkp-admin .ndot-cnt,
body.dkp-admin .a-bell-badge,
body.dkp-admin .kcnt,
body.dkp-admin .it-tab .n,
body.dkp-admin .kbt-b .kbt-n { display: none !important; }

/* Le compteur retire, l'en-tete de colonne garde un ecart qui ne separe plus
   rien : le titre se recentre sur lui-meme. */
body.dkp-admin .kol-hd { justify-content: flex-start; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA LUEUR TRAVERSE LES BLOCS
   Pose le 2 septembre 2026 a la demande de Gloire : "je veux que les blocs
   soient transparents, et surtout que la lueur rouge se voie car sinon ca
   fatigue les yeux a la longue".

   ── D'OU VIENT LA LUEUR ICI, ET SURTOUT D'OU ELLE NE VIENT PAS ─────────────
   Piege coute une premiere ecriture de ce bloc, a ne pas repayer.
   body.dkp::before (ligne 87) ne s'applique NI a l'administration NI aux
   fiches CRM : elles portent dkp-admin et dkp-crm, pas le jeton dkp exact.
   Mais la lueur y est quand meme, et elle vient d'ailleurs :
   idmp_black.css:3855 la peint sur .content, en background-image, avec une
   forme que Gloire a dessinee lui-meme sur une capture (un coeur brillant
   jusqu'aux trois quarts du rayon, puis une estompe jusqu'au noir).

   CONSEQUENCE DIRECTE : .content NE DOIT PAS DEVENIR TRANSPARENT. Il n'est
   pas un masque, il est l'EMETTRICE. Le rendre transparent efface la lueur au
   lieu de la liberer, et l'ecran devient plus noir qu'avant. Ce bloc s'est
   d'abord trompe sur ce point ; la correction est de n'y pas toucher du tout,
   et de ne voiler que les blocs POSES DESSUS.

   ── POURQUOI UN VOILE CLAIR ET NON UN NOIR TRANSLUCIDE ─────────────────────
   Quatre valeurs ont ete rendues cote a cote sur la lueur reelle : le plein
   #0B0B0D actuel, un voile clair, un voile clair avec flou, un noir a 55 pour
   cent. Le plein TROUE la lueur, on voit le rectangle sombre par-dessus le
   rouge. Le noir translucide la laisse passer mais continue d'assombrir,
   ce qui ne repose pas l'oeil. Le voile clair l'eclaircit au contraire :
   c'est lui qui est retenu, et c'est aussi la langue que parle deja le design
   epure de body.dkp-config, dont les filets valent rgba(255,255,255,.085).

   ── PAS DE BACKDROP-FILTER, ET C'EST DELIBERE ──────────────────────────────
   La variante avec flou etait la plus jolie. Elle est ecartee : un
   backdrop-filter cree un BLOC CONTENEUR pour les descendants position:fixed.
   C'est le bug paye le 14 aout 2026 sur l'en-tete partage, ou le panneau
   mobile mesurait 375x49 au lieu de 375x744 et laissait passer les appuis.
   Les sections de l'administration hebergent des fenetres modales en fixed :
   un flou pose ici les decrocherait de la fenetre, en silence.

   ── OU CETTE FEUILLE PEUT ECRIRE ───────────────────────────────────────────
   idmp_desk.css se charge APRES idmp_black.css dans idmp_admin.html (945
   contre 942), ce qui est contre-intuitif : black n'est PAS la derniere ici,
   contrairement a ce qu'elle est sur la plupart des pages. A specificite
   egale desk gagne donc, et il n'y a besoin de !important que la ou black
   impose le sien : .kcard (black:227) et le survol de ligne (bloc en ligne de
   idmp_admin.html, body.dark .tbl tr:hover td en !important).
   ═══════════════════════════════════════════════════════════════════════════ */

body.dkp-admin, body.dkp-espace{
  /* Surface d'un bloc, sa variante au survol, et la bande d'en-tete. Ecrites
     en jeton pour que l'accord se regle en un seul endroit si Gloire veut plus
     ou moins de lueur.
     dkp-espace a rejoint la liste le 4 septembre 2026 : le tableau de bord
     client porte les MEMES en-tetes de colonne, et le laisser sur l'ancien
     aplat aurait fait deux grammaires pour un seul composant. */
  --dk-bloc:rgba(255,255,255,.035);
  --dk-bloc-h:rgba(255,255,255,.055);
  --dk-bloc-hd:rgba(255,255,255,.05);
}

/* ── LES BLOCS DE REFERENCE DU TUNNEL ET DES UTILISATEURS ──────────────────
   Prospect est la reference : voile transparent, filet continu et lueur du
   fond visible. Le meme langage s'applique a contact, affaire, client,
   configuration, transport, commande et a Parametres > Utilisateurs. Il est
   cible par section afin de ne pas changer stock, catalogues, SAV, documents,
   compte, apercu ou recherches sans decision produit.

   "Transport" est servi par DEUX sections, #sec-livraisons pour la Chine et
   #sec-transporteu pour l'Europe : les deux sont traitees, sans quoi la
   moitie de l'onglet resterait opaque. */
body.dkp-admin #sec-prospects .card,
body.dkp-admin #sec-contacts .card,
body.dkp-admin #sec-affaires .card,
body.dkp-admin #sec-clients .card,
body.dkp-admin #sec-configurations .card,
body.dkp-admin #sec-livraisons .card,
body.dkp-admin #sec-transporteu .card,
body.dkp-admin #sec-commandes .card,
body.dkp-admin #pa-p-equipe .card,
body.dkp-admin #sec-prospects .scard,
body.dkp-admin #sec-contacts .scard,
body.dkp-admin #sec-affaires .scard,
body.dkp-admin #sec-clients .scard,
body.dkp-admin #sec-configurations .scard,
body.dkp-admin #sec-livraisons .scard,
body.dkp-admin #sec-transporteu .scard,
body.dkp-admin #sec-commandes .scard,
body.dkp-admin #sec-prospects .tbl,
body.dkp-admin #sec-contacts .tbl,
body.dkp-admin #sec-affaires .tbl,
body.dkp-admin #sec-clients .tbl,
body.dkp-admin #sec-configurations .tbl,
body.dkp-admin #sec-livraisons .tbl,
body.dkp-admin #sec-transporteu .tbl,
body.dkp-admin #sec-commandes .tbl,
body.dkp-admin #pa-p-equipe .tbl{
  background:var(--dk-bloc);
  border-color:var(--dk-fil);
}

/* L'entete de tableau se detache d'un cran, sinon la ligne de titres se confond
   avec la premiere ligne de donnees des que le fond devient un voile. */
body.dkp-admin #sec-prospects .tbl th,
body.dkp-admin #sec-contacts .tbl th,
body.dkp-admin #sec-affaires .tbl th,
body.dkp-admin #sec-clients .tbl th,
body.dkp-admin #sec-configurations .tbl th,
body.dkp-admin #sec-livraisons .tbl th,
body.dkp-admin #sec-transporteu .tbl th,
body.dkp-admin #sec-commandes .tbl th,
body.dkp-admin #pa-p-equipe .tbl th{background:var(--dk-bloc-hd)}

/* Le survol d'une ligne. Le !important n'est PAS decoratif : le bloc de style
   de idmp_admin.html porte body.dark .tbl tr:hover td{background:#161D2B
   !important} en (0,2,0). Sans lui, la ligne pointee restait un aplat bleute
   opaque au milieu d'un tableau devenu translucide, et le defaut ne se serait
   vu qu'a la souris. */
body.dkp-admin #sec-prospects .tbl tr:hover td,
body.dkp-admin #sec-contacts .tbl tr:hover td,
body.dkp-admin #sec-affaires .tbl tr:hover td,
body.dkp-admin #sec-clients .tbl tr:hover td,
body.dkp-admin #sec-configurations .tbl tr:hover td,
body.dkp-admin #sec-livraisons .tbl tr:hover td,
body.dkp-admin #sec-transporteu .tbl tr:hover td,
body.dkp-admin #sec-commandes .tbl tr:hover td,
body.dkp-admin #pa-p-equipe .tbl tr:hover td{background:var(--dk-bloc-h) !important}

/* ── LE TABLEAU DE BORD, SES DEUX VUES ───────────────────────────────────
   Gloire, le 4 septembre 2026 : "les blocs noirs, je veux la meme esthetique
   que le bloc de la liste des contacts, fond transparent et ligne du haut un
   peu plus opaque". L'apercu figurait jusqu'ici dans la liste des rubriques
   NON traitees, avec stock, catalogues et documents ; il en sort.

   LA BANDE DU HAUT EST OBTENUE PAR MARGES NEGATIVES. Sur un tableau, l'effet
   vient tout seul : th porte le fond et touche les bords de la carte. Ici les
   en-tetes vivent DANS le rembourrage de leur bloc, donc un fond pose dessus
   flotterait au milieu avec une gouttiere de chaque cote. On annule le
   rembourrage du parent, puis on le remet sur l'en-tete lui-meme : la bande
   file alors d'un bord a l'autre, comme la ligne de titres d'un tableau.

   ON NE CONTESTE PAS LES STYLES EN LIGNE, ON PASSE A COTE. Les en-tetes du
   Classement et des RDV portent leur mise en forme en attribut style, qui bat
   toute regle de feuille : margin-bottom, padding-bottom et border-bottom sont
   donc laisses tels quels, et seules les proprietes libres sont ecrites, le
   fond, le haut et les cotes. Une leçon deja payee sur cet ecran.
   ═══════════════════════════════════════════════════════════════════════ */
body.dkp-admin #sec-overview .ovc,
body.dkp-admin #sec-overview .card{
  background:var(--dk-bloc);
  border-color:var(--dk-fil);
}

/* La bande des cartes d'indicateur. Le rembourrage de .ovc vaut 13px 14px. */
body.dkp-admin #sec-overview .ovc-h{
  background:var(--dk-bloc-hd);
  margin:-13px -14px 11px;
  padding:11px 14px 9px;
  border-bottom-color:var(--dk-fil);
  border-radius:11px 11px 0 0;
}
/* Le mini-tableau des totaux est plus serre que les autres cartes : sa regle
   d'origine vaut margin-bottom 6px, on la lui rend. */
body.dkp-admin #sec-overview .ovc-tot .ovc-h{margin-bottom:6px;padding-bottom:5px}

/* La bande du Classement et des prochains RDV. Le rembourrage de .card vaut
   16px 18px. margin-bottom et padding-bottom restent aux styles en ligne. */
body.dkp-admin #sec-overview .ov-scroll-card > div:first-child{
  background:var(--dk-bloc-hd);
  margin-top:-16px;
  margin-left:-18px;
  margin-right:-18px;
  padding-top:14px;
  padding-left:18px;
  padding-right:18px;
  border-radius:11px 11px 0 0;
}

/* Les cases internes suivent, sinon elles restent des aplats poses sur un
   fond devenu voile : les trois compteurs de periode d'une carte, et les
   quatre colonnes de chaque ligne du classement. */
body.dkp-admin #sec-overview .ovc-i,
body.dkp-admin #sec-overview .ovr-c{background:var(--dk-bloc)}

/* Les filets internes, sur le meme accord que les blocs. */
body.dkp-admin #sec-overview .ovr,
body.dkp-admin #sec-overview .ov-rdv{border-bottom-color:var(--dk-fil)}
body.dkp-admin #sec-overview .ov-rdv:hover{background:var(--dk-bloc-h)}

/* ── LES CINQ KANBANS ──────────────────────────────────────────────────────
   Compte fait sur le balisage : CINQ des huit sections sont des kanbans, pas
   des tableaux. Affaires (10 colonnes), commandes (8), livraisons (8),
   transporteu (6) et configurations (5). Ne traiter que les affaires aurait
   laisse quatre onglets sur cinq en aplat plein.

   .kol n'a AUCUN fond propre, seulement une barre de defilement : les colonnes
   sont deja transparentes, rien a y faire. .kol-hd garde son degrade colore,
   c'est lui qui distingue les colonnes les unes des autres : le vider ferait
   perdre l'information au profit de rien.

   idmp_black.css:227 impose .kcard{background:var(--wh) !important} en (0,1,0),
   d'ou le !important ici. */
body.dkp-admin #sec-affaires .kcard,
body.dkp-admin #sec-configurations .kcard,
body.dkp-admin #sec-commandes .kcard,
body.dkp-admin #sec-livraisons .kcard,
body.dkp-admin #sec-transporteu .kcard{
  background:var(--dk-bloc) !important;
  border-color:var(--dk-fil);
}
body.dkp-admin #sec-affaires .kcard:hover,
body.dkp-admin #sec-configurations .kcard:hover,
body.dkp-admin #sec-commandes .kcard:hover,
body.dkp-admin #sec-livraisons .kcard:hover,
body.dkp-admin #sec-transporteu .kcard:hover{background:var(--dk-bloc-h) !important}

/* La colonne vide, sinon elle reste un aplat au milieu de colonnes devenues
   translucides : c'est l'etat le plus visible d'un kanban peu rempli. */
body.dkp-admin #sec-affaires .kol-empty,
body.dkp-admin #sec-configurations .kol-empty,
body.dkp-admin #sec-commandes .kol-empty,
body.dkp-admin #sec-livraisons .kol-empty,
body.dkp-admin #sec-transporteu .kol-empty{background:var(--dk-bloc)}

/* ── LA PAGE D'UNE COMMANDE, VUE STAFF ─────────────────────────────────────
   idmp_order_detail.html porte deja "dkp dkp-order" : la lueur y est. Ce sont
   ses blocs qui restaient pleins.

   LA COQUE CLIENT N'EST PAS TOUCHEE. Les classes odc-* forment un second
   ecran, autonome, concu SANS defilement et verifie par rendu a cinq tailles
   (CLAUDE.md section 7). Un fond translucide y changerait les contrastes d'un
   ecran dont l'equilibre a ete mesure : hors du perimetre demande, donc hors
   de ce lot.

   .msg-idmp .msg-bubble est laissee telle quelle : son fond blanc a deja ete
   corrige une fois pour un bug de blanc sur blanc, et le fil de discussion a
   besoin d'une bulle pleine pour se lire. */
body.dkp-order .card,
body.dkp-order .stepper-wrap,
body.dkp-order .od-tabbar,
body.dkp-order .doc-slot{
  background:rgba(255,255,255,.035);
  border-color:var(--dk-fil);
}
body.dkp-order .od-tab:hover{background:rgba(255,255,255,.055)}

/* ── LES DEUX BLOCS PROPRES AU TRANSPORT ───────────────────────────────────
   Les identifiants de section mentent, et il faut le savoir avant d'y toucher :
   #sec-livraisons s'affiche "Transport MARITIME" et #sec-transporteu
   "Transport TERRESTRE". Aucun des deux ne s'appelle Livraisons ni
   Transporteurs a l'ecran ; les deux forment l'onglet Transport que Gloire a
   nomme, d'ou leur traitement identique.

   .trsel-b est le selecteur qui bascule entre les deux modes. .kol.kdrop-over
   est la colonne survolee pendant un glisser-deposer : son #FFF8F6 etait un
   rose tres clair, illisible des que la colonne devient un voile. Il reprend
   la teinte de la marque, au meme titre que le reste de l'ecran. */
body.dkp-admin #sec-livraisons .trsel-b,
body.dkp-admin #sec-transporteu .trsel-b{background:var(--dk-bloc);border-color:var(--dk-fil)}

body.dkp-admin #sec-affaires .kol.kdrop-over,
body.dkp-admin #sec-configurations .kol.kdrop-over,
body.dkp-admin #sec-commandes .kol.kdrop-over,
body.dkp-admin #sec-livraisons .kol.kdrop-over,
body.dkp-admin #sec-transporteu .kol.kdrop-over{background:rgba(255,48,25,.10)}

/* CE QUI RESTE OPAQUE, ET POURQUOI
   .mo-box (les fenetres modales), .sidebar et .topbar : une fenetre posee
   PAR-DESSUS le contenu doit le masquer, sinon les deux textes se superposent
   et plus rien ne se lit. La barre laterale et la barre du haut encadrent
   l'ecran : les voiler ferait flotter la navigation dans le contenu.
   Les champs de saisie (.fsel, .fq, input, textarea) gardent aussi leur fond :
   c'est lui qui signale au regard qu'une zone est modifiable. */

/* ═══════════════════════════════════════════════════════════════════════════
   LES ENTETES DE COLONNES KANBAN
   Refaits le 2 septembre 2026. Gloire : "tous les headers des colonnes kanban,
   je trouve le truc brillant vulgaire et moche, mets-moi des headers design,
   plus beaux, qui s'integrent bien".

   ── CE QU'ETAIT LE "TRUC BRILLANT" ────────────────────────────────────────
   Trois effets empiles, du vocabulaire des annees 2000 :
     un reflet blanc a 30 pour cent sur la moitie haute,
     un degrade de la couleur vers le blanc a 55 pour cent,
     un liseret interne blanc a 35 pour cent.
   Sur un fond noir traverse d'une lueur, cela donnait neuf pastilles claires
   et laquees alignees en haut d'ecran : c'est le point le plus lumineux de la
   page, alors que ce n'est qu'un intertitre de colonne.

   ── CE QU'IL NE FALLAIT SURTOUT PAS PERDRE ────────────────────────────────
   La couleur de ces entetes n'est PAS decorative. Les quatre themes de
   idmp_black.css (sections 6a a 6d) posent une PROGRESSION : du blanc a
   l'orange de marque sur neuf paliers pour les affaires, les configurations et
   les commandes ; du blanc au bleu sur sept paliers pour le transport
   maritime ; du blanc au marron sur cinq pour le terrestre. La position dans
   le degrade DIT l'avancement du dossier. Un entete uniforme aurait rendu la
   page plus sobre en supprimant une information.
   Seul le theme "statut" (alertes, SAV) est un jeu de trois etats sans ordre.

   ── LE PARTI RETENU ───────────────────────────────────────────────────────
   La couleur passe du remplissage a l'ACCENT. Le fond devient un noir teinte
   de 12 pour cent de la couleur de colonne, le filet gauche de 3 px porte la
   couleur pure, et le libelle la reprend eclaircie. La progression se lit
   donc toujours, sur trois porteurs au lieu d'un aplat, et l'ecran redevient
   sombre. Quatre pistes ont ete rendues cote a cote sur la lueur reelle avant
   de choisir celle-ci.

   ── POURQUOI 94 POUR CENT ET NON UN VOILE ─────────────────────────────────
   Ces entetes sont position:sticky. Un fond trop translucide laisse LIRE les
   cartes qui defilent dessous, ce qui a ete verifie au banc : a 72 pour cent
   le nom du client se devinait a travers le titre de colonne. Le fond est
   donc a 94 pour cent, et le box-shadow qui prolonge l'entete de 9 px reprend
   exactement la meme valeur au lieu du var(--bg) plein d'avant, qui aurait
   pose une barre noire franche en travers de la lueur.

   Contraste mesure sur les 24 entetes des quatre themes : 6,8:1 dans le pire
   cas, pour un seuil AA de 4,5:1.

   Le tableau de bord client est traite avec l'administration : il portait le
   meme entete brillant, et Gloire a dit "tous".
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ MISE A JOUR DU 4 SEPTEMBRE 2026 ═══════════════════════════════════════
   Gloire : "je veux que les headers des colonnes kanban soient pareils que les
   lignes du haut que tu viens de me faire, la ils sont horribles".

   CE QUI EST ABANDONNE. La version du 2 septembre teintait chaque en-tete de
   la couleur de sa colonne : fond a 12 pour cent de --kc, filet gauche plein,
   libelle a 62 pour cent. Neuf teintes cote a cote, du blanc au rouge sur les
   commandes, une echelle de bleus sur le transit maritime. Le contraste etait
   bon, l'ensemble ne l'etait pas.

   CE QUI LE REMPLACE : exactement la bande du tableau de bord, --dk-bloc-hd,
   la meme que la ligne de titres d'un tableau. Une seule surface pour tous les
   en-tetes de toutes les planches.

   LA COULEUR D'ETAPE DISPARAIT DE L'EN-TETE, et c'est le prix demande. Le
   titre et l'ordre des colonnes portent encore l'information. La remettre en
   filet gauche de trois pixels tient en une ligne si Gloire la regrette.

   LES !important RESTENT INDISPENSABLES, pour la raison notee en septembre :
   idmp_black.css:183 et :184 posent .kol-ttl et .kcnt en color:var(--kt)
   !important, et --kt vaut #0B0B0D sur les six premieres colonnes, prevu pour
   un aplat CLAIR. Sans eux, le libelle redevient noir sur noir.

   position:sticky RESTE : c'est elle qui garde l'en-tete visible quand la
   colonne defile. Le fond n'est plus opaque, mais il l'est assez pour que les
   cartes ne se lisent pas au travers, ce qui etait la raison des 94 pour cent
   de la version precedente.
   ═══════════════════════════════════════════════════════════════════════ */
body.dkp-admin .kol-hd,
body.dkp-espace .kol-hd{
  border:none;
  border-radius:10px 10px 0 0;
  padding:9px 12px;
  background:var(--pal-planche,var(--dk-bloc-hd));
  box-shadow:none;
}

body.dkp-admin .kol-hd .kol-ttl,
body.dkp-espace .kol-hd .kol-ttl{
  color:#fff !important;
  text-shadow:none;
}

/* ══ UNE COULEUR PAR PLANCHE, EN FOND PLEIN ═══════════════════════════════
   Gloire, le 4 septembre 2026, en deux temps. D'abord "la forme des headers
   est parfaite, tu gardes, mais on va changer la couleur", ou seul le libelle
   portait la teinte ; puis "c'est le FOND du header que je veux dans leur
   coloris respectif, full opaque, et le texte blanc".

   Une seule couleur par planche, pas une par colonne : c'etait le defaut de la
   version du 2 septembre, neuf teintes cote a cote sur une meme planche.

   RESERVE DE LISIBILITE, MESUREE ET SIGNALEE. Le blanc sur ces cinq fonds
   pleins donne, en contraste :
     violet  5,70   au-dessus du seuil AA
     orange  3,56   limite, acceptable pour du gras
     vert    3,30   limite
     bleu    2,77   sous le seuil
     jaune   1,92   illisible
   Les teintes sont celles de la palette metier et ne sont PAS assombries ici :
   les changer aurait fait mentir la bande sur la couleur de l'objet, qui est
   tout l'interet du travail de la veille. Le point est remonte a Gloire avec
   ces chiffres et trois issues : assombrir le jaune et le bleu pour la bande
   seule, passer le texte en noir sur ces deux planches, ou laisser ainsi.

   La regle porte sur la SECTION et non sur data-kbtheme : les trois premieres
   planches partagent le theme "orange" du composant, qui n'a plus rien a voir
   avec la couleur metier de chacune. */
body.dkp-admin #sec-affaires       .kol-hd{--pal-planche:var(--pal-affaire)}
body.dkp-admin #sec-configurations .kol-hd{--pal-planche:var(--pal-config)}
body.dkp-admin #sec-commandes      .kol-hd{--pal-planche:var(--pal-commande)}
body.dkp-admin #sec-livraisons     .kol-hd{--pal-planche:var(--pal-mer)}
body.dkp-admin #sec-transporteu    .kol-hd{--pal-planche:var(--pal-terre)}

/* Le compteur suit l'accord des blocs. Son backdrop-filter est retire : il n'a
   rien a flouter derriere lui et c'est un effet dont ce depot a deja paye le
   prix ailleurs. */
/* Le compteur, sur un fond plein : un blanc translucide, comme une pastille
   posee sur la bande. Une teinte pleine se serait perdue dans la sienne. */
body.dkp-admin .kol-hd .kcnt,
body.dkp-espace .kol-hd .kcnt{
  background:rgba(255,255,255,.22) !important;
  color:#fff !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LA LUEUR ROUGE DES PETITS CTA
   Posee le 2 septembre 2026. Gloire : "les petits CTA dans prospect, contact,
   affaire, client, commande, transport, configuration, tu les laisses comme
   ils sont mais emplis-les d'une lueur rouge".

   ── POURQUOI UN HALO ET NON UN FOND ───────────────────────────────────────
   "Tu les laisses comme ils sont" est la contrainte, et elle est tenue au
   pied de la lettre : ni la taille, ni le rayon, ni la couleur de fond, ni le
   libelle ne bougent. Seul un box-shadow s'ajoute. C'est aussi ce qui permet
   d'atteindre les boutons dont TOUT le style est ecrit en ligne (les barres de
   selection en masse, les actions de ligne des tableaux, la pagination) : un
   attribut style en ligne bat n'importe quelle regle de classe sur le fond,
   mais aucun de ces boutons ne pose de box-shadow, la place est libre.

   ── ET SURTOUT PAS UN REFLET ──────────────────────────────────────────────
   Gloire vient de faire retirer le "brillant" des entetes kanban. Une lueur
   n'est pas un vernis : c'est un rayonnement diffus vers l'exterieur, de la
   meme famille que la lueur de fond de .content. Aucun degrade interne, aucun
   liseret blanc.

   Deux couches : un contour net d'un pixel qui pose la couleur, puis une
   diffusion de 12 px qui la fait rayonner sur le fond noir.
   ═══════════════════════════════════════════════════════════════════════════ */
body.dkp-admin #sec-prospects .btn-or,
body.dkp-admin #sec-contacts .btn-or,
body.dkp-admin #sec-affaires .btn-or,
body.dkp-admin #sec-clients .btn-or,
body.dkp-admin #sec-configurations .btn-or,
body.dkp-admin #sec-livraisons .btn-or,
body.dkp-admin #sec-transporteu .btn-or,
body.dkp-admin #sec-commandes .btn-or,
body.dkp-admin #sec-prospects .btnsm,
body.dkp-admin #sec-contacts .btnsm,
body.dkp-admin #sec-affaires .btnsm,
body.dkp-admin #sec-clients .btnsm,
body.dkp-admin #sec-configurations .btnsm,
body.dkp-admin #sec-livraisons .btnsm,
body.dkp-admin #sec-transporteu .btnsm,
body.dkp-admin #sec-commandes .btnsm,
body.dkp-admin #sec-prospects .btn-gh,
body.dkp-admin #sec-contacts .btn-gh,
body.dkp-admin #sec-affaires .btn-gh,
body.dkp-admin #sec-clients .btn-gh,
body.dkp-admin #sec-configurations .btn-gh,
body.dkp-admin #sec-livraisons .btn-gh,
body.dkp-admin #sec-transporteu .btn-gh,
body.dkp-admin #sec-commandes .btn-gh,
body.dkp-admin #sec-prospects .trsel-b,
body.dkp-admin #sec-contacts .trsel-b,
body.dkp-admin #sec-affaires .trsel-b,
body.dkp-admin #sec-clients .trsel-b,
body.dkp-admin #sec-configurations .trsel-b,
body.dkp-admin #sec-livraisons .trsel-b,
body.dkp-admin #sec-transporteu .trsel-b,
body.dkp-admin #sec-commandes .trsel-b{
  box-shadow:0 0 0 1px rgba(255,48,25,.30), 0 3px 12px rgba(255,48,25,.26);
}

/* Le survol resserre et intensifie : le bouton se rapproche au lieu de
   s'eclaircir, ce qui suit la convention du depot (on assombrit, on
   n'eclaircit jamais). */
body.dkp-admin #sec-prospects .btn-or:hover,
body.dkp-admin #sec-contacts .btn-or:hover,
body.dkp-admin #sec-affaires .btn-or:hover,
body.dkp-admin #sec-clients .btn-or:hover,
body.dkp-admin #sec-configurations .btn-or:hover,
body.dkp-admin #sec-livraisons .btn-or:hover,
body.dkp-admin #sec-transporteu .btn-or:hover,
body.dkp-admin #sec-commandes .btn-or:hover,
body.dkp-admin #sec-prospects .btnsm:hover,
body.dkp-admin #sec-contacts .btnsm:hover,
body.dkp-admin #sec-affaires .btnsm:hover,
body.dkp-admin #sec-clients .btnsm:hover,
body.dkp-admin #sec-configurations .btnsm:hover,
body.dkp-admin #sec-livraisons .btnsm:hover,
body.dkp-admin #sec-transporteu .btnsm:hover,
body.dkp-admin #sec-commandes .btnsm:hover,
body.dkp-admin #sec-prospects .btn-gh:hover,
body.dkp-admin #sec-contacts .btn-gh:hover,
body.dkp-admin #sec-affaires .btn-gh:hover,
body.dkp-admin #sec-clients .btn-gh:hover,
body.dkp-admin #sec-configurations .btn-gh:hover,
body.dkp-admin #sec-livraisons .btn-gh:hover,
body.dkp-admin #sec-transporteu .btn-gh:hover,
body.dkp-admin #sec-commandes .btn-gh:hover,
body.dkp-admin #sec-prospects .trsel-b:hover,
body.dkp-admin #sec-contacts .trsel-b:hover,
body.dkp-admin #sec-affaires .trsel-b:hover,
body.dkp-admin #sec-clients .trsel-b:hover,
body.dkp-admin #sec-configurations .trsel-b:hover,
body.dkp-admin #sec-livraisons .trsel-b:hover,
body.dkp-admin #sec-transporteu .trsel-b:hover,
body.dkp-admin #sec-commandes .trsel-b:hover{
  box-shadow:0 0 0 1px rgba(255,48,25,.45), 0 2px 16px rgba(255,48,25,.40);
}

/* Parametres > Utilisateurs suit desormais la meme norme que Prospects. */
body.dkp-admin #pa-p-equipe .btn-or{
  box-shadow:0 0 0 1px rgba(255,48,25,.30), 0 3px 12px rgba(255,48,25,.26);
}
body.dkp-admin #pa-p-equipe .btn-or:hover{
  box-shadow:0 0 0 1px rgba(255,48,25,.45), 0 2px 16px rgba(255,48,25,.40);
}

/* Les boutons NEUTRES recoivent en plus un remplissage : sans lui, un halo
   rouge autour d'un fond gris ne se lit pas comme "empli d'une lueur", il se
   lit comme un contour. Ceux qui sont deja orange n'en ont pas besoin, leur
   fond porte deja la couleur. */
body.dkp-admin #sec-prospects .btn-gh,
body.dkp-admin #sec-contacts .btn-gh,
body.dkp-admin #sec-affaires .btn-gh,
body.dkp-admin #sec-clients .btn-gh,
body.dkp-admin #sec-configurations .btn-gh,
body.dkp-admin #sec-livraisons .btn-gh,
body.dkp-admin #sec-transporteu .btn-gh,
body.dkp-admin #sec-commandes .btn-gh{
  background:rgba(255,48,25,.12);
  border-color:rgba(255,48,25,.34);
  color:#FF6A55;
}

/* ── LES CTA QUI N'ONT AUCUNE CLASSE ───────────────────────────────────────
   Mesure au banc : le bloc ci-dessus laissait sans lueur tous les boutons dont
   le style est ecrit entierement EN LIGNE, car ils ne portent ni .btn-or, ni
   .btnsm, ni .btn-gh. Ce sont pourtant les plus utilises des sept onglets :
   les trois barres de selection en masse, et la colonne Actions des tableaux.

   Ils sont donc vises par leur CONTENEUR, jamais par un "button" nu dans la
   section : cela attraperait aussi les bascules de vue, les chevrons de
   pagination et les onglets, qui ne sont pas des CTA mais de la navigation. */
body.dkp-admin #p-bulk-bar button,
body.dkp-admin #ct-bulk-bar button,
body.dkp-admin #af-bulk-bar button,
body.dkp-admin #ptbody button,
body.dkp-admin #cttbody button{
  box-shadow:0 0 0 1px rgba(255,48,25,.30), 0 3px 12px rgba(255,48,25,.26);
}
body.dkp-admin #p-bulk-bar button:hover,
body.dkp-admin #ct-bulk-bar button:hover,
body.dkp-admin #af-bulk-bar button:hover,
body.dkp-admin #ptbody button:hover,
body.dkp-admin #cttbody button:hover{
  box-shadow:0 0 0 1px rgba(255,48,25,.45), 0 2px 16px rgba(255,48,25,.40);
}

/* ── LES BOUTONS DE PAGINATION ─────────────────────────────────────────────
   Ajoutes le 2 septembre 2026. Ce sont eux que Gloire visait en disant "les
   petits CTA" : "justement je parlais des boutons de pagination".

   CINQ PAGINATIONS, dix conteneurs, UNE SEULE FORME depuis le
   6 septembre 2026. Elles ne se ressemblaient pas : Prospects et Clients
   affichaient "Prec." et "Suiv." sur un fond ecrit background:#fff en ligne,
   Affaires et Contacts des chevrons sur background:none. Elles passent
   maintenant toutes par la fabrique admPager, qui pose la MEME barre en haut
   et en bas : meme libelle, meme selecteur, memes boutons texte.

   Les dix selecteurs restent listes un par un plutot que remplaces par une
   classe : les conteneurs sont peints en JavaScript, donc invisibles a une
   recherche dans le balisage, et les nommer ici dit ou ils vivent.

   Utilisateurs passe lui aussi par cette fabrique : aucun pager local, aucune
   variante noire, aucun selecteur de taille ecrit en dur.

   LES !important NE SONT PAS DECORATIFS. Les cinq paginations ecrivent leur
   fond EN LIGNE, ce qui bat toute regle de classe. Pire pour deux d'entre
   elles : leur background:#fff est intercepte par idmp_black.css:74,
   [style*="background:#fff" i]{background:var(--wh) !important}, qui les
   repeint en #0B0B0D. Il faut donc un !important, et une specificite qui
   passe devant, ce que l'identifiant du conteneur apporte. */
body.dkp-admin #p-pagination button,
body.dkp-admin #p-pagination-bis button,
body.dkp-admin #clients-pagination button,
body.dkp-admin #clients-pagination-bis button,
body.dkp-admin #af-pager button,
body.dkp-admin #af-pager-bis button,
body.dkp-admin #ct-pager button,
body.dkp-admin #ct-pager-bis button,
body.dkp-admin #team-pagination button,
body.dkp-admin #team-pagination-bis button{
  background:rgba(255,48,25,.12) !important;
  border-color:rgba(255,48,25,.34) !important;
  color:#FF6A55 !important;
  box-shadow:0 0 0 1px rgba(255,48,25,.30), 0 3px 12px rgba(255,48,25,.26);
}

body.dkp-admin #p-pagination button:hover,
body.dkp-admin #p-pagination-bis button:hover,
body.dkp-admin #clients-pagination button:hover,
body.dkp-admin #clients-pagination-bis button:hover,
body.dkp-admin #af-pager button:hover,
body.dkp-admin #af-pager-bis button:hover,
body.dkp-admin #ct-pager button:hover,
body.dkp-admin #ct-pager-bis button:hover,
body.dkp-admin #team-pagination button:hover,
body.dkp-admin #team-pagination-bis button:hover{
  background:rgba(255,48,25,.20) !important;
  border-color:rgba(255,48,25,.50) !important;
  box-shadow:0 0 0 1px rgba(255,48,25,.45), 0 2px 16px rgba(255,48,25,.40);
}


/* ── LA LUEUR EN FOND DES SELECTEURS DE FILTRE ─────────────────────────────
   Posee le 2 septembre 2026 sur capture de Gloire : "pour les fonds lueur
   rouge je parle de ces trucs-la, qu'ils soient avec lueur rouge en fond de
   leur mini bloc". La capture montre les pilules de la barre de filtres
   (le nombre par page, le type de client, l'interet), pas les boutons.

   ── background-color, JAMAIS background ───────────────────────────────────
   C'est le piege de ce bloc. La fleche de ces selecteurs n'est pas un
   caractere ni un pseudo-element : c'est un SVG pose en background-image par
   idmp_black.css:1877-1883, en !important. Ecrire "background:" ici ferait
   partir cette image avec le reste de la propriete raccourcie, et les pilules
   perdraient leur chevron sans que rien ne le signale. Seul background-color
   est touche.

   ── LA LUEUR EST UNE OMBRE INTERIEURE ─────────────────────────────────────
   Meme raison. Un radial-gradient serait plus juste pour une lueur, mais il
   s'ecrit en background-image, deja occupe par la fleche. Le reposer ici
   obligerait a recopier le SVG, qui serait alors a tenir en phase avec celui
   de black. Un inset donne le meme effet, un halo qui rayonne depuis les bords
   vers le centre, sans toucher a l'image.

   black impose box-shadow:none !important sur .fsel (ligne 1851) : le
   !important et l'identifiant de section sont donc necessaires pour passer
   devant, comme pour le fond, impose a #0B0B0D a la ligne 1846. */
body.dkp-admin #sec-prospects .fsel,
body.dkp-admin #sec-contacts .fsel,
body.dkp-admin #sec-affaires .fsel,
body.dkp-admin #sec-clients .fsel,
body.dkp-admin #sec-configurations .fsel,
body.dkp-admin #sec-livraisons .fsel,
body.dkp-admin #sec-transporteu .fsel,
body.dkp-admin #sec-commandes .fsel,
body.dkp-admin #pa-p-equipe .fsel{
  background-color:rgba(255,48,25,.13) !important;
  border-color:rgba(255,48,25,.38) !important;
  box-shadow:inset 0 0 18px rgba(255,48,25,.22) !important;
}

/* Au survol la lueur monte, le filet aussi. black pose .fsel:hover a
   border-color:#4A4B55 !important : sans cette regle le filet redeviendrait
   gris au passage de la souris, ce qui aurait annule l'effet la ou on regarde. */
body.dkp-admin #sec-prospects .fsel:hover,
body.dkp-admin #sec-contacts .fsel:hover,
body.dkp-admin #sec-affaires .fsel:hover,
body.dkp-admin #sec-clients .fsel:hover,
body.dkp-admin #sec-configurations .fsel:hover,
body.dkp-admin #sec-livraisons .fsel:hover,
body.dkp-admin #sec-transporteu .fsel:hover,
body.dkp-admin #sec-commandes .fsel:hover,
body.dkp-admin #pa-p-equipe .fsel:hover{
  background-color:rgba(255,48,25,.20) !important;
  border-color:rgba(255,48,25,.55) !important;
  box-shadow:inset 0 0 22px rgba(255,48,25,.30) !important;
}

/* Le champ de recherche Utilisateurs se lit comme un filtre de la meme
   barre, pas comme un formulaire independant. */
body.dkp-admin #pa-p-equipe .team-srch input{
  height:44px !important;
  background-color:rgba(255,48,25,.13) !important;
  border-color:rgba(255,48,25,.38) !important;
  box-shadow:inset 0 0 18px rgba(255,48,25,.22) !important;
}
body.dkp-admin #pa-p-equipe .team-srch input:hover{
  background-color:rgba(255,48,25,.20) !important;
  border-color:rgba(255,48,25,.55) !important;
  box-shadow:inset 0 0 22px rgba(255,48,25,.30) !important;
}

/* Le focus garde la main a l'orange plein de black : c'est le seul etat ou le
   filet doit dire "ce champ est actif" plutot que "ce champ est un filtre". */

/* ═══════════════════════════════════════════════════════════════════════════
   LES ETATS VIDES DE L'ADMINISTRATION
   Poses le 2 septembre 2026 : "dans alerte, requete sav, commande et
   configuration admin, s'il y a rien, comme pour dashboard, tu fais un msg qui
   explique la categorie (mais version admin pas version client)".

   ── POURQUOI CE STYLE EST REPOSE ICI ──────────────────────────────────────
   Le balisage est celui de idmp_tabs.js, volontairement : les deux ecrans
   doivent se ressembler. Mais sa feuille n'est PAS chargee avec le fichier,
   elle est injectee par css(), et css() n'est appelee que depuis mount().
   Les blocs des deux kanbans (commandes et configurations) ne passent par
   aucun mount : ils seraient donc restes SANS STYLE si aucun composant
   n'avait ete monte avant eux, ce que le banc a montre, texte a plat et icone
   blanche sans cadre. Aujourd'hui idmpAdminTabs en monte deux au chargement,
   mais cette dependance est invisible et se romprait au premier deplacement
   de code.

   Les valeurs sont celles de idmp_tabs.js:88-100, au caractere pres. Elles
   sont prefixees body.dkp-admin : la ou les deux feuilles se rencontrent,
   elles disent la meme chose, et c'est sans effet.
   ═══════════════════════════════════════════════════════════════════════════ */
body.dkp-admin .it-empty{
  padding:34px 18px;text-align:center;color:#6A6F7A;font-size:13.5px;line-height:1.6;
}
body.dkp-admin .it-empty-rich{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  max-width:52ch;margin:0 auto;padding:30px 18px 34px;text-align:center;
}
body.dkp-admin .ite-ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);color:#FF3019;font-size:22px;margin-bottom:2px;
}
body.dkp-admin .ite-k{
  font-size:10.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:#FF3019;
}
body.dkp-admin .ite-t{
  font-size:clamp(19px,2vw,27px);font-weight:800;letter-spacing:-.022em;
  line-height:1.16;color:#fff;
}
body.dkp-admin .ite-p{font-size:14px;line-height:1.62;color:#8E94A1}

/* ══ SWITCH DE CONTEXTE : MEME RAIL QUE MANAGEMENT / COMMERCIAL ══════════
   Transport maritime / terrestre n'est pas un duo de gros CTA. Ce sont deux
   vues du meme espace : icone et texte seuls, un filet commun et un soulignage
   rouge pour la vue active. Cette regle finale neutralise aussi l'ancienne
   lueur de bouton, plus specifique, sans modifier le kanban sous-jacent. */
body.dkp-admin #sec-livraisons .trsel,
body.dkp-admin #sec-transporteu .trsel{
  display:flex;align-items:flex-end;gap:clamp(18px,2.4vw,34px);margin:0 0 18px;
  border-bottom:1px solid var(--dk-fil);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
}
body.dkp-admin #sec-livraisons .trsel::-webkit-scrollbar,
body.dkp-admin #sec-transporteu .trsel::-webkit-scrollbar{display:none}
body.dkp-admin #sec-livraisons .trsel-b,
body.dkp-admin #sec-transporteu .trsel-b{
  flex:0 0 auto;height:auto;padding:0 0 12px;border:0 !important;border-radius:0 !important;
  background:transparent !important;color:var(--dk-mu2);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;position:relative;box-shadow:none !important;
}
body.dkp-admin #sec-livraisons .trsel-b:after,
body.dkp-admin #sec-transporteu .trsel-b:after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;
}
body.dkp-admin #sec-livraisons .trsel-b:hover,
body.dkp-admin #sec-transporteu .trsel-b:hover{color:#C9CDD6;box-shadow:none !important}
body.dkp-admin #sec-livraisons .trsel-b.on,
body.dkp-admin #sec-transporteu .trsel-b.on{color:#fff}
body.dkp-admin #sec-livraisons .trsel-b.on:after,
body.dkp-admin #sec-transporteu .trsel-b.on:after{background:var(--dk-or)}
body.dkp-admin #sec-livraisons .trsel-b i,
body.dkp-admin #sec-transporteu .trsel-b i{font-size:15px}

@media (min-width:1000px) and (min-height:620px){
  body.dkp-order #odc-v-legal{order:9}
  body.dkp-order #odc-v-chat{order:10}
  body.dkp-order .odc-legal-frame{height:min(72vh,760px)}
}