/*
 * ONZIVA Design System — base et composants du questionnaire.
 * À lire après onziva-tokens.css, qui définit les jetons utilisés ici.
 */

/* --- Base --------------------------------------------------------------- */

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

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* Le fond de <html> déborde du document : c'est lui qu'on voit sur mobile dans
   la zone de rebond, au-dessus et au-dessous de la page. Une page qui ouvre sur
   un bloc nuit le pose donc en nuit, sans quoi une bande crème apparaît
   au-dessus du bandeau dès qu'on tire la page vers le bas. */
html {
  background: var(--oz-creme);
}

html.oz-fond-nuit {
  background: var(--oz-nuit);
}

/* Le questionnaire pilote ses étapes et ses boutons par l'attribut `hidden` :
   il doit l'emporter sur les `display` posés plus bas. */
[hidden] {
  display: none !important;
}

body {
  background: var(--oz-bg);
  color: var(--oz-ink);
  font-family: var(--oz-famille-texte);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Contour plein de 2px en focus, décalé de 3px, sur tout élément interactif. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--oz-focus);
  outline-offset: 3px;
}

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

.oz-link {
  color: var(--oz-primary-texte);
  text-decoration: underline;
}

/* --- Logo --------------------------------------------------------------- */

/* Le fichier « encre » se pose sur creme, le fichier « blanc » sur nuit :
   celui qui ne correspond pas au mode courant est retiré du document. */
/* Le logo est un lien vers onziva.fr : pas de soulignement, et une zone
   cliquable limitée au dessin même quand la mise en page le passe en block. */
.oz-logo {
  display: inline-block;
  width: fit-content;
  line-height: 0;
  text-decoration: none;
}

.oz-logo img {
  display: block;
  height: 100%;
  width: auto;
}

.oz-logo .oz-logo-encre {
  display: var(--oz-logo-encre);
}

.oz-logo .oz-logo-blanc {
  display: var(--oz-logo-blanc);
}

/* --- Bouton ------------------------------------------------------------- */

.oz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oz-space-8);
  min-height: var(--oz-cible);
  padding: var(--oz-space-10) var(--oz-space-24);
  border: 1px solid transparent;
  border-radius: var(--oz-radius-pilule);
  background: var(--oz-primary);
  color: var(--oz-on-primary);
  font-family: var(--oz-famille-texte);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.oz-btn:hover {
  background: var(--oz-ink);
  color: var(--oz-bg);
}

/* Bouton secondaire : contour en ink, au-delà de 12:1 dans les deux modes. */
.oz-btn--contour {
  background: transparent;
  color: var(--oz-ink);
  border-color: var(--oz-ink);
}

.oz-btn--contour:hover {
  background: var(--oz-ink);
  color: var(--oz-bg);
}

/* --- Bandeau d'ouverture ------------------------------------------------ */

.qr-hero {
  background: var(--oz-bg);
  color: var(--oz-ink);
  padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 56px) clamp(32px, 5vw, 48px);
  /* En application installée, le bandeau passe sous la barre d'état : il reprend
     à son compte la hauteur que celle-ci occupe, sinon le logo passerait sous
     l'heure. Hors de ce cas, l'encoche vaut zéro et rien ne change. */
  padding-top: calc(clamp(32px, 6vw, 56px) + env(safe-area-inset-top));
}

.qr-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.qr-hero-logo {
  display: block;
  height: 34px;
  margin-bottom: var(--oz-space-24);
}

.qr-hero h1 {
  font-family: var(--oz-famille-titre);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 50px);
  line-height: 1.02;
  margin: 0 0 var(--oz-space-18);
  color: var(--oz-ink);
}

.qr-hero p {
  font-size: 14px;
  line-height: 1.5;
  max-width: 64ch;
  margin: 0;
  color: var(--oz-ink);
}

.qr-hero-meta {
  margin-top: var(--oz-space-18);
  font-size: 12px;
  color: var(--oz-muted);
}

/* --- Gabarit du formulaire ---------------------------------------------- */

.qr-form-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(20px, 5vw, 56px) 80px;
}

.qr-section {
  border: 1px solid var(--oz-hairline);
  border-radius: var(--oz-radius-bloc);
  padding: clamp(20px, 3.5vw, 28px);
  margin-bottom: var(--oz-space-18);
}

.qr-section-head {
  margin-bottom: var(--oz-space-24);
}

/* Numéro de section : capitales espacées, en primary-texte (style numero-phase). */
.qr-kicker {
  display: block;
  font-family: var(--oz-famille-titre);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--oz-primary-texte);
}

