/* AI.xcellence — styles de la page. Les valeurs viennent de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
:root[data-motion="full"] { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface-building);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, figure { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
main:focus { outline: none; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.perspective, .site-footer { --focus: var(--focus-on-dark); }

.nw { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--action); color: var(--on-action);
  padding: .75rem 1rem; border-radius: 6px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* — Texte commun — */
.eyebrow {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1.3;
  color: var(--ink-secondary);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--accent-honey);
}
.eyebrow--on-dark { color: var(--on-dark-secondary); }
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
  margin-bottom: 1.25rem;
}
.lead { font-size: var(--fs-lead); max-width: var(--measure); text-wrap: pretty; }
.optional { font-weight: 400; color: var(--ink-secondary); }

/* — Boutons : la cible reste immobile, seule la flèche réagit — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: var(--target); padding: .7rem 1.4rem;
  border: 2px solid transparent; border-radius: var(--radius-control);
  background: var(--action); color: var(--on-action);
  font-size: var(--fs-control); font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: left; cursor: pointer;
  transition: background-color var(--dur-arrow) var(--ease-out), border-color var(--dur-arrow) var(--ease-out);
}
.btn:hover { background: var(--action-hover); }
.btn__arrow {
  flex: none; width: 1.1em; height: 1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M2 10h16M11 3l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M2 10h16M11 3l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-arrow) var(--ease-out);
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow, .btn:active .btn__arrow { transform: translateX(var(--dist-arrow)); }
/* Bouton de la campagne : pilule bleue, flèche dans un rond blanc ; le rond reste fixe, seule la flèche glisse */
.btn:not(.btn--ghost):not(.btn--on-dark) { padding: .45rem .5rem .45rem 1.4rem; gap: .9rem; }
.btn:not(.btn--ghost):not(.btn--on-dark) .btn__arrow {
  position: relative; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: #FFFFFF; -webkit-mask: none; mask: none; transform: none !important;
}
.btn:not(.btn--ghost):not(.btn--on-dark) .btn__arrow::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.05rem; height: 1rem; background: var(--action);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M2 10h16M11 3l7 7-7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M2 10h16M11 3l7 7-7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-arrow) var(--ease-out);
}
.btn:not(.btn--ghost):not(.btn--on-dark):hover .btn__arrow::after, .btn:not(.btn--ghost):not(.btn--on-dark):focus-visible .btn__arrow::after, .btn:not(.btn--ghost):not(.btn--on-dark):active .btn__arrow::after { transform: translateX(var(--dist-arrow)); }
.btn--small:not(.btn--ghost) .btn__arrow { width: 1.75rem !important; height: 1.75rem !important; }
.btn { text-transform: none; font-weight: 700; letter-spacing: .01em; }
.btn--small { min-height: 44px; padding: .55rem 1.05rem; font-size: .9375rem; }
.btn--on-dark { background: var(--action-on-dark); color: var(--on-action-on-dark); }
.btn--on-dark:hover { background: var(--action-on-dark-hover); }
.btn--accent { background: var(--action); color: var(--on-action); }
.btn--accent:hover { background: var(--action-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }

.link-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink); font-weight: 600; font-size: var(--fs-control);
}
.link-btn span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.link-btn:hover span { text-decoration-thickness: 2.5px; }
.link-btn svg { flex: none; }
.link-btn--small { min-height: 44px; font-size: .9375rem; text-decoration: underline; text-underline-offset: 4px; }

/* — En-tête — */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-hero) 94%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 64px; display: flex; align-items: center; gap: .75rem;
}
.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: var(--tracking-brand); text-decoration: none; white-space: nowrap;
  margin-right: auto; padding: .5rem 0;
}
.site-nav { display: none; gap: 1.5rem; }
.site-nav a { font-weight: 500; text-decoration: none; padding: .6rem 0; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.motion-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-width: 44px; min-height: 44px; padding: 0 .6rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-control);
  background: transparent; cursor: pointer; font-size: .875rem; font-weight: 500;
}
.motion-toggle[aria-pressed="true"] { background: var(--ink); color: var(--surface-hero); border-color: var(--ink); }
.motion-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header__cta { display: none; }

