/* ------------------------------------------------------------
   style.css : l'apparence de toute l'app (le « système de design »).
   Aucune bibliothèque extérieure : la sécurité du serveur n'autorise que nos propres fichiers.

   Les jeux ont chacun leur feuille (public/jeux/<id>/jeu.css) mais réutilisent
   les variables et les composants d'ici : boutons, cartes, puces, avatars...

     1. Polices, couleurs et mesures (jour / nuit)
     2. Base et typographie
     3. Structure : barre du haut, navigation, cœur central
     4. Composants : boutons, cartes, puces, champs, avatars, onglets, interrupteurs
     5. Fenêtres : modales, feuilles, toasts, menus
     6. Accueil
     7. Liste des jeux
     8. Page d'un jeu : accueil du jeu, bandeau des joueurs, salle d'attente, fin de partie
     9. Nous deux, réglages
    10. Effets : cœurs, confettis, animations
    11. Petits écrans / grands écrans / mouvement réduit
------------------------------------------------------------ */

/* ===== 1. Polices, couleurs et mesures ===== */

@font-face {
  font-family: "Jakarta";
  src: url("/fonts/jakarta.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-italique.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Parisienne";
  src: url("/fonts/parisienne.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Fonds */
  --fond: #fff6f1;
  --fond-halo-1: rgba(255, 143, 171, 0.34);
  --fond-halo-2: rgba(255, 186, 140, 0.32);
  --fond-halo-3: rgba(173, 148, 255, 0.22);

  /* Surfaces (cartes « verre dépoli ») */
  --surface: rgba(255, 255, 255, 0.78);
  --surface-pleine: #ffffff;
  --surface-haute: #ffffff;
  --surface-douce: rgba(70, 20, 45, 0.045);
  --surface-creuse: rgba(70, 20, 45, 0.075);
  --bord: rgba(70, 20, 45, 0.1);
  --bord-fort: rgba(70, 20, 45, 0.2);

  /* Textes */
  --texte: #2b1220;
  --texte-doux: #6b4c5b;
  --texte-faible: #8f7482; /* contraste ≥ 4.5:1 sur le fond */
  --texte-inverse: #ffffff;

  /* Accents */
  --rose: #e63e6d;
  --rose-fonce: #c42a56;
  --rose-doux: rgba(230, 62, 109, 0.12);
  --peche: #ff8a65;
  --or: #e9a91f;
  --or-doux: rgba(233, 169, 31, 0.16);
  --lilas: #8b6cf6;
  --lilas-doux: rgba(139, 108, 246, 0.14);
  --menthe: #0ea371;
  --menthe-doux: rgba(14, 163, 113, 0.13);
  --lagon: #0891b2;
  --alerte: #dc2b3d;
  --alerte-doux: rgba(220, 43, 61, 0.11);

  --degrade: linear-gradient(135deg, #ff4f86 0%, #ff8a65 100%);
  --degrade-doux: linear-gradient(135deg, rgba(255, 79, 134, 0.14), rgba(255, 138, 101, 0.14));
  --degrade-reve: linear-gradient(135deg, #8b6cf6 0%, #e63e6d 60%, #ff8a65 100%);

  /* Les deux joueurs (remplacées par les couleurs choisies dans les réglages) */
  --lucie: #e84393;
  --nathan: #3a7bf2;
  --moi: var(--lucie);
  --autre: var(--nathan);

  /* Formes */
  --rayon-xl: 30px;
  --rayon: 22px;
  --rayon-m: 16px;
  --rayon-s: 12px;
  --rayon-xs: 8px;
  --pilule: 999px;

  --ombre: 0 1px 2px rgba(110, 30, 60, 0.06), 0 12px 32px -14px rgba(110, 30, 60, 0.28);
  --ombre-forte: 0 2px 6px rgba(110, 30, 60, 0.08), 0 30px 70px -24px rgba(110, 30, 60, 0.45);
  --ombre-bouton: 0 10px 22px -10px rgba(230, 62, 109, 0.75);
  --flou: saturate(170%) blur(20px);

  --police: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --police-script: "Parisienne", "Snell Roundhand", cursive;
  --police-main: "Caveat", "Bradley Hand", cursive;

  --ressort: cubic-bezier(0.34, 1.56, 0.64, 1);
  --doux: cubic-bezier(0.2, 0.8, 0.3, 1);
  --transition: 180ms var(--doux);

  --haut: 60px; /* hauteur de la barre du haut */
  --bas: 74px; /* hauteur de la navigation du bas (mobile) */
  --largeur: 1180px;
  --marge: 18px;
}

/* Thème nuit : choisi dans les réglages, ou automatique selon le téléphone */
:root[data-theme="nuit"] {
  color-scheme: dark;
  --fond: #140b16;
  --fond-halo-1: rgba(214, 51, 108, 0.24);
  --fond-halo-2: rgba(255, 120, 80, 0.12);
  --fond-halo-3: rgba(120, 90, 255, 0.2);
  --surface: rgba(40, 22, 42, 0.74);
  --surface-pleine: #23132a;
  --surface-haute: #2c1a33;
  --surface-douce: rgba(255, 255, 255, 0.05);
  --surface-creuse: rgba(255, 255, 255, 0.08);
  --bord: rgba(255, 255, 255, 0.1);
  --bord-fort: rgba(255, 255, 255, 0.2);
  --texte: #fdf0f5;
  --texte-doux: #d9bfcc;
  --texte-faible: #a8899a;
  --rose: #ff5c8d;
  --rose-fonce: #ff3d77;
  --rose-doux: rgba(255, 92, 141, 0.16);
  --or: #ffc94d;
  --menthe: #34d399;
  --lilas: #a993ff;
  --alerte: #ff6b7d;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 36px -16px rgba(0, 0, 0, 0.7);
  --ombre-forte: 0 2px 6px rgba(0, 0, 0, 0.35), 0 30px 70px -24px rgba(0, 0, 0, 0.85);
  --ombre-bouton: 0 10px 24px -10px rgba(255, 70, 130, 0.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="jour"]) {
    color-scheme: dark;
    --fond: #140b16;
    --fond-halo-1: rgba(214, 51, 108, 0.24);
    --fond-halo-2: rgba(255, 120, 80, 0.12);
    --fond-halo-3: rgba(120, 90, 255, 0.2);
    --surface: rgba(40, 22, 42, 0.74);
    --surface-pleine: #23132a;
    --surface-haute: #2c1a33;
    --surface-douce: rgba(255, 255, 255, 0.05);
    --surface-creuse: rgba(255, 255, 255, 0.08);
    --bord: rgba(255, 255, 255, 0.1);
    --bord-fort: rgba(255, 255, 255, 0.2);
    --texte: #fdf0f5;
    --texte-doux: #d9bfcc;
    --texte-faible: #a8899a;
    --rose: #ff5c8d;
    --rose-fonce: #ff3d77;
    --rose-doux: rgba(255, 92, 141, 0.16);
    --or: #ffc94d;
    --menthe: #34d399;
    --lilas: #a993ff;
    --alerte: #ff6b7d;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 36px -16px rgba(0, 0, 0, 0.7);
    --ombre-forte: 0 2px 6px rgba(0, 0, 0, 0.35), 0 30px 70px -24px rgba(0, 0, 0, 0.85);
    --ombre-bouton: 0 10px 24px -10px rgba(255, 70, 130, 0.65);
  }
}

/* ===== 2. Base et typographie ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--fond);
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Les halos colorés du fond, fixes derrière tout le reste */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 36% at 8% 6%, var(--fond-halo-1), transparent 72%),
    radial-gradient(38% 32% at 96% 12%, var(--fond-halo-2), transparent 72%),
    radial-gradient(50% 42% at 75% 98%, var(--fond-halo-3), transparent 72%),
    radial-gradient(34% 30% at 0% 80%, var(--fond-halo-2), transparent 72%);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-optical-sizing: auto;
}

h1 {
  font-size: clamp(30px, 6vw, 44px);
}
h2 {
  font-size: clamp(22px, 4.2vw, 28px);
}
h3 {
  font-size: 19px;
}
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
img,
svg {
  display: block;
  max-width: 100%;
}
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rose) 70%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}
::selection {
  background: var(--rose-doux);
}

