/* Dark, colorful redesign */
:root{
  --bg:#000000; /* page background black */
  --surface:rgba(255,255,255,0.03); /* faint card */
  --text:#e6eef8; /* light text */
  --muted:#9aa7b6;
  --accent-1:#7c3aed; /* purple */
  --accent-2:#06b6d4; /* teal */
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);-webkit-font-smoothing:antialiased;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/fond.jpg') center/cover no-repeat fixed;
  background-color: var(--bg);
}
.wrap{max-width:920px;margin:8vh auto;padding:36px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);box-shadow:0 10px 40px rgba(124,58,237,0.14);border:1px solid rgba(255,255,255,0.04)}
.site-header{margin-bottom:20px}

/* Brand centered inside the banner (fallback) */
.brand{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.logo{width:120px;height:auto;display:block;border-radius:8px;box-shadow:0 8px 28px rgba(124,58,237,0.18)}

/* Brand area: logo + name above a full-width plate inside the centered block */
.brand{display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.brand .logo{width:72px;height:auto;border-radius:8px;box-shadow:0 14px 36px rgba(0,0,0,0.75)}
.brand .app-name{color:#fff;font-weight:800;font-size:20px}
.brand-plate{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg, rgba(18,18,18,0.55), rgba(18,18,18,0.28));border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:inset 0 0 48px rgba(3,6,23,0.45);overflow:hidden;padding-left:40px;z-index:1;backdrop-filter: blur(4px)}
.brand-plate::before{content:'';position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(90deg, rgba(124,58,237,0.06), rgba(6,182,212,0.03));opacity:0.7;filter:blur(6px)}

/* Full width banner above content */
.full-banner{width:100%;background:linear-gradient(180deg, rgba(18,18,18,0.6), rgba(18,18,18,0.35));padding:20px 0;border-bottom:1px solid rgba(255,255,255,0.03);backdrop-filter: blur(4px)}
.full-banner .inner{max-width:920px;margin:0 auto;padding:0 36px}
.full-banner .brand{align-items:center}

/* Black banner block for the brand */
.brand-banner{background:#000;padding:18px 24px;border-radius:12px;color:#fff;border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 30px rgba(0,0,0,0.6);position:relative}
.brand-banner .brand{gap:10px}
.brand-banner h1{color:#fff;margin:0;font-size:28px}
.brand-banner .logo{width:110px}
/* Decorative right extension inside the centered block (does not overflow wrap) */
.brand-banner::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: calc(100% - 20px); /* fill vertically inside the banner with inner spacing */
  background: linear-gradient(90deg, rgba(124,58,237,0.12), rgba(6,182,212,0.06));
  border-radius:10px;
  pointer-events: none;
  filter: blur(8px);
  transition: opacity .18s ease, left .18s ease;
  z-index: 0;
}

.brand-banner .brand{position:relative;z-index:1}
h1{margin:0 0 6px;font-size:34px;font-weight:700;color:var(--text)}
.lead{margin:0 0 20px;color:var(--muted);line-height:1.45}
.features ul{padding-left:20px;margin:0 0 22px}
.features li{margin:12px 0;color:var(--text)}
.download{margin-top:8px}
.btn{display:inline-block;padding:12px 20px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#fff;border-radius:12px;text-decoration:none;font-weight:700;box-shadow:0 8px 30px rgba(6,182,212,0.08);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(6,182,212,0.12)}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.main-nav{display:flex;align-items:center;gap:12px}
.nav-link{color:var(--text);text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:600;opacity:0.95;transition:background .12s ease,color .12s ease}
.nav-link:hover{background:rgba(255,255,255,0.03);color:#fff}

/* Nav bar placed under banner */
.nav-bar{margin-top:18px;display:flex;align-items:center;gap:16px}
.nav-toggle{display:none;background:transparent;border:0;padding:8px;border-radius:8px;color:var(--text);cursor:pointer}
.nav-toggle .hamburger{display:block;width:22px;height:2px;background:var(--text);position:relative}
.nav-toggle .hamburger::before,.nav-toggle .hamburger::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--text);transition:transform .18s ease}
.nav-toggle .hamburger::before{top:-7px}
.nav-toggle .hamburger::after{top:7px}

.nav-list{list-style:none;display:flex;gap:12px;margin:0;padding:0}
.nav-item{}
.nav-list .nav-link{display:inline-block;padding:10px 14px;border-radius:12px}

.nav-list.open{display:flex}

/* Mobile: show hamburger and collapse list */
@media(max-width:720px){
  .nav-toggle{display:block}
  .nav-list{display:none;flex-direction:column;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:10px;border-radius:10px;margin-top:8px}
  .nav-list.open{display:flex}
  .nav-list .nav-link{padding:10px 12px}
}

@media(max-width:920px){
  /* remove the right extension on smaller screens to avoid overflow */
  .brand-banner::after{display:none}
  .brand-banner{padding:14px}
}

/* Full width container for the banner */
.full-banner{display:block}

/* When nav open, animate hamburger into X */
.nav-toggle[aria-expanded="true"] .hamburger{background:transparent}
.nav-toggle[aria-expanded="true"] .hamburger::before{transform:rotate(45deg) translate(4px,4px)}
.nav-toggle[aria-expanded="true"] .hamburger::after{transform:rotate(-45deg) translate(4px,-4px)}

/* Colored hover effects */
.nav-link{
  transition:background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.nav-link:hover,
.nav-link:focus{
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(124,58,237,0.18);
}

.nav-toggle:hover .hamburger,
.nav-toggle:focus .hamburger,
.nav-toggle[aria-expanded="true"] .hamburger{background:var(--accent-2)}

.features li:hover{background:linear-gradient(90deg, rgba(124,58,237,0.06), rgba(6,182,212,0.03));padding:8px;border-radius:10px}

/* Cards grid for main features */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;aspect-ratio:1/1;border-radius:12px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.card-icon{font-size:34px;margin-bottom:12px;display:block}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.4}
.card:hover{transform:translateY(-8px);background:linear-gradient(180deg, rgba(124,58,237,0.06), rgba(6,182,212,0.03));box-shadow:0 18px 40px rgba(124,58,237,0.12)}

@media(max-width:720px){
  .cards{grid-template-columns:1fr}
  .card{aspect-ratio:auto;min-height:120px;padding:14px}
}

.btn:focus,.btn:hover{box-shadow:0 18px 50px rgba(6,182,212,0.14);transform:translateY(-4px)}

/* Accessibility: visible focus ring */
.nav-link:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible {
  outline:3px solid rgba(124,58,237,0.18);
  outline-offset:4px;
}
.note{font-size:13px;color:var(--muted);margin-top:10px}
footer{margin-top:30px;text-align:center;color:var(--muted);font-size:13px}

/* Accent decorative separator */
.brand::after{content:'';flex:1}

@media(max-width:720px){
  .wrap{margin:6vh 18px;padding:24px}
  .logo{width:86px}
  h1{font-size:26px}
  .brand-row{flex-direction:column;align-items:center}
  .brand-card{width:110px;height:110px;min-width:110px;margin-right:0}
  .brand-plate{position:static;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:110px;margin-top:10px;padding-left:16px}
}

@media(max-width:420px){
  .brand{gap:10px}
  .logo{width:72px}
}


/* Boards view for `amelioration.html` */
.boards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.board{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:14px;border-radius:12px;min-height:140px}
.board h3{margin:0 0 10px;font-size:16px;color:var(--accent-1)}
.board-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.board-list li{padding:8px;border-radius:8px;background:rgba(255,255,255,0.01);color:var(--text);font-size:14px}
.board-list li:hover{background:linear-gradient(90deg, rgba(124,58,237,0.04), rgba(6,182,212,0.02));transform:translateY(-2px)}

@media(max-width:920px){
  .boards{grid-template-columns:1fr}
}

/* Styles pour marquer les éléments de la liste du bloc 'Fait' comme barrés (le titre reste intact) */
.board.done .board-list li {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: rgba(255,255,255,0.72);
  opacity: 0.95;
}
.board.done h3 {margin-bottom:8px}