/*
 * Charte graphique « Bord de mer rétro » — commune à toutes les pages.
 *
 * Couleurs douces (sable, marine délavé, turquoise, corail, paille, lavande),
 * contours d'encre et ombres décalées façon affiche imprimée.
 * Les pages n'utilisent que ces variables : pour retoucher la charte, modifier
 * uniquement ce fichier.
 */

@font-face {
  font-family: "Young Serif";
  src: url("polices/young-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("polices/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Fonds */
  --fond: #eef0e6;
  --carte: #fbfbf5;
  --carte-2: #f4f4ea;
  --creux: #e5e8dc;

  /* Encre (texte, contours) */
  --encre: #26404d;
  --encre-douce: #4f6874;
  --encre-pale: #7d919a;

  /* Couleurs d'accent, avec leur teinte claire et leur encre lisible */
  --turquoise: #7fc0bc;
  --turquoise-clair: #d5ebe8;
  --turquoise-encre: #24625e;
  --corail: #f4b48f;
  --corail-clair: #fbe3d4;
  --corail-encre: #9a4425;
  --paille: #f3d58a;
  --paille-clair: #faefcf;
  --paille-encre: #6e5313;
  --lavande: #a9b8d6;
  --lavande-clair: #e3e8f3;
  --lavande-encre: #394c76;

  /* Échiquiers */
  --case-claire: #f3ead6;
  --case-foncee: #86b2ad;
  --case-choisie: #f3d58a;
  --case-dernier-coup: #f6e3a6;

  /* Traits, ombres, rayons */
  --trait: 2px solid var(--encre);
  --trait-fin: 1.5px solid rgb(38 64 77 / 22%);
  --ombre: 4px 4px 0 var(--encre);
  --ombre-petite: 2px 2px 0 var(--encre);
  --ombre-douce: 0 10px 30px rgb(38 64 77 / 12%);
  --rayon: 1.1rem;
  --rayon-petit: 0.7rem;
  --rayon-pilule: 999px;

  /* Polices */
  --police-titre: "Young Serif", "Iowan Old Style", Georgia, serif;
  --police-texte: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-symboles: "DejaVu Sans", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;

  font-family: var(--police-texte);
  color: var(--encre);
  background: var(--fond);
}

* {
  box-sizing: border-box;
}

/* Un élément masqué reste masqué, même si sa règle lui donne un display. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  color: var(--encre);
  /* Fond sable avec un pointillé discret, façon papier imprimé. */
  background-color: var(--fond);
  background-image: radial-gradient(rgb(38 64 77 / 7%) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

h1,
h2,
h3,
.titre {
  font-family: var(--police-titre);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--encre);
}

a {
  color: var(--turquoise-encre);
}

::selection {
  background: var(--paille);
  color: var(--encre);
}

:focus-visible {
  outline: 3px solid var(--turquoise-encre);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- Composants */

/* Petit sur-titre en capitales espacées. */
.eyebrow {
  color: var(--corail-encre);
  font-family: var(--police-texte);
  letter-spacing: 0.18em;
}

/* Carte rétro : fond clair, contour d'encre, ombre décalée. */
.carte-retro {
  border: var(--trait);
  border-radius: var(--rayon);
  background: var(--carte);
  box-shadow: var(--ombre);
}

/* Bouton rétro principal. */
.bouton-retro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1.1rem;
  border: var(--trait);
  border-radius: var(--rayon-pilule);
  background: var(--turquoise);
  color: var(--encre);
  box-shadow: var(--ombre-petite);
  cursor: pointer;
  font: 700 0.95rem var(--police-texte);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.bouton-retro:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--encre);
}

.bouton-retro:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--encre);
}

/* Pastille (score, niveau…). */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border: 1.5px solid var(--encre);
  border-radius: var(--rayon-pilule);
  background: var(--paille);
  color: var(--encre);
  font-weight: 700;
}

