/* ==========================================================================
   SIMPLE Survey — feuille de style de la façade

   Tout est sous .sphf-survey (enveloppe posée par SIMPLE Core, classes
   « sphf sphf--{mode} sphf-survey »).
   Tout est en em (sauf filets de 1 à 2 px et courbures). Couleurs, ombres,
   courbure et police : variables --sphf-* de SIMPLE Core, sans aucune valeur
   écrite ici. Boutons, messages, champs et encadrés : composants communs de
   SIMPLE Core (sphf-base.css), non recopiés ici.

   Deux modes : « une question par écran » (.sphf-survey--steps, le script
   ajoute .sphf--js et montre une étape à la fois) et « tout sur une page ».
   Sans script, toutes les étapes sont visibles et le bouton final sert.
   ========================================================================== */

/* ------------------------------------------------------------------ Formulaire */

.sphf-survey .sphf-survey-form { max-width: 44em; margin: 0 auto; }
.sphf-survey .sphf-survey-note { margin: 0 0 1em; color: var(--sphf-muted); font-size: var(--sphf-small); }
.sphf-survey .sphf-survey-missing { color: var(--sphf-muted); font-style: italic; }
/* Texte (astérisque, message) : couleur d'alerte assombrie pour un contraste de 4,5:1, pas la couleur de fond. */
.sphf-survey .sphf-survey-req { color: var(--sphf-danger-text, var(--sphf-danger)); font-weight: 700; }

/* ------------------------------------------------------------------ Progression */

.sphf-survey .sphf-survey-progress { height: .45em; margin: 0 0 .5em; background: var(--sphf-accent-soft); border-radius: var(--sphf-pill); overflow: hidden; }
.sphf-survey .sphf-survey-progress__bar { display: block; width: var(--sphf-survey-p, 0%); height: 100%; background: var(--sphf-accent); border-radius: var(--sphf-pill); transition: width .35s ease; }
.sphf-survey .sphf-survey-progress__text { margin: 0 0 1.5em; color: var(--sphf-muted); font-size: var(--sphf-small); }

/* ------------------------------------------------------------------ Étapes */

.sphf-survey .sphf-survey-step { position: relative; padding: 1.5em 0; border-bottom: 1px solid var(--sphf-line); outline: 0; }
.sphf-survey .sphf-survey-step:last-of-type { border-bottom: 0; }
.sphf-survey .sphf-survey-step__head { margin: 0 0 1.1em; }
.sphf-survey .sphf-survey-step__label { display: flex; gap: .6em; align-items: flex-start; margin: 0 0 .35em; font-size: var(--sphf-t2); font-weight: 650; line-height: 1.3; color: var(--sphf-text); text-transform: none; letter-spacing: 0; text-align: left; }
.sphf-survey .sphf-survey-step__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; padding: 0 .4em; border-radius: var(--sphf-pill); background: var(--sphf-accent-soft); color: var(--sphf-accent-dark); font-size: .62em; font-weight: 700; margin-top: .25em; }
.sphf-survey .sphf-survey-step__help { margin: 0; color: var(--sphf-muted); font-size: var(--sphf-small); line-height: 1.5; }
/* Texte de contexte (facultatif), avant la question : même ton que le texte d'un écran. */
.sphf-survey .sphf-survey-step__context { margin: 0 0 .9em; color: var(--sphf-text); line-height: 1.55; }
.sphf-survey .sphf-survey-step__context p { margin: 0 0 .6em; }
/* Titre du thème (première ligne du contexte tout en gras) : un peu plus grand que la question, sans écraser l'écran. */
.sphf-survey .sphf-survey-step__context .sphf-survey-step__theme { margin: 0 0 .5em; padding-bottom: .3em; border-bottom: 2px solid var(--sphf-accent-soft); font-size: calc(var(--sphf-t2) * 1.1); font-weight: 700; line-height: 1.25; color: var(--sphf-accent-dark); }
/* Intertitres facultatifs (« De quoi parle-t-on ? », « Votre avis ») : en gras, couleur du thème. */
.sphf-survey .sphf-survey-step__sub { margin: .8em 0 .3em; font-size: var(--sphf-t3, .95em); font-weight: 700; letter-spacing: .02em; color: var(--sphf-accent-dark); }
.sphf-survey .sphf-survey-step__sub--ask { margin-top: 1.2em; }
.sphf-survey .sphf-survey-step__error { margin: .6em 0 0; color: var(--sphf-danger-text, var(--sphf-danger)); font-size: var(--sphf-small); font-weight: 650; }
.sphf-survey .sphf-survey-step.is-error .sphf-survey-step__label { color: var(--sphf-danger-text, var(--sphf-danger)); }
.sphf-survey .sphf-survey-step .sphf-field { margin: 0; }
.sphf-survey .sphf-survey-step .sphf-field textarea { min-height: 7em; }

