/* ═══════════════════════════════════════════════════════════════════════
   IDMP_SHELL.CSS
   LA COQUE ADMIN : rail lateral et barre du haut. SOURCE UNIQUE.

   Extrait de idmp_admin.html le 17 aout 2026, a la demande de Gloire :
   les pages de detail devaient porter les MEMES barres "au pixel pres".

   POURQUOI UNE SOURCE UNIQUE ET PAS UNE TROISIEME COPIE.
   Avant cette extraction il y avait DEUX implementations : celle de
   l'admin, ou le rail vaut width:var(--sw) avec --sw a 228px, et celle de
   idmp_staff_sidebar.js, qui codait 228px EN DUR. Elles coincidaient par
   HASARD. Le jour ou quelqu'un touchait --sw, elles divergeaient sans que
   rien ne le signale. "Au pixel pres" ne survit pas a la duplication : la
   seule facon que ca tienne est que tout le monde lise le meme fichier.

   ORDRE DE CHARGEMENT. Cette feuille se charge AVANT le <style> de la page
   et AVANT idmp_black.css, qui reste la derniere. Elle consomme les jetons
   --sw, --st, --or, --wh, --bd, --tx, --mu sans en redefinir aucun : c'est
   la page qui les pose, et le theme noir qui a le dernier mot.

   Les contextes @media sont reproduits A L'IDENTIQUE. Le rail devient une
   barre du bas sous 768px : perdre ce contexte casserait tout le mobile.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LA LARGEUR DU RAIL EST UN JETON DE COQUE ─────────────────────────────
   --sw vivait dans le :root de idmp_admin.html. Consequence mesuree le
   17 aout 2026 : sur deal_detail la variable etait VIDE, var(--sw) ne
   resolvait rien, et le rail prenait la largeur de son contenu, 76px au lieu
   de 228. Il appartient donc a la coque, comme les regles qui l'utilisent.
   C'est la SEULE declaration du depot : changer 228 ici change partout. */
:root{--sw:228px}


