/* Le parcours d'entrée : huit questions, le compte, le chiffre, la formule, le CV.
   Un seul écran à la fois. Sur téléphone, ça remplit l'appareil. Sur ordinateur,
   ordi.css en fait une page plein écran (plus une fenêtre au format téléphone). */

html.parcours-ouvert, html.parcours-ouvert body { overflow: hidden; }
html.parcours-ouvert #maxx-consentement { display: none !important; }
#maxx-parcours {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--bg); color: var(--ink);
  padding: env(safe-area-inset-top) 0 max(16px, env(safe-area-inset-bottom));
  opacity: 0; translate: 0 24px;
  transition: opacity 320ms ease, translate 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#maxx-parcours[hidden] { display: none; }
#maxx-parcours.on { opacity: 1; translate: 0 0; }
#maxx-parcours > header {
  display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 14px;
  padding: 10px 16px 0 16px; transition: opacity 300ms ease;
}
#maxx-parcours .fermer {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
  color: var(--muted); font-size: 20px; line-height: 1; padding: 0; display: grid; place-items: center;
}
#maxx-parcours .segments { list-style: none; margin: 0 8px 0 0; padding: 0; display: flex; gap: 6px; }
#maxx-parcours .segments li { flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
#maxx-parcours .segments li::after { content: ""; position: absolute; inset: 0; background: var(--accent); scale: 0 1; transform-origin: left; transition: scale 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
#maxx-parcours .segments .fait::after { scale: 1 1; }
#maxx-parcours .segments .ici::after { scale: 1 1; background: var(--ink); animation: segment-respire 1.6s ease-in-out infinite; }
@keyframes segment-respire { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
#maxx-parcours.au-splash .segments { opacity: 0; }
#maxx-parcours .aurore {
  position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 32% at 22% 28%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(30% 28% at 78% 72%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 70%);
  filter: blur(30px); animation: aurore 18s ease-in-out infinite alternate;
}
@keyframes aurore { 0% { translate: 0 0; rotate: 0deg; } 100% { translate: 8% 10%; rotate: 20deg; } }
#maxx-parcours > header, #maxx-parcours .etapes-parcours, #maxx-parcours footer { position: relative; z-index: 1; }
#maxx-parcours .splash { display: grid; align-content: center; justify-items: center; text-align: center; gap: 22px; padding-top: 24px; }
#maxx-parcours .noeud-splash { width: 84px; height: 78px; background: var(--noeud) center / contain no-repeat; animation: splash-nait 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) both, holo-tourne 16s 1400ms linear infinite; }
#maxx-parcours .noeud-splash.petit { width: 56px; height: 52px; margin: 0 auto 22px; display: block; }
@keyframes splash-nait { 0% { opacity: 0; scale: 0.5; rotate: -30deg; filter: blur(6px); } 100% { opacity: 1; scale: 1; rotate: 0deg; filter: blur(0); } }
#maxx-parcours .splash h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 31px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); text-transform: none; animation: splash-monte 900ms 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#maxx-parcours .splash h1 em { font-style: italic; color: var(--accent); }
#maxx-parcours .splash .question { width: 100%; text-align: left; margin-top: 18px; animation: splash-monte 900ms 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#maxx-parcours .splash .question h2 { font-size: 22px; margin-bottom: 14px; }
@keyframes splash-monte { 0% { opacity: 0; translate: 0 14px; } 100% { opacity: 1; translate: 0 0; } }
#maxx-parcours .aide { margin: -12px 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
#maxx-parcours .avant { text-align: center; padding-top: 30px; }
#maxx-parcours .avant .aide { margin: -10px 0 0; }
#maxx-parcours .avant[hidden] { display: none; }
#maxx-parcours h2.ensuite { margin-top: 30px; }
#maxx-parcours section.on .puces button { animation: puce-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 80ms); }
#maxx-parcours .splash.on .puces button { animation-delay: calc(var(--i, 0) * 45ms + 1250ms); }
@keyframes puce-arrive { 0% { opacity: 0; translate: 0 10px; scale: 0.96; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
#maxx-parcours .puces button.pop { animation: puce-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1.3) !important; }
#maxx-parcours .rythme { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
#maxx-parcours .puces.petites button { padding: 8px 16px; font-size: 14px; font-variant-numeric: tabular-nums; }
#maxx-parcours .et-puis.pop { animation: phrase-pop 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes phrase-pop { 0% { opacity: 0; translate: 0 6px; } 100% { opacity: 1; translate: 0 0; } }
#maxx-parcours .grand b { animation: chiffre-nait 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes chiffre-nait { 0% { opacity: 0; scale: 0.8; filter: blur(4px); } 100% { opacity: 1; scale: 1; filter: blur(0); } }
#maxx-parcours footer { transition: opacity 300ms ease, translate 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
#maxx-parcours footer.discret { opacity: 0; translate: 0 12px; pointer-events: none; }
#maxx-parcours .zero { margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
#maxx-parcours .zero b { font-family: var(--serif); font-weight: 500; font-size: 52px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
#maxx-parcours .zero span { font-family: var(--serif); font-size: 20px; color: var(--accent); }
#maxx-parcours .etapes-parcours { position: relative; overflow: hidden; overflow: clip; }
#maxx-parcours section[data-etape] {
  position: absolute; inset: 0; padding: 32px 24px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; translate: 48px 0; scale: 0.985; pointer-events: none;
  transition: opacity 380ms ease, translate 520ms cubic-bezier(0.2, 0.8, 0.2, 1), scale 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#maxx-parcours section.on { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }
#maxx-parcours section.gauche { translate: -48px 0; }
#maxx-parcours .kicker { margin: 0 0 10px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); display: flex; align-items: baseline; gap: 10px; }
#maxx-parcours .kicker.centre { justify-content: center; margin-top: 14px; }
#maxx-parcours .kicker .modifier { margin-left: auto; background: none; border: 0; padding: 0; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
#maxx-parcours h2 {
  margin: 0 0 24px; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em;
  text-transform: none; color: var(--ink);
}
#maxx-parcours .puces { display: flex; flex-wrap: wrap; gap: 8px; }
#maxx-parcours .puces button {
  padding: 11px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
#maxx-parcours .puces button.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
#maxx-parcours .puces button.pop { animation: puce-pop 380ms cubic-bezier(0.2, 0.8, 0.2, 1.2); }
@keyframes puce-pop { 0% { scale: 1; } 40% { scale: 1.08; } 100% { scale: 1; } }
#maxx-parcours .libre {
  margin-top: 16px; width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 16px;
}
#maxx-parcours .libre:focus { outline: 0; border-color: var(--accent); }
#maxx-parcours footer { padding: 8px 24px 0; display: grid; gap: 8px; }
#maxx-parcours .suivant { width: 100%; transition: opacity 200ms ease; }
#maxx-parcours .suivant:disabled { opacity: 0.35; }
#maxx-parcours footer .second { background: none; border: 0; padding: 6px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; }
#maxx-parcours footer .second[hidden] { display: none; }
#maxx-parcours footer .mention { margin: 0; text-align: center; font-size: 11.5px; color: var(--muted); min-height: 1em; }
#maxx-parcours .cherche { padding-top: 90px !important; gap: 10px !important; justify-items: start !important; }
#maxx-parcours .pourcent { margin: 0; display: flex; align-items: baseline; gap: 4px; }
#maxx-parcours .pourcent b { font-family: var(--serif); font-weight: 500; font-size: 72px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
#maxx-parcours .pourcent span { font-family: var(--serif); font-size: 28px; color: var(--accent); }
#maxx-parcours .prep-titre { margin: 0 0 14px; font-family: var(--serif); font-size: 22px; color: var(--ink); }
#maxx-parcours .prep { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; }
#maxx-parcours .prep li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); transition: color 400ms ease; }
#maxx-parcours .prep li b { color: inherit; font-weight: 600; }
#maxx-parcours .prep li i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); position: relative; transition: background 300ms ease, border-color 300ms ease; }
#maxx-parcours .prep li i::after { content: ""; position: absolute; left: 6px; top: 5px; width: 8px; height: 4px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); rotate: -45deg; opacity: 0; scale: 0.6; transition: opacity 200ms ease 120ms, scale 300ms cubic-bezier(0.2, 0.8, 0.2, 1.4) 120ms; }
#maxx-parcours .prep li.ok { color: var(--ink); }
#maxx-parcours .prep li.ok i { background: var(--ink); border-color: var(--ink); animation: puce-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1.3); }
#maxx-parcours .prep li.ok i::after { opacity: 1; scale: 1; }
#maxx-parcours .bravo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
#maxx-parcours .bravo .kicker { margin: 0; color: var(--accent); }
#maxx-parcours .coche { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#maxx-parcours .coche circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
#maxx-parcours .coche path { stroke-dasharray: 34; stroke-dashoffset: 34; }
#maxx-parcours .trouve.in .coche circle { animation: trace 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
#maxx-parcours .trouve.in .coche path { animation: trace 400ms 500ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
#maxx-parcours .cherche, #maxx-parcours .lit { display: grid; justify-items: center; gap: 18px; padding-top: 140px; color: var(--muted); font-size: 14px; }
#maxx-parcours .cherche[hidden], #maxx-parcours .lit[hidden], #maxx-parcours .trouve[hidden], #maxx-parcours .pret[hidden], #maxx-parcours .rate[hidden] { display: none; }
#maxx-parcours .noeud-mini {
  width: 56px; height: 52px; background: var(--noeud) center / contain no-repeat;
  animation: holo-tourne 1.6s cubic-bezier(0.55, 0.05, 0.25, 1) infinite;
}
#maxx-parcours .grand { margin: 0; display: flex; align-items: baseline; gap: 10px; }
#maxx-parcours .grand b { font-family: var(--serif); font-weight: 500; font-size: 64px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
#maxx-parcours .grand span { font-family: var(--serif); font-size: 26px; color: var(--accent); }
#maxx-parcours .sous { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
#maxx-parcours .exemples { list-style: none; margin: 18px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
#maxx-parcours .exemples li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line);
  opacity: 0; translate: 0 10px; transition: opacity 500ms ease, translate 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#maxx-parcours .trouve.in .exemples li { opacity: 1; translate: 0 0; }
