/* ============================================================================
   IDMP - DESIGN SYSTEM "BLACK"  (refonte juillet 2026)
   Feuille PARTAGEE par dashboard, admin, ad_detail, order_detail, login,
   error, cgu, confidentialite, mentions.

   PRINCIPE
   Les pages sont deja tokenisees (--or --st --bg --wh --tx --mu --bd) et
   embarquent un moteur "mode nuit" (body.dark) qui rattrape les couleurs
   ecrites en dur dans les attributs style="". Cette feuille ne jette rien :
   elle fige cet etat sombre en etat UNIQUE et le repeint en noir absolu.
   Consequence : aucune ligne de logique metier n'est touchee.

   POSE DANS LE <head>, DANS CET ORDRE PRECIS :
     1. <style>html,body{background:#000}</style>   anti-flash blanc au boot
     2. les <style> existants de la page
     3. <link rel="stylesheet" href="/idmp_black.css">   EN DERNIER

   L'ordre compte : a specificite egale, la derniere regle chargee gagne.
   Charger cette feuille en haut du head la ferait perdre contre les styles
   inline de la page et le fond resterait clair.

   Zero tiret cadratin.
   ========================================================================== */

/* ══ 1. JETONS ══════════════════════════════════════════════════════════════
   :root ET body.dark recoivent les MEMES valeurs. Le bouton "Mode nuit" peut
   donc rester dans le DOM sans rien casser : il bascule vers un theme identique.
   C'est volontaire, c'est le filet de securite au cas ou un appel a toggleDark()
   subsiste quelque part dans les 26 000 lignes. Le bouton, lui, est masque au
   paragraphe 3.
   ========================================================================== */
:root,
body.dark,
body:not(.dark) {
  --or:#E8491D;          /* orange IDMP, inchange                      */
  --orh:#FF5A2B;         /* hover : on eclaircit, on n'assombrit plus  */
  --orl:#2A1109;         /* ancien fond orange pale, devenu braise     */
  --st:#000000;          /* sidebar                                    */
  --bg:#000000;          /* fond general                               */
  --wh:#0B0B0D;          /* surface carte                              */
  --bd:#23242A;          /* bordure                                    */
  --tx:#FFFFFF;          /* texte principal                            */
  --mu:#8B909B;          /* texte secondaire                           */

  /* Jetons propres a la refonte */
  --gr:#2C2D33;          /* CTA gris (accueil, Configurer)             */
  --grh:#3A3B43;         /* CTA gris survole                           */
  --el:#141419;          /* surface surelevee (popup, menu, sticky)    */
  --ok:#22C55E;          /* coche verte des valorisations              */
  --wr:#EAB308;          /* jaune "en cours"                           */
  --gold1:#8A6A15;       /* bandeau BEST SELLER : depart               */
  --gold2:#F3DE8A;       /* bandeau BEST SELLER : eclat central        */
  --hair:rgba(255,255,255,.14);  /* trait fin de separation            */
}

/* Cartes d'etat du kanban : les fonds pastel deviennent des teintes profondes. */
:root, body.dark {
  --c-encours-bg:#1E1408; --c-verrou-bg:#08210F; --c-livraison-bg:#04202E;
  --c-livre-bg:#150E28;   --c-annule-bg:#131317;
}

