/* Kumo · composants (aspect statique). Les mouvements vivent dans animations.css. */

/* ===================== En-tête ===================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: var(--gutter);
  transition: transform var(--dur-3) var(--ease-out);
}

.site-header__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(17 17 17 / 0.92);
  border-bottom: 1px solid var(--ligne-nuit);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}

.site-header.is-scrolled .site-header__bg,
.menu-open .site-header__bg {
  opacity: 1;
}

.site-header.is-hidden {
  transform: translateY(-110%);
}

.brand {
  --radius: var(--radius-s);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--touch);
  flex-shrink: 0;
  margin-right: auto;
  border-radius: var(--radius);
  color: var(--blanc);
  fill: var(--rose);
  text-decoration: none;
}

.brand__cloud {
  width: 44px;
  height: 24px;
}

.brand__word {
  width: 66px;
  height: 14px;
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

.nav__link,
.site-footer__link,
.legal-back {
  --radius: var(--radius-s);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding-inline: 2px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  letter-spacing: var(--tracking);
  text-decoration: none;
}

/* Soulignement en trait de pinceau (s'écrit au survol) */
.nav__link::before,
.site-footer__link::before,
.legal-back::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 7px;
  height: 7px;
  background: var(--rose);
  -webkit-mask: url("../assets/motifs/pinceau.svg") center / 100% 100% no-repeat;
  mask: url("../assets/motifs/pinceau.svg") center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}

.nav__link.is-current::before {
  transform: scaleX(1);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 767px) {
  .header-tools .sound-btn {
    display: none;
  }
}

@media (min-width: 1024px) {
  .brand__cloud {
    width: 54px;
    height: 29px;
  }

  .brand__word {
    width: 82px;
    height: 17px;
  }

  .nav {
    display: block;
  }

  .header-tools {
    margin-left: clamp(12px, 2vw, 28px);
  }

  .header-tools .menu-btn {
    display: none;
  }
}

/* Boutons-icônes (son, menu, fermeture) */
.icon-btn {
  --radius: 50%;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  flex-shrink: 0;
  border-radius: var(--radius);
  color: var(--texte-nuit);
  transition: transform var(--dur-1) var(--ease-out);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

.sound-btn__bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.sound-btn__bars i {
  display: block;
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleY(0.28);
}

.sound-btn__bars i:nth-child(1) { --d: 0; }
.sound-btn__bars i:nth-child(2) { --d: 1; }
.sound-btn__bars i:nth-child(3) { --d: 2; }
.sound-btn__bars i:nth-child(4) { --d: 3; }

[data-sound-toggle][aria-pressed="true"] {
  color: var(--rose);
}

.menu-btn__lines {
  position: relative;
  width: 22px;
  height: 14px;
}

.menu-btn__lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.menu-btn__lines i:nth-child(1) { top: 0; }
.menu-btn__lines i:nth-child(2) { top: 6px; transform-origin: left center; }
.menu-btn__lines i:nth-child(3) { top: 12px; }

.menu-btn[aria-expanded="true"] .menu-btn__lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menu mobile */
.menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--header-h) + 28px) var(--gutter) 36px;
  overflow-y: auto;
  background: var(--noir);
}

.menu__list {
  display: grid;
  gap: 4px;
}

.menu__link {
  --radius: var(--radius-s);
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 10px;
  border-radius: var(--radius);
  font-family: var(--font-titre);
  font-size: clamp(2.1rem, 9vw, 3.2rem);
  line-height: 1.1;
  text-decoration: none;
}

.menu__num {
  font-size: 1.1rem;
  color: var(--rose);
}

.menu__sound {
  --radius: var(--radius-pill);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  min-height: var(--touch);
  padding: 0 18px;
  border: 1px solid var(--ligne-nuit);
  border-radius: var(--radius);
  font-size: 0.95rem;
}

@media (min-width: 1024px) {
  .menu {
    display: none !important;
  }
}

