/* =======================================================
Visualisation du fichier 'upload/themes/survey/iara/css/custom.css'
   LimeSurvey 3.28 — Thème IARA (custom.css)
   Version stable complète
   Compatible Fruity + Bootstrap 3
   ======================================================= */

/* =====================
   Variables
   ===================== */

:root {

  --iara-orange: #f26c1f;
  --iara-orange-550: #e05512;
  --iara-orange-600: #d35400;
  --iara-orange-650: #c44a00;
  --iara-orange-750: #a84300;

  --ink: #1d1d1b;
  --muted: #6b7280;

  --border: #e6e7eb;
  --bg: #ffffff;

  --tint-4: rgba(242,108,31,.04);
  --tint-6: rgba(242,108,31,.06);
  --tint-8: rgba(242,108,31,.08);

  --radius: 10px;
}

/* =====================
   Base typographique
   ===================== */

html {
  font-size: 100%;
}

body {

  color: var(--ink);
  background: var(--bg);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =====================
   Titres
   ===================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h4 {

  font-family: inherit;
  font-weight: 400;
  line-height: 1.3;

  color: var(--ink);

  margin: .5em 0 .25em;
}

h1 {
  font-size: 1.6rem;
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.4rem;
}

/* =====================
   Titres de questions
   ===================== */

h2.question-title,
h3.question-title {

  color: var(--ink);

  font-weight: 600;

  border-bottom: 1px solid var(--border);

  padding-bottom: .2rem;
  margin-bottom: .5rem;
}

/* =====================
   Blocs descriptifs
   ===================== */

.question-title-container,
.group-description.row.well.space-col {

  background: var(--tint-6);

  border-left: 4px solid var(--iara-orange);

  color: var(--ink);

  font-weight: 500;
  font-size: 1.125rem;

  padding: .5rem .75rem;

  margin-bottom: .5rem;
}

/* =====================
   Asterisques
   ===================== */

.asterisk,
.question .asterisk,
.important-asterisk {

  color: #b42318;

  font-weight: 600;

  margin: 0 .4em 0 .3em;

  font-size: 1.1rem;

  vertical-align: middle;
}

/* =====================
   Champs de formulaire
   ===================== */

.form-control,
.ls-input,
input[type="text"],
select,
textarea {

  border: 1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: none;
}

/* Focus */

.form-control:focus,
.ls-input:focus,
input[type="text"]:focus,
select:focus,
textarea:focus {

  border-color: var(--iara-orange-600);

  box-shadow: 0 0 0 3px rgba(242,108,31,.2);

  outline: 2px solid transparent;
}

/* =====================
   Messages d'information
   ===================== */

.fruity .text-info {

  color: #000;

  font-size: 1rem;

  line-height: 1.4;

  text-align: justify;
}

/* =====================
   Navbar
   ===================== */

.navbar {

  min-height: 36px !important;

  margin-bottom: .5rem !important;

  box-shadow: none !important;

  border-bottom: none !important;
}

#navbar {

  min-height: 32px !important;

  padding: 0 !important;
}

#navbar .navbar-nav > li > a {

  padding: 4px 8px !important;

  font-size: 0.85rem !important;

  line-height: 1.2 !important;
}

/* =====================
   Liens d'action navbar
   ===================== */

.navbar .navbar-action-link {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-end;

  gap: 0;

  margin: 0;
  padding: 0;
}

.navbar .navbar-action-link > li {

  display: block;

  float: none !important;

  margin: 0;
  padding: 0;

  line-height: 1 !important;
}

.navbar .navbar-action-link > li > a {

  font-size: 0.85rem !important;

  font-weight: 500;

  text-decoration: none !important;

  color: var(--muted) !important;

  padding: 0.1rem 0.25rem !important;

  border-radius: 4px;

  transition:
    background .2s ease,
    color .2s ease;
}

.navbar .navbar-action-link > li > a:hover,
.navbar .navbar-action-link > li > a:focus {

  background: var(--tint-6);

  color: var(--iara-orange) !important;
}

/* =====================================================
   Boutons Oui / Non
   ===================================================== */

