/* ==========================================================
   Apparence générale d'Aventure Éducative
   ========================================================== */

/* La police Andika, rangée dans le projet pour marcher sans Internet.
   Elle a été dessinée pour les enfants qui apprennent à lire :
   ses lettres « a » et « g » ressemblent à celles qu'on écrit à la main. */
@font-face {
  font-family: "Andika";
  src: url("../assets/fonts/Andika-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Andika";
  src: url("../assets/fonts/Andika-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* Les couleurs et tailles de base, regroupées ici pour les changer
   à un seul endroit (comme une palette de peintre). */
:root {
  --fond: #fff8ec;            /* crème doux, moins fatigant que le blanc pur */
  --carte: #ffffff;
  --texte: #23324a;           /* bleu nuit, bien lisible */
  --texte-doux: #5a6a85;
  --principal: #2f6fd6;       /* bleu de l'application */
  --principal-fonce: #1f55ad;
  --principal-clair: #e3edfc;
  --soleil: #ffc93c;
  --aide: #fff4cf;            /* fond des messages d'aide : jaune doux, jamais rouge */
  --bordure: #d5dceb;
  --ombre: 0 8px 24px rgba(35, 50, 74, 0.12);

  --taille-texte: 22px;       /* jamais moins de 20 px (cahier des charges) */
  --arrondi: 28px;
  --espace: 24px;
  --cible: 64px;              /* taille minimale d'un bouton pour un doigt d'enfant */
}

/* Tout le monde calcule sa taille de la même manière,
   ce qui évite les débordements imprévus. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--fond);
  color: var(--texte);
  font-family: "Andika", "Comic Sans MS", system-ui, sans-serif;
  font-size: var(--taille-texte);
  line-height: 1.5;
  /* Empêche le zoom involontaire du texte quand on tourne la tablette */
  -webkit-text-size-adjust: 100%;
  /* Pas de surbrillance grise quand un enfant touche l'écran */
  -webkit-tap-highlight-color: transparent;
}

/* Les boutons et champs prennent la même police que le reste */
button,
input {
  font: inherit;
  color: inherit;
}

/* « hidden » doit toujours cacher, même si une autre règle dit le contraire */
[hidden] {
  display: none !important;
}

/* Cache un élément aux yeux, mais pas aux lecteurs d'écran */
.cache-visuel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Le titre reçoit le « curseur invisible » à chaque changement d'écran :
   pas besoin d'un cadre autour */
h1:focus {
  outline: none;
}

.sans-js {
  margin: 24px 16px;
  text-align: center;
}

/* Un « écran » occupe toute la hauteur visible.
   Les marges latérales respectent l'encoche des téléphones. */
.ecran {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(var(--espace), env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(var(--espace), env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* La grande carte blanche au centre de chaque écran */
.carte {
  width: 100%;
  max-width: 640px;
  background: var(--carte);
  border-radius: var(--arrondi);
  box-shadow: var(--ombre);
  padding: 32px 20px;
  text-align: center;
}

h1 {
  margin: 0 0 8px;
  font-size: 36px;
  line-height: 1.2;
  color: var(--principal);
}

.nom-appli {
  margin: 0 0 4px;
  color: var(--texte-doux);
  font-weight: 700;
}

.sous-titre {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 700;
}

.message {
  margin: 0 0 16px;
  color: var(--texte-doux);
}

/* ----- Lumo, la mascotte, et sa bulle ----- */

/* Lumo à gauche, sa bulle à droite, comme dans une bande dessinée */
.guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px auto 20px;
  max-width: 560px;
}

/* Lumo est un bouton : on peut la toucher */
.lumo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.lumo:focus-visible {
  outline: 4px solid var(--soleil);
  outline-offset: 2px;
}

.lumo-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* La bulle : blanche, bordée de jaune, avec une petite pointe vers Lumo.
   Dedans : le texte, puis le haut-parleur pour l'écouter. */
.bulle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 6px 6px 16px;
  background: #ffffff;
  border: 3px solid #f5b92e;
  border-radius: 22px;
  box-shadow: 0 4px 10px rgba(35, 50, 74, 0.1);
  font-weight: 700;
  text-align: left;
}

.bulle-texte {
  margin: 0;
}

/* Le haut-parleur : rond, bleu, assez grand pour un doigt d'enfant */
.bouton-ecouter {
  flex: 0 0 auto;
  width: var(--cible);
  height: var(--cible);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--principal-clair);
  color: var(--principal);
  cursor: pointer;
}

.bouton-ecouter svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bouton-ecouter:active {
  transform: scale(0.92);
}

.bouton-ecouter:focus-visible {
  outline: 4px solid var(--soleil);
  outline-offset: 2px;
}

/* Pendant que Lumo parle : les ondes du haut-parleur clignotent… */
.parle .bouton-ecouter {
  background: var(--principal);
  color: #ffffff;
}

.parle .onde {
  animation: onde 0.8s ease-in-out infinite;
}

.parle .onde-2 {
  animation-delay: 0.2s;
}

@keyframes onde {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* …et la bouche de Lumo s'ouvre et se ferme */
.parle .lumo-sourire {
  display: none;
}

.parle .lumo-grand-sourire {
  display: inline;
  transform-box: fill-box;
  transform-origin: center top;
  animation: bouche 0.24s ease-in-out infinite alternate;
}

@keyframes bouche {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1); }
}

/* La pointe : deux petits triangles superposés (le bord jaune, puis le blanc) */
.bulle::before,
.bulle::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-color: transparent;
}

