/* ============================================================
   ALYRIAZ — Styles principaux
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:        #04040C;
  --surface:   #0A0A1A;
  --surface2:  #0F0F24;
  --accent:    #7C3AED;
  --accent2:   #06B6D4;
  --green:     #059669;
  --red:       #DC2626;
  --amber:     #F59E0B;
  --text:      #F1F5F9;
  --muted:     #64748B;
  --border:    rgba(124, 58, 237, 0.18);
  --glow:      rgba(124, 58, 237, 0.35);
  --radius:    12px;
  --radius-lg: 20px;
  --font-display: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --nav-h:     64px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  /* `hidden` sur un axe force l'autre a `auto` : body devient alors un
     conteneur de defilement, et TOUT `position: sticky` a l'interieur
     cesse de coller sans le moindre message d'erreur. C'est ce qui
     empechait le hero de l'Academie de rester epingle. `clip` coupe le
     debordement horizontal sans creer de conteneur de defilement. La
     ligne `hidden` reste au-dessus comme repli pour les navigateurs qui
     ne connaissent pas `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* ── Le fond du site ─────────────────────────────────────────
   Un voile de grain occupait cette place jusqu'au 12/08/2026 : une
   texture de bruit posee PAR-DESSUS toute la page, a z-index 9999. Deux
   choses lui ont ete reprochees, et les deux etaient justes.

   D'abord il n'etait pas beau. Sur les pages calmes — l'article,
   l'A propos, Lyriaz — il salissait des aplats sombres au lieu de leur
   donner de la matiere. La page Academie, qui posait deja ses propres
   degrades a la place, etait la seule a en etre exempte : c'est
   exactement celle qu'on citait comme reussie.

   Ensuite il coutait cher pour ca. Une couche plein ecran en position
   fixe, au-dessus de tout, que le navigateur doit recomposer a chaque
   image pendant qu'on defile, par-dessus tout ce qui bouge dessous.

   On reprend donc le traitement de l'Academie, etendu a tout le site :
   de larges halos tres dilues aux deux couleurs de la marque, et une
   trame de lignes a la limite du visible qui rend la matiere que le
   grain apportait, sans le bruit.

   DEUX POINTS QUI COMPTENT. La couche passe DERRIERE le contenu
   (z-index negatif) au lieu d'etre par-dessus : elle n'a plus rien a
   melanger avec ce qui s'anime. Et elle est entierement statique, donc
   peinte une seule fois. Elle peut rester sur telephone, ou le grain
   avait du etre coupe.

   Les pages qui redefinissent `body::before` dans leur propre <style>
   (Academie, glossaire, dossier, mentions...) gardent le leur : elles
   avaient deja fait ce travail dans leur coin. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    /* La trame : une ligne tous les 28 px, a 1,5 % de blanc, et aux
       bords ADOUCIS. Une bande a bords francs, prise en diagonale et
       rendue sur un ecran a trois pixels physiques par pixel CSS,
       cremelle et se met a scintiller au defilement. En passant par
       zero de chaque cote, la ligne se fond et le probleme disparait.

       A 1,5 %, on ne voit pas des lignes : on voit un noir qui n'est
       pas plat. C'est tout ce qu'on lui demande, et c'est ce que le
       grain apportait sans le bruit. */
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0.015) 1px,
      rgba(255, 255, 255, 0) 2.5px,
      rgba(255, 255, 255, 0) 28px),
    /* les halos, en haut au centre, puis a droite, puis en bas a
       gauche : un eclairage, pas un decor. */
    radial-gradient(58% 42% at 50% -8%, rgba(124, 58, 237, 0.20), transparent 62%),
    radial-gradient(46% 38% at 90% 8%, rgba(34, 211, 238, 0.085), transparent 64%),
    radial-gradient(55% 44% at 6% 68%, rgba(124, 58, 237, 0.095), transparent 68%);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; }

.mono { font-family: var(--font-mono); }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

