/* ───────────────────────────────────────────────────────────────
   Nuancier — landing page.

   Le système visuel est celui du produit, repris tel quel : blanc franc,
   noir dense, arêtes vives, hiérarchie portée par la typographie. Aucune
   ombre, aucun dégradé, aucun flou, nulle part. La couleur n'appartient
   qu'aux données — les cinq bandes de dimension (section « cinq
   dimensions » et les deux écrans repris tels quels) — jamais à la
   décoration. Fond blanc pur partout : c'est l'unique surface du système
   (voir NuColors.white, app_mobile/lib/core/theme/tokens.dart), donc pas
   de variante sombre ici.

   Aucun build : ce fichier est servi tel quel.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Neutres — app_mobile/lib/core/theme/tokens.dart (NuColors) */
  --nu-black: #111111;
  --nu-white: #ffffff;
  --nu-grey-text: #6e6e6e;
  --nu-grey-disabled: #b4b4b4;
  --nu-grey-rule: #e6e6e6;

  /* Dimensions — mêmes valeurs que le symbole de marque. À afficher
     uniquement sur les cinq bandes (section 5) et sur les deux écrans
     produit repris tels quels (héros, compatibilité) — jamais ailleurs. */
  --nu-curiosite: #5b4fcf;
  --nu-rigueur: #17548c;
  --nu-energie: #d9542b;
  --nu-bienveillance: #4f8c1e;
  --nu-stabilite: #b8860f;

  /* Couleurs d'identité — exception scopée à l'écran de comparaison :
     app_mobile/lib/core/theme/identity_colors.dart (IdentityColors). La
     couleur y code une personne, pas une dimension. */
  --nu-profil-a: #111111;
  --nu-profil-b: #c4145a;

  /* Espacements base 4 (NuSpacing) */
  --nu-space-1: 4px;
  --nu-space-2: 8px;
  --nu-space-3: 12px;
  --nu-space-4: 16px;
  --nu-space-6: 24px;
  --nu-space-8: 32px;
  --nu-space-12: 48px;
  --nu-gutter: 16px;

  /* Espacements web — l'app mobile n'a jamais besoin de ces paliers (ses
     écrans font 360–390 px de large), la landing page si. Même logique
     base 4, prolongée pour les grands formats desktop. */
  --nu-space-14: 56px;
  --nu-space-16: 64px;
  --nu-space-18: 72px;
  --nu-space-20: 80px;
  --nu-space-24: 96px;

  /* Traits (NuBorders) */
  --nu-hairline: 1px;
  --nu-thick: 2px;
  --nu-radius-surface: 0;
  --nu-radius-control: 2px;

  /* Rayon des badges de store — seule exception tolérée à la règle
     « aucun rayon » : artwork officiel Apple / Google. */
  --nu-radius-badge: 8px;
  --nu-radius-badge-compact: 6px;

  --nu-content-max: 1440px;
  --nu-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--nu-white);
  color: var(--nu-black);
  font-family: var(--nu-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--nu-black);
}

a:hover {
  color: var(--nu-grey-text);
}

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

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nu-grey-text);
  margin: 0;
}

/* ── En-tête ─────────────────────────────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nu-space-4);
  padding: 14px 20px;
  border-bottom: var(--nu-thick) solid var(--nu-black);
}

.site-header__logo {
  height: 34px;
  width: auto;
}

.site-header__button {
  height: 34px;
  background: var(--nu-black);
  color: var(--nu-white);
  border-radius: var(--nu-radius-badge-compact);
  display: flex;
  align-items: center;
  padding: 0 var(--nu-space-3);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.site-header .site-header__badges {
  display: none;
}

/* ── Badges de store ─────────────────────────────────────────────── */

.store-badges {
  display: flex;
  gap: var(--nu-space-3);
}

.store-badges--stack {
  flex-direction: column;
  gap: 10px;
}

.store-badge {
  height: 52px;
  background: var(--nu-black);
  color: var(--nu-white);
  border-radius: var(--nu-radius-badge);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 18px;
  text-decoration: none;
}

.store-badge__eyebrow {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nu-grey-disabled);
}

