/* Hackfox · design system (orange & blanc, arrondi, joyeux) */
:root, [data-bs-theme] {
  --o1: #FF8233; --o2: #FDAC55; --accent: #F16524; --accent-dark: #D9531A; --m1: #FF6B1A; --m2: #FF9642;
  --grad: linear-gradient(180deg, #FF8233 0%, #FDAC55 100%);
  --grad-menu: linear-gradient(135deg, #FF6B1A 0%, #FF9642 100%);
  --bg: #FFF8F1; --surface: #FFFFFF; --surface-2: #FFF1E4; --line: #F3DCC8; --line-2: #EBCBB0;
  --ink: #2B1A10; --sub: #4A3527; --lab: #8A6F5C; --mute: #B59A86; --soft: #6B5446;
  --red: #F16524; --red-hover: #D9531A;
  --ok: #22A86B; --ko: #E5484D; --warn: #F5A524; --info: #3B82F6;
  --SG: 'Inter', sans-serif; --JB: 'Inter', sans-serif; --MONO: 'JetBrains Mono', monospace;
  --gut: clamp(16px, 4vw, 48px);
  --rule: linear-gradient(180deg, rgba(241,101,36,.08), rgba(241,101,36,.35) 50%, rgba(241,101,36,.08));
  --shadow: 0 12px 30px rgba(241,101,36,.18); --shadow-sm: 0 4px 14px rgba(241,101,36,.12);
  --EXPO: cubic-bezier(.16,1,.3,1); --QUINT: cubic-bezier(.22,1,.36,1); --QUART: cubic-bezier(.25,1,.5,1); --TYPE: cubic-bezier(.22,.85,.24,1);
  --BOUNCE: cubic-bezier(.34,1.56,.64,1);
  --r-pill: 999px; --r-card: 28px; --r-sm: 16px;

  --bs-body-bg: #FFF8F1; --bs-body-color: #4A3527; --bs-body-font-family: 'Inter', sans-serif; --bs-body-font-size: 15px;
  --bs-emphasis-color: #2B1A10; --bs-secondary-color: #8A6F5C; --bs-tertiary-bg: #FFF1E4; --bs-secondary-bg: #FFF1E4;
  --bs-border-color: #F3DCC8; --bs-primary: #F16524; --bs-primary-rgb: 241,101,36;
  --bs-link-color: #F16524; --bs-link-color-rgb: 241,101,36; --bs-link-hover-color: #D9531A; --bs-link-hover-color-rgb: 217,83,26;
  --bs-heading-color: #2B1A10; --bs-code-color: #D9531A; --bs-border-radius: 16px; --bs-border-radius-lg: 24px;
}
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--sub); font-family: var(--SG); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 0 !important; }
body > main { flex: 1 0 auto; padding-top: 0 !important; }
a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-dark); }
h1, h2, h3, h4, h5, h6 { font-family: var(--SG); color: var(--ink); font-weight: 800; letter-spacing: -.03em; }
code, pre, kbd { font-family: var(--MONO); }
:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 3px; box-shadow: none !important; }
::selection { background: var(--accent); color: #fff; }
input::placeholder, textarea::placeholder { color: var(--mute) !important; }
[x-cloak] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes e-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes e-pop-in { 0% { opacity: 0; transform: scale(.85); } 70% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
@keyframes e-lnUp { from { transform: translateY(120%); } to { transform: none; } }
@keyframes e-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes e-deploy { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes e-drawRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes e-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes e-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes e-shake { 0%,100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes e-ray { 0% { transform: rotate(var(--r)) translateY(0) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(var(--r)) translateY(-80px) scale(1); opacity: 0; } }
@keyframes e-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes e-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes e-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes e-shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes e-confetti { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; } }

/* ---------- layout ---------- */
.e-wrap { max-width: 1280px; margin: 0 auto; padding: 40px var(--gut) 88px; width: 100%; box-sizing: border-box; }
.e-wrap--narrow { max-width: 880px; }
.e-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--accent); font: 700 12px/1 var(--SG); letter-spacing: .08em; text-transform: uppercase; }
.e-label { font: 700 12px/1 var(--SG); letter-spacing: .08em; text-transform: uppercase; color: var(--lab); }
.e-h1 { margin: 0; font: 900 clamp(40px,5.4vw,68px)/1 var(--SG); letter-spacing: -.045em; color: var(--ink); }
.e-h2 { margin: 0; font: 800 clamp(26px,3.2vw,40px)/1.08 var(--SG); letter-spacing: -.035em; color: var(--ink); }
.e-h3 { margin: 0; font: 800 22px/1.15 var(--SG); color: var(--ink); }
.e-muted { color: var(--lab); }
.e-text { font: 400 15px/1.7 var(--SG); color: var(--sub); }
.e-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 32px; }
.e-head__titles { display: flex; flex-direction: column; gap: 14px; animation: e-rise .6s var(--QUINT) both; }
.e-section { display: flex; flex-direction: column; gap: 20px; }
.e-section__titles { display: flex; flex-direction: column; gap: 12px; }
.e-stack { display: flex; flex-direction: column; gap: 64px; }
.e-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.e-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.e-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; box-shadow: var(--shadow-sm); }
.e-rule { width: 2px; border-radius: 2px; background: var(--rule); flex: none; align-self: stretch; }
.e-hr { border: 0; height: 1px; background: var(--line); margin: 8px 0; opacity: 1; }

