/* ==========================================================================
   Prokopé Studio · Direction artistique « Ascension »
   Une seule matinée, de la nuit (accueil) à la lumière dorée (contact).
   ========================================================================== */

/* ---------- Polices (hébergées sur le site, licence SIL OFL 1.1) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-roman.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
  /* Le ciel, de haut en bas */
  --night: #0E1A24;      /* nuit : accueil */
  --blue: #1E3550;       /* heure bleue */
  --rose: #8A6670;       /* rose poudré */
  --gold: #FFE1B8;       /* lumière dorée : contact */

  /* Accent et textes */
  --dawn: #FF6A3D;       /* aube : boutons, grands titres, mots forts */
  --sky: #E9EEF2;        /* ciel pâle : texte sur fond sombre */
  --sky-soft: #B9C3CC;   /* texte secondaire sur nuit et heure bleue */
  --slate: #5B6B78;      /* ardoise : décor et grands textes sur fond clair */
  --slate-ink: #556470;  /* ardoise lisible en petit sur la lumière dorée (4,8:1) */

  --ink: var(--sky);
  --focus: var(--sky);
  --line: rgba(233, 238, 242, .16);

  --f-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-text: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(1rem, 4.6vw, 4.5rem);
  --maxw: 84rem;
  --sec-pad: clamp(5rem, 11vw, 8.5rem);
  --ease-out: cubic-bezier(.16, .84, .3, 1);
  --radius: 1.25rem;

  /* Menu fixe : marge du haut + hauteur de la pastille = bas du menu */
  --hdr-top: max(.75rem, env(safe-area-inset-top));
  --hdr-h: 3.375rem;
  --hdr-bottom: calc(var(--hdr-top) + var(--hdr-h));

  /* Logo */
  --brand-mark-h: .8125rem;
  --brand-mark-w: calc(var(--brand-mark-h) * 28 / 24);
  --brand-gap: .55rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--night);
  color-scheme: dark;
}

/* Arrivée des ancres : le haut du contenu de chaque section (son libellé et
   son titre) s'arrête juste sous le menu, sur ordinateur comme sur téléphone.
   Les identifiants d'ancre sont posés sur le premier bloc de contenu de chaque
   section, pas sur la section elle-même (qui commence par une grande marge). */
main [id] { scroll-margin-top: calc(var(--hdr-bottom) + 1.5rem); }
#accueil { scroll-margin-top: 0; }
html.is-dawn { background-color: var(--gold); }

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

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

@media (min-width: 64rem) { body { font-size: 1.125rem; } }

/* ---------- Curseurs ----------
   Flèche partout, y compris sur les textes ; main uniquement sur ce qui est
   cliquable ; curseur d'écriture uniquement dans les champs de saisie. */
html,
body,
body * { cursor: default; }
a[href],
a[href] *,
button,
button *,
summary,
summary *,
label[for],
[role="button"],
[role="button"] * { cursor: pointer; }
input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]),
textarea,
[contenteditable="true"] { cursor: text; }

/* Un clic sur une question ou un bouton ne sélectionne pas son texte */
summary,
button,
.btn,
.action { -webkit-user-select: none; user-select: none; }

/* Grands titres décoratifs et éléments purement visuels : non sélectionnables.
   Le texte courant, le téléphone, le mail et l'adresse restent sélectionnables. */
.hero__title,
.h2,
.contact__title,
.nf__title,
.legal__title,
.why__ghost,
.mark,
.step__n,
.scene,
.frame,
.skeleton,
.horizon,
.stars,
.hero__time,
svg { -webkit-user-select: none; user-select: none; }
.action__detail,
a[href^="tel:"]:not(.action, .btn),
a[href^="mailto:"]:not(.action, .btn) { -webkit-user-select: text; user-select: text; }

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

h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }

a { color: inherit; }

::selection { background: var(--dawn); color: var(--night); }

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

.is-light {
  --ink: var(--night);
  --focus: var(--night);
  --line: rgba(14, 26, 36, .2);
  color: var(--ink);
}

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

