/* =========================================================
   SPEECHI CAMPUS — Design System (Figma spec)
   Palette : Teal (Campus Speechi) + Jaune + Orange
   Typo    : Plus Jakarta Sans
   ========================================================= */

:root {
  /* Typo — valeurs exactes du dump CSS Figma */
  --font-title: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:  'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Marque */
  --primary: #18B6C3;
  --primary-dark: #0E8A95;
  --primary-light: #8FDDE4;
  --primary-soft: rgba(24, 182, 195, 0.1);

  /* Accents */
  --yellow: #FCC002;
  --yellow-dark: #F9AE05;
  --yellow-soft: #FEF3C7;
  --orange: #F3794A;
  --orange-dark: #E65B26;
  --pink: #E9609E;
  --pink-soft: #FFE7F1;

  /* Tuiles de la mosaïque hero */
  --tile-orange: #E65B26;
  --tile-yellow: #FCC002;
  --tile-lime: #C4D604;
  --tile-lavender: #E1DBEE;

  /* Icônes de la carte Forum */
  --icon-orange: #F3794A;
  --icon-yellow: #FCC002;
  --icon-pink: #E9609E;
  --icon-bg: #F7EEE7;

  /* Fonds */
  --bg: #F7F7F5;
  --cream: #F7F6F2;
  --card: #FFFFFF;

  /* Neutres — bleu-gris chaud de la maquette */
  --dark: #2D3440;
  --dark-2: #343B46;
  --btn-dark: #323A45;
  --fg: #2D3440;
  --heading-3: #516278;
  --muted-fg: rgba(45, 52, 64, 0.6);
  --meta-fg: #8597AB;
  --muted: #F7F6F2;
  --border: #F7EEE7;
  --border-hairline: rgba(0, 0, 0, 0.06);
  --border-strong: #E4D9CE;

  --success: #16A34A;
  --danger: #DC2626;

  /* Footer V2 — relevé sur la frame « Home V2 » (405:3945) */
  --footer-title: #2DB9C3;
  --footer-link:  #F7EEE7;
  --footer-muted: #DED7D3;
  --footer-dim:   #7E838B;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.04);

  --navbar-h: 76px;
  --container: 1240px;

  --transition: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-title);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--card);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img, svg { display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* L'attribut hidden doit toujours l'emporter. La règle du navigateur
   ([hidden] { display: none }) est battue par n'importe quel sélecteur
   de classe portant un display — c'est ce qui laissait le bouton
   « Voir les autres réponses » visible en permanence. */
[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  height: var(--navbar-h);
}
.navbar__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--navbar-h);
}

/* Logo Campus speechi (SVG inline) */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Logo officiel (assets/logo.svg — lockup icône + mot-clé, 155×52) */
.brand__logo {
  width: auto;
  height: 46px;
  display: block;
}

.navbar__nav {
  display: flex;
  gap: 8px;
  margin-left: 32px;
}
.nav-link {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted-fg);
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover { color: var(--fg); }
.nav-link--active { color: var(--fg); font-weight: 700; }
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.navbar__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted-fg);
  padding: 8px 14px;
}
.navbar__link:hover { color: var(--fg); }

