/* ==========================================================================
   rac-visual-fixes.css — surcharge visuelle du questionnaire public
   Ajouté le 30/09/2026 (sans recompilation Nuxt). Pour l'annuler : retirer la
   balise <link> correspondante dans index.html et 200.html.
   Aligne le rendu sur les maquettes Figma "Rate a Company Survey Form UPDATED".
   ========================================================================== */

/* --- 1. Présentation (texte issu de l'éditeur du back-office) -------------- */
/* Restaure les paragraphes et les lignes vides saisis dans l'éditeur. */
.introduction p,
.introduction ul,
.introduction ol {
  margin: 0 0 0.55em 0;
  line-height: 1.5;
}
.introduction ul,
.introduction ol {
  padding-left: 1.4em;
}
.introduction li {
  margin-bottom: 0.2em;
}
/* Un <p> vide dans l'éditeur = un saut de ligne voulu : lui donner une hauteur. */
.introduction p:empty,
.introduction p:has(> br:only-child) {
  min-height: 1em;
  margin-bottom: 0.55em;
}
.introduction p:last-child,
.introduction ul:last-child {
  margin-bottom: 0;
}

/* --- 2. Lignes de critères (étoiles, arbres, smileys, $) ------------------ */
/* Espace vertical régulier et identique pour toutes les lignes.
   Structure : .question-block > .question-container.py-4 + hr.question-separator */
.question-container {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}
.question-row {
  padding: 0 !important;
  align-items: center !important;
}
hr.question-separator {
  margin: 0 !important;
  opacity: 0.35;
}

/* Marge nette entre le texte et les icônes de notation (cf. maquette). */
.question-row .question-text-col {
  padding-right: 40px !important;
}
.question-row .rating-col {
  padding-left: 8px !important;
  flex-shrink: 0;
}

/* Interligne simple et constant, quel que soit le contenu du critère. */
.question-text {
  display: flex !important;
  align-items: flex-start;
  line-height: 1.4 !important;
}
.question-text-content,
.question-text-content * {
  line-height: 1.4 !important;
}

/* Numéro dans sa propre colonne, à gauche, texte aligné sur lui-même
   (les retours à la ligne ne repassent pas sous le numéro). */
.question-number {
  flex: 0 0 34px !important;
  min-width: 34px !important;
  width: 34px !important;
  margin-right: 0 !important;
  text-align: left;
  display: inline-block !important;
  line-height: 1.4 !important;
}
.question-text-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Icône "i" : collée au texte, avec deux espaces environ (≈ 8 px). */
.question-text .v-btn.info-btn,
.question-text .v-btn[class*="info-b"] {
  margin-left: 8px !important;
  margin-right: 0 !important;
  vertical-align: middle;
  height: 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  transform: translateY(-1px);
}
.question-text .v-btn[class*="info-b"] .v-icon {
  font-size: 18px !important;
}

/* --- 3. Deuxième partie : blocs de questions -------------------------------- */
/* Plus d'air entre les questions (le filet natif .question-separator reste). */
.question-block {
  margin: 0 !important;
}
/* Écart entre l'intitulé et ses réponses (cases, boutons radio). */
.question-block .question-text {
  margin-bottom: 10px;
}
/* Réponses alignées sur le texte, pas sur le numéro. */
.question-block .v-selection-control-group,
.question-block .v-radio-group,
.question-block .v-input--selection-controls {
  margin-left: 34px;
}

/* Icônes de notation de la partie 2 (arbres, smileys, $) : même taille que les
   étoiles (30 px) et une ligne séparatrice comme pour les autres critères. */
