/* ====== Base ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.5;
  color: #111;
}

/* ====== 1) Blocs : largeur 600px, titres centrés, p avec bordure,
         blocs alignés à 250px du bord gauche ====== */
#paragraphe1, #paragraphe2, #paragraphe3 {
    width: 600px;
    margin-left: 250px;    /* espace laissé pour le menu à gauche */
    margin-right: 40px;    /* petite marge à droite */
    margin-bottom: 32px;
    position: relative;  /* contexte pour le p en position absolue (étape 3) */
}

#paragraphe1 h2, #paragraphe2 h2, #paragraphe3 h2 {
  margin: 0 0 10px 0;
  text-align: center;   /* titres centrés */
  font-size: 22px;
}

#paragraphe1 p, #paragraphe2 p, #paragraphe3 p {
  border: 2px solid #ccc;   /* bordure par défaut */
  padding: 12px;
  background: #fff;
}

/* ====== 2) Menu fixe à gauche + couleurs synchronisées ====== */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;   /* fixé dans l’espace libre à gauche */
  top: 20px;
  left: 20px;
  width: 190px;
}
ul li { margin: 0 0 8px 0; }
ul a {
  display: block;
  text-decoration: none;
  background: #f2f3f5;
  padding: 10px 12px;
  border-radius: 8px;
  color: #111;
}
ul a:hover { background: #e6e7eb; }

/* Palette pour les 3 items + synchronisation avec titre et bordure du p */
ul li:nth-child(1) a { background: #ffe4ea; color: #b91c1c; }
#paragraphe1 h2 { color: #b91c1c; }
#paragraphe1 p  { border-color: #b91c1c; }

ul li:nth-child(2) a { background: #e9fbe8; color: #047857; }
#paragraphe2 h2 { color: #047857; }
#paragraphe2 p  { border-color: #047857; }

ul li:nth-child(3) a { background: #e7efff; color: #1d4ed8; }
#paragraphe3 h2 { color: #1d4ed8; }
#paragraphe3 p  { border-color: #1d4ed8; }

/* ====== 3) Afficher tous les paragraphes dans le flux (scroll OK) ====== */
#paragraphe1 p, #paragraphe2 p, #paragraphe3 p {
  position: static;   /* redevient dans le flux */
  display: block;     /* tous visibles */
}

/* On utilise :target seulement pour mettre en évidence la section active */
#paragraphe1:target h2,
#paragraphe2:target h2,
#paragraphe3:target h2 { text-decoration: underline; }

#paragraphe1:target p  { border-color: #b91c1c; }
#paragraphe2:target p  { border-color: #047857; }
#paragraphe3:target p  { border-color: #1d4ed8; }

/* Petit confort : indiquer l’item actif du menu quand une section est ciblée */
#paragraphe1:target ~ ul li:nth-child(1) a,
#paragraphe2:target ~ ul li:nth-child(2) a,
#paragraphe3:target ~ ul li:nth-child(3) a {
  outline: 2px solid currentColor;
}

/* Fallback : si aucune ancre n’est dans l’URL, afficher le premier paragraphe */
body:not(:target) #paragraphe1 p { position: static; display: block; }