/* ==========================================================================
   Devenia — thème clair « futuriste » commun aux 5 tests (oct 2026, maquettes
   v3/v4 approuvées par Mathieu) : questionnaire, test-personnalite,
   valeurs-travail, mini-scenarios, precise-tes-metiers.

   Ne s'applique que sous <body class="tf">, chargé après le <style> de la
   page et après site.css. Purement visuel : aucun calcul, aucun texte de
   question. La mascotte et l'écran entre les blocs RIASEC sont ajoutés par
   assets/tests-future.js.
   ========================================================================== */

body.tf{
  --tf-paper:#FBF8F3;
  --tf-ink:#0D1330;
  --tf-ink-soft:#3A4270;
  --tf-muted:#5A6290;          /* 5,6:1 sur le fond : texte secondaire AA */
  --tf-cyan:#5BE7FF;           /* lueur seulement (jamais seule comme repère) */
  --tf-cyan-ink:#0B7FA0;       /* contour sélectionné : 4,3:1 sur blanc */
  --tf-accent:#7C6FE0;         /* couleur du test (surchargée ci-dessous) */
  --tf-accent-ink:#5A4FC4;     /* même teinte, foncée pour le texte AA */
  --mist:#5A6290;              /* le gris-lavande d'origine était trop pâle sur fond clair */
  /* Aucun jaune/ambre dans les tests (demande de Mathieu, 16 oct) : l'accent
     « aube » des pages est remplacé par le mauve. */
  --dawn:#6A5CD6; --dawn-soft:#C7C0F2;
  --tf-grad:linear-gradient(90deg, #5B7FDE, #7C6FE0);          /* barres */
  --tf-grad-btn:linear-gradient(90deg, #4F6FD6, #6A5CD6);      /* boutons : texte blanc ≥ 4,5:1 */
  background:
    radial-gradient(ellipse at 82% -5%, #E9E6FB 0, rgba(233,230,251,0) 55%),
    radial-gradient(ellipse at -5% 105%, #E3F1FB 0, rgba(227,241,251,0) 50%),
    var(--tf-paper);
  background-attachment:fixed;
  color:var(--tf-ink);
  position:relative;
}
/* Grille subtile, qui s'efface vers le bas. */
body.tf::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(13,19,48,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(13,19,48,.045) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(#000, transparent 90%);
          mask-image:linear-gradient(#000, transparent 90%);
}
body.tf > main, body.tf > section, body.tf > footer{position:relative; z-index:1;}

body.tf[data-tf-test="personnalite"]{--tf-accent:#5B7FDE; --tf-accent-ink:#3657C2;}
body.tf[data-tf-test="valeurs"]{--tf-accent:#4CAF7D; --tf-accent-ink:#2A7A51;}
body.tf[data-tf-test="scenarios"]{--tf-accent:#FF7A59; --tf-accent-ink:#B8432A;}
body.tf[data-tf-test="precise"]{--tf-accent:#2A9DB8; --tf-accent-ink:#1C6F84;}

/* ---------- En-tête unifié (header.js) passé en clair ---------- */
body.tf > header:not(.dv-header){background:transparent;}
body.tf header.dv-header{
  background:rgba(251,248,243,.82)!important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(13,19,48,.08)!important;
  color:var(--tf-ink);
}
body.tf .dv-links a{color:var(--tf-ink-soft);}
body.tf .dv-links a:hover{color:var(--tf-ink);}
body.tf .dv-links a.on{color:var(--tf-ink); border-bottom-color:#7C6FE0;}
body.tf .dv-lang button{border-color:rgba(13,19,48,.2); color:var(--tf-ink-soft);}
body.tf .dv-lang button.on{background:var(--tf-grad-btn); border-color:#6A5CD6; color:#fff;}
body.tf .step-count{color:var(--tf-muted);}

/* ---------- Barre de progression segmentée ---------- */
body.tf .progress-track{background:transparent; height:auto; margin:0; padding:0 20px 10px; max-width:1120px; margin:0 auto; overflow:visible;}
body.tf .progress-track .progress-fill{display:none;}
.tf-segs{display:flex; gap:6px; align-items:center;}
.tf-seg{flex:1; height:8px; border-radius:4px; background:rgba(13,19,48,.08); overflow:hidden; position:relative;}
.tf-seg > i{position:absolute; inset:0 auto 0 0; width:0; border-radius:4px; background:var(--tf-grad); background-size:var(--tf-segs-w, 100%) 100%; transition:width .35s ease;}
.tf-seg.is-cur{height:10px; background:rgba(124,111,224,.16); box-shadow:0 0 14px 1px rgba(124,111,224,.45);}
.tf-seg.is-done > i{width:100%!important;}
.tf-progress{margin:0 0 22px;}
.tf-progress-label{font-size:.78rem; color:var(--tf-muted); margin-top:8px; text-align:right; font-family:'Space Grotesk',sans-serif;}

/* ---------- Carte de verre (commune) ---------- */
body.tf .module-card,
body.tf #panel-question.active,
body.tf .tf-break-card{
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1.5px solid rgba(124,111,224,.45);
  border-color:color-mix(in srgb, var(--tf-card-accent, var(--tf-accent)) 55%, transparent);
  box-shadow:0 0 0 4px rgba(124,111,224,.06), 0 0 40px rgba(124,111,224,.18), 0 24px 60px rgba(13,19,48,.08);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--tf-card-accent, var(--tf-accent)) 8%, transparent),
             0 0 40px color-mix(in srgb, var(--tf-card-accent, var(--tf-accent)) 20%, transparent),
             0 24px 60px rgba(13,19,48,.08);
  border-radius:28px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.tf .module-card, body.tf #panel-question.active, body.tf .tf-break-card{background:#fff;}
}

/* ---------- Boutons ronds / choix (commun) ---------- */
body.tf .likert-btn{
  border-radius:50%; border:2px solid rgba(11,127,160,.35); background:rgba(255,255,255,.8);
  color:var(--tf-ink); font-weight:600; transition:border-color .15s, box-shadow .15s, background .15s;
}
body.tf .likert-btn:hover{border-color:var(--tf-cyan-ink); color:var(--tf-ink);}
body.tf .likert-btn.selected{
  background:#E6FBFF; border-color:var(--tf-cyan-ink); color:var(--tf-ink);
  box-shadow:0 0 0 3px rgba(91,231,255,.35), 0 0 22px var(--tf-cyan);
}
body.tf .scenario-choice,
body.tf .practical-toggle{
  border-radius:16px; border:1.5px solid rgba(11,127,160,.35); background:rgba(255,255,255,.75); color:var(--tf-ink);
}
body.tf .scenario-choice:hover,
body.tf .practical-toggle:hover{border-color:var(--tf-cyan-ink); color:var(--tf-ink);}
body.tf .scenario-choice.selected,
body.tf .practical-toggle.selected{
  background:#E6FBFF; border-color:var(--tf-cyan-ink); color:var(--tf-ink);
  box-shadow:0 0 0 3px rgba(91,231,255,.3), 0 0 20px rgba(91,231,255,.7);
}
body.tf :is(.likert-btn, .scenario-choice, .practical-toggle, .btn, .tf-btn, a):focus-visible{
  outline:3px solid var(--tf-ink); outline-offset:3px;
}

/* ---------- Questionnaire (RIASEC) ---------- */
/* La couleur par dimension (DIM_ACCENT, posée en ligne) est neutralisée :
   un seul ton bleu-mauve, jamais l'ambre du bloc Entreprenant. */
body.tf #panel-question{--q-accent:#6A5CD6!important; --q-accent-soft:#C7C0F2!important;}
body.tf .q-illustration{background:linear-gradient(135deg, #AFC2F2, #7C6FE0)!important;}
body.tf #panel-question.active{
  --tf-card-accent:#7C6FE0;
  position:relative; padding:44px 48px; margin-top:4vh;
}
body.tf .q-eyebrow{color:var(--tf-ink-soft); font-family:'Space Grotesk',sans-serif; letter-spacing:.24em;}
body.tf .q-text{font-family:'Inter',sans-serif; font-weight:600; color:var(--tf-ink); letter-spacing:-.01em;}
body.tf #panel-question .likert-row{justify-content:flex-start; gap:18px;}
body.tf #panel-question .likert-btn{flex:0 0 60px; width:60px; height:60px; padding:0; gap:0;}
body.tf #panel-question .likert-dot{display:none;}
body.tf #panel-question .likert-num{font-family:'Inter',sans-serif; font-size:1.1rem; font-weight:600;}
body.tf #panel-question .scale-labels{max-width:372px; color:var(--tf-muted);}
body.tf .btn-text{color:var(--tf-ink-soft);}

/* Mascotte qui pointe la carte + bulle : seulement s'il y a la place à droite
   de la carte. En dessous, masquée : elle ne doit jamais couvrir un bouton. */
.tf-masc{display:none;}
.tf-masc[hidden]{display:none!important;}
@keyframes tfPop{from{opacity:0; transform:translateY(18px) scale(.94);} to{opacity:1; transform:none;}}
.tf-masc.is-in{animation:tfPop .45s cubic-bezier(.2,.8,.3,1.2) both;}
@media (min-width:1180px){
  .tf-masc{display:block; position:absolute; right:-250px; bottom:0; width:240px; pointer-events:none;}
  .tf-masc img{display:block; width:auto; max-width:100%; height:auto; max-height:320px; filter:drop-shadow(0 12px 18px rgba(13,19,48,.18));}
  .tf-masc--top{bottom:auto; top:24px;}
  .tf-bulle{
    position:absolute; left:-10px; bottom:calc(100% + 6px); max-width:230px;
    background:#fff; border:1.5px solid var(--tf-cyan-ink);
    box-shadow:0 0 18px rgba(91,231,255,.45), 0 8px 20px rgba(13,19,48,.08);
    padding:9px 14px; border-radius:18px 18px 18px 4px;
    font:600 .86rem/1.35 'Inter',sans-serif; color:var(--tf-ink);
  }
  .tf-bulle::after{content:""; position:absolute; left:18px; bottom:-9px; border-style:solid; border-width:9px 7px 0 7px; border-color:var(--tf-cyan-ink) transparent transparent transparent;}
  /* L'illustration SVG d'origine fait doublon avec la mascotte en grand écran. */
  body.tf .q-illustration{display:none;}
}

/* ---------- Écran entre les blocs RIASEC ---------- */
.tf-break.active{display:block;}
.tf-break-card{
  --tf-card-accent:#7C6FE0;
  position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:12px; align-items:center;
  padding:44px 48px; margin-top:4vh; overflow:hidden;
}
.tf-break-ok{display:flex; align-items:center; gap:10px; font:700 .78rem 'Space Grotesk',sans-serif; letter-spacing:.2em; color:var(--tf-ink-soft); text-transform:uppercase;}
.tf-break-ok b{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--tf-grad-btn); color:#fff; font-size:.8rem; box-shadow:0 0 12px rgba(124,111,224,.6);}
.tf-break h2{font-family:'Inter',sans-serif; font-weight:700; font-size:clamp(1.6rem,3.6vw,2.3rem); line-height:1.15; margin:16px 0 12px; color:var(--tf-ink);}
.tf-break h2 span{color:#5A4FC4;}
.tf-break p{color:var(--tf-ink-soft); max-width:420px;}
.tf-chips{display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 28px; list-style:none; padding:0;}
.tf-chips li{padding:7px 12px; border-radius:12px; font:700 .8rem 'Space Grotesk',sans-serif; border:1.5px solid rgba(106,92,214,.45); color:var(--tf-ink); background:#fff;}
.tf-chips li.is-done{background:var(--tf-grad-btn); border-color:#6A5CD6; color:#fff;}
.tf-chips li.is-next{border-color:#6A5CD6; box-shadow:0 0 14px rgba(124,111,224,.6);}
.tf-btn{
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  padding:13px 26px; border-radius:999px; background:var(--tf-grad-btn); color:#fff;
  font:600 .92rem 'Inter',sans-serif; box-shadow:0 6px 20px rgba(106,92,214,.35);
}
/* Boutons d'action existants (Commencer, Voir mes résultats, Continuer…) */
body.tf .btn-dawn, body.tf #dreamSaveBtnQ{background:var(--tf-grad-btn)!important; color:#fff!important; box-shadow:0 6px 20px rgba(106,92,214,.3);}
body.tf .btn-dawn:hover{box-shadow:0 8px 24px rgba(106,92,214,.4);}
.tf-btn:hover{transform:translateY(-1px);}
.tf-link{display:inline-block; margin-left:14px; background:none; border:0; color:var(--tf-ink-soft); font:500 .86rem 'Inter',sans-serif; cursor:pointer; text-decoration:underline; padding:10px 4px;}
.tf-break-img{justify-self:center; width:100%; max-width:320px;}
.tf-break-img img{display:block; width:100%; height:auto;}
@media (max-width:760px){
  body.tf #panel-question.active{padding:28px 22px;}
  body.tf #panel-question .likert-row{gap:10px;}
  body.tf #panel-question .likert-btn{flex-basis:50px; width:50px; height:50px;}
  body.tf #panel-question .scale-labels{max-width:290px;}
  .tf-break-card{grid-template-columns:1fr; padding:28px 22px;}
  .tf-break-img{order:-1; max-width:170px;}
  .tf-link{margin:8px 0 0; display:block;}
}

/* ---------- Tests complémentaires (pages en liste) ---------- */
body.tf .page-head{background:transparent; color:var(--tf-ink); padding:40px 0 56px;}
body.tf .page-head h1{color:var(--tf-ink); font-family:'Inter',sans-serif; font-weight:700;}
body.tf .page-head p{color:var(--tf-ink-soft);}
body.tf .page-head .eyebrow{color:var(--tf-accent-ink);}
body.tf .module-card{position:relative; padding:34px;}
body.tf .module-head h2{font-family:'Inter',sans-serif; font-weight:700;}
body.tf .module-instr{background:rgba(255,255,255,.7); border:1px solid rgba(13,19,48,.08);}
body.tf .state-msg{background:rgba(255,255,255,.75); border-radius:20px;}
body.tf .quiz-item{padding:14px 0; border-bottom:1px solid rgba(13,19,48,.06);}
body.tf .quiz-item p{font-weight:600; font-size:.98rem;}
body.tf .likert-row .likert-btn{flex:0 0 44px; width:44px; height:44px; padding:0; display:inline-grid; place-items:center; font-size:.92rem;}
body.tf .module-card .likert-row{gap:8px; flex-wrap:wrap;}
body.tf .likert-scale-note{color:var(--tf-muted); max-width:400px;}
body.tf .dim-bar-track{background:rgba(13,19,48,.07);}
body.tf .dim-bar-fill{background:var(--tf-grad);}
body.tf footer{background:transparent; color:var(--tf-muted); border-top:1px solid rgba(13,19,48,.08);}
@media (min-width:1180px){ body.tf .module-card .tf-masc{right:-262px; top:70px; bottom:auto;} }

@media (prefers-reduced-motion:reduce){
  body.tf *, body.tf *::before, body.tf *::after{transition:none!important; animation:none!important;}
  .tf-btn:hover{transform:none;}
}
.tf-break h2:focus{outline:none;}
@media (max-width:520px){
  body.tf .module-card{padding:24px 20px;}
  body.tf .module-card .likert-row{gap:6px; flex-wrap:nowrap;}
  body.tf .likert-row .likert-btn{flex:0 0 36px; width:36px; height:36px; font-size:.86rem;}
}