.skip {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: -5rem;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  background: var(--sky);
  color: var(--night);
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Le ciel : un seul dégradé, toute la hauteur de la page ---------- */
/* Version sans JavaScript : le script remplace ce dégradé par un dégradé
   dense, ancré aux sections, calculé dans l'espace OKLab. */
.sky {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    #0E1A24 0%, #0E1A24 6%, #1E3550 30%, #8A6670 63%, #FFE1B8 90%, #FFE1B8 100%);
}

/* Le soleil qui accompagne le défilement (calque fixe) */
.sunrise {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
/* Une lueur d'horizon, large et basse, plutôt qu'un projecteur */
.sunrise__glow {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 170vw;
  height: 80vh;
  margin: -40vh 0 0 -85vw;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 106, 61, .5),
    rgba(255, 106, 61, .24) 38%,
    rgba(255, 128, 72, .08) 68%,
    rgba(255, 106, 61, 0));
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Grain très léger : adoucit les paliers du dégradé, donne une matière */
.grain {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Étoiles (générées par le script) */
.stars {
  position: absolute;
  inset: 0 0 auto 0;
  height: 130svh;
  width: 100%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
}
.stars circle { fill: var(--sky); }
@media (prefers-reduced-motion: no-preference) {
  .stars .tw1 { animation: twinkle 5s ease-in-out infinite; }
  .stars .tw2 { animation: twinkle 7s ease-in-out 1.6s infinite; }
}
@keyframes twinkle { 50% { opacity: .25; } }

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3.375rem;
  padding: .95rem 1.6rem;
  border: 1.5px solid var(--dawn);
  border-radius: 999px;
  background: var(--dawn);
  color: var(--night);
  font: 500 1rem/1.15 var(--f-text);
  letter-spacing: .005em;
  text-decoration: none;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(255, 106, 61, .85);
}
.btn:active { transform: translateY(0); }
.btn .ico { transition: transform .35s var(--ease-out); }
.btn:hover .ico { transform: translateX(3px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(233, 238, 242, .5);
}
.btn--ghost:hover {
  background: rgba(233, 238, 242, .08);
  box-shadow: none;
}
.btn--sm {
  min-height: 2.5rem;
  padding: .55rem 1.1rem;
  font-size: .9375rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--dawn);
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
  transition: text-underline-offset .3s var(--ease-out);
}
.link-arrow:hover { text-underline-offset: .55em; }

/* ---------- En-tête : une pastille de nuit qui reste ---------- */
.hdr {
  position: fixed;
  z-index: 50;
  top: var(--hdr-top);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-inline: .75rem;
  pointer-events: none;
}
.hdr__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  max-width: 78rem;
  height: var(--hdr-h);
  padding: 0 .4rem 0 1rem;
  border: 1px solid rgba(233, 238, 242, .12);
  border-radius: 999px;
  background: rgba(14, 26, 36, .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7);
  color: var(--sky);
  --ink: var(--sky);
  --focus: var(--sky);
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-gap);
  color: inherit;
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 450;
  letter-spacing: -.015em;
  line-height: 1;
  white-space: nowrap;
}
/* Symbole : trois marches et le P (viewBox 28 × 24, dessin de 22 unités de haut).
   0,8125 rem de haut → dessin de 11,9 px, la même hauteur visible que l'ancien demi-soleil. */
.brand__mark { flex: none; width: var(--brand-mark-w); height: var(--brand-mark-h); }
.brand__studio {
  display: none;
  font-style: italic;
  font-weight: 300;
  margin-left: .2em;
}
@media (min-width: 22.5rem) { .brand__studio { display: inline; } }

.hdr__nav { display: none; }
.hdr__cta { display: none; }

.hdr__menu {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  height: 2.6rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: rgba(233, 238, 242, .1);
  color: inherit;
  font: 500 .9375rem/1 var(--f-text);
}
.hdr__menu-bars {
  position: relative;
  width: 1.05rem;
  height: .6rem;
}
.hdr__menu-bars::before,
.hdr__menu-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s var(--ease-out), top .35s var(--ease-out);
}
.hdr__menu-bars::before { top: 0; }
.hdr__menu-bars::after { top: calc(100% - 1.5px); }
.hdr__menu[aria-expanded="true"] .hdr__menu-bars::before { top: calc(50% - .75px); transform: rotate(45deg); }
.hdr__menu[aria-expanded="true"] .hdr__menu-bars::after { top: calc(50% - .75px); transform: rotate(-45deg); }

.hdr__progress {
  position: absolute;
  left: 1.6rem;
  right: 1.6rem;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 106, 61, .15), var(--dawn));
  transform: scaleX(0);
  transform-origin: left center;
}

@media (min-width: 64rem) {
  .hdr__bar { padding: 0 .45rem 0 1.25rem; gap: 1rem; }
  .hdr__nav {
    display: flex;
    gap: .25rem;
    margin-left: auto;
  }
  .hdr__nav a {
    padding: .55rem .8rem;
    border-radius: 999px;
    font-size: .9375rem;
    text-decoration: none;
    transition: background-color .25s;
  }
  .hdr__nav a:hover { background: rgba(233, 238, 242, .09); }
  .hdr__cta { display: inline-flex; }
  .hdr__menu { display: none; }
}

/* En-tête simplifié (mentions légales, 404) */
.hdr--simple .hdr__back { margin-left: auto; }

/* ---------- Menu mobile ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2rem;
  padding: 6.5rem var(--gutter) max(1.75rem, env(safe-area-inset-bottom));
  background: rgba(14, 26, 36, .97);
  color: var(--sky);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity .35s var(--ease-out);
}
.menu[hidden] { display: none; }
@starting-style { .menu { opacity: 0; } }
.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .3rem 0;
  font: 300 clamp(2rem, 9vw, 3rem)/1.12 var(--f-display);
  letter-spacing: -.02em;
  text-decoration: none;
}
.menu__list a span {
  font: 500 .75rem/1 var(--f-mono);
  letter-spacing: .1em;
  color: var(--sky-soft);
  min-width: 1.6rem;
}
.menu__foot {
  display: grid;
  gap: .75rem;
}
html.menu-open { overflow: hidden; }

/* ---------- Repères horaires de section ---------- */
.mark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .85rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  font: 500 .75rem/1.5 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mark::before {
  content: "";
  width: 2.25rem;
  height: 1.5px;
  background: var(--dawn);
}

/* ---------- Titres ---------- */
.h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  max-width: 17ch;
  text-wrap: balance;
}
.h2 em,
.hero__title em,
.contact__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--dawn);
}
/* Sur fond clair, l'orange devient matière : un trait de soleil sous le mot */
.is-light .h2 em,
.is-light .contact__title em,
.is-light .me__statement em,
.why__text em {
  color: inherit;
  background-image: linear-gradient(rgba(255, 106, 61, .85), rgba(255, 106, 61, .85));
  background-repeat: no-repeat;
  background-size: 100% .09em;
  background-position: 0 92%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .02em;
}