#maxx-parcours .exemples b { font-size: 14px; font-weight: 500; color: var(--ink); }
#maxx-parcours .exemples .ex-texte { display: grid; gap: 2px; min-width: 0; }
#maxx-parcours .exemples .ex-texte span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#maxx-parcours .exemples .lettre { position: relative; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.35); }
#maxx-parcours .exemples .lettre em { font-style: normal; font-family: var(--serif); font-size: 18px; color: var(--degrade-b); }
#maxx-parcours .exemples .lettre .logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; opacity: 0; transition: opacity 300ms ease; }
#maxx-parcours .exemples .lettre.a-logo .logo { opacity: 1; }
#maxx-parcours .exemples .lettre.a-logo em { opacity: 0; }
#maxx-parcours .et-puis { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); min-height: 1.5em; }
#maxx-parcours .anneau { position: relative; width: 132px; height: 132px; margin: 6px auto 0; }
#maxx-parcours .anneau svg { width: 100%; height: 100%; rotate: -90deg; }
#maxx-parcours .anneau circle { fill: none; stroke-width: 7; }
#maxx-parcours .anneau .fond { stroke: var(--line); }
#maxx-parcours .anneau .trait { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1500ms cubic-bezier(0.2, 0.8, 0.2, 1); }
#maxx-parcours .anneau-centre { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; gap: 2px; padding-top: 44px; }
#maxx-parcours .anneau-centre b { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
#maxx-parcours .anneau-centre span { font-family: var(--serif); font-size: 18px; color: var(--accent); }
#maxx-parcours .anneau-sous { margin: 6px 0 20px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
#maxx-parcours .completer { display: block; margin: -8px auto 18px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
#maxx-parcours .completer[hidden] { display: none; }
#maxx-parcours .accueil-essai .essai-vu { margin: 0; }
#maxx-parcours .accueil-essai .essai-suite { display: none; }
#maxx-parcours .accueil-essai .essai-champs { max-height: none; overflow: visible; }
#maxx-parcours .rate h2 { font-size: 24px; margin-bottom: 18px; }
#maxx-parcours .porte-tel { margin-top: 6px; }
#maxx-parcours .porte-tel .entree { margin-top: 0; opacity: 1; translate: 0; transition-delay: 0s; animation: entree-pop 0.5s var(--gentle); }
#maxx-parcours .porte-tel .attente { margin-top: 0; }
#maxx-parcours .compte .attente { margin-top: 4px; max-width: none; }
#maxx-parcours .compte .porte-tel[hidden] { display: none; }
#maxx-parcours .porte-tel .entree-essai { display: none; }
#maxx-parcours .suivant[hidden] { display: none; }
@keyframes holo-tourne {
  0%   { transform: translateY(0) rotateY(0deg) rotateX(10deg); }
  50%  { transform: translateY(-6px) rotateY(180deg) rotateX(10deg); }
  100% { transform: translateY(0) rotateY(360deg) rotateX(10deg); }
}
#maxx-parcours > header { grid-template-columns: 36px auto 1fr; }
#maxx-parcours .retour { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 24px; line-height: 1; padding: 0 0 3px; display: grid; place-items: center; }
#maxx-parcours .retour[hidden] { display: none; }
#maxx-parcours .numero { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
#maxx-parcours .splash .numero { display: none; }
#maxx-parcours .porte-tel { display: grid; gap: 10px; }
#maxx-parcours .porte-tel input { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: 16px; }
#maxx-parcours .porte-tel input:focus { outline: 0; border-color: var(--accent); }
#maxx-parcours .porte-mdp-ligne { position: relative; }
#maxx-parcours .porte-mdp-ligne input { padding-right: 52px; }
#maxx-parcours .porte-mdp-ligne .voir, #nouveau-mdp .porte-mdp-ligne .voir { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); display: grid; place-items: center; }
#nouveau-mdp .porte-mdp-ligne { position: relative; }
#nouveau-mdp .porte-mdp-ligne input { padding-right: 52px; }
.porte-mdp-ligne .voir svg { width: 20px; height: 20px; }
.porte-mdp-ligne .voir .o-ferme { display: none; }
.porte-mdp-ligne .voir.montre .o-ferme { display: block; }
.porte-mdp-ligne .voir.montre .o-ouvert { display: none; }
.porte-mdp-ligne .voir:hover { color: var(--ink); }
/* la feuille « nouveau mot de passe » */
#nouveau-mdp { position: fixed; inset: 0; z-index: 4100; display: grid; place-items: end center; padding: 16px; background: color-mix(in srgb, var(--ink) 40%, transparent); opacity: 0; transition: opacity 260ms ease; }
#nouveau-mdp.on { opacity: 1; }
#nouveau-mdp .nm-boite { width: min(440px, 100%); display: grid; gap: 10px; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px; background: var(--paper, #fff); translate: 0 24px; transition: translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
#nouveau-mdp.on .nm-boite { translate: 0 0; }
#nouveau-mdp .lab { margin: 0; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
#nouveau-mdp h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.12; color: var(--ink); text-transform: none; letter-spacing: -0.01em; }
#nouveau-mdp .sous { margin: 0 0 4px; font-size: 13.5px; color: var(--muted); }
#nouveau-mdp input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 16px; }
#nouveau-mdp .primary { min-height: 52px; border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: 15px; }
#nouveau-mdp .nm-etat { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
#nouveau-mdp .nm-etat[data-ton="bad"] { color: #b3261e; }
#nouveau-mdp .nm-etat[data-ton="ok"] { color: var(--accent); }
#nouveau-mdp .text { background: none; border: 0; padding: 6px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; justify-self: center; }
@media (min-width: 901px) { #nouveau-mdp { place-items: center; } }
#maxx-parcours .porte-go { width: 100%; margin-top: 4px; }
#maxx-parcours .porte-etat { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
#maxx-parcours .porte-etat[data-ton="bad"] { color: #b3261e; }
#maxx-parcours .porte-etat[data-ton="ok"] { color: var(--accent); }
#maxx-parcours .porte-etat[hidden] { display: none; }
#maxx-parcours .porte-bascule, #maxx-parcours .porte-oublie { margin: 2px 0 0; text-align: center; }
#maxx-parcours .porte-oublie[hidden] { display: none; }
#maxx-parcours .porte-tel .text { background: none; border: 0; padding: 6px; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; }
#maxx-parcours .porte-tel .entree-mention-court, #maxx-parcours .courriel .entree-mention-court { margin: 8px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
#maxx-parcours .porte-tel .entree-mention-court a, #maxx-parcours .courriel .entree-mention-court a { color: inherit; }
#maxx-parcours .formules { padding-bottom: 150px !important; }
#maxx-parcours .formules-corps { display: grid; gap: 14px; }
#maxx-parcours .formules-attente { color: var(--muted); text-align: center; padding-top: 60px; }
#maxx-parcours .barre-remise { display: none; }
#maxx-parcours.avec-remise.sur-formule { grid-template-rows: auto auto 1fr auto; }
#maxx-parcours.avec-remise.sur-formule .barre-remise {
  display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; z-index: 2;
  margin-top: calc(-1 * env(safe-area-inset-top)); padding: calc(env(safe-area-inset-top) + 9px) 16px 9px;
  color: #fff; font-size: 13.5px; line-height: 1.2; white-space: nowrap;
  background: linear-gradient(100deg, var(--degrade-a), var(--degrade-b) 55%, var(--degrade-c));
  box-shadow: 0 8px 22px -14px var(--degrade-b);
}
#maxx-parcours .barre-remise .remise-pct { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
#maxx-parcours .barre-remise .remise-texte { opacity: 0.95; }
#maxx-parcours .barre-remise .compte-a-rebours { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; padding: 3px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.22); }
#maxx-parcours .formules h2 { margin: 6px 0 0; font-size: 28px; line-height: 1.12; }
#maxx-parcours .formules h2 em { font-style: italic; color: var(--accent); }
#maxx-parcours .chip-perso { margin: 0; justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
#maxx-parcours .essai-ligne { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
#maxx-parcours .geste-bloque { margin: 0; justify-self: start; padding: 8px 12px; border-radius: 10px; background: var(--accent-wash); border: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink); }
#maxx-parcours .essai-ligne b { color: var(--ink); font-weight: 600; }
#maxx-parcours .formules-titre { margin: 8px 0 -4px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
#maxx-parcours .cartes-formules { display: grid; gap: 10px; }
#maxx-parcours .carte-formule { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "duree prix" "detail detail"; gap: 2px 12px; align-items: center; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--paper); transition: border-color 200ms ease, box-shadow 200ms ease, scale 200ms ease; }
#maxx-parcours .carte-formule input { position: absolute; opacity: 0; pointer-events: none; }
#maxx-parcours .carte-formule.on { border-color: var(--ink); box-shadow: 0 16px 40px -28px color-mix(in srgb, var(--ink) 60%, transparent); }
/* « .avant » sert aussi à un autre écran (centré) : la carte mise en avant reste alignée comme les autres */
#maxx-parcours .carte-formule.avant { text-align: left; padding: 14px 16px; }
#maxx-parcours .carte-formule.avant.on { scale: 1.015; }
#maxx-parcours .carte-formule .ruban { position: absolute; top: -10px; left: 16px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
#maxx-parcours .carte-formule .duree { grid-area: duree; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#maxx-parcours .carte-formule .duree b { font-size: 17px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
#maxx-parcours .carte-formule .duree em { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); white-space: nowrap; }
#maxx-parcours .carte-formule .prix { grid-area: prix; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
#maxx-parcours .carte-formule .prix s { font-size: 13px; color: var(--muted); }
#maxx-parcours .carte-formule .prix b { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); }
#maxx-parcours .carte-formule .prix small { font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; }
#maxx-parcours .carte-formule .detail { text-transform: none; letter-spacing: 0; }
#maxx-parcours .carte-formule .detail { grid-area: detail; font-size: 12.5px; color: var(--muted); }
#maxx-parcours .carte-jour { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 8%, var(--paper)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
#maxx-parcours .carte-jour b { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); white-space: nowrap; }
#maxx-parcours .carte-jour span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
#maxx-parcours .apercu { padding: 14px 16px 12px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
#maxx-parcours .apercu-tete { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; color: var(--ink); }
#maxx-parcours .apercu-tete em { font-style: normal; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
#maxx-parcours .apercu-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#maxx-parcours .apercu-liste li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; }
#maxx-parcours .apercu-liste .lettre { position: relative; width: 36px; height: 36px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
#maxx-parcours .apercu-liste .lettre em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--ink); }
#maxx-parcours .apercu-liste .lettre img { position: absolute; inset: 6px; width: 24px; height: 24px; object-fit: contain; opacity: 0; }
#maxx-parcours .apercu-liste .lettre.a-logo img { opacity: 1; }
#maxx-parcours .apercu-liste .lettre.a-logo em { opacity: 0; }
#maxx-parcours .apercu-liste span { display: grid; min-width: 0; }
#maxx-parcours .apercu-liste span b { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#maxx-parcours .apercu-liste span small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#maxx-parcours .apercu-liste .etat { font-style: normal; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
#maxx-parcours .apercu-mention { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
#maxx-parcours .trois-pas { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#maxx-parcours .trois-pas li { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px 6px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
#maxx-parcours .trois-pas b { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12px; display: grid; place-items: center; }
#maxx-parcours .trois-pas span { font-size: 12px; line-height: 1.3; color: var(--ink); }
#maxx-parcours .gages-formule { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 12px; color: var(--muted); }
#maxx-parcours .gages-formule li::before { content: "✓ "; color: var(--accent); }
#maxx-parcours .cta-colle { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 12px 20px max(14px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); display: grid; gap: 6px; text-align: center; }
/* il n'apparaît qu'à l'écran de la formule ; ailleurs, il n'existe pas */
#maxx-parcours:not(.a-la-formule) .etapes-parcours > .cta-colle { display: none; }
#maxx-parcours .cta-ligne { margin: 0; font-size: 13px; color: var(--muted); }
#maxx-parcours .cta-ligne b { color: var(--ink); }
#maxx-parcours .cta-colle .payer { width: 100%; }
#maxx-parcours .cta-mention { margin: 0; font-size: 11.5px; color: var(--muted); }
#maxx-parcours .cta-colle .plus-tard { background: none; border: 0; padding: 4px; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; justify-self: center; }
#maxx-parcours.a-la-formule footer { display: none; }

