/* Surcharges maison par-dessus le thème Apollo.
   Déclaré dans zola.toml : stylesheets = ["custom.css"], donc chargé après lui.
   Le thème n'est jamais modifié : tout ce qui nous est propre vit ici.

   Deux conventions dans ce fichier :
   - le « pourquoi » de chaque choix est résumé ici, développé dans design.md ;
   - certains sélecteurs commencent par `body` ou `.body` sans nécessité
     apparente : c'est la spécificité du thème qu'ils doivent égaler pour le
     recouvrir. Ne pas les raccourcir. */

/* ------------------------------------------------------------------ Variables */

:root {
  /* Largeur de lecture. 920px donnait ~95 caractères par ligne, trop long pour
     un article ; 760px ramène autour de 75. */
  --page-width: 760px;

  /* L'en-tête garde les 920px d'origine du thème (voir plus bas). */
  --header-width: 920px;
}

/* Couleur d'accent : la terre, à la place du corail du thème. La double
   sélection light/dark est nécessaire : le thème définit la variable sur
   :root.light et :root.dark, plus spécifique que :root seul.

   Échelle terre → or : #7A3B1F, #A9552F, #B05A30 (retenu) puis #A87F1A,
   #B5871F, #C29A2E. Au-delà, un or franc passe sous le seuil de contraste sur
   fond blanc et les liens deviennent pénibles à lire. */
:root.light,
:root.dark {
  --primary-color: #B05A30;
}

/* --------------------------------------------------------------------- Titres */

/* Le dièse des titres, décalé d'un cran. Le titre de la page est le seul h1 ;
   les sections sont des h2 mais n'affichent qu'un dièse. Sémantique juste,
   rendu identique. */
h2::before { content: "# "; }
h3::before { content: "## "; }
h4::before { content: "### "; }

/* -------------------------------------------------------------------- Accueil */

/* Titre et sous-titre, centrés, sur l'accueil uniquement. L'interligne du corps
   de texte creuse un écart démesuré entre deux lignes de 3rem : on le resserre,
   ce qui ne se voit que lorsque le titre passe sur deux lignes. */
.hero {
  text-align: center;
  padding: 2rem 0;
}

.hero-titre {
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.hero-sous-titre {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/* Le portrait, à gauche des deux paragraphes de présentation et centré
   verticalement sur eux. Boîte flex plutôt que flottant : lui seul sait centrer
   l'image sur la hauteur du texte, quel que soit le nombre de lignes rendues.
   Ni cadre ni cercle : le fond de la photo porte déjà l'ocre de la charte, et un
   rond aurait coupé le clavier tenu en bas de l'image. */
.intro {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  margin-bottom: 2rem;
}

.portrait {
  width: 260px;
  flex: none;
}

/* --------------------------------------------------- Médias dans les articles */

/* Une capture et sa légende. Markdown les réunit dans un seul paragraphe
   (image, saut de ligne, italique) : le couple se cible donc sans ambiguïté, et
   sans avoir à écrire de <figure> à la main dans le texte. L'image passe en bloc
   pour que la légende tombe dessous, où elle se lit en retrait. */
.body p > img {
  display: block;
}

.body p > img + em {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-1);
}

/* Les démos filmées. Le thème habille les images (largeur maximale, coins
   arrondis) mais ignore les vidéos : on les accorde. Le rapport 16/9 est réservé
   avant le chargement, sinon le texte saute quand la vidéo arrive. */
.body video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

/* Une illustration, par opposition à une capture. Une capture gagne à occuper
   toute la colonne, on y cherche du détail ; un schéma se lit d'un coup d'œil,
   surtout en format portrait où il pousserait le texte hors de l'écran. La
   contrainte porte sur la hauteur, la largeur suit. */
.illustration img {
  max-height: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Sous une illustration, la légende n'est qu'un crédit d'auteur : centrée et
   plus discrète que la légende d'une capture, qui, elle, explique. Le sélecteur
   reprend celui des légendes ci-dessus pour l'égaler en spécificité. */
.illustration p > img + em {
  text-align: center;
  font-size: 0.8rem;
}

/* -------------------------------------------- Adaptations aux largeurs d'écran

   Les trois seuils viennent du thème, on ne les choisit pas :
   - 1365px : en dessous, il masque le sommaire des articles ;
   -  992px : en dessous, il abandonne sa mise en page en trois colonnes ;
   -  600px : en dessous, il passe l'en-tête en colonne.                       */

/* Le sommaire, écarté de la colonne de lecture : le thème le colle à 1em du
   texte, ce qui le fait lire comme une seconde colonne de l'article. 3,5rem est
   l'écart déjà retenu entre le portrait et le texte, une seule valeur de
   respiration pour tout le site.

   L'en-tête, lui, reprend les 920px du thème en débordant de part et d'autre de
   la colonne : les marges étant symétriques, il reste centré sur le même axe que
   le corps. Le calcul se déduit des deux largeurs et suit si l'une change. */
@media (min-width: 992px) {
  body .right-content {
    padding-left: 3.5rem;
  }

  body .content > nav {
    width: var(--header-width);
    margin-left: calc((var(--page-width) - var(--header-width)) / 2);
  }
}

/* Sur téléphone, plusieurs valeurs du thème sont calées pour le bureau :
   l'en-tête passe en colonne sans écart entre le nom et les liens, la marge
   haute des titres vaut deux fois les 3rem du titre d'accueil (près de 100px de
   vide), et la colonne de texte tomberait à quelques mots par ligne à côté du
   portrait. */
@media (max-width: 600px) {
  body .content > nav {
    row-gap: 0.6rem;
  }

  body .content > nav .right-nav {
    justify-content: flex-end;
  }

  .hero {
    padding-top: 0.5rem;
  }

  .hero-titre {
    margin-top: 1em;
  }

  .intro {
    display: block;
  }

  .portrait {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25rem;
  }
}