/* ============================================================================
   SILEX - 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:#FF3019;          /* orange SILEX, inchange                      */
  --orh:#DD2714;         /* hover : on assombrit, convention unique    */
  --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).
   ========================================================================== */
:where(html:not(.idmp-day)) [style*="background:#fff" i],
:where(html:not(.idmp-day)) [style*="background: #fff" i],
:where(html:not(.idmp-day)) [style*="background:#FFFFFF" i],
:where(html:not(.idmp-day)) [style*="background-color:#fff" i] { background:var(--wh) !important; }

:where(html:not(.idmp-day)) [style*="background:#F5F6FA" i],
:where(html:not(.idmp-day)) [style*="background:#FAFAFA" i],
:where(html:not(.idmp-day)) [style*="background:#F5F5F5" i],
:where(html:not(.idmp-day)) [style*="background:#F7F8FB" i],
:where(html:not(.idmp-day)) [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.
   .fq en est exclu : c'est la pilule de recherche des onglets du tunnel, qui
   porte deja sa surface et son filet plus bas dans cette feuille, avec les
   selecteurs auxquels elle doit ressembler. Sans cette exclusion, cette regle
   la remportait par sa specificite, trois attributs contre une classe, et le
   champ sortait avec un filet de 35,36,42 face a des selecteurs en 42,43,49
   sur la meme rangee. Exclure ici plutot que surencherir la-bas : c'est deja
   la convention du fichier, .fsel-or est traite ainsi juste en dessous. */
input:not([type=range]):not([type=checkbox]):not([type=radio]):not(.fq),
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(var(--or-rgb,255,48,25),.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(var(--or-rgb,255,48,25),.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(var(--or-rgb,255,48,25),.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 SILEX (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:var(--or,#FF3019) !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) and (orientation:landscape) {
  /* Ce palier datait d'une barre laterale posee en bloc fixe de 196px, hors du
     flux, qu'il fallait compenser par une marge sur le contenu. Le rail de la
     section 12 en a fait un enfant flex ordinaire de 76px : la marge est
     devenue un decalage MORT qui volait 196px de largeur sur toute tablette
     couchee, sur tous les ecrans. Elle est neutralisee, et la regle de largeur
     qui l'accompagnait visait des selecteurs (.sidebar, .side, #sidebar) qui
     n'existent plus dans ce balisage.
     --sw reste declare : la page s'en sert encore comme repli, et le rail le
     surcharge de toute facon en !important. */
  :root { --sw:76px; }
  .main, .content-wrap { margin-left:0 !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:#FF3019 !important; --orh:#DD2714 !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) and (orientation:landscape) {
  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(var(--or-rgb,255,48,25),.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; }

  /* Deux colonnes, l'agencement retenu par Gloire. Le fond reste
     TRANSPARENT pour que la lueur de la page traverse : la carte n'a jamais eu
     de surface propre, son #000 etant exactement celui du fond de page. */
  .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:transparent !important;
  }
  .ic-media { order:2; aspect-ratio:var(--ic-prev, 3 / 2); max-width:360px; align-self:center; }
  /* PAS DE display:flex ICI. Le titre porte du balisage : la marque est
     enfermee dans un <b> pour passer en orange. Dans un conteneur flex, une
     suite de noeuds de texte ne contenant QUE des espaces ne produit aucun
     element : les espaces de part et d'autre du <b> disparaissaient et le
     titre se lisait "OMNITECH T18 -SILEXSELECTION".
     text-align:center suffit a centrer, et le centrage vertical n'avait pas
     d'objet, la ligne occupant toute la largeur de la carte. */
  .ic-t {
    order:1; grid-column:1/-1 !important; margin:0 0 6px !important;
    font-size:18px !important; text-align:center; min-height:0;
  }
  .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) and (orientation:landscape) {
  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;
    /* Sans cette ligne, .ic-card retombait sur le align-items:stretch de la
       feuille injectee par idmp_config.js : la piste donnait a .ic-media une
       hauteur DEFINIE (120x231 a 1024x768), ce qui annule son aspect-ratio.
       La photo restait peinte en 120x120, mais le ruban TOP VENTES, ancre en
       top:0 de la boite, se detachait 55,5px au-dessus de la machine. Les
       paliers bureau et telephone posent deja la meme declaration. */
    align-items:center !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), (orientation:portrait) and (max-width:1024px) {
  .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:transparent !important;
  }
  .ic-t { grid-column:1/-1 !important; font-size:clamp(16px,4.7vw,20px) !important; }
  .ic-media { width:100%; max-width:300px; aspect-ratio:var(--ic-prev, 3 / 2) !important; align-self:center; }
  .ic-img { width:100% !important; height:100% !important; object-fit:contain !important; background:transparent !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:1025px), (min-width:769px) and (orientation:landscape) {
  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. */
html:not(.app-natif) 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(var(--or-rgb,255,48,25),.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:1025px), (min-width:769px) and (orientation:landscape) {
  /* 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; }
  /* TOUTES LES FAMILLES DE L ADMINISTRATION CEDENT LA PLACE AUX PUCES, et le
     :not(.cat-pk) qui exceptait les utilitaires a saute le 2 septembre 2026.

     Gloire : "pour vehicule je veux le meme filtre pour admin que celui du
     dashboard, il y a encore l ancien filtre dans admin, et l espacement du
     filtre tonnage des chargeuses n est pas bon, corrige pour que ce soit
     comme dans mini-pelle".

     LES DEUX DEFAUTS N EN FONT QU UN. Ce bloc masque l ancien panneau ET pose
     la marge des puces ; l exception cat-pk privait donc les vehicules et les
     chargeuses des deux a la fois. Mesure avant correction, catalogue vehicules
     de l administration : panneau marques / modeles / categorie / ordre visible
     par-dessus les segments, et puces a marge nulle contre 21,28 px en
     mini-pelle.

     LE DASHBOARD AVAIT DEJA TRANCHE, et c est la reference que Gloire donne :
     mesure au banc sur /dashboard en famille utilitaire, panneau et bouton de
     filtres tous deux a display:none, seuls les segments Tous / Vans /
     Camping-car / Utilitaires restent. mountTons dit la meme chose en toutes
     lettres depuis le 30 aout : "plus aucun onglet n a de panneau de filtres,
     chaque famille a ses puces, et elles suffisent". L administration etait la
     derniere a ne pas l avoir appris. */
  body:not(.idmp-client) #sec-stock #asf-fwrap,
  body:not(.idmp-client) #sec-stock .sf-row,
  body:not(.idmp-client) #sec-stock .sf-ranges,
  body:not(.idmp-client) #sec-stock .sf-range,
  body:not(.idmp-client) #sec-stock #asf-ranges,
  body:not(.idmp-client) #sec-stock .rngf {
    display:none !important;
  }
  body:not(.idmp-client) #sec-stock #ih-tonwrap-desk {
    display:block !important;
    margin:0 0 clamp(14px, 1.4vw, 22px);
  }
}

/* ══ 21 bis. LE MEME CATALOGUE SUR TELEPHONE ═══════════════════════════════
   Gloire demandait les deux paliers : "pour vehicule ordinateur ET mobile".
   Le bloc du dessus ne vaut que pour l ordinateur ; sur telephone
   l administration gardait son gros bouton "Recherche via les filtres" et
   n affichait aucun segment.

   LE BOUTON EST RALLUME PAR UNE REGLE A DEUX IDENTIFIANTS,
   #mob-aback.with-filters #asf-fbtn, posee quand la barre du haut recoit la
   classe with-filters sur les onglets de catalogue. Le masquer demande donc
   de la battre : d ou le prefixe body:not(.idmp-client) et le !important.
   On ne retire pas with-filters cote script, cette classe pilote aussi la
   mise en page du bandeau.

   LES PUCES REMPLACENT LE BOUTON, elles ne s ajoutent pas a lui : #ih-tonwrap-desk
   existe deja dans le balisage sur telephone, il n y etait qu invisible. Ses
   libelles y sont les courts, barreHtml ne passant en libelles longs qu au-dela
   de mille pixels. */
@media (max-width:768px), (orientation:portrait) and (max-width:1024px) {
  body:not(.idmp-client) #mob-aback.with-filters #asf-fbtn,
  body:not(.idmp-client) #sec-stock #asf-fbtn {
    display:none !important;
  }
  body:not(.idmp-client) #sec-stock #ih-tonwrap-desk {
    display:block !important;
    margin:0 0 14px;
  }
}

/* ══ 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:var(--or,#FF3019) !important;
  outline:none !important;
}
@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {
  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), (orientation:portrait) and (max-width:1024px) {
  #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.

   .ic-media ET .ic-img EN SONT SORTIS le 19 aout 2026. Ce sont les seuls
   medias du lot a porter des rendus DETOURES, et le seul aplat qu'ils
   revelaient etait celui de la page, deja noir : leur fond ne protegeait donc
   rien et bouchait la lueur de la marque. Les galeries et les vignettes de
   stock, elles, portent des photos pleines et gardent leur support. */
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;
}

/* Le cadre du rendu laisse passer la lumiere. Le repli sans image, lui, garde
   son aplat : un filigrane sur une lueur ne se lit pas. */
body.dark .ic-media,
body.dark .ic-img { background-color:transparent !important; }
body.dark .ic-noimg { 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:1025px), (min-width:769px) and (orientation:landscape) {
  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), (orientation:portrait) and (max-width:1024px) {
  #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:1025px), (min-width:769px) and (orientation:landscape) { #ih-tonwrap-desk { display:block !important; } }
/* CETTE REGLE MASQUAIT LES PUCES SUR TELEPHONE ADMIN, et elle a saute le
   2 septembre 2026. Son commentaire disait vrai a l epoque : "la feuille de
   filtres reste l interface adaptee au petit ecran, on evite de dupliquer les
   puces devant la grille". Elle supposait donc que la feuille existait. Depuis
   que Gloire a demande le filtre du tableau de bord pour l administration,
   cette feuille est masquee sur les deux paliers : garder la regle laissait le
   telephone SANS filtre du tout, ni bouton ni puces. Les puces sont desormais
   posees par le bloc 21 bis, plus haut. */

/* ══ 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), (orientation:portrait) and (max-width:1024px) {
  .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(var(--or-rgb,255,48,25),.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), (orientation:portrait) and (max-width:1024px) {
  #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), (orientation:portrait) and (max-width:1024px) {
  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:1025px), (min-width:769px) and (orientation:landscape) {
  /* 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;
  }
  /* Les trois blocs de la carte etaient dessines pour une colonne etroite ou
     ils s'empilaient. Couches en ligne, ils gardaient leurs reglages verticaux :
     la ligne haute se rétractait sur son contenu, donc son space-between n'avait
     plus d'espace a repartir et la reference touchait la date ; le nom ne
     s'etirait pas, donc l'etape restait collee a gauche ; et le filet superieur
     du pied, qui separait deux lignes empilees, devenait un trait en l'air. */
  .it-body .kcard-top {
    flex:0 0 auto; gap:12px; margin-bottom:0;
  }
  .it-body .kcard-nm {
    flex:1 1 auto; min-width:0; margin-bottom:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .it-body .kcard-brand { display:none; }
  .it-body .kcard-ft {
    flex:0 0 auto; border-top:none; padding-top:0;
  }
  .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) and (orientation:landscape) {
  .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 ═══════════════════════
   OBJECTIF : tout l'ecran tient d'un seul coup d'oeil, sans defilement, du
   1024x768 couche au 1920x1080, et sans trou en bas de page.

   CE QUI NE MARCHAIT PAS DANS LA VERSION PRECEDENTE
   Elle avait bien supprime le defilement, mais en tassant tout en haut : les
   cartes gardaient leur hauteur naturelle, la grille etait en align-content
   start, et le reliquat de hauteur restait en bas sous forme d'une bande vide.
   Le contenu ne remplissait pas l'ecran, il y flottait.

   LA REGLE DE PLACEMENT
   L'ordre du DOM ne correspond pas a l'ordre voulu a l'ecran : la carte photo
   arrive avant les formulaires dans le balisage. On place donc CHAQUE carte
   explicitement en ligne et colonne, plutot que de compter sur le flux
   automatique et sur dense, qui donnaient un resultat different a chaque
   changement de hauteur de carte.

   POURQUOI LES RANGEES SONT EN minmax(auto, 1fr)
   La borne basse auto interdit qu'une rangee descende sous la hauteur de son
   contenu : rien ne se coupe jamais en silence. La borne haute 1fr laisse les
   rangees se partager le reliquat quand il y en a. Une seule declaration couvre
   donc l'ecran trop petit et l'ecran trop grand.

   POURQUOI space-between DANS LES CARTES
   Une carte etiree dont les champs restent colles en haut, c'est le trou de
   depart deplace a l'interieur. Les champs se repartissent donc sur la hauteur
   reelle de la carte. Le reliquat devient de la respiration, pas du vide.

   MODE NUIT : la carte reste masquee. Verifie avant de la retablir : les lignes
   125 et 793 de ce fichier masquent DELIBEREMENT tous les declencheurs de theme,
   #dark-toggle compris, parce que l'application est en sombre permanent. La
   reintegrer afficherait une carte dont le seul bouton est invisible.
   ========================================================================== */
@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {
  /* Le contenu portait 22px de padding haut et bas en dur, quelle que soit la
     hauteur d'ecran : 44px preleves sur un budget qui en manque. */
  body.idmp-client .content { padding-top:clamp(10px, 1.4vh, 16px) !important; padding-bottom:clamp(10px, 1.4vh, 16px) !important; }

  #sec-compte.on {
    display:grid !important;
    /* SIX colonnes et non deux. La rangee haute se decoupe en tiers (Securite,
       Type, Photo), la rangee basse en moities (Personnel, Entreprise) : deux
       decoupages differents sur la meme grille, ce qu'un pas de deux ou de trois
       ne permet pas. Six est le plus petit commun multiple des deux. */
    grid-template-columns:repeat(6, minmax(0,1fr));
    /* La photo est ici une BANDE horizontale, pas une colonne : lui donner une
       part du reliquat l'etirait a 205px pour une seule ligne de contenu. Elle
       garde donc sa hauteur naturelle, et ce sont les cartes de formulaire qui
       se partagent la place restante. Au dela de 1360px elle redevient une
       colonne et retrouve son role d'absorbeur. */
    grid-template-rows:auto auto minmax(auto,1fr) minmax(auto,1.25fr) auto;
    gap:clamp(7px, .7vw, 10px);
    align-items:stretch;
    align-content:stretch;
    columns:auto !important;
    /* La section prend la hauteur restante : plus rien ne deborde en silence,
       et si une taille d'ecran imprevue arrive, c'est l'interieur qui defile,
       pas la page entiere. */
    height:100%;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
  }

  /* ── Placement explicite, deux colonnes ──
     rangee 1  en-tete
     rangee 2  Photo et profil complete, couchee sur toute la largeur
     rangee 3  Securite | Type de compte
     rangee 4  Infos personnelles | Infos entreprise, a parts egales
     rangee 5  Suppression du compte, couchee sur toute la largeur           */
  #sec-compte.on > .sec-hd              { grid-column:1 / -1; grid-row:1; }
  #sec-compte.on .account-profile-card  { grid-column:1 / -1; grid-row:2; }
  #sec-compte.on .account-security-card { grid-column:1 / 4;  grid-row:3; }
  #sec-compte.on .account-type-card     { grid-column:4 / 7;  grid-row:3; }
  #sec-compte.on .account-personal-card { grid-column:1 / 4;  grid-row:4; }
  #sec-compte.on .account-company-card  { grid-column:4 / 7;  grid-row:4; }
  #sec-compte.on .account-delete-card   { grid-column:1 / -1; grid-row:5; }
  /* Le reglage de theme n'existe plus : les lignes 125 et 793 de ce fichier
     masquent deja tous ses declencheurs, l'application etant en sombre
     permanent. La carte n'aurait plus qu'un bouton invisible a montrer. */
  #sec-compte.on .account-theme-card    { display:none !important; }

  #sec-compte.on > .sec-hd {
    margin:0 !important;
    align-items:baseline;
    gap:12px;
    align-self:center;
  }
  /* Le sous-titre passe a cote du titre au lieu de dessous : une ligne gagnee
     sans rien perdre de l'information. */
  #sec-compte.on > .sec-hd > div { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  #sec-compte.on .sec-ttl { font-size:clamp(19px, 1.5vw, 23px) !important; }
  #sec-compte.on .sec-sub { margin-top:0 !important; font-size:13px !important; }

  /* Le conteneur intermediaire s'efface : ses trois cartes remontent dans la
     grille de la section et peuvent donc etre placees une par une. */
  #sec-compte.on .account-info-grid { display:contents !important; }

  #sec-compte.on .account-card {
    width:auto !important;
    max-width:none !important;
    min-width:0;
    margin:0 !important;
    padding:clamp(11px, .9vw, 14px) clamp(12px, 1vw, 16px) !important;
    border-radius:14px !important;
    background:#0B0B0D !important;
    border:1px solid #23242A !important;
    box-shadow:none !important;
    align-self:stretch;
  }

  /* ── Les champs passent en colonnes DANS la carte ──
     auto-fit plutot qu'un nombre fixe : une carte large prend deux colonnes de
     champs, une carte etroite retombe a une seule, sans regle par palier.

     Les deux cartes tombent alors sur QUATRE rangees de champs chacune :
       personnel   Prenom|Nom  ·  E-mail|Telephone  ·  Adresse  ·  CP|Ville
       entreprise  Entreprise  ·  SIRET|TVA         ·  Adresse  ·  CP|Ville
     Meme nombre de rangees, donc meme hauteur naturelle, donc plus de colonne
     beante a cote de la plus courte des deux. */
  #sec-compte.on .account-personal-card,
  #sec-compte.on .account-company-card {
    display:grid !important;
    /* DEUX colonnes fixes, pas auto-fit. Avec auto-fit les pistes vides
       s'effondrent : la carte Personnel affichait Prenom, Nom et E-mail sur
       trois colonnes pendant que la carte Entreprise, a largeur strictement
       egale, n'en montrait que deux, parce que sa derniere piste etait vide.
       Deux cartes cote a cote qui ne se lisent pas au meme rythme.
       A deux colonnes, les deux tombent sur quatre rangees identiques :
         Personnel   Prenom|Nom · E-mail|Telephone · Adresse · CP|Ville
         Entreprise  Entreprise · SIRET|TVA        · Adresse · CP|Ville      */
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:clamp(4px, .5vh, 9px) clamp(10px, 1vw, 16px);
    align-content:space-between;
  }
  /* En-tete et ligne de message traversent la carte : sans cela ils se
     rangeraient dans la premiere colonne comme un champ. */
  #sec-compte.on .account-personal-card > :not(.fg-c),
  #sec-compte.on .account-company-card  > :not(.fg-c) { grid-column:1 / -1; }
  /* L'adresse et la raison sociale sont des chaines longues : sur une demi
     largeur elles se lisent par la fin, tronquees. Elles traversent la carte. */
  #sec-compte.on .fg-wide { grid-column:1 / -1; }

  /* ── Securite : les champs se centrent dans la hauteur disponible ── */
  #sec-compte.on .account-security-card { display:flex !important; flex-direction:column; }
  #sec-compte.on .account-security-fields {
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap:clamp(4px, .5vh, 9px) clamp(10px, 1vw, 16px) !important;
    flex:1 1 auto;
    align-content:center;
  }

  /* ── Type de compte : deux choix qui occupent la carte ──
     Deux boutons de 44px poses en haut d'une carte etiree laissaient le reste
     vide. Ils prennent la hauteur : la cible devient plus grande, ce qui ne
     dessert personne, et la carte se remplit. */
  #sec-compte.on .account-type-card { display:flex !important; flex-direction:column; }
  /* margin auto en haut ET en bas : le groupe se centre dans la hauteur libre.
     Sans le plafond, deux boutons s'etiraient a 250px de haut, ce qui ne se
     lisait plus comme un choix mais comme deux panneaux. */
  #sec-compte.on .account-type-choices {
    flex:0 0 auto; margin:auto 0 !important;
    max-height:clamp(88px, 13vh, 124px);
    gap:clamp(8px, .8vw, 11px) !important; align-items:stretch;
  }
  #sec-compte.on .account-type-btn { min-height:44px !important; height:100%; }

  /* ── Photo et profil complete ──
     Couchee sur deux colonnes : l'avatar a gauche, le texte au centre, la barre
     de progression a droite au lieu de sous le bouton. Trois rangees deviennent
     une seule. */
  #sec-compte.on .account-profile-card {
    display:flex !important;
    align-items:center;
    gap:clamp(14px, 1.4vw, 22px);
  }
  #sec-compte.on .account-profile-card > div:nth-child(2) {
    display:flex;
    align-items:center;
    gap:clamp(14px, 1.4vw, 22px);
    flex:1 1 auto;
    min-width:0;
    flex-wrap:wrap;
  }
  /* Le bloc de progression cesse d'etre pousse sous le bouton par sa marge. */
  #sec-compte.on .account-profile-card > div:nth-child(2) > div:last-child {
    margin-top:0 !important;
    flex:1 1 200px;
    min-width:170px;
    max-width:none !important;
  }

  /* ── Suppression du compte : une ligne, pas un bloc ──
     Elle empilait titre, phrase et bouton sur 150px pour une action que l'on ne
     fait qu'une fois. Couchee, elle en occupe le tiers, et reste aussi
     atteignable, ce que les fiches App Store et Google Play exigent. */
  #sec-compte.on .account-delete-card {
    display:flex !important;
    align-items:center;
    gap:clamp(10px, 1vw, 16px);
    flex-wrap:wrap;
    border-color:rgba(220,38,38,.55) !important;
    padding:clamp(9px, .8vw, 12px) clamp(12px, 1vw, 16px) !important;
  }
  #sec-compte.on .account-delete-card > * { margin:0 !important; }
  #sec-compte.on .account-delete-card > div:first-child { flex:0 0 auto; }
  /* La phrase d'avertissement prenait toute la largeur et renvoyait le bouton a
     la ligne suivante. Elle se resume a deux lignes coupees proprement. */
  #sec-compte.on .account-delete-card > div:nth-child(2) {
    flex:1 1 160px; min-width:0;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    font-size:11.5px !important; line-height:1.45 !important;
  }
  #sec-compte.on .account-delete-card > button { flex:0 0 auto; margin-left:auto !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:clamp(32px, 3.9vh, 38px) !important; font-size:13.5px !important; padding:0 11px !important;
  }
  /* La marge basse disparait au profit du gap de la grille : sans cela
     align-content ne peut pas repartir la hauteur proprement. */
  #sec-compte.on .fg-c { margin-bottom:0 !important; }
  #sec-compte.on label { margin-bottom:3px !important; font-size:10.5px !important; line-height:1.25 !important; }
  #sec-compte.on .btnsm { height:30px !important; font-size:12.5px !important; }
  /* La ligne de titre de chaque carte portait 13px de marge basse sous un
     bouton de 30 : elle en garde 8, ce qui suffit a la detacher des champs. */
  #sec-compte.on .account-card > div:first-child { margin-bottom:8px !important; }
}