/* après le paiement : le mot de passe seul, l'adresse est connue */
#maxx-parcours.mdp-seul .porte-email, #maxx-parcours.mdp-seul .porte-bascule, #maxx-parcours.mdp-seul .entree-mention-court { display: none; }
/* La formule en cours, sur l'écran Formules : ce qui est pris, ce qui sera prélevé, l'arrêt. */
#maxx-parcours .carte-abo { display: grid; gap: 12px; padding: 18px 18px 16px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); }
#maxx-parcours .carte-abo.arretee { border-style: dashed; }
#maxx-parcours .carte-abo .abo-prix { margin: 0; display: flex; align-items: baseline; gap: 8px; }
#maxx-parcours .carte-abo .abo-prix b { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.01em; }
#maxx-parcours .carte-abo .abo-prix small { font-size: 12.5px; color: var(--muted); }
#maxx-parcours .carte-abo .abo-etat { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
#maxx-parcours .carte-abo .abo-etat b { font-weight: 600; }
#maxx-parcours .carte-abo .abo-resilier { min-height: 46px; border-radius: 999px; border: 1px solid var(--line-strong, var(--line)); background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#maxx-parcours .carte-abo .abo-confirme { display: grid; gap: 10px; }
#maxx-parcours .carte-abo .abo-confirme p { margin: 0; font-size: 13px; color: var(--muted); }
#maxx-parcours .carte-abo .abo-actes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#maxx-parcours .carte-abo .abo-actes button { min-height: 46px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#maxx-parcours .carte-abo .abo-non { background: transparent; border: 1px solid var(--line-strong, var(--line)); color: var(--ink); }
#maxx-parcours .carte-abo .abo-oui { background: var(--bad); border: 1px solid var(--bad); color: #fff; }
#maxx-parcours .carte-abo .abo-question { margin: 4px 0 0 !important; font-size: 14px !important; font-weight: 600; color: var(--ink) !important; }
#maxx-parcours .carte-abo .abo-raisons { display: flex; flex-wrap: wrap; gap: 6px; }
#maxx-parcours .carte-abo .abo-raisons button { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong, var(--line)); background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
#maxx-parcours .carte-abo .abo-raisons button[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#maxx-parcours .carte-abo .abo-detail { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 14px; resize: vertical; }
#maxx-parcours .carte-abo .abo-oui:disabled { opacity: 0.4; cursor: default; }
#maxx-parcours .carte-abo .abo-erreur { margin: 0; font-size: 12.5px; color: var(--bad); }
#maxx-parcours .abo-changer { margin: 0; text-align: center; font-size: 12.5px; color: var(--muted); }
/* la case qui précède le paiement : conditions + démarrage immédiat (renonciation à la rétractation) */
#maxx-parcours .payer:disabled { opacity: 0.45; }