/* ── Navbar ─────────────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px);
  z-index: 1000;
  transition: background 0.3s, backdrop-filter 0.3s, border-bottom 0.3s;
}
#navbar.scrolled {
  background: rgba(4, 4, 12, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #fff 0%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-logo span { color: var(--accent); -webkit-text-fill-color: var(--accent); }

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }

.nav-cta {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(124, 58, 237, 0.1);
  color: var(--accent2);
  transition: all 0.2s;
  letter-spacing: 0.02em;
}
.nav-cta:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--glow);
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#neural-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.65;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, var(--bg) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 860px;
  padding: 0 clamp(16px, 4vw, 32px);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 6px 14px;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 100px;
  background: rgba(6, 182, 212, 0.07);
}
.hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent2);
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

.hero-title {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 24px;
}
.hero-title .line-accent {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--muted);
  max-width: 540px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.hero-cta-group {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary {
  padding: 14px 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: all 0.25s;
  box-shadow: 0 4px 30px rgba(124, 58, 237, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(124, 58, 237, 0.55);
}

.btn-ghost {
  padding: 14px 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.25s;
}
.btn-ghost:hover {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.08);
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce 2.5s ease infinite;
}
.hero-scroll::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--muted), transparent);
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ── Stats bar ──────────────────────────────────────────────── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.stat-item {
  padding: 24px;
  text-align: center;
  border-right: 1px solid var(--border);
  transition: background 0.2s;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: var(--surface2); }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Principles bar ─────────────────────────────────────────── */
.principles-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.principle-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px 24px;
  border-right: 1px solid var(--border);
  transition: background 0.2s;
}
.principle-item:last-child { border-right: none; }
.principle-item:hover { background: var(--surface2); }
.principle-icon {
  font-size: 1.9rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.35));
}
.principle-text h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.principle-text p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 900px) {
  .principles-bar { grid-template-columns: repeat(2, 1fr); }
  .principle-item:nth-child(2) { border-right: none; }
  .principle-item:nth-child(1),
  .principle-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 768px) {
  /* Cache la barre de principes sur mobile — prend trop de place */
  .principles-bar { display: none !important; }
}

/* ── Main layout ────────────────────────────────────────────── */
.main-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* La bibliothèque d'articles, elle seule, respire au-delà de 1280 px :
   sur un écran large la grille restait à trois colonnes avec 600 px de
   marge vide de chaque côté. On ne touche PAS aux autres pages — la
   ligne de lecture d'un article est plafonnée à 880 px, et l'élargir
   la rendrait pénible à lire. */
#articles.main-container { max-width: min(1760px, 94vw); }

.section {
  padding: 80px 0;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-title span {
  color: var(--text);
  margin-left: 8px;
}
.section-link {
  font-size: 0.82rem;
  color: var(--accent2);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: opacity 0.2s;
}
.section-link:hover { opacity: 0.7; }

/* ── Category filters & Sorting ───────────────────────────────────────── */
.filters-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sorting {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sorting label {
  color: var(--muted);
  font-size: 0.9rem;
}
.sort-select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  cursor: pointer;
  outline: none;
}
.filter-btn {
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}
/* Le nombre d'articles, affiché dans la pastille : on sait ce qu'il y a
   dans une catégorie AVANT de cliquer, au lieu de tomber sur deux
   articles. Discret, il ne doit pas concurrencer le nom. */
.filter-count {
  opacity: 0.55;
  font-size: 0.85em;
  margin-left: 3px;
  font-variant-numeric: tabular-nums;
}
.filter-btn.active .filter-count { opacity: 0.8; }

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

/* ── Featured card ──────────────────────────────────────────── */
#featured-container {
  margin-bottom: 48px;
}

.featured-card:hover {
  box-shadow: 0 20px 60px rgba(124, 58, 237, 0.3);
}
.featured-bg {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  transition: opacity 0.3s;
}
.featured-card:hover .featured-bg { opacity: 0.28; }

/* Newspaper diagonal line */
.featured-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, var(--accent), transparent);
  opacity: 0.4;
}

.featured-content {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4vw, 52px);
  max-width: 680px;
}
.featured-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin: 14px 0 12px;
  letter-spacing: -0.02em;
}
.featured-subtitle {
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.featured-excerpt {
  font-size: 0.95rem;
  color: rgba(241, 245, 249, 0.7);
  margin-bottom: 24px;
  line-height: 1.7;
}
.featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent2);
  letter-spacing: 0.02em;
  padding: 10px 0;
  border-bottom: 1px solid rgba(6, 182, 212, 0.3);
  transition: gap 0.2s;
}
.featured-card:hover .featured-cta { gap: 14px; }
.featured-cta .arrow { transition: transform 0.2s; }
.featured-card:hover .featured-cta .arrow { transform: translateX(4px); }