@media (min-width: 380px) and (max-width: 767px) {
  .motion-toggle { padding: 0 .8rem; }
  .motion-toggle__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 768px) {
  .site-header__inner { min-height: 72px; gap: 1.25rem; }
  .site-nav { display: flex; margin-left: auto; }
  .brand { margin-right: 0; }
  .site-header__cta { display: inline-flex; }
}
@media (min-width: 1100px) {
  .motion-toggle { padding: 0 .9rem; }
  .motion-toggle__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* — 1. Ouverture : « Deviens qui tu es. » — */
.hero { position: relative; isolation: isolate; background: radial-gradient(48% 60% at 92% 30%, color-mix(in srgb, var(--ref-lavis) 90%, transparent) 0%, transparent 70%), radial-gradient(40% 40% at 70% 100%, color-mix(in srgb, var(--ref-lavis) 70%, transparent) 0%, transparent 70%), var(--grain), var(--surface-hero); background-color: var(--surface-hero); padding: clamp(1.75rem, 1rem + 3vw, 4rem) 0 var(--section-pad); overflow: clip; }
.hero__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.5rem); font-weight: 700; line-height: 1.08;
  letter-spacing: var(--tracking-hero); text-transform: uppercase;
  margin: 0 0 var(--hero-gap-group); text-wrap: balance;
}
.hero__title em { font-style: italic; font-weight: 400; text-transform: none; }
.hero__key { display: inline-block; color: var(--key-blue); }
/* Soulignement simple du mot-clé, même style que « L’enfant reste auteur. » */
.mark {
  white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--ref-soleil);
  text-decoration-thickness: .1em; text-underline-offset: .14em; text-decoration-skip-ink: none;
}
.hero__promise { letter-spacing: var(--tracking-question); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.3; max-width: 28rem; margin-bottom: var(--space-s); text-wrap: balance; }
.hero .eyebrow { margin-bottom: var(--hero-gap-label); }
.hero .lead { line-height: 1.6; max-width: 33rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); margin-top: var(--hero-gap-action); }
.reassure { font-size: .9375rem; line-height: 1.45; color: var(--ink-secondary); max-width: 22rem; }
/* Rémy vous répond : un visage réel au moment d’agir */
.responder { display: flex; align-items: center; gap: .85rem; }
.responder__photo { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface-hero), 0 0 0 4.5px var(--ref-soleil); }
.responder__name { display: block; color: var(--ink); font-weight: 600; }

/* L’illustration : une scène d’échange, posée comme une feuille sur la table */
.hero__visual { position: relative; z-index: 0; margin: 0; min-width: 0; }
.hero__visual::before { content: ""; position: absolute; z-index: -1; width: clamp(9rem, 22vw, 17rem); aspect-ratio: 1; right: -4%; top: clamp(-4.5rem, -6vw, -2rem); border-radius: 50%; background: var(--grain), var(--accent-light); }
.hero__img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%;
  border-radius: var(--radius-paper); box-shadow: var(--shadow-paper); background: var(--ref-soleil-clair);
}
@media (min-width: 640px) { .hero__img { aspect-ratio: 2 / 1; object-position: 50% 35%; } }
/* Mention visible : une image photoréaliste générée ne doit pas passer pour une vraie séance (AI Act, art. 50) */
.hero__credit {
  position: absolute; right: .75rem; bottom: .75rem; padding: .2rem .55rem; border-radius: 999px;
  background: rgba(19, 40, 58, .78); color: #FFFFFF; font-size: .75rem; font-weight: 500; line-height: 1.4;
}
@media (max-width: 639px) { .hero__credit { right: .5rem; bottom: .5rem; padding: .1rem .45rem; font-size: .6875rem; } }

@media (max-width: 379px) {
  .hero { padding-top: 1.25rem; }
  .hero .eyebrow { margin-bottom: var(--space-s); }
  .hero__title { margin-bottom: var(--space-m); }
  .hero__actions { margin-top: var(--space-l); }
}
@media (max-width: 639px) { .contact::before { width: 70vw; right: -24%; top: -4%; } }
@media (min-width: 1024px) {
  .hero { padding-top: clamp(2.5rem, 4vw, 4.5rem); }
  /* Deux colonnes équilibrées au-dessus de l’illustration : titre et promesse à gauche, texte et invitation à droite */
  .hero__inner { gap: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); }
  .hero__text {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 4vw, 5rem);
    grid-template-areas: "eyebrow ." "title lead" "promise actions";
  }
  .hero .eyebrow { grid-area: eyebrow; }
  .hero__title { grid-area: title; }
  .hero .lead { grid-area: lead; align-self: end; margin-bottom: var(--hero-gap-group); }
  .hero__promise { grid-area: promise; margin-bottom: 0; }
  .hero__actions { grid-area: actions; margin-top: 0; align-self: start; }
}