/* La conversation : MAXX répond, puis demande. Chaque bulle naît comme une goutte au
   bas de l'écran, monte, s'étire et se pose. La réponse choisie monte à droite. */
#maxx-parcours { --degrade-a: #2b59ff; --degrade-b: #7b3ff2; --degrade-c: #c13dd6; }
#maxx-parcours .question-etape { display: grid; align-content: start; }
#maxx-parcours .fil { display: grid; gap: 8px; margin: 4px 0 18px; min-height: 0; }
#maxx-parcours .goutte { margin: 0; max-width: 88%; padding: 12px 16px; font-size: 15px; line-height: 1.45; text-transform: none; letter-spacing: 0; }
#maxx-parcours .goutte[hidden] { display: none; }
#maxx-parcours .goutte.maxx { justify-self: start; border-radius: 22px 22px 22px 6px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); transform-origin: 0 100%; box-shadow: 0 14px 34px -26px color-mix(in srgb, var(--ink) 55%, transparent); }
#maxx-parcours .goutte.moi { justify-self: end; border-radius: 22px 22px 6px 22px; background: linear-gradient(135deg, var(--degrade-a), var(--degrade-b)); color: #fff; font-weight: 600; transform-origin: 100% 100%; animation: goutte 640ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
#maxx-parcours section.on .goutte.maxx { animation: goutte 760ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
#maxx-parcours .goutte.ecrite { animation: none !important; }
#maxx-parcours .goutte.maxx.ecrite { animation: goutte-ecrite 260ms ease both !important; }
@keyframes goutte {
  0% { opacity: 0; translate: 0 90px; scale: 0.18; border-radius: 50%; filter: blur(3px); }
  40% { opacity: 1; scale: 1.06 0.9; filter: blur(0); }
  65% { translate: 0 -5px; scale: 0.97 1.04; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes goutte-ecrite { 0% { opacity: 0.4; } 100% { opacity: 1; } }
#maxx-parcours .goutte .points { display: inline-flex; gap: 5px; padding: 4px 2px; }
#maxx-parcours .goutte .points i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: points 1s ease-in-out infinite; }
#maxx-parcours .goutte .points i:nth-child(2) { animation-delay: 0.15s; }
#maxx-parcours .goutte .points i:nth-child(3) { animation-delay: 0.3s; }
@keyframes points { 0%, 100% { opacity: 0.3; translate: 0 0; } 50% { opacity: 1; translate: 0 -3px; } }
#maxx-parcours .question-etape h2.q { margin-bottom: 20px; }
#maxx-parcours section.on h2.q { animation: splash-monte 620ms 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#maxx-parcours section.question-etape.on .puces button { animation-delay: calc(var(--i, 0) * 45ms + 420ms); }
/* L'écran de l'adresse, épuré : la promesse, un champ-pilule avec sa flèche dedans
   (visible même clavier ouvert), les mentions. Les domaines courants et la faute de
   frappe corrigée n'apparaissent qu'en tapant. La promesse se fait petite quand on tape. */
#maxx-parcours .courriel .question { margin-top: 10px; }
#maxx-parcours .courriel-ligne {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 6px;
  min-height: 60px; padding: 4px 4px 4px 18px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--degrade-b) 16%, var(--line-strong)); background: var(--paper);
  box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--degrade-b) 70%, transparent);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
