/* ===== Réglages de base ===== */

/* box-sizing: border-box = la largeur d'un élément inclut ses marges intérieures.
   Ça évite beaucoup de surprises de mise en page. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;            /* texte assez gros pour un enfant, sur téléphone */
  background: #fdf6ec;        /* beige clair, doux pour les yeux */
  color: #3b2f2f;
}

/* Contenu centré, jamais plus large que 600px (joli sur tablette aussi) */
main {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 16px;
  text-align: center;
}

h1 {
  font-size: 2.2em;
  margin: 0.3em 0 0.1em;
}

.sous-titre {
  margin-top: 0;
  color: #8a6d5a;
}

/* ===== Choix de la semaine ===== */

/* Les boutons des semaines, côte à côte, qui passent à la ligne si besoin */
.choix-semaine {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 20px;
}

.bouton-semaine {
  font-size: 1em;
  font-weight: bold;
  padding: 12px 18px;
  border: 3px solid #e6d5c3;
  border-radius: 14px;
  background: white;
  color: #3b2f2f;
  cursor: pointer;
}

/* La semaine sélectionnée est en orange plein */
.bouton-semaine.choisie {
  background: #e07a3f;
  border-color: #e07a3f;
  color: white;
}

/* La règle d'orthographe, dans un encadré vert pâle (comme sur la feuille de l'école) */
.regle {
  background: #eef3df;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.85em;
  text-align: left;
}

/* ===== Listes de mots en "étiquettes" (accueil et mots ratés) ===== */

.etiquettes {
  list-style: none;           /* enlève les puces */
  padding: 0;
  display: flex;
  flex-wrap: wrap;            /* les mots passent à la ligne si pas de place */
  justify-content: center;
  gap: 10px;
  margin: 24px 0 32px;
}

.etiquettes li {
  background: white;
  border: 2px solid #e6d5c3;
  border-radius: 12px;
  padding: 8px 16px;
}

/* ===== Boutons ===== */

.gros-bouton {
  display: block;             /* un bouton par ligne, plus facile à viser au doigt */
  margin: 12px auto;          /* "auto" à gauche et à droite = centré */
  font-size: 1.3em;
  font-weight: bold;
  padding: 18px 40px;
  min-width: 220px;
  border: none;
  border-radius: 16px;
  background: #e07a3f;        /* orange chaleureux */
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 0 #b35a26; /* petite ombre = effet "bouton qu'on enfonce" */
}

/* Quand on appuie dessus, le bouton "descend" */
.gros-bouton:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* Variante bleue pour le bouton « Répéter » */
.bouton-secondaire {
  background: #4a90c2;
  box-shadow: 0 4px 0 #2f6a94;
}

/* Le bouton « Répéter » a un peu plus d'espace autour */
#bouton-repeter {
  margin: 16px auto 24px;
}

/* Un bouton désactivé est grisé et ne "s'enfonce" plus */
.gros-bouton:disabled {
  background: #c9bfb5;
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* ===== Écran d'exercice ===== */

#saisie {
  display: block;
  width: 100%;
  font-size: 1.5em;           /* au moins 16px, sinon l'iPhone zoome tout seul */
  padding: 14px;
  margin-bottom: 16px;
  border: 3px solid #e6d5c3;
  border-radius: 12px;
  text-align: center;
}

#saisie:focus {
  outline: none;
  border-color: #e07a3f;
}

#message {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 8px;
}

