*{box-sizing:border-box}
:root{
  --bg:#0a0f18;--panel:#0f1724;--border:#1c2740;--text:#e6eef7;--muted:#9fb0c6;
  --brand:#4fc3f7;--brand-d:#2a6fd1;--accent:#1a5fbf;--link:#79b8ff;--link-h:#a5d6ff;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --bg-grad1:#0e1a2b;--bg-grad2:#0b1630;--header-bg:rgba(15,23,36,.85);--footer-bg:rgba(15,23,36,.85);--button-bg:#141b24;--thumb-start:#173052;
}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Segoe UI Emoji";background:radial-gradient(1000px 500px at 20% -10%, var(--bg-grad1) 0%, var(--bg) 60%),radial-gradient(800px 400px at 120% 10%, var(--bg-grad2) 0%, var(--bg) 60%);color:var(--text)}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-h);text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header{background:var(--header-bg);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.site-header .bar{display:flex;align-items:center;justify-content:space-between}
.site-header h1{margin:0;font-size:18px;color:var(--brand)}
.site-header .brand{display:flex;align-items:center;gap:10px}
.site-header .brand img{height:22px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.site-header nav{display:flex;gap:14px;font-size:14px}
.site-header a.active{color:var(--brand)}
.hero{padding:40px 0 24px}
.hero-card{background:linear-gradient(180deg, rgba(41,71,132,.35), rgba(16,24,38,.5));border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
.hero h2{margin:0 0 8px;font-size:28px}
.hero p{margin:0;color:var(--muted)}
.cta-row{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--button-bg);color:var(--text);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.btn.primary{background:linear-gradient(180deg, var(--accent), var(--brand-d));border-color:#275fb8}
.btn[aria-disabled="true"]{opacity:.6;pointer-events:none}
.features{padding:20px 0}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.feature-item{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px}
.feature-item h4{margin:0 0 6px;font-size:16px;color:var(--brand)}
.feature-item p{margin:0;color:var(--muted)}
.app-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:14px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--thumb-start),var(--panel));border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.card .thumb img{height:64px;width:auto;opacity:.95;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.card .body{padding:14px}
.card .body h3{margin:0 0 6px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gallery figure{margin:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.gallery img{display:block;width:100%;height:auto}
.gallery figcaption{padding:8px;color:var(--muted);font-size:12px}
.site-footer{border-top:1px solid var(--border);background:var(--footer-bg);margin-top:28px}
.site-footer .small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
@media (max-width:640px){
  .container{padding:12px}
  .site-header .bar{flex-wrap:wrap}
  .site-header nav{gap:10px;flex-wrap:wrap;row-gap:6px;margin-top:6px}
  .hero h2{font-size:24px}
  .cta-row .btn{flex:1 1 100%;text-align:center}
}
.app-logo{height:60px;width:auto;display:block;margin:8px 0}

/* Lightbox pour agrandir les captures */
.gallery img{cursor:zoom-in}
.site-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;padding:2rem;z-index:1000}
.site-lightbox.open{display:flex}
.site-lightbox img{max-width:min(92vw,1200px);max-height:92vh;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.site-lightbox .close-hint{position:absolute;top:.75rem;right:1rem;color:#fff;font-size:.9rem;opacity:.85}

/* Thème clair */
:root[data-theme="light"]{
  --bg:#f7f9fc;--panel:#ffffff;--border:#d9e0ef;--text:#1b2430;--muted:#5b6b82;
  --brand:#2a6fd1;--brand-d:#174ea6;--accent:#79b8ff;--link:#1a5fbf;--link-h:#174ea6;
  --bg-grad1:#cfe8ff;--bg-grad2:#e2f0ff;--header-bg:rgba(255,255,255,.85);--footer-bg:rgba(255,255,255,.85);--button-bg:#ffffff;--thumb-start:#eaf2ff;
}

/* Bouton de bascule dans la barre */
.theme-toggle{margin-left:4px;padding:0px 2px;border:1px solid var(--border);border-radius:1px;background:var(--panel);color:var(--text);cursor:pointer;font-size:7px;line-height:1}
.theme-toggle:hover{filter:brightness(1.05)}
.theme-toggle .tw-icon{width:8px;height:8px}

/* Charts UI */
.chart{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px;margin-top:8px;position:relative}
.chart-controls{display:flex;align-items:center;gap:8px;margin:6px 0 8px}
.chart-controls select{padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text)}
.chart-controls label{color:var(--muted);font-size:12px}
.chart-tooltip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:6px 8px;color:var(--text);box-shadow:var(--shadow);transform:translate(-50%,-120%);white-space:nowrap;font-size:12px}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.legend-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--button-bg);color:var(--text);cursor:pointer}
.legend-item.off{opacity:.6}
.legend-swatch{width:12px;height:12px;border-radius:3px;border:1px solid var(--border)}
.table-responsive{overflow:auto;border:1px solid var(--border);border-radius:10px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-bottom:1px solid var(--border)}

/* Summary cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px}
.stat-label{color:var(--muted);font-size:12px}
.stat-value{font-size:24px;font-weight:600}
.stat-trend{margin-top:6px;font-size:12px;font-weight:600}
.stat-trend.trend-up{color:#10b981}
.stat-trend.trend-down{color:#ef4444}
/* Trend comparison bars */
.trend-compare{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px;margin-top:8px}
.trend-item{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.trend-item:last-child{border-bottom:none}
.trend-label{flex:0 0 240px;color:var(--muted);font-size:12px}
.trend-bars{flex:1;display:flex;gap:6px;align-items:center}
.trend-bars .bar{height:10px;border-radius:6px}
.trend-bars .bar.prev{background:#9ca3af}
.trend-bars .bar.cur.up{background:#10b981}
.trend-bars .bar.cur.down{background:#ef4444}
.trend-values{flex:0 0 240px;color:var(--muted);font-size:12px;text-align:right}

/* Skeleton loaders */
.skeleton{background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.12), rgba(255,255,255,0.04)); background-size:400% 100%; animation: shimmer 1.2s ease-in-out infinite;}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.skeleton-line{height:10px;border-radius:6px}
.skeleton-bar{height:10px;border-radius:6px}
.skeleton-bar.short{width:40%}
.skeleton-bar.medium{width:60%}
.skeleton-chart{height:220px;border-radius:10px}
.skeleton-pill{display:inline-block;height:24px;min-width:100px;border-radius:12px}
.trend-compare.loading .trend-item{opacity:.8}

/* Navigation mobile: animation d'ouverture/fermeture */
.nav-collapsible{display:flex}

/* Styles pour le bouton du menu mobile */
.mobile-menu-button {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10000;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.mobile-menu-button span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px 0;
  transition: all 0.3s;
}

/* Media queries pour les appareils mobiles */
@media (max-width:767px){
  /* Afficher le bouton du menu mobile */
  .mobile-menu-button {
    display: block;
  }
  
  /* Animation du bouton hamburger */
  .mobile-menu-button.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .mobile-menu-button.active span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-button.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }
  
  .tw-header .flex-col {
    position: relative;
  }
  
  .nav-collapsible{
    display:none;
  }
  
  /* Nouveau positionnement: près du haut, largeur quasi pleine, hauteur limitée à l’écran */
  .nav-collapsible.open{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:64px;
    left:50%;
    transform:translateX(-50%);
    width:calc(100vw - 32px);
    max-width:420px;
    height:auto;
    max-height:calc(100vh - 96px);
    background:rgba(31, 41, 55, 0.95);
    backdrop-filter:blur(10px);
    padding:0;
    z-index:9999;
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    overflow-y:auto;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
  }
  
  .nav-collapsible.active{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:64px;
    left:50%;
    transform:translateX(-50%);
    width:calc(100vw - 32px);
    max-width:420px;
    height:auto;
    max-height:calc(100vh - 96px);
    background:rgba(31, 41, 55, 0.95);
    backdrop-filter:blur(10px);
    padding:0;
    z-index:9999;
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    overflow-y:auto;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
  }
  
  .mobile-menu-header {
    display: none !important;
  }
  
  .nav-collapsible.open a,
  .nav-collapsible.active a{
    display: block;
    width: 100%;
    padding:16px 24px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    margin:0;
    font-size:15px;
    text-align: left;
    color: #fff;
    transition: background-color 0.2s ease;
  }
  
  .nav-collapsible.open a:hover,
  .nav-collapsible.active a:hover{
    background-color: rgba(255,255,255,0.1);
  }
  
  /* Ajout d'un overlay sombre derrière le menu */
  .mobile-menu-button.active::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
  }
  
  /* Assurer que le logo reste visible */
  .tw-header .logo {
    z-index: 10001;
    position: relative;
  }
}
  
  .nav-collapsible.active a:last-child,
  .nav-collapsible.active button:last-child{
    border-bottom:none;
  }
  
  .nav-collapsible.open .theme-toggle,
  .nav-collapsible.active .theme-toggle{
    margin:12px 24px;
    width:auto;
    padding:4px 8px;
    font-size:12px;
    border-radius:4px;
    line-height:1.2;
  }
  
  .nav-collapsible.open .theme-toggle .tw-icon,
  .nav-collapsible.active .theme-toggle .tw-icon{
    width:12px;
    height:12px;
  }
}
.tw-header #primaryNav.nav-collapsible.open{max-height:500px;opacity:1;transform:translateY(0)}
@media (min-width:768px){
  .tw-header #primaryNav.nav-collapsible{max-height:none;opacity:1;transform:none;overflow:visible}
}
/* Backdrop pour le menu hamburger */
.mobile-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:40;backdrop-filter:blur(2px)}
.mobile-nav-backdrop.show{opacity:1;pointer-events:auto}
.no-scroll{overflow:hidden}
@media (min-width:768px){
  .mobile-nav-backdrop{display:none}
}

