.section-intro.guide{
  background:#f4f7fb;                /* bandeau doux */
  border-left:4px solid #213d65;     /* rappel couleur marque */
  padding:1rem 1.25rem;
  margin:1.25rem 0 1rem;
  border-radius:8px;
}
.section-intro.guide h2{
  margin:0 0 .35rem; font-size:1.3rem; color:#213d65;
}
.section-intro.guide p{
  margin:.25rem 0; line-height:1.5;
}
.section-intro.guide .muted{
  color:#35507d; font-size:.98rem;
}

/* ===== Bipolar slider — rail + 4 dots + thumb (aligné & responsive) ===== */

/* Palette & géométrie */
.bipolar{
  --brand: #213d65;
  --rail:  #7f97b8;
  --dot:   #213d65;
  --thumb: #c13b6d;

  --dot-size: 18px;          /* diamètre du repère (sans bordure) */
  --dot-border: 2px;         /* bordure du repère */
  --thumb-size: 40px;        /* diamètre du curseur */
  --thumb-nudge-y: -1px;     /* micro-ajustement vertical du thumb (0 / -1px / -2px) */

  /* inset = 1/2 (diamètre + 2*bordure) -> le rail et le slider s’arrêtent au centre des ronds */
  --rail-inset: calc( (var(--dot-size) + 2*var(--dot-border)) / 2 );
}

.bipolar { margin: 1rem 0 1.25rem; }

/* Libellés (au-dessus) */
.bipolar-labels{
  display:grid; grid-template-columns:1fr 1fr; gap:.75rem;
  font-size:.95rem; color:#213d65; font-weight:600; margin-bottom:.25rem;
}
.bipolar-labels .left{ text-align:left; }
.bipolar-labels .right{ text-align:right; }

/* Wrapper de la zone interactive (stabilise l’alignement) */
.bipolar-track{
  position:relative;
  height:48px;            /* hauteur totale dédiée au rail + thumb */
  margin-top:.25rem;
}

/* Rail centré verticalement et rogné aux ronds */
.bipolar-rail{
  position:absolute;
  top:50%; transform:translateY(-50%);
  left: var(--rail-inset);
  right: var(--rail-inset);
  height:6px; background:#8ea8cc; border-radius:999px; z-index:1;
}
/* pas d’embouts -> évite tout doublon */
.bipolar-rail::before, .bipolar-rail::after{ display:none; }

/* 4 repères sur la même ligne que le rail, alignés aux extrémités du rail */
.bipolar-dots{
  position:absolute;
  top:50%; transform:translateY(-50%);
  left: var(--rail-inset);
  right: var(--rail-inset);
  height:0; z-index:2; pointer-events:none;
}
.bipolar-dots .dot{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius:50%;
  background:#fff; border: var(--dot-border) solid #213d65;
}
.bipolar-dots .dot:nth-child(1){ left:0%; }
.bipolar-dots .dot:nth-child(2){ left:33.333%; }
.bipolar-dots .dot:nth-child(3){ left:66.667%; }
.bipolar-dots .dot:nth-child(4){ left:100%; }

/* Slider superposé exactement sur le rail */
.bipolar-slider{
  position:absolute;
  top:50%; transform:translateY(-50%);
  left: var(--rail-inset);
  right: var(--rail-inset);
  width:100%;
  -webkit-appearance:none; appearance:none;
  background:transparent; height:44px; margin:0; z-index:3;
}
.bipolar-slider:focus{ outline:none; }
.bipolar-slider::-webkit-slider-runnable-track{ height:10px; background:transparent; }
.bipolar-slider::-moz-range-track{ height:10px; background:transparent; }

/* Curseur (thumb) : triangles blancs */
.bipolar-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width: var(--thumb-size); height: var(--thumb-size);
  border-radius:50%; border:2px solid #fff; cursor:grab;
  background:
    no-repeat center/24px 24px url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <polygon points='6,12 11,16 11,8' fill='%23ffffff'/>\
  <polygon points='13,8 13,16 18,12' fill='%23ffffff'/>\
</svg>"),
    #bf366d;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transform: translateY(var(--thumb-nudge-y));
}
.bipolar-slider::-moz-range-thumb{
  width: var(--thumb-size); height: var(--thumb-size);
  border-radius:50%; border:2px solid #fff; cursor:grab;
  background:
    no-repeat center/24px 24px url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <polygon points='6,12 11,16 11,8' fill='%23ffffff'/>\
  <polygon points='13,8 13,16 18,12' fill='%23ffffff'/>\
</svg>"),
    #bf366d;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transform: translateY(var(--thumb-nudge-y));
}
.bipolar-slider:active::-webkit-slider-thumb{ cursor:grabbing; }

/* Repère actif (si tu utilises data-pos) */
.bipolar[data-pos="1"] .bipolar-dots .dot:nth-child(1),
.bipolar[data-pos="2"] .bipolar-dots .dot:nth-child(2),
.bipolar[data-pos="3"] .bipolar-dots .dot:nth-child(3),
.bipolar[data-pos="4"] .bipolar-dots .dot:nth-child(4){
  background:#213d65;
}

/* Nettoyages */
.bipolarized-controls{ display:none !important; }
div.scale + small, div.scale + .text-muted, div.scale ~ small, div.scale ~ .text-muted{ display:none !important; }

/* Responsive */
@media (max-width: 420px){
  .bipolar{
    --dot-size: 18px;
    --dot-border: 2px;
    --rail-inset: calc( (var(--dot-size) + 2*var(--dot-border)) / 2 );
    --thumb-size: 32px;
  }
  .bipolar-slider::-webkit-slider-thumb,
  .bipolar-slider::-moz-range-thumb{
    background-size: 22px 22px;
  }
}

.section-sep {
  border: 0;
  border-top: 2px solid #e0e6ef; /* gris clair */
  margin: 1.5rem 0; /* espace autour */
}

/* (option) masquer catégories/sections dans #questions */
#questions h2, #questions h3,
#questions .badge, #questions .category, #questions .section,
#questions .category-title, #questions .section-title { display: none !important; }
/* Masquer les sous-labels (catégories internes) */
#questions .subcategory,
#questions .question-label,
#questions strong:first-child {
  display: none !important;
}

/* ===== Fond global (toutes les pages) ===== */
html, body {
  min-height: 100%;
}

body {
  /* Chemin relatif au fichier CSS (public/styles.css) */
  background: url("../assets/img/bg.webp") center / cover fixed no-repeat;
  margin: 0;
  padding: 0;
}

/* Lisibilité des contenus par-dessus le fond */
.container,
.card,
.page { /* .page est utilisé par result.html */
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  backdrop-filter: blur(2px);
}

/* un peu d’air autour des sections principales si besoin */
.container { padding: 1rem; }

/* Impression : fond blanc */
@media print {
  body {
    background: #fff !important;
  }
}
.scale-caption{display:none !important} /* enlève les légendes du bas */