/* ==========================================================================
   Otoko, projection du système de design sur LimeSurvey (Fruity TwentyThree).

   Source des valeurs : tokens/otoko-tokens.json v0.1.0 (04/09), couche
   sémantique « clair ». Ce fichier est écrit à la main, pas généré : il
   traduit des rôles en sélecteurs Bootstrap 5, ce que build.py ne sait pas
   faire. En cas d'écart sur une VALEUR, le JSON fait foi.

   Trois partis pris, et leur raison.

   1. THÈME CLAIR, pas le noir de la marque. Le doc de marque est composé
      sur noir et l'app est sombre par défaut, mais l'enquête se lit pendant
      20 à 30 minutes, souvent avec des comptes-rendus de spermogramme à
      côté. Le système fournit exactement pour ce cas la famille « papier »
      (couleur.papier), destinée aux documents longs. C'est elle qu'on prend.

   2. LES CINQ SATURÉES NE PORTENT AUCUN ÉTAT DE FORMULAIRE. Mesuré sur le
      papier #fbf8fc, le violet #e049fb tient 3,06:1 : hors norme pour du
      texte (WCAG 1.4.3, 4,5:1), et à trois centièmes du seuil des composants
      (WCAG 1.4.11, 3:1), ce qui est trop juste pour qu'un état de saisie en
      dépende. Case cochée, anneau de focus et bordure active prennent donc
      violet-encre #6f007f (10,06:1). Le violet vif ne sert qu'en aplat
      décoratif, où la charte l'autorise : barre de progression et filet
      de tête. Les ratios de ce fichier sont vérifiés par ./contraste.py.

   3. AUCUN APPEL RÉSEAU SORTANT. Les woff2 sont servis par le thème. Une
      page qui recueille des données de santé n'appelle pas Google Fonts.
      ========================================================================== */

/* --- Polices, reprises telles quelles de projections/claude-design/styles.css --- */
@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(../fonts/gabarito-QGYtz_0dZAGKJJ4t3HtmW4XGnfBI2fk.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(../fonts/gabarito-QGYtz_0dZAGKJJ4t3HtoW4XGnfBI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/hankengrotesk-ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CxCis4UvI.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/hankengrotesk-ieVn2YZDLWuGJpnzaiwFXS9tYtpd59CxCis4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/hankengrotesk-ieVo2YZDLWuGJpnzaiwFXS9tYtpY_d6T_POl0fRJeyWyosBA5XxjLdSL17o24Q.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/hankengrotesk-ieVo2YZDLWuGJpnzaiwFXS9tYtpY_d6T_POl0fRJeyWyosBO5XxjLdSL17o.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Petrona'; font-style: italic; font-weight: 400 500; font-display: swap; src: url(../fonts/petrona-mtG44_NXL7bZo9XXgXdouUMV8ia-FnZE.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Petrona'; font-style: italic; font-weight: 400 500; font-display: swap; src: url(../fonts/petrona-mtG44_NXL7bZo9XXgXdot0MV8ia-Fg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Jetons, couche sémantique « clair » du système ---------------------- */
:root {
  --ot-fond:        #fbf8fc;
  --ot-surface:     #f6eff7;
  --ot-trait:       #e3dbe4;
  --ot-texte:       #1f1820;
  --ot-texte-2:     #524a54;
  --ot-texte-3:     #6e6570;
  --ot-repere:      #6f007f;  /* violet-encre, 10,1:1 sur papier */
  --ot-repere-2:    #8f3d00;  /* orange-encre,  7,0:1 */
  --ot-lavande-voile: #f2efff;
  --ot-lavande-encre: #6245ae;

  /* aplats décoratifs seulement, jamais un état ni du texte */
  --ot-violet:      #e049fb;
  --ot-orange:      #ff7100;
  --ot-lavande:     #c2b8fe;

  --ot-titre: 'Stolzl', 'Gabarito', 'Avenir Next', Arial, sans-serif;
  --ot-corps: 'Stolzl', 'Hanken Grotesk', 'Avenir Next', Arial, sans-serif;
  --ot-serif: 'Roca', 'Petrona', Georgia, serif;

  --ot-r: 10px;   /* rayon */
}

/* Bootstrap suit les mêmes rôles, pour que les composants non stylés ici
   n'aient pas de couleur orpheline. */
:root {
  --bs-primary: #1f1820;
  --bs-primary-rgb: 31, 24, 32;
  --bs-body-bg: var(--ot-fond);
  --bs-body-color: var(--ot-texte);
  --bs-secondary: var(--ot-texte-3);
  --bs-border-color: var(--ot-trait);
  --bs-body-font-family: var(--ot-corps);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.55;
  --bs-link-color: var(--ot-texte);
  --bs-link-hover-color: var(--ot-repere);
  --bs-border-radius: var(--ot-r);
  --bs-focus-ring-color: rgba(111, 0, 127, .28);
}

/* --- Fond et corps de texte --------------------------------------------- */
body.otoko_enquete {
  background-color: var(--ot-fond);
  color: var(--ot-texte);
  font-family: var(--ot-corps);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Filet de tête : le seul endroit où le dégradé thermique est un aplat. */
body.otoko_enquete::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ot-violet), var(--ot-orange));
  z-index: 1040;
}

body.otoko_enquete .navbar.fixed-top {
  background-color: var(--ot-fond);
  border-bottom: 1px solid var(--ot-trait);
  box-shadow: none;
}

/* --- Titres -------------------------------------------------------------- */
body.otoko_enquete h1,
body.otoko_enquete h2,
body.otoko_enquete h3,
body.otoko_enquete h4,
body.otoko_enquete .survey-name,
body.otoko_enquete .group-title {
  font-family: var(--ot-titre);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ot-texte);
}

