/* Structure commune au questionnaire et à l'espace RH.
 * Toutes les valeurs de marque viennent de marque.css. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-texte);
  font-size: 16.5px;
  line-height: 1.6;
  padding-inline: 20px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 400; /* un serif de titrage se passe de gras */
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.18;
}

/* Les écarts d'échelle sont volontairement grands : c'est eux qui disent où
 * regarder. Une page où tout fait la même taille n'a pas de point d'entrée. */
h1 { font-size: 42px; }
h2 { font-size: 27px; }
h3 {
  font-family: var(--font-texte);
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--interlettre-capitales); text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 560px) {
  body { font-size: 16px; padding-inline: 18px; }
  h1 { font-size: 31px; }
  h2 { font-size: 22px; }
}

p { margin: 0; }
a { color: var(--accent-fort); text-underline-offset: 3px; }
strong { font-weight: 700; color: var(--ink); }
button { font-family: inherit; }
::selection { background: var(--accent-soft); }

.num { font-variant-numeric: tabular-nums; }

.shell { max-width: 660px; margin: 0 auto; padding-block: 44px 72px; }
.shell.wide { max-width: 1020px; }

/* --- Libellés et intertitres --------------------------------------------- */

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--interlettre-capitales);
  text-transform: uppercase;
  color: var(--accent-fort);
  margin-bottom: 16px;
}

/* Le chapô est du texte à lire, pas une mention : il reste proche de l'encre
 * principale et au-dessus de la taille courante. */
.lede {
  color: var(--ink-muted);
  font-size: 17px; line-height: 1.6;
  margin-top: 18px;
  max-width: 56ch; /* une ligne trop longue se lit mal */
}

.hint { font-size: 13px; color: var(--ink-faint); margin-top: 8px; line-height: 1.55; }

/* --- En-tête de marque ---------------------------------------------------- */

.brandbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 40px;
  border-bottom: var(--trait);
}
/* Le logo officiel porte déjà le nom : pas de texte redondant à côté. */
.brand { display: flex; align-items: center; gap: 16px; }
.brand-logo { display: block; height: 30px; width: auto; flex: none; }
.rh-link {
  font-size: 10px; font-weight: 600; color: var(--ink-faint);
  letter-spacing: var(--interlettre-capitales); text-transform: uppercase;
  text-decoration: none; padding: 7px 14px;
  border: var(--trait); border-radius: var(--radius-s);
  transition: color .15s ease, border-color .15s ease;
}
.rh-link:hover { color: var(--accent-fort); border-color: var(--accent); }
.rh-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.brand-sub {
  font-size: 11px; font-weight: 600; color: var(--ink-faint);
  letter-spacing: var(--interlettre-capitales); text-transform: uppercase;
  padding-left: 16px; border-left: var(--trait);
}
@media (max-width: 520px) {
  .brand { gap: 12px; }
  .brand-logo { height: 24px; }
  .brand-sub { font-size: 9.5px; padding-left: 12px; }
}

/* --- Cartes ---------------------------------------------------------------
 * Un filet, pas une ombre. L'ombre portée est la marque des maquettes
 * génériques ; le filet est celle de l'imprimé. */

.card {
  background: var(--surface);
  border: var(--trait);
  border-radius: var(--radius-l);
  padding: 44px;
}
@media (max-width: 560px) { .card { padding: 26px 22px; } }

/* --- Progression ---------------------------------------------------------- */

.progress-wrap { margin-bottom: 26px; }
.progress-track { height: 3px; background: var(--border); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); transition: width .4s ease; }
.progress-label {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: var(--interlettre-capitales);
  text-transform: uppercase; color: var(--ink-muted);
}

/* --- Chronomètre ----------------------------------------------------------
 * Discret par principe : un compteur voyant installe une pression que le
 * questionnaire ne cherche pas. Il ne se signale qu'en approchant de zéro. */

.chrono {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px; padding-bottom: 14px;
  border-bottom: var(--trait);
}
.chrono-libelle {
  flex: none; font-size: 10.5px; letter-spacing: var(--interlettre-capitales);
  text-transform: uppercase; color: var(--ink-faint);
}
.chrono-jauge { flex: 1; height: 3px; background: var(--border); overflow: hidden; }
.chrono-fill {
  height: 100%; background: var(--accent);
  transition: width 1s linear;
}
.chrono-temps {
  min-width: 46px; text-align: right;
  font-family: var(--font-chiffres); font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--ink-muted);
}
/* La barre reste au vermillon de la marque sur toute sa descente : la faire
 * virer à l'orange puis au rouge depuis un vermillon donnait une escalade
 * illisible, les trois teintes étant voisines. L'alerte passe donc par le
 * compteur chiffré, qui lui change franchement.
 *
 * À l'échéance la barre est à zéro, donc invisible : sa couleur n'y joue
 * aucun rôle. */
.chrono.bientot .chrono-temps { color: var(--crit); font-weight: 700; }
.chrono.echu .chrono-temps { color: var(--crit); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .chrono-fill, .progress-fill { transition: none; }
}

