/* ============================================================================
   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).
   ========================================================================== */
[style*="background:#fff" i],
[style*="background: #fff" i],
[style*="background:#FFFFFF" i],
[style*="background-color:#fff" i] { background:var(--wh) !important; }

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

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

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

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

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

/* Barres de defilement */
* { scrollbar-color:#2A2B31 transparent; scrollbar-width:thin; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:#26272E; border-radius:9px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:#35363F; }
::selection { background:rgba(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(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(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:#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(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; }

  .ic-card {
    grid-template-columns:minmax(132px,42%) minmax(0,58%) !important;
    gap:10px 18px !important;
    align-items:center !important;
    justify-content:stretch !important;
    background:#000 !important;
  }
  .ic-media { order:2; aspect-ratio:1/1; max-width:280px; align-self:center; }
  /* 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:#000 !important;
  }
  .ic-t { grid-column:1/-1 !important; font-size:clamp(16px,4.7vw,20px) !important; }
  .ic-media { width:100%; max-width:230px; aspect-ratio:1/1 !important; align-self:center; }
  .ic-img { width:100% !important; height:100% !important; object-fit:contain !important; background:#000 !important; }
  .ic-body { justify-content:center !important; gap:7px !important; }
  .ic-foot { grid-column:1/-1 !important; margin-top:10px !important; }
  .ic-card .i-prix { font-size:clamp(19px,5.7vw,25px) !important; }
  .ic-card .i-valo li { font-size:clamp(10.5px,3.1vw,13px) !important; }
  .ic-card.no-img { grid-template-columns:1fr !important; }
  .ic-card.no-img .ic-body { grid-column:1 !important; }
}

/* Catalogue de l'administration : meme respiration, colonnes fluides. */
@media (min-width: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. */
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(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; }
  /* Dans l'administration, seuls les filtres du catalogue MINI-PELLE cedent la
     place aux puces de tonnage. Le catalogue utilitaire les conserve. */
  body:not(.idmp-client):not(.cat-pk) #sec-stock #asf-fwrap,
  body:not(.idmp-client):not(.cat-pk) #sec-stock .sf-row,
  body:not(.idmp-client):not(.cat-pk) #sec-stock .sf-ranges,
  body:not(.idmp-client):not(.cat-pk) #sec-stock .sf-range,
  body:not(.idmp-client):not(.cat-pk) #sec-stock #asf-ranges,
  body:not(.idmp-client):not(.cat-pk) #sec-stock .rngf {
    display:none !important;
  }
  body:not(.idmp-client):not(.cat-pk) #sec-stock #ih-tonwrap-desk {
    display:block !important;
    margin:0 0 clamp(14px, 1.4vw, 22px);
  }
}

/* ══ 30. FILTRES CATALOGUE : CHAMPS MIN/MAX SANS CURSEURS ════════════════
   Les quatre anciens double-sliders etaient recouverts par plusieurs couches
   de styles historiques. Les champs numeriques sont plus precis, accessibles
   au clavier et ne se decalagent pas selon le moteur du navigateur. */
#cat-fsheet .rngf-track,
#asf-fwrap .rngf-track {
  display:none !important;
}
#cat-fsheet .rngf,
#asf-fwrap .rngf {
  min-width:0 !important;
  padding:10px !important;
  border:1px solid #292A31 !important;
  border-radius:12px !important;
  background:#0B0B0D !important;
  overflow:hidden !important;
}
#cat-fsheet .rngf-ins,
#asf-fwrap .rngf-ins {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  gap:7px !important;
  align-items:center !important;
}
#cat-fsheet .rngf-in,
#asf-fwrap .rngf-in {
  width:100% !important;
  min-width:0 !important;
  height:38px !important;
  padding:0 9px !important;
  border:1px solid #303139 !important;
  border-radius:9px !important;
  background:#151519 !important;
  color:#fff !important;
  box-sizing:border-box !important;
}
#cat-fsheet .rngf-in:focus,
#asf-fwrap .rngf-in:focus {
  border-color:#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. */
body.dark .ic-media,
body.dark .ic-img,
body.dark .sc-img,
body.dark .gal-track,
body.dark .gal-slide,
body.dark .gal-slide img,
body.dark .gal-thumbs,
body.dark .gthumb,
body.dark .gthumb img {
  background-color:#000 !important;
}

