/* ==========================================================================
   Parcours public : accueil, profil, affirmations, résultat.
   Mobile d'abord. Aucun chiffre n'est affiché au répondant.
   ========================================================================== */

/* =============================================================== 1. ACCUEIL */

/* Ordre imposé sur mobile : badge, titre, texte, bouton, mention, illustration.
   Le bouton doit rester visible sans défiler sur un écran de 390 x 800. */
.hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 20px 32px;
}

.hero__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.hero__texte > p,
.hero__texte > h1 { align-self: stretch; }

.hero__titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hero__intro {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--taupe);
  max-width: 560px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  align-self: stretch;
  margin-top: 6px;
}

.compteur {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--foret);
  /* Invisible jusqu'à ce que l'API ait répondu : sinon la valeur de repli
     s'affiche une fraction de seconde, puis saute au vrai chiffre. On garde
     la place pour que rien ne bouge au moment où il apparaît. */
  opacity: 0;
  transition: opacity .3s ease;
}

.compteur--pret { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .compteur { transition: none; }
}

.compteur__point {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--croissance);
  box-shadow: 0 0 0 4px rgba(143, 168, 120, .25);
  flex-shrink: 0;
}

.compteur strong { font-weight: 600; }

/* Quand un état des lieux a déjà été fait sur cet appareil : on le propose,
   au lieu de laisser repartir de zéro sans le savoir. */
.deja-fait {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--encre-douce, var(--encre));
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.deja-fait__voir {
  color: var(--foret);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Les deux actions du haut du résultat : garder, et revenir sur ses réponses.
   Elles passent l'une sous l'autre quand la place manque. */
.resultat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Haut d'une étape du parcours : titre, intro, puis les mêmes repères que
   l'accueil. On les redonne ici parce que c'est le moment où l'on demande des
   informations sur soi, et donc celui où l'on hésite. */
.haut-etape {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}

.haut-etape + .formulaire { margin-top: 28px; }

.haut-etape .intro { margin: 0; }

.haut-etape .compteur { margin-top: 2px; }

.haut-etape .reperes { margin-top: 0; }

/* Les trois repères de réassurance. Chacun porte sa coche : en une seule ligne
   grise sous le bouton, ils se lisaient comme une mention légale. */
.reperes {
  /* Un peu d'air après le bouton : les repères se lisent après lui, pas avec. */
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.repere {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--foret);
}

.repere__coche {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--voile);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.repere__coche::before {
  content: '';
  width: 4px;
  height: 8px;
  border: solid var(--sauge-fonce);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* L'illustration des quatre pousses. */
.hero__illustration {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__illustration svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* Sous 900px, les étiquettes internes du SVG laissent la place à des pastilles
   HTML : à cette taille, le texte du SVG deviendrait minuscule. */
@media (max-width: 899px) {
  .pousses__etiquettes { display: none; }
}

/* Les 4 niveaux doivent tenir sur une seule ligne à 390px : d'où le petit
   rembourrage et la répartition sur toute la largeur, comme la maquette. */
.nuancier {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
}

.nuancier .pastille { font-size: 12px; padding: 4px 9px; }

@media (min-width: 900px) {
  .nuancier--mobile { display: none; }
}

/* ------------------------------------------------- les deux « pourquoi » */

.pourquoi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 0 20px 40px;
}

.pourquoi__carte {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pourquoi__carte--foret {
  background: var(--foret);
  border-color: var(--foret);
  color: var(--creme);
}

.surtitre {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sauge);
}

.surtitre--clair { color: #B9C6AB; }

.pourquoi__titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.pourquoi__carte--foret .pourquoi__titre { color: var(--creme); }

.pourquoi__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pourquoi__liste li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.55;
}

.pourquoi__puce {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 6px;
}

.pourquoi__texte {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--creme-foret);
}

.pourquoi__source {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #B9C6AB;
}

.pourquoi__source a { color: var(--creme); }

/* ----------------------------------------- ce que vous recevez en 2 minutes */

.section {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section--blanche { background: var(--blanc); }

.section__titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  margin: 0;
  font-size: 28px;
}

.recevez {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.recevez__texte {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recevez__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 48px;
  margin-top: 16px;
}

.point {
  border-top: 1px solid rgba(138, 155, 122, .25);
  padding: 20px 0 8px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}

.point__numero {
  font-size: 26px;
  color: var(--sauge-clair);
  line-height: 1;
}

.point__corps { display: flex; flex-direction: column; gap: 6px; }

.point__titre {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
}

.point__texte {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--taupe);
}

/* La carte d'aperçu du résultat. */
.apercu {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apercu__entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.apercu__titre {
  font-size: 14px;
  font-weight: 600;
  color: var(--foret);
}

.apercu__mention { font-size: 13px; color: var(--taupe); }

.apercu__lignes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apercu__ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 15px;
}

.apercu__pied {
  border-top: 1px solid rgba(138, 155, 122, .25);
  padding-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--taupe);
}