body.otoko_enquete .survey-name.large-heading {
  font-weight: 800;
  font-size: clamp(1.7rem, 4.2vw, 2.441rem);
  margin-bottom: .9rem;
}

/* Titre de groupe : c'est le repère de progression le plus utile dans un
   questionnaire de 24 écrans, donc il est marqué. */
body.otoko_enquete .group-title {
  font-size: 1.563rem;
  color: var(--ot-repere);
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--ot-trait);
  margin-bottom: .35rem;
}

/* --- Textes d'accompagnement --------------------------------------------- */
body.otoko_enquete .survey-description,
body.otoko_enquete .survey-welcome {
  color: var(--ot-texte-2);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Les « encadrés » du questionnaire arrivent en description de groupe : c'est
   de l'explication, pas de la question, et la serif italique le dit sans
   avoir à l'écrire. */
body.otoko_enquete .group-description {
  font-family: var(--ot-serif);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ot-texte-2);
  background: var(--ot-lavande-voile);
  border-left: 3px solid var(--ot-lavande-encre);
  border-radius: 0 var(--ot-r) var(--ot-r) 0;
  padding: .85rem 1.1rem;
  margin: .9rem 0 1.4rem;
}

body.otoko_enquete .question-count-text,
body.otoko_enquete .number-of-questions {
  color: var(--ot-texte-3);
  font-size: .9rem;
}

/* --- Barre de progression ------------------------------------------------ */
body.otoko_enquete .progress {
  background-color: var(--ot-trait);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
body.otoko_enquete .progress-bar {
  background: linear-gradient(90deg, var(--ot-violet), var(--ot-orange));
  transition: width .35s ease;
}

/* --- La question --------------------------------------------------------- */
body.otoko_enquete .question-container {
  background: #ffffff;
  border: 1px solid var(--ot-trait);
  border-radius: var(--ot-r);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.15rem;
  box-shadow: 0 1px 2px rgba(31, 24, 32, .04);
}

body.otoko_enquete .question-title-container,
body.otoko_enquete .ls-question-text {
  font-family: var(--ot-corps);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--ot-texte);
}

body.otoko_enquete .ls-question-help,
body.otoko_enquete .question-help-container,
body.otoko_enquete .hint-item {
  color: var(--ot-texte-3);
  font-size: .9rem;
  line-height: 1.5;
}

/* L'astérisque des questions obligatoires. Rouge Bootstrap remplacé par
   l'orange-encre, qui tient 7:1 et reste dans la palette. */