.featured-tags {
  position: absolute;
  bottom: 28px;
  right: 28px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Featured image support ──────────────────────────────────── */
.featured-bg[data-has-img="true"] {
  opacity: 1 !important;
  position: absolute;
  inset: 0;
}

/* ── Article grid ───────────────────────────────────────────── */
/* La grille était figée à 3 colonnes quelle que soit la largeur : sur un
   écran très large, trois cartes au milieu et deux immenses marges vides.
   `auto-fill` ajoute des colonnes quand la place existe, sans jamais
   descendre une carte sous 320 px. */
#articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* ── Pagination ─────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
  margin: 44px 0 8px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.page-numeros { display: inline-flex; align-items: center; gap: 8px; }

.page-btn {
  min-width: 48px; height: 48px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.11);
  color: var(--text); font-family: var(--font-mono);
  font-size: 0.9rem; letter-spacing: 0.02em;
  transition: background .2s, border-color .2s, transform .12s;
}
.page-btn:hover:not(:disabled) {
  background: rgba(124,58,237,0.18);
  border-color: rgba(124,58,237,0.5);
}
.page-btn:active:not(:disabled) { transform: scale(0.96); }
.page-btn.active {
  background: linear-gradient(135deg, #7C3AED, #06B6D4);
  border-color: transparent; color: #fff; font-weight: 700;
}
.page-btn:disabled { opacity: 0.28; cursor: default; }
.page-chev { font-size: 1.35rem; line-height: 1; margin-top: -2px; }
.page-nav { padding: 0 18px; }
.page-gap { color: var(--muted); padding: 0 2px; }

/* « Page 2 sur 14 » : l'information que les numéros ne donnent pas
   d'un coup d'œil. Masqué sur grand écran, où les numéros suffisent. */
.page-etat { display: none; }
.page-info {
  margin-left: 12px; color: var(--muted);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
}

@media (max-width: 640px) {
  /* Les numéros serrés étaient illisibles et durs à viser au pouce :
     deux grands boutons nommés, et l'état au milieu. Les numéros
     restent dans le DOM pour le desktop, on les masque ici. */
  .pagination {
    gap: 10px; margin: 32px 0 4px; padding-top: 22px;
    justify-content: space-between;
  }
  .page-numeros { display: none; }
  .page-etat {
    display: block; order: 2; flex: 1;
    text-align: center; color: var(--muted);
    font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  }
  .page-etat b { color: var(--text); font-size: 1rem; }
  .page-nav { order: 1; min-width: 0; height: 52px; padding: 0 16px; }
  .page-nav:last-of-type { order: 3; }
  .page-mot { font-size: 0.82rem; }
  .page-info { order: 4; flex-basis: 100%; text-align: center; margin: 6px 0 0; }
}
/* Sous 380 px, « Précédent » et « Suivant » ne tiennent plus à côté de
   l'état : on garde les chevrons seuls, en cible large. */
@media (max-width: 380px) {
  .page-mot { display: none; }
  .page-nav { min-width: 58px; padding: 0 12px; }
}

/* ── Card thumbnail ─────────────────────────────────────────── */
.card-thumb {
  width: 100%;
  /* Ratio et non hauteur fixe : la grille decide du nombre de colonnes
     selon la largeur disponible, la vignette doit suivre. Une hauteur
     figee donnait un bandeau ecrase dans une carte large et une image
     trop haute dans une carte etroite. */
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  flex-shrink: 0;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.article-card:hover .card-thumb img { transform: scale(1.04); }
.card-thumb-gradient {
  opacity: 0.5;
}
.article-card.wide .card-thumb { aspect-ratio: 21 / 9; height: auto; }

.article-card {
  display: block;
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.3s,
              box-shadow 0.35s;
  will-change: transform;
  opacity: 0;
  transform: translateY(20px);
}
.article-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease,
              border-color 0.3s, box-shadow 0.35s,
              filter 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.article-card:hover {
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.2);
}

.article-card.wide {
  grid-column: span 2;
}

.card-accent-line {
  height: 3px;
  width: 100%;
}
.card-body {
  padding: 24px;
}
.card-title {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  margin: 10px 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.card-excerpt {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-gradient-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.article-card:hover .card-gradient-overlay { opacity: 0.08; }

/* ── Category badge ─────────────────────────────────────────── */
.category-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--cat-color) 15%, transparent);
  color: var(--cat-color);
  border: 1px solid color-mix(in srgb, var(--cat-color) 30%, transparent);
}

