/**************************************************
 * ORS – Surcouche LimeSurvey (thème hérités)
 * Fichier : custom.css (chargé en dernier)
 **************************************************/

/* ========== 0) Variables ORS & Bootstrap ========== */
:root{
  /* ORS */
  --ors-ink: #0D5F69;
  --ors-orange: #F89F5C;
  --ors-orange-dark: #E38946;

  /* Fond (PNG solide, superpositions opaques) */
  --ors-bg-url: url("../files/ors_bg_solid_soft_1920x1080.png");
  --ors-bg-opacity: 0.20;     /* intensité du fond (0.03–0.08 recommandé) */
  --ors-bg-veil: 0.02;        /* léger voile blanc par-dessus (0.00–0.06) */

  /* Bootstrap (écrase la palette par défaut du thème) */
  --bs-primary: var(--ors-orange) !important;
  --bs-primary-rgb: 248,159,92 !important;
  --bs-success: var(--ors-orange) !important;        /* on remplace l’ancien “vert” */
  --bs-success-rgb: 248,159,92 !important;
  --bs-body-color: var(--ors-ink) !important;
  --bs-link-color: var(--ors-ink) !important;
  --bs-link-hover-color: var(--ors-ink) !important;
  --bs-focus-ring-color: rgba(248,159,92,.33) !important;
}

/* (optionnel) Police web */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');

/* ========== 1) Base typographique & liens ========== */
html, body{
  font-family:"Inter", Arial, Helvetica, sans-serif !important;
  color: var(--ors-ink) !important;
}
a, a:visited,
.text-primary, .btn-link{
  color: var(--ors-ink) !important;
}
a:hover, a:focus{ opacity:.9; }

/* ========== 2) Boutons & états ========== */
.btn,
.ls-move-to-next,
.ls-move-to-prev{ border-radius:12px !important; }

.btn.btn-primary, button.btn-primary, a.btn-primary,
.btn-success, .badge-success, .label-success, .bg-success, .progress-bar-success{
  background-color: var(--ors-orange) !important;
  border-color: var(--ors-orange) !important;
  color:#fff !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active{
  background-color: var(--ors-orange-dark) !important;
  border-color: var(--ors-orange-dark) !important;
  color:#fff !important;
}
.btn-outline-primary{
  color: var(--ors-ink) !important;
  border-color: var(--ors-ink) !important;
  border-radius:12px !important;
}

/* ========== 3) Formulaires, cases & radios ========== */
input[type="checkbox"], input[type="radio"]{
  accent-color: var(--ors-orange) !important;
}
.checkbox input[type="checkbox"] + label::before,
.radio    input[type="radio"]    + label::before{
  border-color: var(--ors-orange) !important;
}
.checkbox input[type="checkbox"]:checked + label::before,
.radio    input[type="radio"]:checked    + label::before{
  background-color: var(--ors-orange) !important;
  border-color: var(--ors-orange) !important;
}
input[type="text"], input[type="number"], input[type="email"],
input[type="date"], select, textarea, .form-control{
  border-radius:10px !important;
  border-color: rgba(13,95,105,.35) !important;
}
input:focus, select:focus, textarea:focus{
  box-shadow: 0 0 0 3px rgba(13,95,105,.15) !important;
  border-color: var(--ors-ink) !important;
}

/* Changeur de langue (forçage orange global) */
form.form-change-lang .language-changer-select{
  color: var(--ors-orange) !important;
  border-color: var(--ors-orange) !important;
  background: transparent !important;
}

/* ========== 4) Titres & descriptions ========== */
h1, .survey-title{ color:var(--ors-ink) !important; font-weight:900 !important; letter-spacing:.2px; }
h2, h3, .group-title{ color:var(--ors-ink) !important; font-weight:800 !important; }
.description, .survey-description, .question-help, .help-block{ color:var(--ors-ink) !important; }

/* ========== 5) Cartes, conteneurs & barre de progression ========== */
.panel, .card, .question-container, .ls-answers, .group-title, .well{
  border-radius:16px !important;
}
.progress-bar{ background-color:#B2DB4C !important; } /* vert clair de la charte */

/* ========== 6) Logo en haut à gauche ========== */
body::before{
  content:"";
  position:fixed; top:16px; left:16px;
  width:220px; height:64px;
  background-image:url("../files/logo.png");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:contain;
  z-index:9999; pointer-events:none;
}
@media (max-width:992px){ body::before{ width:180px; height:52px; top:12px; left:12px; } }
@media (max-width:576px){ body::before{ width:140px; height:42px; top:8px; left:8px; } }

/* Espace sous le logo si la page colle en haut */
body{ scroll-padding-top:96px; }
.ls-main-content, #outerframeContainer, .container{ padding-top:80px !important; }
@media (max-width:992px){ .ls-main-content, #outerframeContainer, .container{ padding-top:68px !important; } }
@media (max-width:576px){ .ls-main-content, #outerframeContainer, .container{ padding-top:56px !important; } }

/* ========== 7) Astérisque requis — même ligne + orange ========== */
.question-container .question-title-container,
.ls-question .question-title-container{
  display:flex !important; align-items:baseline !important; column-gap:.35rem !important; flex-wrap:wrap !important;
}
.question-container .asterisk, .ls-question .asterisk{
  display:inline-block !important; margin:0 .25rem 0 0 !important; line-height:1 !important; vertical-align:baseline !important;
  color: var(--ors-orange) !important; font-weight:700;
}
.question-container .question-title, .ls-question .question-title, .question-container h4.question-title{
  display:inline !important; margin:0 !important;
}

/* ========== 8) Background ORS très discret ========== */
/* On applique le fond UNIQUEMENT via ces pseudo-éléments (une seule fois) */
body{ background:#fff !important; }
.ls-main-content, #outerframeContainer, .container-fluid.ls-main-container{
  position:relative; background:transparent !important;
}

/* Image de fond (PNG solide, pas de transparence dans l’image) */
.ls-main-content::before,
#outerframeContainer::before,
.container-fluid.ls-main-container::before{
  content:""; position:fixed; inset:0;
  background-image: var(--ors-bg-url);
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  opacity: var(--ors-bg-opacity) !important; /* clé pour la légèreté visuelle */
  filter: saturate(0.75) contrast(0.92);     /* adoucit un peu (optionnel) */
  z-index:-2; pointer-events:none;
}

/* Voile blanc très léger au-dessus pour homogénéiser le texte */
.ls-main-content::after,
#outerframeContainer::after,
.container-fluid.ls-main-container::after{
  content:""; position:fixed; inset:0;
  background: rgba(255,255,255,var(--ors-bg-veil)) !important;
  z-index:-1; pointer-events:none;
}

/* Pas de fond à l’impression */
@media print{
  .ls-main-content::before, .ls-main-content::after,
  #outerframeContainer::before, #outerframeContainer::after,
  .container-fluid.ls-main-container::before, .container-fluid.ls-main-container::after{
    display:none !important;
  }
}

/* ========== 9) Divers ========== */
.navbar, .navbar .container, .navbar-default{ border-radius:16px !important; }
footer, .survey-footer{ color:var(--ors-ink) !important; opacity:.85 !important; }