/* ===================================================
   VEILLIANCE — Tests IA par métier (pages publiques)
   S'appuie sur veilliance.css (tokens, typo, boutons)
   =================================================== */

.tia-wrap { max-width: 820px; margin: 0 auto; padding: 5vh 6vw 8vh; }
.tia-fil { font-size: 0.85rem; color: var(--navy-light); margin-bottom: 2rem; }
.tia-fil a { color: var(--navy-light); }
.tia-wrap h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin-bottom: 1.25rem; }
.tia-defi { background: var(--navy); color: var(--cream); padding: 0.9rem 1.25rem; margin: -0.75rem 0 2rem; font-size: 0.97rem; }
.tia-defi strong { color: var(--gold-bright); }
.tia-defi a { color: var(--cream); font-weight: 600; }
.tia-reponse { font-size: 1.12rem; line-height: 1.7; color: var(--navy-soft); border-left: 3px solid var(--gold); padding: 0.25rem 0 0.25rem 1.25rem; margin: 0 0 1.75rem; max-width: none; }
.tia-meta { font-size: 0.85rem; color: var(--navy-light); margin-bottom: 3rem; max-width: none; }
.tia-demarrer { margin-bottom: 4rem; }

.tia-contenu h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 3rem 0 1rem; }
.tia-contenu p, .tia-contenu li { font-size: 1.02rem; line-height: 1.75; max-width: 68ch; }
.tia-contenu ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.tia-contenu li { margin-bottom: 0.5rem; }
.tia-contenu strong { color: var(--navy); }

/* Quiz */
.tia-quiz { background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 2.25rem 2.5rem; margin: 3.5rem 0 2rem; scroll-margin-top: 90px; }
.tia-quiz > h2 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 2.8vw, 2rem); }
.tia-progress { font-size: 0.85rem; color: var(--navy-light); margin-bottom: 2rem; }
.tia-q { margin-bottom: 2.5rem; }
.tia-q:last-of-type { margin-bottom: 0; }
.tia-q-num { font-family: var(--font-display); font-style: italic; color: var(--gold-deep); font-size: 0.9rem; margin-bottom: 0.35rem; }
.tia-q-texte { font-size: 1.08rem; font-weight: 600; color: var(--navy); line-height: 1.45; margin-bottom: 1rem; max-width: none; }
.tia-options { display: flex; flex-direction: column; gap: 0.5rem; }
.tia-opt { text-align: left; font: inherit; font-size: 0.97rem; color: var(--ink); background: var(--cream-light); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; line-height: 1.45; }
.tia-opt:hover:not(:disabled) { border-color: var(--gold); background: var(--paper); }
.tia-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tia-opt:disabled { cursor: default; }
.tia-opt.juste { background: var(--success-bg); border-color: var(--success); color: var(--navy); }
.tia-opt.faux { background: var(--danger-bg); border-color: var(--danger); color: var(--navy); }
.tia-reste { margin: 2rem 0 0; padding: 0.9rem 1.1rem; background: var(--warn-bg); border-left: 3px solid var(--gold); font-size: 0.95rem; color: var(--navy); max-width: none; }
.tia-reste a { color: var(--gold-deep); font-weight: 600; }
.tia-q { scroll-margin-top: 90px; }
.tia-explication { margin-top: 0.85rem; padding: 0.85rem 1.1rem; background: var(--cream); border-left: 3px solid var(--gold); font-size: 0.93rem; line-height: 1.6; color: var(--ink); }
.tia-explication strong { color: var(--navy); }

/* Résultat */
.tia-resultat { background: var(--navy); color: var(--cream); padding: 2.75rem 2.5rem; margin: 2rem 0; text-align: center; scroll-margin-top: 90px; }
.tia-score { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.5rem, 9vw, 5.5rem); line-height: 1; color: var(--cream-light); }
.tia-score span { font-size: 0.45em; color: rgba(247,241,228,0.6); }
.tia-verdict { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--gold-bright); margin: 0.75rem 0 0.5rem; }
.tia-verdict-texte { color: rgba(247,241,228,0.85); max-width: 56ch; margin: 0 auto 1.75rem; }
.tia-partage { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.tia-partage .btn-ghost { color: var(--cream); border-color: rgba(247,241,228,0.4); }
.tia-partage .btn-ghost:hover { background: rgba(247,241,228,0.08); border-color: var(--cream); color: var(--cream); }

/* Capture */
.tia-capture { background: var(--paper); border: 1px solid var(--border); border-left: 3px solid var(--gold); padding: 2rem 2.25rem; margin: 2rem 0; }
.tia-capture h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.tia-capture .tia-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.tia-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--navy-soft); margin: 0.5rem 0 1.25rem; }
.tia-consent input { margin-top: 0.25rem; }

