/* ==========================================================================
   Formulaire Qualiopi — habillage
   Aucune valeur en dur : tout vient de assets/tokens.css.

   Note de charte : dans ce parcours de saisie, le rouge ne sert qu'aux erreurs.
   La charte le prévoit pour les formulaires longs — les filets d'accent des
   titres passent donc en bleu, et le rouge reste disponible pour dire « ici ».
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Les composants posent `display: flex/grid`, qui l'emporterait sur la règle
   par défaut de [hidden]. Sans ce rappel, la logique conditionnelle masque les
   champs dans le DOM sans que rien ne disparaisse à l'écran. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--qc-font);
  font-size: var(--qc-fs-body);
  font-weight: var(--qc-fw-regular);
  line-height: var(--qc-lh-body);
  color: var(--qc-text);
  background: var(--qc-bg-alt);
  -webkit-font-smoothing: antialiased;
}

.qc-container {
  width: 100%;
  max-width: var(--qc-container);
  margin-inline: auto;
  padding-inline: var(--qc-gutter);
}

a { color: var(--qc-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--qc-link-hover); }

:focus-visible { outline: 3px solid var(--qc-navy); outline-offset: 2px; }

.qc-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.qc-skip {
  position: absolute; left: var(--qc-space-4); top: calc(-1 * var(--qc-space-8));
  z-index: 10;
  padding: var(--qc-space-2) var(--qc-space-4);
  background: var(--qc-navy); color: var(--qc-white);
  border-radius: var(--qc-radius); text-decoration: none;
  transition: top var(--qc-transition);
}
.qc-skip:focus { top: var(--qc-space-2); color: var(--qc-white); }

/* ------------------------------------------------------------------ header */

.qc-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--qc-white);
  border-bottom: var(--qc-hairline) solid var(--qc-border);
}

/* `wrap` n'est pas décoratif : en taille de texte « très grande », le bouton
   d'accessibilité déborde sinon de l'écran sur un mobile de 390 px — et c'est
   précisément le réglage des gens qui en ont besoin. */
.qc-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--qc-space-2) var(--qc-space-4);
  padding-block: var(--qc-space-3);
}

.qc-header__logo img { display: block; width: 220px; height: auto; }

.qc-tool {
  display: inline-flex; align-items: center; gap: var(--qc-space-2);
  padding: var(--qc-space-2) var(--qc-space-3);
  font-family: var(--qc-font); font-size: var(--qc-fs-sm);
  color: var(--qc-navy); background: var(--qc-white);
  border: var(--qc-border-w) solid var(--qc-navy);
  border-radius: var(--qc-radius);
  cursor: pointer;
  transition: background-color var(--qc-transition), color var(--qc-transition);
}
.qc-tool:hover, .qc-tool[aria-expanded="true"] {
  background: var(--qc-navy); color: var(--qc-white);
}

/* ----------------------------------------------------------- accessibilité */

.qc-a11y {
  display: flex; flex-wrap: wrap; gap: var(--qc-space-5);
  padding: var(--qc-space-4);
  margin-bottom: var(--qc-space-3);
  background: var(--qc-bg-alt);
  border-radius: var(--qc-radius);
}

.qc-a11y__group { border: 0; margin: 0; padding: 0; }
.qc-a11y__group legend {
  padding: 0 0 var(--qc-space-2);
  font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-medium);
  color: var(--qc-navy-deep);
}

.qc-a11y__btn {
  font-family: var(--qc-font); font-size: var(--qc-fs-sm);
  padding: var(--qc-space-1) var(--qc-space-3);
  margin-right: var(--qc-space-1);
  color: var(--qc-navy); background: var(--qc-white);
  border: var(--qc-border-w) solid var(--qc-border);
  border-radius: var(--qc-radius-pill);
  cursor: pointer;
  transition: background-color var(--qc-transition), border-color var(--qc-transition), color var(--qc-transition);
}
.qc-a11y__btn:hover { border-color: var(--qc-navy); }
.qc-a11y__btn[aria-pressed="true"] {
  background: var(--qc-navy); color: var(--qc-white); border-color: var(--qc-navy);
}

/* -------------------------------------------------------------------- main */

.qc-main { padding-block: var(--qc-space-7) var(--qc-space-8); }

.qc-intro { margin-bottom: var(--qc-space-5); }