/* Sélecteur de langue : pastille glissante (position calculée en CSS avec :has) */
.lang-switch {
  --idx: 0;
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(3, var(--touch));
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--voile-nuit);
}

.lang-switch:has([data-set-lang="en"][aria-pressed="true"]) { --idx: 1; }
.lang-switch:has([data-set-lang="es"][aria-pressed="true"]) { --idx: 2; }

.lang-switch__pill {
  position: absolute;
  top: 6px;
  left: 4px;
  width: calc(var(--touch) - 8px);
  height: calc(var(--touch) - 12px);
  border-radius: var(--radius-pill);
  background: var(--rose);
  transform: translateX(calc(var(--idx) * var(--touch)));
  transition: transform var(--dur-2) var(--ease-out);
}

.lang-switch__btn {
  --radius: var(--radius-pill);
  position: relative;
  z-index: 1;
  height: var(--touch);
  border-radius: var(--radius);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--texte-nuit-doux);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.lang-switch__btn[aria-pressed="true"] {
  color: var(--noir);
}

/* ===================== Boutons ===================== */
.btn {
  --radius: var(--radius-pill);
  --btn-bg: var(--washi);
  --btn-fg: var(--noir);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 54px;
  padding: 0.8em 1.55em;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.btn--small {
  min-height: var(--touch);
  padding: 0.5em 1.1em;
  font-size: 0.9rem;
}

/* Sur papier, le bouton principal passe à l'encre */
.section--paper .btn--primary,
.contact-card .btn--primary {
  --btn-bg: var(--noir);
  --btn-fg: var(--washi);
}

.btn__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
}

.btn__brush {
  position: absolute;
  inset: -35% -40% -35% -14%;
  background: var(--rose);
  -webkit-mask: url("../assets/motifs/pinceau.svg") center / 100% 100% no-repeat;
  mask: url("../assets/motifs/pinceau.svg") center / 100% 100% no-repeat;
  transform: translateX(-104%);
  transition: transform var(--dur-3) var(--ease-out);
}

.btn__label {
  position: relative;
}

.btn__arrow {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.btn__puff {
  position: absolute;
  left: var(--px, 50%);
  top: var(--py, 50%);
  width: 46px;
  height: 28px;
  margin: -14px 0 0 -23px;
  color: var(--washi);
  opacity: 0;
  pointer-events: none;
}

.btn__puff svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--texte-nuit);
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
}

.section--paper .btn--secondary,
.btn--on-paper.btn--secondary {
  --btn-fg: var(--texte-papier);
}

.btn__outline {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  pointer-events: none;
}

.btn__outline rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Bouton d'envoi : nuage et coche superposés au libellé */
.btn__cloud,
.btn__check {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  opacity: 0;
}

.btn__cloud {
  width: 46px;
  height: 25px;
  margin: -12.5px 0 0 -23px;
  color: var(--washi);
  fill: var(--rose);
}

.btn__check {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  color: var(--noir);
}