.qr-section h2 {
  font-family: var(--oz-famille-titre);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  margin: var(--oz-space-10) 0 0;
  color: var(--oz-ink);
}

.qr-desc {
  font-size: 14px;
  color: var(--oz-muted);
  margin: var(--oz-space-8) 0 0;
}

/* --- Champs ------------------------------------------------------------- */

.qr-field {
  margin-bottom: var(--oz-space-24);
}

.qr-field:last-child {
  margin-bottom: 0;
}

.qr-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--oz-ink);
  margin-bottom: var(--oz-space-8);
}

.qr-hint {
  font-size: 13px;
  color: var(--oz-muted);
  margin: 0 0 var(--oz-space-12);
  max-width: 64ch;
}

.qr-text,
.qr-textarea {
  width: 100%;
  min-height: var(--oz-cible);
  background: var(--oz-champ);
  border: 1px solid var(--oz-muted);
  border-radius: var(--oz-radius-bloc);
  padding: var(--oz-space-10) var(--oz-space-14);
  font-family: var(--oz-famille-texte);
  font-size: 15px;
  line-height: 1.4;
  color: var(--oz-ink);
}

.qr-textarea {
  resize: vertical;
}

.qr-text::placeholder,
.qr-textarea::placeholder {
  color: var(--oz-muted);
}

/* --- Choix (radios et cases à cocher) ----------------------------------- */

.qr-options {
  display: flex;
  flex-direction: column;
  gap: var(--oz-space-8);
}

.qr-option {
  display: flex;
  align-items: flex-start;
  gap: var(--oz-space-12);
  min-height: var(--oz-cible);
  padding: var(--oz-space-10) var(--oz-space-14);
  border: 1px solid var(--oz-hairline);
  border-radius: var(--oz-radius-bloc);
  font-size: 14px;
  line-height: 1.4;
  color: var(--oz-ink);
  cursor: pointer;
}

.qr-option:hover {
  border-color: var(--oz-muted);
}

/* Le contrôle natif reste le repère : le filet du rang est décoratif. */
.qr-option:has(:checked) {
  border-color: var(--oz-primary-texte);
  background: var(--oz-tuile-primary);
}

.qr-input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--oz-primary);
}

/* --- Grilles (séries de nombres, notation 1 à 3) ------------------------ */

.qr-grid {
  display: flex;
  flex-direction: column;
}

.qr-grid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oz-space-18);
  padding: var(--oz-space-10) 0;
  border-bottom: 1px solid var(--oz-hairline);
}

.qr-grid-row:last-child {
  border-bottom: none;
}

.qr-grid-label {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  color: var(--oz-ink);
}

.qr-grid-scale {
  display: flex;
  gap: var(--oz-space-8);
  flex-shrink: 0;
}

.qr-scale-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--oz-space-8);
  min-width: var(--oz-cible);
  min-height: var(--oz-cible);
  font-family: var(--oz-famille-titre);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--oz-muted);
  cursor: pointer;
}

.qr-scale-option:has(:checked) {
  color: var(--oz-ink);
  font-weight: 700;
}

.qr-number-compact {
  max-width: 110px;
  flex-shrink: 0;
}

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

.qr-progress {
  margin-bottom: var(--oz-space-24);
}

.qr-progress-bar {
  height: 3px;
  background: var(--oz-faint);
  border-radius: var(--oz-radius-barre);
  overflow: hidden;
  margin-bottom: var(--oz-space-12);
}

.qr-progress-fill {
  height: 100%;
  width: 0;
  background: var(--oz-accent);
  border-radius: var(--oz-radius-barre);
  transition: width 0.25s ease;
}

.qr-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oz-space-12);
  flex-wrap: wrap;
}

.qr-step-counter {
  font-size: 12px;
  font-weight: 600;
  color: var(--oz-muted);
}

.qr-dots {
  display: flex;
  gap: var(--oz-space-10);
  flex-wrap: wrap;
}

.qr-dot {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--oz-muted);
  border-radius: var(--oz-radius-pilule);
  background: transparent;
  color: var(--oz-muted);
  font-family: var(--oz-famille-titre);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-indent: 0.12em; /* compense l'approche de la dernière lettre */
  cursor: pointer;
}

/* Étend la zone cliquable à 44px sans agrandir la pastille. */
.qr-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
}

.qr-dot-done {
  background: var(--oz-accent);
  border-color: var(--oz-accent);
  color: var(--oz-on-accent);
}

.qr-dot-active {
  background: var(--oz-ink);
  border-color: var(--oz-ink);
  color: var(--oz-bg);
  font-weight: 700;
}

