@charset "UTF-8";
/* Thème "marge autour" — copie var-drivée & SCOPABLE de ../margin_around.scss (SCRUM-458).
 * Original inchangé (0 régression). $root : sélecteur racine (body). $bgAttachment : position du
 * calque image (fixed). Les deux restent paramétrables : les wrappers (form/respondent/*) les posent
 * avant l'@import. */
/* SCRUM-460 : nouveaux paramètres du module de design admin (SCRUM-458) */
/* SCRUM-1463 : état sélectionné d'un bloc de choix. `null` par défaut = réglage non renseigné → la
   déclaration --eg-block-active-* n'est PAS émise (cf. :root plus bas) et l'overlay v2 applique son
   repli historique dérivé de la couleur primaire. Ne jamais leur donner de valeur par défaut ici :
   une variable définie ne retombe jamais sur le repli de var(). */
/* Police de repli si une police importée (Google Fonts) ne se charge pas — SCRUM-564. */
/* Drapeau de version (SCRUM-496) : true seulement pour les designs créés via le nouveau module
   admin (injecté par DesignManager::parseModel). false par défaut → les règles de style câblées
   ne sont pas émises, les designs antérieurs gardent leur rendu. */
/* Fond/ombre du conteneur : la disposition (carte vs fond plein) est gérée par le THÈME
   (v2/<thème>.scss), et non plus par un réglage "layout" (abandonné — cf. DesignType). On reflète
   donc directement les champs : les thèmes sans carte (none) n'utilisent pas --eg-container-bg-color,
   ceux avec carte (margin_around…) l'appliquent. (Bordure, largeur et alignement du conteneur étaient
   pilotés par des réglages abandonnés → leurs variables ont été retirées, plus aucun consommateur.) */