/* ===================== Accueil ===================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + 32px) clamp(140px, 17vw, 210px);
  overflow: clip;
}

.hero__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  color: var(--washi);
}

.hero__glow {
  position: absolute;
  top: 26%;
  left: 50%;
  width: min(120vw, 760px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(245 240 230 / 0.1), rgb(245 240 230 / 0.035) 55%, transparent 75%);
}

.hero__kanji {
  position: absolute;
  right: -4vw;
  bottom: 2vh;
  font-family: var(--font-titre);
  font-size: clamp(13rem, 44vw, 34rem);
  line-height: 1;
  color: var(--washi);
  opacity: 0.035;
  user-select: none;
}

.hero__enso {
  position: absolute;
  top: 26%;
  left: 50%;
  width: min(92vw, 420px);
  translate: -50% -50%;
  opacity: 0.11;
  overflow: visible;
}

.sky-layer {
  position: absolute;
  inset: 0;
}

.sky-layer__track {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
}

.sk {
  position: absolute;
  height: auto;
  overflow: visible;
}

.sky-layer--3 { color: rgb(245 240 230 / 0.07); }
.sky-layer--2 { color: rgb(245 240 230 / 0.1); }
.sky-layer--1 { color: rgb(245 240 230 / 0.14); }

/* Positions en % de la piste (2 × largeur) : la seconde moitié répète la première pour une boucle sans couture */
.sk--a  { left: 3%;  top: 16%; width: clamp(150px, 17vw, 270px); }
.sk--a2 { left: 53%; top: 16%; width: clamp(150px, 17vw, 270px); }
.sk--b  { left: 31%; top: 56%; width: clamp(100px, 11vw, 180px); }
.sk--b2 { left: 81%; top: 56%; width: clamp(100px, 11vw, 180px); }
.sk--c  { left: 16%; top: 34%; width: clamp(160px, 19vw, 290px); }
.sk--c2 { left: 66%; top: 34%; width: clamp(160px, 19vw, 290px); }
.sk--d  { left: 37%; top: 72%; width: clamp(200px, 22vw, 340px); }
.sk--d2 { left: 87%; top: 72%; width: clamp(200px, 22vw, 340px); }
.sk--e  { left: 1%;  top: 80%; width: clamp(150px, 15vw, 250px); }
.sk--e2 { left: 51%; top: 80%; width: clamp(150px, 15vw, 250px); }
.sk--f  { left: 24%; top: 9%;  width: clamp(180px, 21vw, 320px); }
.sk--f2 { left: 74%; top: 9%;  width: clamp(180px, 21vw, 320px); }

.hero__mist {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(110px, 17vw, 220px);
  color: var(--washi);
}

.mist-band--1 { opacity: 0.07; }
.mist-band--2 { opacity: 0.07; }
.mist-band--3 { opacity: 0.1; }
.mist-band--4 { opacity: 0.08; }
.mist-band--5 { opacity: 0.11; }
.mist-band--6 { opacity: 0.14; }

.hero__inner {
  display: grid;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}

.hero__mark {
  order: -1;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.hero__mark-parallax {
  width: min(66vw, 300px);
}

.hero__cloud {
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero__body {
  color: var(--blanc);
}

.hero__spiral {
  fill: var(--rose);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.hero__meaning {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-nuit-doux);
}

.hero__meaning-kanji {
  font-family: var(--font-titre);
  font-size: 1.15rem;
  letter-spacing: 0;
  color: var(--rose);
}

.hero__text {
  max-width: 660px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--texte-nuit-doux);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--rose);
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.hero__lead {
  margin-top: 22px;
  max-width: 34em;
  font-size: var(--fs-lead);
  color: var(--texte-nuit-doux);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: 34px;
}

@media (max-width: 479px) {
  .hero__actions .btn {
    flex: 1 1 100%;
  }
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

  .hero__mark {
    order: 0;
  }

  .hero__mark-parallax {
    width: min(38vw, 540px);
  }

  .hero__glow,
  .hero__enso {
    top: 50%;
    left: auto;
    right: calc(var(--gutter) + min(19vw, 270px));
    translate: 50% -50%;
  }

  .hero__enso {
    width: min(48vw, 640px);
  }
}

/* ===================== Bords et sections ===================== */
.section--paper {
  z-index: 1;
}

.edge {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 40px;
  background: url("../assets/motifs/bord-nuages.svg") repeat-x;
  background-size: 240px 40px;
  pointer-events: none;
}

.edge--top {
  top: -39px;
}

.edge--bottom {
  bottom: -39px;
  transform: scaleY(-1);
}

.section-head {
  display: grid;
  gap: 16px;
  max-width: 740px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.section-head__num {
  font-family: var(--font-titre);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--rose);
}

.section-head__title {
  position: relative;
  justify-self: start;
  padding-bottom: 16px;
  font-size: var(--fs-h2);
}

.brush-line {
  position: absolute;
  left: -2px;
  bottom: -6px;
  width: min(100%, 240px);
  height: 18px;
  overflow: visible;
}

.brush-line path {
  fill: none;
  stroke: var(--rose);
  stroke-linecap: round;
}

.brush-line path:first-child {
  stroke-width: 5;
}

.brush-line path:last-child {
  stroke-width: 1.6;
  opacity: 0.6;
}

.section-head__lead {
  max-width: 38em;
  font-size: var(--fs-lead);
  color: var(--texte-nuit-doux);
}

.section--paper .section-head__lead {
  color: var(--texte-papier-doux);
}

/* ===================== Services ===================== */
.cards {
  display: grid;
  gap: var(--gap-s);
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--ligne-papier);
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / 0.5);
  transition: transform var(--dur-3) var(--ease-out);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 22px 44px -22px rgb(17 17 17 / 0.4);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  color: var(--texte-papier);
}