.navbar__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
}
.navbar__burger span {
  display: block; width: 22px; height: 2px; background: var(--fg); border-radius: 2px;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: white;
  border-top: 1px solid var(--border);
  padding: 16px 24px;
  gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-link { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; color: var(--fg); }
.mobile-link:hover { background: var(--muted); }
.mobile-actions { display: flex; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  min-height: 40px;
  border-radius: 8px;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  transition: all var(--transition);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn--dark { background: var(--btn-dark); color: white; }
.btn--dark:hover { background: #232a33; }
.btn--primary { background: var(--primary); color: white; }
.btn--primary:hover { background: var(--primary-dark); }
.btn--outline { background: transparent; color: var(--btn-dark); border-color: var(--btn-dark); }
.btn--outline:hover { background: rgba(50, 58, 69, 0.06); }
.btn--ghost { background: transparent; color: var(--muted-fg); }
.btn--ghost:hover { color: var(--fg); }
.btn--sm { padding: 8px 16px; min-height: 34px; font-size: 13px; }
.btn--lg { padding: 10px 24px; min-height: 40px; font-size: 14px; }
.btn--full { width: 100%; }

/* =========================================================
   HERO — Home
   ========================================================= */
.hero {
  position: relative;
  padding: 72px 0 88px;
  overflow: hidden;
  background: #FDFBF7;
}
/* Grille discrète sur la moitié droite (maquette) */
.hero__grid-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62%;
  background-image:
    linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent, black 12%);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* Titre hero : Montserrat 400 / 42px / 51px — la maquette est en graisse normale */
.hero__title {
  font-family: var(--font-title);
  font-size: 42px;
  line-height: 51px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--dark-2);
  margin-bottom: 19px;
  max-width: 460px;
}
.hero__subtitle {
  font-family: var(--font-title);
  font-size: 14px;
  line-height: 160%;
  font-weight: 400;
  color: var(--dark-2);
  max-width: 454px;
  margin-bottom: 43px;
}
.hero__cta {
  display: flex;
  gap: 20px;
  max-width: 429px;
}
.hero__cta .btn { flex: 1; }

/* Colonne visuelle — deux colonnes imbriquées (282px / 322px, gap 30px)
   ┌──────────────┬──────────┬─────────┐
   │              │  orange  │  teal   │  122
   │    Forum     ├──────────┴─────────┤
   │    (300)     │                    │
   ├──────┬───────┤    Formations      │  295
   │ lime │ lavan.│      (jaune)       │
   └──────┴───────┴────────────────────┘
        282px            322px            */
.hero__visual {
  position: relative;
  display: flex;
  gap: 30px;
  align-items: stretch;
  min-height: 452px;
}
.hero__visual-col { display: flex; flex-direction: column; }
.hero__visual-col--left  { flex: 282 1 0; gap: 30px; }
.hero__visual-col--right { flex: 322 1 0; gap: 35px; }
.hero__tile-row { display: flex; height: 122px; flex-shrink: 0; }
.hero__visual-col--left  .hero__tile-row { gap: 20px; }
.hero__visual-col--right .hero__tile-row { gap: 12px; }

.hero__card { border-radius: 16px; }

/* Carte Forum — fond transparent dans la maquette, seules les lignes sont blanches */
.hero__card--forum {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 14px 0;
  background: none;
  border: none;
  box-shadow: none;
}
.hero__card-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  color: var(--dark-2);
  padding-bottom: 9px;
  position: relative;
  flex-shrink: 0;
}
.hero__card-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 108px; height: 3px;
  border-radius: 2px;
  background: var(--primary);
}
.hero__forum-list { display: flex; flex-direction: column; gap: 13px; list-style: none; }
.hero__forum-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 7px 14px 7px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
/* Pastilles rondes, fond crème, icône colorée */
.hero__forum-item__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--icon-bg);
  color: var(--icon-orange);
}
/* Les entrées sont désormais des liens enveloppés dans des <li> :
   le rang se lit sur le <li>, plus sur l'élément lui-même. */
.hero__forum-list > li:nth-child(2) .hero__forum-item__icon { color: var(--icon-yellow); }
.hero__forum-list > li:nth-child(3) .hero__forum-item__icon { color: var(--icon-pink); }
.hero__forum-item { transition: transform var(--transition), box-shadow var(--transition); }
.hero__forum-item:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }
.hero__forum-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hero__card-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-dark);
}
.hero__card-link:hover { text-decoration: underline; }
.hero__forum-item__icon svg { width: 20px; height: 20px; }
.hero__forum-item__body { min-width: 0; display: block; }
.hero__forum-item__title {
  display: block;
  font-family: var(--font-title);
  font-size: 12px; font-weight: 500; line-height: 24px;
  color: #425062;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero__forum-item__meta {
  display: block;
  font-family: var(--font-title);
  font-size: 10px; font-weight: 400; line-height: 20px;
  color: var(--meta-fg);
}

