/* ============================================================
   Sondages
   ------------------------------------------------------------
   Deux écrans très différents partagent ce fichier : le questionnaire, qui doit
   se remplir sans fatigue, et l'éditeur, qui doit se relire d'un coup d'œil.

   Le questionnaire est volontairement austère. Une question colorée influence
   la réponse, et un sondage dont on suspecte la mise en scène ne se remplit
   pas sincèrement. L'accent indigo n'y sert qu'à une chose : dire ce qui est
   sélectionné.
   ============================================================ */

/* ===== L'engagement d'anonymat =====
   En tête, avant la première question : c'est lui qui décide de la sincérité
   des réponses, il ne se met pas en note de bas de page. */
.survey-pledge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
  border-radius: 16px;
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}
.survey-pledge--named {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}
.survey-pledge .lucide { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.survey-pledge strong { display: block; font-size: var(--text-md); }
.survey-pledge p {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 72ch;
}

.survey-intro { margin-bottom: var(--space-4); }

/* ===== Le questionnaire ===== */
.survey-section { margin-bottom: var(--space-8); }
.survey-section__head { margin-bottom: var(--space-4); }
.survey-section__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.survey-section__hint { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }

.survey-question {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-3);
}
/* Une question conditionnelle apparaît en cours de route : le liseré dit
   qu'elle découle de la réponse précédente, plutôt que de surgir de nulle part. */
.survey-question.is-conditional { border-left: 3px solid var(--accent); }
.survey-question__label {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.survey-question__star { color: var(--status-danger-fg); margin-left: 2px; }
.survey-question__help {
  margin: -4px 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.survey-narrow { max-width: 220px; }

/* ===== Choix ===== */
.survey-options { display: flex; flex-direction: column; gap: 2px; }
.survey-options--inline { flex-direction: row; gap: var(--space-3); }
.survey-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-3);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.survey-option:hover { background: var(--gray-50); }
.survey-option input { flex: none; accent-color: var(--accent); }
.survey-option:has(input:checked) {
  background: var(--brand-indigo-tint);
  color: var(--accent);
  font-weight: var(--weight-medium);
}

/* ===== Graduations =====
   Notation, échelle d'accord et recommandation partagent la même saisie : des
   pastilles alignées, assez larges pour être visées au doigt. */
.survey-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.survey-scale__step { cursor: pointer; }
.survey-scale__step input { position: absolute; opacity: 0; pointer-events: none; }
.survey-scale__step span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-card);
  font-size: var(--text-md);
  color: var(--text-secondary);
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.survey-scale__step:hover span { border-color: var(--gray-300); }
.survey-scale__step input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: var(--weight-semibold);
}
.survey-scale__step input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.survey-scale--compact span { min-width: 36px; height: 36px; font-size: var(--text-sm); }
.survey-scale__bounds {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ===== Classement =====
   Le glisser-déposer dit ce qu'on attend sans l'expliquer ; les flèches
   restent pour le clavier et le tactile. Le rang affiché se recalcule à chaque
   déplacement — il ne peut donc pas contredire l'ordre à l'écran. */
.survey-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.survey-rank__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-card);
  cursor: grab;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}