/* Trois colonnes des que la largeur le permet. La photo quitte la bande du bas
   et prend la troisieme colonne : elle devient le bloc qui absorbe la hauteur
   restante, avec le mode nuit sous elle.

     rangee 2   Personnel | Entreprise | Photo et profil complete
     rangee 3   Securite  | Type       | Mode nuit
     rangee 4   Suppression du compte, pleine largeur                        */
@media (min-width:1360px) {
  #sec-compte.on {
    grid-template-rows:auto minmax(auto,1fr) minmax(auto,1.15fr) auto;
  }
  /* La photo quitte la bande pleine largeur et prend le tiers droit de la
     rangee haute, a cote de Securite et de Type de compte. Les deux cartes de
     formulaire gardent la rangee du dessous pour elles seules, a parts egales
     sur toute la largeur : c'est la ou il y a le plus a lire. */
  #sec-compte.on .account-security-card { grid-column:1 / 3; grid-row:2; }
  #sec-compte.on .account-type-card     { grid-column:3 / 5; grid-row:2; }
  #sec-compte.on .account-profile-card  { grid-column:5 / 7; grid-row:2; }
  #sec-compte.on .account-personal-card { grid-column:1 / 4; grid-row:3; }
  #sec-compte.on .account-company-card  { grid-column:4 / 7; grid-row:3; }
  #sec-compte.on .account-delete-card   { grid-column:1 / -1; grid-row:4; }

  /* Debout dans sa colonne : l'avatar en haut, le texte dessous, la barre de
     progression en pied de carte. C'est cette carte qui s'etire, les autres
     gardent leur dessin. */
  /* space-between reparti les quatre elements sur 624px : 140px entre le titre
     et sa propre legende. Ce n'est plus une carte, c'est une colonne d'objets
     sans rapport. Ils se groupent donc en haut, et seule la barre de progression
     va chercher le bas, ou elle se lit comme un pied de carte. */
  #sec-compte.on .account-profile-card {
    flex-direction:column;
    text-align:center;
    justify-content:flex-start;
    gap:clamp(10px, 1.4vh, 18px);
  }
  #sec-compte.on .account-profile-card > div:nth-child(2) {
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    text-align:center;
    gap:clamp(7px, .9vh, 12px);
    width:100%;
    flex:1 1 auto;
  }
  /* DEUX marges automatiques, pas une. Avec la seule marge du bas, le groupe
     titre / legende / bouton restait colle sous l'avatar et laissait 450px de
     vide d'un seul tenant avant la barre. Deux marges auto se partagent le
     reliquat a parts egales : le groupe se pose au milieu, la barre garde son
     role de pied de carte, et il n'y a plus de trou, seulement du calme. */
  #sec-compte.on .account-profile-card > div:nth-child(2) > div:first-child { margin-top:auto !important; }
  #sec-compte.on .account-profile-card > div:nth-child(2) > div:last-child {
    width:100%; flex:0 0 auto; margin-top:auto !important;
  }
  /* L'avatar est le sujet de cette carte : debout dans une colonne haute, il a
     les moyens d'etre grand. C'est lui qui occupe la place, pas du vide. */
  #sec-compte.on .account-profile-card #cp-avatar-wrap {
    width:clamp(88px, 8.6vw, 148px) !important;
    height:clamp(88px, 8.6vw, 148px) !important;
    font-size:clamp(28px, 3vw, 48px) !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.
   ========================================================================== */
/* .fq, le champ de recherche des trois onglets du tunnel, ENTRE DANS CETTE
   REGLE et n'a pas la sienne. Mesure du 19 aout 2026 : pose a part, il sortait
   a 34 px et bordure de 2 px face a des selecteurs de 44 px et 1 px, soit dix
   pixels d'ecart sur la meme rangee. Une valeur recopiee est une valeur qui
   divergera ; il partage donc la declaration, et sa loupe est reposee juste
   apres puisque background-image est neutralise ici. */
.fsel, .fsel-or, .prov-sel, .fq,
#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;
}
/* La loupe revient, et le rembourrage gauche lui fait sa place. La couleur du
   filet est REPOSEE ici : une regle generique sur les champs de saisie, plus
   bas dans cette meme feuille, la ramenait a var(--bd) et le champ sortait a
   rgb(35,36,42) face a des selecteurs en rgb(42,43,49). Mesure a l'appui, sur
   la meme rangee. */
.fq {
  border-color:#2A2B31 !important;
  padding-left:38px !important;
  font-weight:600 !important;
  background-repeat:no-repeat !important;
  background-position:left 15px center !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B909B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") !important;
}
.fq:hover  { border-color:#4A4B55 !important; }
.fq:focus  { border-color:var(--or) !important; }
.fq::placeholder { color:#8B909B !important; font-weight:500 !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(var(--or-rgb,255,48,25),.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:1025px), (min-width:769px) and (orientation:landscape) {
  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;
  }
}

/* ══ 12. RAIL DE NAVIGATION, PAYSAGE ════════════════════════════════════════
   Au repos le rail ne montre que les icones, en gris. Il s'ouvre au survol sur
   ordinateur, au chevron / a l'icone / au balayage sur tablette.

   POURQUOI LE PANNEAU NE POUSSE PAS LE CONTENU
   Un rail qui elargit la colonne recale toute la page a chaque passage de
   souris. La largeur visuelle passe donc a 252px pendant qu'une marge droite
   negative de -176px rend les 176px gagnes au flux : les voisins ne bougent
   pas. Le contenu ne se decale que si l'utilisateur epingle (body.rail-pin).

   POURQUOI font-size ET color SUR .sbi
   Les libelles sont des noeuds texte nus derriere l'icone, pas des elements.
   idmp_rail.js les enveloppe dans .sbi-lb pour pouvoir les fondre, mais si le
   script ne se charge pas, color:transparent suffit a les masquer : rail ferme,
   on ne doit jamais voir depasser un debut de mot.

   Ce bloc ne s'applique qu'au-dessus de 768px. En dessous, .sb reste masquee et
   la navigation mobile prend la main, inchangee.
   ========================================================================== */
/* Poignee et voile sont poses sur <body> par idmp_rail.js, donc hors de toute
   media query. Sans ce repli ils survivraient sous 768px en elements bruts : un
   bouton chevron orphelin et un div pleine largeur, alors que la navigation
   mobile a deja pris la main. Ils ne reapparaissent qu'en paysage. */
.rail-grip, .rail-scrim { display:none; }