/* Fiche */
.tia-fiche { background: var(--cream-light); border: 1px dashed var(--gold); padding: 2rem 2.25rem; margin: 2rem 0; scroll-margin-top: 90px; }
.tia-fiche h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.tia-fiche ol { padding-left: 1.25rem; }
.tia-fiche li { margin-bottom: 0.65rem; line-height: 1.6; }

/* Atelier */
.tia-atelier { background: var(--navy); color: var(--cream); padding: 2.5rem; margin: 3rem 0; background-image: radial-gradient(ellipse at top right, rgba(181,147,74,0.15) 0%, transparent 60%); }
.tia-atelier h2 { color: var(--cream-light); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; }
.tia-atelier p { color: rgba(247,241,228,0.85); }

/* FAQ + maillage */
.tia-faq details { background: var(--paper); border: 1px solid var(--border); padding: 1.25rem 1.5rem; margin-bottom: 0.75rem; }
.tia-faq summary { cursor: pointer; font-family: var(--font-display); font-size: 1.1rem; color: var(--navy); }
.tia-faq details p { margin: 0.85rem 0 0; }
.tia-autres { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.tia-carte { display: block; background: var(--paper); border: 1px solid var(--border); padding: 1.4rem 1.5rem; text-decoration: none; color: var(--ink); transition: border-color 0.2s; }
.tia-carte:hover { border-color: var(--gold); color: var(--ink); }
.tia-carte strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--navy); margin-bottom: 0.35rem; }
.tia-carte span { font-size: 0.92rem; color: var(--navy-soft); }
.tia-mention { font-size: 0.8rem; color: var(--navy-light); margin-top: 3rem; max-width: none; }