.rating-item .v-icon {
  font-size: 30px !important;
  width: 30px !important;
  height: 30px !important;
}
.rating-item {
  padding: 0 3px;
}
.question-row:has(.rating-item) {
  padding: 18px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.question-row:has(.rating-item):last-child {
  border-bottom: 0;
}

/* --- 3b. Landing : bouton Commencer dans un pied de page fixe (cf. maquette) - */
/* La ligne "Visitez …" / "Commencer" est fixée en bas de l'écran, fond blanc ;
   son contenu est centré à la largeur de la colonne de texte de la carte. */
.d-flex.justify-space-between:has(> .text-right > .btnstart) {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  margin: 0 !important;
  padding: 16px max(16px, calc((100vw - 794px) / 2));
  background: #fff;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
/* Réserve la hauteur du pied de page pour que la fin du texte reste lisible. */
.v-card:has(.btnstart) {
  margin-bottom: 96px !important;
}

/* --- 3c. Étapes : en-tête collant ------------------------------------------- */
/* L'en-tête (logo, nom, étapes, barre) reste en haut au défilement. Une fois la
   page défilée (classe html.rac-stuck posée par rac-visual-fixes.js), seuls le
   logo, le nom et la barre de progression restent visibles : les 3 étapes
   disparaissent. */
.v-card:has(> .v-card-text > .header-progress) {
  position: sticky !important;
  top: 0;
  z-index: 15;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
/* En haut de page : logo plus grand, étapes et barre rapprochées du titre. */
.v-card:has(> .v-card-text > .header-progress) .header-title {
  padding-top: 20px !important;
  padding-bottom: 8px !important;
}
.v-card:has(> .v-card-text > .header-progress) .header-title img.company-logo {
  height: 72px !important;
  max-height: 72px !important;
  width: auto !important;
}
.v-card:has(> .v-card-text > .header-progress) .custom-stepper {
  margin-top: 8px !important;
}
.v-card:has(> .v-card-text > .header-progress) .v-card-text {
  padding-bottom: 10px !important;
}
.v-card:has(> .v-card-text > .header-progress) .header-progress {
  margin-top: 2px !important;
}
html.rac-stuck .v-card:has(> .v-card-text > .header-progress) .custom-stepper {
  display: none !important;
}
html.rac-stuck .v-card:has(> .v-card-text > .header-progress) .header-title {
  padding-top: 6px !important;
  padding-bottom: 2px !important;
  min-height: 0 !important;
}
html.rac-stuck .v-card:has(> .v-card-text > .header-progress) .header-title img.company-logo {
  height: 48px !important;
  max-height: 48px !important;
}
html.rac-stuck .v-card:has(> .v-card-text > .header-progress) .v-card-text {
  padding-top: 0 !important;
  padding-bottom: 6px !important;
}
html.rac-stuck .v-card:has(> .v-card-text > .header-progress) .header-progress {
  margin-top: 2px !important;
}

/* --- 4. Responsive ----------------------------------------------------------- */
@media (max-width: 960px) {
  .question-container {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  .question-row .question-text-col {
    padding-right: 24px !important;
  }
  /* Tablette : en-tête un peu plus compact. */
  .v-card:has(> .v-card-text > .header-progress) .header-title {
    padding-top: 16px !important;
  }
  .v-card:has(> .v-card-text > .header-progress) .header-title img.company-logo {
    height: 64px !important;
    max-height: 64px !important;
  }
}
@media (max-width: 600px) {
  /* Sur mobile : texte pleine largeur, icônes en dessous, alignées sur le texte. */
  .question-container {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .question-row {
    flex-wrap: wrap !important;
  }
  .question-row .question-text-col {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }
  .question-row .rating-col {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding-left: 34px !important;
    padding-top: 8px !important;
    justify-content: flex-start !important;
  }
  .question-number {
    flex-basis: 30px !important;
    min-width: 30px !important;
    width: 30px !important;
  }
  .question-block .v-selection-control-group,
  .question-block .v-radio-group,
  .question-block .v-input--selection-controls {
    margin-left: 30px;
  }
  .introduction p,
  .introduction ul,
  .introduction ol {
    margin-bottom: 0.5em;
  }
  .d-flex.justify-space-between:has(> .text-right > .btnstart) {
    padding: 12px 16px;
  }
  .v-card:has(.btnstart) {
    margin-bottom: 84px !important;
  }
  /* Mobile : logo agrandi mais en-tête compact ; collant encore plus compact. */
  .v-card:has(> .v-card-text > .header-progress) .header-title {
    padding-top: 12px !important;
    padding-bottom: 6px !important;
  }
  .v-card:has(> .v-card-text > .header-progress) .header-title img.company-logo {
    height: 56px !important;
    max-height: 56px !important;
  }
  .v-card:has(> .v-card-text > .header-progress) .custom-stepper {
    margin-top: 4px !important;
  }
  html.rac-stuck .v-card:has(> .v-card-text > .header-progress) .header-title img.company-logo {
    height: 40px !important;
    max-height: 40px !important;
  }
}