/* — 2. Rituel « À toi d’abord » — */
.ritual { background: var(--grain), var(--surface-ritual); padding: 0 0 var(--section-pad); }
.ritual__inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem, 2rem + 2vw, 4rem) var(--gutter) 0; border-top: 1px solid var(--line); }
.doctrine { letter-spacing: var(--tracking-question); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); margin-top: -.25rem; }
.doctrine em { font-style: normal; text-decoration: underline; text-decoration-color: var(--ref-soleil); text-decoration-thickness: .14em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.ritual__steps { list-style: none; padding: 0; margin: 2.25rem 0 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rstep { display: grid; align-content: start; gap: .55rem; padding: 1rem .95rem 1.1rem; background: var(--grain), var(--surface-card); color: var(--ref-encre); border-radius: var(--radius-paper); box-shadow: var(--shadow-paper); font-size: 1rem; }
.rstep__n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ref-bleu-vif); color: #FFFFFF; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.rstep--ai { grid-column: 1 / -1; background: var(--grain), var(--ref-papier); outline: 2px dashed var(--ref-encre); outline-offset: -8px; }
.rstep--decide { grid-column: 1 / -1; background: var(--grain), var(--ref-soleil-clair); }
.rstep--decide .rstep__n { background: var(--ref-encre); }
.rstep__decision { font-weight: 600; }
.ai-note { display: grid; gap: .35rem; margin-top: .25rem; padding: .75rem .85rem; background: var(--ref-bleu-doux); border-radius: 4px; }
.ai-note__label { font-size: .8125rem; font-weight: 600; }
.ai-note__choices { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.choice { min-height: 44px; padding: .45rem .95rem; border-radius: var(--radius-control); border: 1.5px solid var(--ref-encre); background: var(--ref-papier); color: var(--ref-encre); cursor: pointer; font-weight: 600; font-size: .9375rem; }
.choice[aria-pressed="true"] { background: var(--ref-encre); color: var(--ref-creme); }
.ritual__caveat { margin-top: 1rem; font-size: .875rem; color: var(--ink-secondary); }
.ritual .rstep :focus-visible, .ritual .choice:focus-visible { outline-color: var(--ref-encre); }
@media (min-width: 768px) {
  .ritual__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .rstep, .rstep--ai, .rstep--decide { grid-column: auto; min-height: 15rem; padding: 1.3rem 1.2rem 1.4rem; }
  .rstep__n { width: 2.6rem; height: 2.6rem; font-size: 1.25rem; }
}

/* — 2. Changer de regard — */
.perspective { background: var(--surface-perspective); color: var(--on-dark); padding: var(--section-pad) 0; }
.perspective__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem);
}
.perspective .lead { color: var(--on-dark); }
.perspective__stage { position: relative; max-width: 34rem; }
.answer {
  display: grid; gap: .6rem; width: 88%; margin-left: auto;
  background: var(--grain), var(--piece-paper); color: var(--piece-ink);
  padding: 1.1rem 1.25rem 3.75rem; border-radius: var(--radius-paper);
  box-shadow: var(--shadow-paper); rotate: 2deg;
}
/* Le constat : trois réponses identiques empilées, la standardisation */
.answers { display: grid; width: 88%; margin-left: auto; }
.answers .answer { grid-area: 1 / 1; width: 100%; margin: 0; }
.answers .answer:nth-child(1) { translate: -22px -20px; rotate: -3.5deg; }
.answers .answer:nth-child(2) { translate: -11px -10px; rotate: -.75deg; }
.answers .answer:nth-child(3) { rotate: 2deg; }
.perspective__turn { margin-top: 1.1rem; padding-left: 1rem; border-left: 3px solid var(--ref-soleil); font-weight: 500; }
.build__lead { margin-top: -.25rem; }
.answer__label { font-size: .875rem; font-weight: 600; color: var(--piece-ink-secondary); margin-bottom: .25rem; }
.answer__line { display: block; height: 10px; width: var(--w); border-radius: 5px; background: var(--ref-bleu-grise); opacity: .32; }

