/* ============================================================
   DESIGN SYSTEM GLOBAL — animons.fr FamilyWall Style
   Palette moderne, réutilisable, thématique par page
   ============================================================ */

:root{
  /* ========== Couleurs Primaires ========== */
  --primary:#4a90e2;
  --primary-light:#6ba3ed;
  --primary-dark:#2e5c9f;
  --secondary:#7b68ee;

  /* ========== Accents ========== */
  --accent-teal:#00bcd4;
  --accent-coral:#ff6b6b;
  --accent-green:#52c41a;
  --accent-orange:#ff9c6e;
  --accent-purple:#b37feb;
  --accent-pink:#ff85c0;
  --accent-yellow:#ffc53d;

  /* ========== Neutres ========== */
  --bg-light:#f8f9fb;
  --bg-card:#ffffff;
  --text-dark:#1a1a2e;
  --text-muted:#666666;
  --text-light:#999999;
  --border-light:#e8eef7;

  /* ========== Shadows ========== */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.15);

  /* ========== Gradients de Fond (par page) ========== */
  --bg-gradient:linear-gradient(135deg, #f0f5fb 0%, #f8f9fb 50%, #f5f0fb 100%);
}

/* ========== Reset & Base ========== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

body{
  font-family:'Nunito',system-ui,sans-serif;
  background:var(--bg-gradient);
  color:var(--text-dark);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ========== Typography ========== */
h1{
  font-size:clamp(24px,6vw,44px);
  font-weight:900;
  color:var(--text-dark);
  line-height:1.1;
  letter-spacing:-.5px;
}

h2{
  font-size:18px;
  font-weight:800;
  color:var(--text-dark);
  letter-spacing:-.3px;
}

h3{
  font-size:14px;
  font-weight:700;
  color:var(--text-dark);
}

p, span{
  color:var(--text-dark);
}

/* ========== Contraste & Lisibilité (WCAG AA minimum 4.5:1) ========== */
.text-muted{color:var(--text-muted);}
.text-light{color:var(--text-light);}

/* Texture pâle sur fond clair = texte foncé */
button, .btn, .chip, .filter-chip{
  color:inherit;
  font-weight:700;
}

/* Sur fond sombre: texte clair obligatoire */
[style*="background:var(--night)"],
[style*="background: var(--night)"],
[class*="night"]{
  color:#fff;
}

/* Inputs doivent avoir bon contraste */
input, textarea, select{
  color:var(--text-dark);
  background:var(--bg-card);
  border:2px solid var(--border-light);
}
input:focus, textarea:focus, select:focus{
  border-color:var(--primary);
  outline:none;
}

/* ========== Header ========== */
header{
  text-align:center;
  padding:28px 20px;
  margin:20px 12px 28px;
}

.header-wrapper{
  background:var(--bg-card);
  border-radius:24px;
  padding:28px 20px;
  box-shadow:var(--shadow-sm);
}

.brand{
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--primary);
  text-transform:uppercase;
  margin-bottom:8px;
}

.tagline{
  font-weight:700;
  letter-spacing:.12em;
  font-size:clamp(11px,2vw,14px);
  color:var(--text-muted);
  text-transform:uppercase;
  margin-top:8px;
}

.back-btn{
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  color:rgba(0,0,0,0.6);
  border:2px solid var(--border-light);
  padding:.5em 1em;
  border-radius:999px;
  transition:.15s;
  display:inline-block;
}

.back-btn:hover{
  color:var(--primary);
  border-color:var(--primary);
}

/* ========== Navigation ========== */
.nav-left{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.btn-accueil{
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  color:var(--text-dark);
  background:var(--primary);
  border:2px solid var(--primary);
  padding:.5em 1.1em;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:.15s;
}

.btn-accueil:hover{
  background:var(--primary-light);
  border-color:var(--primary-light);
}

/* ========== Cards & Containers ========== */
.card, .tile, .slot{
  background:var(--bg-card);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border-light);
  transition:.25s cubic-bezier(0.4,0,0.2,1);
}

.card:active, .tile:active, .slot:active{
  transform:scale(.98);
  box-shadow:var(--shadow-md);
}

/* ========== Buttons ========== */
.btn{
  font-family:'Nunito';
  font-weight:700;
  font-size:13px;
  padding:.6em 1.2em;
  border-radius:10px;
  border:none;
  cursor:pointer;
  transition:.15s;
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.btn:active{
  transform:scale(.95);
}

.btn-primary{
  background:var(--primary);
  color:white;
}

.btn-primary:hover{
  background:var(--primary-light);
}

.btn-secondary{
  background:var(--border-light);
  color:var(--text-dark);
}

.btn-secondary:hover{
  background:#d4dce9;
}

.btn-success{
  background:var(--accent-green);
  color:white;
}

.btn-success:hover{
  background:#45a815;
}

/* ========== Chips/Filters ========== */
.filter-chip{
  font-family:'Nunito';
  font-weight:700;
  font-size:13px;
  padding:8px 16px;
  border-radius:20px;
  cursor:pointer;
  border:2px solid var(--border-light);
  background:var(--bg-card);
  color:var(--text-muted);
  transition:.2s ease;
  white-space:nowrap;
  flex-shrink:0;
}

.filter-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:white;
  box-shadow:var(--shadow-sm);
}

.filter-chip:active{
  transform:scale(.96);
}

/* ========== Grid & Layout ========== */
.wrap{
  max-width:560px;
  margin:0 auto;
  width:100%;
  padding:0 12px 60px;
}

.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  width:100%;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}

.row-scroll{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 0;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}

/* ========== Empty State ========== */
.empty{
  text-align:center;
  padding:40px 20px;
  background:var(--bg-card);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
}

.empty-icon{
  font-size:48px;
  margin-bottom:12px;
}

.empty-text{
  font-size:14px;
  font-weight:600;
  color:var(--text-muted);
  line-height:1.6;
}

/* ========== Footer ========== */
footer{
  text-align:center;
  padding:24px 16px;
  font-weight:600;
  font-size:12px;
  color:var(--text-light);
  margin-top:auto;
}

/* ========== Responsive ========== */
@media (min-width:640px){
  body{padding:0;}
  header{margin:28px auto;max-width:600px;}
  .wrap{padding:0 16px 80px;}
  .tiles{gap:18px;}
}

@media (min-width:900px){
  .tiles{gap:20px;}
}