/* ------------------------------------------ sur quoi repose l'état des lieux */

.sources {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.sources__texte {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sources__texte p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--taupe); }
.sources__texte p.mention { font-size: 14px; }

.sources__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.dimensions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}

.dimensions .carte {
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 500;
}

.appel {
  padding: 0 20px 40px;
  display: flex;
  flex-direction: column;
  /* gap : sans lui, deux boutons se touchaient et se lisaient comme un bloc. */
  gap: 12px;
}

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 56px;
    padding: 40px 80px 64px;
    align-items: center;
  }
  .hero__texte { gap: 22px; }
  .hero__titre { font-size: 54px; line-height: 1.08; }
  .hero__intro { font-size: 19px; }
  /* wrap : avec deux boutons et le compteur, la ligne doit pouvoir se replier. */
  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; }

  .pourquoi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 0 80px 72px;
  }
  .pourquoi__carte { padding: 32px; }
  .pourquoi__titre { font-size: 28px; }
  .pourquoi__liste li { font-size: 17px; }
  .pourquoi__texte { font-size: 17px; }

  .section { padding: 72px 80px; gap: 40px; }
  .section__titre { font-size: 40px; }

  .recevez {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 72px;
  }
  .recevez__points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; }
  .point { padding: 24px 0 8px; grid-template-columns: 56px minmax(0, 1fr); }
  .point__numero { font-size: 28px; }
  .point__titre { font-size: 22px; }

  .apercu { padding: 32px; gap: 20px; }
  .apercu__lignes { gap: 20px; }

  .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Côte à côte dès qu'il y a la place, comme en haut de page. */
  .appel { padding: 0 80px 72px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
}

/* ================================================================ 2. PROFIL */

.formulaire {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Un bloc de choix. Ni fieldset ni legend : WebKit sortait l'intitulé du flux
   et l'écart déclaré ici ne s'appliquait pas, l'intitulé se retrouvant collé à
   ses choix. Un simple div avec role="radiogroup" se met en page normalement. */
.champ {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--rayon-champ);
  transition: box-shadow .2s ease;
}

/* Mis en évidence quand il manque une réponse. */
.champ--manquant {
  box-shadow: 0 0 0 2px var(--sauge);
  padding: 12px;
  margin: -12px;
}

/* Une affirmation qu'on a oubliée. */
.affirmation--manquante {
  box-shadow: 0 0 0 2px var(--sauge);
}

.champ__intitule {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.champ__facultatif {
  font-weight: 400;
  font-size: 15px;
  color: var(--taupe);
}

.pilules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Les tranches de taille, en 2 colonnes égales : une par ligne donnait une
   liste interminable sur mobile. */
.pilules--colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pilules--colonnes .pilule {
  justify-content: center;
  text-align: center;
  padding: 0 12px;
}

.pilule {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--bordure-forte);
  background: var(--blanc);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}

.pilule input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.pilule:has(input:checked) {
  background: var(--sauge-fonce);
  border-color: var(--sauge-fonce);
  color: var(--blanc);
}

.pilule:has(input:focus-visible) {
  outline: var(--focus);
  outline-offset: 2px;
}

/* --------------------------------------------- Le choix du secteur

   La liste vit dans le flux, sous le champ : en surimpression, elle recouvrait
   la suite du formulaire et le bouton « Continuer ». */

