/* Accueil Cylimetrics — complète css/cylimetrics-theme.css */
.home { display: flex; flex-direction: column; gap: 2.2rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 1rem;
  padding: 2.4rem 2.4rem 2.4rem 2.6rem; overflow: hidden;
  border: 1px solid var(--border); border-radius: 28px;
  background:
    radial-gradient(circle at 80% 30%, rgba(47,211,255,.10), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(124,255,61,.08), transparent 50%),
    var(--bg-card);
  box-shadow: var(--shadow-card);
}
.hero::before { /* grille légère */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(90deg, #000, transparent 85%);
}
.hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.08; letter-spacing: .01em; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.6; max-width: 34rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .3rem; }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .5rem; margin-top: .4rem; }
.hero-points li { display: flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; color: var(--text-secondary); background: rgba(10,14,20,.5); }
.hero-visual { position: relative; z-index: 1; }
.hero-visual img { width: 100%; height: auto; display: block; animation: heroFloat 6s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Accès rapide ---------- */
.quick { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.quick a {
  padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card);
  font-size: .85rem; font-weight: 500; color: var(--text-secondary); transition: all .18s;
}
.quick a:hover { color: var(--accent-green); border-color: rgba(124,255,61,.45); transform: translateY(-2px); box-shadow: var(--shadow-glow-green); }

/* ---------- Cartes ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.tile {
  --c: var(--accent-cyan);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .3s;
}
.tile:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 18px 44px color-mix(in srgb, var(--c) 22%, transparent); }
.tile-cyan  { --c: var(--accent-cyan); }
.tile-green { --c: var(--accent-green); }
.tile-amber { --c: var(--accent-amber); }
.tile-pink  { --c: var(--accent-pink); }
.tile-visual {
  position: relative; height: 170px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--c) 24%, transparent), transparent 65%),
    linear-gradient(160deg, #141d30 0%, #0b111d 100%);
}
.tile-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.tile:hover .tile-visual img { transform: scale(1.07); }
.tile-visual::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to top, var(--bg-card), transparent); pointer-events: none; }
.tile-emoji { font-size: 3.2rem; opacity: .5; filter: drop-shadow(0 0 16px var(--c)); }
.tile-visual img + .tile-emoji { display: none; }
.tile-body { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.4rem 1.6rem 1.6rem; flex: 1; }
.tile h2 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: .02em; }
.tile p { color: var(--text-secondary); font-size: .92rem; line-height: 1.6; flex: 1; }
.tile-link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c, var(--accent-amber)); transition: gap .2s; }
.tile-link i { font-style: normal; }
.tile:hover .tile-link, .banner:hover .tile-link { gap: .9rem; }

/* Mini-cartes de l'album */
.album { gap: 1rem; }
.mini {
  --mc: #3b82f6; width: 62px; aspect-ratio: 354 / 551; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--mc); border-radius: 8px; color: var(--mc);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  background: color-mix(in srgb, var(--mc) 9%, transparent); transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.mc-blue { --mc: #3b82f6; transform: rotate(-7deg); }
.mc-pink { --mc: #f472b6; transform: translateY(-8px); }
.mc-yellow { --mc: #facc15; transform: rotate(7deg); }
.tile-pink:hover .mc-blue { transform: rotate(-11deg) translateX(-4px); }
.tile-pink:hover .mc-pink { transform: translateY(-16px); }
.tile-pink:hover .mc-yellow { transform: rotate(11deg) translateX(4px); }

/* ---------- Bandeau podcast ---------- */
.banner {
  display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem 1.6rem;
  background: linear-gradient(135deg, rgba(255,200,87,.07), var(--bg-card) 60%);
  border: 1px solid rgba(255,200,87,.25); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.banner:hover { transform: translateY(-3px); border-color: rgba(255,200,87,.55); box-shadow: 0 14px 36px rgba(255,200,87,.12); }
.banner-icon { font-size: 2rem; }
.banner-text { display: flex; flex-direction: column; gap: .25rem; flex: 1; font-size: .9rem; color: var(--text-secondary); }
.banner-text strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-primary); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.banner .tile-link { color: var(--accent-amber); white-space: nowrap; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 1.6rem 1.3rem; }
  .hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
  .grid-2 { grid-template-columns: 1fr; }
  .banner { flex-wrap: wrap; }
  .banner .tile-link { width: 100%; }
}

/* ---------- Accueil v2 : portes d'entrée, thèmes, parcours débutant ---------- */
.hero-doors { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.door {
  --c: var(--accent-cyan);
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent);
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--text-primary); transition: all .18s;
}
.door small { font-family: var(--font-body, inherit); font-weight: 500; font-size: .72rem; color: var(--text-muted); }
.door:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 8px 24px color-mix(in srgb, var(--c) 25%, transparent); }
.door-cyan { --c: var(--accent-cyan); } .door-green { --c: var(--accent-green); } .door-pink { --c: var(--accent-pink); }

.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; scroll-margin-top: 90px; }
.theme {
  --c: var(--accent-cyan); scroll-margin-top: 90px;
  display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 1.3rem 1.2rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--bg-card)), var(--bg-card) 38%);
  border: 1px solid var(--border); border-top: 3px solid var(--c); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.theme-cyan { --c: var(--accent-cyan); } .theme-green { --c: var(--accent-green); } .theme-pink { --c: var(--accent-pink); }
.theme-head { display: flex; align-items: center; gap: .9rem; }
.theme-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 1.5rem; background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.theme-head h2 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.theme-head p { color: var(--text-secondary); font-size: .85rem; margin-top: .2rem; }
.feat {
  display: flex; align-items: center; gap: .9rem; padding: .95rem 1rem; border-radius: 16px;
  background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); transition: all .2s;
}
.feat-icon { font-size: 1.6rem; }
.feat div { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.feat strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-primary); }
.feat small { color: var(--text-secondary); font-size: .8rem; }
.feat i { font-style: normal; color: var(--c); font-weight: 700; transition: transform .2s; }
.feat:hover { border-color: var(--c); box-shadow: 0 10px 28px color-mix(in srgb, var(--c) 22%, transparent); transform: translateY(-2px); }
.feat:hover i { transform: translateX(4px); }
.theme-list { list-style: none; display: flex; flex-direction: column; gap: .15rem; }
.theme-list a { display: flex; align-items: center; gap: .8rem; padding: .6rem .6rem; border-radius: 12px; transition: background .15s; }
.theme-list a:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.li-icon { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; font-size: 1.05rem; background: rgba(255,255,255,.04); border: 1px solid var(--border-soft); }
.theme-list div { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.theme-list b { font-size: .92rem; font-weight: 600; color: var(--text-primary); }
.theme-list small { color: var(--text-muted); font-size: .76rem; }
.theme-list a:hover b { color: var(--c); }

.start { display: flex; flex-direction: column; gap: 1.1rem; scroll-margin-top: 90px; }
.section-head { display: flex; flex-direction: column; gap: .25rem; }
.section-head .kicker { font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-cyan); }
.section-head h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; }
.tile h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; }
.start .tile-visual { height: 130px; }

@media (max-width: 1000px) { .themes { grid-template-columns: 1fr; } }