/* Test « Quel chien est fait pour moi ? » (quel_chien.php) - chargé après main.css */

/* main.css fixe .row à 960 px : sur cette page, on rend la grille fluide sur mobile */
@media only screen and (max-width: 767px) {
  .row { width: auto; }
  .page_wrap { margin-left: 8px; margin-right: 8px; }
}

.page-quiz h1 { font-size: 30px; line-height: 1.2; }
.page-quiz [hidden] { display: none !important; }
.page-quiz .chapeau { font-size: 15px; line-height: 1.6; }

/* Questions */
.quiz { background: #fff8ec; border: 1px solid #f0dcb4; padding: 16px 18px 6px; margin: 0 0 20px; }
.quiz-questions { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.quiz-question { float: left; width: 50%; padding: 0 16px 14px 0; }
.quiz-question:nth-child(2n+1) { clear: left; }
.quiz fieldset { border: 0; margin: 0; padding: 0; background: none; }
.quiz legend { font-weight: bold; font-size: 15px; line-height: 1.35; padding: 0; margin: 0 0 8px; background: none; color: #222; }
.quiz-num { display: inline-block; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; background: #02729b; color: #fff; text-align: center; font-size: 13px; margin-right: 4px; }
.quiz-choix label { position: relative; display: inline-block; vertical-align: top; margin: 0 6px 6px 0; cursor: pointer; font-size: 14px; }
.quiz-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.quiz-choix span { display: block; padding: 7px 12px; border: 1px solid #e3cfa5; border-radius: 4px; background: #fff; color: #222; line-height: 1.3; transition: background .15s, border-color .15s; }
.quiz-choix small { display: block; font-size: 12px; color: #777; }
.quiz-choix label:hover span { border-color: #02729b; }
.quiz-choix input:checked + span { background: #02729b; border-color: #02729b; color: #fff; }
.quiz-choix input:checked + span small { color: #d7eef6; }
.quiz-choix input:focus + span { outline: 3px solid #f34c31; outline-offset: 1px; }
.quiz-choix input:focus:not(:focus-visible) + span { outline: none; }
.quiz-manque legend { color: #c0392b; }
.quiz-manque .quiz-choix span { border-color: #e8a59c; }
.quiz-erreur { color: #c0392b; font-weight: bold; margin: 0 0 6px; }
.quiz-erreur:empty { display: none; }
.quiz-actions { clear: both; margin: 4px 0 10px; }
.quiz-actions .button { font-size: 16px; }

/* Résultats */
.quiz-resultats { margin: 0 0 20px; }
.quiz-resultats h2:focus { outline: none; }
.quiz-liste { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.quiz-carte { float: left; width: 50%; padding: 0 12px 12px 0; }
.quiz-carte:nth-child(2n+1) { clear: left; }
.quiz-carte { display: flex; }
.quiz-carte .quiz-photo { flex: 0 0 140px; width: 140px; margin-right: 12px; }
.quiz-photo img { display: block; width: 140px; height: 140px; object-fit: cover; border-radius: 4px; background: #eee; }
.quiz-credit { display: block; font-size: 11px; color: #888; margin-top: 3px; line-height: 1.3; }
.quiz-infos { flex: 1 1 auto; min-width: 0; }
.quiz-infos h3 { font-size: 18px; margin: 0 0 4px; line-height: 1.25; }
.quiz-rang { color: #999; font-weight: normal; }
.quiz-score { margin: 0 0 6px; font-size: 13px; }
.quiz-score strong { font-size: 15px; color: #02729b; }
.quiz-barre { display: inline-block; vertical-align: middle; width: 70px; height: 8px; border-radius: 4px; background: #e3e3e3; overflow: hidden; margin-right: 4px; }
.quiz-barre span { display: block; height: 100%; background: #02729b; }
.quiz-raisons { list-style: disc outside; margin: 0 0 6px 18px; padding: 0; font-size: 13px; line-height: 1.4; }
.quiz-raisons li { margin: 0 0 2px; padding: 0; list-style: disc outside; }
.quiz-attention { font-size: 12px; color: #a0522d; margin: 0 0 4px; line-height: 1.4; }
.quiz-poids { font-size: 12px; color: #666; margin: 0 0 4px; line-height: 1.4; }
.quiz-lien { font-size: 13px; margin: 0; }

.quiz-avertissement { font-size: 13px; color: #555; background: #f3f7f9; border-left: 3px solid #02729b; padding: 8px 12px; }
.quiz-methode { font-size: 13px; margin: 0 0 6px; }
.quiz-methode summary { cursor: pointer; color: #02729b; font-weight: bold; margin-bottom: 6px; }
.quiz-methode ul { margin-left: 18px; }
.quiz-methode li, .quiz-methode p { font-size: 13px; }

/* Listes par situation (rendues côté serveur) */
.quiz-situations { overflow: hidden; }
.quiz-situation { float: left; width: 33.33%; padding: 0 14px 10px 0; }
.quiz-situation:nth-child(3n+1) { clear: left; }
.quiz-situation h3 { font-size: 17px; margin: 0 0 2px; }
.quiz-situation .petit { margin-bottom: 6px; }
.quiz-situation ul { list-style: none; margin: 0 0 8px; }
.quiz-situation li { margin: 0 0 5px; font-size: 14px; line-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quiz-situation li img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; vertical-align: middle; margin-right: 8px; background: #eee; }
.quiz-situation li small { color: #888; font-size: 12px; }

@media only screen and (max-width: 940px) and (min-width: 768px) {
  .quiz-situation { width: 50%; }
  .quiz-situation:nth-child(3n+1) { clear: none; }
  .quiz-situation:nth-child(2n+1) { clear: left; }
}
@media only screen and (max-width: 767px) {
  .page-quiz h1 { font-size: 23px; }
  .page-quiz h2 { font-size: 24px; line-height: 1.2; }
  .quiz { padding: 12px 10px 4px; margin-left: -6px; margin-right: -6px; }
  .quiz-question, .quiz-carte, .quiz-situation { float: none; width: 100%; padding-right: 0; }
  .quiz-choix label { display: block; margin-right: 0; }
  .quiz-choix span { padding: 10px 12px; }
  .quiz-actions .button { display: block; width: 100%; }
  .quiz-carte { padding-bottom: 16px; border-bottom: 1px solid #eee; margin-bottom: 12px; }
  .quiz-carte .quiz-photo { flex-basis: 96px; width: 96px; margin-right: 10px; }
  .quiz-photo img { width: 96px; height: 96px; }
  .quiz-infos h3 { font-size: 17px; }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .quiz-choix label { display: inline-block; width: 48%; margin-right: 2%; }
  .quiz-choix label span { height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .quiz-choix span { transition: none; } }