ul.ls-answers.button-list.yesno-button.btn-group-justified {

  display: flex !important;

  gap: 0.75rem;

  width: 100%;
}

/* Boutons */

ul.ls-answers.button-list.yesno-button .button-item {

  flex: 1 1 0;

  margin-left: 0 !important;

  background: var(--iara-orange);

  color: #fff !important;

  border: 1px solid var(--iara-orange-650);

  border-radius: 4px;

  font-size: 0.85rem;

  font-weight: 500;

  line-height: 1.3;

  padding: .35rem .75rem;

  transition:
    background .15s ease-in-out,
    border-color .15s ease-in-out,
    box-shadow .15s ease-in-out,
    transform .1s ease;
}

/* Hover */

ul.ls-answers.button-list.yesno-button .button-item:hover {

  background: var(--iara-orange-550);

  border-color: var(--iara-orange-650);

  color: #fff !important;
}

/* Focus */

ul.ls-answers.button-list.yesno-button .button-item:focus,
ul.ls-answers.button-list.yesno-button .button-item:focus-visible {

  outline: none;

  box-shadow: 0 0 0 0.15rem rgba(242,108,31,.25);
}

/* État actif */

ul.ls-answers.button-list.yesno-button .button-item.active,
ul.ls-answers.button-list.yesno-button .button-item[aria-pressed="true"] {

  background: var(--iara-orange-750) !important;

  border-color: var(--iara-orange-750) !important;

  color: #fff !important;

  transform: scale(1.02);

  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(168,67,0,.65);
}

/* Désactivé */

ul.ls-answers.button-list.yesno-button .button-item.disabled,
ul.ls-answers.button-list.yesno-button .button-item[disabled] {

  background: #e9ecef !important;

  border-color: #d0d5da !important;

  color: #68707a !important;

  cursor: not-allowed;

  opacity: 1;
}

/* =====================
   Correction radios / checkboxes
   Compatible "Autre"
   ===================== */

/* Neutralisation marges Bootstrap */

.ls-question-wrapper .row,
.question-container .row {

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* IMPORTANT :
   ne PAS toucher au padding-left Bootstrap
*/

.checkbox-list .checkbox,
.radio-list .radio {

  margin: 0.25rem 0 !important;

  line-height: 1.3 !important;
}

/* Inputs */

.checkbox-list input[type="checkbox"],
.radio-list input[type="radio"] {

  margin-right: 0.4rem;

  vertical-align: middle;
}

/* Labels */

.checkbox-list label,
.radio-list label {

  display: inline-block;

  margin: 0;

  font-size: 0.95rem;

  font-weight: 400;
}

/* État sélectionné */

.radio-list input[type="radio"]:checked + label,
.checkbox-list input[type="checkbox"]:checked + label {

  background: var(--tint-8);

  border-radius: 4px;

  color: var(--ink);

  font-weight: 600;

  padding: .1rem .35rem;
}

/* =====================
   Questions
   ===================== */

.question-item {

  padding: 0 0 .5rem 0 !important;

  background: transparent;

  border: 1px solid transparent;
}

/* Hover léger */

.ls-question-container:hover {

  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* =====================
   Tables / matrices
   ===================== */

.ls-answers th,
.ls-answers td {

  border-color: var(--border);
}

.ls-answers tbody tr:nth-child(odd) td {

  background: #fafafa;
}

/* =====================
   Barre de progression
   ===================== */

.progress {

  height: .75rem;

  border-radius: 999px;

  background: #eef1f4;

  margin: .35rem 0;
}

.progress-bar {

  background: var(--iara-orange);
}

/* =====================
   Texte d'accueil
   ===================== */

.survey-welcome.h4.text-primary {

  font-size: 16px;

  color: #000;

  text-align: justify;

  text-justify: inter-word;

  hyphens: auto;
}

/* =====================
   Description
   ===================== */

.fruity .survey-description,
.fruity .group-description {

  color: var(--ink) !important;

  text-align: justify;

  font-size: 0.9rem !important;
}

/* =====================
   Liens
   ===================== */

a {

  color: #0645ad;

  text-decoration: underline;
}

a:hover,
a:focus {

  color: #071aef;
}

a:visited {

  color: #5a3696;
}

/* =====================
   Accessibilité
   ===================== */

:focus-visible {

  outline: 3px solid rgba(242,108,31,.35);

  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  * {

    animation: none !important;

    transition: none !important;
  }
}

/* =====================
   Responsive
   ===================== */

@media (max-width: 768px) {

  .ls-answers table {

    display: block;

    overflow-x: auto;
  }

  .btn,
  .ls-btn-action {

    padding: .5rem .75rem;
  }

  h1 {
    font-size: 1.8rem !important;
  }

  h2 {
    font-size: 1.4rem !important;
  }

  h3 {
    font-size: 1.2rem !important;
  }
}

/* Boutons Oui / Non mobile */

@media (max-width: 576px) {

  ul.ls-answers.button-list.yesno-button.btn-group-justified {

    flex-direction: column;

    gap: .5rem;
  }

  ul.ls-answers.button-list.yesno-button .button-item {

    width: 100%;
  }
}

/* =====================
   Table personnalisée
   ===================== */

table#customers {

  width: 100%;

  border-collapse: collapse;

  margin: 1.5rem 0;

  font-size: .95em;

  line-height: 1.4;

  background: var(--bg);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  overflow: hidden;
}

table#customers th,
table#customers td {

  border: 1px solid var(--border);

  padding: 8px 12px;

  vertical-align: top;
}

