/* Palette commune issue du logo S.I.N.C Town : pierre, or, cyan et cuivre. */
:root {
  --bg-color: #b5cbe0;
  --bg-secondary: #dae6f1;
  --bg-tertiary: #a5bed5;
  --navbar-bg: rgba(218, 230, 241, .97);
  --footer-bg: #a5bed5;
  --preloader-bg: #101923;
  --text-color: #202c36;
  --text-secondary: #56616a;
  --text-rgb: 32, 44, 54;
  --border-color: rgba(32, 44, 54, .14);
  --accent-color: #8b570a;
  --accent-rgb: 139, 87, 10;
  --accent-hover: #704306;
  --accent-bright: #ffc34b;
  --secondary-color: #066c99;
  --secondary-rgb: 6, 108, 153;
  --copper-color: #ac4e1b;
  --copper-rgb: 172, 78, 27;
  --leaf-color: #437326;
  --action-bg: #ffc34b;
  --action-hover: #ffd477;
  --action-text: #26200f;
  --btn-bg: var(--accent-color);
  --btn-text: #ffffff;
  --grad-sp: #8b570a;
  --grad-votes: #066c99;
  --surface-shadow: 0 12px 32px rgba(27, 39, 47, .05);
}
[data-theme="dark"] {
  --bg-color: #2b2824;
  --bg-secondary: #37322c;
  --bg-tertiary: #443d34;
  --navbar-bg: rgba(58, 52, 44, .97);
  --footer-bg: #24211e;
  --text-color: #f5efdf;
  --text-secondary: #cec4b7;
  --text-rgb: 245, 239, 223;
  --border-color: rgba(211, 191, 159, .18);
  --accent-color: #ffc34b;
  --accent-rgb: 255, 195, 75;
  --accent-hover: #ffd477;
  --secondary-color: #4dc9f5;
  --secondary-rgb: 77, 201, 245;
  --copper-color: #ffa15f;
  --copper-rgb: 255, 161, 95;
  --leaf-color: #a4cb65;
  --btn-bg: var(--accent-color);
  --btn-text: #17212b;
  --grad-sp: #ffc34b;
  --grad-votes: #4dc9f5;
  --surface-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
body { color: var(--text-color); }
::selection { background: rgba(var(--secondary-rgb), .25); color: var(--text-color); }
:focus-visible { outline: 3px solid var(--secondary-color); outline-offset: 4px; }
.navbar::before { background: var(--navbar-bg); }
.nav-links a, [data-theme="dark"] .nav-links a { color: var(--text-secondary); opacity: 1; }
.nav-links a:hover, .nav-links a[aria-current="page"], [data-theme="dark"] .nav-links a:hover { color: var(--accent-color); }
.nav-links a[aria-current="page"] { font-weight: 700; }
.nav-login, [data-theme="dark"] .nav-login { background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .35); color: var(--accent-color); box-shadow: none; }
.nav-login:hover, [data-theme="dark"] .nav-login:hover { background: var(--action-bg); color: var(--action-text); border-color: var(--action-bg); box-shadow: none; }
.bento-pill-btn, .btn-primary, .btn-accent-large, .auth-btn, .btn-checkout, .journey-primary {
  background: var(--action-bg); color: var(--action-text); border-color: var(--action-bg);
  box-shadow: none;
}
.bento-pill-btn:hover, .btn-primary:hover, .btn-accent-large:hover, .auth-btn:hover, .btn-checkout:hover, .journey-primary:hover {
  background: var(--action-hover); color: var(--action-text); border-color: var(--action-hover);
}
.bento-pill-btn .pill-icon { background: rgba(38,32,15,.12); color: var(--action-text); }
.bento-pill-btn:hover .pill-icon { background: var(--action-text); color: var(--action-bg); }
.bento-boutique { background: var(--bg-secondary); }
.bento-community { background: var(--bg-secondary); }
.bento-wiki, .bento-stats { background: var(--bg-secondary); }
.bento-boutique, .bento-community, .bento-wiki, .bento-stats { border: 1px solid var(--border-color); box-shadow: none; }
.bento-boutique p { color: var(--accent-color); }
.bento-wiki h2, .bento-stats h2 { color: var(--secondary-color); }
.community-icon-circle, [data-theme="dark"] .community-icon-circle { color: var(--secondary-color); border-color: var(--bg-secondary); background: var(--bg-color); }
.bento-pill-small, [data-theme="dark"] .bento-pill-small { background: var(--bg-color); color: var(--secondary-color); border: 1px solid var(--border-color); }
.bento-circle-btn, [data-theme="dark"] .bento-circle-btn { background: var(--action-bg); color: var(--action-text); }
.pricing-card, .auth-card, .how-to-card, .staff-card, .vote-main-card, .vote-top-card, .journey-card, .purchase-guide {
  border-color: var(--border-color); box-shadow: none;
}
.pricing-card:hover { border-color: rgba(var(--accent-rgb), .55); }
.how-to-card.active-card { border-color: var(--secondary-color); }
.step-badge, .how-to-card.active-card .step-badge { background: var(--action-bg); color: var(--action-text); }
.support-banner { background: #142d3f; border: 1px solid rgba(77,201,245,.2); }
.support-banner h2 { color: #f5efdf; }
.support-banner p { color: #c4d3dd; }
.support-subtitle { color: #ffc34b; }
.support-btn, .support-btn:hover { background: var(--action-bg); color: var(--action-text); }
.site-footer { background: var(--footer-bg); border-top: 1px solid var(--border-color); }
.footer-title { color: var(--text-color); }
.footer-list a:hover { color: var(--secondary-color); }
.auth-input-group input:focus, .auth-input-group select:focus { border-color: var(--secondary-color); box-shadow: none; }
button:disabled, .btn-checkout:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Surfaces unies, séparation claire des zones et champs du thème clair. */
.sp-popular { background: var(--bg-secondary); border-color: var(--accent-color); box-shadow: none; }
:root:not([data-theme="dark"]) .bento-boutique { background: #fff6e3; border-color: #e6d7b6; }
:root:not([data-theme="dark"]) .bento-community { background: #eaf5fb; border-color: #c8dfe9; }
:root:not([data-theme="dark"]) .pricing-card,
:root:not([data-theme="dark"]) .auth-card,
:root:not([data-theme="dark"]) .how-to-card,
:root:not([data-theme="dark"]) .staff-card,
:root:not([data-theme="dark"]) .vote-main-card,
:root:not([data-theme="dark"]) .vote-top-card { background: #dae6f1; }
:root:not([data-theme="dark"]) .auth-input-group input,
:root:not([data-theme="dark"]) .auth-input-group select {
  background: #f8fafc; color: var(--text-color); border-color: #b6c4cf;
}
:root:not([data-theme="dark"]) input::placeholder { color: #62717d; opacity: 1; }
:root:not([data-theme="dark"]) .support-banner { background: #eaf2f8; border-color: #c8d9e6; }
:root:not([data-theme="dark"]) .support-banner h2 { color: var(--text-color); }
:root:not([data-theme="dark"]) .support-banner p { color: #465c6c; }
:root:not([data-theme="dark"]) .support-subtitle { color: #066c99; }
:root:not([data-theme="dark"]) .nav-login { background: #fff3d6; }
:root:not([data-theme="dark"]) .nav-login:hover { background: var(--action-bg); }

/* Démonstrations entières et cartes accessibles à toutes les tailles. */
.card-video-wrapper { height: auto; aspect-ratio: 16 / 9; background: var(--bg-tertiary); }
.card-video-wrapper video { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 769px) and (max-width: 1100px) {
  .how-to-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-to-card { min-width: 0; }
}
@media (max-width: 768px) {
  .hero.hero-bento { position: relative !important; }
  .bento-image-large, .bento-boutique, .bento-community, .bento-stats, .bento-wiki { display: flex !important; }
  .bento-image-large { margin-left: 0; min-height: 200px; }
  .bento-image-large .image-bg-rect { left: 0 !important; }
  .bento-image-large > img { width: 100%; height: 240px; object-fit: cover; }
  .bento-boutique, .bento-community, .bento-stats, .bento-wiki { min-height: 210px; }
  .card-video-wrapper { height: auto; }
  .how-to-card { min-width: 0; }
  .how-to-card h3, .how-to-card p { overflow-wrap: anywhere; }
}
@media (min-width: 560px) and (max-width: 768px) {
  .bento-boutique, .bento-community, .bento-stats, .bento-wiki { grid-column: span 6 !important; }
}

/* Suppression des nappes lumineuses décoratives. */
.auth-blob { display: none; }
.storage-notice { position:fixed; bottom:16px; left:16px; z-index:10003; max-width: min(520px, calc(100% - 32px)); padding:18px; background:var(--bg-secondary); color:var(--text-color); border:1px solid var(--border-color); border-radius:14px; box-shadow:0 5px 25px rgba(0,0,0,.12); font-size:14px; }
.storage-notice[hidden] { display:none; }
.storage-notice a { color:var(--secondary-color); text-decoration:underline; }
.storage-notice button { padding:10px 16px; margin-top:12px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-tertiary); color:var(--text-color); cursor:pointer; }
.storage-settings {
  display: inline; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: none; color: var(--text-secondary); font: inherit;
  font-size: .85rem; line-height: inherit; text-align: inherit;
  cursor: pointer; text-decoration: none;
}
.storage-settings:hover { color: var(--secondary-color); text-decoration: underline; text-underline-offset: 4px; }
main > .storage-settings { display: block; margin-top: 24px; }
.storage-notice button { font: inherit; }


/* Logo du pied de page : plus lisible, sans modifier la navigation. */
.site-footer .col-logo > img {
  height: 140px !important;
  width: 140px;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .site-footer .col-logo > img { height: 120px !important; width: 120px; }
}
.footer-unavailable { color: var(--text-secondary); font-size: .85rem; }
.footer-unavailable small { display: block; font-size: .7rem; margin-top: 2px; }

/* Ambiance pierre et charbon propre au thème sombre. */
[data-theme="dark"] .support-banner { background: #3b332b; border-color: var(--border-color); }
[data-theme="dark"] .support-banner p { color: var(--text-secondary); }

/* Compteurs et boutons fléchés partagent le même accent. */
.bento-wiki .bento-arrow-hover,
.bento-stats .bento-arrow-hover {
  background: var(--secondary-color) !important;
  color: var(--btn-text) !important;
  box-shadow: none !important;
}

/* Discord conserve sa couleur de marque, les votes leur accent cyan. */
.bento-stats h2 { color: #5865f2; }
.bento-stats .bento-arrow-hover {
  background: #5865f2 !important;
  color: #ffffff !important;
}

/* Chaque tuile du bento a sa couleur : or pour la boutique, cyan pour les votes,
   blurple pour le Discord, vert feuille pour le wiki. Le cuivre a été écarté,
   trop proche de l’or (15° de teinte) pour se distinguer de la tuile voisine. */
.bento-community .community-icon-circle,
[data-theme="dark"] .bento-community .community-icon-circle {
  color: var(--leaf-color);
}
.bento-community .bento-pill-small,
[data-theme="dark"] .bento-community .bento-pill-small {
  color: var(--leaf-color);
}

/* Thème clair : la pastille bleutée (#b5cbe0) restait sous le seuil AA du texte.
   Fond clair + vert foncé (#437326) pour tenir 5,4:1. */
:root:not([data-theme="dark"]) .bento-community .community-icon-circle {
  background: #f8fafc;
  border-color: #eaf5fb;
  color: var(--leaf-color);
}
:root:not([data-theme="dark"]) .bento-community .bento-pill-small {
  background: #f8fafc;
  border-color: #c8dfe9;
  color: var(--leaf-color);
}

/* Pastilles SP / VOTES de l'utilisateur connecté, créées par js/main.js.
   Elles étaient posées en `position: fixed` au coin de l'écran, où elles
   recouvraient le bouton du compte dès que la fenêtre approchait 1100 px ;
   style.css les forçait en `position: static !important`, ce qui les renvoyait
   tout en bas de la page puisque l'élément était ajouté à la fin du body — et
   l'accueil, qui ne charge pas style.css, gardait l'ancien comportement. Elles
   sont maintenant dans `.nav-actions`, donc dans le flux de la barre. */
#nav-user-stats { font-size: .78rem; gap: .6rem; }
#nav-user-stats a { padding: .35rem .8rem; }
@media (max-width: 768px) {
  /* Pas la place : à cette largeur le pseudo est déjà tronqué à 60 px. */
  #nav-user-stats { display: none !important; }
}