/* ════════════════════════════════════════════════════════════════════════════ chrome.css — ruban (header) + pied de page (footer) UNIFIÉS MonMedAssist. Injectés par js/chrome.js sur toutes les pages → une seule source de vérité. Tokens --mmc-* autonomes (indépendants de app.css / auth.css) ; auto-thème clair/sombre via (theme.js). ════════════════════════════════════════════════════════════════════════════ */ :root{ --mmc-bg:#FCFAFB; --mmc-surface:#FFFFFF; --mmc-ink:#241820; --mmc-ink-soft:#6A5B64; --mmc-line:#ECE1E8; --mmc-magenta:#B4186E; --mmc-magenta-deep:#871F54; --mmc-magenta-soft:#F7E6EF; } :root[data-theme="dark"]{ --mmc-bg:#160d13; --mmc-surface:#1e131a; --mmc-ink:#F3E7EE; --mmc-ink-soft:#B79BAA; --mmc-line:#3a2732; --mmc-magenta:#E85AA0; --mmc-magenta-deep:#F0A9D0; --mmc-magenta-soft:#3A2230; } /* ── Ruban (header) ─────────────────────────────────────────────────────────── */ .mmc-header{position:sticky;top:0;z-index:80; background:color-mix(in srgb,var(--mmc-bg) 88%,transparent);backdrop-filter:blur(12px); border-bottom:1px solid var(--mmc-line);font-family:'Inter',system-ui,sans-serif; /* Alias pour le widget compte injecté par auth.js (styles mma- à fallback). */ --paper-2:var(--mmc-surface);--ink:var(--mmc-ink);--ink-soft:var(--mmc-ink-soft); --line:var(--mmc-line);--magenta:var(--mmc-magenta);--magenta-soft:var(--mmc-magenta-soft)} .mmc-nav{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center; justify-content:space-between;height:76px;gap:16px} .mmc-brand{display:flex;align-items:center;flex:none} .mmc-brand img{height:56px;width:auto;display:block} .mmc-links{display:flex;gap:26px;align-items:center;font-size:14.5px;font-weight:500;color:var(--mmc-ink-soft)} .mmc-links a{color:inherit;text-decoration:none;white-space:nowrap;transition:color .2s} .mmc-links a:hover{color:var(--mmc-magenta)} .mmc-links a.active{color:var(--mmc-magenta);font-weight:600} /* Lien gaté (ex. Quiz réservé au superviseur) : grisé, non cliquable pour les autres. */ .mmc-disabled{opacity:.5;cursor:not-allowed} .mmc-disabled:hover{color:inherit} /* ── Menus déroulants desktop (Décision clinique / Médicaments) ─────────────── */ .mmc-has-sub{position:relative;display:inline-flex;align-items:center} .mmc-sublabel{display:inline-flex;align-items:center;gap:5px;cursor:default;color:inherit; white-space:nowrap;transition:color .2s} .mmc-sublabel::after{content:"▾";font-size:10px;color:var(--mmc-ink-soft);transition:transform .2s} .mmc-has-sub:hover .mmc-sublabel{color:var(--mmc-magenta)} .mmc-has-sub:hover .mmc-sublabel::after{transform:rotate(180deg)} .mmc-has-sub.active .mmc-sublabel{color:var(--mmc-magenta);font-weight:600} .mmc-submenu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px); min-width:210px;background:var(--mmc-surface);border:1px solid var(--mmc-line);border-radius:12px; box-shadow:0 18px 44px -20px rgba(36,24,32,.35);padding:7px;opacity:0;visibility:hidden; transition:opacity .18s,transform .18s;z-index:90} .mmc-has-sub:hover .mmc-submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .mmc-submenu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} .mmc-submenu a{display:block;padding:10px 14px;border-radius:8px;font-size:14px;color:var(--mmc-ink);white-space:nowrap} .mmc-submenu a:hover{background:var(--mmc-magenta-soft);color:var(--mmc-magenta)} .mmc-submenu a.active{color:var(--mmc-magenta);font-weight:600} .mmc-right{display:flex;align-items:center;gap:12px} .mmc-theme{background:none;border:1px solid var(--mmc-line);border-radius:8px;padding:7px 10px; cursor:pointer;font-size:15px;line-height:1;color:var(--mmc-ink)} .mmc-burger{display:none;background:none;border:1px solid var(--mmc-line);border-radius:8px; padding:7px 11px;cursor:pointer;font-size:16px;line-height:1;color:var(--mmc-ink)} .mmc-mobile{display:none;flex-direction:column;background:var(--mmc-surface);border-bottom:1px solid var(--mmc-line)} .mmc-mobile.open{display:flex} .mmc-mobile a{padding:14px 24px;font-size:15px;font-weight:500;color:var(--mmc-ink); border-top:1px solid var(--mmc-line);text-decoration:none} .mmc-mobile a:hover{background:var(--mmc-magenta-soft);color:var(--mmc-magenta)} .mmc-mobile a.active{color:var(--mmc-magenta)} /* Groupes repliables (accordéon) sur mobile */ .mmc-mgroup{border-top:1px solid var(--mmc-line)} .mmc-mtop{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left; padding:14px 24px;font:600 15px 'Inter',system-ui,sans-serif;color:var(--mmc-ink); background:none;border:none;cursor:pointer} .mmc-mtop .mmc-caret{color:var(--mmc-ink-soft);transition:transform .25s;font-size:12px} .mmc-mgroup.open .mmc-mtop .mmc-caret{transform:rotate(180deg)} .mmc-msub{max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--mmc-magenta-soft)} .mmc-mgroup.open .mmc-msub{max-height:260px} .mmc-msub a{display:block;padding:12px 24px 12px 38px;font-size:14px;color:var(--mmc-ink-soft);border-top:1px solid var(--mmc-line)} .mmc-msub a:hover{color:var(--mmc-magenta)} .mmc-msub a.active{color:var(--mmc-magenta)} /* Entrée « thème » du menu burger (visible seulement sur mobile, cf. média ci-dessous). */ .mmc-mtheme{display:flex;align-items:center;gap:8px;width:100%;text-align:left; padding:14px 24px;font:600 15px 'Inter',system-ui,sans-serif;color:var(--mmc-ink); background:none;border:none;border-top:1px solid var(--mmc-line);cursor:pointer} .mmc-mtheme:hover{background:var(--mmc-magenta-soft);color:var(--mmc-magenta)} /* Mobile : le menu bascule en burger et l'icône thème du ruban est masquée (place gagnée). Le réglage clair/sombre reste accessible via .mmc-mtheme. */ @media(max-width:820px){.mmc-links{display:none}.mmc-burger{display:inline-flex}.mmc-theme{display:none}} /* ── Anti-flash : masque les pages protégées jusqu'à confirmation d'auth ────── La classe .mma-auth-pending est posée très tôt (js/guard.js dans ) puis retirée par MMAuth.requireAuth() une fois l'utilisateur confirmé — ou la page redirige vers login.html sans jamais dévoiler le contenu réservé. */ html.mma-auth-pending body{visibility:hidden} /* ── Sticky footer : le pied de page reste TOUJOURS en bas de la fenêtre ────── Body en colonne flex (aucune page ne fixe `display` sur body → pas de conflit) + `.mmc-footer{margin-top:auto}` : sur les pages au contenu court, l'espace libre est absorbé au-dessus du footer, qui est poussé en bas (plus de vide après lui). Sans effet sur les pages déjà plus hautes que la fenêtre. */ body{display:flex;flex-direction:column;min-height:100vh} /* ── Pied de page (footer) ──────────────────────────────────────────────────── */ .mmc-footer{margin-top:auto;background:var(--mmc-bg);border-top:1px solid var(--mmc-line);padding:54px 0 32px; font-family:'Inter',system-ui,sans-serif;color:var(--mmc-ink);line-height:1.6} .mmc-fwrap{max-width:1120px;margin:0 auto;padding:0 24px} .mmc-fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px} .mmc-fbrand img{height:56px;width:auto;display:block} .mmc-fcol h4{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--mmc-ink-soft); margin-bottom:14px;font-weight:700} .mmc-fcol a{display:block;font-size:.95rem;color:var(--mmc-ink);margin-bottom:10px;text-decoration:none} .mmc-fcol a:hover{color:var(--mmc-magenta)} .mmc-fcol.contact a{display:flex;align-items:flex-start;gap:9px} .mmc-fcol.contact a svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--mmc-magenta);stroke:currentColor} .mmc-fbottom{border-top:1px solid var(--mmc-line);padding-top:22px;display:flex;justify-content:space-between; flex-wrap:wrap;gap:12px;font-size:13px;color:var(--mmc-ink-soft)} .mmc-legal{display:flex;flex-wrap:wrap;gap:18px} .mmc-legal a{color:var(--mmc-ink-soft);text-decoration:none;transition:color .2s} .mmc-legal a:hover{color:var(--mmc-magenta)} @media(max-width:900px){.mmc-fgrid{grid-template-columns:1fr 1fr;gap:26px}} @media(max-width:600px){ .mmc-fgrid{grid-template-columns:1fr;gap:24px} .mmc-fbottom{flex-direction:column;gap:8px} .mmc-nav{height:60px}.mmc-brand img{height:46px} }