#maxx-parcours .courriel-ligne:focus-within { border-color: color-mix(in srgb, var(--degrade-b) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--degrade-b) 12%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--degrade-b) 70%, transparent); }
#maxx-parcours .courriel-ligne.ok { border-color: color-mix(in srgb, var(--degrade-b) 45%, transparent); }
#maxx-parcours .courriel-ligne.faux { border-color: #b3261e; animation: courriel-secoue 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes courriel-secoue { 10%, 90% { translate: -1px 0; } 20%, 80% { translate: 2px 0; } 30%, 50%, 70% { translate: -4px 0; } 40%, 60% { translate: 4px 0; } }
#maxx-parcours .courriel-ligne .courriel-champ {
  margin: 0; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent;
  font-size: 17px; color: var(--ink); min-width: 0;
}
#maxx-parcours .courriel-ligne .courriel-champ:focus { outline: 0; border-color: transparent; }
#maxx-parcours .courriel-go {
  position: relative; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--degrade-a), var(--degrade-b) 70%, var(--degrade-c));
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--degrade-b) 85%, transparent);
  transition: opacity 220ms ease, scale 220ms cubic-bezier(0.2, 0.8, 0.2, 1.3), box-shadow 220ms ease;
}
#maxx-parcours .courriel-go svg { width: 22px; height: 22px; transition: opacity 180ms ease; }
#maxx-parcours .courriel-go:disabled { opacity: 0.28; box-shadow: none; scale: 0.92; }
#maxx-parcours .courriel-ligne.ok .courriel-go { animation: puce-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1.3); }
#maxx-parcours .courriel-go .tourne { display: none; position: absolute; inset: 11px; width: auto; height: auto; box-sizing: border-box; background: transparent; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: courriel-tourne 0.8s linear infinite; }
#maxx-parcours.courriel-attente .courriel-go { opacity: 1; scale: 1; pointer-events: none; }
#maxx-parcours.courriel-attente .courriel-go svg { opacity: 0; }
#maxx-parcours.courriel-attente .courriel-go .tourne { display: block; }
@keyframes courriel-tourne { to { rotate: 360deg; } }
/* une seule rangée qui défile du doigt : rien ne pousse les mentions hors de l'écran */
#maxx-parcours .courriel .question { min-width: 0; }
#maxx-parcours .courriel-domaines {
  display: flex; flex-wrap: nowrap; gap: 7px; margin: 10px 0 0; padding: 2px 28px 2px 0; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
