/* ============ Thème sombre (unique) ============ */
:root{
  --bg: #0f1115;
  --bg-elev: #151922;
  --card: #171b25;
  --card-2: #1d2230;
  --text: #e8ecf3;
  --muted: #aeb7c6;
  --accent: #4da3ff;
  --accent-2: #7cffb2;
  --tile-notes: linear-gradient(135deg, #4da3ff 0%, #7fb7ff 100%);
  --tile-planning: linear-gradient(135deg, #7cffb2 0%, #52e1a0 100%);
  --tile-spotify: linear-gradient(135deg, #1db954 0%, #25d46a 100%);
  --shadow-1: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-2: 0 16px 40px rgba(0,0,0,0.45);

  --radius-xl: 24px;
  --radius-2xl: 28px;
  --gap: 22px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  user-select: none; /* Kiosk: pas de sélection texte */
  transition: background .25s ease, color .25s ease;
  overflow-x: hidden;
  overscroll-behavior: none;
}

/* ============ Splash / Loading ============ */
.splash{
  position: fixed; inset: 0;
  background: var(--bg);
  display: grid;
  place-items: center;
  z-index: 1000;
  transition: opacity .5s ease, visibility .5s ease;
}

.splash-title{
  margin: 0;
  font-weight: 900;
  font-size: clamp(36px, 8vw, 96px);
  line-height: 1.05;
  background: linear-gradient(180deg, #ffffff 0%, #dfe9ff 35%, #7fb7ff 65%, #4da3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 22px rgba(77,163,255,.22));
  transform: translateY(40px);
  opacity: .95;
  transition: transform .9s cubic-bezier(.22,.9,.27,1), opacity .9s ease;
}

.splash-title.rise{
  transform: translateY(-40px);
  opacity: 1;
}

.splash.fade-out{
  opacity: 0;
  visibility: hidden;
}

/* ============ En-tête (titre final) ============ */
.top{
  position: relative;
  padding: clamp(16px, 3vw, 28px) clamp(16px, 3vw, 28px) 8px;
}

.brand-title{
  margin: 0;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: clamp(28px, 5.2vw, 64px);
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 0%, #dfe9ff 35%, #7fb7ff 65%, #4da3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(77,163,255,.22));
  opacity: 0;
  transform: translateY(22px);
  transition: transform .6s cubic-bezier(.22,.9,.27,1), opacity .6s ease;
}

.brand-title.in{
  opacity: 1;
  transform: translateY(0);
}

/* ============ Layout principal ============ */
.hub{
  max-width: 1440px; /* confortable pour 15" paysage */
  margin: 0 auto;
  padding: clamp(10px, 2.4vw, 28px);
}

.tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
  align-items: stretch;
  margin-top: clamp(10px, 1.6vw, 18px);
}

/* ============ Tuiles ============ */
.tile{
  position: relative;
  display: block;
  min-height: 180px;
  border-radius: var(--radius-2xl);
  background: var(--card);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  outline: none;

  /* État initial (invisible) pour l'animation d'apparition */
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease, box-shadow .18s ease, background .2s ease;
}

.tile.reveal{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.tile:focus-visible{
  box-shadow: 0 0 0 3px rgba(77,163,255,.6), var(--shadow-2);
  transform: translateY(-2px);
}

.tile:active{
  transform: scale(.98);
}

/* Fond d'accent doux */
.tile-notes::before,
.tile-planning::before,
.tile-spotify::before{
  content:"";
  position:absolute; inset:0;
  opacity:.10;
  pointer-events:none;
}

.tile-notes::before{ background: var(--tile-notes); }
.tile-planning::before{ background: var(--tile-planning); }
.tile-spotify::before{ background: var(--tile-spotify); }

/* Corps de tuile (icône + titre) */
.tile-body{
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 14px;
  padding: clamp(18px, 2vw, 28px);
  height: 100%;
}

/* Icône */
.tile-icon{
  width: clamp(84px, 9vw, 110px);
  height: clamp(84px, 9vw, 110px);
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 18px rgba(0,0,0,.35);
}

.tile-icon svg{
  width: 56%;
  height: 56%;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Titre */
.tile-text h2{
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: .2px;
  text-align: center;
  color: var(--text);
}

/* Hover (desktop) */
@media (hover:hover){
  .tile:hover{ box-shadow: var(--shadow-2); transform: translateY(-4px); }
}

/* Accents d’icône par tuile */
.tile-notes .tile-icon{ background: linear-gradient(180deg, rgba(77,163,255,.18), rgba(77,163,255,.06)); }
.tile-planning .tile-icon{ background: linear-gradient(180deg, rgba(124,255,178,.18), rgba(124,255,178,.06)); }
.tile-spotify .tile-icon{ background: linear-gradient(180deg, rgba(29,185,84,.18), rgba(29,185,84,.06)); }

/* ============ Responsivité ============ */
@media (max-width: 720px){
  .tiles{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* Safe areas */
@supports (padding: max(0px)) {
  .top{ padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .hub{ padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

.spotify-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 80px;     /* bouton plus grand */
  height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 100;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.spotify-btn img {
  width: 100%;    /* l’image prend tout l’espace */
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.spotify-btn:active {
  transform: scale(.95);
  filter: brightness(.95);
}

/* Bouton Home fixé en haut-gauche de la page */
.home-btn{
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  z-index: 1000;
}

/* Optionnel : laisse un peu d’air sous le bouton pour éviter tout recouvrement
   (si besoin seulement) */
/*
.page{ padding-top: clamp(12px, 2.2vw, 28px); }
*/

.title {
  margin: 0; text-align: center; font-weight: 800; letter-spacing: .3px;
  font-size: clamp(28px, 4.2vw, 56px);
  background: linear-gradient(180deg,#fff 0%,#dfe9ff 35%,#7fb7ff 65%,#4da3ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(77,163,255,.18));
}