/* Les As du Clic v2 — charte ORDiDOC. Public senior : grands textes, gros boutons, contraste. */
@font-face { font-family: "Inter"; src: url("fonts/Inter-VariableFont_opsz_wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-VariableFont_wdth_wght.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62.5% 125%; font-display: swap; }
:root {
  --blue: #1F4E8C; --blue-dark: #163A69; --green: #7AC043; --lime: #C0CC12; --red: #B3261E;
  --bg: #F4F7FB; --card: #FFFFFF; --ink: #16233A; --muted: #5B6B82; --line: #DCE4EF; --ok: #2E8B57; --ko: #B3261E;
  --fs: 1; --radius: 20px; --shadow: 0 10px 30px rgba(22, 58, 105, .12);
  --font-title: "Archivo", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
}
:root[data-contrast="high"] { --bg: #FFFFFF; --ink: #000000; --muted: #222222; --line: #000000; --blue: #0B2E63; --green: #2F7D0E; --lime: #7A8300; --shadow: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: calc(17px * var(--fs)); -webkit-text-size-adjust: 100%; scroll-padding-bottom: 120px; }
body { margin: 0; overflow-x: hidden; font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.45; min-height: 100dvh; display: flex; flex-direction: column; }
img { max-width: 100%; }
button, input, select { font: inherit; }
h1, h2, h3 { font-family: var(--font-title); line-height: 1.15; margin: 0 0 .4em; color: var(--blue-dark); }
h1 { font-size: 1.7rem; font-weight: 800; } h2 { font-size: 1.3rem; font-weight: 800; } h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 .8em; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 0; background: var(--blue); color: #fff; padding: 8px 12px; z-index: 50; } .skip:focus { left: 8px; }

/* En-tête */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blue-dark); font-family: var(--font-title); font-weight: 800; font-size: 1rem; line-height: 1.05; }
.me { display: flex; flex-direction: column; align-items: flex-end; }
.me .pseudo { font-weight: 700; } .me .pts { color: var(--blue); font-weight: 800; font-family: var(--font-title); }

/* Écran principal */
.screen { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); outline: none; }
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; border: 1px solid var(--line); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.center { text-align: center; }
.hero { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.hero img { width: auto; height: 150px; max-width: 170px; }
.mascotte { width: auto; height: 130px; max-width: 170px; display: block; margin: 0 auto; }

/* Boutons (≥ 64 px) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 12px 20px; border-radius: 18px; border: 0; cursor: pointer; font-weight: 700; font-size: 1.1rem; background: var(--blue); color: #fff; text-decoration: none; transition: transform .08s ease, filter .15s; touch-action: manipulation; }
.btn:active { transform: scale(.98); } .btn:focus-visible { outline: 4px solid var(--lime); outline-offset: 2px; }
.btn.green { background: var(--green); color: #0f2a05; } .btn.lime { background: var(--lime); color: #2a2d00; } .btn.ghost { background: transparent; color: var(--blue); border: 3px solid var(--blue); } .btn.red { background: var(--red); }
.btn.wide { width: 100%; } .btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.small { min-height: 48px; font-size: 1rem; padding: 8px 14px; border-radius: 14px; }
.bigbtn { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; width: 100%; text-align: left; min-height: 84px; padding: 14px 16px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); margin-bottom: 12px; }
.bigbtn b { font-family: var(--font-title); font-size: 1.15rem; color: var(--blue-dark); display: block; } .bigbtn span { color: var(--muted); font-size: .95rem; }
.bigbtn .ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 1.6rem; } .bigbtn .ico svg { width: 30px; height: 30px; fill: currentColor; }
.bigbtn .arrow { font-size: 1.6rem; color: var(--blue); }

/* Champs */
label.field { display: block; margin-bottom: 14px; font-weight: 600; }
label.field input, label.field select { display: block; width: 100%; min-height: 60px; padding: 10px 14px; margin-top: 6px; border: 2px solid var(--line); border-radius: 14px; font-size: 1.1rem; background: #fff; color: var(--ink); }
label.field input:focus { outline: 4px solid var(--lime); border-color: var(--blue); }
label.check { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; margin: 14px 0; font-weight: 500; } label.check input { width: 28px; height: 28px; margin-top: 2px; }
.error { color: var(--red); font-weight: 600; margin: 6px 0; }
.hint { color: var(--muted); font-size: .95rem; }

/* Chips thèmes & segments */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
.chip { min-height: 52px; padding: 8px 12px; border-radius: 999px; text-align: center; overflow-wrap: anywhere; border: 3px solid var(--c, var(--blue)); background: #fff; color: var(--c, var(--blue)); font-weight: 700; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--c, var(--blue)); color: #fff; }
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .segment .chip { border-radius: 14px; text-align: center; min-width: 0; padding: 8px 6px; font-size: .98rem; overflow-wrap: anywhere; }

/* Statistiques, niveaux, badges */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat { background: var(--bg); border-radius: 16px; padding: 10px; text-align: center; } .stat b { display: block; font-family: var(--font-title); font-size: 1.5rem; color: var(--blue); } .stat span { font-size: .9rem; color: var(--muted); }
.levelbar { height: 18px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 6px 0; } .levelbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--lime)); border-radius: 999px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.badge { text-align: center; padding: 10px 6px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); } .badge .b-ico { width: 56px; height: 56px; margin: 0 auto 6px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; font-size: 1.6rem; } .badge.locked { opacity: .45; filter: grayscale(1); } .badge b { display: block; font-size: .9rem; line-height: 1.2; }