.survey-rank__row:hover { border-color: var(--gray-300); }
.survey-rank__row.is-dragging { opacity: 0.4; cursor: grabbing; }
.survey-rank__grip { flex: none; color: var(--gray-300); display: inline-flex; }
.survey-rank__grip .lucide { width: 16px; height: 16px; }
.survey-rank__number {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-indigo-tint);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.survey-rank__label { flex: 1; min-width: 0; color: var(--text-primary); }
.survey-rank__moves { display: flex; flex-direction: column; gap: 1px; flex: none; }
.survey-rank__move {
  width: 22px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.survey-rank__move:hover { color: var(--accent); background: var(--gray-100); }
.survey-rank__move .lucide { width: 13px; height: 13px; }

/* ===== Matrice ===== */
.survey-matrix { display: flex; flex-direction: column; gap: var(--space-3); }
.survey-matrix__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.survey-matrix__label {
  flex: 1;
  min-width: 180px;
  font-size: var(--text-base);
  color: var(--text-primary);
}

/* ===== Navigation de page =====
   Le compteur et la barre répondent aux deux questions qu'on se pose au milieu
   d'un questionnaire : où j'en suis, et combien il reste. */
.survey-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  position: sticky;
  bottom: var(--space-4);
}
.survey-nav__progress { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.survey-nav__count {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.survey-nav__bar {
  display: block;
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: var(--gray-150);
  overflow: hidden;
}
.survey-nav__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.24s ease;
}
.survey-nav__hint { margin: 0; flex: 1; font-size: var(--text-sm); color: var(--text-muted); }
.survey-nav__actions { display: flex; gap: var(--space-2); flex: none; }
.survey-nav__actions .lucide { width: 15px; height: 15px; }

/* Une question obligatoire laissée vide, signalée là où elle se trouve plutôt
   qu'en bloc à l'envoi : sinon il faut la retrouver soi-même. */
.survey-question.is-missing {
  border-color: var(--status-danger-fg);
  box-shadow: 0 0 0 3px var(--status-danger-bg);
}

/* ===== L'éditeur ===== */
.survey-page { margin-bottom: var(--space-4); }
.survey-page__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.survey-page__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.survey-page__head .meal-iconbtn { margin-left: auto; }
.survey-page__empty { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }

.survey-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; counter-reset: question; }
.survey-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: 12px;
  counter-increment: question;
}
.survey-list__item:hover { background: var(--gray-50); }
.survey-list__item::before {
  content: counter(question);
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.survey-list__body { flex: 1; min-width: 0; }
.survey-list__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--text-primary);
}
.survey-list__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.survey-list__actions { display: flex; gap: 4px; flex: none; }
.survey-list__actions form { margin: 0; }

/* Le formulaire d'ajout reste replié : déplié en permanence, il repoussait la
   liste des questions hors de l'écran dès la troisième. */
.survey-add {
  border: 1px dashed var(--gray-200);
  border-radius: 12px;
  padding: var(--space-3) var(--space-4);
}
.survey-add__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--accent);
  list-style: none;
}
.survey-add__summary::-webkit-details-marker { display: none; }
.survey-add__summary .lucide { width: 15px; height: 15px; }
.survey-add[open] .survey-add__summary { margin-bottom: var(--space-4); }

/* ============================================================
   Restitution
   ------------------------------------------------------------
   Les graphiques sont dessinés ici, en CSS : un seul rendu sert l'écran et le
   PDF, et rien n'y jure avec le reste de la plateforme.

   Un parti pris de lecture guide tout : des **barres**, jamais d'anneau. L'œil
   compare bien deux longueurs et mal deux angles — un camembert oblige à lire
   les pourcentages, ce que la barre évite.
   ============================================================ */

.sr-summary {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.sr-summary__figure { display: flex; flex-direction: column; flex: none; }
.sr-summary__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--accent);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.sr-summary__value small { font-size: var(--text-lg); margin-left: 2px; }
.sr-summary__label { font-size: var(--text-sm); color: var(--text-muted); }
.sr-summary__gauge {
  flex: 1;
  min-width: 160px;
  height: 8px;
  border-radius: 999px;
  background: var(--gray-150);
  overflow: hidden;
}
.sr-summary__gauge span { display: block; height: 100%; background: var(--accent); }
.sr-summary__meta { display: flex; align-items: center; gap: var(--space-3); flex: none;
                    font-size: var(--text-sm); color: var(--text-secondary); }

/* ===== Filtres ===== */
.sr-filters { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap;
              margin-bottom: var(--space-4); }
.sr-filters__group { position: relative; }
.sr-filters__group summary {
  list-style: none;
  cursor: pointer;
  padding: 5px 12px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-card);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.sr-filters__group summary::-webkit-details-marker { display: none; }
.sr-filters__group[open] summary { border-color: var(--accent); color: var(--accent); }
.sr-filters__values {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-height: 320px;
  overflow: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16, 20, 40, 0.16);
}
.sr-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 5px 12px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-card);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.sr-filters__values .sr-filter { border: 0; border-radius: 9px; }
.sr-filter:hover { color: var(--text-primary); background: var(--gray-50); }
.sr-filter.is-active { background: var(--brand-indigo-tint); border-color: var(--accent); color: var(--accent); }
.sr-filter__count { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Un segment qui tombera sous le seuil : proposé quand même, mais annoncé.
   Le masquer laisserait croire que l'équipe n'a pas répondu. */
.sr-filter__count.is-thin { color: var(--status-warning-fg); }

/* ===== Un bloc de question ===== */
.sr-block { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-3); }
.sr-block__head { margin-bottom: var(--space-4); }
.sr-block__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold);
                   color: var(--text-primary); }
