/* ==========================================================
   Charte graphique — Les cours de l'ours
   Toutes les couleurs du site sont ici. Pour changer une couleur
   partout à la fois (sur le chapeau et sur chaque cours), il suffit
   de modifier sa valeur dans ce bloc :root.
   ========================================================== */
:root{
  --papier:#e9eef6;
  --carte:#ffffff;
  --encre:#12203a;
  --encre-doux:#5a6a85;

  /* couleur du cours "Atelier souris et clavier" */
  --souris:#1f5fd0;
  --souris-clair:#d9e5fb;
  --clavier:#e08a00;
  --clavier-clair:#fdeccd;

  /* couleur du cours "Découvrir l'ordinateur" */
  --ordi:#7a3fc7;
  --ordi-clair:#eadffb;

  /* couleurs communes (retours de réponse, valables pour tous les cours) */
  --vert:#17915f;
  --vert-clair:#d6f0e4;
  --rouge:#cf3535;
  --rouge-clair:#fadddd;

  --trait:3px solid var(--encre);
  --rayon:14px;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:system-ui,"Segoe UI",Avenir,"Trebuchet MS",sans-serif;
  font-size:clamp(16px, .6vw + 15px, 19px);line-height:1.5;
}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.01em}
img{display:block}
a{color:inherit;text-decoration:none}

/* ---------- en-tête, commun à toutes les pages ---------- */
header{display:flex;align-items:center;gap:16px;padding:14px 22px;
  background:var(--carte);border-bottom:var(--trait);flex-wrap:wrap}
.marque{font-size:22px;font-weight:800;margin-right:auto;display:flex;align-items:center;gap:10px}
.marque span{color:#fff;background:var(--encre);padding:2px 8px;border-radius:8px}
.bouton{background:var(--carte);border:var(--trait);border-radius:10px;padding:9px 16px;
  font-weight:700;cursor:pointer;box-shadow:3px 3px 0 var(--encre);
  transition:transform .06s,box-shadow .06s;display:inline-block}
.bouton:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--encre)}
.bouton:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--encre)}
.bouton.principal{background:var(--vert);color:#fff}
.bouton.discret{box-shadow:none;border-width:2px}

main{max-width:min(1080px, 94vw);margin:0 auto;padding:clamp(18px,3vw,34px) clamp(12px,3vw,22px) 70px}

/* ---------- intro de page ---------- */
.intro{max-width:60ch;margin-bottom:30px}
.intro h1{font-size:40px;margin-bottom:10px}
.intro p{margin:0;color:var(--encre-doux);font-size:19px}

/* ---------- grille de cartes "cours" (page d'accueil) ---------- */
.cours-grille{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:26px}
.cours-carte{border:var(--trait);border-radius:var(--rayon);background:var(--carte);
  padding:0 0 22px;text-align:left;overflow:hidden;display:block;
  box-shadow:8px 8px 0 var(--encre);transition:transform .08s,box-shadow .08s}
.cours-carte:hover{transform:translate(2px,2px);box-shadow:6px 6px 0 var(--encre)}
.cours-carte:active{transform:translate(8px,8px);box-shadow:0 0 0 var(--encre)}
.cours-carte .image{padding:22px 18px;border-bottom:var(--trait);display:grid;place-items:center;min-height:150px}
.cours-carte .image img{width:auto;height:110px}
.cours-carte .texte{padding:18px 22px 0}
.cours-carte h2{font-size:26px;margin-bottom:6px}
.cours-carte p{margin:0;color:var(--encre-doux)}
.cours-carte .compte{margin-top:14px;font-weight:700;font-size:15px}
.cours-carte.bientot{opacity:.55;cursor:default;pointer-events:none}