/* ==========================================================================
   WAKAME - Les articles

   Une seule feuille pour les trois écrans qui montrent un article :
     /blog          la liste des articles classiques
     /blog/:slug    un article de blog
     /:slug         une page légale (article statique)

   Comme menu.css, elle prolonge la direction artistique de la landing page et
   ne redéfinit aucun jeton : --u, --cream, --paper, --red, les familles et les
   rythmes de marge viennent de wakame.css, chargée avant celle-ci.

   Le parti pris est le même que pour la carte : un article est une FEUILLE
   posée sur le crème du site, pas une section de plus. La liste, elle, reste
   en pleine page - c'est une vitrine, pas un document.

   Les corps de texte sont mesurés en `ch` et non en --u : une ligne de lecture
   se règle sur le nombre de signes qu'elle porte, pas sur la maquette. C'est
   la seule chose ici qui échappe à l'échelle Figma, et c'est délibéré.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fond commun

   Le pied de page est sombre et vient buter contre le contenu : sans une zone
   de contenu qui remplit la fenêtre, un article court laisse le crème du body
   s'étendre entre la fin du texte et le pied de page. `min-height` sur le
   bloc principal évite cette bande vide sans rien centrer de force.
   -------------------------------------------------------------------------- */
.wk-articles {
  display: flow-root;
  min-height: calc(100vh - var(--header-h) - 320px);
  padding-block: calc(140 * var(--u)) calc(180 * var(--u));
  background: var(--cream);
}

/* En-tête de page - même composition que .wk-headrow de la landing page :
   le titre à gauche, l'accroche dessous, l'action à droite. */
.wk-articles__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(100 * var(--u));
  flex-wrap: wrap;
  margin-bottom: calc(110 * var(--u));
}
.wk-articles__titles {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

/* --------------------------------------------------------------------------
   2. La liste  (/blog)
   -------------------------------------------------------------------------- */
.wk-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(90 * var(--u));
}

/* Le dernier article publié tient toute la rangée : c'est la « une ». Elle
   n'est pas une carte différente, seulement la même carte couchée - un seul
   jeu de règles à maintenir, et la mise en page bascule sur ce sélecteur. */
.wk-posts > .wk-post--une {
  grid-column: 1 / -1;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr;
}

.wk-post {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--brown);
  box-shadow: var(--sh-md);
  /* La carte entière est cliquable : le titre n'est pas une cible de 3 mots
     perdue au milieu d'un rectangle inerte.

     Le soulèvement est lent (.5s) et sur une courbe amortie, pas sur --ease :
     la carte est un grand objet, et une grande surface qui bondit sous la
     souris se lit comme un sursaut. La sortie est plus lente encore (.6s), le
     temps de retomber - c'est le mouvement qu'on remarque, pas la distance. */
  transition: transform .6s cubic-bezier(.22, 1, .36, 1),
              box-shadow .6s cubic-bezier(.22, 1, .36, 1);
}
.wk-post:hover {
  /* 4 px au lieu de 6 : la carte se décolle, elle ne saute pas. */
  transform: translateY(-4px);
  box-shadow: 3px 12px 22px var(--sh-ink);
  transition-duration: .5s;
}

/* Le visuel garde le format de la maquette (les vignettes Cloudinary sont
   recadrées en 16/10) ; sur la une, il occupe toute la hauteur de la carte. */
.wk-post__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ph);
}
.wk-post--une .wk-post__media { aspect-ratio: auto; height: 100%; min-height: calc(700 * var(--u)); }
.wk-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.wk-post:hover .wk-post__media img { transform: scale(1.04); }

/* Pastille « À la une », posée sur le visuel : elle dit pourquoi cette carte
   est plus grande que les autres. */
.wk-post__flag {
  position: absolute;
  top: calc(40 * var(--u));
  left: calc(40 * var(--u));
  padding: calc(14 * var(--u)) calc(34 * var(--u));
  border-radius: var(--r-btn);
  background: var(--red);
  color: var(--paper);
  font-family: var(--f-hand);
  font-size: var(--fs-40);
  line-height: 1;
  text-transform: uppercase;
  box-shadow: var(--sh-sm);
}

.wk-post__body {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  padding: calc(60 * var(--u)) calc(60 * var(--u)) calc(70 * var(--u));
}
.wk-post--une .wk-post__body {
  justify-content: center;
  padding: calc(90 * var(--u)) calc(100 * var(--u));
}

.wk-post__date {
  font-size: var(--fs-40);
  color: var(--red);
  font-weight: 600;
}

/* Titre d'article : casse d'origine, donc Fredoka semi-bold et non la brosse
   (cf. la note sur --f-hand dans wakame.css). */
.wk-post__title {
  font-family: var(--f-round);
  font-weight: 600;
  font-size: var(--fs-48);
  line-height: 1.25;
}
.wk-post--une .wk-post__title { font-size: var(--fs-64); }