body.otoko_enquete .asterisk,
body.otoko_enquete .ls-question-mandatory {
  color: var(--ot-repere-2);
}

/* --- Réponses : cases, boutons radio, listes ----------------------------- */
body.otoko_enquete .form-check-input,
body.otoko_enquete input[type="checkbox"],
body.otoko_enquete input[type="radio"] {
  accent-color: var(--ot-repere);
  border-color: var(--ot-texte-3);
  width: 1.15em;
  height: 1.15em;
  margin-top: .18em;
}
body.otoko_enquete .form-check-input:checked {
  background-color: var(--ot-repere);
  border-color: var(--ot-repere);
}

body.otoko_enquete .form-check-label,
body.otoko_enquete .answertext,
body.otoko_enquete label.control-label {
  color: var(--ot-texte);
  font-weight: 400;
  line-height: 1.45;
}

/* « Sans réponse ». Le gabarit parent le peint en vert de succès, dernier
   reliquat hors palette sur la page. Ce n'est pas une réussite, c'est le
   défaut d'une question facultative : il se lit en gris, en retrait des
   vraies réponses, sans disparaître pour autant.
   ⚠️ La faute de frappe « no-anwser-item » est celle de LimeSurvey, pas la
   nôtre : c'est la classe réellement émise, ne pas la corriger. */
body.otoko_enquete .no-anwser-item .control-label,
body.otoko_enquete .no-anwser-item label {
  color: var(--ot-texte-3);
  font-style: italic;
}

/* Toute la ligne est cliquable dans LimeSurvey : on le montre.
   Exclut les réponses en forme de bouton, traitées juste en dessous. */
body.otoko_enquete .answer-item:not(.ls-button-label) {
  border-radius: 8px;
  padding: .3rem .45rem;
  transition: background-color .12s ease;
}
body.otoko_enquete .answer-item:not(.ls-button-label):hover {
  background-color: var(--ot-surface);
}

/* --- Réponses en forme de bouton (oui/non, listes en boutons) ------------
   DÉFAUT CORRIGÉ ICI, hérité de Fruity TwentyThree : le gabarit pose
   .btn-primary sur les DEUX libellés, cochés ou non, donc les deux boutons
   sont pleins et rien ne dit lequel est choisi. En vert ça passait pour une
   couleur d'habillage ; ce n'était déjà pas un état lisible.
   On rétablit le motif Bootstrap : contour tant que ce n'est pas coché,
   plein quand ça l'est. */
body.otoko_enquete .ls-answers .btn-check + .ls-button-label,
body.otoko_enquete .ls-answers .btn-check + .btn.btn-primary {
  background-color: #ffffff;
  border: 1px solid var(--ot-texte-3);
  color: var(--ot-texte);
  font-weight: 500;
  padding: .58rem 1.15rem;
}
body.otoko_enquete .ls-answers .btn-check + .ls-button-label:hover {
  background-color: var(--ot-surface);
  border-color: var(--ot-texte);
  color: var(--ot-texte);
}
body.otoko_enquete .ls-answers .btn-check:checked + .ls-button-label,
body.otoko_enquete .ls-answers .btn-check:checked + .btn.btn-primary {
  background-color: var(--ot-repere);
  border-color: var(--ot-repere);
  color: #ffffff;
  font-weight: 600;
}
body.otoko_enquete .ls-answers .btn-check:focus-visible + .ls-button-label {
  outline: 3px solid var(--ot-repere);
  outline-offset: 2px;
}
/* L'icône du gabarit ne doit pas annoncer un état que la case ne porte pas. */
body.otoko_enquete .ls-answers .btn-check + .ls-button-label .ls-icon {
  opacity: .45;
}
body.otoko_enquete .ls-answers .btn-check:checked + .ls-button-label .ls-icon {
  opacity: 1;
}

