/*
 * Le blog : l'article, et le bloc recette.
 *
 * Le thème de 2020 avait des gabarits d'article jamais utilisés — le blog est
 * resté vide six ans. Ils servaient le contenu brut, sans signature, sans
 * sommaire et sans distinguer une recette d'un paragraphe.
 */

/* --- l'article --- */

/* La page dégage l'en-tête fixe, comme les gabarits d'annuaire. */
.article-page {
  padding-block: calc(var(--header-h) + 2rem) var(--section);
}
.article-page .container { max-width: var(--wrap); }

.article-fil {
  margin: 0 0 1.5rem;
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.article-fil a { color: var(--ink-3); text-decoration: none; }
.article-fil a:hover { color: var(--accent); }
.article-fil span[aria-hidden] { margin: 0 .4rem; color: var(--rule); }

/* --- l'en-tête --- */

/* Pas de largeur propre : l'en-tete prend celle de la colonne de texte qui le
   contient. */
.article-entete {
  margin-bottom: 2rem;
}

.article-cats { margin: 0 0 1rem; }
.badge-cat {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-data);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Troisieme occurrence du meme piege, trouvee par bin/survol-contraste.js :
   fond clair + texte fonce qui basculent en fond fonce + texte clair. Les
   deux couleurs se croisent au milieu de la transition et le libelle
   disparait -- 1,11 de contraste a 100 ms. Le survol reste dans la meme
   famille, et c'est la bordure qui marque la reaction. */
.badge-cat {
  border: 1px solid transparent;
  transition: border-color .2s ease-in-out, background-color .2s ease-in-out, color .2s ease-in-out;
}
.badge-cat:hover,
.badge-cat:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-color: var(--accent-decor);
}

/* Le titre de l'article est LE titre de la page : il prend la taille qui va
   avec. `--step-4` est le haut de l'échelle fluide. */
.article-titre {
  margin: 0 0 1rem;
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  text-align: left;
  text-transform: none;
}

.article-chapeau {
  margin: 0 0 1.75rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
}

/* La ligne de signature : qui à gauche, quand et combien de temps à droite. */
.article-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.signature-qui {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.signature-avatar { width: 40px; height: 40px; border-radius: 50%; }
.signature-nom { color: var(--ink); font-weight: 600; text-decoration: none; }
.signature-nom:hover { color: var(--accent); }
.article-meta {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* --- le corps : sommaire en marge, texte au centre --- */

.article-corps {
  display: grid;
  grid-template-columns: 14rem minmax(0, 46rem);
  gap: 3rem;
  justify-content: center;
}

/* Sans sommaire, le texte reste centré au lieu de glisser à gauche. */
.article-corps:not(:has(.article-toc)) {
  grid-template-columns: minmax(0, 46rem);
}

/* Le sommaire demarre a hauteur de l'image, sous l'en-tete : place en haut de
   colonne il flotterait a cote du titre, ou il n'a rien a dire. */
.article-toc {
  position: relative;
  padding-top: 19rem;
}
.article-toc .hh-toc {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  padding-right: 1.25rem;
  border-right: 1px solid var(--rule-soft);
  text-align: right;
}
.hh-toc-titre {
  margin: 0 0 .75rem;
  font-family: var(--font-data);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.article-toc ol {
  counter-reset: toc;
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-toc li {
  counter-increment: toc;
  margin-bottom: .6rem;
}
.article-toc a {
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
}
.article-toc a:hover { color: var(--accent); }
/* Le numero est decoratif : il est pose en ::after pour ne pas etre lu. */
.article-toc a::after {
  content: ' ' counter(toc, decimal-leading-zero);
  font-family: var(--font-data);
  font-size: .72rem;
  color: var(--rule);
}

.article-image {
  margin: 0 0 2rem;
}
.article-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.article-image figcaption {
  margin-top: .5rem;
  font-size: var(--step--1);
  color: var(--ink-3);
}

.article-texte p,
.article-texte li {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-2);
}
.article-texte h2 {
  margin: 2.5rem 0 .6rem;
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink);
  text-transform: none;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.article-texte h3 {
  margin: 1.75rem 0 .4rem;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-transform: none;
}

.article-renvoi {
  margin: 2.5rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent-decor);
  background: var(--surface-2);
  font-size: var(--step-0);
}
.article-renvoi a { color: var(--accent); font-weight: 600; }

/* --- partage --- */

/* Des LIENS, pas des boutons officiels : aucun script de reseau social n'est
   charge, donc aucun cookie pose avant que le visiteur ait clique. */
.partage {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
}
.partage-titre {
  margin: 0 0 .75rem;
  font-family: var(--font-data);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.partage-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.partage-lien {
  display: inline-block;
  padding: .45rem .9rem;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--step--1);
  text-decoration: none;
  cursor: pointer;
}
.partage-lien:hover,
.partage-lien:focus-visible { border-color: var(--accent); color: var(--accent); }

/* --- encadre auteur --- */

.encadre-auteur {
  display: flex;
  gap: 1.25rem;
  margin: 2.5rem 0 0;
  padding: 1.5rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.auteur-avatar { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; }
.auteur-corps p { margin: 0; }
.auteur-eyebrow {
  font-family: var(--font-data);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.auteur-nom {
  margin: .25rem 0 .5rem !important;
  font-size: var(--step-1);
  font-weight: 600;
}
.auteur-nom a { color: var(--ink); text-decoration: none; }
.auteur-nom a:hover { color: var(--accent); }
.auteur-bio {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 1100px) {
  /* Le sommaire repasse au-dessus du texte : en colonne il n'aurait plus que
     huit centimetres, et ses libelles se couperaient a chaque mot. */
  .article-corps { grid-template-columns: minmax(0, 46rem); }
  .article-toc .hh-toc {
    position: static;
    padding: 1rem 1.25rem;
    border-right: 0;
    border-left: 3px solid var(--accent-decor);
    background: var(--surface-2);
    text-align: left;
  }
  .article-toc { margin-bottom: 2rem; }
}

@media (max-width: 600px) {
  .encadre-auteur { flex-direction: column; }
}

/* --- le bloc recette --- */

/* Il doit se distinguer du texte au premier coup d'œil : on ne lit pas une
   recette, on l'exécute, souvent en revenant dessus les mains occupées. */
.recette {
  margin: 2rem 0;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ground);
}

.recette-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
.recette-reperes > div { margin: 0; }
.recette-reperes dt {
  margin: 0;
  font-family: var(--font-data);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.recette-reperes dd {
  margin: .1rem 0 0;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
}

.recette-bloc { margin: 0 0 1.5rem; }
.recette-bloc:last-child { margin-bottom: 0; }

.recette h3 {
  margin: 0 0 .6rem;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
}

.recette-ingredients ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}
.recette-ingredients li {
  padding: .3rem 0 .3rem 1.1rem;
  position: relative;
  break-inside: avoid;
}
/* La puce est décorative : la liste se lit sans elle. */
.recette-ingredients li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .95em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-decor);
}

.recette-etapes ol {
  margin: 0;
  padding-left: 1.4rem;
}
.recette-etapes li {
  margin-bottom: .7rem;
  padding-left: .25rem;
}

@media (max-width: 600px) {
  /* Deux colonnes d'ingrédients sur un téléphone donneraient des lignes de
     quinze caractères. */
  .recette-ingredients ul { columns: 1; }
  .recette { padding: 1.1rem 1.2rem; }
}

/* --- la barre latérale --- */

.sidebar-annuaire {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--rule-soft);
  border-top: 3px solid var(--accent-decor);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.sidebar-annuaire-titre {
  margin: 0 0 .5rem;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
}
.sidebar-annuaire p {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-2);
}