.qc-eyebrow {
  font-size: var(--qc-fs-sm); font-style: italic; font-weight: var(--qc-fw-light);
  color: var(--qc-text-muted); margin: 0 0 var(--qc-space-1);
}

.qc-h1 {
  font-size: var(--qc-fs-h1); font-weight: var(--qc-fw-bold);
  line-height: var(--qc-lh-tight); color: var(--qc-navy-deep);
  margin: 0 0 var(--qc-space-3);
}

.qc-lede { margin: 0; max-width: 60ch; color: var(--qc-text-muted); }

/* Écart assumé à la charte, sur un seul point.
   Le registre éditorial de la charte prescrit `text-transform: capitalize`. Cette
   règle vient d'un site dont les titres de section sont des groupes nominaux
   courts. Appliquée à des phrases françaises, elle produit « Modalités De
   L'audit » ou « Envoyer Ma Demande » — une capitalisation fautive en français,
   que la charte n'a pas prévue et qu'un organisme accrédité ne peut pas afficher.
   On conserve donc ce qui fait la signature du registre — graisse 300 et
   interligne 1.4 — et on abandonne la seule transformation typographique.
   Revenir à `capitalize` ici et sur .qc-btn suffit à rétablir la règle stricte. */
.qc-h2 {
  font-size: var(--qc-fs-h2); font-weight: var(--qc-fw-light);
  line-height: var(--qc-lh-title); text-transform: none;
  color: var(--qc-navy-deep); margin: 0 0 var(--qc-space-4);
}
.qc-h2--rule-left {
  border-left: var(--qc-rule-w) solid var(--qc-navy);
  padding-left: var(--qc-space-3);
}
.qc-h2:focus-visible { outline-offset: 4px; }

.qc-subhead {
  font-size: var(--qc-fs-h4); font-weight: var(--qc-fw-bold);
  line-height: var(--qc-lh-title); color: var(--qc-navy);
  margin: 0 0 var(--qc-space-2);
}

/* ---------------------------------------------------------------- bannière */

.qc-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--qc-space-3);
  padding: var(--qc-space-3) var(--qc-space-4);
  margin-bottom: var(--qc-space-4);
  background: var(--qc-white);
  border-left: var(--qc-rule-w) solid var(--qc-navy);
  border-radius: var(--qc-radius);
  box-shadow: var(--qc-shadow-lg);
}
.qc-banner p { margin: 0; font-size: var(--qc-fs-sm); }

/* -------------------------------------------------------------- progression */

.qc-progress { margin-bottom: var(--qc-space-4); }

.qc-progress__bar {
  position: relative;
  height: var(--qc-space-1);
  background: var(--qc-grey-200);
  border-radius: var(--qc-radius-pill);
  overflow: hidden;
}
.qc-progress__bar::after {
  content: "";
  position: absolute; inset-block: 0; left: 0;
  width: var(--qc-progress, 0%);
  background: var(--qc-navy);
  transition: width var(--qc-transition);
}

.qc-stepper {
  display: flex; flex-wrap: wrap; gap: var(--qc-space-1);
  list-style: none; margin: var(--qc-space-3) 0 0; padding: 0;
  counter-reset: step;
}

.qc-step { counter-increment: step; }

.qc-step__button {
  display: inline-flex; align-items: center; gap: var(--qc-space-2);
  padding: var(--qc-space-1) var(--qc-space-3);
  font-family: var(--qc-font); font-size: var(--qc-fs-xs);
  color: var(--qc-text-muted); background: transparent;
  border: var(--qc-border-w) solid transparent;
  border-radius: var(--qc-radius-pill);
  cursor: pointer;
  transition: background-color var(--qc-transition), color var(--qc-transition), border-color var(--qc-transition);
}
.qc-step__button::before {
  content: counter(step);
  display: grid; place-items: center;
  width: var(--qc-space-4); height: var(--qc-space-4);
  font-size: var(--qc-fs-xs); font-weight: var(--qc-fw-medium);
  color: var(--qc-white); background: var(--qc-grey-200);
  border-radius: 50%;
}
.qc-step__button:disabled { cursor: default; opacity: 0.55; }
.qc-step__button:not(:disabled):hover { color: var(--qc-navy); border-color: var(--qc-border); }

.qc-step.is-done .qc-step__button { color: var(--qc-navy); }
.qc-step.is-done .qc-step__button::before { background: var(--qc-navy); }