/* Écrans de texte (accueil, section). */
.sphf-survey .sphf-survey-screen { text-align: center; padding: 1em 0 .5em; }
.sphf-survey .sphf-survey-screen__image { display: block; max-width: 100%; max-height: 18em; margin: 0 auto 1.2em; border-radius: var(--sphf-radius); object-fit: cover; }
.sphf-survey .sphf-survey-screen__title { margin: 0 0 .5em; font-size: var(--sphf-t1); font-weight: 700; line-height: 1.2; color: var(--sphf-text); text-transform: none; letter-spacing: 0; }
.sphf-survey .sphf-survey-screen__text { color: var(--sphf-muted); line-height: 1.55; }
.sphf-survey .sphf-survey-screen__text p { margin: 0 0 .8em; }
.sphf-survey .sphf-survey-step--intro .sphf-survey-step__nav { justify-content: center; }

/* ------------------------------------------------------------------ Choix */

.sphf-survey .sphf-survey-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: .6em; }
.sphf-survey .sphf-survey-choices--yesno { grid-template-columns: repeat(2, minmax(6em, 10em)); }
.sphf-survey .sphf-survey-choice { display: flex; align-items: center; gap: .75em; padding: .7em .9em; border: 2px solid var(--sphf-field-line, var(--sphf-line)); border-radius: var(--sphf-radius-s); background: var(--sphf-card); color: var(--sphf-text); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; margin: 0; font-size: 1em; font-weight: 500; line-height: 1.3; text-align: left; }
.sphf-survey .sphf-survey-choice:hover { border-color: var(--sphf-accent); }
.sphf-survey .sphf-survey-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sphf-survey .sphf-survey-choice__key { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; height: 1.75em; padding: 0 .35em; border: 1px solid var(--sphf-field-line, var(--sphf-line)); border-radius: var(--sphf-radius-s); background: var(--sphf-zone); color: var(--sphf-muted); font-size: .78em; font-weight: 700; }
.sphf-survey .sphf-survey-choice__text { flex: 1 1 auto; }
.sphf-survey .sphf-survey-choice.is-selected,
.sphf-survey .sphf-survey-choice:has(input:checked) { border-color: var(--sphf-accent); background: var(--sphf-accent-soft); }
.sphf-survey .sphf-survey-choice.is-selected .sphf-survey-choice__key,
.sphf-survey .sphf-survey-choice:has(input:checked) .sphf-survey-choice__key { background: var(--sphf-accent); border-color: var(--sphf-accent); color: var(--sphf-on-accent); }
.sphf-survey .sphf-survey-choice:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--sphf-accent-ring); }
.sphf-survey .sphf-survey-other { grid-column: 1 / -1; margin: 0; }
.sphf-survey .sphf-field + .sphf-survey-other { margin-top: .6em; }

/* ------------------------------------------------------------------ Échelles, NPS, étoiles */

.sphf-survey .sphf-survey-scale { display: flex; flex-wrap: wrap; gap: .4em; }
.sphf-survey .sphf-survey-scale__item { position: relative; flex: 1 1 2.6em; max-width: 4em; margin: 0; cursor: pointer; }
.sphf-survey .sphf-survey-scale__item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sphf-survey .sphf-survey-scale__value { display: flex; align-items: center; justify-content: center; height: 2.6em; border: 2px solid var(--sphf-field-line, var(--sphf-line)); border-radius: var(--sphf-radius-s); background: var(--sphf-card); color: var(--sphf-text); font-weight: 650; transition: border-color .15s ease, background .15s ease; }
.sphf-survey .sphf-survey-scale__item:hover .sphf-survey-scale__value { border-color: var(--sphf-accent); }
.sphf-survey .sphf-survey-scale__item.is-selected .sphf-survey-scale__value,
.sphf-survey .sphf-survey-scale__item:has(input:checked) .sphf-survey-scale__value { background: var(--sphf-accent); border-color: var(--sphf-accent); color: var(--sphf-on-accent); }
.sphf-survey .sphf-survey-scale__item:has(input:focus-visible) .sphf-survey-scale__value { box-shadow: 0 0 0 4px var(--sphf-accent-ring); }
.sphf-survey .sphf-survey-scale__labels { display: flex; justify-content: space-between; gap: 1em; margin: .5em 0 0; color: var(--sphf-muted); font-size: var(--sphf-mini); }
.sphf-survey .sphf-survey-scale--stars { gap: .25em; }
.sphf-survey .sphf-survey-scale--stars .sphf-survey-scale__item { flex: 0 0 2.4em; }
.sphf-survey .sphf-survey-scale--stars .sphf-survey-scale__value { border-color: transparent; background: transparent; color: var(--sphf-field-line, var(--sphf-line)); font-size: 1.6em; height: 1.6em; }
.sphf-survey .sphf-survey-scale--stars .sphf-survey-scale__item:hover .sphf-survey-scale__value { color: var(--sphf-link, var(--sphf-accent)); }
.sphf-survey .sphf-survey-scale--stars .sphf-survey-scale__item.is-selected .sphf-survey-scale__value,
.sphf-survey .sphf-survey-scale--stars .sphf-survey-scale__item.is-lit .sphf-survey-scale__value,
.sphf-survey .sphf-survey-scale--stars .sphf-survey-scale__item:has(input:checked) .sphf-survey-scale__value { background: transparent; border-color: transparent; color: var(--sphf-link, var(--sphf-accent)); }

