/* K2F Consultant Performance. Feuille de styles unique, conçue mobile d'abord. */

:root {
  --bg: #000000;
  --panel: #0B0B0B;
  --card: #141414;
  --line: #212121;
  --green: #2BE08B;
  --green-deep: #0F3D2A;
  --white: #FFFFFF;
  --text: #D9DCDA;
  --muted: #8A8F8C;
  --red: #E85C5C;

  --mint: #6AFFBD;
  --red-deep: #3A1414;
  --red-line: rgba(232, 92, 92, 0.5);
  --dim: rgba(255, 255, 255, 0.42);
  --chip: rgba(255, 255, 255, 0.08);
  --chip-line: rgba(255, 255, 255, 0.12);

  --green-line: rgba(43, 224, 139, 0.45);
  --track: rgba(138, 143, 140, 0.35);

  --font-title: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: 20px;
  --header-h: 68px;
  /* Hauteur de la barre d'onglets, sous l'en tête. Nulle sur les pages qui n'en ont pas. */
  --nav-h: 0px;
  --section-gap: 96px;
  --radius: 16px;
  --measure: 68ch;
  --cycle-t: 14s;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  line-height: 1.02;
}

h2 {
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.25rem);
  max-width: 18em;
}

h3 {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* Titres en deux temps : une première partie en blanc translucide, la suite en blanc plein. */
.dim {
  color: var(--dim);
}

/* La partie translucide occupe sa propre ligne : le titre se lit en deux temps. */
h1 .dim,
h2 .dim {
  display: block;
}

/* Titre court : les deux tons restent sur la même ligne. */
h2.h2--one-line .dim {
  display: inline;
}

.glow-text {
  background: linear-gradient(100deg, var(--white) 0%, var(--mint) 60%, var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

strong,
b {
  font-weight: 500;
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

.num {
  font-family: var(--font-num);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  word-spacing: -0.22em;
}

.is-pos {
  color: var(--green);
}

.is-neg {
  color: var(--red);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--green);
  color: #000000;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* Structure */

.wrap {
  width: 100%;
  max-width: calc(1120px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  margin-top: var(--section-gap);
}

.section h2 + .prose,
.section h2 + .notice {
  margin-top: 20px;
}

.prose {
  max-width: var(--measure);
}

.prose--after {
  margin-top: 32px;
}

.lead {
  max-width: 36em;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--white);
}

.statement {
  max-width: 21em;
  margin-top: 56px;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 2.125rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}

/* Chaque phrase reste groupée : le retour à la ligne se fait entre deux phrases quand la largeur le permet. */
.statement span {
  display: inline-block;
  text-wrap: balance;
}

/* Citation clé de la méthode : la régularité. Le moment fort de la section du cycle. */
.key-quote {
  position: relative;
  max-width: 920px;
  margin: 64px auto 0;
  padding: 48px 20px 40px;
  border: 1px solid var(--green-line);
  border-radius: 20px;
  background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(43, 224, 139, 0.16), rgba(0, 0, 0, 0) 70%), var(--panel);
  text-align: center;
}

.key-quote::before {
  content: "«";
  position: absolute;
  top: -30px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--green-line);
  border-radius: 50%;
  background: #000000;
  color: var(--green);
  font-size: 1.75rem;
  line-height: 1;
  transform: translateX(-50%);
}

.key-quote p {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}

.key-quote .dim {
  display: block;
  margin-bottom: 8px;
}

.cycle-layout__question {
  max-width: 30em;
  margin: 40px auto 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--white);
}

.notice,
.disclaimer {
  max-width: var(--measure);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 54px;
  padding: 12px 28px;
  border: 1px solid var(--mint);
  border-radius: 10px;
  background: var(--green);
  color: #000000;
  font-family: var(--font-title);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(43, 224, 139, 0.28);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 36px rgba(43, 224, 139, 0.45);
}

.btn:active {
  filter: brightness(0.92);
}

.btn:focus-visible {
  outline-color: var(--white);
  border-radius: 8px;
}

.btn--small {
  width: auto;
  min-height: 42px;
  padding: 8px 18px;
  font-size: 0.9375rem;
}

.btn--ghost {
  background: transparent;
  border-color: var(--muted);
  color: var(--white);
  box-shadow: none;
}

.btn--ghost:hover {
  box-shadow: none;
}

.cta {
  margin-top: 32px;
}

.cta__note {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* En tête */

/* En tête fixe : logo et bouton de réservation restent visibles pendant toute la lecture. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-h);
}

.logo {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

/* Le logo est exporté avec un fond transparent : il se pose sur n'importe quel fond. */
.logo img {
  width: auto;
  height: 46px;
}

/* En tête : l'emblème suivi du nom, composé comme sur le logo d'origine pour rester lisible en petit. */
.logo--lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.logo__words {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo__name {
  font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, #F3D99A 0%, #D4A955 55%, #A97C33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.logo__tag {
  font-family: var(--font-text);
  font-size: 0.4375rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--text);
}

.site-header__cta {
  flex: none;
  min-height: 40px;
  padding: 6px 12px;
  font-size: 0.8125rem;
}

/* Très petits écrans : l'emblème seul, pour laisser la place au bouton. */
@media (max-width: 359px) {
  .logo__words {
    display: none;
  }
}

.site-header__cta-more {
  display: none;
}

/* Section 1. Zone d'arrivée */

.hero {
  position: relative;
  margin-top: calc((var(--header-h) + var(--nav-h)) * -1);
  padding-top: calc(var(--header-h) + var(--nav-h));
  padding-bottom: 96px;
  overflow: hidden;
  overflow: clip;
}

.hero + .section {
  margin-top: 16px;
}

/* Halo vert puis horizon : un grand disque noir dont seul le bord supérieur éclairé dépasse en bas de la zone. */
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 46% at 50% 100%, rgba(43, 224, 139, 0.5) 0%, rgba(15, 61, 42, 0.55) 45%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000000 calc(100% - 60px), transparent 100%);
  pointer-events: none;
}