/* Les dates de la signature sortent en <time> bloc du module de fraicheur :
   remises dans le fil du texte, sinon le separateur reste pendu. */
.hh-signature-dates,
.hh-signature time {
  display: inline;
}
.hh-signature time + time::before {
  content: ' · ';
  color: var(--rule);
}

/* La colonne d'articles occupe toute la largeur depuis que la barre laterale
   est partie. `.sm100` n'existait pas dans la grille de 2020, qui s'arrete a
   sm66 : on la pose ici plutot que de toucher a style.css. */
#posts.sm100 {
  width: 100%;
}

/* Le texte garde sa mesure de lecture -- une colonne de 1 200 px donnerait des
   lignes de deux cents caracteres -- mais il se CENTRE. Cale a gauche, il
   laissait la moitie droite de la page vide, le meme desequilibre que sur la
   page de contact avant sa reprise. */
.actu-main,
#posts .inner-container {
  max-width: 46rem;
  margin-inline: auto;
}

/* Le fil d'Ariane et le titre de la page d'archive suivent la meme colonne. */
.archive #posts > .flex,
.blog #posts > .flex,
.search #posts > .flex {
  justify-content: center;
}

/* --- la FAQ d'un article --- */

/* Le module rend des <details> natifs : l'accordeon fonctionne sans une ligne
   de script, et le contenu replie reste dans le document -- donc lisible par
   un moteur et trouvable par la recherche du navigateur. */
.hh-faq {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-soft);
}
.hh-faq > h2 {
  margin: 0 0 1.25rem;
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink);
  text-transform: none;
}
.hh-faq-item {
  border-bottom: 1px solid var(--rule-soft);
}
.hh-faq-item > summary {
  padding: .9rem 2rem .9rem 0;
  position: relative;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.hh-faq-item > summary::-webkit-details-marker { display: none; }

/* Le chevron : `translateX` APRES la rotation le deplacerait en diagonale --
   la faute deja rencontree sur le menu. On centre d'abord, on tourne ensuite. */
.hh-faq-item > summary::after {
  content: '';
  position: absolute;
  right: .4rem;
  top: 1.35rem;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .2s;
}
.hh-faq-item[open] > summary::after {
  transform: translateY(-50%) rotate(-135deg);
}
.hh-faq-item > summary:hover { color: var(--accent); }

.hh-faq-reponse {
  padding: 0 0 1.1rem;
}
.hh-faq-reponse p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-2);
}