.avis-echu {
  margin-top: 22px; padding: 14px 0 0;
  border-top: 1px solid var(--crit);
  color: var(--crit); font-size: 13.5px;
}

/* --- Formulaire ------------------------------------------------------------ */

.field { margin-bottom: 22px; }
.field label {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: var(--interlettre-capitales);
  text-transform: uppercase; color: var(--ink);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"] {
  width: 100%; padding: 12px 0;
  border: none; border-bottom: var(--trait-fort);
  border-radius: 0; background: transparent;
  color: var(--ink); font-size: 16px; font-family: inherit;
}
.field input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.field input::placeholder { color: var(--ink-faint); }

.err-msg { color: var(--crit); font-size: 13px; margin-top: 10px; }

/* --- Consentements --------------------------------------------------------- */

.consentement {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 0; border-top: var(--trait);
  cursor: pointer;
}
.consentement:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.consentement input {
  margin-top: 3px; flex: none; width: 15px; height: 15px;
  accent-color: var(--accent);
}
.consentement-texte { font-size: 14px; line-height: 1.55; }
.consentement-texte .oblig {
  font-size: 10.5px; letter-spacing: var(--interlettre-capitales);
  text-transform: uppercase; color: var(--accent); margin-right: 4px;
}
.consentement-sous { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }

.bloc-rgpd {
  margin-top: 34px; padding-top: 24px;
  border-top: var(--trait);
  font-size: 13px; color: var(--ink-muted); line-height: 1.65;
}
.bloc-rgpd h3 { margin-bottom: 14px; }
.bloc-rgpd ul { margin: 0; padding-left: 16px; }
.bloc-rgpd li { margin-bottom: 7px; }
.bloc-rgpd li::marker { color: var(--ink-faint); }

/* --- Boutons ---------------------------------------------------------------
 * Angles nets, capitales interlettrées. Aucun arrondi en gélule : la pilule
 * colorée est l'autre signature des interfaces génériques. */

.btn {
  appearance: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; border: 1px solid transparent; border-radius: var(--radius-s);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: var(--interlettre-capitales); text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.btn-primary { background: var(--ink); color: #FFF; border-color: var(--ink); }
.btn-primary:hover { background: var(--accent-fort); border-color: var(--accent-fort); }
/* Désactivé mais toujours lisible : un bouton fantôme laisse le candidat
 * douter de l'endroit où cliquer une fois sa réponse donnée. */
.btn-primary:disabled {
  background: var(--surface-2); color: var(--ink-faint);
  border-color: var(--border-fort); cursor: not-allowed;
}

.btn-ghost { background: transparent; color: var(--ink-muted); border-color: var(--border-fort); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }

.btn-block { width: 100%; }
.btn-row { display: flex; gap: 12px; margin-top: 34px; align-items: center; flex-wrap: wrap; }
.btn-row .btn-primary { flex: 1; }
.btn-row .btn-ghost { flex: none; }

/* --- Questions -------------------------------------------------------------- */

/* L'énoncé est ce que le candidat doit lire en premier : il domine l'écran
 * sans partage. Tout le reste est en retrait par rapport à lui. */
.question-texte {
  font-family: var(--font-titre);
  font-size: 32px; line-height: 1.26; letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 40px;
}
@media (max-width: 560px) { .question-texte { font-size: 24px; margin-bottom: 30px; } }

.likert-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.likert-opt {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 8px 20px;
  border: 1px solid var(--border); border-left-width: 0;
  background: var(--surface);
  transition: background-color .15s ease, border-color .15s ease;
}
.likert-opt:first-child { border-left-width: 1px; }
.likert-opt:hover { background: var(--surface-2); }
.likert-opt input { position: absolute; opacity: 0; pointer-events: none; }
.likert-dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--border-fort); transition: all .15s ease;
}
.likert-caption {
  font-size: 11.5px; text-align: center; line-height: 1.35;
  letter-spacing: .03em; color: var(--ink-muted);
}
.likert-opt.sel { background: var(--accent-soft); border-color: var(--accent); }
.likert-opt.sel + .likert-opt { border-left-color: var(--accent); }
.likert-opt.sel .likert-dot { border-color: var(--accent); background: var(--accent); }
.likert-opt.sel .likert-caption { color: var(--accent-fort); font-weight: 700; }

.likert-legend {
  display: flex; justify-content: space-between; margin-top: 16px;
  font-size: 11px; color: var(--ink-faint); font-style: italic;
}

@media (max-width: 460px) {
  .likert-scale { grid-template-columns: 1fr; }
  .likert-opt {
    flex-direction: row; justify-content: flex-start; gap: 14px;
    padding: 15px 16px; border-left-width: 1px; border-top-width: 0;
  }
  .likert-opt:first-child { border-top-width: 1px; }
  .likert-caption { text-align: left; font-size: 11.5px; }
}