.store-badge__name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.store-badge--compact {
  height: 40px;
  padding: 0 var(--nu-space-4);
}

.store-badge--compact .store-badge__eyebrow {
  font-size: 8px;
}

.store-badge--compact .store-badge__name {
  font-size: 14px;
}

/* ── Icône « quad » — deux graisses, quatre cases ───────────────────
   Représentation géométrique minimale d'un profil (+/− sur quatre
   dimensions), cohérente avec le style des icônes d'archétype. Jamais
   une des cinq teintes de dimension : uniquement noir ou blanc. */

.quad-icon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  flex: none;
}

.quad-icon__cell {
  border: 1.5px solid var(--nu-black);
}

.quad-icon__cell--on {
  background: var(--nu-black);
}

.quad-icon__cell--off {
  background: var(--nu-white);
}

/* ── Héros ───────────────────────────────────────────────────────── */

.hero {
  border-bottom: var(--nu-thick) solid var(--nu-black);
  padding: 36px 20px 32px;
}

.hero__title {
  font-size: clamp(38px, 12vw, 48px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.96;
  margin: 20px 0 0;
}

.hero__subtitle {
  font-size: 17px;
  line-height: 1.4;
  margin: 20px 0 0;
  max-width: 60ch;
}

.hero__badges {
  margin-top: 28px;
}

.hero__note {
  font-size: 13px;
  color: var(--nu-grey-text);
  margin: var(--nu-space-4) 0 0;
}

.hero__visual {
  margin-top: 32px;
}

/* ── Carte « écran de résultat » — reprise du livrable 2, non
   redessinée : mêmes proportions, mêmes filets, mêmes bandes. ──────── */

.result-card {
  border: var(--nu-hairline) solid var(--nu-black);
  overflow: hidden;
  background: var(--nu-white);
}

.result-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: var(--nu-hairline) solid var(--nu-black);
}

.result-card__logo {
  height: 12px;
}

.result-card__mini-bars {
  width: 18px;
  border: var(--nu-hairline) solid var(--nu-black);
  padding: 1px;
}

.result-card__mini-bar {
  height: 2px;
  margin-bottom: 1px;
}

.result-card__mini-bar:last-child {
  margin-bottom: 0;
}

.result-card__archetype {
  padding: 18px 14px 0;
}

.result-card__archetype-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 12px;
}

.result-card__quad {
  width: 36px;
  height: 36px;
  margin-top: 4px;
}

.result-card__name {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}

.result-card__tag {
  font-size: 14px;
  color: var(--nu-grey-text);
  margin-top: 8px;
}

.result-card__desc {
  font-size: 17px;
  margin: 18px 0 0;
}

.result-card__bands {
  padding: 20px 14px 0;
}

.result-card__divider {
  height: var(--nu-hairline);
  background: var(--nu-black);
  margin-bottom: 16px;
}

.result-card__text {
  padding: 8px 14px 0;
  font-size: 15px;
  line-height: 1.5;
}

.band-row {
  margin-bottom: 12px;
}

.band-row:last-child {
  margin-bottom: 0;
}

.band-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}

.band-row__name {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.band-row__score {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.band-row__track {
  height: 12px;
  border: var(--nu-hairline) solid var(--nu-black);
}

.band-row__fill {
  height: 10px;
}


/* ── Comparatif MBTI / 16Personalities vs Nuancier ──────────────── */

.comparison {
  border-bottom: var(--nu-thick) solid var(--nu-black);
  padding: 40px 20px;
}

.comparison__head {
  margin-bottom: 24px;
}

.comparison__title {
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 14px 0 0;
}

.comparison__subtitle {
  font-size: 16px;
  line-height: 1.45;
  color: var(--nu-grey-text);
  margin: 14px 0 0;
  max-width: 65ch;
}

.comparison__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--nu-hairline) solid var(--nu-black);
  margin-top: 24px;
}

.comparison-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
  background: var(--nu-white);
}