#maxx-parcours .courriel-domaines::-webkit-scrollbar { display: none; }
#maxx-parcours .courriel-domaines[hidden] { display: none; }
#maxx-parcours .courriel-domaines button {
  flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--degrade-b) 18%, var(--line)); background: var(--paper);
  color: var(--ink); font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0;
  animation: puce-arrive 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 35ms);
}
#maxx-parcours .courriel-domaines button:active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
#maxx-parcours .courriel-suggere, #maxx-parcours .courriel-erreur { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); animation: splash-monte 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#maxx-parcours .courriel-suggere[hidden], #maxx-parcours .courriel-erreur[hidden] { display: none; }
#maxx-parcours .courriel-suggere .corriger { background: none; border: 0; padding: 0; font: inherit; color: var(--degrade-a); text-transform: none; letter-spacing: 0; }
#maxx-parcours .courriel-suggere .corriger b { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#maxx-parcours .courriel-erreur { color: #b3261e; }
#maxx-parcours .courriel .entree-mention-court { margin-top: 14px; color: color-mix(in srgb, var(--muted) 80%, var(--ink)); }
/* Au téléphone, l'écran de l'adresse se tient dans la moitié haute, posé une fois pour
   toutes : le clavier qui monte ne déplace rien, ne rétrécit rien, et ne cache ni le
   champ ni les mentions. */
@media (max-width: 900px) {
  #maxx-parcours .splash.courriel { align-content: start; gap: 16px; padding-top: clamp(16px, 5vh, 56px); }
  #maxx-parcours .splash.courriel .noeud-splash { width: 64px; height: 60px; }
  #maxx-parcours .splash.courriel h1 { font-size: 28px; }
  #maxx-parcours .splash.courriel .question { margin-top: 10px; }
}

/* Les formules : peu de mots, de la couleur, le prix de la semaine. */
#maxx-parcours .formules { padding-bottom: 170px !important; }
#maxx-parcours .formules h2 em { font-style: italic; background: linear-gradient(90deg, var(--degrade-a), var(--degrade-b) 60%, var(--degrade-c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#maxx-parcours .chip-perso { background: color-mix(in srgb, var(--degrade-a) 8%, var(--paper)); border-color: color-mix(in srgb, var(--degrade-a) 26%, transparent); }
#maxx-parcours .chip-perso b { font-weight: 700; color: var(--degrade-a); }
#maxx-parcours .cartes-formules { gap: 12px; margin-top: 6px; }
#maxx-parcours .carte-formule { padding: 16px 18px; border-radius: 20px; animation: carte-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes carte-arrive { 0% { opacity: 0; translate: 0 16px; } 100% { opacity: 1; translate: 0 0; } }
#maxx-parcours .carte-formule.on { border-color: transparent; background: linear-gradient(135deg, var(--degrade-a), var(--degrade-b) 70%, var(--degrade-c)); box-shadow: 0 22px 44px -24px color-mix(in srgb, #7b3ff2 75%, transparent); }
#maxx-parcours .carte-formule.on .duree b, #maxx-parcours .carte-formule.on .prix b { color: #fff; }
#maxx-parcours .carte-formule.on .prix small, #maxx-parcours .carte-formule.on .prix s, #maxx-parcours .carte-formule.on .detail { color: rgba(255, 255, 255, 0.78); }
#maxx-parcours .carte-formule.on .duree em { background: rgba(255, 255, 255, 0.2); color: #fff; }
#maxx-parcours .carte-formule .ruban { background: linear-gradient(90deg, #ff8a3d, #ff3d7f); }
#maxx-parcours .carte-formule .prix b { font-size: 26px; }
#maxx-parcours .gages-ligne { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
#maxx-parcours .cta-colle { gap: 8px; padding-top: 12px; }
#maxx-parcours .cta-colle .payer { min-height: 54px; border: 0; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--degrade-a), var(--degrade-b)); box-shadow: 0 16px 34px -18px color-mix(in srgb, #7b3ff2 80%, transparent); }
#maxx-parcours .cta-mention { font-size: 11px; line-height: 1.35; }
#maxx-parcours .cta-mention a { color: inherit; text-decoration: underline; }

/* Plus vivant : un ciel en couleur qui bouge, MAXX qui parle avec son visage, des choix
   illustrés qui se remplissent du dégradé et lâchent des étincelles, une barre de
   progression en couleur, des confettis quand le plan est prêt. */