/* Champs de formulaire. */
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea {
  border: var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--carte);
  color: var(--encre);
  font-family: var(--police-texte);
}

/* Boîtes de dialogue. */
dialog {
  border: var(--trait);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--encre);
  box-shadow: var(--ombre);
}

dialog::backdrop {
  background: rgb(38 64 77 / 45%);
}

kbd {
  padding: 0.1rem 0.4rem;
  border: 1.5px solid var(--encre);
  border-radius: 0.35rem;
  background: var(--carte);
  box-shadow: 1px 1px 0 var(--encre);
  font-family: var(--police-texte);
}

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

/* ------------------------------------------------- Habillage des pages du site */
/* Préfixe « body » : ces règles l'emportent sur les styles propres aux pages,  */
/* qui gardent la mise en page tandis que la charte fixe l'allure commune.      */

/* Grandes cartes : contour d'encre et ombre décalée. */
body :is(.choice, .progression, .topic-card, .quiz-card, .progress-panel, .practice-panel,
  .opening-picker, .sidebar-card, .principle-card, .game-panel, .screen-frame, .board-frame,
  .champions-summary, .panel, .summary) {
  border: var(--trait);
  background-color: var(--carte);
  box-shadow: var(--ombre);
}

body :is(.choice, .topic-card, .opening-card):hover {
  box-shadow: 6px 6px 0 var(--encre);
}

/* Petites cartes : contour fin, sans ombre lourde. */
body :is(.mascot-card, .reward-card, .badges-card, .badge, .opening-card, .player-card,
  .coach-card, .daily-challenge, .streak-card, .progress-row, .move-list, .toy-item) {
  border: 1.5px solid rgb(38 64 77 / 35%);
  box-shadow: none;
}

body .opening-card[aria-pressed="true"],
body .cat-option[aria-pressed="true"] {
  border-color: var(--encre);
  background: var(--turquoise-clair);
  box-shadow: var(--ombre-petite);
}

/* Boutons principaux. */
body :is(.game-button, .primary-button, .start-button, .button.primary, button.primary, #chess-auth-submit) {
  border: var(--trait);
  border-radius: var(--rayon-pilule);
  background: var(--turquoise);
  color: var(--encre);
  box-shadow: var(--ombre-petite);
  font-weight: 700;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

body :is(.game-button, .primary-button, .start-button, .button.primary, button.primary, #chess-auth-submit):hover:not(:disabled) {
  background: #93cbc7;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--encre);
}

body :is(.game-button, .primary-button, .start-button, .button.primary, button.primary, #chess-auth-submit):active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* Boutons secondaires et liens-boutons. */
body :is(.tool-button, .button.secondary, .back-link, .opening-link, .restart-button, .cat-option,
  .secondary, .control-button, .chess-auth-toggle, .admin-tab, .promotion-choice) {
  border: 2px solid var(--encre);
  background: var(--carte);
  color: var(--encre);
  box-shadow: var(--ombre-petite);
}

body :is(.tool-button, .button.secondary, .back-link, .opening-link, .restart-button, .cat-option,
  .secondary, .control-button, .chess-auth-toggle, .admin-tab, .promotion-choice):hover:not(:disabled) {
  background: var(--paille-clair);
}

/* Pastilles de score. */
body :is(.score-badge, .champions-summary__score, .session-pill) {
  border: 1.5px solid var(--encre);
  background: var(--paille);
  color: var(--encre);
}

/* Barres de progression. */
body :is(.score-track, .champions-summary__track, .quiz-progress-track, .progress-track, .health-track) {
  border: 1.5px solid var(--encre);
  background: var(--carte);
}

body :is(.score-fill, .champions-summary__fill, .quiz-progress-fill, .progress-value) {
  background: var(--turquoise);
}

/* Une couleur d'accent par jeu : chaque carte de l'accueil a sa teinte. */
body .choices .choice:nth-child(4n + 1) .choice-icon { background: var(--turquoise-clair); color: var(--turquoise-encre); }
body .choices .choice:nth-child(4n + 2) .choice-icon { background: var(--corail-clair); color: var(--corail-encre); }
body .choices .choice:nth-child(4n + 3) .choice-icon { background: var(--paille-clair); color: var(--paille-encre); }
body .choices .choice:nth-child(4n + 4) .choice-icon { background: var(--lavande-clair); color: var(--lavande-encre); }

body .choice-icon {
  border: 2px solid var(--encre);
  box-shadow: var(--ombre-petite);
}

body .choice-cta {
  color: var(--corail-encre);
}

/* Barre de compte et fenêtres. */
body .chess-account {
  border: var(--trait);
  background: var(--carte);
  box-shadow: var(--ombre);
}

body :is(#chess-auth, #reward-celebration, .promotion-dialog) {
  border: var(--trait);
  background: var(--carte);
  box-shadow: var(--ombre);
}

body #reward-celebration {
  background: var(--paille-clair);
}

/* Encadré de conseil : teinte lavande pour se distinguer. */
body .principle-card {
  background-color: var(--lavande-clair);
}

/* Liens de retour : pilules. */
body :is(.back-link, .opening-link) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--rayon-pilule);
  text-decoration: none;
  font-weight: 700;
}