@media (max-width: 640px) {
  .tia-quiz, .tia-capture, .tia-fiche, .tia-resultat, .tia-atelier { padding: 1.5rem 1.25rem; }
  .tia-capture .tia-grille { grid-template-columns: 1fr; }
  .btn { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print {
  .ai-banner, .site-header, .site-footer, .tia-quiz, .tia-resultat, .tia-capture, .tia-atelier, .tia-faq, .tia-autres-bloc, .tia-demarrer, .tia-contenu { display: none !important; }
  .tia-fiche { display: block !important; border: none; }
}

/* ===================================================
   MODE JEU (activé par test-ia.js)
   =================================================== */
.tia-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bouton de départ */
.tia-go { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; background: var(--gold); color: var(--navy); text-decoration: none; font-weight: 800; font-size: 1.2rem; padding: 1rem 1.9rem 0.95rem; border-radius: 14px; box-shadow: 0 6px 0 var(--gold-deep); transition: transform 0.12s, box-shadow 0.12s; }
.tia-go span { font-weight: 500; font-size: 0.82rem; opacity: 0.8; }
.tia-go:hover { color: var(--navy); transform: translateY(2px); box-shadow: 0 4px 0 var(--gold-deep); }
.tia-go:active { transform: translateY(6px); box-shadow: 0 0 0 var(--gold-deep); }

/* Plateau de jeu */
.tia-quiz.tia-mode-jeu { background: var(--navy); border: none; border-radius: 22px; padding: 2rem 2rem 2.25rem; color: var(--cream); box-shadow: 0 24px 60px rgba(14,36,64,0.25); position: relative; overflow: hidden; }
.tia-quiz.tia-mode-jeu::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 0%, rgba(201,164,92,0.22), transparent 45%), radial-gradient(circle at 0% 100%, rgba(74,122,62,0.18), transparent 40%); pointer-events: none; }
.tia-quiz.tia-mode-jeu > * { position: relative; }
.tia-quiz.tia-mode-jeu > h2 { color: var(--cream-light); font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 1.25rem; }
.tia-mode-jeu .tia-q { display: none; margin: 0; }
.tia-mode-jeu .tia-q.active { display: block; animation: tia-entree 0.35s ease-out; }
.tia-mode-jeu.termine .tia-q.active { display: none; }
@keyframes tia-entree { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

.tia-tableau { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.tia-etapes { display: flex; gap: 0.5rem; }
.tia-etape { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.95rem; background: rgba(247,241,228,0.1); color: rgba(247,241,228,0.55); border: 2px solid rgba(247,241,228,0.18); transition: all 0.25s; }
.tia-etape.courante { border-color: var(--gold-bright); color: var(--cream-light); transform: scale(1.12); box-shadow: 0 0 0 5px rgba(201,164,92,0.18); }
.tia-etape.ok { background: #4A7A3E; border-color: #6FA35F; color: #fff; }
.tia-etape.ko { background: #A04030; border-color: #C8604E; color: #fff; }
.tia-compteurs { display: flex; gap: 0.5rem; }
.tia-compteur { background: rgba(247,241,228,0.1); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; color: rgba(247,241,228,0.8); }
.tia-compteur strong { color: var(--gold-bright); font-size: 1rem; margin-left: 0.2rem; }

.tia-mode-jeu .tia-q-num { color: var(--gold-bright); font-size: 0.95rem; }
.tia-mode-jeu .tia-q-texte { color: var(--cream-light); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.3; margin-bottom: 1.4rem; }
.tia-mode-jeu .tia-options { counter-reset: opt; gap: 0.7rem; }
.tia-mode-jeu .tia-opt { counter-increment: opt; position: relative; display: flex; align-items: center; gap: 0.9rem; background: var(--cream-light); color: var(--navy); border: none; border-radius: 14px; padding: 0.95rem 1.1rem; font-weight: 600; box-shadow: 0 4px 0 rgba(0,0,0,0.25); transition: transform 0.12s, box-shadow 0.12s, background 0.2s; }
.tia-mode-jeu .tia-opt::before { content: counter(opt, upper-alpha); flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--navy); color: var(--gold-bright); font-weight: 800; }
.tia-mode-jeu .tia-opt:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.25); background: #fff; }
.tia-mode-jeu .tia-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.tia-mode-jeu .tia-opt:disabled { opacity: 0.55; }
.tia-mode-jeu .tia-opt.juste { opacity: 1; background: #DFF0D8; box-shadow: 0 4px 0 #4A7A3E; animation: tia-bravo 0.45s ease; }
.tia-mode-jeu .tia-opt.juste::before { content: "✓"; background: #4A7A3E; color: #fff; }
.tia-mode-jeu .tia-opt.faux { opacity: 1; background: #F5E2DC; box-shadow: 0 4px 0 #A04030; animation: tia-secoue 0.4s ease; }
.tia-mode-jeu .tia-opt.faux::before { content: "✗"; background: #A04030; color: #fff; }
@keyframes tia-bravo { 40% { transform: scale(1.03); } }
@keyframes tia-secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.tia-pop { position: absolute; right: 1.25rem; top: 0.2rem; font-weight: 800; color: #4A7A3E; font-size: 1.3rem; animation: tia-monte 0.9s ease-out forwards; pointer-events: none; }
@keyframes tia-monte { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-34px); } }

.tia-mode-jeu .tia-explication { background: rgba(247,241,228,0.08); border-left: 3px solid var(--gold-bright); color: rgba(247,241,228,0.92); border-radius: 0 12px 12px 0; margin-top: 1.1rem; animation: tia-entree 0.3s ease-out; }
.tia-mode-jeu .tia-explication strong { color: var(--gold-bright); }
.tia-mode-jeu .tia-q.ratee .tia-explication strong { color: #F0A898; }
.tia-mode-jeu .tia-q.reussie .tia-explication strong { color: #A8D69A; }
.tia-suivant { margin-top: 1.25rem; font: inherit; font-weight: 800; font-size: 1.05rem; background: var(--gold); color: var(--navy); border: none; border-radius: 12px; padding: 0.85rem 1.6rem; cursor: pointer; box-shadow: 0 5px 0 var(--gold-deep); transition: transform 0.12s, box-shadow 0.12s; }
.tia-suivant:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--gold-deep); }
.tia-suivant:focus-visible, .tia-mode-jeu .tia-opt:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }
.tia-mode-jeu .tia-reste { display: none; }

/* Duel (défi reçu) */
.tia-duel { background: var(--navy); color: var(--cream); border-radius: 20px; padding: 1.25rem 1.5rem 1.4rem; margin: 0 0 2.25rem; text-align: center; box-shadow: 0 16px 40px rgba(14,36,64,0.22); }
.tia-duel-titre { font-family: var(--font-display); font-style: italic; color: var(--gold-bright); font-size: 1.15rem; margin-bottom: 0.9rem; }
.tia-duel-ring { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.tia-duel-joueur { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; background: rgba(247,241,228,0.08); border-radius: 14px; padding: 0.9rem 0.5rem; }
.tia-duel-joueur.vous { background: rgba(201,164,92,0.16); border: 2px dashed var(--gold-bright); }
.tia-duel-nom { font-size: 0.8rem; letter-spacing: 0.04em; color: rgba(247,241,228,0.75); }
.tia-duel-score { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--cream-light); }
.tia-duel-score small { font-size: 0.45em; color: rgba(247,241,228,0.55); }
.tia-duel-temps { font-size: 0.8rem; color: var(--gold-bright); }
.tia-duel-vs { font-weight: 900; font-size: 1.4rem; color: var(--navy); background: var(--gold-bright); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(201,164,92,0.25); animation: tia-battement 1.6s ease-in-out infinite; }
@keyframes tia-battement { 50% { transform: scale(1.1); } }
.tia-duel-go { margin-top: 0.35rem; font-size: 0.82rem; font-weight: 700; color: var(--gold-bright); }

/* Résultat */
.tia-resultat { border-radius: 22px; padding: 2.5rem 2rem 2.25rem; }
.tia-medaille { position: relative; width: 170px; height: 170px; margin: 0 auto 0.75rem; }
.tia-jauge { width: 100%; height: 100%; transform: rotate(-90deg); }
.tia-jauge-fond { fill: none; stroke: rgba(247,241,228,0.12); stroke-width: 10; }
.tia-jauge-arc { fill: none; stroke: var(--gold-bright); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1); }
.tia-medaille.or .tia-jauge-arc { stroke: #D9B25E; }
.tia-medaille.argent .tia-jauge-arc { stroke: #C9CED6; }
.tia-medaille.bronze .tia-jauge-arc { stroke: #C8845A; }
.tia-medaille .tia-score { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 52px; font-size: 3.4rem; }
.tia-badge { display: inline-block; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.03em; padding: 0.4rem 1rem; border-radius: 999px; background: var(--gold); color: var(--navy); margin-bottom: 0.4rem; }
.tia-duel-resultat { display: inline-block; background: rgba(247,241,228,0.1); border: 1px solid rgba(247,241,228,0.25); border-radius: 12px; padding: 0.7rem 1.1rem; color: var(--cream-light); font-weight: 600; margin: 0 auto 1.5rem; max-width: 56ch; }

/* Confettis */
.tia-confettis { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.tia-confettis i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation-name: tia-chute; animation-timing-function: cubic-bezier(.3,.6,.5,1); animation-fill-mode: forwards; }
@keyframes tia-chute { to { transform: translateY(105vh) rotate(540deg); opacity: 0.9; } }

@media (max-width: 640px) {
  /* Pages de test : l'en-tête ne reste pas collé en haut sur mobile, pour libérer l'écran de jeu */
  .site-header { position: static; }
  .tia-quiz, .tia-resultat, .tia-fiche { scroll-margin-top: 12px; }
  .tia-quiz.tia-mode-jeu { padding: 1.4rem 1.1rem 1.6rem; border-radius: 18px; }
  .tia-etape { width: 32px; height: 32px; font-size: 0.85rem; }
  .tia-duel-ring { gap: 0.5rem; }
  .tia-duel-score { font-size: 2rem; }
  .tia-duel-vs { width: 42px; height: 42px; font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tia-mode-jeu .tia-q.active, .tia-duel-vs, .tia-mode-jeu .tia-opt.juste, .tia-mode-jeu .tia-opt.faux { animation: none !important; }
}

.tia-wrap [hidden], .tia-quiz [hidden] { display: none !important; }