/* 
minadg-design-system
main css pour toutes les appli
Échelle recalibrée à ~90% (polices, titres, espacements) pour correspondre au rendu de référence.
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=Roboto:wght@400;500;600;700&display=swap');

/* tokens */
:root{
  --ink:#111;--paper:#fff;--line:#e3e2dd;--line-strong:#111;--muted:#6f6f6a;--focus:var(--ink);--danger:#b41c1c;
  --font1:'Roboto','Archivo Black',system-ui,sans-serif;--font1-span:'Roboto','IBM Plex Mono',monospace;--font2:'Roboto','IBM Plex Sans',sans-serif;
  --r-xs:2px;--r-sm:3px;--r-md:5px;--r-lg:8px;--r-pill:999px;--r-btn:var(--r-sm);
  --shadow-xs:0 1px 3px color-mix(in srgb,var(--ink) 10%,transparent);--shadow-sm:0 3px 10px color-mix(in srgb,var(--ink) 8%,transparent);--shadow-md:0 8px 24px color-mix(in srgb,var(--ink) 10%,transparent);--shadow-lg:0 12px 32px color-mix(in srgb,var(--ink) 16%,transparent);
  --veil-1:color-mix(in srgb,var(--paper) 12%,transparent);--veil-2:color-mix(in srgb,var(--paper) 18%,transparent);--veil-border:color-mix(in srgb,var(--paper) 25%,transparent);--veil-border-hover:color-mix(in srgb,var(--paper) 45%,transparent);
  --dur:.16s;--ease:cubic-bezier(.4,0,.2,1)
}

/* reset / structure de base */
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--paper)!important;color:var(--ink);width:100%;height:100%;height:100dvh;margin:0;padding:0;-webkit-font-smoothing:antialiased}
body{font-family:'Roboto',var(--font2),system-ui,sans-serif;font-size:14px;overflow:hidden;overscroll-behavior:none;padding-left:0!important;padding-right:0!important}
input,select,button,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--ink);color:var(--paper)}

/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border:2px solid var(--paper);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* typo */
h1{margin:0;font-family:var(--font1);font-size:clamp(25px,7.2vw,43px);font-weight:600;line-height:1.25;letter-spacing:normal}
h1 span{display:block;margin-top:7px;color:var(--muted);font:500 .4em var(--font1-span);text-transform:uppercase}
h2{margin:0;font-family:var(--font2);font-weight:600;font-size:clamp(16px,2.9vw,18px);letter-spacing:-.005em}
p{margin:0;line-height:1.55}
.mono{font-family:var(--font1-span)}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--font1-span);font-size:clamp(10px,1.6vw,12px);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.mark{font-size:clamp(18px,3.2vw,22px);line-height:1;display:inline-flex}

/* en-tête de page générique */
header.page-header{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:clamp(7px,2.7vw,11px);width:100%;margin-bottom:clamp(13px,3.6vw,18px);padding-bottom:11px;border-bottom:2px solid var(--ink)}
.statement{max-width:none;width:100%;text-align:justify;margin:0;color:var(--muted);font-size:clamp(13px,3.2vw,16px);line-height:1.6}

/* cadre média générique */
.media-frame{width:100%;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--paper);aspect-ratio:16/10}
.media-frame img,.media-frame video{display:block;width:100%;height:100%;object-fit:cover}
.media-frame.ratio-square{aspect-ratio:1/1}
.media-frame.ratio-wide{aspect-ratio:21/9}