/* Petits écrans : cartes compactes, pictogramme à gauche */
@media (max-width: 639px) {
  .card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
    padding: 18px;
  }

  .card__icon {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .card__badge {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: 4px;
  }

  .card--quote .card__icon {
    grid-row: span 2;
  }
}

.card__title {
  font-size: var(--fs-h3);
}

.card__text {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--texte-papier-doux);
}

.card--quote {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--rose-encre) 55%, transparent);
  background: rgb(255 255 255 / 0.25);
}

.card__badge {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgb(196 30 95 / 0.08);
  color: var(--rose-encre);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===================== Réalisations : frise ===================== */
.work {
  padding-bottom: calc(var(--section-y) + 40px);
}

.timeline {
  --count: 3;
  position: relative;
  display: grid;
  gap: 44px;
  padding-left: 64px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--rose), rgb(245 240 230 / 0.25) 30%, rgb(245 240 230 / 0.12));
}

.station {
  position: relative;
}

.station__btn {
  --radius: var(--radius-m);
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 4px 0 0;
  border-radius: var(--radius);
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.station__dot {
  position: absolute;
  left: -64px;
  top: -6px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--noir);
}

.station__dot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--washi);
}

.station__num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--texte-nuit);
}

.station--next .station__dot svg {
  color: var(--rose);
}

.station__name {
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.15;
}

.station__type {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-nuit-doux);
}

.station__thumb {
  position: relative;
  display: block;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--ligne-nuit);
  border-radius: var(--radius-m);
  background: var(--nuit-2);
  aspect-ratio: 16 / 10;
  transition: transform var(--dur-3) var(--ease-out);
}

.station__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform var(--dur-4) var(--ease-out);
}

.station__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--rose);
}

.station__cta svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-2) var(--ease-out);
}

@media (min-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(var(--count), minmax(0, 1fr));
    gap: clamp(28px, 3vw, 48px);
    padding-left: 0;
    padding-top: 78px;
  }

  .timeline::before {
    left: 24px;
    right: 0;
    top: 23px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--rose), rgb(245 240 230 / 0.25) 30%, rgb(245 240 230 / 0.12));
  }

  .station__dot {
    left: 0;
    top: -78px;
  }
}

.timeline-fallback {
  display: grid;
  gap: 12px;
  padding-left: 1.2em;
}

/* Bandeau seigaiha */
.seigaiha {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 70%);
  mask: linear-gradient(transparent, #000 70%);
}

.seigaiha__track {
  position: absolute;
  inset: 0 -40px 0 0;
  background: url("../assets/motifs/seigaiha.svg") repeat;
  background-size: 40px 40px;
}

/* ===================== Fiche (modale) ===================== */
.modal {
  width: min(100% - 24px, 1080px);
  max-width: none;
  max-height: calc(100% - 24px);
  padding: 0;
  border: 1px solid var(--ligne-nuit);
  border-radius: var(--radius-l);
  background: var(--nuit-2);
  color: var(--texte-nuit);
  overscroll-behavior: contain;
}