.flip { position: relative; margin-top: -2.5rem; width: min(100%, 30rem); perspective: 1400px; }
.flip__card {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  text-align: left; color: var(--piece-ink); border-radius: var(--radius-paper);
}
.flip__card:focus-visible { outline-offset: 5px; }
.flip__inner {
  display: grid; transform-style: preserve-3d;
  transition: transform var(--dur-turn) var(--ease-turn);
}
.flip__card[aria-pressed="true"] .flip__inner { transform: rotateY(180deg); }
.flip__face {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: .75rem;
  min-height: 15rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-paper); box-shadow: var(--shadow-paper);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: var(--grain), var(--piece-paper); rotate: -1.5deg;
}
.flip__face--back { background: var(--grain), var(--ref-soleil-clair); transform: rotateY(180deg); }
.flip__kicker { font-size: .875rem; font-weight: 600; }
.flip__q { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-question); line-height: 1.18; letter-spacing: var(--tracking-question); text-wrap: balance; }
.flip__hint { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9375rem; text-decoration: underline; text-underline-offset: 4px; }
.turn-icon {
  flex: none; width: 1.25rem; height: 1.25rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v4h-4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v4h-4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Mouvement réduit : changement de face sans rotation */
:root[data-motion="reduced"] .flip__card[aria-pressed="true"] .flip__inner { transform: none; }
:root[data-motion="reduced"] .flip__face--back { transform: none; visibility: hidden; }
:root[data-motion="reduced"] .flip__card[aria-pressed="true"] .flip__face--back { visibility: visible; }
:root[data-motion="reduced"] .flip__card[aria-pressed="true"] .flip__face--front { visibility: hidden; }
/* Sans JavaScript : les deux faces et l’explication restent lisibles */
html:not(.js) .flip__inner { gap: 1rem; }
html:not(.js) .flip__face { grid-area: auto; transform: none; }
html:not(.js) .flip__hint { display: none; }

.flip__after { margin-top: 1.75rem; display: grid; gap: 1.25rem; justify-items: start; }
.flip__explain { max-width: 30rem; color: var(--on-dark); }
.js .flip__after:not(.is-visible) { display: none; }
.is-visible, .appear { animation: appear var(--dur-appear) var(--ease-out) backwards; }
@keyframes appear { from { opacity: 0; translate: 0 var(--dist-appear); } }

@media (min-width: 1024px) {
  .perspective__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .perspective__text { position: sticky; top: 120px; }
  .perspective__stage { justify-self: end; width: 100%; }
}

/* — 3. Quatre capacités — */
.build { background: var(--grain), var(--surface-building); padding: var(--section-pad) 0; overflow-x: clip; }
.build__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: clamp(2rem, 1.5rem + 2vw, 4rem);
}
.build__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 2rem; max-width: 30rem; }
.tab {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: var(--target); padding: .6rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-control);
  background: transparent; color: var(--ink); cursor: pointer;
  font-weight: 600; font-size: var(--fs-control); text-align: left;
  transition: background-color var(--dur-arrow) var(--ease-out), color var(--dur-arrow) var(--ease-out);
}
.tab::before { content: ""; flex: none; width: .8rem; height: .8rem; border-radius: 3px; background: var(--chip); box-shadow: inset 0 0 0 1px rgba(35, 60, 80, .35); }
.tab { --chip: transparent; }
.tab[aria-selected="true"] { --chip: var(--ref-soleil); }
.tab:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.tab[aria-selected="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }

.build__stage { min-width: 0; }
.stack { display: grid; padding: 2.75rem 2.75rem 0 0; --step: 10px; }
.piece-slot {
  grid-area: 1 / 1; min-width: 0;
  translate: calc(var(--sx) * var(--spread, 0)) calc(var(--sy) * var(--spread, 0));
  rotate: calc(var(--sr) * var(--spread, 0));
}
.piece {
  height: 100%; display: flex; flex-direction: column; gap: .9rem;
  padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); min-height: 16rem;
  color: var(--piece-ink); border-radius: var(--radius-paper); box-shadow: var(--shadow-paper);
  translate: calc(var(--rank, 0) * var(--step)) calc(var(--rank, 0) * var(--step) * -1);
  rotate: var(--rank-r, 0deg);
  transition: translate var(--dur-turn) var(--ease-turn), rotate var(--dur-turn) var(--ease-turn);
  position: relative;
}
.piece--1 { background: var(--grain), var(--piece-1); }
.piece--2 { background: var(--grain), var(--piece-2); }
.piece--3 { background: var(--grain), var(--piece-3); }
.piece--4 { background: var(--grain), var(--piece-4); }
.piece--5 { background: var(--grain), var(--piece-1); }
.piece-slot.is-front .piece { background: var(--grain), var(--piece-front); }
.piece-slot.is-front .piece::before {
  content: ""; position: absolute; top: -10px; left: 2rem; width: 72px; height: 20px;
  background: rgba(255, 248, 240, .8); rotate: -3deg; border-radius: 2px;
}
.piece__dim { font-size: .9375rem; font-weight: 600; }
.piece__q { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-question); line-height: 1.18; letter-spacing: var(--tracking-question); text-wrap: balance; max-width: 22ch; }
.piece__text { font-size: var(--fs-lead); max-width: 30rem; margin-top: auto; }
/* Sans JavaScript : les pièces se lisent l’une après l’autre */
html:not(.js) .stack { gap: 1rem; padding: 0; }
html:not(.js) .piece-slot { grid-area: auto; translate: none; rotate: none; }
html:not(.js) .build__tabs, html:not(.js) .build__invite { display: none; }