table#customers th {

  background: var(--tint-6);

  text-align: center;

  font-weight: 600;
}

table#customers tbody tr:nth-child(odd) td {

  background: #fafafa;
}

/* =====================
   Logos
   ===================== */

#logos {

  display: flex;

  justify-content: space-around;

  align-items: center;

  flex-wrap: wrap;

  gap: 1rem;

  margin: 1.5rem auto;

  width: 100%;
}

#logos img {

  flex: 1 1 12%;

  max-height: 80px;

  object-fit: contain;

  height: auto;

  display: block;

  margin: 0 auto;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

#logos img:hover {

  transform: scale(1.05);

  opacity: .9;
}

@media (max-width: 900px) {

  #logos img {

    flex: 1 1 28%;

    max-height: 70px;
  }
}

@media (max-width: 600px) {

  #logos img {

    flex: 1 1 80%;

    max-height: 60px;
  }
}
body,
.question-text,
.ls-label-question {
    hyphens: none !important;
}
/* ==========================================================
   IARA — POLISH V2 SANS RÉGRESSION
   À conserver en FIN de custom.css
   LimeSurvey 3.28 / Fruity / Bootstrap 3

   Cette couche complète le CSS existant sans modifier :
   - les boutons Oui / Non personnalisés ;
   - le comportement radio / checkbox "Autre" ;
   - la navbar compacte ;
   - les tableaux #customers ;
   - les logos ;
   - les règles d'accessibilité existantes.
   ========================================================== */

:root {
  --iara-page-bg: #f7f8f9;
  --iara-card-bg: #ffffff;
  --iara-card-border: #e4e7eb;
  --iara-card-shadow: 0 2px 10px rgba(29,29,27,.055);
  --iara-card-shadow-hover: 0 5px 18px rgba(29,29,27,.085);
  --iara-soft-orange: rgba(242,108,31,.055);
  --iara-soft-orange-strong: rgba(242,108,31,.09);
}


/* ----------------------------------------------------------
   1. Fond et largeur de lecture
   ---------------------------------------------------------- */

body {
  background: var(--iara-page-bg);
}