.wk-post__sub {
  font-size: var(--fs-40);
  line-height: 1.5;
  opacity: .72;
}

/* « Lire l'article → » : le lien est le mot, la flèche avance au survol de la
   carte entière - c'est elle qui est cliquable. La flèche est l'icône Material
   du reste du site, appelée depuis le ::after par son nom de ligature : elle
   n'a pas à exister dans le gabarit, elle ne dit rien de plus que le mot. */
.wk-post__more {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: auto;
  padding-top: calc(20 * var(--u));
  font-size: var(--fs-40);
  font-weight: 600;
  color: var(--red);
}
.wk-post__more::after {
  content: "arrow_forward";
  font-family: "Material Symbols Rounded";
  font-size: calc(44 * var(--u));
  line-height: 1;
  transition: translate .4s cubic-bezier(.22, 1, .36, 1);
}
.wk-post:hover .wk-post__more::after { translate: 5px 0; }
.wk-post--une .wk-post__more { margin-top: calc(20 * var(--u)); }

/* Liste vide : la page reste habitée. Le message est centré dans la largeur
   du contenu, pas collé en haut à gauche comme une erreur. */
.wk-posts-vide {
  padding-block: calc(200 * var(--u));
  text-align: center;
  font-size: var(--fs-48);
  opacity: .6;
}

/* --------------------------------------------------------------------------
   3. La feuille de lecture  (/blog/:slug et /:slug)
   -------------------------------------------------------------------------- */
.wk-article {
  width: min(100% - clamp(16px, 4vw, 48px) * 2, 78ch);
  margin-inline: auto;
  padding: clamp(28px, 5vw, calc(150 * var(--u))) clamp(20px, 5vw, calc(140 * var(--u)));
  border-radius: var(--r-panel);
  background: var(--paper);
  box-shadow: 0 18px 40px var(--sh-ink);
}

/* Fil de retour et date sur une même ligne : d'où l'on vient à gauche, quand
   ç'a été écrit à droite. */
.wk-article__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(60 * var(--u));
  flex-wrap: wrap;
  margin-bottom: calc(70 * var(--u));
  font-size: var(--fs-40);
}
.wk-article__back {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  color: var(--red);
  font-weight: 600;
}
.wk-article__back:hover { text-decoration: underline; }
.wk-article__date { opacity: .55; }

.wk-article__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-card);
  margin-bottom: calc(70 * var(--u));
  background: var(--ph);
}

.wk-article__title {
  font-family: var(--f-round);
  font-weight: 600;
  font-size: var(--fs-64);
  line-height: 1.2;
}
.wk-article__sub {
  margin-top: calc(24 * var(--u));
  font-size: var(--fs-48);
  line-height: 1.35;
  opacity: .7;
}

/* Titres, sous-titres et résumés viennent eux aussi du back-office, et un
   titre d'article contient volontiers un nom de plat ou une adresse sans
   espace. Même césure de dernier recours que pour le corps (voir .wk-prose) :
   sans effet sur un titre ordinaire, elle évite qu'un seul mot ne pousse la
   page au delà de la largeur de l'écran. */
.wk-article__title,
.wk-article__sub,
.wk-post__title,
.wk-post__sub { overflow-wrap: break-word; }

/* Filet de séparation, repris du rouge de la maquette : court et épais, comme
   les soulignés de la nav, plutôt qu'un trait de bord à bord. */
.wk-article__rule {
  width: calc(160 * var(--u));
  height: calc(8 * var(--u));
  margin: calc(60 * var(--u)) 0 calc(80 * var(--u));
  border: 0;
  border-radius: 999px;
  background: var(--red);
}

/* --------------------------------------------------------------------------
   4. Le corps rédigé

   Ce que produit l'éditeur TipTap de l'administration : du HTML libre. Les
   règles ci-dessous sont donc des sélecteurs de balises, pas de classes -
   c'est le seul endroit du site où on en écrit, faute de pouvoir poser des
   classes sur du contenu saisi. Elles sont toutes portées par .wk-prose et ne
   fuient nulle part ailleurs.

   wakame.css remet à zéro les marges des titres et des listes pour la vitrine
   (`h1, h2, h3, h4, p { margin: 0 }`, `ul, ol { list-style: none }`) : un
   article a besoin de l'inverse, il faut donc tout redonner ici.
   -------------------------------------------------------------------------- */
.wk-prose {
  font-size: var(--fs-40);
  line-height: 1.7;
  /* Le corps d'un article est saisi dans le back-office : il arrive avec des
     URL collées, des noms de fichiers et des mots à rallonge que rien ne
     coupe. Sans césure, un seul d'entre eux élargit la page entière - c'est
     la cause du défilement latéral des articles sur téléphone, et sur la
     vitrine `body { overflow-x: hidden }` ne fait que le masquer : la fin du
     mot passait sous le bord de l'écran, illisible.
     `break-word` et non `anywhere` : la coupe n'intervient qu'en dernier
     recours, quand le mot ne tient sur aucune ligne à lui seul. Une ligne de
     texte ordinaire est mise en page exactement comme avant. */
  overflow-wrap: break-word;
}

