/* LA COQUILLE DE MANAGER V2 — en-tete (et sa bande de marque), volet, pied de page. Commune a Manager V2 et a l'apercu
   « Voir la page » de l'Admin : la presentation reglee dans l'Admin arrive en variables CSS (ManagerShellStyle.CssVariables),
   les valeurs ci-dessous sont les valeurs par defaut. Les jetons de la charte (couleurs, textes, graisses, espacements, rayons,
   ombres, durees) sont dans mv2-tokens.css, a charger AVANT ce fichier ; le fond de page (--bg) reste ici. Les controles (badges et
   boutons) sont dans mv2-controls.css, a charger APRES : ils se reglent a part (Admin › Manager V2 › Styles des contrôles), pas
   avec le menu ; la pastille de la cloche, ici, prend leurs variables. */
:root{
  --bg:#f4f4f6;
  /* Les reglages de presentation (Admin > Manager > Menu > Voir la page) */
  --header-h:72px;--header-pad-x:24px;--user-name-size:14px;
  --nav-w:252px;--nav-w-folded:64px;--nav-item-pad-y:8px;--nav-icon:17px;--nav-stroke:1.75;--nav-text:13px;--nav-gap:11px;
  --nav-section-text:10px;--nav-section-gap:6px;--nav-sub-indent:0px;
  --footer-h:56px;--footer-pad-x:28px;--footer-btn-text:13px;
  --line-w:1px;--line-c:#e7e7eb;--page-bg:#ffffff;--brand-bg:#fbfbfc;--header-bg:#ffffff;--nav-bg:#fbfbfc;--footer-bg:#ffffff;
  --page-pattern:none;--brand-pattern:none;--header-pattern:none;--nav-pattern:none;--footer-pattern:none;
  --page-pattern-t:0%;--brand-pattern-t:0%;--header-pattern-t:0%;--nav-pattern-t:0%;--footer-pattern-t:0%;
  --page-pattern-veil:color-mix(in srgb,var(--page-bg) var(--page-pattern-t),transparent);
  --brand-pattern-veil:color-mix(in srgb,var(--brand-bg) var(--brand-pattern-t),transparent);
  --header-pattern-veil:color-mix(in srgb,var(--header-bg) var(--header-pattern-t),transparent);
  --nav-pattern-veil:color-mix(in srgb,var(--nav-bg) var(--nav-pattern-t),transparent);
  --footer-pattern-veil:color-mix(in srgb,var(--footer-bg) var(--footer-pattern-t),transparent);
  --tenant-size:13px;--tenant-opacity:1;
}
*{margin:0;padding:0;box-sizing:border-box}
:focus-visible{outline:2px solid var(--argus);outline-offset:2px}
body{font-family:var(--font);background:var(--page-bg);color:var(--text);font-size:var(--text-lg);min-height:100vh}
a{color:inherit}

/* ===== EN-TETE : toute la largeur ; a gauche, la bande de marque, dans l'alignement du volet ===== */
.mv2-header{position:sticky;top:0;z-index:100;height:var(--header-h);display:flex;align-items:stretch;background:var(--header-bg);border-bottom:var(--line-w) solid var(--line-c)}
.mv2-brand{flex:0 0 var(--nav-w);width:var(--nav-w);position:relative;display:flex;align-items:center;gap:12px;
  padding:0 25.7px 0 27.6px;background:var(--brand-bg);border-right:var(--line-w) solid var(--line-c);
  transition:width var(--dur-slow) var(--ease),flex-basis var(--dur-slow) var(--ease)}