.qc-step.is-current .qc-step__button {
  color: var(--qc-white); background: var(--qc-navy); border-color: var(--qc-navy);
  font-weight: var(--qc-fw-medium);
}
.qc-step.is-current .qc-step__button::before {
  color: var(--qc-navy); background: var(--qc-white);
}

/* ------------------------------------------------------------------ écran */

.qc-screen {
  background: var(--qc-white);
  border: var(--qc-border-w) solid var(--qc-navy);
  border-radius: var(--qc-radius);
  box-shadow: var(--qc-shadow-lg);
  padding: var(--qc-space-6);
}

.qc-screen.is-entering { animation: qc-enter 320ms ease both; }

@keyframes qc-enter {
  from { opacity: 0; transform: translateY(var(--qc-space-2)); }
  to   { opacity: 1; transform: none; }
}

.qc-screen__intro {
  margin: calc(-1 * var(--qc-space-2)) 0 var(--qc-space-5);
  max-width: 65ch; color: var(--qc-text-muted);
}

.qc-screen__nav {
  display: flex; flex-wrap: wrap; gap: var(--qc-space-3);
  justify-content: flex-end; align-items: center;
  margin-top: var(--qc-space-6);
  padding-top: var(--qc-space-4);
  border-top: var(--qc-hairline) solid var(--qc-border);
}

.qc-legend {
  margin: var(--qc-space-3) 0 0;
  font-size: var(--qc-fs-xs); font-weight: var(--qc-fw-light);
  color: var(--qc-text-muted);
}

/* ---------------------------------------------------------------- boutons */

.qc-btn {
  display: inline-flex; align-items: center; gap: var(--qc-space-2);
  padding: var(--qc-space-3) var(--qc-space-5);
  font-family: var(--qc-font); font-size: 19px; font-weight: var(--qc-fw-regular);
  line-height: 1.2; text-decoration: none; text-transform: none; /* voir .qc-h2 */
  border: var(--qc-border-w) solid transparent;
  border-radius: var(--qc-radius);
  cursor: pointer;
  transition: background-color var(--qc-transition), color var(--qc-transition), border-color var(--qc-transition);
}
.qc-btn:disabled { opacity: 0.6; cursor: default; }

.qc-btn--navy { background: var(--qc-navy); color: var(--qc-white); border-color: var(--qc-navy); }
.qc-btn--navy:not(:disabled):hover, .qc-btn--navy:focus-visible {
  background: var(--qc-white); color: var(--qc-navy);
}

/* Or : la conversion. Un seul par page — ici, l'envoi final. */
.qc-btn--gold {
  background: var(--qc-gold); color: var(--qc-navy-deep); border-color: var(--qc-gold);
  border-radius: var(--qc-radius-flat); font-size: var(--qc-fs-sm);
  font-weight: var(--qc-fw-medium);
}
.qc-btn--gold:not(:disabled):hover, .qc-btn--gold:focus-visible {
  background: var(--qc-navy); color: var(--qc-gold); border-color: var(--qc-navy);
}

.qc-btn--ghost {
  background: transparent; color: var(--qc-navy); border-color: var(--qc-border);
  margin-right: auto;
}
.qc-btn--ghost:hover { border-color: var(--qc-navy); }

.qc-link-button {
  padding: 0; font-family: var(--qc-font); font-size: var(--qc-fs-sm);
  color: var(--qc-link); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.qc-link-button:hover { color: var(--qc-link-hover); }

/* ---------------------------------------------------------------- champs */

.qc-grid-form {
  display: grid; gap: var(--qc-space-4);
  grid-template-columns: repeat(6, 1fr);
}

.qc-field { grid-column: span 6; display: flex; flex-direction: column; gap: var(--qc-space-1); }
.qc-field--half  { grid-column: span 3; }
.qc-field--third { grid-column: span 2; }

.qc-field--info { margin-top: var(--qc-space-3); gap: var(--qc-space-2); }
.qc-field--info:first-child { margin-top: 0; }
.qc-field__text { margin: 0; font-size: var(--qc-fs-sm); color: var(--qc-text-muted); }

@media (max-width: 767px) {
  .qc-field--half, .qc-field--third { grid-column: span 6; }
}

.qc-label {
  font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-medium);
  color: var(--qc-navy-deep);
}

.qc-required { color: var(--qc-red); font-weight: var(--qc-fw-bold); }