/* ------------------------------------------------------------------ Navigation d'une étape */

/* Retour à la ligne : sur 320 px, boutons et conseil clavier ne tiennent pas sur une ligne. */
.sphf-survey .sphf-survey-step__nav { display: none; flex-wrap: wrap; align-items: center; gap: .75em; margin: 1.25em 0 0; }
.sphf-survey .sphf-survey-hint { color: var(--sphf-muted); font-size: var(--sphf-mini); }
.sphf-survey .sphf-survey-submit { margin: 1.5em 0 0; text-align: center; }

/* Avec script, en mode une question par écran : une étape à la fois. */
.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-step { display: none; border-bottom: 0; padding: .5em 0 0; }
.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-step.is-current { display: block; animation: sphf-survey-in .3s ease; }
.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-step__nav { display: flex; }
.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-submit { display: none; }
.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-progress[hidden],
.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-progress__text[hidden] { display: block; }
.sphf-survey.sphf--js .sphf-survey-form.is-answered [data-sphf-survey-body] { display: none; }
.sphf-survey.sphf--js .sphf-survey-form.is-answered [data-sphf-survey-already][hidden] { display: block; }
@keyframes sphf-survey-in { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-step.is-current { animation: none; }
	.sphf-survey .sphf-survey-progress__bar { transition: none; }
}
@media (hover: none) { .sphf-survey .sphf-survey-hint { display: none; } }
@media (max-width: 36em) {
	.sphf-survey .sphf-survey-hint { flex: 1 1 100%; }
	.sphf-survey .sphf-survey-choices { grid-template-columns: 1fr; }
	.sphf-survey .sphf-survey-choices--yesno { grid-template-columns: 1fr 1fr; }
	.sphf-survey .sphf-survey-step__nav .sphf-btn--big { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ Écran de fin */

.sphf-survey .sphf-survey-done { max-width: 34em; margin: 0 auto; padding: 1.5em 0; text-align: center; }
.sphf-survey .sphf-survey-done__icon { display: inline-flex; align-items: center; justify-content: center; width: 3em; height: 3em; margin: 0 0 .75em; border-radius: 50%; background: var(--sphf-ok-soft); color: var(--sphf-ok-text, var(--sphf-ok)); font-size: 1.4em; font-weight: 700; }
.sphf-survey .sphf-survey-done__title { margin: 0 0 .5em; font-size: var(--sphf-t1); font-weight: 700; color: var(--sphf-text); text-transform: none; letter-spacing: 0; }
.sphf-survey .sphf-survey-done__text { color: var(--sphf-muted); line-height: 1.55; }
.sphf-survey .sphf-survey-done__actions { justify-content: center; margin-top: 1.25em; }

/* ------------------------------------------------------------------ Bloc « À la une » ([simple_survey_une]) */

.sphf-survey .sphf-survey-header--slim { padding: .9em var(--sphf-pad-x); margin-bottom: .9em; }
.sphf-survey .sphf-header.sphf-survey-header--own { background: var(--sphf-head); border-radius: var(--sphf-survey-featured-radius, var(--sphf-radius)); }
.sphf-survey .sphf-survey-title--small { font-size: var(--sphf-t2); }
.sphf-survey .sphf-survey-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16em, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.sphf-survey .sphf-survey-cards--solo { grid-template-columns: minmax(16em, 28em); }
.sphf-survey .sphf-survey-card { display: flex; flex-direction: column; gap: .5em; margin: 0; padding: 1.1em 1.25em 1.25em; background: var(--sphf-card); border: 1px solid var(--sphf-line); border-radius: var(--sphf-radius); box-shadow: var(--sphf-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.sphf-survey .sphf-survey-card:hover { transform: translateY(-.1875em); box-shadow: var(--sphf-shadow-strong); }
.sphf-survey .sphf-survey-card__title { margin: 0; font-size: var(--sphf-t3); font-weight: 700; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.sphf-survey .sphf-survey-card__title a { color: var(--sphf-text); text-decoration: none; }
.sphf-survey .sphf-survey-card__title a:hover { color: var(--sphf-link, var(--sphf-accent)); }
.sphf-survey .sphf-survey-card__meta { margin: 0; color: var(--sphf-text); font-size: var(--sphf-small); }
.sphf-survey .sphf-survey-card__period { margin: 0; color: var(--sphf-muted); font-size: var(--sphf-small); }
.sphf-survey .sphf-survey-card__foot { margin-top: auto; padding-top: .5em; }
.sphf-survey .sphf-survey-card__off { opacity: .65; cursor: not-allowed; pointer-events: none; }
.sphf-survey .sphf-survey-card__count { font-variant-numeric: tabular-nums; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .sphf-survey .sphf-survey-card:hover { transform: none; } }

/* ------------------------------------------------------------------ Résultats */

/* Bandeau sur une ligne (réglage « Page des résultats » de l'onglet Apparence) : toute la largeur du cadre ;
   couleur de fond réglable (variable posée par PHP, texte noir ou blanc calculé), sinon teinte claire de l'accent. */
.sphf-survey .sphf-survey-banner { margin: 0 0 1em; padding: .6em 1em; background: var(--sphf-survey-banner, var(--sphf-accent-soft)); border-radius: var(--sphf-radius-s); color: var(--sphf-survey-banner-text, var(--sphf-text)); font-size: var(--sphf-small); font-weight: 600; text-align: center; }

/* Résultats : plus larges que le questionnaire, lignes serrées et barres fines (comme dans l'administration). */
.sphf-survey .sphf-survey-results { max-width: 60em; margin: 0 auto; }
.sphf-survey .sphf-survey-results__q { padding: 1em 1.25em; margin: 0 0 .8em; background: var(--sphf-card); border: 1px solid var(--sphf-line); border-radius: var(--sphf-radius); }
.sphf-survey .sphf-survey-results__label { display: flex; gap: .6em; align-items: flex-start; margin: 0 0 .2em; font-size: 1em; font-weight: 650; color: var(--sphf-text); text-transform: none; letter-spacing: 0; text-align: left; }
.sphf-survey .sphf-survey-results__theme { margin: 1.4em 0 .6em; font-size: 1.15em; font-weight: 700; color: var(--sphf-accent-dark); text-transform: none; letter-spacing: 0; text-align: left; }
.sphf-survey .sphf-survey-results__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; border-radius: var(--sphf-pill); background: var(--sphf-accent-soft); color: var(--sphf-accent-dark); font-size: .7em; font-weight: 700; margin-top: .15em; }
.sphf-survey .sphf-survey-results__meta { margin: 0 0 .7em; color: var(--sphf-muted); font-size: var(--sphf-mini); }
.sphf-survey .sphf-survey-results__none { margin: 0; color: var(--sphf-muted); font-style: italic; }
.sphf-survey .sphf-survey-results__avg { margin: 0 0 .75em; color: var(--sphf-text); }
.sphf-survey .sphf-survey-results__texts { margin: .5em 0 0; }
.sphf-survey .sphf-survey-results__texts summary { cursor: pointer; color: var(--sphf-link); font-size: var(--sphf-small); }
/* Textes libres : un bloc par réponse (numéro et date, puis le texte), séparés par un filet. */
.sphf-survey .sphf-survey-results__texts ul { margin: .6em 0 0; padding: 0; list-style: none; color: var(--sphf-text); font-size: var(--sphf-small); }
.sphf-survey .sphf-survey-results__text { margin: 0; padding: .5em 0 .5em .8em; border-left: 3px solid var(--sphf-accent-soft); border-bottom: 1px solid var(--sphf-line); }
.sphf-survey .sphf-survey-results__text:last-child { border-bottom: 0; }
.sphf-survey .sphf-survey-results__who { margin: 0 0 .2em; color: var(--sphf-muted); font-size: var(--sphf-mini); }
.sphf-survey .sphf-survey-results__said { line-height: 1.5; }
.sphf-survey .sphf-survey-bars { list-style: none; margin: 0; padding: 0; }
.sphf-survey .sphf-survey-bars__row { display: grid; grid-template-columns: minmax(12em, 3fr) minmax(6em, 2fr) 5.5em; align-items: start; gap: .75em; margin: 0 0 .3em; font-size: var(--sphf-mini); }
.sphf-survey .sphf-survey-bars__label { color: var(--sphf-text); line-height: 1.35; overflow-wrap: anywhere; }
.sphf-survey .sphf-survey-bars__track { display: block; height: .7em; margin-top: calc(.675em - .7em / 2); background: var(--sphf-zone); border-radius: var(--sphf-pill); overflow: hidden; }
.sphf-survey .sphf-survey-bars__bar { display: block; width: var(--sphf-survey-w, 0%); height: 100%; background: var(--sphf-survey-ci, var(--sphf-accent)); border-radius: var(--sphf-pill); }
/* Sur une barre, les deux teintes les plus pâles se confondraient avec le fond : un ton plus soutenu. */
.sphf-survey .sphf-survey-bars [data-sphf-survey-c="4"] { --sphf-survey-ci: color-mix(in srgb, var(--sphf-accent) 55%, var(--sphf-card)); }
.sphf-survey .sphf-survey-bars [data-sphf-survey-c="8"] { --sphf-survey-ci: color-mix(in srgb, var(--sphf-accent) 60%, var(--sphf-text)); }
.sphf-survey .sphf-survey-bars--seq .sphf-survey-bars__bar { background: color-mix(in srgb, var(--sphf-accent-dark) var(--sphf-survey-seq, 100%), var(--sphf-accent-soft)); }
.sphf-survey .sphf-survey-bars__value { line-height: 1.35; text-align: right; color: var(--sphf-text); font-variant-numeric: tabular-nums; }
.sphf-survey .sphf-survey-bars__value small { color: var(--sphf-muted); }
.sphf-survey .sphf-survey-nps { margin: 0 0 1em; }
.sphf-survey .sphf-survey-nps__score { display: flex; align-items: baseline; gap: .6em; margin: 0 0 .5em; }
.sphf-survey .sphf-survey-nps__score strong { font-size: 1.8em; color: var(--sphf-accent-dark); }
.sphf-survey .sphf-survey-nps__parts { display: flex; height: 1em; border-radius: var(--sphf-pill); overflow: hidden; background: var(--sphf-zone); }
.sphf-survey .sphf-survey-nps__part { display: block; width: var(--sphf-survey-w, 0%); height: 100%; }
.sphf-survey .sphf-survey-nps__part--promoters { background: var(--sphf-ok); }
.sphf-survey .sphf-survey-nps__part--passives { background: var(--sphf-warn); }
.sphf-survey .sphf-survey-nps__part--detractors { background: var(--sphf-danger); }
.sphf-survey .sphf-survey-nps__legend { display: flex; flex-wrap: wrap; gap: .4em 1.2em; margin: .5em 0 0; padding: 0; list-style: none; font-size: var(--sphf-mini); color: var(--sphf-muted); }
.sphf-survey .sphf-survey-nps__legend li { background: transparent; }
.sphf-survey .sphf-survey-nps__legend li::before { content: ''; display: inline-block; width: .7em; height: .7em; margin-right: .35em; border-radius: 50%; background: currentColor; }
.sphf-survey .sphf-survey-nps__legend .sphf-survey-nps__part--promoters::before { background: var(--sphf-ok); }
.sphf-survey .sphf-survey-nps__legend .sphf-survey-nps__part--passives::before { background: var(--sphf-warn); }
.sphf-survey .sphf-survey-nps__legend .sphf-survey-nps__part--detractors::before { background: var(--sphf-danger); }
@media (max-width: 36em) {
	.sphf-survey .sphf-survey-bars__row { grid-template-columns: 1fr 4.5em; }
	.sphf-survey .sphf-survey-bars__label { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ Camembert, anneau, colonnes, tableau */

/* Huit teintes pour les parts d'un camembert, toutes déclinées de l'accent (foncé, clair, vers le fond de carte
   ou vers le texte) : aucune couleur écrite, et des voisines contrastées. Une part reçoit sa teinte par
   data-sphf-survey-c="1…8" (PHP ne connaît pas les couleurs). */
.sphf-survey .sphf-survey-results {
	--sphf-survey-c1: var(--sphf-accent-dark);
	--sphf-survey-c2: color-mix(in srgb, var(--sphf-accent) 45%, var(--sphf-card));
	--sphf-survey-c3: var(--sphf-accent);
	--sphf-survey-c4: color-mix(in srgb, var(--sphf-accent) 22%, var(--sphf-card));
	--sphf-survey-c5: color-mix(in srgb, var(--sphf-accent-dark) 55%, var(--sphf-text));
	--sphf-survey-c6: color-mix(in srgb, var(--sphf-accent) 70%, var(--sphf-card));
	--sphf-survey-c7: color-mix(in srgb, var(--sphf-accent) 45%, var(--sphf-text));
	--sphf-survey-c8: var(--sphf-accent-soft);
}
.sphf-survey [data-sphf-survey-c="1"] { --sphf-survey-ci: var(--sphf-survey-c1); }
.sphf-survey [data-sphf-survey-c="2"] { --sphf-survey-ci: var(--sphf-survey-c2); }
.sphf-survey [data-sphf-survey-c="3"] { --sphf-survey-ci: var(--sphf-survey-c3); }
.sphf-survey [data-sphf-survey-c="4"] { --sphf-survey-ci: var(--sphf-survey-c4); }
.sphf-survey [data-sphf-survey-c="5"] { --sphf-survey-ci: var(--sphf-survey-c5); }
.sphf-survey [data-sphf-survey-c="6"] { --sphf-survey-ci: var(--sphf-survey-c6); }
.sphf-survey [data-sphf-survey-c="7"] { --sphf-survey-ci: var(--sphf-survey-c7); }
.sphf-survey [data-sphf-survey-c="8"] { --sphf-survey-ci: var(--sphf-survey-c8); }

.sphf-survey .sphf-survey-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 1.75em; margin: 0 0 .5em; }
.sphf-survey .sphf-survey-pie__svg { flex: 0 0 11em; width: 11em; height: 11em; overflow: visible; }
/* Un filet de la couleur de la carte sépare deux parts de teintes proches. */
.sphf-survey .sphf-survey-pie__slice { fill: var(--sphf-survey-ci, var(--sphf-accent)); stroke: var(--sphf-card); stroke-width: 1; }
/* Réponses ordonnées (échelle, étoiles, NPS) : dégradé du clair au foncé selon la position de la part (variable posée par PHP). */
.sphf-survey .sphf-survey-pie--seq .sphf-survey-pie__slice { fill: color-mix(in srgb, var(--sphf-accent-dark) var(--sphf-survey-seq, 100%), var(--sphf-accent-soft)); }
.sphf-survey .sphf-survey-pie--seq .sphf-survey-legend__dot { background: color-mix(in srgb, var(--sphf-accent-dark) var(--sphf-survey-seq, 100%), var(--sphf-accent-soft)); }
.sphf-survey .sphf-survey-pie__total { fill: var(--sphf-text); font-family: var(--sphf-font); font-size: 15px; font-weight: 700; }
.sphf-survey .sphf-survey-legend { flex: 1 1 12em; list-style: none; margin: 0; padding: 0; font-size: var(--sphf-mini); }
.sphf-survey .sphf-survey-legend__item { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .6em; margin: 0 0 .35em; }
.sphf-survey .sphf-survey-legend__dot { margin-top: calc(.25em - 1px); width: .85em; height: .85em; border-radius: 50%; background: var(--sphf-survey-ci, var(--sphf-accent)); border: 1px solid var(--sphf-line); }
.sphf-survey .sphf-survey-legend__label { color: var(--sphf-text); line-height: 1.35; overflow-wrap: anywhere; }
.sphf-survey .sphf-survey-legend__value { line-height: 1.35; color: var(--sphf-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sphf-survey .sphf-survey-legend__value small { color: var(--sphf-muted); }

.sphf-survey .sphf-survey-cols { display: flex; align-items: flex-end; gap: .5em; margin: 0 0 .5em; }
.sphf-survey .sphf-survey-cols__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: var(--sphf-small); }
.sphf-survey .sphf-survey-cols__value { color: var(--sphf-text); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.sphf-survey .sphf-survey-cols__value small { display: block; color: var(--sphf-muted); font-size: var(--sphf-mini); }
.sphf-survey .sphf-survey-cols__track { display: flex; align-items: flex-end; width: 100%; max-width: 3.5em; height: 8em; background: var(--sphf-zone); border-radius: var(--sphf-radius-s); overflow: hidden; }
.sphf-survey .sphf-survey-cols__bar { display: block; width: 100%; height: var(--sphf-survey-h, 0%); background: var(--sphf-accent); border-radius: var(--sphf-radius-s) var(--sphf-radius-s) 0 0; }
.sphf-survey .sphf-survey-cols__label { color: var(--sphf-text); font-size: var(--sphf-mini); line-height: 1.3; text-align: center; overflow-wrap: anywhere; }

.sphf-survey .sphf-survey-table { width: 100%; margin: 0 0 .5em; border-collapse: collapse; font-size: var(--sphf-small); color: var(--sphf-text); }
.sphf-survey .sphf-survey-table th,
.sphf-survey .sphf-survey-table td { padding: .4em .6em; border-bottom: 1px solid var(--sphf-line); text-align: left; vertical-align: top; }
.sphf-survey .sphf-survey-table thead th { color: var(--sphf-muted); font-size: var(--sphf-mini); font-weight: 650; text-transform: none; letter-spacing: 0; }
.sphf-survey .sphf-survey-table tfoot th,
.sphf-survey .sphf-survey-table tfoot td { border-bottom: 0; font-weight: 700; }
.sphf-survey .sphf-survey-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 36em) {
	.sphf-survey .sphf-survey-pie__svg { flex-basis: 9em; width: 9em; height: 9em; }
	.sphf-survey .sphf-survey-cols { gap: .25em; }
	.sphf-survey .sphf-survey-cols__value small { display: none; }
}

/* ---- Bulles d'info : le mot est un bouton qui ouvre son explication ---- */
.sphf-survey .sphf-survey-tip { position: relative; display: inline; }
.sphf-survey .sphf-survey-tip__term { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; line-height: inherit; text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }
.sphf-survey .sphf-survey-tip__term::after { content: "i"; content: "i" / ""; display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; margin-left: .2em; border: 2px solid var(--sphf-accent-dark); border-radius: 50%; color: var(--sphf-accent-dark); font-size: .7em; font-style: normal; font-weight: 700; line-height: 1; vertical-align: .35em; }
.sphf-survey .sphf-survey-tip__term:focus-visible { outline: 2px solid var(--sphf-accent); outline-offset: 2px; }
.sphf-survey .sphf-survey-tip__box { position: absolute; top: calc(100% + .4em); left: 0; z-index: 20; display: block; width: max-content; max-width: min(22em, calc(100vw - 16px)); padding: .6em .8em; border: 1px solid var(--sphf-line); border-radius: var(--sphf-radius-s); background: var(--sphf-card); box-shadow: var(--sphf-shadow); color: var(--sphf-text); font-size: var(--sphf-small); font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; }
.sphf-survey .sphf-survey-tip__box[hidden] { display: none; }
/* Mise en forme saisie dans l'éditeur (gras, italique, souligné) */
.sphf-survey .sphf-survey-step__text { min-width: 0; }
.sphf-survey .sphf-survey-step__label strong, .sphf-survey .sphf-survey-step__label b, .sphf-survey .sphf-survey-screen__title strong, .sphf-survey .sphf-survey-screen__title b { font-weight: 800; }
.sphf-survey u { text-decoration: underline; text-underline-offset: .15em; }

/* ------------------------------------------------------------------ Rapport à imprimer (PDF) */

.sphf-survey--report .sphf-survey-report__tools,
.sphf-survey--report .sphf-survey-report__head { max-width: 60em; margin-left: auto; margin-right: auto; }
.sphf-survey--report .sphf-survey-report__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; margin: 0 auto 1.5em; font-size: var(--sphf-small); color: var(--sphf-muted); }
.sphf-survey--report .sphf-survey-report__head { margin: 0 auto 1.5em; padding: 0 0 1em; border-bottom: 2px solid var(--sphf-accent); }
.sphf-survey--report .sphf-survey-report__title { margin: 0 0 .4em; }
.sphf-survey--report .sphf-survey-report__facts { margin: 0; padding: 0; list-style: none; color: var(--sphf-text); }
.sphf-survey--report .sphf-survey-results__texts > summary { pointer-events: none; list-style: none; font-weight: 700; }
@media print {
	@page { margin: 15mm; }
	.sphf-survey--report { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.sphf-survey--report .sphf-survey-report__tools { display: none; }
	/* Un bloc de question n'est pas coupé entre deux pages, sauf s'il est plus long qu'une page. */
	.sphf-survey--report .sphf-survey-results__q { break-inside: avoid; page-break-inside: avoid; }
	.sphf-survey--report .sphf-survey-results__label,
	.sphf-survey--report .sphf-survey-bars__row,
	.sphf-survey--report .sphf-survey-pie,
	.sphf-survey--report .sphf-survey-results__text { break-inside: avoid; }
	.sphf-survey--report .sphf-survey-results__label { break-after: avoid; }
	/* Le titre d'une question reste avec sa première sous-question. */
	.sphf-survey--report .sphf-survey-results__theme { break-after: avoid-page; }
}

/* ------------------------------------------------------------------ Réponses en liste (réglage du sondage) */

/* L'une sous l'autre, en pastilles basses sur fond doux (beaucoup de réponses tiennent à l'écran) ; un rond, ou un carré
   (réglage du sondage), remplace la lettre, qui reste utilisable au clavier. Oui / Non garde ses deux boutons côte à côte. */
.sphf-survey .sphf-survey-form--list .sphf-survey-choices:not(.sphf-survey-choices--yesno) { grid-template-columns: 1fr; gap: .4em; }
.sphf-survey .sphf-survey-form--list .sphf-survey-choices:not(.sphf-survey-choices--yesno) .sphf-survey-choice { gap: .8em; padding: .5em 1.1em; border-width: 1px; border-color: transparent; border-radius: var(--sphf-pill); background: var(--sphf-zone); font-size: .95em; line-height: 1.3; }
.sphf-survey .sphf-survey-form--list .sphf-survey-choices:not(.sphf-survey-choices--yesno) .sphf-survey-choice:hover { border-color: var(--sphf-accent); }
.sphf-survey .sphf-survey-form--list .sphf-survey-choices:not(.sphf-survey-choices--yesno) .sphf-survey-choice__key { width: 1.15em; min-width: 0; height: 1.15em; padding: 0; border: 2px solid color-mix(in srgb, var(--sphf-muted) 70%, var(--sphf-card)); border-radius: 50%; background: var(--sphf-card); color: transparent; font-size: 1em; overflow: hidden; }
.sphf-survey .sphf-survey-form--square .sphf-survey-choices:not(.sphf-survey-choices--yesno) .sphf-survey-choice__key { border-radius: .2em; }
.sphf-survey .sphf-survey-form--list .sphf-survey-choices:not(.sphf-survey-choices--yesno) .sphf-survey-choice.is-selected,
.sphf-survey .sphf-survey-form--list .sphf-survey-choices:not(.sphf-survey-choices--yesno) .sphf-survey-choice:has(input:checked) { border-color: var(--sphf-accent); background: var(--sphf-accent-soft); }
.sphf-survey .sphf-survey-form--list .sphf-survey-choices:not(.sphf-survey-choices--yesno) .sphf-survey-choice.is-selected .sphf-survey-choice__key,
.sphf-survey .sphf-survey-form--list .sphf-survey-choices:not(.sphf-survey-choices--yesno) .sphf-survey-choice:has(input:checked) .sphf-survey-choice__key { border-color: var(--sphf-accent); background: var(--sphf-accent); box-shadow: inset 0 0 0 .18em var(--sphf-card); color: transparent; }

/* « Précédent » et « Suivant » (mosaïque comme liste) de même taille, centrés sur la largeur ; le rappel « appuyez sur Entrée »
   reste à droite de « Suivant », dans la marge, sans compter dans le centrage (grille à deux marges égales). */
.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-step__nav { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; column-gap: .75em; }
.sphf-survey .sphf-survey-step__nav .sphf-survey-prev { grid-column: 2; }
.sphf-survey .sphf-survey-step__nav .sphf-btn--primary { grid-column: 3; }
.sphf-survey .sphf-survey-step__nav .sphf-survey-hint { grid-column: 4; justify-self: start; }
.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-step__nav:not(:has(.sphf-survey-prev)) { grid-template-columns: 1fr auto 1fr; }
.sphf-survey .sphf-survey-step__nav:not(:has(.sphf-survey-prev)) .sphf-btn--primary { grid-column: 2; }
.sphf-survey .sphf-survey-step__nav:not(:has(.sphf-survey-prev)) .sphf-survey-hint { grid-column: 3; }
.sphf-survey .sphf-survey-step__nav .sphf-btn { justify-content: center; min-width: 10em; padding: .8em 1.5em; font-size: 1em; }
@media (max-width: 36em) {
	/* Petit écran : les deux boutons se partagent la largeur, le rappel clavier passe dessous. */
	.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-step__nav { grid-template-columns: 1fr 1fr; row-gap: .5em; }
	.sphf-survey .sphf-survey-step__nav .sphf-survey-prev { grid-column: 1; }
	.sphf-survey .sphf-survey-step__nav .sphf-btn--primary { grid-column: 2; }
	.sphf-survey.sphf--js.sphf-survey--steps .sphf-survey-step__nav:not(:has(.sphf-survey-prev)) { grid-template-columns: 1fr; }
	.sphf-survey .sphf-survey-step__nav:not(:has(.sphf-survey-prev)) .sphf-btn--primary { grid-column: 1; }
	.sphf-survey .sphf-survey-step__nav .sphf-survey-hint { grid-column: 1 / -1; justify-self: center; }
	.sphf-survey .sphf-survey-step__nav .sphf-btn { min-width: 0; padding: .8em 1em; }
}