body.otoko_enquete .form-control,
body.otoko_enquete .form-select,
body.otoko_enquete textarea,
body.otoko_enquete input[type="text"],
body.otoko_enquete input[type="number"] {
  border: 1px solid var(--ot-trait);
  border-radius: 8px;
  background-color: #ffffff;
  color: var(--ot-texte);
  font-family: var(--ot-corps);
  padding: .55rem .75rem;
}
body.otoko_enquete .form-control:focus,
body.otoko_enquete .form-select:focus,
body.otoko_enquete textarea:focus {
  border-color: var(--ot-repere);
  box-shadow: 0 0 0 3px rgba(111, 0, 127, .18);
  outline: none;
}

/* Tableaux de type grille (la grille des sports, le bloc MTBQ). */
body.otoko_enquete .ls-answers thead th,
body.otoko_enquete table.question thead th {
  background-color: var(--ot-surface);
  color: var(--ot-texte-2);
  font-family: var(--ot-corps);
  font-weight: 600;
  font-size: .88rem;
  border-bottom: 1px solid var(--ot-trait);
}
body.otoko_enquete .ls-answers tbody tr:nth-child(odd) > * {
  background-color: rgba(246, 239, 247, .55);
}
body.otoko_enquete .ls-answers td,
body.otoko_enquete .ls-answers th {
  border-color: var(--ot-trait);
}

/* --- Boutons ------------------------------------------------------------- */
body.otoko_enquete .btn {
  font-family: var(--ot-corps);
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: .01em;
}

body.otoko_enquete .btn-primary,
body.otoko_enquete .ls-move-btn.btn-primary {
  background-color: var(--ot-texte);
  border-color: var(--ot-texte);
  color: var(--ot-fond);
  padding: .62rem 1.6rem;
}
body.otoko_enquete .btn-primary:hover,
body.otoko_enquete .btn-primary:focus {
  background-color: var(--ot-repere);
  border-color: var(--ot-repere);
  color: #ffffff;
}

body.otoko_enquete .ls-move-previous-btn,
body.otoko_enquete .btn-outline-secondary {
  background-color: transparent;
  border: 1px solid var(--ot-texte);
  color: var(--ot-texte);
}
body.otoko_enquete .ls-move-previous-btn:hover {
  background-color: var(--ot-surface);
  color: var(--ot-texte);
}