.build__invite { margin-top: 1.75rem; }

@media (min-width: 640px) { .build__tabs { display: flex; flex-wrap: wrap; } .stack { --step: 14px; padding: 3.5rem 3.5rem 0 0; } .piece { min-height: 18rem; } }
@media (min-width: 1024px) {
  .build__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .build__tabs { flex-direction: column; align-items: flex-start; }
  .tab { min-width: 13rem; }
  .build__invite { margin-top: 2.75rem; }
}

/* — 4. Regard et projet — */
.project { background: var(--grain), var(--surface-project); padding: var(--section-pad) 0; }
.project__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem);
}
.steps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .65rem .6rem; margin: .5rem 0 1.75rem; }
.steps li { letter-spacing: var(--tracking-question);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  background: var(--grain), var(--piece-paper); color: var(--piece-ink);
  padding: .45rem .9rem; border-radius: var(--radius-paper); box-shadow: 0 1px 2px rgba(35, 60, 80, .14);
}
.steps li:nth-child(odd) { rotate: -1.5deg; }
.steps li:nth-child(even) { rotate: 1deg; }
.steps li:nth-child(3) { background: var(--grain), var(--piece-1); }

.project__fact-text { font-size: var(--fs-lead); max-width: var(--measure); }
/* Incubation : logo dans un cartouche blanc, conformément aux règles de la Région */
.trust { margin-top: 1.75rem; display: grid; gap: .9rem; max-width: var(--measure); }
.trust__logo {
  width: min(100%, 24rem); padding: .6rem .75rem; background: #FFFFFF;
  border-radius: 6px; box-shadow: 0 1px 2px rgba(31, 58, 66, .12);
}
.trust__logo img { display: block; width: 100%; height: auto; }
.trust__text { font-size: .9375rem; line-height: 1.55; color: var(--ink); }
.trust__text a { display: inline-block; margin-top: .35rem; font-weight: 600; text-underline-offset: 4px; padding: .3rem 0; }
@media (max-width: 379px) { .trust__logo { padding: .35rem .4rem; } }
/* Fondateur : le portrait est posé comme un tirage sur papier */
.founder {
  display: grid; gap: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem); align-items: start;
  margin-top: clamp(1rem, .5rem + 2vw, 2rem); padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--line);
}
.founder__photo {
  position: relative; width: min(70vw, 16rem); justify-self: start;
  padding: .55rem .55rem 1.6rem; background: var(--ref-papier);
  border-radius: var(--radius-paper); box-shadow: var(--shadow-paper); rotate: -2deg;
}
.founder__photo::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px;
  background: color-mix(in srgb, var(--ref-miel) 72%, transparent); rotate: 3deg; border-radius: 1px 3px 2px 3px;
}
.founder__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.founder__text { max-width: 40rem; display: grid; gap: 1rem; }
.founder__text .eyebrow { margin-bottom: 0; }
.founder__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.14; letter-spacing: var(--tracking-title); text-wrap: balance; }
.founder__name { font-weight: 600; color: var(--ink-secondary); margin-top: -.35rem; }
.founder__text strong { font-weight: 600; }
.founder__link { font-weight: 600; text-underline-offset: 4px; }
.review-inline { border: 1.5px dashed var(--line-strong); border-radius: 4px; padding: 0 .35rem; color: var(--ink); }
@media (min-width: 640px) { .founder { grid-template-columns: auto minmax(0, 1fr); } .founder__photo { width: 15rem; } }
@media (min-width: 1024px) { .founder { grid-column: 1 / -1; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .founder__photo { width: min(100%, 18rem); justify-self: center; } }
.review-slot {
  margin-top: 2rem; padding: 1.1rem 1.25rem; max-width: var(--measure);
  border: 2px dashed var(--line-strong); border-radius: var(--radius-paper);
  font-size: .9375rem;
}
.review-slot__title { font-weight: 700; margin-bottom: .25rem; }
@media (min-width: 1024px) {
  .project__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

/* — Vos questions de parent : réponses courtes, ouvertes au clavier sans JavaScript — */
.faq { background: var(--grain), var(--surface-building); padding: var(--section-pad) 0; }
.faq__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.faq__head .section-title { margin-bottom: 0; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-question);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: linear-gradient(var(--on-action), var(--on-action)) center / 1rem 2.5px no-repeat, linear-gradient(var(--on-action), var(--on-action)) center / 2.5px 1rem no-repeat, var(--action);
  transition: rotate var(--dur-appear) var(--ease-out);
}
.faq__item[open] summary::after { rotate: 45deg; }
.faq__item summary:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.faq__item p { padding: 0 0 1.25rem; max-width: 38rem; line-height: 1.6; }
.faq__item p a { font-weight: 600; text-underline-offset: 3px; }
:root[data-motion="reduced"] .faq__item summary::after { transition: none; }
@media (min-width: 1024px) {
  .faq__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
}

/* Après votre message : trois temps, sans délai promis */
.next-steps { margin-top: 1.75rem; }
.next-steps__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: var(--tracking-question); margin-bottom: .75rem; }
.next-steps__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.next-steps__list li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: baseline; line-height: 1.5; }
.next-steps__n {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--ref-bleu-vif); color: #FFFFFF; font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
  transform: translateY(-.1rem);
}