.sec {
  position: relative;
  padding-block: var(--sec-pad);
}

p { text-wrap: pretty; }

/* Sur mobile, aucune grille ne peut dépasser la largeur de l'écran
   (un texte sur une seule ligne, comme une adresse web, ne l'élargit pas). */
.hero__inner,
.hero__foot,
.constat__head,
.symptoms,
.offre__grid,
.works__list,
.work,
.me__grid,
.faq__grid,
.foot__grid { grid-template-columns: minmax(0, 1fr); }
.work__media,
.work__body,
.ticket,
.formulas { min-width: 0; }

/* ---------- Apparitions : on monte de quelques pixels ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
    transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
  }
  .js .rv.in {
    opacity: 1;
    transform: none;
  }
  .js .rv.d1 { transition-delay: .1s; }
  .js .rv.d2 { transition-delay: .2s; }
  .js .rv.d3 { transition-delay: .3s; }
}

/* ==========================================================================
   01 · Accueil
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  padding: 6.75rem 0 2rem;
}
.hero__inner {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 2.25rem;
}
.hero__label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  align-self: start;
  font: 500 .75rem/1.4 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky);
}
.hero__label::before {
  content: "";
  width: 2.25rem;
  height: 1.5px;
  background: var(--dawn);
}
.hero__title {
  align-self: center;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.55rem, 11.2vw, 8.2rem);
  line-height: .94;
  letter-spacing: -.035em;
}
.hero__title .l { display: block; }
.hero__title .l2 { padding-left: .32em; }
.hero__title .l3 {
  margin-top: .08em;
  font-size: 1.36em;
  letter-spacing: -.03em;
  line-height: .95;
}
.hero__foot {
  display: grid;
  gap: 1.75rem;
}
.hero__lead {
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.3rem);
  line-height: 1.55;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.hero__cta .btn { flex: 1 1 15rem; }
/* Simple invitation à descendre, sans texte */
.hero__time {
  display: flex;
  justify-content: center;
}
.hero__cue {
  position: relative;
  width: 1px;
  height: 2.75rem;
  background: rgba(233, 238, 242, .25);
  overflow: hidden;
}
.hero__cue::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 40%;
  background: var(--dawn);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__cue::after { animation: cue 2.4s var(--ease-out) infinite; }
  .js .hero__title .l { animation: rise 1.15s var(--ease-out) both; }
  .js .hero__title .l2 { animation-delay: .1s; }
  .js .hero__title .l3 { animation-delay: .22s; }
  .js .hero__label,
  .js .hero__foot,
  .js .hero__time { animation: rise-soft 1.1s .45s var(--ease-out) both; }
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(260%); }
}
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, .3em, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes rise-soft {
  from { opacity: 0; transform: translate3d(0, 1rem, 0); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 48rem) {
  .hero { padding-top: 8rem; }
  .hero__title .l2 { padding-left: .6em; }
  .hero__title .l3 { padding-left: .82em; }
  .hero__cta .btn { flex: 0 0 auto; }
}
@media (min-width: 64rem) {
  .hero__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
  }
}

/* ==========================================================================
   02 · Le constat
   ========================================================================== */
.constat__head {
  display: grid;
  gap: 1.75rem;
}
.constat__text {
  max-width: 36ch;
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem);
  color: var(--sky-soft);
}
@media (min-width: 64rem) {
  .constat__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    gap: 4rem;
  }
}

