/* ==========================================================================
   KITSUN SYSTEM - 01 · L'épreuve : la page d'accueil du visiteur, composée en direct
   Planche reprise de « Kitsun system » (css/editorial.css), posée sur le thème cristal.
   ========================================================================== */

.epreuve { --pl-display: 'Zodiak', Georgia, 'Times New Roman', serif; position: relative; height: 340svh; }
.epreuve__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  max-width: 1440px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.7fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: clamp(12px, 3vh, 32px) var(--gutter);
}

/* Le panneau de verre : nom, activité, style, étapes */
.esq { display: grid; gap: clamp(12px, 2vh, 18px); padding: clamp(18px, 2.4vw, 28px); border-radius: var(--radius-card); }
.esq__title { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 26px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.esq__form { display: grid; gap: clamp(10px, 1.8vh, 16px); }
.esq .field > label, .dirs legend { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.dirs { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.dirs legend { padding: 0; margin-bottom: 8px; }
.dir { position: relative; cursor: pointer; }
.dir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dir span { display: inline-block; padding: 7px 14px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 600; color: var(--text-2); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-bd); transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.dir:hover span { color: var(--text); }
.dir input:checked + span { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--violet-400), var(--violet-600)); box-shadow: 0 8px 22px -8px rgba(139, 61, 255, 0.9); }
.dir input:focus-visible + span { outline: 2px solid var(--violet-300); outline-offset: 3px; }

.esq-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
/* Les intitulés restent lisibles par les lecteurs d'écran ; à l'écran, la légende de la planche nomme l'étape */
.esq-steps li { position: relative; height: 4px; font-size: 0; color: transparent; }
.esq-steps li::before { content: ''; position: absolute; inset: 0; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); transition: background 0.3s ease, box-shadow 0.3s ease; }
.esq-steps li.is-done::before { background: var(--violet); }
.esq-steps li.is-now::before { background: linear-gradient(90deg, var(--violet), var(--violet-300)); box-shadow: 0 0 12px rgba(139, 61, 255, 0.85); }
.esq__cta { justify-self: start; }