@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {

  .rail-grip  { display:flex; }
  .rail-scrim { display:block; }

  aside.sb {
    /* Le paragraphe 4 pose le rail en #000, soit le fond du contenu : replie, il
       devient invisible en dehors de la bande d'icones. On remonte d'un cran sur
       la surface carte de la charte pour que la colonne se lise comme un objet. */
    background:#0B0B0D !important;
    width:76px !important; min-width:76px !important;
    height:100vh; height:100dvh;
    position:relative; z-index:60;
    overflow:hidden;
    transition:width .22s cubic-bezier(.4,0,.2,1),
               margin-right .22s cubic-bezier(.4,0,.2,1),
               box-shadow .22s ease;
  }
  body.rail-hover aside.sb,
  body.rail-open aside.sb {
    width:252px !important;
    margin-right:-176px;
    box-shadow:18px 0 44px rgba(0,0,0,.55);
  }
  body.rail-pin aside.sb {
    width:252px !important;
    margin-right:0;
    box-shadow:none;
  }

  /* ── en-tete ── */
  aside.sb .sb-top {
    height:68px; min-height:68px;
    padding:0 18px; gap:11px;
    display:flex; align-items:center;
    overflow:hidden;
  }
  aside.sb .sb-top img { width:30px; height:30px; flex:0 0 30px; }
  aside.sb .sb-top-txt {
    white-space:nowrap;
    opacity:0; transform:translateX(-6px);
    transition:opacity .16s ease, transform .18s ease;
  }
  body.rail-hover aside.sb .sb-top-txt,
  body.rail-open aside.sb .sb-top-txt,
  body.rail-pin aside.sb .sb-top-txt { opacity:1; transform:none; }

  /* ── corps ── */
  aside.sb .sb-nav { padding:12px 9px; display:flex; flex-direction:column; gap:2px; }
  aside.sb .sb-nav::-webkit-scrollbar { width:0; }

  /* flex-shrink:0 partout dans le menu. Sans cela, une barre longue (l'admin en
     compte 17) ne fait pas defiler : chaque entree se comprime sous sa hauteur,
     mesuree a 31px au lieu de 44. C'est le meme piege que les lignes de
     navigation de order_detail, qui exigent min-height:min-content. */
  aside.sb .sb-grp, aside.sb .sbi { flex-shrink:0; }

  aside.sb .sb-grp {
    font-size:9.5px; letter-spacing:.13em;
    padding:12px 10px 5px; white-space:nowrap;
    opacity:0; transition:opacity .14s ease;
  }
  body.rail-hover aside.sb .sb-grp,
  body.rail-open aside.sb .sb-grp,
  body.rail-pin aside.sb .sb-grp { opacity:1; }

  aside.sb .sbi {
    height:44px; padding:0 18px; gap:14px;
    border-radius:11px;
    font-size:13.5px; font-weight:500;
    color:transparent !important;
    background:none !important;
    box-shadow:none;
    white-space:nowrap; overflow:hidden;
    transition:background .15s ease, color .15s ease, box-shadow .15s ease;
  }
  aside.sb .sbi i {
    font-size:21px; width:22px; flex:0 0 22px;
    color:#8B909B;
    transition:color .15s ease;
  }
  aside.sb .sbi-lb {
    opacity:0; transform:translateX(-5px);
    transition:opacity .16s ease, transform .18s ease;
  }
  body.rail-hover aside.sb .sbi,
  body.rail-open aside.sb .sbi,
  body.rail-pin aside.sb .sbi { color:#B9BDC6 !important; }
  body.rail-hover aside.sb .sbi-lb,
  body.rail-open aside.sb .sbi-lb,
  body.rail-pin aside.sb .sbi-lb { opacity:1; transform:none; }

  aside.sb .sbi:hover {
    background:rgba(var(--or-rgb,255,48,25),.10) !important;
    color:var(--or,#FF3019) !important;
  }
  aside.sb .sbi:hover i { color:var(--or,#FF3019); }

  aside.sb .sbi.on {
    background:rgba(var(--or-rgb,255,48,25),.14) !important;
    color:var(--or,#FF3019) !important;
    font-weight:600;
    box-shadow:inset 3px 0 0 var(--or,#FF3019);
  }
  aside.sb .sbi.on i { color:var(--or,#FF3019); }
  aside.sb .sbi:focus-visible { outline:2px solid var(--or,#FF3019); outline-offset:-2px; }

  /* Rail ferme, la pastille de compteur se replie en point sur l'icone :
     sinon elle part hors cadre avec son margin-left:auto. */
  aside.sb .sbi-badge {
    transition:opacity .14s ease;
    position:absolute; left:31px; top:9px;
    margin:0; padding:0;
    min-width:9px; height:9px; border-radius:50%;
    font-size:0; line-height:0; overflow:hidden;
    border:2px solid #000;
  }
  aside.sb .sbi { position:relative; }
  body.rail-hover aside.sb .sbi-badge,
  body.rail-open aside.sb .sbi-badge,
  body.rail-pin aside.sb .sbi-badge {
    position:static; margin-left:auto;
    min-width:0; height:auto; border:none; border-radius:10px;
    font-size:10px; line-height:normal; padding:2px 6px;
  }

  /* ── pied : la pastille identite mene a Mon compte ── */
  aside.sb .sb-bot { padding:12px 9px; overflow:hidden; }
  aside.sb .sb-user { padding:8px 9px; border-radius:11px; gap:11px; white-space:nowrap; }
  aside.sb .sb-user:hover { background:rgba(var(--or-rgb,255,48,25),.10) !important; }
  aside.sb .sb-user:hover .av { background:var(--or,#FF3019) !important; }
  aside.sb .sb-user > div:not(.av) {
    opacity:0; transition:opacity .16s ease;
  }
  body.rail-hover aside.sb .sb-user > div:not(.av),
  body.rail-open aside.sb .sb-user > div:not(.av),
  body.rail-pin aside.sb .sb-user > div:not(.av) { opacity:1; }
  aside.sb .sb-user .av {
    width:32px !important; height:32px !important; flex:0 0 32px;
    border-radius:9px !important;
    transition:background .15s ease;
  }
  aside.sb .sb-user > i { opacity:0; transition:opacity .16s ease; }
  body.rail-hover aside.sb .sb-user > i,
  body.rail-open aside.sb .sb-user > i,
  body.rail-pin aside.sb .sb-user > i { opacity:1; }

  /* ── poignee ── */
  .rail-grip {
    position:fixed; z-index:70; top:50%; left:76px;
    transform:translate(-50%,-50%);
    width:30px; height:30px; border-radius:50%;
    border:1px solid var(--bd, #23242A); background:var(--el, #141419);
    color:#8B909B; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    padding:0; font-size:15px;
    transition:left .22s cubic-bezier(.4,0,.2,1), color .15s, border-color .15s, background .15s;
  }
  .rail-grip i { transition:transform .22s ease; font-size:15px; }
  .rail-grip:hover { color:var(--or,#FF3019); border-color:rgba(var(--or-rgb,255,48,25),.45); }
  .rail-grip:focus-visible { outline:2px solid var(--or,#FF3019); outline-offset:2px; }
  body.rail-hover .rail-grip,
  body.rail-open .rail-grip,
  body.rail-pin .rail-grip { left:252px; }
  /* La fleche montre ce que fera le clic, jamais autre chose : vers la droite
     quand le rail est replie (ouvrir), vers la gauche des qu'il est deplie
     (refermer). Les trois etats deplies comptent, y compris le survol. */
  body.rail-hover .rail-grip i,
  body.rail-open  .rail-grip i,
  body.rail-pin   .rail-grip i { transform:rotate(180deg); }

  /* Tablette tactile : le survol n'existe pas, la poignee devient l'affordance
     principale et passe en orange plein. idmp_rail.js ne pose jamais rail-hover
     sur un pointeur grossier, donc aucune garde n'est necessaire ici. */
  body.rail-touch.rail-open aside.sb {
    width:252px !important; margin-right:-176px;
    box-shadow:18px 0 44px rgba(0,0,0,.55);
  }
  body.rail-touch .rail-grip {
    width:38px; height:38px;
    background:var(--or,#FF3019); border-color:var(--or,#FF3019); color:#fff;
  }
  body.rail-touch .rail-grip i { font-size:19px; }

  .rail-scrim {
    position:fixed; inset:0; z-index:59;
    background:rgba(0,0,0,.5);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  body.rail-touch.rail-open .rail-scrim { opacity:1; pointer-events:auto; }
}

@media (min-width:769px) and (prefers-reduced-motion:reduce) {
  aside.sb, aside.sb *, .rail-grip, .rail-grip i, .rail-scrim { transition-duration:.01ms !important; }
}

/* ══ 13. TABLETTE PORTRAIT ══════════════════════════════════════════════════
   L'affichage mobile est une colonne unique calibree pour 375px de large. Sur
   une tablette debout il ne se reorganise pas, il s'etire : des tuiles de 490px
   de cote, des boutons de 994px avec une icone perdue a chaque bout, et une
   banniere conseiller qui mange la moitie de l'ecran. D'ou les trous.

   La reponse n'est pas d'agrandir les composants, c'est de les faire se
   REFORMER en colonnes et de rendre les proportions a leur juste place. Ce que
   le telephone empile faute de largeur, la tablette le pose cote a cote.

   Bande visee : 600px et plus en portrait, jusqu'a 1024px. En dessous de 600 on
   est sur un telephone, meme un grand ; au-dela de 1024 en portrait on n'est
   plus sur une tablette du parc.
   ========================================================================== */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {

  /* ── Respiration : 15px de marge laterale sur 1024 de large, c'est un trait.
        La marge suit la largeur, sans jamais devenir un couloir. ── */
  .mob-accueil, .mob-subbody, .mob-menu, #mob-stock-grid {
    padding-left:clamp(22px, 3.2vw, 40px) !important;
    padding-right:clamp(22px, 3.2vw, 40px) !important;
  }

  /* ══ ACCUEIL ══════════════════════════════════════════════════════════════
     La grille remplit exactement l'ecran : quatre rangees dont la banniere
     absorbe le surplus en 1.34fr. Cale sur un telephone c'est juste ; sur
     1366px de haut la banniere atteint 660px, soit la moitie de l'ecran pour
     une phrase et une photo. On redonne la hauteur a ce qui la merite : les
     cartes de catalogue, qui sont la porte d'entree, et les deux blocs de
     preuve, qui portent les chiffres du client. */
  .ih-mobile-home {
    --ih-cath:clamp(240px, 23svh, 320px) !important;
    grid-template-rows:auto var(--ih-cath) minmax(0,.95fr) minmax(0,.72fr) !important;
    gap:clamp(14px, 1.6svh, 22px) !important;
  }
  /* Les tailles de police sont bornees par des clamp en vw, calibres pour un
     telephone : a 1024px elles sont toutes plafonnees et paraissent minuscules
     dans des cartes trois fois plus grandes. On releve les plafonds. */
  .ih-cat-card h3 { font-size:clamp(18px, 2.7vw, 32px) !important; letter-spacing:-.01em !important; }
  .ih-cat-card p  { font-size:clamp(13px, 1.75vw, 18px) !important; line-height:1.4 !important; }
  .ih-advisor h2  { font-size:clamp(24px, 3.5vw, 42px) !important; }
  .ih-advisor li  { font-size:clamp(14px, 1.9vw, 21px) !important; }
  .ih-advisor li i{ font-size:clamp(16px, 2.1vw, 23px) !important; }
  .ih-advisor-btn { min-height:clamp(48px,5svh,60px) !important; font-size:clamp(15px,1.7vw,19px) !important; padding:0 clamp(24px,3vw,34px) !important; }
  /* La colonne de texte occupait 64% : sur une tablette large, la photo
     disparaissait derriere. On rend sa place au sujet. */
  .ih-advisor-copy { width:56% !important; }
  .ih-pricebar-l   { font-size:clamp(14px, 1.6vw, 18px) !important; }

  /* ── La tete du conseiller etait coupee ──
     La photo est posee bottom:-10% et height:116%. Son haut tombe donc a
     -6% et l'overflow:hidden de la carte le rogne. Sur telephone cela ne se
     voit pas : object-fit:contain y est contraint par la LARGEUR, l'image
     rendue reste plus courte que 116%. Sur tablette la carte s'elargit, c'est
     la HAUTEUR qui contraint, l'image occupe vraiment ses 116% et le crane
     passe dans la zone rognee.
     Seuil mathematique : avec bottom:-10%, il faut height <= 110% pour ne
     plus rien rogner. On descend a 94%, ce qui laisse 16% d'air au-dessus. */
  .ih-advisor-person {
    height:94% !important;
    width:44% !important;
    right:-2% !important;
    object-position:right bottom !important;
  }

  /* ── Titre plus haut, bouton plus bas ──
     La colonne est centree verticalement : epaissir les deux marges qui
     encadrent les puces ecarte symetriquement le titre vers le haut et le
     bouton vers le bas. Elles valaient 11px et 13px sous un titre de 42px et
     au-dessus d'un bouton de 60px, d'ou le tassement. */
  .ih-advisor        { padding:clamp(20px, 2.8vw, 34px) !important; }
  .ih-advisor h2     { margin-bottom:clamp(24px, 3.4svh, 46px) !important; }
  .ih-advisor ul     { gap:clamp(8px, 1.1svh, 13px) !important; }
  .ih-advisor-btn    { margin-top:clamp(24px, 3.4svh, 46px) !important; }

  /* ── Blocs Commandes et Alertes ──
     Leurs clamp sont calibres en vw pour un telephone de 375px : ils saturent
     bien avant la tablette, si bien qu'une icone de 40px et un titre de 13px
     se retrouvaient perdus sur un ecran de 1024. Tout est remis a l'echelle
     de l'ecran, dans le meme rapport que le reste de l'accueil. */
  .ih-proof-grid { gap:clamp(14px, 1.8vw, 22px) !important; }
  .ih-proof {
    gap:clamp(16px, 2vw, 24px) !important;
    padding:clamp(18px, 2.2vw, 28px) clamp(18px, 2.4vw, 30px) !important;
    border-radius:clamp(18px, 2vw, 24px) !important;
  }
  .ih-proof-ic {
    width:clamp(56px, 6.4vw, 76px) !important;
    height:clamp(56px, 6.4vw, 76px) !important;
    border-radius:clamp(16px, 1.8vw, 20px) !important;
  }
  .ih-proof-ic i { font-size:clamp(28px, 3.2vw, 38px) !important; }
  .ih-proof b    { font-size:clamp(19px, 2.2vw, 26px) !important; line-height:1.2 !important; }
  /* Le chiffre en gras herite la taille de son parent : ne pas lui en donner
     une, cela le desolidariserait du texte qui l'entoure. */
  .ih-proof-copy > span {
    font-size:clamp(14px, 1.6vw, 18px) !important;
    line-height:1.35 !important;
    margin-top:clamp(4px, .6vw, 7px) !important;
  }

  /* ══ MENU ══════════════════════════════════════════════════════════════════════════
     L'AGENCEMENT DU TELEPHONE EST CONSERVE A L'IDENTIQUE. Seules les tailles
     changent. Ma version precedente passait le menu en grille de deux colonnes
     et alignait les tuiles sur une ligne : plus compact, mais ce n'etait plus
     le meme ecran. On revient a la colonne unique, tuiles en 2 par 2 et groupes
     empiles, et on ne joue que sur les dimensions.

     Le menu est monte a l'execution par idmp_home.js sous .ih-menu ; son style
     est injecte dans <head> APRES cette feuille, d'ou le !important partout. */
  .ih-menu {
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:clamp(16px, 2.2svh, 26px) !important;
    padding-left:clamp(22px, 3.2vw, 40px) !important;
    padding-right:clamp(22px, 3.2vw, 40px) !important;
  }

  /* Deux colonnes, comme sur telephone. */
  .ih-tiles { grid-template-columns:1fr 1fr !important; gap:clamp(14px, 1.8vw, 22px) !important; }
  .ih-tile {
    padding:clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px) !important;
    gap:clamp(14px, 1.8vw, 20px) !important;
    border-radius:20px !important;
    min-height:clamp(150px, 15svh, 210px) !important;
    justify-content:center !important;
  }
  .ih-tile i { font-size:clamp(38px, 4.2vw, 56px) !important; }
  .ih-tile span { font-size:clamp(18px, 2.1vw, 24px) !important; }
  .ih-tile .bdg {
    min-width:28px !important; height:28px !important; font-size:14px !important;
    border-radius:14px !important; top:16px !important; right:16px !important;
  }

  /* Les groupes restent EMPILES : aucune regle de placement sur eux. */
  .ih-grp { border-radius:20px !important; }
  .ih-grp-t {
    font-size:clamp(12px, 1.3vw, 14px) !important;
    padding:clamp(16px, 1.8vw, 20px) clamp(20px, 2.2vw, 26px) 6px !important;
  }
  .ih-link {
    min-height:clamp(64px, 6.2svh, 84px) !important;
    font-size:clamp(17px, 1.9vw, 21px) !important;
    padding:clamp(14px, 1.6vw, 18px) clamp(20px, 2.2vw, 26px) !important;
    gap:16px !important;
  }
  .ih-link > i { font-size:clamp(24px, 2.5vw, 30px) !important; }
  .ih-link .chev { font-size:clamp(20px, 2.1vw, 25px) !important; }
  .ih-grp.legal .ih-link {
    min-height:clamp(56px, 5.4svh, 72px) !important;
    font-size:clamp(15px, 1.6vw, 18px) !important;
    padding:clamp(12px, 1.4vw, 16px) clamp(20px, 2.2vw, 26px) !important;
  }
  .ih-grp.legal .ih-link > i { font-size:clamp(19px, 2vw, 23px) !important; }

  /* ══ MON COMPTE ════════════════════════════════════════════════════════════════════
     MEME PRINCIPE : l'agencement du telephone est conserve a l'identique, seules
     les tailles changent. Ma version precedente couchait la carte identite en
     ligne et etalait les tuiles sur quatre colonnes : un autre ecran, pas le
     meme en plus grand. On revient a la carte empilee et centree, et aux deux
     colonnes de tuiles.

     L'ecran est monte par idmp_account.js sous .ia-wrap. Il n'a aucune largeur
     maximale : c'est une grille posee sur son parent qui l'avait bride a 471px
     lors de la version precedente, pas le composant lui-meme. */
  #mob-sub-compte .mob-subbody { display:block !important; padding-left:0 !important; padding-right:0 !important; }
  .ia-wrap {
    gap:clamp(16px, 2vw, 24px) !important;
    padding-left:clamp(22px, 3.2vw, 40px) !important;
    padding-right:clamp(22px, 3.2vw, 40px) !important;
    justify-content:center;
    min-height:calc(100dvh - var(--mnavh, 90px));
  }

  /* Carte identite : colonne centree, comme sur telephone. */
  #mob-sub-compte .ia-avatar {
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:clamp(18px, 2.2vw, 26px) !important;
    padding:clamp(26px, 3.4vw, 40px) clamp(22px, 2.8vw, 34px) !important;
    border-radius:22px !important;
  }
  #mob-sub-compte .ia-ava {
    width:clamp(130px, 15vw, 168px) !important;
    height:clamp(130px, 15vw, 168px) !important;
    flex:0 0 auto !important;
    font-size:clamp(44px, 5.2vw, 58px) !important;
  }
  #mob-sub-compte .ia-avatar .mob-profile-progress {
    width:100% !important; max-width:min(520px, 100%) !important;
    flex:0 0 auto !important; margin-top:4px !important;
  }
  #mob-sub-compte .ia-avatar .mob-profile-progress-label {
    text-align:center !important; font-size:clamp(15px, 1.6vw, 18px) !important;
  }
  #mob-sub-compte .ia-avatar .mob-profile-progress-track { height:10px !important; }
  #mob-sub-compte .ia-avatar .mob-avatar-btn {
    font-size:clamp(15px, 1.6vw, 17px) !important;
    padding:14px 24px !important; border-radius:14px !important;
  }
  #mob-sub-compte .ia-avatar .mob-avatar-btn i { font-size:20px !important; }

  /* Tuiles secondaires : deux colonnes, comme sur telephone. */
  .ia-mini-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:clamp(14px, 1.8vw, 22px) !important;
  }
  .ia-mini-grid .ia-tile {
    min-height:clamp(190px, 19svh, 250px) !important;
    padding:clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 26px) !important;
  }
  /* La tuile secondaire renvoie son texte a la ligne sous l'icone : on lui rend
     la place que l'icone agrandie lui prend, et une ligne de plus. */
  .ia-mini-grid .ia-tx { flex-basis:calc(100% - 70px) !important; }
  .ia-mini-grid .ia-tx span { -webkit-line-clamp:3 !important; }

  .ia-tile {
    padding:clamp(24px, 2.8vw, 32px) clamp(22px, 2.6vw, 28px) !important;
    gap:clamp(18px, 2vw, 24px) !important;
    border-radius:20px !important;
  }
  .ia-tile > i { font-size:clamp(30px, 3.2vw, 40px) !important; }
  .ia-tx b { font-size:clamp(18px, 2vw, 23px) !important; }
  .ia-tx span { font-size:clamp(14px, 1.5vw, 17px) !important; }
  .ia-pen { width:clamp(46px, 4.6vw, 56px) !important; height:clamp(46px, 4.6vw, 56px) !important; }
  .ia-pen i { font-size:clamp(19px, 2vw, 24px) !important; }
  .ia-out, .ia-del {
    height:clamp(64px, 6.2svh, 82px) !important;
    font-size:clamp(17px, 1.8vw, 20px) !important;
  }
  .ia-out i, .ia-del i { font-size:clamp(20px, 2.1vw, 24px) !important; }
  .ia-recap { padding:clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px) !important; }
  .ia-rc { font-size:clamp(15px, 1.6vw, 18px) !important; }
  .ia-rc i { font-size:clamp(21px, 2.2vw, 25px) !important; }

  /* ══ CATALOGUE ════════════════════════════════════════════════════════════
     Une annonce par ligne sur 994px de large : la fiche s'etirait, sa photo
     aussi, et l'on ne voyait qu'une machine et demie par ecran. Deux colonnes
     ramenent la carte a sa largeur de lecture et doublent ce qu'on embrasse. */
  #mob-stock-grid {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(16px, 2vw, 26px);
    align-items:start;
  }
  #mob-stock-grid > .ih-cardwrap { margin-bottom:0 !important; }
  /* Les puces de tonnage et l'onglet de famille respirent aussi. */
  .cat-tabs .cat-tab { font-size:14.5px !important; height:44px !important; }

  /* ── Bouton "Plus d'infos" ramene vers la gauche ──
     Le pied de carte est en space-between : le prix se colle a gauche, le
     bouton a droite, et tout l'espace gagne sur tablette s'accumule entre les
     deux. On aligne a gauche et on fixe un ecart franc, l'espace libre passe
     alors a droite du bouton.

     TROIS CLASSES, ET C'EST DELIBERE : le style .iv-* est injecte a
     l'execution par idmp_config.js dans <head>, donc APRES cette feuille. Une
     regle a specificite egale perdrait la cascade malgre l'ordre de
     chargement. .ih-cardwrap .iv-card .iv-foot pese 0,3,0 et gagne toujours. */
  .ih-cardwrap .iv-card .iv-foot { justify-content:flex-start !important; gap:clamp(14px, 2vw, 26px) !important; }
  .ih-cardwrap .iv-card .iv-prix { flex:0 1 auto !important; min-width:0 !important; }
  .ih-cardwrap .iv-card .iv-cta  { flex:0 0 auto !important; margin-left:0 !important; }

  /* ══ LISTES : COMMANDES, ALERTES, SAV ═════════════════════════════════════
     Elles empilaient une carte par ligne. Deux colonnes suffisent a supprimer
     le defilement sur la plupart des comptes. */
  /* LISTE DEPLACEE EN SECTION 50 : celle qui vivait ici visait
     #mob-rech-col-succes, un identifiant qui n'existe nulle part dans le
     depot, et ratait #mob-rech-col-cours et #mob-rech-col-traitee, les deux
     colonnes qui portent reellement le contenu. Elle manquait en outre le
     filtre .on, sans lequel le display:grid battait le display:none EN LIGNE
     de idmp_tabs.js et affichait les trois onglets a la fois. */
  /* Une phrase d'attente ne se met pas dans une colonne : elle occupe la
     largeur, centree, sinon elle flotte a gauche d'un vide. */
  .mob-empty, .it-empty, .kol-empty { grid-column:1 / -1 !important; }

  /* ── En-tetes et titres : la meme echelle que le reste. ── */
  .mob-subhd-ttl { font-size:19px !important; }
  .mob-greeting  { font-size:clamp(28px, 3.6vw, 42px) !important; }
  .mob-greeting-sub { font-size:clamp(15px, 1.7vw, 19px) !important; }
  .mob-card-ttl  { font-size:15.5px !important; }
}

/* ══ 31. FILTRES VEHICULE : CURSEURS, ET NON PLUS CHAMPS MIN/MAX ═══════════
   Ceci INVERSE la section 30, qui avait masque les curseurs au profit des
   champs numeriques. Decision du client, reprise telle quelle.

   PORTEE, ET CE QU'IL FAUT SAVOIR AVANT D'Y TOUCHER.
   Les regles de CURSEUR ne portent plus de garde body.cat-pk. En pratique,
   cela ne change RIEN aujourd'hui, et c'est important de le savoir :

   - les CHARGEUSES passent deja par l'ecran #pickup (idmp_home.js:819 :
     '?cat=chargeuses#pickup'), donc par body.cat-pk. Elles avaient deja les
     curseurs ;
   - les MINI-PELLES n'ont AUCUNE feuille de filtres cote client. Les lignes
     881 a 887 de ce fichier masquent #cat-fbtn, #cat-fwrap, #cat-fsheet et
     .sf-row pour body.idmp-client:not(.cat-pk), au profit des puces de
     tonnage. Il n'y a donc aucun champ min/max a y retirer.

   La garde est retiree quand meme : elle encode la preference du client, plus
   de min/max nulle part. Si la feuille revenait un jour sur les mini-pelles,
   elle arriverait deja avec des curseurs.

   Les trois CTA blancs, eux, GARDENT leur garde : ils n'ont ete demandes que
   pour les vehicules.

   Les filtres du STAFF (#asf-fwrap, section 30) ne sont pas touches, et
   #cat-fsheet n'existe que dans idmp_dashboard.html : l'administration a sa
   propre feuille, la saisie chiffree y reste plus precise pour qui manipule
   le stock.

   RESTE VRAI :
   Il n'existe pas de bloc de filtres vehicule. Les lignes 1534 a 1572 de
   idmp_dashboard.html servent A LA FOIS aux mini-pelles et aux vehicules ;
   cliApplyCatType se contente de renommer les plages et de montrer ou cacher
   des selecteurs. Sans garde, ces regles changeraient donc aussi le catalogue
   mini-pelle, qui n'a rien demande. On s'accroche a body.cat-pk, pose par
   cliApplyCatType. Pour etendre aux mini-pelles un jour : retirer body.cat-pk
   des selecteurs ci-dessous, rien d'autre.

   ON MASQUE, ON NE SUPPRIME PAS.
   filterStock() lit sf-poids-min, sf-prix-min et leurs jumeaux par
   getElementById(...).value SANS garde. Retirer ces champs du DOM leve une
   TypeError et le catalogue ne s'affiche plus du tout. Ils restent donc en
   place, simplement invisibles.
   ========================================================================== */
#cat-fsheet .rngf-track { display:block !important; }
#cat-fsheet .rngf-ins   { display:none  !important; }

/* GEOMETRIE : ON N'Y TOUCHE PAS.
   La piste fait 22px, les <input type=range> aussi, et les poignees sont
   centrees sur le rail de 5px par un margin-top:-6px calibre pour 17px de
   diametre. Changer la hauteur de la piste ou la taille des poignees
   decentre tout et fait disparaitre celle de gauche. On ne modifie donc que
   les couleurs et les ombres.

   Le rail : creux et sombre, avec un liseré clair en haut. C'est ce
   contraste qui fait lire le relief, pas une ombre portee. */
#cat-fsheet .rngf-track::before {
  background:linear-gradient(180deg, #050507 0%, #1B1C22 100%) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.07) !important;
}
/* La portion retenue reste orange : c'est le seul accent de l'ecran. */
#cat-fsheet .rngf-fill {
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 62%),
             linear-gradient(90deg, var(--or), #FF6A4A) !important;
  box-shadow:0 1px 4px rgba(var(--or-rgb,255,48,25),.5) !important;
}
/* Les poignees : blanc brillant. Un degre de blanc du haut vers le bas, un
   liseré interne clair, une ombre portee courte. Elles doivent paraitre
   posees SUR le rail, pas dedans. */
#cat-fsheet .rngf-range::-webkit-slider-thumb {
  background:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F4F5F8 48%, #C7CAD2 100%) !important;
  border:2px solid #FFFFFF !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95), 0 2px 5px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.4) !important;
  cursor:grab !important;
}
#cat-fsheet .rngf-range::-webkit-slider-thumb:active { cursor:grabbing !important; }
#cat-fsheet .rngf-range::-moz-range-thumb {
  background:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F4F5F8 48%, #C7CAD2 100%) !important;
  border:2px solid #FFFFFF !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95), 0 2px 5px rgba(0,0,0,.75) !important;
  cursor:grab !important;
}
/* La valeur lue passe en tete de carte : sans les champs, c'est elle qui dit
   ou l'on en est. */
#cat-fsheet .rngf-val { font-weight:800 !important; font-variant-numeric:tabular-nums; }

/* ══ 32. FILTRES CATALOGUE : LES TROIS CTA BLANCS ET LA REINITIALISATION ═══
   Marque, Modele et Trier par passent en fond blanc, ecriture noire : ce sont
   les trois entrees que le client ouvre le plus souvent, elles doivent se
   voir d'un coup d'oeil sur un ecran noir. Les autres selecteurs gardent leur
   pastille sombre, sinon plus rien ne ressort.
   ========================================================================== */
body.cat-pk #cat-fsheet #sf-marque-sel,
body.cat-pk #cat-fsheet #sf-modele-sel,
body.cat-pk #cat-fsheet #sf-tri {
  background:#FFFFFF !important;
  background-image:none !important;
  color:#0B0B0D !important;
  border:1px solid #FFFFFF !important;
  font-weight:700 !important;
}
body.cat-pk #cat-fsheet #sf-marque-sel:hover,
body.cat-pk #cat-fsheet #sf-modele-sel:hover,
body.cat-pk #cat-fsheet #sf-tri:hover { background:#ECEDF1 !important; border-color:#ECEDF1 !important; }
body.cat-pk #cat-fsheet #sf-marque-sel option,
body.cat-pk #cat-fsheet #sf-modele-sel option,
body.cat-pk #cat-fsheet #sf-tri option { background:#FFFFFF; color:#0B0B0D; }

/* La reinitialisation. Elle portait #ED1C24, un rouge qui n'appartient a
   aucune charte du projet. Elle passe a l'orange de marque. Le style est
   desormais ici et non plus en ligne, pour pouvoir varier selon l'ecran. */
.sf-reset {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--or, var(--or,#FF3019)); color:#fff; border:none; border-radius:8px;
  padding:0 14px; height:32px; font-size:12px; font-weight:700;
  font-family:'DM Sans', sans-serif; cursor:pointer; white-space:nowrap;
  transition:background .15s;
}
.sf-reset:hover { background:var(--orh, #DD2714); }
.sf-reset i { font-size:12px; }
.sf-reset .sf-reset-s { display:none; }

/* Ordinateur et tablette paysage : tout tient sur UNE rangee, comme demande.
   nowrap plus min-width:0 : les selecteurs se compriment au lieu de passer a
   la ligne, et la reinitialisation reste avec eux. */
/* Les trois selecteurs sont recopies de la ligne 1152, qui impose
   flex-wrap:wrap !important avec une specificite de (2,3,1). Une regle plus
   courte, meme en !important, perdait sans bruit : le bouton passait a la
   ligne des que les libelles s'allongeaient. A specificite egale, c'est la
   derniere ecrite qui gagne, et celle-ci ferme le fichier. */
@media (min-width:769px) {
  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 {
    flex-wrap:nowrap !important;
    align-items:center !important;
  }
  body.cat-pk #cat-fsheet .sf-row > select { min-width:0 !important; flex:1 1 auto !important; }
  body.cat-pk #cat-fsheet .sf-row > .sf-reset { flex:0 0 auto !important; margin-left:auto !important; }
}

/* Telephone et tablette portrait : le libelle court, et la derniere rangee
   porte Trier par a gauche et Reinitialiser a droite. */
@media (max-width:768px) {
  .sf-reset .sf-reset-l { display:none; }
  .sf-reset .sf-reset-s { display:inline; }
  /* Meme raison qu'au dessus : la ligne 1152 impose display:flex !important
     avec une specificite superieure. On la reprend a l'identique. */
  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:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  body.cat-pk #cat-fsheet .sf-row > select { width:100% !important; min-width:0 !important; }
  body.cat-pk #cat-fsheet .sf-row > #sf-tri   { grid-column:1 !important; }
  body.cat-pk #cat-fsheet .sf-row > .sf-reset { grid-column:2 !important; height:38px !important; }
}

/* ── Deux correctifs de cascade, mesures au rendu ──
   1. Une regle de la feuille de filtres etire tous ses champs a 44px de haut.
      Elle attrapait aussi les <input type=range>, qui doivent rester a 22 :
      au dela, les poignees, centrees par un margin-top:-6px, sortent du rail
      et celle de gauche devient inatteignable.
   2. Une regle voisine reaffiche les <span> du bouton, si bien que les deux
      libelles de la reinitialisation s'affichaient bout a bout. */
#cat-fsheet .rngf .rngf-range {
  height:22px !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
}
#cat-fsheet .rngf .rngf-track { height:22px !important; }

#cat-fsheet .sf-row > .sf-reset .sf-reset-s { display:none !important; }
#cat-fsheet .sf-row > .sf-reset .sf-reset-l { display:inline !important; }
@media (max-width:768px) {
  #cat-fsheet .sf-row > .sf-reset .sf-reset-l { display:none !important; }
  #cat-fsheet .sf-row > .sf-reset .sf-reset-s { display:inline !important; }
}

/* Le texte de la reinitialisation heritait de la couleur orange des pastilles
   voisines : orange sur orange, le bouton paraissait vide. */
#cat-fsheet .sf-row > .sf-reset,
#cat-fsheet .sf-row > .sf-reset span,
#cat-fsheet .sf-row > .sf-reset i {
  color:#FFFFFF !important;
  font-size:12px !important;
}

/* ══ 33. FEUILLE DE FILTRES TELEPHONE : LE TRI, ET LE BOUTON DE VALIDATION ══
   Deux corrections demandees apres essai sur telephone.

   1. LE TRI REVIENT.
   Les lignes 981 a 986 masquent #sf-etat ET #sf-tri sur la feuille du
   catalogue vehicule en telephone. On ne rouvre QUE le tri : l'etat
   Neuf/Occasion n'a pas ete demande, et un vehicule d'occasion ou neuf se
   distingue deja au prix et au kilometrage.
   Specificite : la regle qui masque vaut (1,2,0) en !important. Celle-ci la
   vaut aussi et vient plus tard dans le fichier, elle gagne donc.

   2. VOIR LES RESULTATS PASSE A L'ORANGE.
   Le bouton est orange par defaut (idmp_dashboard.html ligne 202) mais la
   ligne 990 le repeint en #2E4057, l'acier secondaire, des que le catalogue
   vehicule est actif. C'est le seul bouton de conclusion de la feuille : il
   doit porter la couleur d'action.
   ========================================================================== */
@media (max-width:768px) {
  body.cat-pk #cat-fsheet #sf-tri,
  #sec-stock.pickup-active #cat-fsheet #sf-tri {
    display:block !important;
    grid-column:1 !important;
    width:100% !important;
    min-width:0 !important;
  }
  body.cat-pk #cat-fsheet .sf-row > .sf-reset,
  #sec-stock.pickup-active #cat-fsheet .sf-row > .sf-reset {
    grid-column:2 !important;
  }
}

body.cat-pk .cat-fsheet-apply,
body.cat-pk #cat-fsheet .cat-fsheet-apply {
  background:var(--or, var(--or,#FF3019)) !important;
  color:#fff !important;
}
body.cat-pk .cat-fsheet-apply:hover,
body.cat-pk #cat-fsheet .cat-fsheet-apply:hover {
  background:var(--orh, #DD2714) !important;
}


/* ══ 34. LE BOUTON RETOUR : LA FLECHE DEVIENT UN CTA ═══════════════════════
   Avant : une fleche nue suivie du libelle. Apres : la fleche est enfermee
   dans un carre arrondi, fond sombre et fin liseré, le libelle reste a cote.

   ON N'OUVRE AUCUN BALISAGE. C'est le <i> deja present qui devient le carre.
   Trois raisons : la correspondance du traducteur reste exacte, l'equilibre
   des div ne bouge pas, et vingt boutons repartis dans neuf familles se
   traitent sans toucher a vingt lignes de HTML.

   CETTE FEUILLE NE COUVRE PAS TOUT. idmp_alerte_detail, idmp_sav_detail et
   idmp_devis ne la chargent pas, et la coque client de idmp_order_detail
   comme la feuille du configurateur se posent APRES elle. Ces quatre cas
   portent la meme regle chez eux. Modifier le dessin ici seul ne suffit pas.
   ========================================================================== */
.offer-back > i,
.back-btn > i,
.mob-back-bar > i,
.aback-row > i { flex:0 0 auto;box-sizing:border-box;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:21px;line-height:1;border:1px solid #2B2E36;border-radius:12px;background:#14161B;color:#fff;-webkit-tap-highlight-color:transparent;transition:background .14s,border-color .14s,color .14s,transform .08s; }
.offer-back:hover > i,
.back-btn:hover > i,
.mob-back-bar:hover > i,
.aback-row:hover > i { background:#1D2027; border-color:var(--or,#FF3019); color:var(--or,#FF3019); }
.offer-back:active > i,
.back-btn:active > i,
.mob-back-bar:active > i,
.aback-row:active > i { transform:scale(.94); }

/* ══ 35. CURSEURS AU DOIGT : AGRANDIR LA PRISE, PAS LE DISQUE ══════════════
   Sur telephone la poignee ne fait que 17px de cote, et c'est aussi toute sa
   zone sensible : .rngf-range porte pointer-events:none, seul le thumb porte
   pointer-events:auto. On vise donc une cible de 17px la ou la
   recommandation tactile est de 44.

   LA METHODE. On agrandit la BOITE du thumb a 40px et on redessine le disque
   a l'interieur avec un degre radial qui devient transparent au dela de 9,5px
   de rayon. Le doigt dispose de 40px, l'oeil voit toujours un rond de 19.
   L'ombre passe par filter:drop-shadow, qui epouse la forme reellement
   peinte, la ou box-shadow dessinerait le carre de 40px.

   LE PIEGE, DEJA RENCONTRE. margin-top du thumb WebKit vaut
   (hauteur du rail - hauteur du thumb) / 2, le rail faisant 5px. A 17px de
   thumb cela donne -6px, valeur ecrite dans idmp_dashboard.html. En passant
   a 40 il faut -17.5, sans quoi la poignee sort du rail et celle de gauche
   devient inatteignable. La piste et l'input suivent a 40px ; le rail et le
   remplissage restent centres, ils sont en top:50% translateY(-50%).

   Ordinateur inchange : a la souris, 17px se visent tres bien.
   ========================================================================== */
@media (max-width:768px), (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  #cat-fsheet .rngf .rngf-track,
  #cat-fsheet .rngf .rngf-range { height:40px !important; }

  /* LE RAIL SUIT LA PISTE. Il etait pose a top:12px, une valeur en PIXELS
     calibree pour la piste de 22px d'origine (22/2 = 11, arrondi a 12). En
     portant la piste a 40, les poignees ont suivi le nouveau centre a 20px
     mais le rail est reste a 12 : huit pixels d'ecart, le trait passait
     au-dessus des ronds. On repasse en pourcentage, qui suit toute hauteur. */
  #cat-fsheet .rngf .rngf-track::before,
  #cat-fsheet .rngf .rngf-fill { top:50% !important; }

  #cat-fsheet .rngf .rngf-range::-webkit-slider-thumb {
    /* LARGEUR = DIAMETRE DU DISQUE, c'est la cle du debordement.
       Le centre d'une poignee ne va jamais au dela d'une DEMI-LARGEUR de
       boite : a 40 de large pour un disque de 19, il restait 10,5px de rail
       a nu de chaque cote. A 26 pour un disque de 26, le disque touche
       exactement le bord et la barre ne depasse plus.
       La HAUTEUR, elle, reste a 40 : elle ne joue aucun role dans le
       debordement horizontal et c'est elle qui porte la prise au doigt. */
    width:26px !important;
    height:40px !important;
    margin-top:-17.5px !important;
    border:0 !important;
    border-radius:0 !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0 4.5px, rgba(255,255,255,0) 8.5px),
      radial-gradient(circle at 50% 50%, #FDFDFE 0 9.5px, #E6E8ED 9.5px 11.6px, #BFC3CC 11.6px 13px,
                      rgba(0,0,0,0) 13px) !important;
    box-shadow:none !important;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.75));
  }
  #cat-fsheet .rngf .rngf-range::-moz-range-thumb {
    width:26px !important;
    height:40px !important;
    border:0 !important;
    border-radius:0 !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0 4.5px, rgba(255,255,255,0) 8.5px),
      radial-gradient(circle at 50% 50%, #FDFDFE 0 9.5px, #E6E8ED 9.5px 11.6px, #BFC3CC 11.6px 13px,
                      rgba(0,0,0,0) 13px) !important;
    box-shadow:none !important;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.75));
  }
}