.symptoms {
  list-style: none;
  margin: clamp(4rem, 9vw, 7.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 4.25rem;
}
.symptom__label {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  margin-top: 1.5rem;
  font: 400 clamp(1.6rem, 2.3vw, 2rem)/1.1 var(--f-display);
  letter-spacing: -.01em;
}
.symptom__label .n {
  font: 500 .75rem/1 var(--f-mono);
  letter-spacing: .12em;
  color: var(--sky-soft);
}
.symptom__note {
  margin-top: .5rem;
  max-width: 30ch;
  color: var(--sky-soft);
  font-size: 1rem;
}

/* Scène 1 : la page d'erreur */
.browser {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(233, 238, 242, .07), rgba(233, 238, 242, .02));
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem .85rem;
  border-bottom: 1px solid rgba(233, 238, 242, .1);
}
.browser__bar i {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: rgba(233, 238, 242, .22);
}
.browser__url {
  flex: 1;
  min-width: 0;
  margin-left: .55rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(14, 26, 36, .55);
  font: 400 .75rem/1.2 var(--f-mono);
  color: var(--sky-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser__404 {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .4rem;
  aspect-ratio: 16 / 10;
  text-align: center;
}
.e404 {
  position: relative;
  font: italic 300 clamp(5rem, 13vw, 7.5rem)/1 var(--f-display);
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.25px rgba(233, 238, 242, .7);
}
.e404::after {
  content: attr(data-t);
  position: absolute;
  inset: 0;
  color: var(--dawn);
  -webkit-text-stroke: 0;
  clip-path: polygon(0 50%, 100% 41%, 100% 55%, 0 63%);
  transform: translateX(.09em);
}
.e404__msg {
  font: 400 .8rem/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-soft);
}

/* Scène 2 : le site pas fait pour le téléphone */
.symptom--phone .scene { display: flex; }
.phone {
  width: 10.5rem;
  aspect-ratio: 9 / 18.5;
  padding: .45rem;
  border: 1px solid rgba(233, 238, 242, .3);
  border-radius: 1.85rem;
  background: rgba(14, 26, 36, .6);
  box-shadow: 0 40px 80px -45px rgba(0, 0, 0, .9);
}
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 1.45rem;
  overflow: hidden;
  background: #EEE8E0;
}
.phone__page {
  width: 245%;
  padding: 1.6rem .9rem .9rem;
  color: #2B2F33;
}
.phone__nav {
  display: flex;
  gap: .5rem;
  margin-bottom: .9rem;
}
.phone__nav i {
  height: .28rem;
  width: 2.2rem;
  border-radius: 2px;
  background: #9AA0A6;
}
.phone__nav i:first-child { width: 4rem; background: #2B2F33; }
.phone__title {
  display: block;
  font: 700 1.45rem/1.05 var(--f-text);
  letter-spacing: -.01em;
  white-space: nowrap;
  text-transform: uppercase;
}
.phone__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .7rem;
  margin-top: .9rem;
}
.phone__cols i {
  display: block;
  height: .22rem;
  margin-bottom: .32rem;
  border-radius: 2px;
  background: #B7B2AB;
}
.phone__cols i:nth-child(3n) { width: 72%; }
.phone__img {
  height: 3.2rem;
  margin: .9rem 0 .7rem;
  border-radius: .3rem;
  background: linear-gradient(135deg, #C9B8A6, #A7978A);
}
.phone__scroll {
  position: absolute;
  left: 12%;
  right: 46%;
  bottom: .55rem;
  height: .22rem;
  border-radius: 999px;
  background: rgba(43, 47, 51, .45);
}

/* Scène 3 : l'affichette périmée */
.sign {
  position: relative;
  max-width: 19.5rem;
  padding: 1.6rem 1.5rem 1.3rem;
  border-radius: .4rem;
  background: #EFE9E1;
  color: var(--night);
  transform: rotate(-2.4deg);
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .85);
}
.sign::before {
  content: "";
  position: absolute;
  top: -.75rem;
  left: 50%;
  width: 5.5rem;
  height: 1.5rem;
  margin-left: -2.75rem;
  background: rgba(233, 238, 242, .55);
  transform: rotate(3deg);
}
.sign__title {
  margin-bottom: .7rem;
  font: italic 400 1.7rem/1 var(--f-display);
}
.sign__rows {
  font: 400 .8rem/2 var(--f-mono);
}
.sign__rows > span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px dashed rgba(14, 26, 36, .18);
}
.sign__rows b { font-weight: 500; }
.sign__rows i { font-style: normal; }
.sign__rows s {
  text-decoration-color: var(--dawn);
  text-decoration-thickness: 2px;
}
.sign__stamp {
  margin-top: 1rem;
  font: 500 .68rem/1.3 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6A5D53;
}

@media (max-width: 47.99rem) {
  .symptom--phone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
    column-gap: 1.25rem;
  }
  .symptom--phone .scene { grid-row: 1 / 4; }
  .symptom--phone .symptom__label { grid-column: 2; grid-row: 2; flex-direction: column; gap: .5rem; }
  .symptom--phone .symptom__note { grid-column: 2; grid-row: 3; }
  .symptom--phone .phone { width: 8.5rem; }
  .symptom--hours { padding-left: 8%; }
}
@media (min-width: 48rem) {
  .symptoms {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: start;
  }
  .symptom--404 { grid-column: 1 / span 6; }
  .symptom--phone { grid-column: 7 / span 3; margin-top: 7rem; }
  .symptom--hours { grid-column: 10 / span 3; margin-top: 2rem; }
  .symptom--hours .sign { transform: rotate(3deg); }
}
@media (min-width: 64rem) {
  .symptom--404 { grid-column: 1 / span 5; }
  .symptom--phone { grid-column: 6 / span 3; margin-top: 9rem; padding-left: 2rem; }
  .symptom--hours { grid-column: 10 / span 3; margin-top: 3.5rem; }
}

/* ==========================================================================
   03 · L'offre : un devis, pas une grille tarifaire
   ========================================================================== */
.offre__grid {
  display: grid;
  gap: 3rem;
}
/* Deux devis : l'un sous l'autre sur téléphone, côte à côte sur ordinateur */
.formulas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.ticket {
  --zig: .6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4.5vw, 2.75rem) clamp(1.25rem, 4.5vw, 2.75rem) calc(clamp(1.5rem, 4.5vw, 2.75rem) + var(--zig));
  border-radius: 1.4rem 1.4rem 0 0;
  background: linear-gradient(180deg, rgba(233, 238, 242, .11), rgba(233, 238, 242, .05));
  box-shadow: inset 0 1px 0 rgba(233, 238, 242, .14);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zig)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zig)) 100%;
}
/* Signature, légèrement en avant : un trait d'aube en tête, un papier un peu plus lumineux.
   Même structure, même typographie que l'Essentiel : aucune formule « au rabais ». */