/* --- la liste des articles : blog et categories --- */

.blog-entete {
  padding-top: calc(var(--header-h) + 2.5rem);
}
.blog-entete h1 {
  margin: 0 0 .6rem;
  font-size: var(--step-3);
  line-height: 1.15;
  color: var(--ink);
  text-align: left;
  text-transform: none;
}
.blog-intro {
  max-width: 62ch;
  margin: 0 0 .75rem;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-2);
}
/* Le chapo d'une page de categorie : trois a quatre paragraphes qui repondent
   a la requete de la rubrique. Il tient la meme mesure que le corps d'un
   article -- une page de categorie se lit, elle ne se survole pas. */
.blog-chapo {
  max-width: 62ch;
  margin: 0 0 1.25rem;
}
.blog-chapo p {
  margin: 0 0 .85rem;
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-2);
}
.blog-chapo p:last-child {
  margin-bottom: 0;
}
.blog-chapo p:first-child {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}
.blog-chapo strong {
  color: var(--ink);
}
.blog-chapo a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: .18em;
}
.blog-chapo a:hover,
.blog-chapo a:focus-visible {
  color: var(--accent);
}

.blog-compte {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* La barre des categories, sur le modele de celle des regions de l'annuaire :
   une meme famille de pages se navigue de la meme facon. */
.blog-cats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.blog-cats a {
  display: inline-block;
  padding: .45rem .9rem;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink-2);
  font-size: var(--step--1);
  text-decoration: none;
}
.blog-cats a:hover,
.blog-cats a:focus-visible { border-color: var(--accent); color: var(--accent); }
.blog-cats a[aria-current] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* --- les cartes --- */

/* `auto-fit` et non `auto-fill` : avec trois articles dans une largeur qui en
   tiendrait quatre, `auto-fill` gardait la quatrieme colonne vide et les
   cartes serrees a gauche. `auto-fit` replie les colonnes vides et laisse les
   cartes occuper la rangee. */
/* `auto-fill` et NON `auto-fit`. auto-fit reduit les pistes vides a zero :
   une categorie qui ne contient qu'un article etirait sa carte sur toute la
   largeur, avec une image de 1100 x 687 px pour un titre et deux lignes.
   auto-fill garde les pistes, la carte reste a sa taille, et une rubrique peu
   fournie a l'air peu fournie -- ce qu'elle est -- au lieu d'avoir l'air casse. */
.blog-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.75rem;
}

/* `position: relative` : c'est elle qui borne le lien etire du titre. */
.article-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--ground);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.article-carte:hover {
  border-color: var(--rule);
  box-shadow: var(--shadow);
}

/* L'image est un lien SANS texte : elle double celui du titre. Elle sort donc
   du parcours clavier et des lecteurs d'ecran plutot que de leur imposer un
   lien muet. */
/* L'image n'est plus un lien : la carte en portait deux vers le meme article.
   Elle reste cliquable par le lien du titre, etire sur toute la carte. */
.carte-image {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--surface);
  overflow: hidden;
}
.carte-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.article-carte:hover .carte-image img { transform: scale(1.03); }
.carte-image-vide { display: block; width: 100%; height: 100%; }

.carte-corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.1rem 1.25rem 1.25rem;
}

.carte-cat { margin: 0 0 .5rem; }
.carte-cat a {
  font-family: var(--font-data);
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-decoration: none;
}
.carte-cat a:hover { color: var(--accent); }

/* Pas de cesure sur un titre de carte : « com-ment », « ou-vrir » sur trois
   lignes de dix mots rendent le titre penible a lire. La cesure sert au texte
   courant, pas aux titres. */
.carte-titre,
.carte-titre a {
  hyphens: none;
  margin: 0 0 .5rem;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-align: left;
  text-transform: none;
}
.carte-titre a { color: inherit; text-decoration: none; }
.carte-titre a:hover { color: var(--accent); }

/* Le lien ETIRE : un seul <a> dans le HTML, toute la carte cliquable. */
.carte-titre a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.carte-titre a:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.carte-extrait {
  margin: 0 0 1rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-3);
}

/* Le pied colle en bas quelle que soit la longueur du titre : les cartes
   d'une meme rangee alignent leurs dates. */
/* `.carte-bas` et non `.carte-pied` : ce dernier designait deja la carte
   geographique du pied de page dans accueil.css, et son `min-height: 260px`
   gonflait le pied des cartes d'article sur la page d'accueil. */
.carte-bas {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: auto 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-3);
}

.blog-vide {
  font-size: var(--step-0);
  color: var(--ink-3);
}

/* Le lien de categorie d'une carte est un <span role="link"> : il n'a pas le
   curseur d'un lien par defaut, il faut le lui donner. */
/* Au-dessus du lien etire, sinon le clic sur la categorie ouvrirait
   l'article. */
.carte-cat {
  position: relative;
  z-index: 1;
}
.carte-cat .hh-offusque {
  font-family: var(--font-data);
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-2);
  cursor: pointer;
}
.carte-cat .hh-offusque:hover,
.carte-cat .hh-offusque:focus-visible { color: var(--accent); }