.comparison-table th,
.comparison-table td {
  padding: 14px 16px;
  border-bottom: var(--nu-hairline) solid var(--nu-black);
  border-right: var(--nu-hairline) solid var(--nu-black);
  vertical-align: top;
  line-height: 1.45;
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: none;
}

.comparison-table tr:last-child th,
.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table thead th {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  background: #fafafa;
  border-bottom: var(--nu-thick) solid var(--nu-black);
}

.comparison-table__col-criteria {
  width: 24%;
  color: var(--nu-grey-text);
}

.comparison-table__col-mbti {
  width: 38%;
  color: var(--nu-grey-text);
}

.comparison-table__col-nuancier {
  width: 38%;
}

.comparison-table__badge {
  display: inline-block;
  background: var(--nu-black);
  color: var(--nu-white);
  padding: 3px 8px;
  border-radius: var(--nu-radius-control);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.comparison-table tbody th {
  font-size: 13px;
  font-weight: 500;
  color: var(--nu-black);
}

.comparison-table tbody td {
  font-size: 14px;
}

.comparison-table tbody td:nth-child(2) {
  color: #555555;
}

.comparison-table tbody td:nth-child(3) {
  color: var(--nu-black);
  background: #fcfcfc;
}

.comparison-table tbody td:nth-child(3) strong {
  font-weight: 500;
}

/* ── Pourquoi un nuancier ────────────────────────────────────────── */

.why {
  border-bottom: var(--nu-thick) solid var(--nu-black);
  padding: 40px 20px;
}

.why__title {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
}

.why__body {
  font-size: 17px;
  line-height: 1.5;
  margin: 20px 0 0;
}

.why__body--desktop-only {
  display: none;
}

/* ── Comment ça marche ──────────────────────────────────────────── */

.how {
  border-bottom: var(--nu-thick) solid var(--nu-black);
}

.how__eyebrow {
  padding: 32px 20px 20px;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  padding: 24px 20px;
  border-top: var(--nu-hairline) solid var(--nu-black);
}

.step__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.step__number {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

.step__quad {
  width: 26px;
  height: 26px;
}

.step__title {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 16px 0 0;
}

.step__body {
  font-size: 15px;
  color: var(--nu-grey-text);
  margin: 8px 0 0;
}

/* ── Les cinq dimensions ─────────────────────────────────────────── */

.dimensions {
  border-bottom: var(--nu-thick) solid var(--nu-black);
  padding: 40px 20px;
}

.dimensions__title {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
}

.dimensions__desc {
  display: none;
}

.dimension-list {
  margin-top: 28px;
  border-top: var(--nu-hairline) solid var(--nu-black);
}

.dimension-row {
  border-bottom: var(--nu-hairline) solid var(--nu-black);
  padding: 16px 0;
}

.dimension-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

.dimension-row__names {
  display: flex;
  align-items: baseline;
  gap: 20px;
  min-width: 0;
}

.dimension-row__name {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}

.dimension-row__role {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nu-grey-text);
  display: none;
}

.dimension-row__score {
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.dimension-row__track {
  height: 20px;
  border: var(--nu-hairline) solid var(--nu-black);
}

.dimension-row__fill {
  height: 18px;
}

/* ── Archétypes ──────────────────────────────────────────────────── */

.archetypes {
  border-bottom: var(--nu-thick) solid var(--nu-black);
}

.archetypes__head {
  padding: 40px 20px 24px;
}

.archetypes__title {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
}

.archetypes__desc {
  display: none;
}

.archetype-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border-top: var(--nu-hairline) solid var(--nu-black);
}

.archetype-card {
  width: 50%;
  padding: 20px;
  border-right: var(--nu-hairline) solid var(--nu-black);
  border-bottom: var(--nu-hairline) solid var(--nu-black);
  min-width: 0;
}

.archetype-card:nth-child(2n) {
  border-right: none;
}

.archetype-card__quad {
  width: 30px;
  height: 30px;
}

.archetype-card__name {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
}

.archetype-card__sig {
  display: none;
}

.archetype-card__line {
  font-size: 14px;
  margin: 8px 0 0;
}

.archetypes__cta {
  padding: 24px 20px 32px;
}

.archetypes__cta-text {
  display: none;
}

/* ── Compatibilité ───────────────────────────────────────────────── */

.compat {
  border-bottom: var(--nu-thick) solid var(--nu-black);
  padding: 40px 20px;
}

.compat__title {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 16px 0 0;
}

.compat__body {
  font-size: 17px;
  line-height: 1.45;
  margin: 18px 0 0;
}

.compat__note {
  display: none;
}

.compat__visual {
  margin-top: 28px;
}

/* ── Carte « écran de comparaison » — reprise du livrable 3. ────────── */

.compare-card {
  border: var(--nu-hairline) solid var(--nu-black);
  overflow: hidden;
  background: var(--nu-white);
}

.compare-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: var(--nu-hairline) solid var(--nu-black);
}

