:root{--jeux-ink:#183b49;--jeux-blue:#126378;--jeux-line:#c9dfe2}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(to bottom,#f1efe5 0%,#e7efed 15%,#bdd6d5 31%,#72a8ad 47%,#317d8b 63%,#0c5970 79%,#043b53 100%) fixed;color:var(--jeux-ink);font:16px/1.6 Jost,Arial,sans-serif}a{color:inherit}button,input,select{font:inherit}button,a,select{touch-action:manipulation}:focus-visible{outline:3px solid #c05b00;outline-offset:4px}[hidden]{display:none!important}.skip-link{position:absolute;left:12px;top:-100px;background:#fff;padding:12px;z-index:10000}.skip-link:focus{top:12px}.jeux-wrap{width:min(1180px,100%);margin:auto;padding:25px 22px 64px}.zone-exploration{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.zone-exploration select{max-width:100%;padding:10px;border:1px solid var(--jeux-line);border-radius:6px}.jeux-intro{max-width:850px;padding:30px 0}.eyebrow{color:var(--jeux-blue);font-weight:bold;letter-spacing:.12em;font-size:.8rem}.jeux-intro h1{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.15;margin:12px 0 20px}.jeux-intro p{font-size:1.05rem}.zone-caption{border-left:4px solid #d5aa58;padding-left:14px}.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.game-tile{background:#258fa0;color:#fff;border:1px solid var(--jeux-line);border-radius:16px;overflow:hidden}.game-tile>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.game-tile>div{padding:22px}.game-tile h3{font-size:1.35rem;margin:0}.button,.jeux-wrap button{display:inline-block;border:0;border-radius:7px;padding:12px 18px;background:var(--jeux-blue);color:#fff;font-weight:bold;text-decoration:none;cursor:pointer;min-height:44px}.button.secondary{background:#dcecee;color:#183b49}.jeux-wrap button:disabled{opacity:.65;cursor:wait}.availability,.jeux-empty{background:#e1eeed;padding:18px;border-radius:10px}.learning-links{border-top:1px solid var(--jeux-line);margin-top:45px;padding-top:25px}.learning-links h2{font-size:1.4rem}.learning-links nav{display:flex;gap:12px;flex-wrap:wrap}.learning-links a{padding:10px 15px;border:1px solid var(--jeux-line);background:#fff;border-radius:6px}.quiz{padding:24px;background:#fff;border:1px solid var(--jeux-line);border-radius:16px}.quiz-logo{max-width:100%;height:auto}.quiz-hud{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:bold;margin-bottom:18px}.quiz-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px}.video-wrap{position:relative;aspect-ratio:16/9;background:#122c38;border-radius:10px;overflow:hidden}.video-wrap iframe{width:100%;height:100%;border:0}.quiz-answer{display:block!important;width:100%;text-align:left;margin-bottom:12px;background:#e7f0f1!important;color:#173d49!important;border:2px solid #c6d8dc!important}.quiz-answer.correct{border-color:#167647!important;background:#d8f2e4!important}.quiz-answer.wrong{border-color:#b53a35!important;background:#fde3df!important}#quiz-status:empty{display:none}.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-bottom:25px}.review-card img{width:100%;height:120px;object-fit:cover;border-radius:8px}.review-card{max-width:260px}dialog{width:min(1000px,95vw);height:85vh;border:0;border-radius:12px;padding:18px}dialog::backdrop{background:#102d3bd9}dialog iframe{display:block;width:100%;height:calc(100% - 105px);border:0;margin:12px 0}.site-header .main-nav{max-width:100%}@media(max-width:700px){.games-grid,.quiz-layout{grid-template-columns:1fr}.jeux-wrap{padding:20px 14px 45px}.quiz{padding:16px}.game-tile>div{padding:18px}.learning-links nav{display:grid}.jeux-intro{padding:20px 0}.quiz-hud{font-size:.9rem}}

.site-footer{margin-top:0;background:transparent}.site-header{margin-bottom:0}
/* Les panneaux de lecture gardent leur contraste sur le dégradé commun. */
.jeux-intro{max-width:none;margin:26px 0 32px;padding:clamp(22px,3vw,38px);border-radius:8px;background:#edf6f5}
.jeux-intro>p,.jeux-intro>h1{max-width:850px}
#games-title{display:table;padding:12px 18px;border-radius:7px;background:#edf6f5}
.learning-links{padding:24px;border:0;border-radius:10px;background:#edf6f5}

/* Même entrée de rubrique que RETROUVER : titre, panneau turquoise, puis mer. */
.jeux-wrap:has(.jeux-heading){width:min(96vw,1900px);padding:30px 18px 70px}
.jeux-heading,.jeux-home-intro,.jeux-wrap .zone-exploration{max-width:1100px;margin-left:auto;margin-right:auto}
.jeux-heading .eyebrow{color:#28778a;text-transform:uppercase;font-size:.82rem;font-weight:800;letter-spacing:.1em}
.jeux-heading h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:.2em 0}
.jeux-home-intro{margin-top:26px;margin-bottom:0;padding:clamp(24px,3vw,48px);border-radius:5px;background:#39a7b7;color:#fff}
.jeux-home-intro h2{margin:0 0 14px;font-size:clamp(1.35rem,2vw,2rem)}
.jeux-home-intro>p{max-width:none;margin:0 0 12px;font-size:1.04rem;line-height:1.55}
.jeux-home-intro>p:last-child{margin-bottom:0}
.jeux-wrap .zone-exploration{margin-top:28px;margin-bottom:28px;width:100%}
@media(max-width:620px){.jeux-wrap:has(.jeux-heading){width:94vw;padding:24px 16px 50px}.jeux-home-intro{padding:24px}}

/* Palette des cartes RETROUVER. */
.game-tile>div{background:#258fa0;color:#fff}
.game-tile h3{color:#98dee8}
.game-tile .button{background:#279bb0;color:#fff;box-shadow:0 3px 8px rgba(0,45,58,.18)}
.game-tile .button:hover,.game-tile .button:focus-visible{background:#176e83;color:#fff}
.game-tile .availability{background:#357989;color:#fff}

/* Le lien natif du bouton couvre l’image, le titre et le texte de la carte. */
.game-tile{position:relative}
.game-tile .button::after{content:"";position:absolute;inset:0;z-index:1;border-radius:16px}
.game-tile:has(.button:hover){box-shadow:0 14px 32px rgba(6,51,67,.25)}
.game-tile:has(.button:focus-visible){outline:3px solid #fff;outline-offset:4px}

.games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.games-grid{grid-template-columns:1fr}}
.video-wrap iframe{pointer-events:none}
.quiz-tools{display:flex;justify-content:flex-end;margin:12px 0}
#resource-dialog{padding:0;width:min(1100px,94vw);height:90vh;max-height:90vh;overflow:hidden}
.resource-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;height:52px;background:#edf6f5}
.resource-toolbar a{font-size:.85rem}
.jeux-wrap #resource-close{display:grid;place-items:center;padding:0;width:36px;height:36px;min-height:36px;flex:none;border:0;background:transparent;color:#183b49;font:32px/1 Arial,sans-serif;border-radius:50%;cursor:pointer}
.jeux-wrap #resource-close:hover{background:#d2e5e8}
#resource-dialog iframe{display:block;width:100%;height:calc(100% - 52px);border:0;margin:0}

.game-tile{display:flex;flex-direction:column}.game-tile>div{display:flex;flex:1;flex-direction:column;align-items:flex-start}.game-tile .button{margin-top:auto}

/* Bilans compacts, images complètes et commandes identifiables. */
.review-grid{grid-template-columns:repeat(auto-fill,minmax(180px,260px));justify-content:start;gap:14px}
.review-card{display:block;width:100%;align-self:start}.review-card img{display:block;width:100%;height:auto;object-fit:contain}
.quiz-tools{margin:0 0 8px}.quiz p{margin:10px 0}.quiz h2,.quiz h3{margin:12px 0}
.resource-toolbar{justify-content:flex-end}
#timer-display{display:inline-flex;justify-content:center;align-items:center;min-width:90px;padding:5px 16px;border-radius:10px;background:#ffce54;color:#193b49;font-size:1.8rem;font-weight:800;font-variant-numeric:tabular-nums;border:2px solid #ae7200}
#timer-display.urgent{background:#b52c25;color:white;border-color:#841813}
.classification #reshuffle{background:#345aa1;color:white}.classification #resetTri{background:#a54028;color:white}
.mobile-game-bar,.mobile-pager,.mobile-card-hint,.mobile-biotope{display:none}
@media(max-width:700px),(max-height:500px) and (pointer:coarse){
 body.has-game .jeux-wrap{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;margin:0;padding:5px 8px 65px;background:#d9e9e8;z-index:100;display:flex;flex-direction:column;gap:4px;overflow:hidden}
 .has-game .jeux-wrap>.zone-exploration,.has-game .jeux-intro{display:none}
 .has-game #dis-moi-launcher{display:none!important}
 .mobile-game-bar{display:flex;align-items:center;gap:12px;min-height:30px;font-size:13px;line-height:1.15}.mobile-game-bar a{font-weight:bold;white-space:nowrap}.mobile-game-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .has-game .quiz,.has-game .classification{min-height:0;flex:1;padding:8px;margin:0;border-radius:10px;overflow:hidden}
 .has-game .quiz{display:flex;flex-direction:column;font-size:13px;line-height:1.25}
 .has-game .quiz-tools{margin:0;align-self:flex-end}.has-game .quiz button,.has-game .quiz .button{font-size:13px;padding:7px 10px;min-height:36px}
 .has-game #quiz-status{margin:4px 0;font-size:12px}.has-game .quiz-hud{gap:5px;align-items:center;margin:0 0 4px;font-size:12px}.has-game #niveau{font-size:11px}
 .has-game #timer-display{font-size:24px;min-width:64px;padding:2px 8px}
 .has-game #quiz-play{min-height:0;flex:1;display:flex;flex-direction:column}.has-game .quiz-layout{min-height:0;flex:1;display:flex;flex-direction:column;gap:4px}
 .has-game .quiz-layout>div{min-height:0;flex:1}.has-game .video-wrap{height:100%;max-height:28vh;aspect-ratio:auto}.has-game #video-help{display:none}
 .has-game .quiz-layout h2{font-size:16px;margin:3px 0}.has-game #answers-container{display:grid;grid-template-columns:1fr 1fr;gap:5px}.has-game .quiz-answer{margin:0;min-height:46px;font-size:12px!important;padding:6px!important}
 .has-game #answer-feedback{margin:3px 0;min-height:16px;font-size:12px}.has-game #next-button{width:100%}
 .has-game .quiz-logo{max-height:70px;width:auto}.has-game .quiz h2{font-size:20px}.has-game .quiz h3{font-size:16px}
 .has-game .review-grid{grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.has-game .review-card img{max-height:23vh;object-fit:contain}
 .mobile-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0;font-size:12px}.mobile-pager button{min-width:44px;min-height:36px;padding:0!important}.mobile-away{display:none!important}
 .has-game .classification{display:flex;flex-direction:column}.has-game .classification #tri{min-height:0;flex:1;display:flex;flex-direction:column}
 .has-game .classification .score-big{font-size:16px}.has-game .classification .hud{margin:0 0 4px;gap:0}.has-game .classification .hud>.small,.has-game .classification .biotope-buttons{display:none}
 .mobile-biotope{display:block;min-width:0;max-width:42%;font-size:12px}.has-game .classification-tools{gap:4px;flex-wrap:nowrap}.has-game .classification-tools button{font-size:12px;padding:5px 8px;min-height:36px}
 .has-game .classification .play-area{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0}.has-game .classification .deck,.has-game .classification .zones{padding:5px;min-height:0}
 .has-game .classification .deck{flex:1;display:flex;flex-direction:column}.has-game .classification .deck h2,.has-game .classification .zones h2{display:none}
 .mobile-card-hint{display:block;margin:0 0 4px;font-size:12px}.has-game .classification .cards{display:flex;justify-content:center;min-height:0;flex:1}.has-game .classification .cards .card{height:100%;max-width:100%;align-self:center}.has-game .classification .card-thumb{height:100%;width:100%;object-fit:contain;aspect-ratio:auto}
 .has-game .classification .zones-grid{grid-template-columns:1fr 1fr;gap:4px}.has-game .classification .zone{min-height:44px;padding:5px;display:flex;align-items:center}.has-game .classification .zone h4{font-size:12px;margin:0}.has-game .classification .zone .slot,.has-game .classification .zone .small{display:none}
 .has-game .classification #message{min-height:0;font-size:12px}.has-game #game-status:empty{display:none}.has-game .classification .toast{bottom:65px;font-size:12px}
 .has-game #watermark{max-width:calc(100vw - 12px)}.has-game #watermark .wm-box{padding:5px 8px!important;white-space:normal!important}.has-game #watermark .wm-text{font-size:11px!important;line-height:1.15!important}
}
@media(max-height:500px) and (pointer:coarse){.has-game .quiz-layout{flex-direction:row}.has-game .quiz-layout>div,.has-game .quiz-layout>section{flex:1}.has-game .video-wrap{max-height:none}.has-game .classification .play-area{flex-direction:row}.has-game .classification .zones{flex:1}.has-game .classification .zone{min-height:35px}.has-game .review-card img{max-height:17vh}}
@media(max-width:700px),(max-height:500px) and (pointer:coarse){
 body.has-game{overflow:hidden!important;height:100dvh!important}
 .has-game .classification .cards .card{background:transparent;border:0;outline:0;width:100%}
 .has-game #welcome-screen{min-height:0}.has-game #welcome-screen p{font-size:12px}
}

/* Retour commun aux quatre jeux, rendu côté serveur et toujours accessible. */
.game-return-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:8px 0;margin-bottom:12px;background:#e7efed;border-bottom:1px solid #b8ced1}
.game-return-bar .button{margin:0;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.game-return-bar span{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px),(max-height:500px) and (pointer:coarse){
 .has-game .game-return-bar{position:relative;top:auto;flex:none;min-height:38px;padding:0;margin:0;gap:8px;font-size:12px;background:transparent}
 .has-game .game-return-bar .button{min-height:36px;padding:5px 8px;font-size:12px}
}