/* Conteneur pour plusieurs badges catégorie */
.cat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* Badge difficulté (sur page article + featured) */
.difficulty-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--diff-color) 18%, transparent);
  color: var(--diff-color);
  border: 1px solid color-mix(in srgb, var(--diff-color) 35%, transparent);
}

/* ── Article meta ───────────────────────────────────────────── */
.article-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.meta-sep { opacity: 0.5; }
.meta-author { font-weight: 600; color: rgba(241, 245, 249, 0.6); }

/* ── Tags ───────────────────────────────────────────────────── */
.tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.04em;
}

/* ── Ticker ─────────────────────────────────────────────────── */
.ticker-wrap {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  overflow: hidden;
  position: relative;
}
.ticker-wrap::before,
.ticker-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
}
.ticker-wrap::before { left: 0;  background: linear-gradient(to right, var(--surface), transparent); }
.ticker-wrap::after  { right: 0; background: linear-gradient(to left,  var(--surface), transparent); }

.ticker-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 24px;
  position: relative;
  z-index: 3;
  background: var(--surface);
  white-space: nowrap;
}

.ticker-track {
  display: flex;
  gap: 48px;
  animation: ticker 25s linear infinite;
  white-space: nowrap;
}
.ticker-item {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ticker-item::before {
  content: '//';
  color: var(--accent);
  opacity: 0.5;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Footer ─────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 48px clamp(16px, 4vw, 48px);
  margin-top: 80px;
}
.footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand p {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 12px;
  max-width: 280px;
  line-height: 1.7;
}
.footer-col h4 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.875rem; color: rgba(241, 245, 249, 0.55); transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Publicités ─────────────────────────────────────────────── */
.ad-slot {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 40px 0;
}
.ad-slot-banner {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 90px;
  border: 1px dashed rgba(100, 116, 139, 0.3);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(100, 116, 139, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.015);
}

/* ── Nav actions ────────────────────────────────────────────── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-area {
  display: flex;
  align-items: center;
}

/* ── User avatar dropdown ──────────────────────────────────── */
.user-avatar-wrap {
  position: relative;
  cursor: pointer;
}
.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: border-color 0.2s, box-shadow 0.2s;
  object-fit: cover;
}
.user-avatar:hover {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--glow);
}
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 2000;
}
.user-dropdown.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.user-dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.user-dropdown-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.user-dropdown-email {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--font-mono);
}
.user-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--font-body);
  text-align: left;
}
.user-dropdown-item:hover {
  background: rgba(124, 58, 237, 0.1);
}
.user-dropdown-logout {
  color: #F87171;
}

/* ── Google Sign-In Button ─────────────────────────────────── */
.google-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Card social bar ───────────────────────────────────────── */
.card-social-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px 12px;
  border-top: 1px solid rgba(124, 58, 237, 0.1);
  position: relative;
  z-index: 5;
}
.featured-card .card-social-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 24px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(to top, rgba(4, 4, 12, 0.6), transparent);
}

/* ── Card link wrapping ────────────────────────────────────── */
.featured-card {
  display: block;
  position: relative;
  min-height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s;
  will-change: transform;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}
.featured-card-link {
  display: block;
  min-height: 420px;
}
.card-link {
  display: block;
}

/* ── Social buttons ────────────────────────────────────────── */
.social-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.2s;
}
.social-btn:hover {
  background: rgba(124, 58, 237, 0.15);
  color: var(--text);
}
.social-btn.liked {
  color: #F87171;
}
.social-btn.liked:hover {
  background: rgba(248, 113, 113, 0.15);
}
.like-count {
  min-width: 8px;
}