.bulle::before {
  left: -15px;
  border-width: 10px 15px 10px 0;
  border-right-color: #f5b92e;
}

.bulle::after {
  left: -10px;
  border-width: 7px 11px 7px 0;
  border-right-color: #ffffff;
}

/* Les parties de Lumo tournent autour de leur propre centre */
.lumo-lueur,
.lumo-corps,
.lumo-yeux,
.lumo-aile {
  transform-box: fill-box;
  transform-origin: center;
}

.lumo-aile-g {
  transform-origin: right bottom;
}

.lumo-aile-d {
  transform-origin: left bottom;
}

/* Lumo flotte, bat des ailes, cligne des yeux, et sa lumière pulse */
.lumo-corps {
  animation: lumo-flotte 3s ease-in-out infinite;
}

.lumo-aile-g {
  animation: lumo-aile-g 0.35s ease-in-out infinite alternate;
}

.lumo-aile-d {
  animation: lumo-aile-d 0.35s ease-in-out infinite alternate;
}

.lumo-yeux {
  animation: lumo-cligne 4s infinite;
}

.lumo-lueur {
  animation: lumo-lueur 2.4s ease-in-out infinite;
}

@keyframes lumo-flotte {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes lumo-aile-g {
  to { transform: rotate(-14deg); }
}

@keyframes lumo-aile-d {
  to { transform: rotate(14deg); }
}

@keyframes lumo-cligne {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

@keyframes lumo-lueur {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.08); }
}

/* Le grand sourire est caché, sauf quand Lumo est joyeuse */
.lumo-grand-sourire {
  display: none;
}

.lumo-joie .lumo-sourire {
  display: none;
}

.lumo-joie .lumo-grand-sourire {
  display: inline;
}

/* Quand on la touche : un saut de joie, et sa lumière brille fort */
.lumo-joie .lumo-svg {
  animation: lumo-saut 0.6s ease;
}

.lumo-joie .lumo-lueur {
  animation: none;
  opacity: 0.85;
  transform: scale(1.15);
}

@keyframes lumo-saut {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-18px) scale(1.05, 0.95); }
  60% { transform: translateY(0) scale(0.95, 1.05); }
}

/* ----- Les boutons ----- */

.bouton {
  min-height: var(--cible);
  padding: 12px 28px;
  border-radius: 999px;
  border: 3px solid transparent;
  font-weight: 700;
  cursor: pointer;
}

.bouton-principal {
  background: var(--principal);
  color: #ffffff;
}

.bouton-principal:active {
  background: var(--principal-fonce);
}