/* Tuiles colorées */
.hero__tile {
  flex: 1;
  border: none;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  text-align: center;
}
/* Home V2 : la tuile « Enseignants » passe de l'orange au jaune, texte sombre */
.hero__tile--enseignants { background: var(--tile-yellow);   color: var(--dark-2); flex: 149 1 0; }
.hero__tile--recompenses { background: var(--primary);       color: var(--dark-2); flex: 161 1 0; }
.hero__tile--sujets      { background: var(--tile-lime);     color: var(--dark); }
.hero__tile--satisfaction{ background: var(--tile-lavender); color: var(--dark); }
/* Le libellé de la tuile jaune est en petites capitales dans la maquette */
.hero__tile--enseignants .hero__stat-lbl {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.hero__tile svg { width: 32px; height: 32px; stroke-width: 2.2; }
/* Les gros chiffres sont en Manrope 800 dans la maquette */
.hero__stat-big {
  font-family: var(--font-body);
  font-size: 32px; font-weight: 800; line-height: 48px;
}
.hero__stat-lbl {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500; line-height: 16px;
  letter-spacing: 0.275px;
  color: rgba(45, 52, 64, 0.6);
}
.hero__tile--enseignants .hero__stat-lbl {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
}
.hero__tile--satisfaction .hero__stat-lbl,
.hero__tile--recompenses .hero__stat-lbl {
  font-family: var(--font-title);
  font-size: 14px; font-weight: 400; line-height: 17px;
  letter-spacing: 0;
  color: var(--dark-2);
}

/* Grande tuile Formations */
/* ── Carte membre du hero (image fournie par la designer) ───
   Le PNG porte déjà les deux cartes empilées et son ombre portée.
   Mesuré : la carte visible n'occupe que 704×560 des 832×688 du
   fichier — 8% de transparence à gauche et à droite, 5% en haut,
   14% en bas. À 100% de la colonne elle paraissait donc minuscule.
   On l'agrandit et on débord vers la droite, comme sur la maquette
   où la carte dépasse les tuiles. Les marges négatives horizontales
   compensent exactement le surplus (152 − 8 − 44 = 100%), la mise en
   page reste donc inchangée ; `.hero` est en overflow:hidden, aucun
   défilement horizontal n'apparaît. */
.hero__member {
  width: 152%;
  max-width: none;
  height: auto;
  align-self: flex-start;
  margin: -18px -44% -50px -8%;
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section { padding: 80px 0; }
.section--tight { padding: 56px 0; }
/* Bande crème pleine largeur (maquette : « Discussions récentes ») */
.section--cream { background: var(--cream); }
.section-header {
  margin-bottom: 32px;
}
/* Retour Marion du 6 août : 20px sous tous les titres */
.section-title {
  font-family: var(--font-title);
  font-size: 36px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--dark);
  margin-bottom: 20px;
}
/* Quand un sous-titre suit, c'est lui qui porte l'écart au bloc suivant */
.section-title:has(+ .section-subtitle) { margin-bottom: 6px; }
.section-subtitle { margin-bottom: 20px; }
.section-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--muted-fg);
}

/* =========================================================
   BLOC "Explorer le forum"
   ========================================================= */
.explore {
  display: grid;
  grid-template-columns: 294px 1fr;
  gap: 12px;
}
.explore__card {
  background: var(--primary);
  color: white;
  border: 0.8px solid var(--border-hairline);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 17px;
  min-height: 308px;
}
.explore__card-eyebrow {
  font-family: var(--font-title);
  font-size: 31px; font-weight: 400; line-height: 40px;
}
.explore__card-title {
  font-family: var(--font-title);
  font-size: 31px; font-weight: 700; line-height: 40px;
}
.explore__card-desc {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500; line-height: 21px;
  color: #FFFFFF;
}
.explore__card-btn {
  background: var(--btn-dark);
  color: white;
  min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  margin-top: auto;
}
.explore__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
}
.explore__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 90.6px;
  padding: 20px;
  background: white;
  border: 0.8px solid var(--border-hairline);
  border-radius: 16px;
  transition: all var(--transition);
}
.explore__item:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.explore__item-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.explore__item-icon svg { width: 20px; height: 20px; }
.explore__item h4 {
  font-family: var(--font-title);
  font-size: 15px; font-weight: 700; line-height: 22px;
  color: var(--dark);
}
.explore__item p {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 400; line-height: 18px;
  color: var(--muted-fg);
  padding-top: 4px;
}

