:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18212f;background:#f3f5f7;font-synthesis:none;--ink:#172231;--muted:#627080;--line:#dbe1e7;--panel:#fff;--accent:#334f60}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0,#fff 0,transparent 34%),linear-gradient(145deg,#f0f4f6,#f8f9fa 55%,#eef2f4);color:var(--ink)}.hidden{display:none!important}.candidate-shell{--tp-shell-pad:20px;width:min(100%,1440px);margin:auto;padding:32px var(--tp-shell-pad) 56px;min-height:100vh;display:grid;align-items:start}.candidate-shell>[data-screen]{width:100%}
.panel,.test-screen{background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 18px 55px rgba(26,36,48,.09)}.panel{max-width:820px;margin:0 auto}.test-screen{max-width:960px;margin:0 auto}
.brand{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#687383;margin-bottom:32px}
h1{font-size:clamp(1.8rem,6vw,3rem);line-height:1.05;margin:.35em 0}h2{font-size:clamp(1.35rem,5vw,2rem);line-height:1.2;margin:0 0 24px}.lead{font-size:1.1rem;color:#5b6675}
label{display:grid;gap:7px;margin:15px 0;font-weight:650}input{min-height:50px;border:1px solid #cbd4dc;border-radius:12px;padding:0 14px;font:inherit;background:#fff;outline:none}input:focus{border-color:#607588;box-shadow:0 0 0 4px rgba(80,103,118,.12)}
button{font:inherit}.primary,.secondary,.back-button{min-height:48px;border-radius:12px;padding:11px 20px;border:0;font-weight:750;cursor:pointer}.primary{background:linear-gradient(135deg,#172231,#30485b);color:white;box-shadow:0 8px 20px rgba(23,34,49,.14)}.secondary{background:#eef1f4;color:#24303d;margin-left:8px}.primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.primary:focus-visible,.secondary:focus-visible,.back-button:focus-visible,.choice-button:focus-visible,.scale-button:focus-visible,.word-button:focus-visible,.allocation-controls button:focus-visible{outline:3px solid rgba(76,105,127,.28);outline-offset:2px}
.error{color:#a03333;min-height:1.3em}.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef1f4;font-size:.78rem;font-weight:850;letter-spacing:.08em}.neutral-illustration{height:120px;display:flex;align-items:center;justify-content:center;gap:10px}.neutral-illustration i{display:block;border-radius:50%;border:2px solid #a9b3bf}.neutral-illustration i:nth-child(1){width:56px;height:56px}.neutral-illustration i:nth-child(2){width:78px;height:78px}.neutral-illustration i:nth-child(3){width:42px;height:42px}
.steps{list-style:none;padding:0;display:grid;gap:12px}.steps li{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start}.steps b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#eef1f4}.chrono-hint{padding:12px 14px;border-left:3px solid #8a97a5;background:#f7f8f9}
.test-header{display:flex;justify-content:space-between;gap:16px;align-items:center;font-weight:800}.test-header small{display:block;color:#77818d;font-weight:500;margin-top:3px}.progress{height:7px;background:#e8ebef;border-radius:9px;overflow:hidden;margin:16px 0 30px}.progress i{display:block;height:100%;width:0;background:#4d637b;transition:width .2s}
.question-card{max-width:720px;margin:auto;text-align:center}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.choice-button{min-height:108px;border:1px solid #d2d8df;background:linear-gradient(180deg,#fff,#fbfcfd);border-radius:18px;padding:20px;font-size:clamp(1.12rem,4.5vw,1.45rem);font-weight:760;box-shadow:0 5px 15px rgba(33,48,62,.045)}.choice-button:hover,.choice-button:focus{border-color:#728197;background:#f7fafb;transform:translateY(-1px)}
.scale-labels{display:flex;justify-content:space-between;gap:10px;color:#66717f;font-size:.85rem;text-align:left;margin-bottom:12px}.scale-labels span:last-child{text-align:right}.scale-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.scale-button{min-height:58px;border:1px solid #cfd6df;background:#fff;border-radius:14px;font-size:1.15rem;font-weight:800}
.back-button{margin-top:18px;background:transparent;color:#5b6675}.word-section h2{max-width:700px}.selection-count{position:sticky;top:0;background:#fff;padding:10px 0;z-index:2}.word-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 24px}.word-button{min-height:48px;border:1px solid #d7dce3;border-radius:11px;background:#fff;padding:8px}.word-button.selected{background:#26394d;color:#fff;border-color:#26394d}
.remaining{font-size:1.1rem}.zero-hint{background:#f5f7f8;padding:11px 13px;border-radius:10px}.maslow-grid{display:grid;gap:9px;margin:18px 0}.allocation-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid #e0e4e9;border-radius:12px;padding:12px}.allocation-controls{display:grid;grid-template-columns:42px 36px 42px;align-items:center;text-align:center}.allocation-controls button{width:40px;height:40px;border:1px solid #cdd4dc;background:#fff;border-radius:9px;font-size:1.25rem}.allocation-controls output{font-weight:850}.success-mark{font-size:3rem}
@media(max-width:600px){.candidate-shell{--tp-shell-pad:10px;padding:12px var(--tp-shell-pad) 32px;min-height:100svh}.panel,.test-screen{padding:20px 15px;border-radius:16px;box-shadow:0 10px 32px rgba(26,36,48,.07)}.choice-grid{grid-template-columns:1fr}.choice-button{min-height:88px}.word-grid{grid-template-columns:repeat(2,1fr)}.allocation-row{grid-template-columns:1fr}.allocation-controls{justify-content:end}.scale-labels{font-size:.72rem}}

/* Écran d'introduction — intégration du kit visuel des tests 1 et 2. */
:root{
  --tp-surface:#fff;
  --tp-ink:#14233b;
  --tp-text:#3e4c5e;
  --tp-muted:#5f6d7e;
  --tp-radius-lg:24px;
  --tp-radius-md:14px;
  --tp-radius-pill:999px;
  --tp-shadow-card:0 1px 2px rgba(20,35,59,.06),0 12px 32px -12px rgba(20,35,59,.18);
  --tp-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tp-accent:#1e7a52;
  --tp-accent-hover:#17623f;
  --tp-accent-ink:#fff;
  --tp-accent-soft:#e4f2ea;
  --tp-accent-soft-ink:#145a3b;
  --tp-step-bg:#1e7a52;
  --tp-step-ink:#fff;
  --tp-focus:#1e7a52;
}
[data-screen="intro"][data-visual="autodiagnostic-personnalite"]{
  --tp-art:url("assets/intro-autodiagnostic.svg");
}
[data-screen="intro"][data-visual="priorisation-cerebrale"]{
  --tp-accent:#6b4e9b;
  --tp-accent-hover:#5a3f85;
  --tp-accent-ink:#fff;
  --tp-accent-soft:#ede8f4;
  --tp-accent-soft-ink:#4a3b66;
  --tp-step-bg:#6b4e9b;
  --tp-step-ink:#fff;
  --tp-focus:#6b4e9b;
  --tp-art:url("assets/intro-priorisation.svg");
}
[data-screen="intro"][data-visual="pyramide-maslow"]{
  --tp-accent:#a0603a;
  --tp-accent-hover:#8a5030;
  --tp-accent-ink:#fff;
  --tp-accent-soft:#f6ece4;
  --tp-accent-soft-ink:#7a4526;
  --tp-step-bg:#a0603a;
  --tp-step-ink:#fff;
  --tp-focus:#a0603a;
  /* Image de référence réutilisée telle quelle, sans retouche ni redessin. */
  --tp-art:url("assets/maslow_pyramid_original.png");
}
[data-screen="intro"][data-visual="drivers-taibi-kahler"]{
  --tp-accent:#2f5d8c;
  --tp-accent-hover:#274e76;
  --tp-accent-ink:#fff;
  --tp-accent-soft:#e7eef6;
  --tp-accent-soft-ink:#1f4468;
  --tp-step-bg:#2f5d8c;
  --tp-step-ink:#fff;
  --tp-focus:#2f5d8c;
  --tp-art:url("assets/intro-drivers.svg");
}
[data-screen="intro"][data-visual="riasec-holland"]{
  --tp-accent:#f5b82e;
  --tp-accent-hover:#e9a812;
  --tp-accent-ink:#1f1606;
  --tp-accent-soft:#fdf0d5;
  --tp-accent-soft-ink:#a4500b;
  --tp-step-bg:#fce3a2;
  --tp-step-ink:#5a3a00;
  --tp-focus:#b5700a;
  --tp-art:url("assets/intro-riasec-compact.svg");
}
.candidate-shell>[data-screen="intro"]{
  width:calc(100% + (var(--tp-shell-pad, 20px) * 2));
  max-width:none;
  justify-self:stretch;
  margin-inline:calc(var(--tp-shell-pad, 20px) * -1);
  padding:16px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--tp-text);
  font-family:var(--tp-font);
}
[data-screen="intro"] .intro-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"content" "hint" "cta";
  row-gap:18px;
  width:100%;
  max-width:820px;
  margin:0 auto;
  padding:58px 20px 24px;
  border-radius:var(--tp-radius-lg);
  background:var(--tp-surface);
  box-shadow:var(--tp-shadow-card);
}
[data-screen="intro"][data-visual="autodiagnostic-personnalite"] .intro-card,
[data-screen="intro"][data-visual="riasec-holland"] .intro-card,
[data-screen="intro"][data-visual="drivers-taibi-kahler"] .intro-card,
[data-screen="intro"][data-visual="priorisation-cerebrale"] .intro-card,
[data-screen="intro"][data-visual="pyramide-maslow"] .intro-card{
  grid-template-areas:"art" "content" "hint" "cta";
  max-width:1260px;
  padding-top:20px;
}
[data-screen="intro"] .intro-art{
  display:none;
  grid-area:art;
  height:200px;
  margin-top:30px;
  background:var(--tp-art,none) center/contain no-repeat;
}
[data-screen="intro"] .neutral-illustration{display:none}
[data-screen="intro"][data-visual="autodiagnostic-personnalite"] .intro-art,
[data-screen="intro"][data-visual="riasec-holland"] .intro-art,
[data-screen="intro"][data-visual="drivers-taibi-kahler"] .intro-art,
[data-screen="intro"][data-visual="priorisation-cerebrale"] .intro-art,
[data-screen="intro"][data-visual="pyramide-maslow"] .intro-art{display:block}
[data-screen="intro"] #testBadge{
  position:absolute;
  top:18px;
  left:20px;
  z-index:1;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 14px;
  border-radius:var(--tp-radius-pill);
  background:var(--tp-accent-soft);
  color:var(--tp-accent-soft-ink);
  font-size:.8125rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
[data-screen="intro"] .intro-content{grid-area:content;min-width:0}
[data-screen="intro"] #testTitle{
  margin:0 0 8px;
  color:var(--tp-ink);
  font-size:clamp(1.55rem,1.05rem + 2.2vw,2.5rem);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
  hyphens:auto;
}
[data-screen="intro"] #testSubtitle{
  margin:0 0 20px;
  color:var(--tp-muted);
  font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);
  font-weight:500;
  line-height:1.45;
}
[data-screen="intro"] #testSteps{
  display:grid;
  gap:14px;
  max-width:62ch;
  margin:0;
  padding:0;
  list-style:none;
}
[data-screen="intro"] #testSteps>li{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:16px;
  align-items:start;
  min-height:36px;
  padding:0;
  color:var(--tp-text);
  font-size:1rem;
  line-height:1.5;
}
[data-screen="intro"] #testSteps>li>b{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--tp-step-bg);
  color:var(--tp-step-ink);
  font-size:1rem;
  font-weight:800;
}
[data-screen="intro"] #testSteps>li>span{padding-top:6px}
[data-screen="intro"] #chronoHint{
  grid-area:hint;
  margin:4px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--tp-muted);
  font-size:.875rem;
  line-height:1.45;
  text-align:center;
  text-wrap:balance;
}
[data-screen="intro"] #chronoHint::before{
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  margin-right:7px;
  vertical-align:-3px;
  background:currentColor;
  -webkit-mask:url("assets/icon-clock.svg") center/contain no-repeat;
  mask:url("assets/icon-clock.svg") center/contain no-repeat;
}
[data-screen="intro"] #startButton{
  grid-area:cta;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
  min-height:56px;
  padding:0 24px;
  border:0;
  border-radius:var(--tp-radius-md);
  background:var(--tp-accent);
  color:var(--tp-accent-ink);
  font:700 1.125rem/1 var(--tp-font);
  cursor:pointer;
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--tp-accent) 70%,transparent);
  transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