/* .mob-back etait DEJA un carre arrondi : 38px, rayon 11, tokens de theme.
   Il n'a jamais ete dans l'etat "fleche nue" que le client voulait changer.
   On l'aligne seulement sur le meme gabarit que les autres, 40 et 12, pour
   que les quatre sous-ecrans mobiles et les pages plein ecran se repondent.
   Ses couleurs restent en jetons : elles suivent deja le theme. */
.mob-back {
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
}
.mob-back i { font-size:19px !important; }


/* ══ 36. GARDE-FOU : LA SECTION 25 EST UN ECRAN CLIENT ═════════════════════
   La section 25 et son complement min-width:1360px ecrivent #sec-compte.on
   SANS prefixe. Or idmp_admin.html porte le meme identifiant (ligne 1789) et
   idmp_config.js refuse explicitement la classe idmp-client a /admin : le
   Mon compte du back-office recevait donc la grille six colonnes du client
   et ses trois cartes s'ecrasaient dans un sixieme de la largeur.
   La specificite (1,2,1) bat la regle d'origine (1,1,0) : l'ordre de
   chargement ne suffit pas, les deux camps sont en !important.             */
@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {
  body:not(.idmp-client) #sec-compte.on {
    display:block !important;
    height:auto !important;
    overflow:visible !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
  }
  body:not(.idmp-client) #sec-compte.on > .sec-hd {
    display:block !important;
    margin:0 0 18px !important;
    align-self:auto !important;
  }
  body:not(.idmp-client) #sec-compte.on > .sec-hd > div { display:block !important; }
  body:not(.idmp-client) #sec-compte.on .sec-sub { margin-top:2px !important; }
  /* Les regles de champ de la section 25 visaient des cartes de demi largeur :
     elles retrecissaient les champs du back-office sans raison. */
  body:not(.idmp-client) #sec-compte.on input,
  body:not(.idmp-client) #sec-compte.on select {
    height:38px !important;
    font-size:13px !important;
  }
  body:not(.idmp-client) #sec-compte.on label {
    font-size:12px !important;
    margin-bottom:5px !important;
  }
  body:not(.idmp-client) #sec-compte.on .fg-c { margin-bottom:13px !important; }
  body:not(.idmp-client) #sec-compte.on .btnsm { height:28px !important; font-size:11.5px !important; }
}

/* ══ 37. ADMINISTRATION EN TABLETTE COUCHEE (769 a 1366) ═══════════════════
   idmp_admin.html ne contient AUCUNE media query en min-width : toute
   tablette couchee y recevait le style d'ordinateur, calibre pour 1440. La
   section 8 s'arrete a 1024 et les sections 24, 25, 28 sont prefixees
   body.idmp-client. Le prefixe body:not(.idmp-client) tient le perimetre :
   /admin est la seule page a laquelle idmp_config.js refuse la classe.     */
@media (min-width:769px) and (max-width:1366px) and (orientation:landscape) {

  /* Cartes de statistiques : 5 colonnes sur 908px utiles donnaient 172px par
     carte. Le tableau de bord client replie a 3 colonnes, on s'aligne. */
  body:not(.idmp-client) .sgrid {
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:clamp(10px, 1.1vw, 14px) !important;
  }
  body:not(.idmp-client) .scard { padding:12px 14px !important; }
  body:not(.idmp-client) .scard-val { font-size:19px !important; }
  body:not(.idmp-client) .scard-lbl { letter-spacing:.2px !important; }

  /* Deux panneaux cote a cote sur 1078px : chacun tombait sous 530px. */
  body:not(.idmp-client) #ov-bottom { grid-template-columns:1fr !important; }

  /* Kanban : 8 colonnes de 230px font 1917px. Colonne resserree, hauteur
     calee sur dvh, 100vh comptant la barre d'URL retractable. */
  body:not(.idmp-client) .kb {
    height:calc(100dvh - 150px) !important;
    min-height:0 !important;
  }
  body:not(.idmp-client) .kol { flex:0 0 206px !important; }
  body:not(.idmp-client) .kol-ttl { font-size:11.5px !important; }
  body:not(.idmp-client) .kcard { padding:10px !important; }

  /* Generateur de documents : 430px de formulaire fixe plus un A4 de 794px
     ne tiennent pas sur 1078px. Le formulaire passe au-dessus. */
  body:not(.idmp-client) .dg-wrap { flex-wrap:wrap !important; }
  body:not(.idmp-client) .dg-form { width:100% !important; flex:1 1 100% !important; }
  body:not(.idmp-client) .dg-prevwrap {
    flex:1 1 100% !important;
    max-height:calc(100dvh - 230px) !important;
  }
}

/* ══ 38. TABLEAUX DE L'ADMINISTRATION : DEFILER PLUTOT QUE ROGNER ══════════
   .tbl porte overflow:hidden et sa table est en table-layout:fixed
   width:100% : ce qui ne rentre pas n'est pas coupe visiblement, il est mis
   a l'echelle puis tronque par text-overflow:ellipsis. La perte est
   silencieuse. Le min-width:600px du bloc telephone est un leurre : plus
   petit que toutes les tablettes du parc, il ne demarre jamais le
   defilement. On pose la vraie somme des colonnes, tableau par tableau.    */