.script {
  font-family: var(--police-script);
  font-weight: 400;
  letter-spacing: 0;
}
.manuscrit {
  font-family: var(--police-main);
}
.titre-degrade {
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.texte-doux {
  color: var(--texte-doux);
}
.texte-faible {
  color: var(--texte-faible);
}
.petit {
  font-size: 13.5px;
}
.centre {
  text-align: center;
}
.sur-titre {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose);
}
.lucie-texte {
  color: var(--lucie);
}
.nathan-texte {
  color: var(--nathan);
}
.chiffres {
  font-variant-numeric: tabular-nums;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== 3. Structure ===== */

.barre-haut {
  position: sticky;
  top: 0;
  z-index: 40;
  height: calc(var(--haut) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(var(--marge) + env(safe-area-inset-right)) 0 calc(var(--marge) + env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--fond) 72%, transparent);
  backdrop-filter: var(--flou);
  -webkit-backdrop-filter: var(--flou);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.barre-haut.defilee {
  border-bottom-color: var(--bord);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--police-script);
  font-size: 27px;
  line-height: 1;
  white-space: nowrap;
  padding-top: 4px;
}
.logo .esperluette {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 0.72em;
  margin: 0 3px;
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.retour-haut {
  display: none;
}
body.en-jeu .retour-haut {
  display: inline-flex;
}
body.en-jeu .logo {
  display: none;
}

.titre-haut {
  display: none;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 19px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
body.en-jeu .titre-haut {
  display: block;
}

.actions-haut {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.presence-haut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--pilule);
  background: var(--surface);
  border: 1px solid var(--bord);
  font-size: 13px;
  color: var(--texte-doux);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
}
.presence-haut span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.connexion-perdue {
  position: fixed;
  left: 50%;
  top: calc(var(--haut) + env(safe-area-inset-top) + 8px);
  transform: translateX(-50%);
  z-index: 60;
  padding: 6px 14px;
  border-radius: var(--pilule);
  background: var(--texte);
  color: var(--fond);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--ombre);
}

/* La vue (le contenu de la page) */
.vue {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 18px calc(var(--marge) + env(safe-area-inset-right)) calc(var(--bas) + 40px + env(safe-area-inset-bottom)) calc(var(--marge) + env(safe-area-inset-left));
  animation: apparaitre 320ms var(--doux);
}
body.en-jeu .vue {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* La navigation : barre du bas sur téléphone, pilule flottante en haut sur ordinateur */
.navigation {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--bas) + env(safe-area-inset-bottom));
  padding: 6px 8px env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: 1fr 1fr 84px 1fr 1fr;
  align-items: center;
  background: color-mix(in srgb, var(--surface-pleine) 82%, transparent);
  backdrop-filter: var(--flou);
  -webkit-backdrop-filter: var(--flou);
  border-top: 1px solid var(--bord);
}
body.en-jeu .navigation {
  display: none;
}