/* ── Article social bar (large) ────────────────────────────── */
.article-social-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.social-btn-lg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.88rem;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.social-btn-lg:hover {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.08);
  color: var(--text);
}
.social-btn-lg.liked {
  color: #F87171;
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.08);
}
.social-btn-lg.liked:hover {
  background: rgba(248, 113, 113, 0.15);
}

/* ── Comments section ──────────────────────────────────────── */
.comments-section {
  margin: 48px 0 64px;
}
.comments-header h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.comments-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Comment form ──────────────────────────────────────────── */
.comment-form {
  display: flex;
  gap: 14px;
  margin-bottom: 32px;
}
.comment-form-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  object-fit: cover;
}
.comment-form-body {
  flex: 1;
}
.comment-form-body textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 14px 16px;
  line-height: 1.6;
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.comment-form-body textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.comment-form-body textarea::placeholder {
  color: var(--muted);
}
.comment-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.comment-char-count {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--muted);
}
.btn-comment-submit {
  padding: 8px 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.3);
}
.btn-comment-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5);
}

/* ── Comment login prompt ──────────────────────────────────── */
.comment-login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 32px;
  text-align: center;
}
.comment-login-prompt p {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ── Comments list ─────────────────────────────────────────── */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.comment-item {
  display: flex;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(124, 58, 237, 0.08);
  animation: fadeUp 0.3s ease forwards;
}
.comment-item:last-child {
  border-bottom: none;
}
.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
  object-fit: cover;
}
.comment-body {
  flex: 1;
  min-width: 0;
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.comment-author {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
}
.comment-date {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--muted);
}
.comment-delete {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
  line-height: 1;
}
.comment-delete:hover {
  background: rgba(248, 113, 113, 0.15);
  color: #F87171;
}
.comment-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(241, 245, 249, 0.8);
  word-wrap: break-word;
}
.comments-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  border: 1px dashed rgba(100, 116, 139, 0.2);
  border-radius: var(--radius);
}

/* ── Toast notification ────────────────────────────────────── */
#alyriaz-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 14px 28px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.4);
  z-index: 10000;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  white-space: nowrap;
}
#alyriaz-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #articles-grid { grid-template-columns: repeat(2, 1fr); }
  .article-card.wide { grid-column: span 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #about .section > div[style] {
    grid-template-columns: 1fr !important;
  }
  .article-social-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .social-btn-lg {
    font-size: 0.8rem;
    padding: 8px 14px;
  }
  .comment-form {
    gap: 10px;
  }
  .comment-form-avatar {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 640px) {
  #articles-grid { grid-template-columns: 1fr; }
  .article-card.wide { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px; }
  .nav-links { display: none; }
  .google-signin-btn { transform: scale(0.85); transform-origin: right center; }
  
  .filters-container {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .sorting {
    justify-content: space-between;
  }
  .sort-select {
    flex-grow: 1;
    max-width: 200px;
  }
  .featured-card .card-social-bar {
    position: relative;
    background: var(--surface);
  }
}

/* ============================================================
   AUTH — Bouton nav, icône search, modal Google + local
   ============================================================ */
.nav-search-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  cursor: pointer; transition: all 0.2s;
}
.nav-search-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(124,58,237,0.08); }

.auth-open-btn {
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}
.auth-open-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124,58,237,0.5); }
.auth-open-btn:active { transform: scale(0.97); }

/* ── Modal ─── */
.auth-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.auth-modal.open { display: flex; }
.auth-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(4,4,12,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.auth-modal-panel {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: auth-pop 0.25s cubic-bezier(0.23,1,0.32,1);
  max-height: 90vh; overflow-y: auto;
}
@keyframes auth-pop { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }

.auth-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent; border: none;
  color: var(--muted); font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.auth-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.auth-modal-header { text-align: center; margin-bottom: 20px; }
.auth-modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700;
  color: var(--text); margin-bottom: 6px;
}
.auth-modal-title span { color: var(--accent); }
.auth-modal-sub { font-size: 0.85rem; color: var(--muted); }

.auth-google-slot { display: flex; justify-content: center; margin-bottom: 18px; min-height: 44px; }