.modal::backdrop {
  background: rgb(8 8 8 / 0.76);
}

.modal__panel {
  position: relative;
  display: grid;
  gap: 28px;
  padding: clamp(20px, 3.4vw, 44px);
  padding-top: clamp(64px, 6vw, 44px);
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: var(--nuit-3);
}

.modal__media {
  position: relative;
  padding: 0 14% 28px 0;
  perspective: 1100px;
}

.mock {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  border-radius: 10px;
  background: var(--nuit-3);
  box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.85);
  transition: transform var(--dur-3) var(--ease-out);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding-inline: 12px;
  background: #262626;
}

.mock__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a4a4a;
}

.mock__url {
  margin-left: 8px;
  overflow: hidden;
  font-size: 0.7rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--texte-nuit-doux);
}

.mock__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.mock--mobile {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  border: 4px solid #262626;
  border-radius: 18px;
}

.mock--mobile .mock__img {
  aspect-ratio: 400 / 866;
}

.modal__body {
  display: grid;
  gap: 14px;
  align-content: start;
}

.modal__type {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--rose);
}

.modal__title {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
}

.modal__summary {
  color: var(--texte-nuit-doux);
}

.modal__label {
  margin-top: 6px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.modal__tags li {
  padding: 6px 13px;
  border: 1px solid var(--ligne-nuit);
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
}

.modal__body .btn {
  justify-self: start;
}

@media (min-width: 900px) {
  .modal__panel {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: 44px;
    padding-top: clamp(44px, 4vw, 56px);
  }
}

/* ===================== Méthode ===================== */
.steps {
  position: relative;
  display: grid;
  gap: 30px;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 6px;
  align-content: start;
}

.step__mark {
  position: relative;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
}

.step__enso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--texte-papier);
  overflow: visible;
}

.step__num {
  position: relative;
  font-family: var(--font-titre);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--rose-encre);
}

.step__title {
  align-self: end;
  font-size: var(--fs-h3);
}

.step__text {
  font-size: 0.97rem;
  color: var(--texte-papier-doux);
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
  }

  .steps::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 8%;
    right: 8%;
    height: 8px;
    background: var(--texte-papier);
    opacity: 0.16;
    -webkit-mask: url("../assets/motifs/pinceau.svg") center / 100% 100% no-repeat;
    mask: url("../assets/motifs/pinceau.svg") center / 100% 100% no-repeat;
  }

  .step {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .step__mark {
    grid-row: auto;
    width: 84px;
    height: 84px;
    background: var(--washi);
    border-radius: 50%;
  }

  .step__title {
    margin-top: 6px;
  }
}

/* ===================== Contact et formulaire ===================== */
.contact {
  overflow: clip;
}

.contact__sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--washi);
}

.contact__cloud {
  top: 9%;
  right: -6vw;
  width: clamp(200px, 30vw, 440px);
  color: rgb(245 240 230 / 0.08);
}

.contact__inner {
  position: relative;
}

/* Grand écran : titre à gauche, fiche à droite */
@media (min-width: 1100px) {
  .contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }

  .contact__inner .section-head {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    margin-bottom: 0;
  }
}

.contact-card {
  position: relative;
  max-width: 880px;
  padding: clamp(22px, 4.5vw, 56px);
  border-radius: var(--radius-l);
  background-color: var(--washi);
  background-image: url("../assets/motifs/washi.webp");
  background-size: 240px;
  color: var(--texte-papier);
  color-scheme: light;
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.75);
}

.form {
  display: grid;
  gap: 28px;
}

.form__intro {
  font-size: var(--fs-small);
  color: var(--texte-papier-doux);
}

.form__grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 768px) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
  .form__grid > .field[data-field="type_site"] {
    grid-column: 1 / -1;
  }
}

.field {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  padding: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-papier);
}

.field__optional {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte-papier-doux);
}

.field__control {
  position: relative;
  display: block;
}

/* Soulignement au pinceau qui s'étire au focus */
.field__control::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}