.secteur-recherche {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recherche { position: relative; }

.recherche__loupe {
  position: absolute;
  left: 16px;
  top: 16px;
  pointer-events: none;
}

.champ-texte {
  width: 100%;
  min-height: var(--hauteur-bouton);
  border-radius: var(--rayon-champ);
  border: 1px solid var(--bordure-forte);
  padding: 0 16px;
  font-size: 16px;
  font-family: inherit;
  background: var(--blanc);
  color: var(--encre);
}

.champ-texte::placeholder { color: #8F8984; }

.recherche .champ-texte { padding-left: 48px; }

/* Environ 6 lignes, puis la liste défile sur elle-même. */
.secteurs {
  --lignes-visibles: 6;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  max-height: calc(var(--lignes-visibles) * 48px);
  overflow-y: auto;
  background: var(--blanc);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-champ);
}

.secteurs__ligne { min-width: 0; }

.secteurs__choix {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  color: var(--encre);
  text-align: left;
  cursor: pointer;
}

.secteurs__choix:hover,
.secteurs__ligne--survol .secteurs__choix {
  background: var(--voile);
}

.secteurs__choix:focus-visible { outline: var(--focus); outline-offset: -2px; }

/* Le rond de sélection. La ligne choisie porte une coche. */
.secteurs__rond {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--bordure-forte);
  background: var(--blanc);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.secteurs__ligne[aria-selected='true'] .secteurs__choix {
  background: var(--vert-pale);
  font-weight: 500;
}

.secteurs__ligne[aria-selected='true'] .secteurs__rond {
  background: var(--sauge-fonce);
  border-color: var(--sauge-fonce);
}

.secteurs__ligne[aria-selected='true'] .secteurs__rond::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid var(--blanc);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.secteurs__nom { min-width: 0; }
.secteurs__nom strong { font-weight: 600; }

.secteurs__vide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px;
  font-size: 15px;
  color: var(--taupe);
}

.bouton-doux {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--bordure-forte);
  background: var(--blanc);
  font-family: inherit;
  font-size: 15px;
  color: var(--encre);
  cursor: pointer;
}

.bouton-doux:hover { background: var(--vert-pale); }

/* Une fois le secteur choisi, la liste laisse la place à une pastille. */
.secteur-choisi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.secteur-choisi__valeur {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--sauge-fonce);
  color: var(--blanc);
  font-size: 15px;
  font-weight: 500;
}

/* Barre de navigation bas de page */
.titre-bloc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 16px;
}

/* « Ce qu'on cherche à comprendre », avant la première affirmation. */
.cadre-etude {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.cadre-etude__lignes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte-doux);
}

.cadre-etude__lignes strong { font-weight: 600; }

/* Pourquoi on s'intéresse à ce groupe d'affirmations.
   Nom distinct de .pourquoi, qui désigne déjà les deux cartes de l'accueil :
   celles-ci sont en grille, et la ligne y perdait sa continuité. */
.contexte-groupe {
  margin: -6px 0 4px;
  /* Un filet sauge sur toute la hauteur du texte : l'œil repère d'un coup
     ce qui est du contexte et ce qui est une affirmation. */
  border-left: 4px solid var(--sauge-clair);
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--taupe);
}

.contexte-groupe__prefixe {
  font-weight: 600;
  color: var(--sauge-fonce);
}

/* Le petit encouragement de mi-parcours. */
.mi-parcours {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--vert-pale);
}

.mi-parcours__pousse {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.mi-parcours p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--foret);
}

/* Ce qui attend la personne, juste avant le bouton final. */
.avant-resultat {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.avant-resultat__promesse {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
  color: var(--encre);
}

.avant-resultat__mention {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--taupe);
}