.hero__glow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 70px);
  width: max(1100px, 190vw);
  aspect-ratio: 1.56;
  border-radius: 50%;
  background: #000000;
  box-shadow:
    0 0 0 1.5px rgba(150, 255, 210, 0.9),
    0 -6px 26px 2px rgba(106, 255, 189, 0.6),
    0 -26px 110px 18px rgba(43, 224, 139, 0.5),
    inset 0 20px 46px rgba(106, 255, 189, 0.3);
  transform: translateX(-50%);
}

.hero__inner {
  position: relative;
  padding-top: 40px;
  padding-bottom: 24px;
}

.hero h1 {
  max-width: 15em;
}

.hero .lead {
  margin-top: 24px;
}

.hero .prose {
  margin-top: 16px;
  max-width: 36em;
}

.link-down {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 20px;
  color: var(--white);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 5px;
}

.link-down:hover {
  text-decoration-color: var(--white);
}

.hero__nots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  font-size: 0.875rem;
  color: var(--text);
}

.hero__nots li {
  padding: 7px 12px;
  border: 1px solid var(--chip-line);
  border-radius: 8px;
  background: var(--chip);
}

/* Section 2. Vidéo */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.video__poster,
.video iframe,
.video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__poster {
  object-fit: cover;
}

.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000000;
  cursor: pointer;
}

.video__play svg {
  box-sizing: content-box;
  padding: 22px;
  border-radius: 50%;
  background: var(--green);
  transition: filter 0.15s ease;
}

.video__play:hover svg {
  filter: brightness(1.1);
}

.video__play:focus-visible {
  outline-offset: -6px;
  border-radius: var(--radius);
}

.video__play[aria-disabled="true"] {
  cursor: default;
}

.video__soon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
}

/* Section 3. Le cycle */

.cycle-layout__figure {
  margin-top: 40px;
}

.cycle-layout__body {
  margin-top: 40px;
}

.cycle {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  margin-inline: auto;
}

.cycle svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cycle__ring {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
}

.cycle__runner {
  animation: cycle-turn var(--cycle-t) linear infinite;
}

.cycle__arc {
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
}

.cycle__head {
  fill: var(--green);
}

.cycle__chevrons path {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cycle__node circle {
  fill: var(--panel);
  stroke: var(--muted);
  stroke-width: 1.5;
  animation: cycle-node var(--cycle-t) linear infinite;
}

.cycle__node text {
  fill: var(--text);
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
  animation: cycle-node-text var(--cycle-t) linear infinite;
}

.cycle__label {
  position: absolute;
  max-width: 30%;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
  opacity: 0.62;
  animation: cycle-label var(--cycle-t) linear infinite;
}

.cycle__label--1 {
  top: 21%;
  left: 50%;
  max-width: none;
  white-space: nowrap;
  transform: translateX(-50%);
}

.cycle__label--2 {
  top: 50%;
  right: 21%;
  text-align: right;
  transform: translateY(-50%);
}

.cycle__label--3 {
  bottom: 21%;
  left: 50%;
  max-width: none;
  white-space: nowrap;
  transform: translateX(-50%);
}

.cycle__label--4 {
  top: 50%;
  left: 21%;
  transform: translateY(-50%);
}

/* Chaque état s'allume quand le tracé l'atteint, puis s'éteint au quart de tour suivant. */
.cycle__node--1 circle,
.cycle__node--1 text,
.cycle__label--1 {
  animation-delay: calc(var(--cycle-t) * -1);
}

.cycle__node--2 circle,
.cycle__node--2 text,
.cycle__label--2 {
  animation-delay: calc(var(--cycle-t) * -0.75);
}

.cycle__node--3 circle,
.cycle__node--3 text,
.cycle__label--3 {
  animation-delay: calc(var(--cycle-t) * -0.5);
}

.cycle__node--4 circle,
.cycle__node--4 text,
.cycle__label--4 {
  animation-delay: calc(var(--cycle-t) * -0.25);
}

.cycle.is-paused .cycle__runner,
.cycle.is-paused .cycle__node circle,
.cycle.is-paused .cycle__node text,
.cycle.is-paused .cycle__label {
  animation-play-state: paused;
}

@keyframes cycle-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cycle-node {
  0%,
  23% {
    fill: var(--green);
    stroke: var(--green);
  }
  29%,
  97% {
    fill: var(--panel);
    stroke: var(--muted);
  }
  100% {
    fill: var(--green);
    stroke: var(--green);
  }
}

@keyframes cycle-node-text {
  0%,
  23% {
    fill: #000000;
  }
  29%,
  97% {
    fill: var(--text);
  }
  100% {
    fill: #000000;
  }
}

@keyframes cycle-label {
  0%,
  23% {
    opacity: 1;
  }
  29%,
  97% {
    opacity: 0.62;
  }
  100% {
    opacity: 1;
  }
}

/* Section 4. Comparaison */

.versus {
  display: grid;
  gap: 16px;
  margin-top: 36px;
}

.versus__col {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.versus__col h3 {
  padding: 16px 20px;
  background: var(--card);
  color: var(--text);
}

.versus__col li {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.versus__col--pro {
  border-color: var(--green-line);
}

.versus__col--pro h3 {
  background: var(--green-deep);
  color: var(--white);
}

.versus__col--pro li {
  color: var(--white);
}

.versus__col--pro li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--green);
}

/* Section 5. Simulateur */

.sim {
  margin-top: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.sim__inputs {
  padding: 0 16px 16px;
}

.sim__mini {
  position: sticky;
  top: calc(var(--header-h) + var(--nav-h));
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 -16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--panel);
}

.sim__mini span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--muted);
}

.sim__mini b {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: nowrap;
}

.field {
  padding-top: 18px;
}

.field label {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--text);
  text-wrap: balance;
}

.field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.field__head output {
  flex: none;
  font-size: 1rem;
  color: var(--white);
  white-space: nowrap;
}