.sr-block__meta { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.sr-block__note { margin: -8px 0 var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.sr-block__empty { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

.sr-blocked {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--status-warning-bg);
}
.sr-blocked .lucide { width: 20px; height: 20px; flex: none; color: var(--status-warning-fg); margin-top: 2px; }
.sr-blocked strong { color: var(--status-warning-fg); }
.sr-blocked p { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-secondary); max-width: 72ch; }

/* ===== Barres ===== */
.sr-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sr-bar { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr auto; align-items: center;
          gap: var(--space-4); }
.sr-bar__label { font-size: var(--text-base); color: var(--text-primary); }
.sr-bar__track { height: 12px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.sr-bar__fill {
  display: block;
  height: 100%;
  width: var(--share);
  border-radius: 999px;
  background: var(--accent);
  animation: srGrow 0.5s ease both;
}
@keyframes srGrow { from { width: 0; } to { width: var(--share); } }
.sr-bar__value { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary);
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-bar__value small { margin-left: 6px; font-weight: var(--weight-normal); color: var(--text-muted); }

/* ===== Distribution ===== */
.sr-scale { display: flex; align-items: flex-end; gap: var(--space-8); flex-wrap: wrap; }
.sr-scale__figures { display: flex; flex-direction: column; flex: none; }
.sr-scale__score { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--accent);
                   line-height: 1; letter-spacing: var(--tracking-tight); }
.sr-scale__caption { font-size: var(--text-sm); color: var(--text-muted); }
.sr-histogram { display: flex; align-items: flex-end; gap: 6px; flex: 1; min-width: 220px; height: 120px; }
.sr-histogram--wide { width: 100%; }
.sr-histogram__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
                     gap: 4px; height: 100%; }
.sr-histogram__bar {
  width: 100%;
  max-width: 46px;
  height: var(--height);
  min-height: 2px;
  border-radius: 6px 6px 0 0;
  background: var(--accent);
  animation: srRise 0.5s ease both;
}
@keyframes srRise { from { height: 0; } to { height: var(--height); } }
.sr-histogram__count { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sr-histogram__step { font-size: var(--text-xs); color: var(--text-muted); }

/* ===== Matrice ===== */
.sr-matrix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sr-matrix__row { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr auto; align-items: center;
                  gap: var(--space-4); }
.sr-matrix__label { font-size: var(--text-base); color: var(--text-primary); }
.sr-matrix__track { position: relative; height: 6px; border-radius: 999px; background: var(--gray-100); }
.sr-matrix__dot {
  position: absolute;
  top: 50%;
  left: var(--position);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--brand-indigo-tint);
}
.sr-matrix__value { font-size: var(--text-sm); font-weight: var(--weight-semibold);
                    font-variant-numeric: tabular-nums; }
.sr-matrix__axis { display: flex; justify-content: space-between; font-size: var(--text-xs);
                   color: var(--text-muted); padding-left: calc(25% + var(--space-4)); }

/* ===== Nombres ===== */
.sr-stats { display: flex; gap: var(--space-8); flex-wrap: wrap; margin: 0; }
.sr-stats dt { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase;
               letter-spacing: var(--tracking-wide); }
.sr-stats dd { margin: 2px 0 0; font-size: var(--text-xl); font-weight: var(--weight-semibold);
               color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ===== Verbatims =====
   Le nuage donne l'entrée, la liste reste la source. Résumer un verbatim,
   c'est déjà l'interpréter. */
.sr-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
            margin: 0 0 var(--space-5); }
.sr-word {
  font-size: calc(0.8rem + (var(--weight) / 100) * 0.9rem);
  font-weight: var(--weight-medium);
  color: color-mix(in srgb, var(--accent) calc(var(--weight) * 1%), var(--gray-400));
  line-height: 1.2;
}
.sr-verbatims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
                max-height: 340px; overflow: auto; }
.sr-verbatims li {
  padding: 10px var(--space-4);
  border-left: 2px solid var(--gray-200);
  background: var(--surface-sunken);
  border-radius: 0 10px 10px 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* ===== Édition : titre de page ===== */
.survey-page__rename { display: flex; gap: var(--space-2); flex: 1; flex-wrap: wrap; margin: 0; }
.survey-page__name { max-width: 260px; }
.survey-page__desc { flex: 1; min-width: 200px; }

/* ===== Tableau de bord ===== */
.dash-survey { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
               margin-bottom: var(--space-3); text-decoration: none; color: inherit; }
.dash-survey__body { flex: 1; min-width: 0; }
.dash-survey__title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.dash-survey__hint { font-size: var(--text-sm); color: var(--text-muted); }