/* Le récapitulatif du bas. Aucun chiffre de réponse, seulement ce qui reste. */
.recapitulatif {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--taupe);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.recapitulatif--reste { color: #8A5A2B; }

.navigation {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  align-items: stretch;
  margin-top: 24px;
  margin-bottom: 8px;
}

.navigation__fin {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  align-items: stretch;
}

/* « Passer » : les relances restent facultatives, sans peser visuellement. */
/* Tous les liens et boutons secondaires gardent 44px de haut au doigt. */
.lien-discret {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 0;
  background: none;
  padding: 0 4px;
  font-family: inherit;
  font-size: 15px;
  color: var(--sauge-fonce);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lien-discret:hover { color: var(--foret); }

.navigation__retour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 15px;
  align-self: center;
}

.message {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #8A5A2B;
}

.message[hidden] { display: none; }

@media (min-width: 900px) {
  .formulaire { padding: 40px; gap: 32px; }
  /* Assez de largeur pour deux colonnes de secteurs. */
  .secteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champ__intitule { font-size: 18px; }
  /* Assez de place en largeur : les tranches reprennent leur fil. */
  .pilules--colonnes { display: flex; }
  .pilules--colonnes .pilule { padding: 0 20px; }
  .navigation {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .navigation__retour { align-self: auto; }
}

/* ========================================================== 3. AFFIRMATIONS */

/* Collante en haut de l'écran : l'avancée reste visible tout du long.
   La pousse de gauche grandit, l'arbre de droite est le but. Aucun chiffre.
   Sa hauteur sert de repère au défilement automatique. */
:root { --hauteur-progression: 44px; }

.progression {
  position: sticky;
  /* Juste sous le bandeau Greatly, qui est fixé. */
  top: calc(var(--hauteur-demo, 0px) + var(--hauteur-bandeau));
  z-index: 4;
  min-height: var(--hauteur-progression);
  /* 36px de pousse + 6px de marge + 1px de filet : 43px au total, sous la
     limite de 44px fixée pour le mobile. */
  padding: 3px 16px;
  box-sizing: border-box;
  /* Blanc, et non crème : le disque des pousses est crème lui aussi, il
     disparaîtrait sur un fond de la même couleur. */
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
}

/* Le fond traverse l'écran, mais la graine et l'arbre suivent la colonne de
   lecture : sinon ils se retrouvent aux deux bords, loin du texte. */
.progression__interieur {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.progression__pousse,
.progression__but {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  transition: opacity .2s ease;
}

.progression__pousse--change { opacity: 0; }

/* Le but reste discret : c'est un horizon, pas un objectif à atteindre. */
.progression__but { opacity: .45; }

.progression__piste {
  flex: 1 1 auto;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  background: var(--voile);
  overflow: hidden;
}

/* L'affirmation visée par le défilement se place sous les bandeaux et la jauge. */
.affirmation {
  scroll-margin-top: calc(
    var(--hauteur-demo, 0px) + var(--hauteur-bandeau) + var(--hauteur-progression) + 16px
  );
}

/* Toujours sauge : ce n'est pas un score, la jauge ne reprend jamais les
   couleurs du résultat. */
.progression__jauge {
  height: 100%;
  width: 0;
  background: var(--sauge-clair);
  border-radius: 999px;
  transition: width .25s ease;
}

/* Le formulaire porte l'écart entre les cartes. Avec le margin du titre de
   groupe, on obtient 36px avant un titre et 16px après, comme la maquette. */
.questionnaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.groupe {
  margin: 16px 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--foret);
}

.affirmation {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.affirmation__texte {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
}

/* Les 4 réponses sur une seule ligne, même sur mobile : en 2 x 2, on lisait
   « Pas du tout, Plutôt pas » puis « Plutôt, Tout à fait », et la progression
   d'une réponse à l'autre se perdait. */
.echelle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.echelle__choix {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--hauteur-bouton);
  padding: 4px 3px;
  border-radius: var(--rayon-champ);
  border: 1px solid var(--bordure-forte);
  background: var(--blanc);
  color: var(--encre);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  overflow-wrap: break-word;
}

/* Une coche discrète : la couleur ne doit jamais être le seul repère.
   Elle est posée dans le coin, hors du flux, pour ne pas voler de la largeur
   au libellé, déjà à l'étroit sur mobile. */
.echelle__coche {
  position: absolute;
  top: 6px;
  left: 6px;
  opacity: 0;
  transition: opacity .15s ease;
}

.echelle__choix[aria-pressed='true'] .echelle__coche { opacity: 1; }

.echelle__coche::before {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Contour plus épais au clavier, pour qui navigue sans souris. */
.echelle__choix:focus-visible {
  outline: 3px solid var(--sauge-fonce);
  outline-offset: 2px;
}

.echelle__choix[aria-pressed='true'] {
  background: var(--sauge-fonce);
  border-color: var(--sauge-fonce);
  color: var(--blanc);
}

/* La question « J'aimerais… » s'ouvre sous les boutons de réponse, dans la même
   carte. L'enveloppe porte l'animation de hauteur : rien ne bouge au-dessus.
   Plus de <fieldset> ni de <legend> : un role="group" et un intitulé ordinaire
   donnent la même accessibilité sans les bizarreries de mise en page. */
.relance-enveloppe {
  overflow: hidden;
  margin-top: 4px;
}

.relance {
  padding: 16px;
  border-radius: 12px;
  background: var(--sable-clair);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.relance__question {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--encre);
}

.relance__question strong { font-weight: 600; }

.relance__suivant {
  align-self: flex-start;
  padding: 10px 0;
  min-height: 44px;
}

.relance__sous-titre {
  font-weight: 400;
  font-size: 14px;
  color: var(--taupe);
  margin-left: 8px;
  white-space: nowrap;
}

.relance__choix {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choix {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--bordure-forte);
  background: var(--blanc);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}

/* Lignes pleine largeur : en pilules, les choix passaient sur 2 lignes sur
   mobile et devenaient illisibles. */
.choix--ligne {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 12px;
}

.choix input {
  width: 18px;
  height: 18px;
  accent-color: var(--sauge-fonce);
  flex-shrink: 0;
}

.choix:has(input:checked) {
  border-color: var(--sauge-fonce);
  background: var(--vert-pale);
}

.choix:has(input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}

.choix:has(input:focus-visible) {
  outline: var(--focus);
  outline-offset: 2px;
}

@media (min-width: 560px) {
  .echelle { gap: 10px; }
  .echelle__choix { padding: 4px 10px; font-size: 14px; }
  .echelle__coche { top: 8px; left: 10px; }
}

@media (min-width: 900px) {
  .groupe { font-size: 26px; margin-top: 20px; }
  .contexte-groupe { font-size: 15px; }
  .cadre-etude { padding: 22px 26px; }
  .avant-resultat__promesse { font-size: 22px; }
  .titre-bloc { margin: 32px 0 16px; }
  .navigation__fin { flex-direction: row; align-items: center; gap: 20px; }
  .affirmation { padding: 28px 32px; }
  .affirmation__texte { font-size: 19px; }
  .echelle__choix { font-size: 16px; }
  .relance { padding: 20px 22px; }
}

/* ============================================================== 4. RÉSULTAT */

.resultat__entete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Le bloc visé par « Garder mon résultat » se place sous le haut de l'écran. */
#lien-personnel {
  scroll-margin-top: calc(var(--hauteur-demo, 0px) + var(--hauteur-bandeau) + 16px);
}

.resultat__titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  margin: 0;
  font-size: 34px;
}

.ensemble {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sur mobile le médaillon passe au-dessus de l'étiquette, centré. */
.ensemble__principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ensemble__medaillon {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.ensemble__haut {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  align-self: stretch;
}

.ensemble__etiquette {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.ensemble__titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
}

.ensemble p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--texte-doux);
}

/* Les bandes de couleur, empilés sur toute la largeur de la carte.
   En colonnes, le texte était serré et les hauteurs très inégales. */
.bandes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bande {
  background: var(--blanc);
  border-radius: var(--rayon-bloc);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bande__entete {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bande__pousse {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.bande__niveau { font-size: 16px; font-weight: 600; }

.bande__corps { padding: 4px 18px 8px; }

/* Une ligne par dimension, séparée par un filet fin. */
.bande__ligne {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
}

.bande__ligne + .bande__ligne {
  border-top: 1px solid rgba(138, 155, 122, .2);
}

.bande__nom {
  font-size: 16px;
  font-weight: 600;
  color: var(--encre);
}

.bande__droite {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bande__phrase {
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte-doux-2);
}

/* La mise en perspective, quand assez de personnes ont répondu.
   Jamais de chiffre : seulement ce que la personne partage avec les autres. */
.bande__perspective {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sauge-fonce);
  font-style: italic;
}

/* Les idées de la personne, là où elles se rapportent.
   Rien d'autre que le surtitre et la phrase : ce sont des idées, pas des
   problèmes, et on n'y ajoute ni empathie ni conseil. */
.idees {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #F7F1E3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.idees__titre {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7A5424;
}

.idees__phrase {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--encre);
}

/* L'encadré de l'affirmation 16 vit sous la dernière bande, seul. */
[data-idees-resultats] .idees { margin-top: 0; }

/* Une seule ligne sobre, sans encadré. */
.ligne-idees {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte-doux);
}

/* Garder son résultat : un seul bloc, une seule action principale. */
.garder {
  padding: 24px 22px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px 16px;
  align-items: start;
}

.garder__pousse {
  width: 48px;
  height: 48px;
}

.garder__corps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.garder__titre {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}

.garder__texte {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--taupe);
}

