:root {
  --bg: #f7f3ed;
  --surface: #fffdf9;
  --paper: #fbf7f1;
  --paper-2: #eee5d9;
  --text: #1f2933;
  --muted: #665b51;
  --soft: #9b8f83;
  --border: #ddd1c3;
  --line: #cec3b7;
  --accent: #b35b32;
  --accent-dark: #974722;
  --container: 80rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Source Sans 3", Arial, sans-serif;
}
a { color: inherit; }
.container {
  width: min(calc(100% - 3rem), var(--container));
  margin-inline: auto;
}

.hero {
  min-height: 50rem;
  display: grid;
  align-items: center;
  padding-block: 4rem;
}
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 2rem;
}
.hero__content {
  grid-column: 1 / span 7;
  max-width: 38.75rem;
}
.hero__visual {
  grid-column: 8 / -1;
  display: grid;
  min-width: 0;
  place-items: center end;
}
.hero__eyebrow {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.display {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(3.4rem, 4.55vw, 4.75rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.01;
}
.lead {
  max-width: 38rem;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: clamp(1.16rem, 1.45vw, 1.38rem);
  line-height: 1.55;
}
.lead strong { font-weight: 700; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.button {
  display: inline-flex;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  padding: 0.78rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.38rem;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.button:hover { transform: translateY(-1px); }
.button--primary { color: #fff; background: var(--accent); }
.button--primary:hover { background: var(--accent-dark); }
.button--secondary { border-color: #cbbdac; background: rgba(255,255,255,.35); }
.proof-list {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem 0 0;
  padding: 0;
  color: #5f554c;
  font-size: 0.9rem;
  list-style: none;
}
.proof-list__item { display: inline-flex; align-items: center; }
.proof-list__item:not(:last-child)::after {
  width: 1px;
  height: 1rem;
  margin-inline: 1rem;
  background: #c9bcae;
  content: "";
}

/* Illustration — document de travail */
.analysis-board {
  position: relative;
  width: min(100%, 35.5rem);
  aspect-ratio: 0.96;
}
.analysis-board__sheet {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.analysis-board__sheet--third {
  background: #eadfd2;
  transform: translate(1.2rem, 1rem) rotate(1.5deg);
  box-shadow: 0 18px 42px rgb(51 45 39 / 5%);
}
.analysis-board__sheet--second {
  background: #f2e9de;
  transform: translate(0.62rem, 0.52rem) rotate(0.55deg);
}
.analysis-board__sheet--front {
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 6px 16px rgb(51 45 39 / 4%), 0 26px 64px rgb(51 45 39 / 10%);
}
.analysis-board__toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  background: #eee7dd;
}
.analysis-board__dots { display: flex; gap: 0.35rem; }
.analysis-board__dots span {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: #b4a798;
}
.analysis-board__domain {
  overflow: hidden;
  padding-inline: 0.75rem;
  color: #8f8276;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analysis-board__status {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.analysis-board__page {
  position: relative;
  height: calc(100% - 2.8rem);
  padding: 1rem;
  background:
    linear-gradient(rgb(255 253 249 / 97%), rgb(255 253 249 / 97%)),
    repeating-linear-gradient(0deg, transparent 0, transparent 23px, #efe8df 24px);
}

.site-preview {
  width: 68%;
  height: calc(100% - 4.8rem);
  transition: opacity 700ms ease, filter 700ms ease;
}
.site-preview__header {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  margin-bottom: 0.9rem;
}
.site-preview__logo {
  width: 5rem;
  height: 0.62rem;
  margin-right: auto;
  border-radius: 999px;
  background: #3d3732;
}
.site-preview__nav {
  width: 1.8rem;
  height: 0.3rem;
  border-radius: 999px;
  background: #d4c9bd;
}
.site-preview__hero {
  display: grid;
  grid-template-columns: 1.3fr 0.75fr;
  gap: 0.8rem;
  min-height: 13rem;
  padding: 0.95rem;
  border: 1px solid #e1d6ca;
  border-radius: 0.45rem;
  background: #f7f1e9;
}
.site-preview__copy { position: relative; }
.site-preview__kicker {
  margin: 0 0 0.55rem;
  color: #9a8e82;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.site-preview__title {
  margin: 0;
  max-width: 13rem;
  font-size: 1rem;
  line-height: 1.16;
}
.site-preview__title--old { color: #5f554d; }
.site-preview__title--new {
  position: absolute;
  top: 1.55rem;
  left: 0;
  color: var(--accent);
  opacity: 0;
  transform: translateY(0.35rem);
}
.site-preview__text {
  max-width: 13rem;
  margin: 0.75rem 0 0;
  color: #8d8176;
  font-size: 0.68rem;
  line-height: 1.38;
}
.site-preview__actions {
  position: absolute;
  left: 0;
  bottom: 0;
  min-height: 2rem;
}
.site-preview__button {
  display: inline-flex;
  min-height: 1.95rem;
  align-items: center;
  padding: 0.4rem 0.65rem;
  border: 1px solid #cdbfb1;
  border-radius: 0.34rem;
  font-size: 0.68rem;
  font-weight: 700;
}
.site-preview__button--old { color: #74695f; background: #f2ebe3; }
.site-preview__button--new {
  position: absolute;
  inset: 0 auto auto 0;
  width: max-content;
  border-color: var(--accent);
  color: var(--accent);
  background: #fff8f2;
  opacity: 0;
  transform: translateY(0.3rem);
}
.site-preview__image {
  display: grid;
  place-items: center;
  border-radius: 0.35rem;
  background: #e9dfd3;
}
.site-preview__image span {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #cfc1b3;
}
.site-preview__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-top: 0.65rem;
}
.site-preview__cards article {
  min-height: 4.2rem;
  padding: 0.62rem;
  border: 1px solid #e1d6ca;
  border-radius: 0.35rem;
  background: #faf6f0;
}
.site-preview__cards span {
  display: block;
  width: 58%;
  height: 0.38rem;
  margin-bottom: 0.45rem;
  border-radius: 999px;
  background: #615850;
}
.site-preview__cards i {
  display: block;
  width: 84%;
  height: 0.23rem;
  margin-top: 0.27rem;
  border-radius: 999px;
  background: #d3c8bc;
}
.site-preview__cards i:last-child { width: 62%; }
.site-preview__footer {
  display: flex;
  gap: 1rem;
  margin-top: 0.8rem;
  padding-top: 0.65rem;
  border-top: 1px solid #e3d9ce;
}
.site-preview__footer span {
  width: 2.8rem;
  height: 0.25rem;
  border-radius: 999px;
  background: #d3c8bc;
}

/* Trois notes de relecture seulement */
.review-note {
  position: absolute;
  z-index: 6;
  color: #7f7368;
  font-size: 0.61rem;
  font-style: italic;
  line-height: 1.15;
  opacity: 0;
  transform: translateY(0.3rem) rotate(-1deg);
}
.review-note span {
  display: inline-block;
  padding: 0.35rem 0.45rem;
  border: 1px solid #e0d3c5;
  border-radius: 0.22rem;
  background: #fff8e9;
  box-shadow: 0 4px 10px rgb(54 46 38 / 6%);
}
.review-note::after {
  position: absolute;
  height: 1px;
  background: var(--accent);
  content: "";
  opacity: 0.75;
  transform-origin: left center;
}
.review-note--message { top: 7.7rem; left: 0.15rem; }
.review-note--message::after { top: 1rem; left: 100%; width: 2.2rem; transform: rotate(7deg); }
.review-note--cta { top: 18.1rem; left: 0.35rem; transform: translateY(0.3rem) rotate(1deg); }
.review-note--cta::after { top: 0.95rem; left: 100%; width: 2.15rem; transform: rotate(-8deg); }
.review-note--content { right: 31.5%; bottom: 5.25rem; transform: translateY(0.3rem) rotate(-1.2deg); }
.review-note--content::after { top: 0.7rem; right: 100%; width: 1.8rem; transform: rotate(-9deg); }

.review-gesture {
  position: absolute;
  z-index: 5;
  display: block;
  opacity: 0;
}
.review-gesture--strike {
  top: 8.5rem;
  left: 2.3rem;
  width: 10.5rem;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0) rotate(-2deg);
  transform-origin: left center;
}
.review-gesture--arrow-message {
  top: 8.95rem;
  left: 13rem;
  width: 2.4rem;
  height: 1.8rem;
  border-right: 1.4px solid var(--accent);
  border-bottom: 1.4px solid var(--accent);
  border-radius: 0 0 1rem 0;
  transform: rotate(18deg);
}
.review-gesture--circle-cta {
  top: 17.8rem;
  left: 1.9rem;
  width: 7.4rem;
  height: 2rem;
  border: 1.4px solid var(--accent);
  border-radius: 999px;
  transform: rotate(-1deg) scale(0.92);
}
.review-gesture--arrow-cta {
  top: 18.2rem;
  left: 9.1rem;
  width: 2rem;
  height: 1.4rem;
  border-top: 1.4px solid var(--accent);
  border-right: 1.4px solid var(--accent);
  transform: rotate(18deg);
}

/* Les cinq décisions, avec une priorité 1 dominante */
.priority-panel {
  position: absolute;
  top: 3.7rem;
  right: 1rem;
  bottom: 4.7rem;
  z-index: 7;
  width: 31%;
  display: grid;
  align-content: start;
  gap: 0.4rem;
}
.priority {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  padding: 0.52rem 0.58rem;
  border: 1px solid #e3d8cd;
  border-radius: 0.42rem;
  background: rgb(255 253 249 / 90%);
  color: #756a61;
  opacity: 0;
  transform: translateY(0.35rem);
}
.priority__badge {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #b9afa5;
  font-size: 0.72rem;
  font-weight: 700;
}
.priority strong {
  display: block;
  font-size: 0.87rem;
  line-height: 1.22;
}
.priority p {
  margin: 0.25rem 0 0;
  color: #71645a;
  font-size: 0.67rem;
  line-height: 1.35;
}
.priority--1 {
  padding: 0.68rem;
  border-color: rgb(179 91 50 / 65%);
  color: var(--text);
  background: #fffaf5;
  box-shadow: 0 6px 16px rgb(70 53 42 / 5%);
}
.priority--1 .priority__badge {
  width: 2.15rem;
  height: 2.15rem;
  background: var(--accent);
  font-size: 0.92rem;
}
.priority--1 strong {
  font-size: 0.87rem;
  line-height: 1.22;
}
.priority--1 p {
  color: #71645a;
  font-size: 0.67rem;
  line-height: 1.35;
}
.priority--2 { opacity: 0; }
.priority--3,
.priority--4,
.priority--5 { padding-block: 0.46rem; }
.priority--3 .priority__badge,
.priority--4 .priority__badge,
.priority--5 .priority__badge {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.64rem;
}

.analysis-result {
  position: absolute;
  right: 1rem;
  bottom: 0.95rem;
  left: 1rem;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  border-top: 1px solid #e1d6ca;
  color: var(--accent);
  background: rgb(255 250 245 / 72%);
  opacity: 0;
  transform: translateY(0.4rem);
}
.analysis-result__check {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 1rem;
  font-weight: 700;
}
.analysis-result strong {
  font-size: 1.05rem;
  line-height: 1.15;
}

/* État final */
.analysis-board.is-complete .site-preview {
  opacity: 0.18;
  filter: grayscale(0.75);
}
.analysis-board.is-complete .site-preview__title--old,
.analysis-board.is-complete .site-preview__button--old { opacity: 0.12; }
.analysis-board.is-complete .site-preview__title--new,
.analysis-board.is-complete .site-preview__button--new,
.analysis-board.is-complete .review-note,
.analysis-board.is-complete .review-gesture,
.analysis-board.is-complete .priority,
.analysis-board.is-complete .analysis-result {
  opacity: 1;
  transform: none;
}
.analysis-board.is-complete .review-note { opacity: 0.76; }
.analysis-board.is-complete .review-gesture--strike { transform: scaleX(1) rotate(-2deg); }

@keyframes strike { to { opacity: 1; transform: scaleX(1) rotate(-2deg); } }
@keyframes fadeOld { to { opacity: 0.12; } }
@keyframes reveal { to { opacity: 1; transform: none; } }
@keyframes revealMuted { to { opacity: 0.76; transform: none; } }
@keyframes revealSoft { to { opacity: 0.76; transform: none; } }
@keyframes fadeNoise { to { opacity: 0.18; filter: grayscale(0.75); } }

.placeholder-section {
  min-height: 12rem;
  display: grid;
  align-items: start;
  padding-top: 2rem;
  color: #8f8378;
  border-top: 1px solid rgba(221, 209, 195, 0.65);
  background: #fbf8f3;
}

@media (prefers-reduced-motion: reduce) {
  .analysis-board .site-preview { opacity: 0.18; filter: grayscale(0.75); }
  .analysis-board .site-preview__title--old,
  .analysis-board .site-preview__button--old { opacity: 0.12; }
  .analysis-board .site-preview__title--new,
  .analysis-board .site-preview__button--new,
  .analysis-board .review-gesture,
  .analysis-board .priority,
  .analysis-board .analysis-result { opacity: 1; transform: none; }
  .analysis-board .review-note { opacity: 0.76; transform: none; }
  .analysis-board .review-gesture--strike { transform: scaleX(1) rotate(-2deg); }
}

@media (max-width: 980px) {
  .hero { min-height: auto; padding-block: 4.5rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 4rem; }
  .hero__content,
  .hero__visual { grid-column: 1; }
  .hero__content { max-width: 42rem; }
  .hero__visual { place-items: center; }
  .analysis-board { width: min(100%, 36rem); }
}

@media (max-width: 640px) {
  .container { width: min(calc(100% - 2rem), var(--container)); }
  .hero { padding-block: 3rem; }
  .display { font-size: clamp(2.65rem, 13vw, 3.35rem); }
  .lead { font-size: 1.1rem; }
  .hero__actions { align-items: stretch; }
  .hero__actions .button { width: 100%; }
  .proof-list { flex-direction: column; gap: 0.7rem; }
  .proof-list__item:not(:last-child)::after { display: none; }

  .analysis-board { width: 100%; aspect-ratio: 0.78; }
  .analysis-board__toolbar { padding-inline: 0.72rem; }
  .analysis-board__domain { max-width: 7rem; }
  .analysis-board__status { font-size: 0.6rem; }
  .analysis-board__page { padding: 0.7rem; }

  .site-preview { width: 100%; height: calc(58% - 0.3rem); }
  .site-preview__hero { min-height: 10.5rem; padding: 0.72rem; }
  .site-preview__title { font-size: 0.82rem; }
  .site-preview__text { font-size: 0.58rem; }
  .site-preview__button { font-size: 0.58rem; }
  .site-preview__cards { gap: 0.38rem; }
  .site-preview__cards article { min-height: 3.3rem; padding: 0.45rem; }
  .site-preview__footer { display: none; }

  .review-note { display: none; }
  .review-gesture--arrow-message,
  .review-gesture--arrow-cta { display: none; }

  .priority-panel {
    top: auto;
    right: 0.7rem;
    bottom: 4.1rem;
    left: 0.7rem;
    width: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .priority {
    display: flex;
    min-width: 0;
    justify-content: center;
    padding: 0.36rem;
  }
  .priority div { display: none; }
  .priority--1 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    justify-content: initial;
    padding: 0.5rem;
  }
  .priority--1 div { display: block; }
  .priority--1 p { display: none; }
  .priority__badge,
  .priority--3 .priority__badge,
  .priority--4 .priority__badge,
  .priority--5 .priority__badge { width: 1.35rem; height: 1.35rem; }
  .priority--1 .priority__badge { width: 1.65rem; height: 1.65rem; }
  .analysis-result { min-height: 2.8rem; }
  .analysis-result__check { width: 1.65rem; height: 1.65rem; }
  .analysis-result strong { font-size: 0.86rem; }
}

/* =========================================================
   V10 — Reconstruction de la zone centrale
   ========================================================= */

.site-preview {
  width: 68%;
  height: calc(100% - 4.8rem);
  opacity: 1;
  filter: none;
  transition: opacity 700ms ease, filter 700ms ease;
}

.site-preview__hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(5.6rem, 0.72fr);
  gap: 0.9rem;
  min-height: 14.2rem;
  padding: 0.95rem;
}

.site-preview__copy {
  position: relative;
  min-width: 0;
}

.before-after {
  position: relative;
}

.before-after--message {
  min-height: 7.15rem;
}

.before-after__label {
  display: block;
  margin-bottom: 0.16rem;
  color: #a99d91;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.before-after__label--after {
  margin-top: 0.15rem;
  color: var(--accent);
  opacity: 0;
  transform: translateY(0.15rem);
}

.before-after__separator {
  display: block;
  width: max-content;
  margin: 0.15rem 0 0.1rem 0.2rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(0.15rem);
}

.site-preview__title {
  max-width: 14rem;
  font-size: 0.96rem;
}

.site-preview__title--old {
  position: relative;
  color: #62584f;
}

.site-preview__title--old::after {
  position: absolute;
  top: 52%;
  right: -0.15rem;
  left: -0.15rem;
  height: 1.5px;
  background: var(--accent);
  content: "";
  transform: scaleX(0) rotate(-2deg);
  transform-origin: left center;
}

.site-preview__title--new {
  position: static;
  color: var(--accent);
  opacity: 0;
  transform: translateY(0.28rem);
}

.site-preview__text {
  margin-top: 0.5rem;
}

.before-after--cta {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 2.35rem;
  margin-top: 0.65rem;
}

.before-after--cta .before-after__label {
  position: absolute;
  top: -0.62rem;
  left: 0;
  margin: 0;
}

.before-after--cta .before-after__separator {
  margin: 0;
  opacity: 0;
}

.site-preview__actions {
  position: static;
}

.site-preview__button--old {
  position: relative;
  color: #756b61;
  background: #f3ece4;
}

.site-preview__button--old::after {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  left: 0.35rem;
  height: 1px;
  background: var(--accent);
  content: "";
  transform: scaleX(0) rotate(-2deg);
  transform-origin: left center;
}

.site-preview__button--new {
  position: static;
  width: max-content;
  opacity: 0;
  transform: translateY(0.25rem);
}

.site-preview__image {
  align-self: stretch;
}

/* Post-it sobres, reliés aux constats */
.review-note {
  position: absolute;
  z-index: 100;
  color: #66594e;
  font-size: 0.67rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.22;
  opacity: 0;
  transform: translateY(0.3rem) rotate(-1deg);
}

.review-note span {
  display: inline-block;
  padding: 0.38rem 0.5rem;
  border: 1px solid #ddcdb8;
  border-radius: 0.22rem;
  background: #fff4d9;
  box-shadow:
    0 3px 7px rgb(54 46 38 / 8%),
    0 8px 16px rgb(54 46 38 / 5%);
}

.review-note i {
  position: absolute;
  top: 0.42rem;
  left: 50%;
  width: 1.8rem;
  height: 0.34rem;
  background: rgb(255 255 255 / 46%);
  transform: translateX(-50%) rotate(-2deg);
}

.review-note::after {
  opacity: 0.9;
}

.review-note--message {
  top: 7.45rem;
  left: 0.2rem;
  transform: translateY(0.3rem) rotate(-2.5deg);
}
.review-note--message::after {
  top: 1.1rem;
  left: 100%;
  width: 2.55rem;
  transform: rotate(6deg);
}

.review-note--cta {
  top: 17.65rem;
  left: 0.15rem;
  transform: translateY(0.3rem) rotate(1.8deg);
}
.review-note--cta::after {
  top: 1.15rem;
  left: 100%;
  width: 2.5rem;
  transform: rotate(-7deg);
}

.review-note--content {
  right: 32.5%;
  bottom: 5rem;
  transform: translateY(0.3rem) rotate(-1.6deg);
}
.review-note--content::after {
  top: 1rem;
  right: 100%;
  width: 2.25rem;
  transform: rotate(-8deg);
}

/* Gestes de relecture avec fonction claire */
.review-gesture--strike {
  top: 8.42rem;
  left: 2.35rem;
  width: 10.25rem;
}

.review-gesture--arrow-message {
  top: 9.2rem;
  left: 12.7rem;
  width: 2.3rem;
  height: 2.3rem;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  border-radius: 0 0 1rem 0;
  transform: rotate(14deg);
}

.review-gesture--circle-cta {
  top: 17.65rem;
  left: 2.2rem;
  width: 7.95rem;
  height: 2.15rem;
}

.review-gesture--arrow-cta {
  top: 18.2rem;
  left: 9.65rem;
  width: 2.2rem;
  height: 1.5rem;
  border-top: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
}

.review-gesture--content {
  right: 31.5%;
  bottom: 6.5rem;
  width: 2.7rem;
  height: 1.5rem;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  border-radius: 0 0 0.8rem 0;
  transform: rotate(-8deg);
}

/* Le site reste lisible à la fin : secondaire, jamais effacé */
.analysis-board.is-complete .site-preview {
  opacity: 0.46;
  filter: grayscale(0.45);
}

.analysis-board.is-complete .site-preview__title--old,
.analysis-board.is-complete .site-preview__button--old {
  opacity: 0.24;
}

.analysis-board.is-complete .site-preview__title--old::after,
.analysis-board.is-complete .site-preview__button--old::after {
  transform: scaleX(1) rotate(-2deg);
}

.analysis-board.is-complete .before-after__label--after,
.analysis-board.is-complete .before-after__separator,
.analysis-board.is-complete .site-preview__title--new,
.analysis-board.is-complete .site-preview__button--new,
.analysis-board.is-complete .review-note,
.analysis-board.is-complete .review-gesture,
.analysis-board.is-complete .priority,
.analysis-board.is-complete .analysis-result {
  opacity: 1;
  transform: none;
}

.analysis-board.is-complete .review-note {
  opacity: 0.76;
}

/* Animation V10 : observation → correction → décision
   Durée totale : environ 9,5 secondes
   ========================================================= */

.analysis-board.is-animating .site-preview__title--old::after {
  animation: strike 700ms ease 500ms forwards;
}

.analysis-board.is-animating .site-preview__title--old {
  animation: fadeOldV10 450ms ease 1.25s forwards;
}

.analysis-board.is-animating .before-after--message .before-after__separator,
.analysis-board.is-animating .before-after__label--after,
.analysis-board.is-animating .site-preview__title--new {
  animation: reveal 650ms ease 1.45s forwards;
}

.analysis-board.is-animating .review-gesture--arrow-message,
.analysis-board.is-animating .review-note--message {
  animation: revealPostit 500ms ease 2.3s forwards;
}

.analysis-board.is-animating .site-preview__button--old::after {
  animation: strike 650ms ease 3.2s forwards;
}

.analysis-board.is-animating .site-preview__button--old {
  animation: fadeOldV10 420ms ease 3.85s forwards;
}

.analysis-board.is-animating .before-after--cta .before-after__separator,
.analysis-board.is-animating .site-preview__button--new {
  animation: reveal 600ms ease 4s forwards;
}

.analysis-board.is-animating .review-gesture--circle-cta,
.analysis-board.is-animating .review-gesture--arrow-cta,
.analysis-board.is-animating .review-note--cta {
  animation: revealPostit 500ms ease 4.7s forwards;
}

.analysis-board.is-animating .review-gesture--content,
.analysis-board.is-animating .review-note--content {
  animation: revealPostit 500ms ease 5.35s forwards;
}

.analysis-board.is-animating .priority--1 {
  animation: reveal 550ms ease 6s forwards;
}

.analysis-board.is-animating .priority--2 {
  animation: revealSoft 500ms ease 6.5s forwards;
}

.analysis-board.is-animating .priority--3 {
  animation: revealSoft 500ms ease 6.85s forwards;
}

.analysis-board.is-animating .priority--4 {
  animation: revealSoft 500ms ease 7.2s forwards;
}

.analysis-board.is-animating .priority--5 {
  animation: revealSoft 500ms ease 7.55s forwards;
}

.analysis-board.is-animating .site-preview {
  animation: fadeNoiseV10 800ms ease 7.9s forwards;
}

.analysis-board.is-animating .analysis-result {
  animation: reveal 650ms ease 8.85s forwards;
}

@keyframes fadeOldV10 {
  to {
    opacity: 0.24;
  }
}

@keyframes revealPostit {
  to {
    opacity: 0.94;
    transform: none;
  }
}

@keyframes fadeNoiseV10 {
  to {
    opacity: 0.46;
    filter: grayscale(0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .analysis-board .site-preview { opacity: 0.46; filter: grayscale(0.45); }
  .analysis-board .site-preview__title--old,
  .analysis-board .site-preview__button--old { opacity: 0.24; }
  .analysis-board .site-preview__title--old::after,
  .analysis-board .site-preview__button--old::after { transform: scaleX(1) rotate(-2deg); }
  .analysis-board .before-after__label--after,
  .analysis-board .before-after__separator,
  .analysis-board .site-preview__title--new,
  .analysis-board .site-preview__button--new,
  .analysis-board .review-gesture,
  .analysis-board .priority,
  .analysis-board .analysis-result { opacity: 1; transform: none; }
  .analysis-board .review-note { opacity: 0.76; transform: none; }
}

@media (max-width: 640px) {
  .before-after__label,
  .before-after__separator { display: none; }
  .before-after--message { min-height: 5.2rem; }
  .before-after--cta { margin-top: 0.4rem; }
  .site-preview__hero { min-height: 11rem; }
}

/* =========================================================
   ÉCRAN 2 — COMPRÉHENSION
   Des hypothèses dispersées vers cinq priorités claires
   ========================================================= */

.clarity-section {
  padding-block: 8rem;
  border-top: 1px solid rgb(221 209 195 / 68%);
  background: #fbf8f3;
}

.clarity-section__inner {
  display: grid;
  gap: 4.5rem;
}

.clarity-section__heading {
  max-width: 46rem;
}

.section-eyebrow {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.section-title {
  max-width: 23ch;
  margin: 0;
  font-size: clamp(2.7rem, 4.1vw, 4.15rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.section-lead {
  max-width: 42rem;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: clamp(1.12rem, 1.35vw, 1.3rem);
  line-height: 1.55;
}

.clarity-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 5rem minmax(20rem, 0.75fr);
  align-items: stretch;
  gap: 2rem;
}

.clarity-noise {
  min-width: 0;
}

.clarity-noise__label {
  margin: 0 0 1rem;
  color: #82766b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.thought-cloud {
  position: relative;
  min-height: 27rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background:
    linear-gradient(rgb(255 253 249 / 95%), rgb(255 253 249 / 95%)),
    repeating-linear-gradient(0deg, transparent 0, transparent 31px, #eee6dc 32px);
}

.thought {
  position: absolute;
  max-width: 16rem;
  padding: 0.9rem 1rem;
  border: 1px solid #dfd4c8;
  border-radius: 0.45rem;
  color: #61574f;
  background: rgb(255 253 249 / 95%);
  box-shadow: 0 8px 24px rgb(61 52 44 / 5%);
  font-size: 0.98rem;
  line-height: 1.35;
}

.thought--1 { top: 2.1rem; left: 2.25rem; transform: rotate(-3.2deg); }
.thought--2 { top: 3.8rem; right: 2.35rem; transform: rotate(0.8deg); }
.thought--3 { top: 10rem; left: 6.2rem; max-width: 20rem; transform: rotate(-0.4deg); }
.thought--4 { top: 16rem; left: 2.7rem; transform: rotate(1deg); }
.thought--5 { top: 17.6rem; right: 2.7rem; transform: rotate(-1deg); }
.thought--6 { right: 6.5rem; bottom: 2rem; transform: rotate(0.5deg); }

.clarity-card {
  position: relative;
  min-height: 27rem;
  overflow: hidden;
  padding: 2.25rem;
  border: 1px solid rgb(179 91 50 / 58%);
  border-radius: 0.75rem;
  background: #fffaf5;
  box-shadow: 0 20px 50px rgb(65 49 38 / 8%);
}


.clarity-card__eyebrow {
  position: relative;
  margin: 0 0 0.8rem;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clarity-card h3 {
  position: relative;
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2rem, 2.7vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.clarity-card > p:not(.clarity-card__eyebrow) {
  position: relative;
  max-width: 26rem;
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.clarity-card__list {
  position: relative;
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e6d8ca;
}

.clarity-card__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.5rem;
  border-bottom: 1px solid #e6d8ca;
  color: #4f463f;
  font-size: 0.92rem;
  font-weight: 600;
}

.priority-list__check {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  color: #b8aa9d;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.clarity-card__list .priority-list__number {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
}

/* Ajustement final du Hero : respiration avant le résultat */
.priority-panel {
  bottom: 5.55rem;
  gap: 0.34rem;
}

.analysis-result {
  bottom: 0.8rem;
}

@media (max-width: 980px) {
  .clarity-section { padding-block: 6rem; }

  .clarity-comparison {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .clarity-card h3 { max-width: 18ch; }
}

@media (max-width: 640px) {
  .clarity-section { padding-block: 4.5rem; }
  .clarity-section__inner { gap: 3rem; }
  .section-title { font-size: clamp(2.4rem, 11vw, 3.15rem); }

  .thought-cloud {
    min-height: auto;
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
  }

  .thought {
    position: static;
    max-width: none;
    transform: none;
  }

  .thought-thread { display: none; }

  .clarity-card {
    min-height: auto;
    padding: 1.5rem;
  }


  .clarity-card h3 { font-size: 2.2rem; }
}

/* =========================================================
   ÉCRAN 2 — V2
   Ajustements de crédibilité et de clarté
   ========================================================= */

/* Le titre suffit à installer l'idée : aucun surtitre concurrent. */
.clarity-section__heading {
  max-width: 42rem;
}

/* Désordre maîtrisé : les pensées semblent réellement s'accumuler. */
.thought-cloud {
  min-height: 28rem;
}

.thought {
  box-shadow:
    0 3px 8px rgb(61 52 44 / 3%),
    0 12px 28px rgb(61 52 44 / 5%);
}

.thought--1 {
  top: 1.7rem;
  left: 1.8rem;
  max-width: 15.5rem;
  transform: rotate(-2.2deg);
}

.thought--2 {
  top: 3.2rem;
  right: 1.65rem;
  max-width: 15.5rem;
  transform: rotate(1.7deg);
}

.thought--3 {
  top: 9.4rem;
  left: 5.2rem;
  max-width: 21rem;
  transform: rotate(-0.8deg);
}

.thought--4 {
  top: 15.2rem;
  left: 1.9rem;
  max-width: 16.5rem;
  transform: rotate(1.8deg);
}

.thought--5 {
  top: 14.7rem;
  right: 1.8rem;
  max-width: 14.5rem;
  transform: rotate(-2deg);
}

.thought--6 {
  right: 5.2rem;
  bottom: 1.55rem;
  max-width: 19rem;
  transform: rotate(1.2deg);
}

/* Quelques recouvrements et fils croisés suffisent à évoquer l'hésitation. */
.thought--3,
.thought--5 {
  z-index: 2;
}

.thought-thread--1 {
  top: 7.3rem;
  left: 11.6rem;
  width: 7.3rem;
  height: 3.8rem;
  transform: rotate(13deg);
}

.thought-thread--2 {
  top: 13.7rem;
  right: 8.2rem;
  width: 8rem;
  height: 2.8rem;
  transform: rotate(-11deg);
}

.thought-thread--3 {
  bottom: 4.9rem;
  left: 12.2rem;
  width: 8.6rem;
  height: 2.5rem;
  transform: rotate(6deg);
}

/* Transition douce : le bruit se resserre pour devenir une décision. */
.clarity-transition {
  position: relative;
  display: grid;
  min-height: 5rem;
  place-items: center;
}

.clarity-transition__line {
  display: block;
  width: 3.8rem;
  height: 1px;
  background: linear-gradient(90deg, #c6b8aa 0%, var(--accent) 100%);
}

.clarity-transition__dot {
  position: absolute;
  right: calc(50% - 2rem);
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
}

/* Carte de droite plus calme : le titre devient l'unique point d'entrée. */
.clarity-card {
  min-height: 27rem;
  padding: 2.35rem;
}

.clarity-card h3 {
  max-width: 15ch;
}

.clarity-card > p:not(.clarity-card__eyebrow) {
  max-width: 24rem;
  margin-top: 1.45rem;
  font-size: 1.08rem;
  line-height: 1.52;
}

@media (max-width: 980px) {
  .clarity-transition {
    min-height: 3.25rem;
  }

  .clarity-transition__line {
    width: 1px;
    height: 2.6rem;
    background: linear-gradient(180deg, #c6b8aa 0%, var(--accent) 100%);
  }

  .clarity-transition__dot {
    right: auto;
    bottom: 0.2rem;
  }
}

@media (max-width: 640px) {
  .thought-cloud {
    min-height: auto;
  }

  .thought,
  .thought--1,
  .thought--2,
  .thought--3,
  .thought--4,
  .thought--5,
  .thought--6 {
    position: static;
    max-width: none;
    transform: none;
  }

  .clarity-card {
    padding: 1.6rem;
  }
}


/* =========================================================
   ÉCRAN 3 — Le diagnostic annoté
   ========================================================= */

.method-section {
  padding-block: 8rem;
  border-top: 1px solid rgb(221 209 195 / 62%);
  background: #fbf8f3;
}

.method-section__inner {
  display: grid;
  gap: 4.5rem;
}

.method-section__heading {
  max-width: 51rem;
}

.method-section__eyebrow {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.method-section__title {
  max-width: 19ch;
}

.method-section__lead {
  max-width: 44rem;
}

.method-stage {
  display: grid;
  grid-template-columns: minmax(15rem, 0.78fr) minmax(0, 1.72fr);
  gap: clamp(3rem, 6vw, 6.5rem);
  align-items: center;
}

.method-steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: method-step;
}

.method-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  column-gap: 0.8rem;
  padding: 1rem 0 1.15rem;
  border-bottom: 1px solid #e5dacf;
}

.method-steps li:first-child {
  padding-top: 0;
}

.method-steps li > span {
  grid-row: 1 / span 2;
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid #d7c9bb;
  border-radius: 50%;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
}

.method-steps strong {
  font-size: 1.08rem;
  line-height: 1.25;
}

.method-steps p {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.diagnostic-scene {
  position: relative;
  width: min(100%, 46rem);
  aspect-ratio: 1.2;
  justify-self: end;
}

.diagnostic-scene__sheet {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
}

.diagnostic-scene__sheet--back {
  background: #eadfd2;
  transform: translate(1.15rem, 0.95rem) rotate(1.2deg);
  box-shadow: 0 20px 48px rgb(52 45 39 / 6%);
}

.diagnostic-scene__sheet--mid {
  background: #f2e9de;
  transform: translate(0.58rem, 0.45rem) rotate(0.45deg);
}

.diagnostic-scene__sheet--front {
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 8px 20px rgb(52 45 39 / 4%), 0 30px 72px rgb(52 45 39 / 10%);
}

.diagnostic-scene__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: #eee7dd;
}

.diagnostic-scene__label,
.diagnostic-scene__status {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.diagnostic-canvas {
  position: relative;
  height: calc(100% - 3rem);
  padding: 1rem;
  background:
    linear-gradient(rgb(255 253 249 / 96%), rgb(255 253 249 / 96%)),
    repeating-linear-gradient(0deg, transparent 0, transparent 23px, #efe8df 24px);
}

.diagnostic-page {
  width: 74%;
  height: calc(100% - 4.1rem);
  padding: 0.85rem;
  border: 1px solid #e2d7cb;
  border-radius: 0.48rem;
  background: #f8f2eb;
  transition: opacity 700ms ease, filter 700ms ease;
}

.diagnostic-page__header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.diagnostic-page__header i {
  width: 5.4rem;
  height: 0.55rem;
  margin-right: auto;
  border-radius: 999px;
  background: #4a433d;
}

.diagnostic-page__header span {
  width: 2rem;
  height: 0.25rem;
  border-radius: 999px;
  background: #d5cabe;
}

.diagnostic-page__hero {
  display: grid;
  grid-template-columns: 1.35fr 0.75fr;
  gap: 0.8rem;
  min-height: 12.6rem;
  padding: 0.9rem;
  border: 1px solid #e3d8cd;
  border-radius: 0.4rem;
  background: #fbf7f1;
}

.diagnostic-page__hero small {
  display: block;
  max-width: 13rem;
  color: #8e8277;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.diagnostic-page__hero h3 {
  max-width: 14rem;
  margin: 0.45rem 0 0.8rem;
  font-size: 1.08rem;
  line-height: 1.18;
}

.diagnostic-page__hero p {
  width: 86%;
  height: 0.28rem;
  margin: 0.3rem 0;
  border-radius: 999px;
  background: #d6cbbf;
}

.diagnostic-page__hero p:nth-of-type(2) { width: 74%; }
.diagnostic-page__hero p:nth-of-type(3) { width: 61%; }

.diagnostic-page__hero button {
  margin-top: 1rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid #cfc0b2;
  border-radius: 0.32rem;
  color: #776b61;
  background: #f3ece4;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 700;
}

.diagnostic-page__hero figure {
  margin: 0;
  border-radius: 0.35rem;
  background:
    radial-gradient(circle at 50% 40%, #cdbfb2 0 1.7rem, transparent 1.75rem),
    #e9dfd4;
}

.diagnostic-page__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.diagnostic-page__cards article {
  min-height: 4rem;
  border: 1px solid #e2d7cb;
  border-radius: 0.35rem;
  background: #fcf8f3;
}

.diagnostic-page__footer {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid #e4dacf;
}

.diagnostic-page__footer span {
  width: 2.8rem;
  height: 0.23rem;
  border-radius: 999px;
  background: #d6cbbf;
}

.diagnostic-mark {
  position: absolute;
  z-index: 4;
  padding: 0.34rem 0.48rem;
  border: 1px solid #ddd2c6;
  border-radius: 0.26rem;
  background: rgb(255 253 249 / 94%);
  box-shadow: 0 5px 12px rgb(54 46 38 / 5%);
  font-size: 0.61rem;
  line-height: 1.22;
  opacity: 0;
  transform: translateY(0.25rem);
}

.diagnostic-mark--secondary {
  color: #91857a;
  font-style: italic;
}

.diagnostic-mark--priority {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  border-color: rgb(179 91 50 / 50%);
  color: var(--accent-dark);
  background: #fff8f2;
}

.diagnostic-mark--priority span {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
}

.diagnostic-mark--priority strong {
  font-size: 0.67rem;
  line-height: 1.18;
}

.diagnostic-mark--s1 { top: 2.8rem; right: 1.3rem; }
.diagnostic-mark--s2 { top: 6.2rem; left: 0.25rem; }
.diagnostic-mark--s3 { top: 8.1rem; right: 4.6rem; }
.diagnostic-mark--s4 { top: 12.2rem; right: 0.9rem; }
.diagnostic-mark--s5 { top: 15.3rem; left: 3rem; }
.diagnostic-mark--s6 { right: 7rem; bottom: 5.4rem; }
.diagnostic-mark--s7 { left: 0.6rem; bottom: 7.1rem; }
.diagnostic-mark--s8 { right: 1.1rem; bottom: 2.9rem; }

.diagnostic-mark--p1 { top: 4.6rem; left: 1.15rem; }
.diagnostic-mark--p2 { top: 13.5rem; left: 2.1rem; }
.diagnostic-mark--p3 { right: 1.15rem; bottom: 8.1rem; }
.diagnostic-mark--p4 { top: 1.35rem; right: 5.5rem; }
.diagnostic-mark--p5 { right: 8.7rem; bottom: 3.9rem; }

.diagnostic-stroke {
  position: absolute;
  z-index: 3;
  display: block;
  border-color: var(--accent);
  opacity: 0;
}

.diagnostic-stroke--1 {
  top: 6.8rem;
  left: 2.4rem;
  width: 10.2rem;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0) rotate(-2deg);
  transform-origin: left center;
}

.diagnostic-stroke--2 {
  top: 13.1rem;
  left: 2.4rem;
  width: 7rem;
  height: 2.2rem;
  border: 1.4px solid var(--accent);
  border-radius: 999px;
  transform: scale(0.9) rotate(-1deg);
}

.diagnostic-stroke--3 {
  top: 4rem;
  right: 8rem;
  width: 3rem;
  height: 2.2rem;
  border-right: 1.4px solid var(--accent);
  border-bottom: 1.4px solid var(--accent);
  border-radius: 0 0 1rem 0;
}

.diagnostic-stroke--4 {
  right: 8rem;
  bottom: 8rem;
  width: 4.2rem;
  height: 1.2rem;
  border-bottom: 1.4px solid var(--accent);
  transform: rotate(-5deg);
}

.diagnostic-stroke--5 {
  right: 13rem;
  bottom: 4.6rem;
  width: 4rem;
  height: 1.2rem;
  border-bottom: 1.4px solid var(--accent);
  transform: rotate(4deg);
}

.diagnostic-summary {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  left: 1rem;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgb(179 91 50 / 42%);
  border-radius: 0.4rem;
  color: var(--accent-dark);
  background: #fff9f4;
  opacity: 0;
  transform: translateY(0.35rem);
}

.diagnostic-summary span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
}

.diagnostic-summary strong {
  font-size: 0.95rem;
  line-height: 1.25;
}

.diagnostic-scene.is-complete .diagnostic-page {
  opacity: 0.3;
  filter: grayscale(0.55);
}

.diagnostic-scene.is-complete .diagnostic-mark--secondary {
  opacity: 0.32;
  transform: none;
}

.diagnostic-scene.is-complete .diagnostic-mark--priority,
.diagnostic-scene.is-complete .diagnostic-stroke,
.diagnostic-scene.is-complete .diagnostic-summary {
  opacity: 1;
  transform: none;
}

.diagnostic-scene.is-complete .diagnostic-stroke--1 {
  transform: scaleX(1) rotate(-2deg);
}

/* Animation : accumulation des observations, puis sélection des cinq priorités. */
.diagnostic-scene.is-animating .diagnostic-mark--s1 { animation: diagnosticReveal 420ms ease 450ms forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--s2 { animation: diagnosticReveal 420ms ease 850ms forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--s3 { animation: diagnosticReveal 420ms ease 1.2s forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--s4 { animation: diagnosticReveal 420ms ease 1.55s forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--s5 { animation: diagnosticReveal 420ms ease 1.9s forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--s6 { animation: diagnosticReveal 420ms ease 2.25s forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--s7 { animation: diagnosticReveal 420ms ease 2.6s forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--s8 { animation: diagnosticReveal 420ms ease 2.95s forwards; }

.diagnostic-scene.is-animating .diagnostic-mark--p1 { animation: diagnosticPriority 500ms ease 3.65s forwards; }
.diagnostic-scene.is-animating .diagnostic-stroke--1 { animation: diagnosticStrike 650ms ease 3.8s forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--p2 { animation: diagnosticPriority 500ms ease 4.15s forwards; }
.diagnostic-scene.is-animating .diagnostic-stroke--2 { animation: diagnosticPriority 500ms ease 4.3s forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--p3 { animation: diagnosticPriority 500ms ease 4.65s forwards; }
.diagnostic-scene.is-animating .diagnostic-stroke--4 { animation: diagnosticPriority 500ms ease 4.8s forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--p4 { animation: diagnosticPriority 500ms ease 5.15s forwards; }
.diagnostic-scene.is-animating .diagnostic-stroke--3 { animation: diagnosticPriority 500ms ease 5.3s forwards; }
.diagnostic-scene.is-animating .diagnostic-mark--p5 { animation: diagnosticPriority 500ms ease 5.65s forwards; }
.diagnostic-scene.is-animating .diagnostic-stroke--5 { animation: diagnosticPriority 500ms ease 5.8s forwards; }

.diagnostic-scene.is-animating .diagnostic-mark--secondary { animation-name: diagnosticSecondaryFade; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 6.35s; animation-fill-mode: forwards; }
.diagnostic-scene.is-animating .diagnostic-page { animation: diagnosticPageFade 750ms ease 6.45s forwards; }
.diagnostic-scene.is-animating .diagnostic-summary { animation: diagnosticPriority 600ms ease 7.25s forwards; }

@keyframes diagnosticReveal {
  to { opacity: 0.78; transform: none; }
}

@keyframes diagnosticPriority {
  to { opacity: 1; transform: none; }
}

@keyframes diagnosticStrike {
  to { opacity: 1; transform: scaleX(1) rotate(-2deg); }
}

@keyframes diagnosticSecondaryFade {
  to { opacity: 0.32; transform: none; }
}

@keyframes diagnosticPageFade {
  to { opacity: 0.3; filter: grayscale(0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .diagnostic-scene .diagnostic-page { opacity: 0.3; filter: grayscale(0.55); }
  .diagnostic-scene .diagnostic-mark--secondary { opacity: 0.32; transform: none; }
  .diagnostic-scene .diagnostic-mark--priority,
  .diagnostic-scene .diagnostic-stroke,
  .diagnostic-scene .diagnostic-summary { opacity: 1; transform: none; }
  .diagnostic-scene .diagnostic-stroke--1 { transform: scaleX(1) rotate(-2deg); }
}

@media (max-width: 980px) {
  .method-section { padding-block: 6rem; }
  .method-stage { grid-template-columns: 1fr; gap: 3.5rem; }
  .method-steps { max-width: 40rem; }
  .diagnostic-scene { width: min(100%, 46rem); justify-self: center; }
}

@media (max-width: 640px) {
  .method-section { padding-block: 4.5rem; }
  .method-section__inner { gap: 3rem; }
  .method-stage { gap: 2.75rem; }

  .method-steps li {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .method-steps li > span {
    width: 1.8rem;
    height: 1.8rem;
  }

  .diagnostic-scene {
    aspect-ratio: 0.76;
  }

  .diagnostic-page {
    width: 100%;
    height: 58%;
  }

  .diagnostic-page__hero {
    min-height: 9.6rem;
  }

  .diagnostic-mark--secondary,
  .diagnostic-stroke {
    display: none;
  }

  .diagnostic-mark--priority {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }

  .diagnostic-mark--p1 { top: auto; bottom: 10.9rem; }
  .diagnostic-mark--p2 { top: auto; bottom: 8.6rem; }
  .diagnostic-mark--p3 { top: auto; bottom: 6.3rem; }
  .diagnostic-mark--p4 { top: auto; bottom: 4rem; }
  .diagnostic-mark--p5 { top: auto; bottom: 1.7rem; }

  .diagnostic-summary {
    display: none;
  }
}


/* Ajustements V2 : sélection → hiérarchisation → recommandation */
.method-section__heading { max-width: 58rem; }
.method-section__title { max-width: 19ch; }
.method-section__lead { max-width: 47rem; }

.diagnostic-process {
  position: absolute;
  left: 50%;
  bottom: 5.55rem;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: .45rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.diagnostic-process__step {
  padding: .42rem .68rem;
  border: 1px solid rgba(28, 28, 28, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(.45rem);
  box-shadow: 0 8px 20px rgba(28, 28, 28, .06);
}

.diagnostic-scene.is-animating .diagnostic-process__step--select { animation: diagnosticProcessIn .5s 4.15s forwards, diagnosticProcessDim .45s 5.35s forwards; }
.diagnostic-scene.is-animating .diagnostic-process__step--rank { animation: diagnosticProcessIn .5s 5.25s forwards, diagnosticProcessDim .45s 6.45s forwards; }
.diagnostic-scene.is-animating .diagnostic-process__step--recommend { animation: diagnosticProcessIn .5s 6.35s forwards; }

.diagnostic-scene.is-complete .diagnostic-process__step {
  opacity: .5;
  transform: none;
}
.diagnostic-scene.is-complete .diagnostic-process__step--recommend {
  opacity: 1;
  color: var(--ink);
  border-color: rgba(211, 92, 42, .28);
}

.diagnostic-summary {
  min-width: 15.5rem;
  justify-content: center;
}

.diagnostic-summary strong {
  max-width: none;
}

@keyframes diagnosticProcessIn {
  to { opacity: 1; transform: none; }
}

@keyframes diagnosticProcessDim {
  to { opacity: .42; }
}

@media (max-width: 760px) {
  .method-section__title { max-width: 18ch; }
  .diagnostic-process {
    bottom: 5rem;
    gap: .3rem;
  }
  .diagnostic-process__step {
    padding: .35rem .48rem;
    font-size: .58rem;
  }
	.hero__visual,
	.diagnostic-scene,
	.recommendation-scene,
	.pricing-card {
		display:none;
	}
	
	.method-steps li {
		opacity:1 !important;
	}
	.method-steps li strong {
		color: var(--accent-dark);
	}
	.method-steps li p {
    color: #1F2933;
}
}

@media (prefers-reduced-motion: reduce) {
  .diagnostic-process__step { opacity: .5; transform: none; }
  .diagnostic-process__step--recommend { opacity: 1; }
}

/* =========================================================
   ÉCRAN 3 — V3 : l’arbitrage devient le cœur de la scène
   ========================================================= */
.diagnostic-v3 { aspect-ratio: 1.2; }
.diagnostic-v3 .diagnostic-scene__sheet--front { overflow: hidden; }

.diagnostic-v3__toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 3.45rem;
  padding: .72rem 1rem;
  border-bottom: 1px solid var(--border);
  background: #eee7dd;
}

.diagnostic-v3__label {
  color: var(--muted);
  font-size: .69rem;
  font-weight: 700;
  white-space: nowrap;
}

.diagnostic-v3__progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .28rem;
}

.diagnostic-v3__progress span {
  position: relative;
  display: flex;
  align-items: center;
  gap: .32rem;
  min-width: 0;
  color: #a0958a;
  font-size: .57rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color .35s ease, opacity .35s ease;
}

.diagnostic-v3__progress span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .06rem;
  width: .55rem;
  height: 1px;
  background: #d3c8bc;
}

.diagnostic-v3__progress i {
  display: grid;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border: 1px solid #d2c5b8;
  border-radius: 50%;
  background: #f8f3ed;
  font-size: .53rem;
  font-style: normal;
  transition: border-color .35s ease, color .35s ease, background .35s ease;
}

.diagnostic-v3__progress span.is-active { color: var(--ink); }
.diagnostic-v3__progress span.is-active i {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}
.diagnostic-v3__progress span.is-done { color: #796f66; }
.diagnostic-v3__progress span.is-done i {
  border-color: #c8b9ab;
  color: transparent;
  background: #f8f3ed;
}
.diagnostic-v3__progress span.is-done i::before {
  content: "✓";
  color: var(--accent);
}

.diagnostic-v3__canvas {
  position: relative;
  height: calc(100% - 3.45rem);
  padding: 1rem;
  overflow: hidden;
  background:
    linear-gradient(rgb(255 253 249 / 96%), rgb(255 253 249 / 96%)),
    repeating-linear-gradient(0deg, transparent 0, transparent 23px, #efe8df 24px);
}

.diagnostic-v3__page {
  width: 74%;
  height: calc(100% - 2.9rem);
  padding: .85rem;
  border: 1px solid #e2d7cb;
  border-radius: .48rem;
  background: #f8f2eb;
  transition: opacity 750ms ease, filter 750ms ease, transform 750ms ease;
}

.diagnostic-v3__note {
  position: absolute;
  z-index: 4;
  padding: .34rem .48rem;
  border: 1px solid #ddd2c6;
  border-radius: .28rem;
  color: #8f8378;
  background: rgb(255 253 249 / 96%);
  box-shadow: 0 5px 12px rgb(54 46 38 / 5%);
  font-size: .59rem;
  font-style: italic;
  line-height: 1.22;
  opacity: 0;
  transform: translateY(.3rem) rotate(var(--r, 0deg));
}

.diagnostic-v3__note--candidate {
  display: flex;
  align-items: center;
  gap: .36rem;
  border-color: rgb(179 91 50 / 40%);
  color: var(--accent-dark);
  background: #fff8f2;
  font-style: normal;
  font-weight: 700;
}

.diagnostic-v3__note--candidate span {
  display: grid;
  flex: 0 0 auto;
  width: 1.18rem;
  height: 1.18rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: .57rem;
}

.note-s1 { --r: -1deg; top: 3.2rem; right: 1.35rem; }
.note-s2 { --r: 1deg; top: 6.35rem; left: .2rem; }
.note-s3 { --r: -.7deg; top: 8.5rem; right: 4.4rem; }
.note-s4 { --r: .8deg; top: 12.15rem; right: .8rem; }
.note-s5 { --r: -.8deg; top: 15.2rem; left: 3rem; }
.note-s6 { --r: .7deg; right: 6.6rem; bottom: 3.8rem; }
.note-s7 { --r: -.5deg; left: .55rem; bottom: 6rem; }

.note-p1 { --r: -.7deg; top: 4.55rem; left: 1.15rem; }
.note-p2 { --r: .6deg; top: 13.2rem; left: 2rem; }
.note-p3 { --r: -.4deg; right: 1rem; bottom: 7rem; }
.note-p4 { --r: .6deg; top: 1.2rem; right: 5.2rem; }
.note-p5 { --r: -.5deg; right: 8rem; bottom: 2.65rem; }

.diagnostic-v3__stroke {
  position: absolute;
  z-index: 3;
  display: block;
  border-color: var(--accent);
  opacity: 0;
}
.stroke-1 { top: 6.75rem; left: 2.2rem; width: 10.1rem; height: 1.5px; background: var(--accent); transform: scaleX(0) rotate(-2deg); transform-origin: left; }
.stroke-2 { top: 12.8rem; left: 2.25rem; width: 7rem; height: 2.2rem; border: 1.4px solid var(--accent); border-radius: 999px; }
.stroke-3 { top: 3.8rem; right: 7.8rem; width: 3rem; height: 2.2rem; border-right: 1.4px solid var(--accent); border-bottom: 1.4px solid var(--accent); border-radius: 0 0 1rem 0; }

.diagnostic-v3__result {
  position: absolute;
  inset: 1rem 1rem 3.2rem auto;
  z-index: 10;
  width: min(21.5rem, calc(100% - 2rem));
  padding: 1rem;
  border: 1px solid rgb(179 91 50 / 34%);
  border-radius: .55rem;
  background: rgb(255 250 246 / 98%);
  box-shadow: 0 24px 54px rgb(52 45 39 / 18%);
  opacity: 0;
  transform: translateX(2rem) scale(.98);
}

.diagnostic-v3__result-head {
  padding-bottom: .78rem;
  border-bottom: 1px solid #e9d8ca;
}
.diagnostic-v3__result-head span {
  display: block;
  margin-bottom: .28rem;
  color: var(--accent);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.diagnostic-v3__result-head strong {
  display: block;
  max-width: 19rem;
  font-size: .92rem;
  line-height: 1.3;
}
.diagnostic-v3__result ol { margin: .72rem 0 0; padding: 0; list-style: none; }
.diagnostic-v3__result li {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  padding: .46rem 0;
  border-bottom: 1px solid #efe2d7;
  opacity: 0;
  transform: translateX(.6rem);
}
.diagnostic-v3__result li:last-child { border-bottom: 0; }
.diagnostic-v3__result li span {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: .6rem;
  font-weight: 800;
}
.diagnostic-v3__result li strong { font-size: .78rem; line-height: 1.25; }

.diagnostic-v3__caption {
  position: absolute;
  right: 1rem;
  bottom: .85rem;
  left: 1rem;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: .5rem .8rem;
  border: 1px solid #e5d8cc;
  border-radius: .38rem;
  color: #6f655d;
  background: rgb(255 253 249 / 94%);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  transition: border-color .35s ease, color .35s ease, background .35s ease;
}

/* État final statique et reduced motion. */
.diagnostic-v3.is-complete .diagnostic-v3__page {
  opacity: .23;
  filter: grayscale(.75) blur(.5px);
  transform: scale(.985);
}
.diagnostic-v3.is-complete .diagnostic-v3__note:not(.diagnostic-v3__note--candidate) { opacity: .2; transform: rotate(var(--r, 0deg)); }
.diagnostic-v3.is-complete .diagnostic-v3__note--candidate { opacity: 0; transform: translateX(2.5rem) scale(.96); }
.diagnostic-v3.is-complete .diagnostic-v3__result { opacity: 1; transform: none; }
.diagnostic-v3.is-complete .diagnostic-v3__result li { opacity: 1; transform: none; }
.diagnostic-v3.is-complete .diagnostic-v3__caption { color: var(--accent-dark); border-color: rgb(179 91 50 / 35%); background: #fff8f2; }
.diagnostic-v3.is-complete .diagnostic-v3__stroke { opacity: .25; }

/* Déroulé : accumulation → sélection → hiérarchisation → recommandations. */
.diagnostic-v3.is-animating .note-s1 { animation: v3NoteIn .38s .35s forwards, v3NoteDim .65s 5.55s forwards; }
.diagnostic-v3.is-animating .note-s2 { animation: v3NoteIn .38s .65s forwards, v3NoteDim .65s 5.55s forwards; }
.diagnostic-v3.is-animating .note-p1 { animation: v3NoteIn .4s .95s forwards, v3CandidateFocus .55s 4.15s forwards, v3CandidateOut .65s 7.15s forwards; }
.diagnostic-v3.is-animating .note-s3 { animation: v3NoteIn .38s 1.25s forwards, v3NoteDim .65s 5.55s forwards; }
.diagnostic-v3.is-animating .note-p4 { animation: v3NoteIn .4s 1.55s forwards, v3CandidateFocus .55s 4.3s forwards, v3CandidateOut .65s 7.25s forwards; }
.diagnostic-v3.is-animating .note-s4 { animation: v3NoteIn .38s 1.85s forwards, v3NoteDim .65s 5.55s forwards; }
.diagnostic-v3.is-animating .note-p2 { animation: v3NoteIn .4s 2.15s forwards, v3CandidateFocus .55s 4.45s forwards, v3CandidateOut .65s 7.35s forwards; }
.diagnostic-v3.is-animating .note-s5 { animation: v3NoteIn .38s 2.45s forwards, v3NoteDim .65s 5.55s forwards; }
.diagnostic-v3.is-animating .note-p3 { animation: v3NoteIn .4s 2.75s forwards, v3CandidateFocus .55s 4.6s forwards, v3CandidateOut .65s 7.45s forwards; }
.diagnostic-v3.is-animating .note-s6 { animation: v3NoteIn .38s 3.05s forwards, v3NoteDim .65s 5.55s forwards; }
.diagnostic-v3.is-animating .note-p5 { animation: v3NoteIn .4s 3.35s forwards, v3CandidateFocus .55s 4.75s forwards, v3CandidateOut .65s 7.55s forwards; }
.diagnostic-v3.is-animating .note-s7 { animation: v3NoteIn .38s 3.65s forwards, v3NoteDim .65s 5.55s forwards; }

.diagnostic-v3.is-animating .stroke-1 { animation: v3Strike .55s 1.05s forwards; }
.diagnostic-v3.is-animating .stroke-2,
.diagnostic-v3.is-animating .stroke-3 { animation: v3StrokeIn .45s 2.25s forwards, v3StrokeDim .55s 5.55s forwards; }

.diagnostic-v3.is-animating .diagnostic-v3__page { animation: v3PageDim .7s 6.45s forwards; }
.diagnostic-v3.is-animating .diagnostic-v3__result { animation: v3ResultIn .72s 7.35s forwards; }
.diagnostic-v3.is-animating .diagnostic-v3__result li:nth-child(1) { animation: v3ListIn .35s 7.85s forwards; }
.diagnostic-v3.is-animating .diagnostic-v3__result li:nth-child(2) { animation: v3ListIn .35s 8.05s forwards; }
.diagnostic-v3.is-animating .diagnostic-v3__result li:nth-child(3) { animation: v3ListIn .35s 8.25s forwards; }
.diagnostic-v3.is-animating .diagnostic-v3__result li:nth-child(4) { animation: v3ListIn .35s 8.45s forwards; }
.diagnostic-v3.is-animating .diagnostic-v3__result li:nth-child(5) { animation: v3ListIn .35s 8.65s forwards; }

@keyframes v3NoteIn { to { opacity: .82; transform: translateY(0) rotate(var(--r, 0deg)); } }
@keyframes v3NoteDim { to { opacity: .2; transform: rotate(var(--r, 0deg)); } }
@keyframes v3CandidateFocus { to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1.025); box-shadow: 0 8px 18px rgb(179 91 50 / 14%); } }
@keyframes v3CandidateOut { to { opacity: 0; transform: translateX(2.5rem) scale(.96); } }
@keyframes v3Strike { to { opacity: 1; transform: scaleX(1) rotate(-2deg); } }
@keyframes v3StrokeIn { to { opacity: 1; } }
@keyframes v3StrokeDim { to { opacity: .25; } }
@keyframes v3PageDim { to { opacity: .23; filter: grayscale(.75) blur(.5px); transform: scale(.985); } }
@keyframes v3ResultIn { to { opacity: 1; transform: none; } }
@keyframes v3ListIn { to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .diagnostic-v3 { aspect-ratio: .72; }
  .diagnostic-v3__toolbar { grid-template-columns: 1fr; gap: .55rem; }
  .diagnostic-v3__label { display: none; }
  .diagnostic-v3__progress span { font-size: .49rem; }
  .diagnostic-v3__progress span:not(:last-child)::after { display: none; }
  .diagnostic-v3__canvas { height: calc(100% - 4rem); }
  .diagnostic-v3__page { width: 100%; height: 53%; }
  .diagnostic-v3__note:not(.diagnostic-v3__note--candidate),
  .diagnostic-v3__stroke { display: none; }
  .diagnostic-v3__note--candidate { right: .65rem; left: .65rem; width: auto; }
  .note-p1 { top: auto; bottom: 12.3rem; }
  .note-p2 { top: auto; bottom: 10rem; }
  .note-p3 { top: auto; bottom: 7.7rem; }
  .note-p4 { top: auto; bottom: 5.4rem; }
  .note-p5 { top: auto; bottom: 3.1rem; }
  .diagnostic-v3__result { inset: auto .65rem 3.15rem; width: auto; }
  .diagnostic-v3__result-head strong { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .diagnostic-v3__page { opacity: .23; filter: grayscale(.75) blur(.5px); }
  .diagnostic-v3__note:not(.diagnostic-v3__note--candidate) { opacity: .2; transform: rotate(var(--r, 0deg)); }
  .diagnostic-v3__note--candidate { opacity: 0; }
  .diagnostic-v3__result { opacity: 1; transform: none; }
  .diagnostic-v3__result li { opacity: 1; transform: none; }
}

/* =========================================================
   ÉCRAN 3 — V4
   Rythme ralenti et synchronisation de la méthode
   ========================================================= */

.method-steps li {
  transition: opacity 420ms ease, transform 420ms ease, background-color 420ms ease;
}

.method-steps li > span,
.method-steps li strong,
.method-steps li p {
  transition: color 420ms ease, border-color 420ms ease, background-color 420ms ease, opacity 420ms ease;
}

.method-steps li:not(.is-active):not(.is-done) {
  opacity: 0.56;
}

.method-steps li.is-active {
  transform: translateX(0.3rem);
}

.method-steps li.is-active > span {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.method-steps li.is-active strong {
  color: var(--accent-dark);
}

.method-steps li.is-active p {
  color: var(--ink);
}

.method-steps li.is-done {
  opacity: 0.76;
}

.method-steps li.is-done > span {
  border-color: rgb(179 91 50 / 42%);
  color: var(--accent-dark);
  background: #fff8f2;
}

/* La scène prend le temps d'installer la complexité avant le tri. */
.diagnostic-v3.is-animating .note-s1 {
  animation:
    v3NoteIn .55s .6s forwards,
    v3NoteDim .9s 11.7s forwards;
}

.diagnostic-v3.is-animating .note-s2 {
  animation:
    v3NoteIn .55s 1.1s forwards,
    v3NoteDim .9s 11.7s forwards;
}

.diagnostic-v3.is-animating .note-p1 {
  animation:
    v3NoteIn .58s 1.6s forwards,
    v3CandidateFocus .75s 8.2s forwards,
    v3CandidateOut .9s 14.6s forwards;
}

.diagnostic-v3.is-animating .note-s3 {
  animation:
    v3NoteIn .55s 2.1s forwards,
    v3NoteDim .9s 11.7s forwards;
}

.diagnostic-v3.is-animating .note-p4 {
  animation:
    v3NoteIn .58s 2.6s forwards,
    v3CandidateFocus .75s 8.45s forwards,
    v3CandidateOut .9s 14.8s forwards;
}

.diagnostic-v3.is-animating .note-s4 {
  animation:
    v3NoteIn .55s 3.1s forwards,
    v3NoteDim .9s 11.7s forwards;
}

.diagnostic-v3.is-animating .note-p2 {
  animation:
    v3NoteIn .58s 3.6s forwards,
    v3CandidateFocus .75s 8.7s forwards,
    v3CandidateOut .9s 15s forwards;
}

.diagnostic-v3.is-animating .note-s5 {
  animation:
    v3NoteIn .55s 4.1s forwards,
    v3NoteDim .9s 11.7s forwards;
}

.diagnostic-v3.is-animating .note-p3 {
  animation:
    v3NoteIn .58s 4.6s forwards,
    v3CandidateFocus .75s 8.95s forwards,
    v3CandidateOut .9s 15.2s forwards;
}

.diagnostic-v3.is-animating .note-s6 {
  animation:
    v3NoteIn .55s 5.1s forwards,
    v3NoteDim .9s 11.7s forwards;
}

.diagnostic-v3.is-animating .note-p5 {
  animation:
    v3NoteIn .58s 5.6s forwards,
    v3CandidateFocus .75s 9.2s forwards,
    v3CandidateOut .9s 15.4s forwards;
}

.diagnostic-v3.is-animating .note-s7 {
  animation:
    v3NoteIn .55s 6.1s forwards,
    v3NoteDim .9s 11.7s forwards;
}

.diagnostic-v3.is-animating .stroke-1 {
  animation: v3Strike .75s 1.75s forwards;
}

.diagnostic-v3.is-animating .stroke-2,
.diagnostic-v3.is-animating .stroke-3 {
  animation:
    v3StrokeIn .65s 3.8s forwards,
    v3StrokeDim .85s 11.7s forwards;
}

.diagnostic-v3.is-animating .diagnostic-v3__page {
  animation: v3PageDim 1s 14.6s forwards;
}

.diagnostic-v3.is-animating .diagnostic-v3__result {
  animation: v3ResultIn 1s 15.5s forwards;
}

.diagnostic-v3.is-animating .diagnostic-v3__result li:nth-child(1) {
  animation: v3ListIn .5s 16.3s forwards;
}

.diagnostic-v3.is-animating .diagnostic-v3__result li:nth-child(2) {
  animation: v3ListIn .5s 16.7s forwards;
}

.diagnostic-v3.is-animating .diagnostic-v3__result li:nth-child(3) {
  animation: v3ListIn .5s 17.1s forwards;
}

.diagnostic-v3.is-animating .diagnostic-v3__result li:nth-child(4) {
  animation: v3ListIn .5s 17.5s forwards;
}

.diagnostic-v3.is-animating .diagnostic-v3__result li:nth-child(5) {
  animation: v3ListIn .5s 17.9s forwards;
}

@media (max-width: 640px) {
  .method-steps li.is-active { transform: none; }
}

/* =========================================================
   ÉCRAN 4 — Décisions justifiées
   ========================================================= */

.deliverable-section {
  padding-block: 8rem;
  border-top: 1px solid rgb(221 209 195 / 62%);
  background: #fbf8f3;
}

.deliverable-section__inner {
  display: grid;
  gap: 4.5rem;
}

.deliverable-section__heading {
  max-width: 62rem;
}

.deliverable-section__title {
  max-width: 23ch;
}

.deliverable-section__lead {
  max-width: 46rem;
}

.recommendation-scene {
  position: relative;
  width: min(100%, 70rem);
  aspect-ratio: auto;
  margin-inline: auto;
}


.recommendation-scene__sheet {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-radius: 0.8rem;
}

.recommendation-scene__sheet--back {
  background: #eadfd2;
  transform: translate(1.15rem, 0.95rem) rotate(0.8deg);
  box-shadow: 0 20px 48px rgb(52 45 39 / 6%);
}

.recommendation-scene__sheet--mid {
  background: #f2e9de;
  transform: translate(0.58rem, 0.45rem) rotate(0.3deg);
}

.recommendation-scene__sheet--front {
  min-height: 35rem;
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 8px 20px rgb(52 45 39 / 4%),
    0 30px 72px rgb(52 45 39 / 10%);
}

.recommendation-scene__toolbar {
  display: flex;
  min-height: 4.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.8rem 1.35rem;
  border-bottom: 1px solid var(--border);
  background: #eee7dd;
}

.recommendation-scene__toolbar-title {
  display: grid;
  gap: 0.08rem;
}

.recommendation-scene__toolbar-title span {
  color: #877a6f;
  font-size: 0.78rem;
  font-weight: 600;
}

.recommendation-scene__toolbar-title strong {
  font-size: 0.98rem;
  line-height: 1.2;
}

.recommendation-scene__status {
  text-align: right;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  color: var(--accent);
  background: rgb(179 91 50 / 8%);
  font-size: 0.82rem;
  font-weight: 700;
}

.recommendation-scene__content {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 0.65fr);
  gap: 1rem;
  height: calc(100% - 4.25rem);
  padding: 1.2rem;
  background:
    linear-gradient(
      rgb(255 253 249 / 96%),
      rgb(255 253 249 / 96%)
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 23px,
      #efe8df 24px
    );
}

.recommendation-card {
  border: 1px solid #e1d5c9;
  border-radius: 0.55rem;
  background: rgb(255 253 249 / 96%);
}

.recommendation-card--open {
  min-width: 0;
  overflow: hidden;
  border-color: rgb(179 91 50 / 48%);
  box-shadow:
    0 5px 14px rgb(61 49 39 / 4%),
    0 18px 38px rgb(61 49 39 / 6%);
}

.recommendation-card__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 4.6rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #eadfd4;
  background: #fff9f3;
}

.recommendation-card__number {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
}

.recommendation-card__eyebrow {
  margin: 0 0 0.15rem;
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.recommendation-card__header h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.recommendation-card__state {
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 600;
}

.recommendation-card__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.7rem;
  padding: 0.85rem;
}

.recommendation-block {
  min-width: 0;
  min-height: 5rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid #e8ddd2;
  border-radius: 0.4rem;
  background: #faf6f0;
  opacity: 0;
  transform: translateY(0.4rem);
}

.recommendation-block--decision {
  border-color: rgb(179 91 50 / 42%);
  background: #fff7ef;
}

.recommendation-block__label {
  margin: 0 0 0.35rem;
  color: #897c70;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-transform: uppercase;
}

.recommendation-block p:last-child {
  margin: 0;
  color: #51483f;
  font-size: 0.85rem;
  line-height: 1.34;
}

.recommendation-block__statement {
  color: var(--text) !important;
  font-weight: 700;
}

.recommendation-example {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.65rem;
  opacity: 0;
  transform: translateY(0.4rem);
}

.recommendation-example__version {
  min-width: 0;
  padding: 0.72rem 0.8rem;
  border: 1px solid #e3d8cd;
  border-radius: 0.4rem;
  background: #f7f2ec;
}

.recommendation-example__version span {
  display: block;
  margin-bottom: 0.3rem;
  color: #9a8d81;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recommendation-example__version p {
  margin: 0;
  color: #766a60;
  font-size: 0.82rem;
  line-height: 1.3;
}

.recommendation-example__version--after {
  border-color: rgb(179 91 50 / 52%);
  background: #fff7ef;
}

.recommendation-example__version--after span,
.recommendation-example__version--after p {
  color: var(--accent);
}

.recommendation-example__version--after p {
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.38;
}

.recommendation-example__arrow {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 700;
}

.recommendation-result {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-height: 4.25rem;
  padding: 0.72rem 0.85rem;
  border: 1px solid rgb(179 91 50 / 52%);
  border-radius: 0.4rem;
  background: #fff4ea;
  border-color: var(--accent);
  opacity: 0;
  transform: translateY(0.4rem);
}

.recommendation-result__icon {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.recommendation-result p {
  margin: 0;
}

.recommendation-result p:last-child {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
}

.recommendation-list {
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

.recommendation-card--closed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 4rem;
  padding: 0.7rem;
  opacity: 0;
  transform: translateY(0.35rem);
}

.recommendation-card--closed .recommendation-card__number {
  width: 1.75rem;
  height: 1.75rem;
  color: #fff;
  background: #b7aca1;
  font-size: 0.62rem;
}

.recommendation-card--closed strong {
  color: #61564d;
  font-size: 0.82rem;
  line-height: 1.2;
}

.recommendation-card--closed > span:last-child {
  color: #aa9c90;
  font-size: 1rem;
  line-height: 1;
}

/* État final */

.recommendation-scene.is-complete
.recommendation-block,
.recommendation-scene.is-complete
.recommendation-example,
.recommendation-scene.is-complete
.recommendation-result,
.recommendation-scene.is-complete
.recommendation-card--closed {
  opacity: 1;
  transform: none;
}

/* Animation :
   observation → compréhension → décision → exemple → résultat
*/
/*
.recommendation-scene.is-animating
[data-recommendation-step="observation"] {
  animation: recommendationReveal 600ms ease 500ms forwards;
}

.recommendation-scene.is-animating
[data-recommendation-step="reason"] {
  animation: recommendationReveal 600ms ease 1.8s forwards;
}

.recommendation-scene.is-animating
[data-recommendation-step="decision"] {
  animation: recommendationReveal 600ms ease 3.1s forwards;
}

.recommendation-scene.is-animating
[data-recommendation-step="example"] {
  animation: recommendationReveal 650ms ease 4.5s forwards;
}

.recommendation-scene.is-animating
[data-recommendation-step="result"] {
  animation: recommendationReveal 650ms ease 6.1s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(1) {
  animation: recommendationReveal 450ms ease 7.25s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(2) {
  animation: recommendationReveal 450ms ease 7.55s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(3) {
  animation: recommendationReveal 450ms ease 7.85s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(4) {
  animation: recommendationReveal 450ms ease 8.15s forwards;
}

@keyframes recommendationReveal {
  to {
    opacity: 1;
    transform: none;
  }
}
*/
@media (prefers-reduced-motion: reduce) {
  .recommendation-block,
  .recommendation-example,
  .recommendation-result,
  .recommendation-card--closed {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 980px) {
  .deliverable-section {
    padding-block: 6rem;
  }

  .recommendation-scene {
    aspect-ratio: auto;
  }

  .recommendation-scene__sheet {
    position: relative;
  }

  .recommendation-scene__sheet--back,
  .recommendation-scene__sheet--mid {
    display: none;
  }

  .recommendation-scene__sheet--front {
    min-height: 41rem;
  }

  .recommendation-scene__content {
    grid-template-columns: 1fr;
    height: auto;
  }

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

@media (max-width: 640px) {
  .deliverable-section {
    padding-block: 4.5rem;
  }

  .deliverable-section__inner {
    gap: 3rem;
  }

  .recommendation-scene__toolbar {
    align-items: flex-start;
    min-height: auto;
    padding: 0.8rem;
  }

  .recommendation-scene__status {
    max-width: 9rem;
    font-size: 0.61rem;
  }

  .recommendation-scene__content {
    padding: 0.7rem;
  }

  .recommendation-card__header {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.7rem;
  }

  .recommendation-card__state {
    display: none;
  }

  .recommendation-card__body {
    grid-template-columns: 1fr;
    padding: 0.7rem;
  }

  .recommendation-block {
    min-height: auto;
  }

  .recommendation-example {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .recommendation-example__arrow {
    transform: rotate(90deg);
  }

  .recommendation-result {
    grid-column: 1;
  }

  .recommendation-list {
    grid-template-columns: 1fr;
  }

  .recommendation-card--closed {
    min-height: 3.5rem;
  }
}

/* =========================================================
   ÉCRAN 4 — Consolidation finale
   Le raisonnement devient le centre de la démonstration
   ========================================================= */

.recommendation-scene {
  width: min(100%, 72rem);
  aspect-ratio: 1.58;
}

.recommendation-scene__content {
  grid-template-columns: minmax(0, 1.72fr) minmax(14rem, 0.58fr);
  gap: 1rem;
  padding: 1.15rem;
}

/* Carte principale */

.recommendation-card--open {
  display: flex;
  min-height: 0;
  flex-direction: column;
  background: #fffdf9;
}

.recommendation-card__header {
  min-height: 4.75rem;
  padding-inline: 1.05rem;
}

.recommendation-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.85fr);
  grid-template-rows: auto auto;
  gap: 0.85rem;
  min-height: 0;
  padding: 0.95rem;
}

/* =========================================================
   Fil conducteur
   ========================================================= */

.recommendation-reasoning {
  position: relative;
  display: grid;
  grid-row: 1 / span 2;
  align-content: start;
  gap: 0;
  min-width: 0;
  padding-left: 0.1rem;
}

.recommendation-reasoning::before {
  position: absolute;
  top: 1.35rem;
  bottom: 1.35rem;
  left: 1.07rem;
  width: 1px;
  background: linear-gradient(
    180deg,
    #d7c9bc 0%,
    rgb(179 91 50 / 48%) 72%,
    var(--accent) 100%
  );
  content: "";
}

.recommendation-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  gap: 0.72rem;
  padding: 0 0 0.85rem;
  opacity: 0;
  transform: translateY(0.4rem);
}

.recommendation-step:last-child {
  padding-bottom: 0;
}

.recommendation-step__marker {
  position: relative;
  z-index: 2;
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid #d7c9bc;
  border-radius: 50%;
  color: #8c7f73;
  background: #fffdf9;
  font-size: 0.68rem;
  font-weight: 700;
}

.recommendation-step__content {
  min-width: 0;
  padding: 0.72rem 0.8rem 0.78rem;
  border: 1px solid #e5dbd1;
  border-radius: 0.42rem;
  background: #faf6f1;
}

.recommendation-step__label {
  margin: 0 0 0.28rem;
  color: #8b7e72;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.15;
  text-transform: uppercase;
}

.recommendation-step__title {
  margin: 0;
  color: #433b35;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.28;
}

.recommendation-step__text {
  margin: 0.36rem 0 0;
  color: #74685e;
  font-size: 0.93rem;
  line-height: 1.42;
}

/* Progression visuelle */

.recommendation-step--reason .recommendation-step__content {
  background: #f8f3ed;
}

.recommendation-step--decision .recommendation-step__marker {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.recommendation-step--decision .recommendation-step__content {
  border-color: rgb(179 91 50 / 55%);
  background: #fff6ed;
}

.recommendation-step--decision .recommendation-step__label,
.recommendation-step--decision .recommendation-step__title {
  color: var(--accent);
}

/* =========================================================
   Avant / Après
   ========================================================= */

.recommendation-example {
  grid-column: 2;
  display: block;
  min-width: 0;
  padding: 0.78rem;
  border: 1px solid #e5dad0;
  border-radius: 0.42rem;
  background: #faf6f1;
  opacity: 0;
  transform: translateY(0.4rem);
}

.recommendation-example__heading {
  margin: 0 0 0.55rem;
  color: #8b7e72;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.recommendation-example__comparison {
  display: grid;
  gap: 0.42rem;
}

.recommendation-example__version {
  padding: 0.66rem 0.72rem;
  border: 1px solid #e2d7cc;
  border-radius: 0.35rem;
  background: #f4efe9;
}

.recommendation-example__version span {
  margin-bottom: 0.25rem;
  font-size: 0.66rem;
}

.recommendation-example__version p {
  font-size: 0.85rem;
  line-height: 1.32;
}

.recommendation-example__arrow {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  margin-inline: auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 0;
}

.recommendation-example__arrow::before {
  font-size: 0.8rem;
  content: "↓";
}

.recommendation-example__version--after {
  border-color: rgb(179 91 50 / 60%);
  background: #fff1e6;
}

/* =========================================================
   Résultat attendu
   ========================================================= */

.recommendation-result {
  grid-column: 2;
  align-self: end;
  min-height: auto;
  padding: 0.78rem;
  border-color: var(--accent);
  background: var(--accent);
  opacity: 0;
  transform: translateY(0.4rem);
}

.recommendation-result__icon {
  color: var(--accent);
  background: #fff;
}

.recommendation-result .recommendation-step__label {
  margin-bottom: 0.25rem;
  font-size: 0.66rem;
  color:#fff;
}

.recommendation-result__title {
  margin: 0;
  color: #55483f;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.38;
}

/* =========================================================
   Recommandations secondaires
   ========================================================= */

.recommendation-list {
  gap: 0.48rem;
}

.recommendation-card--closed {
  min-height: 3.75rem;
  padding: 0.62rem;
  border-color: #e6ddd4;
  background: rgb(250 247 243 / 76%);
  box-shadow: none;
}

.recommendation-card--closed .recommendation-card__number {
  width: 1.55rem;
  height: 1.55rem;
  color: #786d63;
  background: #ddd4cb;
  font-size: 0.58rem;
}

.recommendation-card--closed strong {
  color: #776b61;
  font-size: 0.88rem;
  font-weight: 600;
}

.recommendation-card--closed > span:last-child {
  color: #c1b6ac;
  font-size: 0.88rem;
}

/* État final */

.recommendation-scene.is-complete
.recommendation-step,
.recommendation-scene.is-complete
.recommendation-example,
.recommendation-scene.is-complete
.recommendation-result,
.recommendation-scene.is-complete
.recommendation-card--closed {
  opacity: 1;
  transform: none;
}

/* Animation */

.recommendation-scene.is-animating
[data-recommendation-step="observation"] {
  animation: recommendationReveal 650ms ease 500ms forwards;
}

.recommendation-scene.is-animating
[data-recommendation-step="reason"] {
  animation: recommendationReveal 650ms ease 2.1s forwards;
}

.recommendation-scene.is-animating
[data-recommendation-step="decision"] {
  animation: recommendationReveal 650ms ease 3.8s forwards;
}

.recommendation-scene.is-animating
[data-recommendation-step="example"] {
  animation: recommendationReveal 650ms ease 5.5s forwards;
}

.recommendation-scene.is-animating
[data-recommendation-step="result"] {
  animation: recommendationReveal 650ms ease 7s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(1) {
  animation: recommendationReveal 420ms ease 8.15s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(2) {
  animation: recommendationReveal 420ms ease 8.4s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(3) {
  animation: recommendationReveal 420ms ease 8.65s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(4) {
  animation: recommendationReveal 420ms ease 8.9s forwards;
}

/* =========================================================
   Tablette
   ========================================================= */

@media (max-width: 980px) {
  .recommendation-card__body {
    grid-template-columns: 1fr;
  }

  .recommendation-reasoning {
    grid-row: auto;
  }

  .recommendation-example,
  .recommendation-result {
    grid-column: 1;
  }

  .recommendation-example__comparison {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .recommendation-example__arrow::before {
    content: "→";
  }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 640px) {
  .recommendation-scene__content {
    padding: 0.65rem;
  }

  .recommendation-card__body {
    padding: 0.65rem;
  }

  .recommendation-reasoning {
    padding-left: 0;
  }

  .recommendation-reasoning::before {
    left: 0.87rem;
  }

  .recommendation-step {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.55rem;
  }

  .recommendation-step__marker {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.6rem;
  }

  .recommendation-step__content {
    padding: 0.65rem;
  }

  .recommendation-step__text {
    font-size: 0.71rem;
  }

  .recommendation-example__comparison {
    grid-template-columns: 1fr;
  }

  .recommendation-example__arrow::before {
    content: "↓";
  }
}

/* =========================================================
   ÉCRAN 4 — Animation finale, plus lente et plus premium
   Durée totale : environ 15,5 secondes
   ========================================================= */

/* On neutralise les animations précédemment déclarées. */
.recommendation-scene.is-animating
[data-recommendation-step],
.recommendation-scene.is-animating
.recommendation-card--closed {
  animation: none;
}

/* Les recommandations secondaires restent perceptibles,
   mais volontairement hors du premier plan. */
.recommendation-card--closed {
  opacity: 0.42;
  filter: blur(1.7px);
  transform: translateY(0.25rem);
  transition:
    opacity 700ms ease,
    filter 700ms ease,
    transform 700ms ease;
}

/* Les étapes du raisonnement restent cachées avant leur révélation. */
.recommendation-step,
.recommendation-example,
.recommendation-result {
  opacity: 0;
  transform: translateY(0.45rem);
}

/* ---------------------------------------------------------
   1. Observation
   --------------------------------------------------------- */

.recommendation-scene.is-animating
[data-recommendation-step="observation"] {
  animation:
    recommendationRevealPremium 750ms ease 1.2s forwards;
}

/* ---------------------------------------------------------
   2. Analyse de l’impact
   --------------------------------------------------------- */

.recommendation-scene.is-animating
[data-recommendation-step="reason"] {
  animation:
    recommendationRevealPremium 750ms ease 3.6s forwards;
}

/* ---------------------------------------------------------
   3. Décision recommandée
   --------------------------------------------------------- */

.recommendation-scene.is-animating
[data-recommendation-step="decision"] {
  animation:
    recommendationRevealPremium 800ms ease 6.2s forwards;
}

/* ---------------------------------------------------------
   4. Exemple avant / après
   --------------------------------------------------------- */

.recommendation-scene.is-animating
[data-recommendation-step="example"] {
  animation:
    recommendationRevealPremium 850ms ease 9s forwards;
}

/* ---------------------------------------------------------
   5. Résultat attendu
   --------------------------------------------------------- */

.recommendation-scene.is-animating
[data-recommendation-step="result"] {
  animation:
    recommendationRevealPremium 850ms ease 12s forwards;
}

/* ---------------------------------------------------------
   Apparition finale des quatre autres recommandations
   --------------------------------------------------------- */

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(1) {
  animation:
    recommendationSecondaryReveal 550ms ease 13.35s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(2) {
  animation:
    recommendationSecondaryReveal 550ms ease 13.65s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(3) {
  animation:
    recommendationSecondaryReveal 550ms ease 13.95s forwards;
}

.recommendation-scene.is-animating
.recommendation-card--closed:nth-child(4) {
  animation:
    recommendationSecondaryReveal 550ms ease 14.25s forwards;
}

/* ---------------------------------------------------------
   Micro-validation des étapes

   La pastille se renforce légèrement après l’apparition du bloc.
   Pas de coche ajoutée : le numéro reste lisible et le mouvement
   demeure discret.
   --------------------------------------------------------- */

.recommendation-scene.is-animating
[data-recommendation-step="observation"]
.recommendation-step__marker {
  animation:
    recommendationMarkerValidate 500ms ease 1.85s forwards;
}

.recommendation-scene.is-animating
[data-recommendation-step="reason"]
.recommendation-step__marker {
  animation:
    recommendationMarkerValidate 500ms ease 4.25s forwards;
}

.recommendation-scene.is-animating
[data-recommendation-step="decision"]
.recommendation-step__marker {
  animation:
    recommendationMarkerValidateAccent 500ms ease 6.9s forwards;
}

/* ---------------------------------------------------------
   État final
   --------------------------------------------------------- */

.recommendation-scene.is-complete
.recommendation-step,
.recommendation-scene.is-complete
.recommendation-example,
.recommendation-scene.is-complete
.recommendation-result,
.recommendation-scene.is-complete
.recommendation-card--closed {
  opacity: 1;
  filter: none;
  transform: none;
}

/* ---------------------------------------------------------
   Keyframes
   --------------------------------------------------------- */

@keyframes recommendationRevealPremium {
  0% {
    opacity: 0;
    transform: translateY(0.45rem);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes recommendationSecondaryReveal {
  0% {
    opacity: 0.42;
    filter: blur(1.7px);
    transform: translateY(0.25rem);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes recommendationMarkerValidate {
  0% {
    border-color: #d7c9bc;
    color: #8c7f73;
    background: #fffdf9;
    box-shadow: none;
  }

  55% {
    border-color: rgb(179 91 50 / 70%);
    color: var(--accent);
    background: #fff8f2;
    box-shadow: 0 0 0 0.28rem rgb(179 91 50 / 8%);
  }

  100% {
    border-color: rgb(179 91 50 / 55%);
    color: var(--accent);
    background: #fff8f2;
    box-shadow: none;
  }
}

@keyframes recommendationMarkerValidateAccent {
  0% {
    box-shadow: none;
    transform: scale(1);
  }

  55% {
    box-shadow: 0 0 0 0.32rem rgb(179 91 50 / 12%);
    transform: scale(1.04);
  }

  100% {
    box-shadow: none;
    transform: scale(1);
  }
}

/* Accessibilité : aucun délai en cas de mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
  .recommendation-card--closed,
  .recommendation-step,
  .recommendation-example,
  .recommendation-result {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
  }
}

/* =========================================================
   ÉCRAN 5 — PROCESSUS
   ========================================================= */

.process-section {
  --process-bg: #f7f4ef;
  --process-card: #fffdfa;
  --process-text: #17212c;
  --process-muted: #655e57;
  --process-border: #e5ddd3;
  --process-soft: #eee6dc;
  --process-accent: #b95b32;
  --process-accent-dark: #8e3f20;

  padding: clamp(5rem, 8vw, 8rem) 1.5rem;
  background: var(--process-bg);
  color: var(--process-text);
  overflow: hidden;
}

.process-container {
  width: min(100%, 1280px);
  margin-inline: auto;
}

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

.process-header {
  max-width: 62rem;
  margin: 0;
  margin-bottom: 4.75rem;
}


/* ---------------------------------------------------------
   Étapes
   --------------------------------------------------------- */

.process-steps {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    3.2rem
    minmax(0, 1fr)
    3.2rem
    minmax(0, 1fr)
    3.2rem
    minmax(0, 1fr);
  align-items: center;
}

.process-step {
  position: relative;
  min-height: 24.5rem;
  padding: 2.5rem 2rem 2rem;
  border: 1px solid var(--process-border);
  border-radius: 1rem;
  background: rgb(255 253 250 / 88%);
  box-shadow:
    0 1.2rem 3rem rgb(65 42 25 / 5%),
    0 0.2rem 0.5rem rgb(65 42 25 / 4%);
}

.process-step__number {
  position: absolute;
  top: 1.35rem;
  left: 1.35rem;
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--process-accent);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 0.5rem 1rem rgb(185 91 50 / 15%);
}

.process-step__icon {
  display: grid;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1.6rem;
  place-items: center;
  color: var(--process-accent);
}

.process-step__icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-step__icon text {
  fill: currentColor;
  stroke: none;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 700;
}

.process-step__title {
  max-width: 14rem;
  margin: 0 auto 1.6rem;
  text-align: center;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 650;
  text-wrap: balance;
}

.process-step__list {
  display: grid;
  gap: 0.95rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-step__list li {
  position: relative;
  padding-left: 1.45rem;
  color: var(--process-muted);
  font-size: 1rem;
  line-height: 1.45;
}

.process-step__list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--process-soft);
}

.process-step__list .process-step__highlight {
  color: var(--process-accent);
  font-weight: 700;
}

/* ---------------------------------------------------------
   Flèches
   --------------------------------------------------------- */

.process-arrow {
  display: grid;
  place-items: center;
  color: var(--process-accent-dark);
}

.process-arrow svg {
  width: 2.8rem;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------
   Bloc de réassurance
   --------------------------------------------------------- */

.process-reassurance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  margin-top: 2.5rem;
  padding: 2rem 2.4rem;
  border: 1px solid var(--process-border);
  border-radius: 1rem;
  background: rgb(255 253 250 / 62%);
}

.process-reassurance__icon {
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  border-radius: 50%;
  background: var(--process-soft);
  color: var(--process-accent);
}

.process-reassurance__icon svg {
  width: 3.2rem;
  height: 3.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-reassurance__content {
  max-width: 700px;
}

.process-reassurance__lead,
.process-reassurance__text {
  margin: 0;
}

.process-reassurance__lead {
  margin-bottom: 0.45rem;
  color: var(--process-muted);
  font-size: 1.02rem;
}

.process-reassurance__text {
  color: var(--process-muted);
  font-size: clamp(1rem, 1.35vw, 1.17rem);
  line-height: 1.55;
}

.process-reassurance__text strong {
  color: var(--process-accent-dark);
  font-weight: 700;
}

/* ---------------------------------------------------------
   Mini représentation du livrable
   --------------------------------------------------------- */

.process-deliverable {
  position: relative;
  width: 18rem;
  height: 8.5rem;
  flex: none;
}

.process-deliverable__screen {
  position: absolute;
  right: 3.5rem;
  bottom: 0.5rem;
  width: 13rem;
  height: 7.5rem;
  padding: 0.55rem;
  border: 0.45rem solid #242424;
  border-bottom-width: 0.8rem;
  border-radius: 0.45rem;
  background: white;
  transform: perspective(25rem) rotateY(-5deg);
}

.process-deliverable__bar {
  height: 0.75rem;
  margin-bottom: 0.45rem;
  border-radius: 0.15rem;
  background: var(--process-soft);
}

.process-deliverable__layout {
  display: grid;
  grid-template-columns: 1.8fr 0.8fr;
  gap: 0.4rem;
}

.process-deliverable__main,
.process-deliverable__side {
  display: grid;
  gap: 0.35rem;
}

.process-deliverable__main span,
.process-deliverable__side span {
  display: block;
  border-radius: 0.15rem;
  background: var(--process-soft);
}

.process-deliverable__main span {
  height: 1.05rem;
}

.process-deliverable__main span:last-child {
  height: 2.3rem;
  border: 1px solid rgb(185 91 50 / 45%);
  background: rgb(185 91 50 / 10%);
}

.process-deliverable__side span {
  height: 1.65rem;
}

.process-deliverable__cover {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  width: 6.7rem;
  min-height: 8rem;
  padding: 1rem 0.8rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--process-border);
  background: #f9f0e7;
  text-align: center;
  box-shadow: 0 0.8rem 1.5rem rgb(65 42 25 / 10%);
}

.process-deliverable__check {
  display: grid;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.65rem;
  place-items: center;
  border: 1px solid rgb(185 91 50 / 35%);
  border-radius: 50%;
  color: var(--process-accent);
  font-weight: 700;
}

.process-deliverable__cover strong {
  color: var(--process-accent-dark);
  font-size: 0.82rem;
  line-height: 1.2;
}

.process-deliverable__cover span {
  margin-top: 0.35rem;
  color: var(--process-muted);
  font-size: 0.59rem;
  line-height: 1.25;
}

/* ---------------------------------------------------------
   Animation
   --------------------------------------------------------- */

.js .process-step,
.js .process-reassurance {
  opacity: 0;
  transform: translateY(1.25rem);
}

.js .process-section.is-visible .process-step,
.js .process-section.is-visible .process-reassurance {
  animation: processReveal 700ms ease forwards;
}

.js .process-section.is-visible .process-step:nth-of-type(1) {
  animation-delay: 100ms;
}

.js .process-section.is-visible .process-step:nth-of-type(2) {
  animation-delay: 280ms;
}

.js .process-section.is-visible .process-step:nth-of-type(3) {
  animation-delay: 460ms;
}

.js .process-section.is-visible .process-step:nth-of-type(4) {
  animation-delay: 640ms;
}

.js .process-section.is-visible .process-reassurance {
  animation-delay: 850ms;
}

@keyframes processReveal {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------
   Tablette
   --------------------------------------------------------- */

@media (max-width: 1100px) {
  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .process-arrow {
    display: none;
  }

  .process-step {
    min-height: 22rem;
  }

  .process-reassurance {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .process-deliverable {
    display: none;
  }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 680px) {
  .process-section {
    padding-inline: 1rem;
  }

  .process-header {
    margin-bottom: 2.75rem;
    text-align: left;
  }

  .process-title {
    font-size: clamp(2.5rem, 12vw, 3.7rem);
    text-wrap: pretty;
  }

  .process-intro {
    margin-top: 1.2rem;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-step {
    min-height: 0;
    padding: 2rem 1.5rem 1.65rem;
  }

  .process-step__number {
    top: 1rem;
    left: 1rem;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 0.9rem;
  }

  .process-step__icon {
    width: 4.7rem;
    height: 4.7rem;
    margin-bottom: 1.15rem;
  }

  .process-step__title {
    max-width: none;
    margin-bottom: 1.25rem;
    font-size: 1.45rem;
  }

  .process-reassurance {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.6rem;
    text-align: left;
  }

  .process-reassurance__icon {
    width: 4rem;
    height: 4rem;
  }

  .process-reassurance__icon svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ---------------------------------------------------------
   Mouvement réduit
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .process-step,
  .js .process-reassurance {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* =========================================================
   ÉCRAN 6 — POURQUOI ME CONFIER VOTRE DIAGNOSTIC ?
   ========================================================= */

.trust-section {
  --trust-bg: #f7f4ef;
  --trust-card: #fffdfa;
  --trust-text: #17212c;
  --trust-muted: #675f58;
  --trust-border: #e5ddd3;
  --trust-soft: #eee6dc;
  --trust-accent: #b95b32;
  --trust-accent-dark: #8f4021;

  padding: clamp(5rem, 8vw, 8rem) 1.5rem;
  background: var(--trust-bg);
  color: var(--trust-text);
}

.trust-container {
  width: min(100%, 1280px);
  margin-inline: auto;
}

/* ---------------------------------------------------------
   Structure générale
   --------------------------------------------------------- */

.trust-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 0.78fr) minmax(0, 1.65fr);
  align-items: start;
  gap: clamp(3.5rem, 7vw, 7rem);
}

/* ---------------------------------------------------------
   Portrait
   --------------------------------------------------------- */

.trust-portrait {
  position: sticky;
  top: 7rem;
}

.trust-portrait__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--trust-border);
  border-radius: 1rem;
  background: var(--trust-soft);
  box-shadow:
    0 1.5rem 3.5rem rgb(65 42 25 / 7%),
    0 0.2rem 0.6rem rgb(65 42 25 / 4%);
}

.trust-portrait__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%);
}

.trust-portrait__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.trust-portrait__caption {
  margin: 1.15rem 0 0;
  color: var(--trust-text);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 650;
}

.trust-portrait__caption span {
  color: var(--trust-muted);
  font-size: 0.92rem;
  font-weight: 400;
}

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

.trust-header {
  max-width: 770px;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.trust-title {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2.7rem, 4.1vw, 4.15rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.trust-intro {
  max-width: 690px;
  margin: 1.65rem 0 0;
  color: var(--trust-muted);
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.55;
}

/* ---------------------------------------------------------
   Preuves
   --------------------------------------------------------- */

.trust-proofs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.trust-proof {
  min-height: 19rem;
  padding: 1.8rem;
  border: 1px solid var(--trust-border);
  border-radius: 1rem;
  background: rgb(255 253 250 / 82%);
  box-shadow:
    0 1.1rem 2.8rem rgb(65 42 25 / 4%),
    0 0.15rem 0.4rem rgb(65 42 25 / 3%);
}

.trust-proof__value {
  margin: 0 0 1.35rem;
  color: var(--trust-accent);
  font-size: clamp(2.3rem, 3.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 700;
}

.trust-proof__title {
  margin: 0 0 1rem;
  color: var(--trust-text);
  font-size: clamp(1.2rem, 1.55vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 650;
  text-wrap: balance;
}

.trust-proof__text {
  margin: 0;
  color: var(--trust-muted);
  font-size: 0.98rem;
  line-height: 1.58;
}

/* ---------------------------------------------------------
   Bloc méthode
   --------------------------------------------------------- */

.trust-method {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.35rem;
  margin-top: 1.5rem;
  padding: 1.7rem 1.8rem;
  border: 1px solid rgb(185 91 50 / 22%);
  border-radius: 1rem;
  background: rgb(185 91 50 / 6%);
}

.trust-method__marker {
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  place-items: center;
  border-radius: 50%;
  background: var(--trust-card);
  color: var(--trust-accent);
  box-shadow: 0 0.5rem 1.2rem rgb(65 42 25 / 6%);
}

.trust-method__marker svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-method__eyebrow {
  margin: 0 0 0.4rem;
  color: var(--trust-accent-dark);
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 750;
}

.trust-method__text {
  max-width: 730px;
  margin: 0;
  color: var(--trust-muted);
  font-size: 1.02rem;
  line-height: 1.58;
}

/* ---------------------------------------------------------
   Tablette
   --------------------------------------------------------- */

@media (max-width: 1050px) {
  .trust-layout {
    grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
    gap: 3rem;
  }

  .trust-proofs {
    grid-template-columns: 1fr;
  }

  .trust-proof {
    min-height: 0;
  }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 760px) {
  .trust-section {
    padding-inline: 1rem;
  }

  .trust-layout {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .trust-portrait {
    position: static;
    max-width: 25rem;
  }

  .trust-portrait__frame {
    aspect-ratio: 4 / 4.8;
  }

  .trust-title {
    font-size: clamp(2.55rem, 12vw, 3.8rem);
    text-wrap: pretty;
  }

  .trust-header {
    margin-bottom: 2.5rem;
  }

  .trust-proofs {
    gap: 1rem;
  }

  .trust-proof {
    padding: 1.5rem;
  }

  .trust-method {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  .trust-method__marker {
    width: 3rem;
    height: 3rem;
  }
}

/* =========================================================
   ÉCRAN 7 — TARIF
   ========================================================= */

.pricing-section {
  --pricing-bg: #f7f4ef;
  --pricing-card: #fffdfa;
  --pricing-text: #17212c;
  --pricing-muted: #675f58;
  --pricing-border: #e4dbd0;
  --pricing-soft: #eee6dc;
  --pricing-accent: #b95b32;
  --pricing-accent-dark: #8f4021;
  --pricing-accent-soft: rgb(185 91 50 / 8%);

  padding: clamp(5rem, 8vw, 8rem) 1.5rem;
  background: var(--pricing-bg);
  color: var(--pricing-text);
}

.pricing-container {
  width: min(100%, 1280px);
  margin-inline: auto;
}

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

.pricing-header {
  max-width: 900px;
  margin-bottom: clamp(3.75rem, 6vw, 5.5rem);
}

.pricing-section__title {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    max-width: 900px;
    margin: 0;
    font-size: clamp(2.7rem, 4.1vw, 4.15rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.055em;
    text-wrap: balance;
    margin-bottom: 2rem;
}

.pricing-section__price {
    display: block;

    color: var(--color-accent);

    font-size: 1.18em;
    font-weight: 700;
    line-height: 1;
}
/*
.pricing-title span {
  color: var(--pricing-accent);
}
*/
.pricing-intro {
  max-width: 760px;
  margin: 1.7rem 0 0;
  color: var(--pricing-muted);
  font-size: clamp(1.1rem, 1.65vw, 1.45rem);
  line-height: 1.55;
  text-wrap: balance;
}

/* ---------------------------------------------------------
   Structure générale
   --------------------------------------------------------- */

.pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.75fr);
  align-items: start;
  gap: clamp(3rem, 6vw, 6rem);
}

/* ---------------------------------------------------------
   Colonne de contenu
   --------------------------------------------------------- */

.pricing-content {
  max-width: 740px;
}

.pricing-summary {
  max-width: 700px;
  margin: 0;
  color: var(--pricing-text);
  font-size: clamp(1.22rem, 1.8vw, 1.55rem);
  line-height: 1.5;
  font-weight: 550;
}

.pricing-included {
  margin-top: 2.8rem;
}

.pricing-included__title {
  margin: 0 0 1.4rem;
  color: var(--pricing-muted);
  font-size: 0.86rem;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 750;
}

.pricing-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.95rem;
  min-height: 3.3rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--pricing-border);
  color: var(--pricing-muted);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.45;
}

.pricing-list li:first-child {
  border-top: 1px solid var(--pricing-border);
}

.pricing-list__icon {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border-radius: 50%;
  background: var(--pricing-accent-soft);
  color: var(--pricing-accent);
}

.pricing-list__icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------
   Liberté de mise en œuvre
   --------------------------------------------------------- */

.pricing-freedom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.6rem 1.7rem;
  border: 1px solid rgb(185 91 50 / 22%);
  border-radius: 1rem;
  background: var(--pricing-accent-soft);
}

.pricing-freedom__icon {
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  place-items: center;
  border-radius: 50%;
  background: var(--pricing-card);
  color: var(--pricing-accent);
  box-shadow: 0 0.45rem 1rem rgb(65 42 25 / 5%);
}

.pricing-freedom__icon svg {
  width: 2.15rem;
  height: 2.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pricing-freedom__title,
.pricing-freedom__text {
  margin: 0;
}

.pricing-freedom__title {
  margin-bottom: 0.35rem;
  color: var(--pricing-accent-dark);
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
}

.pricing-freedom__text {
  color: var(--pricing-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------
   Carte tarifaire
   --------------------------------------------------------- */

.pricing-card {
  position: sticky;
  top: 6rem;
  padding: clamp(1.8rem, 3vw, 2.5rem);
  border: 1px solid var(--pricing-border);
  border-radius: 1.2rem;
  background: var(--pricing-card);
  box-shadow:
    0 1.7rem 4rem rgb(65 42 25 / 8%),
    0 0.2rem 0.6rem rgb(65 42 25 / 4%);
}

.pricing-card__eyebrow {
  margin: 0 0 1.2rem;
  color: var(--pricing-muted);
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 750;
}

.pricing-card__price {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  margin: 0;
}

.pricing-card__amount {
  color: var(--pricing-text);
  font-size: clamp(2.7rem, 4.1vw, 4.15rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.pricing-card__tax {
  margin-bottom: 0.55rem;
  color: var(--pricing-muted);
  font-size: 1rem;
  line-height: 1;
  font-weight: 650;
}

.pricing-card__promise {
  max-width: 20rem;
  margin: 1.35rem 0 0;
  color: var(--pricing-muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.pricing-card__divider {
  height: 1px;
  margin: 2rem 0;
  background: var(--pricing-border);
}

.pricing-card__details {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-card__details li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--pricing-border);
  font-size: 0.95rem;
  line-height: 1.4;
}

.pricing-card__details li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.pricing-card__details span {
  color: var(--pricing-muted);
}

.pricing-card__details strong {
  color: var(--pricing-text);
  text-align: right;
  font-weight: 650;
}

.pricing-card__cta {
  display: flex;
  width: 100%;
  min-height: 3.7rem;
  margin-top: 2.2rem;
  padding: 0.9rem 1.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 1px solid var(--pricing-accent);
  border-radius: 0.7rem;
  background: var(--pricing-accent);
  color: white;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.pricing-card__cta:hover {
  border-color: var(--pricing-accent-dark);
  background: var(--pricing-accent-dark);
  transform: translateY(-2px);
}

.pricing-card__cta:focus-visible {
  outline: 3px solid rgb(185 91 50 / 28%);
  outline-offset: 3px;
}

.pricing-card__cta svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pricing-card__reassurance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.pricing-card__reassurance svg {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  fill: none;
  stroke: var(--pricing-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pricing-card__reassurance p {
  margin: 0;
  color: var(--pricing-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   Tablette
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .pricing-layout {
    grid-template-columns: 1fr;
  }

  .pricing-content {
    max-width: none;
  }

  .pricing-card {
    position: static;
    max-width: 36rem;
  }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 680px) {
  .pricing-section {
    padding-inline: 1rem;
  }

  .pricing-header {
    margin-bottom: 3rem;
  }

  .pricing-title {
    font-size: clamp(2.55rem, 12vw, 3.8rem);
    text-wrap: pretty;
  }

  .pricing-intro {
    margin-top: 1.35rem;
  }

  .pricing-summary {
    font-size: 1.15rem;
  }

  .pricing-list li {
    padding-inline: 0;
  }

  .pricing-freedom {
    grid-template-columns: 1fr;
    padding: 1.4rem;
  }

  .pricing-card {
    padding: 1.6rem;
  }

  .pricing-card__amount {
    font-size: clamp(3.6rem, 18vw, 5rem);
  }

  .pricing-card__details li {
    align-items: flex-start;
  }
}

/* =========================================================
   ÉCRAN 8 — DEMANDE DE DIAGNOSTIC
   ========================================================= */

.diagnostic-form-section {
  --diagnostic-bg: #f7f4ef;
  --diagnostic-card: #fffdfa;
  --diagnostic-text: #17212c;
  --diagnostic-muted: #675f58;
  --diagnostic-border: #e4dbd0;
  --diagnostic-soft: #eee6dc;
  --diagnostic-accent: #b95b32;
  --diagnostic-accent-dark: #8f4021;
  --diagnostic-accent-soft: rgb(185 91 50 / 8%);

  padding: clamp(5rem, 8vw, 8rem) 1.5rem;
  background: var(--diagnostic-bg);
  color: var(--diagnostic-text);
}

.diagnostic-form-container {
  width: min(100%, 1280px);
  margin-inline: auto;
}

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

.diagnostic-form-header {
  max-width: 850px;
  margin-bottom: clamp(3.5rem, 6vw, 5rem);
}

.diagnostic-form-title {
  max-width: 850px;
  margin: 0;
  font-size: clamp(2.7rem, 4.1vw, 4.15rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.diagnostic-form-intro {
  max-width: 760px;
  margin: 1.65rem 0 0;
  color: var(--diagnostic-muted);
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.6;
}

/* ---------------------------------------------------------
   Mise en page
   --------------------------------------------------------- */

.diagnostic-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.75fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
}

/* ---------------------------------------------------------
   Panneau du formulaire
   --------------------------------------------------------- */

.diagnostic-form-panel {
  padding: clamp(1.6rem, 3.5vw, 3rem);
  border: 1px solid var(--diagnostic-border);
  border-radius: 1.2rem;
  background: var(--diagnostic-card);
  box-shadow:
    0 1.5rem 3.5rem rgb(65 42 25 / 6%),
    0 0.2rem 0.6rem rgb(65 42 25 / 3%);
}

.diagnostic-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

.diagnostic-form-field {
  min-width: 0;
}

.diagnostic-form-field--wide {
  grid-column: 1 / -1;
}

.diagnostic-form-field label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--diagnostic-text);
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: 650;
}

.diagnostic-form-field label span {
  color: var(--diagnostic-accent);
}

.diagnostic-form-field input,
.diagnostic-form-field textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--diagnostic-border);
  border-radius: 0.65rem;
  background: #fff;
  color: var(--diagnostic-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.diagnostic-form-field input {
  min-height: 3.55rem;
  padding: 0.8rem 1rem;
}

.diagnostic-form-field textarea {
  min-height: 11rem;
  padding: 1rem;
  resize: vertical;
}

.diagnostic-form-field input::placeholder,
.diagnostic-form-field textarea::placeholder {
  color: rgb(103 95 88 / 62%);
  opacity: 1;
}

.diagnostic-form-field input:hover,
.diagnostic-form-field textarea:hover {
  border-color: rgb(185 91 50 / 42%);
}

.diagnostic-form-field input:focus,
.diagnostic-form-field textarea:focus {
  border-color: var(--diagnostic-accent);
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 0.25rem rgb(185 91 50 / 12%);
}

.diagnostic-form-field input:user-invalid,
.diagnostic-form-field textarea:user-invalid {
  border-color: #a64734;
}

.contact-form__reassurance{
    margin:0 0 1rem;

    color:#6b655f;

    font-size:.95rem;
    line-height:1.6;
}
/* ---------------------------------------------------------
   Envoi
   --------------------------------------------------------- */

.diagnostic-form-submit {
  margin-top: 1.7rem;
}

.diagnostic-form-duration {
  margin: 0 0 0.9rem;
  color: var(--diagnostic-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.diagnostic-form-button {
  display: flex;
  width: 100%;
  min-height: 4rem;
  padding: 0.9rem 1.3rem;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border: 1px solid var(--diagnostic-accent);
  border-radius: 0.7rem;
  background: var(--diagnostic-accent);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.diagnostic-form-button:hover {
  border-color: var(--diagnostic-accent-dark);
  background: var(--diagnostic-accent-dark);
  box-shadow: 0 0.7rem 1.5rem rgb(65 42 25 / 10%);
  transform: translateY(-2px);
}

.diagnostic-form-button:focus-visible {
  outline: 3px solid rgb(185 91 50 / 28%);
  outline-offset: 3px;
}

.diagnostic-form-button:active {
  transform: translateY(0);
}

.diagnostic-form-button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diagnostic-form-required {
  margin: 0.8rem 0 0;
  color: var(--diagnostic-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.diagnostic-form-required span {
  color: var(--diagnostic-accent);
}

.diagnostic-form-privacy {
  max-width: 700px;
  margin: 1rem 0 0;
  color: var(--diagnostic-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.diagnostic-form-privacy a {
  color: var(--diagnostic-text);
  text-decoration-line: underline;
  text-decoration-color: rgb(23 33 44 / 35%);
  text-underline-offset: 0.18em;
}

.diagnostic-form-privacy a:hover {
  color: var(--diagnostic-accent-dark);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------
   Réassurances
   --------------------------------------------------------- */

.diagnostic-form-reassurance {
  display: flex;
  margin: 1.7rem 0 0;
  padding: 1.35rem 0 0;
  flex-wrap: wrap;
  gap: 0.9rem 1.6rem;
  border-top: 1px solid var(--diagnostic-border);
  list-style: none;
}

.diagnostic-form-reassurance li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--diagnostic-muted);
  font-size: 0.83rem;
  line-height: 1.4;
}

.diagnostic-form-reassurance__icon {
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--diagnostic-accent-soft);
  color: var(--diagnostic-accent);
}

.diagnostic-form-reassurance__icon svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------
   Carte des prochaines étapes
   --------------------------------------------------------- */

.diagnostic-form-next {
  padding: clamp(1.7rem, 3vw, 2.4rem);
  border: 1px solid var(--diagnostic-border);
  border-radius: 1.2rem;
  background: rgb(255 253 250 / 72%);
}

.diagnostic-form-next__header {
  margin-bottom: 2rem;
}

.diagnostic-form-next__eyebrow {
  margin: 0 0 0.65rem;
  color: var(--diagnostic-accent-dark);
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 750;
}

.diagnostic-form-next__title {
  margin: 0;
  color: var(--diagnostic-text);
  font-size: clamp(1.8rem, 2.8vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 650;
}

/* ---------------------------------------------------------
   Chronologie
   --------------------------------------------------------- */

.diagnostic-form-timeline {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diagnostic-form-timeline::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  bottom: 1.4rem;
  left: 1.35rem;
  width: 1px;
  background: var(--diagnostic-border);
}

.diagnostic-form-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 1.8rem;
}

.diagnostic-form-timeline__item:last-child {
  padding-bottom: 0;
}

.diagnostic-form-timeline__number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border: 1px solid rgb(185 91 50 / 30%);
  border-radius: 50%;
  background: var(--diagnostic-card);
  color: var(--diagnostic-accent);
  font-size: 0.73rem;
  line-height: 1;
  font-weight: 750;
  box-shadow: 0 0.35rem 0.8rem rgb(65 42 25 / 4%);
}

.diagnostic-form-timeline__content {
  padding-top: 0.15rem;
}

.diagnostic-form-timeline__content h4 {
  margin: 0 0 0.4rem;
  color: var(--diagnostic-text);
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
}

.diagnostic-form-timeline__content p {
  margin: 0;
  color: var(--diagnostic-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------
   Réassurance finale
   --------------------------------------------------------- */

.diagnostic-form-next__highlight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  padding: 1.2rem;
  border: 1px solid rgb(185 91 50 / 22%);
  border-radius: 0.85rem;
  background: var(--diagnostic-accent-soft);
}

.diagnostic-form-next__highlight-icon {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--diagnostic-card);
  color: var(--diagnostic-accent);
}

.diagnostic-form-next__highlight-icon svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diagnostic-form-next__highlight p {
  margin: 0;
  color: var(--diagnostic-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.diagnostic-form-next__highlight strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--diagnostic-accent-dark);
  font-weight: 700;
}

/* ---------------------------------------------------------
   Tablette
   --------------------------------------------------------- */

@media (max-width: 980px) {
  .diagnostic-form-layout {
    grid-template-columns: 1fr;
  }

  .diagnostic-form-next {
    max-width: none;
  }

  .diagnostic-form-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .diagnostic-form-timeline::before {
    display: none;
  }

  .diagnostic-form-timeline__item {
    grid-template-columns: 2.7rem minmax(0, 1fr);
    padding: 0;
  }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 680px) {
  .diagnostic-form-section {
    padding-inline: 1rem;
  }

  .diagnostic-form-header {
    margin-bottom: 2.8rem;
  }

  .diagnostic-form-title {
    font-size: clamp(2.55rem, 12vw, 3.8rem);
    text-wrap: pretty;
  }

  .diagnostic-form-intro {
    margin-top: 1.3rem;
  }

  .diagnostic-form-panel {
    padding: 1.4rem;
  }

  .diagnostic-form-fields {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  .diagnostic-form-field--wide {
    grid-column: auto;
  }

  .diagnostic-form-field textarea {
    min-height: 10rem;
  }

  .diagnostic-form-reassurance {
    display: grid;
    gap: 0.7rem;
  }

  .diagnostic-form-next {
    padding: 1.4rem;
  }

  .diagnostic-form-timeline {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .diagnostic-form-timeline::before {
    display: block;
  }

  .diagnostic-form-timeline__item {
    padding-bottom: 1.6rem;
  }

  .diagnostic-form-timeline__item:last-child {
    padding-bottom: 0;
  }

  .diagnostic-form-next__highlight {
    grid-template-columns: 1fr;
  }
}

.diagnostic-form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.diagnostic-form-alert {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgb(166 71 52 / 30%);
  border-radius: 0.7rem;
  background: rgb(166 71 52 / 7%);
  color: #7f3528;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* =========================================================
   Header principal
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;

  background: rgba(248, 247, 244, 0.94);
  border-bottom: 1px solid rgba(28, 28, 28, 0.06);

  box-shadow: 0 4px 18px rgba(28, 28, 28, 0.035);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 64px;
}


/* =========================================================
   Identité du site
   ========================================================= */

.site-header__brand {
  display: inline-flex;
  align-items: center;

  flex-shrink: 0;

  color: #152c3e;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  letter-spacing: -0.03em;

  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.site-header__brand:hover {
  color: #bd572c;
}

.site-header__brand:focus-visible {
  outline: 3px solid rgba(15, 45, 68, 0.25);
  outline-offset: 5px;
  border-radius: 4px;
}


/* =========================================================
   Navigation
   ========================================================= */

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.75rem;

  margin-left: auto;
}

.site-header__nav > a:not(.site-header__cta) {
  position: relative;

  display: inline-flex;
  align-items: center;

  padding: 0.55rem 0;

  color: #2f3438;
  font-size: 1.04rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;

  transition: color 180ms ease;
}

.site-header__nav > a:not(.site-header__cta)::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0.2rem;
  left: 0;

  height: 1.5px;

  background: currentColor;

  transform: scaleX(0);
  transform-origin: right center;

  transition: transform 200ms ease;
}

.site-header__nav > a:not(.site-header__cta):hover,
.site-header__nav > a:not(.site-header__cta):focus-visible {
  color: #bd572c;
}

.site-header__nav > a:not(.site-header__cta):hover::after,
.site-header__nav > a:not(.site-header__cta):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-header__nav > a:not(.site-header__cta):focus-visible {
  outline: none;
}


/* =========================================================
   CTA du header
   ========================================================= */

.site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 0.78rem 1.2rem;

  border: 1px solid #12344d;
  border-radius: 8px;

  background: #12344d;
  color: #ffffff;

  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  box-shadow: 0 7px 18px rgba(18, 52, 77, 0.14);

  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.site-header__cta:hover {
  background: #194563;
  border-color: #194563;

  transform: translateY(-2px);

  box-shadow: 0 11px 24px rgba(18, 52, 77, 0.2);
}

.site-header__cta:active {
  transform: translateY(0);

  box-shadow: 0 6px 14px rgba(18, 52, 77, 0.14);
}

.site-header__cta:focus-visible {
  outline: 3px solid rgba(15, 45, 68, 0.25);
  outline-offset: 4px;
}


/* =========================================================
   Ancres et header sticky
   ========================================================= */

#top,
#livrable,
#deroulement,
#demande-diagnostic {
  scroll-margin-top: 0;
}

html {
  scroll-behavior: smooth;
}


/* =========================================================
   Tablette
   ========================================================= */

@media (max-width: 980px) {
  .site-header__inner {
    min-height: 68px;
    gap: 1.25rem;
  }

  .site-header__nav {
    gap: 1.25rem;
  }

  .site-header__nav > a:not(.site-header__cta) {
    font-size: 0.89rem;
  }

  .site-header__cta {
    min-height: 44px;
    padding-inline: 1rem;
    font-size: 0.88rem;
  }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 760px) {
  .site-header__inner {
    min-height: 64px;
    gap: 0.9rem;
  }

  .site-header__brand {
    max-width: 48%;

    font-size: 0.86rem;
    line-height: 1.15;
  }

  .site-header__nav {
    gap: 0;
  }

  .site-header__nav > a:not(.site-header__cta) {
    display: none;
  }

  .site-header__cta {
    min-height: 42px;
    padding: 0.68rem 0.85rem;

    font-size: 0.81rem;
  }

  #top,
  #livrable,
  #deroulement,
  #demande-diagnostic {
    scroll-margin-top: 80px;
  }
}

/* =========================================================
   Très petits écrans
   ========================================================= */

@media (max-width: 420px) {
  .site-header__inner {
    gap: 0.65rem;
  }

  .site-header__brand {
    max-width: 42%;

    font-size: 0.77rem;
  }

  .site-header__cta {
    padding-inline: 0.7rem;

    font-size: 0.76rem;
  }
}

/* =========================================================
   Préférences d’accessibilité
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header__brand,
  .site-header__nav > a,
  .site-header__nav > a::after,
  .site-header__cta {
    transition: none;
  }

  .site-header__cta:hover {
    transform: none;
  }
}

/* =========================================================
   FAQ
   ========================================================= */

.faq-section {
  padding: clamp(5rem, 8vw, 8rem) 0;

  background: #f6f5f1;
  border-top: 1px solid rgba(31, 45, 55, 0.08);
}

.faq-section__header {
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);

  text-align: center;
}

.faq-section__header .section-kicker {
  margin: 0 0 1rem;

  color: #bd572c;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.faq-section__header h2 {
  max-width: 720px;
  margin: 0 auto;

  color: #182c3b;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.faq-section__intro {
  max-width: 650px;
  margin: 1.4rem auto 0;

  color: #655f58;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
}


/* =========================================================
   Liste
   ========================================================= */

.faq-list {
  max-width: 900px;
  margin: 0 auto;

  border-top: 1px solid rgba(31, 45, 55, 0.16);
}

.faq-item {
  border-bottom: 1px solid rgba(31, 45, 55, 0.16);
}

.faq-item__heading {
  margin: 0;

  font-size: inherit;
}


/* =========================================================
   Bouton / question
   ========================================================= */

.faq-item__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 1.5rem;

  width: 100%;
  margin: 0;
  padding: 1.65rem 0;

  border: 0;

  background: transparent;
  color: #182c3b;

  font-family: inherit;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;

  cursor: pointer;

  transition:
    color 200ms ease,
    padding-left 200ms ease;
}

.faq-item__trigger:hover {
  color: #bd572c;
}

.faq-item__trigger:focus-visible {
  outline: 3px solid rgba(189, 87, 44, 0.28);
  outline-offset: 5px;
  border-radius: 4px;
}


/* =========================================================
   Icône
   ========================================================= */

.faq-item__icon {
  position: relative;

  display: block;

  width: 1.4rem;
  height: 1.4rem;

  justify-self: end;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 1rem;
  height: 2px;

  border-radius: 999px;

  background: currentColor;

  transform: translate(-50%, -50%);

  transition:
    transform 220ms ease,
    opacity 220ms ease;
}

.faq-item__icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}

.faq-item.is-open .faq-item__icon::after {
  opacity: 0;

  transform:
    translate(-50%, -50%)
    rotate(0);
}


/* =========================================================
   Réponse et animation
   ========================================================= */

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;

  visibility: hidden;

  transition:
    grid-template-rows 240ms ease,
    visibility 240ms ease;
}

.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;

  visibility: visible;
}

.faq-item__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.faq-item__answer {
  max-width: 760px;
  padding: 0 3.5rem 1.75rem 0;

  color: #655f58;
  font-size: 1.02rem;
  line-height: 1.7;

  opacity: 0;
  transform: translateY(-0.35rem);

  transition:
    opacity 180ms ease,
    transform 240ms ease;
}

.faq-item.is-open .faq-item__answer {
  opacity: 1;
  transform: translateY(0);
}

.faq-item__answer p {
  margin: 0;
}

.faq-item__answer p + p {
  margin-top: 0.7rem;
}


/* =========================================================
   CTA
   ========================================================= */

.faq-section__cta {
  display: flex;
  justify-content: center;

  margin-top: clamp(2.5rem, 5vw, 4rem);
}


/* =========================================================
   Tablette
   ========================================================= */

@media (max-width: 900px) {
  .faq-section {
    padding-block: 5rem;
  }

  .faq-section__header {
    margin-bottom: 2.75rem;
  }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 640px) {
  .faq-section {
    padding-block: 4rem;
  }

  .faq-section__header {
    margin-bottom: 2.25rem;

    text-align: left;
  }

  .faq-section__header h2 {
    margin-inline: 0;

    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .faq-section__intro {
    margin-inline: 0;

    font-size: 1rem;
  }

  .faq-item__trigger {
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    gap: 1rem;

    padding-block: 1.35rem;

    font-size: 1.05rem;
  }

  .faq-item__icon {
    width: 1.2rem;
    height: 1.2rem;
  }

  .faq-item__icon::before,
  .faq-item__icon::after {
    width: 0.9rem;
  }

  .faq-item__answer {
    padding: 0 2.5rem 1.4rem 0;

    font-size: 0.98rem;
    line-height: 1.65;
  }

  .faq-section__cta {
    justify-content: stretch;

    margin-top: 2.5rem;
  }

  .faq-section__cta .btn {
    width: 100%;
  }
}


/* =========================================================
   Réduction des animations
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .faq-item__trigger,
  .faq-item__icon::before,
  .faq-item__icon::after,
  .faq-item__panel,
  .faq-item__answer {
    transition: none;
  }

  .faq-item__answer {
    transform: none;
  }
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 1.75rem;

  background: #182c3b;
  color: rgba(255, 255, 255, 0.72);
}

.site-footer__container {
  display: flex;
  flex-direction: column;
}


/* =========================================================
   Partie principale
   ========================================================= */

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 7rem);

  padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.site-footer__identity {
  max-width: 620px;
}

.site-footer__title {
  margin: 0;

  color: #ffffff;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.site-footer__promise {
  max-width: 560px;
  margin: 1rem 0 0;

  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.65;
}


/* =========================================================
   Navigation
   ========================================================= */

.site-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.site-footer__nav a,
.site-footer__preferences {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  padding: 0;

  border: 0;

  background: transparent;
  color: rgba(255, 255, 255, 0.78);

  font: inherit;
  font-size: 0.98rem;
  line-height: 1.5;
  text-decoration: none;

  cursor: pointer;

  transition:
    color 180ms ease,
    transform 180ms ease;
}

.site-footer__nav a::after,
.site-footer__preferences::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: -0.15rem;
  left: 0;

  height: 1px;

  background: currentColor;

  transform: scaleX(0);
  transform-origin: right center;

  transition: transform 180ms ease;
}

.site-footer__nav a:hover,
.site-footer__preferences:hover {
  color: #ffffff;
}

.site-footer__nav a:hover::after,
.site-footer__preferences:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-footer__nav a:focus-visible,
.site-footer__preferences:focus-visible,
.site-footer__back-to-top:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.35);
  outline-offset: 5px;
  border-radius: 3px;
}


/* =========================================================
   Ligne inférieure
   ========================================================= */

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  padding-top: 1.5rem;

  border-top: 1px solid rgba(255, 255, 255, 0.14);

  font-size: 0.9rem;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  flex-shrink: 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;

  transition:
    color 180ms ease,
    transform 180ms ease;
}

.site-footer__back-to-top:hover {
  color: #ffffff;
  transform: translateY(-2px);
}


/* =========================================================
   Accessibilité
   ========================================================= */

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;

  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;

  border: 0;
}


/* =========================================================
   Tablette et mobile
   ========================================================= */

@media (max-width: 760px) {
  .site-footer {
    padding-top: 3.75rem;
  }

  .site-footer__main {
    grid-template-columns: 1fr;
    gap: 2.75rem;

    padding-bottom: 3rem;
  }

  .site-footer__nav {
    gap: 1rem;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
}


/* =========================================================
   Réduction des animations
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .site-footer__nav a,
  .site-footer__nav a::after,
  .site-footer__preferences,
  .site-footer__preferences::after,
  .site-footer__back-to-top {
    transition: none;
  }

  .site-footer__back-to-top:hover {
    transform: none;
  }
}

/* =========================================================
   Pages légales
   ========================================================= */

.legal-page {
  padding: clamp(5rem, 8vw, 8rem) 0;

  background: #f6f5f1;
  color: #182c3b;
}

.legal-page__container {
  width: min(100% - 2rem, 980px);
}

.legal-page__header {
  max-width: 820px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.legal-page__eyebrow {
  margin: 0 0 1rem;

  color: #bd572c;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.legal-page__header h1 {
  max-width: 780px;
  margin: 0;

  color: #182c3b;
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.055em;
}

.legal-page__intro {
  max-width: 760px;
  margin: 1.5rem 0 0;

  color: #655f58;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

.legal-page__updated {
  margin: 1.25rem 0 0;

  color: #756e66;
  font-size: 0.9rem;
}

.legal-page__content {
  max-width: 880px;
}

.legal-page__content section {
  padding-block: clamp(2rem, 4vw, 3rem);

  border-top: 1px solid rgba(24, 44, 59, 0.14);
}

.legal-page__content section:last-child {
  border-bottom: 1px solid rgba(24, 44, 59, 0.14);
}

.legal-page__content h2 {
  margin: 0 0 1.25rem;

  color: #182c3b;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.legal-page__content h3 {
  margin: 2rem 0 0.75rem;

  color: #182c3b;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
}

.legal-page__content p,
.legal-page__content li,
.legal-page__content address,
.legal-table {
  color: #514c47;
  font-size: 1rem;
  line-height: 1.75;
}

.legal-page__content p {
  margin: 0;
}

.legal-page__content p + p {
  margin-top: 1rem;
}

.legal-page__content ul {
  margin: 1rem 0;
  padding-left: 1.4rem;
}

.legal-page__content li + li {
  margin-top: 0.35rem;
}

.legal-page__content address {
  margin: 1rem 0;

  font-style: normal;
}

.legal-page__content a {
  color: #9f4726;
  font-weight: 600;
  text-underline-offset: 0.18em;
}

.legal-page__content a:hover {
  text-decoration-thickness: 2px;
}

.legal-page__content a:focus-visible,
.legal-page__cookie-button:focus-visible {
  outline: 3px solid rgba(189, 87, 44, 0.3);
  outline-offset: 4px;
  border-radius: 3px;
}


/* =========================================================
   Tableaux
   ========================================================= */

.legal-table-wrapper {
  width: 100%;
  margin: 1.5rem 0;

  overflow-x: auto;
}

.legal-table {
  width: 100%;

  border-collapse: collapse;
}

.legal-table th,
.legal-table td {
  padding: 1rem;

  border: 1px solid rgba(24, 44, 59, 0.14);

  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: rgba(24, 44, 59, 0.05);
  color: #182c3b;

  font-weight: 700;
}

.legal-table td:first-child {
  width: 38%;
}

.legal-table code {
  padding: 0.15rem 0.4rem;

  border-radius: 4px;

  background: rgba(24, 44, 59, 0.07);
  color: #182c3b;

  font-size: 0.92em;
}


/* =========================================================
   Bouton de gestion des cookies
   ========================================================= */

.legal-page__cookie-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 0.5rem;
  padding: 0.85rem 1.15rem;

  border: 1px solid #182c3b;
  border-radius: 6px;

  background: transparent;
  color: #182c3b;

  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.legal-page__cookie-button:hover {
  background: #182c3b;
  color: #ffffff;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 640px) {
  .legal-page {
    padding-block: 4rem;
  }

  .legal-page__header h1 {
    font-size: clamp(2.6rem, 13vw, 3.6rem);
  }

  .legal-page__content section {
    padding-block: 2.25rem;
  }

  .legal-table th,
  .legal-table td {
    min-width: 190px;
    padding: 0.85rem;
  }
}

.diagnostic-form-commitment {
  margin: 0 0 1rem;

  color: #655f58;
  font-size: 0.95rem;
  line-height: 1.55;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* =========================================================
   PAGE DE CONFIRMATION
   ========================================================= */

.confirmation-page {
  --confirmation-bg: #f7f4ef;
  --confirmation-card: #fffdf9;
  --confirmation-text: #182b39;
  --confirmation-muted: #665f58;
  --confirmation-accent: #c45d2f;
  --confirmation-accent-soft: #f7ebe4;
  --confirmation-border: #dfd4c8;
  --confirmation-shadow: 0 22px 55px rgba(45, 34, 25, 0.09);

  background: var(--confirmation-bg);
  color: var(--confirmation-text);
}

.confirmation-section {
  padding: clamp(72px, 8vw, 120px) 24px;
}

.confirmation-container {
  width: min(100%, 820px);
  margin: 0 auto;
}

.confirmation-card {
  padding: clamp(34px, 5vw, 64px);
  background: var(--confirmation-card);
  border: 1px solid var(--confirmation-border);
  border-radius: 16px;
  box-shadow: var(--confirmation-shadow);
}

/* =========================================================
   EN-TÊTE DE CONFIRMATION
   ========================================================= */

.confirmation-icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  place-items: center;
  color: var(--confirmation-accent);
  background: var(--confirmation-accent-soft);
  border-radius: 50%;
}

.confirmation-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confirmation-eyebrow {
  margin: 0 0 12px;
  color: var(--confirmation-accent);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.confirmation-title {
  max-width: 650px;
  margin: 0 auto;
  color: var(--confirmation-text);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.06;
  text-align: center;
}

.confirmation-intro {
  max-width: 610px;
  margin: 24px auto 0;
  color: var(--confirmation-muted);
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.7;
  text-align: center;
}

/* =========================================================
   PROCHAINES ÉTAPES
   ========================================================= */

.confirmation-next {
  margin-top: clamp(38px, 6vw, 56px);
  padding: clamp(26px, 4vw, 38px);
  background: #fff;
  border: 1px solid var(--confirmation-border);
  border-radius: 12px;
}

.confirmation-next__title {
  margin: 0 0 28px;
  color: var(--confirmation-text);
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-align: center;
}

.confirmation-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.confirmation-timeline__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--confirmation-border);
}

.confirmation-timeline__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.confirmation-timeline__item:last-child {
  padding-bottom: 0;
}

.confirmation-timeline__number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--confirmation-accent);
  font-size: 0.73rem;
  font-weight: 750;
  background: var(--confirmation-card);
  border: 1px solid rgba(196, 93, 47, 0.38);
  border-radius: 50%;
}

.confirmation-timeline__content h3 {
  margin: 1px 0 7px;
  color: var(--confirmation-text);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.35;
}

.confirmation-timeline__content p {
  margin: 0;
  color: var(--confirmation-muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* =========================================================
   BOUTON
   ========================================================= */

.confirmation-button {
  display: flex;
  width: fit-content;
  min-height: 54px;
  margin: 36px auto 0;
  padding: 14px 22px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background: var(--confirmation-accent);
  border: 1px solid var(--confirmation-accent);
  border-radius: 8px;
  box-shadow: 0 9px 20px rgba(196, 93, 47, 0.17);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.confirmation-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.confirmation-button:hover {
  background: #ae4f28;
  box-shadow: 0 12px 24px rgba(196, 93, 47, 0.23);
  transform: translateY(-2px);
}

.confirmation-button:hover svg {
  transform: translateX(-3px);
}

.confirmation-button:focus-visible {
  outline: 3px solid rgba(196, 93, 47, 0.28);
  outline-offset: 4px;
}

/* =========================================================
   RÉASSURANCE
   ========================================================= */

.confirmation-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: center;
  justify-content: center;
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--confirmation-border);
  list-style: none;
}

.confirmation-reassurance li {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--confirmation-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.confirmation-reassurance__icon {
  display: grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  color: var(--confirmation-accent);
  background: var(--confirmation-accent-soft);
  border-radius: 50%;
}

.confirmation-reassurance__icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
  .confirmation-section {
    padding: 48px 16px 72px;
  }

  .confirmation-card {
    padding: 30px 20px;
    border-radius: 12px;
  }

  .confirmation-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
  }

  .confirmation-icon svg {
    width: 30px;
    height: 30px;
  }

  .confirmation-next {
    padding: 24px 20px;
  }

  .confirmation-timeline__item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }

  .confirmation-timeline__number {
    width: 38px;
    height: 38px;
  }

  .confirmation-button {
    width: 100%;
  }

  .confirmation-reassurance {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }
}

/* =========================================================
   RÉDUCTION DES ANIMATIONS
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .confirmation-button,
  .confirmation-button svg {
    transition: none;
  }

  .confirmation-button:hover {
    transform: none;
  }

  .confirmation-button:hover svg {
    transform: none;
  }
}

/* =========================================================
   BANDEAU DE CONSENTEMENT AUX COOKIES
   ========================================================= */

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent {
  position: fixed;
  z-index: 10000;
  right: 24px;
  bottom: 24px;
  left: 24px;

  display: flex;
  justify-content: center;

  pointer-events: none;
}

.cookie-consent__inner {
  width: min(100%, 1080px);
  padding: 24px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;

  color: #1c1c1c;
  background: #ffffff;

  border: 1px solid rgba(28, 28, 28, 0.14);
  border-radius: 12px;

  box-shadow:
    0 20px 50px rgba(15, 45, 68, 0.16),
    0 4px 12px rgba(15, 45, 68, 0.08);

  pointer-events: auto;

  animation: cookie-consent-enter 280ms ease-out both;
}

.cookie-consent__content {
  max-width: 720px;
}

.cookie-consent__eyebrow {
  margin: 0 0 6px;

  color: #0f2d44;

  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cookie-consent__title {
  margin: 0 0 8px;

  color: #1c1c1c;

  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}

.cookie-consent__description {
  margin: 0;

  color: #3f3f3f;

  font-size: 1rem;
  line-height: 1.55;
}

.cookie-consent__details {
  margin: 8px 0 0;

  color: #5a5a5a;

  font-size: 0.875rem;
  line-height: 1.5;
}

.cookie-consent__details a {
  color: #0f2d44;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cookie-consent__details a:hover {
  text-decoration-thickness: 2px;
}

.cookie-consent__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cookie-consent__button {
  min-height: 46px;
  padding: 11px 20px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  border: 1px solid transparent;
  border-radius: 8px;

  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.cookie-consent__button:hover {
  transform: translateY(-1px);
}

.cookie-consent__button--primary {
  color: #ffffff;
  background: #0f2d44;
  border-color: #0f2d44;
}

.cookie-consent__button--primary:hover {
  background: #173f5c;
  border-color: #173f5c;
}

.cookie-consent__button--secondary {
  color: #0f2d44;
  background: #ffffff;
  border-color: rgba(15, 45, 68, 0.4);
}

.cookie-consent__button--secondary:hover {
  background: #f6f5f3;
  border-color: #0f2d44;
}

.cookie-consent__button:focus-visible,
.footer-cookie-settings:focus-visible,
.cookie-consent__details a:focus-visible {
  outline: 3px solid rgba(15, 45, 68, 0.35);
  outline-offset: 3px;
}

/* Bouton présent dans le footer */

.footer-cookie-settings {
  padding: 0;

  color: inherit;
  background: none;
  border: 0;

  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  cursor: pointer;
}

.footer-cookie-settings:hover {
  text-decoration-thickness: 2px;
}

/* Animation d’apparition */

@keyframes cookie-consent-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tablette et mobile */

@media (max-width: 760px) {
  .cookie-consent {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .cookie-consent__inner {
    padding: 20px;

    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cookie-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cookie-consent__button {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .cookie-consent__inner {
    padding: 18px;
  }

  .cookie-consent__actions {
    grid-template-columns: 1fr;
  }

  .cookie-consent__button--secondary {
    order: 2;
  }

  .cookie-consent__button--primary {
    order: 1;
  }
}

/* Accessibilité : réduction des animations */

@media (prefers-reduced-motion: reduce) {
  .cookie-consent__inner {
    animation: none;
  }

  .cookie-consent__button {
    transition: none;
  }
}

/* =========================================================
   PAGE 404
   ========================================================= */

.error-page {
  min-height: calc(100vh - 160px);
  padding: clamp(100px, 13vw, 180px) 0;
  display: flex;
  align-items: center;
  background: #f6f5f3;
}

.error-page__container {
  display: flex;
  justify-content: center;
}

.error-page__content {
  width: min(100%, 760px);
  text-align: center;
}

.error-page__icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #0f2d44;
  background: #ffffff;

  border: 1px solid rgba(15, 45, 68, 0.14);
  border-radius: 18px;

  box-shadow:
    0 18px 40px rgba(15, 45, 68, 0.08),
    0 4px 12px rgba(15, 45, 68, 0.05);
}

.error-page__icon svg {
  width: 48px;
  height: 48px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.error-page__code {
  margin: 0 0 12px;

  color: #0f2d44;

  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.error-page__title {
  margin: 0;

  color: #1c1c1c;

  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.error-page__lead {
  max-width: 650px;
  margin: 28px auto 0;

  color: #3f3f3f;

  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.55;
}

.error-page__text {
  max-width: 620px;
  margin: 14px auto 0;

  color: #5a5a5a;

  font-size: 1rem;
  line-height: 1.6;
}

.error-page__actions {
  margin-top: 36px;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.error-page__reassurance {
  margin: 38px 0 0;
  padding: 26px 0 0;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;

  border-top: 1px solid rgba(28, 28, 28, 0.12);

  list-style: none;
}

.error-page__reassurance li {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #4a4a4a;

  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.error-page__reassurance li span {
  width: 22px;
  height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  color: #ffffff;
  background: #0f2d44;

  border-radius: 50%;

  font-size: 0.75rem;
  font-weight: 700;
}

@media (max-width: 760px) {
  .error-page {
    min-height: auto;
    padding: 96px 0 80px;
  }

  .error-page__icon {
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
  }

  .error-page__icon svg {
    width: 42px;
    height: 42px;
  }

  .error-page__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .error-page__actions .button {
    width: 100%;
  }

  .error-page__reassurance {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;

    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .error-page *,
  .error-page *::before,
  .error-page *::after {
    scroll-behavior: auto;
  }
}