/* boutons */
button{font-family:var(--font1-span);font-size:clamp(12px,2vw,14px);font-weight:500;cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-btn);padding:9px 16px;display:inline-flex;align-items:center;gap:5px;line-height:1;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);-webkit-tap-highlight-color:transparent}
button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
button:active{transform:scale(.97)}
button:disabled,button[disabled],input:disabled,select:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
button.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
button.topbar-btn{background:var(--veil-1);border:1px solid var(--veil-border);color:var(--paper);border-radius:var(--r-btn);padding:7px 13px;font-family:'IBM Plex Sans',sans-serif;font-size:clamp(13px,2.2vw,14px);font-weight:500;display:flex;align-items:center;gap:5px;white-space:nowrap;transition:background var(--dur) var(--ease)}
button.topbar-btn:hover{background:var(--veil-2)}
button.chip-btn{padding:5px 3px;font-size:clamp(12px,2vw,14px);font-weight:500;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}
button.icon-btn{background:transparent;border:none;width:23px;height:23px;border-radius:var(--r-xs);font-size:clamp(13px,2.2vw,14px);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
button.icon-btn:hover{background:color-mix(in srgb,var(--ink) 6%,var(--paper));color:var(--ink)}
button.tool-btn{background:transparent;border:none;width:38px;height:38px;border-radius:var(--r-btn);font-size:clamp(16px,2.9vw,18px);display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none;position:relative;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
button.tool-btn:hover{background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
button.tool-btn.active{background:var(--ink);color:var(--paper)}

/* topbar */
header#topbar{background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:13px;margin:0;padding:0 14px;height:54px;flex:none;z-index:20;border-bottom:none}
#logo{display:flex;align-items:center;gap:7px;white-space:nowrap;min-width:0;flex:none}
#logo h1{font-size:clamp(15px,2.7vw,17px);font-weight:600;margin:0;letter-spacing:.2px;font-family:'IBM Plex Sans',sans-serif;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#appLogo{color:var(--paper)}
#topbarCenter{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#topbarEnd{flex:none;display:flex;align-items:center;gap:7px;margin-left:auto}
.topbar-icon-btn{width:32px;height:32px;flex:none;padding:0;background:var(--veil-1);border:1px solid var(--veil-border);color:var(--paper);border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;font-size:clamp(14px,2.3vw,15px);transition:background var(--dur) var(--ease)}
.topbar-icon-btn:hover{background:var(--veil-2)}
.topbar-icon-btn svg{display:block;width:14px;height:14px}

/* menu de bascule entre applis */
#appMenu{position:fixed;top:54px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);z-index:40;max-height:0;overflow:hidden;transition:max-height var(--dur) var(--ease)}
#appMenu.open{max-height:330px}

/* lien accueil */
#appMenuHome{display:flex;align-items:center;gap:7px;flex:none;padding:9px 14px;border-bottom:1px dashed var(--line);text-decoration:none;color:var(--ink);font-family:var(--font1-span);font-size:clamp(11px,1.8vw,13px);transition:background var(--dur) var(--ease)}
#appMenuHome:hover{background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
#appMenuHome .mark{font-size:clamp(14px,2.5vw,16px)}

/* liste des applications */
#appMenuScroll{display:flex;align-items:flex-start;gap:10px;overflow-x:auto;overflow-y:visible;padding:14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}

/* cartes */
.app-menu-item{position:relative;flex:0 0 190px;width:190px;min-height:128px;display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);text-decoration:none;color:var(--ink);scroll-snap-align:start;transition:width var(--dur) var(--ease),flex-basis var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.app-menu-item-icon{font-size:clamp(16px,2.7vw,20px);line-height:1;flex:none}
.app-menu-item-icon svg{width:24px;height:24px}
.app-menu-item-name{display:block;font-family:var(--font1-span);font-size:clamp(12px,2vw,14px);font-weight:500;line-height:1.25}
.app-menu-item-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(10px,1.6vw,12px);color:var(--muted);line-height:1.35}
.app-menu-item:hover{z-index:100;border-color:var(--ink);background:var(--paper);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.app-menu-item.active{background:var(--ink);border-color:var(--ink)}
.app-menu-item.active .app-menu-item-name,.app-menu-item.active .app-menu-item-desc{color:var(--paper)}

/* carte développée au survol */
@media(min-width:861px){
  .app-menu-item:hover{width:300px;flex-basis:300px;min-height:150px}
  .app-menu-item:hover .app-menu-item-desc{display:block;overflow:visible}
}

/* backdrop */
#appMenuBackdrop{display:none;position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 40%,transparent);z-index:35}
#appMenuBackdrop.show{display:block}

/* système */
@supports(padding:env(safe-area-inset-bottom)){.safe-bottom{padding-bottom:env(safe-area-inset-bottom)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* mobile */
@media(max-width:860px){
  header#topbar{height:50px}
  #appMenu{top:50px}
  #appMenu.open{max-height:calc(100dvh - 50px)}
  #appMenuScroll{align-items:stretch;padding:12px;overflow-x:auto;overflow-y:hidden}
  .app-menu-item{flex:0 0 220px;width:220px;min-height:130px}
  .app-menu-item:hover{transform:none;box-shadow:none}
}