.garder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Le pied : voir le lien, et le raccourci de favoris. */
.garder__pied {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 14px;
  color: var(--taupe);
}

.garder__favoris[hidden] { display: none; }

/* Faire connaître l'état des lieux : une invitation discrète, en pointillé,
   pour qu'on la distingue des blocs de contenu. */
.carte-pointillee {
  border: 1px dashed var(--sauge-clair);
  border-radius: var(--rayon-carte);
  background: transparent;
}

.partage {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.partage__texte {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--taupe);
  max-width: 760px;
}

/* Bloc Greatly */
.greatly {
  background: var(--foret);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  color: var(--creme);
}

.greatly__photo {
  margin: 0;
  position: relative;
  min-height: 220px;
}

.greatly__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(25%) saturate(70%) brightness(.95) hue-rotate(15deg);
}

.greatly__texte {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.greatly__sur-titre {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #CBD6BF;
}

.greatly__titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  margin: 0;
  font-size: 28px;
}

.greatly p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--creme-foret);
}

.greatly .btn { align-self: flex-start; margin-top: 8px; }

/* Formulaire de l'étude complète */
.etude {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Texte secondaire, comme partout ailleurs. */
.etude > p { color: var(--taupe); }

.etude__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.etude__champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.etude__intitule { font-size: 15px; font-weight: 500; }

.consentement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--taupe);
}