.mv2-brand.au-coin{padding-right:10px}
/* Le logotype : une image par ligne, empilees (largeur, retrait et espace au-dessus de chacune poses par _Brand). */
.mv2-logo{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:0;text-decoration:none}
.mv2-logo-row{display:flex;align-items:flex-start}
.mv2-logo img{display:block;height:auto;max-width:none}
.mv2-fold{width:28px;height:28px;flex:0 0 28px;margin-left:auto;border:0;border-radius:6px;background:none;color:#98989f;
  display:grid;place-items:center;cursor:pointer;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.mv2-fold:hover{color:var(--argus);background:#f1f1f3}
.mv2-fold svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mv2-fold.au-coin{position:absolute;top:8px;right:10px;width:26px;height:26px;margin:0}
.mv2-fold.au-coin svg{width:17px;height:17px}

.mv2-header-main{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--header-pad-x) 0 9px}
/* Le titre de la page, a gauche de l'en-tete (JM, 10/10 : « aligné à gauche contre le header ») : aligne sur la grille (9 px apres
   le volet), sur une ligne. */
/* L'EN-TETE ET LE PIED DE PAGE, DEUX BANDES DE LA GRILLE DE LA PAGE (JM, 10/10 : « le code est identique ») : 48 colonnes, des
   rangs de 33 px, les cases de la grille (mv2-cell) — l'en-tete en a 2 (72 px : 3 px autour), le pied 1, au milieu de ses 56 px,
   aligne sur la grille (9 px apres le volet). Dans une case de bande, le widget est centre en hauteur. */
.mv2-band{width:100%;min-width:0}
.mv2-header-left{flex:1}
/* LES BANDES A LA GEOMETRIE DE LA GRILLE (JM, 10/10, la 2e page : « Maintenan… » coupe) : la bande de l'en-tete et celle du pied ont
   la largeur de la grille de la page (9 px apres le volet, 28 px avant le bord droit, comme .mv2-main), donc ses colonnes — celles
   que dessine le compositeur de l'Admin. Dans l'en-tete, le perimetre et l'alerte passent par-dessus le bout droit de la bande, hors
   du flux (ManagerWidgets.HeaderToolsWidth, grise dans le compositeur) : leur largeur, qui depend des noms des societes et des
   sites, ne change plus celle des colonnes. */
.mv2-header-main:has(> .mv2-header-left > .mv2-band){position:relative;padding-right:28px}
.mv2-header-main:has(> .mv2-header-left > .mv2-band) > .mv2-header-right{position:absolute;top:0;bottom:0;right:var(--header-pad-x);z-index:1;
  padding-left:16px;background:var(--header-bg)}
.mv2-footer:has(> .mv2-band){padding:0 28px 0 9px}
.mv2-band > .mv2-cell{display:flex;align-items:center}
.mv2-band > .mv2-cell > *{min-width:0}
/* La pagination calee a droite de sa case (JM, 12/10 : « Pagination toujours alignée à droite »). */
.mv2-band > .mv2-cell > .mv2-pager{flex:1;justify-content:flex-end}
.mv2-cell-row{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
/* Les boutons des widgets dans le pied de page (JM, 12/10) : colles au Retour et aux boutons de navigation ; l'original, hors de la vue. */
.mv2-footer > .mv2-band{position:relative}
.mv2-foot-acts{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:flex-start;gap:8px}
.mv2-foot-acts .mv2-btn svg{width:14px;height:14px;flex:none}
/* Une action dont l'original est cache (la fiche en lecture : « Enregistrer les modifications », JM 16/10) quitte le pied : le display
   du bouton passait devant l'attribut hidden. */
.mv2-foot-acts > [hidden]{display:none!important}
.mv2-foot-src{position:absolute!important;left:-10000px!important;top:0!important}
/* LA BAGUETTE MAGIQUE (JM, 14/10) : au bout a droite du pied de page, ronde ; son contour pulse du jaune au blanc pour qu'on la voie. */
.mv2-foot-wand{position:absolute;top:50%;right:0;transform:translateY(-50%);width:36px;height:36px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;border:2px solid #facc15;background:#fff;color:#854d0e;cursor:pointer;
  animation:mv2WandGlow 1.6s ease-in-out infinite}
.mv2-foot-wand[hidden]{display:none}
.mv2-foot-wand svg{width:18px;height:18px;flex:none}
.mv2-foot-wand:hover{background:#fefce8}
@keyframes mv2WandGlow{
  0%,100%{border-color:#facc15;box-shadow:0 0 0 2px rgba(250,204,21,.45),0 0 12px 3px rgba(250,204,21,.65)}
  50%{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 16px 5px rgba(255,255,255,.85)}}
@media (prefers-reduced-motion:reduce){.mv2-foot-wand{animation:none}}
.mv2-btn-danger{color:var(--badge-bad,#d5271f);border-color:rgba(213,39,31,.3);background:#fdf3f2}
.mv2-cell-end{justify-content:flex-end}
.mv2-head-title{margin:0;font-size:var(--text-3xl);font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Le titre et, dessous, le fil d'Ariane (JM, 13/10 : « Header sous les titres : crumble de navigation ») : le fil ne se coupe pas a la
   largeur de la case du titre, il deborde a droite sur l'en-tete. */
.mv2-title-box{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.mv2-title-row{display:flex;align-items:center;min-width:0}
.mv2-crumbs{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;line-height:1.3;color:var(--muted,#6b7280);white-space:nowrap}
.mv2-crumbs a{color:inherit;text-decoration:none}
.mv2-crumbs a:hover{color:var(--red,#a6192e);text-decoration:underline;text-underline-offset:2px}
.mv2-crumb-here{color:var(--text,#1f2937);font-weight:600}
.mv2-crumb-sep{color:#c4c4cc}
.mv2-header-left,.mv2-header-right{display:flex;align-items:center;gap:16px;min-width:0}
.mv2-tenant{font-size:var(--tenant-size);opacity:var(--tenant-opacity);font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv2-scope{display:flex;gap:6px}
.mv2-scope select{border:1px solid var(--line);border-radius:var(--radius);padding:6px 10px;font:inherit;font-size:var(--text-md);background:#fff;color:var(--text);max-width:200px}
.mv2-scope select.on{border-color:var(--argus);color:var(--argus);font-weight:700}
.mv2-bell{position:relative;color:var(--muted);display:grid;place-items:center;text-decoration:none}
.mv2-bell:hover{color:var(--argus)}
.mv2-bell-badge{position:absolute;top:-7px;right:-9px;min-width:var(--badge-h);height:var(--badge-h);padding:0 5px;border-radius:var(--badge-radius);
  background:var(--badge-bg);border:var(--badge-bw) solid var(--badge-border);color:var(--badge-color);font-size:var(--badge-fs);font-weight:var(--badge-fw);
  display:flex;align-items:center;justify-content:center}
.mv2-bell-badge.critical{background:var(--badge-imp-bg);border-color:var(--badge-imp-border);color:var(--badge-imp-color)}
/* Le nom, et « Deconnexion » centre dessous (JM, 08/10 : pas de trigramme). */
.mv2-user{display:flex;flex-direction:column;align-items:center;line-height:1.25}
.mv2-user-name{font-weight:800;font-size:var(--user-name-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0}
.mv2-logout{display:inline-block;margin-top:4px;font-size:var(--text-xs);font-weight:600;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.mv2-logout:hover{background:var(--bad-bg);color:var(--argus);border-color:var(--argus)}
/* La pastille d'instance et le build, sans la version (JM, 08/10). */
.mv2-build{font-size:var(--text-xs);color:var(--muted);white-space:nowrap}

/* ===== CORPS : le volet, puis la colonne de la page (contenu + pied de page) ===== */
.mv2-body{display:flex;align-items:flex-start}
.mv2-nav{flex:0 0 var(--nav-w);width:var(--nav-w);position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));
  display:flex;flex-direction:column;background:var(--nav-bg);border-right:var(--line-w) solid var(--line-c);
  transition:width var(--dur-slow) var(--ease),flex-basis var(--dur-slow) var(--ease)}
.mv2-nav-items{flex:1;min-height:0;overflow-y:auto;padding:8px 12px 24px;scrollbar-width:none}
.mv2-nav-items::-webkit-scrollbar{display:none}
/* Des entrees cachees au-dessus ou en dessous (le volet defile sans barre) : un badge rond flechee, centre (JM, 09/10). */
.mv2-nav-more{position:absolute;left:50%;transform:translateX(-50%);z-index:5;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;background:var(--panel);color:var(--muted);
  border:1px solid var(--line);box-shadow:var(--shadow-md);transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.mv2-nav-more[hidden]{display:none}
.mv2-nav-more:hover{color:var(--argus);border-color:var(--argus)}
.mv2-nav .mv2-nav-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* LE PIED DU VOLET (JM, 08/10) : l'utilisateur et / ou le build places « en bas a gauche » — de la hauteur du pied de page,
   aligne sur lui ; le menu raccourcit d'autant. Vide, il n'existe pas. */
.mv2-nav-foot{flex:0 0 var(--footer-h);height:var(--footer-h);display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 12px;border-top:var(--line-w) solid var(--line-c)}
.mv2-nav-foot:empty{display:none}
/* L'utilisateur ET le build au pied du volet (JM, 10/10 : « en aucun cas le nom du user peut se retrouver en bas à gauche sur
   2 lignes ! ») : le nom au-dessus de « Deconnexion », le build a droite ; quand le nom n'a pas la place a cote du build
   (mv2-foot-wrap, pose par le script de la coquille), le build descend a cote de « Deconnexion » et le nom prend toute la
   largeur — au-dela, il se coupe (points de suspension), jamais sur deux lignes. */
.mv2-nav-foot:has(.mv2-user):has(.mv2-build){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name build" "logout build";
  align-content:center;align-items:center;column-gap:8px;row-gap:2px}
.mv2-nav-foot:has(.mv2-build) .mv2-user{display:contents}
.mv2-nav-foot:has(.mv2-build) .mv2-user-name{grid-area:name;justify-self:center}
.mv2-nav-foot:has(.mv2-build) .mv2-logout{grid-area:logout;justify-self:center;margin-top:0}
.mv2-nav-foot:has(.mv2-user) .mv2-build{grid-area:build}
.mv2-nav-foot.mv2-foot-wrap:has(.mv2-user):has(.mv2-build){grid-template-columns:1fr auto auto 1fr;grid-template-areas:"name name name name" ". logout build ."}
/* Volet replie : le pied d'avant (le nom et le numero de build y sont caches). */
.nav-folded .mv2-nav-foot:has(.mv2-user):has(.mv2-build){display:flex}
.nav-folded .mv2-nav-foot:has(.mv2-build) .mv2-user{display:flex}
.mv2-link{display:flex;align-items:center;gap:var(--nav-gap);min-height:calc(var(--nav-text) * 1.5 + 2 * var(--nav-item-pad-y));
  padding:var(--nav-item-pad-y) 11px;margin:1px 0;border-radius:var(--radius);font-weight:500;font-size:var(--nav-text);color:#5a5a62;
  text-decoration:none;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.mv2-link:hover{background:#f1f1f3;color:var(--text)}
.mv2-link.active{background:var(--bad-bg);color:var(--argus);font-weight:700}
.mv2-ico-slot{flex:0 0 var(--nav-icon);display:grid;place-items:center}
.mv2-nav svg{width:var(--nav-icon);height:var(--nav-icon);stroke-width:var(--nav-stroke)}
.mv2-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv2-section{margin:var(--nav-section-gap) 0 2px}
.mv2-section-head{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;cursor:pointer;
  padding:12px 11px 6px;font-family:inherit;font-size:var(--nav-section-text);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#9d9da4}
.mv2-section-head::after{content:'\2304';font-size:var(--text-base);color:#b3b3ba;transition:transform var(--dur-base) var(--ease)}
.mv2-section-head:hover{color:var(--text)}
.mv2-section-body .mv2-link{margin-left:var(--nav-sub-indent)}
.mv2-section.closed .mv2-section-head::after{transform:rotate(-90deg)}
.mv2-section.closed .mv2-section-body{display:none}
.mv2-nav-empty{padding:16px 11px;font-size:var(--text-base);color:var(--muted);line-height:1.5}

/* Volet replie : les icones seules, toutes les sections ouvertes ; la bande garde le seul bouton. */
.nav-folded .mv2-nav{flex-basis:var(--nav-w-folded);width:var(--nav-w-folded)}
.nav-folded .mv2-nav-items{padding:8px 8px 24px}
.nav-folded .mv2-section-body .mv2-link{margin-left:0}
.nav-folded .mv2-nav-foot{justify-content:center;padding:0 4px}
.nav-folded .mv2-nav-foot .mv2-user-name,.nav-folded .mv2-nav-foot .mv2-build-num{display:none}
.nav-folded .mv2-link{justify-content:center;padding:var(--nav-item-pad-y) 0;gap:0}
.nav-folded .mv2-label,.nav-folded .mv2-section-head,.nav-folded .mv2-nav-empty{display:none}
.nav-folded .mv2-section.closed .mv2-section-body{display:block}
.nav-folded .mv2-brand{flex-basis:var(--nav-w-folded);width:var(--nav-w-folded);padding:0;justify-content:center}
.nav-folded .mv2-logo{display:none}
.nav-folded .mv2-fold,.nav-folded .mv2-fold.au-coin{position:static;margin:0}

/* La colonne de la page a la hauteur de la fenetre sous l'en-tete : c'est le contenu qui defile, entre l'en-tete et le pied de
   page — sa barre de defilement horizontale (une page qui deborde a droite de l'ecran) est donc toujours visible, juste
   au-dessus du pied de page (JM, 09/10). */
.mv2-col{flex:1;min-width:0;height:calc(100vh - var(--header-h));display:flex;flex-direction:column}
/* Ses marges (JM, 10/10 : « diviser par 3 la marge gauche du viewport, ça sera le standard » ; « la marge bas est trop haute ») :
   9 px a gauche, en bas, et en haut depuis que la ligne de titre est partie dans l'en-tete (« pour gagner de l'espace
   vertical »). Le compositeur de l'Admin (Page.cshtml, chrome) les compte. */
.mv2-main{flex:1;min-height:0;overflow:auto;padding:9px 28px 9px 9px}

/* LE PIED DE PAGE STICKY (JM, 08/10) : toujours present, du bord droit du volet au bord droit de la page. */
.mv2-footer{position:sticky;bottom:0;z-index:50;height:var(--footer-h);display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 var(--footer-pad-x);background:var(--footer-bg);border-top:var(--line-w) solid var(--line-c);box-shadow:0 -6px 16px -12px rgba(15,15,20,.18)}
.mv2-footer-left,.mv2-footer-right{display:flex;align-items:center;gap:8px}
/* Le centre du pied : la pagination et le zoom des listes (JM, 09/10). */
.mv2-footer-center{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px}
.mv2-footer .mv2-btn{font-size:var(--footer-btn-text)}

/* ===== ELEMENTS COMMUNS ===== */
.mv2-banner{border-radius:var(--radius);padding:10px 14px;margin-bottom:16px;font-weight:600;font-size:var(--text-md)}
.mv2-banner.bad{background:var(--bad-bg);color:var(--argus)}
.mv2-banner.good{background:var(--good-bg);color:var(--good)}

/* ===== PETIT ECRAN : le volet passe par-dessus la page, le bouton de la bande l'ouvre ===== */
@media (max-width:900px){
  .mv2-tenant,.mv2-build,.mv2-scope{display:none}
  .mv2-brand{flex-basis:auto;width:auto;background:var(--header-bg);border-right:0}
  .mv2-nav{position:fixed;left:0;top:var(--header-h);z-index:90;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease);box-shadow:var(--shadow-md)}
  .nav-open .mv2-nav{transform:none}
  .nav-folded .mv2-nav{flex-basis:var(--nav-w);width:var(--nav-w)}
  .nav-folded .mv2-nav-items{padding:8px 12px 24px}
  .nav-folded .mv2-label,.nav-folded .mv2-section-head{display:revert}
  .nav-folded .mv2-logo{display:block}
  .mv2-main{padding:16px}
  .mv2-footer{padding:0 16px}
}

/* La pastille du nombre d'une entree du volet (JM, 11/10 : reglee dans Admin › Manager V2 › Menu) : le badge des Styles des
   contrôles, contre le bord droit ; volet replie, elle se pose en exposant sur l'icone. */
.mv2-link .mv2-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mv2-link .mv2-nav-count{margin-left:auto;flex:none}
.nav-folded .mv2-link{position:relative}
.nav-folded .mv2-link .mv2-nav-count{position:absolute;top:2px;right:4px;margin:0;transform:scale(.85)}

/* LES MOTIFS DE FOND (JM, 13/10 : « Motif », a gauche de « Couleur fond » dans chaque zone de Admin › Manager V2 › Menu › Voir la page) :
   la tuile choisie (ManagerPatterns, variables --x-pattern, « none » par defaut) se pose PAR-DESSUS la couleur de fond de la zone ; sa transparence (--x-pattern-t, 0 % par defaut) est un voile de cette meme couleur par-dessus le motif (--x-pattern-veil : le rendu est exactement celui d'un motif moins opaque). L'en-tete,
   la marque, le volet et le pied de page restent figes a la fenetre (fixed) : leurs motifs se raccordent, y compris sous la zone des outils
   de l'en-tete, qui a son propre fond. Petit ecran : la marque prend le fond, donc le motif, de l'en-tete. */
body{background-image:linear-gradient(var(--page-pattern-veil),var(--page-pattern-veil)),var(--page-pattern)}
.mv2-header,.mv2-header-main:has(> .mv2-header-left > .mv2-band) > .mv2-header-right{background-image:linear-gradient(var(--header-pattern-veil),var(--header-pattern-veil)),var(--header-pattern);background-attachment:fixed}
.mv2-brand{background-image:linear-gradient(var(--brand-pattern-veil),var(--brand-pattern-veil)),var(--brand-pattern);background-attachment:fixed}
.mv2-nav{background-image:linear-gradient(var(--nav-pattern-veil),var(--nav-pattern-veil)),var(--nav-pattern);background-attachment:fixed}
.mv2-footer{background-image:linear-gradient(var(--footer-pattern-veil),var(--footer-pattern-veil)),var(--footer-pattern);background-attachment:fixed}
@media (max-width:900px){ .mv2-brand{background-image:linear-gradient(var(--header-pattern-veil),var(--header-pattern-veil)),var(--header-pattern)} }