@media (min-width:600px) and (max-width:1366px) {
  body:not(.idmp-client) .tbl {
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  body:not(.idmp-client) .tbl::-webkit-scrollbar { height:6px; }
  body:not(.idmp-client) .tbl::-webkit-scrollbar-thumb { background:#23242A; border-radius:10px; }

  /* Somme reelle des largeurs declarees dans chaque thead, plus 20px de
     marge pour le padding horizontal des cellules. */
  body:not(.idmp-client) #sec-prospects .tbl table { min-width:1272px !important; }
  body:not(.idmp-client) #sec-clients   .tbl table { min-width:931px  !important; }
  body:not(.idmp-client) #sec-params    .tbl table { min-width:960px  !important; }

  /* Repli generique pour tout tableau non nomme ci-dessus. */
  body:not(.idmp-client) .tbl table { min-width:900px; }
}

/* ══ 39. ADMINISTRATION EN TABLETTE DEBOUT (600 a 1024) ════════════════════
   La coque telephone de idmp_admin.html s'applique telle quelle jusqu'a
   1024px de large en portrait. Meme principe que la section 13 cote client :
   on ne reorganise pas l'ecran, on lui rend ses proportions.               */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {

  /* La pilule de navigation : bornee et centree. Sa HAUTEUR n'est pas
     touchee, la variable --mnavh sert de retrait au contenu ; la changer
     ici decalerait tout l'ecran. */
  body:not(.idmp-client) #mob-anav {
    left:50% !important; right:auto !important;
    transform:translateX(-50%);
    width:min(620px, calc(100% - 24px)) !important;
  }
  body:not(.idmp-client) #mob-anav .mob-tab svg { width:29px !important; height:29px !important; }
  body:not(.idmp-client) #mob-anav .mnav-av { width:31px !important; height:31px !important; }

  /* Respiration laterale, meme clamp que la section 13. */
  body:not(.idmp-client) .content,
  body:not(.idmp-client) #mob-amenu {
    padding-left:clamp(20px, 3vw, 40px) !important;
    padding-right:clamp(20px, 3vw, 40px) !important;
  }
  body:not(.idmp-client) #mob-aback { padding-left:clamp(20px, 3vw, 40px); padding-right:clamp(20px, 3vw, 40px); }

  /* Menu : trois colonnes au lieu de deux tuiles de 490px. */
  body:not(.idmp-client) .a-menu-grid {
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:clamp(14px, 1.8vw, 22px) !important;
  }
  body:not(.idmp-client) .a-tile {
    padding:clamp(22px, 2.6vw, 32px) 14px !important;
    gap:clamp(12px, 1.5vw, 16px) !important;
    border-radius:18px !important;
  }
  body:not(.idmp-client) .a-tile-ic {
    width:clamp(56px, 6vw, 68px) !important;
    height:clamp(56px, 6vw, 68px) !important;
    font-size:clamp(26px, 2.8vw, 31px) !important;
  }
  body:not(.idmp-client) .a-tile span { font-size:clamp(14px, 1.6vw, 17px) !important; }
  body:not(.idmp-client) .a-logout {
    max-width:520px; margin-left:auto; margin-right:auto;
  }

  /* Vue globale. */
  body:not(.idmp-client) .sgrid { grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  body:not(.idmp-client) #ov-bottom { grid-template-columns:1fr 1fr !important; }

  /* Feuilles de filtres du catalogue : bornees a 540px pour un telephone,
     elles peuvent respirer et rester centrees. */
  body:not(.idmp-client) #asf-block,
  body:not(.idmp-client) .asf-pop-box,
  body:not(.idmp-client) .asf-sheet { max-width:660px !important; }
  body:not(.idmp-client) .mob-fchips { grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}

/* ══ 40. KANBAN EN ONGLETS SUR TABLETTE DEBOUT ═════════════════════════════
   Le compagnon CSS du correctif de idmp_kbtabs.js : la barre revenue, elle
   etait calibree pour 375px de large. Et la colonne active passe en deux
   colonnes de cartes cote back-office, une bande unique de 834px se lisant
   mal.                                                                     */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  .kbt { gap:10px !important; padding:2px 0 12px !important; }
  .kbt-b {
    height:clamp(34px, 3.6svh, 44px) !important;
    padding:0 clamp(12px, 1.6vw, 20px) !important;
    font-size:clamp(12.5px, 1.4vw, 15px) !important;
    border-radius:12px !important;
  }
  .kbt-b .kbt-n {
    min-width:clamp(19px, 2vw, 24px) !important;
    height:clamp(19px, 2vw, 24px) !important;
    font-size:clamp(11px, 1.2vw, 13px) !important;
  }
  body:not(.idmp-client) .kb.kbt-on > .kol.kbt-show {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:clamp(12px, 1.6vw, 18px) !important;
    align-items:start !important;
  }
  body:not(.idmp-client) .kb.kbt-on > .kol.kbt-show > .kol-empty { grid-column:1 / -1 !important; }
}

/* ══ 41. LA GRILLE .g2 DES MODALES DEVIENT FLUIDE ══════════════════════════
   .g2 vaut 1fr 1fr en dur : juste dans une modale de 740px sur ordinateur,
   mais dans la meme modale bornee a la largeur d'une tablette les deux
   colonnes tombaient sous 340px. Les .grid-3/.g3/.grid-4/.g4 de la section 8
   sont, eux, du code mort verifie : aucune de ces classes n'est posee sur un
   element. Seule .g2 vit, 17 fois dans les modales de l'administration.    */
@media (min-width:769px) and (max-width:1366px) and (orientation:landscape) {
  .mo-box .g2 {
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap:clamp(9px, 1vw, 13px) !important;
  }
}
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  .mo-box .g2 {
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap:clamp(9px, 1.1vw, 14px) !important;
  }
}

/* ══ 42. TABLETTE DEBOUT : LES MODALES QUE LA SECTION 13 N'A PAS TRAITEES ══
   La section 13 ne contient aucun selecteur de modale : les parcours modaux
   du tableau de bord restaient en plein ecran telephone jusqu'a 1024px. On
   leur rend leur geometrie de bureau, bornee.

   L'audit visait aussi #mo-cmd et #mo-product : ces deux popups N'EXISTENT
   PLUS (la commande passe par /devis depuis le 7 aout, la consultation
   produit par /ad_detail). Leurs regles ne sont pas reprises, et .gal-main,
   qui n'a plus de popup a habiller, n'est pas touche non plus.

   CASCADE DU PANNEAU DE PARAMETRES : idmp_settings.js injecte sa feuille
   dans head A L'EXECUTION, donc APRES celle-ci. A specificite egale il
   gagnerait malgre l'ordre du fichier. Le prefixe body .idmp-set-ov porte la
   specificite a (0,3,1) contre (0,1,0) : elle gagne toujours. Meme piege que
   celui documente pour .ih-menu et .iv-foot.                               */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {

  /* ── Lancer une alerte ── */
  #mo-rech { align-items:center !important; padding:28px !important; }
  #mo-rech .mo-box.alert-flow {
    width:min(700px, calc(100vw - 56px)) !important;
    max-width:none !important;
    max-height:min(880px, calc(100dvh - 56px)) !important;
    border-radius:20px !important;
  }
  #mo-rech .alert-flow-head { padding:24px 28px 16px !important; }
  #mo-rech .alert-step {
    padding:24px 28px 22px !important;
    max-height:calc(min(880px, 100dvh - 56px) - 100px) !important;
  }
  #mo-rech .alert-criteria-grid { grid-template-columns:1fr 1fr !important; }
  #mo-rech .alert-choice-grid { gap:14px !important; }
  #mo-rech .alert-choice { min-height:140px !important; padding:20px !important; }
  #mo-rech .alert-contact-grid { gap:14px !important; }
  /* La barre d'actions collante et ses marges negatives n'avaient de sens
     que dans une feuille du bas pleine largeur. */
  #mo-rech .mo-box.alert-flow .alert-actions {
    position:static !important;
    background:transparent !important;
    margin-left:0 !important; margin-right:0 !important;
    padding:18px 0 0 !important;
  }

  /* ── Parametres ── */
  body .idmp-set-ov .idmp-set-panel {
    top:50% !important; left:50% !important;
    transform:translate(-50%,-50%) scale(.985) !important;
    width:min(640px, calc(100vw - 72px)) !important;
    max-width:none !important;
    height:auto !important;
    max-height:min(86dvh, 900px) !important;
    border-radius:20px !important;
    border:1px solid #23242A !important;
  }
  body .idmp-set-ov.show .idmp-set-panel {
    transform:translate(-50%,-50%) scale(1) !important;
  }
  body .idmp-set-ov .idmp-set-hd { padding-top:16px !important; }
  body .idmp-set-ov .is-langs { grid-template-columns:repeat(3, 1fr) !important; }
}

/* ══ 43. TABLETTE DEBOUT : L'INTERIEUR DES CARTES ET LE FORMULAIRE ═════════
   La section 13 a mis les listes a deux colonnes mais n'a pas remis a
   l'echelle le contenu des cartes, reste calibre pour 375px : des references
   en 10,5px dans des cellules de 470. Meme raisonnement que le commentaire
   de la section 13 sur l'accueil.                                          */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  body.idmp-client .mob-subbody .kcard,
  body.idmp-client .mob-subbody .rech-card,
  body.idmp-client .mob-subbody .sav-card { padding:clamp(14px, 1.7vw, 20px) !important; }
  body.idmp-client .mob-subbody .kcard-ref,
  body.idmp-client .mob-subbody .kcard-dt { font-size:clamp(11px, 1.2vw, 13px) !important; }
  body.idmp-client .mob-subbody .kcard-nm { font-size:clamp(14px, 1.6vw, 18px) !important; }
  body.idmp-client .mob-subbody .kcard-brand { font-size:clamp(12.5px, 1.35vw, 15px) !important; }
  body.idmp-client .mob-subbody .kcard-pr { font-size:clamp(15px, 1.7vw, 19px) !important; }
  body.idmp-client .mob-subbody .kcard-st { font-size:clamp(12px, 1.3vw, 14px) !important; }
  body.idmp-client .mob-subbody .kcard-tag { font-size:clamp(11.5px, 1.25vw, 13.5px) !important; padding:4px 11px !important; }

  /* Lancer une commande : un formulaire ne se lit pas sur 984px de large. */
  #mob-sub-lancer .mob-subbody {
    max-width:720px;
    margin-left:auto; margin-right:auto;
  }
  #mob-sub-lancer .mob-card { padding:clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) !important; border-radius:20px !important; }
  #mob-sub-lancer .mob-fg label { font-size:clamp(13px, 1.4vw, 15px) !important; }
  #mob-sub-lancer .mob-fg input,
  #mob-sub-lancer .mob-fg textarea { font-size:clamp(14px, 1.5vw, 16px) !important; }
  #mob-sub-lancer .mob-lancer { height:clamp(56px, 5.6svh, 66px) !important; font-size:clamp(15px, 1.7vw, 18px) !important; }
}

/* ══ 44. TABLETTE DEBOUT : LA PILULE DE NAVIGATION ═════════════════════════
   .mob-topnav est posee left:12px right:12px : sur 1024px de large, cinq
   icones de 25px flottaient avec 175px de vide entre elles. Bornee, centree.

   LA HAUTEUR N'EST PAS TOUCHEE, DELIBEREMENT : --mnavh vaut 66px plus la
   zone sure et sert de retrait haut a l'accueil, au compte et a la barre de
   retour. La changer ici decalerait tous les ecrans sans que rien ne le
   rattrape.                                                                */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  body.idmp-client .mob-topnav {
    left:50% !important; right:auto !important;
    transform:translateX(-50%);
    width:min(620px, calc(100% - 24px)) !important;
  }
  body.idmp-client .mob-topnav .mob-tab svg { width:29px !important; height:29px !important; }
  body.idmp-client .mob-topnav .mob-tab .mnav-av { width:31px !important; height:31px !important; }
  body.idmp-client .mob-topnav .mob-tab::before { width:64px !important; height:46px !important; border-radius:23px !important; }
}


/* ══ 45. TABLETTE DEBOUT : MON COMPTE CESSE DE DEBORDER PAR CONSTRUCTION ══
   DEUX causes, pas une, et corriger la premiere seule laissait 21px hors
   champ a 768x1024 (mesure).
   1. Le plancher : #mob-sub-compte .ia-wrap porte
      min-height:calc(100dvh - var(--mnavh,90px)), soit VH moins 66, alors
      que .ia-wrap vit dans une boite ayant deja perdu 80px en haut et 15 en
      bas. Le compte ne peut pas tomber juste.
   2. Le retrait de pilule est compte DEUX FOIS : la page le pose sur
      .mob-subbody (80px) et idmp_account.js le repose sur .ia-wrap (74px).
      La premiere carte commencait a y=154 pour une pilule finissant a 66.
   Comme .mob-subbody porte overflow:hidden !important, ce debordement etait
   ROGNE sans recours : le bouton Deconnexion perdait 52px sur 64 a 768x1024
   et elementFromPoint en son centre rendait null.
   On rend le retrait de pilule et le retrait bas a UN SEUL porteur, .ia-wrap,
   qui les tenait deja ; .mob-subbody redevient une boite pleine hauteur ou
   100% se mesure exactement.
   Mesure apres : debordement 0 aux trois tailles, Deconnexion entierement
   cliquable, premier bloc a y=80 sous une pilule finissant a 66. Inerte sur
   telephone, en tablette couchee et au bureau.                            */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  #mob-sub-compte .mob-subbody {
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  #mob-sub-compte .ia-wrap {
    min-height:100% !important;
  }
}

/* ══ 46. TABLETTE COUCHEE : L'ACCUEIL NE DEFILE PLUS ═══════════════════════
   idmp_home.js pose deux paliers de LARGEUR NUE, sans garde d'orientation :
   @media(max-width:1100px) sur .ih-kpis et @media(max-width:1000px) sur
   .ih-cols. Une tablette couchee de 1024, qui releve du bureau selon la
   grammaire, y tombait : la bande de compteurs passait a deux colonnes et
   prenait 186,8px au lieu de 86,9, soit 99,9px de trop. Chaque carte faisait
   alors 422,5px pour 112,4px d'encre, 65,3 pour cent de vide.
   Consequence mesuree a 1024x768 : .content debordait de 19px sans dossier,
   34px avec trois, 170px avec cinq.

   AUCUNE HAUTEUR N'EST VERROUILLEE ICI, ET C'EST DELIBERE. La premiere
   version du correctif ajoutait height:100%, max-height:100% et align-self :
   elle ramenait bien le debordement a zero sur les tailles visees, mais sur
   un paysage COURT elle supprimait le defilement sans supprimer le contenu.
   Mesure a 1366x660, la dalle la plus repandue : le panneau Acces rapides
   plafonnait a 219,3px pour 254,5px de contenu, les tuiles FAQ et Mon compte
   etaient coupees de 22,2px chacune, et rien ne permettait d'y acceder. A
   932x430 : 253px rognes, la liste entierement invisible. Un paysage court
   doit defiler, jamais rogner.
   Le plafond de la liste remplace le verrou : il rend le debordement nul sans
   jamais pouvoir couper quoi que ce soit.

   Mesure apres : 0 / 0 / 0 aux trois etats de donnees a 1024x768, 1194x834 et
   1366x1024 ; compteurs a quatre colonnes de 204,7x86,9 ; la liste defile
   dans son panneau. Paysages courts : degradation propre, 0px rogne.      */
@media (min-width:769px) and (max-width:1366px) and (orientation:landscape) {
  body.idmp-client .ih-kpis { grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  body.idmp-client .ih-cols { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) !important; }
  /* Un plafond, pas une hauteur imposee : le panneau reste libre d'etre plus court. */
  body.idmp-client #sec-accueil #ih-orders { max-height:clamp(160px, 36svh, 300px); overflow-y:auto; }
}

/* ══ 47. TABLETTE DEBOUT : LES BLOCS DE PREUVE COMPTENT LEUR CONTENU ═══════
   La section 13 donnait .72fr a la quatrieme rangee de .ih-mobile-home pour
   "rendre de la hauteur" aux blocs Commandes et Alertes. La piste passait
   bien a 315,7px a 1024x1366, mais le contenu plafonnait a 65,5px : l'icone
   sature son clamp et les deux lignes les leurs. .ih-proof etant un flex
   centre, les 250px restants devenaient du noir : 64,4 pour cent de vide.
   UNE GRILLE A RANGEES FIGEES COMPTE SES PISTES, PAS SON CONTENU : agrandir
   la piste n'agrandissait que le vide. Meme lecon que la rangee morte de
   ad_detail, consignee dans CLAUDE.md.

   On rend les deux dernieres rangees a leur contenu et on verse le surplus a
   la bande de catalogue, la seule dont le contenu, une photo en cover,
   grandit reellement avec sa piste. Son plancher var(--ih-cath) est conserve :
   sans lui le bloc conseiller l'affame (mesure a 116px de haut a 600x800).

   minmax(0,auto) et non auto sec : le maximum auto cale sur le contenu quand
   il y a la place, le minimum 0 laisse le droit de se comprimer sur un
   portrait court. Aux tailles du parc les deux ecritures donnent la meme
   chose ; sur un portrait de 700px de haut, celle-ci deborde de 4,5px la ou
   auto sec deborde de 15px.

   Mesure : carte 352,4x94 / 382,8x94,7 / 470x112,6 aux trois tailles, vide
   vertical 0 pour cent, bande de catalogue de 240 a 335,5 / 255,8 a 390,5 /
   314,2 a 539,1px, et le defilement reste nul.                            */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  body.idmp-client .ih-mobile-home {
    grid-template-rows:auto minmax(var(--ih-cath), 1fr) minmax(0, auto) minmax(0, auto) !important;
  }
}

/* ══ 48. TABLETTE COUCHEE : DEUX COLONNES DE CATALOGUE, PAS TROIS ══════════
   La section 28 impose repeat(auto-fill, minmax(clamp(260px,24vw,360px),1fr)) :
   a 1024 de large, 24vw vaut 245,8 donc le clamp remonte a 260, et 858px de
   contenu produisent TROIS pistes. Or le bloc qui habille la carte dans cette
   bande porte en commentaire, mot pour mot, "Tablette : deux colonnes, meme
   grammaire" et calibre ses minmax(120px,40%) et son .ic-media{max-width:240px}
   pour DEUX. Le badge de qualite sortait de la carte, ne pouvant pas plier
   (.i-qual porte white-space:nowrap).

   PLACEMENT IMPERATIF EN FIN DE FICHIER : le selecteur est identique a celui
   de la section 28 et les deux sont !important, donc seul l'ordre de source
   departage. Pose plus haut, ce bloc serait inerte (mesure : 270,9px x3 avant
   la section 28, 418,7px x2 apres).

   Mesure a 1024x768 : deux pistes de 418,7px, les six badges rentrent avec 40
   a 102px de marge, chaque valeur sur une seule ligne, CTA alignes.
   RESERVE MESUREE : ne couvre que la bande 986-1024 en paysage, la ou
   auto-fill produisait trois pistes. A 1194x834 la grille garde trois
   colonnes sans debordement, mais des hauteurs de carte inegales laissent les
   CTA desalignes : defaut distinct, a traiter separement.                 */
@media (min-width:769px) and (max-width:1024px) and (orientation:landscape) {
  body.idmp-client #stock-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:clamp(22px, 2.6vw, 34px) clamp(18px, 2vw, 28px) !important;
  }
}

/* ══ 50. TABLETTE DEBOUT : LES COLONNES D'ONGLETS, AVEC LES BONS NOMS ══════
   Remplace la liste retiree de la section 13, qui visait
   #mob-rech-col-succes, absent du depot, et ratait #mob-rech-col-cours et
   #mob-rech-col-traitee, les deux colonnes qui portent le contenu.

   LE SUFFIXE .on EST OBLIGATOIRE, NE PAS L'ENLEVER. idmp_tabs.js pose
   display:none EN LIGNE sur les panneaux inactifs ; un display:grid
   !important non filtre le battait et rendait les trois onglets EN MEME
   TEMPS. Mesure sur l'ancienne regle : la pastille annoncait 5 alertes, huit
   cartes etaient a l'ecran, les avortees s'affichant sous les en-cours.
   Le !important reste indispensable : les colonnes portent un style en ligne
   (display:flex;gap:10px) qui bat toute regle non marquee.

   Mesure : chaque onglet n'affiche que ses cartes, deux colonnes de 353,3 /
   383,6 / 471px, aucun debordement. Une phrase d'attente porte une classe et
   garde sa pleine laize.                                                  */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  #mob-cmd-col-encours.on, #mob-cmd-col-livre.on, #mob-cmd-col-annule.on,
  #mob-rech-col-lancee.on, #mob-rech-col-cours.on,
  #mob-rech-col-traitee.on, #mob-rech-col-avortee.on,
  #mob-sav-col-cours.on, #mob-sav-col-traitee.on {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:clamp(12px, 1.6vw, 18px) !important;
    align-items:start !important;
  }
}