.field__hint {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.money {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding-right: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
}

.money:focus-within {
  border-color: var(--green);
}

.money input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 1.125rem;
}

.money input:focus {
  outline: none;
}

input[type="range"] {
  --fill: 50%;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--green) var(--fill), var(--track) var(--fill));
}

input[type="range"]::-webkit-slider-thumb {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border: 5px solid var(--panel);
  border-radius: 50%;
  background: var(--green);
  -webkit-appearance: none;
  appearance: none;
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--track);
}

input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--green);
}

input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border: 5px solid var(--panel);
  border-radius: 50%;
  background: var(--green);
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--white);
  outline-offset: 1px;
}

input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--white);
  outline-offset: 1px;
}

.sim__discipline {
  margin-top: 20px;
  padding: 0 16px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.sim__discipline input[type="range"]::-webkit-slider-thumb {
  border-color: var(--card);
}

.sim__discipline input[type="range"]::-moz-range-thumb {
  border-color: var(--card);
}

.sim__results {
  padding: 24px 16px;
  border-top: 1px solid var(--line);
}

.result + .result {
  margin-top: 22px;
}

.result dt {
  font-size: 0.9375rem;
  color: var(--text);
}

.result__value {
  font-size: 1.875rem;
  line-height: 1.25;
  color: var(--white);
  white-space: nowrap;
}

.result__value.is-pos {
  color: var(--green);
}

.result__value.is-neg {
  color: var(--red);
}

.result__value.is-long {
  font-size: 1.375rem;
}

.result__unit {
  font-size: 0.875rem;
  color: var(--muted);
}

.bar {
  --zero: 0%;
  position: relative;
  height: 8px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--card);
}

.bar__fill {
  --left: 0%;
  --width: 0%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--left);
  width: var(--width);
  min-width: 2px;
  border-radius: 2px;
  background: var(--muted);
  transition: left 0.18s ease, width 0.18s ease;
}

.bar__fill.is-pos {
  background: var(--green);
}

.bar__fill.is-neg {
  background: var(--red);
}

.bar__zero {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--zero);
  width: 1px;
  background: var(--text);
  transition: left 0.18s ease;
}

.result--key {
  margin-top: 26px;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.result--key dt {
  color: var(--white);
  font-weight: 500;
}

.result--key .result__value {
  font-size: 2.5rem;
  line-height: 1.2;
}

.result--key .result__value.is-long {
  font-size: 1.625rem;
}

.sim__conclusion {
  margin-top: 20px;
  color: var(--white);
}

.sim__alert {
  padding: 0 16px 16px;
}

.alert {
  padding: 20px 16px;
  border: 1px solid var(--red);
  border-radius: 10px;
  background: var(--card);
}

.alert__facts {
  margin-top: 14px;
}

.alert__facts li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
}

.alert__facts b {
  color: var(--red);
  white-space: nowrap;
}

.alert__text {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

/* Lignes calculées automatiquement : même gabarit qu'un curseur, sans poignée. */
.field--auto {
  padding-bottom: 6px;
}

.field--auto + .field--auto {
  padding-top: 12px;
}

.field__label {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--text);
}

.field__value {
  flex: none;
  font-size: 1rem;
  color: var(--white);
  white-space: nowrap;
}

.field__value.is-neg {
  color: var(--red);
}

.sim__discipline .field:not(.field--auto) + .field--auto {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.alert-safe {
  padding: 16px;
  border: 1px solid var(--green-line);
  border-radius: 10px;
  background: var(--card);
  color: var(--green);
  font-weight: 500;
}

[hidden] {
  display: none !important;
}

.hypotheses {
  margin-top: 32px;
  max-width: var(--measure);
}

.hypotheses h3 {
  font-size: 1rem;
}

.hypotheses ul {
  margin-top: 12px;
  font-size: 0.9375rem;
}

.hypotheses li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.hypotheses .num {
  color: var(--white);
  white-space: nowrap;
}

.disclaimer {
  margin-top: 24px;
}

/* Section 6. Les quatre piliers */

.pillars {
  display: grid;
  gap: 16px;
  margin-top: 36px;
}

.pillar {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.pillar__n,
.step__n {
  display: block;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--green);
}

.pillar h3,
.step h3 {
  margin-top: 16px;
  font-size: 1.25rem;
}

.pillar p,
.step p {
  margin-top: 10px;
}

/* Visionneuse du Trading Plan : un onglet par écran de l'outil, la capture s'agrandit au clic. */

.plan {
  margin-top: 56px;
}

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

.plan__tabs button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--chip-line);
  border-radius: 8px;
  background: var(--chip);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}

.plan__tabs button:hover {
  color: var(--white);
}

.plan__tabs button[aria-selected="true"] {
  border-color: var(--green);
  background: rgba(43, 224, 139, 0.16);
  color: var(--white);
}