.compare-card__back {
  font-size: 13px;
}

.compare-card__names {
  padding: 18px 14px 0;
}

.compare-card__title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0;
}

.compare-card__legend {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 12px;
  list-style: none;
  padding: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.legend-swatch {
  width: 11px;
  height: 11px;
  flex: none;
}

.legend-swatch--a {
  background: var(--nu-profil-a);
}

.legend-swatch--b {
  background: var(--nu-profil-b);
}

.compare-card__proximity {
  display: none;
}

.compare-card__rows {
  padding: 18px 14px 0;
}

.compare-card__rows-head {
  display: none;
}

.compare-row {
  margin-bottom: 14px;
}

.compare-row:last-child {
  margin-bottom: 0;
}

.compare-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}

.compare-row__name {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.compare-row__gap {
  font-size: 12px;
  color: var(--nu-grey-text);
  font-variant-numeric: tabular-nums;
}

.compare-row__track {
  height: 20px;
  border: var(--nu-hairline) solid var(--nu-black);
  padding: 1px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.compare-row__bar {
  height: 7px;
}

.compare-row__bar--a {
  background: var(--nu-profil-a);
}

.compare-row__bar--b {
  background: var(--nu-profil-b);
}

/* ── Méthodologie ────────────────────────────────────────────────── */

.method {
  border-bottom: var(--nu-thick) solid var(--nu-black);
  padding: 40px 20px;
}

.method__label {
  margin-bottom: 18px;
}

.method__quote {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
  font-style: normal;
}

.method__link {
  font-size: 15px;
  margin-top: 20px;
}

.method__link a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */

.faq {
  border-bottom: var(--nu-thick) solid var(--nu-black);
  padding: 40px 20px;
}

.faq__label {
  margin-bottom: 24px;
}

.faq-list {
  border-top: var(--nu-hairline) solid var(--nu-black);
}

.faq-item {
  border-bottom: var(--nu-hairline) solid var(--nu-black);
}

.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}

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

.faq-item__question {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.faq-icon {
  font-size: 20px;
  line-height: 1;
  flex: none;
}

.faq-icon::before {
  content: "+";
}

.faq-item[open] .faq-icon::before {
  content: "\2212";
}

.faq-item__answer {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  padding: 0 0 20px;
}

/* ── CTA final et pied de page ───────────────────────────────────── */

.final-cta {
  padding: 48px 20px 40px;
  border-bottom: var(--nu-hairline) solid var(--nu-black);
}

.final-cta__title {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

.final-cta__badges {
  margin-top: 28px;
}

.site-footer {
  padding: 20px;
}

.site-footer__logo {
  height: 12px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--nu-grey-text);
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__links a:hover {
  color: var(--nu-black);
}

.site-footer__links .site-footer__link--desktop-only {
  display: none;
}

.site-footer__copy {
  font-size: 13px;
  color: var(--nu-grey-text);
  margin: 12px 0 0;
}

/* ── Pages légales (CGU, confidentialité) ───────────────────────────
   Même système que le reste : filets fins entre sections plutôt que des
   `<hr>`, aucune ombre, aucun rayon. Colonne de lecture resserrée
   (--nu-legal-measure) à l'intérieur de la section pleine largeur, pour
   rester lisible sans devenir une bande de texte edge-to-edge. ────────── */

.legal {
  padding: 32px 20px 48px;
}

.legal__title {
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 14px 0 0;
}

.legal__updated {
  font-size: 13px;
  color: var(--nu-grey-text);
  margin: var(--nu-space-4) 0 0;
  padding-bottom: var(--nu-space-6);
  border-bottom: var(--nu-thick) solid var(--nu-black);
}

.legal__body {
  max-width: 760px;
  margin-top: var(--nu-space-6);
}

.legal__body h2 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
  padding-top: var(--nu-space-6);
  border-top: var(--nu-hairline) solid var(--nu-black);
}

.legal__body > h2:first-child {
  border-top: 0;
  padding-top: 0;
}

.legal__body h2 + p,
.legal__body h2 + ul,
.legal__body h2 + ol {
  margin-top: var(--nu-space-3);
}

.legal__body p {
  font-size: 16px;
  line-height: 1.55;
  margin: var(--nu-space-4) 0 0;
}

.legal__body strong {
  font-weight: 500;
}

.legal__body ul,
.legal__body ol {
  margin: var(--nu-space-4) 0 0;
  padding-left: 1.15em;
}

.legal__body li {
  font-size: 16px;
  line-height: 1.55;
  margin-top: 6px;
}

.legal__body li:first-child {
  margin-top: 0;
}

.legal__body li > ul,
.legal__body li > ol {
  margin-top: 6px;
}

.legal__body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal__table-wrap {
  margin-top: var(--nu-space-4);
  overflow-x: auto;
}

.legal__body table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}

.legal__body th,
.legal__body td {
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: var(--nu-hairline) solid var(--nu-black);
  vertical-align: top;
}

.legal__body th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nu-grey-text);
  font-weight: 500;
  border-bottom: var(--nu-thick) solid var(--nu-black);
}

