/* 
  Reset du box model.

  Par défaut, width/height ne comptent que le content.
  Avec border-box, width/height incluent aussi padding + border.

  On l'applique aussi à ::before et ::after pour éviter les surprises
  si on utilise des pseudo-éléments plus tard.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 
  Style global de la page.

  margin: 0;
  Supprime la marge par défaut du navigateur autour du body.

  min-height: 100vh;
  Le body prend au minimum toute la hauteur visible de l'écran.
  C'est utile pour une page complète.

  Ici, on ne met pas de padding sur body parce que la marge horizontale
  mobile est déjà gérée par le container avec width: min(100% - 2rem, 430px).
*/
body {
  margin: 0;
  font-family: sans-serif;
  background-color: #f0f0f0;
  min-height: 100vh;
}

/* 
  Titre principal.

  margin-top: 0;
  Le h1 a une marge par défaut dans le navigateur.
  Comme .todo-container a déjà du padding, on supprime la marge du haut
  pour mieux contrôler l'espace intérieur de la carte.
*/
h1 {
  text-align: center;
  margin-top: 0;
}

/* 
  Container principal de la todo list.

  Ici, c'est du layout global, donc on utilise surtout rem.

  width: min(100% - 2rem, 430px);
  - Sur petit écran : le container prend presque toute la largeur,
    mais garde 1rem à gauche et 1rem à droite.
  - Sur grand écran : il ne dépasse jamais 430px.

  Pourquoi 2rem ?
  Parce que 2rem = 1rem à gauche + 1rem à droite.

  margin: 5rem auto;
  - 5rem crée un espace vertical stable depuis le haut de la page.
  - auto centre le container horizontalement.
  Ici rem est bien, car c'est un espacement global de layout.

  padding: 1rem 2rem;
  Padding interne du container principal.
  Ici rem est acceptable car la carte est une structure globale de page.
  On veut un espacement stable, pas forcément dépendant de la taille du texte.

  border-radius: 10px;
  px est souvent utilisé pour les détails visuels fixes comme les arrondis.
*/
.todo-container {
  width: min(100% - 2rem, 430px);
  margin: 5rem auto;
  padding: 1rem 2rem;
  background-color: #fff;
  border-radius: 10px;
}

/* 
  Liste principale.

  list-style-type: none;
  On enlève les puces de la liste principale car chaque item est déjà
  présenté comme une carte.

  margin: 0;
  padding: 0;
  On supprime les marges/paddings par défaut du navigateur pour contrôler
  nous-mêmes l'espacement.

  font-size: 1.1rem;
  Ici rem est bien car on définit une taille de texte stable à partir
  de la taille globale du document.
*/
.todo-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
}

/* 
  Chaque tâche de la liste.

  margin-top: 1rem;
  Espace entre les items.
  Ici rem est logique car c'est un espacement de layout entre blocs.

  padding: 1em;
  Ici on utilise em car le padding est lié au contenu textuel de l'item.
  Si la taille du texte de l'item augmente, l'espace intérieur augmente aussi.
  Le composant garde donc de bonnes proportions.

  C'est exactement le pattern :
  - margin externe entre blocs : rem
  - padding interne du composant : em
*/
.item {
  margin-top: 1rem;
  padding: 1em;
  background-color: #e5f1e5;
  border-radius: 10px;
}

/* 
  Label de la checkbox.

  cursor: pointer;
  Quand l'utilisateur survole le texte, le curseur indique qu'il peut cliquer.
  Comme le label est relié à l'input avec for/id, cliquer sur le texte
  active ou désactive la checkbox.
*/
label {
  cursor: pointer;
}

/* 
  Sous-liste dans chaque item.

  margin: 0;
  On enlève la marge par défaut du ul pour mieux contrôler l'espacement.

  padding-left: 2em;
  Ici em est logique car l'indentation de la sous-liste dépend
  naturellement de la taille du texte.
  Si le texte devient plus grand, l'indentation grandit avec lui.

  list-style-type: square;
  On garde une puce carrée pour montrer que c'est une sous-information.
*/
.sub-item {
  margin: 0;
  padding-left: 2em;
  list-style-type: square;
}

/* 
  Lien dans la sous-liste.

  display: inline-block;
  Permet d'appliquer margin-top correctement.
  Un élément inline pur ne réagit pas toujours comme on veut avec les marges verticales.

  margin-top: 0.75em;
  Ici em est logique car cet espace est directement lié au lien.
  Si le texte du lien devient plus grand, l'espace autour du lien suit.

  text-decoration: none;
  Requirement freeCodeCamp : les liens ne doivent pas avoir de décoration.
*/
.sub-item-link {
  display: inline-block;
  margin-top: 0.75em;
  text-decoration: none;
}

/* 
  Lien non visité.

  :link cible seulement les liens que l'utilisateur n'a pas encore visités.
*/
.sub-item-link:link {
  color: blue;
}

/* 
  Lien déjà visité.

  :visited permet de donner une couleur différente aux liens déjà ouverts.
*/
.sub-item-link:visited {
  color: purple;
}

/* 
  État au survol de la souris.

  :hover s'active quand l'utilisateur passe la souris sur le lien.
*/
.sub-item-link:hover {
  color: red;
}

/* 
  État de focus clavier.

  :focus-visible est préférable à :focus pour l'accessibilité moderne.
  Il apparaît surtout quand l'utilisateur navigue au clavier avec Tab.

  outline: 2px solid blue;
  On affiche un contour visible autour du lien.

  outline-offset: 3px;
  On éloigne le contour du lien pour qu'il soit plus lisible.
  L'outline ne prend pas de place dans le layout, donc la page ne bouge pas.

  Ici px est logique car c'est un détail visuel précis et fixe.
*/
.sub-item-link:focus-visible {
  outline: 2px solid blue;
  outline-offset: 3px;
}

/* 
  État actif.

  :active s'active au moment du clic, pendant que le bouton de la souris
  est enfoncé ou que l'action est déclenchée.
*/
.sub-item-link:active {
  color: green;
}