.qc-hint {
  margin: 0; font-size: var(--qc-fs-xs); font-weight: var(--qc-fw-light);
  color: var(--qc-text-muted);
}

.qc-input, .qc-select, .qc-textarea {
  width: 100%;
  font-family: var(--qc-font); font-size: var(--qc-fs-body);
  color: var(--qc-text); background: var(--qc-white);
  padding: var(--qc-space-3);
  border: var(--qc-border-w) solid var(--qc-border);
  border-radius: var(--qc-radius);
  transition: border-color var(--qc-transition);
}
.qc-textarea { resize: vertical; min-height: calc(var(--qc-space-8) + var(--qc-space-4)); }

.qc-input:focus, .qc-select:focus, .qc-textarea:focus {
  border-color: var(--qc-navy); outline: none;
}
.qc-input[aria-invalid="true"], .qc-select[aria-invalid="true"], .qc-textarea[aria-invalid="true"] {
  border-color: var(--qc-red);
}

.qc-error {
  margin: 0; font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-medium);
  color: var(--qc-red);
}

.qc-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--qc-space-2); }

.qc-choices { display: flex; flex-wrap: wrap; gap: var(--qc-space-2); }
.qc-choices--stack { flex-direction: column; gap: var(--qc-space-1); }
.qc-choices--cards { gap: var(--qc-space-3); margin-bottom: var(--qc-space-5); }

.qc-choice {
  display: inline-flex; align-items: flex-start; gap: var(--qc-space-2);
  padding: var(--qc-space-2) var(--qc-space-3);
  font-size: var(--qc-fs-sm);
  border: var(--qc-border-w) solid var(--qc-border);
  border-radius: var(--qc-radius);
  cursor: pointer;
  transition: border-color var(--qc-transition), background-color var(--qc-transition);
}
.qc-choice:hover { border-color: var(--qc-navy); }
.qc-choice:has(input:checked) { border-color: var(--qc-navy); background: var(--qc-bg-alt); }
.qc-choice:has(input:focus-visible) { outline: 3px solid var(--qc-navy); outline-offset: 2px; }

.qc-choice input { margin: 0; accent-color: var(--qc-navy); flex: none; margin-top: 0.15em; }
.qc-choice__label { line-height: var(--qc-lh-body); }

.qc-choice--card { flex: 1 1 260px; padding: var(--qc-space-4); font-size: var(--qc-fs-body); }
.qc-choice--acceptance { align-items: flex-start; background: var(--qc-bg-alt); }

.qc-notice {
  padding: var(--qc-space-3);
  background: var(--qc-bg-alt);
  border-left: var(--qc-rule-w) solid var(--qc-navy);
  border-radius: var(--qc-radius);
}
.qc-notice p { margin: 0; font-size: var(--qc-fs-xs); color: var(--qc-text-muted); }
.qc-notice--warn { border-left-color: var(--qc-red); }

.qc-field__link { font-size: var(--qc-fs-sm); }

.qc-file { display: flex; flex-direction: column; gap: var(--qc-space-1); }
.qc-file__input {
  font-family: var(--qc-font); font-size: var(--qc-fs-sm);
  padding: var(--qc-space-2);
  border: var(--qc-border-w) dashed var(--qc-border);
  border-radius: var(--qc-radius);
  background: var(--qc-white);
  cursor: pointer;
}
.qc-file__input:hover { border-color: var(--qc-navy); }
.qc-file__status { margin: 0; font-size: var(--qc-fs-xs); color: var(--qc-text-muted); }

/* --------------------------------------------------- identification / recap */

.qc-lookup { gap: var(--qc-space-2); }
.qc-lookup__row { display: flex; flex-wrap: wrap; gap: var(--qc-space-2); align-items: stretch; }
.qc-lookup__row .qc-input { flex: 1 1 220px; }

.qc-result:empty { display: none; }
.qc-result__card {
  margin-top: var(--qc-space-3);
  padding: var(--qc-space-4);
  background: var(--qc-white);
  border: var(--qc-border-w) solid var(--qc-navy);
  border-radius: var(--qc-radius);
  box-shadow: var(--qc-shadow-sm);
  animation: qc-enter 260ms ease both;
}

.qc-deflist {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--qc-space-1) var(--qc-space-4);
  margin: var(--qc-space-3) 0 0;
  font-size: var(--qc-fs-sm);
}
.qc-deflist dt { font-weight: var(--qc-fw-medium); color: var(--qc-navy-deep); }
.qc-deflist dd { margin: 0; color: var(--qc-text-muted); }