.plan__frame {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.plan__panel + .plan__panel {
  border-top: 1px solid var(--line);
}

.js .plan__panel {
  display: none;
  border-top: 0;
}

.js .plan__panel.is-active {
  display: block;
}

/* Les captures sont volontairement floutées dans les fichiers eux mêmes : on devine l'outil sans pouvoir le recopier. */
.plan__shot {
  position: relative;
  aspect-ratio: 16 / 10;
}

.plan__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.plan figcaption {
  margin-top: 14px;
  font-size: 0.9375rem;
  text-align: center;
  color: var(--muted);
}

.media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.media img {
  width: 100%;
}

.media--portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.media.is-missing img {
  display: none;
}

.media.is-missing::after {
  content: attr(data-placeholder);
  display: grid;
  place-items: center;
  padding: 24px;
  font-size: 0.875rem;
  text-align: center;
  color: var(--muted);
}

.media--wide.is-missing::after {
  aspect-ratio: 16 / 9;
}

.media--portrait.is-missing::after {
  aspect-ratio: 4 / 5;
}

/* Section 7. Cas clients */

.cases {
  display: grid;
  gap: 16px;
  margin-top: 36px;
}

.case {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.case h3 {
  font-size: 1.375rem;
}

.case__who {
  margin-top: 6px;
  color: var(--muted);
}

.case__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.stat {
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.stat--full {
  grid-column: 1 / -1;
}

.stat dt {
  font-size: 0.8125rem;
  color: var(--muted);
}

.stat dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  font-size: 1.1875rem;
  white-space: nowrap;
}

.stat__from,
.stat__arrow {
  color: var(--muted);
}

.stat__to {
  color: var(--white);
}

.stat__to.is-pos {
  color: var(--green);
}

.case > p + p {
  margin-top: 12px;
}

.case blockquote {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--white);
}

/* Section 8. Qui va t'accompagner */

.about {
  display: grid;
  gap: 32px;
  margin-top: 36px;
}

.about__photo {
  max-width: 320px;
}

.about__text {
  max-width: var(--measure);
}

.about__text p + p {
  margin-top: 18px;
}

.about__text .skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.skills li {
  padding: 7px 12px;
  border: 1px solid var(--green-line);
  border-radius: 8px;
  background: rgba(43, 224, 139, 0.08);
  font-size: 0.875rem;
  color: var(--white);
}

.about__text .skills + p {
  margin-top: 22px;
}

.about__text .about__punch {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--green-line);
  border-radius: 12px;
  background: rgba(43, 224, 139, 0.07);
  font-weight: 500;
  color: var(--white);
}

.about__link a {
  color: var(--white);
  font-weight: 500;
  text-underline-offset: 4px;
}

/* Encart des personnes accompagnées */
.reach {
  display: grid;
  gap: 12px;
  margin-top: 48px;
}

.reach__figure {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
}

.reach__figure--accent {
  border-color: var(--green-line);
  background: radial-gradient(ellipse 80% 90% at 50% 120%, rgba(43, 224, 139, 0.22), rgba(11, 11, 11, 0) 70%), var(--panel);
}

.reach__value {
  display: block;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  line-height: 1.1;
  color: var(--white);
}

.reach__figure--accent .reach__value {
  color: var(--green);
}

.reach__label {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
  color: var(--text);
}

/* Section 9. Pour qui, et pour qui pas */

.fit {
  display: grid;
  gap: 16px;
  margin-top: 36px;
}

.fit__col {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.fit__col h3 {
  color: var(--muted);
  font-size: 1.25rem;
}

.fit__col ul {
  margin-top: 14px;
}

.fit__col li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.fit__col--yes {
  border-color: var(--green-line);
}

.fit__col--yes h3 {
  color: var(--green);
}

.fit__col--yes li {
  color: var(--white);
}

/* Colonnes « le mauvais côté » : cadre rouge, à la demande de Karim. */
.versus__col--amateur,
.fit__col--no {
  border-color: var(--red-line);
}

.versus__col--amateur h3 {
  background: var(--red-deep);
  color: var(--white);
}

.fit__col--no h3 {
  color: var(--red);
}

.versus__col--amateur li,
.fit__col--no li {
  color: var(--text);
}

.versus__col--amateur li::before,
.fit__col--no li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 12px;
  background: linear-gradient(45deg, transparent 43%, var(--red) 43%, var(--red) 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--red) 43%, var(--red) 57%, transparent 57%);
}

.fit__col li {
  display: flex;
  align-items: center;
}

.fit__col--yes li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--green);
}

/* Section 10. L'appel */

.steps {
  display: grid;
  gap: 32px;
  margin-top: 36px;
}

.step {
  max-width: 34em;
  margin-inline: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* Section 11. Questions fréquentes */

.faq-layout__body {
  max-width: 820px;
  margin-top: 28px;
  margin-inline: auto;
}

.faq {
  border-bottom: 1px solid var(--line);
}

.faq__item {
  border-top: 1px solid var(--line);
}

.faq__item h3 {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-wrap: pretty;
}

.faq__item button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 16px 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--green);
  transition: transform 0.2s ease;
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item button[aria-expanded="true"] .faq__icon::after {
  transform: rotate(0deg);
}

.faq__answer p {
  max-width: var(--measure);
  padding: 0 32px 20px 0;
}

/* Sans JavaScript, toutes les réponses restent lisibles. */
.js .faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s;
}

.js .faq__answer > div {
  min-height: 0;
  overflow: hidden;
}

.js .faq__answer.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.25s ease, visibility 0s linear 0s;
}

/* Section 12. Pied de page */

.site-footer {
  margin-top: var(--section-gap);
  padding: 48px 0 40px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.site-footer .logo--full img {
  width: 240px;
  height: auto;
  margin: 0 auto;
}

.site-footer__baseline {
  max-width: 30em;
  margin: 20px auto 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--white);
}

.socials {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--chip-line);
  border-radius: 10px;
  background: var(--chip);
  color: var(--white);
}

.socials a:hover {
  border-color: var(--green);
  color: var(--green);
}

.site-footer__contact {
  margin-top: 24px;
  font-size: 0.9375rem;
}

.site-footer__contact a,
.site-footer__legal a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 4px;
}

.site-footer__contact a:hover,
.site-footer__legal a:hover {
  text-decoration-color: var(--white);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
  margin-top: 12px;
  font-size: 0.9375rem;
}

.site-footer__legal a {
  display: inline-block;
  padding: 6px 0;
}

.site-footer__risk {
  max-width: 62em;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Page de réservation : quatre questions, puis agenda ou page de sortie */

.quiz {
  min-height: 70vh;
  padding-top: 40px;
}

#vue-questions,
#vue-sortie {
  max-width: 640px;
  margin-inline: auto;
}

.quiz__title {
  max-width: 16em;
  margin-inline: auto;
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  text-align: center;
}

.quiz__title:focus {
  outline: none;
}

.quiz__intro {
  max-width: 34em;
  margin: 16px auto 0;
  text-align: center;
  color: var(--text);
}

.quiz__progress {
  height: 4px;
  margin-top: 36px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line);
}