.onglet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texte-faible);
  transition: color var(--transition), transform 120ms;
}
.onglet svg {
  width: 25px;
  height: 25px;
  transition: transform 300ms var(--ressort);
}
.onglet:active {
  transform: scale(0.94);
}
.onglet.actif {
  color: var(--rose);
}
.onglet.actif svg {
  transform: translateY(-1px) scale(1.08);
}

/* Le gros cœur au centre : « Je pense à toi », accessible de partout */
.coeur-central {
  justify-self: center;
  position: relative;
  width: 66px;
  height: 66px;
  margin-top: -30px;
  border: 0;
  border-radius: 50%;
  background: var(--degrade);
  color: #fff;
  box-shadow: 0 0 0 6px var(--fond), var(--ombre-bouton), 0 14px 30px -8px rgba(230, 62, 109, 0.6);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 260ms var(--ressort);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.coeur-central svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(120, 0, 40, 0.3));
}
.coeur-central:hover {
  transform: scale(1.05);
}
.coeur-central:active,
.coeur-central.bat {
  animation: battement 520ms var(--ressort);
}
.coeur-central .compteur {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--pilule);
  background: var(--surface-pleine);
  color: var(--rose);
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: var(--ombre);
}

/* ===== 4. Composants ===== */

/* --- Boutons --- */
.bouton {
  --b-fond: var(--surface);
  --b-texte: var(--texte);
  --b-bord: var(--bord-fort);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--pilule);
  border: 1px solid var(--b-bord);
  background: var(--b-fond);
  color: var(--b-texte);
  font-weight: 650;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: transform 140ms var(--doux), box-shadow var(--transition), background var(--transition), opacity var(--transition), border-color var(--transition);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.bouton svg {
  width: 19px;
  height: 19px;
  flex: none;
}
.bouton:hover {
  border-color: color-mix(in srgb, var(--rose) 45%, var(--b-bord));
}
.bouton:active {
  transform: scale(0.96);
}
.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.bouton.primaire {
  --b-fond: var(--degrade);
  --b-texte: #fff;
  --b-bord: transparent;
  box-shadow: var(--ombre-bouton);
  text-shadow: 0 1px 1px rgba(120, 0, 40, 0.18);
}
.bouton.primaire:hover {
  box-shadow: 0 14px 28px -10px rgba(230, 62, 109, 0.85);
}
.bouton.secondaire {
  --b-fond: var(--rose-doux);
  --b-texte: var(--rose-fonce);
  --b-bord: transparent;
}
:root[data-theme="nuit"] .bouton.secondaire {
  --b-texte: var(--rose);
}
.bouton.fantome {
  --b-fond: transparent;
  --b-bord: transparent;
}
.bouton.fantome:hover {
  --b-fond: var(--surface-douce);
}
.bouton.danger {
  --b-fond: var(--alerte-doux);
  --b-texte: var(--alerte);
  --b-bord: transparent;
}
.bouton.lucie {
  --b-fond: var(--lucie);
  --b-texte: #fff;
  --b-bord: transparent;
}
.bouton.nathan {
  --b-fond: var(--nathan);
  --b-texte: #fff;
  --b-bord: transparent;
}
.bouton.petit {
  min-height: 34px;
  padding: 6px 13px;
  font-size: 13.5px;
}
.bouton.petit svg {
  width: 16px;
  height: 16px;
}
.bouton.grand {
  min-height: 56px;
  padding: 14px 28px;
  font-size: 17px;
}
.bouton.large {
  width: 100%;
}
.bouton.rond {
  width: 44px;
  min-width: 44px;
  padding: 0;
}
.bouton.rond.petit {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
}
.bouton.charge {
  pointer-events: none;
  opacity: 0.75;
}
.bouton.charge::after {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: tourner 700ms linear infinite;
}

.rangee-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.rangee-boutons.centre {
  justify-content: center;
}

/* --- Cartes --- */
.carte {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 20px;
  box-shadow: var(--ombre);
  backdrop-filter: var(--flou);
  -webkit-backdrop-filter: var(--flou);
}
.carte.pleine {
  background: var(--surface-pleine);
}
.carte.cliquable {
  cursor: pointer;
  transition: transform 220ms var(--doux), box-shadow 220ms var(--doux);
}
.carte.cliquable:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-forte);
}
.carte.cliquable:active {
  transform: translateY(-1px) scale(0.99);
}
.carte-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.carte-titre h2,
.carte-titre h3 {
  font-size: 20px;
}
.carte-titre .bouton {
  margin-left: auto;
}

.empilement {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.grille {
  display: grid;
  gap: 16px;
}
.grille-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.grille-3 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.entete-vue {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 6px 0 22px;
}
.entete-vue .sous-titre {
  margin-top: 6px;
  color: var(--texte-doux);
  font-size: 16px;
}

.section {
  margin-top: 30px;
}
.section > h2 {
  margin-bottom: 14px;
}

/* --- Puces --- */
.puce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--pilule);
  background: var(--surface-creuse);
  color: var(--texte-doux);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}