/* ══ 51. TABLETTE DEBOUT : L'INTERIEUR DES CARTES D'ALERTE ET DE SAV ═══════
   rechCardClient et savCardClient emettent un bloc SANS AUCUNE CLASSE,
   entierement style en ligne. Les selecteurs .rech-card et .sav-card des
   sections 24 et 43 ne designent donc AUCUN element du depot : du code mort.
   On les atteint par leur place dans la colonne. :not([class]) ecarte les
   phrases d'attente, qui portent une classe. Un style en ligne non marque
   perd face a un !important de feuille.                                   */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  body.idmp-client .mob-subbody [id^="mob-rech-col-"] > div:not([class]),
  body.idmp-client .mob-subbody [id^="mob-sav-col-"]  > div:not([class]) {
    padding:clamp(14px, 1.7vw, 20px) !important;
    border-radius:clamp(12px, 1.4vw, 16px) !important;
  }
  body.idmp-client .mob-subbody [id^="mob-rech-col-"] > div:not([class]) > div:first-child > div,
  body.idmp-client .mob-subbody [id^="mob-sav-col-"]  > div:not([class]) > div:first-child > div {
    font-size:clamp(14px, 1.6vw, 18px) !important;
  }
  body.idmp-client .mob-subbody [id^="mob-rech-col-"] > div:not([class]) > div:first-child > span,
  body.idmp-client .mob-subbody [id^="mob-sav-col-"]  > div:not([class]) > div:first-child > span {
    font-size:clamp(11.5px, 1.25vw, 13.5px) !important;
  }
  body.idmp-client .mob-subbody [id^="mob-rech-col-"] > div:not([class]) > div:nth-child(n+2),
  body.idmp-client .mob-subbody [id^="mob-sav-col-"]  > div:not([class]) > div:nth-child(n+2),
  body.idmp-client .mob-subbody [id^="mob-rech-col-"] > div:not([class]) > div:nth-child(n+2) > div,
  body.idmp-client .mob-subbody [id^="mob-sav-col-"]  > div:not([class]) > div:nth-child(n+2) > div {
    font-size:clamp(12px, 1.35vw, 15px) !important;
  }
  /* Sans ceci, le bouton et les icones restent calibres pour 375px pendant
     que le texte grandit : bouton a 36px, sous la cible tactile. */
  body.idmp-client .mob-subbody [id^="mob-rech-col-"] > div:not([class]) button,
  body.idmp-client .mob-subbody [id^="mob-sav-col-"]  > div:not([class]) button {
    height:clamp(40px, 4.4vw, 48px) !important;
    font-size:clamp(13px, 1.4vw, 15px) !important;
  }
}

/* ══ 52. TABLETTE DEBOUT : LA CARTE DE COMMANDE DE LA COQUE MOBILE ═════════
   La section 43 remet a l'echelle .kcard-*. Or Mes commandes en coque mobile
   ne rend PAS de .kcard : mobLoadCommandes ecrit des .mob-kcard, au gabarit
   telephone fige. Comptage DOM aux trois tailles : 0 element .kcard, 8
   .mob-kcard. Toute la section 43 etait sans effet sur cet ecran.
   Mesure avant : carte figee a 82,5px de haut a 768, 834 ET 1024 de large,
   aucune variation sur 256px d'ecran gagnes, 70,2 pour cent de vide dans la
   zone de texte a 1024x1366.

   margin-bottom:0 : la colonne porte deja son ecart, le gap:10px EN LIGNE de
   mobLoadCommandes, qui bat le clamp non prioritaire de la section 13. La
   marge du telephone s'y ajoutait : 20px entre les rangees contre 10 entre
   les colonnes.
   Le gap de grille est repris en !important pour suivre la meme echelle.

   ACCEPTE, MESURE : au plancher du palier (600px de large) la zone de texte
   passe de 153 a 139px et un nom de machine long finit en points de
   suspension. L'ellipse est deja le comportement voulu par le gabarit.    */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  body.idmp-client .mob-subbody .mob-kcard {
    padding:clamp(16px, 1.9vw, 22px) clamp(18px, 2.1vw, 24px) !important;
    gap:clamp(14px, 1.6vw, 18px) !important;
    border-radius:clamp(15px, 1.7vw, 19px) !important;
    margin-bottom:0 !important;
  }
  body.idmp-client .mob-subbody .mob-kcard-ic {
    width:clamp(48px, 5.2vw, 58px) !important;
    height:clamp(48px, 5.2vw, 58px) !important;
    border-radius:clamp(14px, 1.6vw, 17px) !important;
  }
  body.idmp-client .mob-subbody .mob-kcard-ic i { font-size:clamp(22px, 2.4vw, 27px) !important; }
  body.idmp-client .mob-subbody .mob-kcard-ref  { font-size:clamp(12px, 1.3vw, 14px) !important; }
  body.idmp-client .mob-subbody .mob-kcard-nm   { font-size:clamp(15px, 1.7vw, 19px) !important; }
  body.idmp-client .mob-subbody .mob-kcard-st   { font-size:clamp(13px, 1.4vw, 15px) !important; }
  body.idmp-client .mob-subbody .mob-kcard-chev { font-size:clamp(20px, 2.1vw, 24px) !important; }
  body.idmp-client #mob-cmd-col-encours,
  body.idmp-client #mob-cmd-col-livre,
  body.idmp-client #mob-cmd-col-annule { gap:clamp(12px, 1.6vw, 18px) !important; }
}

/* ══ 53. TABLETTE DEBOUT : LANCER UNE COMMANDE REPREND SES 720px ═══════════
   Les deux marges auto de la section 43 sont des marges d'AXE TRANSVERSE :
   .mob-subview est display:flex + flex-direction:column, donc l'axe transverse
   de .mob-subbody est horizontal. Une marge auto d'axe transverse annule
   align-self:stretch, la largeur retombe sur fit-content et le max-width:720px
   annonce ne mord JAMAIS. La regle centrait bien, mais elle centrait une boite
   retrecie a 390,8px sur 768.
   On centre par align-self et on rend la largeur explicite.
   Mesure : 720px pile aux trois tailles, x = 24 / 57 / 152, centre exact.  */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  #mob-sub-lancer .mob-subbody {
    align-self:center !important;
    width:100% !important;
    max-width:720px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* ══ 54. TABLETTE DEBOUT : LES TUILES SECONDAIRES SUIVENT LEUR CONTENU ═════
   Le plancher de la section 13 valait trois a quatre fois la hauteur reelle
   du contenu : une icone de 30px et deux lignes, soit 42,7px mesures pour
   148,6px d'interieur a 768x1024. Comme idmp_account.js pose
   align-content:flex-start avec flex-wrap:wrap, le contenu se collait en haut
   et tout le plancher restant devenait une bande morte sous le texte. C'est
   ce vide qui poussait le bouton Deconnexion hors de l'ecran.
   On garde un plancher confortable au doigt et on centre ce qui reste.
   Mesure : tuile 112 / 112 / 129,8px, plus grand trou 17,7 pour cent, sous le
   seuil de 25 ; 165 a 240px rendus a la colonne.                          */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  .ia-mini-grid .ia-tile {
    min-height:clamp(112px, 9.5svh, 138px) !important;
    align-content:center !important;
  }
}

/* ══ 55. LES SEIZE FINITIONS DE L'AUDIT ════════════════════════════════════
   Deux familles : du texte sous 11px et des cibles tactiles sous 40px, toutes
   heritees de valeurs calibrees pour une colonne de 375px et jamais reprises
   quand la tablette a elargi leur conteneur.
   Le defaut de l'ecart des grilles est deja couvert par les sections 50 et 52
   (le !important sur gap, la marge du telephone remise a zero) : rien a
   ajouter ici.                                                              */

/* Selecteur HT/TTC : 54x32 fixes, sous la prise au doigt. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  body.idmp-client .ih-pricebar { min-height:44px !important; }
  body.idmp-client .ih-pm-b {
    min-width:64px !important; height:44px !important;
    border-radius:22px !important;
    font-size:clamp(14px, 1.5vw, 17px) !important;
  }
}

/* Tuiles du menu : leur plancher etait indexe sur la HAUTEUR d'ecran (15svh,
   soit 204,9px a 1366) alors que leur contenu ne bouge pas. 30,9 pour cent de
   vide mort a 1024x1366. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  body.idmp-client .ih-tile {
    min-height:clamp(132px, 11.5svh, 168px) !important;
    gap:clamp(12px, 1.4vw, 16px) !important;
    padding:clamp(18px, 2vw, 24px) !important;
  }
}

/* Un tiers d'ecran noir sous l'accueil bureau : .ih-dash n'a ni flex:1 ni
   height, il se replie donc sur son contenu au lieu d'occuper la zone.
   Complement direct de la section 46 : les panneaux prennent la hauteur et
   c'est leur CORPS qui defile, jamais la page. */
@media (min-width:769px) and (max-width:1366px) and (orientation:landscape) {
  body.idmp-client #sec-accueil.sec.on {
    display:flex !important; flex-direction:column;
    height:100%; min-height:0;
  }
  body.idmp-client #sec-accueil .ih-dash { flex:1 1 auto; min-height:0; gap:clamp(18px, 2svh, 26px); }
  body.idmp-client #sec-accueil .ih-cols { flex:1 1 auto; min-height:0; }
  body.idmp-client #sec-accueil .ih-cols > .ih-panel:last-child { align-self:start; }
  body.idmp-client #sec-accueil .ih-panel { display:flex; flex-direction:column; min-height:0; max-height:100%; }
  body.idmp-client #sec-accueil .ih-panel-bd { flex:1 1 auto; min-height:0; overflow-y:auto; }
}

/* Plages de la feuille de filtres : 10 et 10,5px, calibres pour la pastille
   du telephone. Le second bloc vise le SPAN et non son parent, pour battre un
   !important pose sur le meme element. */
@media (min-width:769px) and (max-width:1366px) and (orientation:landscape) {
  #cat-fsheet .rngf-hd  { font-size:12px !important; }
  #cat-fsheet .rngf-val { font-size:12px !important; }
}
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  #cat-fsheet .rngf-hd span { font-size:12px !important; }
  #cat-fsheet .rngf-val     { font-size:12px !important; }
}

/* Puces de tonnage a 38px quand les onglets voisins ont ete montes a 44.
   Le prefixe limite la portee a la barre montee dans la coque mobile et
   laisse celle du bureau, deja traitee, intacte. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  #ih-tonwrap-tabs .i-ton-b {
    height:44px !important; padding:0 17px !important;
    font-size:15.5px !important; border-radius:11px !important;
  }
}

/* Une annonce unique laissait la moitie de la rangee vide, les deux tiers en
   paysage : les deux grilles comptent leurs pistes, pas leurs enfants. On
   borne et on centre le cas a une seule carte. :has() est deja un idiome du
   depot ; un navigateur qui l'ignore retombe simplement sur l'ancien rendu. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  #mob-stock-grid:has(> .ih-cardwrap:only-child) {
    grid-template-columns:minmax(0, 560px) !important;
    justify-content:center !important;
  }
}
@media (min-width:769px) and (max-width:1366px) and (orientation:landscape) {
  body.idmp-client #stock-grid:has(> .ih-cardwrap:only-child) {
    grid-template-columns:minmax(0, 560px) !important;
    justify-content:center !important;
  }
}

/* "Nombre de sieges" rogne de 8px : la rangee est en nowrap et retrecit tous
   ses selecteurs. On rend une dizaine de pixels de rembourrage (le chevron
   suit sa nouvelle marge) et on sort le seul libelle trop long de la phase de
   retrecissement, ses voisins absorbant la difference. flex-grow ne sert a
   rien ici, teste : la rangee retrecit, elle ne croit pas. */
@media (min-width:769px) and (max-width:1024px) and (orientation:landscape) {
  body.cat-pk #cat-fsheet .sf-row > .fsel { padding-left:11px !important; }
  body.cat-pk #cat-fsheet .sf-row > .fsel-or {
    padding-right:24px !important;
    background-position:0 0, 0 0, right 7px center !important;
  }
  body.cat-pk #cat-fsheet .sf-row > #sf-places { flex-shrink:0 !important; }
}

/* Ruban TOP VENTES a 10px. Les QUATRE valeurs geometriques bougent ensemble :
   le ruban est une diagonale, changer la seule police decalerait le texte hors
   de la bande doree. Valeurs reprises du palier bureau. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait),
       (min-width:769px) and (max-width:1024px) and (orientation:landscape) {
  .ic-card .i-bs { width:118px !important; height:118px !important; }
  .ic-card .i-bs > span {
    top:27px !important; left:-35px !important; width:167px !important;
    font-size:11px !important; line-height:21px !important;
  }
}

/* "Voir l'annonce" a 36px de haut aux six tailles. Le bouton est ecrit en
   style inline sans aucune classe : on l'atteint par sa place. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  body.idmp-client .mob-subbody [id^="mob-rech-col-"] > div:not([class]) > button {
    height:clamp(42px, 4.6svh, 52px) !important;
    font-size:clamp(13px, 1.45vw, 15px) !important;
  }
}
@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {
  body.idmp-client .it-body [id^="rech-col-"] > div:not([class]) > button {
    height:44px !important;
    font-size:13.5px !important;
  }
}

/* Mon compte en tablette couchee : les champs tombaient a 32px sur les deux
   tablettes les plus courtes, 3,9vh y valant moins que son propre plancher.
   Plancher porte a 40, plafond a 44 ; la grille de la section 25 tient
   toujours dans la fenetre, verifie. Et le libelle repasse au-dessus du seuil
   de lisibilite sans rien faire deborder. */
@media (min-width:769px) and (max-width:1366px) and (orientation:landscape) {
  #sec-compte.on input, #sec-compte.on select { height:clamp(40px, 4.6vh, 44px) !important; }
  #sec-compte.on .btnsm { height:40px !important; }
  #sec-compte.on .account-delete-card > button { height:40px !important; }
  #sec-compte.on label { font-size:11px !important; }
}

/* Lancer une alerte : la section 42 a rendu a la fenetre ses 700px sans
   remonter son contenu, reste calibre pour une colonne de 375. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  #mo-rech .rngf-hd  { font-size:11.5px !important; }
  #mo-rech .rngf-val { font-size:11.5px !important; }
  #mo-rech #rech-marque, #mo-rech #rech-modele { height:44px !important; }
  #mo-rech .mo-close { width:40px !important; height:40px !important; }
}

/* La prise au doigt de la section 35 ne valait que pour le catalogue : tous
   ses selecteurs sont prefixes #cat-fsheet. Les quatre curseurs de Lancer une
   alerte portent les memes classes et restaient a 18px. Meme methode, a
   l'identique : la BOITE du curseur passe a 40px, le disque reste peint a 19
   par le degrade radial. */
@media (max-width:768px), (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  #mo-rech .rngf .rngf-track,
  #mo-rech .rngf .rngf-range { height:40px !important; }
  #mo-rech .rngf .rngf-track::before,
  #mo-rech .rngf .rngf-fill { top:50% !important; }
  #mo-rech .rngf .rngf-range::-webkit-slider-thumb {
    width:26px !important;
    height:40px !important;
    margin-top:-17.5px !important;
    border:0 !important;
    border-radius:0 !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0 4.5px, rgba(255,255,255,0) 8.5px),
      radial-gradient(circle at 50% 50%, #FDFDFE 0 9.5px, #E6E8ED 9.5px 11.6px, #BFC3CC 11.6px 13px,
                      rgba(0,0,0,0) 13px) !important;
    box-shadow:none !important;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.75));
  }
  #mo-rech .rngf .rngf-range::-moz-range-thumb {
    width:26px !important;
    height:40px !important;
    border:0 !important;
    border-radius:0 !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0 4.5px, rgba(255,255,255,0) 8.5px),
      radial-gradient(circle at 50% 50%, #FDFDFE 0 9.5px, #E6E8ED 9.5px 11.6px, #BFC3CC 11.6px 13px,
                      rgba(0,0,0,0) 13px) !important;
    box-shadow:none !important;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.75));
  }
}

/* Parametres. Le prefixe body .idmp-set-ov est OBLIGATOIRE : idmp_settings.js
   injecte sa feuille A L'EXECUTION, donc apres celle-ci ; a specificite egale
   elle gagnerait. Meme piege que celui documente par la section 42. */
@media (min-width:600px) and (max-width:1024px) and (orientation:portrait) {
  body .idmp-set-ov .is-grp-t { font-size:11px !important; }
  body .idmp-set-ov .is-x { width:40px !important; height:40px !important; }
  /* L'interrupteur garde son dessin de 46x27 : seul un calque transparent
     agrandit sa zone sensible. Il porte deja position:relative, et ::after
     lui sert de bouton, d'ou ::before. */
  body .idmp-set-ov .is-sw::before {
    content:"";
    position:absolute;
    top:-7px; bottom:-7px; left:-3px; right:-3px;
  }
}

/* ══ 56. COQUE STAFF : LA BARRE DU HAUT S'ALIGNE SUR L'EN-TETE DU RAIL ══════
   Les deux bandeaux se touchent et portent chacun un filet en bas, mais ils
   n'avaient pas la meme hauteur : l'en-tete du rail fait 68px (section 12,
   ligne 2001), la barre du haut de l'administration 52 (idmp_admin.html:109).
   Mesure a 1440x900 : bas du rail a 68, bas de la barre a 52, SEIZE PIXELS
   d'ecart, et donc deux filets decales au lieu d'une seule ligne continue en
   travers de l'ecran.
   C'est la BARRE DU HAUT qui descend, jamais l'en-tete du rail : le rail porte
   le logo et sa geometrie est partagee par les quatre pages qui le montent.

   LES DEUX HAUTEURS SONT ECRITES ICI, COTE A COTE, ET DOIVENT RESTER EGALES.
   La valeur du rail est reconduite a l'identique : elle ne change rien au
   rendu, elle empeche seulement les deux de rediverger sans qu'on le voie.

   PORTEE. body:not(.idmp-client) couvre l'administration et les fiches staff
   sans double public. order_detail et config_detail conservent idmp-client
   meme pour un membre du personnel : elles sont donc reprises uniquement sous
   body.shl-on, classe posee par la coque staff apres la verification du role.
   Le rendu client ne recoit jamais cette classe. Le portrait et le telephone
   restent hors d'atteinte : la coque y devient une navigation basse.         */
@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {
  /* La respiration client de la section 28 ajoute un padding horizontal a
     .main. Sur ces deux pages mixtes, il survivait en vue staff et reculait
     le debut de la topbar d'environ 28 px par rapport au bord du rail. */
  body.shl-on.dkp-order .main,
  body.shl-on.dkp-config .main {
    padding-left:0 !important;
    padding-right:0 !important;
  }
  body:not(.idmp-client) aside.sb .sb-top,
  body:not(.idmp-client) .topbar,
  /* order_detail et config_detail servent aussi les clients : idmp_config.js
     leur laisse donc idmp-client meme lorsque le profil est staff. shl-on est
     en revanche pose uniquement quand idmp_shell.js monte la coque staff.
     Cette garde remet leur topbar a la hauteur du rail sans toucher la vue
     client, et ferme la jointure rail / barre au meme point que deal_detail. */
  body.shl-on.dkp-order .topbar,
  body.shl-on.dkp-config .topbar {
    height:68px !important;
    min-height:68px !important;
  }
  /* ── LES DEUX FILETS NE FONT PLUS QU'UN TRAIT ────────────────────────────
     La hauteur etait deja commune, la COULEUR ne l'etait pas : le rail avait
     son filet en --hair, la barre du haut en --bd. Mesure sur fond #0B0B0D :
     rgb(45,45,47) contre rgb(35,36,42), dix points d'ecart sur le canal
     rouge. Sur un trait de 1 px cela suffit a lire DEUX traits accoles au
     lieu d'une seule ligne qui traverse l'ecran.
     On aligne sur --hair, le jeton nomme "trait fin de separation" : c'est
     le role exact de ces deux filets, et .sb-top le portait deja. */
  body:not(.idmp-client) .topbar,
  body.shl-on.dkp-order .topbar,
  body.shl-on.dkp-config .topbar { border-bottom-color:var(--hair) !important; }
}