.quiz__bar {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: 2px;
  background: var(--green);
  transition: width 0.25s ease;
}

.quiz__count {
  margin-top: 10px;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--muted);
}

.quiz__form {
  margin-top: 24px;
}

.quiz__step {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.js .quiz__step {
  display: none;
}

.js .quiz__step.is-current {
  display: block;
}

.quiz__step + .quiz__step {
  margin-top: 40px;
}

.js .quiz__step + .quiz__step {
  margin-top: 0;
}

.quiz__step legend {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: center;
  color: var(--white);
}

.quiz__options {
  display: grid;
  gap: 10px;
}

.quiz__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-size: 1.0625rem;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quiz__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quiz__option span::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 14px;
  vertical-align: -3px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
}

.quiz__option:hover {
  border-color: var(--muted);
}

.quiz__option:has(input:checked) {
  border-color: var(--green);
  background: rgba(43, 224, 139, 0.1);
}

.quiz__option:has(input:checked) span::before {
  border-color: var(--green);
  background: radial-gradient(circle, var(--green) 0 45%, transparent 50%);
}

.quiz__option:has(input:focus-visible) {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.quiz__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 24px;
}

.quiz__next:disabled {
  border-color: var(--line);
  background: var(--card);
  color: var(--muted);
  box-shadow: none;
  filter: none;
  cursor: default;
}

.quiz__edit {
  margin-top: 20px;
  text-align: center;
}

.quiz__back {
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.quiz__back:hover {
  color: var(--white);
}

/* L'agenda Cal.com vit dans un cadre à part. Le schéma sombre déclaré ici doit correspondre au sien, sinon le navigateur peint un fond blanc derrière. */
.booking {
  min-height: 420px;
  margin-top: 32px;
  color-scheme: dark;
}

.booking__fallback {
  margin-top: 8px;
  text-align: center;
}

.quiz__privacy {
  margin-top: 24px;
  font-size: 0.875rem;
  text-align: center;
  color: var(--muted);
}

.quiz__privacy a {
  color: var(--white);
  text-underline-offset: 3px;
}

.quiz__exit {
  margin-top: 28px;
  text-align: center;
}

.quiz__exit p + p {
  margin-top: 14px;
}

.site-footer--slim {
  margin-top: 96px;
  padding: 28px 0 32px;
}

.site-footer--slim .site-footer__risk {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Page Offres privée */

.offers-intro {
  margin-top: 56px;
}

.offers-intro__title {
  max-width: 16em;
  margin-inline: auto;
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  text-align: center;
}

.offers-intro__lead {
  max-width: 30em;
  margin: 20px auto 0;
  text-align: center;
}

.offers-intro__marks {
  justify-content: center;
}

.offers-section {
  margin-top: 72px;
}

.offers {
  display: grid;
  gap: 16px;
  margin-top: 36px;
  align-items: start;
}

.offer {
  position: relative;
  padding: 28px 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.offer--featured {
  border-color: var(--green-line);
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(43, 224, 139, 0.14), rgba(11, 11, 11, 0) 70%), var(--panel);
  box-shadow: 0 0 40px rgba(43, 224, 139, 0.12);
}

.offer__badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  border: 1px solid var(--green-line);
  border-radius: 8px;
  background: rgba(43, 224, 139, 0.12);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--green);
}

.offer h3 {
  font-size: 1.5rem;
}

.offer__duration {
  margin-top: 4px;
  color: var(--muted);
}

.offer__price {
  margin-top: 18px;
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--white);
}

.offer__value {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.offer__value .num {
  color: var(--text);
}

.offer__save,
.offer__save .num {
  color: var(--green);
}

.offer__list {
  margin-top: 20px;
}

.offer__list li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--white);
}

.offer__list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--green);
}

.offer__why {
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--text);
}

.offer__pay {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.offer__pay .btn {
  width: 100%;
  max-width: none;
}

.offer__bridge {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--muted);
}

.offer__bridge .num {
  color: var(--text);
}

.btn.is-disabled {
  border-color: var(--line);
  background: var(--card);
  color: var(--muted);
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}

.referral {
  max-width: 360px;
  margin: 24px auto 0;
  text-align: center;
}

.referral summary {
  display: inline-block;
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
  cursor: pointer;
}

.referral summary::-webkit-details-marker {
  display: none;
}

.referral summary:hover,
.referral[open] summary {
  color: var(--white);
}

.referral .money {
  margin-top: 12px;
}