/* =========================================================
   DISCUSSIONS RECENTES + QUESTION DU JOUR
   ========================================================= */
.recent {
  display: grid;
  grid-template-columns: 830fr 402fr;
  gap: 32px;
  align-items: start;
}
.threads-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thread-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 121px;
  padding: 20px;
  background: white;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: all var(--transition);
}
.thread-row:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); }
.thread-row__body { flex: 1; min-width: 0; }
.thread-row__tags {
  display: flex; gap: 7px; margin-bottom: 6px;
  flex-wrap: wrap; align-items: center;
}
.tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px 7px;
  border-radius: var(--radius-full);
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  background: var(--primary-soft);
  color: var(--primary);
}
.tag--primary { background: var(--primary-soft); color: var(--primary); }
.tag--yellow { background: var(--yellow-soft); color: var(--yellow-dark); }
.tag--orange { background: #FDE8DF; color: var(--orange-dark); }
.tag--green { background: #E4F3E0; color: #4E8C3A; }
.tag--purple { background: #EFEBF8; color: #6B5BA8; }
.tag--resolved { background: #E4F3E0; color: #4E8C3A; }
.tag--official { background: #FDE8DF; color: var(--orange-dark); }
.tag--pinned { background: var(--yellow-soft); color: var(--yellow-dark); }
/* Pastilles secondaires : contour crème, plus petites */
.tag--outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--dark);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 10px;
}
.thread-row__title {
  font-family: var(--font-title);
  font-size: 15px; font-weight: 700; line-height: 22px;
  color: var(--dark); margin-bottom: 4px;
}
.thread-row__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Colonne de compteurs à droite (votes / réponses) */
.thread-row__stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  color: var(--muted-fg);
}
.thread-row__stat {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
}
.thread-row__stat svg { width: 15px; height: 15px; flex-shrink: 0; }
.thread-row:hover .thread-row__stat { color: var(--primary-dark); }

/* Carte orange « Question du jour » */
.quiz-card {
  background: #F97300;
  color: white;
  padding: 26px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quiz-card__eyebrow { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.quiz-card__title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.quiz-card__btn {
  background: var(--dark);
  color: white;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  width: 100%;
  margin-top: 4px;
}

/* Carte blanche « Règles du forum » */
.rules-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rules-card__title { font-size: 16px; font-weight: 700; color: var(--dark); }
.rules-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rules-card li {
  display: flex; gap: 10px; align-items: center;
  font-size: 14px; color: var(--dark);
}
.rules-card li svg { width: 17px; height: 17px; flex-shrink: 0; color: #6CBE45; }
.rules-card__btn {
  display: block;
  background: var(--dark);
  color: white;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-align: center;
  margin-top: 4px;
}

/* =========================================================
   BADGES SECTION
   ========================================================= */
.badges-block {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.badges-block__desc {
  font-size: 15px;
  color: var(--muted-fg);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 460px;
}
.badges-block__desc strong { color: var(--dark); font-weight: 700; }
.badges-list {
  display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 32px;
}
/* Pastille ronde + libellé (maquette) */
.badge-chip {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 74px;
}
.badge-chip__icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FFEDD5;
  color: var(--orange);
}
.badge-chip__icon svg { width: 22px; height: 22px; }
.badge-chip:nth-child(2) .badge-chip__icon { background: var(--primary-soft); color: var(--primary); }
.badge-chip:nth-child(3) .badge-chip__icon { background: var(--pink-soft); color: var(--pink); }
.badge-chip:nth-child(4) .badge-chip__icon { background: var(--yellow-soft); color: var(--yellow-dark); }
.badge-chip__name { font-size: 13px; font-weight: 500; color: var(--dark); }
/* L'infographie porte son propre fond et son ombre : le cadre blanc
   et la bordure du placeholder n'ont plus lieu d'être. */
.badges-block__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badges-block__visual img {
  width: 100%;
  max-width: 620px;
  height: auto;
}

/* =========================================================
   TEMOIGNAGES
   ========================================================= */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial {
  background: #F2EEE9;
  border: none;
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 300px;
}
.testimonial__quote {
  font-size: 56px;
  line-height: 0.7;
  height: 34px;
  color: var(--yellow-dark);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
}
.testimonial--pink .testimonial__quote { color: var(--pink); }
.testimonial--orange .testimonial__quote { color: var(--orange); }
.testimonial__text { font-size: 20px; color: var(--dark); line-height: 1.35; letter-spacing: -0.3px; }
.testimonial__author { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.testimonial__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--muted-fg);
  overflow: hidden; flex-shrink: 0;
}
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__name { font-size: 13px; font-weight: 500; color: var(--dark); }

/* =========================================================
   FOOTER
   ========================================================= */
/* Footer teal, texte sombre (maquette) */
/* Footer V2 (maquette « Home V2 », frame 405:3945) : fond ardoise,
   intitulés de colonnes en teal, liens crème, filet teal. */
.footer {
  background: var(--btn-dark);
  color: var(--footer-link);
  padding: 60px 0 26px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 44px;
}
.footer__brand .brand__logo { height: 42px; }
.footer__tagline {
  font-family: var(--font-body);
  font-size: 14px;
  margin-top: 16px;
  max-width: 340px;
  line-height: 1.6;
  color: var(--footer-muted);
}
.footer__col-title {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--footer-title);
  margin-bottom: 14px;
}
.footer__link {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--footer-link);
  padding: 6px 0;
  transition: color var(--transition);
}
.footer__link:hover { color: var(--footer-title); }
.footer__bottom {
  border-top: 1px solid rgba(45, 185, 195, 0.45);
  padding-top: 22px;
  font-family: var(--font-body);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--footer-dim);
}
.footer__legal { display: flex; gap: 26px; flex-wrap: wrap; }
.footer__legal a { color: var(--footer-link); transition: color var(--transition); }
.footer__legal a:hover { color: var(--footer-title); }

/* =========================================================
   PAGE HEADER (Forum, Nouveau sujet, Création)
   ========================================================= */
.page-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-fg);
  margin-bottom: 20px;
}
.page-back:hover { color: var(--fg); }
.page-title {
  font-family: var(--font-title);
  font-size: 36px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--dark);
  margin-bottom: 20px;
}
/* Sauf si un sous-titre suit : l'écart se reporte alors sur lui */
.page-title:has(+ .page-subtitle) { margin-bottom: 6px; }
.page-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--muted-fg);
  margin-bottom: 32px;
}