.field__control:focus-within::after {
  transform: scaleX(1);
}

.field.is-invalid .field__control::after {
  background: var(--rose-encre);
  transform: scaleX(1);
}

.field__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1.5px solid rgb(17 17 17 / 0.38);
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--texte-papier);
  outline: none;
  appearance: none;
}

.field__input::placeholder {
  color: #757068;
  opacity: 1;
}

.field__input--area {
  min-height: 136px;
  padding-top: 12px;
  line-height: 1.6;
  resize: vertical;
}

.field__control--select::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}

.field__control--select .field__input {
  padding-right: 28px;
  cursor: pointer;
}

.field__error {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--rose-encre);
}

.field__error:empty {
  display: none;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.choice {
  position: relative;
  display: inline-flex;
}

.choice input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice span {
  --radius: var(--radius-pill);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 22px;
  border: 1.5px solid rgb(17 17 17 / 0.3);
  border-radius: var(--radius);
  font-size: 0.95rem;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.choice span::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  margin-top: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  transform: scale(0);
  transition: transform var(--dur-2) var(--ease-out);
}

.choice input:checked + span {
  border-color: var(--noir);
  background: var(--noir);
  color: var(--washi);
}

.choice input:checked + span::before {
  transform: scale(1);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

.field.is-invalid .choice span {
  border-color: var(--rose-encre);
}

.consent {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: var(--touch);
  padding-block: 9px;
  font-size: 0.97rem;
  cursor: pointer;
}

.consent input {
  position: absolute;
  top: 9px;
  left: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.consent__box {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgb(17 17 17 / 0.5);
  border-radius: 7px;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.consent__box svg {
  width: 18px;
  height: 18px;
  color: var(--washi);
}

.consent input:checked + .consent__box {
  border-color: var(--noir);
  background: var(--noir);
}

.consent input:focus-visible + .consent__box {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

.field.is-invalid .consent__box {
  border-color: var(--rose-encre);
}

.form__note {
  font-size: 0.86rem;
  color: var(--texte-papier-doux);
}

.form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.form__status {
  font-size: 0.95rem;
}

.form__status.is-error {
  font-weight: 700;
  color: var(--rose-encre);
}

.form__status:empty {
  display: none;
}

.thanks {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-block: 20px;
  text-align: center;
}

.thanks:focus {
  outline: none;
}

.thanks__art {
  position: relative;
  width: 220px;
  height: 170px;
}

.thanks__enso {
  position: absolute;
  inset: 0;
  width: 170px;
  height: 170px;
  margin-inline: auto;
  color: var(--texte-papier);
  opacity: 0.25;
  overflow: visible;
}

.thanks__cloud {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  translate: -50% -50%;
  color: var(--noir);
  fill: var(--rose);
}

.thanks__petal {
  position: absolute;
  width: 11px;
  height: 19px;
  color: var(--rose-clair);
  fill: currentColor;
}

.thanks__petal svg {
  width: 100%;
  height: 100%;
}

.thanks__petal--1 { left: 12%; top: 8%; rotate: -28deg; }
.thanks__petal--2 { right: 10%; top: 20%; rotate: 34deg; }
.thanks__petal--3 { left: 22%; bottom: 6%; rotate: 150deg; }

.thanks__title {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
}

.thanks__text {
  max-width: 34em;
  color: var(--texte-papier-doux);
}

/* ===================== Pied de page ===================== */
.site-footer {
  position: relative;
  padding-block: 26px;
  border-top: 1px solid var(--ligne-nuit);
  background: var(--noir);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
}

.site-footer__copy {
  font-family: var(--font-titre);
  font-size: 1.1rem;
}

/* ===================== Intro ===================== */
.intro {
  display: none;
}

/* Voile presque opaque : la page s'affiche déjà dessous (et compte pour le LCP), comme sortant de la nuit */
.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  background: rgb(17 17 17 / 0.96);
}

.intro__mark {
  width: min(62vw, 440px);
  height: auto;
  overflow: visible;
}

.intro__trace {
  color: transparent;
  stroke: var(--washi);
  stroke-width: 3;
}

.intro__fill {
  color: var(--blanc);
  opacity: 0;
}

.intro__spiral {
  fill: var(--rose);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.intro__skip {
  --radius: var(--radius-pill);
  position: absolute;
  bottom: max(24px, 5vh);
  left: 50%;
  min-height: var(--touch);
  padding: 0 20px;
  border-radius: var(--radius);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--texte-nuit-doux);
  translate: -50% 0;
}

/* ===================== Curseur (souris uniquement) ===================== */
.cursor {
  display: none;
}

.has-cursor .cursor {
  display: contents;
}

.cursor__dot,
.cursor__ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-cursor);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--rose);
}

.cursor__ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid #fff;
  mix-blend-mode: difference;
  transition: opacity var(--dur-2) var(--ease-out);
}