/* ══ 57. LE BADGE DE ROLE SUIT LE RAIL AU LIEU DE DEBORDER ═════════════════
   Replie, le rail fait 76px. Le badge de role gardait ses marges de 12 et son
   rembourrage de 10, soit 52px utiles pour "Directeur" : le mot etait coupe et
   se lisait "Direct", ce qui ressemblait a une etiquette de statut au lieu
   d'un role. C'est le seul element du rail qui n'avait recu aucune regle dans
   la section 12, ou tous les autres libelles se fondent deja.

   On lui applique EXACTEMENT le traitement de .sbi-lb et .sb-top-txt : replie,
   il se reduit a la couronne, centree ; deplie, le libelle revient. Les trois
   etats deplies comptent, survol compris, comme partout ailleurs.            */
@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {
  aside.sb .sb-role {
    width:38px; margin:8px auto; padding:0;
    height:30px; justify-content:center; gap:0;
    overflow:hidden;
    transition:width .22s cubic-bezier(.4,0,.2,1), margin .22s cubic-bezier(.4,0,.2,1);
  }
  aside.sb .sb-role i { flex:0 0 auto; }
  /* LE LIBELLE DOIT CESSER D'OCCUPER DE LA PLACE, pas seulement devenir
     transparent. Avec la seule opacite il pesait encore 50px, et le centrage
     poussait la couronne HORS de la pastille : mesuree a x=3 pour un badge
     commencant a 19, donc invisible une fois rognee. max-width et gap a zero
     la ramenent au centre. max-width s'anime, contrairement a width:auto. */
  aside.sb .sb-role span {
    white-space:nowrap;
    max-width:0; opacity:0;
    transition:max-width .22s cubic-bezier(.4,0,.2,1), opacity .16s ease;
  }
  body.rail-hover aside.sb .sb-role,
  body.rail-open  aside.sb .sb-role,
  body.rail-pin   aside.sb .sb-role {
    width:auto; margin:8px 12px; padding:0 10px; gap:6px;
    justify-content:flex-start;
  }
  body.rail-hover aside.sb .sb-role span,
  body.rail-open  aside.sb .sb-role span,
  body.rail-pin   aside.sb .sb-role span { max-width:180px; opacity:1; }
}

/* ══ 58. LOGO ET AVATAR RECENTRES SUR LA COLONNE D'ICONES ══════════════════
   Rail replie, les icones de navigation tombent exactement au milieu des 76px,
   ecart mesure 0. Le logo etait a moins 5 et l'avatar a moins 4 : tous deux
   gardaient un rembourrage calcule pour l'etat DEPLIE, ou le libelle qui les
   suit occupe la ligne.

   MEME METHODE QUE LA COURONNE, section 57 : ce qui suit doit cesser
   d'OCCUPER DE LA PLACE, pas seulement devenir transparent. L'opacite seule
   laissait le texte peser sa largeur, et le centrage se calculait donc sur
   icone + texte au lieu de l'icone seule.
   L'avantage sur un rembourrage fixe : la regle se corrige toute seule si la
   taille du logo, de l'avatar ou du rail change un jour.                    */