.message-bravo   { color: #2e8b57; }
.message-presque { color: #c0392b; }

/* Le mot corrigé : gros, avec un peu d'espace entre les lettres */
.mot-corrige {
  font-size: 2.2em;
  letter-spacing: 0.08em;
  margin: 8px 0;
}

/* Les couleurs des lettres (les noms correspondent aux "types" de diffLetters) */
.lettre-ok     { color: #2e8b57; }                          /* vert */
.lettre-faux   { color: #d62828; font-weight: bold; }       /* rouge */
.lettre-manque { color: #f08c00; font-weight: bold;         /* orange souligné */
                 text-decoration: underline; }
.lettre-trop   { color: #999; text-decoration: line-through; } /* gris barré */

.legende {
  font-size: 0.75em;
  color: #8a6d5a;
  margin-bottom: 20px;
}

/* ===== Écran de fin ===== */

.score {
  font-size: 1.6em;
  margin: 24px 0;
}

/* Les mots ratés en orange, pour qu'on les repère bien */
#liste-rates li {
  border-color: #f08c00;
}

/* ===== Récompenses ===== */

.titre-recompense {
  font-size: 1.3em;
  font-weight: bold;
  margin: 32px 0 12px;
}

/* La photo gagnée apparaît avec un petit effet "pop" */
#carte-recompense .carte-photo {
  max-width: 260px;
  margin: 0 auto;
  animation: apparaitre 0.6s ease-out;
}

@keyframes apparaitre {
  0%   { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  70%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ===== Gâteries ===== */

.zone-gaterie {
  position: relative;         /* sert de repère pour placer l'os */
  height: 130px;
  margin-top: 24px;
}

.chien {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* centre le chien horizontalement */
  font-size: 80px;
  line-height: 1;
}

.os {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 40px;
  opacity: 0;                 /* invisible tant qu'on ne donne pas de gâterie */
}

/* L'os tombe en tournant jusqu'à la gueule du chien, puis disparaît */
.os.tombe {
  animation: tomber 0.7s ease-in;
}

@keyframes tomber {
  0%   { transform: translate(-50%, -30px) rotate(0deg);   opacity: 1; }
  85%  { transform: translate(-50%, 50px)  rotate(360deg); opacity: 1; }
  100% { transform: translate(-50%, 60px)  rotate(400deg); opacity: 0; }
}

/* Le chien saute de joie quand il reçoit la gâterie */
.chien.miam {
  animation: sauter 0.5s ease-out 0.6s; /* 0.6s = on attend que l'os arrive */
}

@keyframes sauter {
  0%, 100% { transform: translateX(-50%) translateY(0)     scale(1); }
  40%      { transform: translateX(-50%) translateY(-25px) scale(1.15); }
  70%      { transform: translateX(-50%) translateY(0)     scale(0.95); }
}

.bouton-gaterie {
  background: #8b5e3c;        /* couleur "biscuit" */
  box-shadow: 0 4px 0 #5e3d24;
}

/* ===== Album ===== */

/* Une grille qui met autant de colonnes que possible (au moins 140px chacune) */
.grille-album {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.carte-photo {
  position: relative;
  margin: 0;
  padding: 8px;
  background: white;
  border: 3px solid #e6d5c3;
  border-radius: 14px;
}

/* Le cadre coupe ce qui dépasse (utile pour le flou des photos verrouillées) */
.cadre-image {
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1;            /* carré */
}

.cadre-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* remplit le carré sans déformer la photo */
  display: block;
}

.carte-photo figcaption {
  margin-top: 6px;
  font-size: 0.8em;
}

/* Photo rare : bordure dorée + badge étoile */
.carte-photo.rare {
  border-color: #f2b705;
  background: #fff8e1;
}

.carte-photo.rare::after {
  content: "⭐ Rare";
  position: absolute;
  top: -10px;
  right: -8px;
  background: #f2b705;
  color: white;
  font-size: 0.65em;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 10px;
}

/* Photo pas encore gagnée : grise et floue, avec un gros « ? » par-dessus */
.carte-photo.verrouillee img {
  filter: grayscale(1) blur(12px) brightness(0.8);
}

.carte-photo.verrouillee .cadre-image {
  position: relative;
}

.carte-photo.verrouillee .cadre-image::after {
  content: "?";
  position: absolute;
  inset: 0;                   /* occupe tout le cadre */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  font-weight: bold;
  color: white;
}

.carte-photo.verrouillee figcaption {
  color: #b5a596;
}