/*
 * Défi Races Ovines — composants « Laine & pâturage » 0.2.0
 * Composants visuels communs ; les couleurs proviennent exclusivement de tokens.css.
 * Objectifs : identité ovine, hiérarchie cohérente des actions, contraste lisible.
 */

html {
  background: var(--wool-bg);
}

body {
  color: var(--ink);
  background-color: var(--wool-bg) !important;
  background-image:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.48), transparent 28%),
    radial-gradient(circle at 82% 28%, rgba(255,253,247,.30), transparent 31%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.065) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(28deg, rgba(75,45,32,.022) 0 1px, transparent 1px 12px) !important;
  background-attachment: fixed !important;
}

@media (max-width: 950px) {
  body {
    background-attachment: scroll !important;
  }
}

a {
  color: var(--pasture-dark);
}

a:hover,
a:focus-visible {
  color: var(--ram-brown);
}

::selection {
  background: #dbe5cd;
  color: var(--ram-brown);
}

/* ── Surfaces communes ───────────────────────────────────── */
.panel,
.race-panel,
.photo-panel,
.best,
dialog,
.join-card,
.join-error,
.intro,
.empty,
.error-box,
.thanks,
.proposal-hero,
.proposal-message,
.filters,
.defi-hero,
.defi-error,
.defi-game-start,
.defi-result-panel {
  border-color: var(--wool-border-strong) !important;
  background: rgba(255, 253, 247, .965) !important;
  box-shadow: var(--wool-shadow) !important;
}

.scoreboard div {
  border: 2px solid var(--wool-border-strong) !important;
  border-radius: 10px !important;
  background: rgba(250, 246, 237, .96) !important;
  color: var(--ram-brown) !important;
  box-shadow: none !important;
}

input,
select,
textarea {
  border-color: var(--wool-border-strong) !important;
  background: var(--wool-light) !important;
  color: var(--ink) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--sage) !important;
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

.notice {
  color: #75503d !important;
}

/* ── Boutons : système commun ────────────────────────────── */
button,
.btn,
.small-button,
.back-btn,
.selection-mode-btn,
.home-mini-link,
.home-classic-toggle,
.defi-secondary-button,
.btn-secondary,
.session-secondary-action,
.defi-community-btn-secondary {
  border: 2px solid var(--wool-border-strong) !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #fffdf8, #f3ecdf) !important;
  color: var(--ram-brown) !important;
  box-shadow: 0 2px 0 rgba(75,45,32,.12) !important;
  font-weight: 850 !important;
  text-decoration: none;
}

button:hover,
.btn:hover,
.small-button:hover,
.back-btn:hover,
.selection-mode-btn:hover,
.home-mini-link:hover,
.home-classic-toggle:hover,
.defi-secondary-button:hover,
.btn-secondary:hover,
.session-secondary-action:hover,
.defi-community-btn-secondary:hover,
button:focus-visible,
.btn:focus-visible,
.small-button:focus-visible,
.back-btn:focus-visible,
.selection-mode-btn:focus-visible,
.home-mini-link:focus-visible,
.home-classic-toggle:focus-visible,
.defi-secondary-button:focus-visible,
.btn-secondary:focus-visible,
.session-secondary-action:focus-visible,
.defi-community-btn-secondary:focus-visible {
  border-color: var(--sage) !important;
  background: var(--sage-soft) !important;
  color: var(--pasture-dark) !important;
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  transform: translateY(-1px);
}

button:active,
.btn:active {
  transform: translateY(1px);
  box-shadow: none !important;
}