.ticket--signature {
  background: linear-gradient(180deg, rgba(233, 238, 242, .16), rgba(233, 238, 242, .07));
  box-shadow: inset 0 2px 0 var(--dawn), inset 0 0 0 1px rgba(255, 106, 61, .3);
}
.ticket__name {
  margin-bottom: 1.1rem;
  font: 400 clamp(1.6rem, 2.6vw, 2.1rem)/1.1 var(--f-display);
  letter-spacing: -.012em;
}
.ticket__name em { font-style: italic; }
.ticket--signature .ticket__name em { color: var(--dawn); }
.formula__example {
  justify-self: start;
  margin-top: -1rem;
  font: 500 .8125rem/1.4 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sky-soft);
  text-decoration: underline;
  text-decoration-color: rgba(255, 106, 61, .75);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .4em;
  transition: color .25s;
}
.formula__example:hover { color: var(--sky); }
.ticket__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px dashed rgba(233, 238, 242, .3);
  font: 500 .75rem/1.4 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .6rem;
  row-gap: .1rem;
}
.price__from {
  font: italic 300 clamp(1.6rem, 3.2vw, 2.4rem)/1 var(--f-display);
}
.price__amount {
  font: 300 clamp(4.5rem, 15vw, 7.25rem)/.9 var(--f-display);
  letter-spacing: -.045em;
  color: var(--dawn);
  white-space: nowrap;
}
.badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: .65rem;
  margin-top: 1.4rem;
  padding: .7rem 1.1rem;
  border: 1.5px solid var(--dawn);
  border-radius: 999px;
  font: 500 .875rem/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.badge::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--dawn);
}
.ticket__sub {
  margin: 2.25rem 0 .5rem;
  font: 500 .75rem/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky-soft);
}
/* La liste occupe toute la hauteur libre du devis : quand une carte a moins de
   lignes que sa voisine, ses lignes s'espacent régulièrement au lieu de laisser
   un vide au-dessus du total. Chaque ligne reste centrée dans sa hauteur. */
.lines {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}
.lines li {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(1rem, 1fr) auto;
  align-items: baseline;
  align-content: center;
  column-gap: .65rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(233, 238, 242, .08);
}
.ticket__total {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(233, 238, 242, .08);
}
.lines .dots,
.ticket__total .dots {
  flex: 1 1 1rem;
  min-width: 1rem;
  align-self: baseline;
  border-bottom: 1.5px dotted rgba(233, 238, 242, .35);
  transform: translateY(-.28em);
}
.lines .v {
  font: 500 .75rem/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky-soft);
  white-space: nowrap;
}
.ticket__total {
  margin-top: .5rem;         /* la liste extensible garde les deux totaux alignés en bas */
  padding-top: 1.2rem;
  border-bottom: 0;
  font-weight: 500;
}
.ticket__total .v {
  font: 400 clamp(1.9rem, 4vw, 2.5rem)/1 var(--f-display);
  color: var(--dawn);
  white-space: nowrap;
}

/* Sous les deux devis, en marge : « Après la mise en ligne » */
.offre__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
}
.after {
  flex: 1 1 28rem;
  max-width: 40rem;
  min-width: 0;
  padding-left: 1.4rem;
  border-left: 1.5px solid rgba(233, 238, 242, .2);
}
.after__title {
  margin-bottom: .4rem;
  font: 500 .75rem/1.4 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.after__list {
  list-style: none;
  padding: 0;
}
.after__list li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(1rem, 1fr) auto;
  align-items: baseline;
  column-gap: .65rem;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(233, 238, 242, .08);
}
.after__list li:last-child { border-bottom: 0; }
.after__list .dots {
  min-width: 1rem;
  border-bottom: 1.5px dotted rgba(233, 238, 242, .3);
  transform: translateY(-.28em);
}
.after__price {
  font-weight: 500;
  white-space: nowrap;
}
.after__note {
  grid-column: 1 / -1;
  margin-top: .3rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--sky-soft);
}

@media (min-width: 64rem) {
  .offre__grid { row-gap: 4rem; }
  .formulas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 2rem;
    align-items: stretch;    /* deux devis de même hauteur */
  }
  /* Chaque lien d'exemple sous son devis */
  .ticket--essentiel { grid-column: 1; grid-row: 1; }
  .ticket--signature { grid-column: 2; grid-row: 1; }
  .formula__example--essentiel { grid-column: 1; grid-row: 2; }
  .formula__example--signature { grid-column: 2; grid-row: 2; }
}

/* ==========================================================================
   04 · La méthode : une montée en quatre relais
   ========================================================================== */
.climb {
  --k: 0;
  position: relative;
  margin-top: clamp(3.5rem, 8vw, 6rem);
}
.climb::before,
.climb::after {
  content: "";
  position: absolute;
  left: .6rem;
  top: .6rem;
  bottom: 1rem;
  width: 1.5px;
  background: rgba(233, 238, 242, .2);
}
.climb::after {
  background: var(--dawn);
  transform: scaleY(var(--k));
  transform-origin: top;
}
.climb__route { display: none; }
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 3.25rem;
}
.step {
  position: relative;
  padding-left: 3rem;
}
.step__dot {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--sky);
  background: var(--blue);
}
.step:nth-child(2) .step__dot { box-shadow: 0 0 0 .3rem rgba(233, 238, 242, .06); }
.step:nth-child(3) .step__dot { background: var(--sky); box-shadow: 0 0 0 .35rem rgba(233, 238, 242, .08); }
.step:nth-child(4) .step__dot {
  border-color: var(--dawn);
  background: var(--dawn);
  box-shadow: 0 0 0 .4rem rgba(255, 106, 61, .18), 0 0 2.5rem .6rem rgba(255, 106, 61, .45);
}
.step__when {
  margin-bottom: .85rem;
  font: 500 .75rem/1.25 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky-soft);
}
.step__n {
  display: block;
  margin-bottom: .3rem;
  font: italic 300 clamp(3.4rem, 6vw, 5.25rem)/.9 var(--f-display);
  color: var(--dawn);
}
.step__title {
  font: 400 clamp(1.55rem, 2.35vw, 2.05rem)/1.12 var(--f-display);
  letter-spacing: -.012em;
  text-wrap: balance;
}
.step__text {
  margin-top: .8rem;
  max-width: 30ch;
  color: var(--sky-soft);
}