.puce svg {
  width: 14px;
  height: 14px;
}
.puce.rose {
  background: var(--rose-doux);
  color: var(--rose-fonce);
}
:root[data-theme="nuit"] .puce.rose {
  color: var(--rose);
}
.puce.or {
  background: var(--or-doux);
  color: color-mix(in srgb, var(--or) 70%, var(--texte));
}
.puce.menthe {
  background: var(--menthe-doux);
  color: var(--menthe);
}
.puce.lilas {
  background: var(--lilas-doux);
  color: var(--lilas);
}
.puce.lucie {
  background: color-mix(in srgb, var(--lucie) 16%, transparent);
  color: color-mix(in srgb, var(--lucie) 80%, var(--texte));
}
.puce.nathan {
  background: color-mix(in srgb, var(--nathan) 16%, transparent);
  color: color-mix(in srgb, var(--nathan) 80%, var(--texte));
}
.puce.vive {
  background: var(--degrade);
  color: #fff;
  animation: pulsation 1.6s ease-in-out infinite;
}
.puce.choix {
  cursor: pointer;
  border: 1px solid var(--bord);
  background: var(--surface);
  padding: 7px 14px;
  font-size: 14px;
  min-height: 36px;
  transition: all var(--transition);
}
.puce.choix[aria-pressed="true"] {
  background: var(--texte);
  color: var(--fond);
  border-color: var(--texte);
}

.filtres {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  margin: 0 -2px 10px;
  scrollbar-width: none;
}
.filtres::-webkit-scrollbar {
  display: none;
}

/* --- Champs --- */
.champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.champ > span,
.etiquette {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--texte-doux);
}
.saisie,
.champ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.champ textarea,
.champ select {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: var(--rayon-s);
  border: 1px solid var(--bord-fort);
  background: var(--surface-pleine);
  color: var(--texte);
  font-size: 16px; /* 16 px : iOS ne zoome pas sur le champ */
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea,
textarea.saisie {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}
.saisie:focus,
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 4px var(--rose-doux);
}
.saisie::placeholder,
.champ ::placeholder {
  color: var(--texte-faible);
}
.aide {
  font-size: 13px;
  color: var(--texte-faible);
}

/* --- Interrupteur --- */
.interrupteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  min-height: 44px;
}
.interrupteur input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 50px;
  height: 30px;
  border-radius: var(--pilule);
  background: var(--surface-creuse);
  border: 1px solid var(--bord-fort);
  position: relative;
  cursor: pointer;
  transition: background var(--transition);
}
.interrupteur input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: transform 260ms var(--ressort);
}
.interrupteur input:checked {
  background: var(--rose);
  border-color: var(--rose);
}
.interrupteur input:checked::after {
  transform: translateX(20px);
}

/* --- Onglets (choix segmenté) --- */
.segments {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--pilule);
  background: var(--surface-creuse);
}
.segments button {
  border: 0;
  background: transparent;
  min-height: 38px;
  padding: 7px 15px;
  border-radius: var(--pilule);
  font-weight: 650;
  font-size: 14px;
  color: var(--texte-doux);
  cursor: pointer;
  transition: all var(--transition);
}
.segments button[aria-pressed="true"] {
  background: var(--surface-pleine);
  color: var(--texte);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.18);
}

/* --- Avatars --- */
.avatar {
  --taille: 40px;
  --couleur: var(--rose);
  position: relative;
  flex: none;
  width: var(--taille);
  height: var(--taille);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--couleur);
  color: #fff;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--taille) * 0.44);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--surface-pleine), 0 0 0 4px color-mix(in srgb, var(--couleur) 55%, transparent);
  -webkit-user-select: none;
  user-select: none;
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.avatar.lucie {
  --couleur: var(--lucie);
}
.avatar.nathan {
  --couleur: var(--nathan);
}
.avatar.xs {
  --taille: 26px;
  box-shadow: 0 0 0 2px var(--surface-pleine);
}
.avatar.s {
  --taille: 32px;
}
.avatar.l {
  --taille: 56px;
}
.avatar.xl {
  --taille: 84px;
}
.avatar .point {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 30%;
  height: 30%;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  background: var(--texte-faible);
  border: 2px solid var(--surface-pleine);
}
.avatar .point.en-ligne {
  background: #22c55e;
}
.avatar.actif {
  animation: halo 1.8s ease-in-out infinite;
}

.duo {
  display: inline-flex;
  align-items: center;
}
.duo .avatar + .avatar {
  margin-left: -10px;
}

/* --- Score Lucie – Nathan --- */
.score-duo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.score-duo .cote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 70px;
  font-weight: 650;
  font-size: 14px;
}
.score-duo .valeurs {
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.score-duo .valeurs .tiret {
  color: var(--texte-faible);
  font-weight: 400;
}
.barre-duo {
  height: 10px;
  border-radius: var(--pilule);
  overflow: hidden;
  display: flex;
  background: var(--surface-creuse);
}
.barre-duo span {
  transition: flex-grow 700ms var(--doux);
}
.barre-duo .l {
  background: var(--lucie);
}
.barre-duo .n {
  background: var(--nathan);
}

/* --- États vides, chargement --- */
.vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 36px 20px;
  color: var(--texte-doux);
}
.vide .emoji {
  font-size: 44px;
  line-height: 1;
}
.vide h3 {
  color: var(--texte);
}