#maxx-parcours .aurore {
  background:
    radial-gradient(34% 28% at 18% 22%, color-mix(in srgb, var(--degrade-a) 20%, transparent), transparent 70%),
    radial-gradient(30% 26% at 82% 38%, color-mix(in srgb, var(--degrade-c) 16%, transparent), transparent 70%),
    radial-gradient(36% 30% at 40% 86%, color-mix(in srgb, var(--degrade-b) 15%, transparent), transparent 70%);
  filter: blur(36px);
}
#maxx-parcours .segments li { background: color-mix(in srgb, var(--degrade-b) 12%, var(--line)); }
#maxx-parcours .segments li::after { background: linear-gradient(90deg, var(--degrade-a), var(--degrade-b)); }
#maxx-parcours .segments .ici::after { background: linear-gradient(90deg, var(--degrade-b), var(--degrade-c)); }
#maxx-parcours .goutte.maxx {
  position: relative; margin-left: 42px; border-color: color-mix(in srgb, var(--degrade-b) 18%, var(--line));
  background: color-mix(in srgb, var(--degrade-a) 4%, var(--paper));
}
#maxx-parcours .goutte.maxx::before {
  content: ""; position: absolute; left: -42px; bottom: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid transparent;
  background: var(--noeud) center / 19px no-repeat, linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, var(--degrade-a), var(--degrade-b), var(--degrade-c)) border-box;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--degrade-b) 70%, transparent);
}
#maxx-parcours .puces { gap: 9px; }
#maxx-parcours .puces button {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  border-color: color-mix(in srgb, var(--degrade-b) 16%, var(--line-strong));
  box-shadow: 0 6px 18px -14px color-mix(in srgb, var(--degrade-b) 60%, transparent);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, translate 220ms ease, box-shadow 220ms ease;
}
#maxx-parcours .puces button .emo { font-style: normal; font-size: 17px; line-height: 1; }
@media (hover: hover) {
  #maxx-parcours .puces button:hover { translate: 0 -2px; border-color: color-mix(in srgb, var(--degrade-b) 45%, transparent); box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--degrade-b) 70%, transparent); }
}
#maxx-parcours .puces button.on {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--degrade-a), var(--degrade-b) 70%, var(--degrade-c));
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--degrade-b) 85%, transparent);
}
#maxx-parcours .puces.petites button { min-width: 64px; justify-content: center; padding: 12px 18px; font-size: 17px; font-weight: 700; }
#maxx-parcours .etincelle {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; z-index: 2;
  animation: etincelle 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes etincelle { 0% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: 0.3; } }
#maxx-parcours .question-etape h2.q { font-size: 32px; }
#maxx-parcours .confettis { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
#maxx-parcours .confettis i {
  position: absolute; top: -14px; width: 8px; height: 12px; border-radius: 2px; opacity: 0;
  animation: confetti var(--t, 2s) var(--d, 0s) cubic-bezier(0.25, 0.6, 0.4, 1) forwards;
}
@keyframes confetti {
  0% { opacity: 1; translate: 0 0; rotate: 0deg; }
  85% { opacity: 1; }
  100% { opacity: 0; translate: var(--x, 0) 105vh; rotate: var(--r, 360deg); }
}
#maxx-parcours .coche { stroke: var(--degrade-b); }
#maxx-parcours .grand b { background: linear-gradient(90deg, var(--degrade-a), var(--degrade-b) 60%, var(--degrade-c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#maxx-parcours .pourcent b { background: linear-gradient(90deg, var(--degrade-a), var(--degrade-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#maxx-parcours .prep li.ok i { background: linear-gradient(135deg, var(--degrade-a), var(--degrade-b)); border-color: transparent; }
#maxx-parcours .suivant:not(:disabled) { border: 0; color: #fff; background: linear-gradient(135deg, var(--degrade-a), var(--degrade-b)); box-shadow: 0 16px 34px -18px color-mix(in srgb, #7b3ff2 80%, transparent); }