/* --- Focus visible, une seule règle pour tout le formulaire -------------- */
body.otoko_enquete *:focus-visible {
  outline: 3px solid var(--ot-repere);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Liens --------------------------------------------------------------- */
body.otoko_enquete a {
  color: var(--ot-texte);
  text-decoration-color: var(--ot-violet);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
body.otoko_enquete a:hover { color: var(--ot-repere); }

/* --- Le bloc d'anonymat -------------------------------------------------- */
/* Ce bloc porte la promesse d'anonymat : dans le thème d'origine il est en
   petit gris sous le texte d'accueil, alors que c'est ce qui décide une
   personne à répondre. On lui donne une surface, sans en faire une alerte. */
body.otoko_enquete .ls-privacy-block {
  background-color: var(--ot-surface);
  border: 1px solid var(--ot-trait);
  border-radius: var(--ot-r);
  padding: 1rem 1.15rem;
  margin-top: 1.4rem;
}
body.otoko_enquete .ls-privacy-head {
  font-family: var(--ot-titre);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--ot-repere);
}
body.otoko_enquete .ls-privacy-body {
  color: var(--ot-texte-2);
  font-size: .875rem;
  line-height: 1.5;
  margin-bottom: .35rem;
}

/* --- Alertes ------------------------------------------------------------- */
body.otoko_enquete .alert-danger {
  background-color: #fdeeee;
  border-color: #e7bcbc;
  color: #8a1c1c;
  border-radius: var(--ot-r);
}
body.otoko_enquete .alert-info {
  background-color: var(--ot-lavande-voile);
  border-color: var(--ot-lavande);
  color: #3a2f55;
  border-radius: var(--ot-r);
}

/* --- Rattrapage d'ordre de chargement ------------------------------------
   Mesuré le 08/09. Le parent charge sa variation de couleur AVANT base.css,
   pour que base.css puisse la corriger. Notre variation, elle, est déclarée
   par le thème enfant, donc LimeSurvey la place APRÈS base.css : le compiled
   Bootstrap qu'elle contient reprend la main sur ce que base.css avait réglé.
   Vérifié : remettre base.css dans la liste d'ajout ne le repositionne pas,
   LimeSurvey le rend à sa place d'origine. On réaffirme donc ici, en dernier,
   les seules règles de base.css que la variation écrase.
   ⚠️ À revoir si base.css change lors d'une mise à jour de LimeSurvey ; il
   fait 1,8 Ko et n'a que quatre règles, la comparaison est rapide. */
body.otoko_enquete .h1, body.otoko_enquete .h2, body.otoko_enquete .h3,
body.otoko_enquete h1, body.otoko_enquete h2, body.otoko_enquete h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
body.otoko_enquete .h4, body.otoko_enquete .h5, body.otoko_enquete .h6,
body.otoko_enquete h4, body.otoko_enquete h5, body.otoko_enquete h6 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
body.otoko_enquete .well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* Nos propres titres reprennent la main après ce rattrapage : le questionnaire
   les a déjà espacés par les marges de carte, 2rem en tête de bloc creuserait. */
body.otoko_enquete .survey-name.large-heading { margin-top: 0; margin-bottom: .9rem; }
body.otoko_enquete .group-title { margin-top: 1.55rem; margin-bottom: .35rem; }

/* --- Confort de lecture sur un questionnaire long ------------------------ */
@media (min-width: 992px) {
  body.otoko_enquete .question-container,
  body.otoko_enquete .survey-description,
  body.otoko_enquete .survey-welcome { max-width: 46rem; }
}

@media (max-width: 767.98px) {
  body.otoko_enquete .question-container { padding: 1.05rem 1rem; }
  body.otoko_enquete .btn-primary { width: 100%; }

  /* Mesuré le 08/09 sur un viewport de 812 px : le gabarit empile 75 px de
     marges (top-container 32, space-col 18, titre de groupe 25) avant la
     première ligne lisible, soit près d'un dixième de l'écran répété sur
     24 groupes. On les ramène à 40. Les réponses, elles, ne bougent PAS :
     mesurées à 48 px de haut, c'est la cible tactile recommandée, et ce qui
     ressemblait à du gaspillage sur une capture en double densité est juste. */
  body.otoko_enquete .top-container { margin-bottom: 1rem; }
  body.otoko_enquete .col-centered.space-col { margin-top: .5rem; }
  body.otoko_enquete .group-title { margin-top: .9rem; font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.otoko_enquete *,
  body.otoko_enquete *::before { transition: none !important; animation: none !important; }
}

/* --- Cadres d'annotation des passations de RELECTURE ----------------------
   Une relecture pose un cadre de commentaire après CHAQUE question (demande de
   Sam du 13/09). Sur 238 questions, ça fait 238 cadres : en carte pleine, comme
   une question ordinaire, l'écran devient illisible et le questionnaire n'est
   plus relisible du tout. Ces règles les effacent visuellement et les rattachent
   à la question qu'ils commentent, pour qu'ils se lisent comme une marge et non
   comme une question de plus.
   ⚠️ N'existent que dans les passations de relecture : en production, aucune
   question ne porte la classe `otoko-annot` et ce bloc ne s'applique à rien. */
body.otoko_enquete .otoko-annot {
  background: transparent;
  border: none;
  border-left: 2px solid var(--ot-lavande);
  border-radius: 0;
  box-shadow: none;
  /* remonte le cadre contre la carte de la question qu'il annote */
  margin: -0.9rem 0 1.15rem 1.1rem;
  padding: .35rem 0 .35rem .85rem;
}
body.otoko_enquete .otoko-annot .question-title-container,
body.otoko_enquete .otoko-annot .ls-label-question {
  font-family: var(--ot-corps);
  font-size: .82rem;
  font-weight: 400;
  color: var(--ot-texte-3);
  margin-bottom: .3rem;
}
body.otoko_enquete .otoko-annot .form-control,
body.otoko_enquete .otoko-annot textarea {
  font-size: .88rem;
  padding: .35rem .6rem;
  background: var(--ot-surface);
  border-color: var(--ot-trait);
}
/* Le champ de fin de section porte l'avis d'ensemble : il se distingue des
   annotations de question, sinon le relecteur ne voit pas qu'on lui demande
   autre chose. ⚠️ Pas de :last-child ici, le cadre de section n'est pas le
   dernier enfant de son parent (les boutons de navigation suivent). */
body.otoko_enquete .otoko-annot-section {
  border-left-color: var(--ot-repere);
  border-left-width: 3px;
  background: var(--ot-lavande-voile);
  border-radius: 0 var(--ot-r) var(--ot-r) 0;
  margin: 1.2rem 0 1.15rem 0;
  padding: .7rem 1rem;
}
body.otoko_enquete .otoko-annot-section .ls-label-question {
  font-size: .92rem;
  color: var(--ot-texte-2);
}
body.otoko_enquete .otoko-annot .ls-question-help,
body.otoko_enquete .otoko-annot .hint-item { font-size: .78rem; }

/* ==========================================================================
   Passe de lisibilité du 18/09, deuxième essai. Le premier n'a RIEN changé,
   et la raison mérite d'être écrite : les règles d'origine sont préfixées
   `body.otoko_enquete`, donc de spécificité (0,2,1). Un sélecteur de classe
   nu, (0,1,0), ne les emporte jamais, quelle que soit sa place dans le
   fichier. Une collision de cascade ne laisse aucune trace : le CSS est bien
   chargé, la règle est bien là, et l'écran ne bouge pas. Seule la mesure du
   rendu le dit.

   Mesuré avant correctif, sur l'écran de consentement :
     .group-description   Roca ITALIQUE 17,92 px sur 674 px de large
     la question          Stolzl 17,28 px

   Retour de Sam : « l'UI n'est pas bonne et il y a trop de surexplication,
   ça ne donne pas confiance ». Deux défauts se cumulent et l'expliquent.

   1. LE TEXTE SECONDAIRE ÉTAIT PLUS GROS QUE LA QUESTION. L'œil est tiré
      vers l'explication plutôt que vers ce qu'on demande, et la page se lit
      comme une notice au lieu d'un formulaire.
   2. DES PARAGRAPHES ENTIERS EN ITALIQUE, sur 674 px, soit environ 95 signes
      par ligne contre 65 à l'optimum. L'italique marque une emphase ; étendue
      à un bloc, elle ralentit la lecture sans rien signaler.

   Parti pris : Roca italique reste pour ce qu'il sait faire, une note courte.
   Un encadré qui fait un paragraphe passe en corps droit.
   ========================================================================== */

body.otoko_enquete .question-title-container,
body.otoko_enquete .ls-label-question {
  font-family: var(--ot-titre);
  font-size: 1.2rem;
  line-height: 1.36;
  font-weight: 600;
  color: var(--ot-texte);
  max-width: 34em;
  text-wrap: pretty;
}

body.otoko_enquete .group-description,
body.otoko_enquete .ls-group-description,
body.otoko_enquete .survey-description {
  font-family: var(--ot-corps);
  font-style: normal;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ot-texte-2);
  max-width: 62ch;
}
body.otoko_enquete .group-description strong,
body.otoko_enquete .ls-group-description strong {
  color: var(--ot-texte);
  font-weight: 600;
}

body.otoko_enquete .question-help-container,
body.otoko_enquete .ls-questionhelp,
body.otoko_enquete .hint-item {
  font-family: var(--ot-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ot-texte-3);
  max-width: 58ch;
}

body.otoko_enquete .survey-welcome,
body.otoko_enquete .ls-welcome { max-width: 62ch; font-size: 1rem; line-height: 1.62; }

body.otoko_enquete .question-container,
body.otoko_enquete .group-container { max-width: 46rem; }

body.otoko_enquete .answer-item { padding-block: 0.2rem; }
body.otoko_enquete .answer-item label { line-height: 1.45; }

/* Le cadre de relecture s'efface : c'est un outil, pas une question. */
body.otoko_enquete .otoko-annot .question-title-container,
body.otoko_enquete .otoko-annot .ls-label-question {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ot-texte-3);
}