.chargement {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--texte-faible);
  font-size: 14px;
}
.chargement .coeur-qui-bat {
  width: 38px;
  height: 38px;
  color: var(--rose);
  animation: battement 1s ease-in-out infinite;
}

.erreur-vue {
  padding: 18px;
  border-radius: var(--rayon-m);
  background: var(--alerte-doux);
  color: var(--alerte);
  font-weight: 600;
}

/* --- Listes simples --- */
.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.liste > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--bord);
}
.liste > li:first-child {
  border-top: 0;
}
.liste .texte {
  flex: 1;
  min-width: 0;
}
.liste .quand {
  font-size: 12.5px;
  color: var(--texte-faible);
  white-space: nowrap;
}

/* ===== 5. Fenêtres ===== */

.voile {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(30, 8, 20, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fondu 200ms ease;
}
.voile.ferme {
  animation: fondu-sortie 180ms ease forwards;
}
.modale {
  width: min(520px, 100%);
  max-height: min(86dvh, 760px);
  overflow: auto;
  background: var(--surface-pleine);
  border-radius: var(--rayon-xl);
  padding: 26px 24px 22px;
  box-shadow: var(--ombre-forte);
  animation: monter 320ms var(--ressort);
}
.modale h2 {
  margin-bottom: 12px;
}
.modale .contenu {
  color: var(--texte-doux);
}
.modale .contenu > * + * {
  margin-top: 12px;
}
.modale .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

/* Sur téléphone, les modales deviennent des « feuilles » qui montent du bas */
@media (max-width: 640px) {
  .voile {
    align-items: flex-end;
    padding: 0;
  }
  .modale {
    width: 100%;
    border-radius: var(--rayon-xl) var(--rayon-xl) 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    animation: monter-feuille 340ms var(--doux);
  }
  .modale .actions .bouton {
    flex: 1;
  }
}

.regles-jeu p + p {
  margin-top: 10px;
}

.toasts {
  position: fixed;
  z-index: 90;
  left: 50%;
  top: calc(var(--haut) + env(safe-area-inset-top) + 10px);
  transform: translateX(-50%);
  width: min(440px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: var(--rayon-m);
  background: var(--surface-pleine);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-forte);
  animation: toast-entree 420ms var(--ressort);
}
.toast.sortie {
  animation: toast-sortie 240ms ease forwards;
}
.toast .icone-toast {
  flex: none;
  font-size: 22px;
  line-height: 1;
}
.toast .icone-toast img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.toast .corps {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
}
.toast .corps strong {
  display: block;
  font-size: 15px;
}
.toast.erreur {
  border-color: color-mix(in srgb, var(--alerte) 40%, transparent);
}
.toast.erreur .corps strong {
  color: var(--alerte);
}

.menu-flottant {
  position: fixed;
  z-index: 85;
  min-width: 220px;
  padding: 6px;
  border-radius: var(--rayon-m);
  background: var(--surface-pleine);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-forte);
  animation: monter 220ms var(--doux);
}
.menu-flottant button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
}
.menu-flottant button:hover {
  background: var(--surface-douce);
}
.menu-flottant button.danger {
  color: var(--alerte);
}
.menu-flottant svg {
  width: 18px;
  height: 18px;
}

/* ===== 6. Accueil ===== */

.salut {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 22px;
}
.salut h1 {
  font-weight: 600;
}
.salut h1 em {
  font-style: italic;
  font-weight: 500;
}
.salut .date {
  color: var(--texte-doux);
  margin-top: 6px;
  text-transform: capitalize;
}
.etat-autre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--pilule);
  background: var(--surface);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre);
  font-size: 14px;
}
.etat-autre strong {
  display: block;
  font-size: 15px;
}

.grille-accueil {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, 1fr);
}
.grille-accueil > *,
.zone-widgets > * {
  grid-column: span 12;
}
.zone-widgets {
  display: contents;
}
@media (min-width: 760px) {
  .grille-accueil .moitie {
    grid-column: span 6;
  }
  .grille-accueil .tiers {
    grid-column: span 4;
  }
  .grille-accueil .deux-tiers {
    grid-column: span 8;
  }
}