.situ-title {
  font-size: 10.5px; letter-spacing: var(--interlettre-capitales);
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.situ-prompt {
  font-family: var(--font-titre); font-size: 24px; line-height: 1.36;
  margin-bottom: 32px; color: var(--ink);
}
@media (max-width: 560px) { .situ-prompt { font-size: 19px; } }

.situ-opt {
  position: relative; cursor: pointer;
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 0; border-top: var(--trait);
  transition: color .15s ease;
}
.situ-opt:last-of-type { border-bottom: var(--trait); }
.situ-opt input { position: absolute; opacity: 0; pointer-events: none; }
.situ-letter {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border-fort);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titre); font-size: 12px; color: var(--ink-muted);
  transition: all .15s ease;
}
.situ-opt-text { font-size: 15.5px; line-height: 1.55; padding-top: 2px; color: var(--ink-muted); }
.situ-opt:hover .situ-letter { border-color: var(--ink); color: var(--ink); }
.situ-opt.sel .situ-letter {
  border-color: var(--accent); background: var(--accent); color: var(--accent-ink);
}
.situ-opt.sel .situ-opt-text { color: var(--ink); font-weight: 600; }

.likert-opt:has(input:focus-visible),
.situ-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.questions-figees .likert-opt,
.questions-figees .situ-opt { cursor: not-allowed; opacity: .4; pointer-events: none; }
.questions-figees .likert-opt.sel,
.questions-figees .situ-opt.sel { opacity: 1; }

/* --- Écran d'avertissement --------------------------------------------------- */

.avert-liste { list-style: none; padding: 0; margin: 36px 0 0; }
.avert-liste li {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 22px 0; border-top: var(--trait);
}
.avert-liste li:last-child { border-bottom: var(--trait); }
.avert-puce {
  flex: none; font-family: var(--font-titre); font-size: 22px;
  color: var(--accent); line-height: 1; padding-top: 2px; min-width: 24px;
}
.avert-liste strong { font-weight: 600; font-size: 15px; }

/* --- Fin ---------------------------------------------------------------------- */

.end-icon {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}

/* --- Divers -------------------------------------------------------------------- */

.chargement {
  padding: 90px 20px; text-align: center; color: var(--ink-faint);
  font-size: 11px; letter-spacing: var(--interlettre-capitales); text-transform: uppercase;
}

.pied {
  margin-top: 36px; padding-top: 22px; border-top: var(--trait);
  text-align: center; font-size: 11.5px; color: var(--ink-faint);
}
.pied a { color: var(--ink-muted); }

.copied-msg { font-size: 12px; color: var(--good); }

[hidden] { display: none !important; }

.visuellement-masque {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Aménagement des conditions du test -----------------------------------
 * Placé sous le chapô de l'accueil, pas dans le bloc RGPD : un candidat qui en
 * a besoin doit le voir avant de commencer, sans avoir à le chercher. */

.amenagement {
  margin-top: 22px; padding: 16px 18px;
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  font-size: 14px; line-height: 1.6; color: var(--ink-muted);
}
.amenagement strong { color: var(--ink); }
.avert-liste + .hint + .amenagement { margin-top: 18px; }

/* --- Mentions légales ----------------------------------------------------- */

.page-legale .sommaire {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 26px 0 8px; padding: 14px 0; border-top: var(--trait); border-bottom: var(--trait);
  font-size: 11px; font-weight: 700; letter-spacing: var(--interlettre-capitales); text-transform: uppercase;
}
.page-legale .sommaire a { color: var(--ink-muted); text-decoration: none; }
.page-legale .sommaire a:hover { color: var(--accent-fort); }
.page-legale section { margin-top: 40px; scroll-margin-top: 20px; }
.page-legale h2 { font-size: 24px; margin-bottom: 14px; }
.page-legale h3 { margin: 26px 0 8px; }
.page-legale p, .page-legale li { font-size: 15px; line-height: 1.65; color: var(--ink-muted); }
.page-legale p + p { margin-top: 10px; }
.page-legale ul { padding-left: 18px; margin: 0; }
.page-legale li + li { margin-top: 6px; }
.page-legale strong { color: var(--ink); }

.fiche-legale { display: grid; grid-template-columns: 200px 1fr; gap: 0; margin: 0; }
.fiche-legale dt, .fiche-legale dd { padding: 14px 0; border-top: var(--trait); margin: 0; }
.fiche-legale dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: var(--interlettre-capitales);
  text-transform: uppercase; color: var(--ink-faint); padding-top: 17px;
}
.fiche-legale dd { font-size: 14.5px; line-height: 1.6; color: var(--ink); }
@media (max-width: 560px) {
  .fiche-legale { grid-template-columns: 1fr; }
  .fiche-legale dd { border-top: none; padding-top: 0; }
}

/* Champ non renseigné : visible pour qui relit la page avant la mise en ligne. */
.a-completer {
  background: var(--warn-soft); color: var(--warn);
  padding: 1px 5px; border-radius: var(--radius-s); font-weight: 600;
}