:root{
  --accent:#00c6d9;
  --text:#f5f5f5;
  --muted:#a9b0b6;

  --card-bg: rgba(18,19,21,.55); /* plus opaque */
  --stroke: 1px solid rgba(255,255,255,.10);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* RESET & TYPO */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
  color:var(--text);
  background:none;
  position:relative;
  min-height:100vh;
}

/* FOND flouté + voile sombre */
body::before{
  content:""; position:fixed; inset:0;
  background:url("./fond.png") center/cover no-repeat;
  filter:blur(6px);
  transform:scale(1.06);
  z-index:-2;
}
body::after{
  content:""; position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  z-index:-1;
}

/* HEADER */
header{
  position:fixed; inset:0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:rgba(12,13,14,.32);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: var(--stroke);
  z-index:1002;
}

/* Logo */
header .logo{
  display:flex; align-items:center; text-decoration:none;
  transition: transform .25s ease;
}
header .logo img{
  height:80px;
  width:auto;
  max-width:400px;
  display:block;
  filter: invert(1);
}

/* Quand drawer ouvert → pousse logo & menu */
.drawer-open header .logo{ transform: translateX(250px); }
#menu-btn{ transition: transform .25s ease; }
.drawer-open #menu-btn{ transform: translateX(250px); }

/* Boutons header */
#menu-btn{
  border:0; background:transparent; color:var(--accent); cursor:pointer;
  padding:8px 10px; border-radius:10px; font-size:16px;
}
#back-btn{
  margin-left:auto;
  border:0; background:transparent; color:var(--accent); cursor:pointer;
  padding:8px 10px; border-radius:10px; font-size:16px; display:none;
}

/* DRAWER & OVERLAY */
#drawer{
  position:fixed; top:0; left:-260px; width:250px; height:100%;
  background:rgba(15,16,18,.36);
  padding:16px; transition:left .25s ease;
  z-index:1100; backdrop-filter: blur(18px) saturate(140%);
  border-right: var(--stroke);
}
#drawer.active{ left:0 }
#overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:.25s; z-index:1000
}
#overlay.active{ opacity:1; visibility:visible }

/* NAV */
nav ul{list-style:none; padding:0; margin:0}
nav a{
  display:block; padding:10px 10px; border-radius:10px;
  color:var(--text); text-decoration:none;
}
nav a:hover{ background:rgba(255,255,255,.06) }
nav a.active{ background:var(--accent); color:#022428; font-weight:600 }

/* LAYOUT & SECTIONS */
main{ padding:108px 18px 28px; max-width:1240px; margin:auto }
.section{ display:none }
.section.active{ display:block; animation:fade .22s ease }
@keyframes fade{ from{opacity:0; transform:translateY(2px)} to{opacity:1; transform:none} }

/* CARTES glass */
.card{
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  border: var(--stroke);
  backdrop-filter: blur(14px) saturate(160%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:20px;
}

/* contenu au-dessus */
.card > *{
  position: relative;
  z-index: 1;
}

/* couche dégradé inversé : centre opaque, bords plus transparents */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index: 0;

  background: radial-gradient(circle at center,
              rgba(18,19,21,0.75) 0%,
              rgba(18,19,21,0.35) 100%);

  box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
}

.card h2{margin:0 0 8px; font-size:20px; font-weight:700; letter-spacing:.2px}
.muted{color:var(--muted); font-size:14.5px}

/* GRID Accueil */
.cards-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
}
.cards-grid > .card:nth-child(1){ grid-column: span 6; grid-row: span 2; }
.cards-grid > .card:nth-child(2){ grid-column: span 6; grid-row: span 1; }
.cards-grid > .card:nth-child(3){ grid-column: span 4; grid-row: span 1; }
.cards-grid > .card:nth-child(4){ grid-column: span 8; grid-row: span 1; }

/* Tablette */
@media (max-width: 992px){
  .cards-grid{ grid-template-columns: repeat(6,1fr); }
  .cards-grid > .card:nth-child(1){ grid-column: span 6; grid-row: span 2; }
  .cards-grid > .card:nth-child(2){ grid-column: span 6; }
  .cards-grid > .card:nth-child(3){ grid-column: span 3; }
  .cards-grid > .card:nth-child(4){ grid-column: span 3; }
}
/* Mobile */
@media (max-width: 640px){
  .cards-grid{ grid-template-columns: repeat(4,1fr); }
  .cards-grid > .card{ grid-column: span 4 !important; grid-row:auto !important; }
}

/* utilitaires accueil */
.list{margin:0; padding-left:18px}
.thumbs{display:flex; gap:8px; margin:6px 0 10px}
.thumb{
  flex:1 1 0; aspect-ratio:4/3; border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: var(--stroke);
  backdrop-filter: blur(6px);
}
.actions{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.quote{margin:0 0 6px; font-style:italic}
.quote cite{display:block; margin-top:6px; color:var(--muted); font-style:normal; font-size:14px}

/* FORM & ROWS */
.row{ display:flex; gap:10px; flex-wrap:wrap }
.row>*{ flex:1 1 220px }

input,select,button{ font:inherit; color:inherit }
input,select{
  width:100%; padding:12px 12px; border-radius:10px;
  border: var(--stroke); background:rgba(10,10,10,.30);
  backdrop-filter: blur(10px);
}
input::file-selector-button{
  margin-right:8px; border: var(--stroke);
  background:rgba(255,255,255,.06); color:var(--text);
  padding:8px 10px; border-radius:8px; cursor:pointer;
}
input:focus,select:focus{ outline:2px solid rgba(0,198,217,.35); outline-offset:2px }

/* Boutons (pas de dégradé flou) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:10px; border: var(--stroke);
  background:rgba(255,255,255,.06); color:var(--text);
  text-decoration:none; cursor:pointer;
  position:relative; z-index:2;
}
.btn.primary{ background:var(--accent); color:#022428; border:0; font-weight:700 }
.btn:hover{ filter:brightness(1.05) }

/* GRID générique 3 colonnes */
.gallery3{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Placeholders gris */
.placeholder{
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: var(--stroke);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow);
}

/* FOOTER */
footer{
  text-align:center; padding:24px; color:#cfd3d6;
  background:rgba(12,13,14,.28); backdrop-filter: blur(8px);
  border-top: var(--stroke);
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}