.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  font-family: 'Roboto', var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;
}
.auth-google-btn:hover { box-shadow: 0 2px 14px rgba(124,58,237,0.15); }
.auth-google-btn:active { transform: scale(0.98); }
.auth-google-btn svg { flex-shrink: 0; }

.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0;
  color: var(--muted); font-size: 0.72rem;
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.auth-tab {
  flex: 1; padding: 8px 12px;
  background: transparent; border: none;
  color: var(--muted);
  font-family: var(--font-body); font-weight: 600; font-size: 0.82rem;
  border-radius: 8px; cursor: pointer;
  transition: all 0.2s;
}
.auth-tab.active { background: var(--accent); color: white; }

.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.75rem; font-family: var(--font-mono);
  color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase;
}
.auth-form input {
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.auth-form input:focus { border-color: var(--accent); }
.auth-error { color: #ef4444; font-size: 0.82rem; min-height: 1em; }
.auth-success { color: #10b981; font-size: 0.82rem; line-height: 1.4; }
.auth-forgot {
  background: none; border: none;
  color: var(--muted); font-size: 0.78rem;
  font-family: var(--font-body);
  cursor: pointer; padding: 4px;
  text-align: center;
  transition: color 0.2s;
}
.auth-forgot:hover { color: var(--accent); }
.auth-submit {
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white; border: none;
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s;
}
.auth-submit:hover { transform: translateY(-1px); }
.auth-submit:active { transform: scale(0.98); }

/* ============================================================
   MOBILE v2 — refonte interface téléphone
   ============================================================ */
@media (max-width: 640px) {

  /* Container : moins de padding latéral */
  .main-container, main.main-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .section { padding: 40px 0 !important; }
  .section-header { margin-bottom: 20px !important; }
  .section-title, h2.section-title { font-size: 1.6rem !important; }

  /* Filters : scroll horizontal propre, indicateur visuel de débordement */
  .filters-container {
    gap: 12px;
    margin-bottom: 20px;
  }
  /* Wrapper avec fade gradient pour suggérer le scroll */
  .filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* débord visuel : étire hors du conteneur avec padding interne */
    margin: 0 -16px;
    padding: 4px 16px 8px;
    scroll-snap-type: x proximity;
    /* Masque dégradé sur les bords pour indiquer "il y a plus" */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
  }

  .sorting {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .sorting label { white-space: nowrap; flex-shrink: 0; }
  .sorting label { font-size: 0.8rem; }
  .sort-select {
    flex: 1;
    max-width: none !important;
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  /* Featured card : plus compacte */
  .featured-card {
    min-height: 0 !important;
  }
  .featured-bg { min-height: 180px !important; }
  .featured-content { padding: 18px !important; }
  .featured-title { font-size: 1.4rem !important; line-height: 1.2 !important; }
  .featured-subtitle { font-size: 0.9rem !important; }
  .featured-excerpt { display: none !important; }
  .featured-tags { padding: 0 18px 14px !important; gap: 6px !important; }
  .featured-tags .tag { font-size: 0.66rem !important; padding: 3px 8px !important; }

  /* ── Grille d'articles en LISTE horizontale compacte ── */
  #articles-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .article-card.wide { grid-column: span 1 !important; }

  .article-card {
    display: flex !important;
    flex-direction: row !important;
    min-height: 0 !important;
    border-radius: 14px !important;
    overflow: hidden;
  }
  /* ── Cartes d'articles sur mobile : EN COLONNE ────────────────
     Avant : vignette carree de 110 px a gauche, texte dans les ~230 px
     restants, titre coupe a 2 lignes. Sur un telephone ca donnait
     « C'est quoi le "prompt ca-ching" ? Le reglage qui peu... » : le
     titre etait cesure en plein milieu d'un mot et jamais lisible en
     entier. Le proprio : « on voit pas les titres en entier, c'est
     vraiment galere ».
     Maintenant : image pleine largeur en 16:9, puis le texte sur toute
     la largeur. Le titre dispose de ~340 px au lieu de ~230, tient sur
     3 lignes, et la nouvelle illustration devient lisible au passage. */
  .article-card .card-link {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
  }
  /* Le 21:9 de la carte « large » n'a de sens que lorsqu'elle occupe
     deux colonnes. Sur une colonne unique, elle repasse en 16:9 comme
     ses voisines, sinon son image parait ecrasee sans raison. */
  .article-card .card-thumb,
  .article-card.wide .card-thumb {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
  }
  .article-card .card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .article-card .card-body {
    flex: 1;
    padding: 14px 16px 16px !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .article-card .card-title {
    font-size: 1.06rem !important;
    line-height: 1.28 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Pas de cesure : c'est elle qui produisait « ga-rantir ». */
    hyphens: manual !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .article-card .card-excerpt {
    font-size: 0.84rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--muted);
  }
  .article-card .article-meta {
    font-size: 0.72rem !important;
    gap: 8px !important;
    margin-top: auto;
    padding-top: 2px;
  }
  .article-card .category-badge.small {
    font-size: 0.64rem !important;
    padding: 3px 8px !important;
    align-self: flex-start;
  }
  .article-card .card-gradient-overlay { display: none !important; }

  /* Barre sociale compacte */
  .article-card .card-social-bar {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 0 !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
  }
  .article-card .social-btn {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(6px);
    border: none !important;
    border-radius: 8px !important;
  }
  .article-card .social-btn svg { width: 12px !important; height: 12px !important; }

  .article-card .read-badge {
    top: 6px !important;
    right: 6px !important;
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
  }

  /* Désactiver le tilt 3D sur mobile */
  .article-card, .featured-card { transform: none !important; }

  /* Article page */
  .article-hero { padding: 90px 0 30px !important; }
  #article-title { font-size: 1.6rem !important; line-height: 1.2 !important; }
  #article-subtitle { font-size: 0.95rem !important; }
  #article-body { font-size: 0.98rem; line-height: 1.7; }
  #article-body h2 { font-size: 1.3rem !important; }
  #article-body h3 { font-size: 1.1rem !important; }
  .article-social-bar {
    position: sticky;
    top: 60px;
    z-index: 10;
    background: var(--bg);
    padding: 10px 0;
    margin: 0 -16px 20px;
    padding-left: 16px;
    padding-right: 16px;
    border-bottom: 1px solid var(--border);
  }
  .social-btn-lg {
    flex: 1;
    justify-content: center;
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
  }
  .social-btn-lg svg { width: 16px !important; height: 16px !important; }

  /* Navbar compacte */
  nav#navbar { padding: 10px 16px !important; }
  .nav-logo { font-size: 1.3rem !important; }

  /* Commentaires compacts */
  .comment-form { flex-direction: row; gap: 8px; }
  .comment-form-avatar { width: 32px !important; height: 32px !important; }
  .comment-item { gap: 10px !important; }
  .comment-avatar { width: 32px !important; height: 32px !important; }
  .comment-text { font-size: 0.88rem !important; }

  /* Bouton langue : plus discret */
  .alyriaz-lang-btn {
    bottom: 80px !important;
    right: 10px !important;
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
  }

  /* Footer */
  footer { padding: 30px 16px !important; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Account/profile tighter */
  .account-hero { padding: 100px 0 30px !important; }
  .account-title { font-size: 1.6rem !important; }
  .account-tabs { gap: 16px !important; }
}

/* Très petits écrans (iPhone SE etc) */
@media (max-width: 380px) {
  /* La vignette est desormais pleine largeur : lui imposer 90 px la
     rendrait minuscule. On ne touche qu'a la typographie. */
  .article-card .card-title { font-size: 0.98rem !important; }
  .article-card .card-excerpt { -webkit-line-clamp: 2; }
  .featured-title { font-size: 1.2rem !important; }
}

/* Article sauvegardé. Le violet de la marque plutôt que le rouge du
   « j'aime » : les deux boutons sont côte à côte et doivent se
   distinguer d'un coup d'œil, actifs ou non. */
.social-btn-lg.save-btn.saved {
  color: #A78BFA;
  border-color: rgba(167, 139, 250, 0.34);
  background: rgba(124, 58, 237, 0.10);
}
.social-btn-lg.save-btn.saved:hover {
  background: rgba(124, 58, 237, 0.18);
}