/* =========================================================
   FORMS
   ========================================================= */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--dark); }
.form-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--fg);
  background: white;
  transition: border-color var(--transition);
}
.form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(23,162,162,0.15); }
.form-textarea { min-height: 180px; resize: vertical; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.form-checkbox { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted-fg); }
.form-checkbox input { margin-top: 3px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { min-height: 380px; }
  .explore { grid-template-columns: 1fr; }
  .recent { grid-template-columns: 1fr; }
  .badges-block { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .navbar__nav, .navbar__actions { display: none; }
  .navbar__burger { display: flex; }
  .hero { padding: 40px 0 56px; }
  .hero__title { font-size: 34px; letter-spacing: -1px; }
  .section { padding: 56px 0; }
  .section-title { font-size: 26px; }
  .explore__grid { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .form-row { grid-template-columns: 1fr; }
  /* Mosaïque hero : 2 colonnes empilées */
  .hero__visual { grid-template-columns: 1fr 1fr; grid-template-rows: none; min-height: 0; }
  .hero__card--forum      { grid-column: 1 / -1; grid-row: auto; }
  .hero__tile--enseignants,
  .hero__tile--recompenses,
  .hero__tile--sujets,
  .hero__tile--satisfaction { grid-column: auto; grid-row: auto; min-height: 96px; }
  /* La carte décalée déborderait de l'écran en petite largeur */
  /* En petite largeur, le débord vers la droite n'a plus de sens */
  .hero__member {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    margin: -12px 0 -34px;
  }
  .testimonial { min-height: 0; }
  .testimonial__text { font-size: 18px; }
}

/* =========================================================
   COMPTE — navbar connectée, modales, toast, verrouillage
   Ajouté avec le branchement API : inscription à la demande,
   validation par un admin, contenus masqués aux non-validés.
   ========================================================= */

/* Avatar dans la navbar */
/* Barre d'icônes de la navbar connectée (maquette 425:3495) */
.nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  color: var(--dark);
  transition: background var(--transition), color var(--transition);
}
.nav-icon svg { width: 21px; height: 21px; }
.nav-icon:hover { background: var(--cream); color: var(--primary-dark); }
.nav-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Pastille profil : avatar + engrenage dans un contour arrondi */
.nav-profile {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 12px 3px 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: border-color var(--transition), background var(--transition);
}
.nav-profile:hover { border-color: var(--primary-light); background: var(--cream); }
.nav-profile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nav-profile__circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.nav-profile__gear { display: inline-flex; color: var(--heading-3); }
.nav-profile__gear svg { width: 18px; height: 18px; }
.nav-pending {
  padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--yellow-soft); color: var(--yellow-dark);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* ── Filtres à panneau (assets/js/filtres.js) ─────────────
   Pictos jaunes, chevron décalé de 8px du bord, ouverture au clic
   seulement, cases à cocher pour croiser plusieurs valeurs. */
.fsel { position: relative; }
.fsel__btn {
  height: 54px;
  min-width: 190px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 8px 15px 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: #4F4F4F;
  text-align: left;
  transition: border-color var(--transition);
}
.fsel__btn:hover { border-color: var(--primary-light); }
.fsel__btn:focus-visible { outline: none; border-color: var(--primary); }
.fsel__picto { display: inline-flex; flex-shrink: 0; color: var(--yellow); }
.fsel__picto svg { width: 19px; height: 19px; }
.fsel__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel__chevron {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-right: 8px;          /* padding demandé à droite de la flèche */
  color: var(--meta-fg);
  transition: transform var(--transition);
}
.fsel--ouvert .fsel__btn { border-color: var(--primary); }
.fsel--ouvert .fsel__chevron { transform: rotate(180deg); }
.fsel--actif .fsel__btn { border-color: var(--primary-light); color: var(--dark); }

.fsel__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.fsel__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--dark);
  cursor: pointer;
  white-space: nowrap;
}
.fsel__opt:hover { background: var(--cream); }
.fsel__opt input { position: absolute; opacity: 0; pointer-events: none; }
.fsel__box {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border: 1.6px solid var(--border-strong);
  border-radius: 5px;
  background: white;
  transition: all var(--transition);
}
.fsel__opt input[type="radio"] + .fsel__box { border-radius: 50%; }
.fsel__opt--on .fsel__box {
  background: var(--yellow) no-repeat center
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23323A45' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E");
  border-color: var(--yellow);
}
.fsel__opt--on { font-weight: 600; }
.fsel__clear {
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dark);
  text-align: left;
}
.fsel__clear:hover { background: var(--cream); }
.filter-search {
  width: 54px; height: 54px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  display: inline-flex; align-items: center; justify-content: center;
  color: #516278;
}
.filter-search:hover { border-color: var(--primary); color: var(--primary); }