/* --- Erreurs ------------------------------------------------------------ */

.qr-errors {
  background: var(--oz-tuile-fraise);
  border: 1px solid var(--oz-fraise-texte);
  border-radius: var(--oz-radius-bloc);
  padding: var(--oz-space-14) var(--oz-space-18);
  font-size: 14px;
  color: var(--oz-ink);
  margin-bottom: var(--oz-space-24);
}

.qr-errors strong {
  color: var(--oz-fraise-texte);
}

.qr-errors ul {
  margin: var(--oz-space-8) 0 0;
  padding-left: var(--oz-space-18);
}

.field_with_errors {
  display: contents;
}

.field_with_errors .qr-text,
.field_with_errors .qr-textarea {
  border-color: var(--oz-fraise-texte);
  border-width: 2px;
}

/* --- Navigation du questionnaire ---------------------------------------- */

/* Sans JavaScript, les trois boutons restent affichés : ils doivent passer à
   la ligne plutôt que déborder. */
.qr-wizard-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oz-space-12);
}

.qr-btn-prev {
  flex: 0 0 auto;
}

.qr-btn-next,
.qr-submit {
  flex: 1 1 0;
}

.qr-submit-note {
  text-align: center;
  font-size: 12px;
  color: var(--oz-ink);
  opacity: var(--oz-opacite-mention);
  margin-top: var(--oz-space-14);
}

/* --- Page de remerciement ----------------------------------------------- */

.qr-merci {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 56px);
  padding-top: calc(clamp(20px, 5vw, 56px) + env(safe-area-inset-top));
  background: var(--oz-bg);
  color: var(--oz-ink);
}

.qr-merci-inner {
  max-width: 520px;
  text-align: center;
}

.qr-merci-sigle-lien {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

.qr-merci-sigle {
  height: 56px;
  width: auto;
  margin-bottom: var(--oz-space-24);
}

.qr-merci h1 {
  font-family: var(--oz-famille-titre);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 50px);
  line-height: 1.02;
  margin: 0 0 var(--oz-space-18);
  color: var(--oz-ink);
}

.qr-merci p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--oz-ink);
}

/* --- Tableau de bord des réponses --------------------------------------- */

.ar-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(20px, 5vw, 56px) 80px;
}

.ar-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--oz-space-18);
  margin-bottom: var(--oz-space-24);
  flex-wrap: wrap;
}

.ar-head h1 {
  font-family: var(--oz-famille-titre);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.02;
  margin: 0;
  color: var(--oz-ink);
}

.ar-logo {
  display: block;
  height: 28px;
  margin-bottom: var(--oz-space-14);
}

.ar-count {
  font-size: 13px;
  color: var(--oz-muted);
  margin-top: var(--oz-space-8);
}

.ar-actions {
  display: flex;
  gap: var(--oz-space-10);
  flex-wrap: wrap;
}

.ar-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--oz-hairline);
  border-radius: var(--oz-radius-bloc);
}

.ar-table-scroll table {
  width: 100%;
  border-collapse: collapse;
}

.ar-table-scroll th,
.ar-table-scroll td {
  text-align: left;
  padding: var(--oz-space-12) var(--oz-space-14);
  font-size: 13px;
  border-bottom: 1px solid var(--oz-hairline);
  white-space: nowrap;
}

.ar-table-scroll th {
  position: sticky;
  top: 0;
  background: var(--oz-bg);
  font-weight: 600;
  color: var(--oz-ink);
  border-bottom-color: var(--oz-muted);
}

.ar-table-scroll tr:last-child td {
  border-bottom: none;
}

.ar-badge {
  display: inline-block;
  padding: 2px var(--oz-space-10);
  border-radius: var(--oz-radius-pilule);
  font-size: 12px;
  font-weight: 600;
}

/* Le libellé porte l'information : la couleur ne fait que la doubler. */
.ar-badge-chaud {
  background: var(--oz-tuile-fraise);
  color: var(--oz-fraise-texte);
}

.ar-badge-tiede {
  background: var(--oz-tuile-olive);
  color: var(--oz-olive-texte);
}

.ar-badge-froid {
  background: var(--oz-tuile-primary);
  color: var(--oz-menthe-texte);
}

.ar-badge-non_qualifie {
  background: var(--oz-faint);
  color: var(--oz-muted);
}

.ar-empty {
  padding: 48px var(--oz-space-24);
  text-align: center;
  color: var(--oz-muted);
  border: 1px solid var(--oz-hairline);
  border-radius: var(--oz-radius-bloc);
}

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