.fruity .container-fluid,
.fruity .survey-container {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/*
   Les contenus fonctionnels restent blancs.
   On évite ici de cibler les modales et menus Bootstrap.
*/
.fruity #outerframeContainer,
.fruity .survey-form-container {
  background: transparent;
}


/* ----------------------------------------------------------
   2. En-tête du questionnaire
   ---------------------------------------------------------- */

.fruity .survey-name {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: .45rem;
}

.fruity .survey-description {
  max-width: 90ch;
  line-height: 1.55;
}


/* ----------------------------------------------------------
   3. Titre et description de groupe
   ---------------------------------------------------------- */

.fruity .group-title {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  margin-top: .35rem;
  margin-bottom: .65rem;
}

/*
   On conserve ton principe : fond orange très léger + filet orange.
   Le bloc est seulement plus respirant.
*/
.fruity .group-description.row.well.space-col {
  border-top: 1px solid rgba(242,108,31,.10);
  border-right: 1px solid rgba(242,108,31,.10);
  border-bottom: 1px solid rgba(242,108,31,.10);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: none;
  line-height: 1.55;
  padding: .7rem .9rem;
}


/* ----------------------------------------------------------
   4. Carte de question
   ---------------------------------------------------------- */

/*
   Le cœur de la V2 :
   chaque question est mieux séparée sans devenir une "grosse carte".
*/
.fruity .ls-question-container {
  background: var(--iara-card-bg);
  border: 1px solid var(--iara-card-border);
  border-radius: var(--radius);
  box-shadow: var(--iara-card-shadow);
  margin-bottom: 1rem;
  overflow: visible;
  transition:
    box-shadow .18s ease,
    border-color .18s ease;
}

.fruity .ls-question-container:hover {
  border-color: #d9dde2;
  box-shadow: var(--iara-card-shadow-hover);
}

/*
   Ton .question-title-container reste orangé.
   On harmonise simplement les coins avec la carte.
*/
.fruity .ls-question-container .question-title-container {
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: 0;
  padding: .65rem .85rem;
}

/* Zone de réponse plus aérée */
.fruity .ls-question-container .answer-container {
  padding-top: .7rem;
  padding-bottom: .85rem;
}

/* Aide et consignes : présentes mais secondaires */
.fruity .ls-questionhelp,
.fruity .question-help-container,
.fruity .question-help {
  color: var(--muted);
  line-height: 1.45;
  margin-top: .25rem;
}


/* ----------------------------------------------------------
   5. Intitulés de question
   ---------------------------------------------------------- */

/*
   On respecte ton filet inférieur existant mais le rend plus discret
   à l'intérieur du bandeau de titre.
*/
.fruity h2.question-title,
.fruity h3.question-title {
  font-size: 1.08rem;
  line-height: 1.4;
  border-bottom-color: rgba(29,29,27,.10);
  padding-bottom: .3rem;
  margin-top: 0;
  margin-bottom: .25rem;
}


/* ----------------------------------------------------------
   6. Choix radio / checkbox
   IMPORTANT : on ne modifie pas les boutons Oui / Non
   ---------------------------------------------------------- */

.fruity .radio-list .radio,
.fruity .checkbox-list .checkbox {
  border-radius: 6px;
  transition: background-color .15s ease;
}

.fruity .radio-list .radio:hover,
.fruity .checkbox-list .checkbox:hover {
  background: rgba(29,29,27,.025);
}

/*
   Labels un peu plus confortables.
   Pas de display:block afin de préserver les questions "Autre".
*/
.fruity .radio-list label,
.fruity .checkbox-list label {
  line-height: 1.4 !important;
  padding-top: .08rem;
  padding-bottom: .08rem;
}

/* Sélection : conserve ta règle existante, légèrement renforcée */
.fruity .radio-list input[type="radio"]:checked + label,
.fruity .checkbox-list input[type="checkbox"]:checked + label {
  background: var(--iara-soft-orange-strong);
}


/* ----------------------------------------------------------
   7. Champs texte / listes
   ---------------------------------------------------------- */

.fruity .form-control,
.fruity .ls-input,
.fruity input[type="text"],
.fruity input[type="email"],
.fruity input[type="number"],
.fruity input[type="date"],
.fruity select,
.fruity textarea {
  min-height: 38px;
  background: #fff;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

.fruity textarea.form-control,
.fruity textarea {
  min-height: 96px;
}

.fruity .form-control:hover,
.fruity .ls-input:hover,
.fruity input[type="text"]:hover,
.fruity input[type="email"]:hover,
.fruity input[type="number"]:hover,
.fruity input[type="date"]:hover,
.fruity select:hover,
.fruity textarea:hover {
  border-color: #d4d7dc;
}


/* ----------------------------------------------------------
   8. Matrices
   ---------------------------------------------------------- */

.fruity .ls-answers table {
  background: #fff;
  border-collapse: separate;
  border-spacing: 0;
}

.fruity .ls-answers thead th {
  background: var(--iara-soft-orange);
  color: var(--ink);
  font-weight: 600;
  vertical-align: middle;
}

.fruity .ls-answers tbody td,
.fruity .ls-answers tbody th {
  vertical-align: middle;
}

.fruity .ls-answers tbody tr:hover td,
.fruity .ls-answers tbody tr:hover th {
  background-color: rgba(242,108,31,.035);
}


/* ----------------------------------------------------------
   9. Progression
   ---------------------------------------------------------- */

.fruity .progress {
  height: .65rem;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.035);
}

.fruity .progress-bar {
  min-width: 2px;
  box-shadow: none;
  transition: width .3s ease;
}


/* ----------------------------------------------------------
   10. Boutons de navigation
   ---------------------------------------------------------- */

/*
   Ciblage volontairement limité aux boutons de navigation.
   Les button-item Oui/Non ne sont donc pas touchés.
*/
.fruity .navigator .btn,
.fruity .survey-navigator .btn,
.fruity .ls-move-btn {
  border-radius: 6px;
  font-weight: 600;
  padding: .48rem 1rem;
  box-shadow: none;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .08s ease;
}

.fruity .navigator .btn:active,
.fruity .survey-navigator .btn:active,
.fruity .ls-move-btn:active {
  transform: translateY(1px);
}

/* Suivant / Envoyer */
.fruity .navigator .btn-primary,
.fruity .survey-navigator .btn-primary,
.fruity .ls-move-btn.btn-primary,
.fruity .navigator .btn-success,
.fruity .survey-navigator .btn-success {
  background: var(--iara-orange);
  border-color: var(--iara-orange-650);
  color: #fff;
}

.fruity .navigator .btn-primary:hover,
.fruity .navigator .btn-primary:focus,
.fruity .survey-navigator .btn-primary:hover,
.fruity .survey-navigator .btn-primary:focus,
.fruity .ls-move-btn.btn-primary:hover,
.fruity .ls-move-btn.btn-primary:focus,
.fruity .navigator .btn-success:hover,
.fruity .navigator .btn-success:focus {
  background: var(--iara-orange-550);
  border-color: var(--iara-orange-650);
  color: #fff;
  box-shadow: 0 3px 9px rgba(168,67,0,.16);
}

/* Précédent */
.fruity .navigator .btn-default,
.fruity .survey-navigator .btn-default,
.fruity .ls-move-btn.btn-default {
  background: #fff;
  border-color: #d8dce1;
  color: #454545;
}

.fruity .navigator .btn-default:hover,
.fruity .navigator .btn-default:focus,
.fruity .survey-navigator .btn-default:hover,
.fruity .survey-navigator .btn-default:focus,
.fruity .ls-move-btn.btn-default:hover,
.fruity .ls-move-btn.btn-default:focus {
  background: #f5f6f7;
  border-color: #c8cdd3;
  color: var(--ink);
}


/* ----------------------------------------------------------
   11. Messages de validation
   ---------------------------------------------------------- */

.fruity .alert {
  border-radius: var(--radius);
  box-shadow: none;
}

.fruity .alert-danger {
  background: #fff6f5;
  border-color: #f0c5bf;
  color: #7f241a;
}

.fruity .alert-info {
  background: #f7f8f9;
  border-color: #dde1e5;
  color: var(--ink);
}


/* ----------------------------------------------------------
   12. Bas de page / séparation navigation
   ---------------------------------------------------------- */

.fruity .navigator,
.fruity .survey-navigator {
  border-top: 1px solid var(--border);
  margin-top: 1.1rem;
  padding-top: .9rem;
}


/* ----------------------------------------------------------
   13. Mobile
   ---------------------------------------------------------- */

@media (max-width: 768px) {

  body {
    background: #fff;
  }

  .fruity .ls-question-container {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    margin-left: -.15rem;
    margin-right: -.15rem;
  }

  .fruity .ls-question-container:hover {
    box-shadow: none;
  }

  .fruity .ls-question-container .question-title-container {
    border-radius: 0;
    padding: .6rem .7rem;
  }

  .fruity .ls-question-container .answer-container {
    padding-left: .7rem;
    padding-right: .7rem;
  }

  .fruity h2.question-title,
  .fruity h3.question-title {
    font-size: 1rem;
  }

  .fruity .navigator .btn,
  .fruity .survey-navigator .btn,
  .fruity .ls-move-btn {
    min-height: 40px;
  }
}


/* ----------------------------------------------------------
   14. Très grands écrans
   ---------------------------------------------------------- */

@media (min-width: 1400px) {

  .fruity .container-fluid,
  .fruity .survey-container {
    max-width: 1240px;
  }
}


/* ----------------------------------------------------------
   15. Impression
   ---------------------------------------------------------- */

@media print {

  body {
    background: #fff !important;
  }

  .fruity .ls-question-container {
    border: 1px solid #ddd;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .fruity .navigator,
  .fruity .survey-navigator,
  .fruity .progress {
    display: none !important;
  }
}
/* ==========================================================
   IARA — POLISH V3 "ÉLÉGANCE"
   Correctifs visuels après test réel
   LimeSurvey 3.28 / Fruity / Bootstrap 3

   Principes :
   - orange = accent, pas couleur dominante partout ;
   - réponses Oui/Non neutres tant qu'elles ne sont pas choisies ;
   - état sélectionné immédiatement identifiable ;
   - bouton principal sombre et institutionnel ;
   - progression plus lisible.
   ========================================================== */

:root {
  /* Accent IARA conservé mais légèrement assagi */
  --iara-orange: #e7662b;
  --iara-orange-550: #d85b20;
  --iara-orange-600: #cc531a;
  --iara-orange-650: #bb4916;
  --iara-orange-750: #983a12;

  /* Nouvelle palette d'accompagnement */
  --iara-charcoal: #2f3735;
  --iara-charcoal-hover: #222927;
  --iara-sage: #596a64;
  --iara-line: #dde2e0;
  --iara-page-bg: #f6f7f7;

  --iara-soft-orange: rgba(231,102,43,.055);
  --iara-soft-orange-strong: rgba(231,102,43,.10);
}


/* ----------------------------------------------------------
   1. Barre de progression : correction de l'écrasement
   ---------------------------------------------------------- */

.fruity .progress {
  height: 1rem !important;
  min-height: 1rem !important;
  margin: .55rem 0 1.15rem !important;
  border-radius: 999px;
  background: #e8ecea;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.045);
  overflow: hidden;
}

.fruity .progress-bar {
  height: 100% !important;
  min-height: 1rem !important;
  line-height: 1rem !important;
  background: linear-gradient(
    90deg,
    var(--iara-orange),
    #ef7f45
  ) !important;
  border-radius: 999px;
  box-shadow: none !important;
}

/* Le texte 0 %, 25 %, etc. reste lisible sans forcer la hauteur */
.fruity .progress-bar span,
.fruity .progress-bar {
  font-size: .72rem;
  font-weight: 600;
}


/* ----------------------------------------------------------
   2. Questions : finition plus douce
   ---------------------------------------------------------- */

.fruity .ls-question-container {
  border-color: var(--iara-line);
  box-shadow: 0 2px 8px rgba(31,42,38,.045);
}

.fruity .ls-question-container:hover {
  border-color: #d2d9d6;
  box-shadow: 0 4px 14px rgba(31,42,38,.07);
}

/* Bandeau de titre moins "rosé" */
.fruity .ls-question-container .question-title-container,
.fruity .question-title-container {
  background: #fff8f4;
  border-left-color: var(--iara-orange);
}


/* ----------------------------------------------------------
   3. Oui / Non : nouvelle direction visuelle
   ---------------------------------------------------------- */

/*
   État PAR DÉFAUT :
   fond blanc, bord gris, texte sombre.
   Cela évite d'avoir deux gros rectangles orange simultanément.
*/
ul.ls-answers.button-list.yesno-button .button-item {
  background: #ffffff !important;
  color: var(--iara-charcoal) !important;
  border: 1px solid #cfd7d4 !important;
  border-radius: 7px !important;
  font-size: .9rem;
  font-weight: 600;
  padding: .5rem .75rem;
  box-shadow: 0 1px 2px rgba(31,42,38,.025);
}

/* Icônes et texte héritent proprement */
ul.ls-answers.button-list.yesno-button .button-item *,
ul.ls-answers.button-list.yesno-button .button-item span,
ul.ls-answers.button-list.yesno-button .button-item i {
  color: inherit !important;
}

/* Survol */
ul.ls-answers.button-list.yesno-button .button-item:hover {
  background: #f7f9f8 !important;
  border-color: #aebbb6 !important;
  color: var(--iara-charcoal-hover) !important;
}

/*
   État ACTIF :
   sombre, net, élégant.
   L'orange reste uniquement comme accent de contour.
*/
ul.ls-answers.button-list.yesno-button .button-item.active,
ul.ls-answers.button-list.yesno-button .button-item[aria-pressed="true"] {
  background: var(--iara-charcoal) !important;
  border-color: var(--iara-charcoal) !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(231,102,43,.72) !important;
}

/* Focus clavier */
ul.ls-answers.button-list.yesno-button .button-item:focus,
ul.ls-answers.button-list.yesno-button .button-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(231,102,43,.24);
}


/* ----------------------------------------------------------
   4. Bouton Envoyer / Suivant : sombre, l'orange devient accent
   ---------------------------------------------------------- */

.fruity .navigator .btn-primary,
.fruity .survey-navigator .btn-primary,
.fruity .ls-move-btn.btn-primary,
.fruity .navigator .btn-success,
.fruity .survey-navigator .btn-success,
.fruity button[type="submit"].btn-primary,
.fruity input[type="submit"].btn-primary {
  background: var(--iara-charcoal) !important;
  border-color: var(--iara-charcoal) !important;
  color: #fff !important;
  border-radius: 7px;
  box-shadow: 0 2px 5px rgba(31,42,38,.10);
}

.fruity .navigator .btn-primary:hover,
.fruity .navigator .btn-primary:focus,
.fruity .survey-navigator .btn-primary:hover,
.fruity .survey-navigator .btn-primary:focus,
.fruity .ls-move-btn.btn-primary:hover,
.fruity .ls-move-btn.btn-primary:focus,
.fruity .navigator .btn-success:hover,
.fruity .navigator .btn-success:focus,
.fruity .survey-navigator .btn-success:hover,
.fruity .survey-navigator .btn-success:focus,
.fruity button[type="submit"].btn-primary:hover,
.fruity button[type="submit"].btn-primary:focus,
.fruity input[type="submit"].btn-primary:hover,
.fruity input[type="submit"].btn-primary:focus {
  background: var(--iara-charcoal-hover) !important;
  border-color: var(--iara-charcoal-hover) !important;
  color: #fff !important;
  box-shadow:
    0 3px 8px rgba(31,42,38,.16),
    inset 0 -2px 0 rgba(231,102,43,.55);
}


/* ----------------------------------------------------------
   5. Bouton Précédent : discret
   ---------------------------------------------------------- */

.fruity .navigator .btn-default,
.fruity .survey-navigator .btn-default,
.fruity .ls-move-btn.btn-default {
  background: #fff !important;
  border-color: #cfd7d4 !important;
  color: var(--iara-charcoal) !important;
}

.fruity .navigator .btn-default:hover,
.fruity .navigator .btn-default:focus,
.fruity .survey-navigator .btn-default:hover,
.fruity .survey-navigator .btn-default:focus,
.fruity .ls-move-btn.btn-default:hover,
.fruity .ls-move-btn.btn-default:focus {
  background: #f6f8f7 !important;
  border-color: #aebbb6 !important;
  color: var(--iara-charcoal-hover) !important;
}


/* ----------------------------------------------------------
   6. Champ texte : contour plus raffiné
   ---------------------------------------------------------- */

.fruity .form-control,
.fruity .ls-input,
.fruity input[type="text"],
.fruity input[type="email"],
.fruity input[type="number"],
.fruity input[type="date"],
.fruity select,
.fruity textarea {
  border-color: #d2d8d5;
  border-radius: 7px;
}

.fruity .form-control:focus,
.fruity .ls-input:focus,
.fruity input[type="text"]:focus,
.fruity input[type="email"]:focus,
.fruity input[type="number"]:focus,
.fruity input[type="date"]:focus,
.fruity select:focus,
.fruity textarea:focus {
  border-color: var(--iara-orange) !important;
  box-shadow: 0 0 0 3px rgba(231,102,43,.16) !important;
}


/* ----------------------------------------------------------
   7. Astérisque obligatoire : moins agressif
   ---------------------------------------------------------- */

.fruity .asterisk,
.fruity .question .asterisk,
.fruity .important-asterisk {
  color: #b64e35;
}


/* ----------------------------------------------------------
   8. Mobile
   ---------------------------------------------------------- */

@media (max-width: 576px) {

  .fruity .progress {
    height: .85rem !important;
    min-height: .85rem !important;
  }

  .fruity .progress-bar {
    min-height: .85rem !important;
    line-height: .85rem !important;
  }

  ul.ls-answers.button-list.yesno-button .button-item {
    min-height: 42px;
  }
}

/* ==========================================================
   IARA — V4 BOUTONS OUI/NON COMPACTS ET PLUS VIVANTS
   À placer à la FIN du custom.css
   Compatible LimeSurvey 3.28 / Fruity / Bootstrap 3
   ========================================================== */

/* Groupe Oui / Non : compact et centré */
ul.ls-answers.button-list.yesno-button.btn-group-justified {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch;
  gap: .75rem !important;
  width: 100% !important;
  max-width: 520px;
  margin: .2rem auto 0 !important;
}

/* Chaque choix ne prend plus la moitié de la ligne */
ul.ls-answers.button-list.yesno-button .button-item {
  flex: 0 0 180px !important;
  width: 180px !important;
  min-height: 42px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .35rem;

  padding: .45rem .8rem !important;

  background: #fff !important;
  color: #37413e !important;

  border: 1px solid #cdd4d1 !important;
  border-radius: 8px !important;

  font-size: .9rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  box-shadow: 0 1px 3px rgba(31,42,38,.04);

  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .08s ease;
}

/* Hover : rappel orange discret mais vivant */
ul.ls-answers.button-list.yesno-button .button-item:hover {
  background: #fff7f2 !important;
  color: #9f3f16 !important;
  border-color: #e7662b !important;
  box-shadow: 0 2px 6px rgba(231,102,43,.10);
}

/* État sélectionné : orange profond, plus chaleureux que l'anthracite */
ul.ls-answers.button-list.yesno-button .button-item.active,
ul.ls-answers.button-list.yesno-button .button-item[aria-pressed="true"] {
  background: #d85b20 !important;
  color: #fff !important;
  border-color: #c54f18 !important;

  transform: none !important;

  box-shadow:
    0 2px 6px rgba(168,67,0,.18),
    0 0 0 2px #fff,
    0 0 0 4px rgba(231,102,43,.32) !important;
}

/* Icônes et textes suivent la couleur */
ul.ls-answers.button-list.yesno-button .button-item *,
ul.ls-answers.button-list.yesno-button .button-item span,
ul.ls-answers.button-list.yesno-button .button-item i {
  color: inherit !important;
}

/* Focus clavier */
ul.ls-answers.button-list.yesno-button .button-item:focus,
ul.ls-answers.button-list.yesno-button .button-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(231,102,43,.24) !important;
}

/* Questions Oui/Non : réduire un peu la hauteur globale */
.fruity .ls-question-container:has(
  ul.ls-answers.button-list.yesno-button
) .answer-container {
  padding-top: .5rem !important;
  padding-bottom: .65rem !important;
}

/* Mobile : boutons fluides mais compacts */
@media (max-width: 576px) {

  ul.ls-answers.button-list.yesno-button.btn-group-justified {
    max-width: none;
    gap: .5rem !important;
  }

  ul.ls-answers.button-list.yesno-button .button-item {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    min-height: 40px !important;
  }
}