@media (min-width: 64rem) {
  .climb { --rise: clamp(5.5rem, 8.5vw, 8.5rem); }
  .climb::before,
  .climb::after { display: none; }
  .climb__route {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .climb__trace {
    fill: none;
    stroke: rgba(233, 238, 242, .28);
    stroke-width: 1.5;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
  }
  .climb__line {
    fill: none;
    stroke: var(--dawn);
    stroke-width: 2;
    stroke-linecap: round;
  }
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2.5rem;
    align-items: start;
  }
  .step { padding: 2.75rem 0 0; }
  .step:nth-child(1) { margin-top: calc(var(--rise) * 3); }
  .step:nth-child(2) { margin-top: calc(var(--rise) * 2); }
  .step:nth-child(3) { margin-top: var(--rise); }
}

/* ==========================================================================
   05 · Réalisations
   ========================================================================== */
.works__list {
  list-style: none;
  margin: clamp(3.5rem, 8vw, 6rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(5rem, 11vw, 9rem);
}
.work {
  display: grid;
  gap: 2.25rem;
}
.work__media {
  position: relative;
  padding-right: 11%;
  padding-bottom: 9%;
}
.frame {
  border: 1px solid rgba(233, 238, 242, .18);
  background: #0B151D;
  overflow: hidden;
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .85);
}
.frame--browser { border-radius: 14px; }
.frame--browser img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}
.frame--phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  min-width: 6.25rem;
  padding: .3rem;
  border-radius: 1.3rem;
  border-color: rgba(233, 238, 242, .3);
  background: var(--night);
}
.frame--phone img {
  width: 100%;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: 1.05rem;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.25rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: var(--dawn);
  color: var(--night);
  font: 500 .75rem/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tag::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor;
}
.tag--soon {
  background: transparent;
  color: var(--sky);
  border: 1.5px solid rgba(233, 238, 242, .6);
}
.work__name {
  font: 300 clamp(2.9rem, 6.4vw, 4.9rem)/.95 var(--f-display);
  letter-spacing: -.035em;
}
.work__kind {
  margin-top: .7rem;
  font: italic 400 clamp(1.25rem, 1.8vw, 1.45rem)/1.3 var(--f-display);
}
.work__text {
  margin: 1.25rem 0 1.75rem;
  max-width: 36ch;
}

/* Emplacement « bientôt en ligne » */
.work--soon .frame--browser {
  border-style: dashed;
  border-color: rgba(233, 238, 242, .35);
  background: rgba(233, 238, 242, .03);
  box-shadow: none;
}
.work--soon .work__media { padding: 0; }
.skeleton {
  display: grid;
  align-content: center;
  gap: .85rem;
  aspect-ratio: 16 / 10;
  padding: 0 11%;
}
.skeleton i {
  display: block;
  height: .7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(233, 238, 242, .08), rgba(233, 238, 242, .2), rgba(233, 238, 242, .08));
  background-size: 220% 100%;
}
.skeleton i:nth-child(1) { width: 34%; height: .55rem; }
.skeleton i:nth-child(2) { width: 72%; height: 2.4rem; }
.skeleton i:nth-child(3) { width: 58%; }
.skeleton i:nth-child(4) { width: 44%; }
.skeleton i:nth-child(5) { width: 8.5rem; height: 2.3rem; margin-top: .6rem; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton i { animation: shimmer 3.2s linear infinite; }
}
@keyframes shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (min-width: 64rem) {
  .work {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: center;
  }
  .work__media { grid-column: 1 / span 8; }
  .work__body { grid-column: 9 / span 4; }
  /* Une réalisation sur deux s'inverse : la page reste vivante quand on en ajoute */
  .work:nth-child(even) .work__media { grid-column: 6 / span 7; grid-row: 1; }
  .work:nth-child(even) .work__body { grid-column: 1 / span 4; grid-row: 1; }
}

/* ==========================================================================
   06 · Pourquoi Prokopé : le point de bascule
   ========================================================================== */