.sb{width:var(--sw);min-width:var(--sw);background:var(--st);display:flex;flex-direction:column;height:100vh;height:100dvh}
.sb-top{padding:16px 16px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.sb-top img{width:28px;height:28px;border-radius:6px;object-fit:contain}
.sb-top-txt{font-size:14px;font-weight:700;color:#fff}
.sb-top-txt span{color:rgba(255,255,255,.4);font-weight:400}
.sb-role{margin:8px 12px;background:rgba(var(--or-rgb,255,48,25),.2);border:1px solid rgba(var(--or-rgb,255,48,25),.4);border-radius:8px;padding:5px 10px;display:flex;align-items:center;gap:6px}
.sb-role i{color:var(--or);font-size:13px}
.sb-role span{font-size:11px;font-weight:600;color:var(--or)}
.sb-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:6px 8px}
.sb-grp{font-size:10px;font-weight:600;color:rgba(255,255,255,.3);letter-spacing:.6px;text-transform:uppercase;padding:10px 8px 4px}
a.sbi,a.sbi:visited{text-decoration:none;color:inherit}
.sbi{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:rgba(255,255,255,.5);border:none;background:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif}
.sbi i{font-size:15px;width:17px;text-align:center;flex-shrink:0}
.sbi:hover{background:rgba(255,255,255,.08);color:#fff}
.sbi.on{background:rgba(var(--or-rgb,255,48,25),.2);color:var(--or)}
.sbi-badge{margin-left:auto;background:var(--or);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}
.sb-bot{padding:10px 8px;border-top:1px solid rgba(255,255,255,.1)}
.sb-user{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer}
.sb-user:hover{background:rgba(255,255,255,.07)}
.topbar{height:52px;min-height:52px;background:var(--wh);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 20px;gap:10px}
.tb-title{font-size:15px;font-weight:700;color:var(--tx);flex:1}
.tb-search{margin-left:auto;flex-shrink:100;min-width:110px;display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:0 10px;height:32px;width:clamp(126px,15vw,240px);position:relative}
.tb-search input{border:none;background:transparent;outline:none;font-size:12.5px;font-family:'DM Sans',sans-serif;color:var(--tx);width:100%;min-width:0}
.tb-search i{font-size:13px;color:var(--mu);flex-shrink:0}
.tb-nav{display:flex;align-items:center;gap:6px;flex-shrink:1;min-width:0;
        overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}
/* display:inline-flex EST OBLIGATOIRE ICI depuis que ces onglets sont des
   liens et non des boutons (4 septembre 2026, pour le clic droit). Un
   <button> centre son contenu tout seul et respecte une hauteur ; un <a> est
   inline par defaut : height ne s'y applique pas, le texte se pose sur la
   ligne de base, et toute la barre remonte de quelques pixels. C'est
   exactement ce que Gloire a vu sur les pages de detail, ou la barre est
   construite par ce composant, pendant que celle de /admin, ecrite en dur en
   boutons, restait droite.

   La regle ne change RIEN pour un bouton : il etait deja centre. */
.tbn{display:inline-flex;align-items:center;justify-content:center;
     /* box-sizing pour la meme raison que display : le navigateur le pose
        d'office sur un <button>, pas sur un <a>. Sans lui la bordure
        s'AJOUTE aux 32px et la pastille fait 34, deux pixels de plus que
        celles de /admin, ecrites en dur en boutons. Mesure au banc avant et
        apres : 34 contre 32, puis 32 des deux cotes. */
     box-sizing:border-box;
     height:32px;padding:0 clamp(6px,.8vw,14px);border-radius:8px;border:1px solid var(--bd);
     background:var(--wh);color:var(--mu);font-family:'DM Sans',sans-serif;font-size:clamp(12px,.95vw,13px);
     
     font-weight:600;white-space:nowrap;cursor:pointer;flex-shrink:0;
     transition:background .14s,color .14s,border-color .14s}
.tbn:hover{background:var(--bg);color:var(--tx)}
.tbn.on{background:var(--or);border-color:var(--or);color:#fff}
.tbn .sbi-badge{margin-left:6px}
.tbn.on .sbi-badge{background:#fff;color:var(--or)}

@media (max-width:1189px) {
  .tbn .sbi-badge{display:none !important}
}

@media (max-width:1365px) {
  body.rail-pin .tbn .sbi-badge{display:none !important}
}

@media (max-width:768px), (orientation:portrait) and (max-width:1024px) {
  /* Les styles de page arrivent apres la coque : leur .sb de bureau ne doit
     pas recouvrir la fiche sur telephone ou tablette portrait. */
  .sb,body.shl-on .app > .sb{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;height:calc(56px + env(safe-area-inset-bottom));min-width:0;padding-bottom:env(safe-area-inset-bottom);flex-direction:row;border-right:none;border-top:1px solid var(--bd);z-index:100;overflow:hidden}
  .sb-top,body.shl-on .sb .sb-top{display:none}
  .sb-role,body.shl-on .sb .sb-role{display:none}
  .sb-bot,body.shl-on .sb .sb-bot{display:none}
  .sb-nav,body.shl-on .sb .sb-nav{display:flex;flex-direction:row;padding:0;overflow-x:auto;overflow-y:hidden;flex:1;align-items:stretch}
  .sb-grp,body.shl-on .sb .sb-grp{display:none}
  .sbi,body.shl-on .sb .sbi{flex-direction:column;gap:2px;padding:4px 6px;border-radius:0;font-size:9px;width:72px;min-width:72px;white-space:normal;text-align:center;align-items:center;justify-content:center;height:56px;flex:0 0 72px;position:relative}
  .sbi i{font-size:19px;width:auto}
  .sbi-badge{position:absolute;top:5px;right:8px;margin:0}
  .topbar{padding:0 12px;gap:8px}
  .tb-search{display:none}
  /* ── CES DEUX LIGNES SONT MAINTENANT GARDEES ────────────────────────────
     Elles etaient inconditionnelles, extraites telles quelles du <style> de
     l'admin ou elles sont JUSTES : l'admin a sa propre navigation mobile,
     #mob-anav et ses tuiles .a-tile, et masque donc son rail et sa barre du
     haut a cette taille.

     Recopiees sans garde, elles annulaient les onze lignes de barre du bas
     juste au-dessus, qui devenaient du code mort, et les pages de detail se
     retrouvaient SANS AUCUNE navigation sur telephone.

     shl-on est posee sur <body> par idmp_shell.js au montage. L'admin ne
     charge QUE cette feuille, jamais le script : il n'a donc jamais la
     classe et garde son comportement d'origine. Les pages de detail
     chargent les deux et recoivent la barre du bas.

     La garde est en (0,2,0) contre (0,1,0) pour les regles de barre du bas :
     sur une page sans shl-on elle gagne, avec ou sans !important. */
  body:not(.shl-on) .sb{display:none!important}
  body:not(.shl-on) .topbar{display:none}
}
.sb-logout{margin-top:10px;width:100%;height:42px;border-radius:11px;border:1.5px solid #FECACA;background:#FEF2F2;color:#DC2626;font-size:13px;font-weight:700;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.20)}
.sb-logout i{font-size:16px}
.sb-logout:hover{background:#FEE2E2}
body.dark .sb-logout{background:#371717 !important;border-color:#7F1D1D;color:#FCA5A5}


/* ═══════════════════════════════════════════════════════════════════════
   LA GEOMETRIE DU CADRE, ajoutee le 17 aout 2026.

   .app, .main et .content font partie de la COQUE, pas de la page. L'admin
   est un cadre a hauteur figee dont seul .content defile ; les pages de
   detail faisaient defiler la page entiere. Deux geometries differentes
   donnent deux barres differentes, meme avec des declarations identiques :
   une barre du haut collante dans un cadre qui defile ne se comporte pas
   comme une barre du haut dans un cadre fige.

   Toute page qui charge cette feuille adopte donc le cadre de l'admin, et
   doit envelopper son contenu dans un <div class="content">.
   ═══════════════════════════════════════════════════════════════════════ */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}
.main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:20px;-webkit-overflow-scrolling:touch}
/* Le conteneur de defilement que la coque BATIT quand la page n a pas le
   cadre. Il ne s appelle pas content : sav_detail a deja une section de ce
   nom, que idmp_desk.css met en grille a deux colonnes, et reprendre le nom
   aurait applique cette grille au cadre lui-meme. Meme comportement, nom
   propre. Le padding est nul : ces pages portent deja le leur, et en ajouter
   un second decalerait tout leur contenu. */
.shl-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}

/* ── LES PAGES QUI TIENNENT DEJA DANS LA FENETRE ──────────────────────────
   config_detail, sav_detail et alerte_detail se cadrent elles-memes en
   hauteur d ecran et font defiler une zone interne. La coque leur retire
   donc SON defilement et se contente de leur passer sa hauteur.

   POURQUOI LA HAUTEUR DOIT ETRE NEUTRALISEE, ET PAS SEULEMENT L OVERFLOW.
   Ces pages ecrivent height:100dvh, c est-a-dire la fenetre ENTIERE. Dans
   le cadre, la place disponible vaut la fenetre MOINS la barre du haut :
   la page depassait donc de la hauteur exacte de cette barre, et l ecran
   entier glissait. min-height:0 est indispensable, un min-height:100dvh
   survivant a lui seul a la neutralisation de height. */
.shl-content.shl-plein{overflow:hidden;display:flex;flex-direction:column}
.shl-content.shl-plein > *{flex:1 1 auto;height:auto;min-height:0}

@media (max-width:768px), (orientation:portrait) and (max-width:1024px) {
  .content{padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important}
  body.shl-on.dkp-ad .content{padding-bottom:calc(56px + env(safe-area-inset-bottom)) !important}
  body.shl-on.dkp-ad .offer-cathead .ih-cathead{padding-top:calc(12px + env(safe-area-inset-top))}
  .app{flex-direction:column}
  .main{height:calc(100vh - 56px);overflow:hidden}
  .content{padding:12px 10px}
  .app{flex-direction:column;height:100vh;height:100dvh;position:relative;--mnavh:calc(66px + env(safe-area-inset-top))}
  .main{flex:1 1 auto;min-height:0;height:auto;overflow:hidden}
  .content{padding:14px 12px}
  body.ahome .content{padding-top:calc(var(--mnavh) + 12px)}
  body.amenu .main{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   RAPATRIEES LE 17 AOUT 2026, apres un audit des classes que le composant
   EMET reellement.

   idmp_shell.js ecrit <div class="av" id="shl-av"> au bas du rail et deux
   <div class="tbtn"> a droite de la barre du haut. Ces deux classes ne
   vivaient que dans le <style> en ligne de idmp_admin.html : sur les trois
   pages du tunnel, l'avatar etait un carre nu et les deux boutons deux
   icones sans cadre.

   Mon extraction du matin filtrait par MOTIF de selecteur, .tb-* entre
   autres. ".tbtn" n'a pas de trait d'union et ".av" ne ressemble a rien de
   la liste : le filtre les a laissees derriere. Un audit des classes emises
   les trouve en une passe. C'etait le controle a faire.

   Elles sont DEPLACEES, pas recopiees : l'admin charge cette feuille, il n'y
   a donc toujours qu'une seule declaration dans le depot.
   ═══════════════════════════════════════════════════════════════════════ */
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.tbtn{width:32px;height:32px;border-radius:8px;border:1px solid var(--bd);background:var(--wh);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mu);position:relative;flex-shrink:0}
.tbtn:hover{background:var(--bg)}
a.tbtn{text-decoration:none}

/* The restricted stock roles keep their existing shell in touch landscape. */
@media (max-width:1366px) and (orientation:landscape) and (pointer:coarse){
html.idmp-brand-gunter body.shl-on.shl-gs .app>.sb{position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;min-width:0!important;height:calc(56px + env(safe-area-inset-bottom))!important;padding-bottom:env(safe-area-inset-bottom);flex-direction:row!important;border-right:0;border-top:1px solid var(--bd);z-index:100;overflow:hidden}
html.idmp-brand-gunter body.shl-on.shl-gs .sb :is(.sb-top,.sb-role,.sb-bot,.sb-grp){display:none!important}
html.idmp-brand-gunter body.shl-on.shl-gs .sb .sb-nav{display:flex!important;flex-direction:row!important;padding:0;overflow-x:auto;overflow-y:hidden;flex:1;align-items:stretch}
html.idmp-brand-gunter body.shl-on.shl-gs .sb .sbi{display:flex;flex-direction:column;gap:2px;padding:4px 6px;border-radius:0;font-size:9px;width:72px;min-width:72px;height:56px;flex:0 0 72px;white-space:normal;text-align:center;align-items:center;justify-content:center}
html.idmp-brand-gunter body.shl-on.shl-gs .sb .sbi i{font-size:19px;width:auto}
html.idmp-brand-gunter body.shl-on.shl-gs .app>.main{margin-left:0!important;width:100%!important;min-height:0;padding-bottom:calc(56px + env(safe-area-inset-bottom))!important}
html.idmp-brand-gunter body.shl-on.shl-gs .topbar{display:none!important}
html.idmp-brand-gunter body.shl-on.shl-gs #mob-odnav{display:none!important}
}

/* Detail pages use their existing back action on touch screens. Their desktop
   sidebar is retained; only the former mobile rail and its reserved gap leave. */
@media (max-width:768px), (orientation:portrait) and (max-width:1024px), (max-width:1366px) and (orientation:landscape) and (pointer:coarse){
html.idmp-brand-gunter body.shl-on:not(.dkp-admin):not(.dkp-espace) :is(.app>.sb,.shl-mobile,.mob-bnav,.rail-grip,.rail-scrim,#mob-odnav){display:none!important}
html.idmp-brand-gunter body.shl-on:not(.dkp-admin):not(.dkp-espace) .app>.main{margin-left:0!important;width:100%!important;padding-bottom:0!important;--mnavh:env(safe-area-inset-top)}
html.idmp-brand-gunter body.shl-on:not(.dkp-admin):not(.dkp-espace) .content{padding-bottom:calc(20px + env(safe-area-inset-bottom))!important}
html.idmp-brand-gunter body.shl-on.dkp-ad:not(.dkp-admin):not(.dkp-espace) .content{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
}