.carte-coeur {
  overflow: hidden;
  text-align: center;
  padding: 26px 20px 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 92, 141, 0.16), transparent 60%),
    var(--surface);
}
.gros-coeur {
  width: 118px;
  height: 118px;
  margin: 4px auto 12px;
  border: 0;
  border-radius: 50%;
  background: var(--degrade);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--ombre-bouton), 0 0 0 10px var(--rose-doux), 0 0 0 22px color-mix(in srgb, var(--rose) 6%, transparent);
  transition: transform 260ms var(--ressort);
  animation: respiration 3.2s ease-in-out infinite;
  touch-action: manipulation;
}
.gros-coeur svg {
  width: 56px;
  height: 56px;
}
.gros-coeur:active,
.gros-coeur.bat {
  animation: battement 520ms var(--ressort);
}
.mots-rapides {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.compteur-amour .unites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.compteur-amour .unite {
  padding: 12px 6px;
  border-radius: var(--rayon-m);
  background: var(--surface-douce);
  text-align: center;
}
.compteur-amour .unite b {
  display: block;
  font-family: var(--police-titre);
  font-size: 30px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.compteur-amour .unite span {
  font-size: 12px;
  color: var(--texte-faible);
  font-weight: 600;
}

.raccourci-histoire {
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  color: #fff;
  background: var(--degrade-reve);
  border: 0;
  min-height: 130px;
}
.raccourci-histoire h2 {
  font-family: var(--police-script);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
}
.raccourci-histoire p {
  opacity: 0.92;
}
.raccourci-histoire .fleche {
  margin-left: auto;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: grid;
  place-items: center;
}

.fil-ligne .emoji-fil {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 12px;
  background: var(--surface-douce);
  display: grid;
  place-items: center;
  font-size: 18px;
}

/* ===== 7. Liste des jeux ===== */

.grand-match {
  display: grid;
  gap: 14px;
}
.grand-match .score-duo .valeurs {
  font-size: 46px;
}

.grille-jeux {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
@media (max-width: 520px) {
  .grille-jeux {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

.tuile-jeu {
  --teinte: var(--rose);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--surface);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre);
  transition: transform 240ms var(--doux), box-shadow 240ms var(--doux);
  animation: apparaitre 420ms var(--doux) backwards;
}
.tuile-jeu:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-forte);
}
.tuile-jeu:active {
  transform: translateY(-1px) scale(0.985);
}
.tuile-jeu .illustration {
  position: relative;
  aspect-ratio: 16 / 11;
  display: grid;
  place-items: center;
  background:
    radial-gradient(90% 80% at 30% 20%, color-mix(in srgb, var(--teinte) 34%, transparent), transparent 70%),
    radial-gradient(80% 80% at 90% 100%, color-mix(in srgb, var(--teinte) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--teinte) 9%, var(--surface-pleine));
}
.tuile-jeu .illustration img {
  width: 62%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--teinte) 35%, transparent));
  transition: transform 400ms var(--ressort);
}
.tuile-jeu:hover .illustration img {
  transform: scale(1.06) rotate(-2deg);
}
.tuile-jeu .illustration .emoji-jeu {
  font-size: 54px;
}
.tuile-jeu .badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tuile-jeu .infos {
  padding: 13px 15px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.tuile-jeu h3 {
  font-size: 18px;
}
.tuile-jeu .description {
  font-size: 13.5px;
  color: var(--texte-doux);
  line-height: 1.45;
}
.tuile-jeu .pied {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--texte-faible);
  font-weight: 600;
}
.mini-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.mini-score .l {
  color: var(--lucie);
}
.mini-score .n {
  color: var(--nathan);
}
@media (max-width: 520px) {
  .tuile-jeu .description {
    display: none;
  }
  .tuile-jeu .infos {
    padding: 10px 12px 12px;
  }
  .tuile-jeu h3 {
    font-size: 16px;
  }
}

.tuile-jeu.categorie-plateau {
  --teinte: #8b6cf6;
}
.tuile-jeu.categorie-cartes {
  --teinte: #e63e6d;
}
.tuile-jeu.categorie-questions {
  --teinte: #ff8a65;
}
.tuile-jeu.categorie-musique {
  --teinte: #6d5dfc;
}
.tuile-jeu.categorie-rapidite {
  --teinte: #10b981;
}
.tuile-jeu.categorie-mots {
  --teinte: #0891b2;
}
.tuile-jeu.categorie-des {
  --teinte: #e9a91f;
}

/* ===== 8. Page d'un jeu ===== */

.page-jeu {
  max-width: 980px;
  margin: 0 auto;
}

/* Accueil d'un jeu (avant de lancer une partie) */
.accueil-jeu {
  display: grid;
  gap: 18px;
}
.heros-jeu {
  --teinte: var(--rose);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border-radius: var(--rayon-xl);
  background:
    radial-gradient(100% 120% at 0% 0%, color-mix(in srgb, var(--teinte) 22%, transparent), transparent 65%),
    var(--surface);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre);
}
.heros-jeu .icone-jeu {
  width: 108px;
  height: 108px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--teinte) 14%, var(--surface-pleine));
  box-shadow: inset 0 0 0 1px var(--bord);
}
.heros-jeu .icone-jeu img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}
.heros-jeu h1 {
  font-size: clamp(28px, 6vw, 40px);
}
.heros-jeu p {
  color: var(--texte-doux);
  margin-top: 6px;
}
.heros-jeu .puces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
@media (max-width: 520px) {
  .heros-jeu {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .heros-jeu .puces {
    justify-content: center;
  }
}

.options-jeu {
  display: grid;
  gap: 18px;
}
.option-jeu {
  display: grid;
  gap: 8px;
}
.option-jeu .etiquette {
  font-size: 14px;
}
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.stepper output {
  min-width: 46px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.historique-jeu li .resultat {
  font-weight: 650;
}

/* Bandeau des joueurs, au-dessus du plateau */
.bandeau-joueurs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--rayon);
  background: var(--surface);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre);
}
.joueur-bandeau {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px;
  border-radius: var(--rayon-m);
  transition: background var(--transition);
}
.joueur-bandeau.droite {
  flex-direction: row-reverse;
  text-align: right;
}
.joueur-bandeau .nom {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joueur-bandeau .detail {
  font-size: 12.5px;
  color: var(--texte-faible);
  font-weight: 600;
}
.joueur-bandeau.actif .avatar {
  animation: halo 1.8s ease-in-out infinite;
}
.joueur-bandeau.actif .nom::after {
  content: " •";
  color: var(--rose);
}
.milieu-bandeau {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--texte-doux);
  max-width: 150px;
}
.milieu-bandeau .score-partie {
  font-family: var(--police-titre);
  font-size: 24px;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.tour-message {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--pilule);
  background: var(--surface-creuse);
  white-space: nowrap;
}
.tour-message.a-moi {
  background: var(--degrade);
  color: #fff;
  animation: pulsation 1.8s ease-in-out infinite;
}