@media (max-width: 767px) {
  .qc-deflist { grid-template-columns: 1fr; gap: 0 0; }
  .qc-deflist dd { margin-bottom: var(--qc-space-2); }
}

.qc-recap {
  padding: var(--qc-space-4);
  margin-bottom: var(--qc-space-3);
  background: var(--qc-bg-alt);
  border-radius: var(--qc-radius);
}
.qc-recap__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--qc-space-3);
}
.qc-recap--consent { background: var(--qc-white); padding: 0; }

.qc-final { display: flex; flex-direction: column; gap: var(--qc-space-4); align-items: flex-start; }
.qc-final__lead { margin: 0; font-size: var(--qc-fs-h4); font-weight: var(--qc-fw-light); color: var(--qc-navy-deep); }

/* ------------------------------------------------------------------ footer */

.qc-footer {
  background: var(--qc-bg-dark); color: var(--qc-text-invert);
  padding-block: var(--qc-space-6);
}
.qc-footer__inner {
  display: grid; gap: var(--qc-space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}
.qc-footer__logo { width: 200px; height: auto; }
.qc-footer__block p { margin: 0 0 var(--qc-space-1); font-size: var(--qc-fs-sm); }
.qc-footer__title { font-weight: var(--qc-fw-medium); color: var(--qc-gold); }
.qc-footer a { color: var(--qc-white); }
.qc-footer a:hover { color: var(--qc-gold); }
.qc-footer :focus-visible { outline-color: var(--qc-gold); }

/* --------------------------------------------- préférences d'accessibilité */

/* Redéfinir les tokens plutôt que surcharger chaque composant. */
:root[data-text-size="large"] {
  --qc-fs-h1: 42px; --qc-fs-h2: 34px; --qc-fs-h3: 28px; --qc-fs-h4: 22px;
  --qc-fs-body: 20px; --qc-fs-sm: 18px; --qc-fs-xs: 17px;
}
:root[data-text-size="xlarge"] {
  --qc-fs-h1: 46px; --qc-fs-h2: 38px; --qc-fs-h3: 30px; --qc-fs-h4: 25px;
  --qc-fs-body: 22px; --qc-fs-sm: 20px; --qc-fs-xs: 19px;
}

/* Contraste renforcé : on remonte les neutres vers les valeurs les plus sombres
   de la palette et on épaissit les séparateurs. Aucune couleur hors charte. */
:root[data-contrast="high"] {
  --qc-text: var(--qc-navy-deep);
  --qc-text-muted: var(--qc-grey-800);
  --qc-border: var(--qc-grey-600);
  --qc-bg-alt: var(--qc-white);
}
:root[data-contrast="high"] body { background: var(--qc-white); }
:root[data-contrast="high"] .qc-choice,
:root[data-contrast="high"] .qc-input,
:root[data-contrast="high"] .qc-select,
:root[data-contrast="high"] .qc-textarea { border-color: var(--qc-navy-deep); }
:root[data-contrast="high"] .qc-notice { border-left-color: var(--qc-navy-deep); }
:root[data-contrast="high"] .qc-step__button::before { background: var(--qc-grey-600); }

:root[data-motion="off"] { --qc-transition: 0ms; }
:root[data-motion="off"] .qc-screen.is-entering,
:root[data-motion="off"] .qc-result__card { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .qc-screen.is-entering, .qc-result__card { animation: none; }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 767px) {
  .qc-main { padding-block: var(--qc-space-5) var(--qc-space-6); }
  .qc-screen { padding: var(--qc-space-4); }

  /* Le logo et le bouton d'accessibilité doivent tenir sur une ligne : en sticky,
     un header sur deux lignes ampute le tiers de l'écran utile. En texte agrandi
     le `flex-wrap` reprend la main et la deuxième ligne redevient légitime. */
  .qc-header__logo img { width: 150px; }
  .qc-tool { padding: var(--qc-space-1) var(--qc-space-2); font-size: var(--qc-fs-xs); }
  .qc-screen__nav { justify-content: stretch; }
  .qc-screen__nav .qc-btn { flex: 1 1 auto; justify-content: center; }
  .qc-btn { font-size: var(--qc-fs-sm); padding: var(--qc-space-3) var(--qc-space-4); }
}