/* layout.css — ossature partagée : corps de texte, en-tête, filet,
   fil d'Ariane, pied de page. Chargé par toutes les pages. */

/* ------------------------------------------------------------------ corps */

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 0.97rem;      /* ≈ 15,5 px */
  line-height: 1.62;
  /* pied de page collé en bas des pages courtes */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

h1, h2, h3 { line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.85rem; letter-spacing: -0.015em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

/* Rythme vertical du texte courant. Les cartes et autres blocs
   redéfinissent ces marges pour leur compte. */
main h1 { margin-bottom: 0.6rem; }
main h2 { margin-block: 2.2rem 0.4rem; }
main h3 { margin-block: 1.6rem 0.3rem; }

p, li { max-width: 68ch; }
p + p, p + ul, ul + p { margin-top: 0.9rem; }

em { font-style: italic; }
strong { font-weight: 700; }

/* Références techniques : mises en valeur par la graisse et la couleur,
   jamais par une police à chasse fixe. */
.ref { font-weight: 700; color: var(--accent-fonce); }

/* Un tableau de mesures défile dans son conteneur, jamais la page. */
.tableau { overflow-x: auto; }

:focus-visible {
  outline: 2px solid var(--accent-fonce);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -------------------------------------------------------------- conteneur */

.contenu {
  width: 100%;
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

main.contenu {
  flex: 1;                    /* pousse le pied de page vers le bas */
  padding-block: 2rem 3.5rem;
}

/* ---------------------------------------------------------------- en-tête */

/* Les deux bandeaux sont sombres, eclaires par une source placee dans
   l'angle haut-gauche qui s'eteint en s'eloignant. Le pied reprend le meme
   halo par le bas : la page est tenue entre deux bandeaux symetriques. */
.site-header {
  background: radial-gradient(90% 320% at 14% 0%, #24557A 0%, #1A2C3E 45%, #141920 100%);
}

.site-footer {
  background: radial-gradient(90% 320% at 14% 100%, #1F4A6B 0%, #182835 45%, #141920 100%);
}

.site-header, .site-footer { color: var(--bandeau-2); }

.site-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 1.4rem;
  padding-block: 0.5rem;
}

.site-header a,
.cats span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;        /* 44 px : cible tactile */
}

.brand {
  color: var(--bandeau);
  flex: 1 0 100%;             /* petit écran : le nom occupe sa propre ligne */
  font-weight: 700;
  font-size: 1.1rem;
}

.cats, .meta { display: flex; column-gap: 1.1rem; flex-wrap: wrap; }
.cats a, .cats span, .meta a { color: var(--bandeau-2); font-size: 0.9rem; }
.cats a:hover, .meta a:hover, .brand:hover { color: var(--bandeau); }

/* Categorie declaree mais pas encore publiee : presente dans le menu pour que
   la navigation ne soit pas vide, mais sans lien — on ne publie jamais un lien
   vers une page qui n'existe pas. */
.cats span { cursor: default; }

/* La catégorie courante s'affiche dans sa couleur : le marqueur est double,
   le filet et la navigation.

   A REVOIR au moment de publier la premiere categorie : ces accents ont ete
   choisis pour contraster sur le fond CLAIR. Sur le bandeau sombre, le brun
   #7A4B28 de Tech & Bidouille passe sous le seuil lisible. Il faudra une
   variante eclaircie par categorie, mesuree sur #1A2C3E. */
.cats a.is-active { color: var(--accent); font-weight: 700; }
.cats a.is-active:hover { color: var(--accent-fonce); }

/* Filet de catégorie : gris sur les pages hors catégorie. */
.cat-rule { height: 3px; background: var(--accent); }

/* ----------------------------------------------------------- fil d'Ariane */

.crumb {
  font-size: 0.8rem;
  color: var(--texte-2);
  margin-bottom: 1.2rem;
}
.crumb a:hover { color: var(--texte); }
.crumb b { color: var(--accent); font-weight: 700; }

/* -------------------------------------------------------------- pied de page */

.site-footer {
  font-size: 0.82rem;
}

.site-footer .contenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1.4rem;
  padding-block: 0.35rem;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.site-footer span { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer a:hover { color: var(--bandeau); }

/* ------------------------------------------------------------ ≥ 40rem */

@media (min-width: 40rem) {
  /* L'en-tête tient sur une seule ligne : le nom absorbe l'espace,
     la navigation se colle au bord droit. */
  .brand { flex: 0 1 auto; margin-right: auto; }

  h1 { font-size: 2.2rem; }
}

/* ------------------------------------------- respect de prefers-reduced-motion */

@media (prefers-reduced-motion: no-preference) {
  a, .cat-card { transition: color 120ms ease, border-color 120ms ease, transform 120ms ease; }
}