.zone-module {
  position: relative;
  min-height: 300px;
}

/* Salle d'attente des jeux en direct */
.salle-attente {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 30px 20px;
  text-align: center;
}
.salle-attente .duo-salle {
  display: flex;
  align-items: center;
  gap: 26px;
}
.salle-attente .place {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-weight: 650;
}
.salle-attente .place .etat {
  font-size: 13px;
  color: var(--texte-faible);
}
.salle-attente .place.pret .etat {
  color: var(--menthe);
}
.salle-attente .coeur-lien {
  width: 34px;
  height: 34px;
  color: var(--rose);
  animation: battement 1.2s ease-in-out infinite;
}

.compte-rebours {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: color-mix(in srgb, var(--fond) 55%, transparent);
  backdrop-filter: blur(3px);
}
.compte-rebours span {
  font-family: var(--police-titre);
  font-size: 140px;
  font-weight: 800;
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: zoom-chiffre 900ms var(--ressort) both;
}

/* Fin de partie */
.fin-partie {
  position: relative;
  margin-top: 16px;
  padding: 24px 20px 20px;
  border-radius: var(--rayon-xl);
  text-align: center;
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(255, 92, 141, 0.18), transparent 70%),
    var(--surface-pleine);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-forte);
  animation: monter 520ms var(--ressort);
}
.fin-partie .trophee {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 6px;
  animation: rebond 900ms var(--ressort);
}
.fin-partie h2 {
  font-size: clamp(26px, 6vw, 34px);
}
.fin-partie p {
  color: var(--texte-doux);
  margin-top: 6px;
}
.fin-partie .rangee-boutons {
  justify-content: center;
  margin-top: 18px;
}

/* ===== 9. Nous deux, réglages ===== */

.grille-outils {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.tuile-outil {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
}
.tuile-outil .emoji-outil {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: var(--degrade-doux);
}
.tuile-outil h3 {
  font-size: 17.5px;
}
.tuile-outil p {
  font-size: 13.5px;
  color: var(--texte-doux);
  margin-top: 3px;
}
.tuile-outil.bientot {
  opacity: 0.6;
}

.nuancier {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nuancier button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--surface-pleine);
  box-shadow: 0 0 0 1px var(--bord-fort);
  cursor: pointer;
  transition: transform 200ms var(--ressort);
}
.nuancier button[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--texte);
  transform: scale(1.1);
}
.nuancier button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.ligne-reglage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--bord);
}
.ligne-reglage:first-of-type {
  border-top: 0;
}

/* ===== 10. Effets ===== */