.referral input {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.referral input::placeholder {
  text-transform: none;
  letter-spacing: 0;
}

.referral__hint {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.offers-note {
  max-width: 44em;
  margin: 24px auto 0;
  font-size: 0.875rem;
  text-align: center;
  color: var(--muted);
}

.alacarte {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 32px auto 0;
}

.alacarte__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.alacarte__item h3 {
  font-size: 1.125rem;
}

.alacarte__item p {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.alacarte__item .btn {
  flex: none;
  width: auto;
  min-width: 110px;
}

.offers-legal {
  font-size: 0.875rem;
  text-align: center;
  color: var(--muted);
}

.offers-legal a {
  color: var(--white);
  text-underline-offset: 3px;
}

.offers-legal + .site-footer__risk {
  margin-top: 16px;
}

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

  .offer {
    padding: 36px 32px 32px;
  }
}

/* Pages légales */

.legal {
  min-height: 50vh;
  padding-top: 40px;
}

.legal h1 {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
}

.legal__body {
  margin-top: 24px;
  max-width: var(--measure);
}

.legal__body h2 {
  margin-top: 48px;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.legal__body p,
.legal__body ul {
  margin-top: 14px;
}

.legal__body ul {
  padding-left: 1.25em;
  list-style: disc;
}

.legal__body li + li {
  margin-top: 8px;
}

.legal__body a {
  color: var(--white);
  text-underline-offset: 3px;
}

.legal__version {
  color: var(--muted);
}

.legal__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 32px;
  color: var(--white);
  text-underline-offset: 4px;
}

.legal .btn {
  margin-top: 32px;
}

/* Bandeau de cookies, affiché seulement si un pixel est activé */

.cookie {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 50;
  max-width: 560px;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 0.9375rem;
}

.cookie a {
  color: var(--white);
  text-underline-offset: 3px;
}

.cookie__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.cookie__actions .btn {
  min-height: 46px;
  padding: 8px 12px;
  font-size: 1rem;
}

/* Mise en page centrée, à la demande de Karim : titres, textes d'introduction, phrases fortes et boutons sur l'axe de la page. */

.hero__inner {
  text-align: center;
}

.hero h1,
.hero .lead,
.hero .prose,
.section h2,
.section .wrap > .prose,
.section .wrap > .notice,
.section .wrap > .disclaimer,
.cycle-layout .prose,
.statement {
  margin-inline: auto;
  text-align: center;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__nots,
.plan__tabs {
  justify-content: center;
}

/* À partir de 720 pixels */

@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }

  .btn {
    width: auto;
  }

  .site-header__cta {
    min-height: 42px;
    padding: 8px 18px;
    font-size: 0.9375rem;
  }

  .site-header__cta-more {
    display: inline;
  }

  .hero__inner {
    padding-top: 72px;
  }

  .hero .lead {
    font-size: 1.3125rem;
  }

  .sim__inputs {
    padding: 0 28px 28px;
  }

  .sim__mini {
    margin: 0 -28px;
    padding: 14px 28px;
  }

  .sim__results {
    padding: 28px;
  }

  .sim__alert {
    padding: 0 28px 28px;
  }

  .alert {
    padding: 24px;
  }

  .pillars,
  .cases,
  .fit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pillar,
  .case,
  .fit__col {
    padding: 32px 28px;
  }

  .versus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @supports (grid-template-rows: subgrid) {
    .versus {
      grid-template-rows: repeat(6, auto);
      gap: 0 16px;
    }

    .versus__col {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
    }

    .versus__col ul {
      display: grid;
      grid-row: 2 / -1;
      grid-template-rows: subgrid;
    }
  }

  .figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .site-footer__top {
    grid-template-columns: 1fr auto;
    gap: 48px;
  }

  .cookie {
    left: 24px;
    right: auto;
    bottom: 24px;
  }
}

/* À partir de 1000 pixels */

@media (min-width: 1000px) {
  :root {
    --header-h: 84px;
    --section-gap: 160px;
  }

  body {
    font-size: 1.0625rem;
  }

  .site-header__inner {
    min-height: var(--header-h);
  }

  .logo img {
    height: 60px;
  }

  .hero {
    padding-bottom: 150px;
  }

  .hero + .section {
    margin-top: 24px;
  }

  .hero__glow::after {
    top: calc(100% - 110px);
  }

  .hero__inner {
    padding-top: 96px;
    padding-bottom: 56px;
  }

  .statement {
    margin-top: 80px;
  }

  .cycle-layout__figure {
    margin-top: 56px;
  }

  .cycle-layout__body {
    margin-top: 56px;
  }

  .cycle__label {
    font-size: 1.0625rem;
  }

  /* Les résultats restent visibles pendant le réglage des curseurs, sans jamais déborder sur le panneau d'alerte. */
  .sim__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    margin-bottom: 32px;
  }

  .sim__mini {
    display: none;
  }

  .sim__inputs {
    padding: 14px 32px 32px;
    border-right: 1px solid var(--line);
  }

  .sim__results {
    position: sticky;
    top: calc(var(--header-h) + var(--nav-h) + 24px);
    padding: 32px;
    border-top: 0;
  }

  .sim__alert {
    padding: 0 32px 32px;
  }

  .alert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    padding: 28px 32px;
  }

  .alert h3 {
    grid-column: 1 / -1;
  }

  .alert__text {
    margin-top: 14px;
    padding-top: 10px;
  }

  .result__value {
    font-size: 2.125rem;
  }

  .result--key .result__value {
    font-size: 3rem;
  }

  .result--key .result__value.is-long {
    font-size: 2rem;
  }

  .about {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }

  .about__photo {
    max-width: none;
  }

  .faq-layout__body {
    margin-top: 40px;
  }

  .site-footer {
    padding: 72px 0 56px;
  }

  .site-footer__baseline {
    max-width: none;
    font-size: 1.1875rem;
    white-space: nowrap;
  }

  .reach {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo__name {
    font-size: 1.0625rem;
    letter-spacing: 0.22em;
  }

  .logo__tag {
    font-size: 0.625rem;
    letter-spacing: 0.34em;
  }
}

/* Mouvement réduit : tout s'arrête et affiche son état final. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .cycle__runner {
    display: none;
  }

  .cycle__ring {
    stroke: var(--green);
    stroke-width: 3;
  }

  .cycle__node circle {
    fill: var(--green);
    stroke: var(--green);
  }

  .cycle__node text {
    fill: #000000;
  }

  .cycle__label {
    opacity: 1;
  }
}

/* Site en quatre pages (Accueil, Prop firm, La méthode, Qui suis-je), à la demande de Karim :
   des pages courtes sur mobile, reliées par une barre d'onglets fixée sous l'en tête. */

.has-tabs {
  --nav-h: 44px;
  --section-gap: 56px;
}

.tabs-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tabs {
  display: flex;
  justify-content: space-between;
  height: var(--nav-h);
  max-width: 560px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs a {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}

.tabs a:hover {
  color: var(--white);
}

.tabs a[aria-current="page"] {
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--green);
}

/* Accueil : le titre, la vidéo et le bouton tiennent dans le premier écran du téléphone. */

.hero--home {
  padding-bottom: 96px;
}

.hero--home .hero__inner {
  padding-top: 20px;
}

.hero--home h1 {
  max-width: 16em;
  font-size: clamp(1.625rem, 1.15rem + 2.2vw, 2.75rem);
}

.hero--home .video {
  max-width: 720px;
  margin: 20px auto 0;
}