/* Styles pour le bouton hamburger */
.mobile-menu-button {
  border: none;
  background: rgba(30,41,59,.6);
  padding: 0;
  cursor: pointer;
  color: var(--text);
  display: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all .2s ease;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  opacity: 0.9;
  backdrop-filter: blur(4px);
}

@media (max-width:767px) {
  .mobile-menu-button {
    display: flex;
  }
  
  button[data-menu-toggle]:hover {
    background: rgba(30,41,59,.5);
    opacity: 1;
  }
  
  button[data-menu-toggle]:active {
    transform: scale(0.95);
  }
  
  /* Animation de l'icône */
  button[data-menu-toggle] svg {
    transition: transform 0.3s ease;
    stroke-width: 1.5;
    width: 22px;
    height: 22px;
  }
  
  button[data-menu-toggle][aria-expanded="true"] svg {
    transform: rotate(90deg);
  }
}
  
  button[data-menu-toggle]:active {
    background: rgba(75,85,99,.25);
    transform: scale(0.95);
  }
  
  button[data-menu-toggle] svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
  }
  
  button[data-menu-toggle].open svg {
    transform: rotate(90deg);
  }
}
@media (min-width:768px){
  .mobile-nav-backdrop{display:none}
}
/* Harmonize action toolbar buttons on admin inscriptions */
body[data-page="inscriptions"] #content .tw-actions .tw-btn {
  padding: 6px 10px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 6px;
}
body[data-page="inscriptions"] #content .tw-actions .tw-icon { width: 16px; height: 16px; }

