@import url('/design-tokens.css'); :root { --color-primary: #0d9488; --color-primary-dark: #0f766e; --color-primary-light: #012e27; --color-bg: #f8fafc; --color-bg-card: #ffffff; --color-bg-elevated: #f1f5f9; --color-text: #1e293b; --color-text-muted: #64748b; --color-border: #e2e8f0; --color-hero-bg: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #14b8a6 100%); --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); --radius: 12px; --radius-lg: 16px; --font: 'Inter', 'Segoe UI', system-ui, sans-serif; /* Grille 8px */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-8: 64px; --prose-testimonial: 42rem; --prose-faq: 40rem; /* Contraste renforcé (WCAG) — surtout .highlight et boutons secondaires */ --color-highlight-text: #064e3b; --color-highlight-mark: rgba(6, 78, 59, 0.14); --btn-outline-fg: #0a5c52; --btn-outline-border: #0d9488; --btn-ghost-hover-bg: rgba(15, 118, 110, 0.08); --control-height: 44px; --radius-sm: 8px; --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent); /* Encoches / PWA standalone — utilisé avec viewport-fit=cover */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* Accueil — zone wilaya & bannières (même famille que .section-stats / --color-primary) */ --home-wilaya-zone-bg: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg)); --home-wilaya-free-tint: color-mix(in srgb, #34d399 12%, #ecfdf5); --home-wilaya-free-edge: color-mix(in srgb, var(--color-primary) 35%, #a7f3d0); --home-wilaya-free-accent: #047857; --home-wilaya-paid-tint: color-mix(in srgb, var(--color-primary) 6%, #f1f5f9); --home-wilaya-paid-edge: color-mix(in srgb, var(--color-primary) 22%, #cbd5e1); --home-wilaya-paid-accent: var(--color-primary-dark); } /* Apparence : indice pour scrollbars / champs natifs ; site-theme.js fixe ensuite light ou dark sur . */ html { color-scheme: light dark; } html[data-theme="dark"], html.theme-dark { /* Teal principal aligné admin / quiz — lisible, moins « néon » que #2dd4bf */ --color-primary: #14b8a6; /* Bas de gradient boutons + texte sur fonds teintés (ex. badges drawer) */ --color-primary-dark: #0f766e; --color-primary-light: #99f6e4; /* Profondeur : canevas très bas, cartes intermédiaires, surfaces relevées */ --color-bg: #020617; --color-bg-card: #0f172a; --color-bg-elevated: #1e293b; --color-text: #f1f5f9; --color-text-muted: #8b9cb8; --color-border: color-mix(in srgb, #64748b 42%, #0f172a 58%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 0 color-mix(in srgb, var(--color-primary) 6%, transparent); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.42), 0 2px 4px -2px rgba(0, 0, 0, 0.35), 0 12px 24px -16px color-mix(in srgb, var(--color-primary) 14%, transparent); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.48), 0 4px 6px -4px rgba(0, 0, 0, 0.38), 0 24px 48px -24px color-mix(in srgb, var(--color-primary) 12%, transparent); --color-highlight-text: #a7f3d0; --color-highlight-mark: color-mix(in srgb, var(--color-primary) 22%, transparent); --btn-outline-fg: #5eead4; --btn-outline-border: color-mix(in srgb, var(--color-primary) 72%, #94a3b8 28%); --btn-ghost-hover-bg: color-mix(in srgb, var(--color-primary) 10%, rgba(148, 163, 184, 0.08)); /* Accueil wilaya / bannières — même famille teal + ardoise (plus d’émeraude isolée) */ --home-wilaya-zone-bg: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg)); --home-wilaya-free-tint: color-mix(in srgb, var(--color-primary) 16%, var(--color-bg)); --home-wilaya-free-edge: color-mix(in srgb, var(--color-primary) 38%, var(--color-bg-elevated)); --home-wilaya-free-accent: #5eead4; --home-wilaya-paid-tint: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)); --home-wilaya-paid-edge: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); --home-wilaya-paid-accent: #5eead4; } html[data-theme="dark"] .logo, html.theme-dark .logo, html[data-theme="dark"] .hero-trust-icon, html.theme-dark .hero-trust-icon, html[data-theme="dark"] .how-step-icon, html.theme-dark .how-step-icon, html[data-theme="dark"] .testimonial-badge, html.theme-dark .testimonial-badge { color: var(--color-primary); } /* Lien « Aller au contenu » (premier focus clavier — même principe que l’admin) */ .skip-to-main { position: absolute; top: -120px; inset-inline-start: max(12px, env(safe-area-inset-left, 0px)); z-index: 10001; padding: 10px 20px; background: #0f766e; color: #fff; font-weight: 600; font-size: 0.9375rem; border-radius: var(--s-1); text-decoration: none; box-shadow: var(--shadow-lg); transition: top 0.2s ease, box-shadow 0.2s ease; } .skip-to-main:hover { color: #fff; background: #0d5c52; } .skip-to-main:focus { top: max(12px, env(safe-area-inset-top, 0px)); outline: 3px solid #fff; outline-offset: 3px; } html[data-theme="dark"] .skip-to-main:focus, html.theme-dark .skip-to-main:focus { outline-color: #fbbf24; } @media (prefers-reduced-motion: reduce) { .skip-to-main { transition: none; } } .main-content:focus { outline: none; } .main-content:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary) 55%, transparent); outline-offset: 4px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; max-width: 100%; } @supports not (overflow: clip) { html { overflow-x: hidden; } } body { font-family: var(--font); line-height: 1.6; color: var(--color-text); background: var(--color-bg); overflow-x: clip; max-width: 100%; } @supports not (overflow: clip) { body { overflow-x: hidden; } } a { color: inherit; text-decoration: none; } .container { max-width: 1100px; margin: 0 auto; padding: 0 max(var(--s-3), var(--safe-right)) 0 max(var(--s-3), var(--safe-left)); } /* Header — barre premium (sticky, glass, section active, drawer avancé) */ .main-header { position: sticky; top: 0; z-index: 100; padding-top: var(--safe-top); background: color-mix(in srgb, var(--color-bg-card) 86%, transparent); backdrop-filter: blur(16px) saturate(1.22); -webkit-backdrop-filter: blur(16px) saturate(1.22); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent); /* Liseré clair très fin en haut (effet "verre dépoli premium") + ombre de base discrète */ box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 1px 0 color-mix(in srgb, var(--color-border) 45%, transparent); transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease; } html[data-theme="dark"] .main-header, html.theme-dark .main-header { background: color-mix(in srgb, var(--color-bg-card) 78%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 1px 0 color-mix(in srgb, #000 40%, transparent); } .main-header.is-scrolled { background: color-mix(in srgb, var(--color-bg-card) 95%, transparent); border-bottom-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent), 0 6px 18px -8px rgba(15, 23, 42, 0.14), 0 22px 48px -28px color-mix(in srgb, var(--color-primary) 18%, transparent); } html[data-theme="dark"] .main-header.is-scrolled, html.theme-dark .main-header.is-scrolled { background: color-mix(in srgb, var(--color-bg-card) 90%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent), 0 8px 32px -8px rgba(0, 0, 0, 0.52), 0 22px 50px -22px color-mix(in srgb, var(--color-primary) 14%, transparent); } .nav-accent-line { position: relative; height: 2px; width: 100%; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--color-primary) 35%, transparent) 8%, var(--color-primary-dark) 28%, var(--color-primary) 50%, color-mix(in srgb, var(--color-primary) 72%, #fff) 70%, color-mix(in srgb, var(--color-primary) 35%, transparent) 92%, transparent 100% ); opacity: 0.78; transform: scaleX(0.94); transform-origin: center; transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.3s ease; overflow: hidden; } /* Scintillement subtil qui traverse la ligne d'accent une fois scrollé */ .nav-accent-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, #fff 75%, transparent) 50%, transparent 100% ); transform: translateX(-110%); pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } .main-header.is-scrolled .nav-accent-line { transform: scaleX(1); opacity: 1; } .main-header.is-scrolled .nav-accent-line::after { opacity: 0.55; animation: nav-accent-shimmer 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: 0.4s; } @keyframes nav-accent-shimmer { 0% { transform: translateX(-110%); } 60%, 100% { transform: translateX(110%); } } @media (prefers-reduced-motion: reduce) { .main-header.is-scrolled .nav-accent-line::after { animation: none; opacity: 0; } } .nav { max-width: 1240px; margin: 0 auto; padding: 0 max(var(--s-3), var(--safe-right)) 0 max(var(--s-3), var(--safe-left)); } /* Pages sans .nav-inner (quiz-select, légal, 404…) */ .nav:not(:has(.nav-inner)) { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; min-height: 64px; padding: var(--s-2) max(var(--s-3), var(--safe-right)) var(--s-2) max(var(--s-3), var(--safe-left)); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 64px; padding: var(--s-1) 0; transition: min-height 0.3s ease, padding 0.3s ease; } .main-header.is-scrolled .nav-inner { min-height: 56px; padding: 6px 0; } .nav-toolbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .site-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent); border-radius: 50%; background: linear-gradient( 155deg, color-mix(in srgb, var(--color-bg-card) 96%, transparent) 0%, color-mix(in srgb, var(--color-bg) 92%, var(--color-bg-card)) 100% ); color: var(--color-text); cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 1px 2px color-mix(in srgb, #0f172a 6%, transparent); transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.2s ease, box-shadow 0.25s ease; } .site-theme-toggle:hover { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent), 0 4px 14px -2px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 0 0 4px color-mix(in srgb, var(--color-primary) 8%, transparent); } .site-theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .site-theme-toggle:active { transform: scale(0.94); } html[data-theme="dark"] .site-theme-toggle, html.theme-dark .site-theme-toggle { background: linear-gradient( 155deg, color-mix(in srgb, var(--color-bg-card) 100%, transparent) 0%, color-mix(in srgb, #0f172a 50%, var(--color-bg-card)) 100% ); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 1px 2px rgba(0, 0, 0, 0.45); } .site-theme-toggle .site-theme-icon--moon { display: none; } html[data-theme="dark"] .site-theme-toggle .site-theme-icon--sun, html.theme-dark .site-theme-toggle .site-theme-icon--sun { display: none; } html[data-theme="dark"] .site-theme-toggle .site-theme-icon--moon, html.theme-dark .site-theme-toggle .site-theme-icon--moon { display: block; } .nav-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent); border-radius: 12px; background: linear-gradient( 155deg, color-mix(in srgb, var(--color-bg-card) 96%, transparent) 0%, color-mix(in srgb, var(--color-bg) 92%, var(--color-bg-card)) 100% ); color: var(--color-text); cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 1px 2px color-mix(in srgb, #0f172a 6%, transparent); transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.2s ease, box-shadow 0.25s ease; } .nav-menu-toggle:hover { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent), 0 4px 14px -2px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 0 0 4px color-mix(in srgb, var(--color-primary) 8%, transparent); } .nav-menu-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .nav-menu-toggle:active { transform: scale(0.96); } html[data-theme="dark"] .nav-menu-toggle, html.theme-dark .nav-menu-toggle { background: linear-gradient( 155deg, color-mix(in srgb, var(--color-bg-card) 100%, transparent) 0%, color-mix(in srgb, #0f172a 50%, var(--color-bg-card)) 100% ); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 1px 2px rgba(0, 0, 0, 0.45); } .mobile-app-menu-toggle { display: none; } /* Hidden by default (desktop and non-mobile contexts). */ .mobile-app-backdrop, .mobile-app-drawer { display: none; } .nav-menu-bars { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 22px; height: 18px; position: relative; } .nav-menu-bar { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease, top 0.35s ease; transform-origin: center; } body.nav-drawer-open .nav-menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-drawer-open .nav-menu-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } body.nav-drawer-open .nav-menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.nav-drawer-open { touch-action: none; overscroll-behavior: none; } body.nav-drawer-open #main-content { pointer-events: none; filter: blur(4px); opacity: 0.88; transition: filter 0.24s ease, opacity 0.24s ease; -webkit-user-select: none; user-select: none; } .nav-backdrop { position: fixed; inset: 0; z-index: 98; background: linear-gradient( 155deg, color-mix(in srgb, #0f172a 68%, transparent) 0%, color-mix(in srgb, var(--color-primary-dark) 52%, transparent) 38%, color-mix(in srgb, #0c4a3e 58%, transparent) 100% ); backdrop-filter: blur(18px) saturate(1.18) brightness(0.88); -webkit-backdrop-filter: blur(18px) saturate(1.18) brightness(0.88); box-shadow: inset 0 0 140px rgba(2, 8, 23, 0.42); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.38s ease; } .nav-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } html[data-theme="dark"] .nav-backdrop, html.theme-dark .nav-backdrop { background: linear-gradient( 155deg, rgba(2, 6, 23, 0.76) 0%, color-mix(in srgb, var(--color-primary) 22%, transparent) 45%, rgba(2, 6, 23, 0.82) 100% ); backdrop-filter: blur(20px) saturate(1.05) brightness(0.55); -webkit-backdrop-filter: blur(20px) saturate(1.05) brightness(0.55); box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.55); } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 99; width: min(368px, 92vw); max-width: 100%; height: 100dvh; max-height: 100dvh; background: linear-gradient( 168deg, color-mix(in srgb, var(--color-bg-card) 100%, transparent) 0%, color-mix(in srgb, var(--color-bg) 18%, var(--color-bg-card)) 48%, color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-card)) 100% ); border-left: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-primary)); box-shadow: -1px 0 0 color-mix(in srgb, #fff 40%, transparent), -24px 0 64px -16px rgba(15, 23, 42, 0.18), -8px 0 32px -8px color-mix(in srgb, var(--color-primary) 12%, transparent); padding: 0; transform: translateX(100%); visibility: hidden; transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.44s, box-shadow 0.35s ease; overflow: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0; box-sizing: border-box; } html[data-theme="dark"] .nav-drawer, html.theme-dark .nav-drawer { background: linear-gradient( 168deg, color-mix(in srgb, var(--color-bg-card) 100%, #0f172a) 0%, color-mix(in srgb, #0f172a 55%, var(--color-bg-card)) 100% ); border-left-color: color-mix(in srgb, #334155 70%, var(--color-primary)); box-shadow: -28px 0 72px -12px rgba(0, 0, 0, 0.62), -1px 0 0 color-mix(in srgb, #fff 6%, transparent); } html[data-theme="dark"] .nav-drawer-head, html.theme-dark .nav-drawer-head { background: color-mix(in srgb, var(--color-bg-card) 78%, transparent); } .nav-drawer-glow { position: absolute; top: 0; left: 0; right: 0; height: 140px; background: radial-gradient(ellipse 95% 85% at 88% -15%, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 62%), radial-gradient(ellipse 70% 60% at 12% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 55%); pointer-events: none; z-index: 0; opacity: 0.9; } body.nav-drawer-open .nav-drawer { transform: translateX(0); visibility: visible; } body.nav-drawer-open .nav-drawer > * { animation: nav-drawer-content-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; } body.nav-drawer-open .nav-drawer-links li { animation: nav-drawer-item-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(0.05s + var(--nav-i, 0) * 0.05s); } @keyframes nav-drawer-item-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } @keyframes nav-drawer-content-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.nav-drawer-open .nav-drawer-links li { animation: none; } body.nav-drawer-open .nav-drawer > * { animation: none; } .nav-menu-bar { transition: none; } .nav-drawer, .nav-backdrop, .nav-drawer-links a, .nav-drawer-spotlight, .nav-drawer-foot-btn { transition: none !important; } .nav-drawer-spotlight:hover { transform: none; } .nav-backdrop, .nav-backdrop.is-visible { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } } .nav-drawer-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, var(--safe-right)) 14px max(14px, var(--safe-left)); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary)); background: color-mix(in srgb, var(--color-bg-card) 72%, transparent); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); position: relative; z-index: 2; } .nav-drawer-head::after { content: ''; position: absolute; inset-inline: 14px; bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--color-primary) 35%, transparent) 22%, color-mix(in srgb, var(--color-primary) 35%, transparent) 78%, transparent ); opacity: 0.55; pointer-events: none; } .nav-drawer-back-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 16px 8px 11px; border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border)); border-radius: 999px; background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-bg)); color: var(--color-text); font-family: inherit; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.015em; cursor: pointer; box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 8%, transparent); transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.15s ease, box-shadow 0.22s ease; -webkit-tap-highlight-color: transparent; } .nav-drawer-back-btn:hover { border-color: color-mix(in srgb, var(--color-primary) 52%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 11%, var(--color-bg-card)); color: var(--btn-outline-fg); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-primary) 28%, transparent); } .nav-drawer-back-btn:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 2px 10px -3px color-mix(in srgb, var(--color-primary) 35%, transparent); } .nav-drawer-back-btn:active { transform: scale(0.97); } .nav-drawer-back-icon { flex-shrink: 0; color: var(--color-primary); } a.nav-drawer-head-brand { display: flex; align-items: center; gap: 11px; min-width: 0; margin-inline-start: auto; margin-block: -6px; margin-inline-end: -8px; text-decoration: none; color: inherit; padding: 6px 8px; border-radius: 14px; transition: background 0.22s ease, box-shadow 0.22s ease; -webkit-tap-highlight-color: transparent; } a.nav-drawer-head-brand:hover { background: color-mix(in srgb, var(--color-primary) 9%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent); } a.nav-drawer-head-brand:focus-visible { outline: none; box-shadow: var(--focus-ring); } .nav-drawer-head-brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: start; } .nav-drawer-head-name { display: inline-flex; align-items: baseline; gap: 0.05em; font-weight: 800; font-size: 1.08rem; letter-spacing: -0.038em; line-height: 1.12; white-space: nowrap; } .nav-drawer-head-tagline { font-size: 0.68rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2; max-width: 11rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-drawer-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 11px; box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent), 0 2px 12px color-mix(in srgb, var(--color-primary) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); } .nav-drawer-logo--toolbar { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; } .nav-drawer-body { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px max(14px, var(--safe-right)) 12px max(14px, var(--safe-left)); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)) transparent; } .nav-drawer-body::-webkit-scrollbar { width: 5px; } .nav-drawer-body::-webkit-scrollbar-thumb { border-radius: 99px; background: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); } .nav-drawer-foot { flex-shrink: 0; position: relative; z-index: 2; padding: 14px max(14px, var(--safe-right)) calc(14px + env(safe-area-inset-bottom, 0px)) max(14px, var(--safe-left)); border-top: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent); background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-bg)); backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 -12px 40px -18px rgba(15, 23, 42, 0.12); } html[data-theme="dark"] .nav-drawer-foot, html.theme-dark .nav-drawer-foot { box-shadow: 0 -16px 48px -12px rgba(0, 0, 0, 0.45); } .nav-drawer-panel { margin-bottom: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--color-border) 78%, var(--color-primary)); background: color-mix(in srgb, var(--color-bg-card) 72%, var(--color-bg)); overflow: hidden; box-shadow: 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset, 0 10px 28px -18px rgba(15, 23, 42, 0.1); } html[data-theme="dark"] .nav-drawer-panel, html.theme-dark .nav-drawer-panel { box-shadow: 0 1px 0 color-mix(in srgb, #fff 5%, transparent) inset, 0 12px 32px -14px rgba(0, 0, 0, 0.45); } .nav-drawer-panel:last-child { margin-bottom: 4px; } .nav-drawer-panel .nav-drawer-section-label { margin: 16px 14px 8px; padding-inline-start: 12px; border-inline-start: 3px solid var(--color-primary); line-height: 1.2; } .nav-drawer-panel .nav-drawer-links li { border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent); } .nav-drawer-panel .nav-drawer-links li:last-child { border-bottom: none; } .nav-drawer-panel .nav-drawer-links a { margin: 0; border-radius: 0; position: relative; padding-inline-end: 2.25rem; } .nav-drawer-panel .nav-drawer-links a::after { content: ''; position: absolute; inset-inline-end: 16px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-inline-end: 2px solid var(--color-text-muted); border-block-end: 2px solid var(--color-text-muted); transform: rotate(-45deg); opacity: 0.4; transition: opacity 0.2s ease, border-color 0.2s ease; pointer-events: none; } .nav-drawer-panel .nav-drawer-links a:hover::after, .nav-drawer-panel .nav-drawer-links a:focus-visible::after { opacity: 0.95; border-color: var(--color-primary); } .nav-drawer-panel .nav-drawer-links a:focus-visible { outline: none; background: color-mix(in srgb, var(--color-primary) 10%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 38%, transparent); } .nav-drawer-panel .nav-drawer-status-card, .nav-drawer-panel .nav-drawer-activity-card { margin: 4px 10px 12px; } .nav-drawer-panel--account .nav-drawer-links:empty { display: none; } .nav-drawer-body > .nav-drawer-spotlight:first-of-type { margin-top: 0; } .nav-drawer-spotlight { display: flex; align-items: center; gap: 14px; padding: 15px 16px; margin-bottom: 12px; border-radius: 16px; background: linear-gradient( 145deg, color-mix(in srgb, var(--color-primary) 19%, var(--color-bg-card)) 0%, color-mix(in srgb, var(--color-primary-dark) 11%, var(--color-bg-card)) 100% ); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); color: var(--color-text); text-decoration: none; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.22s ease; position: relative; z-index: 1; box-shadow: 0 1px 0 color-mix(in srgb, #fff 38%, transparent) inset, 0 14px 36px -14px color-mix(in srgb, var(--color-primary) 32%, transparent); -webkit-tap-highlight-color: transparent; } html[data-theme="dark"] .nav-drawer-spotlight, html.theme-dark .nav-drawer-spotlight { box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset, 0 16px 40px -12px rgba(0, 0, 0, 0.55); } .nav-drawer-spotlight:hover { transform: translateY(-2px); box-shadow: 0 1px 0 color-mix(in srgb, #fff 45%, transparent) inset, 0 18px 40px -12px color-mix(in srgb, var(--color-primary) 38%, transparent); border-color: color-mix(in srgb, var(--color-primary) 48%, transparent); } .nav-drawer-spotlight:focus-visible { outline: none; box-shadow: 0 1px 0 color-mix(in srgb, #fff 38%, transparent) inset, var(--focus-ring), 0 14px 36px -14px color-mix(in srgb, var(--color-primary) 32%, transparent); } .nav-drawer-spotlight--context.is-context-limited { background: linear-gradient( 135deg, color-mix(in srgb, #f59e0b 18%, var(--color-bg-card)) 0%, color-mix(in srgb, #f59e0b 8%, var(--color-bg-card)) 100% ); border-color: color-mix(in srgb, #f59e0b 34%, var(--color-border)); } .nav-drawer-spotlight--context.is-context-full { background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 24%, var(--color-bg-card)) 0%, color-mix(in srgb, var(--color-primary-dark) 15%, var(--color-bg-card)) 100% ); } .nav-drawer-spotlight-icon { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); color: var(--color-primary); box-shadow: 0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset, 0 2px 8px -2px color-mix(in srgb, var(--color-primary) 22%, transparent); } .nav-drawer-spotlight-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; } .nav-drawer-spotlight-text strong { font-size: 1rem; font-weight: 700; } .nav-drawer-spotlight-text small { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 500; } .nav-drawer-spotlight-arrow { font-size: 1.15rem; color: color-mix(in srgb, var(--color-primary) 88%, var(--color-text-muted)); font-weight: 400; opacity: 0.85; } .nav-drawer-section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); margin: var(--s-2) 0 var(--s-1); padding-left: 4px; } .nav-drawer-links { list-style: none; } .nav-drawer-links li { border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); } .nav-drawer-links li:last-child { border-bottom: none; } .nav-drawer-links a { display: flex; align-items: center; gap: 12px; padding: 14px 12px; min-height: 52px; font-weight: 600; font-size: 0.95rem; color: var(--color-text); border-radius: var(--s-1); margin: 2px 0; transition: color 0.2s, background 0.2s, transform 0.2s ease; } .nav-drawer-link-icon { flex-shrink: 0; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; text-align: center; color: var(--color-primary); font-size: 0.62rem; line-height: 1; background: color-mix(in srgb, var(--color-primary) 11%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset; } html[data-theme="dark"] .nav-drawer-link-icon, html.theme-dark .nav-drawer-link-icon { box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset; } .nav-drawer-links a:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); transform: translateX(2px); } .nav-drawer-links a:active { background: color-mix(in srgb, var(--color-primary) 12%, transparent); } .nav-drawer-status-card { margin: 0 0 var(--s-2); padding: 14px 14px; border-radius: 14px; border: 1px solid var(--color-border); background: linear-gradient( 165deg, color-mix(in srgb, var(--color-bg-card) 94%, var(--color-bg)) 0%, color-mix(in srgb, var(--color-bg) 22%, var(--color-bg-card)) 100% ); box-shadow: 0 6px 20px -12px rgba(15, 23, 42, 0.12); } .nav-drawer-status-title { font-size: 0.9rem; font-weight: 700; color: var(--color-text); margin: 0 0 4px; } .nav-drawer-status-sub { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.45; margin: 0 0 8px; } .nav-drawer-status-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; border: 1px solid transparent; } .nav-drawer-status-card.is-guest { border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); } .nav-drawer-status-card.is-guest .nav-drawer-status-badge { background: color-mix(in srgb, var(--color-primary) 12%, transparent); border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); color: var(--color-primary-dark); } .nav-drawer-status-card.is-limited { border-color: color-mix(in srgb, #f59e0b 34%, var(--color-border)); background: color-mix(in srgb, #f59e0b 9%, var(--color-bg-card)); } .nav-drawer-status-card.is-limited .nav-drawer-status-badge { background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 32%, var(--color-border)); color: #92400e; } .nav-drawer-status-card.is-full { border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); } .nav-drawer-status-card.is-full .nav-drawer-status-badge { background: color-mix(in srgb, var(--color-primary) 14%, transparent); border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); color: var(--color-primary-dark); } .nav-drawer-activity-card { margin: 0 0 var(--s-2); padding: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)) 0%, color-mix(in srgb, var(--color-bg-card) 96%, transparent) 100% ); } .nav-drawer-activity-kicker { margin: 0 0 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); } .nav-drawer-activity-title { margin: 0 0 5px; font-size: 0.9rem; font-weight: 700; color: var(--color-text); } .nav-drawer-activity-sub { margin: 0 0 10px; font-size: 0.8rem; line-height: 1.45; color: var(--color-text-muted); } .nav-drawer-activity-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary-dark); font-size: 0.78rem; font-weight: 700; text-decoration: none; } .nav-drawer-activity-cta:hover { background: color-mix(in srgb, var(--color-primary) 20%, transparent); } .nav-drawer-footer { margin-top: 0; padding-top: 0; display: flex; flex-direction: column; gap: 10px; border-top: none; position: relative; z-index: 1; } .nav-drawer-footer[hidden] { display: none !important; } .nav-drawer-foot-btn { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.1rem; border-radius: 14px; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.02em; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.2s ease, background 0.2s ease; } .nav-drawer-foot-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .nav-drawer-foot-btn:active { transform: scale(0.98); } .nav-drawer-foot-btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); } .nav-drawer-foot-btn--ghost:hover { border-color: var(--color-primary); color: var(--btn-outline-fg); } html[data-theme="dark"] .nav-drawer-foot-btn--ghost:hover, html.theme-dark .nav-drawer-foot-btn--ghost:hover { color: var(--color-primary-light); } .nav-drawer-foot-btn--primary { background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 96%, #fff) 0%, var(--color-primary) 48%, var(--color-primary-dark) 100%); color: #fff; border-color: color-mix(in srgb, var(--color-primary-dark) 70%, #000); box-shadow: 0 2px 0 color-mix(in srgb, #fff 22%, transparent) inset, 0 8px 22px -8px color-mix(in srgb, var(--color-primary) 45%, transparent); } .nav-drawer-foot-btn--primary:hover { background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); border-color: var(--color-primary-dark); box-shadow: 0 2px 0 color-mix(in srgb, #fff 18%, transparent) inset, 0 12px 28px -6px color-mix(in srgb, var(--color-primary) 42%, transparent); } .nav-drawer-footer--logged { text-align: center; } .nav-drawer-logged-as { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 8px; } .nav-drawer-foot .nav-drawer-theme { margin-top: 10px; } .nav-drawer-theme { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 0; padding: 13px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--color-border) 92%, var(--color-primary)); background: color-mix(in srgb, var(--color-bg) 55%, var(--color-bg-card)); color: var(--color-text); cursor: pointer; font-family: inherit; box-shadow: 0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .nav-drawer-theme:hover { border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card)); } .nav-drawer-theme:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset; } .nav-drawer-theme-label { font-size: 0.875rem; font-weight: 600; } .nav-drawer-theme-toggle { width: 48px; height: 28px; border-radius: 999px; background: var(--color-border); position: relative; transition: background 0.3s ease; } html[data-theme="dark"] .nav-drawer-theme-toggle, html.theme-dark .nav-drawer-theme-toggle { background: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); } .nav-drawer-theme-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-bg-card); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1); } html[data-theme="dark"] .nav-drawer-theme-knob, html.theme-dark .nav-drawer-theme-knob { transform: translateX(20px); } .logo { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; color: var(--color-primary-dark); text-decoration: none; transition: transform 0.22s ease, opacity 0.2s ease; flex-shrink: 0; } .logo:hover { transform: translateY(-1px); opacity: 0.96; } div.logo.logo--quiz, span.logo.logo--quiz { cursor: default; pointer-events: none; user-select: none; } div.logo.logo--quiz:hover, span.logo.logo--quiz:hover { transform: none; opacity: 1; } .logo-mark { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; overflow: hidden; box-sizing: border-box; padding: 5px; /* Halo blanc en haut-gauche + lueur primaire en bas-droite empilés sur le dégradé de base (peint sous l'image car en background — l'image reste nette au premier plan) */ background: radial-gradient(circle at 28% 22%, color-mix(in srgb, #fff 45%, transparent), transparent 58%), radial-gradient(circle at 78% 82%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 62%), linear-gradient( 152deg, color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-card)) 0%, var(--color-bg-card) 50%, color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)) 100% ); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 78%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 18%, transparent), 0 1px 2px color-mix(in srgb, var(--color-primary) 14%, transparent), 0 6px 18px -4px color-mix(in srgb, var(--color-primary) 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); transition: box-shadow 0.3s ease, transform 0.3s ease; } .logo:hover .logo-mark { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 82%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 22%, transparent), 0 2px 4px color-mix(in srgb, var(--color-primary) 18%, transparent), 0 10px 24px -6px color-mix(in srgb, var(--color-primary) 32%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); } .logo-img { width: 100%; height: 100%; max-width: 34px; max-height: 34px; display: block; object-fit: contain; } .logo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.12rem; line-height: 1.12; min-width: 0; } .logo-name { display: inline-flex; flex-direction: row; align-items: baseline; gap: 0.05em; font-size: 1.24rem; font-weight: 800; letter-spacing: -0.038em; line-height: 1.05; min-width: 0; } .logo-name-major { color: var(--color-text); font-weight: 800; } .logo-name-accent { color: var(--color-primary); font-weight: 800; letter-spacing: -0.042em; } .logo-tagline { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.17em; color: var(--color-text-muted); } .logo--quiz .logo-tagline { display: none; } .logo--compact .logo-text { gap: 0; } .logo:not(:has(.logo-text)) > span { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; color: var(--color-text); } html[data-theme="dark"] .logo-mark, html.theme-dark .logo-mark { background: radial-gradient(circle at 28% 22%, color-mix(in srgb, #fff 18%, transparent), transparent 58%), radial-gradient(circle at 78% 82%, color-mix(in srgb, var(--color-primary) 28%, transparent), transparent 62%), linear-gradient( 152deg, color-mix(in srgb, var(--color-primary) 24%, var(--color-bg-card)) 0%, var(--color-bg-card) 50%, color-mix(in srgb, var(--color-primary) 16%, var(--color-bg-card)) 100% ); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 22%, transparent), 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 22px -4px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); } html[data-theme="dark"] .logo-name-major, html.theme-dark .logo-name-major { color: var(--color-text); } html[data-theme="dark"] .logo-name-accent, html.theme-dark .logo-name-accent { color: var(--color-primary); } @media (max-width: 520px) { .logo-tagline { display: none; } body.mqcm-logged-in .logo-tagline { display: block; } .logo-name { font-size: 1.12rem; } } /* === Liens vers l'accueil ("/") masqués pour les utilisateurs connectés === Un membre connecté est automatiquement redirigé de "/" vers "/profile", donc afficher un lien « Accueil » est redondant et perturbant. On ne touche PAS aux identités de marque (logo, brand-block) ni aux ancres internes (/#features, /#pricing, …) — uniquement les liens de navigation pointant vers la racine. */ body.mqcm-logged-in .nav-links > li:has(> a[href="/"]), body.mqcm-logged-in .nav-links--workspace > li:has(> a[href="/"]), body.mqcm-logged-in .nav-drawer-links > li:has(> a[href="/"]), body.mqcm-logged-in .footer-legal-mini > a[href="/"], body.mqcm-logged-in a.subscription-home-link[href="/"] { display: none !important; } @supports not selector(:has(*)) { /* Repli pour les très anciens navigateurs sans :has() — on cache au moins le , le
  • conservera sa puce mais sans contenu. */ body.mqcm-logged-in .nav-links a[href="/"]:not(.logo):not([class*="logo--"]), body.mqcm-logged-in .nav-links--workspace a[href="/"]:not(.logo):not([class*="logo--"]), body.mqcm-logged-in .nav-drawer-links a[href="/"]:not(.logo):not([class*="logo--"]) { display: none !important; } } .nav-links { list-style: none; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .nav--workspace { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 66px; padding: var(--s-1) max(var(--s-3), var(--safe-right)) var(--s-1) max(var(--s-3), var(--safe-left)); border-radius: 0; transition: min-height 0.28s ease, padding 0.28s ease, gap 0.28s ease; } .main-header.is-scrolled .nav--workspace { min-height: 58px; padding-top: 6px; padding-bottom: 6px; gap: 0.65rem; } .nav-context-chip { display: inline-flex; align-items: center; justify-content: center; padding: 0.28rem 0.6rem; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 800; color: var(--color-primary-dark); background: color-mix(in srgb, var(--color-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); white-space: nowrap; } .nav-links--workspace { margin: 0; padding: 0; gap: 0.35rem; } .nav-link-workspace { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.4rem 0.75rem; border-radius: 10px; font-size: 0.9rem; font-weight: 700; color: var(--color-text-muted); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* L’attribut HTML [hidden] perd face à display:inline-flex sans cette règle. */ .nav--workspace .nav-link-workspace[hidden] { display: none !important; } .nav-link-workspace:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); } .nav-link-workspace.active-link, .nav-link-workspace[aria-current='page'] { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 24%, transparent); } .nav-link-workspace--cta { color: #fff; background: var(--color-primary); border: 1px solid var(--color-primary); font-weight: 800; } .nav-link-workspace--cta:hover { color: #fff; background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .nav-link-workspace--cta.is-context-guest { color: #fff; background: var(--color-primary); border-color: var(--color-primary); } .nav-link-workspace--cta.is-context-limited { color: #7c2d12; background: color-mix(in srgb, #f59e0b 26%, #fff); border-color: color-mix(in srgb, #f59e0b 55%, transparent); } .nav-link-workspace--cta.is-context-full { color: #fff; background: var(--color-primary); border-color: var(--color-primary); } /* —— Navigation workspace (profil / QCM membre) : barre segmentée, focus, contraste —— */ .nav--workspace .nav-links--workspace { list-style: none; margin: 0; padding: 0; gap: 0.2rem; align-items: center; background: transparent; border: none; border-radius: 0; box-shadow: none; min-width: 0; } .nav--workspace .nav-link-workspace { text-decoration: none; border-radius: 999px; min-height: 40px; padding: 0.45rem 0.8rem; letter-spacing: 0.01em; white-space: nowrap; font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.16s ease; } .nav--workspace .nav-link-workspace:hover { transform: translateY(-1px); } .nav--workspace .nav-link-workspace:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 70%, transparent); outline-offset: 2px; } .nav--workspace .nav-link-workspace.active-link, .nav--workspace .nav-link-workspace[aria-current='page'] { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent); } .nav--workspace .nav-link-workspace--cta { border-radius: 999px; box-shadow: 0 3px 14px color-mix(in srgb, var(--color-primary) 32%, transparent); } .nav--workspace .nav-link-workspace--cta:hover { box-shadow: 0 5px 20px color-mix(in srgb, var(--color-primary) 38%, transparent); } .nav--workspace .nav-context-chip { box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 14%, transparent); } .nav--workspace .logo--compact { transition: opacity 0.2s ease, transform 0.2s ease; } .nav--workspace .logo--compact:hover { opacity: 0.92; transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .main-header, .nav--workspace, .nav--workspace .nav-link-workspace { transition: none !important; } .nav--workspace .nav-link-workspace:hover { transform: none; } .nav--workspace .logo--compact:hover { transform: none; } } html[data-theme='dark'] .nav--workspace .nav-links--workspace, html.theme-dark .nav--workspace .nav-links--workspace { background: transparent; border-color: transparent; box-shadow: none; } html[data-theme='dark'] .nav--workspace .nav-link-workspace.active-link, html[data-theme='dark'] .nav--workspace .nav-link-workspace[aria-current='page'], html.theme-dark .nav--workspace .nav-link-workspace.active-link, html.theme-dark .nav--workspace .nav-link-workspace[aria-current='page'] { color: color-mix(in srgb, var(--color-primary) 86%, #fff 14%); background: color-mix(in srgb, var(--color-primary) 18%, transparent); } @media (min-width: 901px) { .nav--workspace { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; min-height: 64px; padding-top: var(--s-1); padding-bottom: var(--s-1); } .main-header.is-scrolled .nav--workspace { min-height: 56px; padding-top: 6px; padding-bottom: 6px; } .nav--workspace .logo--compact { flex: 0 1 auto; min-width: 0; } .nav--workspace .nav-context-chip { flex: 0 0 auto; margin-right: 0.15rem; } .nav--workspace .nav-actions { flex: 0 0 auto; margin-left: auto; } .nav--workspace .nav-links--workspace { flex: 1 1 auto; justify-content: center; overflow: visible; min-height: 0; max-width: 100%; } } /* ========================================================================== D1 — Floating Glass Capsule (workspace nav, desktop ≥901px) ---------------------------------------------------------------------------- - Detache la nav comme une « île » flottante au-dessus du contenu. - Verre dépoli, anneau coloré subtil, ombre profonde, highlight interne. - Fallback solide si backdrop-filter indisponible. - N’affecte ni le mobile (<901px) ni les pages sans .nav--workspace. ========================================================================== */ @media (min-width: 901px) { /* Le header parent devient transparent : seule la capsule reste visible. */ .main-header:has(.nav--workspace), body.mqcm-logged-in .main-header:has(.nav--workspace), body.mqcm-logged-in .main-header:has(.nav--workspace).is-scrolled, html[data-theme='dark'] .main-header:has(.nav--workspace), html.theme-dark .main-header:has(.nav--workspace), html[data-theme='dark'] body.mqcm-logged-in .main-header:has(.nav--workspace), html.theme-dark body.mqcm-logged-in .main-header:has(.nav--workspace), html[data-theme='dark'] .main-header:has(.nav--workspace).is-scrolled, html.theme-dark .main-header:has(.nav--workspace).is-scrolled { background: transparent; border-bottom: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* La capsule flottante elle-même. */ .main-header:has(.nav--workspace) .nav--workspace { width: min(1240px, 100% - max(32px, calc(var(--safe-left) + var(--safe-right) + 24px))); margin-block: 10px 0; margin-inline: auto; padding: 8px 16px; min-height: 60px; border-radius: 22px; background: color-mix(in srgb, var(--color-bg-card) 72%, transparent); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent), 0 24px 56px -28px rgba(15, 23, 42, 0.42), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent); transition: margin 0.32s cubic-bezier(0.4, 0, 0.2, 1), padding 0.32s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.32s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease; } /* État compacté au scroll : capsule plus petite, plus opaque, plus contrastée. */ .main-header.is-scrolled:has(.nav--workspace) .nav--workspace { margin-block-start: 6px; padding: 5px 12px; min-height: 52px; border-radius: 18px; background: color-mix(in srgb, var(--color-bg-card) 88%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent), 0 16px 36px -22px rgba(15, 23, 42, 0.42), inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); } /* Hairlines verticales entre les groupes (chip & actions) pour structurer la capsule. */ .main-header:has(.nav--workspace) .nav--workspace .nav-context-chip, .main-header:has(.nav--workspace) .nav--workspace .nav-actions { position: relative; } .main-header:has(.nav--workspace) .nav--workspace .nav-context-chip::before, .main-header:has(.nav--workspace) .nav--workspace .nav-actions::before { content: ""; position: absolute; inset-inline-start: -10px; top: 22%; bottom: 22%; width: 1px; background: linear-gradient( 180deg, transparent, color-mix(in srgb, var(--color-border) 80%, transparent) 30%, color-mix(in srgb, var(--color-border) 80%, transparent) 70%, transparent ); pointer-events: none; } /* La hairline avant .nav-context-chip n’a de sens que si un élément la précède. */ .main-header:has(.nav--workspace) .nav--workspace > .nav-context-chip:first-child::before { content: none; } /* Mode sombre : verre plus profond, anneau légèrement renforcé. */ html[data-theme='dark'] .main-header:has(.nav--workspace) .nav--workspace, html.theme-dark .main-header:has(.nav--workspace) .nav--workspace { background: color-mix(in srgb, var(--color-bg-card) 65%, rgba(15, 23, 42, 0.35)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 26px 60px -28px rgba(0, 0, 0, 0.7), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); } html[data-theme='dark'] .main-header.is-scrolled:has(.nav--workspace) .nav--workspace, html.theme-dark .main-header.is-scrolled:has(.nav--workspace) .nav--workspace { background: color-mix(in srgb, var(--color-bg-card) 80%, rgba(15, 23, 42, 0.35)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, transparent), 0 18px 40px -22px rgba(0, 0, 0, 0.7), inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent); } html[data-theme='dark'] .main-header:has(.nav--workspace) .nav--workspace .nav-context-chip::before, html[data-theme='dark'] .main-header:has(.nav--workspace) .nav--workspace .nav-actions::before, html.theme-dark .main-header:has(.nav--workspace) .nav--workspace .nav-context-chip::before, html.theme-dark .main-header:has(.nav--workspace) .nav--workspace .nav-actions::before { background: linear-gradient( 180deg, transparent, color-mix(in srgb, #fff 16%, transparent) 30%, color-mix(in srgb, #fff 16%, transparent) 70%, transparent ); } /* Fallback si backdrop-filter n’est pas supporté : capsule opaque. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .main-header:has(.nav--workspace) .nav--workspace { background: color-mix(in srgb, var(--color-bg-card) 96%, transparent); } html[data-theme='dark'] .main-header:has(.nav--workspace) .nav--workspace, html.theme-dark .main-header:has(.nav--workspace) .nav--workspace { background: color-mix(in srgb, var(--color-bg-card) 92%, rgba(15, 23, 42, 0.4)); } } } /* Désactive les transitions de la capsule pour les utilisateurs sensibles aux mouvements. */ @media (prefers-reduced-motion: reduce) and (min-width: 901px) { .main-header:has(.nav--workspace) .nav--workspace { transition: none !important; } } .nav-pill { position: relative; display: inline-flex; align-items: center; padding: 0.5rem 0.85rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.005em; color: var(--color-text-muted); transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease; } /* Petit point indicateur sous le pill (hover/active) — touche éditoriale "scroll-spy" pro */ .nav-pill::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 3px; border-radius: 999px; background: var(--color-primary); transform: translateX(-50%); opacity: 0; transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease; pointer-events: none; } .nav-pill:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 9%, transparent); } .nav-pill:hover::after { width: 5px; opacity: 0.9; } .nav-pill.is-active { color: var(--color-primary-dark); background: color-mix(in srgb, var(--color-primary) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 24%, transparent); } .nav-pill.is-active::after { width: 16px; opacity: 1; } .nav-pill--cta { color: var(--color-primary-dark); background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, color-mix(in srgb, var(--color-primary) 8%, transparent) 100% ); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 32%, transparent), 0 1px 2px color-mix(in srgb, var(--color-primary) 12%, transparent); font-weight: 700; letter-spacing: 0.008em; } /* Le CTA n'a pas le point indicateur (il a sa propre identité) */ .nav-pill--cta::after { display: none; } .nav-pill--cta:hover { color: var(--color-primary-dark); background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 22%, transparent) 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 100% ); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 48%, transparent), 0 6px 18px -4px color-mix(in srgb, var(--color-primary) 28%, transparent); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .nav-pill, .nav-pill--cta:hover { transform: none !important; transition: none; } .nav-pill::after { transition: none; } } html[data-theme="dark"] .nav-pill--cta, html.theme-dark .nav-pill--cta { color: color-mix(in srgb, var(--color-primary) 35%, #fff); background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 26%, transparent) 0%, color-mix(in srgb, var(--color-primary) 12%, transparent) 100% ); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 45%, transparent); } html[data-theme="dark"] .nav-pill--cta:hover, html.theme-dark .nav-pill--cta:hover { color: #fff; background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 38%, transparent) 0%, color-mix(in srgb, var(--color-primary) 22%, transparent) 100% ); } .nav-pill--cta.is-context-guest { background: color-mix(in srgb, var(--color-primary) 14%, transparent); } .nav-pill--cta.is-context-limited { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #92400e; border-color: color-mix(in srgb, #f59e0b 35%, var(--color-border)); } .nav-pill--cta.is-context-limited:hover { background: color-mix(in srgb, #f59e0b 24%, transparent); } .nav-pill--cta.is-context-full { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .nav-pill--cta.is-context-full:hover { background: var(--color-primary-dark); color: #fff; } .nav-main-cta-item[hidden] { display: none !important; } .nav-register-cta[hidden] { display: none !important; } .nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; } .nav-actions-logged { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .nav-user-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 200px; padding: 4px 10px 4px 4px; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)); border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); text-decoration: none; color: var(--color-text); transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; } .nav-user-chip:hover { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg)); border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 12%, transparent); } .nav-user-chip-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark)); color: #fff; font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; text-transform: uppercase; } .nav-user-chip-text { font-size: 0.8125rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .nav-btn-logout { font-size: 0.8125rem !important; padding: 0.4rem 0.75rem !important; } /* ========================================================================== nav-user-chip = bouton (et non plus lien) → reset UA + caret indicateur ========================================================================== */ button.nav-user-chip { appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; padding: 4px 8px 4px 4px; gap: 8px; } .nav-user-chip-caret { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: 2px; color: var(--color-text-muted); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease; } .nav-user-chip[aria-expanded='true'] .nav-user-chip-caret { transform: rotate(180deg); color: var(--color-primary); } .nav-user-chip[aria-expanded='true'] { background: color-mix(in srgb, var(--color-primary) 16%, var(--color-bg)); border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent), 0 4px 14px -4px color-mix(in srgb, var(--color-primary) 22%, transparent); } /* ========================================================================== .user-popover — Menu compte professionnel (desktop + mobile bottom-sheet) ========================================================================== */ .user-popover { position: fixed; inset-block-start: auto; inset-inline-end: auto; inset-inline-start: auto; /* Au-dessus du header sticky (100) et du menu mobile (≈1199). */ z-index: 12100; isolation: isolate; width: 320px; max-width: calc(100vw - 20px); padding: 6px; border-radius: 18px; background: color-mix(in srgb, var(--color-bg-card) 94%, transparent); border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-primary) 12%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent), 0 28px 64px -22px rgba(15, 23, 42, 0.42), 0 12px 24px -12px rgba(15, 23, 42, 0.28), inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); color: var(--color-text); opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right; transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, opacity; } .user-popover[hidden] { display: none !important; } .user-popover[data-open='true'] { opacity: 1; transform: translateY(0) scale(1); } /* Petite flèche décorative pointant vers le chip (desktop). --popover-arrow-x = distance depuis le bord gauche de la popover jusqu’au centre du chip (JS). */ .user-popover-arrow { position: absolute; top: -7px; inset-inline-start: var(--popover-arrow-x, 28px); inset-inline-end: auto; width: 14px; height: 14px; margin-inline-start: -7px; background: inherit; border-top: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-primary) 12%); border-left: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-primary) 12%); transform: translateX(-50%) rotate(45deg); transform-origin: center; border-top-left-radius: 4px; pointer-events: none; } /* —— Header : avatar + identité —— */ .user-popover-header { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 10px; border-radius: 14px; background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 9%, transparent), color-mix(in srgb, var(--color-primary) 4%, transparent) 60%, transparent ); margin-bottom: 4px; } .user-popover-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark)); color: #fff; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; justify-content: center; text-transform: uppercase; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-card) 90%, transparent), 0 6px 14px -4px color-mix(in srgb, var(--color-primary) 50%, transparent); } .user-popover-identity { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .user-popover-name { font-size: 0.95rem; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-popover-email { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* —— Bandeau de statut d’abonnement —— */ .user-popover-status { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 4px 6px 6px; border-radius: 10px; background: color-mix(in srgb, var(--color-text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); } .user-popover-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-text-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text) 8%, transparent); } .user-popover-status.is-full .user-popover-status-dot { background: #16a34a; box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 22%, transparent); } .user-popover-status.is-limited .user-popover-status-dot { background: #f59e0b; box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 24%, transparent); } .user-popover-status.is-guest .user-popover-status-dot { background: #94a3b8; } .user-popover-status-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .user-popover-status-label { font-size: 0.78rem; font-weight: 700; color: var(--color-text); } .user-popover-status-sub { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* —— Items de menu —— */ .user-popover-menu { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; } .user-popover-item, .user-popover-logout { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 9px 12px; border-radius: 10px; color: var(--color-text); text-decoration: none; font-size: 0.86rem; font-weight: 600; transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease; } .user-popover-item:hover, .user-popover-logout:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); } .user-popover-item:focus-visible, .user-popover-logout:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 60%, transparent); outline-offset: -2px; } .user-popover-item:active { transform: scale(0.99); } .user-popover-item-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--color-text) 5%, transparent); color: var(--color-text-muted); transition: background 0.15s ease, color 0.15s ease; } .user-popover-item:hover .user-popover-item-icon, .user-popover-logout:hover .user-popover-item-icon { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); } .user-popover-item-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* CTA item (e.g. choisir formule quand limited) */ .user-popover-item--cta { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary-dark); } .user-popover-item--cta .user-popover-item-icon { background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary-dark); } .user-popover-item--cta:hover { background: color-mix(in srgb, var(--color-primary) 18%, transparent); } /* Divider hairline */ .user-popover-divider { height: 1px; margin: 6px 8px; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--color-border) 80%, transparent) 12%, color-mix(in srgb, var(--color-border) 80%, transparent) 88%, transparent ); } /* —— Sélecteur de thème (3 segments) —— */ .user-popover-theme { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 6px 8px 6px 12px; } .user-popover-theme-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); flex-shrink: 0; } .user-popover-theme-seg { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding: 3px; margin-inline-start: auto; max-width: 100%; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); } .user-popover-theme-seg button { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; color: var(--color-text-muted); transition: background 0.15s ease, color 0.15s ease; } .user-popover-theme-seg button > span { display: none; } @media (min-width: 380px) { .user-popover-theme-seg button > span { display: inline; } } .user-popover-theme-seg button:hover { color: var(--color-text); } .user-popover-theme-seg button[aria-checked='true'] { background: var(--color-bg-card); color: var(--color-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, var(--color-border)), 0 2px 6px -2px color-mix(in srgb, var(--color-primary) 22%, transparent); } /* —— Bouton de déconnexion : style destructif doux —— */ .user-popover-logout { color: #b91c1c; } .user-popover-logout .user-popover-item-icon { color: #b91c1c; background: color-mix(in srgb, #ef4444 10%, transparent); } .user-popover-logout:hover { background: color-mix(in srgb, #ef4444 12%, transparent); color: #991b1b; } .user-popover-logout:hover .user-popover-item-icon { background: color-mix(in srgb, #ef4444 22%, transparent); color: #7f1d1d; } .user-popover-logout[disabled] { opacity: 0.65; cursor: progress; } /* —— Mode sombre —— */ html[data-theme='dark'] .user-popover, html.theme-dark .user-popover { background: color-mix(in srgb, var(--color-bg-card) 86%, rgba(15, 23, 42, 0.45)); border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-primary) 18%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent), 0 30px 70px -22px rgba(0, 0, 0, 0.7), 0 14px 28px -14px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); } html[data-theme='dark'] .user-popover-arrow, html.theme-dark .user-popover-arrow { border-top-color: color-mix(in srgb, var(--color-border) 60%, var(--color-primary) 18%); border-left-color: color-mix(in srgb, var(--color-border) 60%, var(--color-primary) 18%); } html[data-theme='dark'] .user-popover-header, html.theme-dark .user-popover-header { background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-primary) 8%, transparent) 60%, transparent ); } html[data-theme='dark'] .user-popover-avatar, html.theme-dark .user-popover-avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-card) 70%, #0f172a 30%), 0 6px 16px -4px color-mix(in srgb, var(--color-primary) 60%, transparent); } html[data-theme='dark'] .user-popover-status, html.theme-dark .user-popover-status { background: color-mix(in srgb, #fff 4%, transparent); border-color: color-mix(in srgb, var(--color-border) 50%, transparent); } html[data-theme='dark'] .user-popover-item:hover, html[data-theme='dark'] .user-popover-logout:hover, html.theme-dark .user-popover-item:hover, html.theme-dark .user-popover-logout:hover { background: color-mix(in srgb, var(--color-primary) 18%, transparent); } html[data-theme='dark'] .user-popover-item-icon, html.theme-dark .user-popover-item-icon { background: color-mix(in srgb, #fff 6%, transparent); } html[data-theme='dark'] .user-popover-divider, html.theme-dark .user-popover-divider { background: linear-gradient( 90deg, transparent, color-mix(in srgb, #fff 14%, transparent) 12%, color-mix(in srgb, #fff 14%, transparent) 88%, transparent ); } html[data-theme='dark'] .user-popover-theme-seg, html.theme-dark .user-popover-theme-seg { background: color-mix(in srgb, #fff 5%, transparent); border-color: color-mix(in srgb, var(--color-border) 50%, transparent); } html[data-theme='dark'] .user-popover-theme-seg button[aria-checked='true'], html.theme-dark .user-popover-theme-seg button[aria-checked='true'] { background: color-mix(in srgb, var(--color-bg-card) 80%, #0f172a 20%); color: color-mix(in srgb, var(--color-primary) 86%, #fff 14%); } html[data-theme='dark'] .user-popover-logout, html.theme-dark .user-popover-logout { color: #fca5a5; } html[data-theme='dark'] .user-popover-logout .user-popover-item-icon, html.theme-dark .user-popover-logout .user-popover-item-icon { color: #fca5a5; background: color-mix(in srgb, #ef4444 18%, transparent); } html[data-theme='dark'] .user-popover-logout:hover, html.theme-dark .user-popover-logout:hover { background: color-mix(in srgb, #ef4444 22%, transparent); color: #fee2e2; } /* —— Fallback si backdrop-filter indisponible —— */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .user-popover { background: var(--color-bg-card); } } /* —— Mobile : transformation en bottom-sheet —— */ @media (max-width: 559.98px) { .user-popover { inset-block-start: auto; inset-block-end: 0; inset-inline: 0; width: 100%; max-width: 100%; padding: 8px 8px max(10px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; transform: translateY(100%); transform-origin: bottom center; transition: opacity 0.18s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 -1px 0 color-mix(in srgb, var(--color-border) 70%, transparent), 0 -28px 64px -22px rgba(15, 23, 42, 0.4); } .user-popover[data-open='true'] { transform: translateY(0); } /* Poignée de glisser au sommet */ .user-popover::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 18%, transparent); } .user-popover-arrow { display: none; } .user-popover-header { margin-top: 16px; } /* Backdrop sombre derrière le sheet */ .user-popover[data-open='true']::after { content: ''; position: fixed; inset: 0; z-index: -1; background: color-mix(in srgb, #0f172a 36%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: userPopoverFadeIn 0.18s ease both; } /* Items un peu plus larges pour le pouce. */ .user-popover-item, .user-popover-logout { padding: 12px 14px; font-size: 0.92rem; min-height: 48px; } .user-popover-item-icon { width: 32px; height: 32px; } .user-popover-name { font-size: 1rem; } } @keyframes userPopoverFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .user-popover, .nav-user-chip-caret { transition: none !important; } } @media (max-width: 900px) { .nav-links--desktop { gap: 2px; } .nav-pill { min-height: 44px; box-sizing: border-box; padding: 0.45rem 0.65rem; font-size: 0.8125rem; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; min-height: var(--control-height); border-radius: var(--radius-sm); font-weight: 600; font-family: var(--font); cursor: pointer; border: 1px solid transparent; line-height: 1.2; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease; } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover { background: var(--color-primary-dark); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; pointer-events: none; transform: none; } .btn-outline { background: transparent; color: var(--btn-outline-fg); border: 2px solid var(--btn-outline-border); } .btn-outline:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-outline:focus-visible { outline: 3px solid var(--btn-outline-border); outline-offset: 2px; } .btn-ghost { background: transparent; color: var(--color-text); border: 2px solid transparent; } .btn-ghost:hover { background: var(--btn-ghost-hover-bg); color: var(--color-primary); } .btn-ghost:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; min-height: 48px; } .btn-block { width: 100%; } /* Hero — fond dégradé / vidéo optionnelle, panneau texte = contraste WCAG */ .hero-section { position: relative; overflow: hidden; margin-bottom: 0; } .hero-backdrop { position: absolute; inset: 0; z-index: 0; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; object-fit: cover; opacity: 0.32; } .hero-backdrop-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse 100% 80% at 85% 15%, rgba(1, 46, 39, 0.22), transparent 55%), radial-gradient(ellipse 70% 50% at 10% 90%, rgba(13, 148, 136, 0.35), transparent 50%), linear-gradient(125deg, #0a4f4a 0%, #0d766e 32%, #0d9488 58%, #0f766e 100%); } @media (prefers-reduced-motion: reduce) { .hero-video { display: none !important; } } @media (prefers-reduced-motion: no-preference) { .hero-backdrop-gradient { animation: heroBackdropShift 22s ease-in-out infinite alternate; } } @keyframes heroBackdropShift { 0% { filter: brightness(1) saturate(1); transform: scale(1); } 100% { filter: brightness(1.06) saturate(1.08); transform: scale(1.02); } } .hero-shell { position: relative; z-index: 1; max-width: 1144px; margin: 0 auto; padding: var(--s-8) var(--s-3) var(--s-6); } .hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: center; margin: 0 auto; } .hero-panel { background: color-mix(in srgb, var(--color-bg-card) 97%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-4); box-shadow: var(--shadow-lg); transition: border-color 0.2s ease, box-shadow 0.2s ease; } html[data-theme="dark"] .hero-panel, html.theme-dark .hero-panel { background: color-mix(in srgb, var(--color-bg-card) 94%, var(--color-bg)); border-color: color-mix(in srgb, var(--color-border) 92%, var(--color-primary)); box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent); } .hero-content { max-width: 100%; } .hero-uvp { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--btn-outline-fg); margin-bottom: 0.65rem; max-width: 520px; line-height: 1.4; } .hero-title { font-size: clamp(1.9rem, 3.2vw, 2.35rem); font-weight: 700; line-height: 1.25; margin-bottom: var(--s-2); color: var(--color-text); letter-spacing: -0.02em; } /* Mise en évidence titre : couleur + marqueur (pas la couleur seule — 1.4.1) */ .hero-title .highlight { color: var(--color-highlight-text); font-weight: 700; box-decoration-break: clone; padding: 0 0.08em; background: linear-gradient(transparent 62%, var(--color-highlight-mark) 62%); } .hero-subtitle { font-size: 1.1rem; color: var(--color-text-muted); margin-bottom: 1rem; max-width: 520px; line-height: 1.65; } .hero-trust { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; color: var(--color-text-muted); max-width: 520px; margin-bottom: 1.25rem; line-height: 1.45; } .hero-trust-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: rgba(13, 148, 136, 0.12); color: var(--color-primary-dark); font-size: 0.65rem; font-weight: 700; margin-top: 0.1rem; } .hero-cta { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; width: 100%; } .hero-cta-links { margin: 0; width: 100%; font-size: 0.875rem; line-height: 1.55; color: var(--color-text-muted); } .hero-cta-links__a { color: var(--color-primary-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .hero-cta-links__a:hover { border-bottom-color: color-mix(in srgb, var(--color-primary) 45%, transparent); } .hero-cta-links__sep { opacity: 0.42; padding: 0 0.3rem; user-select: none; } html[data-theme="dark"] .hero-cta-links__a, .theme-dark .hero-cta-links__a { color: color-mix(in srgb, var(--color-primary) 70%, #e2e8f0); } .hero-panel .btn-outline { border-width: 2px; background: var(--color-bg-card); } .hero-panel .btn-ghost { background: transparent; } .hero-panel .btn-ghost:hover { background: var(--color-bg); } .hero-panel:focus-within { border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent), var(--shadow-lg); } .hero-visual { display: flex; justify-content: center; align-items: center; } .stats-cards { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .stat-card { background: var(--color-bg-card); padding: 1.5rem 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-align: center; min-width: 120px; } .stat-num { display: block; font-size: 1.75rem; font-weight: 700; color: var(--color-primary); } .stat-label { font-size: 0.9rem; color: var(--color-text-muted); } /* Section stats — bandeau marque identique clair/sombre */ .section-stats { background: linear-gradient(100deg, #0a5c52 0%, #0d9488 50%, #0f766e 100%); color: #fff; padding: var(--s-5) 0; } .stats-row { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; } .stat-item { text-align: center; } .stat-item-num { display: block; font-size: 2.5rem; font-weight: 700; } .stat-item-label { font-size: 1rem; opacity: 0.9; } /* Sections — espacements multiples de 8px */ .section { padding: var(--s-8) 0; } .section-title { font-size: 1.75rem; font-weight: 700; text-align: center; margin-bottom: var(--s-4); color: var(--color-text); letter-spacing: -0.02em; } /* Features */ .section-features { position: relative; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-card)) 0%, var(--color-bg-card) 32%, var(--color-bg-card) 100% ); overflow: hidden; } .section-features::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 85% 55% at 50% -15%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 58% ); pointer-events: none; } .section-features .container { position: relative; z-index: 1; } .section-features .section-title { position: relative; padding-bottom: var(--s-2); margin-bottom: var(--s-6); } .section-features .section-title::after { content: ""; display: block; width: 52px; height: 4px; margin: 0.85rem auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary)); opacity: 0.92; } .section-features-lead { text-align: center; max-width: 38rem; margin: -0.15rem auto var(--s-5); padding: 0 var(--s-2); color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.55; } .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); max-width: 1120px; margin: 0 auto; } @media (min-width: 720px) { body.page-home .features-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 56rem; } } .feature-card { position: relative; background: var(--color-bg-card); padding: var(--s-4) var(--s-4) calc(var(--s-4) + 2px); border-radius: var(--radius-lg, 14px); border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%); box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05); overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .feature-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary)); opacity: 0; transition: opacity 0.22s ease; } .feature-card:hover::before, .feature-card:focus-within::before { opacity: 1; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--color-primary) 22%, rgba(15, 23, 42, 0.14)), 0 4px 16px rgba(15, 23, 42, 0.06); border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); } .feature-icon { font-size: 2rem; margin-bottom: var(--s-2); } .feature-icon--svg { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: var(--s-3); color: var(--color-primary-dark); background: linear-gradient( 155deg, color-mix(in srgb, var(--color-primary) 20%, var(--color-bg-card)), color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card)) ); border-radius: 14px; border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent); box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 12%, transparent); } .feature-icon--svg svg { margin: 0; flex-shrink: 0; } html[data-theme="dark"] .feature-icon--svg, html.theme-dark .feature-icon--svg { color: var(--color-primary); background: linear-gradient( 155deg, color-mix(in srgb, var(--color-primary) 22%, #0f172a), color-mix(in srgb, var(--color-primary) 10%, #0f172a) ); border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } html[data-theme="dark"] .section-features, html.theme-dark .section-features { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 9%, #0f172a) 0%, var(--color-bg-card) 50%, var(--color-bg-card) 100% ); } html[data-theme="dark"] .feature-card, html.theme-dark .feature-card { box-shadow: 0 4px 22px rgba(0, 0, 0, 0.28); border-color: color-mix(in srgb, var(--color-border) 75%, var(--color-primary) 25%); } html[data-theme="dark"] .feature-card:hover, html.theme-dark .feature-card:hover { box-shadow: 0 16px 44px -10px rgba(0, 0, 0, 0.45); } .feature-card h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 0.55rem; color: var(--color-text); letter-spacing: -0.02em; line-height: 1.28; } .feature-card p { font-size: 0.94rem; line-height: 1.58; color: var(--color-text-muted); margin: 0; } /* Comment ça marche */ .section-how { background: var(--color-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .section-how-lead { text-align: center; color: var(--color-text-muted); max-width: 36rem; margin: calc(-1 * var(--s-2)) auto var(--s-4); font-size: 1rem; } .how-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); max-width: 1000px; margin: 0 auto var(--s-4); counter-reset: how; } .how-step { position: relative; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-3) var(--s-3); text-align: center; box-shadow: var(--shadow-sm); } .how-step-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto var(--s-2); border-radius: var(--radius); background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary-dark); } .how-step-num { position: absolute; top: var(--s-2); left: var(--s-2); width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .how-step h3 { font-size: 1.1rem; margin-bottom: var(--s-2); color: var(--color-text); } .how-step p { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; } .how-cta-wrap { text-align: center; } .how-cta-link { font-weight: 600; color: var(--color-primary-dark); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 38%, transparent); transition: border-color 0.15s ease, color 0.15s ease; } .how-cta-link:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); } @media (max-width: 900px) { .how-steps { grid-template-columns: 1fr; max-width: 420px; } } /* Témoignages — carrousel, aria-live */ .section-testimonials-lead { text-align: center; color: var(--color-text-muted); font-size: 0.95rem; margin: calc(-1 * var(--s-2)) auto var(--s-4); max-width: 40rem; } .testimonials-carousel { max-width: 640px; margin: 0 auto; } .testimonials-viewport { overflow: hidden; border-radius: var(--radius-lg); outline: none; } .testimonials-viewport:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 45%, transparent); } .testimonials-track { display: flex; transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: transform; } .testimonial-slide { flex: 0 0 100%; width: 100%; box-sizing: border-box; margin: 0; padding: var(--s-4) var(--s-4); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-style: normal; min-height: 220px; display: flex; flex-direction: column; align-items: flex-start; } .testimonial-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-primary-dark); background: color-mix(in srgb, var(--color-primary) 12%, transparent); padding: 6px 12px; border-radius: 999px; margin-bottom: var(--s-2); } .testimonial-badge svg { flex-shrink: 0; } .testimonial-slide p { margin: 0 0 var(--s-3); color: var(--color-text); line-height: 1.65; max-width: var(--prose-testimonial); flex: 1; } .testimonial-slide footer { font-size: 0.9rem; color: var(--color-text-muted); margin-top: auto; } .testimonial-slide footer strong { color: var(--color-text); } .testimonials-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-3); } .testimonial-nav-btn { width: 44px; height: 44px; border-radius: var(--s-1); border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; } .testimonial-nav-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .testimonials-dots { display: flex; gap: 10px; align-items: center; } .testimonial-dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: var(--color-border); cursor: pointer; transition: transform 0.2s, background 0.2s; } .testimonial-dot.is-active { background: var(--color-primary); transform: scale(1.15); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .faq-item p a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .testimonials-track { transition: none; } } /* Pricing */ .section-pricing { background: var(--color-bg); } .section-pricing .pricing-carousel { position: relative; } .section-pricing .pricing-carousel__strip { min-width: 0; } .section-pricing .pricing-carousel__nav { display: none; } .section-pricing .pricing-carousel__arrow { display: none; } .pricing-trust-strip { max-width: 52rem; margin: 0 auto var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--radius-lg, 12px); border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card)); box-shadow: 0 8px 28px rgba(2, 6, 23, 0.06); } .pricing-trust-strip__list { margin: 0; padding-left: 1.2rem; color: var(--color-text); font-size: 0.92rem; line-height: 1.55; } .pricing-trust-strip__list li { margin: 0.4rem 0; } .pricing-trust-strip__list strong { color: var(--color-text); font-weight: 700; } .pricing-trust-strip__link { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .pricing-trust-strip__link:hover { color: var(--color-primary-dark, #0f766e); } .hero-discovery-teaser { margin: var(--s-3) 0 0; padding: 0; max-width: 36rem; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-muted); } .hero-discovery-link { color: var(--color-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .hero-discovery-link:hover { color: var(--color-primary-dark, #0f766e); } .hero-cta .hero-discovery-teaser { flex: 0 0 100%; text-align: left; } .hero-cta .hero-cta-links { flex: 0 0 100%; } @media (min-width: 640px) { .hero-cta .hero-discovery-teaser { text-align: left; } } .pricing-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); } .pricing-tab { min-height: 48px; min-width: 120px; padding: var(--s-2) var(--s-3); border-radius: var(--s-1); border: 2px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text); font-family: var(--font); font-weight: 600; font-size: 1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .pricing-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .pricing-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .pricing-panel { margin-bottom: 0; } .pricing-panel[hidden] { display: none !important; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); align-items: start; } /* Accueil — desktop / tablette large : grille 3 colonnes (pas le carousel mobile) */ @media (min-width: 769px) { .section-pricing .pricing-carousel { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding-inline: 0; } .section-pricing .pricing-carousel__strip { container-type: normal; width: 100%; } .section-pricing .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-items: stretch; width: 100%; max-width: 1080px; margin-inline: auto; overflow: visible; overflow-x: visible; scroll-snap-type: none; padding: 0; padding-bottom: 0; } .section-pricing .pricing-card { flex: none; width: auto; min-width: 0; max-width: none; scroll-snap-align: none; } .section-pricing .pricing-carousel__nav { display: none; } } .pricing-card { background: var(--color-bg-card); padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .pricing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); } .pricing-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-lg); } .pricing-card .badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: white; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; } .pricing-card h3 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--color-text); } .price { font-size: 1.75rem; font-weight: 700; color: var(--color-primary); } .price .amount { font-size: 2rem; } .price-note { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1rem; } .price--on-request { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin-bottom: 1rem; padding: 0.65rem 0.9rem; border-radius: 12px; background: linear-gradient(135deg, rgba(13, 148, 136, 0.09), rgba(14, 165, 233, 0.07)); border: 1px dashed rgba(13, 148, 136, 0.32); color: var(--color-primary); } .price--on-request .price-on-request-label { font-size: 1.05rem; font-weight: 800; line-height: 1.2; color: var(--color-primary); letter-spacing: -0.005em; } .price--on-request .price-on-request-hint { font-size: 0.82rem; font-weight: 500; color: var(--color-text-muted); } [dir="rtl"] .price--on-request { align-items: flex-end; text-align: right; } .pricing-card ul { list-style: none; margin-bottom: 1.5rem; } .pricing-card li { padding: 0.4rem 0; padding-right: 1.25rem; position: relative; font-size: 0.95rem; color: var(--color-text-muted); } .pricing-card li::before { content: "✓"; position: absolute; right: 0; color: var(--color-primary); font-weight: bold; } .pricing-card .btn { min-height: 46px; } /* FAQ — longueur de ligne lisible */ .faq-list { max-width: min(640px, 100%); margin: 0 auto; } .faq-item { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 0.75rem; overflow: hidden; border-inline-start: 4px solid transparent; transition: border-inline-start-color 0.15s ease, box-shadow 0.15s ease; } .faq-item:hover { box-shadow: var(--shadow-sm); } /* État ouvert : repère latéral + légère élévation (pas seulement la teinte du +) */ .faq-item[open] { border-inline-start-color: var(--color-primary); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 48px; padding: var(--s-2) var(--s-3); font-weight: 600; cursor: pointer; list-style: none; text-align: start; transition: background 0.15s ease; } .faq-item summary:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:focus { outline: none; } .faq-item summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; border-radius: calc(var(--radius) - 2px); z-index: 1; position: relative; } /* Icône +/− : forme + graisse (complément visuel à l’état ouvert) */ .faq-item summary::after { content: "+"; flex-shrink: 0; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 300; line-height: 1; border: 2px solid var(--color-border); border-radius: var(--s-1); color: var(--color-text); background: var(--color-bg); } .faq-item[open] summary::after { content: "−"; font-weight: 600; border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); } .faq-item p { padding: 0 var(--s-3) var(--s-2); max-width: var(--prose-faq); margin-left: auto; margin-right: auto; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.65; } @media (prefers-reduced-motion: reduce) { .feature-card, .pricing-card, .faq-item, .faq-item summary { transition: none; } .feature-card::before { transition: none; } .feature-card:hover, .pricing-card:hover { transform: none; } } /* CTA */ .section-cta { padding: 3rem 0; } .cta-box { background: var(--color-primary-dark); color: white; padding: 3rem; border-radius: var(--radius-lg); text-align: center; } .cta-box h2 { font-size: 1.5rem; margin-bottom: 0.5rem; } .cta-box p { opacity: 0.9; margin-bottom: 1rem; } .cta-onboarding { text-align: left; max-width: 520px; margin: 0 auto 1.75rem; padding: 1.25rem 1.5rem; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.2); } .cta-onboarding-title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; opacity: 0.95; } .cta-onboarding-steps { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; line-height: 1.55; opacity: 0.92; } .cta-onboarding-steps li { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.5rem; } .cta-onboarding-steps li:last-child { margin-bottom: 0; } .cta-step-num { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; } .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .cta-buttons .btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, 0.65); } .cta-buttons .btn-ghost:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } .cta-buttons .btn-ghost:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .cta-buttons .btn-primary { background: white; color: var(--color-primary-dark); } .cta-buttons .btn-outline { border: 2px solid #fff; color: #fff; background: transparent; } .cta-buttons .btn-outline:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } .cta-buttons .btn-outline:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .cta-buttons .btn-primary:hover { background: var(--color-bg); } /* Accueil FR/AR : ancres sous header sticky + encoche */ html:has(body.page-home) { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px); } /* Accueil (index + landing AR) — mobile : hiérarchie, lisibilité, zones tactiles */ @media (max-width: 768px) { body.page-home .hero-shell { padding-left: max(var(--s-3), env(safe-area-inset-left, 0px)); padding-right: max(var(--s-3), env(safe-area-inset-right, 0px)); } body.page-home .home-hero-aside.hero-visual { width: min(100%, 22rem); margin-inline: auto; flex-direction: column; align-items: stretch; gap: 0.9rem; } body.page-home .home-hero-aside.hero-visual > * { width: 100%; } body.page-home .hero-cta-row .btn { width: 100%; max-width: none; min-height: 48px; justify-content: center; } body.page-home .hero-panel { border-radius: calc(var(--radius-lg) + 6px); box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 22px 56px -24px color-mix(in srgb, var(--color-primary) 42%, rgba(15, 23, 42, 0.2)); } html[data-theme="dark"] body.page-home .hero-panel, html.theme-dark body.page-home .hero-panel { box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 55%, transparent), 0 26px 60px -22px rgba(0, 0, 0, 0.55), 0 36px 72px -28px color-mix(in srgb, var(--color-primary) 9%, transparent); } body.page-home .hero-uvp { line-height: 1.42; letter-spacing: 0.032em; } body.page-home .hero-cta .hero-discovery-teaser { text-align: center; margin-top: 0; margin-bottom: 0; padding: 0.9rem 1rem; max-width: 100%; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius: calc(var(--radius) + 2px); } body.page-home .hero-cta-links { text-align: center; } body.page-home .hero-discovery-teaser .hero-discovery-hint[aria-hidden="true"] { display: none; } body.page-home .hero-discovery-teaser .hero-discovery-hint:not([aria-hidden="true"]) { display: block; margin-top: 0.4rem; font-size: 0.86rem; line-height: 1.5; opacity: 0.92; } body.page-home .section-stats { padding: var(--s-4) 0; } body.page-home .stats-row { gap: clamp(1.25rem, 6vw, 2rem); justify-content: space-around; } body.page-home .stat-item-num { font-size: clamp(1.65rem, 7vw, 2rem); } body.page-home .stat-item-label { font-size: 0.88rem; } body.page-home .section { padding: var(--s-6) 0; } body.page-home .section-title { font-size: clamp(1.32rem, 5.2vw, 1.62rem); margin-bottom: var(--s-3); padding-inline: var(--s-1); } body.page-home .section-features .section-title { margin-bottom: var(--s-5); } body.page-home .features-grid { gap: var(--s-3); } body.page-home .section-features .container { overflow: hidden; } body.page-home .features-grid { display: grid; grid-template-columns: initial; grid-auto-flow: column; grid-auto-columns: minmax(82%, 1fr); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-2); padding-bottom: 0.35rem; -webkit-overflow-scrolling: touch; } body.page-home .features-grid::-webkit-scrollbar { display: none; } body.page-home .feature-card { scroll-snap-align: start; min-height: 100%; } body.page-home .feature-card { border-radius: calc(var(--radius-lg) + 3px); } body.page-home .feature-card h3 { font-size: 1.06rem; } body.page-home .feature-card p { font-size: 0.91rem; line-height: 1.6; } body.page-home .section-how-lead { font-size: 0.93rem; line-height: 1.55; padding-inline: var(--s-1); margin-bottom: var(--s-3); } body.page-home .section-how .container { overflow: hidden; } body.page-home .how-steps { display: grid; grid-template-columns: initial; grid-auto-flow: column; grid-auto-columns: minmax(82%, 1fr); gap: var(--s-3); max-width: none; margin-inline: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-2); padding-bottom: 0.35rem; -webkit-overflow-scrolling: touch; } body.page-home .how-steps::-webkit-scrollbar { display: none; } body.page-home .how-step { text-align: start; padding: var(--s-4) var(--s-3); scroll-snap-align: start; min-height: 100%; } body.page-home .how-step-icon { margin-left: 0; margin-right: 0; } body.page-home .how-step h3, body.page-home .how-step p { text-align: start; } [dir="rtl"] body.page-home .how-step-num { left: auto; right: var(--s-2); } body.page-home .how-cta-wrap { text-align: center; margin-top: var(--s-2); } body.page-home .how-cta-link { display: inline-block; font-weight: 600; font-size: 0.95rem; color: var(--color-primary-dark); text-decoration: none; padding: 0.5rem 0; border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 38%, transparent); } body.page-home .how-cta-link:hover { border-bottom-color: var(--color-primary); color: var(--color-primary); } body.page-home .pricing-tabs { width: 100%; max-width: 22rem; margin-inline: auto; margin-bottom: var(--s-3); gap: 0.5rem; } body.page-home .pricing-tab { flex: 1 1 0; min-width: 0; padding-inline: var(--s-2); } body.page-home .pricing-trust-strip { margin-inline: 0; padding: var(--s-3); } body.page-home .pricing-trust-strip__list { font-size: 0.88rem; line-height: 1.52; padding-inline-start: 1.05rem; } body.page-home .section-testimonials-lead { font-size: 0.9rem; line-height: 1.55; padding-inline: var(--s-1); margin-bottom: var(--s-3); } body.page-home .testimonials-controls { margin-top: var(--s-4); gap: var(--s-2); flex-wrap: wrap; padding-inline: var(--s-1); } body.page-home .testimonial-nav-btn { min-width: 48px; min-height: 48px; } body.page-home .testimonial-slide { min-height: 0; padding: var(--s-3); } body.page-home .testimonial-slide p { font-size: 0.95rem; line-height: 1.62; } body.page-home .faq-list { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg-card); } body.page-home .faq-item { border-radius: 0; border: none; border-bottom: 1px solid var(--color-border); margin-bottom: 0; border-inline-start: 4px solid transparent; box-shadow: none; background: transparent; } body.page-home .faq-item:hover { box-shadow: none; } body.page-home .faq-item[open] { border-inline-start-color: var(--color-primary); } body.page-home .faq-item:last-child { border-bottom: none; } body.page-home .faq-item summary { min-height: 52px; padding: 0.95rem 1rem; align-items: center; } body.page-home .section-faq .section-title { margin-bottom: var(--s-4); } body.page-home .section-cta { padding: 2.25rem 0; } body.page-home .cta-box { padding: 1.75rem var(--s-3); border-radius: calc(var(--radius-lg) + 8px); box-shadow: 0 16px 40px -18px rgba(15, 23, 42, 0.35); } body.page-home .cta-box h2 { font-size: clamp(1.22rem, 4.2vw, 1.48rem); line-height: 1.28; } body.page-home .cta-box p { font-size: 0.94rem; line-height: 1.55; } body.page-home .cta-onboarding { padding: 1rem 1.15rem; border-radius: calc(var(--radius) + 2px); } body.page-home .cta-buttons { flex-direction: column; align-items: stretch; gap: 0.65rem; } body.page-home .cta-buttons .btn { width: 100%; min-height: 48px; justify-content: center; } } @media (max-width: 420px) { body.page-home .hero-panel { padding: 1.05rem 0.95rem; } body.page-home .section-title { font-size: 1.28rem; } body.page-home .pricing-tabs { max-width: none; } body.page-home .cta-onboarding-steps { font-size: 0.9rem; } } @media (max-width: 360px) { body.page-home .hero-title { font-size: clamp(1.42rem, 8.5vw, 1.65rem); } body.page-home .testimonials-dots { gap: 8px; } body.page-home .testimonial-dot { width: 9px; height: 9px; } } @media (hover: none) and (max-width: 768px) { body.page-home .feature-card:hover { transform: none; border-color: color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%); box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05); } html[data-theme="dark"] body.page-home .feature-card:hover, html.theme-dark body.page-home .feature-card:hover { border-color: color-mix(in srgb, var(--color-border) 75%, var(--color-primary) 25%); box-shadow: 0 4px 22px rgba(0, 0, 0, 0.28); } } /* Footer */ .main-footer { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 10% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, #0f172a 96%, var(--color-bg)) 0%, #020617 100%); color: rgba(255,255,255,0.9); padding: var(--s-6) 0 var(--s-4); } .main-footer::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.02) 100%); pointer-events: none; } .footer-shell { position: relative; z-index: 1; } .footer-cta-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 1.25rem 1.35rem; margin-bottom: var(--s-5); border-radius: calc(var(--radius-lg) + 2px); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 24%, rgba(255,255,255,0.02)) 0%, rgba(255,255,255,0.04) 100%), rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12); position: relative; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .footer-cta-strip::after { content: ''; position: absolute; inset: -1px; background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--color-primary-light) 26%, transparent), transparent 34%); pointer-events: none; opacity: 0.65; } .footer-cta-kicker { margin: 0 0 0.35rem; color: color-mix(in srgb, var(--color-primary-light) 70%, #fff); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; } .footer-cta-title { margin: 0; color: #fff; font-size: clamp(1.15rem, 2vw, 1.65rem); line-height: 1.2; } .footer-cta-text { margin: 0.6rem 0 0; max-width: 42rem; color: rgba(255,255,255,0.76); line-height: 1.65; } .footer-cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; } .footer-trust-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: var(--s-4); } .footer-trust-row span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.78); font-size: 0.82rem; font-weight: 600; } .footer-trust-row i { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--color-primary-light); opacity: 0.95; flex-shrink: 0; } html[data-theme="dark"] .main-footer, html.theme-dark .main-footer { background: radial-gradient(1200px 500px at 10% 0%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 60%), linear-gradient(180deg, #020617 0%, #000 100%); } .footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s-4); align-items: start; margin-bottom: var(--s-5); } .footer-brand-card { display: flex; flex-direction: column; gap: var(--s-2); padding: 1.2rem; border-radius: calc(var(--radius-lg) + 2px); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 24px 50px -36px rgba(0,0,0,0.6); transition: border-color 0.2s ease, background 0.2s ease; } .footer-brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: #fff; } .footer-brand-wordmark { display: inline-flex; align-items: baseline; gap: 0.05em; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.038em; line-height: 1.1; } .footer-brand-major { color: #fff; } .footer-brand-accent { color: #5eead4; } .footer-brand-copy { max-width: 24rem; color: rgba(255,255,255,0.72); line-height: 1.7; font-size: 0.95rem; } .footer-brand-subcopy { margin: -0.1rem 0 0; color: rgba(255,255,255,0.62); line-height: 1.55; font-size: 0.88rem; } .footer-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; } .footer-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: var(--s-2); } .footer-proof-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 0.9rem; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); } .footer-proof-item strong { color: #fff; font-size: 1.05rem; letter-spacing: -0.02em; } .footer-proof-item span { color: rgba(255,255,255,0.7); font-size: 0.8rem; line-height: 1.35; } .footer-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); font-size: 0.78rem; font-weight: 600; } .footer-col h3 { margin: 0 0 0.9rem; color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; } .footer-col { padding-top: 0.15rem; } .footer-links, .footer-legal { display: flex; flex-direction: column; gap: 0.7rem; } .footer-links a, .footer-legal a { color: rgba(255,255,255,0.76); text-decoration: none; width: fit-content; transition: color 0.2s ease, transform 0.2s ease; } .footer-links a:hover, .footer-legal a:hover { color: #fff; transform: translateX(2px); } .footer-links a:focus-visible, .footer-legal a:focus-visible, .footer-socials a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.3); border-radius: 10px; } .footer-contact { display: flex; flex-direction: column; gap: 0.65rem; } .footer-contact-item { display: flex; gap: 0.65rem; align-items: flex-start; color: rgba(255,255,255,0.78); line-height: 1.5; font-size: 0.92rem; padding: 0.7rem 0.8rem; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } .footer-contact-icon { flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); color: var(--color-primary-light); } .footer-contact-icon svg { display: block; } .footer-newsletter { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem; border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035)), rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); } .footer-newsletter p { margin: 0; color: rgba(255,255,255,0.74); line-height: 1.6; font-size: 0.92rem; } .footer-newsletter-note { font-size: 0.84rem !important; color: rgba(255,255,255,0.62) !important; } .footer-newsletter .btn { width: 100%; } .footer-socials { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.1rem; } .footer-socials a { display: inline-flex; align-items: center; padding: 0.45rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.78); font-size: 0.82rem; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; } .footer-socials a:hover { color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-1px); } .footer-brand-card:hover { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); } .footer-cta-strip:hover { border-color: rgba(255,255,255,0.18); box-shadow: 0 22px 44px -24px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.14); } .footer-top .footer-col { position: relative; } .footer-top .footer-col::before { content: ''; position: absolute; top: 0.1rem; left: -1rem; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12), transparent); pointer-events: none; } .footer-top .footer-col:first-child::before { display: none; } .footer-col h3 { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; } .footer-col h3::before { content: ''; width: 0.65rem; height: 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary-light) 70%, #fff); box-shadow: 0 0 0 4px rgba(255,255,255,0.04); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,0.12); position: relative; z-index: 1; } .footer-bottom-copy { margin: 0; color: rgba(255,255,255,0.72); font-size: 0.88rem; } .footer-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; } .footer-meta a { color: rgba(255,255,255,0.78); text-decoration: underline; text-underline-offset: 2px; } .footer-mini-note { color: rgba(255,255,255,0.62); font-size: 0.82rem; } /* Pied de page compact (accueil) — structure claire, hiérarchie lisible */ .main-footer.main-footer--compact { padding: var(--s-5) 0 var(--s-4); } .main-footer--compact .footer-compact-main { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.55fr) auto; gap: var(--s-4) clamp(1.25rem, 3vw, 2rem); align-items: start; margin-bottom: var(--s-4); padding: clamp(1.15rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.45rem); border-radius: calc(var(--radius-lg) + 4px); background: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 45%, transparent 100%), rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 48px -28px rgba(0,0,0,0.55); overflow: hidden; } .main-footer--compact .footer-compact-main::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; /* Teinte brand : suit les variables (cohérent clair / sombre) */ background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary)); opacity: 0.95; pointer-events: none; } .main-footer--compact .footer-compact-brand-block { display: flex; flex-direction: column; gap: 0.7rem; } .main-footer--compact .footer-compact-brand { align-self: flex-start; } .main-footer--compact .footer-compact-tagline { margin: 0; max-width: 22rem; font-size: 0.875rem; line-height: 1.6; color: rgba(255,255,255,0.66); } .main-footer--compact .footer-compact-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1.35rem; align-content: start; } .main-footer--compact .footer-compact-col-title { margin: 0 0 0.5rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(153, 246, 228, 0.88); } .main-footer--compact .footer-compact-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.32rem; } .main-footer--compact .footer-compact-link-list a { display: inline-block; color: rgba(255,255,255,0.86); font-size: 0.875rem; font-weight: 600; text-decoration: none; padding: 0.2rem 0; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .main-footer--compact .footer-compact-link-list a:hover { color: #fff; border-bottom-color: color-mix(in srgb, var(--color-primary) 58%, transparent); } .main-footer--compact .footer-compact-link-list a:focus-visible { outline: 2px solid #5eead4; outline-offset: 3px; border-radius: 4px; } .main-footer--compact .footer-compact-actions { display: flex; flex-direction: column; gap: 0.45rem; min-width: 11rem; padding-top: 0.1rem; } .main-footer--compact .footer-compact-actions-label { margin: 0 0 0.15rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(153, 246, 228, 0.88); } .main-footer--compact .footer-compact-actions .btn { justify-content: center; text-align: center; white-space: nowrap; font-weight: 700; } .main-footer--compact .footer-compact-btn-outline { color: rgba(255,255,255,0.94) !important; border-color: rgba(255,255,255,0.38) !important; background: rgba(255,255,255,0.05) !important; } .main-footer--compact .footer-compact-btn-outline:hover { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.55) !important; color: #fff !important; } .main-footer--compact .footer-compact-btn-outline:focus-visible { outline-color: rgba(255,255,255,0.65); } .main-footer--compact .footer-compact-trust-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.45rem 0.65rem; } .main-footer--compact .footer-compact-trust-list li { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.4rem 0.75rem; font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; } .main-footer--compact .footer-compact-trust-dot { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--color-primary); flex-shrink: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 28%, transparent); } .main-footer--compact .footer-compact-bottom { padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,0.1); margin-top: 0; } .main-footer--compact .footer-compact-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; } .main-footer--compact .footer-compact-legal li { display: inline-flex; align-items: center; margin: 0; } .main-footer--compact .footer-compact-legal li + li::before { content: ''; display: block; width: 3px; height: 3px; border-radius: 50%; margin-right: 0.85rem; background: rgba(255,255,255,0.35); } .main-footer--compact .footer-compact-legal a { color: rgba(255,255,255,0.78); font-size: 0.82rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .main-footer--compact .footer-compact-legal a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.35); } .main-footer--compact .footer-compact-legal a:focus-visible { outline: 2px solid #5eead4; outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .main-footer--compact .footer-compact-link-list a, .main-footer--compact .footer-compact-legal a { transition: none; } } @media (max-width: 900px) { .main-footer--compact .footer-compact-main { grid-template-columns: 1fr; gap: var(--s-4); } .main-footer--compact .footer-compact-nav { grid-template-columns: 1fr 1fr; padding-top: 0.25rem; border-top: 1px solid rgba(255,255,255,0.08); } .main-footer--compact .footer-compact-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.08); } .main-footer--compact .footer-compact-actions-label { width: 100%; margin-bottom: 0.25rem; } .main-footer--compact .footer-compact-actions .btn { flex: 1 1 auto; min-width: 9rem; } } @media (max-width: 520px) { .main-footer--compact .footer-compact-nav { grid-template-columns: 1fr; } .main-footer--compact .footer-compact-actions { flex-direction: column; } .main-footer--compact .footer-compact-actions .btn { width: 100%; min-width: 0; } .main-footer--compact .footer-compact-bottom { flex-direction: column; align-items: center; text-align: center; } .main-footer--compact .footer-compact-legal { justify-content: center; } .main-footer--compact .footer-compact-trust-list { flex-direction: column; align-items: stretch; } .main-footer--compact .footer-compact-trust-list li { justify-content: center; } } .footer-legal-mini { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: center; padding: 1rem; margin: 0 auto 1.25rem; max-width: 980px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.9rem; } .footer-legal-mini a { color: inherit; text-decoration: none; } .footer-legal-mini a:hover { color: var(--color-primary); } @media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-top .footer-col::before { display: none; } .footer-cta-strip { flex-direction: column; align-items: flex-start; } .footer-cta-actions { width: 100%; justify-content: flex-start; } } @media (max-width: 680px) { .footer-cta-strip { padding: 1rem; } .footer-cta-title { font-size: clamp(1.05rem, 5.5vw, 1.35rem); line-height: 1.3; } .footer-cta-text { font-size: 0.92rem; line-height: 1.6; } .footer-brand-card, .footer-newsletter, .footer-contact-item { padding: 0.95rem; } .footer-top { grid-template-columns: 1fr; gap: var(--s-3); } .footer-col h3 { margin-bottom: 0.75rem; } .footer-proof { grid-template-columns: 1fr; } .footer-bottom { align-items: flex-start; } .footer-meta { flex-direction: column; gap: 0.4rem; } .footer-newsletter { padding: 0.95rem; } .footer-socials { justify-content: flex-start; } .footer-cta-actions .btn { width: 100%; } .footer-brand { gap: 0.6rem; } .footer-links a, .footer-legal a { font-size: 0.95rem; } } /* Connecté : CTA QCM visible dans la nav + drawer */ .mqcm-logged-in .nav-quiz-prominent { font-weight: 700; padding: 0.35rem 0.85rem !important; border-radius: 999px; background: var(--color-primary) !important; color: #fff !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 30%, transparent); } .mqcm-logged-in .nav-quiz-prominent:hover { background: var(--color-primary-dark) !important; color: #fff !important; } .mqcm-logged-in .nav-drawer-spotlight.nav-quiz-prominent { border-radius: var(--radius-lg) !important; padding: 14px 16px !important; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; border: 1px solid color-mix(in srgb, #fff 25%, transparent) !important; } .mqcm-logged-in .nav-drawer-spotlight .nav-drawer-spotlight-icon { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; } .mqcm-logged-in .nav-drawer-spotlight .nav-drawer-spotlight-text strong, .mqcm-logged-in .nav-drawer-spotlight .nav-drawer-spotlight-arrow { color: #fff !important; } .mqcm-logged-in .nav-drawer-spotlight .nav-drawer-spotlight-text small { color: rgba(255, 255, 255, 0.9) !important; } .hero-logged-line { width: 100%; font-size: 0.95rem; font-weight: 600; color: var(--color-text-muted); margin: 0 0 var(--s-2); line-height: 1.4; } .hero-cta-logged .btn-hero-quiz-main { min-height: 52px; font-size: 1.05rem; } .cta-box-logged { text-align: center; } .cta-logged-lead { opacity: 0.92; margin-bottom: var(--s-3); } /* Bandeau site (maintenance / promo) */ .site-banner { position: relative; z-index: 101; padding: var(--s-2) 0; font-size: 0.9rem; line-height: 1.45; } .site-banner--info { background: #1e40af; color: #fff; } .site-banner--promo { background: linear-gradient(90deg, #0f766e, #0d9488); color: #fff; } .site-banner--warning { background: #b45309; color: #fff; } .site-banner--maintenance { background: #7c2d12; color: #fff; } .site-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-3); padding: 0 var(--s-2); } .site-banner-text { margin: 0; text-align: center; flex: 1 1 12rem; } .site-banner-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .site-banner-close { flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: var(--s-1); background: rgba(255, 255, 255, 0.2); color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; } .site-banner-close:hover { background: rgba(255, 255, 255, 0.3); } /* Bannière cookies RGPD */ .cookie-consent-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100002; padding: var(--s-3); background: var(--color-bg-card); border-top: 1px solid var(--color-border); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); } .cookie-consent-inner { display: flex; flex-direction: column; gap: var(--s-3); max-width: 900px; margin: 0 auto; } .cookie-consent-text { margin: 0; font-size: 0.9rem; color: var(--color-text); line-height: 1.55; } .cookie-consent-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: flex-end; } .cookie-consent-policy { margin-right: auto; font-size: 0.875rem; } @media (max-width: 520px) { .cookie-consent-actions { flex-direction: column; align-items: stretch; } .cookie-consent-policy { margin-right: 0; text-align: center; } } /* Page choix QCM — encart essai gratuit */ .trial-preview-banner { margin: var(--s-4) 0 var(--s-4); padding: var(--s-3); border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)) 0%, var(--color-bg-card) 100%); text-align: left; box-shadow: var(--shadow-sm); } .trial-preview-banner--logged { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-card)) 0%, var(--color-bg-card) 72%); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .trial-preview-banner--logged::after { content: 'Connecté • Aperçu limité'; position: absolute; top: 14px; right: 14px; padding: 0.35rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 16%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); color: var(--color-primary-dark); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .trial-preview-title { font-size: 1rem; font-weight: 700; margin: 0 0 var(--s-2); color: var(--color-text); } .trial-preview-subtitle { margin: -0.35rem 0 var(--s-2); color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.55; } .trial-preview-list { margin: 0 0 var(--s-2); padding-left: 1.25rem; font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; } .trial-preview-list li { margin-bottom: 0.5rem; } .trial-preview-banner--logged .trial-preview-list strong { color: var(--color-text); } .trial-preview-banner--logged .trial-preview-foot { color: var(--color-text-muted); } .trial-preview-foot { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); } .trial-preview-foot a { color: var(--color-primary); font-weight: 600; } .trial-preview-banner--logged .trial-preview-foot a { color: var(--color-primary-dark); } /* Pages légales */ .legal-page { padding: var(--s-4) var(--s-3) var(--s-8); min-height: 60vh; } .legal-doc { max-width: 46rem; margin: 0 auto; } .legal-doc h1 { font-size: 1.65rem; font-weight: 700; color: var(--color-text); margin: 0 0 var(--s-2); line-height: 1.25; } .legal-doc .legal-updated { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--s-4); } .legal-doc h2 { font-size: 1.1rem; font-weight: 700; color: var(--color-text); margin: var(--s-5) 0 var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--color-border); } .legal-doc h2:first-of-type { border-top: none; padding-top: 0; margin-top: var(--s-3); } .legal-doc p, .legal-doc li { font-size: 0.95rem; line-height: 1.65; color: var(--color-text-muted); } .legal-doc ul { padding-left: 1.25rem; margin: 0 0 var(--s-2); } .legal-doc a { color: var(--color-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } .legal-back { display: inline-block; margin-bottom: var(--s-3); font-size: 0.9rem; font-weight: 600; color: var(--color-primary); } .legal-top-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; justify-content: center; align-items: center; padding: 0.65rem var(--s-3); border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-primary)); } .legal-top-nav__link { font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); text-decoration: none; padding: 0.35rem 0.55rem; border-radius: 8px; } .legal-top-nav__link:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); } .legal-top-nav__link.is-active, .legal-top-nav__link[aria-current='page'] { color: var(--color-primary-dark, #0f766e); background: color-mix(in srgb, var(--color-primary) 12%, transparent); } .legal-contact-p { margin: 0 0 var(--s-2); } .footer-legal-mini { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; padding: var(--s-4) var(--s-3); font-size: 0.85rem; border-top: 1px solid var(--color-border); background: var(--color-bg); } .footer-legal-mini a { color: var(--color-text-muted); } .footer-legal-mini a:hover { color: var(--color-primary); } /* Quiz page — shell en 3 zones (progression fixe / corps scrollable / barre d’actions) */ .quiz-layout { min-height: 100dvh; margin: 0; display: flex; flex-direction: column; background: radial-gradient(ellipse 120% 85% at 50% -25%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 52%), var(--color-bg); } .quiz-app-shell { position: relative; z-index: 0; isolation: isolate; flex: 1; display: flex; flex-direction: column; min-height: 0; min-height: 100dvh; } .quiz-top-chrome { flex-shrink: 0; position: sticky; top: 0; background: color-mix(in srgb, var(--color-bg-card) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent); z-index: 40; box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 65%, transparent), 0 5px 20px rgba(15, 23, 42, 0.04); } .quiz-brand-row { padding: max(0.35rem, env(safe-area-inset-top, 0px)) max(0.85rem, var(--safe-right)) 0.26rem max(0.85rem, var(--safe-left)); } .quiz-brand-nav { max-width: 56rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.42rem; min-width: 0; } .quiz-brand-nav .logo { min-width: 0; gap: 7px; } .quiz-brand-nav .logo-mark { width: 34px; height: 34px; border-radius: 9px; padding: 3px; } .quiz-brand-nav .logo-img { max-width: 26px; max-height: 26px; } .quiz-brand-nav .logo-name { font-size: 1rem; letter-spacing: -0.036em; } .quiz-brand-tools { margin-left: auto; display: flex; align-items: center; gap: 0.22rem; flex-wrap: wrap; justify-content: flex-end; min-width: 0; } .quiz-exit-label--short { display: none; } .quiz-top-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.26rem; min-width: 0; } .quiz-toast { position: fixed; top: calc(0.85rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 200; max-width: min(92vw, 420px); padding: 0.65rem 1rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-text) 92%, var(--color-bg-card)); color: var(--color-bg-card); font-size: 0.88rem; font-weight: 600; box-shadow: var(--shadow); text-align: center; line-height: 1.35; } .quiz-toast[hidden] { display: none !important; } .quiz-resume-notice { max-width: 56rem; margin: 0 auto; padding: 0.38rem max(0.95rem, var(--safe-right)) 0.38rem max(0.95rem, var(--safe-left)); display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; flex-wrap: wrap; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); border-bottom: 1px solid var(--color-border); } .quiz-resume-notice[hidden] { display: none !important; } .quiz-resume-notice-text { margin: 0; font-size: 0.82rem; color: var(--color-text); } .quiz-parcours-bar { max-width: 56rem; margin: 0 auto; padding: 0.32rem max(0.95rem, var(--safe-right)) 0.48rem max(0.95rem, var(--safe-left)); display: flex; flex-wrap: wrap; align-items: center; gap: 0.28rem 0.45rem; font-size: 0.78rem; color: var(--color-text-muted); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent); } .quiz-parcours-bar[hidden] { display: none !important; } .quiz-parcours-label { font-weight: 700; color: var(--color-text); margin-right: 0.25rem; } .quiz-parcours-link { font-weight: 600; color: var(--color-primary); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 0.5rem; border-radius: 6px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .quiz-parcours-link:hover { background: color-mix(in srgb, var(--color-primary) 12%, transparent); } .quiz-parcours-sep { opacity: 0.45; } .quiz-nav-drawer-backdrop { position: fixed; inset: 0; z-index: 790; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(3px) saturate(1.1); -webkit-backdrop-filter: blur(3px) saturate(1.1); -webkit-tap-highlight-color: transparent; } .quiz-nav-drawer-backdrop[hidden] { display: none !important; } .quiz-nav-drawer { position: fixed; top: 0; right: 0; width: min(360px, calc(100vw - var(--safe-left) - var(--safe-right))); max-width: calc(100vw - var(--safe-left) - var(--safe-right)); height: 100dvh; z-index: 800; overflow: hidden; background: linear-gradient( 168deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)) 0%, var(--color-bg-card) 28%, var(--color-bg-card) 100% ); border-left: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary)); box-shadow: -16px 0 56px rgba(15, 23, 42, 0.14); display: flex; flex-direction: column; padding: calc(0.95rem + var(--safe-top)) max(1.1rem, var(--safe-right)) calc(1rem + var(--safe-bottom)) max(1.1rem, var(--safe-left)); gap: 0.75rem; box-sizing: border-box; } .quiz-nav-drawer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, #38bdf8)); opacity: 0.92; pointer-events: none; } .quiz-nav-drawer > * { position: relative; z-index: 1; } .quiz-nav-drawer[hidden] { display: none !important; } .quiz-nav-drawer-drag { display: none; } .quiz-nav-drawer-handle { display: block; width: 48px; height: 5px; border-radius: 999px; background: linear-gradient( 90deg, color-mix(in srgb, var(--color-text-muted) 30%, var(--color-border)), color-mix(in srgb, var(--color-text-muted) 55%, var(--color-border)) ); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); } .quiz-nav-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.65rem; flex-shrink: 0; padding-bottom: 0.65rem; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent); } .quiz-nav-drawer-title-row { display: flex; align-items: flex-start; gap: 0.6rem; min-width: 0; } .quiz-nav-drawer-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 12px; color: var(--color-primary); background: linear-gradient( 145deg, color-mix(in srgb, var(--color-primary) 16%, var(--color-bg-card)), color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)) ); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 14%, transparent); } .quiz-nav-drawer-title-stack { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .quiz-nav-drawer-title { margin: 0; font-weight: 800; font-size: 1.06rem; letter-spacing: -0.025em; line-height: 1.18; color: var(--color-text); } .quiz-nav-drawer-subtitle { margin: 0; font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); line-height: 1.35; letter-spacing: 0.01em; } .quiz-nav-drawer-close { flex-shrink: 0; font-weight: 600; border-radius: 999px !important; padding: 0.38rem 0.95rem !important; border: 1px solid color-mix(in srgb, var(--color-border) 95%, var(--color-text-muted)) !important; background: color-mix(in srgb, var(--color-bg) 40%, var(--color-bg-card)) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .quiz-nav-drawer-close:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)) !important; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)) !important; } .quiz-nav-meta { display: flex; flex-direction: column; gap: 0.55rem; flex-shrink: 0; padding: 0.6rem 0.7rem; border-radius: 14px; background: color-mix(in srgb, var(--color-bg) 38%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent); } .quiz-nav-hint { margin: 0; font-size: 0.76rem; color: var(--color-text-muted); line-height: 1.5; } .quiz-nav-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; flex-shrink: 0; } .quiz-nav-legend-item { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); background: color-mix(in srgb, var(--color-bg-card) 85%, var(--color-bg)); border: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent); } .quiz-nav-legend-swatch { width: 0.5rem; height: 0.5rem; border-radius: 3px; flex-shrink: 0; border: 1px solid var(--color-border); background: var(--color-bg); } .quiz-nav-legend-swatch--current { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 28%, var(--color-bg-card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 38%, transparent); } .quiz-nav-legend-swatch--done { border-color: color-mix(in srgb, #22c55e 55%, var(--color-border)); background: color-mix(in srgb, #22c55e 22%, var(--color-bg-card)); } .quiz-nav-legend-swatch--pending { opacity: 0.6; } .quiz-nav-grid-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; } .quiz-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 0.45rem; overflow-y: auto; flex: 1; min-height: 0; padding: 0.55rem; border-radius: 14px; background: color-mix(in srgb, var(--color-bg) 52%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-border) 94%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent); -webkit-overflow-scrolling: touch; } .quiz-nav-pill { min-height: 44px; border-radius: 11px; border: 1px solid var(--color-border); background: var(--color-bg-card); font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--color-text); transition: background 0.18s ease, border-color 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease; -webkit-tap-highlight-color: transparent; } .quiz-nav-pill:hover:not(:disabled) { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card)); } .quiz-nav-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent); border-color: var(--color-primary); } .quiz-nav-pill:active:not(:disabled) { transform: scale(0.96); } .quiz-nav-pill.is-current { border-color: var(--color-primary); background: linear-gradient( 160deg, color-mix(in srgb, var(--color-primary) 20%, var(--color-bg-card)), color-mix(in srgb, var(--color-primary) 11%, var(--color-bg-card)) ); color: var(--color-primary-dark); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 28%, transparent), 0 4px 14px color-mix(in srgb, var(--color-primary) 18%, transparent); } .quiz-nav-pill.is-current:hover:not(:disabled) { border-color: var(--color-primary); background: linear-gradient( 160deg, color-mix(in srgb, var(--color-primary) 24%, var(--color-bg-card)), color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)) ); } .quiz-nav-pill.is-done:not(.is-current) { border-color: color-mix(in srgb, #22c55e 50%, var(--color-border)); color: #15803d; background: color-mix(in srgb, #22c55e 8%, var(--color-bg-card)); } .quiz-nav-pill.is-pending:not(.is-current) { opacity: 0.72; } .quiz-nav-pill:disabled { opacity: 0.32; cursor: not-allowed; } @media (min-width: 900px) { /* Desktop: cases fixes et compactes meme si peu de questions */ .quiz-nav-grid { grid-template-columns: repeat(5, 58px); justify-content: start; align-content: start; gap: 0.55rem; } .quiz-nav-pill { width: 58px; min-width: 58px; min-height: 58px; height: 58px; border-radius: 13px; font-size: 1.02rem; padding: 0; } } html[data-theme="dark"] .quiz-nav-drawer-backdrop, html.theme-dark .quiz-nav-drawer-backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(5px) saturate(1.05); -webkit-backdrop-filter: blur(5px) saturate(1.05); } html[data-theme="dark"] .quiz-nav-drawer, html.theme-dark .quiz-nav-drawer { box-shadow: -16px 0 56px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--color-border) 40%, transparent); } html[data-theme="dark"] .quiz-nav-meta, html.theme-dark .quiz-nav-meta { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent); } html[data-theme="dark"] .quiz-nav-grid, html.theme-dark .quiz-nav-grid { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent); } @media (min-width: 900px) { /* Desktop: panneau latéral flottant plus "pro". */ .quiz-nav-drawer-backdrop { background: rgba(15, 23, 42, 0.36); backdrop-filter: blur(5px) saturate(1.08); -webkit-backdrop-filter: blur(5px) saturate(1.08); } .quiz-nav-drawer { top: calc(0.85rem + var(--safe-top)); right: max(0.85rem, var(--safe-right)); left: auto; bottom: max(0.85rem, var(--safe-bottom)); width: min(390px, calc(100vw - max(2rem, var(--safe-left) + var(--safe-right)))); max-width: min(390px, calc(100vw - max(2rem, var(--safe-left) + var(--safe-right)))); height: auto; max-height: calc(100dvh - 1.7rem - var(--safe-top) - var(--safe-bottom)); border-left: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary)); border-radius: 18px; box-shadow: 0 22px 52px -22px rgba(15, 23, 42, 0.38), 0 6px 20px -12px rgba(15, 23, 42, 0.22); padding: 0.75rem max(1rem, var(--safe-right)) max(0.9rem, var(--safe-bottom)) max(1rem, var(--safe-left)); } } @media (max-width: 640px) { .quiz-nav-drawer-backdrop { backdrop-filter: blur(6px) saturate(1.15); -webkit-backdrop-filter: blur(6px) saturate(1.15); } .quiz-nav-drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: auto; max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top, 0px))); border-left: none; border-radius: 24px 24px 0 0; border-top: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary)); padding: 0.4rem max(1.05rem, var(--safe-right)) calc(1.15rem + env(safe-area-inset-bottom, 0px)) max(1.05rem, var(--safe-left)); box-shadow: 0 -8px 0 color-mix(in srgb, var(--color-primary) 11%, transparent), 0 -32px 72px rgba(15, 23, 42, 0.22); } /* Evite le chevauchement avec la barre d'actions fixe */ body.quiz-nav-open .quiz-bottom-bar { opacity: 0; pointer-events: none; transform: translate3d(0, calc(100% + env(safe-area-inset-bottom, 0px)), 0); -webkit-transform: translate3d(0, calc(100% + env(safe-area-inset-bottom, 0px)), 0); } .quiz-nav-drawer-head { padding-bottom: 0.55rem; } .quiz-nav-drawer-drag { display: flex; justify-content: center; padding: 0.35rem 0 0.15rem; flex-shrink: 0; } .quiz-nav-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; padding: 0.6rem; } .quiz-nav-pill { min-height: 50px; border-radius: 13px; font-size: 0.98rem; } html[data-theme="dark"] .quiz-nav-drawer, html.theme-dark .quiz-nav-drawer { box-shadow: 0 -8px 0 color-mix(in srgb, var(--color-primary) 22%, transparent), 0 -36px 80px rgba(0, 0, 0, 0.58); } } @media (prefers-reduced-motion: reduce) { .quiz-nav-pill, .quiz-nav-pill:hover:not(:disabled), .quiz-nav-pill.is-current { transition-duration: 0.01ms; } .quiz-nav-pill:active:not(:disabled) { transform: none; } } .quiz-explanation-details { margin-top: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg) 70%, var(--color-bg-card)); } .quiz-explanation-summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; color: var(--color-primary); } .quiz-explanation-details-body { margin-top: 0.5rem; } .quiz-question-image.is-loading { position: relative; } .quiz-question-image.is-loading .quiz-question-image-skeleton { display: block; } .quiz-question-image .quiz-question-image-skeleton { display: none; position: absolute; inset: 0; background: linear-gradient( 110deg, color-mix(in srgb, var(--color-border) 40%, var(--color-bg)) 0%, color-mix(in srgb, var(--color-border) 15%, var(--color-bg-card)) 45%, color-mix(in srgb, var(--color-border) 40%, var(--color-bg)) 90% ); background-size: 200% 100%; animation: mqcm-quiz-shimmer 1.1s ease-in-out infinite; } .quiz-question-image.is-loading img { opacity: 0; } .quiz-question-stem-image.is-loading { position: relative; } .quiz-question-stem-image.is-loading .quiz-question-image-skeleton { display: block; } .quiz-question-stem-image .quiz-question-image-skeleton { display: none; position: absolute; inset: 0; border-radius: calc(var(--radius) - 2px); background: linear-gradient( 110deg, color-mix(in srgb, var(--color-border) 40%, var(--color-bg)) 0%, color-mix(in srgb, var(--color-border) 15%, var(--color-bg-card)) 45%, color-mix(in srgb, var(--color-border) 40%, var(--color-bg)) 90% ); background-size: 200% 100%; animation: mqcm-quiz-shimmer 1.1s ease-in-out infinite; } .quiz-question-stem-image.is-loading img { opacity: 0; } @keyframes mqcm-quiz-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .result-review-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin: 1rem 0; padding: 0.65rem 0.85rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg); } .result-review-toolbar[hidden] { display: none !important; } .result-review-label { font-weight: 700; font-size: 0.85rem; } .result-review-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; } .result-review-filters .btn.is-active { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); } .result-parcours-next { margin: 0.75rem 0 0; padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card)); } .result-parcours-next[hidden] { display: none !important; } .result-parcours-next-label { margin: 0 0 0.5rem; font-weight: 700; font-size: 0.9rem; } .result-parcours-next-links { display: flex; flex-wrap: wrap; gap: 0.4rem; } .result-next-steps { margin: 1rem 0 0; padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg-card); } .result-next-steps[hidden] { display: none !important; } .result-next-steps-title { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; } .result-next-steps-lead { margin: 0 0 0.85rem; font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.45; } .result-next-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .result-next-steps-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; } .result-next-steps-btn { width: 100%; max-width: 100%; justify-content: center; text-align: center; } @media (min-width: 480px) { .result-next-steps-btn { width: auto; min-width: 12rem; justify-content: center; } } .result-next-steps-hint { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.35; padding-left: 0.05rem; } .quiz-modal-box--wide { max-width: min(92vw, 520px); } .quiz-kb-list { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--color-text); line-height: 1.7; font-size: 0.9rem; } .quiz-kb-list kbd { display: inline-block; padding: 0.1rem 0.35rem; border-radius: 4px; border: 1px solid var(--color-border); background: var(--color-bg); font-size: 0.8rem; font-family: ui-monospace, monospace; } @media (prefers-reduced-motion: reduce) { .quiz-layout *, .quiz-layout *::before, .quiz-layout *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .quiz-question-image .quiz-question-image-skeleton { animation: none !important; background: color-mix(in srgb, var(--color-border) 30%, var(--color-bg)); } } .quiz-progress-strip { max-width: 56rem; margin: 0 auto; padding: 0.22rem max(0.85rem, var(--safe-right)) 0.62rem max(0.85rem, var(--safe-left)); } .quiz-progress-meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.3rem 0.5rem; } .quiz-mode-chip { display: inline-flex; align-items: center; min-height: 1.35rem; padding: 0.16rem 0.46rem; border-radius: 999px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg)); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); flex-shrink: 0; grid-column: 2; justify-self: center; } .quiz-progress-label { font-weight: 700; color: var(--color-text); font-size: 0.94rem; letter-spacing: -0.02em; line-height: 1.25; min-width: 0; grid-column: 1; justify-self: start; } .exam-timer { display: inline-block; margin-top: 0; margin-left: 0; font-weight: 700; font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--color-text-muted); flex-shrink: 0; grid-column: 3; justify-self: end; white-space: nowrap; } .exam-timer--warn, .exam-timer--elapsed { color: #b45309; } .exam-timer--danger { color: #b91c1c; } .quiz-progress-bar { height: 7px; background: color-mix(in srgb, var(--color-border) 72%, var(--color-bg)); border-radius: 999px; overflow: hidden; margin-top: 0.45rem; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.07); } .quiz-progress-fill { height: 100%; background: linear-gradient( 90deg, color-mix(in srgb, var(--color-primary) 82%, #0d9488), var(--color-primary) ); border-radius: 999px; transition: width 0.3s; box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 32%, transparent); } .quiz-scroll-main { position: relative; z-index: 0; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; width: 100%; } /* Réduction de texte : toute la colonne scroll (questions, pas le chrome) */ body.quiz-layout.quiz-reading-compact #quiz-scroll-main { zoom: 0.88; } @supports not (zoom: 0.88) { body.quiz-layout.quiz-reading-compact #quiz-scroll-main { transform: scale(0.88); transform-origin: top center; width: 113.636%; max-width: 113.636%; margin-left: auto; margin-right: auto; } } .quiz-text-size-label--short { display: none; } .quiz-sound-menu-label--short { display: none; } .quiz-text-size-toggle.is-active, .quiz-sound-menu-btn.is-active { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); } .quiz-sound-menu { position: relative; flex: 1 1 0; min-width: 0; } .quiz-sound-menu .quiz-toolbar-btn { width: 100%; } .quiz-sound-menu-panel { position: absolute; top: calc(100% + 0.38rem); right: 0; z-index: 180; min-width: 14rem; max-width: min(90vw, 18.5rem); padding: 0.45rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%); background: color-mix(in srgb, var(--color-bg-card) 94%, var(--color-bg)); box-shadow: 0 14px 32px -14px rgba(15, 23, 42, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .quiz-sound-menu-panel[hidden] { display: none !important; } .quiz-sound-menu-item { width: 100%; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--color-text); display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.6rem; font: inherit; font-size: 0.8rem; cursor: pointer; } .quiz-sound-menu-item:hover { background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); } .quiz-sound-menu-item-state { font-size: 0.73rem; font-weight: 700; color: var(--color-primary); } .quiz-sound-menu-sep { margin: 0.35rem 0 0.4rem; border-top: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent); } .quiz-sound-menu-subtitle { margin: 0 0 0.25rem; padding: 0 0.25rem; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); } .quiz-sound-theme-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; } .quiz-sound-theme-btn { border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--color-bg) 55%, var(--color-bg-card)); color: var(--color-text); padding: 0.4rem 0.35rem; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; } .quiz-sound-theme-btn:hover { border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); } .quiz-sound-theme-btn.is-active { color: var(--color-primary-dark); border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); } .quiz-scroll-inner { position: relative; z-index: 0; max-width: 56rem; margin: 0 auto; padding: 0.92rem max(1.02rem, var(--safe-right)) 1.22rem max(1.02rem, var(--safe-left)); width: 100%; box-sizing: border-box; } /* Desktop polish (écran large) */ @media (min-width: 900px) { .quiz-scroll-inner { padding: 1.6rem max(1.9rem, var(--safe-right)) 1.8rem max(1.9rem, var(--safe-left)); } .quiz-card { padding: 2.25rem; } .quiz-card h2 { margin-bottom: 1.75rem; } .quiz-option { min-height: 48px; align-items: center; } /* Bar fixe: plus “app-like” sur desktop */ .quiz-bottom-bar { background: color-mix(in srgb, var(--color-bg-card) 90%, transparent); backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08); border-top-color: color-mix(in srgb, var(--color-border) 70%, transparent); border-radius: 0; /* Légère remontée pour mieux respirer au-dessus du contenu */ transform: translate3d(0, calc(-1 * var(--quiz-vv-bottom-inset, 0px) - 4px), 0); -webkit-transform: translate3d(0, calc(-1 * var(--quiz-vv-bottom-inset, 0px) - 4px), 0); } /* Desktop: structure déterministe (ligne nav + bouton centré si visible) */ .quiz-bottom-bar-inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; justify-items: stretch; gap: 0.55rem; } .quiz-bottom-bar-row--nav { width: 100%; } .quiz-bottom-exam-finish { display: block; flex: none; width: 100%; margin-inline: auto; min-width: 0; max-width: none; min-height: 44px; font-size: 0.825rem; border-radius: 999px; } /* “Signaler une erreur” + hint: bien visible et adaptable */ .quiz-extra-actions { align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 0.85rem 1.1rem; } .quiz-report-hint { flex: 1 1 26rem; max-width: none; font-size: 0.92rem; color: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-text)); line-height: 1.5; } } /* Mobile/medium: encore un peu plus haut (évite couverture du hint) */ @media (max-width: 899px) { .quiz-bottom-bar { /* Reste en “bas” normal: éviter de couvrir davantage le contenu */ transform: translate3d(0, calc(-1 * var(--quiz-vv-bottom-inset, 0px)), 0); -webkit-transform: translate3d(0, calc(-1 * var(--quiz-vv-bottom-inset, 0px)), 0); } body.quiz-layout:has(#quiz-bottom-bar:not([hidden])) .quiz-scroll-inner { padding-bottom: calc(6.35rem + env(safe-area-inset-bottom, 0px) + 22px); } body.quiz-layout:has(#quiz-bottom-bar:not([hidden])):has(#btn-exam-finish-bottom:not([hidden])) .quiz-scroll-inner { padding-bottom: calc(8.75rem + env(safe-area-inset-bottom, 0px) + 30px); } } /* Very large screens */ @media (min-width: 1200px) { .quiz-brand-nav, .quiz-progress-strip, .quiz-scroll-inner, .quiz-bottom-bar-inner { max-width: 72rem; } .quiz-scroll-inner { padding: 2rem max(2.25rem, var(--safe-right)) 2.05rem max(2.25rem, var(--safe-left)); } .quiz-card { padding: 2.6rem; } .quiz-card h2 { margin-bottom: 2rem; } .quiz-option { padding: 1.05rem 1.35rem; min-height: 54px; font-size: 1.02rem; } .quiz-bottom-bar-inner { gap: 0.72rem; } .quiz-bottom-exam-finish { flex: 0 0 auto; width: auto; min-width: min(100%, 16rem); max-width: 22rem; font-size: 0.875rem; min-height: 48px; border-radius: 999px; } } /* Espace pour la barre d’actions fixe (viewport) + encoche — M3.2 */ body.quiz-layout:has(#quiz-bottom-bar:not([hidden])) .quiz-scroll-inner { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); } body.quiz-layout:has(#quiz-bottom-bar:not([hidden])):has(#btn-exam-finish-bottom:not([hidden])) .quiz-scroll-inner { padding-bottom: calc(8.35rem + env(safe-area-inset-bottom, 0px)); } /* Dock : hors shell, z-index au-dessus des couches GPU de la carte question */ .quiz-bottom-dock { isolation: isolate; } .quiz-bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; flex-shrink: 0; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; background: color-mix(in srgb, var(--color-bg-card) 82%, transparent); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); border-top: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent); border-radius: 16px 16px 0 0; padding: 0.52rem max(0.85rem, var(--safe-right)) calc(0.45rem + env(safe-area-inset-bottom, 0px)) max(0.85rem, var(--safe-left)); transform: translate3d(0, calc(-1 * var(--quiz-vv-bottom-inset, 0px)), 0); -webkit-transform: translate3d(0, calc(-1 * var(--quiz-vv-bottom-inset, 0px)), 0); transition: transform 0.12s ease-out; z-index: 600; box-shadow: 0 -4px 0 color-mix(in srgb, var(--color-primary) 12%, transparent), 0 -12px 48px rgba(15, 23, 42, 0.1); } /* Quand le plan est ouvert, masquer la barre d'actions (mobile + desktop). */ body.quiz-nav-open .quiz-bottom-bar { opacity: 0; pointer-events: none; transform: translate3d(0, calc(100% + env(safe-area-inset-bottom, 0px)), 0); -webkit-transform: translate3d(0, calc(100% + env(safe-area-inset-bottom, 0px)), 0); } .quiz-bottom-bar-inner { max-width: 56rem; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 0.38rem; } .quiz-bottom-bar-row--nav { display: flex; align-items: stretch; justify-content: space-between; gap: 0.5rem; } .quiz-bottom-exam-finish { width: 100%; flex: none; min-height: 42px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.01em; border-radius: 999px; border: 2px dashed color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); background: color-mix(in srgb, var(--color-bg-card) 90%, var(--color-primary) 8%); color: color-mix(in srgb, var(--color-text) 82%, var(--color-primary)); box-shadow: none; } .quiz-bottom-bar-row--nav > .quiz-bottom-exam-finish { width: auto; flex: 1; min-width: 0; } @media (min-width: 900px) { /* Override late base rules so desktop stays centered */ .quiz-bottom-bar-inner.has-exam-finish, .quiz-bottom-bar.has-exam-finish .quiz-bottom-bar-inner, .quiz-bottom-bar-inner:has(#btn-exam-finish-bottom:not([hidden])) { flex-direction: column !important; align-items: center; gap: 0.55rem; } .quiz-bottom-bar-inner.has-exam-finish .quiz-bottom-bar-row--nav, .quiz-bottom-bar.has-exam-finish .quiz-bottom-bar-row--nav, .quiz-bottom-bar-inner:has(#btn-exam-finish-bottom:not([hidden])) .quiz-bottom-bar-row--nav { width: 100%; } .quiz-bottom-bar-inner.has-exam-finish .quiz-bottom-exam-finish, .quiz-bottom-bar.has-exam-finish .quiz-bottom-exam-finish, .quiz-bottom-bar-inner:has(#btn-exam-finish-bottom:not([hidden])) .quiz-bottom-exam-finish { width: 100%; min-width: 0; max-width: none; align-self: stretch; font-size: 0.875rem; margin-inline: auto; } } .quiz-bottom-exam-finish:hover { border-style: solid; background: color-mix(in srgb, var(--color-bg-card) 84%, var(--color-primary) 14%); color: var(--color-text); } .quiz-bottom-exam-finish:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 65%, transparent); outline-offset: 2px; } .quiz-bottom-btn { flex: 1; min-height: 44px; min-width: 0; touch-action: manipulation; border-radius: 10px; font-weight: 600; font-size: 0.875rem; letter-spacing: -0.01em; } .quiz-report-icon-btn { flex: 0 0 auto; width: 44px; min-width: 44px; max-width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #dc2626; border-color: color-mix(in srgb, #dc2626 28%, var(--color-border)); background: color-mix(in srgb, #dc2626 8%, var(--color-bg-card)); } .quiz-report-icon-btn:hover:not(:disabled) { color: #b91c1c; border-color: color-mix(in srgb, #dc2626 45%, var(--color-border)); background: color-mix(in srgb, #dc2626 14%, var(--color-bg-card)); } .quiz-report-icon-btn .quiz-report-icon { display: block; flex-shrink: 0; color: inherit; } .quiz-report-icon-btn.is-reported, .quiz-report-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; } .quiz-bottom-btn.btn-ghost { border: 1px solid color-mix(in srgb, var(--color-border) 95%, var(--color-text-muted)); background: color-mix(in srgb, var(--color-bg) 55%, var(--color-bg-card)); } .quiz-bottom-btn.btn-ghost:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); } .quiz-bottom-btn.btn-primary { box-shadow: 0 4px 18px color-mix(in srgb, var(--color-primary) 38%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 75%, #0f766e); } .quiz-body { flex: 1; max-width: 800px; margin: 0 auto; padding: 2rem 1.5rem; width: 100%; } .quiz-access-banner { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)) 0%, var(--color-bg-card) 100%); box-shadow: var(--shadow-sm); } .quiz-access-banner[hidden] { display: none !important; } .quiz-access-kicker { margin: 0 0 0.25rem; color: var(--color-primary); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .quiz-access-title { margin: 0; color: var(--color-text); font-size: 1.05rem; } .quiz-access-text { margin: 0.4rem 0 0; color: var(--color-text-muted); line-height: 1.6; font-size: 0.92rem; } .quiz-access-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; min-width: 240px; } .quiz-card { position: relative; overflow: hidden; background: var(--color-bg-card); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent); border: 1px solid color-mix(in srgb, var(--color-border) 92%, var(--color-primary)); } .quiz-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, #38bdf8) ); opacity: 0.9; pointer-events: none; } .quiz-card--question { padding-bottom: 1.25rem; } .quiz-card h2 { font-size: clamp(1.05rem, 2.8vw, 1.2rem); margin-bottom: 1.5rem; color: var(--color-text); line-height: 1.55; font-weight: 650; letter-spacing: -0.01em; } #question-text { white-space: pre-line; } .quiz-question-meta { box-sizing: border-box; margin: 0 0 0.55rem; padding: 0.28rem 0.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.28rem 0.5rem; min-height: 2rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 10%); background: color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary) 4%); box-shadow: 0 1px 0 color-mix(in srgb, #fff 42%, transparent) inset; } .quiz-question-meta-source { flex: 1 1 0; min-width: min(100%, 8rem); margin-inline-end: auto; font-size: 0.72rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; color: color-mix(in srgb, var(--color-text-muted) 22%, var(--color-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quiz-question-meta-badges { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 0.22rem; flex: 0 0 auto; } .quiz-question-meta-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.1rem 0.4rem; border-radius: 6px; font-size: 0.65rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: none; font-variant-numeric: tabular-nums; color: var(--color-text); background: color-mix(in srgb, var(--color-primary) 11%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); -webkit-font-smoothing: antialiased; } .quiz-question-meta-pill--year { min-width: 2.35rem; } .quiz-question-meta-pill--date { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; letter-spacing: 0.02em; } html[data-theme='dark'] .quiz-question-meta, html.theme-dark .quiz-question-meta { border-color: color-mix(in srgb, var(--color-border) 58%, var(--color-primary) 16%); background: color-mix(in srgb, var(--color-bg-card) 92%, #0f172a 8%); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 5%, transparent) inset; } html[data-theme='dark'] .quiz-question-meta-source, html.theme-dark .quiz-question-meta-source { color: color-mix(in srgb, var(--color-text-muted) 28%, var(--color-text)); } html[data-theme='dark'] .quiz-question-meta-pill, html.theme-dark .quiz-question-meta-pill { background: color-mix(in srgb, var(--color-primary) 16%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border)); } .quiz-question-image { margin-bottom: 1.25rem; border-radius: var(--radius); overflow: hidden; background: var(--color-bg); max-width: 100%; aspect-ratio: 4 / 3; } .quiz-question-image img { display: block; width: 100%; height: auto; max-height: min(42vh, 320px); object-fit: contain; object-position: center; } .quiz-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; counter-reset: mqcm-opt; } .quiz-options > li:has(.quiz-option) { counter-increment: mqcm-opt; } .quiz-options > li { margin: 0; padding: 0; list-style: none; } .quiz-verify-wrap { margin-top: 1.25rem; margin-bottom: 0.25rem; } .quiz-verify-wrap--bottom { flex: 1.35; min-width: 0; margin: 0; display: flex; align-items: stretch; } .quiz-verify-wrap--bottom[hidden] { display: none !important; } .quiz-verify-wrap .quiz-verify-answer-btn { width: 100%; min-height: 50px; font-weight: 700; font-size: 1rem; border-radius: 14px; box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 32%, transparent); transition: box-shadow 0.2s ease, transform 0.2s ease; } .quiz-verify-wrap--bottom .quiz-verify-answer-btn { min-height: 44px; font-size: 0.8rem; font-weight: 700; line-height: 1.2; border-radius: 10px; padding: 0.32rem 0.4rem; white-space: normal; } .quiz-verify-wrap .quiz-verify-answer-btn:not(:disabled):hover { box-shadow: 0 6px 22px color-mix(in srgb, var(--color-primary) 42%, transparent); transform: translateY(-1px); } .quiz-verify-wrap .quiz-verify-answer-btn:not(:disabled):active { transform: translateY(0); } .quiz-verify-wrap .quiz-verify-answer-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; } .quiz-exercise-part-body .quiz-verify-answer-btn { margin-top: 0.85rem; width: 100%; } .quiz-qroc-message { padding: 1rem 1.25rem; margin-bottom: 0.75rem; border: 2px dashed var(--color-primary); border-radius: var(--radius); background: rgba(13, 148, 136, 0.05); font-weight: 600; color: var(--color-text); } /* Même cadre que Qroc, texte un peu plus discret (sous les options après « Vérifier »). */ .quiz-qroc-message--notice { font-size: 0.875rem; font-weight: 500; line-height: 1.45; list-style: none; } .quiz-options > li.quiz-qroc-message--notice { margin-top: 0.65rem; } .quiz-question-stem { margin-bottom: 1rem; padding: 1rem 1.15rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); } .quiz-question-stem-label { margin: 0 0 0.5rem 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); } .quiz-question-stem-body { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--color-text); white-space: pre-wrap; max-height: min(42vh, 20rem); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-right: 0.15rem; } .quiz-question-stem-image { margin-top: 0.85rem; border-radius: calc(var(--radius) - 2px); overflow: hidden; background: var(--color-bg); max-width: 100%; } .quiz-question-stem-image img { display: block; width: 100%; height: auto; max-height: min(38vh, 280px); object-fit: contain; object-position: center; } .quiz-part-question-image { margin: 0 0 0.85rem 0; border-radius: var(--radius); overflow: hidden; background: var(--color-bg); max-width: 100%; } .quiz-part-question-image img { display: block; width: 100%; height: auto; max-height: min(32vh, 240px); object-fit: contain; object-position: center; } .quiz-exercise-parts { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.55rem; } .quiz-exercise-rail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.65rem; } .quiz-exercise-rail-label { margin: 0; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); } .quiz-exercise-rail-meta { margin: 0; font-size: 0.78rem; font-weight: 600; color: color-mix(in srgb, var(--color-text-muted) 22%, var(--color-text)); letter-spacing: -0.01em; } .quiz-exercise-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.28rem; flex: 1 1 auto; min-width: 0; max-width: 100%; } .quiz-exercise-tab { box-sizing: border-box; min-width: 2.35rem; height: 2.35rem; padding: 0 0.45rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--color-border) 78%, var(--color-primary) 12%); background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-bg)); color: var(--color-text); font-size: 0.84rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .quiz-exercise-tab:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); } .quiz-exercise-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent); outline-offset: 2px; } .quiz-exercise-tab--active { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 16%, var(--color-bg-card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent), 0 2px 10px -3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .quiz-exercise-tab--done:not(.quiz-exercise-tab--active) { color: color-mix(in srgb, var(--color-text-muted) 35%, var(--color-text)); background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border)); } .quiz-exercise-tab--partial:not(.quiz-exercise-tab--active) { border-style: dashed; border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); } html[data-theme='dark'] .quiz-exercise-tab, html.theme-dark .quiz-exercise-tab { background: color-mix(in srgb, var(--color-bg-card) 55%, var(--color-bg)); border-color: color-mix(in srgb, var(--color-border) 65%, var(--color-primary) 15%); } html[data-theme='dark'] .quiz-exercise-tab--active, html.theme-dark .quiz-exercise-tab--active { background: color-mix(in srgb, var(--color-primary) 22%, var(--color-bg-card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent); } @media (max-width: 520px) { .quiz-exercise-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; padding: 0.12rem 0; margin: 0 -0.15rem; padding-left: 0.15rem; padding-right: 0.15rem; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .quiz-exercise-tab { scroll-snap-align: start; flex-shrink: 0; } } .quiz-exercise-part, .quiz-exercise-details.quiz-exercise-part { border-radius: var(--radius); border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg) 88%, var(--color-bg-card)); } .quiz-exercise-details.quiz-exercise-part { padding: 0; overflow: hidden; } .quiz-exercise-part { padding: 1rem 1.1rem; } .quiz-exercise-part-prompt { margin: 0 0 0.75rem 0; font-size: 1rem; font-weight: 600; color: var(--color-text); line-height: 1.5; white-space: pre-line; max-height: min(38vh, 18rem); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .quiz-exercise-part-summary { margin: 0; padding: 1rem 1.1rem; font-size: 1rem; font-weight: 600; color: var(--color-text); line-height: 1.45; white-space: pre-line; list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 0.65rem; box-sizing: border-box; } .quiz-exercise-part-summary::-webkit-details-marker { display: none; } .quiz-exercise-part-summary::before { content: ''; flex-shrink: 0; width: 0.45rem; height: 0.45rem; margin-top: 0.4rem; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(-45deg); transition: transform 0.2s ease; } .quiz-exercise-details[open] > .quiz-exercise-part-summary::before { transform: rotate(45deg); margin-top: 0.5rem; } .quiz-exercise-part-body { margin: 0; padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--color-border); } .quiz-exercise-part .quiz-options, .quiz-exercise-details .quiz-options { margin: 0; padding: 0; } .quiz-exercise-part .quiz-qroc-message, .quiz-exercise-details .quiz-qroc-message { margin-bottom: 0; } .quiz-exercise-part .quiz-qroc-message--notice, .quiz-exercise-details .quiz-qroc-message--notice { margin-top: 0.65rem; } .quiz-explanation--inline { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); } .result-detail--exercise { border-left-width: 4px; } .result-detail-sub { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px dashed var(--color-border); } .result-detail-sub:first-of-type { margin-top: 0.35rem; padding-top: 0; border-top: none; } .quiz-option { display: flex; align-items: flex-start; gap: 0.62rem; width: 100%; text-align: left; padding: 0.82rem 0.95rem; min-height: 44px; border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-bg-card); color: var(--color-text); font-family: var(--font); font-size: 0.94rem; line-height: 1.38; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .quiz-option::before { content: counter(mqcm-opt, upper-alpha); flex-shrink: 0; display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; margin-top: 0.06rem; border-radius: 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; background: color-mix(in srgb, var(--color-primary) 13%, var(--color-bg)); border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border)); color: var(--color-primary-dark); } .quiz-option:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent); } .quiz-option.selected::before { background: color-mix(in srgb, var(--color-primary) 28%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border)); color: var(--color-primary); } .quiz-option.correct::before { background: color-mix(in srgb, #22c55e 22%, var(--color-bg-card)); border-color: color-mix(in srgb, #22c55e 45%, var(--color-border)); color: #15803d; } .quiz-option.wrong::before { background: color-mix(in srgb, #ef4444 18%, var(--color-bg-card)); border-color: color-mix(in srgb, #ef4444 40%, var(--color-border)); color: #b91c1c; } @media (max-width: 480px) { .quiz-option { scroll-margin-bottom: 6.75rem; } } .quiz-option:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); } .quiz-option.selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); } .quiz-option.correct { border-color: #22c55e; background: color-mix(in srgb, #22c55e 12%, var(--color-bg-card)); } .quiz-option.wrong { border-color: #ef4444; background: color-mix(in srgb, #ef4444 10%, var(--color-bg-card)); } .quiz-option:disabled { cursor: default; opacity: 0.9; } .quiz-result-access { margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)) 0%, var(--color-bg-card) 100%); } .quiz-result-access[hidden] { display: none !important; } .quiz-result-access-kicker { margin: 0 0 0.25rem; color: var(--color-primary); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .quiz-result-access-title { margin: 0; font-size: 1.05rem; color: var(--color-text); } .quiz-result-access-text { margin: 0.4rem 0 0; color: var(--color-text-muted); line-height: 1.6; font-size: 0.92rem; } .quiz-result-access-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; } .nav-user-status { display: inline-flex; align-items: center; padding: 0.35rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; } .nav-user-status.is-full { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); color: var(--color-primary-dark); } .nav-user-status.is-limited { background: color-mix(in srgb, #f59e0b 14%, var(--color-bg-card)); border-color: color-mix(in srgb, #f59e0b 28%, var(--color-border)); color: #92400e; } .nav-pill--member, .nav-member-prominent { border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); color: var(--color-primary-dark); } .nav-pill--member:hover, .nav-member-prominent:hover { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); } /* Member quiz page */ #member-main.section { background: radial-gradient(ellipse 115% 70% at 50% -12%, color-mix(in srgb, var(--color-primary) 11%, transparent), transparent 50%), var(--color-bg); } .member-quiz-app { min-height: 100dvh; } .member-page-container { width: min(1180px, calc(100vw - var(--safe-left) - var(--safe-right) - 1.5rem)); max-width: none; margin-inline: auto; padding-top: 0.35rem; } .member-quiz-app .member-step-card, .member-quiz-app .modules-grid, .member-quiz-app .module-card, .member-quiz-app .member-layout-mode-hint, .member-quiz-app .member-flow-bar, .member-quiz-app .member-start-area, .member-quiz-app .member-session-summary { transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, opacity 220ms ease, margin 220ms ease, padding 220ms ease; } .member-quiz-app.is-layout-switching .member-step-card, .member-quiz-app.is-layout-switching .member-start-area { transform: translateY(2px); } .member-quiz-app.is-layout-switching .member-flow-bar, .member-quiz-app.is-layout-switching .member-layout-mode-hint { opacity: 0.85; } .member-quiz-app .member-step-card > * { transition: opacity 220ms ease, transform 220ms ease; } .member-quiz-app.is-layout-switching .member-step-card > * { opacity: 0.92; transform: translateY(2px); } .member-quiz-app.is-layout-switching .member-step-card > *:nth-child(1) { transition-delay: 0ms; } .member-quiz-app.is-layout-switching .member-step-card > *:nth-child(2) { transition-delay: 24ms; } .member-quiz-app.is-layout-switching .member-step-card > *:nth-child(3) { transition-delay: 48ms; } .member-quiz-app.is-layout-switching .member-step-card > *:nth-child(4) { transition-delay: 72ms; } .member-quiz-app.is-layout-switching .member-step-card > *:nth-child(5) { transition-delay: 96ms; } .member-quiz-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.35rem; margin-bottom: 1rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)) 0%, var(--color-bg-card) 100%); box-shadow: var(--shadow-sm); } .member-quiz-kicker { margin: 0 0 0.35rem; color: var(--color-primary); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .member-quiz-hero h1 { margin: 0; font-size: clamp(1.45rem, 2.1vw, 1.95rem); line-height: 1.2; color: var(--color-text); } .member-quiz-hero p { margin: 0.5rem 0 0; color: var(--color-text-muted); line-height: 1.6; } .member-layout-modes { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.45rem; flex-wrap: wrap; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 999px; background: color-mix(in srgb, var(--color-bg) 60%, var(--color-bg-card)); box-shadow: var(--shadow-sm); } .member-layout-modes-label { font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); margin-right: 0.1rem; } .member-layout-modes .btn.is-active { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); color: var(--color-primary-dark); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); } .member-layout-mode-hint { margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.4; } .member-layout-modes .btn { border-radius: 999px; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .member-layout-modes .btn:hover { transform: translateY(-1px); } .member-quiz-app.layout-comfort .member-step-card { padding: 1.05rem 1.1rem; border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); box-shadow: 0 2px 10px rgba(2, 132, 199, 0.06); } .member-quiz-app.layout-comfort .modules-grid { gap: 0.85rem; } .member-quiz-app.layout-comfort .member-step-note { color: color-mix(in srgb, var(--color-text-muted) 92%, #0f172a); } .member-quiz-app.layout-comfort .module-card { border-width: 1.5px; } .member-quiz-app.layout-compact .member-layout-mode-hint { margin-bottom: 0.55rem; } .member-quiz-app.layout-compact .member-step-card { padding: 0.72rem 0.8rem; border-radius: 10px; } .member-quiz-app.layout-compact .modules-grid { gap: 0.5rem; margin: 0.9rem 0; max-height: min(60vh, 620px); } .member-quiz-app.layout-compact .module-card { padding: 0.72rem 0.85rem; border-width: 1px; } .member-quiz-app.layout-compact .member-step-head h2 { font-size: 0.98rem; } .member-quiz-app.layout-compact .member-step-note { font-size: 0.83rem; margin-bottom: 0.55rem; } .member-quiz-app.layout-compact .member-flow-item { padding: 0.3rem 0.5rem; } .member-quiz-app.layout-compact .member-flow-text { font-size: 0.76rem; } .member-quiz-app.layout-focus .container { max-width: 760px !important; } .member-quiz-app.layout-focus .member-layout-modes { position: sticky; top: 0.55rem; z-index: 10; backdrop-filter: blur(4px); background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-primary) 12%); border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); } .member-quiz-app.layout-focus .member-limited-matrix, .member-quiz-app.layout-focus #quiz-draft-card, .member-quiz-app.layout-focus #quiz-recommended-card, .member-quiz-app.layout-focus #member-quick-links, .member-quiz-app.layout-focus #member-full-hint { display: none !important; } .member-quiz-app.layout-focus .member-flow-bar { margin-bottom: 0.7rem; opacity: 0.95; } .member-quiz-app.layout-focus .member-step-card { border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border)); box-shadow: 0 6px 20px rgba(13, 148, 136, 0.08); margin-bottom: 0.8rem; } .member-quiz-app.layout-focus .member-step-note { margin-bottom: 0.55rem; } .member-quiz-app.layout-focus .member-step-head { margin-bottom: 0.5rem; } .member-quiz-app.layout-focus .member-step-head h2 { font-size: 1rem; } .member-quiz-app.layout-focus .member-session-summary { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); } .member-quiz-app.layout-focus .member-start-area { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); box-shadow: 0 8px 28px rgba(2, 132, 199, 0.12); } .member-quiz-app.layout-focus #btn-start { width: 100%; justify-content: center; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .member-quiz-app .member-step-card, .member-quiz-app .modules-grid, .member-quiz-app .module-card, .member-quiz-app .member-layout-mode-hint, .member-quiz-app .member-flow-bar, .member-quiz-app .member-start-area, .member-quiz-app .member-session-summary, .member-quiz-app .member-step-card > *, .member-layout-modes .btn { transition: none !important; } } .member-quiz-banner { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)) 0%, var(--color-bg-card) 100%); box-shadow: var(--shadow-sm); } .member-quiz-banner--limited { border-color: color-mix(in srgb, #f59e0b 30%, var(--color-border)); background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 12%, var(--color-bg-card)) 0%, var(--color-bg-card) 100%); } .member-quiz-banner--full { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); } .member-quiz-banner--guest { border-color: color-mix(in srgb, var(--color-text-muted) 20%, var(--color-border)); } .member-quiz-banner--await { border-color: color-mix(in srgb, #38bdf8 28%, var(--color-border)); background: linear-gradient(135deg, color-mix(in srgb, #38bdf8 10%, var(--color-bg-card)) 0%, var(--color-bg-card) 100%); } /* Invité — pas de redirection silencieuse : carte explicite */ .member-access-gate { padding: 2rem 1rem 2.5rem; } .member-access-gate-inner { margin: 0 auto; } .member-access-gate-card { border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-bg-card); padding: 1.5rem 1.35rem; box-shadow: var(--shadow-sm); } .member-access-gate-card h2 { margin: 0 0 0.75rem; font-size: 1.35rem; color: var(--color-text); } .member-access-gate-lead { margin: 0 0 1rem; color: var(--color-text-muted); line-height: 1.6; font-size: 0.95rem; } .member-access-gate-points { margin: 0 0 1.25rem; padding-left: 1.2rem; color: var(--color-text); line-height: 1.55; font-size: 0.92rem; } .member-access-gate-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .member-access-gate-footer { margin: 1.15rem 0 0; font-size: 0.88rem; color: var(--color-text-muted); } .member-access-gate-footer a { color: var(--color-primary); font-weight: 600; } /* Mode limité — matrice dispo / verrouillé */ .member-limited-matrix { margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px dashed color-mix(in srgb, #f59e0b 35%, var(--color-border)); background: color-mix(in srgb, #f59e0b 6%, var(--color-bg-card)); } .member-limited-matrix-title { margin: 0 0 0.65rem; font-size: 0.95rem; color: var(--color-text); } .member-access-list { margin: 0; padding-left: 0; list-style: none; font-size: 0.9rem; line-height: 1.55; color: var(--color-text); } .member-access-list li { display: flex; gap: 0.45rem; align-items: flex-start; margin-bottom: 0.4rem; } .member-access-ok { color: #22c55e; font-weight: 800; flex-shrink: 0; } .member-access-no { color: #f87171; font-weight: 800; flex-shrink: 0; } /* Abonnement complet — raccourcis */ .member-quick-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; margin-bottom: 1rem; padding: 0.65rem 0.85rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); } .member-quick-links-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); margin-right: 0.25rem; } .member-quick-link { font-size: 0.88rem; font-weight: 600; color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; } .member-quick-link:hover { color: var(--color-primary); } .member-full-hint { margin: 0 0 1rem; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.45; } .member-full-hint-card { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); background: linear-gradient( 140deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)), var(--color-bg-card) ); box-shadow: var(--shadow-sm); } .member-full-hint-kicker { margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); } .member-full-hint-text { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-text); } .member-step-card { margin-bottom: 1rem; padding: 1.05rem 1.15rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-card); box-shadow: var(--shadow-sm); } .member-step-card.is-disabled { opacity: 0.72; } .member-step-card.is-disabled .member-step-note::after { content: " (selectionnez d'abord un module)"; font-style: italic; } #btn-start.disabled { pointer-events: none; opacity: 0.6; } #btn-start.is-armed { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent), 0 8px 20px rgba(13, 148, 136, 0.2); transform: translateY(-1px); } .select-input:focus-visible { outline: none; border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); } .member-planner { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0.35rem; } .member-flow-bar { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; } .member-flow-item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.6rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg-card); color: var(--color-text-muted); } .member-flow-item.is-active { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); color: var(--color-primary-dark); } .member-flow-num { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; font-size: 0.74rem; font-weight: 800; background: color-mix(in srgb, var(--color-text-muted) 20%, var(--color-bg-card)); } .member-flow-item.is-active .member-flow-num { background: var(--color-primary); color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 50%, transparent); } .member-flow-text { font-size: 0.82rem; font-weight: 700; } .member-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.65rem; margin-bottom: 0.75rem; } .member-step-head h2 { margin: 0; font-size: 1.14rem; color: var(--color-text); } .member-step-note { margin: 0 0 0.75rem; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.5; } .member-step-index { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); } .member-step-state { margin-left: auto; font-size: 0.74rem; font-weight: 700; border-radius: 999px; padding: 0.2rem 0.55rem; border: 1px solid transparent; white-space: nowrap; } .member-step-state--ok { color: #166534; border-color: color-mix(in srgb, #22c55e 45%, var(--color-border)); background: color-mix(in srgb, #22c55e 14%, var(--color-bg-card)); } .member-step-state--todo { color: var(--color-text-muted); border-color: var(--color-border); background: color-mix(in srgb, var(--color-border) 30%, var(--color-bg-card)); } .member-module-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; margin-bottom: 0.8rem; flex-wrap: wrap; } .member-module-toolbar.is-disabled { opacity: 0.55; } .refinement-progress { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; flex-wrap: wrap; } .refinement-progress-chapitre-track { display: contents; } .refinement-progress-step { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.16rem 0.5rem; background: var(--color-bg-card); position: relative; padding-left: 1.2rem; } .refinement-progress-step::before { content: "○"; position: absolute; left: 0.45rem; top: 50%; transform: translateY(-50%); font-size: 0.68rem; color: currentColor; } .refinement-progress-step.is-active { color: var(--color-primary-dark); border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); } .refinement-progress-step.is-active::before { content: "●"; } .refinement-progress-step.is-done { color: #166534; border-color: color-mix(in srgb, #22c55e 45%, var(--color-border)); background: color-mix(in srgb, #22c55e 13%, var(--color-bg-card)); } .refinement-progress-step.is-done::before { content: "✓"; } .refinement-progress-sep { width: 14px; height: 2px; background: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius: 99px; } .refinement-selection-summary { margin: 0 0 0.45rem; font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.45; } .refinement-pill { display: inline-block; margin: 0 0.25rem 0.1rem 0.2rem; padding: 0.12rem 0.48rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text); font-weight: 600; } .member-module-search { min-width: 260px; flex: 1 1 280px; } .member-module-sort { min-width: 220px; } .member-view-toggle { display: inline-flex; gap: 0.4rem; } .member-view-toggle .btn.is-active { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); color: var(--color-primary-dark); } .member-modules-count { font-size: 0.84rem; color: var(--color-text-muted); font-weight: 600; } .member-preset-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .member-session-summary { margin-top: 0.65rem; padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--color-primary) 26%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card)); color: var(--color-text); font-size: 0.9rem; line-height: 1.45; } .recent-modules { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.75rem; } .recent-modules-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-right: 0.25rem; } .recent-module-chip { border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text); border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.84rem; font-weight: 600; cursor: pointer; } .recent-module-chip:hover { border-color: var(--color-primary); color: var(--color-primary-dark); } .recent-module-chip.is-active { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); color: var(--color-primary-dark); } .member-start-area { position: sticky; bottom: 0.85rem; z-index: 6; background: color-mix(in srgb, var(--color-bg-card) 90%, var(--color-primary) 10%); box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent); } .start-area.member-start-area { border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); } @media (min-width: 1080px) { .member-planner { display: flex; flex-direction: column; gap: 1rem; } .member-step-card--modules .modules-grid { max-height: min(68vh, 740px); } } .member-smart-suggestion { margin: 0.65rem 0 0.5rem; padding: 0.75rem 0.9rem; border-radius: var(--radius); border-left: 4px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card)); box-shadow: var(--shadow-sm); } .member-smart-suggestion[hidden] { display: none !important; } .member-smart-suggestion-label { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary-dark); } .member-smart-suggestion-text { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--color-text); } .member-draft-card { margin: 0.95rem 0 1.2rem; padding: 0.95rem 1rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 8%, transparent); } .member-draft-kicker { margin: 0 0 0.2rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary-dark); font-weight: 800; } .member-draft-title { margin: 0 0 0.3rem; font-size: 1.05rem; } .member-draft-text { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; } .member-draft-actions { margin-top: 0.65rem; display: flex; gap: 0.55rem; flex-wrap: wrap; } /* Profil — bannière onboarding (un message + un chemin) */ .profile-onboarding-banner { margin-bottom: 1.25rem; } .profile-onboarding-inner { border-radius: var(--radius-lg); padding: 1.15rem 1.25rem; border: 1px solid var(--color-border); background: var(--color-bg-card); box-shadow: var(--shadow-sm); } .profile-onboarding-inner--payment { border-color: color-mix(in srgb, #f59e0b 30%, var(--color-border)); background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 10%, var(--color-bg-card)) 0%, var(--color-bg-card) 100%); } .profile-onboarding-inner--wait { border-color: color-mix(in srgb, #38bdf8 28%, var(--color-border)); background: linear-gradient(135deg, color-mix(in srgb, #38bdf8 8%, var(--color-bg-card)) 0%, var(--color-bg-card) 100%); } .profile-onboarding-title { margin: 0 0 0.35rem; font-weight: 800; font-size: 1.05rem; color: var(--color-text); } .profile-onboarding-text { margin: 0 0 0.9rem; font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.5; } .profile-full-strip { margin-bottom: 1.25rem; } .profile-full-strip-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); font-size: 0.9rem; } .profile-full-strip-label { font-weight: 800; color: var(--color-primary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; } .profile-full-strip-links a { font-weight: 600; color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; } .profile-full-strip-links a:hover { color: var(--color-primary); } .profile-subbar-goal { margin: 0.35rem 0 0; font-size: 0.82rem; font-weight: 700; color: var(--color-primary); max-width: 100%; } .profile-goal-edit { padding: 0.5rem 0 0.85rem; border-bottom: 1px solid var(--color-border); max-width: 960px; margin: 0 auto; } .profile-goal-edit-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 0.35rem; } .profile-goal-edit-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .profile-goal-input { flex: 1; min-width: 200px; padding: 0.45rem 0.65rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text); font-size: 0.9rem; } .profile-activity-alert { margin-bottom: 1rem; border-radius: var(--radius-lg); padding: 1rem 1.15rem; border: 1px solid var(--color-border); } .profile-activity-alert--first { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); } .profile-activity-alert--inactive { border-color: color-mix(in srgb, #f59e0b 40%, var(--color-border)); background: color-mix(in srgb, #f59e0b 8%, var(--color-bg-card)); } .profile-activity-alert--error { border-color: color-mix(in srgb, #ef4444 42%, var(--color-border)); background: color-mix(in srgb, #ef4444 10%, var(--color-bg-card)); } html[data-theme="dark"] .profile-activity-alert--error, html.theme-dark .profile-activity-alert--error { border-color: color-mix(in srgb, #f87171 48%, var(--color-border)); background: color-mix(in srgb, #f87171 14%, var(--color-bg-card)); } .profile-activity-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .profile-activity-msg { margin: 0; flex: 1; min-width: 200px; font-size: 0.95rem; line-height: 1.45; color: var(--color-text); } .student-week-compare { margin-bottom: 1.5rem; } .student-week-compare-title { font-size: 1.1rem; margin: 0 0 0.35rem; font-weight: 800; } .student-week-compare-lead { margin: 0 0 1rem; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.45; } .student-week-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem; } .student-compare-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); transition: border-color 0.2s ease, transform 0.2s ease; } .student-compare-card:hover { border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); transform: translateY(-1px); } .student-compare-card h3 { margin: 0 0 0.65rem; font-size: 0.88rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .student-compare-card p { margin: 0.35rem 0; font-size: 0.9rem; color: var(--color-text); } .student-compare-card--delta { border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card)); } .student-compare-note { margin-top: 0.65rem !important; font-size: 0.78rem !important; color: var(--color-text-muted) !important; } .student-week-track { margin-bottom: 1.75rem; } .student-week-track-title { font-size: 1.1rem; margin: 0 0 0.35rem; font-weight: 800; } .student-week-track-lead { margin: 0 0 0.85rem; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.45; } .student-week-track-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--color-text-muted); } .student-week-track-toolbar input { width: 5rem; } .student-week-track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.65rem; } .student-day-cell { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.65rem 0.75rem; background: var(--color-bg-card); font-size: 0.82rem; transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .student-day-cell:hover { border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border)); transform: translateY(-1px); } .student-day-cell.is-today { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent); } .student-day-cell.is-postponed { opacity: 0.92; background: color-mix(in srgb, var(--color-bg) 90%, var(--color-bg-card)); } .student-day-head { display: flex; justify-content: space-between; gap: 0.35rem; margin-bottom: 0.45rem; font-weight: 700; color: var(--color-text); } .student-day-wd { color: var(--color-primary); } .student-day-date { font-size: 0.72rem; font-weight: 500; color: var(--color-text-muted); } .student-day-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-border) 80%, transparent); overflow: hidden; margin-bottom: 0.45rem; } .student-day-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #fff)); } .student-day-meta { margin: 0 0 0.45rem; font-variant-numeric: tabular-nums; color: var(--color-text-muted); } .student-day-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); } /* Tableau de bord — préparation, tendances, points faibles */ .student-insight-board { margin-bottom: 1.75rem; } .student-insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; } .student-insight-heading { margin: 0 0 0.65rem; font-size: 1rem; font-weight: 800; color: var(--color-text); } .student-readiness-card, .student-shortcut-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.15rem 1.2rem; box-shadow: var(--shadow-sm); transition: border-color 0.2s ease, transform 0.2s ease; } .student-readiness-card:hover, .student-shortcut-card:hover { border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); transform: translateY(-1px); } .student-readiness-score-line { margin: 0 0 0.5rem; display: flex; align-items: baseline; gap: 0.25rem; } .student-readiness-score { font-size: 2.35rem; font-weight: 900; line-height: 1; color: var(--color-primary); font-variant-numeric: tabular-nums; } .student-readiness-score-unit { font-size: 1rem; font-weight: 700; color: var(--color-text-muted); } .student-readiness-caption { font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 0.85rem; line-height: 1.45; } .student-readiness-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 0.35rem; } .student-readiness-goal-row { display: flex; align-items: center; gap: 0.75rem; } .student-readiness-goal-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--color-primary); } .student-readiness-goal-row--monthly { margin-top: 0.55rem; flex-wrap: wrap; gap: 0.5rem; } .student-readiness-goal-row--monthly .profile-goal-input { max-width: 5.5rem; } .student-readiness-goal-val { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.5rem; text-align: right; color: var(--color-text); } .student-readiness-hint { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--color-text-muted); } .student-shortcut-desc { margin: 0 0 0.85rem; font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.45; } .student-weak-strip { margin-bottom: 1.25rem; padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, #f87171 22%, var(--color-border)); background: color-mix(in srgb, #f87171 6%, var(--color-bg-card)); } .student-weak-title { margin: 0 0 0.6rem; font-size: 0.95rem; font-weight: 800; color: var(--color-text); } .student-weak-list { margin: 0; padding-left: 1.1rem; color: var(--color-text); line-height: 1.55; font-size: 0.9rem; } .student-weak-link { font-weight: 700; color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .student-last5-block { padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-bg-card); } .student-last5-title { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 800; } .student-last5-lead { margin: 0 0 0.85rem; font-size: 0.85rem; color: var(--color-text-muted); } .student-last5-rows { display: flex; flex-direction: column; gap: 0.35rem; } .student-last5-row { display: grid; grid-template-columns: 2rem 1fr auto auto; gap: 0.5rem 0.75rem; align-items: center; padding: 0.55rem 0.65rem; border-radius: var(--radius); background: color-mix(in srgb, var(--color-bg) 88%, var(--color-bg-card)); font-size: 0.88rem; transition: background-color 0.2s ease; } .student-last5-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, transparent); } .student-last5-trend-col { text-align: center; font-size: 1.1rem; font-weight: 800; } .student-trend--up { color: #22c55e; } .student-trend--down { color: #f87171; } .student-trend--flat { color: var(--color-text-muted); } .student-last5-main { font-weight: 600; color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .student-last5-score { font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } .student-last5-date { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; text-align: right; } @media (max-width: 640px) { .student-last5-row { grid-template-columns: 1.5rem 1fr; } .student-last5-score { grid-column: 2; } .student-last5-date { grid-column: 2; text-align: left; } } .member-quiz-title { margin: 0; font-size: 1.05rem; color: var(--color-text); } .member-quiz-text { margin: 0.35rem 0 0; color: var(--color-text-muted); line-height: 1.6; font-size: 0.92rem; } .member-quiz-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; min-width: 240px; } @media (max-width: 640px) { .member-page-container { width: min(100%, calc(100vw - var(--safe-left) - var(--safe-right) - 1.25rem)); padding-top: 0.1rem; } .member-quiz-hero, .member-quiz-banner { flex-direction: column; } .member-step-head { flex-direction: column; gap: 0.2rem; } .member-module-search { min-width: 0; width: 100%; } .member-module-sort { min-width: 0; width: 100%; } .member-view-toggle { width: 100%; } .member-view-toggle .btn { flex: 1 1 0; } .member-layout-modes { border-radius: var(--radius); } .member-layout-modes-label { width: 100%; margin: 0 0 0.15rem; } .member-layout-modes .btn { flex: 1 1 0; } .member-preset-row .btn { flex: 1 1 calc(50% - 0.5rem); } .member-start-area { position: static; } .member-quiz-app .start-area .btn-lg { min-height: 48px; } .member-quiz-actions { width: 100%; min-width: 0; } .member-quiz-actions .btn { width: 100%; } } @media (max-width: 640px) { .quiz-access-banner { flex-direction: column; } .quiz-access-actions { width: 100%; min-width: 0; } .quiz-access-actions .btn { width: 100%; } .quiz-result-access-actions .btn { width: 100%; } } .quiz-nav { display: flex; justify-content: space-between; margin-top: 2rem; gap: 1rem; } @media (max-width: 640px) { .quiz-brand-nav { flex-direction: column; align-items: stretch; gap: 0.32rem; } .quiz-brand-tools { margin-left: 0; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 0.32rem; width: 100%; } .quiz-top-actions { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: stretch; gap: 0.2rem; padding: 0.22rem; background: color-mix(in srgb, var(--color-bg) 50%, var(--color-bg-card)); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent); overflow: visible; } html[data-theme="dark"] .quiz-top-actions, html.theme-dark .quiz-top-actions { background: color-mix(in srgb, var(--color-bg-card) 55%, var(--color-bg)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 9%, transparent); } .quiz-toolbar-btn { flex: 1 1 0; min-width: 0; justify-content: center; border-radius: 8px; font-size: 0.72rem; font-weight: 600; padding: 0.4rem 0.22rem; min-height: 44px; line-height: 1.2; border: 1px solid transparent; background: transparent; } .quiz-toolbar-btn:hover { background: color-mix(in srgb, var(--color-primary) 11%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); } .quiz-top-actions { overflow: visible; } .quiz-sound-menu-panel { position: fixed; left: var(--quiz-sound-menu-left, 0.5rem); top: var(--quiz-sound-menu-top, calc(env(safe-area-inset-top, 0px) + 4.8rem)); right: auto; width: min(92vw, 19.5rem); max-width: min(92vw, 19.5rem); padding: 0.5rem; border-radius: 13px; box-shadow: 0 16px 42px -18px rgba(15, 23, 42, 0.42), 0 8px 20px -12px rgba(15, 23, 42, 0.24); } .quiz-sound-menu-item { min-height: 44px; border-radius: 10px; padding: 0.54rem 0.62rem; } .quiz-sound-theme-btn { min-height: 44px; border-radius: 10px; font-size: 0.77rem; } .quiz-brand-tools .quiz-exit-to-home { flex: 0 0 auto; flex-shrink: 0; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 10px; padding: 0.4rem 0.58rem; min-height: 44px; font-weight: 600; font-size: 0.76rem; border: 1px solid var(--color-border); background: var(--color-bg-card); box-shadow: var(--shadow-sm); } .quiz-brand-nav .logo-text { max-width: min(11rem, 46vw); overflow: hidden; } .quiz-brand-nav .logo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-size: 0.92rem; } .quiz-card { padding: 1.15rem 1.05rem; border-radius: 18px; box-shadow: 0 4px 28px -8px color-mix(in srgb, var(--color-text) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent); } .quiz-card h2 { font-size: clamp(1rem, 4.2vw, 1.08rem); margin-bottom: 1.05rem; line-height: 1.52; } .quiz-option { min-height: 46px; padding: 0.76rem 0.92rem; font-size: 0.92rem; border-radius: 14px; -webkit-tap-highlight-color: transparent; } .quiz-options { gap: 0.45rem; } .quiz-question-stem { padding: 0.9rem 1rem; } .quiz-verify-wrap .quiz-verify-answer-btn { min-height: 52px; border-radius: 14px; } .quiz-top-chrome { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg-card) 92%, var(--color-primary) 8%) 0%, color-mix(in srgb, var(--color-bg-card) 86%, transparent) 100% ); backdrop-filter: blur(18px) saturate(1.24); -webkit-backdrop-filter: blur(18px) saturate(1.24); border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 11%, var(--color-border)); box-shadow: 0 4px 18px -12px color-mix(in srgb, var(--color-text) 10%, transparent); } .quiz-brand-row { padding: max(0.28rem, env(safe-area-inset-top, 0px)) max(0.72rem, var(--safe-right)) 0 max(0.72rem, var(--safe-left)); } .quiz-brand-nav .logo-mark { width: 30px; height: 30px; border-radius: 8px; padding: 2px; } .quiz-brand-nav .logo-img { max-width: 24px; max-height: 24px; } .quiz-progress-strip { padding: 0.06rem max(0.72rem, var(--safe-right)) 0.42rem max(0.72rem, var(--safe-left)); } .quiz-progress-meta { row-gap: 0.3rem; } .quiz-progress-label { font-size: 0.88rem; } .exam-timer:not([hidden]) { text-align: right; } .quiz-progress-bar { height: 8px; margin-top: 0.38rem; } .quiz-scroll-inner { padding: 0.78rem max(0.72rem, var(--safe-right)) 1.05rem max(0.72rem, var(--safe-left)); } .quiz-bottom-bar { padding: 0.52rem max(0.78rem, var(--safe-right)) max(0.48rem, env(safe-area-inset-bottom, 0px)) max(0.78rem, var(--safe-left)); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 0 color-mix(in srgb, var(--color-primary) 14%, transparent), 0 -16px 48px -12px color-mix(in srgb, var(--color-text) 14%, transparent); } .quiz-bottom-btn { min-height: 46px; border-radius: 12px; font-size: 0.86rem; } .quiz-top-actions { border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); box-shadow: 0 1px 0 color-mix(in srgb, #fff 45%, transparent) inset, 0 2px 12px -4px color-mix(in srgb, var(--color-primary) 12%, transparent); } .quiz-brand-tools .quiz-exit-to-home { border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); box-shadow: 0 2px 14px -4px color-mix(in srgb, var(--color-primary) 14%, transparent); } html[data-theme='dark'] .quiz-top-chrome, html.theme-dark .quiz-top-chrome { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg-card) 92%, #0f172a 8%) 0%, color-mix(in srgb, var(--color-bg-card) 86%, #0f172a 14%) 100% ); border-bottom-color: color-mix(in srgb, var(--color-border) 58%, var(--color-primary) 14%); box-shadow: 0 8px 32px -14px rgba(0, 0, 0, 0.42); } html[data-theme='dark'] .quiz-bottom-bar, html.theme-dark .quiz-bottom-bar { box-shadow: 0 -4px 0 color-mix(in srgb, var(--color-primary) 20%, transparent), 0 -20px 56px -10px rgba(0, 0, 0, 0.48); } } @media (max-width: 520px) { .quiz-text-size-label--full { display: none; } .quiz-text-size-label--short { display: inline; } .quiz-sound-menu-label--full { display: none; } .quiz-sound-menu-label--short { display: inline; } .quiz-sound-menu-panel { width: min(94vw, 18.6rem); max-width: min(94vw, 18.6rem); } .quiz-exit-label--full { display: none; } .quiz-exit-label--short { display: inline; } .quiz-exit-to-home { padding-left: 0.65rem; padding-right: 0.65rem; font-size: 0.82rem; flex-shrink: 0; } .quiz-brand-tools .quiz-exit-to-home { padding-left: 0.65rem; padding-right: 0.65rem; font-size: 0.8rem; } .quiz-extra-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; } .quiz-report-hint { text-align: center; font-size: 0.78rem; line-height: 1.4; } .quiz-result-actions { flex-direction: column; } .quiz-result-actions .btn { width: 100%; justify-content: center; } } @media (max-width: 480px) { .quiz-brand-nav .logo-text { max-width: 9rem; } .quiz-progress-meta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.35rem 0.45rem; align-items: center; } .quiz-mode-chip { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; } .exam-timer:not([hidden]) { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem; } .exam-timer.exam-timer--elapsed:not([hidden]) { font-size: 0.72rem; letter-spacing: -0.01em; } .quiz-progress-label { grid-column: 1; grid-row: 1; justify-self: start; font-size: 1.08rem; } .quiz-progress-meta:has(.exam-timer[hidden]) .quiz-mode-chip { grid-column: 2; grid-row: 1; justify-self: center; } .quiz-progress-meta:has(.exam-timer[hidden]) .quiz-progress-label { grid-column: 1; grid-row: 1; } .quiz-scroll-inner { padding-top: 0.62rem; } .quiz-bottom-btn.btn-primary { font-size: 0.8rem; padding-left: 0.5rem; padding-right: 0.5rem; line-height: 1.25; } } .quiz-extra-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent); } .quiz-extra-actions .btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 600; } .quiz-report-hint { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.45; max-width: 22rem; } .quiz-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)) 1rem; visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.2s; } .quiz-modal[aria-hidden="false"] { visibility: visible; opacity: 1; } .quiz-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); } .quiz-modal-box { position: relative; background: var(--color-bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); max-width: 460px; width: 100%; max-height: min(90vh, 100dvh - 2rem); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.5rem 1.75rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--quiz-modal-vv-inset, 0px)); touch-action: manipulation; } @media (max-width: 540px) { .quiz-modal[aria-hidden="false"] { padding: max(0.5rem, env(safe-area-inset-top)) 0 0; align-items: flex-end; } .quiz-modal[aria-hidden="false"] .quiz-modal-box { max-height: min(92dvh, 100% - env(safe-area-inset-top)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-left: 1.15rem; padding-right: 1.15rem; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px) + var(--quiz-modal-vv-inset, 0px)); } } .quiz-modal-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--color-text); } .quiz-modal-subtitle { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1rem; } .quiz-report-form { display: flex; flex-direction: column; gap: 0.9rem; } .quiz-form-group label { font-size: 0.9rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.25rem; display: block; } .quiz-form-group select, .quiz-form-group textarea { width: 100%; padding: 0.55rem 0.8rem; border-radius: 8px; border: 1px solid var(--color-border); font-family: var(--font); font-size: 0.95rem; } .quiz-form-group textarea { resize: vertical; min-height: 90px; } .quiz-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; } .quiz-report-feedback { margin-top: 0.5rem; font-size: 0.85rem; color: var(--color-text-muted); } .quiz-result { text-align: center; padding: 2rem 1.75rem; } .quiz-result h2 { font-size: clamp(1.35rem, 4vw, 1.6rem); margin-bottom: 0.5rem; font-weight: 700; letter-spacing: -0.02em; } .quiz-result .score { font-size: clamp(2rem, 7vw, 2.65rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-primary); margin: 1rem 0; padding: 0.45rem 1.35rem; display: inline-block; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); box-shadow: 0 4px 20px color-mix(in srgb, var(--color-primary) 12%, transparent); } .quiz-result .message { color: var(--color-text-muted); margin-bottom: 1.5rem; line-height: 1.55; max-width: 32rem; margin-left: auto; margin-right: auto; } .quiz-explanation { margin-top: 1.25rem; padding: 1.05rem 1.25rem; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-right: 4px solid var(--color-primary); box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 8%, transparent); } .explanation-text { margin: 0; color: var(--color-text); font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .explanation-text .explanation-mark { font-weight: 700; } .explanation-text .explanation-mark--red { color: #dc2626; } .explanation-text .explanation-mark--green { color: #16a34a; } .explanation-text .explanation-mark--blue { color: #2563eb; } .quiz-explanation-image { margin-top: 0.85rem; border-radius: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent); background: var(--color-bg-card); } .quiz-explanation-image img { display: block; width: 100%; max-height: 420px; object-fit: contain; } html[data-theme="dark"] .explanation-text .explanation-mark--red, html.theme-dark .explanation-text .explanation-mark--red { color: #f87171; } html[data-theme="dark"] .explanation-text .explanation-mark--green, html.theme-dark .explanation-text .explanation-mark--green { color: #4ade80; } html[data-theme="dark"] .explanation-text .explanation-mark--blue, html.theme-dark .explanation-text .explanation-mark--blue { color: #60a5fa; } html[data-theme="dark"] .quiz-layout, html.theme-dark .quiz-layout { background: radial-gradient(ellipse 120% 85% at 50% -22%, color-mix(in srgb, var(--color-primary) 17%, transparent), transparent 50%), radial-gradient(ellipse 85% 55% at 100% 100%, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 48%), var(--color-bg); } html[data-theme="dark"] .quiz-top-chrome, html.theme-dark .quiz-top-chrome { box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 55%, transparent), 0 14px 42px rgba(0, 0, 0, 0.38), 0 22px 52px -22px color-mix(in srgb, var(--color-primary) 8%, transparent); } html[data-theme="dark"] .quiz-bottom-bar, html.theme-dark .quiz-bottom-bar { background: color-mix(in srgb, var(--color-bg-card) 78%, transparent); box-shadow: 0 -4px 0 color-mix(in srgb, var(--color-primary) 18%, transparent), 0 -16px 48px rgba(0, 0, 0, 0.45); border-top-color: color-mix(in srgb, var(--color-border) 70%, transparent); } html[data-theme="dark"] .quiz-bottom-btn.btn-ghost, html.theme-dark .quiz-bottom-btn.btn-ghost { background: color-mix(in srgb, var(--color-bg) 40%, var(--color-bg-card)); border-color: var(--color-border); } html[data-theme="dark"] .quiz-progress-bar, html.theme-dark .quiz-progress-bar { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .quiz-card, html.theme-dark .quiz-card { box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent); } .result-details { margin-top: 1.5rem; margin-bottom: 1.5rem; text-align: left; max-height: 50vh; overflow-y: auto; } .result-detail { padding: 1rem; margin-bottom: 0.75rem; border-radius: var(--radius); border-left: 4px solid; } .result-detail.detail-correct { background: rgba(34, 197, 94, 0.08); border-color: #22c55e; } .result-detail.detail-wrong { background: rgba(239, 68, 68, 0.06); border-color: #ef4444; } .result-detail h4 { font-size: 0.95rem; margin-bottom: 0.5rem; color: var(--color-text); } .result-detail-stem { margin-bottom: 0.65rem; padding: 0.65rem 0.75rem; border-radius: var(--radius); border-left: 3px solid var(--color-primary); background: rgba(13, 148, 136, 0.07); } .result-detail-stem-label { margin: 0 0 0.35rem 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); } .result-detail-stem-text { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--color-text-muted); } .result-detail-question { margin-top: 0.35rem; } .result-detail p { font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--color-text-muted); } .detail-explanation { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border); } .detail-source { margin-top: 0.35rem; } .result-breakdown { margin-bottom: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: rgba(37, 99, 235, 0.05); } .result-breakdown h3 { margin: 0 0 0.45rem 0; font-size: 0.95rem; color: var(--color-text); } .result-breakdown p { margin: 0.25rem 0; font-size: 0.88rem; color: var(--color-text-muted); } .quiz-result-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* صفحة اختيار الكويز */ .select-intro { color: var(--color-text-muted); margin-bottom: 1.5rem; text-align: center; } .select-filters, .select-options { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; } .select-label { font-weight: 600; font-size: 0.9rem; color: var(--color-text); } .select-input { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; font-family: var(--font); font-size: 1rem; min-width: 140px; } .modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; margin: 1rem 0 1.35rem; max-height: min(52vh, 560px); overflow: auto; padding-right: 0.35rem; } .refinement-panel { transition: opacity 180ms ease, transform 180ms ease; } .refinement-panel.is-visible { opacity: 1; transform: translateY(0); } .refinement-panel.is-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; } .refinement-grid { width: 100%; margin: 0.4rem 0 0.2rem; max-height: min(40vh, 360px); } .refinement-card { min-height: 64px; } .refinement-search { width: min(420px, 100%); } .refinement-multi-hint { font-size: 0.875rem; color: var(--muted, #666); margin: 0 0 0.35rem; line-height: 1.35; } .modules-grid.modules-list-view { grid-template-columns: 1fr; } .modules-grid.modules-list-view .module-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .modules-grid.modules-list-view .module-meta { margin-top: 0; } .module-card { padding: 1rem 1.05rem; text-align: left; border: 2px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-card); font-family: var(--font); font-size: 1rem; cursor: pointer; transition: all 0.2s; display: block; } .module-card:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card)); box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 10%, transparent); } .module-card.selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); font-weight: 600; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 22%, transparent); } .module-name { display: block; color: var(--color-text); } .module-meta { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.25rem; } .start-area { margin-top: 1.5rem; padding: 1.25rem; background: var(--color-bg); border-radius: var(--radius); border: 1px solid var(--color-border); } .selected-name { font-weight: 600; margin-bottom: 0.75rem; color: var(--color-text); } .modules-grid .loading, .modules-grid .error, .modules-grid .empty { grid-column: 1 / -1; color: var(--color-text-muted); text-align: center; padding: 1rem; } /* Responsive */ @media (max-width: 768px) { .nav-accent-line { height: 3px; opacity: 0.88; transform: scaleX(1); border-radius: 0 0 3px 3px; box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 22%, transparent); } .main-header { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg-card) 92%, var(--color-primary) 8%) 0%, color-mix(in srgb, var(--color-bg-card) 89%, transparent) 50%, color-mix(in srgb, var(--color-bg-card) 84%, transparent) 100% ); backdrop-filter: blur(18px) saturate(1.28); -webkit-backdrop-filter: blur(18px) saturate(1.28); border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border)); box-shadow: 0 1px 0 color-mix(in srgb, #fff 38%, transparent) inset, 0 10px 32px -18px color-mix(in srgb, var(--color-text) 12%, transparent); } .main-header.is-scrolled { background: color-mix(in srgb, var(--color-bg-card) 93%, transparent); border-bottom-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 10%, var(--color-border)), 0 14px 42px -20px color-mix(in srgb, var(--color-text) 15%, transparent); } html[data-theme='dark'] .main-header, html.theme-dark .main-header { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg-card) 93%, #0f172a 7%) 0%, color-mix(in srgb, var(--color-bg-card) 87%, #0f172a 13%) 100% ); border-bottom-color: color-mix(in srgb, var(--color-border) 62%, var(--color-primary) 16%); box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset, 0 12px 38px -16px rgba(0, 0, 0, 0.44); } html[data-theme='dark'] .main-header.is-scrolled, html.theme-dark .main-header.is-scrolled { background: color-mix(in srgb, var(--color-bg-card) 95%, #0f172a 5%); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 16%, var(--color-border)), 0 16px 48px -14px rgba(0, 0, 0, 0.58); } .nav { padding: 0 max(var(--s-2), var(--safe-right)) 0 max(var(--s-2), var(--safe-left)); } .nav--workspace { min-height: 50px; gap: 0.4rem; padding: 0.32rem max(var(--s-2), var(--safe-right)) 0.4rem max(var(--s-2), var(--safe-left)); flex-wrap: wrap; border-radius: 0 0 14px 14px; } .main-header.is-scrolled .nav--workspace { min-height: 48px; padding-top: 0.3rem; padding-bottom: 0.36rem; } .nav--workspace .logo { order: 1; flex: 1 1 auto; min-width: 0; } .nav--workspace .nav-actions { order: 2; margin-left: auto; } .nav--workspace .nav-context-chip { order: 3; flex: 0 0 auto; font-size: 0.66rem; padding: 0.22rem 0.5rem; max-width: calc(100vw - 1.25rem); overflow: hidden; text-overflow: ellipsis; } .nav--workspace .nav-links--workspace { order: 4; width: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 0.18rem 0.2rem 0.22rem; border-radius: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; mask-image: linear-gradient(90deg, transparent 0%, #000 14px, #000 calc(100% - 14px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14px, #000 calc(100% - 14px), transparent 100%); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), 0 3px 14px -10px color-mix(in srgb, var(--color-text) 18%, transparent); } .nav--workspace .nav-link-workspace--cta { margin-left: auto; position: sticky; right: 0; flex-shrink: 0; box-shadow: -8px 0 10px color-mix(in srgb, var(--color-bg) 72%, transparent), 0 3px 14px color-mix(in srgb, var(--color-primary) 28%, transparent); } .nav--workspace .nav-links--workspace::-webkit-scrollbar { height: 5px; } .nav--workspace .nav-link-workspace { min-height: 44px; padding: 0.33rem 0.64rem; font-size: 0.82rem; white-space: nowrap; } /* ≤480px : grille compacte sans scroll horizontal forcé */ @media (max-width: 480px) { .nav--workspace .nav-context-chip { display: none; } .nav--workspace .nav-links--workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; flex-wrap: unset; mask-image: none; -webkit-mask-image: none; gap: 0.28rem; padding: 0.2rem; } .nav--workspace .nav-links--workspace > li { min-width: 0; } .nav--workspace .nav-link-workspace { width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; font-size: 0.78rem; padding: 0.4rem 0.45rem; } .nav--workspace .nav-link-workspace--cta { margin-left: 0; position: static; box-shadow: none; } } .nav-inner { min-height: 50px; gap: 6px; flex-wrap: wrap; min-width: 0; } .main-header.is-scrolled .nav-inner { min-height: 46px; padding: 4px 0; } .nav-inner .logo { flex-shrink: 1; min-width: 0; } /* Invité mobile : logo + toolbar sur une seule ligne (sans chevauchement) */ body:not(.mqcm-logged-in) .nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; flex-wrap: nowrap; align-items: center; gap: 12px; } body:not(.mqcm-logged-in) .nav-inner .logo { flex: unset; min-width: 0; max-width: 100%; overflow: hidden; } body:not(.mqcm-logged-in) .main-header .logo--compact .logo-text { min-width: 0; overflow: hidden; } body:not(.mqcm-logged-in) .main-header .logo--compact .logo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:not(.mqcm-logged-in) .nav-toolbar { flex: unset; flex-shrink: 0; margin-left: 0; justify-self: end; } /* Register dans le hero + drawer ; Connexion visible dans la toolbar */ body:not(.mqcm-logged-in) .nav-toolbar .nav-register-cta, body:not(.mqcm-logged-in) .nav-toolbar .nav-actions .btn-primary { display: none !important; } body:not(.mqcm-logged-in) .nav-toolbar .nav-actions .nav-btn-login { display: inline-flex !important; } .nav-toolbar { flex: 0 1 auto; min-width: 0; padding: 5px; gap: 8px; border-radius: 16px; background: color-mix(in srgb, var(--color-text) 3.5%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-border) 78%, var(--color-primary) 22%); box-shadow: 0 1px 0 color-mix(in srgb, #fff 48%, transparent) inset, 0 6px 20px -8px color-mix(in srgb, var(--color-text) 10%, transparent); } html[data-theme='dark'] body:not(.mqcm-logged-in) .nav-toolbar, html.theme-dark body:not(.mqcm-logged-in) .nav-toolbar { background: color-mix(in srgb, var(--color-bg-card) 90%, var(--color-text) 10%); border-color: color-mix(in srgb, var(--color-border) 55%, var(--color-primary) 14%); box-shadow: 0 1px 0 color-mix(in srgb, #fff 5%, transparent) inset, 0 8px 26px -8px rgba(0, 0, 0, 0.38); } .nav-menu-toggle, .site-theme-toggle { border-radius: 13px; border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); background: color-mix(in srgb, var(--color-bg-card) 82%, var(--color-bg) 18%); box-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset; } .nav-menu-toggle:active, .site-theme-toggle:active { transform: scale(0.96); } .nav-links--desktop { display: none; } .nav-menu-toggle { display: inline-flex; } body.mqcm-logged-in .main-header .nav-links, body.mqcm-logged-in .main-header .nav-links--workspace, body.mqcm-logged-in .main-header .nav-context-chip, body.mqcm-logged-in .main-header .nav-actions-logged .nav-user-chip, body.mqcm-logged-in .main-header .nav-actions-logged .nav-btn-logout, body.mqcm-logged-in .main-header #site-theme-toggle, body.mqcm-logged-in .main-header #nav-menu-toggle { display: none !important; } body.mqcm-logged-in .main-header .mobile-app-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 40px; padding: 0.36rem 0.72rem; border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border)); border-radius: 12px; background: linear-gradient( 165deg, color-mix(in srgb, var(--color-bg-card) 88%, var(--color-primary) 12%) 0%, color-mix(in srgb, var(--color-bg-card) 94%, var(--color-bg) 6%) 100% ); color: var(--color-text); font-family: var(--font); font-weight: 750; font-size: 0.82rem; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 1px 0 color-mix(in srgb, #fff 42%, transparent) inset, 0 4px 16px -4px color-mix(in srgb, var(--color-primary) 18%, transparent); transition: background 0.2s ease, border-color 0.2s ease, transform 0.16s ease, box-shadow 0.2s ease; } body.mqcm-logged-in .main-header .mobile-app-menu-toggle:hover { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); box-shadow: 0 1px 0 color-mix(in srgb, #fff 45%, transparent) inset, 0 6px 20px -4px color-mix(in srgb, var(--color-primary) 24%, transparent); } body.mqcm-logged-in .main-header .mobile-app-menu-toggle:active { transform: scale(0.97); } body.mqcm-logged-in .main-header .nav--workspace, body.mqcm-logged-in .main-header .nav-inner { justify-content: space-between; flex-wrap: nowrap; } .mobile-app-menu-icon { width: 16px; height: 2px; background: currentColor; position: relative; border-radius: 99px; display: inline-block; transition: background 0.16s ease; } .mobile-app-menu-icon::before, .mobile-app-menu-icon::after { content: ''; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; border-radius: 99px; transition: transform 0.18s ease, top 0.18s ease; } .mobile-app-menu-icon::before { top: -5px; } .mobile-app-menu-icon::after { top: 5px; } body.mqcm-mobile-menu-open .mobile-app-menu-icon { background: transparent; } body.mqcm-mobile-menu-open .mobile-app-menu-icon::before { top: 0; transform: rotate(45deg); } body.mqcm-mobile-menu-open .mobile-app-menu-icon::after { top: 0; transform: rotate(-45deg); } body.mqcm-mobile-menu-open { touch-action: none; overscroll-behavior: none; } .mobile-app-backdrop { display: block; position: fixed; inset: 0; background: color-mix(in srgb, rgba(2, 6, 23, 0.62) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0; padding: 0; margin: 0; z-index: 1198; opacity: 0; pointer-events: none; transition: opacity 0.28s cubic-bezier(0.32, 0.72, 0, 1); } body.mqcm-mobile-menu-open .mobile-app-backdrop { opacity: 1; pointer-events: auto; } .mobile-app-backdrop[hidden] { display: none !important; pointer-events: none !important; } .mobile-app-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, calc(100vw - max(1rem, var(--safe-left)) - max(0.75rem, var(--safe-right)))); max-width: 100%; padding: 0; padding-top: max(0.75rem, env(safe-area-inset-top, 0px)); padding-bottom: max(0.85rem, calc(env(safe-area-inset-bottom, 0px) + 0.35rem)); padding-left: max(0.85rem, var(--safe-left)); padding-right: max(0.85rem, var(--safe-right)); background: linear-gradient( 165deg, color-mix(in srgb, var(--color-bg-card) 94%, var(--color-primary) 6%) 0%, var(--color-bg-card) 48% ); border-left: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius: 18px 0 0 18px; box-shadow: -16px 0 48px rgba(2, 6, 23, 0.22), -4px 0 24px color-mix(in srgb, var(--color-primary) 8%, transparent); transform: translateX(calc(100% + 24px)); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); z-index: 1199; overflow: hidden; overscroll-behavior: contain; scrollbar-width: thin; } body.mqcm-mobile-menu-open .mobile-app-drawer { transform: translateX(0); } .mobile-app-drawer-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 0; } .mobile-app-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-shrink: 0; margin-bottom: 0.65rem; padding-bottom: 0.65rem; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border)); } .mobile-app-drawer-kicker { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); } .mobile-app-drawer-close { flex-shrink: 0; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); background: color-mix(in srgb, var(--color-bg) 88%, var(--color-primary) 12%); color: var(--color-text); font-size: 0; line-height: 0; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.14s ease; } .mobile-app-drawer-close:active { transform: scale(0.96); } .mobile-app-drawer-close-icon { position: relative; width: 18px; height: 18px; display: block; } .mobile-app-drawer-close-icon::before, .mobile-app-drawer-close-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 99px; background: currentColor; transform-origin: center; } .mobile-app-drawer-close-icon::before { transform: translate(-50%, -50%) rotate(45deg); } .mobile-app-drawer-close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); } .mobile-app-drawer-close:focus-visible, .mobile-app-drawer-links a:focus-visible, .mobile-app-drawer-link:focus-visible, .mobile-app-drawer-cta:focus-visible, .mobile-app-drawer-logout:focus-visible, body.mqcm-logged-in .main-header .mobile-app-menu-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .mobile-app-drawer-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; margin-right: -2px; -webkit-overflow-scrolling: touch; } .mobile-app-drawer-profile { margin: 0 0 1.05rem; padding: 0; } .mobile-app-drawer-profile-card { position: relative; display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1rem 1rem calc(0.95rem + 4px); border-radius: 16px; border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); background: linear-gradient( 125deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)) 0%, color-mix(in srgb, var(--color-bg-card) 96%, var(--color-bg) 4%) 42%, var(--color-bg-card) 100% ); box-shadow: 0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset, 0 6px 22px color-mix(in srgb, var(--color-text) 6%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent); overflow: hidden; } .mobile-app-drawer-profile-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 95%, #fff 5%) 0%, var(--color-primary-dark) 100% ); border-radius: 16px 0 0 16px; opacity: 0.95; } .mobile-app-drawer-profile-avatar { position: relative; width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(2, 6, 23, 0.22); background: linear-gradient( 145deg, color-mix(in srgb, var(--color-primary) 92%, #fff 8%) 0%, var(--color-primary-dark) 100% ); border: 1px solid color-mix(in srgb, #fff 28%, transparent); box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 32%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent); } .mobile-app-drawer-profile-body { flex: 1; min-width: 0; padding-top: 0.08rem; } .mobile-app-drawer-profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.45rem; } .mobile-app-drawer-user { margin: 0 0 0.45rem; font-size: clamp(1.02rem, 3.8vw, 1.14rem); font-weight: 750; letter-spacing: -0.015em; color: var(--color-text); line-height: 1.32; white-space: normal; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; } .mobile-app-drawer-status { margin: 0; display: inline-flex; align-items: center; padding: 0.32rem 0.68rem; border-radius: 999px; border: 1px solid var(--color-border); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; } /* Email sous le nom dans la carte profil (parité avec popover desktop). */ .mobile-app-drawer-email { margin: -0.2rem 0 0.45rem; font-size: 0.78rem; line-height: 1.35; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Sous-ligne "Année · Module" à côté du badge de statut. */ .mobile-app-drawer-sub { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.01em; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-app-drawer-status.is-full { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border)); color: var(--color-primary-dark); } .mobile-app-drawer-status.is-limited { background: color-mix(in srgb, #f59e0b 16%, var(--color-bg-card)); border-color: color-mix(in srgb, #f59e0b 32%, var(--color-border)); color: #92400e; } .mobile-app-drawer-profile-card--limited .mobile-app-drawer-profile-accent { background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); } .mobile-app-drawer-profile-card--limited .mobile-app-drawer-profile-avatar { background: linear-gradient(145deg, #f59e0b 0%, #b45309 100%); border-color: color-mix(in srgb, #fff 22%, #f59e0b 78%); box-shadow: 0 4px 14px color-mix(in srgb, #f59e0b 35%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent); } .mobile-app-drawer-links { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 0.25rem; padding: 0; } .mobile-app-drawer-links a, .mobile-app-drawer-link { min-height: 48px; display: flex; align-items: center; gap: 0.65rem; padding: 0.58rem 0.78rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-border) 92%, var(--color-primary) 8%); background: color-mix(in srgb, var(--color-bg) 70%, var(--color-bg-card) 30%); color: var(--color-text); font-weight: 600; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.14s ease; position: relative; -webkit-tap-highlight-color: transparent; } .mobile-app-drawer-link-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.65rem; text-align: start; } .mobile-app-drawer-page-logo { flex-shrink: 0; width: 2.35rem; height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--color-primary-dark); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); box-shadow: 0 1px 5px color-mix(in srgb, var(--color-primary) 12%, transparent); } .mobile-app-drawer-page-logo-svg { width: 1.15rem; height: 1.15rem; display: block; } .mobile-app-drawer-page-logo-img { width: 1.25rem; height: 1.25rem; object-fit: contain; display: block; } .mobile-app-drawer-page-logo-letter { font-size: 0.8rem; font-weight: 850; letter-spacing: 0.02em; line-height: 1; } .mobile-app-drawer-link-text { flex: 1; min-width: 0; line-height: 1.35; } .mobile-app-drawer-links a::after, .mobile-app-drawer-link::after { content: ''; flex-shrink: 0; width: 0.4rem; height: 0.4rem; border-right: 2px solid color-mix(in srgb, var(--color-text-muted) 70%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--color-text-muted) 70%, transparent); transform: rotate(-45deg); opacity: 0.45; margin-left: auto; } .mobile-app-drawer-links a:hover, .mobile-app-drawer-link:hover { border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg-card)); box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 12%, transparent); } .mobile-app-drawer-links a:active, .mobile-app-drawer-link:active { transform: scale(0.99); } .mobile-app-drawer-links a.is-active, .mobile-app-drawer-link.is-active { border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); color: var(--color-primary-dark); font-weight: 750; box-shadow: inset 3px 0 0 var(--color-primary), 0 4px 16px color-mix(in srgb, var(--color-primary) 14%, transparent); } .mobile-app-drawer-links a.is-active::after, .mobile-app-drawer-link.is-active::after { border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); opacity: 0.85; } .mobile-app-drawer-links a.is-active .mobile-app-drawer-page-logo, .mobile-app-drawer-link.is-active .mobile-app-drawer-page-logo { border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 22%, var(--color-bg-card)); box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 22%, transparent); } /* ====== Apparence (Clair / Sombre / Auto) ====== Bloc segmenté placé après les liens, avant le footer. Parité fonctionnelle avec le popover desktop. */ .mobile-app-drawer-theme { margin: 0.75rem 0 0.25rem; padding: 0.6rem 0.65rem 0.55rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card)); } .mobile-app-drawer-theme-title { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); } .mobile-app-drawer-theme-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; padding: 0.25rem; border-radius: 10px; background: color-mix(in srgb, var(--color-bg) 78%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border)); } .mobile-app-drawer-theme-btn { appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; cursor: pointer; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--color-text-muted); padding: 0.45rem 0.4rem; min-height: 40px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; font-family: var(--font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; } .mobile-app-drawer-theme-btn:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-text); } .mobile-app-drawer-theme-btn:active { transform: scale(0.97); } .mobile-app-drawer-theme-btn[aria-checked="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 92%, #fff 8%) 0%, var(--color-primary) 100%); color: #fff; border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--color-primary) 55%, transparent); } .mobile-app-drawer-theme-btn svg { width: 16px; height: 16px; display: block; } .mobile-app-drawer-theme-text { display: block; font-size: 0.68rem; } .mobile-app-drawer-footer { flex-shrink: 0; margin-top: 0.35rem; padding-top: 0.65rem; border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border)); background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary) 4%) 28%); } .mobile-app-drawer-actions { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 0.5rem; } .mobile-app-drawer-cta, .mobile-app-drawer-logout { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 750; font-family: var(--font); transition: transform 0.14s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .mobile-app-drawer-cta { border: 1px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 90%, #fff 10%) 0%, var(--color-primary) 100% ); color: #fff; text-decoration: none; box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 35%, transparent); } .mobile-app-drawer-cta:active { transform: scale(0.99); } .mobile-app-drawer-logout { border: 1px dashed color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border)); background: color-mix(in srgb, var(--color-bg) 88%, transparent); color: var(--color-text-muted); cursor: pointer; } .mobile-app-drawer-logout:hover { border-style: solid; border-color: var(--color-border); color: var(--color-text); } .mobile-app-drawer-logout:disabled { opacity: 0.7; cursor: not-allowed; } .mobile-app-drawer-feedback { margin: 0 0 0.45rem; padding: 0.5rem 0.65rem; border-radius: 10px; border: 1px solid color-mix(in srgb, #ef4444 38%, var(--color-border)); background: color-mix(in srgb, #ef4444 10%, var(--color-bg-card)); color: #b91c1c; font-size: 0.78rem; line-height: 1.45; } .mobile-app-drawer-footnote { margin: 0; font-size: 0.7rem; line-height: 1.45; color: var(--color-text-muted); text-align: center; opacity: 0.92; } @media (max-width: 560px) { .mobile-app-drawer { width: min(268px, calc(100vw - max(0.5rem, var(--safe-left)) - max(0.4rem, var(--safe-right)))); padding-top: max(0.35rem, env(safe-area-inset-top, 0px)); padding-bottom: max(0.4rem, calc(env(safe-area-inset-bottom, 0px) + 0.1rem)); padding-left: max(0.5rem, var(--safe-left)); padding-right: max(0.5rem, var(--safe-right)); border-radius: 12px 0 0 12px; box-shadow: -8px 0 26px rgba(2, 6, 23, 0.16), -2px 0 12px color-mix(in srgb, var(--color-primary) 8%, transparent); } .mobile-app-drawer-head { margin-bottom: 0.32rem; padding-bottom: 0.32rem; gap: 0.35rem; } .mobile-app-drawer-kicker { font-size: 0.58rem; letter-spacing: 0.05em; } .mobile-app-drawer-close { min-width: 44px; min-height: 44px; border-radius: 8px; } .mobile-app-drawer-close-icon { width: 14px; height: 14px; } .mobile-app-drawer-close-icon::before, .mobile-app-drawer-close-icon::after { width: 11px; } .mobile-app-drawer-profile { margin-bottom: 0.48rem; } .mobile-app-drawer-profile-card { gap: 0.48rem; padding: 0.55rem 0.58rem 0.55rem calc(0.55rem + 3px); border-radius: 10px; } .mobile-app-drawer-profile-accent { border-radius: 10px 0 0 10px; } .mobile-app-drawer-profile-avatar { width: 36px; height: 36px; border-radius: 8px; font-size: 0.78rem; } .mobile-app-drawer-profile-meta { gap: 0.22rem; margin-bottom: 0; } .mobile-app-drawer-user { margin-bottom: 0.24rem; font-size: 0.82rem; line-height: 1.24; } .mobile-app-drawer-status { padding: 0.18rem 0.42rem; font-size: 0.58rem; } .mobile-app-drawer-email { margin: -0.12rem 0 0.24rem; font-size: 0.68rem; } .mobile-app-drawer-sub { font-size: 0.6rem; } .mobile-app-drawer-links { gap: 0.22rem; } .mobile-app-drawer-links a, .mobile-app-drawer-link { min-height: 44px; gap: 0.42rem; padding: 0.4rem 0.48rem; border-radius: 8px; font-size: 0.84rem; } .mobile-app-drawer-link-label { gap: 0.42rem; } .mobile-app-drawer-page-logo { width: 1.75rem; height: 1.75rem; border-radius: 7px; } .mobile-app-drawer-page-logo-svg { width: 0.9rem; height: 0.9rem; } .mobile-app-drawer-page-logo-img { width: 0.95rem; height: 0.95rem; } .mobile-app-drawer-page-logo-letter { font-size: 0.66rem; } .mobile-app-drawer-link-text { line-height: 1.26; font-size: 0.84rem; } .mobile-app-drawer-theme { margin: 0.38rem 0 0.1rem; padding: 0.38rem 0.42rem 0.35rem; border-radius: 9px; } .mobile-app-drawer-theme-title { margin-bottom: 0.28rem; font-size: 0.6rem; } .mobile-app-drawer-theme-seg { gap: 0.22rem; padding: 0.14rem; border-radius: 7px; } .mobile-app-drawer-theme-btn { min-height: 44px; padding: 0.32rem 0.22rem; gap: 0.08rem; font-size: 0.62rem; border-radius: 5px; } .mobile-app-drawer-theme-btn svg { width: 12px; height: 12px; } .mobile-app-drawer-theme-text { font-size: 0.56rem; } .mobile-app-drawer-footer { margin-top: 0.18rem; padding-top: 0.38rem; } .mobile-app-drawer-actions { gap: 0.26rem; margin-bottom: 0.28rem; } .mobile-app-drawer-cta, .mobile-app-drawer-logout { min-height: 44px; border-radius: 8px; font-size: 0.82rem; padding: 0.35rem 0.55rem; } .mobile-app-drawer-feedback { margin-bottom: 0.28rem; padding: 0.32rem 0.42rem; font-size: 0.68rem; } .mobile-app-drawer-footnote { font-size: 0.6rem; line-height: 1.35; } } [dir='rtl'] .mobile-app-drawer { right: auto; left: 0; border-left: none; border-right: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius: 0 18px 18px 0; box-shadow: 16px 0 48px rgba(2, 6, 23, 0.22), 4px 0 24px color-mix(in srgb, var(--color-primary) 8%, transparent); transform: translateX(calc(-100% - 24px)); } [dir='rtl'] body.mqcm-mobile-menu-open .mobile-app-drawer { transform: translateX(0); } [dir='rtl'] .mobile-app-drawer-links a, [dir='rtl'] .mobile-app-drawer-link { flex-direction: row-reverse; } [dir='rtl'] .mobile-app-drawer-links a::after, [dir='rtl'] .mobile-app-drawer-link::after { margin-left: 0; margin-right: auto; transform: rotate(45deg); } [dir='rtl'] .mobile-app-drawer-profile-card { flex-direction: row-reverse; padding: 1rem calc(0.95rem + 4px) 1rem 1rem; } @media (max-width: 560px) { [dir='rtl'] .mobile-app-drawer { border-radius: 0 14px 14px 0; } [dir='rtl'] .mobile-app-drawer-profile-card { padding: 0.68rem calc(0.68rem + 3px) 0.68rem 0.72rem; } [dir='rtl'] .mobile-app-drawer-profile-accent { border-radius: 0 12px 12px 0; } } [dir='rtl'] .mobile-app-drawer-profile-accent { left: auto; right: 0; border-radius: 0 16px 16px 0; } @media (prefers-reduced-motion: reduce) { .mobile-app-backdrop, .mobile-app-drawer, .mobile-app-menu-icon, .mobile-app-menu-icon::before, .mobile-app-menu-icon::after, body.mqcm-logged-in .main-header .mobile-app-menu-toggle, .mobile-app-drawer-close, .mobile-app-drawer-links a, .mobile-app-drawer-link, .mobile-app-drawer-cta, .mobile-app-drawer-logout { transition: none !important; } .mobile-app-drawer-links a:active, .mobile-app-drawer-link:active, .mobile-app-drawer-cta:active, .mobile-app-drawer-close:active { transform: none; } } .logo { gap: 8px; min-width: 0; } .logo-text { display: none; } .logo--quiz .logo-text, .logo--compact .logo-text { display: flex; flex-direction: column; min-width: 0; } .logo--quiz .logo-name, .logo--compact .logo-name { font-size: 1.05rem; } .quiz-brand-nav .logo--quiz .logo-name { font-size: 0.92rem; } .logo-mark { width: 32px; height: 32px; border-radius: 10px; padding: 3px; box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, var(--color-border)); } .logo-img { max-width: 24px; max-height: 24px; } /* Invité : logo + MajorQCM net sur mobile (sans écraser le header connecté) */ body:not(.mqcm-logged-in) .main-header .logo--compact .logo-text { align-items: flex-start; min-width: 0; } body:not(.mqcm-logged-in) .main-header .logo--compact .logo-name { font-size: clamp(1rem, 3.6vw, 1.09rem); font-weight: 800; letter-spacing: -0.038em; line-height: 1.08; } body:not(.mqcm-logged-in) .main-header .logo--compact .logo-name-accent { font-weight: 800; } /* Session connectée (mobile) : header type « app », marque nette, cluster profil + menu */ body.mqcm-logged-in .main-header { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg-card) 91%, var(--color-primary) 9%) 0%, color-mix(in srgb, var(--color-bg-card) 87%, transparent) 100% ); backdrop-filter: blur(22px) saturate(1.32); -webkit-backdrop-filter: blur(22px) saturate(1.32); border-bottom-color: color-mix(in srgb, var(--color-primary) 15%, var(--color-border)); box-shadow: 0 1px 0 color-mix(in srgb, #fff 32%, transparent) inset, 0 10px 34px -16px color-mix(in srgb, var(--color-primary) 16%, transparent); } body.mqcm-logged-in .main-header.is-scrolled { background: color-mix(in srgb, var(--color-bg-card) 94%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 14%, var(--color-border)), 0 12px 40px -18px color-mix(in srgb, var(--color-text) 14%, transparent); } html[data-theme="dark"] body.mqcm-logged-in .main-header, html.theme-dark body.mqcm-logged-in .main-header { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg-card) 91%, #0f172a 9%) 0%, color-mix(in srgb, var(--color-bg-card) 86%, #0f172a 14%) 100% ); border-bottom-color: color-mix(in srgb, var(--color-border) 58%, var(--color-primary) 18%); box-shadow: 0 1px 0 color-mix(in srgb, #fff 5%, transparent) inset, 0 12px 40px -14px rgba(0, 0, 0, 0.48); } html[data-theme="dark"] body.mqcm-logged-in .main-header.is-scrolled, html.theme-dark body.mqcm-logged-in .main-header.is-scrolled { background: color-mix(in srgb, var(--color-bg-card) 95%, #0f172a 5%); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 20%, var(--color-border)), 0 14px 48px -12px rgba(0, 0, 0, 0.58); } body.mqcm-logged-in .nav-inner { flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; min-height: 50px; } body.mqcm-logged-in .logo { flex: 1 1 auto; min-width: 0; gap: 10px; transition: transform 0.2s ease, opacity 0.2s ease; } body.mqcm-logged-in .logo:active { transform: scale(0.98); opacity: 0.92; } body.mqcm-logged-in .logo-mark { width: 32px; height: 32px; border-radius: 10px; box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, var(--color-border)); } display: flex; min-width: 0; gap: 1px; } body.mqcm-logged-in .logo-name { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } body.mqcm-logged-in .logo-name-major { color: var(--color-text); } body.mqcm-logged-in .logo-name-accent { color: var(--color-primary); } body.mqcm-logged-in .logo-tagline { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; opacity: 0.72; } body.mqcm-logged-in .logo-img { max-width: 24px; max-height: 24px; } body.mqcm-logged-in .nav-toolbar #site-theme-toggle { display: none; } body.mqcm-logged-in .nav-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 1px; padding: 4px; min-width: 0; border-radius: 14px; background: color-mix(in srgb, var(--color-text) 4%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 4px 14px -4px color-mix(in srgb, var(--color-text) 12%, transparent); } html[data-theme="dark"] body.mqcm-logged-in .nav-toolbar, html.theme-dark body.mqcm-logged-in .nav-toolbar { background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-text) 12%); border-color: color-mix(in srgb, var(--color-border) 55%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 6px 20px -6px rgba(0, 0, 0, 0.45); } body.mqcm-logged-in .nav-actions-logged { flex: 0 0 auto; flex-wrap: nowrap; gap: 0; min-width: 0; justify-content: flex-end; } body.mqcm-logged-in .nav-actions-logged .nav-btn-logout { display: none; } body.mqcm-logged-in .nav-user-chip { box-sizing: border-box; position: relative; width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0; justify-content: center; border: none; border-radius: 10px; background: transparent; box-shadow: none; transition: background 0.18s ease, box-shadow 0.18s ease; } body.mqcm-logged-in .nav-user-chip:hover { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); } body.mqcm-logged-in .nav-user-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); } body.mqcm-logged-in .nav-user-chip-avatar { width: 32px; height: 32px; font-size: 0.78rem; box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 22%, transparent); } body.mqcm-logged-in .nav-menu-toggle { width: 46px; height: 46px; border: none; border-radius: 10px; background: transparent; box-shadow: none; transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease; } body.mqcm-logged-in .nav-menu-toggle:hover { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); border-color: transparent; } body.mqcm-logged-in .nav-menu-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } body.mqcm-logged-in.nav-drawer-open .nav-menu-toggle { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); color: var(--color-primary-dark); } body.mqcm-logged-in .nav-user-chip-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nav-toolbar .nav-actions { gap: var(--s-1); } .nav-toolbar .nav-actions .btn { padding: 0.42rem 0.6rem; font-size: 0.82rem; min-height: 40px; } .nav-drawer { position: fixed; top: 0; right: 0; left: auto; bottom: 0; height: 100dvh; max-height: 100dvh; width: min(360px, 88vw); border-left: 1px solid var(--color-border); border-top-left-radius: 18px; border-bottom-left-radius: 18px; background: color-mix(in srgb, var(--color-bg-card) 96%, transparent); box-shadow: -18px 0 42px rgba(15, 23, 42, 0.2); padding: 0; overflow: hidden; } .nav-drawer-glow { display: none; } .nav-drawer-head { padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-left: max(12px, var(--safe-left)); padding-right: max(12px, var(--safe-right)); } .nav-drawer-body { padding-left: max(12px, var(--safe-left)); padding-right: max(12px, var(--safe-right)); } .nav-drawer-foot { padding-left: max(12px, var(--safe-left)); padding-right: max(12px, var(--safe-right)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } [dir='rtl'] .nav-drawer { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 18px; border-bottom-right-radius: 18px; } body.nav-drawer-open .nav-drawer { transform: translateX(0); } .nav-backdrop { top: 0; } .nav-drawer-spotlight { margin-bottom: 10px; padding: 12px 13px; border-radius: 14px; } .nav-drawer-spotlight-text strong { font-size: 0.98rem; } .nav-drawer-spotlight-text small { font-size: 0.84rem; line-height: 1.35; } .nav-drawer-links a { min-height: 50px; padding: 12px 10px; font-size: 0.95rem; } .nav-drawer-links--quick a { min-height: 48px; } .nav-drawer-section-label { margin: 14px 0 7px; font-size: 0.68rem; letter-spacing: 0.14em; } .nav-drawer-status-card, .nav-drawer-activity-card { border-radius: 14px; padding: 11px; } .nav-drawer-footer { padding: 0; } .nav-drawer-foot-btn { min-height: 46px; border-radius: 11px; } body.nav-drawer-open .nav-toolbar .nav-actions { visibility: hidden; pointer-events: none; } .hero-shell { padding: var(--s-6) var(--s-3) var(--s-5); } .section-features { padding-block: 2.75rem 3rem; } .features-grid { gap: var(--s-3); } .feature-card { padding: var(--s-3); } .hero { grid-template-columns: 1fr; text-align: center; gap: var(--s-3); } .hero-panel { text-align: center; padding: var(--s-3); } .hero-title { font-size: clamp(1.7rem, 7.2vw, 2.05rem); line-height: 1.28; } .hero-subtitle { font-size: 1rem; line-height: 1.62; } .hero-subtitle, .hero-uvp, .hero-trust { margin-left: auto; margin-right: auto; } .hero-trust { justify-content: center; text-align: left; max-width: 100%; } .hero-cta { flex-direction: column; align-items: stretch; justify-content: center; width: 100%; } .hero-cta .btn { width: 100%; max-width: none; min-height: 48px; justify-content: center; } .stats-row { gap: var(--s-4); } .stat-item-num { font-size: 2rem; } .pricing-grid { grid-template-columns: 1fr; } /* * Accueil (#pricing) — mobile : piste pleine largeur, aperçu net des cartes latérales, * flèches sous la piste (évite le chevauchement sur le contenu). */ .section-pricing .pricing-carousel { direction: ltr; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-inline: max(var(--s-3), var(--safe-left)); box-sizing: border-box; } .section-pricing .pricing-carousel__strip { container-type: inline-size; container-name: pricing-strip; min-width: 0; width: 100%; } .section-pricing .pricing-carousel__nav { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 14px; margin-top: 14px; } .section-pricing .pricing-carousel--static { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; padding-inline: 0; } .section-pricing .pricing-carousel--static .pricing-carousel__nav { display: none; } .section-pricing .pricing-grid { --pc-gap: 12px; --pc-card-inner: min(300px, calc(100cqi * 0.68)); --pc-side-pad: calc((100cqi - var(--pc-card-inner)) / 2); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: var(--pc-gap); width: 100%; margin: 0; padding-left: max(0px, var(--pc-side-pad)); padding-right: max(0px, var(--pc-side-pad)); padding-bottom: 14px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-inline: max(0px, var(--pc-side-pad)); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border)) transparent; } @supports not (container-type: inline-size) { .section-pricing .pricing-grid { --pc-card-inner: min(300px, calc(100% * 0.68)); --pc-side-pad: calc((100% - var(--pc-card-inner)) / 2); } } .section-pricing .pricing-grid::-webkit-scrollbar { height: 4px; } .section-pricing .pricing-grid::-webkit-scrollbar-track { margin-inline: 8px; background: color-mix(in srgb, var(--color-border) 40%, transparent); border-radius: 100px; } .section-pricing .pricing-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-primary) 50%, var(--color-border)); border-radius: 100px; } .section-pricing .pricing-card { --pc-card-w: var(--pc-card-inner); flex: 0 0 var(--pc-card-w); width: var(--pc-card-w); min-width: 0; box-sizing: border-box; scroll-snap-align: center; scroll-snap-stop: normal; padding: 1.35rem 1.25rem; border-radius: 16px; border: 1px solid var(--color-border); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07); } @supports not (container-type: inline-size) { .section-pricing .pricing-card { --pc-card-w: var(--pc-card-inner); } } html[data-theme="dark"] .section-pricing .pricing-card, html.theme-dark .section-pricing .pricing-card { box-shadow: 0 6px 26px rgba(0, 0, 0, 0.32); } .section-pricing .pricing-card.featured { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 32%, transparent), 0 12px 36px -10px color-mix(in srgb, var(--color-primary) 38%, transparent); } .section-pricing .pricing-card:hover { transform: none; } @media (hover: hover) { .section-pricing .pricing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border)); } .section-pricing .pricing-card.featured:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 45%, transparent), 0 16px 40px -12px color-mix(in srgb, var(--color-primary) 45%, transparent); } } @media (prefers-reduced-motion: reduce) { .section-pricing .pricing-grid { scroll-snap-type: none; } } .section-pricing .pricing-carousel__arrow { position: static; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius: 14px; background: color-mix(in srgb, var(--color-bg-card) 96%, transparent); color: var(--color-primary-dark); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08); cursor: pointer; transform: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } html[data-theme="dark"] .section-pricing .pricing-carousel__arrow, html.theme-dark .section-pricing .pricing-carousel__arrow { background: color-mix(in srgb, var(--color-bg-card) 92%, #0f172a); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } .section-pricing .pricing-carousel__arrow:hover:not(:disabled) { background: var(--color-bg-card); border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 14%, transparent); } .section-pricing .pricing-carousel__arrow:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 4px 16px rgba(15, 23, 42, 0.12); } .section-pricing .pricing-carousel__arrow:disabled { opacity: 0.28; cursor: default; pointer-events: none; } .pricing-card { padding: 1.4rem; border-radius: 14px; } .section-pricing .pricing-card .badge { top: -8px; font-size: 0.74rem; padding: 0.28rem 0.65rem; } .pricing-card h3 { font-size: 1.08rem; } .section-pricing .pricing-card h3 { font-size: 1.05rem; margin-bottom: 0.75rem; line-height: 1.25; } .price { font-size: 1.5rem; } .price .amount { font-size: 1.75rem; } .section-pricing .pricing-card ul { margin-bottom: 1.15rem; } .pricing-card li { font-size: 0.92rem; line-height: 1.55; } .section-pricing .pricing-card li { padding: 0.32rem 0; padding-inline-end: 1.15rem; font-size: 0.88rem; line-height: 1.5; } .pricing-tabs { gap: var(--s-2); } .pricing-tab { flex: 1 1 auto; min-width: 0; justify-content: center; } .faq-item summary { padding: 0.9rem 1rem; min-height: 46px; font-size: 0.96rem; } .faq-item summary::after { width: 1.8rem; height: 1.8rem; font-size: 1.2rem; } .faq-item p { padding: 0 1rem 0.95rem; font-size: 0.92rem; line-height: 1.62; } html[data-theme="dark"] .mobile-app-drawer, html.theme-dark .mobile-app-drawer { background: linear-gradient( 165deg, color-mix(in srgb, var(--color-bg-card) 88%, #070d18 12%) 0%, color-mix(in srgb, var(--color-bg-card) 92%, #070d18 8%) 100% ); border-color: color-mix(in srgb, var(--color-border) 52%, var(--color-primary) 22%); } html[data-theme="dark"] .mobile-app-drawer-profile-card, html.theme-dark .mobile-app-drawer-profile-card { background: linear-gradient( 125deg, color-mix(in srgb, var(--color-bg-card) 82%, var(--color-primary) 18%) 0%, color-mix(in srgb, var(--color-bg-card) 94%, #070d18 6%) 60% ); border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, 0 8px 28px rgba(0, 0, 0, 0.32); } html[data-theme="dark"] .mobile-app-drawer-profile-accent, html.theme-dark .mobile-app-drawer-profile-accent { opacity: 1; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 88%, #fff 12%) 0%, var(--color-primary-dark) 100% ); } html[data-theme="dark"] .mobile-app-drawer-profile-avatar, html.theme-dark .mobile-app-drawer-profile-avatar { border-color: color-mix(in srgb, #fff 14%, transparent); box-shadow: 0 4px 18px color-mix(in srgb, var(--color-primary) 28%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); } html[data-theme="dark"] .mobile-app-drawer-profile-card--limited .mobile-app-drawer-profile-accent, html.theme-dark .mobile-app-drawer-profile-card--limited .mobile-app-drawer-profile-accent { background: linear-gradient(180deg, #fbbf24 0%, #b45309 100%); } html[data-theme="dark"] .mobile-app-drawer-links a, html.theme-dark .mobile-app-drawer-links a, html[data-theme="dark"] .mobile-app-drawer-link, html.theme-dark .mobile-app-drawer-link { background: color-mix(in srgb, var(--color-bg-card) 82%, var(--color-bg) 18%); } html[data-theme="dark"] .mobile-app-drawer-footer, html.theme-dark .mobile-app-drawer-footer { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-bg-card) 94%, #070d18 6%) 40%); border-top-color: color-mix(in srgb, var(--color-border) 55%, var(--color-primary) 18%); } html[data-theme="dark"] .mobile-app-backdrop, html.theme-dark .mobile-app-backdrop { background: color-mix(in srgb, rgba(2, 6, 23, 0.78) 92%, transparent); } /* Dark mode pour les nouveaux blocs (email / sous-ligne / Apparence). */ html[data-theme="dark"] .mobile-app-drawer-email, html.theme-dark .mobile-app-drawer-email, html[data-theme="dark"] .mobile-app-drawer-sub, html.theme-dark .mobile-app-drawer-sub { color: color-mix(in srgb, var(--color-text) 70%, transparent); } html[data-theme="dark"] .mobile-app-drawer-theme, html.theme-dark .mobile-app-drawer-theme { background: color-mix(in srgb, var(--color-bg-card) 82%, var(--color-bg) 18%); border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-primary) 18%); } html[data-theme="dark"] .mobile-app-drawer-theme-seg, html.theme-dark .mobile-app-drawer-theme-seg { background: color-mix(in srgb, #070d18 65%, var(--color-bg-card) 35%); border-color: color-mix(in srgb, var(--color-border) 55%, var(--color-primary) 14%); } html[data-theme="dark"] .mobile-app-drawer-theme-btn:hover, html.theme-dark .mobile-app-drawer-theme-btn:hover { background: color-mix(in srgb, var(--color-primary) 16%, transparent); } } @media (max-width: 420px) { .nav { padding-left: max(10px, var(--safe-left)); padding-right: max(10px, var(--safe-right)); } .nav--workspace { padding: 0.35rem max(10px, var(--safe-right)) 0.35rem max(10px, var(--safe-left)); } .nav--workspace .nav-context-chip { display: none; } .nav-inner { min-height: 56px; gap: 6px; } body.mqcm-logged-in .nav-inner { min-height: 58px; gap: 8px; } body.mqcm-logged-in .nav-toolbar { padding: 3px; border-radius: 12px; } body.mqcm-logged-in .nav-user-chip, body.mqcm-logged-in .nav-menu-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 9px; } body.mqcm-logged-in .nav-user-chip-avatar { width: 30px; height: 30px; font-size: 0.74rem; } .site-theme-toggle, .nav-menu-toggle { width: 44px; height: 44px; border-radius: 11px; } body.mqcm-logged-in .nav-menu-toggle { border-radius: 9px; } .nav-toolbar .nav-actions .btn { padding: 0.45rem 0.6rem; font-size: 0.78rem; min-height: 44px; } body:not(.mqcm-logged-in) .nav-toolbar { padding: 4px; gap: 6px; } body:not(.mqcm-logged-in) .nav-toolbar .nav-actions .btn { padding: 0.4rem 0.5rem; font-size: 0.74rem; min-height: 42px; } .nav-drawer { width: min(344px, calc(90vw - var(--safe-left) - var(--safe-right))); padding-left: max(10px, var(--safe-left)); padding-right: max(10px, var(--safe-right)); } .nav-drawer-spotlight { padding: 11px 11px; border-radius: 13px; } .nav-drawer-spotlight-icon { width: 40px; height: 40px; border-radius: 11px; } .nav-drawer-spotlight-text strong { font-size: 0.94rem; } .nav-drawer-spotlight-text small { font-size: 0.8rem; } .nav-drawer-status-title, .nav-drawer-activity-title { font-size: 0.86rem; } .nav-drawer-status-sub, .nav-drawer-activity-sub { font-size: 0.78rem; } .hero-shell { padding: var(--s-5) var(--s-2) var(--s-4); } .hero-panel { padding: 1rem; border-radius: 14px; } .hero-title { font-size: clamp(1.55rem, 8vw, 1.85rem); } .hero-subtitle { font-size: 0.95rem; } .hero-trust { font-size: 0.86rem; } .pricing-card { padding: 1.15rem; } .section-pricing .pricing-carousel__nav { gap: 12px; margin-top: 12px; } .section-pricing .pricing-carousel__arrow { width: 44px; height: 44px; border-radius: 12px; } .section-pricing .pricing-grid { --pc-gap: 10px; --pc-card-inner: min(288px, calc(100cqi * 0.66)); --pc-side-pad: calc((100cqi - var(--pc-card-inner)) / 2); } .section-pricing .pricing-card { --pc-card-w: var(--pc-card-inner); padding: 1.2rem 1.05rem; border-radius: 15px; } .pricing-tab { min-height: 44px; font-size: 0.92rem; } .footer-cta-actions .btn, .footer-newsletter .btn { min-height: 44px; } } @media (max-width: 360px) { .nav-drawer { width: min(92vw, calc(100vw - var(--safe-left) - var(--safe-right))); border-top-left-radius: 16px; border-bottom-left-radius: 16px; } [dir='rtl'] .nav-drawer { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 16px; border-bottom-right-radius: 16px; } .nav-drawer-links a { padding: 12px 10px; min-height: 48px; font-size: 0.9rem; } .nav-drawer-link-icon { width: 1.1rem; } .nav-drawer-foot-btn { min-height: 44px; font-size: 0.88rem; } .hero-title { font-size: 1.45rem; line-height: 1.3; } .hero-uvp { font-size: 0.72rem; } .hero-cta .btn { min-height: 44px; font-size: 0.9rem; padding-inline: 0.8rem; } .pricing-card h3 { font-size: 1rem; } .section-pricing .pricing-carousel__nav { gap: 10px; margin-top: 10px; } .section-pricing .pricing-carousel__arrow { width: 42px; height: 42px; border-radius: 11px; } .section-pricing .pricing-grid { --pc-gap: 10px; --pc-card-inner: min(268px, calc(100cqi * 0.64)); --pc-side-pad: calc((100cqi - var(--pc-card-inner)) / 2); } .section-pricing .pricing-card { --pc-card-w: var(--pc-card-inner); } .price .amount { font-size: 1.55rem; } .faq-item summary { font-size: 0.92rem; } } html[data-theme="dark"] .nav-drawer, html.theme-dark .nav-drawer { background: color-mix(in srgb, #0f172a 92%, #111827); border-left-color: #334155; } html[data-theme="dark"] .nav-drawer-spotlight, html.theme-dark .nav-drawer-spotlight { border-color: color-mix(in srgb, var(--color-primary) 28%, #334155); } html[data-theme="dark"] .nav-drawer-status-card, html.theme-dark .nav-drawer-status-card, html[data-theme="dark"] .nav-drawer-activity-card, html.theme-dark .nav-drawer-activity-card { border-color: #334155; } /* Préparation RTL — page d’accueil arabe (`lang="ar" dir="rtl"`) : voir docs/guide-version-arabe-a11y.md */ [dir="rtl"] .nav-drawer { right: auto; left: 0; border-left: none; border-right: 1px solid var(--color-border); transform: translateX(-100%); } [dir="rtl"] body.nav-drawer-open .nav-drawer { transform: translateX(0); } [dir="rtl"] .nav-drawer-back-icon { transform: scaleX(-1); } [dir="rtl"] .nav-drawer-panel .nav-drawer-links a::after { transform: rotate(45deg); margin-top: -4px; } [dir="rtl"] .nav-drawer-spotlight-text { text-align: right; } [dir="rtl"] .pricing-card li { padding-right: 0; padding-left: 1.25rem; } [dir="rtl"] .pricing-card li::before { right: auto; left: 0; } [dir="rtl"] .cta-onboarding { text-align: right; } [dir="rtl"] .how-step-num { left: auto; right: var(--s-2); } [dir="rtl"] .nav-drawer-spotlight { flex-direction: row-reverse; } [dir="rtl"] .nav-drawer-spotlight-arrow { transform: scaleX(-1); } [dir="rtl"] .nav-drawer-links a { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .nav-drawer-links a:hover { transform: translateX(-2px); } /* M5.2 — liens / boutons fantômes navigation : contraste AA sur fond clair */ .nav .btn-ghost:hover { color: var(--btn-outline-fg); } html[data-theme="dark"] .nav .btn-ghost:hover, html.theme-dark .nav .btn-ghost:hover { color: var(--color-primary-light); } /* M5.1 — reflow / zoom ~200 % : éviter débordements de texte sur l’accueil */ .main-content { overflow-wrap: anywhere; min-width: 0; max-width: 100%; } .footer-socials a { color: rgba(255, 255, 255, 0.88); } html[lang="ar"] body.ar-landing, html[lang="ar"] body.ar-landing .nav, html[lang="ar"] body.ar-landing .main-content { font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif; } /* ——— Espace étudiant / profil (dashboard) ——— */ /* Barre d’identité : fusionnée dans .student-hero sur la page profil (#profile-subbar). */ .student-hero-toolbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; } /* Layout & finitions réservés à la page profil (body.page-profile) */ /* — Visuel « Studio révision » : toile, cartes verre, accents primaires (intensité ++) — */ body.page-profile, body.page-mes-qcm { background-image: radial-gradient(ellipse 95% 65% at 100% -18%, color-mix(in srgb, var(--color-primary, #0d9488) 28%, transparent), transparent 48%), radial-gradient(ellipse 75% 50% at -5% 45%, color-mix(in srgb, var(--color-primary, #0d9488) 18%, transparent), transparent 46%), radial-gradient(ellipse 50% 35% at 50% 100%, color-mix(in srgb, var(--color-primary, #0d9488) 8%, transparent), transparent 55%), linear-gradient(185deg, var(--color-bg, #f1f5f9) 0%, var(--color-bg, #f8fafc) 38%, color-mix(in srgb, var(--color-bg-card, #fff) 55%, var(--color-bg)) 100%); background-attachment: fixed; } @media (max-width: 720px) { body.page-profile, body.page-mes-qcm { background-attachment: scroll; } } html[data-theme='dark'] body.page-profile, html[data-theme='dark'] body.page-mes-qcm, html.theme-dark body.page-profile, html.theme-dark body.page-mes-qcm { background-image: radial-gradient(ellipse 95% 70% at 100% -5%, color-mix(in srgb, var(--color-primary, #14b8a6) 20%, transparent), transparent 48%), radial-gradient(ellipse 70% 45% at 0% 55%, color-mix(in srgb, var(--color-primary, #14b8a6) 12%, transparent), transparent 42%), radial-gradient(ellipse 55% 38% at 70% 100%, color-mix(in srgb, var(--color-primary, #14b8a6) 8%, transparent), transparent 50%), linear-gradient(190deg, #020617 0%, var(--color-bg) 45%, color-mix(in srgb, var(--color-bg-card) 72%, var(--color-bg)) 100%); } .page-profile .main-content.section, .page-mes-qcm .main-content.section { padding-top: 1rem; padding-bottom: 2.25rem; } /* Mes QCM — ambiance dashboard */ .page-mes-qcm--v2 .main-content.section { padding-top: 1.35rem; padding-bottom: 2.85rem; background: radial-gradient(90% 60% at 18% -8%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 52%), radial-gradient(70% 45% at 100% 0%, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 45%), linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 3.2%, var(--color-bg)) 0%, var(--color-bg) 18rem, var(--color-bg) 100%); } html[data-theme='dark'] .page-mes-qcm--v2 .main-content.section { background: radial-gradient(80% 50% at 20% -5%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 48%), var(--color-bg); } .page-mes-qcm--v2 .mes-qcm-wrap { max-width: 1040px; gap: 1.35rem; } .page-mes-qcm--v2 .student-panel-card { border-radius: 14px; border-color: color-mix(in srgb, var(--color-border) 90%, var(--color-primary) 10%); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 65%, transparent), 0 12px 40px rgba(2, 6, 23, 0.055); } .page-mes-qcm--v2 .student-panel-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 18%, transparent), 0 18px 50px rgba(2, 6, 23, 0.09); } html[data-theme='dark'] .page-mes-qcm--v2 .student-panel-card, html.theme-dark .page-mes-qcm--v2 .student-panel-card { box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 55%, transparent), 0 14px 40px rgba(2, 6, 23, 0.38), 0 22px 48px -20px color-mix(in srgb, var(--color-primary) 7%, transparent); } html[data-theme='dark'] .page-mes-qcm--v2 .student-panel-card:hover, html.theme-dark .page-mes-qcm--v2 .student-panel-card:hover { box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 22%, transparent), 0 20px 52px rgba(2, 6, 23, 0.45), 0 28px 56px -18px color-mix(in srgb, var(--color-primary) 10%, transparent); } /* Page historique QCM — tableau de bord pratique */ .mes-qcm-wrap { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.1rem; } .mes-qcm-section { display: flex; flex-direction: column; gap: 0; min-width: 0; } .mes-qcm-section--history { gap: 0.65rem; } .page-mes-qcm--v2 .mes-qcm-section--history { gap: 0.85rem; } .mes-qcm-advanced-head { padding: 0.95rem 1.15rem 0.8rem; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent); } .mes-qcm-region-title { margin: 0 0 0.3rem; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); } .mes-qcm-region-lead { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--color-text-muted); max-width: 42rem; } .mes-qcm-hero { padding: 1.5rem 1.45rem 1.35rem; position: relative; overflow: hidden; } .mes-qcm-hero::after { content: ''; position: absolute; inset: -45% 50% auto -25%; height: 130%; background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 70%); pointer-events: none; opacity: 0.9; } .mes-qcm-hero-intro { position: relative; z-index: 1; min-width: 0; flex: 1 1 16rem; } .page-mes-qcm--v2 .mes-qcm-hero-cta-secondary { border-color: color-mix(in srgb, var(--color-border) 75%, var(--color-primary) 25%); background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-primary) 4%); } .mes-qcm-hero-top { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.25rem; } .mes-qcm-kicker { margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-dark); } html[data-theme='dark'] .mes-qcm-kicker { color: color-mix(in srgb, var(--color-primary) 85%, var(--color-text)); } .mes-qcm-title { margin: 0 0 0.4rem; font-size: clamp(1.35rem, 2.6vw, 1.65rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } .mes-qcm-lead { margin: 0; max-width: 36rem; color: var(--color-text-muted); font-size: 0.94rem; line-height: 1.55; } .mes-qcm-actions { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .mes-qcm-kpis { position: relative; z-index: 1; margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem 0.85rem; } .mes-qcm-kpis--v4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .mes-qcm-kpis--v4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .mes-qcm-kpis { grid-template-columns: 1fr; } .mes-qcm-kpis--v4 { grid-template-columns: 1fr; } } .mes-qcm-supervisor { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 18%); background: color-mix(in srgb, var(--color-bg-card) 92%, var(--color-primary) 7%); } .mes-qcm-supervisor-inner { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; } .mes-qcm-supervisor-title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--color-text); } .mes-qcm-supervisor-text { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--color-text-muted); max-width: 52rem; } .mes-qcm-kpi { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.75rem 0.85rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%); background: color-mix(in srgb, var(--color-bg-card) 94%, var(--color-primary) 5%); } .page-mes-qcm--v2 .mes-qcm-kpi { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent); } html[data-theme='dark'] .page-mes-qcm--v2 .mes-qcm-kpi { box-shadow: none; } .mes-qcm-kpi-val { font-size: 1.42rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--color-text); line-height: 1.1; } .mes-qcm-kpi-label { font-size: 0.74rem; font-weight: 600; color: var(--color-text-muted); line-height: 1.35; } .mes-qcm-spark-wrap { position: relative; z-index: 1; margin-top: 1.1rem; padding: 0.85rem 1rem 0.75rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 14%); background: color-mix(in srgb, var(--color-bg-card) 92%, var(--color-primary) 6%); } .mes-qcm-spark-label { margin: 0 0 0.45rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text-muted); } .mes-qcm-spark-svg { display: block; width: 100%; max-width: 100%; height: 3.5rem; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--color-border) 40%, transparent)); } .mes-qcm-results-panel { display: flex; flex-direction: column; gap: 0.35rem; } .mes-qcm-loading-line { margin: 0; min-height: 1.15em; font-size: 0.78rem; font-weight: 700; color: var(--color-primary-dark); letter-spacing: 0.02em; padding: 0.35rem 0.5rem; border-radius: 8px; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); } html[data-theme='dark'] .mes-qcm-loading-line { color: color-mix(in srgb, var(--color-primary) 85%, var(--color-text)); } .mes-qcm-empty { padding: 1.85rem 1.5rem 1.75rem; text-align: left; border: 1px dashed color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%); background: linear-gradient( 165deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card)) 0%, var(--color-bg-card) 42% ); } .mes-qcm-empty-kicker { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); } .mes-qcm-empty-title { margin: 0 0 0.45rem; font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; } .mes-qcm-empty-text { margin: 0 0 1rem; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.55; max-width: 40rem; } .mes-qcm-empty-steps { margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: mqcmstep; max-width: 40rem; } .mes-qcm-empty-steps li { counter-increment: mqcmstep; position: relative; padding: 0.55rem 0 0.55rem 2.35rem; font-size: 0.88rem; line-height: 1.45; color: var(--color-text); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); } .mes-qcm-empty-steps li:last-child { border-bottom: none; } .mes-qcm-step-num { position: absolute; left: 0; top: 0.45rem; width: 1.65rem; height: 1.65rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; background: color-mix(in srgb, var(--color-primary) 22%, var(--color-bg-card)); color: var(--color-primary-dark); } html[data-theme='dark'] .mes-qcm-step-num { color: var(--color-text); } .mes-qcm-empty .btn { margin-top: 0.25rem; } /* Mes QCM — MVP / v2 : toast fixe + fermeture + actions mobile (details) */ #mes-qcm-action-feedback.mes-qcm-toast { position: fixed; left: 50%; bottom: max(1rem, calc(0.65rem + env(safe-area-inset-bottom, 0px))); transform: translateX(-50%); z-index: 220; width: min(36rem, calc(100vw - 1.5rem)); max-width: calc(100vw - 1.5rem); margin: 0; padding: 0.65rem 0.85rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.45; font-weight: 600; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg-card) 94%, var(--color-text-muted) 3%); color: var(--color-text); box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12), 0 2px 0 color-mix(in srgb, var(--color-primary) 10%, transparent); align-items: flex-start; gap: 0.65rem; box-sizing: border-box; } #mes-qcm-action-feedback.mes-qcm-toast[hidden] { display: none !important; } #mes-qcm-action-feedback.mes-qcm-toast:not([hidden]) { display: flex !important; } .mes-qcm-action-feedback-text { flex: 1; min-width: 0; } .mes-qcm-action-feedback-dismiss { flex-shrink: 0; width: 2.25rem; height: 2.25rem; margin: -0.1rem -0.15rem -0.1rem 0; padding: 0; border: none; border-radius: 10px; font-size: 1.25rem; line-height: 1; font-weight: 700; color: var(--color-text-muted); background: color-mix(in srgb, var(--color-bg) 55%, transparent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .mes-qcm-action-feedback-dismiss:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); } .mes-qcm-action-feedback-dismiss:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .mes-qcm-action-feedback--ok { border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 11%, var(--color-bg-card)); } .mes-qcm-action-feedback--error { border-color: color-mix(in srgb, #ef4444 48%, var(--color-border)); background: color-mix(in srgb, #ef4444 9%, var(--color-bg-card)); color: color-mix(in srgb, var(--color-text) 88%, #b91c1c); } @keyframes mes-qcm-action-spin { to { transform: rotate(360deg); } } .mes-qcm-action-btn--busy { pointer-events: none; position: relative; } .mes-qcm-delete-history.mes-qcm-action-btn--busy .mes-qcm-action-icon { opacity: 0.22; } .mes-qcm-delete-history.mes-qcm-action-btn--busy::after { content: ''; position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--color-border) 72%, var(--color-text-muted)); border-top-color: var(--color-primary); animation: mes-qcm-action-spin 0.7s linear infinite; } .mes-qcm-table tbody tr[tabindex='-1']:focus { outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent); outline-offset: 2px; } .mes-qcm-table tbody tr:has(details[open]) { position: relative; z-index: 5; } @media (prefers-reduced-motion: reduce) { .mes-qcm-action-btn--tile { transition: none !important; } .mes-qcm-action-btn--icon:hover:not(:disabled) { transform: none; } .mes-qcm-delete-history.mes-qcm-action-btn--busy::after { animation: none; border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); opacity: 0.9; } #mes-qcm-load-more.mes-qcm-load-more--busy::after { animation: none; border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); } #mes-qcm-action-feedback.mes-qcm-toast:not([hidden]) { transform: translateX(-50%); } } .mes-qcm-table-wrap { padding: 0; overflow: visible; } .mes-qcm-table-head { display: flex; flex-direction: column; align-items: stretch; gap: 0.85rem; padding: 1.1rem 1.2rem 0.85rem; border-bottom: 1px solid var(--color-border); background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg-card) 88%, var(--color-primary) 5%) 0%, var(--color-bg-card) 100% ); } .mes-qcm-filters-panel-head .mes-qcm-region-title { margin-bottom: 0.35rem; } .mes-qcm-filters-panel-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.65rem 1rem; } .mes-qcm-filters-panel-head-main { min-width: 0; flex: 1 1 14rem; } .mes-qcm-filters-panel-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem 0.65rem; flex: 0 1 auto; } .mes-qcm-filters-panel-head-actions .mes-qcm-filters-status { margin: 0; } @media (max-width: 560px) { .mes-qcm-filters-panel-head-actions { flex-basis: 100%; justify-content: flex-end; } } .mes-qcm-filters-panel-kicker { margin: 0 0 0.22rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text-muted) 82%, var(--color-primary) 18%); } .mes-qcm-filters-status { flex: 0 0 auto; margin: 0.1rem 0 0; padding: 0.32rem 0.75rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 8%); background: color-mix(in srgb, var(--color-bg-card) 92%, transparent); color: var(--color-text-muted); line-height: 1.25; max-width: min(100%, 16rem); text-align: center; } .mes-qcm-filters-status--active { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); color: var(--color-text); } .mes-qcm-filters-section { padding: 0.85rem 1.15rem 0.95rem; border-top: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent); } .mes-qcm-filters-section-head { margin-bottom: 0.7rem; } .mes-qcm-filters-section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 0.85rem; } .mes-qcm-filters-section-head-text { min-width: 0; flex: 1 1 12rem; } .mes-qcm-filters-reset-all { flex-shrink: 0; white-space: nowrap; } .mes-qcm-filters-reset-all:disabled, .mes-qcm-filters-reset-all[disabled] { opacity: 0.48; cursor: not-allowed; color: var(--color-text-muted); border-color: color-mix(in srgb, var(--color-border) 94%, transparent) !important; background: color-mix(in srgb, var(--color-bg-card) 96%, var(--color-border) 4%) !important; box-shadow: none; pointer-events: none; } .mes-qcm-filters-section-title { margin: 0; font-size: 0.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); } .mes-qcm-filters-section-lead { margin: 0.32rem 0 0; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.45; max-width: 44rem; } .mes-qcm-filters-section-lead--inline { margin-top: 0.2rem; } .mes-qcm-filters-section-lead--short { max-width: 20rem; line-height: 1.35; } .mes-qcm-filters-block-title { margin: 0 0 0.55rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text-muted) 88%, var(--color-primary) 12%); } .mes-qcm-filters-block-title--ruled { display: flex; align-items: center; gap: 0.55rem; width: 100%; box-sizing: border-box; } .mes-qcm-filters-block-title--ruled::after { content: ''; flex: 1 1 auto; min-width: 2rem; height: 1px; border-radius: 1px; background: linear-gradient( 90deg, color-mix(in srgb, var(--color-border) 72%, var(--color-primary) 22%), color-mix(in srgb, var(--color-border) 55%, transparent 45%) ); } .mes-qcm-filters-toolbar-card { padding: 0.75rem 0.9rem 0.85rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 12%); background: color-mix(in srgb, var(--color-bg-card) 94%, var(--color-primary) 4%); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent); } html[data-theme='dark'] .mes-qcm-filters-toolbar-card { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent); } .mes-qcm-filter-meta--toolbar { margin-top: 0.7rem; margin-bottom: 0; } .mes-qcm-filter-input--search { padding-left: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7.5' r='4.5'/%3E%3Cpath d='M11 11 15.5 15.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.7rem 50%; background-size: 1.05rem; } html[data-theme='dark'] .mes-qcm-filter-input--search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7.5' r='4.5'/%3E%3Cpath d='M11 11 15.5 15.5'/%3E%3C/svg%3E"); } .mes-qcm-filters-panel { border-radius: 14px; } .mes-qcm-filters-panel > .mes-qcm-advanced-head { padding: 1rem 1.2rem 0.95rem; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg-card) 90%, var(--color-primary) 6%) 0%, var(--color-bg-card) 100% ); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 85%, var(--color-primary) 6%); } .mes-qcm-region-lead--filters { font-size: 0.78rem; line-height: 1.4; max-width: 34rem; color: var(--color-text-muted); } .mes-qcm-filters-section--toolbar { border-top: none; padding-top: 0.85rem; } .mes-qcm-filters-list-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(10.5rem, 13rem); gap: 0.65rem 1rem; align-items: end; } .mes-qcm-filters-list-body--simple { grid-template-columns: minmax(0, 1fr); } @media (max-width: 900px) { .mes-qcm-filters-list-body { grid-template-columns: 1fr 1fr; } .mes-qcm-filters-list-body--simple { grid-template-columns: 1fr; } } @media (max-width: 640px) { .mes-qcm-filters-list-body { grid-template-columns: 1fr; } } .mes-qcm-field--filter label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text-muted); } .mes-qcm-filter-meta--panel { margin-top: 0.65rem; padding: 0.45rem 0.65rem; border-radius: 8px; font-size: 0.74rem; line-height: 1.4; background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-border) 12%); border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent); } .mes-qcm-filters-toolbar-card .mes-qcm-filter-meta--panel { background: color-mix(in srgb, var(--color-bg-card) 90%, var(--color-primary) 6%); border-color: color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 10%); } .mes-qcm-filters-section--chips { padding-top: 0.65rem; padding-bottom: 0.75rem; } .mes-qcm-filters-section-title--chips { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 0.45rem; } .mes-qcm-filter-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.45rem; align-items: center; } .mes-qcm-filter-chip { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; padding: 0.28rem 0.35rem 0.28rem 0.55rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 14%); background: color-mix(in srgb, var(--color-bg-card) 90%, var(--color-primary) 8%); font-size: 0.78rem; line-height: 1.3; } .mes-qcm-filter-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; color: var(--color-text); } @media (max-width: 520px) { .mes-qcm-filter-chip-label { max-width: 10rem; } } .mes-qcm-filter-chip-remove { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; margin: 0; padding: 0; border: none; border-radius: 50%; background: color-mix(in srgb, var(--color-bg-card) 70%, transparent); color: var(--color-text-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; } .mes-qcm-filter-chip-remove:hover { background: color-mix(in srgb, var(--color-primary) 22%, var(--color-bg-card)); color: var(--color-text); } .mes-qcm-filter-chip-remove:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } .mes-qcm-date-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; margin-bottom: 0.65rem; padding: 0.5rem 0.65rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 10%); background: color-mix(in srgb, var(--color-bg-card) 97%, var(--color-primary) 3%); } .mes-qcm-date-presets-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .mes-qcm-date-presets-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; } .mes-qcm-table-head-text { min-width: 0; } .mes-qcm-table-title { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; } .mes-qcm-table-sub { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.45; max-width: 40rem; } .mes-qcm-table-tools { display: grid; width: 100%; max-width: 44rem; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr) auto; gap: 0.5rem 0.65rem; align-items: stretch; } @media (max-width: 720px) { .mes-qcm-table-tools { grid-template-columns: 1fr; max-width: none; } } .mes-qcm-filter-preview { padding: 0.75rem 1.2rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent); background: color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary) 4%); } .mes-qcm-filter-preview-title { margin: 0; font-size: 0.92rem; font-weight: 700; } .mes-qcm-filter-preview-lead { margin: 0.35rem 0 0.55rem; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.45; max-width: 48rem; } .mes-qcm-table-scroll--preview { max-height: 18rem; } .mes-qcm-table--preview { font-size: 0.82rem; } .mes-qcm-table--preview th, .mes-qcm-table--preview td { padding: 0.4rem 0.55rem; } .mes-qcm-th-preview-action { min-width: 8.5rem; text-align: right; } @media (max-width: 719px) { .mes-qcm-table--preview .mes-qcm-th-action { min-width: 4.25rem; } } .mes-qcm-preview-cell-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-muted); } .mes-qcm-preview-cell-mod { word-break: break-word; } .mes-qcm-select { padding: 0.45rem 0.55rem; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text); font-family: var(--font); font-size: 0.86rem; min-width: 0; } .mes-qcm-select:focus { outline: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent); outline-offset: 1px; } .mes-qcm-filter-input { min-width: 0; width: 100%; padding: 0.45rem 0.65rem; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text); font-family: var(--font); font-size: 0.86rem; } .mes-qcm-filter-input:focus { outline: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent); outline-offset: 1px; } .mes-qcm-filter-meta { margin: 0; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.4; } .mes-qcm-table-tools .mes-qcm-filter-meta { grid-column: 1 / -1; } .mes-qcm-advanced-panel { padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%); } .mes-qcm-filters-panel.mes-qcm-advanced-panel { box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 55%, transparent); } .mes-qcm-fieldset--filters-time { padding: 0.35rem 0 0; } .page-mes-qcm--v2 .mes-qcm-advanced-panel:not(.mes-qcm-filters-panel) { background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg-card) 95%, var(--color-primary) 5%) 0%, var(--color-bg-card) 100% ); } .page-mes-qcm--v2 .mes-qcm-filters-panel.mes-qcm-advanced-panel { background: var(--color-bg-card); } .page-mes-qcm--v3 .mes-qcm-filters-panel.mes-qcm-advanced-panel { border-radius: 16px; border-color: color-mix(in srgb, var(--color-border) 78%, var(--color-primary) 16%); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 45%, transparent), 0 14px 42px -20px color-mix(in srgb, var(--color-text) 22%, transparent); } .page-mes-qcm--v3 .mes-qcm-filters-panel > .mes-qcm-advanced-head { position: relative; padding: 1.05rem 1.25rem 1rem 1.35rem; border-bottom-color: color-mix(in srgb, var(--color-border) 78%, var(--color-primary) 14%); } .page-mes-qcm--v3 .mes-qcm-filters-panel > .mes-qcm-advanced-head::before { content: ''; position: absolute; left: 0.55rem; top: 0.85rem; bottom: 0.85rem; width: 3px; border-radius: 4px; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 92%, var(--color-primary-dark, #312e81) 8%), color-mix(in srgb, var(--color-primary) 35%, transparent 65%) ); opacity: 0.95; } .page-mes-qcm--v3 .mes-qcm-filters-panel-head .mes-qcm-region-title { font-size: 1.06rem; letter-spacing: -0.028em; } .page-mes-qcm--v3 .mes-qcm-filters-status { box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 55%, transparent); } .page-mes-qcm--v3 .mes-qcm-filters-section { padding-left: 1.2rem; padding-right: 1.2rem; } .page-mes-qcm--v3 .mes-qcm-filters-section--chips { background: color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary) 4%); } .page-mes-qcm--v3 .mes-qcm-fieldset--filters-time { margin-top: 0.2rem; padding: 0.95rem 1rem 1.05rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-primary) 12%); background: color-mix(in srgb, var(--color-bg-card) 95%, var(--color-primary) 3%); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent); } html[data-theme='dark'] .page-mes-qcm--v3 .mes-qcm-fieldset--filters-time { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent); } .page-mes-qcm--v3 .mes-qcm-date-presets { margin-bottom: 0.75rem; padding: 0.45rem 0.55rem; border-radius: 11px; border-color: color-mix(in srgb, var(--color-border) 78%, var(--color-primary) 14%); background: color-mix(in srgb, var(--color-bg-card) 93%, var(--color-primary) 5%); } .page-mes-qcm--v3 .mes-qcm-date-presets-btns { gap: 0.28rem; } .page-mes-qcm--v3 .mes-qcm-date-preset-btn { border-radius: 9px; font-weight: 600; } .page-mes-qcm--v3 .mes-qcm-date-preset-btn:hover { background: color-mix(in srgb, var(--color-bg-card) 82%, var(--color-primary) 14%); border-color: color-mix(in srgb, var(--color-border) 65%, var(--color-primary) 28%); } .page-mes-qcm--v3 .mes-qcm-filters-reset-all { border-radius: 10px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--color-border) 72%, var(--color-primary) 22%); background: color-mix(in srgb, var(--color-bg-card) 94%, var(--color-primary) 4%); } .page-mes-qcm--v3 .mes-qcm-filters-reset-all:hover:not(:disabled) { border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-primary) 10%); } .page-mes-qcm--v3 .mes-qcm-filters-reset-all:disabled, .page-mes-qcm--v3 .mes-qcm-filters-reset-all[disabled] { opacity: 0.46; color: var(--color-text-muted); border-color: color-mix(in srgb, var(--color-border) 92%, transparent) !important; background: color-mix(in srgb, var(--color-bg-card) 97%, var(--color-border) 3%) !important; } .page-mes-qcm--v3 .mes-qcm-filter-error { margin-left: 1.2rem; margin-right: 1.2rem; border-radius: 10px; } .mes-qcm-advanced { padding: 0; } .mes-qcm-fieldset { margin: 0; padding: 0.75rem 0.85rem 0.65rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary) 12%); background: color-mix(in srgb, var(--color-bg-card) 96%, transparent); } .mes-qcm-fieldset--bare { border: none; background: transparent; padding-left: 0; padding-right: 0; } .mes-qcm-legend { padding: 0 0.35rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } .mes-qcm-advanced-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.65rem 0.85rem; align-items: end; } .mes-qcm-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .mes-qcm-field--rowend { grid-column: 1 / -1; } @media (min-width: 640px) { .mes-qcm-field--rowend { grid-column: auto; justify-self: end; align-self: end; } } .mes-qcm-field label { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); } .mes-qcm-date-input, .mes-qcm-num-input { width: 100%; box-sizing: border-box; padding: 0.42rem 0.55rem; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text); font-family: var(--font); font-size: 0.86rem; } .mes-qcm-select--grow { width: 100%; min-width: 0; } .mes-qcm-advanced-hint { margin: 0.55rem 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--color-text-muted); } .mes-qcm-table thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 70%, transparent); } .mes-qcm-table-scroll { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .mes-qcm-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .mes-qcm-table th, .mes-qcm-table td { padding: 0.65rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); } .mes-qcm-table th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); font-weight: 800; background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-primary) 6%); border-bottom: 2px solid color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 18%); } .mes-qcm-th-action { text-align: right; min-width: 8.5rem; } .mes-qcm-cell-actions { text-align: right; vertical-align: top; white-space: normal; } .mes-qcm-cell-actions-inner { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; max-width: 15rem; margin-left: auto; } .mes-qcm-actions-desktop { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; } .mes-qcm-actions-mobile { display: none; } @media (max-width: 719px) { .mes-qcm-actions-desktop { display: none !important; } .mes-qcm-actions-mobile { display: block; position: relative; text-align: right; } .mes-qcm-cell-actions-inner { max-width: none; margin-left: 0; justify-content: flex-end; } .mes-qcm-th-action { min-width: 4.25rem; } } .mes-qcm-actions-mobile-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; border-radius: 11px; border: 1.5px solid color-mix(in srgb, var(--color-border) 88%, var(--color-text-muted)); background: color-mix(in srgb, var(--color-bg-card) 92%, var(--color-primary) 4%); color: var(--color-text); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 75%, transparent); } .mes-qcm-actions-mobile-summary::-webkit-details-marker { display: none; } .mes-qcm-actions-mobile-summary::marker { content: ''; } .mes-qcm-actions-mobile-summary:focus { outline: none; } .mes-qcm-actions-mobile-summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .mes-qcm-actions-mobile-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 35; min-width: min(17.5rem, calc(100vw - 2.5rem)); padding: 0.35rem 0; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-border) 85%, var(--color-primary) 10%); background: var(--color-bg-card); box-shadow: 0 14px 44px rgba(15, 23, 42, 0.14); } .mes-qcm-actions-mobile-stack { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.35rem 0.5rem 0.45rem; } .mes-qcm-actions-mobile-stack .mes-qcm-action-btn { width: 100%; min-height: 48px; justify-content: flex-start; padding-left: 0.65rem; } .mes-qcm-actions-mobile-stack .mes-qcm-action-btn--icon { width: 100%; min-width: 0; justify-content: flex-start; } #mes-qcm-load-more.mes-qcm-load-more--busy { position: relative; color: transparent; } #mes-qcm-load-more.mes-qcm-load-more--busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1.1rem; margin: -0.55rem 0 0 -0.55rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--color-border) 75%, var(--color-text-muted)); border-top-color: var(--color-primary); animation: mes-qcm-action-spin 0.7s linear infinite; } .mes-qcm-action-btn { width: 100%; justify-content: center; text-align: center; font-size: 0.78rem; line-height: 1.25; padding: 0.32rem 0.45rem; white-space: normal; word-break: break-word; } .mes-qcm-action-btn--icon { width: 2.55rem; min-width: 2.55rem; height: 2.55rem; min-height: 2.55rem; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; word-break: normal; } .mes-qcm-action-icon { display: block; flex-shrink: 0; } .mes-qcm-action-btn--tile { min-height: 2.4rem; border-radius: 11px; border-width: 1.5px; font-weight: 600; box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 75%, transparent); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .mes-qcm-action-btn--tile.mes-qcm-action-btn--icon { min-height: 2.55rem; } .mes-qcm-action-control.mes-qcm-action-btn--tile:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .mes-qcm-action-btn--icon:hover:not(:disabled) { transform: translateY(-1px); } .mes-qcm-action-btn--tile:disabled, .mes-qcm-action-btn--tile[disabled] { opacity: 0.48; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(0.35); } .mes-qcm-action-btn--wrong:disabled, .mes-qcm-action-btn--wrong[disabled] { border-color: var(--color-border); background: color-mix(in srgb, var(--color-bg-card) 92%, var(--color-text-muted) 8%); color: var(--color-text-muted); } .mes-qcm-action-btn--incomplete:disabled, .mes-qcm-action-btn--incomplete[disabled] { border-color: var(--color-border); background: color-mix(in srgb, var(--color-bg-card) 92%, var(--color-text-muted) 8%); color: var(--color-text-muted); } html[data-theme='dark'] .mes-qcm-action-btn--wrong:disabled, html[data-theme='dark'] .mes-qcm-action-btn--wrong[disabled], html[data-theme='dark'] .mes-qcm-action-btn--incomplete:disabled, html[data-theme='dark'] .mes-qcm-action-btn--incomplete[disabled] { color: var(--color-text-muted); } .mes-qcm-action-btn--restart { border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); color: var(--color-primary-dark); } .mes-qcm-action-btn--restart:hover { border-color: color-mix(in srgb, var(--color-primary) 62%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg-card)); } .mes-qcm-action-btn--wrong { border-color: color-mix(in srgb, #f59e0b 42%, var(--color-border)); background: color-mix(in srgb, #f59e0b 11%, var(--color-bg-card)); color: var(--color-text); } .mes-qcm-action-btn--wrong:hover { border-color: color-mix(in srgb, #f59e0b 55%, var(--color-border)); background: color-mix(in srgb, #f59e0b 16%, var(--color-bg-card)); } .mes-qcm-action-btn--incomplete { border-color: color-mix(in srgb, #6366f1 40%, var(--color-border)); background: color-mix(in srgb, #6366f1 10%, var(--color-bg-card)); color: var(--color-text); } .mes-qcm-action-btn--incomplete:hover { border-color: color-mix(in srgb, #6366f1 52%, var(--color-border)); background: color-mix(in srgb, #6366f1 16%, var(--color-bg-card)); } .mes-qcm-action-btn--delete { border-color: color-mix(in srgb, #ef4444 38%, var(--color-border)); color: #b91c1c; background: color-mix(in srgb, #ef4444 6%, var(--color-bg-card)); } .mes-qcm-action-btn--delete:hover:not(:disabled) { background: color-mix(in srgb, #ef4444 12%, var(--color-bg-card)); border-color: color-mix(in srgb, #ef4444 48%, var(--color-border)); } html[data-theme='dark'] .mes-qcm-action-btn--restart, html[data-theme='dark'] .mes-qcm-action-btn--wrong, html[data-theme='dark'] .mes-qcm-action-btn--incomplete { color: var(--color-text); } html[data-theme='dark'] .mes-qcm-action-btn--delete { color: #fca5a5; } html[data-theme='dark'] .mes-qcm-action-btn--delete:hover:not(:disabled) { background: color-mix(in srgb, #ef4444 16%, var(--color-bg-card)); } .mes-qcm-score-pill--na { background: color-mix(in srgb, var(--color-text-muted) 12%, var(--color-bg-card)); border-color: var(--color-border); color: var(--color-text-muted); } html[data-theme='dark'] .mes-qcm-score-pill--na { color: var(--color-text-muted); } .mes-qcm-line-wrap { max-width: 40rem; } .mes-qcm-line-card { padding: 1.35rem 1.25rem; } .mes-qcm-line-kicker { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .mes-qcm-line-title { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; } .mes-qcm-line-dl { margin: 0 0 1rem; } .mes-qcm-line-dl-row { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.35rem 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent); font-size: 0.88rem; } .mes-qcm-line-dl-row:last-child { border-bottom: none; } .mes-qcm-line-dl dt { margin: 0; font-weight: 600; color: var(--color-text-muted); } .mes-qcm-line-dl dd { margin: 0; } .mes-qcm-line-footnote { margin: 0 0 1rem; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.45; } .mes-qcm-line-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .mes-qcm-table tbody tr:nth-child(even):not([hidden]) { background: color-mix(in srgb, var(--color-bg-card) 97%, var(--color-border) 3%); } .mes-qcm-table tbody tr:hover:not([hidden]) { background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg-card)); box-shadow: inset 3px 0 0 var(--color-primary); } .mes-qcm-cell-score { white-space: nowrap; } .mes-qcm-score-pill { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-weight: 600; font-size: 0.82rem; border: 1px solid transparent; } .mes-qcm-score-pill--high { background: color-mix(in srgb, #22c55e 18%, var(--color-bg-card)); border-color: color-mix(in srgb, #22c55e 35%, var(--color-border)); color: #166534; } .mes-qcm-score-pill--mid { background: color-mix(in srgb, #f59e0b 20%, var(--color-bg-card)); border-color: color-mix(in srgb, #f59e0b 32%, var(--color-border)); color: #92400e; } .mes-qcm-score-pill--low { background: color-mix(in srgb, #ef4444 14%, var(--color-bg-card)); border-color: color-mix(in srgb, #ef4444 28%, var(--color-border)); color: #b91c1c; } html[data-theme='dark'] .mes-qcm-score-pill--high { color: #86efac; } html[data-theme='dark'] .mes-qcm-score-pill--mid { color: #fcd34d; } html[data-theme='dark'] .mes-qcm-score-pill--low { color: #fca5a5; } .mes-qcm-cell-action { text-align: right; } .mes-qcm-footer { padding: 1rem 1.15rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; border-top: 1px solid color-mix(in srgb, var(--color-border) 85%, var(--color-primary) 8%); background: color-mix(in srgb, var(--color-bg-card) 97%, var(--color-border) 3%); } .mes-qcm-filter-error { margin: 0 1.15rem 0.65rem; padding: 0.55rem 0.75rem; border-radius: 8px; font-size: 0.82rem; line-height: 1.45; color: var(--color-danger-fg, #b91c1c); background: color-mix(in srgb, var(--color-danger-bg, #fef2f2) 92%, var(--color-border) 8%); border: 1px solid color-mix(in srgb, var(--color-danger-border, #fecaca) 90%, transparent); } html[data-theme='dark'] .mes-qcm-filter-error { color: #fecaca; background: color-mix(in srgb, #450a0a 55%, var(--color-bg-card) 45%); border-color: color-mix(in srgb, #991b1b 55%, transparent); } .mes-qcm-field-hint { margin: 0.35rem 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--color-text-muted); } .mes-qcm-pagination { flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.45rem; } /* [hidden] sinon ignoré : display:flex ci-dessus l’emporte sur l’UA (pagination reste visible après reset). */ .mes-qcm-pagination[hidden] { display: none !important; } .mes-qcm-pagination-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; } .mes-qcm-pagination-list { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .mes-qcm-page-btn--current { font-weight: 700; border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); background: color-mix(in srgb, var(--color-primary-soft, #eef2ff) 88%, var(--color-bg-card)); } .mes-qcm-pagination-meta { margin: 0; font-size: 0.78rem; color: var(--color-text-muted); max-width: 52rem; } .mes-qcm-footnote { margin: 0; font-size: 0.82rem; color: var(--color-text-muted); } .page-profile .student-dashboard { max-width: 1040px; gap: 1.2rem; } /* Barre identité / actions intégrée au hero (remplace l’ancien bandeau sticky). */ .page-profile .student-hero .student-hero-toolbar { position: static; margin: -0.35rem -0.25rem 1.05rem; padding: 0 0 1rem; border-bottom: 1px solid color-mix(in srgb, #fff 22%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #000 12%, transparent); } .page-profile .student-hero .student-hero-toolbar-inner { max-width: none; margin: 0; padding: 0; } .page-profile .student-hero .profile-subbar-name { color: #fff; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; max-width: min(100%, 28rem); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18); } .page-profile .student-hero .profile-subbar-email { color: color-mix(in srgb, #fff 78%, transparent); font-size: 0.86rem; max-width: min(100%, 28rem); } .page-profile .student-hero .profile-subbar-goal { color: color-mix(in srgb, #fff 88%, var(--color-primary) 12%); } .page-profile .profile-settings-cta { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.9rem 0.42rem 0.68rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; color: #fff; text-decoration: none; border: 2px solid color-mix(in srgb, #fff 48%, transparent); background: color-mix(in srgb, #fff 16%, transparent); box-shadow: 0 4px 16px color-mix(in srgb, #000 14%, transparent); backdrop-filter: blur(10px); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .page-profile .profile-settings-cta:hover { border-color: color-mix(in srgb, #fff 72%, transparent); background: color-mix(in srgb, #fff 26%, transparent); box-shadow: 0 6px 20px color-mix(in srgb, #000 18%, transparent); transform: translateY(-1px); color: #fff; } .page-profile .profile-settings-cta:focus-visible { outline: 3px solid color-mix(in srgb, #fff 60%, transparent); outline-offset: 3px; } .page-profile .profile-settings-cta__icon { display: flex; align-items: center; opacity: 0.95; } @media (prefers-reduced-motion: reduce) { .page-profile .profile-settings-cta:hover { transform: none; } } .page-profile .student-hero .profile-pill { background: color-mix(in srgb, #fff 14%, transparent); border-color: color-mix(in srgb, #fff 30%, transparent); color: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(6px); } .page-profile .student-hero .profile-pill--complete { background: color-mix(in srgb, #22c55e 28%, transparent); border-color: color-mix(in srgb, #fff 35%, transparent); color: #ecfdf5; } .page-profile .student-hero .profile-pill--wait { background: color-mix(in srgb, #f59e0b 28%, transparent); border-color: color-mix(in srgb, #fff 35%, transparent); color: #fffbeb; } .page-profile .student-hero .profile-pill--limited { color: color-mix(in srgb, #fff 88%, transparent); } .page-profile .profile-intro-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: stretch; margin-bottom: 1rem; } .page-profile .profile-intro-row .student-hero { margin-bottom: 0; } .page-profile .profile-intro-row .student-kpis { margin-bottom: 0; padding: 0.85rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; align-content: start; } .page-profile .profile-intro-row .student-kpi { padding: 0.6rem 0.55rem; min-height: 0; } @media (min-width: 721px) { .page-profile .student-hero-meta { display: none; } } .page-profile .student-panel-card { box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)); } .page-profile .student-panel-card:hover { transform: none; } .page-profile .student-grid-2 { margin-bottom: 1rem; } .page-profile .student-details-block { margin-top: 0.65rem; } .page-profile .student-details-block > summary { padding: 0.75rem 1rem; font-weight: 600; } .page-profile .student-kpi:hover { transform: none; } @media (max-width: 720px) { .page-profile .profile-intro-row { grid-template-columns: 1fr; } .page-profile .profile-intro-row .student-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .page-profile .profile-overview-panel { position: relative; margin-bottom: 0; padding: 1rem 1.1rem 1.15rem; border-radius: 1.45rem; border: 2px solid color-mix(in srgb, var(--color-primary, #0d9488) 26%, var(--color-border, #e5e7eb)); background: color-mix(in srgb, var(--color-bg-card, #fff) 72%, transparent); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 22px 56px color-mix(in srgb, var(--color-text, #0f172a) 9%, transparent), 0 6px 20px color-mix(in srgb, var(--color-primary) 12%, transparent); overflow: hidden; isolation: isolate; } .page-profile .profile-overview-panel::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 7px; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary, #0d9488) 95%, #fff) 0%, color-mix(in srgb, var(--color-primary, #0d9488) 45%, #134e4a) 55%, color-mix(in srgb, var(--color-primary, #0d9488) 20%, transparent) 100% ); border-radius: 1.45rem 0 0 1.45rem; pointer-events: none; z-index: 0; box-shadow: 3px 0 18px color-mix(in srgb, var(--color-primary) 35%, transparent); } .page-profile .profile-overview-panel .profile-intro-row { position: relative; z-index: 1; margin-bottom: 0; } .page-profile .profile-overview-panel .student-hero { margin-bottom: 0; border-radius: 1.05rem; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent); } .page-profile .profile-overview-panel .student-kpis { margin-bottom: 0; } .page-profile .profile-overview-panel .student-kpis .student-kpi { background: linear-gradient( 165deg, color-mix(in srgb, var(--color-bg-card, #fff) 96%, var(--color-primary) 4%) 0%, var(--color-bg-card, #fff) 100% ); border: 2px solid color-mix(in srgb, var(--color-border) 78%, var(--color-primary) 22%); border-radius: 0.95rem; box-shadow: 0 1px 0 color-mix(in srgb, #fff 75%, transparent), 0 8px 22px color-mix(in srgb, var(--color-text) 5%, transparent); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .page-profile .profile-overview-panel .student-kpis .student-kpi:hover { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 14%, transparent), 0 12px 28px color-mix(in srgb, var(--color-primary) 18%, transparent); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .page-profile .profile-overview-panel .student-kpis .student-kpi:hover { transform: none; } } .page-profile .profile-overview-panel .student-kpis .student-kpi-val { font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2rem); font-weight: 900; letter-spacing: -0.04em; text-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent); } .page-profile .profile-overview-panel .student-hero h1 { font-size: clamp(1.35rem, 1.05rem + 1.35vw, 2rem); font-weight: 900; letter-spacing: -0.035em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); } html[data-theme='dark'] .page-profile .profile-overview-panel { box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent), 0 28px 64px rgba(0, 0, 0, 0.45), 0 8px 28px color-mix(in srgb, var(--color-primary) 16%, transparent); } html[data-theme='dark'] .page-profile .profile-overview-panel .student-kpis .student-kpi { box-shadow: none; } .page-profile .profile-alert-stack { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 0.85rem; } .page-profile .profile-workspace-grid { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 0; align-items: stretch; } .page-profile .profile-workspace-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } .page-profile .profile-workspace-rail { min-width: 0; } .page-profile #profile-decision { margin-bottom: 0; } .page-profile #profile-insight-board { margin-bottom: 0; } @media (min-width: 960px) { .page-profile .profile-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 1.25rem; align-items: start; } .page-profile .profile-workspace-rail { position: sticky; top: 5.25rem; } } .page-profile .profile-alert-stack .profile-activity-alert, .page-profile .profile-alert-stack .profile-onboarding-banner, .page-profile .profile-alert-stack .profile-full-strip { border-radius: 1.05rem; border-width: 2px; box-shadow: 0 10px 28px color-mix(in srgb, var(--color-text) 7%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent); } .page-profile #profile-decision.student-panel-card { position: relative; overflow: hidden; border-radius: 1.35rem; border: 2px solid color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); background: linear-gradient( 138deg, color-mix(in srgb, var(--color-primary) 20%, var(--color-bg-card)) 0%, var(--color-bg-card) 42%, color-mix(in srgb, var(--color-bg-card) 92%, var(--color-primary) 8%) 100% ); backdrop-filter: blur(14px) saturate(1.12); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent), 0 18px 48px color-mix(in srgb, var(--color-text) 8%, transparent), 0 8px 32px color-mix(in srgb, var(--color-primary) 20%, transparent); } .page-profile #profile-decision.student-panel-card::after { content: ''; position: absolute; inset-inline-end: -40%; inset-block-start: -50%; width: min(26rem, 85%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle at 28% 28%, color-mix(in srgb, var(--color-primary) 38%, transparent), color-mix(in srgb, var(--color-primary) 12%, transparent) 42%, transparent 65% ); pointer-events: none; opacity: 0.72; z-index: 0; } .page-profile #profile-decision.student-panel-card > * { position: relative; z-index: 1; } .page-profile #profile-decision h2 { font-size: clamp(1.22rem, 1.05rem + 0.9vw, 1.55rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.18; color: var(--color-text); } .page-profile #profile-decision h2::before { content: ''; display: block; width: 3.5rem; height: 0.3rem; border-radius: 999px; margin-bottom: 0.65rem; background: linear-gradient( 90deg, color-mix(in srgb, var(--color-primary) 95%, #fff), color-mix(in srgb, var(--color-primary) 35%, transparent) 70%, transparent 100% ); box-shadow: 0 2px 12px color-mix(in srgb, var(--color-primary) 45%, transparent); } .page-profile #profile-decision .student-decision-reco { font-size: 1rem; font-weight: 500; line-height: 1.55; } .page-profile #profile-insight-board.student-panel-card { border-radius: 1.3rem; border: 2px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border)); background: linear-gradient( 168deg, color-mix(in srgb, var(--color-primary) 16%, var(--color-bg-card)) 0%, var(--color-bg-card) 50%, color-mix(in srgb, var(--color-bg-card) 90%, var(--color-primary) 10%) 100% ); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 14px 36px color-mix(in srgb, var(--color-text) 6%, transparent), 0 6px 24px color-mix(in srgb, var(--color-primary) 14%, transparent); } html[data-theme='dark'] .page-profile #profile-insight-board.student-panel-card { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent), 0 18px 44px rgba(0, 0, 0, 0.38), 0 8px 28px color-mix(in srgb, var(--color-primary) 18%, transparent); } .page-profile #profile-dashboard .student-details-block { margin-top: 0.45rem; border-radius: 1.1rem; border: 2px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 18%); overflow: hidden; background: var(--color-bg-card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 5%, transparent), 0 8px 26px color-mix(in srgb, var(--color-text) 6%, transparent); } .page-profile #profile-dashboard .student-details-block.student-profile-details { border-inline-start-width: 5px; border-inline-start-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border)); } .page-profile #profile-dashboard .student-details-block > summary { padding: 1rem 1.15rem; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.015em; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-bg) 42%, var(--color-bg-card)) 0%, color-mix(in srgb, var(--color-bg) 28%, var(--color-bg-card)) 100% ); border-bottom: 1px solid transparent; transition: background 0.15s ease, color 0.15s ease; } .page-profile #profile-dashboard .student-details-block[open] > summary { border-bottom-color: color-mix(in srgb, var(--color-border) 75%, var(--color-primary) 25%); background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)) 0%, color-mix(in srgb, var(--color-bg) 18%, var(--color-bg-card)) 100% ); color: var(--color-text); } .page-profile #profile-dashboard .student-details-block > summary:hover { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); } .page-profile #zone-parametres.student-profile-details { border-inline-start-color: color-mix(in srgb, var(--color-primary) 72%, var(--color-border)); } .page-profile .student-details-inner--settings { padding-top: 0.15rem; } .page-profile #zone-parametres .student-settings-hub { gap: 1.15rem; } .page-profile #zone-parametres .student-setting-card { border-radius: 1.05rem; } .page-profile #zone-parametres .student-setting-footer { margin-top: 0.35rem; padding-top: 1.15rem; border-top-width: 2px; border-top-color: color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 18%); } .page-profile .student-help-footnote { margin-top: 1.5rem; padding: 1rem 1.35rem; text-align: center; border-radius: 999px; max-width: 44rem; margin-inline: auto; font-size: 0.88rem; font-weight: 600; color: var(--color-text-muted); background: linear-gradient( 135deg, color-mix(in srgb, var(--color-bg-card) 82%, var(--color-primary) 8%) 0%, color-mix(in srgb, var(--color-bg-card) 94%, var(--color-bg)) 100% ); border: 2px dashed color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 5%, transparent); } /* Accordéons analytiques (plan B) — empilement sans double cadre */ .page-profile .student-details-inner--profile-stack { background: transparent; border: none; padding: 0; box-shadow: none; } .page-profile .student-details-inner--profile-stack .student-grid-2:last-child { margin-bottom: 0; } .page-profile .student-profile-details > summary { min-height: 3.25rem; align-items: center; } .page-profile .student-profile-summary-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 0; text-align: left; } .page-profile .student-profile-summary-title { font-size: clamp(1rem, 0.92rem + 0.45vw, 1.12rem); font-weight: 900; letter-spacing: -0.025em; color: var(--color-text); line-height: 1.22; } .page-profile .student-profile-summary-desc { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); line-height: 1.35; max-width: 42rem; } .page-profile .student-profile-details .student-details-body { margin-top: 0.65rem; } .page-profile .student-profile-deep-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.55rem; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 2px solid color-mix(in srgb, var(--color-border) 65%, var(--color-primary) 35%); font-size: 0.82rem; color: var(--color-text-muted); } .page-profile .student-profile-deep-links-label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.7rem; color: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-primary) 30%); margin-right: 0.25rem; } .page-profile .student-profile-deep-link { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border-radius: 999px; font-weight: 700; font-size: 0.8rem; color: color-mix(in srgb, var(--color-primary) 88%, #0f172a 12%); text-decoration: none; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 22%, #fff) 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 100% ); border: 2px solid color-mix(in srgb, var(--color-primary) 38%, transparent); box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary) 22%, transparent); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .page-profile .student-profile-deep-link:hover { text-decoration: none; background: linear-gradient( 180deg, color-mix(in srgb, var(--color-primary) 32%, #fff) 0%, color-mix(in srgb, var(--color-primary) 22%, transparent) 100% ); border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 35%, transparent); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .page-profile .student-profile-deep-link:hover { transform: none; } } html[data-theme='dark'] .page-profile .student-profile-deep-link { color: color-mix(in srgb, var(--color-primary) 88%, #fff 12%); } .page-profile .student-profile-deep-sep { color: var(--color-text-muted); user-select: none; } .page-profile .student-profile-export .student-print-bar { margin-top: 0; padding-top: 0; border-top: none; } .page-profile .student-profile-export .student-report-privacy-foot { margin-top: 0.75rem; } .page-profile #profile-dashboard[aria-busy='true'] { cursor: progress; } @media (prefers-reduced-motion: no-preference) { .page-profile #profile-dashboard[aria-busy='true'] .profile-overview-panel, .page-profile #profile-dashboard[aria-busy='true'] .profile-workspace-grid { opacity: 0.8; transition: opacity 0.2s ease; } } .profile-subbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.65rem 0; max-width: 960px; margin: 0 auto; } .profile-subbar-identity { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .profile-subbar-name { font-weight: 700; font-size: 0.95rem; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; } .profile-subbar-email { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; } .profile-subbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .profile-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg) 88%, var(--color-bg-card)); color: var(--color-text-muted); } .profile-pill--complete { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); } .profile-pill--wait { border-color: color-mix(in srgb, #f59e0b 40%, var(--color-border)); color: #d97706; background: color-mix(in srgb, #f59e0b 12%, transparent); } html[data-theme="dark"] .profile-pill--wait, html.theme-dark .profile-pill--wait { color: #fbbf24; } .profile-pill--limited { border-color: color-mix(in srgb, #94a3b8 35%, var(--color-border)); color: var(--color-text-muted); } .student-dashboard { max-width: 960px; margin: 0 auto; } .student-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .student-grid-2--balanced { align-items: start; } .student-panel-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.1rem 1.1rem 1rem; box-shadow: var(--shadow-sm); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .student-panel-card:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(2, 6, 23, 0.08); border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); } .student-hero { background: radial-gradient(120% 120% at 95% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 48%), var(--color-hero-bg); color: #fff; padding: 1.75rem 1.5rem; border-radius: var(--radius-lg); margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); } .student-hero-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; } .student-hero h1 { font-size: clamp(1.25rem, 1.1rem + 1vw, 1.75rem); margin: 0 0 0.35rem; font-weight: 800; letter-spacing: -0.02em; } .student-hero-meta { font-size: 0.92rem; opacity: 0.92; margin: 0; } .student-sub-line { margin-top: 0.75rem; font-size: 0.9rem; opacity: 0.9; line-height: 1.45; } .student-decision { padding: 1.2rem 1.2rem 1.05rem; margin-bottom: 0; } .student-grid-2 .student-week-compare, .student-grid-2 .student-week-track, .student-grid-2 .student-activity-heatmap, .student-grid-2 .student-benchmark-card, .student-grid-2 .student-insight-board, .student-grid-2 .student-decision { margin-bottom: 0; } .student-decision-kicker { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); margin: 0 0 0.35rem; } .student-decision h2 { font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.25rem); margin: 0 0 0.5rem; color: var(--color-text); } .student-decision-reco { font-size: 0.95rem; color: var(--color-text-muted); margin: 0 0 1rem; line-height: 1.5; } .student-decision-reco strong { color: var(--color-text); } .student-decision-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .student-progress-snapshot { margin-bottom: 1.35rem; padding: 1.2rem 1.35rem; border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)) 0%, var(--color-bg-card) 55% ); } .student-progress-snapshot-title { margin: 0 0 0.4rem; font-size: 1.15rem; font-weight: 800; } .student-progress-snapshot-lead { margin: 0 0 1rem; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.5; } .student-progress-snapshot-dl { margin: 0 0 1rem; display: grid; gap: 0.65rem; } .student-progress-snapshot-row { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 0.5rem 1rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); } .student-progress-snapshot-row:last-child { border-bottom: none; padding-bottom: 0; } .student-progress-snapshot-row dt { margin: 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .student-progress-snapshot-row dd { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; } .student-progress-snapshot-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } @media (max-width: 520px) { .student-progress-snapshot-row { grid-template-columns: 1fr; } } .student-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.85rem; margin-bottom: 1.5rem; } .student-kpis.student-panel-card { margin-bottom: 1.3rem; } .student-kpis.student-panel-card .student-kpi { background: color-mix(in srgb, var(--color-bg) 82%, var(--color-bg-card)); } .student-kpi { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1rem 0.85rem; text-align: center; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; } .student-kpi:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(2, 6, 23, 0.08); } .student-kpi-val { font-size: 1.55rem; font-weight: 800; color: var(--color-primary); line-height: 1.2; } .student-kpi-label { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.04em; } .student-kpi-trend { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; font-size: 0.85rem; font-weight: 700; margin-top: 0.25rem; } .student-kpi-trend--up { color: #22c55e; } .student-kpi-trend--down { color: #f87171; } .student-kpi-trend--flat { color: var(--color-text-muted); } .student-details-block { margin-bottom: 1rem; } .student-details-block > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; font-weight: 700; font-size: 1rem; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); transition: border-color 0.2s ease, background-color 0.2s ease; } .student-details-block > summary:hover { border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-card)); } .student-details-block > summary::-webkit-details-marker { display: none; } .student-details-block > summary::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(45deg); transition: transform 0.2s ease; flex-shrink: 0; } .student-details-block[open] > summary::after { transform: rotate(-135deg); } .student-details-body { padding: 0 0 1rem; margin-top: 0.5rem; } .student-details-inner { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; } .student-result-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); gap: 1rem; flex-wrap: wrap; } .student-result-row:last-child { border-bottom: none; } .student-result-module { font-weight: 600; color: var(--color-text); } .student-result-score { color: var(--color-primary); font-weight: 700; } .student-result-date { font-size: 0.85rem; color: var(--color-text-muted); } .student-empty { color: var(--color-text-muted); text-align: center; padding: 1.5rem 1rem; margin: 0; font-size: 0.95rem; } .student-settings-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .student-setting-card { border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border)); border-radius: calc(var(--radius) + 2px); padding: 1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-card)) 0%, var(--color-bg-card) 100%); box-shadow: 0 8px 18px rgba(2, 6, 23, 0.06); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .student-setting-card:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); transform: translateY(-1px); box-shadow: 0 14px 26px rgba(2, 6, 23, 0.09); } .student-setting-card h3 { margin: 0 0 0.45rem; font-size: 1rem; font-weight: 800; color: var(--color-text); } .student-setting-help { margin: 0 0 0.8rem; font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.5; } .student-setting-row { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.8rem; } .student-setting-row label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); } .student-setting-check { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.85rem; color: var(--color-text); line-height: 1.5; padding: 0.45rem 0.55rem; border-radius: var(--radius); background: color-mix(in srgb, var(--color-bg) 90%, var(--color-bg-card)); border: 1px dashed color-mix(in srgb, var(--color-primary) 16%, var(--color-border)); } .student-setting-check input { margin-top: 0.15rem; } .student-setting-status { margin: 0 0 0.55rem; font-size: 0.83rem; line-height: 1.45; } .student-setting-status.is-ok { color: #16a34a; } .student-setting-status.is-warn { color: #d97706; } .student-setting-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .student-setting-actions .btn, .student-setting-footer .btn { min-height: 38px; border-radius: 10px; font-weight: 700; letter-spacing: 0.01em; } .student-setting-actions .btn.btn-sm, .student-setting-footer .btn.btn-sm { min-height: 34px; } .student-settings-links { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border)); } .student-settings-links a { font-weight: 700; color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .student-setting-footer { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border); } .student-setting-feedback { margin: 0; font-size: 0.83rem; color: var(--color-text-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 24px; padding: 0.2rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--color-bg) 90%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-primary) 10%, var(--color-border)); transition: transform 0.18s ease, border-color 0.2s ease, background-color 0.2s ease; } .student-setting-feedback.is-ok { color: #16a34a; border-color: color-mix(in srgb, #16a34a 35%, var(--color-border)); background: color-mix(in srgb, #16a34a 10%, transparent); animation: student-feedback-pop 220ms ease-out; } .student-setting-feedback.is-error { color: #dc2626; border-color: color-mix(in srgb, #dc2626 35%, var(--color-border)); background: color-mix(in srgb, #dc2626 9%, transparent); animation: student-feedback-pop 220ms ease-out; } .student-setting-logout { margin-left: auto; } .student-btn-danger-soft { border-color: color-mix(in srgb, #dc2626 45%, var(--color-border)); color: #b91c1c; background: color-mix(in srgb, #dc2626 8%, transparent); } .student-btn-danger-soft:hover { border-color: #dc2626; background: color-mix(in srgb, #dc2626 13%, transparent); } @keyframes student-feedback-pop { 0% { transform: translateY(1px) scale(0.98); opacity: 0.6; } 100% { transform: translateY(0) scale(1); opacity: 1; } } html[data-theme="dark"] .student-setting-card, html.theme-dark .student-setting-card { border-color: color-mix(in srgb, #334155 70%, var(--color-border)); background: linear-gradient(180deg, rgba(30, 41, 59, 0.62) 0%, rgba(15, 23, 42, 0.7) 100%); box-shadow: 0 12px 24px rgba(2, 6, 23, 0.35); } html[data-theme="dark"] .student-setting-check, html.theme-dark .student-setting-check { border-color: color-mix(in srgb, #475569 65%, var(--color-border)); background: color-mix(in srgb, #0f172a 85%, var(--color-bg-card)); } html[data-theme="dark"] .student-settings-links, html.theme-dark .student-settings-links { border-top-color: color-mix(in srgb, #334155 65%, var(--color-border)); } html[data-theme="dark"] .student-setting-footer, html.theme-dark .student-setting-footer { border-top-color: color-mix(in srgb, #334155 65%, var(--color-border)); } html[data-theme="dark"] .student-setting-feedback, html.theme-dark .student-setting-feedback { border-color: color-mix(in srgb, #334155 70%, var(--color-border)); background: color-mix(in srgb, #0f172a 82%, var(--color-bg-card)); } @media (max-width: 640px) { .student-grid-2 { grid-template-columns: 1fr; gap: 0.8rem; } .student-setting-logout { margin-left: 0; } .student-setting-actions .btn, .student-setting-footer .btn { width: 100%; justify-content: center; } .student-hero-toolbar-inner { flex-direction: column; align-items: stretch; } .profile-subbar-name, .profile-subbar-email { max-width: 100%; } .profile-subbar-actions { justify-content: flex-start; } .profile-subbar-actions .btn, .profile-subbar-actions .profile-settings-cta { flex: 1 1 auto; min-width: 0; justify-content: center; } .student-decision-actions .btn { flex: 1 1 auto; justify-content: center; } } /* —— Carte d’activité (heatmap) —— */ .student-activity-heatmap { margin-top: 0; padding: 1.1rem; border-top: none; } .student-heatmap-title { font-size: 1.25rem; margin-bottom: 0.35rem; } .student-heatmap-lead, .student-benchmark-lead { color: var(--color-text-muted); font-size: 0.92rem; max-width: 52rem; margin-bottom: 0.75rem; } .student-heatmap-legend { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.5rem; } .student-heatmap-legend-cell { display: inline-block; width: 11px; height: 11px; border-radius: 2px; } .student-heatmap-grid { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; overflow-x: auto; padding-bottom: 0.35rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .student-heatmap-col { display: flex; flex-direction: column; gap: 3px; } .student-heatmap-cell { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; background: var(--color-border, #e5e7eb); border: 1px solid color-mix(in srgb, #ffffff 50%, transparent); } .student-heatmap-cell--empty { opacity: 0.2; } .student-heatmap-cell.l0 { background: #ebedf0; } .student-heatmap-cell.l1 { background: #9be9a8; } .student-heatmap-cell.l2 { background: #40c463; } .student-heatmap-cell.l3 { background: #30a14e; } .student-heatmap-cell.l4 { background: #216e39; } .student-heatmap-axis-hint { font-size: 0.72rem; color: var(--color-text-muted); margin: 0.35rem 0 0; } .student-heatmap-note { font-size: 0.8rem; color: var(--color-text-muted); margin: 0.5rem 0 0; } /* —— Comparaison anonyme —— */ .student-benchmark-card { margin-top: 0; padding: 1.1rem 1rem; border-radius: 12px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(99, 102, 241, 0.04)); border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08)); } .student-benchmark-title { font-size: 1.15rem; margin-bottom: 0.25rem; } .student-benchmark-body { font-size: 0.95rem; line-height: 1.5; } .student-bench-main { font-size: 1.1rem; margin: 0.5rem 0; } .student-bench-pct { font-size: 1.75rem; font-weight: 700; color: var(--color-primary, #2563eb); font-variant-numeric: tabular-nums; } .student-bench-band { font-weight: 600; } .student-bench-sub, .student-bench-meta { font-size: 0.85rem; color: var(--color-text-muted); margin: 0.35rem 0; } .student-bench-privacy { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.75rem; line-height: 1.45; } .student-bench-unavail { margin: 0; line-height: 1.5; } /* Recommandations : chapitre + alternatives */ .student-reco-chapitre { margin: 0.75rem 0 0; padding: 0.75rem 1rem; border-radius: 8px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25); font-size: 0.92rem; } .student-reco-chapitre p { margin: 0; } .student-reco-alternatives-wrap { margin-top: 1rem; } .student-reco-alt-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 0.35rem; } .student-reco-alternatives { margin: 0; padding-left: 1.15rem; font-size: 0.92rem; } .student-reco-alternatives a { font-weight: 600; color: var(--color-primary); } /* Impression / PDF */ .student-print-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08)); } .student-print-bar-hint { font-size: 0.82rem; color: var(--color-text-muted); } .student-help-footnote { text-align: center; margin-top: 1.4rem; color: var(--color-text-muted); font-size: 0.85rem; } html[data-theme="dark"] .page-profile .student-hero .student-hero-toolbar { border-bottom-color: color-mix(in srgb, #fff 14%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #000 35%, transparent); } html[data-theme="dark"] .student-panel-card, html.theme-dark .student-panel-card { border-color: color-mix(in srgb, var(--color-bg-elevated) 55%, var(--color-border)); box-shadow: 0 12px 28px rgba(2, 6, 23, 0.42), 0 20px 48px -24px color-mix(in srgb, var(--color-primary) 8%, transparent); } html[data-theme="dark"] .student-panel-card:hover, html.theme-dark .student-panel-card:hover { border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-bg-elevated)); } html[data-theme="dark"] .student-kpi, html.theme-dark .student-kpi { background: color-mix(in srgb, var(--color-bg) 35%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-bg-elevated) 50%, var(--color-border)); } html[data-theme="dark"] .student-heatmap-cell, html.theme-dark .student-heatmap-cell { border-color: rgba(148, 163, 184, 0.22); } html[data-theme="dark"] .student-heatmap-cell.l0, html.theme-dark .student-heatmap-cell.l0 { background: #1f2937; } html[data-theme="dark"] .student-heatmap-cell.l1, html.theme-dark .student-heatmap-cell.l1 { background: #134e4a; } html[data-theme="dark"] .student-heatmap-cell.l2, html.theme-dark .student-heatmap-cell.l2 { background: #0f766e; } html[data-theme="dark"] .student-heatmap-cell.l3, html.theme-dark .student-heatmap-cell.l3 { background: #14b8a6; } html[data-theme="dark"] .student-heatmap-cell.l4, html.theme-dark .student-heatmap-cell.l4 { background: #5eead4; } .student-report-privacy-foot { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 8px; background: rgba(0, 0, 0, 0.03); font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.45; } .student-report-privacy-foot p { margin: 0; } /* Dock mobile — CTA « QCM » + « Reprendre » (NFR mobile) */ .student-mobile-dock { display: none; } @media (max-width: 720px) { .student-panel-card:hover { transform: none; box-shadow: var(--shadow-sm); } .student-kpi:hover, .student-compare-card:hover, .student-day-cell:hover, .student-readiness-card:hover, .student-shortcut-card:hover, .student-last5-row:hover { transform: none; box-shadow: var(--shadow-sm); } .student-mobile-dock { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; padding: 0.65rem max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px)); background: color-mix(in srgb, var(--color-bg, #fff) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08)); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06); } .student-mobile-dock .btn { min-height: 44px; padding-left: 1rem; padding-right: 1rem; } .student-dashboard { padding-bottom: 5.5rem; } .student-dashboard--mobile-order .profile-overview-panel { order: 0; } .student-dashboard--mobile-order .profile-alert-stack.student-dash-top { order: 1; } .student-dashboard--mobile-order .profile-workspace-grid { order: 2; margin-top: 0.35rem; } .student-dashboard--mobile-order > .student-details-block { order: 4; } .student-dashboard--mobile-order > .student-help-footnote { order: 5; } } .student-dashboard--mobile-order { display: flex; flex-direction: column; } .nav a:focus-visible, .student-hero-toolbar a:focus-visible, .student-dashboard a:focus-visible, .student-dashboard button:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primary, #0d9488) 55%, transparent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .student-mobile-dock { backdrop-filter: none; } } @media print { .main-header, .no-print, .student-print-bar, .student-mobile-dock { display: none !important; } #profile-dashboard .student-profile-details > summary { display: none !important; } #profile-dashboard .student-profile-details .student-details-body { margin-top: 0; padding: 0; } #profile-dashboard .student-profile-details .student-details-inner--profile-stack { border: 0; padding: 0; } body { background: #fff !important; } .student-dashboard { max-width: 100%; padding-bottom: 0 !important; } .student-heatmap-grid { overflow: visible; } } /* Flashcards (révision erreurs QCM) */ .flashcards-page { min-height: 100dvh; margin: 0; background: var(--color-bg); } .flashcards-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: calc(0.85rem + var(--safe-top)) max(1.25rem, var(--safe-right)) 0.85rem max(1.25rem, var(--safe-left)); border-bottom: 1px solid var(--color-border); background: var(--color-bg-card); } .flashcards-title { margin: 0; font-size: 1rem; text-align: center; flex: 1; } .flashcards-main { max-width: 38rem; margin: 0 auto; padding: 1.5rem 1rem 2rem; } .flashcards-empty { text-align: center; color: var(--color-text-muted); line-height: 1.55; } .flashcards-box { display: flex; flex-direction: column; gap: 1rem; } .flashcards-counter { text-align: center; font-weight: 700; color: var(--color-text-muted); margin: 0; font-size: 0.9rem; } .flashcards-card { text-align: left; border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: 1.25rem 1.35rem; background: var(--color-bg-card); cursor: pointer; min-height: 220px; font: inherit; width: 100%; box-shadow: var(--shadow-sm); } .flashcards-card.is-flipped { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); } .flashcards-card-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.5rem; } .flashcards-card-text { display: block; white-space: pre-wrap; line-height: 1.55; font-size: 0.98rem; color: var(--color-text); } .flashcards-card-hint { display: block; margin-top: 1rem; font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.45; } .flashcards-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } @media (max-width: 520px) { .flashcards-header { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.65rem; align-items: center; } .flashcards-title { grid-column: 1 / -1; grid-row: 1; font-size: 0.92rem; line-height: 1.35; } .flashcards-header .btn-sm:first-of-type { grid-row: 2; grid-column: 1; justify-content: center; } .flashcards-header .btn-sm:last-of-type { grid-row: 2; grid-column: 2; justify-content: center; } .flashcards-main { padding-left: max(1rem, var(--safe-left)); padding-right: max(1rem, var(--safe-right)); } .flashcards-card { min-height: 180px; padding: 1rem 1.1rem; } .flashcards-actions { flex-direction: column; align-items: stretch; } .flashcards-actions .btn { width: 100%; justify-content: center; } } /* PWA — bannières Service Worker (M2) */ .mqcm-sw-update-bar, .mqcm-pwa-install-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; padding: max(12px, var(--safe-bottom)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left)); pointer-events: none; } .mqcm-sw-update-inner, .mqcm-pwa-install-inner { pointer-events: auto; max-width: 520px; margin: 0 auto; padding: 0.85rem 1rem; border-radius: var(--radius-lg); background: var(--color-bg-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem 1rem; } .mqcm-sw-update-text, .mqcm-pwa-install-text { margin: 0; flex: 1 1 200px; font-size: 0.9rem; line-height: 1.45; color: var(--color-text); } .mqcm-sw-update-actions, .mqcm-pwa-install-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } .mqcm-pwa-net-chip { position: fixed; left: max(12px, var(--safe-left)); bottom: calc(max(14px, var(--safe-bottom)) + 4px); z-index: 99999; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; border-radius: 999px; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg-card) 92%, transparent); color: var(--color-text); font-size: 0.8rem; font-weight: 600; box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .mqcm-pwa-net-chip::before { content: ''; width: 0.56rem; height: 0.56rem; border-radius: 999px; background: #16a34a; box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.2); } .mqcm-pwa-net-chip.is-offline::before { background: #f59e0b; box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.2); } .mqcm-pwa-install-fab-wrap { position: fixed; right: max(12px, var(--safe-right)); bottom: calc(max(12px, var(--safe-bottom)) + 4px); z-index: 100001; display: flex; align-items: center; gap: 0.35rem; } .mqcm-pwa-install-fab-wrap.is-hidden { display: none !important; } .mqcm-pwa-install-fab { position: static; border-radius: 999px; box-shadow: var(--shadow-lg); min-height: 44px; min-width: 44px; padding: 0.55rem 0.95rem; } .mqcm-pwa-install-fab-dismiss { flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text-muted, var(--color-text)); box-shadow: var(--shadow); font-size: 1.25rem; line-height: 1; cursor: pointer; touch-action: manipulation; } /* Évite le chevauchement install / update / cookies en bas d’écran */ body:has(#mqcm-sw-update-bar) .mqcm-pwa-install-fab-wrap, body:has(#mqcm-sw-update-bar) .mqcm-pwa-install-bar, body:has(.cookie-consent-bar) .mqcm-pwa-install-fab-wrap, body:has(.cookie-consent-bar) .mqcm-pwa-install-bar { display: none !important; } body:has(#mqcm-pwa-install-bar) .mqcm-pwa-install-fab-wrap { display: none !important; } @media (max-width: 640px) { .mqcm-pwa-install-fab { max-width: calc(100vw - 4.5rem - var(--safe-left) - var(--safe-right)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (display-mode: standalone) { .mqcm-pwa-install-fab-wrap, .mqcm-pwa-install-bar { display: none !important; } } /* ========================================================================== Home — mode par wilaya « free » (lancement gratuit par wilaya) Styles appliqués uniquement lorsque le corps porte la classe `is-free-mode`. Voir public/home-wilaya-mode.js et public/index.html. ========================================================================== */ /* Bloc « info tarifaire » par wilaya (souvent sous la section stats, au-dessus des features). */ .home-wilaya-picker { margin: 0; padding: 1rem 0 0; background: var(--home-wilaya-zone-bg); border-top: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); border-bottom: 1px solid var(--color-border); } .home-wilaya-picker--in-hero { width: 100%; padding: 0; margin-top: 0.28rem; background: transparent; border-top: 0; border-bottom: 0; } .home-wilaya-picker[hidden] { display: none !important; } .home-wilaya-picker__shell { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem 1.1rem; } .home-wilaya-picker--in-hero .home-wilaya-picker__shell { max-width: 22rem; padding: 0; } .home-wilaya-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 6%, transparent), 0 8px 24px -4px color-mix(in srgb, var(--color-text) 6%, transparent); padding: 1.15rem 1.35rem 1.2rem; } .home-wilaya-picker--in-hero .home-wilaya-card { border-radius: 14px; border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border)); background: color-mix(in srgb, var(--color-bg-card) 90%, var(--color-primary) 10%); backdrop-filter: blur(6px); box-shadow: 0 14px 32px -20px color-mix(in srgb, var(--color-primary) 45%, transparent); padding: 0.72rem 0.78rem 0.78rem; } .home-wilaya-picker__eyebrow { margin: 0 0 0.35rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-primary) 55%, var(--color-text-muted)); } .home-wilaya-picker__head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.4rem; } .home-wilaya-picker__headline { margin: 0; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--color-text); max-width: 34rem; } .home-wilaya-picker--in-hero .home-wilaya-picker__headline { font-size: 0.92rem; letter-spacing: -0.01em; } .home-wilaya-picker__micro { margin: 0.1rem 0 0; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg) 50%, var(--color-bg-card)); color: var(--color-text-muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .home-wilaya-picker__micro[hidden] { display: none !important; } .home-wilaya-picker__micro--free { border-color: var(--home-wilaya-free-edge); background: var(--home-wilaya-free-tint); color: var(--home-wilaya-free-accent); } .home-wilaya-picker__micro--paid { border-color: var(--home-wilaya-paid-edge); background: var(--home-wilaya-paid-tint); color: var(--home-wilaya-paid-accent); } .home-wilaya-abbr { text-decoration: none; border-bottom: 0; cursor: help; font-style: normal; font-size: 0.88em; } .home-wilaya-picker__lead { margin: 0 0 0.7rem; font-size: 0.84rem; line-height: 1.45; color: var(--color-text-muted); max-width: 42rem; } .home-wilaya-picker--in-hero .home-wilaya-picker__lead { margin-bottom: 0.45rem; font-size: 0.76rem; } .home-wilaya-picker__lead strong { color: var(--color-text); font-weight: 700; } .home-wilaya-legend { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.55rem; } .home-wilaya-legend__card { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.58rem 0.72rem; border-radius: 12px; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg-card)); } .home-wilaya-legend__card--free { border-color: var(--home-wilaya-free-edge); background: linear-gradient(145deg, var(--home-wilaya-free-tint) 0%, var(--color-bg-card) 100%); } .home-wilaya-legend__card--paid { border-color: var(--home-wilaya-paid-edge); background: linear-gradient(145deg, var(--home-wilaya-paid-tint) 0%, var(--color-bg-card) 100%); } .home-wilaya-legend__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 9px; background: var(--color-bg-card); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--home-wilaya-free-accent); } .home-wilaya-legend__card--paid .home-wilaya-legend__icon { color: var(--color-primary-dark); } html[data-theme="dark"] .home-wilaya-legend__card--paid .home-wilaya-legend__icon, .theme-dark .home-wilaya-legend__card--paid .home-wilaya-legend__icon { color: var(--home-wilaya-paid-accent); } .home-wilaya-legend__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .home-wilaya-legend__title { display: block; font-size: 0.78rem; font-weight: 800; color: var(--color-text); letter-spacing: 0.01em; } .home-wilaya-legend__desc { display: block; font-size: 0.7rem; line-height: 1.35; color: var(--color-text-muted); font-weight: 500; } .home-wilaya-picker__field { display: flex; flex-direction: column; gap: 0.32rem; margin-bottom: 0.6rem; max-width: 24rem; } .home-wilaya-picker--in-hero .home-wilaya-picker__field { margin-bottom: 0.5rem; max-width: 100%; } .home-wilaya-picker__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: color-mix(in srgb, var(--color-primary) 25%, var(--color-text-muted)); } .home-wilaya-picker--in-hero .home-wilaya-picker__label { font-size: 0.68rem; } .home-wilaya-picker__select { width: 100%; min-height: 2.5rem; padding: 0.45rem 0.7rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-card); color: var(--color-text); font-size: 0.92rem; font-weight: 500; box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary) 6%, transparent); } .home-wilaya-picker--in-hero .home-wilaya-picker__select { min-height: 2.2rem; font-size: 0.82rem; } .home-wilaya-summary { margin: 0 0 0.5rem; border-radius: 12px; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-primary) 2.5%, var(--color-bg-card)); padding: 0.68rem 0.78rem; font-size: 0.86rem; line-height: 1.5; color: var(--color-text); } .home-wilaya-picker--in-hero .home-wilaya-summary { padding: 0.55rem 0.62rem; font-size: 0.74rem; } .home-wilaya-summary[hidden] { display: none !important; } .home-wilaya-summary__row { display: flex; flex-direction: column; gap: 0.65rem; } .home-wilaya-summary__title { margin: 0; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--color-primary) 28%, var(--color-text-muted)); } .home-wilaya-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; } .home-wilaya-stat { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.35rem 0.6rem; border-radius: 8px; min-width: 0; flex: 1 1 140px; max-width: 100%; } .home-wilaya-stat--free { background: var(--home-wilaya-free-tint); border: 1px solid var(--home-wilaya-free-edge); } .home-wilaya-stat--paid { background: var(--home-wilaya-paid-tint); border: 1px solid var(--home-wilaya-paid-edge); } .home-wilaya-stat__value { font-size: 1.3rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--color-text); } .home-wilaya-stat--free .home-wilaya-stat__value { color: var(--home-wilaya-free-accent); } .home-wilaya-stat--paid .home-wilaya-stat__value { color: var(--home-wilaya-paid-accent); } .home-wilaya-stat__label { font-size: 0.75rem; font-weight: 600; line-height: 1.2; color: var(--color-text-muted); } .home-wilaya-summary__names { margin: 0.4rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--color-text-muted); font-weight: 500; } .home-wilaya-summary__more { font-weight: 700; color: color-mix(in srgb, var(--color-primary) 45%, var(--color-text)); } .home-wilaya-picker__hint { margin: 0; font-size: 0.69rem; line-height: 1.35; color: var(--color-text-muted); max-width: 56rem; } .home-wilaya-summary__em--free { color: var(--home-wilaya-free-accent); } .home-wilaya-summary__em--paid { color: var(--home-wilaya-paid-accent); } html[data-theme="dark"] .home-wilaya-picker, .theme-dark .home-wilaya-picker { border-top-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); } html[data-theme="dark"] .home-wilaya-picker--in-hero, .theme-dark .home-wilaya-picker--in-hero { border-top-color: transparent; } /* Accueil — hero : desktop = 2 colonnes, panneau droit pleine largeur de la colonne ; mobile = colonne étroite centrée (voir @media max-width 768 plus bas). */ @media (min-width: 769px) { body.page-home .home-hero-shell { max-width: min(1180px, 100%); padding-inline: clamp(var(--s-3), 2.2vw, var(--s-6)); } body.page-home .home-hero-grid.hero { grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.95fr); gap: clamp(var(--s-4), 2.6vw, var(--s-7)); align-items: stretch; } body.page-home .home-hero-copy.hero-panel { text-align: start; } body.page-home .home-hero-copy .hero-uvp, body.page-home .home-hero-copy .hero-subtitle, body.page-home .home-hero-copy .hero-trust { margin-left: 0; margin-right: 0; } body.page-home .home-hero-aside.hero-visual { flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; max-width: none; margin-inline: 0; gap: 1rem; } body.page-home .home-hero-aside.hero-visual > * { width: 100%; } body.page-home .home-hero-copy .hero-cta-links { text-align: left; } } html[data-theme="dark"] .home-wilaya-card, .theme-dark .home-wilaya-card { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .home-wilaya-legend__card--free { background: linear-gradient(145deg, var(--home-wilaya-free-tint) 0%, var(--color-bg-card) 100%); } html[data-theme="dark"] .home-wilaya-legend__card--paid { background: linear-gradient(145deg, var(--home-wilaya-paid-tint) 0%, var(--color-bg-card) 100%); } html[data-theme="dark"] .home-wilaya-stat--free, html[data-theme="dark"] .home-wilaya-stat--paid, .theme-dark .home-wilaya-stat--free, .theme-dark .home-wilaya-stat--paid { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); } @media (max-width: 640px) { .home-wilaya-picker__shell { padding: 0 1rem 1rem; } .home-wilaya-card { padding: 1rem; } .home-wilaya-picker__headline { font-size: 1.1rem; } .home-wilaya-legend { grid-template-columns: 1fr; } .home-wilaya-stat { flex: 1 1 100%; } } /* Variante « free » de la trust strip pricing : même gabarit, teinte verte pour matérialiser l'offre promotionnelle sans dépayser l'utilisateur. */ .pricing-trust-strip__list--free li strong { color: var(--home-wilaya-free-accent); } body.is-free-mode .pricing-trust-strip { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg)); border-color: var(--home-wilaya-free-edge); } /* Variante « free » du parcours CTA (3 étapes au lieu de 4). */ .cta-onboarding-steps--free .cta-step-num { background: var(--color-primary); color: #fff; } /* Cartes de tarifs en mode free : typographie « Gratuit » et note offerte. */ .pricing-card .amount.amount--free { font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem); font-weight: 800; color: var(--home-wilaya-free-accent); letter-spacing: -0.01em; line-height: 1.1; } .pricing-card .price-note.price-note--free { color: var(--home-wilaya-free-accent); font-weight: 600; font-style: italic; } /* Quand le mode free est actif, la boîte prix (même si elle conserve la classe `.price--on-request` dans le HTML original) adopte une teinte verte pour matérialiser la gratuité. */ body.is-free-mode .pricing-card .price--on-request { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, transparent), color-mix(in srgb, var(--color-primary) 6%, transparent)); border-color: color-mix(in srgb, var(--color-primary) 32%, #a7f3d0); color: var(--color-primary-dark); align-items: center; justify-content: center; min-height: 72px; } html[data-theme="dark"] body.is-free-mode .pricing-card .price--on-request, .theme-dark body.is-free-mode .pricing-card .price--on-request { color: var(--color-primary-light); } /* ========================================================================== Avatars MajorQCM -------------------------------------------------------------------------- Conteneur générique `.mqcm-avatar` posé sur : - `.nav-user-chip-avatar` (header) - `.user-popover-avatar` (popover du compte) - `.mobile-app-drawer-profile-avatar` (drawer mobile) - `.settings-avatar-current-shape` + `.settings-avatar-cell-shape` (sélecteur d'avatar dans Mes paramètres) Le conteneur garde son arrondi (cercle / 14px) et sa taille existants. Quand `avatarKey` est connu, on injecte une `.mqcm-avatar-shape` qui prend 100% × 100% du conteneur et porte son propre dégradé (couleur selon la famille — médecine ou pharmacie). Sinon, on retombe sur `.mqcm-avatar-letter` qui hérite naturellement de la couleur / police du conteneur. ========================================================================== */ .mqcm-avatar { position: relative; overflow: hidden; padding: 0; } .mqcm-avatar > .mqcm-avatar-shape { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: inherit; color: #fff; /* Le `background:` est défini inline (gradient propre à chaque avatar). */ } .mqcm-avatar > .mqcm-avatar-shape svg { width: 70%; height: 70%; display: block; filter: drop-shadow(0 1px 1px rgba(2, 6, 23, 0.18)); } .mqcm-avatar > .mqcm-avatar-letter { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: inherit; font-size: inherit; text-transform: inherit; line-height: 1; color: inherit; letter-spacing: 0; } /* ========================================================================== Bloc « Mon avatar » dans Mes paramètres ========================================================================== */ .student-setting-card--avatar { display: flex; flex-direction: column; gap: 14px; } .settings-avatar-current { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--color-primary) 6%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent); } .settings-avatar-current-shape { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-card) 80%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--color-primary) 50%, transparent); } .settings-avatar-current-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .settings-avatar-current-name { margin: 0; font-weight: 700; font-size: 0.95rem; color: var(--color-text-strong, var(--color-text)); } .settings-avatar-current-hint { margin: 0; font-size: 0.8125rem; color: var(--color-text-muted, color-mix(in srgb, var(--color-text) 70%, transparent)); } .settings-avatar-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--color-bg-card) 70%, transparent); border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .settings-avatar-tab { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: 0.8125rem; font-weight: 600; color: color-mix(in srgb, var(--color-text) 70%, transparent); padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease; } .settings-avatar-tab:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-text); } .settings-avatar-tab.is-selected, .settings-avatar-tab[aria-selected='true'] { background: color-mix(in srgb, var(--color-primary) 92%, #fff); color: #fff; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--color-primary) 60%, transparent); } .settings-avatar-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .settings-avatar-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; } .settings-avatar-grid > li { margin: 0; } .settings-avatar-cell { appearance: none; -webkit-appearance: none; width: 100%; background: var(--color-bg-card); border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); border-radius: 14px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; font: inherit; color: var(--color-text); } .settings-avatar-cell:hover { border-color: color-mix(in srgb, var(--color-primary) 36%, transparent); transform: translateY(-1px); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--color-primary) 38%, transparent); } .settings-avatar-cell:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .settings-avatar-cell.is-selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 24%, transparent) inset, 0 6px 14px -8px color-mix(in srgb, var(--color-primary) 50%, transparent); } .settings-avatar-cell-shape { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-card) 90%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--color-primary) 40%, transparent); } .settings-avatar-cell-label { font-size: 0.72rem; font-weight: 600; text-align: center; color: color-mix(in srgb, var(--color-text) 78%, transparent); line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Dark mode adjustments */ html[data-theme='dark'] .settings-avatar-current, html.theme-dark .settings-avatar-current { background: color-mix(in srgb, var(--color-primary) 16%, transparent); border-color: color-mix(in srgb, var(--color-primary) 28%, transparent); } html[data-theme='dark'] .settings-avatar-tabs, html.theme-dark .settings-avatar-tabs { background: color-mix(in srgb, var(--color-bg-card) 80%, #0f172a 20%); border-color: color-mix(in srgb, #fff 8%, transparent); } html[data-theme='dark'] .settings-avatar-tab, html.theme-dark .settings-avatar-tab { color: color-mix(in srgb, var(--color-text) 60%, transparent); } html[data-theme='dark'] .settings-avatar-tab:hover, html.theme-dark .settings-avatar-tab:hover { color: var(--color-text); } html[data-theme='dark'] .settings-avatar-cell, html.theme-dark .settings-avatar-cell { background: color-mix(in srgb, var(--color-bg-card) 88%, #0f172a 12%); border-color: color-mix(in srgb, #fff 8%, transparent); } html[data-theme='dark'] .settings-avatar-cell.is-selected, html.theme-dark .settings-avatar-cell.is-selected { background: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-card)); border-color: var(--color-primary); } @media (prefers-reduced-motion: reduce) { .settings-avatar-tab, .settings-avatar-cell { transition: none !important; transform: none !important; } } /* ========================================================================== Page « Paramètres » dédiée (/parametres) -------------------------------------------------------------------------- Architecture : header sticky + hero + layout 2 colonnes (sidebar à gauche, contenu à droite). En mobile, la sidebar bascule en barre horizontale défilante au-dessus du contenu. ========================================================================== */ body.page-settings { background: radial-gradient(1200px 600px at 100% -200px, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 60%), radial-gradient(800px 500px at -10% 10%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 60%), var(--color-bg); min-height: 100vh; } .settings-main { padding: clamp(16px, 3vw, 32px) 0 64px; outline: none; } .settings-container { width: min(1180px, 100% - max(24px, calc(var(--safe-left, 0px) + var(--safe-right, 0px) + 24px))); margin-inline: auto; } /* ----- Hero ----- */ .settings-hero { display: flex; flex-direction: column; gap: 6px; padding: 18px 4px 22px; } .settings-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: color-mix(in srgb, var(--color-text) 65%, transparent); } .settings-breadcrumb a { color: inherit; text-decoration: none; transition: color 0.18s ease; } .settings-breadcrumb a:hover { color: var(--color-primary); } .settings-breadcrumb [aria-current='page'] { color: var(--color-text); font-weight: 600; } .settings-hero-title { margin: 0; font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); } .settings-hero-desc { margin: 0; font-size: 0.95rem; color: color-mix(in srgb, var(--color-text) 72%, transparent); max-width: 64ch; } /* ----- Layout 2 colonnes ----- */ /* Desktop : `summary` au-dessus du contenu (à droite), `sidebar` à gauche sur deux rangées. Mobile (cf. media query plus bas) : tout en colonne avec l'ordre `summary` → `sidebar` (sticky) → `content`. */ .settings-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "sidebar summary" "sidebar content"; gap: 16px 28px; align-items: start; } .settings-summary-card { grid-area: summary; } .settings-sidebar { grid-area: sidebar; } .settings-content { grid-area: content; } /* ----- Sidebar ----- */ .settings-sidebar { position: sticky; top: calc(var(--header-height, 72px) + 16px); align-self: start; z-index: 1; } /* Chevron d'aide au scroll : masqué par défaut, affiché uniquement sur mobile via la media query dédiée. */ .settings-nav-hint { display: none; } .settings-nav { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--color-bg-card) 86%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 6%, transparent), 0 12px 40px -20px rgba(15, 23, 42, 0.18); } .settings-nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; text-decoration: none; color: color-mix(in srgb, var(--color-text) 78%, transparent); font-size: 0.9375rem; font-weight: 600; transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease; position: relative; } .settings-nav-item:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-text); } .settings-nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .settings-nav-item.is-active { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--color-primary) 60%, transparent); } .settings-nav-item.is-active::before { content: ''; position: absolute; inset-inline-start: -10px; inset-block: 8px; width: 3px; border-radius: 2px; background: var(--color-primary); } .settings-nav-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); flex-shrink: 0; transition: background 0.18s ease, color 0.18s ease; } .settings-nav-item.is-active .settings-nav-icon { background: rgba(255, 255, 255, 0.18); color: #fff; } .settings-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* ----- Content area ----- */ .settings-content { display: flex; flex-direction: column; gap: 18px; min-width: 0; } /* ----- Carte récapitulative en tête ----- */ .settings-summary-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)), var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent); box-shadow: 0 8px 24px -16px color-mix(in srgb, var(--color-primary) 40%, transparent); } .settings-summary-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-card) 90%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--color-primary) 50%, transparent); } .settings-summary-meta { min-width: 0; flex: 1; } .settings-summary-name { margin: 0; font-weight: 700; font-size: 1rem; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-summary-email { margin: 0; font-size: 0.8125rem; color: color-mix(in srgb, var(--color-text) 70%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settings-summary-pill { flex-shrink: 0; font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; font-weight: 600; } /* ----- Section ----- */ .settings-section { display: flex; flex-direction: column; gap: 16px; animation: settingsFade 0.22s ease both; } @keyframes settingsFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .settings-section[hidden] { display: none !important; } .settings-section-head { display: flex; flex-direction: column; gap: 4px; padding: 4px 4px 0; } .settings-section-title { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-text); } .settings-section-desc { margin: 0; font-size: 0.9rem; color: color-mix(in srgb, var(--color-text) 70%, transparent); max-width: 70ch; } /* ----- Carte (settings-card) ----- */ .settings-card { background: var(--color-bg-card); border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 14px -10px rgba(15, 23, 42, 0.18); } .settings-card--soft { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-card)); } .settings-card--danger { border-color: color-mix(in srgb, #ef4444 28%, transparent); } .settings-card-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text); } .settings-card-hint { margin: 0; font-size: 0.875rem; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .settings-card-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; } /* ----- Liste d'infos (Mon compte) ----- */ .settings-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 0; } .settings-info-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-block-end: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent); } .settings-info-row:nth-last-child(-n+2) { border-block-end: 0; } .settings-info-row dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-text) 55%, transparent); font-weight: 600; } .settings-info-row dd { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--color-text); word-break: break-word; } .settings-link-row { display: flex; flex-wrap: wrap; gap: 8px; } /* ----- Toggle (switch) ----- */ .settings-toggle-row { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; user-select: none; } .settings-toggle-input { position: absolute; opacity: 0; pointer-events: none; } .settings-toggle-switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 18%, transparent); transition: background 0.2s ease; margin-top: 2px; } .settings-toggle-switch::before { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .settings-toggle-input:checked + .settings-toggle-switch { background: var(--color-primary); } .settings-toggle-input:checked + .settings-toggle-switch::before { transform: translateX(18px); } [dir='rtl'] .settings-toggle-input:checked + .settings-toggle-switch::before { transform: translateX(-18px); } .settings-toggle-input:focus-visible + .settings-toggle-switch { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent); } .settings-toggle-meta { display: flex; flex-direction: column; gap: 2px; } .settings-toggle-meta strong { font-size: 0.95rem; font-weight: 700; color: var(--color-text); } .settings-toggle-meta span { font-size: 0.85rem; color: color-mix(in srgb, var(--color-text) 70%, transparent); line-height: 1.4; } /* ----- Picker de thème ----- */ .settings-theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .settings-theme-card { appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--color-bg-card); border: 2px solid color-mix(in srgb, var(--color-text) 10%, transparent); border-radius: 14px; cursor: pointer; text-align: start; font: inherit; color: var(--color-text); transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; } .settings-theme-card:hover { border-color: color-mix(in srgb, var(--color-primary) 32%, transparent); transform: translateY(-1px); } .settings-theme-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .settings-theme-card.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--color-primary) 50%, transparent); } .settings-theme-preview { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .settings-theme-preview-bar { position: absolute; top: 0; inset-inline: 0; height: 22%; background: rgba(0, 0, 0, 0.06); } .settings-theme-preview-block { position: absolute; bottom: 12%; inset-inline-start: 12%; width: 56%; height: 28%; border-radius: 6px; background: var(--color-primary); opacity: 0.7; } .settings-theme-preview--light { background: linear-gradient(135deg, #f8fafc, #e2e8f0); } .settings-theme-preview--light .settings-theme-preview-bar { background: rgba(15, 23, 42, 0.08); } .settings-theme-preview--dark { background: linear-gradient(135deg, #0f172a, #1e293b); } .settings-theme-preview--dark .settings-theme-preview-bar { background: rgba(255, 255, 255, 0.08); } .settings-theme-preview--system { background: linear-gradient(135deg, #f8fafc 0%, #f8fafc 50%, #1e293b 50%, #1e293b 100%); } .settings-theme-preview--system .settings-theme-preview-bar { background: linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.08) 50%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.08) 100%); } .settings-theme-card-label { display: flex; flex-direction: column; gap: 2px; } .settings-theme-card-label strong { font-size: 0.95rem; font-weight: 700; } .settings-theme-card-label span { font-size: 0.8125rem; color: color-mix(in srgb, var(--color-text) 70%, transparent); } /* ========================================================================== Page Paramètres — Mobile & Tablette -------------------------------------------------------------------------- Sous 900px on bascule sur une expérience native-mobile : - barre d'onglets horizontale sticky (sous le header) - cartes pleine largeur, padding réduit - boutons full-width, touch targets ≥ 44px - safe-area-inset-bottom pour l'encoche iOS ========================================================================== */ @media (max-width: 899.98px) { /* ----- Conteneur global ----- */ body.page-settings { padding-bottom: env(safe-area-inset-bottom, 0); } .settings-main { padding: 8px 0 calc(48px + env(safe-area-inset-bottom, 0)); } .settings-container { width: 100%; padding-inline: max(14px, env(safe-area-inset-left, 0)); padding-inline-end: max(14px, env(safe-area-inset-right, 0)); } /* ----- Hero compact ----- */ .settings-hero { padding: 10px 2px 14px; gap: 4px; } .settings-hero-title { font-size: clamp(1.35rem, 5vw, 1.65rem); } .settings-hero-desc { font-size: 0.875rem; } .settings-breadcrumb { font-size: 0.78125rem; } /* ----- Layout : 1 colonne, ordre [summary → sidebar sticky → content] ----- C'est l'élément clé du fix mobile : la carte récap reste au-dessus de la barre d'onglets sticky (elle scrolle naturellement), puis la barre prend le relais en sticky une fois la récap sortie de l'écran. */ .settings-layout { grid-template-columns: 1fr; grid-template-areas: "summary" "sidebar" "content"; gap: 12px; } /* ====== BARRE D'ONGLETS — Scroll horizontal mobile ====== Une scrollbox unique, simple, fiable. La sidebar elle-même n'a aucun fond ni overflow : tout est porté par .settings-nav. */ .settings-sidebar { position: sticky; top: calc(var(--header-height, 64px) + 4px); z-index: 30; margin: 0; width: 100%; min-width: 0; background: transparent; box-shadow: none; border: 0; } /* Indicateurs de "scroll possible" : un dégradé fondu sur les bords + un chevron animé à droite quand il reste du contenu à scroller. pointer-events: none → ne bloque jamais le swipe tactile. */ .settings-sidebar::before, .settings-sidebar::after { content: ''; position: absolute; top: 1px; /* respecte le border de .settings-nav */ bottom: 1px; width: 36px; pointer-events: none; z-index: 2; border-radius: 13px; transition: opacity 0.18s ease; } .settings-sidebar::before { inset-inline-start: 0; background: linear-gradient(to right, var(--color-bg-card) 0%, color-mix(in srgb, var(--color-bg-card) 70%, transparent) 45%, transparent 100%); opacity: 0; } .settings-sidebar::after { inset-inline-end: 0; background: linear-gradient(to left, var(--color-bg-card) 0%, color-mix(in srgb, var(--color-bg-card) 70%, transparent) 45%, transparent 100%); opacity: 1; } /* Classes posées par settings-page.js selon la position de scroll. */ .settings-sidebar:not(.is-start)::before { opacity: 1; } .settings-sidebar.is-start::before { opacity: 0; } .settings-sidebar.is-end::after { opacity: 0; } /* Chevron à droite : pictogramme d'invitation au swipe. Animation très légère qui se répète toutes les 2.4 s tant qu'il reste du contenu à scroller. */ .settings-sidebar .settings-nav-hint { position: absolute; inset-block: 0; inset-inline-end: 6px; display: flex; align-items: center; justify-content: center; width: 22px; pointer-events: none; z-index: 3; color: var(--color-primary); opacity: 0.85; transition: opacity 0.2s ease; animation: navHintBounce 2.4s ease-in-out 1.5s 3 both; } .settings-sidebar.is-end .settings-nav-hint { opacity: 0; animation: none; } @keyframes navHintBounce { 0%, 90%, 100% { transform: translateX(0); } 45% { transform: translateX(-4px); } 65% { transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .settings-sidebar .settings-nav-hint { animation: none; } } .settings-nav { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; /* CLÉ pour le swipe horizontal sur mobile : on déclare explicitement que cette zone gère le panning horizontal, ce qui empêche le navigateur de "voler" le geste pour scroller la page. */ touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scroll-snap-type: x proximity; scroll-padding-inline: 12px; padding: 8px 10px; gap: 6px; width: 100%; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); background: var(--color-bg-card); box-shadow: 0 4px 14px -10px rgba(15, 23, 42, 0.16); scrollbar-width: none; -ms-overflow-style: none; } .settings-nav::-webkit-scrollbar { display: none; height: 0; width: 0; } .settings-nav-item { flex: 0 0 auto; scroll-snap-align: center; padding: 8px 12px; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; gap: 6px; min-height: 36px; white-space: nowrap; background: transparent; color: color-mix(in srgb, var(--color-text) 80%, transparent); /* Empêche la sélection du texte au moment du swipe (sinon iOS bloque). */ -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Hover réservé aux appareils avec un pointeur fin (souris). Sur tactile, le ":hover" reste collé après un tap et écrase le style actif. */ @media (hover: hover) and (pointer: fine) { .settings-nav-item:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-text); } } /* On RE-DÉCLARE explicitement l'état actif en mobile : sinon la règle desktop de même spécificité (0,2,0) est battue par d'autres règles locales (cascade par ordre). */ .settings-nav-item.is-active { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--color-primary) 60%, transparent); } .settings-nav-item.is-active::before { display: none; } .settings-nav-icon { width: 20px; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); } .settings-nav-icon svg { width: 13px; height: 13px; } .settings-nav-item.is-active .settings-nav-icon { background: rgba(255, 255, 255, 0.22); color: #fff; } .settings-nav-label { font-size: inherit; } /* Contenu — pleine largeur, padding réduit ----- */ .settings-content { gap: 14px; } /* Carte récap : reste sur 1 ligne mais plus compacte. Légère marge basse pour laisser respirer avant que la barre d'onglets sticky ne s'y colle. */ .settings-summary-card { padding: 12px 14px; gap: 12px; border-radius: 16px; margin-block-end: 2px; } .settings-summary-avatar { width: 46px; height: 46px; font-size: 0.95rem; } .settings-summary-name { font-size: 0.95rem; } .settings-summary-email { font-size: 0.75rem; } .settings-summary-pill { font-size: 0.7rem; padding: 3px 8px; } /* Sections : padding & titres ----- */ .settings-section { gap: 12px; } .settings-section-head { padding: 0 2px; gap: 2px; } .settings-section-title { font-size: 1.15rem; } .settings-section-desc { font-size: 0.85rem; } .settings-card { padding: 14px; border-radius: 14px; gap: 12px; } .settings-card-title { font-size: 0.95rem; } .settings-card-hint { font-size: 0.825rem; } /* Liste d'infos : 1 colonne sur mobile (clé/valeur empilées proprement) */ .settings-info-grid { grid-template-columns: 1fr; } .settings-info-row { padding: 9px 0; } .settings-info-row:last-child { border-block-end: 0; } .settings-info-row dt { font-size: 0.7rem; } .settings-info-row dd { font-size: 0.9rem; } /* Boutons : full-width prioritaire, touch ≥ 44px */ .settings-link-row { gap: 8px; } .settings-link-row .btn { flex: 1 1 calc(50% - 4px); min-height: 40px; justify-content: center; } .settings-card-footer { flex-direction: column; align-items: stretch; gap: 10px; } .settings-card-footer .btn { width: 100%; min-height: 44px; } /* Toggle row : meta-strong en gras, switch un peu plus gros */ .settings-toggle-row { gap: 12px; } .settings-toggle-switch { width: 46px; height: 26px; } .settings-toggle-switch::before { width: 22px; height: 22px; } .settings-toggle-input:checked + .settings-toggle-switch::before { transform: translateX(20px); } [dir='rtl'] .settings-toggle-input:checked + .settings-toggle-switch::before { transform: translateX(-20px); } .settings-toggle-meta strong { font-size: 0.9rem; } .settings-toggle-meta span { font-size: 0.8125rem; } /* Avatar picker : touch-friendly */ .settings-avatar-current { padding: 10px; gap: 12px; border-radius: 12px; } .settings-avatar-current-shape { width: 52px; height: 52px; } .settings-avatar-current-name { font-size: 0.9rem; } .settings-avatar-current-hint { font-size: 0.78125rem; } .settings-avatar-tabs { margin-inline: -2px; padding: 4px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .settings-avatar-tabs::-webkit-scrollbar { display: none; } .settings-avatar-tab { flex: 0 0 auto; padding: 7px 12px; font-size: 0.8125rem; white-space: nowrap; min-height: 34px; } .settings-avatar-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .settings-avatar-cell { padding: 8px 4px 6px; gap: 4px; border-radius: 12px; min-height: 90px; } .settings-avatar-cell-shape { width: 48px; height: 48px; } .settings-avatar-cell-label { font-size: 0.65rem; } /* Theme picker : 1 colonne en mode "ligne" (preview à gauche, libellé à droite) */ .settings-theme-picker { grid-template-columns: 1fr; gap: 8px; } .settings-theme-card { flex-direction: row; align-items: center; gap: 14px; padding: 10px 12px; min-height: 64px; } .settings-theme-preview { width: 64px; aspect-ratio: 1.4 / 1; flex-shrink: 0; } .settings-theme-card-label { flex: 1; min-width: 0; } .settings-theme-card-label strong { font-size: 0.9rem; } .settings-theme-card-label span { font-size: 0.78125rem; } } /* ----- Très petits écrans (≤ 380px) : compactage supplémentaire ----- */ @media (max-width: 380px) { .settings-container { padding-inline: 12px; } .settings-hero-title { font-size: 1.25rem; } .settings-summary-card { padding: 10px 12px; gap: 10px; } .settings-summary-avatar { width: 42px; height: 42px; } .settings-summary-pill { display: none; } /* éviter l'écrasement ; statut visible ailleurs */ .settings-card { padding: 12px; } .settings-avatar-grid { grid-template-columns: repeat(3, 1fr); } .settings-info-row dd { font-size: 0.875rem; } .settings-link-row .btn { flex: 1 1 100%; } } /* ----- Paysage compact (téléphone à l'horizontale) ----- */ @media (max-width: 899.98px) and (orientation: landscape) and (max-height: 500px) { .settings-hero { padding: 6px 2px 10px; } .settings-hero-title { font-size: 1.15rem; } .settings-hero-desc { display: none; } .settings-sidebar { top: calc(var(--header-height, 60px) + 2px); } } /* ----- Dark mode ----- */ html[data-theme='dark'] body.page-settings, html.theme-dark body.page-settings { background: radial-gradient(1200px 600px at 100% -200px, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 60%), radial-gradient(800px 500px at -10% 10%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 60%), var(--color-bg); } html[data-theme='dark'] .settings-nav, html.theme-dark .settings-nav { background: color-mix(in srgb, var(--color-bg-card) 72%, var(--color-bg) 28%); border-color: color-mix(in srgb, var(--color-primary) 14%, transparent); } html[data-theme='dark'] .settings-card, html.theme-dark .settings-card { background: color-mix(in srgb, var(--color-bg-elevated) 55%, var(--color-bg-card) 45%); border-color: color-mix(in srgb, #fff 7%, transparent); } html[data-theme='dark'] .settings-card--soft, html.theme-dark .settings-card--soft { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); } html[data-theme='dark'] .settings-summary-card, html.theme-dark .settings-summary-card { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-card)), var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 26%, transparent); } html[data-theme='dark'] .settings-theme-card, html.theme-dark .settings-theme-card { background: color-mix(in srgb, var(--color-bg-elevated) 50%, var(--color-bg-card) 50%); border-color: color-mix(in srgb, #fff 8%, transparent); } @media (prefers-reduced-motion: reduce) { .settings-section { animation: none !important; } .settings-nav-item, .settings-theme-card, .settings-toggle-switch::before { transition: none !important; transform: none !important; } } /* ========================================================================== Nav auth — Connexion toolbar mobile + desktop ========================================================================== */ @media (max-width: 900px) { .nav-links--desktop { display: none !important; } .nav-menu-toggle { display: inline-flex !important; } } @media (min-width: 901px) { .nav-menu-toggle { display: none !important; } .main-header .nav-toolbar .nav-actions .nav-btn-login { display: inline-flex !important; flex-shrink: 0; visibility: visible; opacity: 1; border-color: var(--btn-outline-border); background: color-mix(in srgb, var(--color-bg-card) 72%, transparent); } .main-header .nav-toolbar .nav-actions .nav-btn-login:hover { background: var(--btn-ghost-hover-bg); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); } }