@charset "utf-8";
/* CSS Document */
/* SURVEY POPUP UP */

/* ─── Popup ancré en bas de page ──────────────────────────── */
    #surveyToast {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      width: 420px;
      max-width: calc(100vw - 2rem);
      z-index: 1080;
      border-radius: .75rem;
      box-shadow: 0 8px 40px rgba(0,0,0,.18);
      border: none;
    }

    /* ─── Barre de progression ────────────────────────────────── */
    #surveyProgress {
      height: 5px;
      border-radius: 0;
      transition: width .4s ease;
    }

    /* ─── Choix radio stylisés ────────────────────────────────── */
    .choice-item input[type="radio"] { display: none; }
    .choice-item label {
      display: flex;
      align-items: center;
      gap: .55rem;
      padding: .55rem .9rem;
      border: 1.5px solid #dee2e6;
      border-radius: .5rem;
      cursor: pointer;
      font-size: .9rem;
      transition: border-color .15s, background .15s, color .15s;
      background: #fff;
      color: #343a40;
      margin-bottom: .4rem;
    }
    .choice-item label::before {
      content: '';
      width: 15px; height: 15px;
      border-radius: 50%;
      border: 1.5px solid #adb5bd;
      flex-shrink: 0;
      transition: all .15s;
    }
    .choice-item input[type="radio"]:checked + label {
      border-color: #f26d65;
      background: #eef3ff;
      color: #f26d65;
      font-weight: 500;
    }
    .choice-item input[type="radio"]:checked + label::before {
      background: #f26d65;
      border-color: #f26d65;
    }
    .choice-item label:hover {
      border-color: #f26d65;
      background: #f5f8ff;
    }

    /* ─── Étoiles ─────────────────────────────────────────────── */
    .star-group { display: flex; gap: .3rem; }
    .star-group .bi-star,
    .star-group .bi-star-fill { font-size: 1.9rem; cursor: pointer; color: #dee2e6; transition: color .15s; }
    .star-group .bi-star-fill { color: #ffc107; }
    .star-group .star:hover ~ .star .bi-star,
    .star-group .star:hover ~ .star .bi-star-fill { color: #dee2e6 !important; }
    .star-group .star:hover .bi-star { color: #ffc107; }

    /* ─── Question block ──────────────────────────────────────── */
    .q-block { display: none; }
    .q-block.active { display: block; animation: fadeUp .25s ease both; }
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(8px); }
      to   { opacity:1; transform:translateY(0);   }
    }

    /* ─── Remerciement ───────────────────────────────────────── */
    #surveyThanks { display: none; animation: fadeUp .3s ease both; }