.hero--home .cta {
  margin-top: 20px;
}

.hero--home .hero__nots {
  margin-top: 18px;
}

/* En tête des pages Prop firm, La méthode et Qui suis-je. */

.hero--page {
  padding-bottom: 96px;
}

.hero--page .hero__inner {
  padding-top: 32px;
}

.hero--page h1 {
  max-width: 16em;
  margin-inline: auto;
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
}

.hero--page .lead {
  margin-top: 20px;
}

/* Trois étapes numérotées, en lignes compactes sur mobile. */

.trio {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin: 28px auto 0;
}

.trio li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.trio__n {
  grid-row: 1 / span 2;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--green);
}

.trio h3 {
  font-size: 1.125rem;
}

.trio p {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Résultats clients en bref : deux chiffres côte à côte, même sur mobile. */

.proofs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
  margin: 28px auto 0;
}

.proof {
  padding: 18px 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
}

.proof__who {
  font-size: 0.875rem;
  color: var(--muted);
}

.proof__stat {
  margin-top: 8px;
  font-size: 1.25rem;
  white-space: nowrap;
  color: var(--white);
}

.proof__stat .stat__to {
  color: var(--green);
}

.proof__label {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.more-link {
  display: block;
  width: fit-content;
  min-height: 44px;
  margin: 14px auto 0;
  padding-top: 10px;
  color: var(--white);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 5px;
}

.more-link:hover {
  text-decoration-color: var(--white);
}

/* Liens vers les autres pages. */

.explore {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin: 28px auto 0;
}

.explore a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
}

.explore a:hover {
  border-color: var(--green-line);
}

.explore b {
  display: block;
  font-size: 1.0625rem;
}

.explore span {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--muted);
}

.explore svg {
  flex: none;
  color: var(--green);
}

.call-line {
  max-width: 30em;
  margin: 14px auto 0;
  font-size: 0.9375rem;
  text-align: center;
  color: var(--muted);
}

/* Bascule entre deux contenus (amateur ou pro, pour toi ou pas pour toi, prop firm ou compte propre).
   Sur mobile, un seul contenu à la fois ; sur grand écran, les colonnes reviennent côte à côte. */

.switch {
  display: none;
}

.js .switch {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 28px auto 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.switch button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.switch button:hover {
  color: var(--white);
}

.switch button[aria-selected="true"] {
  background: var(--card);
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--chip-line);
}

.switch button.switch__bad[aria-selected="true"] {
  color: var(--red);
}

.switch button.switch__good[aria-selected="true"] {
  color: var(--green);
}

.js .switch + .versus,
.js .switch + .fit {
  margin-top: 14px;
}

.js .is-switched-off {
  display: none;
}

/* Cas clients : sur mobile, les cartes se font glisser au lieu de s'empiler. */

