/* ===========================================================================
   Moteur de questionnaire — habillage public.
   Pensé pour le téléphone d'abord (c'est là que le questionnaire sera rempli),
   puis élargi sur grand écran. Charte Lapsa : bleu marine #27306e, Poppins,
   accents bleu ciel transparent. Les neutres sont DÉRIVÉS du bleu marine :
   jamais de gris plat.
   =========================================================================== */
@font-face { font-family: Poppins; font-weight: 400; font-display: swap; src: url(fonts/poppins-400-latin.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 500; font-display: swap; src: url(fonts/poppins-500-latin.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(fonts/poppins-600-latin.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url(fonts/poppins-700-latin.woff2) format('woff2'); }

:root {
  --bleu: #27306e;
  --bleu-clair: #26328e;
  --ciel: rgba(96, 165, 250, .22);
  --ciel-fort: rgba(96, 165, 250, .5);
  --encre: #1d2352;               /* texte : bleu marine assombri */
  --encre-doux: #5a6094;          /* texte secondaire : marine désaturé, pas du gris */
  --trait: rgba(39, 48, 110, .15);
  --fond: #f6f8fd;                /* blanc bleuté */
  --carte: #ffffff;
  --rouge: #c8384a;
  --rayon: 14px;
  --ombre: 0 10px 30px rgba(39, 48, 110, .09);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Poppins, 'Segoe UI', Arial, sans-serif;
  color: var(--encre);
  background: var(--fond);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  /* Pas de flash gris au doigt sur les boutons et les cartes. */
  -webkit-tap-highlight-color: rgba(96, 165, 250, .18);
}
img { max-width: 100%; }
/* Les visuels de box sont tous carrés (560×560) : on réserve leur place AVANT
   qu'ils n'arrivent. Sans cela, la page grandit après coup et la position de
   lecture saute — c'est ce qui donnait un écran « vide » sur téléphone. */
.mq-box-carte img, .mq-option img { aspect-ratio: 1 / 1; }
body.mq-attente { cursor: progress; }
body.mq-attente .mq-bouton, body.mq-attente .mq-option { opacity: .6; pointer-events: none; }

/* -------------------------------------------------------------- bandeaux */
.mq-bandeau-apercu {
  background: var(--rouge); color: #fff; text-align: center;
  padding: 7px 14px; font-size: 13px; font-weight: 600; letter-spacing: .3px;
}
.mq-entete {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--bleu); color: #fff;
}
.mq-entete .mq-logo { height: 26px; width: auto; flex: none; filter: brightness(0) invert(1); }
.mq-entete-titre { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mq-entete-titre strong { font-size: 15px; font-weight: 600; }
.mq-entete-titre span { font-size: 12.5px; opacity: .78; }
.mq-langues { margin-left: auto; display: flex; gap: 5px; flex: none; }
.mq-langues button {
  font: inherit; font-size: 12px; font-weight: 600; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px; padding: 5px 10px; min-width: 38px;
}
.mq-langues button.actif { background: var(--ciel-fort); border-color: transparent; }

/* ---------------------------------------------------------------- page */
.mq-page { max-width: 780px; margin: 0 auto; padding: 18px 16px 48px; }
.mq-barre { height: 5px; border-radius: 3px; background: var(--trait); overflow: hidden; }
.mq-barre span { display: block; height: 100%; width: 5%; border-radius: 3px; background: var(--bleu-clair); transition: width .35s ease; }
.mq-rang { margin: 8px 0 0; font-size: 12px; color: var(--encre-doux); letter-spacing: .3px; }

.mq-etape { margin-top: 14px; }
.mq-titre { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 4px 0 10px; }
.mq-aide { margin: 0 0 18px; color: var(--encre-doux); font-size: 15px; }

/* ------------------------------------------------------- écran d'accueil */
/* On retrouve la page du Typeform d'origine : fond blanc, pas de barre bleue,
   pas de barre d'avancement, tout centré. Seuls le logo et le choix de la
   langue restent, en bleu sur blanc. Dès que le questionnaire démarre, le
   JavaScript retire la classe mq-avant-depart et l'habillage revient. */
.mq-avant-depart { background: #fff; }
.mq-avant-depart .mq-entete { background: transparent; color: var(--bleu); padding: 16px 18px 0; }
.mq-avant-depart .mq-entete .mq-logo { filter: none; height: 30px; }
.mq-avant-depart .mq-entete-titre { display: none; }
.mq-avant-depart .mq-langues button { color: var(--bleu); background: var(--ciel); border-color: transparent; }
.mq-avant-depart .mq-langues button.actif { background: var(--bleu); color: #fff; }
.mq-avant-depart .mq-barre, .mq-avant-depart .mq-rang { display: none; }
.mq-avant-depart .mq-page { padding-top: 4px; }

.mq-bienvenue { text-align: center; }
.mq-bienvenue .mq-visuel { width: 100%; max-width: 560px; height: auto; margin: 0 auto 4px; display: block; }
.mq-bienvenue .mq-titre { font-size: 28px; color: var(--bleu); margin-bottom: 14px; }
.mq-intro { font-size: 16px; color: var(--encre); max-width: 600px; margin: 0 auto; }
.mq-mentions { font-size: 13px; color: var(--encre-doux); max-width: 600px; margin: 20px auto 0; }
.mq-bienvenue .mq-actions { justify-content: center; margin-top: 26px; }
.mq-bienvenue .mq-bouton { padding: 15px 44px; border-radius: 26px; }

/* ------------------------------------------- l'illustration de l'écran */
.mq-illustration {
  display: block; width: 100%; max-width: 420px; height: auto;
  margin: 0 auto 14px; border-radius: var(--rayon);
  aspect-ratio: 3 / 2; object-fit: cover;
}

/* --------------------------------------------------- les champs d'une page */
/* Chaque question est posée sur son propre fond : sur deux colonnes, sans ça,
   on ne voyait plus où finissait une question et où commençait la suivante
   (remarque de Catherine du 01/10). Les réponses restent blanches, elles
   ressortent donc nettement sur le fond bleuté du bloc. */
.mq-champs { display: grid; gap: 14px; }
.mq-bloc {
  min-width: 0; background: rgba(39, 48, 110, .035);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px;
}
.mq-bloc.seul { grid-column: 1 / -1; background: none; border: 0; padding: 0; }
.mq-label { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 9px; color: var(--bleu); }
.mq-aide-champ { margin: -3px 0 7px; font-size: 13px; color: var(--encre-doux); }
.mq-erreur { margin: 6px 0 0; font-size: 13px; color: var(--rouge); font-weight: 600; }
.mq-bloc.en-erreur .mq-saisie, .mq-bloc.en-erreur .mq-option, .mq-bloc.en-erreur .mq-case {
  border-color: var(--rouge);
}

/* ------------------------------------------------------------- options */
.mq-options { display: grid; gap: 9px; }
.mq-options-grille { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mq-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: inherit; font-size: 15px; text-align: left; cursor: pointer; min-height: 48px;
  background: var(--carte); color: var(--encre);
  border: 1.5px solid var(--trait); border-radius: var(--rayon);
  padding: 12px 15px; transition: border-color .15s, background .15s;
}
.mq-option:hover, .mq-option:focus-visible { border-color: var(--bleu-clair); background: var(--ciel); outline: none; }
.mq-option.choisi { border-color: var(--bleu-clair); background: var(--ciel); box-shadow: inset 0 0 0 1px var(--bleu-clair); }
.mq-option img { width: 100%; max-height: 110px; object-fit: contain; margin-bottom: 4px; }
.mq-option-nom { font-weight: 600; }
.mq-option-aide { font-size: 13px; color: var(--encre-doux); }

.mq-cases { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mq-case {
  display: flex; align-items: center; gap: 11px; cursor: pointer; min-height: 48px;
  background: var(--carte); border: 1.5px solid var(--trait); border-radius: var(--rayon);
  padding: 10px 14px; font-size: 15px;
}
.mq-case:hover { border-color: var(--bleu-clair); }
.mq-case.coche { border-color: var(--bleu-clair); background: var(--ciel); }
.mq-case input { width: 19px; height: 19px; accent-color: var(--bleu-clair); flex: none; }

/* -------------------------------------------------------------- saisies */
.mq-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mq-saisie {
  font: inherit; font-size: 16px; /* 16px : évite le zoom automatique sur iPhone */
  color: var(--encre); background: var(--carte);
  border: 1.5px solid var(--trait); border-radius: var(--rayon);
  padding: 12px 14px; width: 100%; min-height: 48px;
}
.mq-saisie:focus { outline: none; border-color: var(--bleu-clair); box-shadow: 0 0 0 3px var(--ciel); }
.mq-saisie-courte { width: auto; flex: 1 1 130px; min-width: 120px; max-width: 220px; }
.mq-unite { color: var(--encre-doux); font-weight: 600; }

/* --------------------------------------------------------------- box */
.mq-box { display: grid; gap: 14px; }
.mq-box-carte {
  background: var(--carte); border: 1.5px solid var(--trait); border-radius: var(--rayon);
  padding: 16px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 8px;
}
.mq-box-carte img { width: 100%; max-width: 280px; margin: 0 auto; height: auto; object-fit: contain; }
.mq-box-carte h2 { font-size: 16.5px; font-weight: 600; margin: 0; }
.mq-box-carte p { margin: 0; font-size: 14px; color: var(--encre-doux); }
.mq-box-carte .mq-prix { font-size: 20px; font-weight: 700; color: var(--bleu); }
.mq-box-carte .mq-bouton { margin-top: auto; width: 100%; text-align: center; }

/* ------------------------------------------------------------- actions */
.mq-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.mq-bouton {
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-block; min-height: 50px;
  background: var(--bleu); color: #fff; border: none; border-radius: var(--rayon);
  padding: 14px 28px; transition: background .15s;
}
.mq-bouton:hover { background: var(--bleu-clair); }
.mq-lien {
  font: inherit; cursor: pointer; background: none; border: none; padding: 10px 2px;
  color: var(--encre-doux); text-decoration: underline;
}
.mq-lien:hover { color: var(--bleu-clair); }
.mq-lien-apercu { display: block; margin-top: 12px; font-size: 12px; word-break: break-all; color: var(--bleu-clair); }

.mq-message {
  margin: 18px 0 0; padding: 12px 15px; border-radius: var(--rayon);
  background: rgba(200, 56, 74, .1); border: 1px solid rgba(200, 56, 74, .3); color: var(--rouge);
  font-size: 14px;
}

/* ------------------------------------------------- page d'accueil / erreur */
.mq-accueil { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.mq-carte {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 28px 24px; max-width: 460px; width: 100%; text-align: center;
}
.mq-carte h1 { font-size: 21px; font-weight: 600; margin: 14px 0 6px; }
.mq-carte .mq-logo { height: 34px; }
.mq-vide { color: var(--encre-doux); }

/* ---------------------------------------------------------- grands écrans */
@media (min-width: 680px) {
  .mq-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .mq-bloc.large { grid-column: 1 / -1; }
  .mq-titre { font-size: 24px; }
  .mq-box-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------- téléphone */
@media (max-width: 700px) {
  /* La barre du haut suit le défilement : sur un écran long, on garde le repère
     de marque et l'avancement sous les yeux. Pas sur l'écran d'accueil, qui est
     une page blanche sans habillage. */
  .mq-entete { position: sticky; top: 0; z-index: 20; }
  .mq-avant-depart .mq-entete { position: static; }

  /* Le bouton « Continuer » reste au bas de l'écran : sur l'écran des besoins,
     qui est long, on n'a plus à faire défiler pour l'atteindre. Le bouton
     « Retour » reste à sa gauche, discret. */
  .mq-actions-valider {
    position: sticky; bottom: 0; z-index: 15;
    flex-direction: row; align-items: center; gap: 10px;
    margin-top: 16px; padding: 10px 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--fond);
    box-shadow: 0 -10px 18px -10px rgba(39, 48, 110, .25);
  }
  .mq-actions-valider .mq-bouton { flex: 1; width: auto; }
  .mq-actions-valider .mq-lien { flex: none; padding: 10px 6px; }
}

@media (max-width: 480px) {
  .mq-entete { padding: 10px 13px; gap: 9px; }
  .mq-entete-titre span { display: none; }
  .mq-entete-titre strong { font-size: 14px; }
  .mq-entete .mq-logo { height: 22px; }
  .mq-page { padding: 14px 14px 32px; }
  .mq-titre { font-size: 20px; }
  .mq-bienvenue .mq-titre { font-size: 24px; }
  .mq-bienvenue .mq-bouton { padding: 15px 20px; }
  .mq-bouton { width: 100%; text-align: center; }
  /* Boutons empilés, sauf la barre collante du bas qui reste sur une ligne
     (« Retour » à gauche, « Continuer » qui prend le reste) pour ne pas manger
     un quart de l'écran. */
  .mq-actions:not(.mq-actions-valider) { flex-direction: column-reverse; align-items: stretch; margin-top: 18px; }
  .mq-actions:not(.mq-actions-valider) .mq-lien { text-align: center; }
  .mq-cases { grid-template-columns: 1fr; }
  .mq-saisie-courte { max-width: none; }
}

/* ------------------------------------------ liste de suggestions (les races) */
/* Liste dessinée par l'appli, et non le <datalist> du navigateur : celui-ci
   s'affiche mal, voire pas du tout, sur téléphone. */
.mq-combo { position: relative; }
.mq-combo-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 30;
  background: var(--carte); border: 1.5px solid var(--bleu-clair);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  max-height: 250px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 5px;
  overscroll-behavior: contain;
}
.mq-combo-option {
  display: block; width: 100%; text-align: left; min-height: 46px;
  font: inherit; font-size: 15.5px; color: var(--encre);
  background: none; border: 0; border-radius: 9px; padding: 12px 13px; cursor: pointer;
}
.mq-combo-option:hover, .mq-combo-option.actif { background: var(--ciel); }
.mq-combo-vide { margin: 0; padding: 12px 13px; color: var(--encre-doux); font-size: 14px; }

/* --------------------------------------- réponses illustrées (grandes cartes) */
/* « Vous avez un chien ou un chat ? » : une photo par réponse, et un seul clic
   suffit (l'écran n'a qu'une question, il enchaîne tout seul). */
.mq-options-images { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.mq-options-images .mq-option { padding: 0; overflow: hidden; align-items: stretch; gap: 0; }
.mq-options-images .mq-option img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  max-height: none; margin: 0; border-radius: 0;
}
.mq-options-images .mq-option-nom { padding: 13px 15px; font-size: 16px; text-align: center; }