/* Classement */
.lb { list-style: none; margin: 0; padding: 0; } .lb li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: 1.05rem; } .lb li.me { background: #EEF6E6; border-radius: 12px; font-weight: 800; }
.lb .rank { font-family: var(--font-title); font-weight: 800; font-size: 1.3rem; color: var(--blue); text-align: center; } .lb li:nth-child(1) .rank { color: #C9A227; } .lb li:nth-child(2) .rank { color: #8A94A6; } .lb li:nth-child(3) .rank { color: #B06A2F; }
.lb .pts { font-weight: 800; color: var(--blue-dark); }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; margin: 10px 0 16px; } .podium div { background: var(--blue); color: #fff; border-radius: 14px 14px 0 0; text-align: center; padding: 10px 6px; font-weight: 700; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; } .podium .p1 { height: 120px; background: var(--green); color: #0f2a05; } .podium .p2 { height: 95px; } .podium .p3 { height: 75px; background: var(--blue-dark); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }

/* Carte de jeu */
.gamehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.progress { flex: 1; height: 12px; background: var(--line); border-radius: 999px; overflow: hidden; } .progress i { display: block; height: 100%; background: var(--blue); transition: width .4s; }
.combo { font-family: var(--font-title); font-weight: 800; color: var(--muted); min-width: 92px; text-align: right; } .combo.on { color: #D9480F; animation: pulse .6s ease; } .combo.on::before { content: "🔥 "; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
.cardwrap { perspective: 1400px; }
.card { position: relative; display: grid; transform-style: preserve-3d; }
.card.dos { transform: rotateY(-180deg); } .card.dos .face.front, .card.reveal .face.front { pointer-events: none; }
/* Retournements lents (1,1 s) avec une légère levée au milieu, comme une vraie carte qu'on soulève. */
.card.reveal { animation: reveal 1.1s cubic-bezier(.25,.8,.25,1) both; }
.card.ko { animation: shake .5s ease; }
.card.flipped { transform: rotateY(180deg); animation: flip 1.1s cubic-bezier(.25,.8,.25,1) both; }
@keyframes reveal { 0% { transform: rotateY(-180deg) scale(1); } 50% { transform: rotateY(-90deg) scale(1.06) translateY(-14px); } 100% { transform: rotateY(0) scale(1); } }
@keyframes flip { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(90deg) scale(1.06) translateY(-14px); } 100% { transform: rotateY(180deg) scale(1); } }
/* Retour sur la réponse : flash de la carte, pulsation du bouton, « +N » qui s'envole, bonne réponse révélée en halo. */
.face.front.ok { animation: flashok 1s ease; } .face.front.ko { animation: flashko 1s ease; }
@keyframes flashok { 0% { background: var(--card); } 25% { background: #DDF3D4; } 100% { background: var(--card); } }
@keyframes flashko { 0% { background: var(--card); } 25% { background: #FBE4E2; } 100% { background: var(--card); } }
.ans.chosen.correct { animation: celebrate .7s cubic-bezier(.2,1.4,.3,1); box-shadow: 0 0 0 6px rgba(46,139,87,.22); }
@keyframes celebrate { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.ans.reveal-ok { animation: halo 1.1s ease .3s both; }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(46,139,87,.65); } 70% { box-shadow: 0 0 0 16px rgba(46,139,87,0); } 100% { box-shadow: 0 0 0 0 rgba(46,139,87,0); } }
.float { position: absolute; left: 50%; top: -4px; font-family: var(--font-title); font-weight: 800; font-size: 1.7rem; color: var(--ok); pointer-events: none; text-shadow: 0 2px 0 #fff, 0 0 12px #fff; animation: floatup 1.4s ease-out forwards; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.5); } 18% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -96px) scale(1); } }
.verdict img { animation: pop .6s cubic-bezier(.2,1.4,.3,1) both; } .verdict > div { animation: rise .6s cubic-bezier(.2,.8,.2,1) .15s both; } .face.back .expl, .face.back .tip { animation: rise .6s ease .3s both; }
/* Une seule face « dans le flux » à la fois : la carte a toujours la hauteur de la face visible. */
.face { grid-area: 1 / 1; min-width: 0; }
.card:not(.flipped) .face.back { position: absolute; inset: 0; }
.card.flipped .face.front { position: absolute; inset: 0; overflow: hidden; }
.face { background: var(--card); border-radius: 26px; box-shadow: var(--shadow); border: 1px solid var(--line); padding: 20px; border-top: 10px solid var(--c, var(--blue)); backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }
.face.back.dos { display: grid; place-items: center; padding: 18px; border: 0; background: var(--blue-dark) radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 1.6px, transparent 2px) 0 0 / 18px 18px; box-shadow: var(--shadow), inset 0 0 0 10px #fff, inset 0 0 0 14px var(--lime); overflow: hidden; }
.face.back.dos .dos-logo { width: min(48%, 190px); height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.card.flipped .face.front { visibility: hidden; transition: visibility 0s .35s; }
.qhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .label { font-weight: 800; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--c, var(--blue)); color: #fff; } .lvl { color: var(--muted); font-weight: 700; }
.q { font-size: 1.3rem; font-weight: 700; line-height: 1.35; margin: 6px 0 14px; color: var(--ink); }
.qimg { display: block; width: min(100%, 360px); margin: 0 auto 14px; border-radius: 16px; background: #fff; }
.answers { display: grid; gap: 10px; } .answers.two { grid-template-columns: 1fr 1fr; } .answers.imgs { grid-template-columns: repeat(3, 1fr); }
.ans { position: relative; min-height: 68px; padding: 12px 14px; border-radius: 18px; border: 3px solid var(--c, var(--blue)); background: #fff; color: var(--ink); font-size: 1.1rem; font-weight: 600; text-align: left; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ans .key { flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--c, var(--blue)); color: #fff; display: grid; place-items: center; font-weight: 800; }
.ans.big { justify-content: center; font-size: 1.25rem; font-weight: 800; text-align: center; min-height: 84px; }
.ans.img { flex-direction: column; justify-content: center; padding: 10px; min-height: 120px; } .ans.img img { width: 100%; max-width: 110px; aspect-ratio: 1; }
.ans.img .alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ans:disabled { cursor: default; } .ans.correct { background: #E3F4DD; border-color: var(--ok); } .ans.wrong { background: #FBE4E2; border-color: var(--ko); animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.verdict { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; } .verdict .big.long { font-size: 1.2rem; } .verdict .big { font-family: var(--font-title); font-size: 1.6rem; font-weight: 800; color: var(--c, var(--blue)); } .verdict img { width: auto; height: 100px; max-width: 120px; flex: 0 0 auto; }
.gain { display: inline-block; font-family: var(--font-title); font-weight: 800; font-size: 1.3rem; color: var(--ok); background: #E3F4DD; padding: 6px 14px; border-radius: 999px; animation: pop .5s cubic-bezier(.2,1.4,.3,1); } .gain.zero { color: var(--muted); background: var(--bg); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.expl { font-size: 1.1rem; margin: 10px 0; } .tip { background: #FFF8D6; border-left: 6px solid var(--lime); padding: 10px 12px; border-radius: 10px; font-size: 1.02rem; }

/* Toast, overlay, confettis */
.toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); background: var(--blue-dark); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: .3s; z-index: 40; max-width: 92vw; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%); }
.overlay { position: fixed; inset: 0; background: rgba(22, 58, 105, .55); display: grid; place-items: center; padding: 20px; z-index: 30; } .overlay[hidden] { display: none; }
.overlay .box { background: #fff; border-radius: 28px; padding: 26px 22px; max-width: 420px; width: 100%; text-align: center; animation: pop .5s cubic-bezier(.2,1.4,.3,1); } .overlay .box img { width: auto; height: 150px; max-width: 180px; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 35; }
.banner { background: #FBE4E2; color: var(--red); border: 2px solid var(--red); border-radius: 14px; padding: 10px 14px; font-weight: 700; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.count { font-family: var(--font-title); font-weight: 800; color: var(--blue); }
.daily { border: 3px solid var(--lime); background: linear-gradient(135deg, #fff, #F7F9E3); }
.recovery { font-family: ui-monospace, monospace; font-size: 1.5rem; letter-spacing: .15em; background: var(--bg); padding: 10px 14px; border-radius: 12px; display: inline-block; }

/* Onglets bas */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 10; }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; text-decoration: none; color: var(--muted); font-size: .85rem; font-weight: 700; } .tabs a svg { width: 28px; height: 28px; fill: currentColor; } .tabs a[aria-current="page"] { color: var(--blue); }
.tabs[hidden] { display: none; }

@media (max-width: 400px) { .segment.four { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { h1 { font-size: 1.45rem; } .hero img { height: 120px; } .verdict .big { font-size: 1.35rem; } .verdict img { height: 84px; } }
@media (min-width: 700px) { .screen { padding-top: 24px; } .answers.imgs .ans.img img { max-width: 150px; } .hero img { height: 180px; max-width: 200px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .card { transition: none; } }