.wk-prose > * + * { margin-top: 1.1em; }

.wk-prose p { margin: 0; }

.wk-prose h1,
.wk-prose h2,
.wk-prose h3,
.wk-prose h4,
.wk-prose h5,
.wk-prose h6 {
  font-family: var(--f-round);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
/* Un intertitre appelle l'air au-dessus de lui, pas en dessous : il appartient
   au paragraphe qui le suit. */
.wk-prose > :is(h1, h2, h3, h4, h5, h6) + * { margin-top: .5em; }
.wk-prose > * + :is(h1, h2, h3, h4, h5, h6) { margin-top: 2em; }

.wk-prose h1 { font-size: calc(var(--fs-64) * 1.05); }
.wk-prose h2 { font-size: var(--fs-64); }
.wk-prose h3 { font-size: var(--fs-48); }
.wk-prose h4,
.wk-prose h5,
.wk-prose h6 { font-size: var(--fs-40); }
.wk-prose h4 { font-weight: 700; }

.wk-prose strong { font-weight: 700; }
.wk-prose em { font-style: italic; }
.wk-prose u { text-decoration: underline; }
.wk-prose s { text-decoration: line-through; }
.wk-prose sub { vertical-align: sub; font-size: .75em; }
.wk-prose sup { vertical-align: super; font-size: .75em; }

.wk-prose a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.wk-prose a:hover { text-decoration-thickness: 2px; }

/* Les puces sont rendues au site : wakame.css les avait retirées pour la nav
   et le pied de page, mais une liste d'article en a besoin. */
.wk-prose ul,
.wk-prose ol {
  padding-left: 1.35em;
  margin: 0;
}
.wk-prose ul { list-style: disc; }
.wk-prose ol { list-style: decimal; }
.wk-prose li { margin: .3em 0; }
.wk-prose li::marker { color: var(--red); }
.wk-prose li > p { margin: 0; }

.wk-prose blockquote {
  margin: 0;
  padding: .2em 0 .2em 1.1em;
  border-left: calc(8 * var(--u)) solid var(--red);
  font-size: var(--fs-48);
  line-height: 1.45;
  opacity: .8;
}

.wk-prose code {
  padding: .1em .35em;
  border-radius: 4px;
  background: rgb(45 20 8 / .07);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .88em;
}
.wk-prose pre {
  overflow-x: auto;
  padding: 1em 1.1em;
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--paper);
  font-size: .88em;
  line-height: 1.55;
}
.wk-prose pre code { padding: 0; background: none; color: inherit; }

.wk-prose mark { background: var(--gold); color: var(--brown); padding: 0 .12em; }

.wk-prose hr {
  border: 0;
  border-top: 1px solid rgb(45 20 8 / .15);
  margin-block: 2em;
}

.wk-prose img { border-radius: var(--r-card); }

/* Les vidéos insérées par l'éditeur sont des iframes YouTube nues : elles
   n'ont pas de rapport hauteur/largeur propre et se rendraient en 300×150. */
.wk-prose iframe,
.wk-prose [data-youtube-video] iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--r-card);
}

/* Bloc image de l'éditeur (type « image », hors texte rédigé). */
.wk-article__figure { margin: 1.6em 0 0; }
.wk-article__figure img {
  width: 100%;
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
}

/* Page sans contenu : l'article existe mais n'a pas encore été rempli. Sur une
   page légale, le dire vaut mieux qu'une feuille blanche. */
.wk-article__vide {
  font-size: var(--fs-40);
  opacity: .55;
}

/* --------------------------------------------------------------------------
   5. Adaptatif

   Les paliers de --u de wakame.css s'appliquent déjà : rien à reprendre pour
   les grands écrans, la page grandit avec le reste du site.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .wk-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* La une redevient une carte comme les autres : couchée, sa colonne de
     texte n'a plus la largeur d'une ligne lisible. */
  .wk-posts > .wk-post--une {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .wk-post--une .wk-post__media { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .wk-post--une .wk-post__body { padding: calc(60 * var(--u)); }
  .wk-post--une .wk-post__title { font-size: var(--fs-48); }
}

@media (max-width: 640px) {
  .wk-posts { grid-template-columns: minmax(0, 1fr); gap: calc(70 * var(--u)); }
  .wk-articles__head { margin-bottom: calc(80 * var(--u)); }
  /* La feuille perd son arrondi et ses marges latérales : sur un écran étroit,
     un encadré de 12 px de marge ne fait que rétrécir la colonne de texte. */
  .wk-article {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .wk-articles { padding-block: calc(100 * var(--u)) calc(120 * var(--u)); }
}