@charset "utf-8";
/* 
Déclare que le fichier est en UTF-8 
→ permet d'utiliser sans problème les accents dans le CSS 
*/

:root {
    --maxw: 60em;     /* Largeur max du contenu : 60em ≈ 960px si 1em = 16px */
    --accent: #ff6600;/* Couleur d'accentuation (ici orange vif) → utilisée pour summary */
    --muted: #666;    /* Couleur de texte atténuée (gris moyen) */
}

body {
    font-family: Arial, Helvetica, sans-serif; /* Police principale */
    line-height: 1.6;        /* Hauteur de ligne → lisibilité accrue */
    margin: 0;               /* Supprime les marges par défaut du navigateur */
    color: #000;             /* Texte en noir pur */
    background: #fff;        /* Fond blanc */
    font-size: 1em;          /* Taille de base du texte (1em = 16px par défaut) */
}

.wrap {
    max-width: var(--maxw);  /* Largeur max définie ci-dessus : 60em */
    margin: 0 auto;          /* Centre horizontalement le bloc */
    padding: 1.25em;         /* Ajoute de l’espace intérieur autour du contenu */
}

header h1 {
    font-size: 2em;          /* Titre principal 2x la taille de base (~32px) */
    margin: 0 0 0.5em 0;     /* Espace en dessous du titre */
    text-align: left;        /* Alignement à gauche du H1 */
}

p.lead {
    margin: 0 0 1em 0;       /* Espace après le paragraphe d’introduction */
    text-align: left;        /* Texte aligné à gauche */
}

h2 {
    font-size: 1.5em;        /* Taille des sous-titres (~24px) */
    margin: 1em 0 0.5em 0;   /* Espace autour du H2 (haut et bas) */
    text-align: left;        /* Alignement à gauche pour garder la lisibilité */
}

.grid {
  display: grid;
  grid-template-columns: 1fr; /* par défaut, une seule colonne (mobile) */
  gap: 1em;                   /* espace entre les cartes */
  max-width: 100%;             /* ne dépasse jamais l'écran */
  box-sizing: border-box;      /* inclut padding/border dans la largeur */
}

@media (min-width: 40em) {   /* dès 640px environ */
  .grid {
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
  }
}

article.card {
  width: 100%;                 /* pour chaque carte */
  box-sizing: border-box;      /* inclut padding/border dans la largeur */
}


figure {
    margin: 0 0 0.5em 0;         /* Enlève marges par défaut + espace en dessous */
}

img {
    display: block;              /* Supprime l’espace blanc sous les images */
    width: 100%;                 /* Image occupe toute la largeur dispo */
    height: auto;                /* Garde les proportions */
    border-radius: 0.4em;        /* Coins légèrement arrondis */
}

figcaption {
    font-size: 0.9em;            /* Légende un peu plus petite */
    color: var(--muted);         /* Texte gris défini en haut */
    margin-top: 0.4em;           /* Petit espace au-dessus de la légende */
}

.charade-title {
    font-weight: bold;           /* Met en gras */
    margin: 0.5em 0 0.25em 0;    /* Espaces autour du titre */
    font-size: 1.05em;           /* Légèrement plus gros que le texte normal */
}

.enum {
    margin: 0 0 0.5em 0;         /* Espace en bas */
    padding-left: 1em;           /* Décale le texte vers la droite (indentation) */
}

details {
    background: #fff;            /* Fond blanc */
    padding: 0.5em;              /* Espace intérieur */
    border-left: 0.2em solid #ddd; /* Barre verticale grise à gauche */
    border-radius: 0.4em;        /* Coins arrondis */
}

summary {
    cursor: pointer;             /* Curseur "main" au survol */
    font-weight: 600;            /* Presque gras */
    color: var(--accent);        /* Couleur d’accent (orange vif) */
}

.links {
    margin-top: 0.5em;           /* Espace au-dessus de la zone de liens */
}

.links a {
    display: inline-block;       /* Les liens se comportent comme des blocs en ligne */
    margin-right: 0.5em;         /* Espacement horizontal entre les liens */
    color: #cc0000;              /* Liens en rouge foncé */
    text-decoration: none;       /* Supprime le soulignement */
    font-size: 0.95em;           /* Légèrement plus petit que le texte courant */
}

.links a:hover {
    text-decoration: underline;  /* Souligné uniquement au survol */
}

footer {
    margin-top: 1.5em;           /* Grand espace au-dessus du footer */
    font-size: 0.9em;            /* Texte un peu réduit */
    color: var(--muted);         /* Gris moyen */
    text-align: left;            /* Aligné à gauche */
}


.nav-pages p {
  margin-bottom: 0.5em;
  font-weight: 500;
}

/* Style général des liens */
.nav-pages nav {
  display: flex;
  flex-wrap: wrap;        /* pour éviter le débordement */
  gap: 0.8em;             /* espace entre les liens */
}

.nav-pages nav a {
  text-decoration: none;
  color: #0066cc;
  padding: 0.3em 0.6em;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: background 0.2s;
}

.nav-pages nav a:hover {
  background: #f0f0f0;
}

/* Responsive : vertical sur petit écran */
@media (max-width: 600px) {
  .nav-pages nav {
    flex-direction: column;
    gap: 0.5em;           /* un peu moins d’espace vertical */
  }
}