.bouton-secondaire {
  background: var(--carte);
  border-color: var(--principal);
  color: var(--principal);
}

.bouton-ajout {
  width: 100%;
  background: var(--principal-clair);
  border: 3px dashed var(--principal);
  color: var(--principal);
}

/* Un cadre bien visible quand on navigue au clavier */
.bouton:focus-visible,
.bouton-profil:focus-visible,
.champ-texte:focus-visible {
  outline: 4px solid var(--soleil);
  outline-offset: 3px;
}

/* ----- Les images (avatars) ----- */

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  font-size: 44px;
  line-height: 1;
}

.avatar-petit {
  width: 52px;
  height: 52px;
  font-size: 32px;
}

/* ----- Écran « Qui joue ? » ----- */

.liste-profils {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* La liste vide ne prend pas de place */
.liste-profils:empty {
  display: none;
}

.bouton-profil {
  width: 100%;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--carte);
  border: 3px solid var(--bordure);
  border-radius: var(--arrondi);
  cursor: pointer;
}

.bouton-profil:active {
  border-color: var(--principal);
  transform: scale(0.97);
}

.nom-profil {
  font-weight: 700;
  /* Un prénom long passe à la ligne au lieu de déborder */
  overflow-wrap: anywhere;
}

/* ----- Écran de création ----- */

#formulaire-profil {
  text-align: left;
}

#formulaire-profil h1 {
  text-align: center;
}

/* Chaque question de la fiche */
.question {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.titre-question {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  font-weight: 700;
}

.champ-texte {
  width: 100%;
  min-height: var(--cible);
  padding: 10px 18px;
  border: 3px solid var(--bordure);
  border-radius: 18px;
  background: var(--carte);
  font-size: 26px;
}

.champ-texte:focus {
  border-color: var(--principal);
}

.grille-avatars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grille-niveaux {
  display: grid;
  gap: 10px;
}

/* Une case à choisir : le bouton radio est caché,
   c'est la « boîte » à côté qui se voit et change d'aspect */
.choix {
  display: block;
  cursor: pointer;
}

.choix-boite {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible);
  height: 100%;
  padding: 6px;
  border: 3px solid var(--bordure);
  border-radius: 20px;
  background: var(--carte);
}

.grille-avatars .avatar {
  width: 100%;
  max-width: 72px;
  height: auto;
  aspect-ratio: 1;
  font-size: 40px;
}

/* La case choisie : bordure épaisse ET coche ✓
   (jamais une information donnée uniquement par la couleur) */
.choix input:checked + .choix-boite {
  position: relative;
  border-color: var(--principal);
  background: var(--principal-clair);
  box-shadow: 0 0 0 3px var(--principal);
}

.choix input:checked + .choix-boite::after {
  content: "✓";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--principal);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.choix input:focus-visible + .choix-boite {
  outline: 4px solid var(--soleil);
  outline-offset: 3px;
}

/* Une image déjà prise par un autre joueur : pâle et pas touchable */
.choix input:disabled + .choix-boite {
  opacity: 0.3;
  cursor: not-allowed;
}

.niveau {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  padding: 4px 8px;
}

.niveau-image {
  grid-row: span 2;
  font-size: 36px;
}

.niveau-nom {
  font-weight: 700;
}

.niveau-age {
  color: var(--texte-doux);
  font-size: 20px;
}

.message-aide {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--aide);
  font-weight: 700;
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 12px;
}

.actions .bouton {
  flex: 1 1 180px;
}

/* ----- La barre du haut : maison à gauche, joueur à droite ----- */