/* Réponses du quiz. */
body .answer {
  border: 2px solid rgb(38 64 77 / 30%);
  background: var(--carte);
  color: var(--encre);
}

body .answer:hover:not(:disabled) {
  border-color: var(--encre);
  background: var(--paille-clair);
}

body .answer.correct {
  border-color: var(--turquoise-encre);
  background: var(--turquoise-clair);
}

body .answer.incorrect {
  border-color: var(--corail-encre);
  background: var(--corail-clair);
}

/* Thèmes du quiz : une teinte par carte, comme à l'accueil. */
body .topic-icon {
  border: 1.5px solid var(--encre);
}
body .topic-grid .topic-card:nth-child(4n + 1) .topic-icon { background: var(--turquoise-clair); color: var(--turquoise-encre); }
body .topic-grid .topic-card:nth-child(4n + 2) .topic-icon { background: var(--corail-clair); color: var(--corail-encre); }
body .topic-grid .topic-card:nth-child(4n + 3) .topic-icon { background: var(--paille-clair); color: var(--paille-encre); }
body .topic-grid .topic-card:nth-child(4n + 4) .topic-icon { background: var(--lavande-clair); color: var(--lavande-encre); }

body .picker {
  border: var(--trait);
  background-color: var(--carte);
  box-shadow: var(--ombre);
}

/* Badges pas encore obtenus et chats verrouillés : discrets mais lisibles. */
body .badge[data-earned="false"] {
  opacity: 1;
  border-style: dashed;
  background: var(--carte-2);
  color: var(--encre-douce);
}

body .badge[data-earned="false"] .badge-emoji {
  opacity: 0.45;
  filter: grayscale(1);
}

body .badge[data-earned="true"] {
  border-color: var(--encre);
  background: var(--paille-clair);
  box-shadow: var(--ombre-petite);
}

body .cat-option:disabled {
  opacity: 1;
  border-style: dashed;
  border-color: rgb(38 64 77 / 40%);
  background: var(--carte-2);
  color: var(--encre-douce);
  box-shadow: none;
}

/* Pied de page commun : lien vers les mentions légales. */
.pied-de-page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin: 2.5rem 0 0;
  padding: 1.2rem 1rem 1.6rem;
  border-top: 1.5px dashed rgb(38 64 77 / 25%);
  color: var(--encre-douce);
  font-family: var(--police-texte);
  font-size: 0.85rem;
}

.pied-de-page a {
  color: var(--encre);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.pied-de-page a:hover {
  color: var(--turquoise-encre);
}