/* ══ 29. CATALOGUE UTILITAIRE : FILTRES FIABLES, TOUTES SESSIONS ═══════════
   Plusieurs feuilles historiques pilotaient display/position/transform sur la
   meme modale. Ces règles terminales fixent un contrat simple : barre statique
   sur ordinateur, bottom-sheet scrollable sur téléphone. Elles couvrent les
   comptes connectés comme la consultation invitée. */
@media (min-width: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; } }
/* Sur telephone admin, la feuille de filtres reste l'interface adaptee au petit
   ecran : on evite de dupliquer les puces de tonnage devant la grille. */
@media (max-width:768px), (orientation:portrait) and (max-width:1024px) {
  body:not(.idmp-client) #sec-stock #ih-tonwrap-desk { display:none !important; }
}

/* ══ 22. MES COMMANDES : ONGLETS AU MEME STYLE ═════════════════════════════
   idmp_kbtabs.js pilote deja les onglets de Mes commandes (trois groupes : En
   cours, Terminee(s), Annulee(s)). On aligne son apparence sur celle des
   onglets du catalogue et des ecrans SAV et alertes : un seul geste appris,
   valable partout dans l'application.
   ========================================================================== */
@media (max-width:768px), (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(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.
   ========================================================================== */
.fsel, .fsel-or, .prov-sel,
#cat-fsheet select, #cat-fsheet input {
  background:#0B0B0D !important;
  background-image:none !important;
  border:1px solid #2A2B31 !important;
  border-radius:22px !important;
  color:#fff !important;
  font-weight:700 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  height:44px !important;
  padding:0 16px !important;
}
.fsel:hover, .fsel-or:hover { border-color:#4A4B55 !important; }
.fsel:focus, .fsel-or:focus { border-color:var(--or) !important; box-shadow:none !important; }
.fsel option, .fsel-or option { background:#141419; color:#fff; font-weight:500; }

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

/* Reinitialisation : le seul element colore de la barre. */
[onclick*="reset" i].fsel, .sf-reset, #sf-reset, [class*="reset"] {
  border-color:rgba(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(255,48,25,.10) !important;
    color:#FF3019 !important;
  }
  aside.sb .sbi:hover i { color:#FF3019; }

  aside.sb .sbi.on {
    background:rgba(255,48,25,.14) !important;
    color:#FF3019 !important;
    font-weight:600;
    box-shadow:inset 3px 0 0 #FF3019;
  }
  aside.sb .sbi.on i { color:#FF3019; }
  aside.sb .sbi:focus-visible { outline:2px solid #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(255,48,25,.10) !important; }
  aside.sb .sb-user:hover .av { background:#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:#FF3019; border-color:rgba(255,48,25,.45); }
  .rail-grip:focus-visible { outline:2px solid #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:#FF3019; border-color:#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;
  }
  .ih-promo {
    padding:clamp(14px, 1.6vw, 20px) clamp(16px, 1.9vw, 22px) !important;
    font-size:clamp(14px, 1.6vw, 18px) !important;
    gap:14px !important; border-radius:18px !important;
  }
  .ih-promo-ic {
    width:clamp(34px, 3.4vw, 44px) !important; height:clamp(34px, 3.4vw, 44px) !important;
    border-radius:12px !important;
  }
  .ih-promo-ic i { font-size:clamp(21px, 2.2vw, 27px) !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(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, #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, #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:#FF3019; color:#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 <div> 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. ADMINISTRATION : 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) vise /admin et rien d'autre : idmp_config.js
   refuse cette classe a la seule page /admin, si bien que les vues staff de
   order_detail et ad_detail, qui portent pourtant une .topbar, ne sont pas
   touchees. Le tableau de bord n'en a aucune dans son balisage.
   La requete est mot pour mot celle qui porte l'en-tete du rail, donc les deux
   bandeaux basculent toujours ensemble. Le portrait et le telephone sont hors
   d'atteinte : la coque mobile de l'administration y masque la barre.        */
@media (min-width:1025px), (min-width:769px) and (orientation:landscape) {
  body:not(.idmp-client) aside.sb .sb-top,
  body:not(.idmp-client) .topbar {
    height:68px !important;
    min-height:68px !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; }
}