@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {

  /* ── en-tete : le logo ── */
  aside.sb .sb-top { padding:0; gap:0; justify-content:center; }
  aside.sb .sb-top-txt {
    max-width:0; overflow:hidden;
    transition:max-width .22s cubic-bezier(.4,0,.2,1), opacity .16s ease, transform .18s ease;
  }
  body.rail-hover aside.sb .sb-top,
  body.rail-open  aside.sb .sb-top,
  body.rail-pin   aside.sb .sb-top { padding:0 18px; gap:11px; justify-content:flex-start; }
  body.rail-hover aside.sb .sb-top-txt,
  body.rail-open  aside.sb .sb-top-txt,
  body.rail-pin   aside.sb .sb-top-txt { max-width:200px; }

  /* ── pied : l'avatar ──
     .sb-bot porte deja 8px de rembourrage lateral : on les reprend en marge
     negative pour que .sb-user occupe TOUTE la largeur du rail, sans quoi le
     centre de .sb-user ne coincide pas avec celui du rail. */
  aside.sb .sb-user {
    padding-left:0; padding-right:0; gap:0;
    margin-left:-8px; margin-right:-8px;
    justify-content:center;
  }
  aside.sb .sb-user > div:not(.av),
  aside.sb .sb-user > i {
    max-width:0; overflow:hidden;
    transition:max-width .22s cubic-bezier(.4,0,.2,1), opacity .16s ease;
  }
  body.rail-hover aside.sb .sb-user,
  body.rail-open  aside.sb .sb-user,
  body.rail-pin   aside.sb .sb-user {
    padding-left:9px; padding-right:9px; gap:11px;
    margin-left:0; margin-right:0;
    justify-content:flex-start;
  }
  body.rail-hover aside.sb .sb-user > div:not(.av),
  body.rail-open  aside.sb .sb-user > div:not(.av),
  body.rail-pin   aside.sb .sb-user > div:not(.av) { max-width:160px; }
  body.rail-hover aside.sb .sb-user > i,
  body.rail-open  aside.sb .sb-user > i,
  body.rail-pin   aside.sb .sb-user > i { max-width:24px; }

  /* ── les icones de navigation, l'axe de reference ──
     Elles tombaient a 38 quand tout le reste se centre a 37,5 : leur
     rembourrage de 18 ne laisse que 21px pour une icone de 22, qui debordait
     donc d'un pixel vers la droite. Un demi-pixel est invisible, mais tant
     qu'a aligner autant que la colonne entiere partage UN seul axe, calcule
     de la meme facon partout. */
  aside.sb .sbi { padding:0; gap:0; justify-content:center; }
  aside.sb .sbi-lb { max-width:0; overflow:hidden; }
  body.rail-hover aside.sb .sbi,
  body.rail-open  aside.sb .sbi,
  body.rail-pin   aside.sb .sbi { padding:0 18px; gap:14px; justify-content:flex-start; }
  body.rail-hover aside.sb .sbi-lb,
  body.rail-open  aside.sb .sbi-lb,
  body.rail-pin   aside.sb .sbi-lb { max-width:200px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   60. LA LUEUR, LA SIGNATURE DE LA MARQUE, PORTEE DANS L'APPLICATION
   Demande de Gloire le 19 aout 2026 : la lueur rouge du site vitrine dans le
   catalogue, le configurateur, le tableau de bord et ses onglets, et
   order_detail. Sa consigne : LES FONDS, PAS LES BLOCS.

   ── POURQUOI SUR LE CONTENEUR ET NON EN PSEUDO-ELEMENT ────────────────────
   Un ::before en position fixe aurait impose un contexte d'empilement a
   chaque page et un z-index sur tous les contenus : une seule page oubliee et
   son contenu passait DERRIERE la lueur. Un background-image sur le
   conteneur, lui, ne touche ni la mise en page ni l'empilement. Le contenu
   est peint au-dessus du fond de son propre conteneur, par construction, et
   les cartes restent opaques donc la lueur ne les traverse jamais. C'est
   exactement la consigne des fonds sans les blocs.

   ── ET POURQUOI ELLE NE DEFILE PAS ────────────────────────────────────────
   .content est la boite qui DEFILE. Le fond d'une boite defilante est peint
   sur sa boite de bordure et reste fixe quand le contenu glisse dessous :
   c'est le comportement par defaut, background-attachment:scroll, et il donne
   ici une lumiere d'ambiance stable. En local, il aurait suivi le contenu et
   la lueur serait sortie de l'ecran au premier defilement.

   ── LES DEUX FOYERS ───────────────────────────────────────────────────────
   Le vitrine pose un halo par section. Une application n'a pas de sections :
   elle a un cadre. On garde donc la meme couleur et la meme douceur, en deux
   foyers, un principal debordant par le haut et un rappel en bas a droite.
   Deux foyers et pas un seul : un seul degrade centre fait une tache, deux
   decentres font une lumiere.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --lueur-a: rgba(var(--or-rgb,255,48,25), .17);   /* foyer principal, deborde par le haut */
  --lueur-b: rgba(var(--or-rgb,255,48,25), .075);  /* rappel, bas droite                   */
}
/* ── OU ELLE VA, ET OU ELLE NE VA PAS ─────────────────────────────────────
   .content porte le catalogue de l'espace client sur ordinateur, le tableau
   de bord admin avec tous ses onglets, et order_detail.
   .icf est le configurateur plein ecran.
   .offer-shell, la fiche annonce, EN EST SORTIE le 19 aout 2026 : Gloire ne
   la veut que dans le configurateur, parce que c'est la qu'il televersera des
   photos detourees. Hors configurateur, ad_detail reste noir. */
/* ── ORDINATEUR : LE MEME STYLE, COUCHE A L'HORIZONTALE ──────────────────
   Gloire a dessine la forme sur sa capture : un coeur brillant qui tient
   jusqu'aux trois quarts du rayon, puis une estompe jusqu'au noir pur.
   Verticale sur telephone, la MEME forme se couche ici : sur un 1440x900,
   44 et 46 pour cent donnent 634 par 414 px, plus large que haute.
   L'aplat #000 dessous garantit que l'extinction finit sur du noir pur. */
.content {
  background-color: #000 !important;
  background-image:
    radial-gradient(ellipse 44% 46% at 50% 52%,
      var(--lueur-a) 0%, rgba(var(--or-rgb,255,48,25), .10) 62%, rgba(0, 0, 0, 0) 100%) !important;
  background-repeat: no-repeat !important;
}

/* ── LE CONFIGURATEUR : LA LUEUR SUR TOUTE LA HAUTEUR ─────────────────────
   Demande explicite. Les rendus televerses la seront detoures, donc le fond
   doit porter la lumiere du haut jusqu'en bas et non un foyer pose en tete.
   Un seul foyer, tres etire verticalement et centre : deux foyers decentres
   auraient fait deux taches derriere une machine qui, elle, est centree.

   .icf est LE configurateur, celui qu'ouvre aussi bien le catalogue que la
   fiche annonce. #ad-config avait ete ajoute ici puis retire : trois appels a
   getElementById le cherchent dans ad_detail mais AUCUN code ne le cree, le
   selecteur ne designait donc rien. */
/* La MEME forme que Gloire a tracee pour le catalogue : coeur qui tient
   jusqu'a mi-course puis estompe vers le noir. Horizontale ici, comme tout
   l'ecran ordinateur ; la variante telephone la redresse plus bas. Les rendus
   verses en PNG transparent flottent dessus, .icf-stage img n'ayant aucun
   fond propre, verifie. */
.icf {
  background-image:
    radial-gradient(ellipse 44% 46% at 50% 52%,
      var(--lueur-a) 0%, rgba(var(--or-rgb,255,48,25), .10) 62%, rgba(0, 0, 0, 0) 100%) !important;
  background-repeat: no-repeat !important;
}

/* Le configurateur plein ecran garde son aplat noir SOUS la lueur : il se
   superpose a la page, et un fond transparent laisserait voir le catalogue. */
.icf { background-color: #000 !important; }

@media (max-width:768px), (orientation:portrait) and (max-width:1024px) {
  /* Dans le configurateur, pas de menu flottant : la flamme verticale peut
     se centrer sur la scene, la ou vit la photo. */
  .icf {
    background-image:
      radial-gradient(ellipse 46% 34% at 50% 46%,
        var(--lueur-a) 0%, rgba(var(--or-rgb,255,48,25), .10) 62%, rgba(0, 0, 0, 0) 100%) !important;
  }
}

/* ── Telephone : on resserre les foyers ───────────────────────────────────
   A 390 px un foyer de 68 pour cent de large couvre presque tout l'ecran et
   la lueur devient un voile uniforme au lieu d'une lumiere. On la concentre
   en haut, la ou le regard entre dans la page. */
@media (max-width:768px) {
  /* .content porte la coque de l'ADMINISTRATION sur telephone. Elle recoit
     exactement la meme geometrie que la coque client : Gloire a dit "nulle
     part sur le mobile", et un ecran d'administration reste un ecran mobile.
     Garder ici l'ancrage en haut aurait laisse un seul endroit ou le rouge
     passe derriere la barre, celui qu'on ne regarde jamais. */
  .content {
    background-color: #000 !important;
    background-image:
      radial-gradient(ellipse 46% 34% at 50% 62%,
        var(--lueur-a) 0%, rgba(var(--or-rgb,255,48,25), .10) 62%, rgba(0, 0, 0, 0) 100%) !important;
  }

  /* ══ LA COQUE MOBILE DE L'ESPACE CLIENT ═════════════════════════════════
     Sur telephone ce n'est pas .content qui porte l'ecran mais .mob-content
     et ses vues. Quatre surfaces demandees : le catalogue, le menu, Mon
     compte et l'accueil.

     .mob-subbody est la ZONE QUI DEFILE, celle des annonces, et elle commence
     SOUS la barre de separation, le filet bas de .mob-subhd. En posant la
     lueur ici plutot que sur la vue entiere, elle accompagne tout le
     defilement sans jamais toucher cette barre : le degre s'eteint avant elle
     par construction, puisqu'elle n'existe pas au-dessus. Centree, comme
     demande, et le fond d'une boite defilante ne bouge pas avec son contenu.

     .mob-subbody sert aussi a Mon compte, aux alertes, au SAV et aux
     commandes : la lueur y est donc partout, ce qui evite qu'un onglet du
     telephone soit noir pendant que son voisin est allume. */
  /* ══ ELLE BRILLE AU MILIEU, ET JAMAIS SOUS LE MENU ═══════════════════════
     Elle etait ancree en HAUT, donc elle passait derriere le menu flottant.
     Consigne de Gloire : le rouge ne doit se trouver sous ce menu NULLE PART
     sur telephone, il doit briller au milieu de l'ecran et s'eteindre en noir
     pur a chaque extremite.

     UN SEUL FOYER, centre, et un aplat #000 dessous pour que l'extinction se
     fasse sur du noir pur et non sur la couleur heritee du parent.

     LA GEOMETRIE EST CALCULEE, PAS CHOISIE A L'OEIL. Centre a 56 pour cent,
     rayon vertical 28 : le bord haut du degrade tombe a 28 pour cent de la
     hauteur de la boite. Le menu occupe au plus 8 + 58 + 59 d'encoche, soit
     125 px. Le premier jeu essaye, centre 54 et rayon 32, donnait 124 px sur
     un ecran de 568 : un pixel de marge, autant dire aucune. Celui-ci donne
     159 px sur ce meme ecran et tient encore a 480 px de haut, une taille
     qu'aucun telephone n'atteint. La marge se calcule sur le PLUS PETIT
     ecran, pas sur le confortable : c'est la seule facon de tenir un "nulle
     part".
     Le bord bas tombe a 84 pour cent, donc le noir pur reprend avant la fin
     de l'ecran, des deux cotes comme demande. */
  /* ══ LA FORME EST CELLE QUE GLOIRE A TRACEE SUR SA CAPTURE ══════════════
     Deux anneaux dessines au doigt, mesures sur l'image : le coeur brillant
     va du centre aux trois quarts du rayon, l'estompe meurt a 46 pour cent
     de la largeur et 34 de la hauteur, centre a 62 pour cent de haut. En
     pixels sur un 390x844 cela fait 179 par 283 : une flamme VERTICALE, la
     ou ma version precedente s'etalait en nappe horizontale.
     Le double arret fait le style : la couleur TIENT a mi-course au lieu de
     mourir lineairement, c'est ce qui donne le coeur puis l'estompe.
     Bord haut du rouge : 28 pour cent de la hauteur, soit 134 px sur un
     ecran de 480 quand le menu s'arrete a 125. Jamais dessous, meme sur une
     taille qu'aucun telephone n'atteint. */
  .mob-subbody,
  .mob-accueil,
  .mob-menu-wrap {
    background-color: #000 !important;
    background-image:
      radial-gradient(ellipse 46% 34% at 50% 62%,
        var(--lueur-a) 0%, rgba(var(--or-rgb,255,48,25), .10) 62%, rgba(0, 0, 0, 0) 100%) !important;
    background-repeat: no-repeat !important;
  }

  /* La barre des filtres perd sa surface, mais UNIQUEMENT celle du catalogue.
     .mob-subhd sert aussi a Mon compte, aux alertes, au SAV et aux commandes,
     et Gloire veut ces ecrans-la pleins : le selecteur est donc ancre sur
     #mob-sub-stock. Elle garde son FILET, qui suffit a separer, et c'est meme
     la seule facon de separer sans couper la lumiere. */
  #mob-sub-stock .mob-subhd { background-color: transparent !important; }
}

/* Mouvement reduit : la lueur est statique, elle ne pose aucun probleme.
   On la garde, c'est une couleur de fond, pas une animation. */

/* ══════════════════════════════════════════════════════════════════════════
   61. LA LUEUR N'EST PLUS COUPEE PAR AUCUN BLOC DE L'ESPACE CLIENT
   Capture de Gloire a l'appui : la lueur se voyait dans les marges mais
   s'arretait net au bord des cartes, de la barre de filtres et du menu du
   haut. Sa consigne : qu'elle passe SOUS TOUT.

   ── LE PERIMETRE EST TENU PAR UN SEUL SELECTEUR ───────────────────────────
   Tout ce bloc est enferme dans body.idmp-client, l'espace client. C'est ce
   qui met hors d'atteinte, sans avoir a les nommer un par un, exactement ce
   que Gloire veut garder plein : les blocs Prospects, Contacts et Affaires,
   les colonnes du kanban et les onglets Alertes et SAV, qui vivent tous dans
   l'administration, laquelle porte body:not(.idmp-client).
   La barre du haut et le rail lateral de la version ordinateur ne sont pas
   nommes ici non plus : ils gardent leur surface.

   ── TRANSPARENT NE VEUT PAS DIRE INVISIBLE ────────────────────────────────
   Un bloc qui perd son fond perd aussi sa forme. Chacun recupere donc un
   FILET la ou il n'en avait pas : un contour d'un pixel se lit sur une lueur,
   un aplat la masque. L'etat actif garde son rouge plein, sinon plus rien ne
   distingue l'onglet choisi de ses voisins.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LE BOUTON DE DECONNEXION RETROUVE SA FORME ───────────────────────────
   Gloire : "le CTA deconnexion tout en bas qui a disparu". Il n'avait pas
   disparu du balisage, il etait devenu INVISIBLE, et c'est ma lueur qui l'a
   rendu tel. Mesure des contrastes sur le nouveau fond :
     surface #0B0B0D contre le fond noir ... 1,07:1
     filet   #23242A contre cette surface ... 1,27:1
   Deux valeurs sous le seuil de perception : il ne restait que le texte, en
   suspension, sans bord ni surface. Avant la lueur, le fond etait plat et ces
   memes valeurs suffisaient a detacher le bouton.
   On releve le filet et le texte, et on garde la surface sombre : un bouton
   de deconnexion ne doit pas crier, il doit se voir. */
body.idmp-client .mob-logout {
  border-color: rgba(255,255,255,.28) !important;
  color: #C9CDD6 !important;
  background: rgba(255,255,255,.04) !important;
}
body.idmp-client .mob-logout:active {
  background: rgba(220,38,38,.14) !important;
  border-color: rgba(239,68,68,.55) !important;
  color: #F87171 !important;
}

/* ── Les cartes du catalogue ─────────────────────────────────────────────
   ACCUEIL, MENU ET MON COMPTE SONT EXCLUS, sur demande de Gloire : leurs
   blocs restent pleins, seule la lueur passe derriere eux. Aucun des
   selecteurs de ce bloc ne les atteint, .ih-cardwrap, .cat-tab, .i-ton-b et
   .i-cta n'existant que dans le catalogue. Verifie plutot que suppose. */
body.idmp-client .ih-cardwrap { background:transparent !important; }

/* ── Les onglets de famille : Mini-pelles, Chargeuses, Vehicules ─────────
   Leur etat actif ne s'est JAMAIS joue sur le fond : il tient au filet, a la
   couleur du texte et a l'ombre portee, classes on-mp, on-pk et
   on-chargeuses. Retirer l'aplat ne coute donc aucune lisibilite. Une
   premiere version visait .cat-tab.on, qui n'existe nulle part : du code
   mort, verifie dans le balisage avant d'etre corrige.
   L'actif recoit quand meme une teinte tres basse, a sa propre couleur : sur
   une lueur rouge, un simple filet rouge se distingue moins bien que sur du
   noir, et c'est le seul endroit ou la couleur porte une information. */
body.idmp-client.dark .cat-tab { background:transparent !important; }
body.idmp-client.dark .cat-tab.on-mp,
body.idmp-client.dark .cat-tab.on-chargeuses { background:rgba(var(--or-rgb,255,48,25),.14) !important; }
body.idmp-client.dark .cat-tab.on-pk { background:rgba(46, 64, 87,.30) !important; }

/* ── Les pastilles de tonnage, et le bouton d'action de la carte ─────────
   Ils etaient sur var(--gr), un gris plein. Le contour reprend le role que
   l'aplat tenait : dire ou commence et ou finit la cible. */
/* ══ LES CTA DU CATALOGUE, TRANSPARENTS PARTOUT ══════════════════════════
   Gloire veut le rendu du telephone sur le catalogue admin aussi. Ces classes
   ne vivent QUE dans le catalogue, verifie sur le depot : les etendre ne
   touche aucun bloc du back-office.

   LE SELECTEUR REPREND LA FORME DE CELUI QU'IL DOIT BATTRE, et ce n'est pas
   du zele. La section 41 impose plus haut, en !important :
     .ic-foot .i-cta, .ih-cardwrap .i-cta { background:var(--gr) !important }
   soit DEUX classes. Ma premiere version portait body.idmp-client, deux
   classes aussi, et gagnait par l'ordre. En retirant ce garde pour couvrir
   l'admin je suis tombe a UNE classe : la regle grise reprenait la main
   PARTOUT, y compris sur le telephone ou l'effet marchait deja. Le bug etait
   de moi, et la capture de Gloire l'a montre. On repasse donc a deux classes,
   en visant les memes formes, et l'ordre tranche en notre faveur. */
.ic-foot .i-cta, .ih-cardwrap .i-cta,
.ic-card .i-ton-b, .ih-tonwrap .i-ton-b, .i-tons .i-ton-b {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
.ic-foot .i-cta:hover, .ih-cardwrap .i-cta:hover,
.ic-card .i-ton-b:hover, .ih-tonwrap .i-ton-b:hover, .i-tons .i-ton-b:hover {
  background:rgba(255,255,255,.07) !important;
  background-color:rgba(255,255,255,.07) !important;
}
/* L'etat actif et l'appel a l'action orange gardent leur aplat : ce sont les
   deux seuls endroits ou la couleur PORTE une information. */
.i-tons .i-ton-b.on, .ih-tonwrap .i-ton-b.on, .ic-card .i-ton-b.on,
.i-ton-b.on { background:var(--or) !important; border-color:var(--or) !important; }
.ic-foot .i-cta--or, .ih-cardwrap .i-cta--or,
.i-cta--or  { background:var(--or) !important; border-color:var(--or) !important; }

/* ── Le menu flottant du haut, sur telephone ─────────────────────────────
   Transparent, comme demande. Le voile de 24 pour cent que j'avais garde
   n'existait que pour proteger les icones du contenu qui defile dessous : la
   lueur ayant ete recentree, le haut de l'ecran est desormais du NOIR PUR, et
   c'est lui qui joue ce role. Le flou d'arriere-plan reste, il suffit a
   detacher les icones du texte qui passe derriere. */
@media (max-width:768px), (orientation:portrait) and (max-width:1024px) {
  body.idmp-client.dark .mob-topnav {
    background:transparent !important;
    border-color:rgba(255,255,255,.16) !important;
  }
}

/* ══ 62. LA PALETTE MARINE DE L'ANCIEN THEME NE PASSE PLUS ═════════════════
   Signale par Gloire le 20 aout 2026, capture a l'appui : le champ de
   recherche de la barre d'administration ressortait BLEU MARINE sur du noir.

   Mesure au banc plutot que supposition : le fond calcule vaut
   rgb(37,46,66), soit #252E42. Ce n'est ni un reflet, ni le surlignage de
   selection, ni le remplissage automatique de Chrome. C'est la surface de
   l'ANCIEN theme sombre, celui d'avant la charte noire, ecrite EN DUR dans
   la feuille en ligne de quatre pages de l'application :

     body.dark input:not(...):not(...):not(...):not(.fq),
     body.dark select:not(...), body.dark textarea
       { background:#252E42 !important }

   La regle generique de cette feuille visait bien var(--el), mais elle perd
   la cascade : trois attributs et une classe contre le meme jeu PLUS body et
   .dark, soit (0,4,1) face a (0,5,2). Redefinir les jetons ne suffit pas non
   plus, ces regles n'emploient pas de variable : elles nomment la couleur.

   La reponse est donc de REPRENDRE LES MEMES SELECTEURS avec les jetons
   noirs. A specificite egale, la position tranche, et cette feuille est
   chargee apres la feuille en ligne des quatre pages concernees, ce qui a
   ete verifie fichier par fichier avant d'ecrire une seule ligne.

   Correspondance : #252E42 et ses voisins #242C3D et #232E45 deviennent la
   surface surelevee, #38415A devient la bordure, #1C2333 devient la surface
   de carte.
   ========================================================================== */

/* Champs de saisie. Le selecteur reprend celui de l'administration, le plus
   specifique des quatre pages : il couvre donc aussi les trois autres.

   Le tableau de bord veut deux champs BLANCS, .qs-pin et .qs-inp du bloc de
   devis rapide. Mesure faite avec la feuille d'AVANT ce bloc : ils sortaient
   deja en surface surelevee, la regle generique de cette feuille, a (0,4,1),
   l'emportant depuis toujours sur leurs (0,2,2). Rien n'est donc casse ici,
   et les exclure n'y changerait rien : leur texte reste clair, ils restent
   lisibles, et ils suivent la charte noire comme le reste. */
body.dark input:not([type=range]):not([type=checkbox]):not([type=radio]):not(.fq),
body.dark select:not(.fsel-or):not(.prov-sel):not(.fsel),
body.dark textarea {
  background:var(--el) !important;
  color:var(--tx) !important;
  border-color:var(--bd) !important;
}

/* Les champs integres a une pilule portent la surface de leur parent. Le
   champ promo de la fiche annonce etait repeint par la regle generique
   ci-dessus car sa specificite etait superieure a celle de la page. */
body.dark .offer-summary .ad-promo .ad-promo-field input[type=text] {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* LA RECHERCHE DE LA BARRE DU HAUT RESTE TRANSPARENTE. Elle vit dans une
   pilule qui porte deja sa surface et son filet : lui donner un fond propre
   dessinait une boite dans une boite. C'est l'intention d'origine de
   idmp_shell.css, que la regle marine ecrasait. Il faut ici depasser la
   regle ci-dessus, d'ou la classe supplementaire. */
body.dark .tb-search input:not([type=range]):not([type=checkbox]):not([type=radio]):not(.fq) {
  background:transparent !important;
  border-color:transparent !important;
}

/* Listes deroulantes natives. */
body.dark .fsel option,
body.dark .fsel-or option,
body.dark .prov-sel option,
body.dark .qs-psel option { background-color:var(--el); color:var(--tx); }

body.dark .fsel:not(.fsel-or):not(.prov-sel):hover { background-color:var(--el); }

/* Blocs d'options du configurateur et des livraisons. */
body.dark .opt-n, body.dark .opt-p, body.dark .opt-flag,
body.dark .opt-x, body.dark .opt-add,
body.dark .cfg-opt, body.dark .livr-opt, body.dark .livr-calc-btn,
body.dark .col-imgcell, body.dark .cfg-col-sw { background:var(--el); }
body.dark .col-imgcell.filled { background:var(--el); }

body.dark .home-alert-box { background:var(--el); border-color:var(--bd); }
body.dark .qs-hero { background-color:var(--el); border-color:var(--bd); }
body.dark .stock-loading-bar { background:var(--bd) !important; }

/* Surfaces claires posees en style en ligne, que l'ancien theme repeignait
   en marine. Elles rejoignent la surface de carte. */
:where(html:not(.idmp-day)) body.dark [style*="background:#fff"],
:where(html:not(.idmp-day)) body.dark [style*="background: #fff"],
:where(html:not(.idmp-day)) body.dark [style*="background:#FFF"] { background:var(--wh) !important; }
:where(html:not(.idmp-day)) body.dark [style*="#FAFBFC" i],
:where(html:not(.idmp-day)) body.dark [style*="#F8FAFC" i] { background:var(--wh) !important; }
:where(html:not(.idmp-day)) body.dark [style*="background:#F5F6FA" i],
:where(html:not(.idmp-day)) body.dark [style*="background:#FAFAFA" i],
:where(html:not(.idmp-day)) body.dark [style*="background:#F5F5F5" i] { background:var(--wh) !important; }

/* Fonds de vignette video d'ad_detail. Ces deux-la ne dependent meme pas de
   body.dark : ils peignaient du marine en toutes circonstances, derriere une
   video qui ne remplit pas toujours son cadre. */
.gthumb.vid, .up-vid { background:var(--el); }

/* ══ 63. LA GALERIE D'ANNONCE LAISSE FLOTTER LES RENDUS DETOURES ═══════════
   Demande de Gloire le 21 aout 2026, suite du meme chantier que la
   previsualisation et le configurateur : les images d'annonce televersees en
   PNG transparent doivent flotter sur le fond de la page.

   La section 28 pose un support #000 sur toute la galerie, et son
   raisonnement reste juste POUR LES PHOTOS : un .jpg plein cadre garde son
   support. Mais un rendu detoure sur un aplat, c'est le fond noir colle que
   Gloire a deja refuse deux fois. La page marque desormais chaque media
   .png d'une classe "detoure" : ces regles-ci, plus specifiques et plus bas
   dans la feuille, ne s'appliquent qu'a lui.

   LA PISTE, ELLE, DEVIENT TRANSPARENTE POUR TOUT LE MONDE : c'est l'element
   unique sous toutes les diapositives, impossible a traiter par media. Sous
   une photo en cover elle est invisible, elle ne protegeait donc rien ; sous
   un detoure en contain, c'est elle qui bouchait les marges. */
body.dark .gal-track { background-color:transparent !important; }
body.dark .gal-slide.detoure,
body.dark .gal-slide.detoure img,
body.dark .gthumb.detoure,
body.dark .gthumb.detoure img { background-color:transparent !important; }

/* ══ 64. LA LUEUR REVIENT SUR LA FICHE, AVANT CONFIGURATION ════════════════
   Demande de Gloire le 21 aout 2026, qui revient sur la consigne du 19. A
   l'epoque la fiche restait noire, et c'etait juste : ses photos etaient des
   JPEG a fond plein, une lueur derriere un aplat ne se voit pas.

   Ce qui a change le meme jour : la galerie distingue desormais un rendu
   detoure d'une photo, la piste est transparente et les PNG y flottent. Il y
   a donc enfin quelque chose a eclairer.

   LE POINT D'ACCROCHE EST LA RACINE, PAS LE CORPS. ad-mini-offer-root est
   posee sur <html> par les DEUX fiches de consultation, la mini-pelle et le
   vehicule, qui partagent le meme chassis, et elle est RETIREE en mode
   edition : la lueur ne peut donc pas deborder sur l'editeur, ou elle
   generait la lecture des champs.

   Le configurateur garde la sienne, montee par .icf : il se superpose a la
   fiche avec son propre aplat noir, les deux ne se melangent jamais.
   La fiche ne defile pas, .offer-shell etant en overflow:hidden : le foyer
   reste ou il est pose, sans avoir a etre fixe. */
html.ad-mini-offer-root .offer-shell {
  background-color: #000 !important;
  background-image:
    radial-gradient(ellipse 44% 46% at 50% 52%,
      var(--lueur-a) 0%, rgba(var(--or-rgb,255,48,25), .10) 62%, rgba(0, 0, 0, 0) 100%) !important;
  background-repeat: no-repeat !important;
}

/* Telephone et tablette portrait : la MEME forme, redressee, comme partout
   ailleurs dans l'application. Le foyer remonte a 46 pour cent de hauteur
   pour ne jamais passer sous la barre de navigation flottante. */
@media (max-width:768px), (orientation:portrait) and (max-width:1024px) {
  html.ad-mini-offer-root .offer-shell {
    background-image:
      radial-gradient(ellipse 46% 34% at 50% 46%,
        var(--lueur-a) 0%, rgba(var(--or-rgb,255,48,25), .10) 62%, rgba(0, 0, 0, 0) 100%) !important;
  }
  /* L'en-tete de la fiche portait un aplat noir qui coupait la lueur net.
     Il devient transparent : le filet du bas suffit a marquer la separation,
     et c'est deja la regle des autres barres de l'espace client. */
  html.ad-mini-offer-root .offer-cathead .ih-cathead { background: transparent !important; }
}

/* ══ 65. LA FICHE LAISSE PASSER LA LUEUR : GALERIE ET BLOC PRIX ════════════
   Gloire, capture a l'appui, apres avoir retelecharge ses photos en PNG : un
   carre noir derriere la machine, alors que le zoom, lui, montre la
   transparence. Le PNG est donc bon, c'est la fiche qui peint.

   LA SONDE A NOMME LES COUPABLES, ancetre par ancetre depuis l'image, sur la
   vraie fiche de l'OMI-20 chargee avec ses vraies donnees : .gal-stage et
   .offer-gallery sortaient opaques. La section 63 avait rendu la piste et la
   diapositive transparentes, mais ces deux-la vivent AU-DESSUS, dans la vue
   ordinateur de la fiche, ou idmp_ad_detail.html pose une grappe entiere de
   background:#000 : la galerie, sa scene, sa piste, sa diapositive, son
   image, ses miniatures. Ces aplats datent du temps ou toutes les photos
   etaient des JPEG pleins : ils ne protegeaient rien, ils bouchaient.

   Meme logique que la section 63 : les aplats tombent la ou un rendu
   detoure doit flotter. Une photo JPEG pleine cadre ne laisse de toute facon
   rien voir derriere elle, elle ne perd donc rien a cette transparence.

   LE BLOC PRIX SUIT, a la demande : .offer-summary porte un aplat #000 que
   la lueur traversait en s'arretant net sur son bord, comme le montrait la
   seconde capture. Son filet suffit a le delimiter. */
html.ad-mini-offer-root .offer-gallery,
html.ad-mini-offer-root .offer-gallery .gal-stage,
html.ad-mini-offer-root .offer-gallery .gal-track,
html.ad-mini-offer-root .offer-gallery .gal-slide,
html.ad-mini-offer-root .offer-gallery .gal-slide img,
html.ad-mini-offer-root .offer-gallery .gal-thumbs,
html.ad-mini-offer-root .offer-thumb-strip,
html.ad-mini-offer-root .offer-summary {
  background: transparent !important;
  background-color: transparent !important;
}
/* Les miniatures : la page leur impose #000 avec !important, il faut donc
   le meme poids et une specificite superieure. Une miniature detouree flotte,
   une miniature photo reste pleine par nature. */
html.ad-mini-offer-root .offer-gallery .gthumb,
html.ad-mini-offer-root .offer-gallery .gthumb img {
  background: transparent !important;
  background-color: transparent !important;
}


/* ═══ 66. CHARGEUSES ET TONDEUSE : AUCUN PANNEAU DE FILTRES SUR BUREAU ══════
   La bande bureau ci-dessus (section vehicules) force #cat-fwrap en
   display:block !important des que la famille est pickup. Les segments
   chargeuses et tondeuse appartiennent a cette famille mais n'ont AUCUN
   systeme de filtre (demande de Gloire, 24 et 27 aout 2026). La classe
   segment-engin est posee par cliApplyCatType sur #sec-stock ; cette regle
   arrive plus tard dans la feuille et fait au moins jeu egal en specificite
   avec chacune des trois formes du forcage : elle gagne. */
@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {
  body.idmp-client #sec-stock.segment-engin #cat-fwrap,
  body.guest #sec-stock.segment-engin #cat-fwrap,
  #sec-stock.pickup-active.segment-engin #cat-fwrap {
    display:none !important;
  }
}

/* ═══ 67. ADMINISTRATION : CHARGEUSES ET TONDEUSE SANS VIEUX FILTRES ════════
   La bande de la section 30 ne retire les filtres du staff que pour la famille
   MINI-PELLE (body:not(.cat-pk)). Chargeuses et tondeuse appartiennent a la
   famille vehicule, donc cat-pk est pose et les anciens selecteurs restaient a
   l'ecran alors que le catalogue client, lui, n'affiche plus que les puces de
   capacite. Meme regime des deux cotes, demande de Gloire du 27 aout 2026.
   La classe segment-engin est posee par admApplyCatType et cliApplyCatType. */
#sec-stock.segment-engin #asf-fwrap,
#sec-stock.segment-engin .asf-row,
#sec-stock.segment-engin .sf-row,
#sec-stock.segment-engin #asf-ranges,
#sec-stock.segment-engin #sf-ranges,
#sec-stock.segment-engin .rngf,
#sec-stock.segment-engin .sf-reset {
  display: none !important;
}

/* ═══ 68. LE MOTEUR EN OPTION SE SIGNALE PAR UN PLUS, PAS PAR UNE COCHE ═════
   Demande de Gloire du 28 aout 2026 : sur les modeles ou le moteur se choisit
   (OMI-15 a OMI-25), la ligne ne doit pas porter la coche verte des elements
   INCLUS. Une coche promet ; un plus orange annonce un choix a faire, et c'est
   exactement ce que le configurateur demandera a l'etape suivante.
   La classe est posee par le module de configuration quand le libelle de la
   valorisation se termine par « + ». */
.i-valo li.opt::before {
  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='%23FF3019' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
}

/* 69. CTA GUNTER : ENCRE NOIRE EN MODE NUIT
   Cette feuille est chargee apres gunter_catalog.css. La couleur doit donc
   etre verrouillee ici afin que la regle historique des CTA SILEX ne remette
   pas le libelle blanc sur le bouton jaune GUNTER. */
html.idmp-brand-gunter:not(.idmp-day) body :is(
  #stock-grid .ic-foot .i-cta,
  #mob-stock-grid .ic-foot .i-cta,
  .ih-cardwrap .ic-foot .i-cta,
  .offer-config,
  .offer-pre-cta,
  .veh-launch,
  .ad-mob-cta button,
  .btn-green,
  .icf-cta
) {
  color:#080808 !important;
}
html.idmp-brand-gunter:not(.idmp-day) body :is(
  #stock-grid .ic-foot .i-cta,
  #mob-stock-grid .ic-foot .i-cta,
  .ih-cardwrap .ic-foot .i-cta,
  .offer-config,
  .offer-pre-cta,
  .veh-launch,
  .ad-mob-cta button,
  .btn-green,
  .icf-cta
) :is(i,svg,path,span) {
  color:#080808 !important;
  stroke:currentColor;
}