/* La planche (la page du visiteur) */
.planche { margin: 0; display: grid; gap: 12px; justify-items: center; }
.pl-sheet {
  --k1: 0; --k2: 0; --k3: 0; --k4: 0; --k5: 0; --k6: 0;
  position: relative; overflow: hidden; container-type: inline-size;
  width: min(100%, calc((100svh - var(--nav-h) - 7rem) * 1.6));
  aspect-ratio: 16 / 10;
  background: #ffffff;
  border-radius: 10px;
  outline: 1px solid rgba(255, 255, 255, 0.2);
  outline-offset: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 calc(14px + var(--k6) * 30px) calc(40px + var(--k6) * 60px) -14px rgba(60, 10, 140, 0.75);
  transform: translateY(calc(var(--k6) * -6px)) scale(calc(0.985 + var(--k1) * 0.015));
}
.pl-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(91, 31, 176, 0.2) 1px, transparent 1px),
    linear-gradient(0deg, rgba(91, 31, 176, 0.075) 1px, transparent 1px);
  background-size: calc((100% - 12cqw) / 12) 100%, 100% 2.2cqw;
  background-position: 6cqw 0, 0 0;
  background-repeat: repeat-x, repeat;
  clip-path: inset(0 0 calc((1 - var(--k1)) * 100%) 0);
  opacity: calc((1 - var(--k6)) * (1 - var(--k4) * 0.55));
}
.pl-ground { position: absolute; inset: 0; z-index: 0; background: var(--pl-bg); clip-path: inset(0 calc((1 - var(--k4)) * 100%) 0 0); }
.pl-page {
  position: absolute; inset: 0; z-index: 2;
  padding: 3.4cqw 6cqw 2.6cqw;
  font-family: var(--font-body);
  line-height: 1.3;
  color: color-mix(in oklab, var(--pl-ink) calc(var(--k4) * 100%), #24212B);
  --pl-soft-mix: color-mix(in oklab, var(--pl-soft) calc(var(--k4) * 100%), #5F5B67);
  --pl-acc-mix: color-mix(in oklab, var(--pl-accent) calc(var(--k4) * 100%), #24212B);
}
.pl-page p, .pl-page ul { margin: 0; padding: 0; list-style: none; }

/* blocs en mode plan : contour + étiquette, puis le contenu apparaît */
.pl-b { position: relative; }
.pl-b::before {
  content: ""; position: absolute; inset: -0.55cqw; pointer-events: none;
  border: 1px dashed rgba(91, 31, 176, 0.7); border-radius: 2px;
  opacity: calc(clamp(0, var(--k2) * 6 - var(--i, 0), 1) * (1 - var(--k3)));
}
.pl-b::after {
  content: attr(data-label); position: absolute; left: -0.55cqw; top: -0.55cqw; z-index: 1; pointer-events: none;
  font: 700 1.05cqw/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  color: #ffffff; background: #5B1FB0; padding: 0.35cqw 0.55cqw; border-radius: 2px 0 2px 0; white-space: nowrap;
  opacity: calc(clamp(0, var(--k2) * 6 - var(--i, 0), 1) * clamp(0, 1 - var(--k3) * 2.2, 1));
}
.pl-c { opacity: clamp(0, calc(var(--k3) * 4.2 - var(--i, 0) * 0.5), 1); }

.pl-nav { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.pl-logo .pl-c { display: inline-flex; align-items: center; gap: 1.1cqw; }
.pl-seal {
  display: inline-grid; place-items: center; flex: none;
  width: 3.4cqw; height: 3.4cqw; border-radius: 50%;
  font-family: var(--pl-display); font-style: italic; font-size: 1.45cqw; line-height: 1;
  border: 1px solid currentColor;
  scale: calc(0.9 + var(--k4) * 0.1);
}
.pl-logoname { font-size: 1.55cqw; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.pl-links .pl-c { display: flex; gap: 2.6cqw; font-size: 1.25cqw; font-weight: 500; white-space: nowrap; }
.pl-kicker { font-size: 1.12cqw; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pl-acc-mix); }
/* `text-wrap` est un raccourci qui réinitialise aussi le retour à la ligne : on le fixe ici explicitement */
.pl-page .pl-title { white-space: nowrap; text-wrap: nowrap; }
.pl-tagline { color: var(--pl-soft-mix); }
.pl-tagrow { display: contents; }
.pl-cta {
  display: inline-block; white-space: nowrap; font-weight: 700;
  border: 1px solid var(--pl-acc-mix);
  background: color-mix(in oklab, var(--pl-accent) calc(var(--k4) * 100%), transparent);
  color: color-mix(in oklab, var(--pl-accent-ink) calc(var(--k4) * 100%), #24212B);
}
.pl-plate {
  position: relative; height: 100%; display: grid; place-items: center; overflow: hidden;
  background: color-mix(in oklab, var(--pl-plate) calc(var(--k4) * 100%), #F1EFF4);
  border-radius: 2px;
}
.pl-seal--big { width: auto; height: auto; border: 0; font-size: 9cqw; scale: 1; opacity: calc(0.15 + var(--k4) * 0.85); }
.pl-photo {
  position: absolute; left: 1.4cqw; bottom: 1.2cqw; max-width: 70%;
  font-size: 1cqw; font-weight: 500; letter-spacing: 0.02em; opacity: var(--k5);
}
.pl-services .pl-c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqw; }
.pl-svc { display: grid; gap: 0.5cqw; font-size: 1.3cqw; font-weight: 600; }
.pl-svc small { font-size: 0.95cqw; font-weight: 500; color: var(--pl-soft-mix); opacity: var(--k5); }
.pl-num { font-family: var(--pl-display); font-style: italic; color: var(--pl-acc-mix); opacity: var(--k5); }
.pl-foot {
  display: flex; justify-content: space-between; gap: 2cqw; padding-top: 1.1cqw;
  border-top: 1px solid color-mix(in oklab, currentColor calc(var(--k5) * 22%), transparent);
  font-size: 0.95cqw; color: var(--pl-soft-mix); opacity: var(--k5);
}

/* --- direction : Classique (forêt, os, ambre) --- */
.dir-classique { --pl-bg: #EEF0EA; --pl-ink: #18261E; --pl-soft: #4A584E; --pl-accent: #93560B; --pl-accent-ink: #FFFFFF; --pl-plate: #DCE2D5; }
.dir-classique .pl-page { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; row-gap: 2.3cqw; text-align: center; padding-inline: 8cqw; }
.dir-classique .pl-nav { flex-direction: column; gap: 1.3cqw; }
.dir-classique .pl-logo .pl-c { flex-direction: column; gap: 0.8cqw; }
.dir-classique .pl-logoname { font-family: var(--pl-display); font-weight: 400; font-size: 1.7cqw; letter-spacing: 0.24em; text-transform: uppercase; }
.dir-classique .pl-links .pl-c { gap: 3.4cqw; font-size: 1.05cqw; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.6cqw 2.4cqw; border-block: 1px solid color-mix(in oklab, currentColor 22%, transparent); }
.dir-classique .pl-hero { display: grid; justify-items: center; gap: 1.3cqw; }
.dir-classique .pl-title { font-family: var(--pl-display); font-style: italic; font-size: 6.1cqw; line-height: 0.98; letter-spacing: -0.02em; }
.dir-classique .pl-tagline { font-size: 1.45cqw; line-height: 1.45; max-width: 44ch; }
.dir-classique .pl-cta { font-size: 1.05cqw; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.95cqw 2.4cqw; border-radius: 1px; }
.dir-classique .pl-visual { min-height: 8.5cqw; }
.dir-classique .pl-seal--big { font-size: 5.2cqw; }
.dir-classique .pl-svc { justify-items: center; font-family: var(--pl-display); font-weight: 400; font-size: 1.5cqw; }

/* --- direction : Contemporaine (blanc cassé, vermillon) --- */
.dir-contemporaine { --pl-bg: #F3F2EF; --pl-ink: #121216; --pl-soft: #55555C; --pl-accent: #C93C22; --pl-accent-ink: #FFFFFF; --pl-plate: #C93C22; }
.dir-contemporaine .pl-page {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "nav nav" "hero visual" "svc visual" "foot foot";
  column-gap: 4cqw; row-gap: 2.6cqw;
}
.dir-contemporaine .pl-nav { grid-area: nav; }
.dir-contemporaine .pl-hero { grid-area: hero; display: grid; align-content: center; gap: 1.6cqw; }
.dir-contemporaine .pl-visual { grid-area: visual; }
.dir-contemporaine .pl-services { grid-area: svc; }
.dir-contemporaine .pl-foot { grid-area: foot; }
.dir-contemporaine .pl-title { font-weight: 700; font-size: 6.4cqw; line-height: 0.94; letter-spacing: -0.045em; }
.dir-contemporaine .pl-tagline { font-size: 1.45cqw; line-height: 1.5; max-width: 36ch; }
.dir-contemporaine .pl-cta { font-size: 1.25cqw; padding: 1cqw 2.2cqw; border-radius: 999px; justify-self: start; }
.dir-contemporaine .pl-ctab { justify-self: start; }
.dir-contemporaine .pl-seal--big { color: #FFFFFF; font-size: 13cqw; }
.dir-contemporaine .pl-photo { color: #FFFFFF; }
.dir-contemporaine .pl-services .pl-c { gap: 2cqw; }
.dir-contemporaine .pl-svc { font-size: 1.15cqw; }

/* --- direction : Audacieuse (noir, chartreuse) --- */
.dir-audacieuse { --pl-bg: #111113; --pl-ink: #F1EFE8; --pl-soft: #A6A49C; --pl-accent: #D8F25A; --pl-accent-ink: #111113; --pl-plate: #1E1E22; }
.dir-audacieuse .pl-page { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; row-gap: 2cqw; }
.dir-audacieuse .pl-logoname { text-transform: uppercase; letter-spacing: 0.14em; font-size: 1.3cqw; }
.dir-audacieuse .pl-seal { border-radius: 2px; }
.dir-audacieuse .pl-hero { display: contents; }
.dir-audacieuse .pl-titleblock { padding-top: 2cqw; }
.dir-audacieuse .pl-title { font-family: var(--pl-display); font-weight: 400; font-size: 10.5cqw; line-height: 0.9; letter-spacing: -0.035em; }
.dir-audacieuse .pl-tagrow { display: flex; justify-content: space-between; align-items: end; gap: 4cqw; }
.dir-audacieuse .pl-tagline { font-size: 1.45cqw; line-height: 1.5; max-width: 40ch; }
.dir-audacieuse .pl-cta { font-size: 1.25cqw; padding: 1.1cqw 2.4cqw; border-radius: 0; text-transform: uppercase; letter-spacing: 0.08em; }
.dir-audacieuse .pl-seal--big { font-size: 8cqw; color: var(--pl-acc-mix); }
.dir-audacieuse .pl-photo { color: var(--pl-soft-mix); }
.dir-audacieuse .pl-svc { font-size: 1.2cqw; }

/* --- la planche en format téléphone (la colonne devient étroite) --- */
@container (max-width: 560px) {
  .pl-page, .dir-classique .pl-page, .dir-contemporaine .pl-page, .dir-audacieuse .pl-page {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto; row-gap: 3.6cqw;
    padding: 6cqw 7cqw 5cqw; text-align: left;
  }
  /* aucune zone nommée ne doit survivre en format téléphone (sinon colonnes fantômes) */
  .pl-sheet .pl-page > * { grid-area: auto; }
  .pl-nav, .dir-classique .pl-nav { flex-direction: row; gap: 4cqw; }
  .dir-classique .pl-logo .pl-c { flex-direction: row; gap: 2cqw; }
  .pl-hero, .dir-classique .pl-hero, .dir-contemporaine .pl-hero { display: grid; gap: 2.6cqw; justify-items: start; grid-area: auto; }
  .dir-audacieuse .pl-hero { display: grid; gap: 2.6cqw; }
  .pl-visual, .dir-contemporaine .pl-visual { grid-area: auto; }
  .pl-services, .dir-contemporaine .pl-services { grid-area: auto; }
  .pl-foot, .dir-contemporaine .pl-foot { grid-area: auto; }
  .pl-seal:not(.pl-seal--big) { width: 7cqw; height: 7cqw; font-size: 3cqw; }
  .pl-logoname, .dir-classique .pl-logoname, .dir-audacieuse .pl-logoname { font-size: 3.4cqw; letter-spacing: 0.06em; }
  .pl-links .pl-c, .dir-classique .pl-links .pl-c { font-size: 0; gap: 0; padding: 0; border: 0; }
  .pl-links .pl-c::after { content: "Menu"; font-size: 3cqw; font-weight: 600; letter-spacing: 0.04em; }
  .pl-kicker { font-size: 2.5cqw; }
  .pl-page .pl-title, .dir-classique .pl-title, .dir-contemporaine .pl-title, .dir-audacieuse .pl-title { font-size: 10.5cqw; white-space: normal; text-wrap: balance; }
  .pl-tagline, .dir-classique .pl-tagline, .dir-contemporaine .pl-tagline, .dir-audacieuse .pl-tagline { font-size: 3.1cqw; max-width: none; }
  .dir-audacieuse .pl-tagrow { flex-direction: column; align-items: start; gap: 2.6cqw; }
  .pl-cta, .dir-classique .pl-cta, .dir-contemporaine .pl-cta, .dir-audacieuse .pl-cta { font-size: 2.9cqw; padding: 2cqw 4.2cqw; }
  .pl-visual, .dir-classique .pl-visual { min-height: 13cqw; }
  .pl-plate { place-items: center end; padding-right: 5cqw; }
  .pl-seal--big, .dir-classique .pl-seal--big, .dir-contemporaine .pl-seal--big, .dir-audacieuse .pl-seal--big { font-size: 10cqw; line-height: 1; }
  .pl-photo { font-size: 2.3cqw; left: 3.4cqw; top: 50%; bottom: auto; translate: 0 -50%; max-width: 58%; }
  .pl-services .pl-c, .dir-contemporaine .pl-services .pl-c { grid-template-columns: 1fr; gap: 1.6cqw; }
  .pl-svc, .dir-classique .pl-svc, .dir-contemporaine .pl-svc, .dir-audacieuse .pl-svc { display: flex; gap: 2cqw; font-size: 3.1cqw; justify-items: start; }
  .pl-svc small { display: none; }
  .pl-foot { font-size: 2.2cqw; padding-top: 2.4cqw; }
  .pl-b::after { font-size: 2.3cqw; padding: 0.8cqw 1.2cqw; }
}

.planche__cap { max-width: min(100%, 46rem); text-align: center; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.planche__cap b { color: var(--text); font-weight: 700; }

/* --- Téléphone et tablette : formulaire, puis la planche --- */
@media (max-width: 960px) {
  .epreuve__stage { grid-template-columns: 1fr; align-content: start; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .esq { gap: 10px; padding: 14px 16px; }
  .esq__title, .esq-steps, .esq__cta { display: none; }
  .esq__form { grid-template-columns: 1fr 1fr; gap: 10px; }
  .esq__form .dirs { grid-column: 1 / -1; }
  .esq .field > label, .dirs legend { font-size: 11px; }
  .esq .input, .esq .select { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
  .esq .select { background-position: calc(100% - 22px) 18px, calc(100% - 16px) 18px; }
  .dirs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pl-sheet { aspect-ratio: 10 / 12; width: min(100%, calc((100svh - var(--nav-h) - 17rem) / 1.2)); }
  .planche { gap: 8px; }
  .planche__cap { font-size: 13px; }
  .planche__cap [data-step-note] { display: none; }
}
@media (max-width: 420px) { .esq__form { grid-template-columns: 1fr; } .esq__form .field:first-child { grid-column: 1 / -1; } }

/* --- Mouvement réduit : planche montrée finie, sans épinglage --- */
@media (prefers-reduced-motion: reduce) {
  .epreuve { height: auto; }
  .epreuve__stage { position: static; height: auto; padding-block: 24px 64px; }
  .pl-sheet { width: 100%; }
}