/* Le test — par-dessus la feuille de la page fondateurs (même nuit, mêmes jetons).
   Une question par écran, une jauge en demi-cercle, trois constats, une suite. */

.test { max-width: 860px; }
.t-appel { padding: 32px 0 60px; }
.t-appel h1 { margin: 22px 0 18px; font-size: clamp(40px, 6.4vw, 78px); line-height: 1; font-weight: 700; }
.t-appel .accroche { max-width: 620px; }
.t-axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 40px; }
.t-axe { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--carte); transition: transform var(--ui); }
.t-axe:hover { transform: translateY(-2px); }
.t-axe:hover .jeton { animation: flotter 3s ease-in-out infinite; }
.t-axe b { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.t-axe span { font-size: 13.5px; color: var(--gris); }

.t-preuve { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.t-preuve span { display: flex; align-items: baseline; gap: 8px; }
.t-preuve { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-2); font-weight: 500; }
.t-preuve b { color: var(--encre); font-weight: 600; font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.t-cta { display: flex; align-items: center; gap: 36px; margin-top: 40px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- le questionnaire */
.t-quiz { padding: 24px 0 80px; }
.t-barre { height: 3px; border-radius: 999px; background: var(--raise); overflow: hidden; }
.t-barre i { display: block; height: 100%; width: 0; background: var(--bleu); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.t-etape { margin: 16px 0 26px; }
.t-carte { animation: venir .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes venir { from { opacity: 0; transform: translateY(14px); } }
.t-carte h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; max-width: 760px; }
.t-carte .mono.aide { display: block; margin-top: 10px; }

.t-reponses { display: grid; gap: 8px; margin-top: 28px; max-width: 620px; }
.t-reponses.deux { grid-template-columns: 1fr 1fr; max-width: 420px; }
.t-choix { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); color: var(--encre); font-size: 16px; text-align: left; cursor: pointer; transition: border-color var(--ui), background var(--ui), transform var(--snap); }
.t-choix:hover { border-color: var(--encre); transform: translateY(-1px); }
.t-choix.pris { border-color: var(--bleu); background: var(--lavis); }
.t-choix .touche { font-size: 11px; font-weight: 500; color: var(--gris-2); border: 1px solid var(--bord); border-radius: 6px; padding: 2px 7px; }
.t-choix.deux { justify-content: center; font-size: 18px; font-weight: 600; padding: 20px; }

.t-contact { display: grid; gap: 10px; margin-top: 28px; max-width: 460px; }
.t-contact input, .t-contact textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--bord-fort); border-radius: 12px; background: var(--carte); color: var(--encre); outline: none; font: inherit; }
.t-contact input::placeholder, .t-contact textarea::placeholder { color: var(--gris-2); }
.t-contact input:focus, .t-contact textarea:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--lavis); }
.t-contact input.mal { border-color: var(--rouge); }
.t-contact textarea { min-height: 110px; resize: vertical; }
.t-contact .mono { margin-top: -4px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; }

.t-pied { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.t-pied .lien-doux { color: var(--gris-2); font-size: 14px; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; }
.t-pied .lien-doux:hover { color: var(--encre); }

/* ---------------------------------------------------------------- le résultat */
.t-resultat { padding: 24px 0 60px; }
.r-reveal { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 18px; padding: 32px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--carte); box-shadow: var(--ombre); }
.jauge-ronde { position: relative; }
.jauge-ronde svg { width: 100%; display: block; }
.jauge-ronde path { fill: none; stroke-width: 14; stroke-linecap: round; }
.jauge-ronde .fond { stroke: var(--sable-2); }
.jauge-ronde .plein { stroke: var(--ocre); stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1), stroke .4s ease; }
.jauge-ronde.froid .plein { stroke: var(--terre); }
.jauge-ronde.chaud .plein { stroke: var(--sauge); }
.r-chiffre { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; }
.r-chiffre b { display: block; font-size: 68px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--encre); }
.r-chiffre span { font-size: 12px; letter-spacing: .08em; color: var(--gris-2); }
.r-texte h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.06; }
.r-texte p { margin-top: 14px; color: var(--gris); font-size: 16.5px; }

.r-constats { margin-top: 40px; }
.r-constats ol { list-style: none; counter-reset: c; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.r-constats li { counter-increment: c; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 22px; border: 1px solid var(--bord); border-radius: var(--r); background: var(--carte); color: var(--gris); font-size: 15px; line-height: 1.5; animation: rouler .7s cubic-bezier(.2, .8, .2, 1) both; }
.r-constats li:nth-child(2) { animation-delay: .12s; } .r-constats li:nth-child(3) { animation-delay: .24s; }
.r-constats li .jeton { --d: 44px; --ep: 5px; }
.r-constats li > div { min-width: 0; }
.r-constats li b { display: block; color: var(--encre); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.r-constats li span { display: block; }

.r-suite { position: relative; overflow: hidden; margin-top: 40px; padding: 32px; border-radius: var(--r); background: var(--encre); color: #fff; }
.r-pile { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); display: flex; }
.r-pile .jeton { --d: 96px; --ep: 10px; margin-left: -34px; animation: flotter 6s ease-in-out infinite; }
.r-pile .jeton:nth-child(2) { animation-delay: -2s; --d: 84px; --ep: 9px; } .r-pile .jeton:nth-child(3) { animation-delay: -4s; --d: 72px; --ep: 8px; }
.r-suite > :not(.r-pile) { position: relative; max-width: 560px; }
.r-suite .mono { color: rgba(255, 255, 255, .55); }
.r-suite .cta { background: #fff; color: var(--encre); border-color: #fff; }
.r-suite .cta:hover { background: var(--lavis); border-color: var(--lavis); }
.r-suite .cta.fantome { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.r-suite .cta.fantome:hover { border-color: #fff; background: transparent; }
.r-suite h3 { margin: 10px 0 10px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; }
.r-suite p:not(.mono) { color: rgba(255, 255, 255, .78); font-size: 15.5px; max-width: 620px; }
.r-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.r-place { margin-top: 18px; display: flex; align-items: baseline; gap: 12px; }
.r-place b { font-size: 30px; letter-spacing: -.03em; }
.r-place b span { color: #fff; }

@media (max-width: 900px) {
  .t-axes { grid-template-columns: 1fr; gap: 6px; }
  .t-axe { padding: 16px 18px; }
  .t-axe b { font-size: 22px; }
  .t-cta { gap: 20px; }
  .t-reponses.deux { grid-template-columns: 1fr 1fr; }
  .r-reveal { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .r-pile { display: none; }
  .r-constats li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 16px; }
  .jauge-ronde { max-width: 280px; margin: 0 auto; }
  .r-texte { text-align: center; }
  .t-cta .cta { width: 100%; }
}