/* Snacky — article */

.snk-art__head {
  max-width: var(--snk-read-title);
  margin: 0 auto;
  padding: 52px var(--snk-gutter) 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.snk-art__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.snk-art__meta .snk-badge { transition: background 120ms; }
.snk-art__meta a.snk-badge:hover,
.snk-art__meta a.snk-badge:focus-visible { background: var(--snk-ink); color: var(--snk-white); }
.snk-art__author {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.snk-art__read {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
}
.snk-art__title {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: clamp(34px, 7vw, 62px);
  line-height: .94;
  letter-spacing: -.04em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.snk-art__dek {
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.42;
  margin: 0;
  text-wrap: pretty;
}

.snk-art__hero {
  max-width: var(--snk-read-wide);
  margin: 0 auto;
  padding: 14px var(--snk-gutter) 44px;
}
.snk-art__caption { font-size: 13px; line-height: 1.5; margin: 22px 0 0; opacity: .55; }

/* Corps de l'article : colonne de lecture, styles appliqués au rendu Gutenberg. */
.snk-art__body {
  max-width: var(--snk-read);
  margin: 0 auto;
  padding: 0 var(--snk-gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.snk-art__body > * { margin: 0; }
.snk-art__body p {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.65;
  text-wrap: pretty;
}
.snk-art__body h2 {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin-top: 14px;
  text-wrap: pretty;
}
.snk-art__body h3 {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin-top: 8px;
  text-wrap: pretty;
}
.snk-art__body ul,
.snk-art__body ol {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 17px;
  line-height: 1.55;
}
.snk-art__body a {
  border-bottom: 2px solid var(--snk-violet);
  padding-bottom: 1px;
  transition: color 120ms;
}
.snk-art__body a:hover, .snk-art__body a:focus-visible { color: var(--snk-violet-hover); }
.snk-art__body img { border: 2px solid var(--snk-ink); }
/* Sauf dans l'encart de téléchargement : le logo et les badges des stores
   portent déjà leur propre forme, un cadre par-dessus les défigure. */
.snk-art__body .snk-cta img { border: 0; box-shadow: none; }
.snk-art__body figure { margin: 0; }
.snk-art__body figcaption { font-size: 13px; line-height: 1.5; margin-top: 12px; opacity: .55; }

/* Vidéos intégrées (bloc Embed de Gutenberg). La feuille des blocs du cœur
   n'est pas chargée : sans ces règles l'iframe sort en 500 × 281 fixes et
   déborde sur mobile. Même cadre que les images du corps. */
.snk-art__body .wp-block-embed.is-type-video .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--snk-ink);
  background: var(--snk-ink);
}
.snk-art__body .wp-block-embed.is-type-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.snk-art__body blockquote {
  margin: 14px 0;
  border-left: 6px solid var(--snk-violet);
  padding: 6px 0 6px 26px;
}
.snk-art__body blockquote p {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.snk-art__body blockquote cite,
.snk-art__body blockquote .wp-block-quote__citation {
  display: block;
  margin-top: 14px;
  font-family: var(--snk-sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
}

/* Encadré « À retenir » : un groupe Gutenberg à fond jaune. */
.snk-art__body .snk-keep,
.snk-art__body .wp-block-group.has-background {
  background: var(--snk-yellow);
  color: var(--snk-ink);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Le bloc Groupe de Gutenberg glisse un .wp-block-group__inner-container entre
   le groupe et son contenu (thème classique) : la colonne doit donc viser aussi
   ce conteneur, les marges par défaut des p/ul sautent, et le label se cherche
   en descendant, pas en enfant direct. */
.snk-art__body .snk-keep > .wp-block-group__inner-container,
.snk-art__body .wp-block-group.has-background > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.snk-art__body .snk-keep :is(p, ul, ol),
.snk-art__body .wp-block-group.has-background :is(p, ul, ol) { margin: 0; }
.snk-art__body .snk-keep p:not(:first-child) { font-size: 17px; line-height: 1.5; }
.snk-art__body .snk-keep p:first-child,
.snk-art__body .snk-keep__label {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.snk-art__body .snk-keep ul { font-size: 17px; line-height: 1.5; }

/* Tableaux : la CSS des blocs core n'est pas chargée, le thème habille donc
   le bloc Table lui-même. Le figure défile horizontalement sous la largeur
   minimale pour que la page ne déborde jamais en mobile. */
.snk-art__body .wp-block-table { overflow-x: auto; }
.snk-art__body .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 15px;
  line-height: 1.45;
}
.snk-art__body .wp-block-table th,
.snk-art__body .wp-block-table td {
  border: 2px solid var(--snk-ink);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.snk-art__body .wp-block-table th {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--snk-alt-bg);
}

/* Graphiques : une figure encadrée comme une image (cadre 2 px, ombre dure
   dans la couleur de rubrique), des barres en HTML/CSS qui héritent des
   polices et des couleurs du thème. La rédaction pose la valeur (0-100) dans
   --v sur chaque ligne ; la piste vaut --max (100 par défaut, l'échelle des
   pourcentages), à poser sur la figure ou sur une série pour une autre unité
   (euros, variations au-delà de 100 %). Balisage : figure.snk-chart > figcaption.snk-chart__head
   (titre + sous-titre), un ou plusieurs .snk-chart__set (p.snk-chart__group +
   dl.snk-chart__rows > div.snk-chart__row[style="--v:n"] > dt.snk-chart__label
   + dd.snk-chart__data > span.snk-chart__track > span.snk-chart__bar, puis
   span.snk-chart__val), et p.snk-chart__source. Modificateurs : .snk-chart__set--ink
   (série en encre), .snk-chart__row--dim (barre grise, hors sujet principal). */
.snk-art__body .snk-chart {
  margin: 6px 0;
  padding: 26px 30px 24px;
  border: 2px solid var(--snk-ink);
  box-shadow: 10px 10px 0 var(--snk-shc, var(--snk-violet));
  background: var(--snk-white);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* La règle générale des légendes (13 px, 55 %) ne vaut pas pour l'en-tête. */
.snk-art__body .snk-chart__head {
  margin: 0;
  opacity: 1;
  font-size: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.snk-art__body .snk-chart__title {
  display: block;
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.snk-art__body .snk-chart__sub {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  opacity: .7;
  text-wrap: pretty;
}
.snk-art__body .snk-chart__set {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Libellé de série, précédé de sa pastille de couleur : c'est la légende. */
.snk-art__body .snk-chart__group {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.snk-art__body .snk-chart__group::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--snk-rub, var(--snk-violet));
  border: 2px solid var(--snk-ink);
}
.snk-art__body .snk-chart__rows {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.snk-art__body .snk-chart__row {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: 0 14px;
  align-items: center;
}
.snk-art__body .snk-chart__label {
  font-size: 14px;
  line-height: 1.3;
  text-wrap: pretty;
}
/* La valeur a sa colonne : la barre garde la même échelle sur toutes les
   lignes et le chiffre ne vient jamais buter sur elle. */
.snk-art__body .snk-chart__data {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.2em;
  gap: 10px;
  align-items: center;
}
.snk-art__body .snk-chart__track { display: block; min-width: 0; }
.snk-art__body .snk-chart__bar {
  display: block;
  height: 22px;
  width: calc(var(--v, 0) / var(--max, 100) * 100%);
  background: var(--snk-rub, var(--snk-violet));
  border: 2px solid var(--snk-ink);
}
.snk-art__body .snk-chart__set--ink .snk-chart__group::before,
.snk-art__body .snk-chart__set--ink .snk-chart__bar { background: var(--snk-ink); }
.snk-art__body .snk-chart__row--dim .snk-chart__bar { background: var(--snk-alt-bg); }
.snk-art__body .snk-chart__val {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.snk-art__body .snk-chart__source {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: .55;
}
@media (max-width: 560px) {
  .snk-art__body .snk-chart {
    padding: 22px 18px 20px;
    box-shadow: 6px 6px 0 var(--snk-shc, var(--snk-violet));
  }
  /* Le libellé passe au-dessus de sa barre : une colonne de libellés
     mangerait la moitié d'un écran de téléphone. */
  .snk-art__body .snk-chart__row { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .snk-art__body .snk-chart__rows { gap: 12px; }
}

/* À lire aussi */
.snk-art__alsoin {
  max-width: var(--snk-read-wide);
  margin: 0 auto;
  padding: 48px var(--snk-gutter) 54px;
}
/* « À lire aussi » n'est plus un titre au sens du document (les suggestions ne
   font pas partie du plan de l'article) : le rendu, lui, ne change pas. */
.snk-art__alsotitle {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: var(--snk-yellow);
}
.snk-art__alsogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

/* Encart de fin d'article : logo puis boutons de téléchargement.
   Posé dans le contenu par la rédaction, donc stylé sur la classe et non sur
   la structure de blocs, qui peut varier d'un article à l'autre. */
/* Deux colonnes : la marque à gauche, l'action à droite. */
.snk-cta {
  margin: 8px 0 4px;
  padding: 30px 34px;
  border: 2px solid var(--snk-ink);
  box-shadow: 10px 10px 0 var(--snk-violet);
  background: var(--snk-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  text-align: center;
}
.snk-cta__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Le soulignement violet des liens de l'article barrait le bas des badges. */
.snk-art__body .snk-cta a { border-bottom: 0; }
/* Le logo carré domine, le nom passe en signature sous lui. */
.snk-cta__icon {
  width: 96px;
  height: auto;
  display: block;
}
.snk-cta__logo {
  width: 104px;
  height: auto;
  display: block;
}
/* Le logo carré et le mot-symbole forment un seul bloc, comme sur sokult.app. */
.snk-cta__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* Préfixé par .snk-art__body : sans ça, la règle des paragraphes d'article
   (plus spécifique) imposait 19 px à cette mention. */
.snk-art__body .snk-cta__label {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--snk-ink);
  opacity: .55;
}

/* Cinq étoiles au-dessus des badges. En SVG plutôt qu'en caractères Unicode,
   dont le dessin change d'une police système à l'autre. Jaune foncé de la
   charte : le jaune vif serait illisible sur ce fond blanc. */
.snk-cta__stars {
  display: flex;
  gap: 4px;
  color: var(--snk-yellow);
}
.snk-cta__stars svg {
  width: 28px;
  height: 28px;
  display: block;
}
.snk-cta__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Hauteur commune imposée : les deux badges n'ont pas le même rapport, et
   Apple comme Google interdisent de les déformer. */
.snk-cta__stores img {
  height: 46px;
  width: auto;
  display: block;
}
.snk-cta__stores a { display: block; }
.snk-cta__stores a:hover { opacity: .82; }

@media (max-width: 620px) {
  .snk-cta {
    flex-direction: column;
    gap: 22px;
    padding: 26px 20px 28px;
    box-shadow: 6px 6px 0 var(--snk-violet);
  }
  .snk-cta__stores img { height: 44px; }
}

/* Fiche de classement (« Les Tops ») : une entrée de top posée dans le contenu
   en bloc HTML, encadrée comme une image de la charte (cadre 2 px, ombre dure
   dans la couleur de rubrique). Quatre zones empilées, toutes facultatives sauf
   le chapeau : chapeau (kicker + rang + nom), bande de fiche technique en aplat violet
   (l'accent du corps d'article, comme les liens et le filet de citation), corps
   en prose, bande d'offre.
   Le rang vit DANS le h3 : le plan du document garde « 1 Pureva One ».
   Balisage : div.snk-top > div.snk-top__head (p.snk-top__eyebrow facultatif +
   h3.snk-top__name > span.snk-top__rank + span.snk-top__label), dl.snk-top__specs
   (div.snk-top__spec > dt + dd), div.snk-top__body (des p), p.snk-top__deal
   (span.snk-top__deallabel + texte). Photo produit ou logo d'éditeur : chapeau
   en --media ou --logo, identité dans div.snk-top__id, puis la figure. */
.snk-art__body .snk-top {
  margin: 6px 0;
  border: 2px solid var(--snk-ink);
  box-shadow: 10px 10px 0 var(--snk-shc, var(--snk-violet));
  background: var(--snk-white);
  display: flex;
  flex-direction: column;
}

/* Chapeau : le rang en carré plein, le nom à côté. */
.snk-art__body .snk-top__head {
  padding: 24px 30px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Mention éditoriale au-dessus du nom (« Notre choix », « Meilleur prix ») :
   elle distingue une entrée sans sortir du système de couleurs. */
.snk-art__body .snk-top__eyebrow {
  align-self: flex-start;
  margin: 0;
  background: var(--snk-ink);
  color: var(--snk-white);
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.snk-art__body .snk-top__name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Variante avec photo produit : le chapeau passe en ligne, l'identité à gauche,
   la photo à droite. Les sources produit sont petites (450 à 1080 px de côté),
   une bande pleine largeur les afficherait à 676 px, donc floues : le carré est
   plafonné à 190 px. Les fiches sans photo gardent le chapeau en colonne et le
   balisage d'origine, sans conteneur .snk-top__id. */
.snk-art__body .snk-top__head--media {
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
.snk-art__body .snk-top__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.snk-art__body .snk-top__photo {
  flex: none;
  width: 190px;
  margin: 0;
}
/* Ombre de vignette (6 px de la charte) : celle de la fiche fait 10 px, la
   photo se range dessous sans lui disputer le premier plan. */
.snk-art__body .snk-top__photo img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border: 2px solid var(--snk-ink);
  box-shadow: 6px 6px 0 var(--snk-shc, var(--snk-violet));
}

/* Variante avec logo : l'icône de l'éditeur (son favicon), à droite du nom.
   Sans cadre ni fond : un logo porte déjà sa forme, un cadre par-dessus le
   défigure (même règle que l'encart .snk-cta ; le carreau cerné de la 0.3.1 a
   été retiré à la demande de la rédaction). Contenu, jamais rogné. 64 px, la
   taille visible qu'avait le logo dans ce carreau : plus petit, un logo en
   largeur comme celui de Modulr devient illisible. Même conteneur
   .snk-top__id que la photo. */
.snk-art__body .snk-top__head--logo {
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
.snk-art__body .snk-top__logo {
  flex: none;
  width: 64px;
  margin: 0;
}
.snk-art__body .snk-top__logo img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: contain;
  border: 0;
}
.snk-art__body .snk-top__rank {
  flex: none;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: var(--snk-rub, var(--snk-violet));
  border: 2px solid var(--snk-ink);
  color: var(--snk-ink);
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.snk-art__body .snk-top__label {
  min-width: 0;
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* Fiche technique : la ligne « Technologie · Finesse · … » éclatée en lignes
   étiquetées, sur le fond des en-têtes de tableau. */
.snk-art__body .snk-top__specs {
  margin: 0;
  padding: 18px 30px;
  background: var(--snk-violet);
  color: var(--snk-white);
  border-top: 2px solid var(--snk-ink);
  border-bottom: 2px solid var(--snk-ink);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.snk-art__body .snk-top__spec {
  display: grid;
  grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr);
  gap: 0 14px;
  align-items: baseline;
}
/* Sur l'aplat violet, l'étiquette ne peut pas être atténuée : la hiérarchie
   avec la valeur tient sur la taille et les capitales, comme sur les badges. */
.snk-art__body .snk-top__spec dt {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.snk-art__body .snk-top__spec dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* Corps : le texte de l'entrée, à la taille des encadrés (17 px), pas à celle
   de la colonne de lecture. */
.snk-art__body .snk-top__body {
  padding: 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.snk-art__body .snk-top__body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

/* Bande d'offre : prix, garantie, conditions. Séparée par un filet, pastille
   de rubrique en tête. */
.snk-art__body .snk-top__deal {
  margin: 0;
  padding: 17px 30px 19px;
  border-top: 2px solid var(--snk-ink);
  /* Pastille au-dessus du texte, comme le label de « À retenir » : en ligne,
     elle sautait toute seule dès que l'offre dépassait une ligne. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.snk-art__body .snk-top__deallabel {
  flex: none;
  background: var(--snk-rub, var(--snk-violet));
  border: 2px solid var(--snk-ink);
  color: var(--snk-ink);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .snk-art__body .snk-top { box-shadow: 6px 6px 0 var(--snk-shc, var(--snk-violet)); }
  .snk-art__body .snk-top__head { padding: 20px 18px 18px; }
  .snk-art__body .snk-top__specs { padding: 16px 18px; }
  .snk-art__body .snk-top__body { padding: 20px 18px; }
  .snk-art__body .snk-top__deal { padding: 15px 18px 17px; }
  .snk-art__body .snk-top__name { gap: 14px; }
  .snk-art__body .snk-top__rank { width: 50px; height: 50px; font-size: 26px; }
  /* La photo passe sous le nom : en ligne, il ne resterait qu'une centaine de
     pixels au titre sur un écran de téléphone. */
  .snk-art__body .snk-top__head--media { flex-direction: column; align-items: stretch; gap: 18px; }
  .snk-art__body .snk-top__photo { width: 100%; }
  .snk-art__body .snk-top__photo img { height: auto; aspect-ratio: 1; }
  /* Le logo passe AU-DESSUS du nom : en ligne il ne laissait que 192 px au
     titre (jusqu'à 5 lignes), dessous il aurait séparé le titre de son texte. */
  .snk-art__body .snk-top__head--logo { flex-direction: column; align-items: flex-start; gap: 16px; }
  .snk-art__body .snk-top__logo { width: 48px; order: -1; }
  .snk-art__body .snk-top__logo img { height: 48px; }
  /* Une colonne d'étiquettes mangerait la moitié d'un écran de téléphone. */
  .snk-art__body .snk-top__spec { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
}