/* Align delete-all tests button size with others */
body[data-page="inscriptions"] #content #deleteAllTests.tw-btn {
  padding: 6px 10px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 6px;
  max-width: none;
  white-space: nowrap;
}
body[data-page="inscriptions"] #content #deleteAllTests .tw-icon { width: 16px; height: 16px; }

/* Enlarge Actions column and buttons */
body[data-page="inscriptions"] #content #requests th:nth-child(7),
body[data-page="inscriptions"] #content #requests td:nth-child(7) {
  width: 22ch;
}
body[data-page="inscriptions"] #content #requests td:last-child .tw-btn {
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
#content #deleteAllTests.tw-btn {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 16px;
  border-radius: 2px;
}
#content #deleteAllTests .tw-icon { width: 14px; height: 14px; }

/* Enlarge requests list area to improve visibility */
#content .overflow-x-auto {
  max-height: 70vh;
  overflow-y: auto;
}

/* Make the Message column wrap and show more text */
#content #requests td:nth-child(5),
#content #requests th:nth-child(5) {
  white-space: normal;
  word-break: break-word;
  max-width: 60ch;
}
/* Further compact delete-all button and widen table area */
#content #deleteAllTests.tw-btn {
  padding: 1px 4px;
  font-size: 10px;
  line-height: 14px;
  border-radius: 2px;
  gap: 2px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#content #deleteAllTests .tw-icon { width: 12px; height: 12px; }

/* Widen container and table area */
body[data-page="inscriptions"] .tw-container { max-width: 100%; }
#content .overflow-x-auto { width: 100%; max-height: 75vh; overflow-y: auto; }
#content #requests.tw-table { width: 100%; table-layout: fixed; }
#content #requests th, #content #requests td { word-break: break-word; }
#content #requests th:nth-child(7), #content #requests td:nth-child(7) { width: 22ch; }
/* Harmonize layout of Actions column */
body[data-page="inscriptions"] #content #requests td:last-child {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
}