.swipe-hint {
  margin-top: 12px;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 719px) {
  .cases--swipe {
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .cases--swipe::-webkit-scrollbar {
    display: none;
  }

  .cases--swipe .case {
    scroll-snap-align: start;
  }

  .pillars--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .has-tabs .about__photo {
    max-width: 240px;
    margin-inline: auto;
  }

  .has-tabs .reach {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .has-tabs .reach__figure {
    padding: 18px 10px;
  }

  .has-tabs .reach__value {
    font-size: 2rem;
  }

  .has-tabs .reach__label {
    font-size: 0.875rem;
  }

  .pillars--compact .pillar {
    padding: 16px 14px;
  }

  .pillars--compact .pillar h3 {
    margin-top: 10px;
    font-size: 1rem;
  }

  .pillars--compact .pillar p {
    margin-top: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

/* Liste de points forts, puce verte. */

.ticks {
  max-width: 820px;
  margin: 28px auto 0;
  border: 1px solid var(--green-line);
  border-radius: var(--radius);
  background: var(--panel);
}

.ticks li {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  color: var(--white);
}

.ticks li + li {
  border-top: 1px solid var(--line);
}

.ticks li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--green);
}

/* Simulateur de la page Prop firm : deux modes, une seule zone. */

.sim-modes .switch {
  margin-top: 28px;
}

.js .sim-modes .switch ~ .sim {
  margin-top: 14px;
}

.challenge-results .result__value {
  font-size: 2.25rem;
}

.challenge-results .result__unit {
  display: block;
  margin-top: 2px;
}

/* Pied de page compact sur les quatre pages : logo horizontal, réseaux, mention de risque en petit. */

.has-tabs .site-footer {
  padding: 28px 0 24px;
}

.has-tabs .site-footer .logo--lockup img {
  height: 34px;
}

.has-tabs .site-footer__baseline {
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text);
  white-space: normal;
}

.has-tabs .socials {
  margin-top: 14px;
}

.has-tabs .socials a {
  width: 38px;
  height: 38px;
}

.has-tabs .site-footer__risk {
  margin-top: 16px;
  padding-top: 14px;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Sections plus serrées sur les quatre pages. */

.has-tabs .section h2 + .prose,
.has-tabs .section h2 + .notice {
  margin-top: 12px;
}

.has-tabs .trio,
.has-tabs .explore,
.has-tabs .proofs,
.has-tabs .ticks,
.has-tabs .versus,
.has-tabs .pillars,
.has-tabs .cases,
.has-tabs .fit,
.has-tabs .about,
.has-tabs .faq-layout__body {
  margin-top: 20px;
}

.js.has-tabs .switch {
  margin-top: 20px;
}

.has-tabs .cta {
  margin-top: 24px;
}

.has-tabs .prose--after {
  margin-top: 20px;
}

.has-tabs .statement {
  margin-top: 32px;
}

.has-tabs .reach {
  margin-top: 28px;
}

/* Schéma du cycle et citation, en plus compact. */

.has-tabs .cycle {
  max-width: 300px;
}

.has-tabs .cycle__label {
  font-size: 0.8125rem;
}

.has-tabs .cycle-layout__figure {
  margin-top: 20px;
}

.has-tabs .cycle-layout__body {
  margin-top: 16px;
}

.has-tabs .key-quote {
  margin-top: 40px;
  padding: 34px 16px 24px;
}

.has-tabs .key-quote::before {
  top: -22px;
  width: 44px;
  height: 44px;
  font-size: 1.375rem;
}

.has-tabs .cycle-layout__question {
  margin-top: 20px;
  font-size: 1.0625rem;
}

/* Captures du Plan de Trading : onglets sur une seule ligne qui défile, capture moins haute. */

.has-tabs .plan {
  margin-top: 24px;
}

.has-tabs .plan__tabs {
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.has-tabs .plan__tabs::-webkit-scrollbar {
  display: none;
}

.has-tabs .plan__tabs button {
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.875rem;
}

.has-tabs .plan__shot {
  aspect-ratio: 16 / 9;
}

.has-tabs .plan figcaption {
  margin-top: 10px;
  font-size: 0.875rem;
}

@media (max-width: 379px) {
  .tabs a {
    padding: 0 4px;
    font-size: 0.8125rem;
  }
}

@media (min-width: 720px) {
  .js .switch:not(.switch--always) {
    display: none;
  }

  .js .switch:not(.switch--always) ~ .is-switched-off,
  .js .versus .is-switched-off,
  .js .fit .is-switched-off {
    display: block;
  }

  .js .versus .versus__col.is-switched-off {
    display: grid;
  }

  .js .switch:not(.switch--always) + .versus,
  .js .switch:not(.switch--always) + .fit {
    margin-top: 36px;
  }

  .tabs {
    justify-content: center;
    gap: 28px;
  }

  .trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }

  .trio li {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }

  .trio__n {
    grid-row: auto;
  }

  .swipe-hint {
    display: none;
  }
}

@media (min-width: 900px) {
  .explore {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }

  .proof__stat {
    font-size: 1.75rem;
  }
}

@media (min-width: 1000px) {
  .has-tabs {
    --section-gap: 88px;
  }

  .hero--home {
    padding-bottom: 150px;
  }

  .hero--home .hero__inner {
    padding-top: 48px;
  }

  /* Sur ordinateur, la vidéo s'ajuste à la hauteur de l'écran pour que le bouton reste visible sans défiler. */
  .hero--home .video {
    max-width: clamp(360px, calc((100vh - 470px) * 16 / 9), 720px);
  }

  .hero--page {
    padding-bottom: 150px;
  }

  .hero--page .hero__inner {
    padding-top: 72px;
  }
}

@media (min-width: 720px) {
  .has-tabs .cycle {
    max-width: 360px;
  }

  .has-tabs .plan__tabs {
    justify-content: center;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* Calculateur prop firm : bloc des règles du challenge, même gabarit que le bloc de discipline. */

.sim__group {
  margin-top: 20px;
  padding: 0 16px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.sim__group-title {
  padding-top: 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

.sim__group .sim__group-title + .field {
  padding-top: 8px;
}

.sim__group input[type="range"]::-webkit-slider-thumb {
  border-color: var(--card);
}

.sim__group input[type="range"]::-moz-range-thumb {
  border-color: var(--card);
}

/* Calculateurs sur mobile : curseurs un peu plus serrés, la zone tactile reste confortable. */
@media (max-width: 719px) {
  .has-tabs .sim .field {
    padding-top: 12px;
  }

  .has-tabs .sim input[type="range"] {
    height: 40px;
  }
}

/* Calculateurs des pages à onglets, version compacte à la demande de Karim : cadres et textes plus petits. */

.has-tabs .sim .field label,
.has-tabs .sim .field__label {
  font-size: 0.875rem;
}

.has-tabs .sim .field__head output,
.has-tabs .sim .field__value {
  font-size: 0.9375rem;
}

.has-tabs .sim__group-title {
  font-size: 0.75rem;
}

.has-tabs .sim__results {
  padding: 18px 14px;
}

.has-tabs .result + .result {
  margin-top: 16px;
}

.has-tabs .result dt {
  font-size: 0.875rem;
}

.has-tabs .result__value {
  font-size: 1.5rem;
}

.has-tabs .result__value.is-long {
  font-size: 1.25rem;
}

.has-tabs .result--key {
  margin-top: 18px;
  padding: 12px 14px;
}

.has-tabs .result--key .result__value {
  font-size: 1.75rem;
}

.has-tabs .result--key .result__value.is-long {
  font-size: 1.375rem;
}

.has-tabs .sim__conclusion {
  margin-top: 14px;
  font-size: 0.9375rem;
}

.has-tabs .sim__alert {
  padding: 0 14px 14px;
}

.has-tabs .alert {
  padding: 14px;
}

.has-tabs .alert h3 {
  font-size: 1rem;
}

.has-tabs .alert__facts {
  margin-top: 8px;
}

.has-tabs .alert__facts li {
  padding: 8px 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.has-tabs .alert__text {
  padding-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.has-tabs .sim__mini b {
  font-size: 0.875rem;
}

/* Mention pédagogique : petite, sur toute la largeur. */
.has-tabs .disclaimer,
.has-tabs .section .wrap > .disclaimer {
  max-width: none;
  margin-top: 16px;
  font-size: 0.75rem;
  line-height: 1.5;
}

@media (min-width: 720px) {
  .has-tabs .explore {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
  }
}

@media (min-width: 1000px) {
  .has-tabs .sim__results {
    padding: 24px;
  }

  .has-tabs .result__value {
    font-size: 1.75rem;
  }

  .has-tabs .result--key .result__value {
    font-size: 2.125rem;
  }

  .has-tabs .alert {
    padding: 18px 22px;
  }

  .has-tabs .sim__alert {
    padding: 0 24px 24px;
  }
}

@media (min-width: 720px) {
  .trio--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
  }
}

/* Texte d'introduction des pages, un peu plus petit sur mobile. */
@media (max-width: 719px) {
  .has-tabs .hero .lead {
    font-size: 1rem;
  }
}