/* Social studies: map of Québec and time line (questions 'carte' / 'ligne', screens « Ma ligne du
   temps » and « Ma carte »). Uses the variables of css/jeu.css (:root). */

.us-zone { width: 100%; display: flex; flex-direction: column; align-items: center; }
.exo-reponses.type-carte, .exo-reponses.type-ligne { width: 100%; }
.us-chargement { color: var(--doux, #77708a); text-align: center; }

/* ---------- map ---------- */
.us-carte { display: flex; justify-content: center; width: 100%; }
.us-carte-svg { display: block; border-radius: var(--rayon, 22px); background: #cfe8f6; box-shadow: 0 4px 0 var(--bord, #eadfce), 0 8px 22px rgba(0, 0, 0, .08); user-select: none; -webkit-user-select: none; }
.us-carte-svg.us-vue-quebec { height: min(55vh, 700px); width: auto; max-width: 100%; }
.us-carte-svg.us-vue-vallee { width: min(100%, 1150px); height: auto; max-height: 55vh; }
.exo-image .us-carte-svg.us-vue-quebec { height: min(48vh, 520px); }
.exo-image .us-carte-svg.us-vue-vallee { height: min(40vh, 380px); max-height: none; width: auto; max-width: 100%; }
.us-carte-svg.us-vue-canada, .us-carte-svg.us-vue-monde { width: min(100%, 1000px); height: auto; max-height: 55vh; }
.exo-image .us-carte-svg.us-vue-canada, .exo-image .us-carte-svg.us-vue-monde { height: min(44vh, 420px); max-height: none; width: auto; max-width: 100%; }
.us-marqueur { cursor: pointer; outline: none; }
.us-marqueur .us-m-rond { transform-box: fill-box; transform-origin: center; transition: transform .12s, fill .15s; }
.us-carte-q:not(.repondu) .us-marqueur:hover .us-m-rond, .us-marqueur:focus-visible .us-m-rond { transform: scale(1.25); fill: var(--accent, #ff6f91); }
.us-carte-q .us-marqueur .us-m-rond { animation: us-appel 1.6s ease-in-out infinite; }
.us-carte-q.repondu .us-marqueur .us-m-rond { animation: none; }
.us-carte-q.repondu .us-marqueur:not(.bon):not(.mauvais) { opacity: .45; }
.us-marqueur.bon .us-m-rond { fill: var(--bon, #2fb36d); animation: us-rebond .45s ease-out; }
.us-marqueur.mauvais .us-m-rond { fill: var(--mauvais, #e5534b); animation: us-secoue .4s; }
.us-marqueur.montre .us-m-rond { animation: us-pulse .8s ease-in-out infinite; }
.us-marqueur.choisi .us-m-rond { fill: var(--accent, #ff6f91); }
.us-carte-image .us-marqueur { cursor: default; }
.us-carte-image .us-m-rond { animation: us-pulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes us-appel { 50% { transform: scale(1.12); } }
@keyframes us-rebond { 50% { transform: scale(1.5); } }
@keyframes us-pulse { 50% { transform: scale(1.3); } }
@keyframes us-secoue { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---------- time line ---------- */
.us-ligne { width: 100%; max-width: 1200px; margin: 0 auto; }
.us-ligne-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.us-ligne-q { background: var(--carte, #fff); border-radius: var(--rayon, 22px); padding: 8px 12px; box-shadow: 0 4px 0 var(--bord, #eadfce), 0 8px 22px rgba(0, 0, 0, .06); }
.us-ligne-q .us-ligne-svg { max-height: 46vh; }
.us-candidat { cursor: pointer; outline: none; }
.us-candidat .us-c-rond { transform-box: fill-box; transform-origin: center; transition: transform .12s; }
.us-ligne-q:not(.repondu) .us-candidat:hover .us-c-rond, .us-candidat:focus-visible .us-c-rond { transform: scale(1.18); fill: #eaf1fe; }
.us-candidat.bon .us-c-rond { fill: var(--bon, #2fb36d); stroke: var(--bon, #2fb36d); animation: us-rebond .45s ease-out; }
.us-candidat.mauvais .us-c-rond { fill: var(--mauvais, #e5534b); stroke: var(--mauvais, #e5534b); }
.us-candidat.bon .us-c-texte, .us-candidat.mauvais .us-c-texte { fill: #fff; }
.us-candidat.bon line { stroke: var(--bon, #2fb36d); }
.us-candidat.bon .us-c-point { fill: var(--bon, #2fb36d); fill-opacity: 1; }
.us-ligne-q.repondu .us-candidat:not(.bon):not(.mauvais) { opacity: .4; }
.us-reponse-ligne { font-size: 19px; font-weight: 800; fill: var(--bon, #2fb36d); paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.us-repere[data-id] { cursor: pointer; outline: none; }
.us-repere.choisi circle:first-of-type, .us-repere[data-id]:focus-visible circle:first-of-type { stroke: var(--texte, #2d2a3e); stroke-width: 3; }

/* ---------- screens ---------- */
.us-ecran .entete h1 { font-size: 1.8rem; }
.us-bloc { background: var(--carte, #fff); border-radius: var(--rayon, 22px); padding: 10px 18px 18px; box-shadow: 0 4px 0 var(--bord, #eadfce); }
.us-bloc h2 { margin: 14px 0 4px; font-size: 1.1rem; }
.us-pont { display: block; width: 100%; height: 36px; max-width: 1200px; margin: -6px auto 0; }
.us-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 14px; font-size: .9rem; color: var(--doux, #77708a); }
.us-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.us-legende i.gris { background: #c9c2b4; }
.us-fiche-zone, .us-fiche-bas { margin-top: 16px; }
.us-fiche { background: var(--carte, #fff); border-radius: var(--rayon, 22px); padding: 14px 20px; border-left: 8px solid var(--cat, var(--accent-2, #5b8def)); box-shadow: 0 4px 0 var(--bord, #eadfce); max-width: 760px; }
.us-fiche b { color: var(--cat, var(--accent-2, #5b8def)); font-size: 1.1rem; }
.us-fiche h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.us-fiche p { margin: 0 0 6px; }
.us-fiche small { color: var(--doux, #77708a); }
.us-fiche.gris { border-left-color: #c9c2b4; }
.us-fiche.gris b { color: var(--doux, #77708a); }
.us-vues { display: flex; gap: 10px; margin: 6px 0 12px; }
.us-vues button.actif { background: var(--accent-2, #5b8def); color: #fff; box-shadow: 0 4px 0 #3f6fc9; }
.us-carte-ecran-zone { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.us-carte-ecran-zone .us-carte-svg.us-vue-quebec { height: min(72vh, 820px); }
.us-carte-ecran-zone .us-carte-svg.us-vue-vallee { width: 100%; max-height: 72vh; }
.us-panneau { background: var(--carte, #fff); border-radius: var(--rayon, 22px); padding: 12px 16px; box-shadow: 0 4px 0 var(--bord, #eadfce); }
.us-panneau h2 { margin: 4px 0 10px; color: var(--texte, #2d2a3e); font-size: 1.15rem; }
.us-panneau .us-fiche { box-shadow: none; padding: 6px 12px; }
.us-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.us-liste li { cursor: pointer; padding: 6px 10px; border-radius: 12px; border-left: 6px solid var(--cat, var(--accent-2, #5b8def)); background: var(--fond, #fff7ec); }
.us-liste li:hover { background: #fff0d6; }
.us-liste li b { color: var(--cat); margin-right: 6px; }
.us-puces { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 900px) { .us-carte-ecran-zone { grid-template-columns: 1fr; } }
.us-carte-ecran-zone.vue-vallee { grid-template-columns: 1fr; }