.barre {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding:
    max(10px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    10px
    max(16px, env(safe-area-inset-left));
  pointer-events: none;      /* la barre elle-même ne bloque pas les doigts… */
}

.bouton-rond {
  pointer-events: auto;      /* …seuls ses boutons réagissent */
  width: var(--cible);
  height: var(--cible);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 3px solid var(--bordure);
  border-radius: 50%;
  background: var(--carte);
  box-shadow: var(--ombre);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.bouton-rond:active {
  transform: scale(0.94);
}

.bouton-rond:focus-visible {
  outline: 4px solid var(--soleil);
  outline-offset: 3px;
}

/* Le bouton du joueur reste collé à droite, même quand la maison est cachée */
.bouton-joueur {
  margin-left: auto;
}

/* Quand la barre est là, on laisse de la place en haut pour ne rien cacher */
.avec-barre .ecran {
  padding-top: calc(max(10px, env(safe-area-inset-top)) + var(--cible) + 24px);
}

/* ----- La carte des mondes ----- */

.ecran-carte {
  align-items: flex-start;
}

.contenu-carte {
  width: 100%;
  max-width: 900px;
  text-align: center;
}

/* Le parchemin est dessiné dans le SVG (bords déchirés compris) :
   ici, on centre simplement la carte */
.cadre-carte {
  display: flex;
  justify-content: center;
}

/* La carte elle-même : haute et étroite sur téléphone.
   « position: relative » : les îles se placent par rapport à elle.
   --taille-ile : la largeur d'une île dessinée. */
.carte-aventure {
  position: relative;
  width: 100%;
  aspect-ratio: 330 / 790;
  --taille-ile: 116px;
}

/* Le parchemin et la mer dessinés, derrière les îles */
.fond-mer {
  position: absolute;
  inset: 0;
}

/* L'ombre suit la forme déchirée du papier, comme une vraie feuille posée */
.fond-mer svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 14px rgba(35, 50, 74, 0.25));
}

/* Sur téléphone, on montre la carte « portrait » et on cache la carrée */
.mer-large {
  display: none !important;
}

.iles {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

/* Une île = un bouton posé sur la carte à sa place (--x, --y).
   Le décalage vers le haut met le CENTRE de l'herbe sur le chemin. */
.ile {
  position: absolute;
  left: var(--x-portrait);
  top: var(--y-portrait);
  transform: translate(-50%, calc(var(--taille-ile) * -0.56));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
}

.ile:focus-visible {
  outline: 4px solid var(--soleil);
  outline-offset: 4px;
}

/* Le dessin garde les proportions de l'île (160 de large pour 140 de haut) */
.ile-dessin {
  position: relative;
  display: block;
  width: var(--taille-ile);
  aspect-ratio: 160 / 140;
  transition: transform 0.15s ease;
}

.ile:active .ile-dessin {
  transform: scale(0.94);
}

.ile-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* L'étiquette « Bientôt ! », posée sur la plage : du texte, pas seulement une couleur */
.ile-bientot {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  padding: 0 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid var(--couleur-monde-fonce);
  box-shadow: 0 2px 4px rgba(10, 60, 110, 0.25);
  color: var(--texte);
  font-size: 20px;
  line-height: 1.3;
  white-space: nowrap;
}

/* Le nom du monde, sur un ruban de sa couleur aux bouts découpés */
.ile-nom {
  margin-top: 14px;
  padding: 0 18px;
  background: var(--couleur-monde-fonce);
  /* La découpe en « queue d'aronde » des deux bouts du ruban */
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* ----- Petites animations de la carte (très douces) ----- */

/* Les éléments SVG tournent et bougent autour de leur propre centre */
.anim-bateau,
.anim-notes,
.anim-bulles,
.anim-fumee {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.anim-bateau {
  animation: tangage 4s ease-in-out infinite;
}

@keyframes tangage {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-2px); }
}

.anim-vague {
  animation: scintille 3.5s ease-in-out infinite;
}

@keyframes scintille {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.25; }
}

.anim-notes {
  animation: flotte 3s ease-in-out infinite;
}

.anim-bulles,
.anim-fumee {
  animation: monte 2.8s ease-in-out infinite;
}