[data-screen="intro"] #startButton::after{
  content:"";
  width:22px;
  height:22px;
  background:currentColor;
  -webkit-mask:url("assets/icon-arrow.svg") center/contain no-repeat;
  mask:url("assets/icon-arrow.svg") center/contain no-repeat;
  transition:transform .15s ease;
}
[data-screen="intro"] #startButton:hover:not(:disabled){background:var(--tp-accent-hover)}
[data-screen="intro"] #startButton:hover:not(:disabled)::after{transform:translateX(3px)}
[data-screen="intro"] #startButton:active:not(:disabled){transform:translateY(1px)}
[data-screen="intro"] #startButton:focus-visible{outline:3px solid var(--tp-focus);outline-offset:3px}
[data-screen="intro"] #startButton:disabled{background:#c9d2db;color:#5f6d7e;box-shadow:none;cursor:not-allowed}
@media(prefers-reduced-motion:no-preference){
  [data-screen="intro"]:not(.hidden) .intro-art{animation:tp-art-in .45s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes tp-art-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media(min-width:600px){
  .candidate-shell>[data-screen="intro"]{padding:24px}
  [data-screen="intro"] .intro-card{padding:64px 32px 32px;row-gap:22px}
  [data-screen="intro"][data-visual="autodiagnostic-personnalite"] .intro-card,
  [data-screen="intro"][data-visual="riasec-holland"] .intro-card,
  [data-screen="intro"][data-visual="drivers-taibi-kahler"] .intro-card,
  [data-screen="intro"][data-visual="priorisation-cerebrale"] .intro-card,
  [data-screen="intro"][data-visual="pyramide-maslow"] .intro-card{padding-top:28px}
  [data-screen="intro"] .intro-art{height:260px}
  [data-screen="intro"] #testBadge{top:24px;left:28px}
  [data-screen="intro"][data-visual="riasec-holland"]{--tp-art:url("assets/intro-riasec.svg")}
}
@media(min-width:850px){
  .candidate-shell>[data-screen="intro"]{padding:40px 32px}
  [data-screen="intro"] .intro-card{padding:72px 40px 36px;row-gap:24px}
  [data-screen="intro"][data-visual="autodiagnostic-personnalite"] .intro-card,
  [data-screen="intro"][data-visual="riasec-holland"] .intro-card,
  [data-screen="intro"][data-visual="drivers-taibi-kahler"] .intro-card,
  [data-screen="intro"][data-visual="priorisation-cerebrale"] .intro-card{
    grid-template-columns:minmax(0,4.4fr) minmax(0,7fr);
    grid-template-areas:"art content" "hint hint" "cta cta";
    column-gap:48px;
    padding:36px 40px;
    align-items:center;
  }
  [data-screen="intro"][data-visual="autodiagnostic-personnalite"] .intro-art,
  [data-screen="intro"][data-visual="riasec-holland"] .intro-art,
  [data-screen="intro"][data-visual="drivers-taibi-kahler"] .intro-art,
  [data-screen="intro"][data-visual="priorisation-cerebrale"] .intro-art{
    height:auto;
    min-height:360px;
    align-self:stretch;
    margin-top:36px;
  }
  [data-screen="intro"] #testBadge{top:32px;left:40px}
  [data-screen="intro"] #testSteps>li{font-size:1.0625rem}
}

/* L'image Maslow est un paysage 1174x774 chargé de texte : la comprimer dans
   une colonne étroite la rendrait illisible. Elle occupe donc toute la largeur
   de la carte, à toutes les tailles. */
[data-screen="intro"][data-visual="pyramide-maslow"] .intro-art{
  height:clamp(180px,40vw,260px);
  margin-top:24px;
}
@media(min-width:850px){
  [data-screen="intro"][data-visual="pyramide-maslow"] .intro-card{
    max-width:980px;
    padding:24px 40px 28px;
    row-gap:14px;
  }
  /* Hauteur indexée sur la fenêtre : sur un portable peu haut, l'image cède la
     place au bouton plutôt que de le repousser hors de l'écran. */
  [data-screen="intro"][data-visual="pyramide-maslow"] .intro-art{
    height:clamp(132px,26vh,320px);
    margin-top:14px;
  }
}