/* ───────────────────────────────────────────────────────────────
   Desktop — à partir de 900 px. Pas la version mobile étirée : le
   héros et la compatibilité passent en deux colonnes séparées par un
   filet vertical, les trois étapes en trois cellules égales, les cinq
   dimensions en pleine largeur. Les tailles des plus grands titres sont
   fluides (clamp) pour rester lisibles entre 900 et 1440+ px ; le
   contenu se recentre au-delà de 1440 px, la largeur de la maquette.
   ─────────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .site-header,
  .hero,
  .comparison,
  .why,
  .how__eyebrow,
  .steps,
  .dimensions,
  .archetypes__head,
  .archetype-grid,
  .archetypes__cta,
  .compat,
  .method,
  .faq,
  .final-cta,
  .site-footer,
  .legal {
    max-width: var(--nu-content-max);
    margin-left: auto;
    margin-right: auto;
  }

  .site-header {
    padding: 20px 56px;
  }

  .site-header__logo {
    height: 38px;
    width: auto;
  }

  .site-header__button {
    display: none;
  }

  .site-header .site-header__badges {
    display: flex;
  }

  /* ── Héros ─────────────────────────────────────────────────────── */

  .hero {
    padding: 0;
    display: flex;
  }

  .hero__content {
    flex: 1.15 1 0;
    padding: var(--nu-space-18) var(--nu-space-14) var(--nu-space-16);
    min-width: 0;
  }

  .hero__title {
    font-size: clamp(48px, 6.4vw, 92px);
    line-height: 0.94;
    margin-top: 28px;
  }

  .hero__subtitle {
    font-size: 21px;
    margin-top: 32px;
    max-width: 33ch;
  }

  .hero__badges {
    margin-top: 40px;
  }

  .hero__badges.store-badges {
    flex-direction: row;
  }

  .hero__badges .store-badge {
    height: 56px;
    padding: 0 var(--nu-space-4);
  }

  .hero__badges .store-badge__eyebrow {
    font-size: 10px;
  }

  .hero__badges .store-badge__name {
    font-size: 20px;
  }

  .hero__note {
    margin-top: var(--nu-space-6);
  }

  .hero__visual {
    flex: 1 1 0;
    border-left: var(--nu-hairline) solid var(--nu-black);
    padding: var(--nu-space-14);
    margin-top: 0;
    display: flex;
    justify-content: center;
    min-width: 0;
  }

  .result-card {
    width: 360px;
    flex: none;
    height: 670px;
  }

  .result-card__header {
    padding: 12px 16px;
  }

  .result-card__logo {
    height: 14px;
  }

  .result-card__mini-bars {
    width: 20px;
  }

  .result-card__archetype {
    padding: 24px 16px 0;
  }

  .result-card__archetype-row {
    gap: 16px;
    margin-top: 16px;
  }

  .result-card__quad {
    width: 44px;
    height: 44px;
    margin-top: 6px;
  }

  .result-card__name {
    font-size: 38px;
  }

  .result-card__tag {
    display: inline-block;
    border: var(--nu-hairline) solid var(--nu-black);
    padding: 4px 8px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nu-black);
    margin-top: 12px;
  }

  .result-card__desc {
    margin-top: 18px;
  }

  .result-card__bands {
    padding: 24px 16px 0;
  }

  .result-card__divider {
    margin-bottom: 20px;
  }

  .result-card__text {
    padding: 8px 16px 0;
  }

  .band-row {
    margin-bottom: 14px;
  }

  .band-row__score {
    font-size: 14px;
  }

  .band-row__track {
    height: 14px;
  }

  .band-row__fill {
    height: 12px;
  }

  /* ── Comparatif ────────────────────────────────────────────────── */

  .comparison {
    max-width: var(--nu-content-max);
    margin-left: auto;
    margin-right: auto;
    padding: var(--nu-space-18) var(--nu-space-14) var(--nu-space-20);
  }

  .comparison__head {
    margin-bottom: var(--nu-space-10);
  }

  .comparison__title {
    font-size: clamp(34px, 3.8vw, 54px);
    line-height: 1.05;
  }

  .comparison__subtitle {
    font-size: 18px;
    margin-top: 18px;
  }

  .comparison-table {
    min-width: 100%;
    font-size: 15px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 18px 24px;
  }

  .comparison-table tbody th {
    font-size: 15px;
  }

  .comparison-table tbody td {
    font-size: 15px;
  }

  .comparison-table thead th {
    font-size: 12px;
  }

  /* ── Pourquoi ──────────────────────────────────────────────────── */

  .why {
    display: flex;
    padding: 0;
  }

  .why__title-col {
    flex: 1.5 1 0;
    padding: var(--nu-space-20) var(--nu-space-14);
    min-width: 0;
  }

  .why__title {
    font-size: clamp(32px, 3.61vw, 52px);
    line-height: 1.06;
  }

  .why__body-col {
    flex: 1 1 0;
    border-left: var(--nu-hairline) solid var(--nu-black);
    padding: var(--nu-space-20) var(--nu-space-14);
    min-width: 0;
  }

  .why__body {
    font-size: 19px;
    line-height: 1.5;
    margin-top: 0;
  }

  .why__body + .why__body {
    margin-top: 20px;
  }

  .why__body--desktop-only {
    display: block;
  }

  /* ── Comment ça marche ─────────────────────────────────────────── */

  .how__eyebrow {
    padding: var(--nu-space-14) var(--nu-space-14) var(--nu-space-8);
  }

  .steps {
    display: flex;
    border-top: var(--nu-hairline) solid var(--nu-black);
  }

  .step {
    flex: 1 1 0;
    padding: 40px var(--nu-space-14) var(--nu-space-14);
    border-top: 0;
    border-right: var(--nu-hairline) solid var(--nu-black);
    min-width: 0;
  }

  .step:last-child {
    border-right: 0;
  }

  .step__number {
    font-size: 52px;
  }

  .step__quad {
    width: 32px;
    height: 32px;
  }

  .step__title {
    font-size: 26px;
    letter-spacing: -0.025em;
    margin-top: 28px;
  }

  .step__body {
    font-size: 16px;
  }

  /* ── Cinq dimensions ───────────────────────────────────────────── */

  .dimensions {
    padding: var(--nu-space-18) var(--nu-space-14) var(--nu-space-20);
  }

  .dimensions__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--nu-space-12);
  }

  .dimensions__title {
    font-size: clamp(32px, 3.61vw, 52px);
    line-height: 1.06;
    max-width: 720px;
  }

  .dimensions__desc {
    display: block;
    font-size: 16px;
    color: var(--nu-grey-text);
    max-width: 380px;
    text-align: left;
    margin: 0;
  }

  .dimension-list {
    margin-top: var(--nu-space-14);
  }

  .dimension-row {
    padding: 22px 0;
  }

  .dimension-row__role {
    display: block;
  }

  .dimension-row__name,
  .dimension-row__score {
    font-size: 28px;
  }

  .dimension-row__track {
    height: 28px;
  }

  .dimension-row__fill {
    height: 26px;
  }

  /* ── Archétypes ────────────────────────────────────────────────── */

  .archetypes__head {
    padding: var(--nu-space-18) var(--nu-space-14) var(--nu-space-8);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--nu-space-12);
  }

  .archetypes__title {
    font-size: clamp(32px, 3.61vw, 52px);
    line-height: 1.06;
    max-width: 640px;
  }

  .archetypes__desc {
    display: block;
    font-size: 16px;
    color: var(--nu-grey-text);
    max-width: 380px;
    margin: 0;
  }

  .archetype-grid {
    border-top: var(--nu-hairline) solid var(--nu-black);
  }

  .archetype-card {
    width: 25%;
    padding: var(--nu-space-6) var(--nu-space-6) 32px;
    border-right: var(--nu-hairline) solid var(--nu-black);
  }

  .archetype-card:nth-child(2n) {
    border-right: var(--nu-hairline) solid var(--nu-black);
  }

  .archetype-card:nth-child(4n) {
    border-right: none;
  }

  .archetype-card__quad {
    width: 36px;
    height: 36px;
  }

  .archetype-card__name {
    font-size: 24px;
    letter-spacing: -0.03em;
    margin-top: var(--nu-space-4);
  }

  .archetype-card__sig {
    display: block;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nu-grey-text);
    margin-top: 8px;
  }

  .archetype-card__line {
    font-size: 16px;
    margin-top: 14px;
  }

  .archetypes__cta {
    padding: var(--nu-space-14) var(--nu-space-14);
    display: flex;
    align-items: center;
    gap: var(--nu-space-8);
  }

  .archetypes__cta .store-badges {
    flex-direction: row;
  }

  .archetypes__cta .store-badge {
    height: 56px;
    padding: 0 var(--nu-space-4);
  }

  .archetypes__cta .store-badge__eyebrow {
    font-size: 10px;
  }

  .archetypes__cta .store-badge__name {
    font-size: 20px;
  }

  .archetypes__cta-text {
    display: block;
    font-size: 16px;
    color: var(--nu-grey-text);
  }

  /* ── Compatibilité ─────────────────────────────────────────────── */

  .compat {
    display: flex;
    padding: 0;
  }

  .compat__content {
    flex: 1 1 0;
    padding: var(--nu-space-18) var(--nu-space-14);
    min-width: 0;
  }

  .compat__title {
    font-size: clamp(36px, 4.44vw, 64px);
    line-height: 0.98;
    margin-top: var(--nu-space-6);
  }

  .compat__body {
    font-size: 19px;
    line-height: 1.5;
    margin-top: var(--nu-space-8);
    max-width: 520px;
  }

  .compat__note {
    display: block;
    font-size: 16px;
    color: var(--nu-grey-text);
    margin-top: var(--nu-space-6);
  }

  .compat__visual {
    flex: 1 1 0;
    border-left: var(--nu-hairline) solid var(--nu-black);
    padding: var(--nu-space-14);
    margin-top: 0;
    display: flex;
    justify-content: center;
    min-width: 0;
  }

  .compare-card {
    width: 360px;
    flex: none;
    height: 552px;
  }

  .compare-card__header {
    padding: 14px 16px;
  }

  .compare-card__names {
    padding: var(--nu-space-6) 16px 0;
  }

  .compare-card__title {
    font-size: 28px;
    line-height: 1.08;
  }

  .compare-card__legend {
    gap: 20px;
    margin-top: 14px;
  }

  .legend-item {
    gap: 7px;
    font-size: 13px;
  }

  .legend-swatch {
    width: 12px;
    height: 12px;
  }

  .compare-card__proximity {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--nu-space-4) 16px 0;
  }

  .proximity-cell {
    width: 24px;
    height: 24px;
    border: var(--nu-hairline) solid var(--nu-black);
  }

  .proximity-cell--near {
    background: var(--nu-black);
  }

  .compare-card__proximity-text {
    font-size: 14px;
    margin-left: 8px;
  }

  .compare-card__rows {
    padding: var(--nu-space-6) 16px 0;
  }

  .compare-card__rows-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
  }

  .compare-card__rows-head::before {
    content: "Dimension";
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nu-grey-text);
  }

  .compare-card__rows-head::after {
    content: "Écart";
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nu-grey-text);
  }

  .compare-row {
    margin-bottom: 16px;
  }

  .compare-row__gap {
    font-size: 13px;
  }

  .compare-row__track {
    height: 22px;
  }

  .compare-row__bar {
    height: 8px;
  }

  /* ── Méthodologie ──────────────────────────────────────────────── */

  .method {
    padding: var(--nu-space-20) var(--nu-space-14);
    display: flex;
    gap: var(--nu-space-16);
    align-items: flex-start;
  }

  .method__label {
    width: 220px;
    flex: none;
    margin-bottom: 0;
  }

  .method__body {
    flex: 1 1 0;
    min-width: 0;
  }

  .method__quote {
    font-size: 34px;
    letter-spacing: -0.03em;
    line-height: 1.2;
  }

  .method__link {
    font-size: 16px;
    margin-top: var(--nu-space-6);
  }

  /* ── FAQ ────────────────────────────────────────────────────────── */

  .faq {
    padding: var(--nu-space-18) var(--nu-space-14) var(--nu-space-20);
  }

  .faq__label {
    margin-bottom: 36px;
  }

  .faq-item summary {
    gap: var(--nu-space-8);
    padding: 26px 0;
  }

  .faq-item__question {
    font-size: 26px;
    letter-spacing: -0.025em;
    line-height: 1.2;
    max-width: 900px;
  }

  .faq-icon {
    font-size: 26px;
  }

  .faq-item__answer {
    font-size: 18px;
    max-width: 820px;
    padding-bottom: 30px;
  }

  /* ── CTA final et pied de page ────────────────────────────────── */

  .final-cta {
    padding: var(--nu-space-24) var(--nu-space-14) var(--nu-space-18);
  }

  .final-cta__title {
    font-size: clamp(40px, 5vw, 72px);
    line-height: 0.98;
    max-width: 900px;
  }

  .final-cta__badges {
    margin-top: 44px;
  }

  .final-cta__badges.store-badges {
    flex-direction: row;
  }

  .final-cta__badges .store-badge {
    height: 56px;
    padding: 0 var(--nu-space-4);
  }

  .final-cta__badges .store-badge__eyebrow {
    font-size: 10px;
  }

  .final-cta__badges .store-badge__name {
    font-size: 20px;
  }

  .site-footer {
    padding: var(--nu-space-6) var(--nu-space-14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nu-space-8);
  }

  .site-footer__logo {
    height: 14px;
  }

  .site-footer__links {
    gap: var(--nu-space-6);
    margin: 0;
  }

  .site-footer__links .site-footer__link--desktop-only {
    display: inline;
  }

  .site-footer__copy {
    margin: 0;
    white-space: nowrap;
  }

  /* ── Pages légales ─────────────────────────────────────────────── */

  .legal {
    padding: var(--nu-space-18) var(--nu-space-14) var(--nu-space-20);
  }

  .legal__title {
    font-size: clamp(40px, 4.4vw, 56px);
  }

  .legal__body {
    margin-top: var(--nu-space-8);
  }

  .legal__body h2 {
    font-size: 24px;
    padding-top: var(--nu-space-8);
  }

  .legal__body > h2:first-child {
    padding-top: 0;
  }
}