@keyframes flotte {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes monte {
  0% { transform: translateY(2px); opacity: 0.4; }
  50% { opacity: 1; }
  100% { transform: translateY(-4px); opacity: 0.4; }
}

/* ----- Un monde (écran « Bientôt ! ») ----- */

/* Tout l'écran prend la couleur pâle du monde visité */
.ecran-monde {
  background: var(--couleur-monde-clair, var(--fond));
}

/* L'île du monde, en grand, posée sur un rond d'eau */
.monde-image {
  width: 240px;
  max-width: 100%;
  aspect-ratio: 160 / 140;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #aee6fb 60%, rgba(174, 230, 251, 0));
}

.monde-image svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ecran-monde .sous-titre {
  color: var(--couleur-monde-fonce, var(--texte));
}

/* Téléphone étroit : Lumo au-dessus de sa bulle, pour laisser de la place au texte */
@media (max-width: 479px) {
  .guide {
    flex-direction: column;
    gap: 14px;
  }

  .lumo {
    width: 80px;
    height: 80px;
  }

  .bulle::before,
  .bulle::after {
    top: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .bulle::before {
    top: -15px;
    border-width: 0 10px 15px 10px;
    border-color: transparent transparent #f5b92e transparent;
  }

  .bulle::after {
    top: -10px;
    border-width: 0 7px 11px 7px;
    border-color: transparent transparent #ffffff transparent;
  }
}

/* ----- Animations ----- */

/* Petite apparition douce de la carte à chaque écran
   (la classe « pret » est ajoutée par js/app.js).
   Sans JavaScript, rien ne s'anime. */
.pret .ecran:not([hidden]) .carte,
.pret .ecran:not([hidden]) .contenu-carte {
  animation: apparition 0.4s ease both;
}

@keyframes apparition {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----- Tablette : on agrandit un peu tout ----- */
@media (min-width: 600px) {
  .carte {
    padding: 40px 36px;
  }

  .liste-profils {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .grille-niveaux {
    grid-template-columns: repeat(3, 1fr);
  }

  .niveau {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 8px 4px;
  }

  .niveau-image {
    grid-row: auto;
  }

}

@media (min-width: 768px) {
  h1 {
    font-size: 48px;
  }

  .sous-titre {
    font-size: 30px;
  }

  .lumo {
    width: 120px;
    height: 120px;
  }
}

/* ----- Carte carrée (tablette, ordinateur) ----- */
@media (min-width: 760px) {
  /* Un carré qui tient dans l'écran : pas plus large que 760 px,
     pas plus haut que l'écran moins le titre, mais jamais moins de 560 px
     (en dessous, les îles se toucheraient) */
  .carte-aventure {
    width: min(100%, clamp(560px, calc(100dvh - 250px), 760px));
    aspect-ratio: 1 / 1;
    --taille-ile: 140px;
  }

  .mer-portrait {
    display: none !important;
  }

  .mer-large {
    display: block !important;
  }

  .ile {
    left: var(--x-large);
    top: var(--y-large);
  }

  /* Le titre et Lumo sur une seule ligne, avec une Lumo un peu plus petite */
  .entete-carte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 28px;
    margin-bottom: 14px;
  }

  .entete-carte h1,
  .entete-carte .guide {
    margin: 0;
  }

  .entete-carte .lumo {
    width: 84px;
    height: 84px;
  }
}

/* Grand écran : des îles un peu plus grandes
   (calculé pour qu'elles ne se chevauchent jamais) */
@media (min-width: 1100px) {
  .carte-aventure {
    --taille-ile: 150px;
  }
}

/* Si l'appareil demande « réduire les animations », on les coupe. */
@media (prefers-reduced-motion: reduce) {
  .pret .ecran:not([hidden]) .carte,
  .pret .ecran:not([hidden]) .contenu-carte,
  .anim-bateau,
  .anim-vague,
  .anim-notes,
  .anim-bulles,
  .anim-fumee,
  .lumo-corps,
  .lumo-aile-g,
  .lumo-aile-d,
  .lumo-yeux,
  .lumo-lueur,
  .lumo-joie .lumo-svg,
  .parle .onde,
  .parle .lumo-grand-sourire {
    animation: none;
  }

  .bouton-profil:active,
  .bouton-rond:active,
  .ile:active .ile-dessin {
    transform: none;
  }
}