/* =========================================================
   STYLE.CSS
   Migration technique du site historique
   ---------------------------------------------------------
   Pour l'instant, aucune modernisation graphique volontaire.
   On conserve les couleurs et l'esprit visuel historiques.
   ========================================================= */

/* ---------------------------------------------------------
   0. EN-TÊTE DU SITE
   ---------------------------------------------------------
   Reproduction du principe visuel historique :
   - titre centré
   - titre nettement plus grand
   - titre en gras et italique
--------------------------------------------------------- */

header {
    text-align: center;
}

h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;

    /* Équivalent moderne de l'ancien <font size="7"> */
    font-size: 3rem;

    font-weight: bold;
    font-style: italic;
}

.site-baseline {
    font-size: 1.2rem;
    font-style: italic;
}

/* ---------------------------------------------------------
   ESPACE ENTRE L'EN-TÊTE ET LE CONTENU
--------------------------------------------------------- */

.site-header {
    margin-bottom: 5rem;
}

/* ---------------------------------------------------------
   1. RÉGLAGES GÉNÉRAUX
--------------------------------------------------------- */

body {
    margin: 0;
    background-color: #6699ff;
    color: #000000;
    font-family: serif;
    line-height: normal;
}


/* ---------------------------------------------------------
   2. LIENS
   ---------------------------------------------------------
   Couleurs utilisées historiquement par le site :
   - lien non visité : #CCFFFF
   - lien visité : #003366
--------------------------------------------------------- */

a:link {
    color: #CCFFFF;
}

a:visited {
    color: #003366;
}



/* ---------------------------------------------------------
   PUBLICATION RÉCENTE — ÉTIQUETTE « NOUVEAU »
--------------------------------------------------------- */

h3 .badge-nouveau {
    color: #FF0000;
    background-color: #FFFF00;
    font-style: italic;
    font-weight: normal;
    padding: 0 0.25rem;
    margin-right: 0.4rem;
}
/* ---------------------------------------------------------
   ESPACEMENT ENTRE LES GRANDES SECTIONS
--------------------------------------------------------- */

section {
    margin-bottom: 3rem;
}

.work {
    margin-bottom: 1.5rem;
}


/* ---------------------------------------------------------
   ESPACEMENT ENTRE LES LIENS DE LA LISTE DES RESSOURCES
--------------------------------------------------------- */

.resource-links li {
    margin-bottom: 0.75rem;
}


/* ---------------------------------------------------------
   3. ZONE PRINCIPALE
   ---------------------------------------------------------
   Cette règle est technique : elle évite simplement que le
   texte s'étale sur toute la largeur d'un écran moderne.
   
   On pourra la modifier plus tard si nécessaire.
--------------------------------------------------------- */

main {
    max-width: none;
    margin: 0 1.5rem;
    padding: 0;
}


/* ---------------------------------------------------------
   4. RESPONSIVE
   ---------------------------------------------------------
   Pour l'instant, on intervient uniquement sur les marges
   afin que le site reste utilisable sur un téléphone.
--------------------------------------------------------- */

@media (max-width: 600px) {
    
    .site-header h1 {
        font-size: 2rem;
    main {
        margin: 0 0.75rem;
    }

}


/* =========================================================
   PIED DE PAGE
   ========================================================= */

.site-footer {
  margin-top: 4rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;

  /* Petite séparation discrète avec le contenu */
  border-top: 1px solid currentColor;

  text-align: center;
  font-size: 0.9rem;
}


/* ---------------------------------------------------------
   BADGE « GEOCITIES SPONSORED »
   
   On reproduit l'esprit des petits boutons 88 × 31 px
   des débuts du Web, sans utiliser une image.
   --------------------------------------------------------- */

.vintage-badge {
  display: inline-block;

  width: 88px;
  min-height: 31px;
  box-sizing: border-box;

  padding: 3px 4px;

  border: 2px outset #cccccc;
  background-color: #eeeeee;

  color: #000080;
  font-family: "Times New Roman", Times, serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 12px;
  text-align: center;

  /* Empêche le texte de devenir italique ou
     d'hériter d'autres styles du site */
  font-style: normal;
}