.why {
  overflow: hidden;
  padding-block: clamp(7rem, 16vw, 13rem) clamp(6rem, 12vw, 10rem);
  text-align: center;
}
@supports (overflow: clip) { .why { overflow: clip; } }
.why__ghost {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: -1;
  font: italic 300 clamp(8rem, 33vw, 27rem)/1 var(--f-display);
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(233, 238, 242, .2);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.why__inner {
  position: relative;
  max-width: 60rem;
}
.why .mark { justify-content: center; }
.why .mark::after {
  content: "";
  width: 2.25rem;
  height: 1.5px;
  background: var(--dawn);
}
.why__word {
  margin-bottom: 2rem;
  font: italic 300 1.5rem/1.2 var(--f-display);
}
.why__text {
  margin-inline: auto;
  max-width: 23ch;
  font: 300 clamp(1.85rem, 4.6vw, 3.5rem)/1.16 var(--f-display);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.why__text em { font-style: italic; font-weight: 400; }
.why__more {
  margin: 2.5rem auto 0;
  max-width: 30ch;
  font-size: 1.5rem;
  line-height: 1.4;
  text-wrap: balance;
}

/* ==========================================================================
   07 · Qui suis-je
   ========================================================================== */
.me__grid {
  display: grid;
  gap: 2.25rem;
}
.me__grid .mark { margin-bottom: 0; }
.me__photo { width: min(78%, 22rem); }
.arch {
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 1.25rem 1.25rem;
  overflow: hidden;
  background: linear-gradient(180deg, #F3CBAE, #D9A99A);
  box-shadow: 0 40px 80px -45px rgba(14, 26, 36, .55);
}
.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Photo 3:4 dans une arche 4:5 : la largeur est entière, seule la hauteur est rognée.
     Calée en bas : le visage remonte dans le tiers supérieur, le cadre descend jusqu'à mi-cuisse. */
  object-position: 50% 100%;
}
.me__photo figcaption {
  margin-top: 1.1rem;
  font: 500 .75rem/1.5 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.me__intro {
  max-width: 36ch;
  font-size: clamp(1.125rem, 1.6vw, 1.35rem);
}
.me__statement {
  margin-top: 2.25rem;
  max-width: 17ch;
  font: 300 clamp(2.1rem, 4.6vw, 3.7rem)/1.07 var(--f-display);
  letter-spacing: -.022em;
  text-wrap: balance;
}
.me__statement em { font-style: italic; font-weight: 400; }
.call {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 2.25rem;
  min-height: 3.25rem;
  padding: .75rem 1.25rem;
  border: 1.5px solid var(--night);
  border-radius: 999px;
  font: 500 .9375rem/1 var(--f-mono);
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
.call:hover { background: var(--night); color: var(--gold); }

@media (min-width: 64rem) {
  .me__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 2rem;
    align-items: start;
  }
  .me__grid .mark { grid-column: 1 / span 6; grid-row: 1; }
  .me__body { grid-column: 1 / span 7; grid-row: 2; }
  .me__photo { grid-column: 9 / span 4; grid-row: 1 / span 2; width: 100%; align-self: center; }
}

/* ==========================================================================
   08 · Questions fréquentes
   ========================================================================== */
.faq__grid {
  display: grid;
  gap: 2.5rem;
}
.faq__aside {
  margin-top: 1.5rem;
  max-width: 28ch;
}
.faq__aside a {
  font-weight: 500;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .25em;
}
.qa { border-top: 1px solid rgba(14, 26, 36, .25); }
.qa:last-child { border-bottom: 1px solid rgba(14, 26, 36, .25); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  list-style: none;
  font: 400 clamp(1.3rem, 2.1vw, 1.75rem)/1.2 var(--f-display);
  letter-spacing: -.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::marker { content: ""; }
.qa__icon {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: transform .45s var(--ease-out), background-color .3s, border-color .3s;
}
.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .85rem;
  height: 1.5px;
  margin: -.75px 0 0 -.425rem;
  background: currentColor;
}
.qa__icon::after { transform: rotate(90deg); }
.qa summary:hover .qa__icon { background: rgba(255, 106, 61, .25); }
.qa[open] .qa__icon {
  transform: rotate(45deg);
  background: var(--dawn);
  border-color: var(--dawn);
}
.qa__a { padding: 0 3.75rem 1.6rem 0; }
.qa__a p { max-width: 58ch; }

@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .qa::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete;
  }
  .qa[open]::details-content { block-size: auto; }
}

@media (min-width: 64rem) {
  .faq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 5rem;
    align-items: start;
  }
  .faq__side { position: sticky; top: calc(var(--hdr-bottom) + 1.5rem); }
}

/* ==========================================================================
   09 · Contact : le soleil se lève
   ========================================================================== */
.contact {
  overflow: hidden;
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}
@supports (overflow: clip) { .contact { overflow: clip; } }
.contact__inner { position: relative; }
.contact__body { position: relative; }
/* Bandeau d'horizon : remonte de 40 % derrière la fin du titre,
   les crêtes restent sous le titre et au-dessus du texte. */
.horizon {
  --h: clamp(12rem, 24vw, 21rem);
  position: relative;
  z-index: -1;
  height: var(--h);
  margin-top: calc(var(--h) * -0.4);
  pointer-events: none;
}
.horizon svg { width: 100%; height: 100%; overflow: visible; }
.contact__title {
  position: relative;
  z-index: 1;
  max-width: 10ch;
  font: 300 clamp(3.1rem, 10.5vw, 8.75rem)/.95 var(--f-display);
  letter-spacing: -.035em;
}
.contact__title em { display: inline; }
.contact__lead {
  margin-top: .75rem;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}
.actions {
  list-style: none;
  margin: clamp(3rem, 7vw, 4.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.action {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.75rem;
  padding: 1rem 1.25rem 1rem 1rem;
  border: 1.5px solid var(--night);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .22);
  color: var(--night);
  text-decoration: none;
  transition: transform .35s var(--ease-out), background-color .25s, box-shadow .35s var(--ease-out);
}
.action:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .42);
}
.action--primary {
  border-color: var(--night);
  background: var(--dawn);
  box-shadow: 0 22px 40px -24px rgba(255, 106, 61, .95);
}
.action--primary:hover { background: #FF7A52; }
.action__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--night);
  color: var(--gold);
}
.action__icon .ico { width: 1.3rem; height: 1.3rem; }
.action__txt { min-width: 0; }
.action__label {
  display: block;
  font: 500 1.125rem/1.2 var(--f-text);
}
.action__detail {
  display: block;
  margin-top: .2rem;
  font: 400 .8125rem/1.3 var(--f-mono);
  overflow-wrap: anywhere;
}
@media (min-width: 48rem) { .action__detail { font-size: .875rem; } }
.action__go {
  margin-left: auto;
  transition: transform .35s var(--ease-out);
}
.action:hover .action__go { transform: translateX(3px); }
.contact__zone {
  margin-top: 2rem;
  font: 500 .75rem/1.6 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  .actions {
    grid-template-columns: 1fr 1fr;
    max-width: 54rem;
  }
}