html { background:#000 !important; color-scheme:dark; }
body { background:var(--bg) !important; color:var(--tx); }

/* ══ 2. SURFACES ═══════════════════════════════════════════════════════════
   Filet generique : tout fond blanc ou gris clair ecrit en dur dans un
   attribut style="" bascule sur la surface sombre. Le moteur body.dark le
   faisait deja ; on le rejoue ici pour couvrir les pages sans body.dark
   (login, error, pages legales).
   ========================================================================== */
[style*="background:#fff" i],
[style*="background: #fff" i],
[style*="background:#FFFFFF" i],
[style*="background-color:#fff" i] { background:var(--wh) !important; }

[style*="background:#F5F6FA" i],
[style*="background:#FAFAFA" i],
[style*="background:#F5F5F5" i],
[style*="background:#F7F8FB" i],
[style*="background:#EEF1F5" i] { background:var(--el) !important; }

[style*="border:1px solid #E2E5EC" i],
[style*="border-color:#E2E5EC" i] { border-color:var(--bd) !important; }

/* Champs de saisie : sans cette regle, du texte blanc sur fond blanc. */
input:not([type=range]):not([type=checkbox]):not([type=radio]),
select, textarea {
  background:var(--el) !important;
  color:var(--tx) !important;
  border-color:var(--bd) !important;
}
input::placeholder, textarea::placeholder { color:#6A6F7A !important; }
select option { background:#141419; color:#fff; }

/* Autofill Chrome : le jaune casse tout le theme. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px #141419 inset !important;
  caret-color:#fff;
}

/* Voiles de modale : sur fond noir, un voile gris delave l'ecran. */
[class*="-ov"], [class*="-bd"], .modal-bd, .ov-bd {
  --voile:rgba(0,0,0,.72);
}
.idmp-legal-bd, .mo-bd, .pdfv-bd { background:rgba(0,0,0,.74) !important; }

/* Barres de defilement */
* { scrollbar-color:#2A2B31 transparent; scrollbar-width:thin; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:#26272E; border-radius:9px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:#35363F; }
::selection { background:rgba(232,73,29,.34); color:#fff; }

/* ══ 3. SUPPRESSION DU MODE NUIT ═══════════════════════════════════════════
   Le bouton disparait de la sidebar, du menu mobile et de Mon compte. On ne
   supprime pas la fonction toggleDark() du JS : un onclick orphelin leverait
   une exception qui stopperait le script en cours. On masque le declencheur,
   la fonction devient inatteignable et inoffensive.
   ========================================================================== */
[onclick*="toggleDark"],
.sb-dark, #btn-dark, #mob-dark, .mode-nuit, [data-dark-toggle] { display:none !important; }

/* ══ 4. SIDEBAR DESKTOP ════════════════════════════════════════════════════
   Noire, separee du contenu par un trait fin clair (et non par une ombre :
   une ombre ne se voit pas sur du noir).
   ========================================================================== */
.sidebar, .side, aside.sb, #sidebar, .idmp-ssb {
  background:#000 !important;
  border-right:1px solid var(--hair) !important;
  box-shadow:none !important;
}
.sb-top, .sb-bot { border-color:var(--hair) !important; }
.sb-item, .sb-a { color:#B9BDC6 !important; border-radius:9px; }
.sb-item:hover, .sb-a:hover { background:rgba(255,255,255,.06) !important; color:#fff !important; }
.sb-item.active, .sb-a.active, .sb-item.on, .sb-a.on {
  background:rgba(232,73,29,.16) !important;
  color:#fff !important;
  box-shadow:inset 2px 0 0 var(--or);
}
.sb-grp { color:#5C616B !important; }
.sb-user:hover { background:rgba(255,255,255,.07) !important; }

/* La zone centrale ne redessine pas de fond clair. */
.main, .content-wrap, .page, .wrap { background:transparent !important; }

/* ══ 5. BARRE DE NAVIGATION MOBILE ═════════════════════════════════════════
   Geometrie conservee a l'identique (elle est juste), seules les couleurs
   changent : gris carbone au lieu du blanc, pilule active orange sourd.
   ========================================================================== */
.mob-nav, .mnav, .mob-tabs {
  background:#101014 !important;
  border-color:var(--hair) !important;
  box-shadow:0 -1px 0 var(--hair), 0 8px 26px rgba(0,0,0,.6) !important;
}
.mob-tab { color:#7E838E !important; }
.mob-tab.active, .mob-tab.on { color:var(--or) !important; }
.mob-tab.active::before, .mob-tab.on::before,
.mob-tab .mnav-pill { background:rgba(232,73,29,.16) !important; }
.mob-tab .mnav-dot { border-color:#101014 !important; }
.mob-tab .mnav-av { box-shadow:0 0 0 1.5px rgba(255,255,255,.45); }
.mob-tab.active .mnav-av { box-shadow:0 0 0 2px var(--or); }

/* ══ 6. KANBAN : TETES DE COLONNE EN DEGRADE ═══════════════════════════════
   Fini une couleur par etape. Une progression : plus on avance vers la droite,
   plus la teinte se sature. Blanc a gauche (rien n'est engage), couleur pleine
   a droite (dossier abouti).

   --kc = fond de la tete, --kt = couleur du texte de la tete. --kt est
   indispensable : du blanc sur une tete blanche serait illisible.
   ========================================================================== */
.kol-hd { color:var(--kt,#fff) !important; }
.kol-ttl { color:var(--kt,#fff) !important; }
.kcnt { color:var(--kt,#fff) !important; background:var(--kcb,rgba(0,0,0,.16)) !important; }

/* Colonnes claires : texte noir, compteur sur voile sombre. */
.kol-hd[data-tone="light"] { --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
.kol-hd[data-tone="dark"]  { --kt:#FFFFFF; --kcb:rgba(255,255,255,.24); }

/* ── 6a. COMMANDES : blanc vers orange IDMP (9 etapes) ── */
#kb-commandes .kol:nth-child(1) .kol-hd, .kb[data-kbtheme="orange"] .kol:nth-child(1) .kol-hd { --kc:#FFFFFF !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
#kb-commandes .kol:nth-child(2) .kol-hd, .kb[data-kbtheme="orange"] .kol:nth-child(2) .kol-hd { --kc:#FCE8E3 !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
#kb-commandes .kol:nth-child(3) .kol-hd, .kb[data-kbtheme="orange"] .kol:nth-child(3) .kol-hd { --kc:#F9D2C6 !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
#kb-commandes .kol:nth-child(4) .kol-hd, .kb[data-kbtheme="orange"] .kol:nth-child(4) .kol-hd { --kc:#F6BBAA !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
#kb-commandes .kol:nth-child(5) .kol-hd, .kb[data-kbtheme="orange"] .kol:nth-child(5) .kol-hd { --kc:#F4A48E !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
#kb-commandes .kol:nth-child(6) .kol-hd, .kb[data-kbtheme="orange"] .kol:nth-child(6) .kol-hd { --kc:#F18D71 !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
#kb-commandes .kol:nth-child(7) .kol-hd, .kb[data-kbtheme="orange"] .kol:nth-child(7) .kol-hd { --kc:#EE7755 !important; --kt:#FFFFFF; --kcb:rgba(255,255,255,.26); }
#kb-commandes .kol:nth-child(8) .kol-hd, .kb[data-kbtheme="orange"] .kol:nth-child(8) .kol-hd { --kc:#EB6039 !important; --kt:#FFFFFF; --kcb:rgba(255,255,255,.26); }
#kb-commandes .kol:nth-child(9) .kol-hd, .kb[data-kbtheme="orange"] .kol:nth-child(9) .kol-hd { --kc:#E8491D !important; --kt:#FFFFFF; --kcb:rgba(255,255,255,.26); }

/* Colonne "Annulees" : elle n'est pas une etape avancee, elle sort du degrade. */
#kb-commandes .kol[data-kbt-never-default="1"] .kol-hd,
.kb .kol[data-kbt-never-default="1"] .kol-hd { --kc:#3A3B43 !important; --kt:#C9CDD6; --kcb:rgba(255,255,255,.16); }

/* ── 6b. TRANSPORT MARITIME : blanc vers bleu (7 etapes) ── */
.kb[data-kbtheme="bleu"] .kol:nth-child(1) .kol-hd { --kc:#FFFFFF !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
.kb[data-kbtheme="bleu"] .kol:nth-child(2) .kol-hd { --kc:#D7F0FB !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
.kb[data-kbtheme="bleu"] .kol:nth-child(3) .kol-hd { --kc:#AFE1F7 !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
.kb[data-kbtheme="bleu"] .kol:nth-child(4) .kol-hd { --kc:#87D2F4 !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
.kb[data-kbtheme="bleu"] .kol:nth-child(5) .kol-hd { --kc:#5FC3F0 !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
.kb[data-kbtheme="bleu"] .kol:nth-child(6) .kol-hd { --kc:#36B4ED !important; --kt:#FFFFFF; --kcb:rgba(255,255,255,.26); }
.kb[data-kbtheme="bleu"] .kol:nth-child(7) .kol-hd { --kc:#0EA5E9 !important; --kt:#FFFFFF; --kcb:rgba(255,255,255,.26); }

/* ── 6c. TRANSPORT TERRESTRE (EU) : blanc vers marron (5 etapes) ── */
.kb[data-kbtheme="marron"] .kol:nth-child(1) .kol-hd { --kc:#FFFFFF !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
.kb[data-kbtheme="marron"] .kol:nth-child(2) .kol-hd { --kc:#E2D6CA !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
.kb[data-kbtheme="marron"] .kol:nth-child(3) .kol-hd { --kc:#C5AD95 !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
.kb[data-kbtheme="marron"] .kol:nth-child(4) .kol-hd { --kc:#A88360 !important; --kt:#FFFFFF; --kcb:rgba(255,255,255,.26); }
.kb[data-kbtheme="marron"] .kol:nth-child(5) .kol-hd { --kc:#8B5A2B !important; --kt:#FFFFFF; --kcb:rgba(255,255,255,.26); }

/* ── 6d. ALERTES ET SAV : 3 etats, pas une progression ── */
.kb[data-kbtheme="statut"] .kol:nth-child(1) .kol-hd { --kc:#FFFFFF !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.13); }
.kb[data-kbtheme="statut"] .kol:nth-child(2) .kol-hd { --kc:#EAB308 !important; --kt:#0B0B0D; --kcb:rgba(0,0,0,.16); }
.kb[data-kbtheme="statut"] .kol:nth-child(3) .kol-hd { --kc:#22C55E !important; --kt:#06210F; --kcb:rgba(0,0,0,.16); }

/* Cartes du kanban sur fond noir */
.kcard { background:var(--wh) !important; border:1px solid var(--bd) !important; box-shadow:none !important; }
.kcard:hover { border-color:#3A3B43 !important; background:#111114 !important; }
.kol-empty { color:#5C616B !important; border-color:var(--bd) !important; }

/* Onglets kanban mobile (idmp_kbtabs.js) */
.kbt { background:#000 !important; }
.kbt-b { background:var(--el) !important; border-color:var(--bd) !important; color:#A2A7B2 !important; }
.kbt-b .kbt-n { background:rgba(255,255,255,.10) !important; color:#A2A7B2 !important; }

/* ══ 7. COMPOSANTS DE LA NOUVELLE CHARTE ═══════════════════════════════════
   Briques reutilisees par le catalogue, ad_detail et l'accueil. Definies ici
   une seule fois pour que les quatre pages restent alignees.
   ========================================================================== */

/* 7a. CTA gris : le bouton neutre de reference (accueil, Configurer). */
.i-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:52px; padding:0 26px; border:none; border-radius:26px;
  background:var(--gr); color:#fff;
  font-family:'DM Sans',system-ui,sans-serif; font-size:16px; font-weight:500;
  cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:background .15s, transform .08s;
}
.i-cta:hover { background:var(--grh); }
.i-cta:active { transform:scale(.975); }
.i-cta--or { background:var(--or); font-weight:600; }
.i-cta--or:hover { background:var(--orh); }
.i-cta--wh { background:#fff; color:#0B0B0D; font-weight:600; }
.i-cta--gh { background:transparent; border:1.5px solid #3A3B43; color:#fff; }
.i-cta--gh:hover { border-color:#5A5B65; background:rgba(255,255,255,.04); }
.i-cta[disabled], .i-cta.off { opacity:.45; pointer-events:none; }

/* 7b. Bandeau BEST SELLER : ruban dore en diagonale, coin haut gauche. */
.i-bs {
  position:absolute; top:0; left:0; width:132px; height:132px;
  overflow:hidden; pointer-events:none; z-index:3;
}
.i-bs > span {
  position:absolute; top:31px; left:-40px; width:190px;
  transform:rotate(-45deg);
  background:linear-gradient(135deg,var(--gold1) 0%,var(--gold2) 48%,var(--gold1) 100%);
  color:#241C05; text-align:center;
  font-size:12px; font-weight:800; letter-spacing:1.1px; line-height:23px;
  box-shadow:0 3px 10px rgba(0,0,0,.55);
}

/* 7c. Ligne tonnage + badge qualite */
.i-line { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.i-ton {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:56px; height:38px; padding:0 12px; border-radius:9px;
  background:var(--or); color:#fff; font-size:19px; font-weight:800; letter-spacing:.4px;
}
.i-qual {
  display:inline-flex; align-items:center; height:38px; padding:0 13px;
  border:2px solid var(--or); border-radius:9px;
  color:var(--or); font-size:15px; font-weight:800; letter-spacing:.3px;
  text-transform:uppercase; white-space:nowrap;
}

/* 7d. Valorisations a coche verte */
.i-valo { list-style:none; margin:11px 0 0; padding:0; }
.i-valo li {
  display:flex; align-items:center; gap:8px; margin:0 0 5px;
  font-size:15px; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:.2px;
}
.i-valo li::before {
  content:''; flex:0 0 15px; width:15px; height:15px;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322C55E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l5 5L19 6.5'/></svg>");
}
.i-valo b { color:var(--or); font-weight:800; }

/* 7e. Prix */
.i-prix {
  display:inline-flex; align-items:center; height:44px; padding:0 15px;
  border-radius:9px; background:var(--or); color:#fff;
  font-size:22px; font-weight:800; letter-spacing:.2px;
}
.i-prix-ttc { margin-top:6px; font-size:14px; color:#B9BDC6; }

/* 7f. Puces de tonnage du catalogue (remplacent le bouton de filtres) */
.i-tons { display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.i-tons::-webkit-scrollbar { display:none; }
.i-ton-b {
  flex:0 0 auto; height:38px; padding:0 15px; border:none; border-radius:9px;
  background:var(--gr); color:#fff;
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .13s;
}
.i-ton-b:hover { background:var(--grh); }
.i-ton-b.on { background:var(--or); }

/* 7g. Cadre de section du configurateur */
.i-box {
  border:1px solid #2A2B31; border-radius:15px; padding:15px 15px 17px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 70%);
}
.i-box-t { margin:0 0 12px; font-size:17px; font-weight:800; letter-spacing:.3px; text-align:center; text-transform:uppercase; }

/* 7h. Fondu de l'image produit vers le fond noir (les visuels sont detoures
       sur noir : sans ce fondu on voit le bord du fichier). */
.i-fade { -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 45%,#000 55%,transparent 100%);
          mask-image:radial-gradient(ellipse 78% 78% at 50% 45%,#000 55%,transparent 100%); }

/* ══ 8. TABLETTE (769px a 1024px) ══════════════════════════════════════════
   Palier absent jusqu'ici : la tablette heritait du desktop et se retrouvait
   avec une sidebar de 228px sur un ecran de 768px de large, plus des kanbans
   a 4 colonnes illisibles.
   ========================================================================== */
@media (min-width:769px) and (max-width:1024px) {
  :root { --sw:196px; }
  .sidebar, .side, #sidebar, .idmp-ssb { width:var(--sw) !important; }
  .main, .content-wrap { margin-left:var(--sw) !important; }
  .sb-item span, .sb-a span { font-size:12.5px !important; }

  .kol { flex:0 0 214px !important; }
  .kb  { height:calc(100vh - 168px) !important; }

  /* Grilles : on evite les colonnes de 180px ou plus rien n'est lisible. */
  .grid-3, .g3 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .grid-4, .g4 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }

  .i-ton { min-width:50px; height:35px; font-size:17px; }
  .i-qual { height:35px; font-size:13.5px; }
  .i-valo li { font-size:14px; }
}

/* Tablette en mode portrait : la sidebar mange trop, on passe en mobile. */
@media (min-width:769px) and (max-width:900px) and (orientation:portrait) {
  .sidebar, .side, #sidebar { transform:translateX(-100%); transition:transform .22s ease; z-index:60; }
  .sidebar.open, .side.open, #sidebar.open { transform:none; }
  .main, .content-wrap { margin-left:0 !important; }
}

/* ══ 9. DETAILS ════════════════════════════════════════════════════════════ */

/* Focus visible : sur du noir, le halo par defaut du navigateur disparait. */
:focus-visible { outline:2px solid var(--or); outline-offset:2px; }

/* Les images produit detourees sur blanc apparaissent en pave blanc.
   A defaut de les retoucher, on les fond dans le noir. */
img[data-blend="1"] { mix-blend-mode:screen; }

/* Impression : on repasse en blanc, une facture ne s'imprime pas en noir. */
@media print {
  html, body { background:#fff !important; color:#000 !important; }
  .sidebar, .mob-nav, .i-cta { display:none !important; }
}

/* Mouvement reduit : respect du reglage systeme. */
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ══ 10. CATALOGUE : CARTES EN LISTE ═══════════════════════════════════════
   Les cartes n'ont ni fond ni bordure : sur du noir, un cadre gris autour de
   chaque annonce fait grille de tableur. Un simple filet de separation suffit,
   c'est ce que montre la maquette.
   ========================================================================== */
/* Le separateur etait un trait blanc a 50 % : il decoupait la liste en tranches
   et concurrencait le contenu. Un filet a 12 % separe sans cloisonner, et c'est
   surtout l'espace qui fait le travail. */
.ih-cardwrap { padding:20px 0 26px; border-bottom:1px solid rgba(255,255,255,.12); }
.ih-cardwrap:last-child { border-bottom:none; }
/* Liste verticale sur telephone, cote CLIENT seulement : l'administration
   partage cet identifiant et doit garder sa grille de vignettes. */
body.idmp-client #stock-grid { display:block !important; }
#mob-stock-grid .ih-cardwrap { margin-bottom:0 !important; }
.ic-card.no-img { grid-template-columns:1fr !important; }
.ic-card.no-img .ic-body { grid-column:1 !important; }

/* La barre de puces est desormais integree au bloc des onglets Mini-pelles /
   Utilitaires : elle defile avec lui, elle n'a plus besoin d'etre collante. */
#ih-tonwrap-tabs .i-tons { margin-top:9px; padding:0 0 2px; }
#ih-tonwrap-desk .i-tons { padding:2px 0 12px; }

/* ══ 11. CORRECTIFS MOBILE ═════════════════════════════════════════════════ */

/* Onglets Mini-pelle / Utilitaires du catalogue : le theme nuit d'origine leur
   posait un bleu ardoise (#1a2233) qui tranchait sur le noir. */
.cat-tab { background:#000 !important; border-color:#2A2B31 !important; }
.cat-tab.on-mp { border-color:var(--or) !important; color:var(--or) !important; box-shadow:none !important; }
.cat-tab.on-pk { border-color:#6A6F7A !important; color:#fff !important; box-shadow:none !important; }
.mob-subhd, .mob-subhd-cat { background:#000 !important; border-color:var(--hair) !important; }

/* Le menu mobile passait sous la barre de navigation flottante. */
.mob-menu-wrap { padding-top:0 !important; }

/* L'accueil ne defile plus : le visuel se contracte pour tenir dans l'ecran. */
.mob-accueil { overflow-y:hidden !important; }

/* ══ 12. FIN DU BRILLANT (COTE CLIENT UNIQUEMENT) ══════════════════════════
   Les degrades et les ombres colorees venaient d'une charte claire, ou ils
   donnaient du relief. Sur du noir ils produisent l'inverse : un halo sale qui
   fait ressortir les boutons comme des autocollants. Tout est mis a plat.

   La classe idmp-client est posee par idmp_config.js sur toute page qui n'est
   pas /admin : le back-office garde ses degrades de kanban, qui eux portent une
   information (l'avancement).
   ========================================================================== */
body.idmp-client .btn-or,
body.idmp-client .fsel-or,
body.idmp-client .mob-sc-cta,
body.idmp-client .qs-btn,
body.idmp-client .qs-psel,
body.idmp-client .qsc-arw,
body.idmp-client .mob-tile-ic,
body.idmp-client .scard-ic,
body.idmp-client .kol-hd,
body.idmp-client .i-cta,
body.idmp-client .fc-yellow {
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}

body.idmp-client .btn-or { background-color:var(--or) !important; color:#fff !important; }
body.idmp-client .btn-or:hover { background-color:var(--orh) !important; }
body.idmp-client .fsel-or { background-color:var(--or) !important; color:#fff !important; }

/* En-tetes de colonne cote client : plats, un simple filet de couleur en tete
   suffit a distinguer les etats. */
body.idmp-client .kol-hd {
  background-color:transparent !important;
  border:1px solid var(--bd) !important;
  border-top:2px solid var(--kc,#888) !important;
  color:#fff !important;
}
body.idmp-client .kol-hd .kol-ttl { color:#fff !important; }
body.idmp-client .kol-hd .kcnt { background:rgba(255,255,255,.10) !important; color:#fff !important; }

/* Cartes et panneaux : surface unie, filet discret, aucun relief. */
body.idmp-client .scard,
body.idmp-client .mob-sc,
body.idmp-client .kcard,
body.idmp-client .qs-hero {
  background:var(--wh) !important;
  border:1px solid var(--bd) !important;
  box-shadow:none !important;
  background-image:none !important;
}

/* ══ 13. UTILITAIRES ═══════════════════════════════════════════════════════
   Le bleu acier servait de couleur secondaire pour distinguer l'univers
   utilitaire. Sur fond noir il devient sourd et illisible ; l'orange reste la
   seule couleur d'accent de la marque.
   ========================================================================== */
.cat-tab.on-pk { border-color:var(--or) !important; color:var(--or) !important; box-shadow:none !important; }
body.cat-pk #cat-fwrap { --or:#E8491D !important; --orh:#FF5A2B !important; }

/* Le CTA de configuration d'un utilitaire passe en gris, comme au catalogue
   mini-pelle : c'est le meme geste, il n'y a pas de raison qu'il change de
   couleur selon la famille de produit. */
body.idmp-client .qs-btn-pk,
body.idmp-client .mob-sc-cta.cta-pk,
body.idmp-client .cta-pk {
  background:var(--gr) !important;
  background-color:var(--gr) !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:none !important;
}
body.idmp-client .qs-btn-pk:hover,
body.idmp-client .cta-pk:hover { background:var(--grh) !important; }

/* Bouton de filtres du catalogue utilitaire : orange plein, texte blanc, mat. */
#mob-fbtn, #mob-fbtn.fbtn-pk, #cat-fbtn {
  background:var(--or) !important;
  background-color:var(--or) !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:none !important;
  border:none !important;
}
#mob-fbtn.fbtn-pk:hover, #cat-fbtn:hover { background:var(--orh) !important; }

/* ══ 14. LANCER UNE ALERTE ET MES COMMANDES ════════════════════════════════
   Meme grammaire que l'accueil bureau et que la popup Nous contacter : une
   surface, un filet, aucun relief. Ces deux ecrans etaient les derniers a
   porter des cartes empilees, des cadres dans des cadres et des boutons de
   couleurs differentes pour des actions de meme nature.
   ========================================================================== */

/* ── Champs de formulaire : un seul gabarit partout ── */
body.idmp-client .fg label,
body.idmp-client .mob-card label {
  font-size:11.5px; font-weight:700; letter-spacing:.35px;
  text-transform:uppercase; color:#8B909B; margin-bottom:5px; display:block;
}
body.idmp-client input[type=text],
body.idmp-client input[type=email],
body.idmp-client input[type=tel],
body.idmp-client input[type=number],
body.idmp-client select,
body.idmp-client textarea {
  height:46px; padding:0 13px; border-radius:11px;
  border:1px solid var(--bd) !important; background:#141419 !important;
  font-size:14.5px; color:#fff !important;
}
body.idmp-client textarea { height:auto; padding:12px 13px; min-height:104px; line-height:1.55; }
body.idmp-client input:focus, body.idmp-client select:focus, body.idmp-client textarea:focus {
  outline:none; border-color:var(--or) !important;
}

/* Recherche de la topbar : ce champ n'est pas un champ de formulaire metier.
   Il doit rester contenu dans son unique capsule de 32 px, sans second pave
   sombre decale a l'interieur. */
body.idmp-client .topbar .tsrch {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:clamp(190px,18vw,260px) !important;
  height:36px !important;
  padding:0 12px !important;
  overflow:hidden !important;
  background:#101014 !important;
  border:1px solid #2A2B31 !important;
  border-radius:10px !important;
}
body.idmp-client .topbar .tsrch input[type=text] {
  width:100% !important;
  min-width:0 !important;
  height:34px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:13px !important;
}
body.idmp-client .topbar .tsrch input[type=text]:focus { border:0 !important; }
body.idmp-client .topbar .tsrch i { flex:0 0 auto; color:#8B909B !important; }

/* ── Cartes : une surface, un filet, rien d'autre ── */
body.idmp-client .mob-card,
body.idmp-client .sec-card,
body.idmp-client .rech-card,
body.idmp-client .cmd-card {
  background:#0B0B0D !important; border:1px solid #23242A !important;
  border-radius:15px !important; box-shadow:none !important;
  background-image:none !important; padding:15px !important;
}
body.idmp-client .mob-card-ttl,
body.idmp-client .sec-card-ttl {
  font-size:14px !important; font-weight:800 !important; color:#fff !important;
  letter-spacing:.2px; margin-bottom:12px !important;
}
body.idmp-client .mob-card-ttl i, body.idmp-client .sec-card-ttl i { color:var(--or) !important; }

/* ── En-tetes de section : plats, pas de bandeau ── */
body.idmp-client .sec-hd { background:transparent !important; border:none !important; padding-left:0; padding-right:0; }
body.idmp-client .sec-ttl { font-size:21px; font-weight:800; letter-spacing:-.3px; color:#fff; }
body.idmp-client .sec-sub { font-size:13px; color:#8B909B; margin-top:3px; }

/* ── Boutons : orange plein pour l'action principale, contour pour le reste.
      Deux niveaux suffisent ; au-dela, plus rien ne hierarchise. ── */
body.idmp-client .btn-or,
body.idmp-client .mob-lancer {
  height:50px !important; border-radius:25px !important; border:none !important;
  background:var(--or) !important; color:#fff !important;
  font-size:15px !important; font-weight:600 !important;
  box-shadow:none !important; background-image:none !important;
}
body.idmp-client .btn-or:hover, body.idmp-client .mob-lancer:hover { background:var(--orh) !important; }
body.idmp-client .btn-gh {
  height:50px !important; border-radius:25px !important;
  border:1.5px solid #2E3038 !important; background:transparent !important;
  color:#fff !important; font-size:15px !important; font-weight:500 !important;
  box-shadow:none !important;
}
body.idmp-client .btn-gh:hover { border-color:#4A4C56 !important; background:rgba(255,255,255,.04) !important; }
body.idmp-client .btnsm { height:38px !important; font-size:13px !important; padding:0 14px !important; }

/* ── Dossiers : la carte se lit d'un coup, l'etape est un filet colore ── */
body.idmp-client .kcard {
  padding:14px 15px !important; border-radius:14px !important;
  border:1px solid #23242A !important; background:#0B0B0D !important;
}
body.idmp-client .kcard:hover { border-color:#3A3B43 !important; background:#101014 !important; }

/* ── Etats vides : une phrase, pas un cadre en pointilles ── */
body.idmp-client .kol-empty,
body.idmp-client .mob-empty {
  border:none !important; background:transparent !important;
  color:#5C616B !important; font-size:13px !important; padding:26px 12px !important;
}

/* ── Tablette : deux colonnes sur les formulaires, une seule sur les dossiers ── */
@media (min-width:769px) and (max-width:1024px) {
  body.idmp-client .g2, body.idmp-client .g3 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* ══ 15. PAGES LEGALES ET CONNEXION ════════════════════════════════════════ */
.tb-btn { background:#141419 !important; border-color:var(--bd) !important; color:#fff !important; }
.content h1, .content h2, .content h3 { color:#fff !important; }
.content h2 { border-top-color:var(--bd) !important; }
.content p, .content li { color:#C9CDD6 !important; }
.content .hl { background:#1A0E08 !important; border-color:rgba(232,73,29,.5) !important; }
.content .hl strong { color:#FF8A5C !important; }
.content .legal-foot { border-top-color:var(--bd) !important; color:#8B909B !important; }

/* Connexion : la carte blanche devient une surface sombre posee sur le halo. */
body > .card, .login-card, #login-card, .auth-card {
  background:#0B0B0D !important; border:1px solid #23242A !important;
  box-shadow:none !important; position:relative; z-index:1;
}

/* ══ 16. CATALOGUE MINI-PELLES : PHOTO A GAUCHE, TEXTE A DROITE ════════════
   La maquette de reference conserve la meme hierarchie a toutes les tailles :
   titre en haut, visuel borne a gauche, arguments a droite, CTA en pied.
   L'ancienne surcharge repassait la carte en une colonne sur ordinateur et
   etirait le carre photo a toute la largeur, d'ou les machines gigantesques.
   ========================================================================== */
@media (min-width:1025px) {
  body.idmp-client #stock-grid { display:grid !important; align-items:start; }
  .ih-cardwrap { padding:0; border-bottom:none; }

  .ic-card {
    grid-template-columns:minmax(132px,42%) minmax(0,58%) !important;
    gap:10px 18px !important;
    align-items:center !important;
    justify-content:stretch !important;
    background:#000 !important;
  }
  .ic-media { order:2; aspect-ratio:1/1; max-width:280px; align-self:center; }
  .ic-t {
    order:1; grid-column:1/-1 !important; margin:0 0 6px !important;
    font-size:18px !important; text-align:center; min-height:0;
    display:flex; align-items:center; justify-content:center;
  }
  .ic-body { order:3; justify-content:center !important; gap:8px !important; }
  .ic-foot { order:4; grid-column:1/-1 !important; margin-top:10px !important; }
  .ic-foot .i-cta { max-width:330px; }

  .ic-card .i-line { justify-content:flex-start; }
  .ic-card .i-valo { display:block; margin:0 !important; text-align:left; }
  .ic-card .ic-prix { text-align:left; }
  .ic-card .i-ton { height:30px; font-size:15.5px; }
  .ic-card .i-qual { height:30px; font-size:12px; }
  .ic-card .i-valo li { font-size:12.5px; }
  .ic-card .i-prix { height:36px; font-size:17.5px; }
  .ic-card .i-bs { width:120px; height:120px; }
  .ic-card .i-bs > span { top:28px; left:-36px; width:170px; font-size:11px; line-height:21px; }

  /* Puces de tonnage en libelles complets : elles respirent, elles ne defilent pas. */
  #ih-tonwrap-desk .i-tons { flex-wrap:wrap; overflow:visible; padding-bottom:22px; }
  #ih-tonwrap-desk .i-ton-b { height:42px; padding:0 18px; font-size:14px; font-weight:600; border-radius:21px; }
}

/* Tablette : deux colonnes, meme grammaire. */
@media (min-width:769px) and (max-width:1024px) {
  body.idmp-client #stock-grid { display:grid !important; align-items:start; }
  .ih-cardwrap { padding:0; border-bottom:none; }
  .ic-card {
    grid-template-columns:minmax(120px,40%) minmax(0,60%) !important;
    gap:8px 15px !important;
    background:#000 !important;
  }
  .ic-t { grid-column:1/-1 !important; }
  .ic-foot { grid-column:1/-1 !important; }
  .ic-media { max-width:240px; }
  #ih-tonwrap-desk .i-tons { flex-wrap:wrap; overflow:visible; padding-bottom:18px; }
  #ih-tonwrap-desk .i-ton-b { height:40px; padding:0 15px; font-size:13.5px; border-radius:20px; }
}

/* Telephone : meme composition, avec une image bornee. Le visuel ne peut plus
   imposer une hauteur de plusieurs ecrans a la carte. */
@media (max-width:768px) {
  .ih-cardwrap { background:#000 !important; }
  .ic-card {
    grid-template-columns:minmax(112px,42%) minmax(0,58%) !important;
    gap:8px 12px !important;
    align-items:center !important;
    background:#000 !important;
  }
  .ic-t { grid-column:1/-1 !important; font-size:clamp(16px,4.7vw,20px) !important; }
  .ic-media { width:100%; max-width:230px; aspect-ratio:1/1 !important; align-self:center; }
  .ic-img { width:100% !important; height:100% !important; object-fit:contain !important; background:#000 !important; }
  .ic-body { justify-content:center !important; gap:7px !important; }
  .ic-foot { grid-column:1/-1 !important; margin-top:10px !important; }
  .ic-card .i-prix { font-size:clamp(19px,5.7vw,25px) !important; }
  .ic-card .i-valo li { font-size:clamp(10.5px,3.1vw,13px) !important; }
  .ic-card.no-img { grid-template-columns:1fr !important; }
  .ic-card.no-img .ic-body { grid-column:1 !important; }
}

/* Catalogue de l'administration : meme respiration, colonnes fluides. */
@media (min-width:769px) {
  body:not(.idmp-client) #stock-grid {
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(clamp(280px, 26vw, 400px), 1fr)) !important;
    gap:clamp(18px, 2vw, 32px) !important;
  }
  #adm-stock-grid, #stock-list, .adm-cat-grid { gap:clamp(18px, 2vw, 32px) !important; }
}

/* Catalogue admin mini-pelle : les visuels detoures reposent eux aussi sur le
   noir absolu. Le mode utilitaire conserve ses photographies plein cadre. */
body:not(.idmp-client):not(.cat-pk) #sec-stock .sc,
body:not(.idmp-client):not(.cat-pk) #sec-stock .sc-img,
body:not(.idmp-client):not(.cat-pk) #sec-stock .mob-sc,
body:not(.idmp-client):not(.cat-pk) #sec-stock .mob-sc-img {
  background:#000 !important;
}
body:not(.idmp-client):not(.cat-pk) #sec-stock .sc-img img,
body:not(.idmp-client):not(.cat-pk) #sec-stock .mob-sc-img img {
  object-fit:contain !important;
  background:#000 !important;
}

/* ══ 17. VISITEUR NON CONNECTE ═════════════════════════════════════════════
   L'en-tete visiteur etait blanc translucide sur une charte claire. Le menu
   d'ordinateur est conserve tel quel, seules ses couleurs changent.
   ========================================================================== */
#guest-header { background:transparent !important; }
#guest-header.gh-scrolled {
  background:rgba(0,0,0,.92) !important;
  box-shadow:0 1px 0 var(--hair) !important;
  backdrop-filter:saturate(180%) blur(8px);
}
#guest-header .gh-logo span { color:#fff !important; }
#guest-header .gh-nav a { color:rgba(255,255,255,.78) !important; }
#guest-header .gh-nav a:hover { color:#fff !important; background:rgba(255,255,255,.07) !important; }
#guest-header .gh-burger { color:#fff !important; }
#guest-header .gh-drawer, #guest-header .gh-panel, #gh-drawer {
  background:#0B0B0D !important; border-color:var(--bd) !important;
}
#guest-header .gh-drawer a, #gh-drawer a { color:#fff !important; border-color:var(--bd) !important; }

/* Sur telephone, le visiteur n'a pas de barre de navigation : le hamburger
   porte toute la navigation, et les ecrans reserves aux comptes ne sont pas
   proposes a quelqu'un qui ne peut pas y entrer. */
body.idmp-guest .mob-topnav { display:none !important; }
body.idmp-guest .mob-accueil { padding-top:12px !important; }
body.idmp-guest .ih-menu { padding-top:12px !important; }
body.idmp-guest .ih-hero { height:calc(100dvh - 190px); }

/* La barre de navigation, quand elle existe, est bien la .mob-topnav. */
.mob-topnav {
  background:#101014 !important;
  border-color:var(--hair) !important;
  box-shadow:0 -1px 0 var(--hair), 0 8px 26px rgba(0,0,0,.6) !important;
}

/* ══ 18. CORRECTIFS ════════════════════════════════════════════════════════ */

/* Le bouton de configuration du catalogue utilitaire restait bleu acier : le
   selecteur reel est .mob-sc-cta sous body.cat-pk, pas une classe dediee. */
body.cat-pk .mob-sc-cta,
body.cat-pk .qs-btn,
body.idmp-client body.cat-pk .mob-sc-cta {
  background:var(--gr) !important;
  background-color:var(--gr) !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:none !important;
  border:none !important;
}
body.cat-pk .mob-sc-cta:hover, body.cat-pk .qs-btn:hover { background:var(--grh) !important; }

/* Mon compte : le reglage de theme n'a plus d'objet, il ne doit plus apparaitre
   nulle part, ni sur telephone ni sur ordinateur. */
#dark-toggle, #dark-toggle-m { display:none !important; }

/* Mon compte : la colonne de tuiles occupe la hauteur de l'ecran, l'avatar
   absorbe l'espace restant. Pas de hauteur figee sur le conteneur parent :
   une valeur en dur y masquait le contenu des que la barre d'adresse du
   navigateur mobile changeait de taille. */
#mob-sub-compte .mob-subbody { overflow:hidden !important; }
#mob-sub-compte .ia-wrap { min-height:calc(100dvh - var(--mnavh,90px)); }

/* ══ 19. CHAMP TELEPHONE INTERNATIONAL ═════════════════════════════════════
   idmp_tel.js pose un fond clair en dur sur le selecteur de pays : sur du noir,
   ce petit rectangle blanc saute aux yeux et parait etre un defaut d'affichage.
   Il devient orange, c'est-a-dire cliquable au sens de la charte.
   ========================================================================== */
.idmp-tel-btn {
  background:var(--or) !important;
  border-color:var(--or) !important;
  color:#fff !important;
}
.idmp-tel-btn:hover { background:var(--orh) !important; border-color:var(--orh) !important; }
.idmp-tel-btn .dl { color:#fff !important; }
.idmp-tel-btn .ca { color:rgba(255,255,255,.8) !important; }
.idmp-tel input { border-left:none !important; }

/* Liste des pays : elle aussi etait blanche. */
.idmp-tel-pop { background:#0B0B0D !important; border-color:var(--bd) !important; }
.idmp-tel-o { color:#fff !important; }
.idmp-tel-o:hover { background:rgba(255,255,255,.06) !important; }
.idmp-tel-o.on { background:rgba(232,73,29,.16) !important; color:#fff !important; }
.idmp-tel-o .dl { color:#8B909B !important; }

/* ══ 20. DERNIERS CORRECTIFS MOBILE ════════════════════════════════════════ */

/* La cloche de notifications heritait d'un fond blanc et d'une icone sombre :
   sur du noir, elle disparaissait purement et simplement. */
.mob-bell, #mob-bell {
  background:#141419 !important;
  border:1px solid var(--bd) !important;
  color:#fff !important;
}
.mob-bell i, #mob-bell i { color:#fff !important; }
.mob-bell:active, #mob-bell:active { background:#1D1E24 !important; }
.mob-bell-dot, #mob-bell-dot { border-color:#000 !important; }

/* Le selecteur de langue voisin, meme traitement pour rester coherent. */
#idmp-lang-mob button, #idmp-lang-mob select, .lang-btn {
  background:#141419 !important; border-color:var(--bd) !important; color:#fff !important;
}

/* « Changer la photo » : gris, texte blanc. En orange il attirait plus l'oeil
   que les actions qui comptent vraiment sur cet ecran. */
[onclick*="avatar" i], .mob-avatar-btn, .avatar-btn,
#mob-sub-compte [onclick*="Photo" i], #mob-sub-compte [onclick*="photo" i] {
  background:var(--gr) !important;
  background-color:var(--gr) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  box-shadow:none !important;
}
[onclick*="avatar" i] i, .mob-avatar-btn i, #mob-sub-compte [onclick*="photo" i] i { color:#fff !important; }

/* Avatar par defaut : SEUL le rond passe en orange. Le selecteur precedent
   attrapait tout element dont la classe contenait « avatar », donc la carte
   entiere : le bloc se peignait en orange au lieu de la pastille. On cible
   desormais la seule pastille, reperee par le module. */
.ia-ava {
  background:var(--or) !important;
  background-image:none !important;
  color:#fff !important;
  font-weight:800 !important;
  border:none !important;
  box-shadow:none !important;
}
.ia-ava img { border-radius:inherit; }


/* ══ 21. CATALOGUE ORDINATEUR : LE TONNAGE SUFFIT ══════════════════════════
   Huit criteres pour 44 annonces, personne ne les ouvrait. Les puces de tonnage
   couvrent le seul axe de choix reel sur une mini-pelle. Les champs restent dans
   le document (la logique de filtrage les lit toujours), ils ne sont plus
   proposes : les retirer du DOM casserait filterStock au premier appel.
   ========================================================================== */
@media (min-width:769px) {
  /* Cote CLIENT, seuls les filtres du catalogue MINI-PELLE cedent la place aux
     puces de tonnage. Le catalogue utilitaire les conserve : un fourgon n'a pas
     de tonnage, sans filtres il n'y aurait plus aucun moyen de chercher.
     body.cat-pk marque le catalogue utilitaire actif. */
  body.idmp-client:not(.cat-pk) #cat-fbtn,
  body.idmp-client:not(.cat-pk) #cat-fwrap,
  body.idmp-client:not(.cat-pk) #cat-fsheet,
  body.idmp-client:not(.cat-pk) .sf-row,
  body.idmp-client:not(.cat-pk) .sf-ranges,
  body.idmp-client:not(.cat-pk) .sf-range {
    display:none !important;
  }
  /* Les utilitaires gardent bien leurs filtres complets sur ordinateur. Cette
     regle explicite protege l'ecran d'une classe de theme posee tardivement. */
  body.idmp-client.cat-pk #cat-fwrap,
  body.idmp-client.cat-pk #cat-fsheet,
  body.idmp-client.cat-pk .sf-row,
  body.idmp-client.cat-pk #sf-ranges,
  body.idmp-client.cat-pk .rngf {
    display:flex !important;
  }
  body.idmp-client.cat-pk #cat-fwrap,
  body.idmp-client.cat-pk #cat-fsheet { flex-direction:column; }
  /* Dans l'administration, seuls les filtres du catalogue MINI-PELLE cedent la
     place aux puces de tonnage. Le catalogue utilitaire les conserve. */
  body:not(.idmp-client):not(.cat-pk) #sec-stock #asf-fwrap,
  body:not(.idmp-client):not(.cat-pk) #sec-stock .sf-row,
  body:not(.idmp-client):not(.cat-pk) #sec-stock .sf-ranges,
  body:not(.idmp-client):not(.cat-pk) #sec-stock .sf-range,
  body:not(.idmp-client):not(.cat-pk) #sec-stock #asf-ranges,
  body:not(.idmp-client):not(.cat-pk) #sec-stock .rngf {
    display:none !important;
  }
  body:not(.idmp-client):not(.cat-pk) #sec-stock #ih-tonwrap-desk {
    display:block !important;
    margin:0 0 clamp(14px, 1.4vw, 22px);
  }
}

/* ══ 30. FILTRES CATALOGUE : CHAMPS MIN/MAX SANS CURSEURS ════════════════
   Les quatre anciens double-sliders etaient recouverts par plusieurs couches
   de styles historiques. Les champs numeriques sont plus precis, accessibles
   au clavier et ne se decalagent pas selon le moteur du navigateur. */
#cat-fsheet .rngf-track,
#asf-fwrap .rngf-track {
  display:none !important;
}
#cat-fsheet .rngf,
#asf-fwrap .rngf {
  min-width:0 !important;
  padding:10px !important;
  border:1px solid #292A31 !important;
  border-radius:12px !important;
  background:#0B0B0D !important;
  overflow:hidden !important;
}
#cat-fsheet .rngf-ins,
#asf-fwrap .rngf-ins {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  gap:7px !important;
  align-items:center !important;
}
#cat-fsheet .rngf-in,
#asf-fwrap .rngf-in {
  width:100% !important;
  min-width:0 !important;
  height:38px !important;
  padding:0 9px !important;
  border:1px solid #303139 !important;
  border-radius:9px !important;
  background:#151519 !important;
  color:#fff !important;
  box-sizing:border-box !important;
}
#cat-fsheet .rngf-in:focus,
#asf-fwrap .rngf-in:focus {
  border-color:#E8491D !important;
  outline:none !important;
}
@media (min-width:769px) {
  body.idmp-client.cat-pk #sec-stock #sf-ranges,
  body.guest.cat-pk #sec-stock #sf-ranges,
  #sec-stock.pickup-active #sf-ranges {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
  }
}
@media (max-width:768px) {
  #cat-fwrap #cat-fsheet {
    max-height:100dvh !important;
    padding:0 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  #cat-fsheet .cat-fsheet-chrome {
    margin:0 -12px 8px !important;
    padding:6px 12px !important;
  }
  #cat-fsheet .cat-fsheet-grip { margin:4px auto 7px !important; }
  #cat-fsheet .cat-fsheet-hd { margin-bottom:2px !important; }
  #cat-fsheet .sf-row {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  body.cat-pk #cat-fsheet #sf-etat,
  body.cat-pk #cat-fsheet #sf-tri,
  #sec-stock.pickup-active #cat-fsheet #sf-etat,
  #sec-stock.pickup-active #cat-fsheet #sf-tri {
    display:none !important;
  }
  #cat-fsheet .sf-row > button {
    height:34px !important;
    font-size:11px !important;
    grid-column:1/-1 !important;
  }
  #cat-fsheet .fsel {
    height:38px !important;
    min-height:38px !important;
    padding:0 31px 0 10px !important;
    font-size:12px !important;
  }
  #cat-fsheet #sf-ranges,
  #cat-fsheet #sf-ranges {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:9px 0 !important;
  }
  #cat-fsheet #sf-ranges .rngf {
    min-height:81px !important;
    padding:8px !important;
  }
  #cat-fsheet .rngf-hd {
    margin-bottom:6px !important;
    gap:5px !important;
  }
  #cat-fsheet .rngf-hd span {
    font-size:10px !important;
    white-space:nowrap !important;
  }
  #cat-fsheet .rngf-in {
    height:34px !important;
    padding:0 6px !important;
    font-size:12px !important;
  }
  #cat-fsheet .rngf-dash { font-size:11px !important; }
  #cat-fsheet .cat-fsheet-apply {
    height:42px !important;
    margin-top:2px !important;
  }
  #asf-fwrap #asf-block {
    max-height:100dvh !important;
    padding:0 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  #asf-block .cat-fsheet-chrome {
    margin:0 -12px 8px !important;
    padding:6px 12px !important;
  }
  #asf-block .asf-row {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-bottom:9px !important;
  }
  #asf-block .asf-row > * {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  #asf-block .asf-row > button {
    grid-column:1/-1 !important;
    height:34px !important;
    justify-content:center !important;
  }
  body.cat-pk #asf-block #sf-etat,
  body.cat-pk #asf-block #sf-prov,
  body.cat-pk #asf-block #sf-tri {
    display:none !important;
  }
  #asf-block #asf-ranges {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:0 0 9px !important;
  }
  #asf-block #asf-ranges .rngf {
    width:auto !important;
    min-height:81px !important;
    padding:8px !important;
  }
  #asf-block .rngf-hd {
    margin-bottom:6px !important;
    gap:5px !important;
  }
  #asf-block .rngf-hd span {
    font-size:10px !important;
    white-space:nowrap !important;
  }
  #asf-block .rngf-in {
    height:34px !important;
    padding:0 6px !important;
    font-size:12px !important;
  }
  #asf-block .cat-fsheet-apply {
    height:42px !important;
    margin-top:2px !important;
  }
}
@media (max-width:410px) {
  #cat-fsheet #sf-ranges {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Le noir est le support par defaut de chaque media produit. Une image avec
   transparence ne revele donc jamais le blanc du navigateur ou d'une carte. */
body.dark .ic-media,
body.dark .ic-img,
body.dark .sc-img,
body.dark .gal-track,
body.dark .gal-slide,
body.dark .gal-slide img,
body.dark .gal-thumbs,
body.dark .gthumb,
body.dark .gthumb img {
  background-color:#000 !important;
}

/* ══ 29. CATALOGUE UTILITAIRE : FILTRES FIABLES, TOUTES SESSIONS ═══════════
   Plusieurs feuilles historiques pilotaient display/position/transform sur la
   meme modale. Ces règles terminales fixent un contrat simple : barre statique
   sur ordinateur, bottom-sheet scrollable sur téléphone. Elles couvrent les
   comptes connectés comme la consultation invitée. */
@media (min-width:769px) {
  body.idmp-client.cat-pk #sec-stock #cat-fwrap,
  body.guest.cat-pk #sec-stock #cat-fwrap,
  #sec-stock.pickup-active #cat-fwrap {
    display:block !important;
    position:static !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 0 18px !important;
    padding:0 !important;
    overflow:visible !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    background:transparent !important;
    transform:none !important;
  }
  body.idmp-client.cat-pk #sec-stock #cat-fsheet,
  body.guest.cat-pk #sec-stock #cat-fsheet,
  #sec-stock.pickup-active #cat-fsheet {
    display:block !important;
    position:static !important;
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    padding:0 !important;
    overflow:visible !important;
    visibility:visible !important;
    opacity:1 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:none !important;
  }
  body.idmp-client.cat-pk #sec-stock #cat-fsheet .cat-fsheet-chrome,
  body.guest.cat-pk #sec-stock #cat-fsheet .cat-fsheet-chrome,
  #sec-stock.pickup-active #cat-fsheet .cat-fsheet-chrome {
    display:none !important;
  }
  body.idmp-client.cat-pk #sec-stock #cat-fsheet .sf-row,
  body.guest.cat-pk #sec-stock #cat-fsheet .sf-row,
  #sec-stock.pickup-active #cat-fsheet .sf-row {
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    flex-wrap:wrap !important;
  }
  body.idmp-client.cat-pk #sec-stock #sf-ranges,
  body.guest.cat-pk #sec-stock #sf-ranges,
  #sec-stock.pickup-active #sf-ranges {
    display:grid !important;
    width:100% !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  body.idmp-client.cat-pk #sec-stock #sf-ranges .rngf,
  body.guest.cat-pk #sec-stock #sf-ranges .rngf,
  #sec-stock.pickup-active #sf-ranges .rngf {
    display:block !important;
    min-width:0 !important;
    width:auto !important;
  }
}

@media (max-width:768px) {
  #cat-fwrap.open {
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 !important;
  }
  #cat-fwrap #cat-fsheet {
    width:100% !important;
    max-width:none !important;
    max-height:92dvh !important;
    padding:0 16px calc(16px + env(safe-area-inset-bottom)) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    border-radius:22px 22px 0 0 !important;
    box-sizing:border-box !important;
  }
  #cat-fsheet .cat-fsheet-chrome {
    position:sticky !important;
    top:0 !important;
    z-index:4 !important;
    margin:0 -16px 14px !important;
    padding:8px 16px 8px !important;
    background:#000 !important;
  }
  #cat-fsheet .sf-row {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    align-items:stretch !important;
  }
  #cat-fsheet .sf-row > * {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  #cat-fsheet .sf-row > button {
    grid-column:1/-1 !important;
    justify-content:center !important;
  }
  #cat-fsheet #sf-ranges {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    width:100% !important;
    margin:16px 0 !important;
    align-items:stretch !important;
    box-sizing:border-box !important;
  }
  #cat-fsheet #sf-ranges .rngf {
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:12px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  #cat-fsheet .rngf-ins {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    width:100% !important;
    gap:7px !important;
  }
  #cat-fsheet .rngf-in {
    width:100% !important;
    min-width:0 !important;
    padding-left:8px !important;
    padding-right:8px !important;
    box-sizing:border-box !important;
  }
  #cat-fsheet .rngf-track {
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    height:28px !important;
    margin-top:9px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  #cat-fsheet .rngf-track::before,
  #cat-fsheet .rngf-fill {
    top:12px !important;
    height:4px !important;
  }
  #cat-fsheet .rngf-range {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:28px !important;
    margin:0 !important;
    padding:0 !important;
  }
}

@media (max-width:410px) {
  #cat-fsheet #sf-ranges {
    grid-template-columns:1fr !important;
  }
}
/* Le tonnage, lui, reste visible et respire. */
@media (min-width:769px) { #ih-tonwrap-desk { display:block !important; } }
/* Sur telephone admin, la feuille de filtres reste l'interface adaptee au petit
   ecran : on evite de dupliquer les puces de tonnage devant la grille. */
@media (max-width:768px) {
  body:not(.idmp-client) #sec-stock #ih-tonwrap-desk { display:none !important; }
}

/* ══ 22. MES COMMANDES : ONGLETS AU MEME STYLE ═════════════════════════════
   idmp_kbtabs.js pilote deja les onglets de Mes commandes (trois groupes : En
   cours, Terminee(s), Annulee(s)). On aligne son apparence sur celle des
   onglets du catalogue et des ecrans SAV et alertes : un seul geste appris,
   valable partout dans l'application.
   ========================================================================== */
@media (max-width:768px) {
  .kbt { padding:0 0 10px; gap:8px; background:#000 !important; }
  .kbt-b {
    flex:1 1 0 !important; min-width:0; height:46px !important; padding:0 12px !important;
    border:1.5px solid #23242A !important; border-radius:13px !important;
    background:#000 !important; color:#8B909B !important;
    font-size:14px !important; font-weight:800 !important;
    justify-content:center;
  }
  .kbt-b .kbt-dot { display:none !important; }
  .kbt-b .kbt-n {
    min-width:20px; height:20px; border-radius:10px;
    background:rgba(255,255,255,.09) !important; color:#8B909B !important;
    font-size:11px !important;
  }
  .kbt-b.on {
    border-color:var(--or) !important; background:#000 !important; color:var(--or) !important;
  }
  .kbt-b.on .kbt-n { background:rgba(232,73,29,.2) !important; color:var(--or) !important; }
  @media (max-width:400px) { .kbt-b { font-size:12.5px !important; padding:0 8px !important; } }
}

/* Les titres de section a pastille (« En cours », « Traitee ») font doublon avec
   les onglets qui portent deja le libelle ET le compteur. Le composant masque
   ceux qu'il trouve ; cette regle couvre les autres, ou la structure ne permet
   pas de les rattacher a une colonne. */
#mob-sub-sav .mob-rech-ttl,
#mob-sub-recherche .mob-rech-ttl { display:none !important; }

/* Kanban client sur telephone : les colonnes sont pilotees par IDMPTabs, elles
   ne doivent plus s'empiler ni afficher leur tete. */
@media (max-width:768px) {
  #kanban-root { display:block !important; height:auto !important; }
  #kanban-root .kol { width:100% !important; flex:none !important; }
  #kanban-root .kol-hd { display:none !important; }
  #kanban-root .kol:not(.it-pane) { display:block; }
}

/* ══ 23. CHASSE AU BRILLANT : LES DERNIERS ═════════════════════════════════
   Les regles precedentes ciblaient des CLASSES. Or une partie du relief est
   ecrite en STYLE INLINE, directement dans le HTML genere : aucune regle de
   classe ne pouvait l'atteindre. On cible donc la declaration elle-meme.

   Ces trois motifs couvrent tout le vocabulaire de relief de l'ancienne charte
   claire : le voile blanc superieur, la teinte eclaircie par color-mix, et le
   liseré interieur. Sur du noir, ils produisent un halo sale.

   Portee : cote CLIENT uniquement. Les degrades du back-office portent une
   information (l'avancement d'un dossier), ils sont conserves.
   ========================================================================== */
body.idmp-client [style*="linear-gradient(180deg,rgba(255,255,255"],
body.idmp-client [style*="linear-gradient(180deg, rgba(255,255,255"],
body.idmp-client [style*="color-mix(in srgb"],
body.idmp-client [style*="inset 0 1px 0 rgba(255,255,255"] {
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* Pastilles et vignettes d'icone des cartes : le carre gris lustre a cote d'une
   commande annulee, notamment. */
body.idmp-client .kcard-ic, body.idmp-client .mob-sc-ic,
body.idmp-client .scard-ic, body.idmp-client .mob-tile-ic,
body.idmp-client .cmd-ic, body.idmp-client [class*="-ic"]:not(i):not(.ti) {
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Tetes de colonne cote client : sur telephone l'onglet les remplace, elles
   n'ont plus lieu d'etre. Sur ordinateur elles restent, mais a plat. */
body.idmp-client .kol-hd {
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
@media (max-width:768px) {
  body.idmp-client .kol-hd,
  body.idmp-client .mob-rech-ttl { display:none !important; }
  /* Les colonnes ne s'empilent plus : c'est l'onglet qui decide de la visible. */
  body.idmp-client .kb { display:block !important; height:auto !important; min-height:0 !important; }
  body.idmp-client .kb > .kol { width:100% !important; flex:none !important; overflow:visible !important; }
  /* Les colonnes prises en charge par les onglets sont pilotees par le
     composant, en style inline. On ne pose donc AUCUNE regle de display ici :
     deux mecanismes concurrents sur la meme propriete finissent toujours par se
     contredire, et c'est indebogable. */
}

/* Sélecteurs de langue et pastilles diverses restees en surface claire. */
body.idmp-client .lang-flag, body.idmp-client .prov-flag { box-shadow:none !important; }

/* Les bandeaux de section de « Mes commandes » sur telephone (.mob-kcol-hd)
   sont remplaces par les onglets. Ils portaient un degrade clair qui ressortait
   comme une bande brillante au milieu de la page. */
.mob-kcol-hd { display:none !important; }
.mob-kcol { display:block !important; background:transparent !important; border:none !important; }
.mob-kcard-ic {
  background-image:none !important;
  box-shadow:none !important;
  background-color:transparent !important;
}

/* ══ 24. TROIS ECRANS CLIENT SUR ORDINATEUR ET TABLETTE ════════════════════
   Onglets facon navigateur sous le titre, le sous-titre et le bouton d'action.
   Le kanban de commandes cede la place a une vue liste : sur trois colonnes de
   230 px, une carte de dossier etait illisible, alors qu'en pleine largeur elle
   affiche reference, machine et etape d'un seul regard.
   ========================================================================== */
@media (min-width:769px) {
  /* Kanban de commandes CLIENT : plus de colonnes, une liste par onglet.
     ATTENTION : l'identifiant #sec-commandes existe AUSSI dans l'administration,
     ou le kanban doit rester un kanban (ses colonnes portent l'avancement).
     Sans le prefixe body.idmp-client, cette regle aplatissait le back-office. */
  body.idmp-client #sec-commandes .kb { display:block !important; height:auto !important; min-height:0 !important; overflow:visible !important; }
  body.idmp-client #sec-commandes .kol { width:100% !important; flex:none !important; overflow:visible !important; }
  body.idmp-client #sec-commandes .kol-hd { display:none !important; }
  body.idmp-client #sec-commandes .kcard { width:100%; }

  /* Les tetes de colonne des alertes et du SAV sont remplacees par les onglets. */
  body.idmp-client #sec-recherche .kol-hd, body.idmp-client #sec-sav .kol-hd { display:none !important; }

  /* Cartes en ligne : elles occupent toute la largeur de l'onglet. */
  .it-body .kcard, .it-body .rech-card, .it-body .sav-card {
    display:flex; align-items:center; gap:14px; width:100%;
    background:#0B0B0D !important; border:1px solid #1F2026 !important; border-radius:12px;
  }
  .it-body .kcard:hover, .it-body .rech-card:hover, .it-body .sav-card:hover {
    border-color:#3A3B43 !important;
  }
}

/* Tablette : les onglets peuvent defiler plutot que de se comprimer. */
@media (min-width:769px) and (max-width:1024px) {
  .it-bar.browser .it-tab { padding:0 14px; font-size:12.5px; }
}

/* Les .kol regroupes sous un onglet perdent leur mise en page de colonne de
   kanban : ils deviennent de simples listes verticales pleine largeur. */
.it-body > .kol {
  flex:none !important; width:100% !important; min-width:0 !important;
  padding:0 !important; overflow:visible !important; background:transparent !important;
}
.it-body > .kol > .kol-hd { display:none !important; }

/* ══ 25. MON COMPTE SUR ORDINATEUR ET TABLETTE ═════════════════════════════
   Une vraie grille remplace les colonnes CSS. Les colonnes fragmentaient le
   conteneur des cartes personnelles et entreprise, d'ou les champs compresses,
   les blocs qui se chevauchaient et les grands vides visibles sur ordinateur.
   ========================================================================== */
@media (min-width:769px) {
  #sec-compte.on {
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(14px, 1.5vw, 22px);
    align-items:start;
    columns:auto !important;
  }
  #sec-compte.on > .sec-hd {
    grid-column:1 / -1;
    margin:0 !important;
  }

  #sec-compte.on .account-info-grid { display:contents !important; }
  #sec-compte.on .account-theme-card { display:none !important; }
  #sec-compte.on .account-card {
    width:auto !important;
    max-width:none !important;
    min-width:0;
    margin:0 !important;
    padding:clamp(14px, 1.3vw, 20px) !important;
    border-radius:14px !important;
    background:#0B0B0D !important;
    border:1px solid #23242A !important;
    box-shadow:none !important;
    align-self:start;
  }
  #sec-compte.on .account-profile-card,
  #sec-compte.on .account-security-card,
  #sec-compte.on .account-delete-card { grid-column:1 / -1; }
  #sec-compte.on .account-delete-card {
    border-color:rgba(220,38,38,.55) !important;
  }
  #sec-compte.on .account-card > *, #sec-compte.on .fg-c { min-width:0; }
  #sec-compte.on input, #sec-compte.on select {
    width:100% !important; max-width:100% !important; box-sizing:border-box;
    height:40px !important; font-size:13.5px !important; padding:0 12px !important;
  }
  #sec-compte.on .fg-c { margin-bottom:11px !important; }
  #sec-compte.on .fg-c:last-child { margin-bottom:0 !important; }
  #sec-compte.on label { margin-bottom:5px !important; font-size:11px !important; }
  #sec-compte.on .btnsm { height:34px !important; font-size:12.5px !important; }
  #sec-compte.on .account-security-fields {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
}

@media (min-width:1180px) {
  #sec-compte.on { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #sec-compte.on .account-security-fields {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* ══ 26. FILTRES : LE STYLE DE L'ADMINISTRATION PARTOUT ════════════════════
   Les filtres du catalogue utilitaire de l'administration sont le bon repere :
   pastilles a bordure fine sur fond noir, texte blanc, et un seul accent
   colore sur la reinitialisation. Cote client, ces memes selecteurs etaient en
   orange plein : cinq aplats orange alignes, plus rien ne ressortait.
   ========================================================================== */
.fsel, .fsel-or, .prov-sel,
#cat-fsheet select, #cat-fsheet input {
  background:#0B0B0D !important;
  background-image:none !important;
  border:1px solid #2A2B31 !important;
  border-radius:22px !important;
  color:#fff !important;
  font-weight:700 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  height:44px !important;
  padding:0 16px !important;
}
.fsel:hover, .fsel-or:hover { border-color:#4A4B55 !important; }
.fsel:focus, .fsel-or:focus { border-color:var(--or) !important; box-shadow:none !important; }
.fsel option, .fsel-or option { background:#141419; color:#fff; font-weight:500; }

/* La flèche des selecteurs, en blanc, sans le fond degrade d'origine. */
.fsel, .fsel-or {
  -webkit-appearance:none; appearance:none; padding-right:34px !important;
  background-repeat:no-repeat !important;
  background-position:right 13px center !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}

/* Reinitialisation : le seul element colore de la barre. */
[onclick*="reset" i].fsel, .sf-reset, #sf-reset, [class*="reset"] {
  border-color:rgba(232,73,29,.55) !important;
  color:var(--or) !important;
}

/* Blocs de curseurs : cadre fin, intitule discret, bornes en orange. */
.sf-range, .rng-box, [class*="range-box"] {
  background:#0B0B0D !important;
  border:1px solid #23242A !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
.sf-range label, .rng-box label { color:#8B909B !important; font-size:11px !important; letter-spacing:.4px; }
.sf-range .rng-val, .rng-box .rng-val { color:var(--or) !important; }
input[type=range] { accent-color:var(--or); }

/* ══ 27. DERNIERE BRILLANCE : LES CTA ET LES CURSEURS ══════════════════════
   Le bouton « Configurer ce projet » du catalogue restait en degrade orange, et
   les curseurs de filtres en piste orange lustree. Ces deux elements portaient
   leur relief en style inline ou via des selecteurs que les regles precedentes
   ne couvraient pas.
   ========================================================================== */

/* Tous les boutons de configuration passent en gris, mini-pelle comme
   utilitaire : c'est le meme geste, il n'a pas de raison de changer de couleur
   selon la famille de produit. */
.sc-cta, .mob-sc-cta, .qs-btn, .qs-btn-pk, .cta-pk,
[onclick*="launchFromStock"], [onclick*="openProductModal"],
.ic-foot .i-cta, .ih-cardwrap .i-cta {
  background:var(--gr) !important;
  background-color:var(--gr) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  box-shadow:none !important;
  text-shadow:none !important;
  font-weight:600 !important;
}
.sc-cta:hover, .mob-sc-cta:hover, .qs-btn:hover,
.ic-foot .i-cta:hover, .ih-cardwrap .i-cta:hover { background:var(--grh) !important; }

/* Curseurs de plage : la peau reste mate sans ecraser la hauteur des composants.
   La precedente regle globale ramenait tous les inputs a 4 px : le rail quittait
   alors le centre des poignees sur mobile comme sur ordinateur. */
.rngf-range, .msl-range, .qs-range {
  -webkit-appearance:none !important;
  appearance:none !important;
  position:absolute !important;
  left:0 !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
.rngf-range { top:0 !important; height:22px !important; }
.msl-range  { top:0 !important; height:36px !important; }
.qs-range   { top:0 !important; height:26px !important; }

.rngf-range::-webkit-slider-runnable-track {
  height:5px !important; border:0 !important; background:transparent !important; box-shadow:none !important;
}
.msl-range::-webkit-slider-runnable-track {
  height:6px !important; border:0 !important; background:transparent !important; box-shadow:none !important;
}
.qs-range::-webkit-slider-runnable-track {
  height:26px !important; border:0 !important; background:transparent !important; box-shadow:none !important;
}
.rngf-range::-moz-range-track {
  height:5px !important; border:0 !important; background:transparent !important; box-shadow:none !important;
}
.msl-range::-moz-range-track {
  height:6px !important; border:0 !important; background:transparent !important; box-shadow:none !important;
}
.qs-range::-moz-range-track {
  height:26px !important; border:0 !important; background:transparent !important; box-shadow:none !important;
}

.rngf-range::-webkit-slider-thumb {
  -webkit-appearance:none !important; appearance:none !important;
  width:18px !important; height:18px !important; margin-top:-6.5px !important;
  border-radius:50% !important; background:var(--or) !important;
  border:2px solid #fff !important; box-shadow:none !important;
  cursor:pointer; pointer-events:auto !important;
}
.rngf-range::-moz-range-thumb {
  width:18px !important; height:18px !important;
  border-radius:50% !important; background:var(--or) !important;
  border:2px solid #fff !important; box-shadow:none !important;
  cursor:pointer; pointer-events:auto !important;
}
.msl-range::-webkit-slider-thumb {
  -webkit-appearance:none !important; appearance:none !important;
  width:28px !important; height:28px !important; margin-top:-11px !important;
  border-radius:50% !important; background:var(--or) !important;
  border:3px solid #fff !important; box-shadow:none !important;
  cursor:grab; pointer-events:auto !important;
}
.msl-range::-moz-range-thumb {
  width:28px !important; height:28px !important;
  border-radius:50% !important; background:var(--or) !important;
  border:3px solid #fff !important; box-shadow:none !important;
  cursor:grab; pointer-events:auto !important;
}
.qs-range::-webkit-slider-thumb {
  -webkit-appearance:none !important; appearance:none !important;
  width:22px !important; height:22px !important; margin-top:2px !important;
  border-radius:50% !important; background:var(--or) !important;
  border:2px solid #fff !important; box-shadow:none !important;
  cursor:pointer; pointer-events:auto !important;
}
.qs-range::-moz-range-thumb {
  width:22px !important; height:22px !important;
  border-radius:50% !important; background:var(--or) !important;
  border:2px solid #fff !important; box-shadow:none !important;
  cursor:pointer; pointer-events:auto !important;
}
.rng-track, .rng-fill, [class*="slider"] {
  background-image:none !important; box-shadow:none !important;
}

/* ══ 28. RESPIRATION : ESPACEMENTS PROPORTIONNELS A L'ECRAN ════════════════
   Les marges etaient fixes : serrees sur une tablette, ridicules sur un 27
   pouces. clamp() les fait varier avec la largeur reelle, entre un plancher
   confortable et un plafond raisonnable.
   ========================================================================== */
@media (min-width:769px) {
  body.idmp-client .content, body.idmp-client .main {
    padding-left:clamp(18px, 2.2vw, 40px) !important;
    padding-right:clamp(18px, 2.2vw, 40px) !important;
  }
  body.idmp-client .sec-hd { margin-bottom:clamp(14px, 1.6vw, 24px) !important; }
  body.idmp-client .sec-ttl { font-size:clamp(20px, 1.9vw, 27px) !important; }
  body.idmp-client .sec-sub { font-size:clamp(12.5px, 1vw, 14.5px) !important; }

  /* Barre de filtres : les pastilles respirent au lieu de se toucher. */
  .sf-row { display:flex !important; flex-wrap:wrap; gap:clamp(8px, .9vw, 14px) !important; }
  .sf-ranges { display:grid !important; gap:clamp(10px, 1.1vw, 18px) !important;
               grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)) !important; }

  /* Grille du catalogue : le nombre de colonnes suit la largeur disponible au
     lieu d'etre fige a trois, ce qui evite les cartes ecrasees sur tablette. */
  body.idmp-client #stock-grid {
    grid-template-columns:repeat(auto-fill, minmax(clamp(260px, 24vw, 360px), 1fr)) !important;
    gap:clamp(26px, 3vw, 52px) clamp(20px, 2.2vw, 40px) !important;
  }
}
