:root {
  --bleu: #0d3a5c;
  --bleu-clair: #1d5c8a;
  --fond: #f4f7fa;
  --carte: #ffffff;
  --bordure: #d9e2ec;
  --vert: #2e9e6b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fond);
  color: var(--bleu);
  -webkit-font-smoothing: antialiased;
}

/* Chaque écran occupe toute la fenêtre */
.ecran {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  gap: 3.5vh;
  text-align: center;
}

.entete h1 {
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sous-titre {
  margin-top: 0.5rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--bleu-clair);
}

/* Boutons principaux */
.btn, .btn-suivant {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 700;
  color: #fff;
  background: var(--bleu);
  border: none;
  border-radius: 12px;
  padding: 1rem 2.5rem;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, opacity .15s ease;
}
.btn:hover, .btn-suivant:hover { background: var(--bleu-clair); }
.btn:active, .btn-suivant:active { transform: scale(.98); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* Paire de logos (mémorabilité) */
.paire {
  display: flex;
  gap: clamp(1.5rem, 6vw, 6rem);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.logo-box {
  background: var(--carte);
  border: 2px solid var(--bordure);
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.logo-box img { max-width: 36vw; max-height: 30vh; object-fit: contain; }
.logo-box.petit img { max-width: 28vw; max-height: 16vh; }
.leg { font-size: .95rem; font-weight: 600; color: var(--bleu-clair); }

/* Compte à rebours */
.compteur {
  width: clamp(56px, 7vw, 84px);
  height: clamp(56px, 7vw, 84px);
  border-radius: 50%;
  background: var(--bleu);
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cadres masqués (question mémoire : on garde gauche/droite, logo caché) */
.carte.masque { min-height: 26vh; justify-content: center; gap: 1rem; }
.masque-symbole { font-size: clamp(3rem, 9vw, 6rem); font-weight: 800; color: #c3d2e0; line-height: 1; }
.masque-cote { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; color: var(--bleu-clair); }

/* Barre de progression (en haut de l'écran) */
.progressbar { position: fixed; top: 0; left: 0; right: 0; height: 6px; background: #e3eaf2; z-index: 50; }
.progressbar-fill { height: 100%; width: 0; background: var(--bleu); transition: width .4s ease; }

/* Mode staff : badge + repères visuels */
.badge-staff {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
  background: #e0573e;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .03em;
  padding: .5rem 1rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(224, 87, 62, .35);
}
body.staff .progressbar-fill { background: #e0573e; }
body.staff { box-shadow: inset 0 0 0 4px #e0573e; }

/* Choix texte (question mémoire) */
.choix-texte { display: flex; flex-direction: column; gap: 1rem; width: min(420px, 90vw); }
.btn-choix {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 700;
  color: var(--bleu);
  background: var(--carte);
  border: 2px solid var(--bordure);
  border-radius: 12px;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn-choix:hover { border-color: var(--bleu); box-shadow: 0 8px 22px rgba(13,58,92,.14); transform: translateY(-2px); }
.btn-choix.neutre { color: var(--bleu-clair); }

/* Critère mis en avant (1 critère par écran) */
.critere-actuel {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--bleu);
  background: #eaf2f9;
  padding: .45rem 1.6rem;
  border-radius: 999px;
  animation: pop-mot .5s cubic-bezier(.2, .9, .25, 1);
}
@keyframes pop-mot {
  0%   { transform: scale(.55) translateY(12px); opacity: 0; }
  55%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* Confetti (écran merci) */
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.progress { font-size: .95rem; font-weight: 600; color: var(--bleu-clair); }
.btn-choix.large { width: min(440px, 90vw); }

/* Grilles de préférence (logos cliquables) */
.grille { display: grid; gap: clamp(1rem, 2.5vw, 2rem); width: min(1100px, 92vw); }
.grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carte {
  background: var(--carte);
  border: 2px solid var(--bordure);
  border-radius: 16px;
  padding: clamp(1rem, 3vw, 2.2rem);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.carte img { max-width: 100%; max-height: 20vh; object-fit: contain; pointer-events: none; }
.grille.quatre .carte img { max-height: 15vh; }

/* Mobile : les paires gauche/droite passent en haut/bas (empilées) */
@media (max-width: 600px) {
  .grille.deux { grid-template-columns: 1fr; }
  /* Typos des questions réduites pour tenir à l'écran */
  .entete h1 { font-size: clamp(1.15rem, 5.2vw, 1.55rem); line-height: 1.2; }
  .sous-titre { font-size: .9rem; }
  .critere-actuel { font-size: clamp(1.05rem, 4.5vw, 1.4rem); padding: .4rem 1.2rem; }
  .progress { font-size: .85rem; }
  .badge-staff { font-size: .78rem; padding: .35rem .7rem; top: 10px; right: 10px; }
}

/* Grille couleurs : 4 palettes côte à côte, hautes (format portrait) */
.grille.couleurs { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1300px, 96vw); }
.grille.couleurs .carte { padding: clamp(.4rem, 1vw, .9rem); }
.grille.couleurs .carte img { max-height: 64vh; }
@media (max-width: 900px) {
  .grille.couleurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille.couleurs .carte img { max-height: 32vh; }
}
.carte:hover, .carte:focus-visible {
  border-color: var(--bleu);
  box-shadow: 0 12px 30px rgba(13,58,92,.18);
  transform: translateY(-4px);
  outline: none;
}
.carte:active { transform: translateY(-1px); }

/* Erreur */
.erreur {
  color: #c0392b; font-weight: 600;
  background: #fdecea; border: 1px solid #f5c6c2;
  padding: .75rem 1.25rem; border-radius: 10px;
}

/* Parcours « elite » : test couleur */
.palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.5rem, 1.4vw, 1rem);
  width: min(560px, 92vw);
}
.swatch-cell { display: flex; flex-direction: column; gap: .35rem; }
.swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease, outline-color .15s ease;
}
.swatch:hover, .swatch:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,58,92,.16); }
.swatch.actif { outline: 2px solid var(--bleu); outline-offset: 2px; }
/* Couleur de référence actuelle (#00385E) : contour blanc + légende « Actuelle » dessous */
.swatch.base::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 2px solid #fff;
  border-radius: 6px;
  pointer-events: none;
}
.swatch-cap {
  min-height: 1.1em;
  font-size: clamp(.6rem, 1vw, .75rem);
  font-weight: 700;
  color: var(--bleu);
  text-align: center;
  line-height: 1.1;
}
.logo-apercu {
  display: flex; align-items: center; justify-content: center;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 3rem);
  width: min(560px, 90vw);
}
.logo-apercu svg { width: 100%; height: auto; max-height: 32vh; }

/* Merci */
.merci-bloc { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.merci-bloc h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
.check {
  width: clamp(70px, 9vw, 110px); height: clamp(70px, 9vw, 110px);
  border-radius: 50%; background: var(--vert); color: #fff;
  font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}