:root {
  --eg-body-bg-color: #f8f9fa;
  --eg-body-bg-image-opacity: 0.9;
  --eg-body-bg-image: url("6abb81b8d95675.21307299.jpg");
  --eg-container-bg-color: white;
  --eg-container-bg-color-contrast: #000;
  --eg-container-border-radius: 16px;
  --eg-container-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  --eg-body-overlay-color: rgba(0, 0, 0, 0);
  --eg-nav-bg-color: #CAE8F3;
  --eg-nav-bg-color-contrast: #000;
  --eg-progress-bar-bg-color: #CB0F13;
  --eg-title-color: #CB0F13;
  --eg-title-font-size: 45px;
  --eg-title-font-weight: normal;
  --eg-title-font-family: Arial, Helvetica, Liberation Sans, FreeSans, sans-serif;
  /* SCRUM-564 : ajoutée en dernier recours derrière chaque font-family (cf. v2/_design.scss). */
  --eg-font-fallback: sans-serif;
  --eg-question-margin-top: 5px;
  --eg-question-font-size: 16px;
  --eg-question-font-familly: Arial, Helvetica, Liberation Sans, FreeSans, sans-serif;
  --eg-question-font-weight: normal;
  --eg-question-color: #000000;
  --eg-block-color: #000000;
  --eg-block-bg-color: #ffffff;
  --eg-block-color-hover: #000;
  --eg-block-bg-color-hover: white;
  --eg-block-bg-color-shade: #d9d9d9;
  --eg-block-bg-color-shade-2: #ddd;
  --eg-block-bg-color-shade-3: #bfbfbf;
  --eg-block-bg-color-shade-4: #999;
  --eg-primary-color: #CAE8F3;
  --eg-primary-color-rgb: 202, 232, 243;
  --eg-primary-color-contrast: #000;
  --eg-primary-color-shade: #acc5cf;
  --eg-checkbox-color: #202B32;
  --eg-checkbox-color-contrast: #fff;
  --eg-logo-size: 150px;
  /* SCRUM-460 : nouveaux paramètres du module de design admin (SCRUM-458) */
  --eg-block-border-radius: 10px;
  --eg-block-border-width: 1px;
  --eg-block-border-color: #d9d9d9;
  /* SCRUM-1463 : émises seulement si renseignées, sinon le repli de v2/_design.scss ne s'appliquerait
     jamais (une variable CSS définie, fût-ce à vide, gagne toujours sur le repli de var()). */
  --eg-block-backdrop-blur: 0px;
  --eg-block-shadow: none;
  --eg-block-font-family: Roboto, Helvetica Neue, sans-serif;
  --eg-block-font-size: 15px;
  --eg-block-font-weight: 500;
  --eg-nav-btn-border-radius: 32px;
  --eg-nav-btn-text-transform: none;
  --eg-nav-btn-font-weight: 600;
  --eg-nav-btn-shadow: none;
  --eg-input-bg-color: white;
  --eg-input-border-color: #d7dce2;
  --eg-input-text-color: #1a2233;
  --eg-input-border-radius: 8px;
  --eg-progress-bar-border-radius: 99px;
  --eg-progress-bar-fill: #CAE8F3;
  --eg-title-letter-spacing: 0px;
}
body {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--eg-body-bg-color);
  color: var(--eg-question-color);
  /* Overlay de style COMMUN aux 6 thèmes du nouveau module de design (SCRUM-458).
 *
 * Source UNIQUE, partagée par :
 *   - le rendu final du formulaire actuel (DesignManager compile v2/<thème>.scss avec $root = body) ;
 *   - le nouveau formulaire répondant (entrées Webpack respondent_design_*, form/respondent/<thème>.scss,
 *     $root = body également — SCRUM-1030).
 * L'aperçu de l'éditeur de design n'a plus de compilation à lui (SCRUM-1456) : il embarque la vraie page
 * répondant en iframe, donc il charge CES feuilles-là. Aucune dérive possible entre aperçu et rendu réel,
 * et l'aperçu reste instantané parce que tout est piloté par des var(--eg-*) que le contrôleur Stimulus
 * "design-preview" écrit en direct dans le document de l'iframe.
 *
 * Tout est en var(--eg-*). Les couleurs dérivées (hover/actif/ombré) sont exprimées via color-mix(),
 * qui reproduit EXACTEMENT la math de tint-color()/shade-color() de Bootstrap (mélange avec white/black
 * selon le poids) — donc pas besoin de fonctions SASS (inopérantes sur var()) ni de recalcul JS.
 *
 * Ce fichier est @import é À L'INTÉRIEUR du bloc racine body { … } d'un v2/<thème>.scss, donc ses
 * sélecteurs sont NICHÉS : `&` = la racine ($root, = body), et #questionnaire_container /
 * .questionnaire-block / … sont des descendants de la racine.
 */
  /* Voile de teinte plein cadre au-dessus du fond, sous le contenu (cf. _global.scss @if advancedStyling). */
  /* NB : l'arrondi/l'ombre de l'encart sont portés par CHAQUE thème sur son élément-carte réel
   (div interne pour margin_around/left/right, #questions_container pour margin_around_out,
   #questionnaire_container lui-même pour margin_top). Pas de règle générique sur
   #questionnaire_container ici : elle dessinait un arrondi/une ombre sur le conteneur externe
   transparent (sans effet, ou liseré/ombre en doublon). La bordure du conteneur (containerBorder)
   est abandonnée et n'est plus émise. */
  /* Logo (form/index.scss) : taille pilotée par --eg-logo-size. */
  /* Titre. */
  /* Question (form/index.scss : couleur/police portées par l'ancêtre #questions_container). */
  /* Blocs de réponse (label.questionnaire-block, classe .btn.btn-shadow).
   Fond/texte/bordure/arrondi/ombre/police via var(--eg-block-*). */
  /* Cases/radios Bootstrap (.form-check-input) : dessinées en appearance:none → accent-color est sans
   effet. On colore l'état coché via --eg-checkbox-color. En rendu final c'est déjà fait par
   form/index.scss (Bootstrap $form-check-input-checked-*) ; on le réémet ici pour que l'APERÇU
   — qui ne charge pas app_form — applique aussi la couleur. */
  /* Focus : remplace le halo bleu Bootstrap par défaut (rgba(13,110,253,.25)) par un halo teinté du
   thème. En rendu final c'est fait par form/index.scss ; réémis ici pour l'aperçu. color-mix plutôt
   que rgba(var(...)) : valide quel que soit le format de --eg-checkbox-color (hex/rgb/rgba). */
  /* Survol : fond primaire à 20% d'opacité, bordure primaire à 80% (cf. .btn.btn-shadow:hover). */
  /* Sélection (état .active, ou input coché dans l'aperçu et sur le nouveau formulaire). Réglable
   depuis le module de design (SCRUM-1463) via --eg-block-active-* ; quand le réglage n'est pas
   renseigné la variable n'est pas émise du tout (cf. les @if de _variables.scss et le saut des
   valeurs vides de DesignCssVariables), et le REPLI de var() reprend à l'identique la formule
   historique : fond primaire 80%, texte contrasté, bordure = primaire ombré -15% (= color-mix avec
   noir 15% = shade-color 15%).
   SCRUM-1186 : .form-check-input:checked et non input[type=radio]:checked — les questions à choix
   MULTIPLES rendent des <input type=checkbox> dans un .questionnaire-block sans classe .active
   (app/channel/item/multiple.html.twig), la moitié des questions n'était donc pas couverte. Les deux
   templates (unique/multiple) et l'aperçu de l'éditeur posent tous .form-check-input. */
  /* Champ texte (.medium_text_question.form-control). */
  /* Bouton de navigation (.btn.btn-primary.questionnaire-nav-btn) : variant complet de
   --eg-nav-bg-color. Le texte contraste avec le FOND DU BOUTON (--eg-nav-bg-color-contrast), pas
   avec la couleur de sélection — il s'adapte donc à la couleur choisie (comme en Mode Live). */
  /* Bouton animé (form/index.scss .btn-animate) : la flèche est masquée et n'apparaît qu'au survol.
   Sans ces règles, l'icône (bloc) reste visible en permanence. */
  /* Barre de progression (form/index.scss / progressBar.html.twig) : jauge + pastilles. */
  /* Étape pas encore atteinte : fond gris (bordure reste la couleur de la barre). */
  /* Page courante : trait sous la pastille, de la couleur de la barre. */
}
body::before {
  content: " ";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: var(--eg-body-bg-image);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  opacity: var(--eg-body-bg-image-opacity);
}
body > .d-flex {
  position: relative;
}
body #questionnaire_container {
  width: 970px;
  max-width: 100%;
  margin: auto;
  /* L'encart visible est ce div:last-child (le conteneur, lui, est transparent) → c'est LUI qui
       porte l'arrondi/ombre + le padding interne. */
}
@media (min-width: 576px) {
  body #questionnaire_container {
    padding-top: 75px;
  }
}
body #questionnaire_container > div:last-child {
  background-color: var(--eg-container-bg-color);
  border-radius: var(--eg-container-border-radius);
  box-shadow: var(--eg-container-shadow);
  padding: 2.5rem;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--eg-body-overlay-color);
  pointer-events: none;
}
body #questionnaire_logo {
  width: var(--eg-logo-size);
  height: auto;
  max-height: calc(var(--eg-logo-size) * 1.25);
  object-fit: contain;
}
body .questionnaire-title {
  color: var(--eg-title-color);
  font-size: var(--eg-title-font-size);
  font-weight: var(--eg-title-font-weight);
  font-family: var(--eg-title-font-family), var(--eg-font-fallback, sans-serif);
  letter-spacing: var(--eg-title-letter-spacing);
  overflow-wrap: break-word;
  line-height: 1.25;
}
body #questions_container {
  color: var(--eg-question-color);
  font-family: var(--eg-question-font-familly), var(--eg-font-fallback, sans-serif);
}
body .questionnaire-question-label {
  font-size: var(--eg-question-font-size);
  font-weight: var(--eg-question-font-weight);
}
body .app_question {
  margin-top: calc(var(--eg-question-margin-top) + 50px);
}
body .questionnaire-block {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  text-align: left;
  color: var(--eg-block-color);
  background-color: var(--eg-block-bg-color);
  border: var(--eg-block-border-width) solid var(--eg-block-border-color);
  border-radius: var(--eg-block-border-radius);
  box-shadow: var(--eg-block-shadow);
  font-family: var(--eg-block-font-family), var(--eg-font-fallback, sans-serif);
  font-size: var(--eg-block-font-size);
  font-weight: var(--eg-block-font-weight);
  padding: 0.75rem 1rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
body .questionnaire-block input[type=radio] {
  min-width: 1rem;
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem 0 0;
  flex-shrink: 0;
  accent-color: var(--eg-checkbox-color);
}
body .form-check-input:checked {
  background-color: var(--eg-checkbox-color);
  border-color: var(--eg-checkbox-color);
}
body .form-check-input:focus {
  border-color: var(--eg-checkbox-color);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--eg-checkbox-color), transparent 75%);
}
body .questionnaire-block:hover {
  background-color: color-mix(in srgb, var(--eg-primary-color), transparent 80%);
  border-color: color-mix(in srgb, var(--eg-primary-color), transparent 20%);
  color: var(--eg-block-color);
}
body .questionnaire-block.active, body .questionnaire-block:has(.form-check-input:checked) {
  background-color: var(--eg-block-active-bg-color, color-mix(in srgb, var(--eg-primary-color), transparent 20%));
  color: var(--eg-block-active-color, var(--eg-primary-color-contrast));
  border-color: var(--eg-block-active-border-color, color-mix(in srgb, var(--eg-primary-color), black 15%));
}
body .form-control, body .medium_text_question.form-control {
  background-color: var(--eg-input-bg-color);
  color: var(--eg-input-text-color);
  border: 1px solid var(--eg-input-border-color);
  border-radius: var(--eg-input-border-radius);
}
body .medium_text_question.form-control {
  width: 50%;
  padding: 0.75rem;
  box-shadow: 0 2px 9px -4px black;
}
body .questionnaire-nav-btn {
  border: 1px solid var(--eg-nav-bg-color);
  border-radius: var(--eg-nav-btn-border-radius);
  background-color: var(--eg-nav-bg-color);
  color: var(--eg-nav-bg-color-contrast);
  font-weight: var(--eg-nav-btn-font-weight);
  text-transform: var(--eg-nav-btn-text-transform);
  box-shadow: var(--eg-nav-btn-shadow);
  padding: 0.75rem 1rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
body .questionnaire-nav-btn:hover {
  /* fond du bouton ombré -15% (= shade-color 15%). */
  background-color: color-mix(in srgb, var(--eg-nav-bg-color), black 15%);
  border-color: color-mix(in srgb, var(--eg-nav-bg-color), black 15%);
  color: var(--eg-nav-bg-color-contrast);
}
body .btn-animate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 5.4rem;
}
body .btn-animate div {
  max-width: 0;
  overflow: hidden;
  transition: all 0.6s ease;
}
body .btn-animate div i {
  opacity: 0;
  transition: all 0.4s ease;
}
body .btn-animate div i.next {
  margin-left: 5px;
  transform: translateX(-150%);
}
body .btn-animate:hover div, body .btn-animate:focus div {
  max-width: 30px;
}
body .btn-animate:hover div i, body .btn-animate:focus div i {
  opacity: 1;
  transform: translateX(0);
}
body #questionnaire_progression_gauge {
  width: 250px;
  max-width: 100%;
  min-height: 10px;
}
body .questionnaire_step {
  position: relative;
  height: 10px;
  margin-left: 0.25rem;
  border-radius: var(--eg-progress-bar-border-radius) !important;
  background-color: var(--eg-progress-bar-bg-color);
  border: 1px solid var(--eg-progress-bar-bg-color) !important;
}
body .questionnaire_step:first-child {
  margin-left: 0;
}
body .questionnaire_step.bg-secondary {
  background-color: #EDEDED !important;
}
body .questionnaire_step.active::after {
  content: "";
  display: block;
  border-bottom: 1px solid var(--eg-progress-bar-bg-color);
  padding-bottom: 12px;
}