/* hero band (bandeau orange en tête des pages) */
.e-band { position: relative; overflow: hidden; background: var(--grad); color: #fff; border-radius: 0 0 40px 40px; margin-bottom: 8px; }
.e-band__in { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 40px var(--gut) 44px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.e-band .e-h1, .e-band h1, .e-band h2 { color: #fff; }
.e-band .e-eyebrow { background: rgba(255,255,255,.22); color: #fff; }
.e-band .e-stat__num { color: #fff; } .e-band .e-stat__lab { color: rgba(255,255,255,.85); }
.e-band .e-rule { background: rgba(255,255,255,.45); }
.e-band::before { content: ""; position: absolute; right: -6%; top: -40%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.12); }

/* stats */
.e-stats { display: flex; align-items: stretch; flex-wrap: wrap; row-gap: 18px; }
.e-stat { display: flex; flex-direction: column; gap: 6px; padding: 0 26px; }
.e-stat:first-child { padding-left: 0; }
.e-stat__num { font: 900 30px/1 var(--SG); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.e-stat__num small { opacity: .55; font-size: inherit; }
.e-stat__lab { font: 600 14px/1 var(--SG); color: var(--lab); }

/* ---------- buttons ---------- */
.e-btn, .btn.e-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--r-pill); font: 700 15px/1 var(--SG); text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: transform .25s var(--BOUNCE), box-shadow .25s, background .2s, color .2s; box-shadow: 0 6px 16px rgba(241,101,36,.25);
}
.e-btn svg { width: 18px; height: 15px; flex: none; transition: transform .25s var(--QUART); }
.e-btn:hover { background: var(--accent-dark); color: #fff; transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 24px rgba(241,101,36,.32); }
.e-btn:hover svg { transform: translateX(3px); }
.e-btn:active { transform: scale(.97); }
.e-btn:disabled, .e-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.e-btn--lg { height: 56px; font-size: 17px; padding: 0 30px; }
.e-btn--sm { height: 40px; font-size: 14px; padding: 0 18px; gap: 8px; box-shadow: none; }
.e-btn--ghost, .e-btn--white { background: #fff; color: var(--accent); box-shadow: var(--shadow-sm); }
.e-btn--ghost:hover, .e-btn--white:hover { background: #fff; color: var(--accent-dark); }
.e-btn--line { background: transparent; color: var(--accent); border: 2px solid var(--line-2); box-shadow: none; }
.e-btn--line:hover { background: var(--surface-2); color: var(--accent-dark); border-color: var(--accent); }
.e-btn--danger { background: #fff; color: var(--ko); border: 2px solid rgba(229,72,77,.35); box-shadow: none; }
.e-btn--danger:hover { background: var(--ko); color: #fff; }
.e-btn--block { width: 100%; }
.e-band .e-btn--line, .e-stage .e-btn--line { color: #fff; border-color: rgba(255,255,255,.6); }
.e-icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 0; border-radius: 50%; color: var(--accent); cursor: pointer; flex: none; transition: background .2s, transform .25s var(--BOUNCE); }
.e-icon-btn:hover { background: var(--accent); color: #fff; transform: rotate(90deg); }

.btn { font-family: var(--SG); font-weight: 700; border-radius: var(--r-pill); }
.btn-primary, .btn-success { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark); --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
.btn-secondary, .btn-outline-secondary, .btn-info, .btn-outline-info, .btn-dark { --bs-btn-bg: #fff; --bs-btn-color: var(--accent); --bs-btn-border-color: var(--line-2); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--accent-dark); --bs-btn-hover-border-color: var(--accent); }
.btn-danger { --bs-btn-bg: #fff; --bs-btn-color: var(--ko); --bs-btn-border-color: var(--ko); --bs-btn-hover-bg: var(--ko); --bs-btn-hover-color: #fff; }

/* ---------- forms ---------- */
.e-form { display: flex; flex-direction: column; gap: 18px; }
.e-field { display: flex; flex-direction: column; gap: 8px; }
.e-field > label, .e-field .form-label { font: 700 13px/1.2 var(--SG); color: var(--ink); margin: 0; }
.e-field .e-req { color: var(--accent); margin-left: 4px; }
.e-field .e-opt { color: var(--mute); margin-left: 6px; font-weight: 500; }
.e-help, .form-text { font: 400 13px/1.5 var(--SG); color: var(--lab) !important; }
.form-control, .form-select, .e-input {
  height: 52px; padding: 0 18px; background-color: #fff !important; border: 2px solid var(--line); color: var(--ink) !important;
  font: 500 15px/1 var(--SG); border-radius: var(--r-sm); box-shadow: none !important; transition: border-color .2s, box-shadow .2s;
}
textarea.form-control, textarea.e-input { height: auto; padding: 14px 18px; line-height: 1.55; resize: vertical; }
.form-control:focus, .form-select:focus, .e-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(241,101,36,.15) !important; outline: none; }
.form-control[readonly] { background: var(--surface-2) !important; }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 6'%3e%3cpath fill='none' stroke='%23F16524' stroke-width='1.8' d='M1 1l4.5 4L10 1'/%3e%3c/svg%3e"); background-size: 12px 7px; padding-right: 42px; }
.form-check-input { width: 1.3em; height: 1.3em; border: 2px solid var(--line-2); border-radius: 6px !important; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-label { color: var(--sub); }
.e-check { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.e-pass { position: relative; display: flex; }
.e-pass .form-control { flex: 1; padding-right: 104px; }
.e-pass__toggle { position: absolute; right: 8px; top: 8px; bottom: 8px; min-width: 88px; background: var(--surface-2); border: 0; border-radius: var(--r-pill); color: var(--accent); font: 700 12px/1 var(--SG); cursor: pointer; }
.e-copy { display: flex; align-items: stretch; border: 2px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.e-copy code, .e-copy input { flex: 1; min-width: 0; padding: 14px 16px; background: transparent; border: 0; font: 500 14px/1.2 var(--MONO); color: var(--ink); overflow-x: auto; white-space: nowrap; outline: none; }
.e-copy button { min-width: 104px; padding: 0 16px; background: var(--surface-2); border: 0; color: var(--accent); font: 700 13px/1 var(--SG); cursor: pointer; }
.e-copy button:hover { background: var(--accent); color: #fff; }

/* ---------- alerts ---------- */
.alert, .e-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 0 0 20px; background: #fff; border: 2px solid var(--line); border-radius: var(--r-sm); color: var(--sub); font: 500 14px/1.45 var(--SG); text-align: left !important; box-shadow: var(--shadow-sm); }
.alert-danger, .e-banner--ko { border-color: rgba(229,72,77,.35); background: #FFF5F5; }
.alert-success, .e-banner--ok { border-color: rgba(34,168,107,.35); background: #F2FBF6; }
.alert-warning, .e-banner--warn { border-color: rgba(245,165,36,.45); background: #FFF9EC; }
.alert-info { border-color: rgba(59,130,246,.3); background: #F3F8FF; }
.alert .btn-close { position: static; margin-left: auto; padding: 8px; }
.alert-dismissible { padding-right: 18px; }
.e-banner b { font-weight: 800; color: var(--ink); }
.e-dot { width: 10px; height: 10px; flex: none; display: inline-block; border-radius: 50%; }

/* ---------- tables ---------- */
.e-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.e-table, .table { width: 100%; margin: 0; border-collapse: collapse; font: 500 14.5px/1.4 var(--SG); color: var(--sub); --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-color: var(--sub); --bs-table-border-color: var(--line); }
.e-table th, .table th { padding: 16px 20px; font: 700 12px/1 var(--SG); letter-spacing: .06em; text-transform: uppercase; color: var(--lab); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; background: var(--surface-2); }
.e-table td, .table td { padding: 14px 20px; border-bottom: 1px solid #FBEBDD; vertical-align: middle; background: transparent; }
.e-table tbody tr:last-child td { border-bottom: 0; }
.e-table tbody tr { transition: background .2s; }
.e-table tbody tr:hover { background: #FFF6EE; }
.e-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.e-table .strong { font-weight: 700; color: var(--ink); }
.e-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--surface-2); font: 600 12px/1 var(--SG); color: var(--soft); white-space: nowrap; }
.e-tag--red { background: var(--accent); color: #fff; letter-spacing: .04em; font-weight: 800; font-size: 11px; }
.e-tag--hot { background: #FFE2D2; color: var(--accent-dark); }
.badge { border-radius: var(--r-pill); font-family: var(--SG); }
.e-cat { display: inline-flex; align-items: center; gap: 8px; color: var(--c, var(--soft)); font-weight: 600; }
.e-cat i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #bfbfbf); display: inline-block; }

/* ---------- segmented / chips / tabs ---------- */
.e-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #fff; border-radius: var(--r-pill); border: 1px solid var(--line); }
.e-seg button, .e-seg a { height: 38px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--soft); font: 600 14px/38px var(--SG); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.e-seg [aria-pressed="true"], .e-seg .is-on, .e-seg .active { background: var(--accent); color: #fff; }
.e-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.e-chip { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: #fff; border: 2px solid var(--line); border-radius: var(--r-pill); color: var(--soft); font: 600 13px/1 var(--SG); cursor: pointer; transition: transform .2s var(--BOUNCE), border-color .2s, background .2s; }
.e-chip > i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--accent)); }
.e-chip small { color: var(--mute); font-size: 12px; }
.e-chip:hover { transform: translateY(-1px); }
.e-chip[aria-pressed="true"] { background: var(--c, var(--accent)); border-color: var(--c, var(--accent)); color: #fff; }
.e-chip[aria-pressed="true"] > i { background: #fff; }
.e-chip[aria-pressed="true"] small { color: rgba(255,255,255,.8); }
.e-tabs { display: flex; gap: 6px; flex-wrap: wrap; border: 0; }
.e-tabs button, .e-tabs .nav-link { height: 38px; padding: 0 16px; background: var(--surface-2) !important; border: 0 !important; border-radius: var(--r-pill) !important; color: var(--soft) !important; font: 700 14px/38px var(--SG); cursor: pointer; }
.e-tabs .active, .e-tabs [aria-selected="true"] { background: var(--accent) !important; color: #fff !important; }

/* ---------- empty / skeleton ---------- */
.e-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 48px 0; }
.e-empty svg { width: 88px; height: 88px; }
.e-empty h2 { margin: 0; font: 800 28px/1.15 var(--SG); letter-spacing: -.03em; }
.e-empty p { margin: 0; max-width: 520px; font: 400 15px/1.6 var(--SG); color: var(--lab); }
.e-skel { border-radius: var(--r-card); background: linear-gradient(90deg, #FFEBDD 0%, #FFF6EF 50%, #FFEBDD 100%); background-size: 200% 100%; animation: e-skel 1.3s linear infinite; }

/* mascotte vidéo : fond blanc fondu dans la couleur derrière */
.e-fox { display: block; pointer-events: none; mix-blend-mode: darken; object-fit: contain; }
.e-fox-wrap { position: relative; display: inline-block; }
.e-fox--sm { width: 140px; height: 140px; } .e-fox--md { width: 220px; height: 220px; } .e-fox--lg { width: min(440px, 80vw); height: min(440px, 80vw); }

/* ---------- logo ---------- */
.e-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; }
.e-logo svg, .e-logo .e-fox-ico { width: 44px; height: 44px; display: block; transition: transform .35s var(--BOUNCE); filter: drop-shadow(0 4px 10px rgba(120,40,0,.18)); }
.e-logo:hover svg, .e-logo:hover .e-fox-ico { transform: rotate(-10deg) scale(1.08); }
.e-fox-ico { display: inline-block; object-fit: contain; }
.den-avatar .e-fox-ico { width: 100%; height: 100%; }
.e-err .e-nav .e-fox-ico { filter: drop-shadow(0 4px 12px rgba(120,40,0,.3)); }
.e-logo b { font: 900 21px/1 var(--SG); letter-spacing: -.04em; white-space: nowrap; }
.e-logo b span { color: var(--accent); }
.e-logo:hover { color: var(--ink); }
.e-logo--white, .e-logo--white:hover { color: #fff; }
.e-logo--white b span { color: #fff; opacity: .85; }

/* ---------- app nav ---------- */
.e-nav { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 24px; padding: 14px var(--gut); background: rgba(255,248,241,.86); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(243,220,200,.7); font-family: var(--SG); color: var(--ink); }
.e-nav__links { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; justify-content: center; }
.e-nav__link { font: 600 14px/1 var(--SG); color: var(--accent); padding: 9px 16px; border-radius: var(--r-pill); background: #fff; white-space: nowrap; transition: background .2s, color .2s, transform .2s var(--BOUNCE); box-shadow: 0 1px 0 var(--line); }
.e-nav__link[aria-current="page"] { background: var(--accent); color: #fff; }
.e-nav__link:hover { transform: translateY(-1px); color: var(--accent-dark); }
.e-nav__link[aria-current="page"]:hover { color: #fff; }
.e-nav__right { display: flex; align-items: center; gap: 10px; }
.e-nav__plain { font: 700 14px/1 var(--SG); color: var(--accent); padding: 0 8px; }
.e-nav__chip { height: 38px; min-width: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--SG); color: var(--accent); background: #fff; border: 0; border-radius: var(--r-pill); cursor: pointer; box-shadow: 0 1px 0 var(--line); }
.e-nav__chip:hover { color: var(--accent-dark); }
.e-bell { position: relative; display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--accent); background: #fff; border-radius: 50%; box-shadow: 0 1px 0 var(--line); }
.e-bell:hover { color: var(--accent-dark); }
.e-bell:hover svg { animation: e-wiggle .5s; }
.e-bell__n { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; background: var(--accent); border: 2px solid #fff; border-radius: var(--r-pill); font: 800 10px/16px var(--SG); text-align: center; color: #fff; }
.e-dd { position: relative; }
.e-dd__menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 6px; display: flex; flex-direction: column; z-index: 5; box-shadow: var(--shadow); animation: e-pop-in .25s var(--QUINT) both; }
.e-dd__menu[hidden] { display: none; }
.e-dd__menu a, .e-dd__menu button { padding: 12px 14px; font: 600 14px/1 var(--SG); color: var(--ink); border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; white-space: nowrap; }
.e-dd__menu a:hover, .e-dd__menu button:hover { background: var(--surface-2); color: var(--accent); }
.e-dd__menu .is-on { color: var(--accent); background: var(--surface-2); }
.e-dd__menu .is-danger { color: var(--ko); }
.e-acct { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 4px; background: #fff; border: 0; border-radius: var(--r-pill); color: var(--ink); font: 700 14px/1 var(--SG); cursor: pointer; max-width: 260px; box-shadow: 0 1px 0 var(--line); }
.e-acct span:not(.e-av) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-av { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font: 800 13px/1 var(--SG); color: #fff; text-transform: uppercase; overflow: hidden; }
.e-av img { width: 100%; height: 100%; object-fit: cover; }
.e-burger { display: none; margin-left: auto; align-items: center; gap: 8px; height: 42px; padding: 0 18px; background: var(--accent); border: 0; border-radius: var(--r-pill); color: #fff; font: 700 14px/1 var(--SG); cursor: pointer; }
.e-burger svg { width: 16px; height: 16px; }
.e-burger:hover { opacity: .9; }
.e-overlay { position: fixed; inset: 0; z-index: 1050; visibility: hidden; transition: visibility 0s .5s; }
.e-overlay__bd { position: absolute; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); opacity: 0; transition: opacity .5s var(--EXPO); }
.e-overlay__panel { position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 380px; background: var(--grad-menu); transform: translateX(100%); transition: transform .5s var(--EXPO); display: flex; flex-direction: column; padding: 18px 20px 120px; overflow-y: auto; box-sizing: border-box; }
.e-overlay__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.e-overlay__close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.e-overlay__close:hover { background: rgba(255,255,255,.3); }
.e-overlay__list { display: flex; flex-direction: column; gap: 8px; }
.e-overlay__row { display: block; padding: 16px 24px; border-radius: 18px; background: rgba(255,255,255,.1); font: 600 18px/1.2 var(--SG); color: #fff; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s, background .3s; transition-delay: 0ms; }
.e-overlay__row:hover { background: rgba(255,255,255,.2); color: #fff; }
.e-overlay__row[aria-current="page"] { background: #fff; color: var(--accent); }
.e-overlay__row.is-danger { background: rgba(255,255,255,.08); }
.e-overlay__foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; opacity: 0; transition: opacity .4s; }
.e-overlay__foot .e-chips { margin-bottom: 14px; max-height: 92px; overflow-y: auto; }
.e-overlay__foot .e-chip { background: rgba(255,255,255,.15); border-color: transparent; color: #fff; height: 30px; font-size: 12px; }
.e-overlay__foot .e-chip[aria-pressed="true"] { background: #fff; color: var(--accent); }
.e-overlay__cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 0; border-radius: var(--r-pill); background: #fff; color: var(--accent); font: 700 16px/1 var(--SG); transition: transform .25s; }
.e-overlay__cta:hover { transform: scale(1.02); color: var(--accent-dark); }
.e-nav.is-open + .e-overlay { visibility: visible; transition: visibility 0s; }
.e-nav.is-open + .e-overlay .e-overlay__bd { opacity: 1; }
.e-nav.is-open + .e-overlay .e-overlay__panel { transform: none; }
.e-nav.is-open + .e-overlay .e-overlay__row { opacity: 1; transform: none; }
.e-nav.is-open + .e-overlay .e-overlay__foot { opacity: 1; transition-delay: .45s; }
@media (max-width: 1023px) { .e-nav__links, .e-nav__right { display: none !important; } .e-burger { display: inline-flex; } }

/* ---------- footer ---------- */
.e-footer { margin-top: 40px; background: var(--grad); color: #fff; border-radius: 40px 40px 0 0; flex: none; position: relative; overflow: hidden; }
.e-footer::before { content: ""; position: absolute; left: -8%; bottom: -60%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.1); }
.e-footer__main { position: relative; max-width: 1280px; margin: 0 auto; padding: 44px var(--gut) 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.e-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.e-footer__brand span { font: 600 14px/1.4 var(--SG); color: rgba(255,255,255,.9); }
.e-footer__partner { display: flex; align-items: center; gap: 20px; }
.e-footer__partner span { font: 700 11px/1.5 var(--SG); letter-spacing: .14em; color: rgba(255,255,255,.9); text-align: right; }
.e-footer__partner .e-rule { background: rgba(255,255,255,.5); }
.e-footer__partner img { display: block; height: 50px; width: auto; }
.e-footer__copy { position: relative; max-width: 1280px; margin: 0 auto; padding: 18px var(--gut) 26px; border-top: 1px solid rgba(255,255,255,.25); font: 500 13px/1 var(--SG); color: rgba(255,255,255,.85); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.e-footer__copy a { color: #fff; }
.e-footer .e-logo { color: #fff; } .e-footer .e-logo b span { color: #fff; opacity: .85; }

/* ---------- stage (auth, pages vitrines) ---------- */
.e-stage { position: relative; overflow: hidden; min-height: calc(100vh - 70px); display: flex; background: var(--grad); }
.e-stage__bg { position: absolute; inset: 0; pointer-events: none; }
.e-stage__bg::before { content: ""; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: min(46vw, 620px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.18); }
.e-stage__fox { position: absolute; right: max(2vw, calc(50% - 640px)); bottom: 0; width: min(44vw, 560px); height: min(80vh, 640px); mix-blend-mode: darken; object-fit: contain; object-position: bottom; }
.e-stage__in { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(32px,6vh,72px) var(--gut) 64px; display: flex; flex-direction: column; justify-content: center; }
.e-auth { width: min(520px, 100%); display: flex; flex-direction: column; gap: 22px; }
.e-auth--wide { width: min(720px, 100%); }
.e-stage .e-eyebrow { background: rgba(255,255,255,.22); color: #fff; }
.e-auth__title { margin: 0; font: 900 clamp(42px,6vw,72px)/1 var(--SG); letter-spacing: -.05em; color: #fff; }
.e-auth__title .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.e-auth__title .ln > span { display: inline-block; animation: e-lnUp .9s var(--TYPE) both; }
.e-auth__title .ln:nth-child(2) > span { animation-delay: .08s; }
.e-auth__lead { margin: 0; font: 500 16px/1.6 var(--SG); color: rgba(255,255,255,.95); max-width: 520px; animation: e-rise .7s var(--QUINT) .3s both; }
.e-auth__card { display: flex; flex-direction: column; gap: 18px; padding: 28px; background: #fff; border-radius: 32px; box-shadow: 0 24px 60px rgba(160,60,10,.25); animation: e-pop-in .6s var(--QUINT) .35s both; }
.e-auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 500 14px/1.4 var(--SG); color: var(--lab); }
.e-auth__links a { font-weight: 700; color: var(--accent); }
.e-choice { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.e-choice a { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; min-height: 170px; background: #fff; border-radius: 28px; color: var(--ink); box-shadow: 0 16px 40px rgba(160,60,10,.18); transition: transform .3s var(--BOUNCE); }
.e-choice a:hover { transform: translateY(-4px) rotate(-1deg); color: var(--ink); }
.e-choice b { font: 900 24px/1.1 var(--SG); letter-spacing: -.03em; }
.e-choice span { font: 500 14px/1.55 var(--SG); color: var(--lab); }
.e-choice svg { margin-top: auto; width: 21px; height: 18px; color: var(--accent); }
@media (max-width: 860px) { .e-stage__fox { opacity: .35; width: 90vw; right: -20vw; } .e-stage__bg::before { display: none; } }

/* ---------- challenge board ---------- */
.e-toolbar { display: flex; flex-direction: column; gap: 14px; padding: 18px; margin: 0 0 36px; background: #fff; border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.e-toolbar__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.e-search { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: var(--bg); border: 2px solid var(--line); border-radius: var(--r-pill); }
.e-search:focus-within { border-color: var(--accent); }
.e-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font: 500 14px/1 var(--SG); }
.e-sort { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; background: var(--bg); border: 2px solid var(--line); border-radius: var(--r-pill); font: 600 13px/1 var(--SG); color: var(--lab); }
.e-sort select { background: transparent; color: var(--ink); border: 0; font: 700 13px/1 var(--SG); outline: none; }
.e-cats { display: flex; flex-direction: column; gap: 48px; }
.e-catsec { display: flex; flex-direction: column; gap: 18px; animation: e-rise .6s var(--QUINT) both; }
.e-catsec__head { display: flex; align-items: center; gap: 14px; }
.e-catsec__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--c); color: #fff; flex: none; box-shadow: 0 6px 16px var(--ch); }
.e-catsec__head h2 { margin: 0; font: 900 28px/1 var(--SG); letter-spacing: -.04em; }
.e-catsec__count { margin-left: auto; padding: 7px 14px; border-radius: var(--r-pill); background: var(--cbg); font: 800 14px/1 var(--SG); color: var(--c); white-space: nowrap; }
.e-catsec__count small { opacity: .6; font-size: inherit; }
.e-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.e-tile { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 160px; padding: 20px; text-align: left; cursor: pointer; background: #fff !important; border: 2px solid var(--line); border-radius: 26px; color: var(--ink) !important; font-family: var(--SG); transition: transform .3s var(--BOUNCE), box-shadow .3s, border-color .3s; width: 100%; overflow: hidden; }
.e-tile::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 6px; background: var(--c); }
.e-tile:hover { transform: translateY(-4px) rotate(-.6deg); border-color: var(--c); box-shadow: 0 16px 36px var(--ch); }
.e-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.e-tile__name { font: 800 19px/1.2 var(--SG); letter-spacing: -.02em; overflow-wrap: anywhere; }
.e-tile__pts { padding: 6px 10px; border-radius: var(--r-pill); background: var(--cbg); font: 800 14px/1 var(--SG); white-space: nowrap; color: var(--c); }
.e-tile__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.e-tile__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; width: 100%; font: 600 12.5px/1 var(--SG); color: var(--lab); }
.e-tile__solved { margin-left: auto; display: none; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); background: #E7F7EF; color: var(--ok); font-weight: 800; }
.e-tile.is-solved { background: #FBFFFC !important; border-color: rgba(34,168,107,.35); }
.e-tile.is-solved .e-tile__solved { display: flex; animation: e-pop .5s var(--BOUNCE) both; }
.e-tile.is-locked { cursor: not-allowed; opacity: .6; filter: grayscale(.5); }
.e-tile.is-locked:hover { transform: none; box-shadow: none; border-color: var(--line); }

/* countdown */
.e-count { display: flex; flex-wrap: wrap; gap: 12px; }
.e-count > div { min-width: 104px; padding: 18px 16px; background: #fff; border-radius: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.e-count b { font: 900 clamp(40px,6vw,72px)/1 var(--SG); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--accent); }
.e-count span { font: 700 13px/1 var(--SG); color: var(--lab); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- modals ---------- */
.modal { --bs-modal-bg: #fff; --bs-modal-border-color: transparent; --bs-modal-border-radius: 32px; --bs-modal-inner-border-radius: 32px; --bs-modal-color: var(--sub); }
.modal-backdrop { --bs-backdrop-bg: #2B1A10; --bs-backdrop-opacity: .45; }
.modal-content { background: #fff; border: 0; border-radius: 32px; color: var(--sub); box-shadow: 0 30px 80px rgba(80,30,5,.3); overflow: hidden; }
.modal.fade .modal-dialog { transform: scale(.9) translateY(20px); transition: transform .4s var(--BOUNCE); }
.modal.show .modal-dialog { transform: none; }
.modal-title, .modal-header h2, .modal-header h5 { font: 800 22px/1.15 var(--SG); color: var(--ink); text-align: left !important; margin: 0; }
.modal-header { padding: 24px 26px 12px; border: 0; }
.modal-body { padding: 16px 26px 24px; }
.modal-footer { padding: 14px 26px 22px; gap: 10px; border: 0; }
.modal-footer > * { margin: 0; }
.chal-dialog { max-width: min(860px, calc(100% - 24px)); margin: clamp(8px,4vh,48px) auto; }
.chal-head { position: relative; padding: 28px 30px 22px; background: var(--c); color: #fff; overflow: hidden; }
.chal-head::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.15); }
.chal-head__close { position: absolute; top: 18px; right: 18px; z-index: 2; background: rgba(255,255,255,.25) !important; color: #fff !important; }
.chal-head__cat { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.22); color: #fff; font: 800 12px/1 var(--SG); letter-spacing: .06em; text-transform: uppercase; }
.chal-head h2 { position: relative; z-index: 1; margin: 14px 56px 0 0; font: 900 clamp(28px,4vw,40px)/1.05 var(--SG); letter-spacing: -.045em; color: #fff; }
.chal-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; font: 600 13px/1.4 var(--SG); color: rgba(255,255,255,.92); }
.chal-meta .chal-pts { padding: 7px 12px; border-radius: var(--r-pill); background: #fff; color: var(--c); font: 900 16px/1 var(--SG); }
.chal-meta .chal-dyn { display: flex; align-items: center; gap: 6px; }
.chal-meta .e-tag { background: rgba(255,255,255,.22); color: #fff; }
.chal-meta a { color: #fff; text-decoration: underline; }
.chal-head .e-tabs { position: relative; z-index: 1; margin-top: 20px; }
.chal-head .e-tabs button, .chal-head .e-tabs .nav-link { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.chal-head .e-tabs .active { background: #fff !important; color: var(--c) !important; }
.chal-body { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 24px; }
.chal-block { display: flex; flex-direction: column; gap: 10px; }
.chal-hook { margin: 0; padding: 14px 18px; border-radius: 20px; background: var(--cbg); color: var(--ink); font: 600 italic 15px/1.55 var(--SG); }
.chal-desc { font: 400 15px/1.7 var(--SG); color: var(--sub); overflow-wrap: anywhere; }
.chal-desc p:last-child { margin-bottom: 0; }
.chal-desc a, .e-prose a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.chal-desc pre, .e-prose pre { margin: 0 0 14px; padding: 14px 18px; background: #2B1A10; border-radius: 18px; font: 500 13px/1.6 var(--MONO); color: #FFE9D8; overflow-x: auto; }
.chal-desc code, .e-prose code { font-family: var(--MONO); padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--accent-dark); }
.chal-desc pre code, .e-prose pre code { padding: 0; background: none; color: inherit; }
.chal-desc img, .e-prose img { max-width: 100%; height: auto; border-radius: 18px; }
.chal-conn { flex: 1; min-width: 0; padding: 14px 16px; font: 600 15px/1.2 var(--MONO) !important; color: var(--accent-dark) !important; overflow-x: auto; white-space: nowrap; }
.chal-files { display: flex; flex-wrap: wrap; gap: 8px; }
.chal-file { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--accent-dark); font: 700 13px/1 var(--SG); max-width: 100%; transition: background .2s, color .2s; }
.chal-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chal-file:hover { background: var(--accent); color: #fff; }
.chal-hint { border-radius: 20px; background: var(--bg); border: 2px solid var(--line); }
.chal-hint > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; cursor: pointer; list-style: none; font: 800 14px/1.2 var(--SG); color: var(--ink); }
.chal-hint > summary::-webkit-details-marker { display: none; }
.chal-hint > summary .chal-hint__cost { font: 600 12px/1 var(--SG); color: var(--lab); }
.chal-hint > summary .chal-hint__act { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: #fff; color: var(--accent); font: 700 12px/1 var(--SG); white-space: nowrap; box-shadow: var(--shadow-sm); }
.chal-hint[open] > summary .chal-hint__act { background: #E7F7EF; color: var(--ok); box-shadow: none; }
.chal-hint__body { padding: 0 18px 16px; font: 400 14px/1.6 var(--SG); color: var(--sub); }
.chal-hint__body p:last-child { margin: 0; }
.chal-flag { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 24px; background: var(--bg); }
.chal-flag__row { display: flex; flex-wrap: wrap; gap: 10px; }
.chal-flag__row.is-shake { animation: e-shake .45s; }
.chal-flag__row .challenge-input, .chal-flag__row input[name="submission"] { flex: 1 1 240px; min-width: 0; height: 54px; font: 600 16px/1 var(--MONO); border-radius: var(--r-pill); padding: 0 22px; }
.chal-flag__row .challenge-submit { flex: none; min-width: 150px; height: 54px; }
.chal-flag.is-ko .challenge-input { border-color: var(--ko); }
.chal-flag.is-ok .challenge-input { border-color: var(--ok); }
.chal-res { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: #fff; border: 2px solid var(--rc, var(--line)); border-radius: 22px; overflow: visible; animation: e-pop-in .45s var(--BOUNCE) both; }
.chal-res b { font: 900 18px/1.1 var(--SG); color: var(--rc, var(--ink)); display: block; margin-bottom: 4px; }
.chal-res span { font: 500 13.5px/1.5 var(--SG); color: var(--sub); }
.chal-res--ok { --rc: var(--ok); } .chal-res--ko { --rc: var(--ko); } .chal-res--info { --rc: var(--info); } .chal-res--warn { --rc: var(--warn); }
.chal-burst { position: relative; width: 64px; height: 64px; flex: none; }
.chal-burst i { position: absolute; left: 29px; top: 26px; width: 7px; height: 12px; border-radius: 3px; transform-origin: 3px 6px; animation: e-ray 1s var(--EXPO) both; }
.chal-burst video, .chal-burst svg { position: relative; width: 64px; height: 64px; animation: e-pop .6s var(--BOUNCE) both; mix-blend-mode: darken; object-fit: contain; }
.chal-after { display: flex; flex-direction: column; gap: 14px; }
.chal-rate { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: var(--bg); }
.chal-thumb { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--line); border-radius: 50%; color: var(--soft); cursor: pointer; transition: transform .2s var(--BOUNCE); }
.chal-thumb:hover { transform: scale(1.1); }
.chal-thumb.is-up { background: #E7F7EF; border-color: var(--ok); color: var(--ok); }
.chal-thumb.is-down { background: #FFF0F0; border-color: var(--ko); color: var(--ko); }
.chal-thumb--down svg { transform: rotate(180deg); }
.chal-pane { padding: 24px 30px 30px; }
.tab-pane:not(.active) { display: none; }
.chal-lockrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 20px; background: var(--bg); font: 500 13px/1.4 var(--SG); color: var(--lab); }

/* confettis plein écran */
.e-confetti { position: fixed; left: 50%; top: 40%; width: 10px; height: 14px; border-radius: 3px; z-index: 2000; pointer-events: none; animation: e-confetti 1.4s var(--EXPO) forwards; }

/* ---------- scoreboard ---------- */
.e-podium { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; margin-bottom: 28px; }
.e-podium a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 16px; background: #fff; border-radius: 28px; color: var(--ink); box-shadow: var(--shadow); animation: e-pop-in .6s var(--BOUNCE) both; border-top: 6px solid var(--pc); transition: transform .3s var(--BOUNCE); }
.e-podium a:hover { color: var(--ink); transform: translateY(-4px); }
.e-podium a:nth-child(1) { order: 2; padding-top: 34px; } .e-podium a:nth-child(2) { order: 1; } .e-podium a:nth-child(3) { order: 3; }
.e-podium__place { width: 44px; height: 44px; border-radius: 50%; background: var(--pc); color: #fff; display: flex; align-items: center; justify-content: center; font: 900 18px/1 var(--SG); }
.e-podium__name { font: 900 22px/1.1 var(--SG); letter-spacing: -.03em; overflow-wrap: anywhere; }
.e-podium__score { font: 900 28px/1 var(--SG); letter-spacing: -.04em; color: var(--accent); }
.e-podium__score small { font-size: 14px; color: var(--lab); }
@media (max-width: 640px) { .e-podium { grid-template-columns: minmax(0,1fr); } .e-podium a:nth-child(n) { order: 0; padding-top: 22px; } }
.e-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-2); font: 800 14px/1 var(--SG); color: var(--soft); font-variant-numeric: tabular-nums; }
.e-rank--1 { background: #F5B724; color: #fff; } .e-rank--2 { background: #B8C2CC; color: #fff; } .e-rank--3 { background: #E08A4F; color: #fff; }
tr.is-me td { background: #FFF1E4 !important; }
tr.is-me td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
#score-graph { min-height: 380px; }

/* ---------- den / profils ---------- */
.den-hero { position: relative; overflow: hidden; background: var(--lc, var(--grad)); background: linear-gradient(160deg, var(--banner, #FF8233) 0%, color-mix(in srgb, var(--banner, #FF8233) 60%, #FDAC55) 100%); border-radius: 0 0 44px 44px; color: #fff; }
.den-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.den-hero__bg::before { content: ""; position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: min(40vw, 520px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.16); }
.den-hero__bg video { position: absolute; right: 4%; bottom: 0; width: min(36vw, 460px); height: 100%; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; opacity: .95; }
.den-hero__in { position: relative; max-width: 1280px; margin: 0 auto; padding: clamp(36px,6vw,72px) var(--gut) 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 32px 48px; align-items: end; }
.den-hero__id { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.den-hero .e-eyebrow { background: rgba(255,255,255,.22); color: #fff; }
.den-hero__who { display: flex; align-items: center; gap: 18px; }
.den-avatar { width: clamp(84px, 10vw, 120px); height: clamp(84px, 10vw, 120px); flex: none; border-radius: 50%; border: 5px solid #fff; background: #fff; overflow: hidden; box-shadow: 0 12px 30px rgba(120,40,0,.25); display: flex; align-items: center; justify-content: center; font: 900 40px/1 var(--SG); color: var(--accent); animation: e-pop .7s var(--BOUNCE) .1s both; }
.den-avatar img, .den-avatar video { width: 100%; height: 100%; object-fit: cover; }
.den-hero__name { margin: 0; font: 900 clamp(40px,6.4vw,84px)/.98 var(--SG); letter-spacing: -.05em; overflow-wrap: anywhere; color: #fff; }
.den-hero__name .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.den-hero__name .ln > span { display: inline-block; animation: e-lnUp .9s var(--TYPE) .1s both; }
.den-hero__name .ln + .ln > span { animation-delay: .18s; font-size: .42em; letter-spacing: -.02em; padding: 8px 16px; margin-top: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.22); color: #fff; }
.den-hero__full { font: 700 18px/1.2 var(--SG); color: rgba(255,255,255,.95); }
.den-hero__bio { margin: 0; max-width: 560px; font: 500 15.5px/1.6 var(--SG); color: rgba(255,255,255,.95); }
.den-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; font: 600 13px/1.4 var(--SG); color: #fff; animation: e-rise .7s var(--QUINT) .45s both; }
.den-hero__meta > * { padding: 7px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.2); color: #fff; }
.den-hero__meta a { color: #fff; }
.den-hero__meta .k { opacity: .8; }
.den-pins { display: flex; flex-wrap: wrap; gap: 10px; }
.den-pin { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: #fff; color: var(--ink); font: 800 13px/1 var(--SG); box-shadow: 0 6px 14px rgba(120,40,0,.18); animation: e-pop .5s var(--BOUNCE) both; }
.den-pin i { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 16px; background: var(--bc, var(--surface-2)); overflow: hidden; }
.den-pin i img { width: 100%; height: 100%; object-fit: cover; }
.den-level { display: flex; flex-direction: column; gap: 12px; max-width: 560px; padding: 18px; background: rgba(255,255,255,.95); border-radius: 26px; color: var(--ink); box-shadow: 0 12px 30px rgba(120,40,0,.18); animation: e-rise .7s var(--QUINT) .55s both; }
.den-level__top { display: flex; align-items: center; gap: 14px; }
.den-level__hex { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lt); font-size: 24px; }
.den-level__txt { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.den-level__txt b { font: 900 17px/1 var(--SG); color: var(--ink); }
.den-level__txt span { font: 600 13px/1.3 var(--SG); color: var(--lab); }
.den-bar { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.den-bar > div { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--o1), var(--o2)); transform-origin: left; animation: e-fill 1.2s var(--EXPO) .9s both; }
.den-tiers { display: flex; justify-content: space-between; gap: 6px; font: 700 10.5px/1.2 var(--SG); color: var(--mute); }
.den-tiers .is-on { color: var(--accent); }
.den-points { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; position: relative; z-index: 1; }
.den-points .e-eyebrow { background: rgba(255,255,255,.22); color: #fff; }
.den-points__n { font: 900 clamp(64px,10vw,150px)/.9 var(--SG); letter-spacing: -.06em; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; text-shadow: 0 6px 24px rgba(120,40,0,.25); }
.den-points .e-stats { margin-top: 10px; padding: 14px 18px; background: rgba(255,255,255,.95); border-radius: 22px; }
.den-points .e-stat__num { font-size: 26px; }
.den-hero__rule { display: none; }
.den-actions { display: flex; flex-wrap: wrap; gap: 10px; animation: e-rise .7s var(--QUINT) .6s both; }
.den-actions .e-btn { background: #fff; color: var(--accent); }
.den-actions .e-btn--line { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.55); }
.den-actions .e-btn--danger { background: rgba(255,255,255,.95); }
.den-actions .e-muted { color: rgba(255,255,255,.9) !important; }
.den-body { max-width: 1280px; margin: 0 auto; padding: 32px var(--gut) 80px; display: flex; flex-direction: column; gap: 64px; }
.den-pulse { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.den-pulse > div { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; border-radius: 26px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); animation: e-pop-in .6s var(--BOUNCE) both; min-width: 0; }
.den-pulse__lab { display: flex; align-items: center; gap: 8px; font: 800 11.5px/1 var(--SG); letter-spacing: .08em; color: var(--pc); }
.den-pulse b { font: 900 22px/1.15 var(--SG); letter-spacing: -.03em; color: var(--ink); overflow-wrap: anywhere; }
.den-pulse span { font: 500 13px/1.5 var(--SG); color: var(--lab); }
@media (max-width: 960px) { .den-pulse { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px) { .den-pulse { grid-template-columns: minmax(0,1fr); } }
.den-radar { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.den-radar__in { position: relative; width: 100%; max-width: 540px; }
.den-radar svg { display: block; width: 100%; height: auto; overflow: visible; }
.den-radar__lab { position: absolute; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; pointer-events: none; }
.den-radar__lab b { font: 800 13px/1 var(--SG); }
.den-radar__lab span { font: 600 11px/1 var(--SG); color: var(--lab); }
.den-skills { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); display: flex; flex-direction: column; padding: 6px 0; box-shadow: var(--shadow-sm); }
.den-skill { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px; padding: 14px 22px; }
.den-skill__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.den-skill__name b { font: 800 15px/1 var(--SG); color: var(--ink); }
.den-skill__rank { font: 700 11px/1 var(--SG); padding: 5px 9px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--soft); }
.den-skill__rank.is-hi { background: var(--c); color: #fff; }
.den-skill__val { font: 600 12.5px/1 var(--SG); color: var(--lab); white-space: nowrap; }
.den-skill__val b { color: var(--ink); font-weight: 800; }
.den-skill__bar { grid-column: 1 / -1; position: relative; height: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.den-skill__bar > div { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r-pill); background: var(--c); transform-origin: left; animation: e-fill 1s var(--EXPO) both; }
.den-skill__bar i { display: none; }
.den-goal { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px 24px; background: var(--grad); border-radius: 26px; color: #fff; box-shadow: var(--shadow); }
.den-goal .e-label { color: rgba(255,255,255,.9); }
.den-goal b { font: 900 19px/1.3 var(--SG); color: #fff; }
.den-goal a { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--r-pill); background: #fff; color: var(--accent); font: 800 15px/1 var(--SG); }
.den-rate__n { font: 900 60px/1 var(--SG); letter-spacing: -.05em; color: var(--ink); }
.den-rate__bar { display: flex; height: 16px; gap: 4px; }
.den-rate__bar > div { border-radius: var(--r-pill); transform-origin: left; animation: e-fill 1s var(--EXPO) .2s both; }
.den-donut { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.den-donut__c { position: relative; width: 170px; height: 170px; flex: none; }
.den-donut__c > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.den-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 140px; }
.den-legend span { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--SG); color: var(--sub); }
.den-legend i { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.den-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.den-badge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px 16px; background: #fff; border: 2px dashed var(--line-2); border-radius: 26px; text-align: center; transition: transform .3s var(--BOUNCE); }
.den-badge:hover { transform: translateY(-4px) rotate(-2deg); }
.den-badge__img { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; background: var(--surface-2); filter: grayscale(1); opacity: .5; overflow: hidden; }
.den-badge__img img { width: 100%; height: 100%; object-fit: cover; }
.den-badge b { font: 800 14px/1.2 var(--SG); color: var(--mute); }
.den-badge span { font: 500 11.5px/1.35 var(--SG); color: var(--mute); }
.den-badge.is-on { border: 2px solid var(--bc, var(--accent)); box-shadow: 0 10px 26px rgba(241,101,36,.16); animation: e-pop .55s var(--BOUNCE) both; }
.den-badge.is-on .den-badge__img { filter: none; opacity: 1; background: var(--bc, var(--accent)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bc, #F16524) 20%, #fff); }
.den-badge.is-on b { color: var(--ink); } .den-badge.is-on span { color: var(--lab); }
.den-badge__rar { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: var(--r-pill); font: 800 9.5px/1 var(--SG); letter-spacing: .06em; text-transform: uppercase; background: var(--surface-2); color: var(--lab); }
.den-badge.r-rare .den-badge__rar { background: #E5EEF9; color: #4A6FA5; }
.den-badge.r-legendaire .den-badge__rar { background: linear-gradient(90deg,#F5B724,#FFE08A,#F5B724); background-size: 200% 100%; animation: e-shine 2.4s linear infinite; color: #7A4A00; }
.den-badge.is-on.r-legendaire { border-color: #F5B724; }
.den-reco { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #fff; border: 2px solid var(--line); border-radius: 22px; color: var(--ink); transition: transform .3s var(--BOUNCE), border-color .2s; }
.den-reco:hover { border-color: var(--c); color: var(--ink); transform: translateX(4px); }
.den-reco > div { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.den-reco b { font: 800 17px/1.2 var(--SG); }
.den-reco small { font: 600 12px/1 var(--SG); color: var(--lab); }
.den-award { display: flex; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
.den-award > div { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.den-award b { font: 800 17px/1.2 var(--SG); color: var(--ink); }
.den-award__pts { font: 900 22px/1 var(--SG); white-space: nowrap; }
.den-members { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.den-member { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); transition: transform .3s var(--BOUNCE); }
.den-member:hover { color: var(--ink); transform: translateY(-3px); }
.den-member > div { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.den-member b { font: 800 16px/1.2 var(--SG); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.den-member small { font: 600 12px/1 var(--SG); color: var(--lab); }
.den-fields { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 600 13px/1.4 var(--SG); color: #fff; }
.e-flag { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- campagnes ---------- */
.cp-card { position: relative; display: flex; flex-direction: column; min-height: 360px; border-radius: 32px; overflow: hidden; background: var(--cp1, var(--accent)); color: #fff; box-shadow: 0 18px 40px rgba(120,40,0,.18); transition: transform .35s var(--BOUNCE); }
.cp-card:hover { transform: translateY(-6px) rotate(-.6deg); color: #fff; }
.cp-card__media { position: relative; height: 210px; overflow: hidden; background: var(--cp2, #FFF3E6); }
.cp-card__media img, .cp-card__media video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--EXPO); }
.cp-card:hover .cp-card__media img, .cp-card:hover .cp-card__media video { transform: scale(1.06); }
.cp-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.cp-card__body h3 { margin: 0; font: 900 26px/1.05 var(--SG); letter-spacing: -.04em; color: #fff; }
.cp-card__body p { margin: 0; font: 500 14.5px/1.5 var(--SG); color: rgba(255,255,255,.92); }
.cp-card__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.cp-prog { flex: 1; height: 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.3); overflow: hidden; }
.cp-prog > div { height: 100%; border-radius: var(--r-pill); background: #fff; transform-origin: left; animation: e-fill 1.1s var(--EXPO) .3s both; }
.cp-hero { position: relative; overflow: hidden; background: var(--cp1); color: #fff; border-radius: 0 0 44px 44px; }
.cp-hero__media { position: absolute; inset: 0; }
.cp-hero__media img, .cp-hero__media video, .cp-hero__media iframe, .cp-hero__media .cp-lottie { width: 100%; height: 100%; object-fit: cover; border: 0; }
.cp-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--cp1) 92%, transparent) 0%, color-mix(in srgb, var(--cp1) 55%, transparent) 55%, transparent 100%); }
.cp-hero__in { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: clamp(48px,8vw,110px) var(--gut) 56px; display: flex; flex-direction: column; gap: 18px; max-width: 1280px; }
.cp-hero h1 { margin: 0; max-width: 760px; font: 900 clamp(44px,7vw,92px)/.98 var(--SG); letter-spacing: -.055em; color: #fff; }
.cp-hero .e-eyebrow { background: rgba(255,255,255,.22); color: #fff; }
.cp-hero__tag { margin: 0; max-width: 620px; font: 600 18px/1.5 var(--SG); color: rgba(255,255,255,.95); }
.cp-pattern-waves { background-image: radial-gradient(circle at 50% 100%, transparent 18px, rgba(255,255,255,.08) 19px, rgba(255,255,255,.08) 22px, transparent 23px); background-size: 46px 24px; }
.cp-pattern-dots { background-image: radial-gradient(rgba(255,255,255,.18) 2px, transparent 2.5px); background-size: 22px 22px; }
.cp-pattern-leaves { background-image: radial-gradient(ellipse 8px 14px at 50% 50%, rgba(255,255,255,.12) 98%, transparent); background-size: 40px 40px; }
.cp-pattern-stars { background-image: radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 2px), radial-gradient(rgba(255,255,255,.2) 1px, transparent 1.5px); background-size: 60px 60px, 34px 34px; background-position: 0 0, 17px 17px; }
.cp-story { position: relative; padding: 28px 32px; border-radius: 32px; background: var(--cp2); color: var(--cp3); box-shadow: var(--shadow-sm); }
.cp-story::before { content: "“"; position: absolute; left: 18px; top: -18px; font: 900 110px/1 Georgia, serif; color: var(--cp1); opacity: .35; }
.cp-story .e-prose { color: var(--cp3); max-width: none; }
.cp-chapter { display: flex; flex-direction: column; gap: 16px; }
.cp-chapter__head { display: flex; align-items: center; gap: 14px; }
.cp-chapter__n { width: 48px; height: 48px; border-radius: 50%; background: var(--cp1); color: #fff; display: flex; align-items: center; justify-content: center; font: 900 20px/1 var(--SG); flex: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--cp1) 35%, transparent); }
.cp-chapter__head h2 { margin: 0; font: 900 28px/1 var(--SG); letter-spacing: -.04em; }
.cp-path { position: relative; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.cp-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; border: 2px solid var(--line); border-radius: 26px; color: var(--ink); transition: transform .3s var(--BOUNCE), border-color .2s; }
.cp-step:hover { transform: translateY(-4px); border-color: var(--cp1); color: var(--ink); }
.cp-step__hook { font: 600 italic 14px/1.5 var(--SG); color: var(--lab); }
.cp-step__top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cp-step__top b { font: 900 18px/1.2 var(--SG); letter-spacing: -.02em; }
.cp-step.is-solved { border-color: rgba(34,168,107,.4); background: #FBFFFC; }
.cp-step.is-locked { opacity: .55; pointer-events: none; }
.cp-end { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 28px; border-radius: 32px; background: var(--cp1); color: #fff; }
.cp-end h2 { color: #fff; }

/* ---------- prose ---------- */
.e-prose { font: 400 16px/1.75 var(--SG); color: var(--sub); max-width: 820px; }
.e-prose h1 { font: 900 clamp(40px,5.4vw,64px)/1 var(--SG); letter-spacing: -.045em; margin: 0 0 24px; color: var(--ink); }
.e-prose h2 { font: 900 30px/1.1 var(--SG); letter-spacing: -.035em; margin: 44px 0 14px; color: var(--ink); }
.e-prose h3 { font: 800 22px/1.2 var(--SG); margin: 28px 0 10px; }
.e-prose table { width: 100%; margin: 0 0 20px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.e-prose th { background: var(--surface-2); }
.e-prose th, .e-prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.e-prose blockquote { margin: 0 0 20px; padding: 16px 20px; border-radius: 20px; background: var(--surface-2); border-left: 5px solid var(--accent); color: var(--ink); }
.e-prose hr { border: 0; height: 2px; background: var(--line); opacity: 1; }
.e-prose ul, .e-prose ol { padding-left: 22px; }
.e-prose li::marker { color: var(--accent); }
.e-article { background: #fff; border-radius: 32px; padding: clamp(24px,4vw,48px); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }

/* ---------- errors (style 404) ---------- */
.e-err { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--grad); }
.e-err__bg { position: absolute; inset: 0; pointer-events: none; opacity: .8; -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 95%); mask-image: linear-gradient(to bottom, black 40%, transparent 95%); display: flex; align-items: center; justify-content: center; }
.e-err__num { position: absolute; color: #fff; font: 900 clamp(200px, 48vw, 800px)/1 var(--SG); letter-spacing: -.05em; white-space: nowrap; transform-origin: center; }
.e-err__oval { position: absolute; width: clamp(120px, 20vw, 400px); height: 22vh; border-radius: 9999px; background: #fff; transform-origin: center; }
@media (min-width: 640px) { .e-err__oval { height: 26vh; } }
@media (min-width: 768px) { .e-err__oval { height: 50vh; } }
.e-err__video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; margin-top: calc(-6vh - 40px); }
.e-err__video > div { width: 120vw; height: 85vh; }
@media (min-width: 640px) { .e-err__video > div { width: 70vw; height: 70vh; } }
@media (min-width: 768px) { .e-err__video > div { width: 62vw; height: 78vh; } }
.e-err__video video { width: 100%; height: 100%; object-fit: contain; pointer-events: none; mix-blend-mode: darken; }
.e-err__bottom { position: relative; z-index: 30; margin-top: auto; padding: 0 16px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (min-width: 640px) { .e-err__bottom { padding-bottom: 64px; } }
.e-err__bottom h1 { margin: 0 0 12px; color: #fff; font: 500 18px/1.3 var(--SG); letter-spacing: 0; }
@media (min-width: 640px) { .e-err__bottom h1 { font-size: 20px; margin-bottom: 16px; } }
@media (min-width: 768px) { .e-err__bottom h1 { font-size: 24px; } }
.e-err__bottom p { margin: -4px 0 16px; max-width: 520px; color: rgba(255,255,255,.92); font: 500 15px/1.5 var(--SG); }
.e-err__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.e-err__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 9999px; background: var(--accent); color: #fff; font: 600 14px/1 var(--SG); transition: transform .25s, box-shadow .25s; }
.e-err__btn:hover { color: #fff; transform: scale(1.05); box-shadow: 0 10px 24px rgba(120,40,0,.25); }
.e-err__btn--white { background: #fff; color: var(--accent); }
.e-err__btn--white:hover { color: var(--accent-dark); }
@media (min-width: 640px) { .e-err__btn { padding: 16px 32px; font-size: 16px; } }
.e-err .e-count { justify-content: center; margin-bottom: 18px; }
.e-err .e-nav { background: transparent; border: 0; backdrop-filter: none; position: relative; z-index: 20; }
.e-err .e-nav .e-logo, .e-err .e-nav .e-logo b span { color: #fff; }

/* pagination */
.e-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; font: 600 13px/1 var(--SG); color: var(--lab); }
.e-pager a, .e-pager select { height: 40px; min-width: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--accent); font: 700 13px/1 var(--SG); }
.e-pager a:hover { border-color: var(--accent); }

/* notifications */
.e-feed { display: flex; flex-direction: column; gap: 16px; }
.e-note { position: relative; padding: 22px 24px 22px 70px; background: #fff; border-radius: 26px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); animation: e-rise .6s var(--QUINT) both; }
.e-note::before { content: "📣"; position: absolute; left: 20px; top: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.e-note time, .e-note .e-note__date { font: 700 12px/1 var(--SG); color: var(--lab); }
.e-note h2 { margin: 8px 0 10px; font: 900 22px/1.15 var(--SG); letter-spacing: -.03em; }
.e-note__body { font: 400 15px/1.7 var(--SG); color: var(--sub); }

/* toast */
.toast { --bs-toast-bg: #fff; --bs-toast-border-color: transparent; --bs-toast-header-bg: #fff; --bs-toast-header-color: var(--ink); --bs-toast-color: var(--sub); border-radius: 24px !important; overflow: hidden; font-family: var(--SG); width: 370px; max-width: calc(100vw - 32px); box-shadow: var(--shadow) !important; border-top: 5px solid var(--accent) !important; }
.toast-header { border-bottom: 1px solid var(--line); font-weight: 800; }
.dropdown-menu { --bs-dropdown-bg: #fff; --bs-dropdown-border-color: var(--line); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-active-bg: var(--accent); border-radius: 18px; }
.tooltip { --bs-tooltip-bg: var(--ink); --bs-tooltip-color: #fff; font-family: var(--SG); }
.progress { background: var(--surface-2); border-radius: var(--r-pill); }
.ctfdio-email-nudge { width: min(560px, calc(100vw - 32px)); }

/* profil · édition */
.pe-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
@media (max-width: 900px) { .pe-grid { grid-template-columns: minmax(0,1fr); } }
.pe-preview { position: sticky; top: 96px; border-radius: 32px; overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.pe-preview__band { height: 110px; background: var(--pb, var(--accent)); }
.pe-preview__body { padding: 0 24px 24px; margin-top: -54px; display: flex; flex-direction: column; gap: 10px; }
.pe-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.pe-colors label { position: relative; cursor: pointer; }
.pe-colors input { position: absolute; opacity: 0; }
.pe-colors span { display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--sw); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--line); transition: transform .2s var(--BOUNCE); }
.pe-colors input:checked + span { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.1); }
.pe-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.pe-pick label { cursor: pointer; }
.pe-pick input { position: absolute; opacity: 0; }
.pe-pick .den-badge { padding: 14px 8px 12px; }
.pe-pick .den-badge__img { width: 52px; height: 52px; font-size: 24px; }
.pe-pick input:checked + .den-badge { outline: 4px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }