/* ══════════════════════════════════════════════════════════════════════════
   RESSOURCES — le centre de ressources Sylen
   Partagé par /ressources (la une) et /ressources/tous (le blog entier).

   Trois partis pris, dans l'ordre où ils comptent.

   1. UN SEUL SOL. La page entière repose sur l'ivoire #F2F2F3 de la charte,
      du nav au pied. Aucune bande de fond d'une autre couleur : sur une
      interface en relief, changer la couleur du sol détruit l'illusion,
      parce que la lumière ne tombe plus du même endroit d'une section à
      l'autre. Toute la profondeur vient des ombres, jamais des aplats.

   2. UNE OMBRE CHAUDE. L'ombre d'une surface ivoire n'est pas grise, elle
      est brun clair désaturé. Les ombres noires du reste du site rendaient
      le relief terreux ici ; on porte donc rgba(158,140,116,·) et une
      lumière blanc chaud.

   3. DU RELIEF IMBRIQUÉ. Une carte extrudée qui contient un puits creusé.
      C'est ce nid — et pas l'ombre seule — qui distingue le neumorphisme
      d'un simple bouton posé. D'où le ::after qui rejoue l'ombre interne
      PAR-DESSUS l'image : sans lui l'image recouvre le creux et la carte
      redevient plate.

   Les dégradés visibles restent interdits (CLAUDE.md §2). Les seuls ici
   sont des dégradés de matière : même teinte, moins de 5 % d'écart de
   luminance, sur la face d'une surface.
   ══════════════════════════════════════════════════════════════════════════ */

.res-page {
  /* ── Tout vient de socle.css ──
     Les valeurs vivaient ici en double. Le relief est passé de deux à cinq
     couches le 09/09/2026 : les redéfinir localement, c'était garantir la
     divergence au premier ajustement. */
  --r-face:      var(--face);
  --r-face-plat: var(--sol);
  --r-well:      var(--sol-creuse);

  --r-out:    var(--neu-3);
  --r-out-s:  var(--neu-2);
  --r-out-xs: var(--neu-1);
  --r-lift:   var(--neu-lift);
  --r-in:     var(--neu-in-3);
  --r-in-s:   var(--neu-in-2);
  --r-in-xs:  var(--neu-in-1);

  /* ── L'encre ── */
  --r-ink:    #1A1A1A;
  --r-ink-2:  #5A544A;
  --r-ink-3:  #928B7D;

  --r-ease:   cubic-bezier(0.22, 1, 0.36, 1);

  background: var(--bg);
}

/* Les accents de la charte, en deux niveaux.

   --acc      la couleur exacte de la marque, pour les points : purement
              décoratifs, donc libres de contraste.
   --acc-ink  la même teinte assombrie, pour les glyphes qui doivent se
              voir. Le rose #FF91E4 sur l'ivoire mesure 1,6:1 — une flèche
              dans cette couleur est invisible. Les variantes ci-dessous
              passent toutes les 3:1 exigés d'un élément graphique.

   Les libellés, eux, restent toujours en encre foncée. */
.a-blue   { --acc: #068FFF; --acc-ink: #0570CC; --tint: var(--tint-bleu); }
.a-pink   { --acc: #FF91E4; --acc-ink: #D45FB4; --tint: var(--tint-rose); }
.a-indigo { --acc: #6366F1; --acc-ink: #4F52D9; --tint: var(--tint-indigo); }
.a-amber  { --acc: #FF6B2B; --acc-ink: #D9500F; --tint: var(--tint-ambre); }
.a-green  { --acc: #00D084; --acc-ink: #009A61; --tint: var(--tint-vert); }
.res-page { --acc: #068FFF; --acc-ink: #0570CC; --tint: var(--tint-bleu); }

/* ══ HERO ═══════════════════════════════════════════════════════════════

   Trois éléments, une seule ligne d'horizon. La version précédente empilait
   un chapeau, un titre de soixante-huit pixels sur trois lignes, un
   paragraphe, une barre de recherche et une plaque de chiffres — il fallait
   dérouler six cents pixels avant de voir un seul article. Sur une page qui
   sert à trouver quelque chose, l'écran d'accueil doit livrer la recherche
   et la première carte ensemble.
   ═══════════════════════════════════════════════════════════════════════ */

/* Un cran en deçà du conteneur courant. À pleine largeur, le titre calé à
   gauche et la recherche calée à droite se retrouvaient à un mètre l'un de
   l'autre, et la ligne cessait de se lire comme un ensemble. */
.res-page .container { max-width: 1400px; }

.res-hero { padding: calc(var(--nav-h) + 34px) 0 0; }

/* Le titre et la recherche partagent une ligne, alignés sur leur milieu :
   la recherche cesse d'être un troisième étage et devient l'outil du
   titre. Le sous-titre passe dessous, où il ne retarde plus rien. */
.res-hero-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  align-items: center; gap: 40px;
}

.res-hero h1 {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.035em;
  color: var(--r-ink); margin: 0; max-width: 20ch; text-wrap: balance;
}
.res-hero h1 em { font-style: normal; color: var(--blue); }

.res-hero-sub {
  font-size: clamp(14.5px, 1.35vw, 16.5px); line-height: 1.55;
  color: var(--r-ink-2); max-width: 62ch; margin: 16px 0 0;
}
.res-hero-sub a { color: var(--r-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── La recherche : creusée, du MÊME ivoire que le sol. Un champ blanc posé
      sur une interface en relief se lit comme un trou de lumière ; un champ
      creusé se lit comme un champ. ── */
.res-search {
  display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0;
  background: var(--r-well); box-shadow: var(--r-in);
  border-radius: 999px; padding: 7px 7px 7px 22px;
  transition: box-shadow 0.3s var(--r-ease);
}
.res-search:focus-within { box-shadow: var(--r-in), 0 0 0 2px rgba(6,143,255,0.3); }
.res-search svg { flex: none; color: var(--r-ink-3); }
.res-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 15px; color: var(--r-ink); padding: 13px 0;
}
.res-search input::placeholder { color: #AEA69A; }
.res-knob {
  flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--r-face); box-shadow: var(--r-out-s);
  display: grid; place-items: center; color: var(--r-ink);
  transition: box-shadow 0.25s var(--r-ease), color 0.25s var(--r-ease);
}
.res-knob:hover { color: var(--blue); }
.res-knob:active { box-shadow: var(--r-in-s); }
.res-knob:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ══ TÊTES DE SECTION ═══════════════════════════════════════════════════ */

.res-sect { padding: clamp(34px, 4vw, 52px) 0 0; }

.res-sect--fin { padding-bottom: clamp(60px, 8vw, 96px); }

.res-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 30px; flex-wrap: wrap;
}
.res-head h2 {
  font-size: clamp(23px, 2.6vw, 31px); font-weight: 800; letter-spacing: -0.028em;
  line-height: 1.14; color: var(--r-ink); margin: 0;
}
.res-head p { font-size: 14.5px; color: var(--r-ink-3); margin: 8px 0 0; max-width: 52ch; }

.res-lien {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; color: var(--r-ink);
  background: var(--r-face); box-shadow: var(--r-out-xs);
  border-radius: 999px; padding: 11px 12px 11px 20px; text-decoration: none;
  transition: box-shadow 0.28s var(--r-ease), color 0.28s var(--r-ease);
}
.res-lien span {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--r-well); box-shadow: var(--r-in-xs); color: var(--blue);
}
.res-lien svg { width: 13px; height: 13px; }
.res-lien:hover { box-shadow: var(--r-in-xs); color: var(--r-ink); }

/* ══ LA GRILLE À LA UNE ═════════════════════════════════════════════════ */

.res-une {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Les rangs grandissent avec la fenêtre : à hauteur fixe, une carte
     portrait devenue deux fois plus large se serait aplatie en bandeau. */
  grid-auto-rows: clamp(310px, 23vw, 396px);
  gap: clamp(16px, 1.5vw, 26px);
}

/* ══ LA CARTE ═══════════════════════════════════════════════════════════ */

.rc {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 12px; border-radius: 28px;
  background: var(--r-face); box-shadow: var(--r-out-s);
  color: var(--r-ink); text-decoration: none; overflow: hidden;
  transition: box-shadow 0.4s var(--r-ease), transform 0.4s var(--r-ease);
}
.rc:hover,
.rc.reveal.visible:hover { transform: translateY(-5px); box-shadow: var(--r-lift); }
.rc:active,
.rc.reveal.visible:active { transform: translateY(0); box-shadow: var(--r-out-xs); }
.rc:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* Le puits d'image. Le ::after rejoue l'ombre interne au-dessus de la
   photo — sinon l'image bouche le creux et l'imbrication disparaît. */
.rc-well {
  position: relative; display: block; overflow: hidden; flex: none;
  border-radius: 22px; background: var(--r-well); box-shadow: var(--r-in-s);
}
.rc-well::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45),
              inset 4px 4px 10px rgba(120,104,84,0.30),
              inset -4px -4px 10px rgba(255,255,255,0.35);
}
.rc-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--r-ease);
}
.rc:hover .rc-img { transform: scale(1.04); }
.rc-well--vide { background: var(--tint); }

.rc-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 17px 15px 13px; }

/* La pastille de catégorie reprend le logo à neuf points, réduit à quatre. */
.rc-cat {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--r-ink-2); background: var(--r-well); box-shadow: var(--r-in-xs);
  border-radius: 999px; padding: 6px 14px 6px 10px;
}
/* Le Y de la marque, en miniature : neuf points, quatre allumés. */
.rc-quad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px;
  width: 13px; height: 13px; flex: none;
}
.rc-quad i { border-radius: 50%; background: var(--r-ink); opacity: 0.16; }
.rc-quad i:nth-child(1), .rc-quad i:nth-child(3),
.rc-quad i:nth-child(5), .rc-quad i:nth-child(8) { background: var(--acc); opacity: 1; }

.rc-title {
  font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.014em;
  color: var(--r-ink); margin: 12px 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-exc {
  font-size: 13.5px; line-height: 1.6; color: var(--r-ink-2); margin: 9px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.rc-foot {
  margin-top: auto; padding-top: 15px;
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; color: var(--r-ink-3); font-variant-numeric: tabular-nums;
}
.rc-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; flex: none; }
.rc-go {
  margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--acc-ink);
  background: var(--r-face); box-shadow: var(--r-out-xs);
  transition: box-shadow 0.3s var(--r-ease), transform 0.3s var(--r-ease);
}
.rc-go svg { width: 14px; height: 14px; }
.rc:hover .rc-go { box-shadow: var(--r-in-xs); transform: translateX(3px); }

/* ── Vedette : l'image occupe toute la carte, le texte flotte dessus sur
      une plaque opaque. Pas de voile dégradé sur la photo — la charte
      l'interdit, et une plaque se lit mieux qu'un texte sur image. ── */
.rc--vedette { grid-column: span 7; grid-row: span 2; border-radius: 28px; }
.rc--vedette .rc-well { position: absolute; inset: 12px; border-radius: 22px; }
.rc--vedette .rc-plaque {
  position: relative; z-index: 2; margin: auto 5px 5px; display: flex; flex-direction: column;
  padding: 26px 28px 20px; border-radius: 28px;
  background: var(--r-face);
  box-shadow: var(--r-out-xs), 0 22px 48px rgba(70,54,32,0.22);
}
.rc--vedette .rc-title {
  font-size: clamp(22px, 2.4vw, 29px); font-weight: 800; line-height: 1.14; letter-spacing: -0.03em;
  -webkit-line-clamp: 2; margin-top: 14px;
}
.rc--vedette .rc-exc { font-size: 14.5px; -webkit-line-clamp: 2; }

/* ── Portrait : puits en haut, texte dessous. ── */
.rc--portrait { grid-column: span 5; }
.rc--portrait .rc-well { height: 46%; }
.rc--portrait .rc-title { -webkit-line-clamp: 2; }

/* ── Duo : puits carré à gauche. ── */
.rc--duo { grid-column: span 5; flex-direction: row; align-items: stretch; gap: 15px; }
.rc--duo .rc-well { width: 43%; min-width: 140px; height: auto; border-radius: 22px; }
.rc--duo .rc-body { padding: 16px 14px 12px 0; }
.rc--duo .rc-title { -webkit-line-clamp: 4; }

/* ── Aplat : pas d'image, la teinte de la catégorie, un grand titre. Ce
      qui rompt la grille, c'est l'absence de photo autant que la couleur. ── */
.rc--aplat { grid-column: span 7; background: var(--tint); }
.rc--aplat .rc-body { position: relative; z-index: 1; padding: 30px 34px 24px; }
.rc--aplat .rc-cat { background: rgba(255,255,255,0.62); box-shadow: inset 1px 1px 3px rgba(120,104,84,0.14); }
.rc--aplat .rc-title {
  font-size: clamp(20px, 2.1vw, 26px); font-weight: 800; line-height: 1.2; letter-spacing: -0.025em;
  -webkit-line-clamp: 3; max-width: 24ch; margin-top: auto;
}
.rc--aplat .rc-foot { margin-top: 18px; }
.rc--aplat .rc-exc { font-size: 14px; max-width: 50ch; -webkit-line-clamp: 2; }
.rc--aplat .rc-go { background: rgba(255,255,255,0.7); box-shadow: 2px 2px 6px rgba(120,104,84,0.14), -2px -2px 6px rgba(255,255,255,0.7); }
.rc-filigrane {
  position: absolute; right: 26px; top: 24px; z-index: 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; width: 106px; height: 106px;
}
/* Les points hors du Y restent presque éteints : à opacité égale, on ne
   voyait qu'une grille de neuf points, pas la marque. */
.rc-filigrane i { border-radius: 50%; background: var(--acc); opacity: 0.06; }
.rc-filigrane i:nth-child(1), .rc-filigrane i:nth-child(3),
.rc-filigrane i:nth-child(5), .rc-filigrane i:nth-child(8) { opacity: 0.34; }

/* ══ TUILES DE CATÉGORIE ════════════════════════════════════════════════ */

.res-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.2vw, 22px); }
.rt {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 22px 20px 20px; border-radius: 28px;
  background: var(--r-face); box-shadow: var(--r-out-s);
  text-decoration: none; color: var(--r-ink);
  transition: box-shadow 0.4s var(--r-ease), transform 0.4s var(--r-ease);
}
.rt:hover,
.rt.reveal.visible:hover { transform: translateY(-4px); box-shadow: var(--r-lift); }
.rt:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
/* Le glyphe est le logo Sylen : neuf points, la diagonale en couleur. */
.rt-glyphe {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  width: 34px; height: 34px; margin-bottom: 18px;
}
.rt-glyphe i { border-radius: 50%; background: var(--r-ink); opacity: 0.14; }
.rt-glyphe i:nth-child(1), .rt-glyphe i:nth-child(3),
.rt-glyphe i:nth-child(5), .rt-glyphe i:nth-child(8) { background: var(--acc); opacity: 1; }
.rt-label { font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.rt-total {
  align-self: flex-start; margin-top: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--r-ink-3);
  font-variant-numeric: tabular-nums;
  background: var(--r-well); box-shadow: var(--r-in-xs);
  border-radius: 999px; padding: 5px 12px;
}
.rt::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px;
  border-radius: 8px 8px 0 0; background: var(--acc);
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--r-ease);
}
.rt:hover::after { transform: scaleX(1); }

/* ══ LA LISTE DES DERNIERS PUBLIÉS ══════════════════════════════════════ */

.res-liste {
  display: flex; flex-direction: column;
  padding: 10px; border-radius: 28px;
  background: var(--r-well); box-shadow: var(--r-in);
}
.rl {
  position: relative; display: flex; align-items: center; gap: 20px;
  padding: 18px 22px; border-radius: 18px;
  text-decoration: none; color: var(--r-ink);
  transition: box-shadow 0.3s var(--r-ease), background 0.3s var(--r-ease);
}
.rl + .rl::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 1px;
  background: rgba(158,140,116,0.2);
}
.rl:hover { background: var(--r-face); box-shadow: var(--r-out-xs); }
.rl:hover::before, .rl:hover + .rl::before { opacity: 0; }
.rl:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rl-num {
  flex: none; width: 26px; font-size: 12px; font-weight: 800; color: #BDB4A4;
  font-variant-numeric: tabular-nums;
}
.rl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rl-cat {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--r-ink-3);
}
.rl-cat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.rl-title {
  font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rl-min { flex: none; font-size: 11.5px; color: var(--r-ink-3); font-variant-numeric: tabular-nums; }
.rl-go {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: var(--acc-ink); background: var(--r-well); box-shadow: var(--r-in-xs);
  transition: box-shadow 0.3s var(--r-ease), transform 0.3s var(--r-ease);
}
.rl-go svg { width: 13px; height: 13px; }
.rl:hover .rl-go { box-shadow: var(--r-out-xs); transform: translateX(3px); }

/* ══ LA PLAQUE « TOUT LE BLOG » ═════════════════════════════════════════ */

.res-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  padding: 36px 40px; border-radius: 28px;
  background: var(--r-face); box-shadow: var(--r-out);
}
.res-cta h2 { font-size: clamp(21px, 2.3vw, 27px); font-weight: 800; letter-spacing: -0.028em; margin: 0; line-height: 1.18; }
.res-cta p { font-size: 14.5px; color: var(--r-ink-3); margin: 9px 0 0; max-width: 48ch; }
.res-btn {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  padding: 12px 12px 12px 26px; border-radius: 999px;
  background: var(--r-ink); color: #EDEDEF; text-decoration: none;
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 8px 10px 22px rgba(60,45,25,0.26), -6px -6px 16px rgba(255,255,255,0.8);
  transition: box-shadow 0.3s var(--r-ease), transform 0.3s var(--r-ease);
}
.res-btn span {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.13); color: #EDEDEF;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4), inset -1px -1px 3px rgba(255,255,255,0.14);
  transition: transform 0.3s var(--r-ease);
}
.res-btn svg { width: 15px; height: 15px; }
.res-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: 10px 14px 30px rgba(60,45,25,0.32), -6px -6px 16px rgba(255,255,255,0.85); }
.res-btn:hover span { transform: translateX(3px); }
.res-btn:active { transform: translateY(0); box-shadow: 4px 5px 12px rgba(60,45,25,0.28); }
.res-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* ══ LES RACCOURCIS DE BAS DE PAGE ══════════════════════════════════════ */

.res-liens { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1vw, 18px); }
.rlk {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; border-radius: 18px;
  background: var(--r-face); box-shadow: var(--r-out-xs);
  text-decoration: none; color: var(--r-ink);
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  transition: box-shadow 0.3s var(--r-ease), transform 0.3s var(--r-ease);
}
.rlk-ic {
  flex: none; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; color: var(--acc-ink);
  background: var(--r-well); box-shadow: var(--r-in-xs);
}
.rlk-ic svg { width: 16px; height: 16px; }
.rlk:hover { transform: translateY(-2px); color: var(--r-ink); box-shadow: var(--r-out-s); }
.rlk:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* [hidden] ne l'emporte pas sur un display d'auteur : sans ce rappel, le
   filtre posait bien l'attribut mais la carte restait affichée en flex —
   des filtres qui ne filtrent rien. */
.rc[hidden], .rt[hidden], .rl[hidden], .res-grille[hidden], .res-vide[hidden], .res-knob[hidden] {
  display: none !important;
}

/* ══ LA PAGE « TOUT LE BLOG » ═══════════════════════════════════════════ */

.res-barre { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.rf-track {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  padding: 6px; border-radius: 999px;
  background: var(--r-well); box-shadow: var(--r-in);
}
.rf-tab {
  border: 0; background: none; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--r-ink-2);
  padding: 10px 18px; border-radius: 999px;
  transition: box-shadow 0.3s var(--r-ease), color 0.3s var(--r-ease), background 0.3s var(--r-ease);
}
.rf-n { font-size: 10.5px; font-weight: 700; color: var(--r-ink-3); font-variant-numeric: tabular-nums; }
.rf-tab:hover { color: var(--r-ink); }
.rf-tab.active { background: var(--r-face); color: var(--r-ink); box-shadow: var(--r-out-xs); }
.rf-tab.active .rf-n { color: var(--acc-ink); }
.rf-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.res-compte { font-size: 12.5px; font-weight: 600; color: var(--r-ink-3); font-variant-numeric: tabular-nums; }

.res-grille { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(320px, 24vw, 410px); gap: clamp(16px, 1.5vw, 26px); grid-auto-flow: row dense; }
.res-grille .rc--portrait { grid-column: span 4; }
.res-grille .rc--portrait .rc-well { height: 42%; }
.res-grille .rc--portrait .rc-title { -webkit-line-clamp: 3; }
.res-grille .rc--duo { grid-column: span 8; }
.res-grille .rc--aplat { grid-column: span 4; }
.res-grille .rc--aplat .rc-body { padding: 26px 26px 20px; }
.res-grille .rc--aplat .rc-title { max-width: none; }
.res-grille .rc--aplat .rc-title { font-size: 20px; -webkit-line-clamp: 3; }
.res-grille .rc--aplat .rc-exc { -webkit-line-clamp: 2; }
.res-grille .rc-filigrane { width: 62px; height: 62px; gap: 8px; right: 20px; top: 20px; }

/* La carte de clôture : quand il reste un seul article pour finir le
   dernier rang, elle le prend en pleine largeur plutôt que de laisser
   deux tiers de rang vides. */
.res-grille .rc--pleine { grid-column: span 12; flex-direction: row; align-items: stretch; gap: 18px; }
.res-grille .rc--pleine .rc-well { width: 38%; min-width: 220px; border-radius: 22px; }
.res-grille .rc--pleine .rc-body { padding: 22px 22px 16px 4px; }
.res-grille .rc--pleine .rc-title { font-size: clamp(19px, 1.9vw, 24px); font-weight: 800; letter-spacing: -0.024em; -webkit-line-clamp: 2; }
.res-grille .rc--pleine .rc-exc { font-size: 14.5px; -webkit-line-clamp: 3; }

.res-vide { grid-column: 1 / -1; text-align: center; padding: 70px 20px; color: var(--r-ink-3); }
.res-vide-ic {
  width: 66px; height: 66px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; color: var(--r-ink-3);
  background: var(--r-well); box-shadow: var(--r-in-s);
}
.res-vide strong { display: block; font-size: 16.5px; color: var(--r-ink); margin-bottom: 6px; }
.res-vide span { font-size: 13.5px; }

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {

  .res-une, .res-grille { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 280px; }
  .rc--vedette { grid-column: span 6; grid-row: span 2; }
  .rc--portrait, .res-grille .rc--portrait { grid-column: span 3; }
  .rc--duo, .res-grille .rc--duo { grid-column: span 6; }
  .res-grille .rc--pleine { grid-column: span 6; }
  .rc--aplat, .res-grille .rc--aplat { grid-column: span 6; }

  .res-cats { grid-template-columns: repeat(3, 1fr); }
  .res-liens { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .res-hero { padding-top: calc(var(--nav-h) + 44px); }
  .res-une, .res-grille { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
  .rc { grid-column: auto !important; grid-row: auto !important; border-radius: 28px; }
  .rc--vedette { border-radius: 28px; min-height: 460px; }
  .rc--vedette .rc-plaque { padding: 22px 22px 18px; }
  .rc--portrait .rc-well { height: 178px; }
  .rc--duo, .res-grille .rc--pleine { flex-direction: row; }
  .res-grille .rc--pleine .rc-well { width: 38%; min-width: 118px; }
  .res-grille .rc--pleine .rc-body { padding: 16px 14px 12px 0; }
  .res-grille .rc--pleine .rc-title { font-size: 15px; -webkit-line-clamp: 3; }
  .res-grille .rc--pleine .rc-exc { display: none; }
  .rc--duo .rc-well { width: 38%; min-width: 118px; }
  .rc--duo .rc-title { -webkit-line-clamp: 3; font-size: 15px; }
  .rc--aplat .rc-body { padding: 24px 24px 18px; }
  .res-cats { grid-template-columns: repeat(2, 1fr); }
  .res-liens { grid-template-columns: 1fr; }
  
  .res-liste { border-radius: 22px; padding: 8px; }
  .rl { padding: 15px 16px; gap: 14px; }
  .rl-num { display: none; }
  .rl-min { display: none; }
  .rl-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .res-cta { padding: 28px 24px; border-radius: 28px; }
  .res-hero-top { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .res-barre { gap: 14px; }
  .rf-track { width: 100%; }
}

/* Pas de passage à seize colonnes. Le conteneur des ressources est plafonné
   à 1400 px, soit 1272 px de contenu : douze colonnes y donnent des cartes
   d'environ cinq cents pixels, à la bonne proportion. Seize colonnes les
   réduisaient à trois cents et cassaient les titres en escalier — plus
   large ne veut pas dire plus de colonnes. */

@media (prefers-reduced-motion: reduce) {
  .rc, .rt, .rl, .rlk, .res-btn, .rc-img, .rc-go, .rl-go, .rt::after,
  .res-une > .reveal, .res-grille > .reveal, .res-cats > .reveal, .res-liens > .reveal {
    transition: none !important; transition-delay: 0s !important;
  }
  .rc:hover, .rt:hover, .rlk:hover, .res-btn:hover,
  .rc.reveal.visible:hover, .rt.reveal.visible:hover { transform: none; }
  .rc:hover .rc-img { transform: none; }
}