/* === Style global sobre et premium pour la page d’accueil (index) === */
:root{
  --ink: #111111;       /* texte principal */
  --muted: #6b6b6b;     /* texte secondaire */
  --bg: #f4f4f6;        /* fond général doux */
  --paper: #ffffff;     /* cartes */
  --border: #e5e5e5;    /* bordures */
  --accent: #3a3a3c;    /* liens */
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,0.06);
}

*{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
}

body{
  font-family: "Manrope", sans-serif;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  padding:40px 20px;
}

/* Header */
header, footer{
  text-align:center;
}

h1{
  margin:6px 0 8px;
  font-size:2rem;
  font-weight:600;
}

header p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:0.95rem;
}

h2{
  margin:18px 0 12px;
  font-size:1.2rem;
  color:var(--ink);
  font-weight:500;
}

/* Main container */
main{
  width:min(90%, 760px);
  margin:0 auto;
}

/* Cartes d’exercices */
.exercice{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow);
  margin:14px auto;
  transition:background 0.25s ease, 
             box-shadow 0.25s ease, 
             transform 0.2s ease;
}

.exercice:hover{
  background:#fafafa;
  box-shadow:0 12px 28px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}

/* Liens classe et sans soulignement */
a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
  transition:color 0.2s ease, transform 0.2s ease;
}

a:hover{
  color:#111111;
  transform:translateX(3px);
}

/* Footer */
footer{
  margin-top:30px;
  color:var(--muted);
  text-align:center;
  font-size:0.85rem;
}
/* Bouton retour (utilisé sur STIC, etc.) */
.back {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.back:hover {
  background: #f3f4f6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}