/* ---------- Pied de page ---------- */
.foot {
  position: relative;
  padding: 3rem 0 max(2.25rem, env(safe-area-inset-bottom));
  color: var(--night);
}
.foot__grid {
  display: grid;
  gap: 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(14, 26, 36, .2);
}
.foot .brand { font-size: 1.5rem; }
.foot .brand__studio { display: inline; }
.foot__slogan {
  margin-top: .55rem;
  padding-left: calc(var(--brand-mark-w) + var(--brand-gap)); /* aligné sous « Prokopé Studio » */
  font: italic 400 .9375rem/1.3 var(--f-display);
  color: var(--slate-ink);
}
.foot__meta { max-width: 36ch; }
.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}
.foot__nav a {
  font-weight: 500;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .25em;
}
.foot__legal {
  font: 400 .8125rem/1.6 var(--f-mono);
  color: var(--slate-ink);
}
@media (min-width: 64rem) {
  .foot__grid {
    grid-template-columns: 1.1fr 1.4fr auto;
    align-items: end;
  }
  .foot__legal { grid-column: 1 / -1; }
}

/* ==========================================================================
   Mentions légales
   ========================================================================== */
.page-legal { --ink: var(--night); --focus: var(--night); color: var(--night); color-scheme: light; }
html:has(.page-legal) { background-color: var(--gold); }
.page-legal .sky {
  background-image:
    radial-gradient(60rem 30rem at 85% -5%, rgba(255, 106, 61, .28), rgba(255, 106, 61, 0) 70%),
    linear-gradient(180deg, #EEC3A9 0, #FFE1B8 34rem, #FFE1B8 100%);
}
.legal { padding: clamp(8.5rem, 16vw, 11rem) 0 clamp(4rem, 8vw, 6rem); }
.legal__title {
  font: 300 clamp(3rem, 9vw, 6.5rem)/.95 var(--f-display);
  letter-spacing: -.035em;
}
.legal__title em {
  font-style: italic;
  font-weight: 400;
  background-image: linear-gradient(rgba(255, 106, 61, .85), rgba(255, 106, 61, .85));
  background-repeat: no-repeat;
  background-size: 100% .09em;
  background-position: 0 92%;
}
.legal__updated {
  margin-top: 1.25rem;
  font: 500 .75rem/1.5 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-ink);
}
.legal__body {
  display: grid;
  gap: 3rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  max-width: 48rem;
}
.legal__body h2 {
  margin-bottom: 1rem;
  font: 400 clamp(1.6rem, 3vw, 2.1rem)/1.15 var(--f-display);
  letter-spacing: -.01em;
}
.legal__body p + p { margin-top: .9rem; }
.legal__body dl {
  display: grid;
  gap: .1rem;
  border-top: 1px solid rgba(14, 26, 36, .18);
}
.legal__body dl > div {
  display: grid;
  gap: .15rem;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(14, 26, 36, .18);
}
.legal__body dt {
  font: 500 .75rem/1.5 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-ink);
}
.legal__body dd { margin: 0; }
.legal__body a { text-underline-offset: .2em; }
@media (min-width: 48rem) {
  .legal__body dl > div { grid-template-columns: 14rem 1fr; gap: 1.5rem; align-items: baseline; }
}

/* ==========================================================================
   404 : la page qui n'a pas encore vu le jour
   ========================================================================== */
.page-404 .sky { background-image: linear-gradient(180deg, #0E1A24 0, #0E1A24 45%, #1E3550 100%); }
.nf {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 8rem 0 9rem;
  overflow: hidden;
}
.nf .stars { height: 100%; }
.nf__inner { position: relative; z-index: 1; }
.nf__title {
  max-width: 13ch;
  font: 300 clamp(2.8rem, 9vw, 7rem)/.98 var(--f-display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.nf__title em { font-style: italic; font-weight: 400; color: var(--dawn); }
.nf__text {
  margin: 1.75rem 0 2.25rem;
  max-width: 38ch;
  color: var(--sky-soft);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}
.nf__horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5.5rem;
  border-top: 1px solid rgba(233, 238, 242, .22);
  pointer-events: none;
}
.nf__sun {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(14rem, 40vw, 26rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -18%);
  background: radial-gradient(closest-side, rgba(255, 106, 61, .55), rgba(255, 106, 61, .18) 55%, rgba(255, 106, 61, 0));
  -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 18.5%);
  mask-image: linear-gradient(180deg, #000 18%, transparent 18.5%);
}

/* ---------- Sans animation ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .sunrise { display: none; }
}

/* ---------- Impression ---------- */
@media print {
  .hdr, .menu, .sunrise, .grain, .stars, .horizon { display: none !important; }
  .sky { display: none; }
  body { color: #000; background: #fff; }
}