/* — 5. Invitation et contact — */
.contact { position: relative; overflow: clip; background: var(--surface-contact); padding: var(--section-pad) var(--gutter); }
.contact::before { content: ""; position: absolute; width: min(62vw, 44rem); aspect-ratio: 1; right: -8%; top: -12%; border-radius: 50%; background: var(--grain), var(--accent-light); }
.contact__inner {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background: var(--grain), var(--surface-paper); color: var(--ink);
  border-radius: var(--radius-paper); box-shadow: var(--shadow-paper);
  display: grid; gap: clamp(2rem, 1.5rem + 2vw, 4rem);
}
.contact .form { box-shadow: none; padding: 0; background: none; }
.contact__body .btn { margin-top: 2rem; }
.contact__panel[hidden] { display: none; }
.form {
  background: var(--grain), var(--surface-paper); color: var(--ink);
  padding: clamp(1.25rem, .9rem + 2vw, 2.5rem);
  border-radius: var(--radius-paper); box-shadow: var(--shadow-paper);
}
.form__notice {
  font-size: .9375rem; line-height: 1.5; margin-bottom: 1.75rem;
  padding: .75rem 1rem; border-left: 4px solid var(--accent-honey);
  background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 0 4px 4px 0;
}
.topics { border: 0; padding: 0; margin: 0 0 1.75rem; min-width: 0; scroll-margin-top: 96px; }
.topics__legend { padding: 0; font-weight: 600; font-size: var(--fs-body); line-height: 1.4; margin-bottom: .85rem; }
.topics__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.topic {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-control);
  background: var(--surface-field); color: var(--ink); cursor: pointer;
  font-size: .9375rem; font-weight: 500; text-align: left;
}
.topic:hover { border-color: var(--ink); }
.topic[aria-pressed="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); font-weight: 600; }
.topic[aria-pressed="true"]::before {
  content: ""; width: 1rem; height: 1rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.topics__state { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .75rem; }
.topics__status { font-size: .9375rem; color: var(--ink-secondary); }
.link-btn--small[hidden] { display: none; }

.field { margin-bottom: 1.35rem; }
.field label { display: block; font-weight: 600; margin-bottom: .4rem; line-height: 1.4; }
.field__help { font-size: .9375rem; color: var(--ink-secondary); margin-bottom: .5rem; line-height: 1.45; }
.field input, .field textarea {
  display: block; width: 100%; min-height: var(--target);
  padding: .75rem .9rem; font-size: 1rem; line-height: 1.5;
  background: var(--surface-field); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: 6px;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-secondary); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.field__error { color: var(--danger); font-size: .9375rem; font-weight: 600; margin-top: .45rem; line-height: 1.45; }
.field__error:empty { display: none; }
.form__actions { display: grid; gap: 1rem; justify-items: start; margin-top: .5rem; }
.form__status { font-size: .9375rem; line-height: 1.5; max-width: 34rem; }
.form__status:empty { display: none; }
.form__status[data-state] { padding: .75rem 1rem; border-radius: 4px; border-left: 4px solid var(--accent-honey); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.form__status[data-state="error"] { border-left-color: var(--danger); }
.btn[aria-disabled="true"] { opacity: .7; cursor: progress; }

@media (min-width: 1024px) {
  .contact__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 5vw, 6rem); align-items: end; }
  .contact__head .section-title { margin-bottom: 0; }
  .contact__panel { grid-column: 2; }
}

/* — Pied de page — */
.site-footer { background: var(--surface-footer); color: var(--on-dark); padding: 3rem 0; }

/* Barre d’invitation mobile : visible hors de l’ouverture et du contact, jamais sur grand écran */
.cta-bar {
  position: fixed; inset: auto 0 0; z-index: 40; display: flex; justify-content: center;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-hero) 94%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  animation: cta-bar-in var(--dur-appear) var(--ease-out);
}
.cta-bar .btn { width: min(100%, 24rem); justify-content: space-between; }
@keyframes cta-bar-in { from { opacity: 0; transform: translateY(100%); } }
:root[data-motion="reduced"] .cta-bar { animation: none; }
@media (max-width: 767px) {
  /* La barre ne masque ni le pied de page ni l’élément qui a le focus (WCAG 2.4.11) */
  html.js { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  html.js .site-footer { padding-bottom: calc(3rem + 4.5rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) { .cta-bar { display: none; } }
.site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 1rem; }
.site-footer__sign { letter-spacing: var(--tracking-question); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.site-footer__sign .brand { color: var(--accent-honey); margin: 0; padding: 0; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.site-footer__nav a { padding: .6rem 0; text-underline-offset: 4px; }
.site-footer__note { color: var(--on-dark-secondary); font-size: .9375rem; }

/* — Mouvement réduit : aucune transition résiduelle — */
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation-duration: 0ms !important; animation-delay: 0ms !important; transition-duration: 0ms !important; scroll-behavior: auto !important;
}
:root[data-motion="reduced"] .piece-slot { translate: none !important; rotate: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.js) *, html:not(.js) *::before, html:not(.js) *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

/* Deux sections cobalt consécutives : un filet marque le passage de la méthode au projet */
.ritual + .project { padding-top: 0; }
.ritual + .project .project__inner { border-top: 1px solid var(--line); padding-top: var(--section-pad); }

/* Formulaire : champ piège et mention de confidentialité */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__privacy { font-size: .875rem; color: var(--ink-secondary); margin: -.25rem 0 1rem; }
.form__privacy a, .form__notice a { font-weight: 600; text-underline-offset: 3px; }