/* L'essai gratuit : « essayez gratuitement », puis deux formules à la semaine. */
#maxx-parcours .essai-titre { margin: 4px 0 0; font-size: 31px; line-height: 1.12; text-align: center; }
#maxx-parcours .essai-titre em { font-style: italic; background: linear-gradient(90deg, var(--degrade-a), var(--degrade-b) 60%, var(--degrade-c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#maxx-parcours .essai-photo { margin: -32px -24px 4px; height: 230px; border-radius: 0 0 30px 30px; overflow: hidden; position: relative; animation: splash-monte 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#maxx-parcours .essai-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
#maxx-parcours .essai-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to top, color-mix(in srgb, var(--bg) 35%, transparent), transparent); pointer-events: none; }
@media (max-width: 699px) {
  #maxx-parcours .essai-photo { height: 168px; margin-bottom: 0; }
  #maxx-parcours .essai-photo + .essai-titre { font-size: 26px; }
  #maxx-parcours .essai-photo ~ .essai-frise { margin-top: 6px; gap: 6px; }
  #maxx-parcours .essai-photo ~ .essai-frise i { width: 30px; height: 30px; font-size: 14px; }
  #maxx-parcours .essai-photo ~ .essai-frise li { grid-template-columns: 30px 1fr; }
  #maxx-parcours .essai-photo ~ .essai-frise::before { left: 18px; }
  #maxx-parcours .essai-photo ~ .essai-frise span { font-size: 12.5px; line-height: 1.3; }
  #maxx-parcours .essai-photo ~ .essai-cartes { margin-top: 4px; }
}
@media (max-width: 699px) {
  #maxx-parcours .essai-photo { height: 168px; margin-bottom: 0; }
  #maxx-parcours .essai-photo + .essai-titre { font-size: 26px; }
  #maxx-parcours .essai-photo ~ .essai-frise { margin-top: 6px; gap: 6px; }
  #maxx-parcours .essai-photo ~ .essai-frise i { width: 30px; height: 30px; font-size: 14px; }
  #maxx-parcours .essai-photo ~ .essai-frise li { grid-template-columns: 30px 1fr; }
  #maxx-parcours .essai-photo ~ .essai-frise::before { left: 18px; }
  #maxx-parcours .essai-photo ~ .essai-frise span { font-size: 12.5px; line-height: 1.3; }
  #maxx-parcours .essai-photo ~ .essai-cartes { margin-top: 4px; }
}
@media (min-width: 700px) {
  #maxx-parcours .essai-photo { margin: -8px 0 4px; height: 240px; border-radius: 26px; box-shadow: 0 24px 50px -30px rgba(40, 20, 90, 0.45); }
}
#maxx-parcours .essai-intro { display: grid; gap: 22px; padding-top: 18px; }
#maxx-parcours .essai-noeud { justify-self: center; width: 110px; height: 100px; }
#maxx-parcours .essai-offres { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
#maxx-parcours .essai-offres li {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px;
  background: var(--paper); border: 1px solid color-mix(in srgb, var(--degrade-b) 16%, var(--line));
  box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--degrade-b) 70%, transparent);
  animation: carte-arrive 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 140ms + 200ms);
}
#maxx-parcours .essai-offres .lettre { position: relative; width: 42px; height: 42px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); }
#maxx-parcours .essai-offres .lettre em { font-style: normal; font-family: var(--serif); font-size: 18px; color: var(--degrade-b); }
#maxx-parcours .essai-offres .lettre .logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; opacity: 0; }
#maxx-parcours .essai-offres .lettre.a-logo .logo { opacity: 1; }
#maxx-parcours .essai-offres .lettre.a-logo em { opacity: 0; }
#maxx-parcours .essai-offres span { display: grid; min-width: 0; }
#maxx-parcours .essai-offres b { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#maxx-parcours .essai-offres small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#maxx-parcours .essai-offres .pret-a { font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; color: #0f8a6a; background: color-mix(in srgb, #19c39c 16%, transparent); }
#maxx-parcours .essai-promesse { margin: 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--muted); }
#maxx-parcours .essai-sans { margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink); }
#maxx-parcours .essai-sans[hidden] { display: none; }
#maxx-parcours .essai-sans b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; color: #fff; background: linear-gradient(135deg, var(--degrade-a), var(--degrade-b)); }
#maxx-parcours .cta-colle .essai-essayer { width: 100%; min-height: 56px; border: 0; color: #fff; font-weight: 700; font-size: 16px; background: linear-gradient(135deg, var(--degrade-a), var(--degrade-b)); box-shadow: 0 16px 34px -18px color-mix(in srgb, #7b3ff2 80%, transparent); }
#maxx-parcours .essai-frise { list-style: none; margin: 18px 0 4px; padding: 0 4px; display: grid; gap: 12px; position: relative; }
#maxx-parcours .essai-frise::before { content: ""; position: absolute; left: 21px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: linear-gradient(var(--degrade-a), var(--degrade-c)); opacity: 0.35; }
#maxx-parcours .essai-frise li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; position: relative; }
#maxx-parcours .essai-frise i { font-style: normal; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 17px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--degrade-b) 20%, var(--line)); }
#maxx-parcours .essai-frise span { display: grid; font-size: 13px; line-height: 1.35; color: var(--muted); }
#maxx-parcours .essai-frise b { font-size: 14px; font-weight: 600; color: var(--ink); }
#maxx-parcours .essai-cartes { margin-top: 14px; gap: 12px; }
#maxx-parcours .carte-essai {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 16px; border-radius: 18px; border: 1.5px solid var(--line-strong); background: var(--paper); overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease; animation: carte-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 80ms);
}
#maxx-parcours .carte-essai input { position: absolute; opacity: 0; pointer-events: none; }
#maxx-parcours .carte-essai.a-tete { padding-top: 44px; }
#maxx-parcours .carte-essai .tete {
  position: absolute; left: 0; right: 0; top: 0; padding: 6px 0; text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; color: #fff;
  background: linear-gradient(90deg, var(--degrade-a), var(--degrade-b) 60%, var(--degrade-c));
}
#maxx-parcours .carte-essai .rond { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; }
#maxx-parcours .carte-essai.on { border-color: var(--degrade-b); box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--degrade-b) 80%, transparent); }
#maxx-parcours .carte-essai.on .rond { border-color: transparent; background: linear-gradient(135deg, var(--degrade-a), var(--degrade-b)); }
#maxx-parcours .carte-essai.on .rond::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; rotate: -45deg; }
#maxx-parcours .carte-essai .nom { display: grid; gap: 2px; min-width: 0; }
#maxx-parcours .carte-essai .nom b { font-size: 16px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
#maxx-parcours .carte-essai .nom small { font-size: 12.5px; color: var(--muted); }
#maxx-parcours .carte-essai .prix-sem { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
#maxx-parcours .carte-essai .prix-sem b { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); }
#maxx-parcours .carte-essai .prix-sem small { font-size: 11px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  #maxx-parcours .goutte, #maxx-parcours section.on .goutte.maxx, #maxx-parcours .carte-formule, #maxx-parcours section.on h2.q { animation: none !important; }
  #maxx-parcours .goutte .points i { animation: none; }
}

/* La récompense au bout de la barre : grise tant qu'on n'y est pas, vivante quand on arrive. */
#maxx-parcours .segments { align-items: center; }
#maxx-parcours .segments li.cadeau { flex: 0 0 auto; height: auto; background: none; overflow: visible; }
#maxx-parcours .segments li.cadeau::after { content: "🎁"; position: static; display: block; scale: none; background: none; animation: none;
  font-size: 15px; line-height: 1; filter: grayscale(1); opacity: .45; transition: filter .4s ease, opacity .4s ease; }
#maxx-parcours .segments li.cadeau.ici::after { filter: none; opacity: 1; animation: cadeau-saute 1.4s ease-in-out infinite; }
@keyframes cadeau-saute { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-3px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { #maxx-parcours .segments li.cadeau.ici::after { animation: none; } }

/* Pas de croix pendant le parcours ; elle reste sur les formules, pour regarder librement. */
#maxx-parcours:not(.sur-formule) header .fermer { display: none; }
#maxx-parcours:not(.sur-formule) > header { grid-template-columns: auto 1fr; }
#maxx-parcours:not(.sur-formule) > header .retour { grid-column: 1; }
#maxx-parcours:not(.sur-formule) > header .segments { grid-column: 2; min-height: 36px; }