/* Bandeau d'état du compte */
.account-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  font-size: 14px;
  border: 1px solid var(--yellow);
  background: var(--yellow-soft);
  color: #7C4A03;
}
.account-banner--danger { border-color: #FCA5A5; background: #FEF2F2; color: #991B1B; }
.account-banner--info   { border-color: var(--primary-light); background: var(--primary-soft); color: var(--primary-dark); }
.account-banner__icon  { font-size: 20px; line-height: 1; }
.account-banner__title { font-weight: 800; margin-bottom: 2px; }
.account-banner__body  { flex: 1; min-width: 200px; }

/* Contenu verrouillé (visiteur ou compte en attente) */
.locked-veil {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--cream);
  padding: 36px 28px;
  text-align: center;
}
.locked-veil__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.locked-veil__badge svg { width: 22px; height: 22px; }
.locked-veil__title {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.locked-veil__text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--heading-3);
  max-width: 430px;
  margin: 0 auto 20px;
}
.locked-veil__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.locked-veil__note {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--meta-fg);
  margin-top: 14px;
}
/* Compte créé mais pas encore validé */
.locked-veil__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--yellow-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #8A6100;
}
.locked-veil__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--yellow-dark);
  animation: locked-pulse 1.8s ease-in-out infinite;
}
@keyframes locked-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .locked-veil__dot { animation: none; }
}
@media (max-width: 560px) {
  .locked-veil { padding: 28px 20px; }
  .locked-veil__actions .btn { width: 100%; }
}