/* Action principale : une seule couleur partout. */
button.primary,
.btn-primary,
.btn-green,
.home-cta-primary,
.home-scoreboard-action,
.defi-primary-button,
.defi-community-btn-primary,
.classe-defi-primary-button,
.classe-start-button,
.session-main-action,
.create-final-button,
.action-launch,
.action-launch-open,
.action-access {
  border-color: var(--pasture-dark) !important;
  background: linear-gradient(180deg, #628a50, var(--pasture)) !important;
  color: #fff !important;
  box-shadow: 0 3px 0 rgba(57,87,47,.42) !important;
}

button.primary:hover,
.btn-primary:hover,
.btn-green:hover,
.home-cta-primary:hover,
.home-scoreboard-action:hover,
.defi-primary-button:hover,
.defi-community-btn-primary:hover,
.classe-defi-primary-button:hover,
.classe-start-button:hover,
.session-main-action:hover,
.create-final-button:hover,
.action-launch:hover,
.action-launch-open:hover,
.action-access:hover,
button.primary:focus-visible,
.btn-primary:focus-visible,
.btn-green:focus-visible,
.home-cta-primary:focus-visible,
.home-scoreboard-action:focus-visible,
.defi-primary-button:focus-visible,
.defi-community-btn-primary:focus-visible,
.classe-defi-primary-button:focus-visible,
.classe-start-button:focus-visible,
.session-main-action:focus-visible,
.create-final-button:focus-visible,
.action-launch:focus-visible,
.action-launch-open:focus-visible,
.action-access:focus-visible {
  border-color: #2f4928 !important;
  background: linear-gradient(180deg, #587e48, #426537) !important;
  color: #fff !important;
  box-shadow: var(--focus-ring), 0 3px 0 rgba(57,87,47,.36) !important;
}

/* Les anciens boutons « bleus » deviennent informatifs sauge. */
.btn-blue,
.defi-community-btn {
  border-color: #667956 !important;
  background: linear-gradient(180deg, #82956d, #6b8158) !important;
  color: #fff !important;
}

/* Rouge réservé aux actions destructives / irréversibles. */
.btn-red,
.btn-danger,
.defi-danger-button,
.action-finish,
.reset-btn {
  border-color: var(--danger-dark) !important;
  background: linear-gradient(180deg, #b65a50, var(--danger)) !important;
  color: #fff !important;
  box-shadow: 0 3px 0 rgba(129,54,47,.32) !important;
}

.btn-red:hover,
.btn-danger:hover,
.defi-danger-button:hover,
.action-finish:hover,
.reset-btn:hover,
.btn-red:focus-visible,
.btn-danger:focus-visible,
.defi-danger-button:focus-visible,
.action-finish:focus-visible,
.reset-btn:focus-visible {
  border-color: #6f2d28 !important;
  background: linear-gradient(180deg, #a94c43, #913d36) !important;
  color: #fff !important;
  box-shadow: var(--focus-ring) !important;
}

/* Les réponses du jeu restent volontairement neutres. */
.race-buttons button,
.race-buttons-landscape button,
.classe-race-buttons button {
  border-color: var(--wool-border) !important;
  background: linear-gradient(180deg, #fffdf8, #f1eadf) !important;
  color: var(--ram-brown) !important;
  box-shadow: 0 2px 0 rgba(75,45,32,.10) !important;
}

.race-buttons button:hover,
.race-buttons-landscape button:hover,
.classe-race-buttons button:hover,
.race-buttons button:focus-visible,
.race-buttons-landscape button:focus-visible,
.classe-race-buttons button:focus-visible {
  border-color: var(--sage) !important;
  background: #eef3e8 !important;
  color: var(--pasture-dark) !important;
}

/* Conserve les états pédagogiques/correction du moteur. */
button.learn,
button.learn-mastered,
button.learn-missed,
button.flash-ok,
button.flash-err {
  color: #fff !important;
}

/* ── Bandeau public ───────────────────────────────────────── */
.app-header,
.topbar.app-header {
  color: var(--ram-brown) !important;
  border: 2px solid var(--wool-border-strong) !important;
  background:
    radial-gradient(circle at 17% 0%, rgba(255,255,255,.78), transparent 32%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.10) 0 1px, transparent 1px 11px),
    linear-gradient(135deg, #f8f0df 0%, #eadcc2 100%) !important;
  box-shadow: var(--wool-shadow) !important;
}

.app-header .header-logo,
.site-mobile-logo {
  filter: drop-shadow(0 2px 2px rgba(75,45,32,.16)) !important;
}

.app-header h1,
.topbar.app-header h1 {
  color: var(--ram-brown) !important;
  text-shadow: none !important;
}

.app-header .subtitle,
.app-header .credits,
.topbar.app-header .subtitle,
.topbar.app-header .credits {
  color: var(--ram-brown-soft) !important;
}

.app-header .header-link,
.topbar.app-header .header-link,
body:has(.site-shell--home #welcome:not(.hidden)) .topbar.app-header .header-link {
  border: 1px solid var(--wool-border) !important;
  background: rgba(255,253,247,.76) !important;
  color: var(--ram-brown) !important;
  box-shadow: none !important;
}

.app-header .header-link:hover,
.app-header .header-link:focus-visible,
.topbar.app-header .header-link:hover,
.topbar.app-header .header-link:focus-visible,
body:has(.site-shell--home #welcome:not(.hidden)) .topbar.app-header .header-link:hover,
body:has(.site-shell--home #welcome:not(.hidden)) .topbar.app-header .header-link:focus-visible {
  border-color: var(--sage) !important;
  background: var(--sage-soft) !important;
  color: var(--pasture-dark) !important;
  box-shadow: var(--focus-ring) !important;
}

.app-header .header-link.is-active,
.app-header .header-link[aria-current="page"],
.topbar.app-header .header-link.is-active {
  border-color: var(--pasture-dark) !important;
  background: linear-gradient(180deg, #6f8d5d, #587748) !important;
  color: #fff !important;
  box-shadow: 0 2px 0 rgba(57,87,47,.30) !important;
}

.site-header-language,
.home-language-switch {
  border-color: var(--wool-border-strong) !important;
  background: rgba(255,253,247,.94) !important;
  box-shadow: none !important;
}

.site-header-language a,
.home-language-switch a {
  color: var(--ram-brown) !important;
}

.site-header-language a + a,
.home-language-switch a + a {
  border-left-color: var(--wool-border) !important;
}

.site-header-language a:hover,
.site-header-language a:focus-visible,
.home-language-switch a:hover,
.home-language-switch a:focus-visible {
  background: var(--sage-soft) !important;
}

.site-header-language a.is-active,
.home-language-switch a.is-active {
  background: var(--ram-brown) !important;
  color: #fff !important;
}

.teacher-account-menu {
  color: var(--ram-brown) !important;
}

.teacher-account-menu > summary {
  border-color: var(--wool-border-strong) !important;
  background: rgba(255,253,247,.82) !important;
  color: var(--ram-brown) !important;
}

.teacher-account-menu > div {
  border-color: var(--wool-border) !important;
  background: var(--wool-light) !important;
  color: var(--ram-brown) !important;
}

.teacher-account-menu > div a {
  background: var(--wool) !important;
  color: var(--ram-brown) !important;
}

/* Menu mobile commun */
.site-mobile-brand {
  color: var(--ram-brown) !important;
}

.site-mobile-menu-button {
  border-color: var(--wool-border-strong) !important;
  background: var(--wool-light) !important;
  color: var(--ram-brown) !important;
  box-shadow: none !important;
}

.site-mobile-menu {
  border-color: var(--wool-border-strong) !important;
  background: rgba(255,253,247,.985) !important;
  box-shadow: 0 12px 28px rgba(75,45,32,.17) !important;
}

.site-mobile-menu a {
  color: var(--ram-brown) !important;
}

.site-mobile-menu a:hover,
.site-mobile-menu a:focus-visible {
  border-color: var(--sage) !important;
  background: var(--sage-soft) !important;
}

.site-mobile-menu a.is-active {
  border-color: var(--pasture-dark) !important;
  background: linear-gradient(180deg, #6f8d5d, #587748) !important;
  color: #fff !important;
}

.site-mobile-menu a.site-mobile-menu-cta {
  border-color: #a8b895 !important;
  background: #eef3e8 !important;
  color: var(--pasture-dark) !important;
}

/* ── Accueil ──────────────────────────────────────────────── */
.home-hero-optimized,
body:has(.site-shell--home #welcome:not(.hidden)) .home-hero-optimized {
  border: 2px solid var(--wool-border-strong) !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(255,255,255,.80), transparent 32%),
    linear-gradient(135deg, #fffdf8 0%, #f4ecdc 100%) !important;
  box-shadow: var(--wool-shadow) !important;
}

.home-main-zone h2,
.home-scoreboard h2,
.home-side-title {
  color: var(--ram-brown) !important;
}

.home-intro,
.home-side-text {
  color: var(--muted-ink) !important;
}

.home-feature-pills span,
body:has(.site-shell--home #welcome:not(.hidden)) .home-feature-pills span {
  border-color: #bdcaaa !important;
  background: #eff4e9 !important;
  color: var(--pasture-dark) !important;
  box-shadow: none !important;
}

.home-cta-secondary {
  border: 2px solid var(--wool-border-strong) !important;
  background: linear-gradient(180deg, #fffdf8, #f2eadc) !important;
  color: var(--ram-brown) !important;
  box-shadow: 0 2px 0 rgba(75,45,32,.11) !important;
}

.home-cta-secondary:hover,
.home-cta-secondary:focus-visible {
  border-color: var(--sage) !important;
  background: var(--sage-soft) !important;
  color: var(--pasture-dark) !important;
  box-shadow: var(--focus-ring) !important;
}

.home-side-card,
body:has(.site-shell--home #welcome:not(.hidden)) .home-side-card {
  border-color: var(--wool-border) !important;
  background: linear-gradient(135deg, #fffdf8, #f6efe2) !important;
  box-shadow: var(--wool-shadow-soft) !important;
}

.home-side-encyclo,
body:has(.site-shell--home #welcome:not(.hidden)) .home-side-encyclo {
  border-color: #aebf9d !important;
  background: linear-gradient(135deg, #f7f9f2, #eaf1e2) !important;
}

.home-side-class,
body:has(.site-shell--home #welcome:not(.hidden)) .home-side-class {
  border-color: #ccb796 !important;
  background: linear-gradient(135deg, #fffaf0, #efe2cb) !important;
}

.home-side-arrow {
  background: var(--pasture) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.home-scoreboard {
  border-color: #adbd9b !important;
  background:
    radial-gradient(circle at 4% 0%, rgba(255,255,255,.72), transparent 33%),
    linear-gradient(135deg, #f7f9f2, #e9efe1) !important;
  box-shadow: var(--wool-shadow-soft) !important;
}

.home-scoreboard-kicker,
.home-scoreboard-badge,
.home-featured-race-local-badge {
  color: var(--pasture-dark) !important;
}

.home-score-level-pill {
  border-color: #9caf88 !important;
  background: var(--wool-light) !important;
  color: var(--pasture-dark) !important;
}

.home-score-level-pill:hover,
.home-score-level-pill:focus-visible,
.home-score-level-pill.is-active {
  border-color: var(--pasture) !important;
  background: var(--pasture) !important;
  color: #fff !important;
}

.home-secondary-row {
  border-top-color: rgba(118,88,70,.20) !important;
}

/* ── Cadres photo / jeu ───────────────────────────────────── */
.photo-frame {
  border-color: var(--wool-border-strong) !important;
  background: #eee5d5 !important;
}

.image-fallback {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 36%),
    #eee5d5 !important;
  color: var(--ram-brown-soft) !important;
}

.penalty-info {
  border-color: var(--wool-border) !important;
  background: rgba(255,253,247,.65) !important;
}

/* ── Pied de page ─────────────────────────────────────────── */
.site-shell > .site-footer {
  border-color: rgba(170,146,116,.68) !important;
  background: rgba(255,253,247,.72) !important;
  color: var(--ram-brown-soft) !important;
}

.site-footer a {
  color: var(--ram-brown) !important;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--pasture-dark) !important;
}

.site-footer .footer-separator {
  color: rgba(118,88,70,.45) !important;
}

/* ── Mobile : préserver la douceur de la charte ─────────── */
@media (max-width: 700px) {
  .app-header,
  .topbar.app-header,
  body:has(.site-shell--home #welcome:not(.hidden)) .topbar.app-header {
    border-color: var(--wool-border-strong) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(255,255,255,.80), transparent 36%),
      linear-gradient(135deg, #f7efdf 0%, #e7d8bd 100%) !important;
    box-shadow: 0 3px 10px rgba(75,45,32,.10) !important;
  }

  body:has(.site-shell--home #welcome:not(.hidden)) .home-side-class {
    border-color: #ccb796 !important;
    background: linear-gradient(135deg, #fffaf0, #efe2cb) !important;
  }
}

/* ── Accessibilité : contraste et focus cohérents ───────── */
:focus-visible {
  outline-color: var(--sage);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Correctif 0.1.5 : priorité du bandeau laine ─────────────
   Le composant de bandeau commun contient plusieurs règles
   !important très spécifiques. Ces sélecteurs volontairement plus précis
   garantissent que le thème ovins reste prioritaire sur toutes les pages,
   notamment l'accueil en affichage ordinateur. */
html body .site-shell > header.topbar.app-header,
html body .site-shell > header.topbar.app-header.is-unified-desktop,
html body .site-shell--home > header.topbar.app-header.is-unified-desktop,
html body:has(#welcome:not(.hidden)) .site-shell--home > header.topbar.app-header.is-unified-desktop {
  color: var(--ram-brown) !important;
  border-color: #8f7358 !important;
  background-color: #efe3cd !important;
  background-image:
    radial-gradient(circle at 14% -15%, rgba(255,255,255,.92) 0 18%, transparent 44%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.10) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, #f8f1e4 0%, #eee1ca 56%, #e4d2b3 100%) !important;
  box-shadow:
    inset 0 -4px 0 rgba(113,132,91,.34),
    0 4px 12px rgba(75,45,32,.12) !important;
}

html body .site-shell > header.topbar.app-header h1,
html body .site-shell > header.topbar.app-header.is-unified-desktop h1,
html body:has(#welcome:not(.hidden)) .site-shell--home > header.topbar.app-header h1 {
  color: var(--ram-brown) !important;
  text-shadow: none !important;
}

html body .site-shell > header.topbar.app-header .subtitle,
html body .site-shell > header.topbar.app-header .credits {
  color: var(--ram-brown-soft) !important;
  text-shadow: none !important;
}

html body .site-shell > header.topbar.app-header .header-link,
html body:has(#welcome:not(.hidden)) .site-shell--home > header.topbar.app-header .header-link {
  border-color: #baa487 !important;
  background: rgba(255,253,247,.88) !important;
  color: var(--ram-brown) !important;
  box-shadow: 0 1px 0 rgba(75,45,32,.08) !important;
}

html body .site-shell > header.topbar.app-header .header-link:hover,
html body .site-shell > header.topbar.app-header .header-link:focus-visible,
html body:has(#welcome:not(.hidden)) .site-shell--home > header.topbar.app-header .header-link:hover,
html body:has(#welcome:not(.hidden)) .site-shell--home > header.topbar.app-header .header-link:focus-visible {
  border-color: var(--sage) !important;
  background: #edf2e5 !important;
  color: var(--pasture-dark) !important;
}

html body .site-shell > header.topbar.app-header .header-link.is-active,
html body .site-shell > header.topbar.app-header .header-link[aria-current="page"] {
  border-color: var(--pasture-dark) !important;
  background: linear-gradient(180deg, #6f8d5d, #587748) !important;
  color: #fff !important;
}

html body .site-shell > header.topbar.app-header .site-header-language {
  border-color: #9f8467 !important;
  background: rgba(255,253,247,.94) !important;
}

html body .site-shell > header.topbar.app-header .site-header-language a {
  color: var(--ram-brown) !important;
}

html body .site-shell > header.topbar.app-header .site-header-language a.is-active {
  background: var(--ram-brown) !important;
  color: #fff !important;
}

/* ── Affinage 0.1.6 : hiérarchie, matière et sobriété ─────────
   Cette passe conserve la palette Laine & pâturage mais réduit le poids
   visuel des éléments secondaires afin de laisser le logo, les titres et
   l'action « Jouer maintenant » structurer naturellement la page. */
/* Le fond extérieur devient un peu plus présent que la « feuille » centrale. */
html,
body {
  background-color: var(--wool-bg) !important;
}

body {
  background-image:
    radial-gradient(circle at 16% 6%, rgba(255,255,255,.46), transparent 27%),
    radial-gradient(circle at 82% 28%, rgba(255,249,238,.26), transparent 33%),
    repeating-linear-gradient(111deg, rgba(255,255,255,.075) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(29deg, rgba(75,45,32,.025) 0 1px, transparent 1px 13px) !important;
}

/* Cadres : moins « dessinés », davantage matière/papier. */
.panel,
.race-panel,
.photo-panel,
.best,
dialog,
.join-card,
.join-error,
.intro,
.empty,
.error-box,
.thanks,
.proposal-hero,
.proposal-message,
.filters,
.defi-hero,
.defi-error,
.defi-game-start,
.defi-result-panel {
  border-color: var(--wool-border) !important;
  box-shadow: 0 3px 10px rgba(75,45,32,.09) !important;
}

/* En-tête : un soupçon plus clair et une bordure moins lourde. */
html body .site-shell > header.topbar.app-header,
html body .site-shell > header.topbar.app-header.is-unified-desktop,
html body .site-shell--home > header.topbar.app-header.is-unified-desktop,
html body:has(#welcome:not(.hidden)) .site-shell--home > header.topbar.app-header.is-unified-desktop {
  border-color: #9f876e !important;
  background-color: #f2e8d7 !important;
  background-image:
    radial-gradient(circle at 14% -15%, rgba(255,255,255,.94) 0 18%, transparent 44%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.11) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, #faf4e9 0%, #f1e7d6 58%, #e9dcc6 100%) !important;
  box-shadow:
    inset 0 -3px 0 rgba(113,132,91,.28),
    0 3px 10px rgba(75,45,32,.10) !important;
}

html body .site-shell > header.topbar.app-header .header-link,
html body:has(#welcome:not(.hidden)) .site-shell--home > header.topbar.app-header .header-link {
  border-color: #c3b197 !important;
  background: rgba(255,253,248,.84) !important;
  box-shadow: none !important;
  font-weight: 760 !important;
}

/* Accueil : vraie « feuille » ivoire détachée du fond laine. */
.home-hero-optimized,
body:has(.site-shell--home #welcome:not(.hidden)) .home-hero-optimized {
  border-color: #bca98f !important;
  background:
    radial-gradient(circle at 7% 8%, rgba(255,255,255,.90), transparent 31%),
    linear-gradient(135deg, #fffefa 0%, #fbf7ef 100%) !important;
  box-shadow: 0 5px 15px rgba(75,45,32,.10) !important;
}

/* Typographie : le gras reste réservé aux titres et aux actions. */
.home-intro {
  color: #5d5047 !important;
  font-weight: 650 !important;
  line-height: 1.42 !important;
}

.home-side-title {
  font-weight: 850 !important;
  letter-spacing: -.01em;
}

.home-side-text {
  color: #66584e !important;
  font-weight: 610 !important;
  line-height: 1.38 !important;
}

.home-feature-pills span,
body:has(.site-shell--home #welcome:not(.hidden)) .home-feature-pills span {
  border-color: #bdc8ae !important;
  background: #f1f5ed !important;
  color: #45613b !important;
  font-weight: 690 !important;
}

/* Les deux accès latéraux gardent leur identité mais partagent la même douceur. */
.home-side-card,
body:has(.site-shell--home #welcome:not(.hidden)) .home-side-card {
  border-width: 1.5px !important;
  box-shadow: 0 2px 6px rgba(75,45,32,.075) !important;
}

.home-side-encyclo,
body:has(.site-shell--home #welcome:not(.hidden)) .home-side-encyclo {
  border-color: #b3c1a5 !important;
  background: linear-gradient(135deg, #fafcf7 0%, #edf2e8 100%) !important;
}

.home-side-class,
body:has(.site-shell--home #welcome:not(.hidden)) .home-side-class {
  border-color: #c8bba5 !important;
  background: linear-gradient(135deg, #fffdf8 0%, #f1ece2 100%) !important;
}

.home-side-arrow {
  background: #58784b !important;
  box-shadow: none !important;
}

/* Le classement reste sauge mais plus fin ; son CTA ne concurrence plus « Jouer ». */
.home-scoreboard {
  border-width: 2px !important;
  border-color: #b4c0a6 !important;
  background:
    radial-gradient(circle at 4% 0%, rgba(255,255,255,.78), transparent 33%),
    linear-gradient(135deg, #fafbf7 0%, #edf1e8 100%) !important;
  box-shadow: 0 2px 7px rgba(75,45,32,.075) !important;
}

.home-scoreboard-kicker {
  font-weight: 820 !important;
}

.home-scoreboard-action {
  border: 1.5px solid #9fb18f !important;
  background: #f5f8f1 !important;
  color: var(--pasture-dark) !important;
  font-weight: 760 !important;
  box-shadow: none !important;
}

.home-scoreboard-action:hover,
.home-scoreboard-action:focus-visible {
  border-color: var(--pasture) !important;
  background: #eaf1e4 !important;
  color: var(--pasture-dark) !important;
  box-shadow: var(--focus-ring) !important;
}

.home-score-empty {
  border-color: #c9baa4 !important;
  background: rgba(255,253,248,.56) !important;
  color: var(--ram-brown) !important;
  font-weight: 700 !important;
}

.home-score-empty span {
  color: #6a5b50 !important;
  font-weight: 590 !important;
}

/* Navigation secondaire du bas : volontairement plate et discrète. */
.home-secondary-row-optimized {
  border-top-color: rgba(112,89,75,.16) !important;
  gap: 8px !important;
}

.home-secondary-row-optimized .home-classic-toggle,
.home-secondary-row-optimized .home-mini-link {
  min-height: 31px !important;
  padding: 6px 10px !important;
  border: 1px solid #c8b8a0 !important;
  border-radius: 9px !important;
  background: rgba(255,253,248,.56) !important;
  color: #695548 !important;
  box-shadow: none !important;
  font-size: .82rem !important;
  font-weight: 680 !important;
}

.home-secondary-row-optimized .home-classic-toggle:hover,
.home-secondary-row-optimized .home-classic-toggle:focus-visible,
.home-secondary-row-optimized .home-mini-link:hover,
.home-secondary-row-optimized .home-mini-link:focus-visible {
  border-color: #aebd9e !important;
  background: #f1f4ed !important;
  color: var(--pasture-dark) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Pied de page : présent mais jamais concurrent du contenu. */
.site-shell > .site-footer {
  border-color: rgba(184,162,135,.52) !important;
  background: rgba(255,253,248,.55) !important;
  box-shadow: none !important;
  color: #78685c !important;
  font-weight: 620 !important;
}

.site-shell > .site-footer a {
  color: #70594b !important;
  font-weight: 650 !important;
}

@media (max-width: 700px) {
  body:has(.site-shell--home #welcome:not(.hidden)) .home-side-class {
    border-color: #c8bba5 !important;
    background: linear-gradient(135deg, #fffdf8 0%, #f1ece2 100%) !important;
  }

  .home-intro {
    font-weight: 620 !important;
  }

  .home-secondary-row-optimized .home-classic-toggle,
  .home-secondary-row-optimized .home-mini-link {
    min-height: 34px !important;
  }
}

/* ── 0.1.7 : mode classe — routage et harmonie visuelle ───────
   Le mode classe hérite désormais exactement du même fond que le reste du
   site. Les anciennes surfaces très jaunes et les gros contours du moteur
   historique sont ramenés dans la charte Laine & pâturage. */
html body:has(.site-shell) {
  background-color: var(--wool-bg) !important;
  background-image:
    radial-gradient(circle at 16% 6%, rgba(255,255,255,.46), transparent 27%),
    radial-gradient(circle at 82% 28%, rgba(255,249,238,.26), transparent 33%),
    repeating-linear-gradient(111deg, rgba(255,255,255,.075) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(29deg, rgba(75,45,32,.025) 0 1px, transparent 1px 13px) !important;
  background-attachment: fixed !important;
}

.site-shell--standard .classroom-intro {
  border: 2px solid var(--wool-border-strong) !important;
  border-left: 5px solid var(--sage) !important;
  background:
    radial-gradient(circle at 4% 0%, rgba(255,255,255,.82), transparent 34%),
    linear-gradient(135deg, #fffefa 0%, #f8f3e9 100%) !important;
  box-shadow: 0 3px 10px rgba(75,45,32,.085) !important;
}

.site-shell--standard .classroom-intro h2,
.site-shell--standard .home-grid .home-card h2 {
  color: var(--ram-brown) !important;
}

.site-shell--standard .classroom-intro p,
.site-shell--standard .home-grid .home-card p {
  color: #5f5148 !important;
  font-weight: 520 !important;
}

.site-shell--standard .home-grid .home-card,
.site-shell--standard > .card {
  border: 2px solid var(--wool-border-strong) !important;
  background:
    radial-gradient(circle at 6% 0%, rgba(255,255,255,.72), transparent 34%),
    linear-gradient(135deg, #fffdf8 0%, #f4eee3 100%) !important;
  box-shadow: 0 3px 9px rgba(75,45,32,.08) !important;
}

.site-shell--standard .teacher-benefits-lead {
  border-left-color: var(--pasture) !important;
  background: var(--sage-soft) !important;
  color: #3f5536 !important;
  font-weight: 720 !important;
}

/* Les liens d'action du mode classe utilisent le même système que les boutons. */
.site-shell a.button,
.site-shell .button {
  border: 2px solid var(--wool-border-strong) !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #fffdf8, #f3ecdf) !important;
  color: var(--ram-brown) !important;
  box-shadow: 0 2px 0 rgba(75,45,32,.11) !important;
  font-weight: 780 !important;
}

.site-shell a.button:hover,
.site-shell .button:hover,
.site-shell a.button:focus-visible,
.site-shell .button:focus-visible {
  border-color: var(--sage) !important;
  background: var(--sage-soft) !important;
  color: var(--pasture-dark) !important;
  box-shadow: var(--focus-ring) !important;
}

.site-shell a.button.primary,
.site-shell .button.primary {
  border-color: var(--pasture-dark) !important;
  background: linear-gradient(180deg, #628a50, var(--pasture)) !important;
  color: #fff !important;
  box-shadow: 0 3px 0 rgba(57,87,47,.32) !important;
}

.site-shell a.button.primary:hover,
.site-shell .button.primary:hover,
.site-shell a.button.primary:focus-visible,
.site-shell .button.primary:focus-visible {
  border-color: #2f4928 !important;
  background: linear-gradient(180deg, #587e48, #426537) !important;
  color: #fff !important;
}

.site-shell--standard hr {
  border-color: var(--wool-border) !important;
}

@media (max-width: 950px) {
  html body:has(.site-shell) {
    background-attachment: scroll !important;
  }
}


/* 0.2.0 — normalisation finale des composants communs */
.btn-primary, .primary-action, button.btn-primary, a.btn-primary {
  background: var(--wool-primary) !important;
  border-color: var(--wool-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .primary-action:hover { background: var(--wool-primary-hover) !important; }
.btn-danger, .danger, button.danger, a.danger { background: var(--wool-danger) !important; color:#fff !important; }