.consentement input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--sauge-fonce);
  flex-shrink: 0;
}

/* Champ piège anti-robots : invisible, et jamais annoncé aux lecteurs d'écran. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mention-finale {
  margin: 0 0 48px;
  font-size: 13px;
  color: var(--taupe);
  text-align: center;
}

.vide {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* L'URL brute reste disponible, repliée : elle est longue et peu lisible. */
.lien-perso__details { min-width: 0; }

.lien-perso__details summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--sauge-fonce);
  cursor: pointer;
}

.lien-perso__details summary:hover { color: var(--foret); }

/* Replié, le champ doit vraiment disparaître : les navigateurs ne masquent pas
   tous le contenu d'un <details> fermé de la même façon. */
.lien-perso__details:not([open]) .champ-texte { display: none; }

.lien-perso__details[open] .champ-texte { margin-top: 8px; width: 100%; }

@media (min-width: 560px) {
  .etude__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bloc Greatly */
.greatly {
  background: var(--foret);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  color: var(--creme);
}

.greatly__photo {
  margin: 0;
  position: relative;
  min-height: 220px;
}

.greatly__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(25%) saturate(70%) brightness(.95) hue-rotate(15deg);
}

.greatly__texte {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.greatly__sur-titre {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #CBD6BF;
}

.greatly__titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  margin: 0;
  font-size: 28px;
}

.greatly p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--creme-foret);
}

.greatly .btn { align-self: flex-start; margin-top: 8px; }

/* Formulaire de l'étude complète */
.etude {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Texte secondaire, comme partout ailleurs. */
.etude > p { color: var(--taupe); }

.etude__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.etude__champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.etude__intitule { font-size: 15px; font-weight: 500; }

.consentement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--taupe);
}

.consentement input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--sauge-fonce);
  flex-shrink: 0;
}

/* Champ piège anti-robots : invisible, et jamais annoncé aux lecteurs d'écran. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mention-finale {
  margin: 0 0 48px;
  font-size: 13px;
  color: var(--taupe);
  text-align: center;
}

.vide {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

@media (min-width: 560px) {
  .etude__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .resultat__titre { font-size: 48px; }
  .ensemble { padding: 36px 40px; gap: 28px; }
  /* Sur ordinateur, le médaillon se place à droite du texte. */
  .ensemble__principal { flex-direction: row; gap: 36px; }
  .ensemble__medaillon { width: 180px; height: 180px; order: 2; }

  /* Assez de largeur : le nom de la dimension passe à gauche de sa phrase. */
  .bande__entete { padding: 12px 24px; }
  .bande__corps { padding: 4px 24px 8px; }
  .bande__ligne {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: baseline;
  }
  .idees__phrase { font-size: 19px; }
  .ensemble__haut { flex: 1; }
  .ensemble__etiquette { padding: 6px 14px; font-size: 14px; }
  .ensemble__titre { font-size: 34px; }
  .ensemble p { font-size: 17px; }
  
  .bloc { padding: 32px; }
  .bloc__titre { font-size: 28px; }
  .greatly { grid-template-columns: 300px minmax(0, 1fr); }
  .greatly__photo { min-height: 360px; }
  .partage { padding: 24px 32px; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }

  .garder { padding: 32px; grid-template-columns: 64px minmax(0, 1fr); gap: 16px 24px; }
  .garder__pousse { width: 64px; height: 64px; }
  .garder__titre { font-size: 28px; }

  .greatly__texte { padding: 40px 44px; }
  .greatly__titre { font-size: 30px; }
  .etude { padding: 36px 40px; }
  .etude__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}