.couche-effets {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
}
.coeur-volant {
  position: absolute;
  bottom: -60px;
  font-size: 30px;
  line-height: 1;
  animation: envol var(--duree, 3.2s) cubic-bezier(0.3, 0.6, 0.4, 1) forwards;
  will-change: transform, opacity;
}
.grand-coeur-recu {
  position: fixed;
  left: 50%;
  top: 42%;
  z-index: 101;
  pointer-events: none;
  font-size: 130px;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: coeur-recu 1.6s var(--ressort) forwards;
  filter: drop-shadow(0 18px 30px rgba(230, 62, 109, 0.45));
}
canvas.confettis {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.secoue {
  animation: secouer 420ms ease;
}

@keyframes apparaitre {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes fondu {
  from {
    opacity: 0;
  }
}
@keyframes fondu-sortie {
  to {
    opacity: 0;
  }
}
@keyframes monter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
}
@keyframes monter-feuille {
  from {
    transform: translateY(100%);
  }
}
@keyframes toast-entree {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(0.95);
  }
}
@keyframes toast-sortie {
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
}
@keyframes tourner {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulsation {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(230, 62, 109, 0.45);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(230, 62, 109, 0);
  }
}
@keyframes halo {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--surface-pleine), 0 0 0 4px var(--couleur);
  }
  50% {
    box-shadow: 0 0 0 2px var(--surface-pleine), 0 0 0 9px color-mix(in srgb, var(--couleur) 25%, transparent);
  }
}
@keyframes battement {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.18);
  }
  45% {
    transform: scale(0.96);
  }
  65% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes respiration {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.045);
  }
}
@keyframes envol {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(var(--echelle, 1));
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--derive, 0px), -115vh) rotate(var(--rotation, 20deg)) scale(var(--echelle, 1));
    opacity: 0;
  }
}
@keyframes coeur-recu {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
  45% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.06);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -80%) scale(0.9);
    opacity: 0;
  }
}
@keyframes secouer {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(7px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(3px);
  }
}
@keyframes rebond {
  0% {
    transform: scale(0.3) rotate(-15deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(6deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes zoom-chiffre {
  0% {
    transform: scale(2.2);
    opacity: 0;
  }
  35% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: scale(0.7);
    opacity: 0;
  }
}

/* ===== 11. Écrans ===== */

@media (min-width: 900px) {
  :root {
    --haut: 76px;
    --marge: 28px;
  }
  .barre-haut {
    gap: 18px;
  }
  .logo {
    font-size: 32px;
  }
  /* La navigation remonte en pilule flottante au centre de la barre du haut */
  .navigation {
    top: calc(env(safe-area-inset-top) + 14px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    height: 50px;
    padding: 5px;
    display: flex;
    gap: 4px;
    border: 1px solid var(--bord);
    border-radius: var(--pilule);
    box-shadow: var(--ombre);
  }
  body.en-jeu .navigation {
    display: flex;
  }
  .onglet {
    flex-direction: row;
    gap: 8px;
    padding: 0 16px;
    height: 40px;
    border-radius: var(--pilule);
    font-size: 14.5px;
    color: var(--texte-doux);
  }
  .onglet svg {
    width: 20px;
    height: 20px;
  }
  .onglet:hover {
    background: var(--surface-douce);
  }
  .onglet.actif {
    background: var(--rose-doux);
    color: var(--rose-fonce);
  }
  :root[data-theme="nuit"] .onglet.actif {
    color: var(--rose);
  }
  .coeur-central {
    width: 40px;
    height: 40px;
    margin: 0 4px;
    box-shadow: var(--ombre-bouton);
  }
  .coeur-central svg {
    width: 21px;
    height: 21px;
  }
  .coeur-central .compteur {
    display: none;
  }
  .vue {
    padding-bottom: 60px;
  }
  body.en-jeu .logo {
    display: inline-flex;
  }
  body.en-jeu .titre-haut {
    display: none;
  }
}

@media (max-width: 899px) {
  .masque-mobile {
    display: none !important;
  }
}
@media (min-width: 900px) {
  .masque-ordi {
    display: none !important;
  }
}

@media (max-width: 380px) {
  :root {
    --marge: 14px;
  }
  .presence-haut {
    display: none;
  }
}

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

/* ===== Page de connexion ===== */

.page-connexion {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 20px;
}
.connexion {
  width: min(460px, 100%);
}
.connexion-carte {
  padding: 34px 26px 28px;
  border-radius: var(--rayon-xl);
  background: var(--surface);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-forte);
  backdrop-filter: var(--flou);
  -webkit-backdrop-filter: var(--flou);
  text-align: center;
  animation: monter 600ms var(--ressort);
}
.connexion-titre {
  margin: 10px 0 8px;
  font-family: var(--police-script);
  font-weight: 400;
  font-size: clamp(50px, 14vw, 66px);
  line-height: 1.05;
}
.connexion-titre .esperluette {
  font-family: var(--police-titre);
  font-style: italic;
  font-size: 0.62em;
  margin: 0 6px;
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.connexion-texte {
  color: var(--texte-doux);
}
.connexion-formulaire {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  text-align: left;
}
.qui {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.qui legend {
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 700;
  color: var(--texte-doux);
}
.choix-joueur {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 10px 14px;
  border-radius: var(--rayon);
  border: 2px solid var(--bord);
  background: var(--surface-pleine);
  cursor: pointer;
  transition: transform 260ms var(--ressort), border-color var(--transition), box-shadow var(--transition);
}
.choix-joueur input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choix-joueur .prenom {
  font-family: var(--police-titre);
  font-size: 20px;
  font-weight: 600;
}
.choix-joueur:hover {
  transform: translateY(-2px);
}
.choix-joueur:has(input:checked) {
  border-color: var(--couleur-choix, var(--rose));
  box-shadow: 0 12px 30px -14px var(--couleur-choix, var(--rose));
  transform: translateY(-3px);
}
.choix-joueur:has(input:focus-visible) {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
}
.choix-joueur.lucie {
  --couleur-choix: var(--lucie);
}
.choix-joueur.nathan {
  --couleur-choix: var(--nathan);
}
.erreur-connexion {
  padding: 10px 14px;
  border-radius: var(--rayon-s);
  background: var(--alerte-doux);
  color: var(--alerte);
  font-weight: 600;
  font-size: 14px;
}

/* ===== Ajustements (barre du haut sur téléphone, bandeau, segments) ===== */

/* La flèche retour n'existe que dans les pages « en profondeur » (jeu, outil, réglages) */
.barre-haut .retour-haut {
  display: none;
}
body.en-jeu .barre-haut .retour-haut {
  display: inline-flex;
}
/* Rien ne doit jamais dépasser de l'écran sur les côtés */
html,
body {
  overflow-x: clip;
}
.barre-haut {
  min-width: 0;
}
.actions-haut {
  min-width: 0;
  flex-shrink: 0;
}
@media (max-width: 899px) {
  body.en-jeu .presence-haut,
  body.en-jeu .avatar-lien {
    display: none !important;
  }
  .actions-haut {
    gap: 2px;
  }
}
@media (max-width: 640px) {
  .presence-haut {
    padding: 3px;
    max-width: none;
  }
  .presence-haut span {
    display: none;
  }
}

.bandeau-joueurs {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
@media (max-width: 560px) {
  .bandeau-joueurs {
    padding: 8px;
    gap: 6px;
  }
  .joueur-bandeau {
    gap: 7px;
    padding: 2px;
  }
  .joueur-bandeau .avatar {
    --taille: 34px;
  }
  .joueur-bandeau .nom {
    font-size: 14px;
  }
  .milieu-bandeau {
    max-width: 108px;
  }
  .tour-message {
    white-space: normal;
    line-height: 1.25;
    padding: 4px 9px;
  }
}

.segments {
  display: flex;
  flex-wrap: nowrap;
}
.segments button {
  flex: 1 1 0;
  white-space: normal;
  line-height: 1.25;
}

.carte-coeur .gros-coeur {
  margin: 20px auto 18px;
}