.has-cursor:not(.modal-open),
.has-cursor:not(.modal-open) :is(a, button, label, summary) {
  cursor: none;
}

.has-cursor :is(input, textarea, select) {
  cursor: auto;
}

/* Fiche ouverte (couche supérieure du navigateur) : retour au curseur normal */
:is(.cursor-hidden, .modal-open) .cursor__dot,
:is(.cursor-hidden, .modal-open) .cursor__ring {
  opacity: 0;
}

.cursor__dot {
  transition: opacity var(--dur-2) var(--ease-out);
}

/* ===================== Pétales ===================== */
.petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.petal {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 17px;
  color: var(--rose-clair);
  fill: currentColor;
  opacity: 0.75;
}

.petal svg {
  width: 100%;
  height: 100%;
}

/* ===================== Page 404 ===================== */
.lost {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 40px) var(--gutter) 80px;
  overflow: clip;
  text-align: center;
}

.lost__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  color: var(--washi);
}

.lost__drift {
  position: absolute;
  top: 18%;
  left: 50%;
  width: clamp(150px, 26vw, 300px);
  margin-left: calc(clamp(150px, 26vw, 300px) / -2);
}

.lost__cloud {
  width: 100%;
  height: auto;
  color: var(--blanc);
  fill: var(--rose);
  overflow: visible;
}

.lost__far {
  color: rgb(245 240 230 / 0.08);
}

.lost__far--1 {
  left: 6%;
  top: 24%;
  width: clamp(120px, 16vw, 220px);
}

.lost__far--2 {
  right: 5%;
  top: 62%;
  width: clamp(140px, 20vw, 260px);
}

/* Bouton de retour : flèche tournée vers la gauche */
.btn--back .btn__arrow use {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center;
}

.lost__inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 640px;
  padding-top: clamp(120px, 22vh, 220px);
}

.lost__code {
  font-family: var(--font-titre);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--rose);
}

.lost__title {
  font-size: var(--fs-h2);
}

.lost__text {
  color: var(--texte-nuit-doux);
}

.lost .btn {
  margin-top: 12px;
}

/* ===================== Mentions légales ===================== */
.legal-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(48px, 8vw, 96px)) 0 clamp(64px, 9vw, 110px);
}

.legal-hero__title {
  font-size: var(--fs-h2);
}

.legal-hero__lead {
  margin-top: 14px;
  color: var(--texte-nuit-doux);
}

.legal {
  padding-block: clamp(64px, 9vw, 120px);
}

.legal__body {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
  max-width: 780px;
}

.legal__block {
  display: grid;
  gap: 12px;
}

.legal__block h2 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
}

.legal__block p,
.legal__block li {
  color: var(--texte-papier-doux);
}

.legal__block ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
}

.legal__block strong {
  color: var(--texte-papier);
}

.todo {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgb(196 30 95 / 0.1);
  color: var(--rose-encre);
  font-weight: 700;
}

.legal-back {
  margin-bottom: 18px;
  color: var(--texte-nuit-doux);
}