/* Aperçu flouté sous un titre lisible */
.locked-preview {
  position: relative;
  overflow: hidden;
  max-height: 46px;
  margin-top: 6px;
  user-select: none;
}
.locked-preview__lines { display: flex; flex-direction: column; gap: 7px; filter: blur(3px); opacity: 0.55; }
.locked-preview__line { height: 9px; border-radius: 4px; background: var(--border-strong); }
.locked-preview__line:nth-child(2) { width: 82%; }
.locked-preview__line:nth-child(3) { width: 64%; }
.locked-hint {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  color: var(--primary-dark);
}
.locked-hint svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Modales (connexion, confirmation) */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  display: none; align-items: center; justify-content: center;
  padding: 20px; z-index: 200;
}
.modal-overlay.open { display: flex; }
.modal {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 420px;
  padding: 28px;
  max-height: 90vh; overflow-y: auto;
}
.modal--wide { max-width: 560px; }
.modal__title { font-size: 20px; font-weight: 800; color: var(--dark); letter-spacing: -0.4px; }
.modal__subtitle { font-size: 14px; color: var(--muted-fg); margin: 6px 0 20px; }
.modal__close {
  float: right; width: 30px; height: 30px;
  border-radius: 50%; background: var(--muted);
  color: var(--muted-fg); font-size: 16px; line-height: 1;
}
.modal__close:hover { background: var(--border); color: var(--dark); }
.modal__footer { margin-top: 18px; font-size: 13px; color: var(--muted-fg); text-align: center; }
.modal__footer a { color: var(--primary); font-weight: 600; }

/* Messages d'erreur de formulaire */
.form-error {
  min-height: 18px;
  font-size: 13px; font-weight: 600;
  color: var(--danger);
  margin-bottom: 8px;
}

/* Mention « facultatif » accolée à un libellé de champ */
.form-optional {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--meta-fg);
}

/* Compteur de caractères sous une zone de texte */
.form-counter {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--meta-fg);
  text-align: right;
}

/* Piège à robots : hors écran plutôt que display:none, que certains
   robots détectent. Retiré de la navigation clavier et du lecteur
   d'écran par tabindex="-1" et aria-hidden côté balisage. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mention légale en pied de formulaire */
.form-legal {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--meta-fg);
  text-align: center;
}
.form-legal a { color: var(--primary-dark); font-weight: 600; }
.form-legal a:hover { text-decoration: underline; }

/* Page contact — arguments de la colonne gauche */
.contact-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 36px;
}
.contact-point { display: flex; gap: 14px; align-items: flex-start; }
.contact-point__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.contact-point__icon svg { width: 19px; height: 19px; }
.contact-point h4 {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
}
.contact-point p {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--heading-3);
}
.contact-point a { color: var(--primary-dark); font-weight: 600; }
.contact-point a:hover { text-decoration: underline; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--dark); color: white;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 300;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: var(--danger); }

/* États de chargement / vide / erreur */
.state-msg {
  padding: 40px 24px;
  text-align: center;
  color: var(--muted-fg);
  font-size: 14px;
}
.state-msg__icon { font-size: 26px; margin-bottom: 8px; }
.state-msg__title { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.skeleton {
  background: linear-gradient(90deg, var(--muted) 25%, #E8EDF3 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}