/* ==========================================================================
   Feuille de style — L'Atelier d'Or, bijoux sur mesure
   --------------------------------------------------------------------------
   Système visuel : encre nuit sur blanc, graisse 300, filets de 1px couleur
   givre, rayon de 4px, aucune ombre.
   Une seule couleur : le bleu, décliné du profond au très pâle. Il porte les
   mots géants, les boutons, les fonds teintés et le trait de la bague tant
   qu'elle n'est qu'un projet. Les seules autres teintes sont celles des
   métaux eux-mêmes : la bague finie et les pastilles de la section Métaux.
   ========================================================================== */

:root {
  /* La couleur d'accent : un bleu saphir. Pour en changer, il suffit de modifier ces cinq valeurs
     (et le trait et la résine de la bague, en tête de ring.js). */
  --accent: #2f5fe6;
  --accent-deep: #1d44b8;
  --accent-soft: #9cb7f6;
  --accent-line: #cddafb; /* contours */
  --accent-wash: #eff4fe; /* fonds teintés */
  --grad: linear-gradient(90deg, var(--accent-deep) 0%, var(--accent) 55%, var(--accent-soft) 100%);

  /* Neutres */
  --ink: #061b31;
  --slate: #64748d;
  --steel: #50617a;
  --white: #ffffff;
  --mist: #f8fafd;
  --frost: #e5edf5;
  --night: #081433;

  /* Typographie */
  --font: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-heading: clamp(24px, 2.8vw, 32px);
  --t-heading-lg: clamp(30px, 4.1vw, 48px);
  --t-display: clamp(32px, 4.8vw, 56px);
  --t-giant: clamp(48px, 7.6vw, 96px);
  --t-giant-xl: clamp(72px, 11vw, 144px);

  /* Mise en page */
  --max: 1320px;
  --pad: clamp(20px, 3.2vw, 40px);
  --edge: max(var(--pad), calc((100% - var(--max)) / 2)); /* bord du contenu, pour les blocs pleine largeur */
  --gap: 24px;
  --section: clamp(64px, 8vw, 96px);
  --radius: 4px;
  --bar: 76px;

  /* Mouvement */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-feature-settings: "ss01" 1, "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
}

em {
  font-style: normal;
}

img,
svg,
canvas {
  display: block;
}

::selection {
  background: var(--accent);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  left: var(--pad);
  top: -80px;
  z-index: 200;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

/* Avancement dans la page */
.progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 2px;
  pointer-events: none;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Texte : tout en graisse 300, l'interlettrage se resserre quand la taille monte
   -------------------------------------------------------------------------- */

.label {
  color: var(--slate);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Étiquette de section, précédée d'un trait bleu */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent-deep);
  font-weight: 500;
}

.kicker::before {
  content: "";
  flex: none;
  width: 22px;
  height: 1px;
  background: var(--accent);
}

.caption {
  color: var(--steel);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.body {
  max-width: 40ch;
  color: var(--slate);
  font-size: 20px;
  line-height: 1.4;
}

.heading,
.heading-lg,
.display {
  font-weight: 300;
  text-wrap: balance;
}

.heading {
  font-size: var(--t-heading);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.heading-lg {
  font-size: var(--t-heading-lg);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.display {
  font-size: var(--t-display);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* Au-delà de 56px : les mots et les chiffres géants */
.giant,
.giant-xl {
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.giant {
  font-size: var(--t-giant);
}

.giant-xl {
  font-size: var(--t-giant-xl);
}

/* --------------------------------------------------------------------------
   Apparitions au défilement
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Mots qui montent derrière un cache */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin: -0.12em -0.06em -0.2em;
  padding: 0.12em 0.06em 0.2em;
}

.w__i {
  display: inline-block;
}

.js [data-words] .w__i {
  transform: translateY(125%);
  transition: transform 1s var(--ease) calc(var(--i) * 34ms + var(--d, 0ms)), color 0.5s var(--ease);
}

.js [data-words].is-in .w__i {
  transform: none;
}

/* Lettres des mots géants */
.wd {
  display: inline-block;
  white-space: nowrap;
}

.ch {
  display: inline-block;
}

/* Le trait d'union respire : l'interlettrage serré le collerait aux lettres */
.ch--dash {
  margin: 0 0.03em;
}

/* Mot rempli par le dégradé bleu, du profond au pâle. Chaque lettre porte sa
   tranche : le script lui donne sa position (--x) dans la largeur du mot (--ww),
   et le dégradé reste continu. La marge intérieure garde les jambages et les
   bords de lettre dans la zone peinte. */
.grad .ch {
  margin: -0.22em -0.06em;
  padding: 0.22em 0.06em;
  background-image: var(--grad);
  background-repeat: no-repeat;
  background-position: calc(var(--x, 0px) * -1) 0;
  background-size: var(--ww, 100%) 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.grad .ch--dash {
  margin: -0.22em -0.03em;
}

/* --------------------------------------------------------------------------
   Boutons et liens
   -------------------------------------------------------------------------- */

.link {
  position: relative;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.4s var(--ease);
}

.link::after {
  content: "";
  position: absolute;
  inset: auto 0 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease);
}

.link:hover,
.link:focus-visible {
  color: var(--accent-deep);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Bouton plein : l'action principale. Au survol, un bleu plus profond monte du bas. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  padding: 15px 24px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  font: 500 14px/1.2 var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.45s var(--ease), transform 0.7s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--accent-deep);
  transform: translateY(102%);
  transition: transform 0.6s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--accent-deep);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: none;
}

/* Bouton contour : l'action secondaire, toujours à côté d'un bouton plein */
.btn--ghost {
  border-color: var(--accent-line);
  background: transparent;
  color: var(--accent-deep);
}

.btn--ghost::before {
  background: var(--accent-wash);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--accent);
}

.btn--sm {
  padding: 10px 16px 11px;
}

.btn--lg {
  gap: 10px;
  padding: 18px 26px 19px;
  font-size: 15px;
}

.btn--lg .wa-ico {
  width: 20px;
  height: 20px;
}

.btn__arrow {
  display: inline-block;
  transition: transform 0.6s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(5px);
}

/* Étiquette à choisir */
.chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 9px 16px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 9999px;
  background: transparent;
  color: var(--accent-deep);
  font: 400 14px/1.2 var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), background-color 0.45s var(--ease);
}

.chip::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 50% 50% 0 0;
  background: var(--accent);
  transform: translateY(102%);
  transition: transform 0.6s var(--ease), border-radius 0.6s var(--ease);
}

.chip:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.chip[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--white);
}

.chip[aria-pressed="true"]::before {
  border-radius: 0;
  transform: none;
}

/* --------------------------------------------------------------------------
   Barre du haut : se cache en descendant, revient en remontant
   -------------------------------------------------------------------------- */

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--bar);
  padding: 0 var(--edge);
  border-bottom: 1px solid var(--frost);
  background: var(--white);
  transition: transform 0.7s var(--ease);
}

.bar.is-hidden {
  transform: translateY(-102%);
}

.bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.bar__mark {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.bar__nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Héro : la bague dans son halo bleu, le mot géant, les quatre états
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(100svh, 700px);
  padding: calc(var(--bar) + clamp(24px, 5vh, 56px)) var(--edge) 0;
  overflow: clip;
}

/* Trois taches floues, toutes bleues, qui dérivent lentement derrière la bague */
.hero__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 62%, transparent 96%);
  mask-image: linear-gradient(#000 62%, transparent 96%);
}

.hero__aura i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.hero__aura i:nth-child(1) {
  top: 6%;
  right: 12%;
  width: 40vw;
  height: 40vw;
  background: var(--accent);
  opacity: 0.34;
  animation: drift-a 18s ease-in-out infinite alternate;
}

.hero__aura i:nth-child(2) {
  top: 28%;
  right: 38%;
  width: 26vw;
  height: 26vw;
  background: var(--accent-soft);
  opacity: 0.4;
  animation: drift-b 22s ease-in-out infinite alternate;
}

.hero__aura i:nth-child(3) {
  top: 40%;
  right: -4%;
  width: 30vw;
  height: 30vw;
  background: var(--accent-soft);
  opacity: 0.45;
  animation: drift-c 26s ease-in-out infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate(-8vw, 5vh) scale(1.12);
  }
}

@keyframes drift-b {
  to {
    transform: translate(9vw, -7vh) scale(0.88);
  }
}

@keyframes drift-c {
  to {
    transform: translate(-6vw, -9vh) scale(1.15);
  }
}

.hero__stage {
  position: absolute;
  top: var(--bar);
  right: 0;
  bottom: 2vw;
  z-index: 2;
  width: 64%;
  pointer-events: none;
  will-change: transform;
}

.js .hero__stage {
  opacity: 0;
  transition: opacity 1.8s var(--ease) 0.15s;
}

.js.is-ready .hero__stage {
  opacity: 1;
}

.hero__stage canvas,
.hero__stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Reflets : quelques éclats discrets, seulement autour du bijou fini */
.sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: var(--s, 18px);
  aspect-ratio: 1;
  background: var(--white);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: 0;
  transform: scale(0);
}

/* Sur le panneau du parcours, déjà pâle, le blanc ne se verrait pas */
.parcours__canvas .spark {
  background: var(--accent-soft);
}

.is-gold .spark {
  animation: twinkle var(--t, 3.4s) var(--ease-io) var(--dl, 0s) infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
}

.hero__lead {
  position: relative;
  z-index: 3;
  max-width: 460px;
}

.hero__intro {
  max-width: 400px;
}

.hero__intro {
  color: var(--steel);
  font-size: 22px;
  line-height: 1.3;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.hero__foot {
  position: relative;
  margin-top: auto;
  padding-top: 32px;
}

.hero__tools {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: clamp(24px, 3.4vw, 44px);
}

.hero__title {
  position: relative;
  z-index: 1;
  font-weight: inherit;
}

.hero__eyebrow {
  display: block;
  color: var(--accent-deep);
  font-weight: 500;
}

/* Le mot occupe toute la largeur ; le script ajuste sa taille au pixel près. */
.hero__word {
  display: block;
  overflow: hidden;
  margin: -0.25em 0 -0.1em -0.045em;
  font-size: 23vw;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  will-change: transform;
}

.fit__i {
  display: inline-block;
}

.js .hero__word .ch {
  transform: translateY(105%);
}

.js.is-ready .hero__word .ch {
  transform: none;
  transition: transform 1.4s var(--ease) calc(var(--i) * 45ms + 150ms);
}

/* Les quatre états de la bague */
.strip__row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.thumb {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.thumb__img {
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent-wash);
  transition: border-color 0.5s var(--ease);
}

.thumb__img img {
  width: 100%;
  height: 100%;
  transition: transform 0.9s var(--ease);
}

.thumb:hover .thumb__img {
  border-color: var(--accent-line);
}

.thumb:hover .thumb__img img {
  transform: scale(1.14) rotate(-6deg);
}

.thumb.is-active .thumb__img {
  border-color: var(--accent);
}

.thumb__name {
  color: var(--slate);
  font-size: 12px;
  font-weight: 400;
  transition: color 0.4s var(--ease);
}

.thumb:hover .thumb__name,
.thumb.is-active .thumb__name {
  color: var(--accent-deep);
}

.cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.cue::after {
  content: "";
  width: 1px;
  height: 40px;
  background: var(--accent);
  transform-origin: top;
  animation: cue 2.4s var(--ease-io) infinite;
}

@keyframes cue {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* --------------------------------------------------------------------------
   Sections : un filet qui se trace, une étiquette, un titre
   -------------------------------------------------------------------------- */

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

.section::before {
  content: "";
  position: absolute;
  inset: 0 var(--edge) auto;
  height: 1px;
  background: var(--frost);
  transform-origin: left;
}

.js .section::before {
  transform: scaleX(0);
  transition: transform 1.6s var(--ease);
}

.js .section.is-in::before {
  transform: none;
}

.wrap {
  max-width: var(--max);
  margin-inline: auto;
}

.section__head {
  display: grid;
  gap: 16px;
  max-width: 880px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

/* --------------------------------------------------------------------------
   Manifeste : les mots s'encrent au fil du défilement, deux passages en bleu
   -------------------------------------------------------------------------- */

.manifeste__text {
  max-width: 1040px;
  margin-top: 16px;
}

.js .manifeste__text .sw {
  opacity: 0.16;
}

.manifeste__text em {
  color: var(--accent);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--frost);
}

.fact {
  display: grid;
  gap: 8px;
  padding: 24px var(--gap) 0;
  border-left: 1px solid var(--frost);
}

.fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.fact__num {
  display: block;
  margin-left: -0.04em;
  color: var(--accent);
}

.fact__label {
  color: var(--slate);
  font-size: 18px;
}

/* --------------------------------------------------------------------------
   Parcours : la bague reste à l'écran, sur un panneau bleu pâle, et change
   d'état à chaque étape
   -------------------------------------------------------------------------- */

.parcours {
  padding-bottom: 0;
}

.parcours__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
}

.parcours__visual {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100svh;
  border-radius: var(--radius);
  background: var(--accent-wash);
}

.parcours__canvas {
  position: relative;
  min-height: 0;
}

/* Lueur derrière la bague */
.parcours__canvas::before {
  content: "";
  position: absolute;
  inset: 18% 14%;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(70px);
  opacity: 0.2;
}

.parcours__canvas canvas,
.parcours__canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.parcours__state {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 18px var(--gap) 18px;
  border-top: 1px solid var(--accent-line);
}

/* Le trait avance d'étape en étape */
.parcours__meter {
  position: absolute;
  inset: -1px 0 auto;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.parcours__name {
  display: inline-block;
  color: var(--accent-deep);
  font-weight: 500;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.parcours__name.is-out {
  opacity: 0;
  transform: translateY(8px);
}

.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 78svh;
  padding: 48px 0 48px clamp(24px, 5vw, 80px);
  border-bottom: 1px solid var(--frost);
}

.step:last-child {
  border-bottom: 0;
}

.js .step {
  opacity: 0.38;
  transition: opacity 0.7s var(--ease);
}

.js .step.is-active {
  opacity: 1;
}

/* Le numéro de l'étape en cours passe du bleu pâle au bleu */
.step__num {
  display: block;
  margin: 0 0 4px -0.05em;
  color: var(--accent);
  transition: color 0.7s var(--ease);
}

.js .step:not(.is-active) .step__num {
  color: var(--accent-soft);
}

.step .body {
  max-width: 30ch;
}

.js .step .body {
  transform: translateX(-14px);
  transition: transform 0.9s var(--ease);
}

.js .step.is-active .body {
  transform: none;
}

/* --------------------------------------------------------------------------
   Créations : quatre dessins au trait, qui se retracent au survol
   -------------------------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.tile {
  display: block;
  text-decoration: none;
  will-change: transform;
}

.tile__frame {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--accent-wash);
  color: var(--accent);
  transition: color 0.5s var(--ease);
}

.tile__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(102%);
  transition: transform 0.8s var(--ease);
}

.tile:hover .tile__frame,
.tile:focus-visible .tile__frame {
  color: var(--white);
}

.tile:hover .tile__frame::before,
.tile:focus-visible .tile__frame::before {
  transform: none;
}

.drawing {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: transform 1.4s var(--ease);
}

.tile:hover .drawing {
  transform: scale(1.07);
}

/* Traits de construction, en pointillé */
.drawing .ghost {
  opacity: 0.45;
  stroke-width: 1;
  stroke-dasharray: 3 6;
}

.js .tile .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s var(--ease-io) calc(var(--i, 0) * 110ms + 150ms);
}

.js .tile.is-in .d {
  stroke-dashoffset: 0;
}

.tile:hover .d {
  animation: draw 1.5s var(--ease-io) calc(var(--i, 0) * 70ms) both;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.tile__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
}

.tile__name {
  font-size: 16px;
  font-weight: 400;
  transition: color 0.5s var(--ease);
}

.tile__name::after {
  content: "\203A";
  display: inline-block;
  margin-left: 6px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}

.tile:hover .tile__name {
  color: var(--accent-deep);
}

.tile:hover .tile__name::after {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Bandeau qui défile avec la page, sur une bande bleu pâle
   -------------------------------------------------------------------------- */

.marquee {
  overflow: clip;
  padding: clamp(24px, 3.6vw, 48px) 0;
  background: var(--accent-wash);
  color: var(--accent);
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee__group {
  display: flex;
  flex: none;
  align-items: center;
}

.marquee__group span {
  white-space: nowrap;
}

.marquee__group i {
  flex: none;
  width: 0.26em;
  height: 0.26em;
  margin: 0.1em 0.42em 0;
  border: 1.5px solid var(--accent-soft);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Métaux : une pastille de la couleur du métal, et une bague qui suit le pointeur
   -------------------------------------------------------------------------- */

.metaux__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 24px;
}

.metals {
  border-bottom: 1px solid var(--frost);
}

.metal {
  --metal: linear-gradient(135deg, #fff3c4, #f2b705 42%, #b97400 68%, #ffe08a);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: clamp(10px, 1.4vw, 20px) 0;
  border-top: 1px solid var(--frost);
  transition: opacity 0.5s var(--ease), padding-left 0.8s var(--ease);
}

.metal[data-metal="blanc"] {
  --metal: linear-gradient(135deg, #ffffff, #cdd5de 42%, #8a95a3 68%, #f1f4f8);
}

.metal[data-metal="rose"] {
  --metal: linear-gradient(135deg, #ffe4da, #f0a08c 42%, #c2695a 68%, #ffd3c6);
}

.metal__id {
  display: flex;
  align-items: center;
  gap: 0.26em;
}

/* Seule couleur hors du bleu : celle du métal lui-même */
.metal__dot {
  flex: none;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--metal);
}

.metal__thumb {
  display: none;
  width: 72px;
  height: 72px;
  margin-left: auto;
}

@media (hover: hover) and (pointer: fine) {
  .metals:hover .metal {
    opacity: 0.3;
  }

  .metals:hover .metal:hover {
    padding-left: clamp(16px, 3.4vw, 48px);
    opacity: 1;
  }

  .js .metal:hover [data-words] .w__i {
    color: var(--accent-deep);
  }
}

@media (hover: none) {
  .metal__thumb[src] {
    display: block;
  }
}

.floater {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: clamp(200px, 24vw, 320px);
  aspect-ratio: 1;
  pointer-events: none;
  will-change: transform;
}

.floater canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s var(--ease), transform 0.8s var(--ease);
}

.floater.is-on canvas {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   L'atelier : le seul bloc en bleu plein de la page
   -------------------------------------------------------------------------- */

.atelier__card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  overflow: hidden;
  padding: clamp(32px, 6vw, 88px);
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--accent-deep), var(--accent));
  color: var(--white);
}

/* Une lueur plus claire dérive dans le coin */
.atelier__card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -8%;
  z-index: -1;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent-soft);
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
  animation: drift-b 22s ease-in-out infinite alternate;
}

.atelier__card .label {
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.82);
}

.atelier__card .kicker::before {
  background: currentColor;
}

.atelier__card .body {
  color: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__word {
  display: block;
  overflow: hidden;
  margin: 8px 0 12px -0.05em;
  padding-bottom: 0.14em;
}

.contact__lead {
  margin-bottom: clamp(40px, 6vw, 64px);
  font-size: 22px;
  line-height: 1.3;
}

.js .contact__word .ch {
  transform: translateY(130%);
  transition: transform 1.3s var(--ease) calc(var(--i) * 40ms);
}

.js .contact__word.is-in .ch {
  transform: none;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 64px) clamp(24px, 6vw, 96px);
  align-items: start;
}

.ask {
  display: grid;
  gap: 32px;
}

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

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field {
  display: grid;
  gap: 8px;
  max-width: 420px;
}

.field input {
  width: 100%;
  padding: 13px 14px 14px;
  border: 1px solid var(--frost);
  border-radius: var(--radius);
  outline: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 16px/1.2 var(--font);
  letter-spacing: -0.01em;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}

.field input:hover {
  border-color: var(--accent-line);
}

.field input:focus {
  border-color: var(--accent);
  background: var(--accent-wash);
}

/* Les deux boutons occupent la largeur du champ au-dessus, côte à côte ou l'un sous l'autre */
.ask__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 420px;
}

.ask__actions .btn {
  flex: 1 1 auto;
}

.infos {
  display: grid;
  border-top: 1px solid var(--frost);
}

.info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--gap);
  padding: 20px 0;
  border-bottom: 1px solid var(--frost);
}

.info p {
  font-size: 18px;
  line-height: 1.4;
}

.info a {
  color: var(--accent-deep);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color 0.4s var(--ease), background-size 0.6s var(--ease);
}

.info a:hover {
  color: var(--accent);
  background-size: 0 1px;
  background-position: 100% 100%;
}

/* --------------------------------------------------------------------------
   Pied de page : la nuit, et le nom en bleu
   -------------------------------------------------------------------------- */

.foot {
  --grad: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 60%, #dbe6fd 100%);
  position: relative;
  padding: 28px var(--edge) 0;
  background: var(--night);
  color: var(--white);
  overflow: clip;
}

.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 32px;
}

.foot .label {
  color: #a9b7d9;
}

.foot .link:hover {
  color: var(--accent-soft);
}

.foot__mark {
  display: block;
  margin: clamp(40px, 8vw, 96px) 0 -0.14em -0.04em;
  font-size: 17vw;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  will-change: transform;
}

/* Chaque lettre s'épaissit sous le pointeur */
.foot__mark .ch {
  transition: font-weight 0.6s var(--ease);
}

.foot__mark .ch:hover {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   WhatsApp — pictogramme dans les boutons et bouton flottant
   -------------------------------------------------------------------------- */

.wa-ico {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px 0 16px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease), background-color 0.4s var(--ease);
}

.wa .wa-ico {
  width: 24px;
  height: 24px;
}

.wa:hover,
.wa:focus-visible {
  background: var(--accent-deep);
}

/* Un contour qui s'élargit et s'efface : il attire l'œil sans insister */
.wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: wa-pulse 3.2s var(--ease) infinite;
}

@keyframes wa-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.2, 1.5);
  }
}

/* Le bouton n'apparaît qu'une fois le haut de page quitté */
.js .wa {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.js .wa.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Curseur : un anneau qui suit le pointeur
   -------------------------------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.cursor.is-on {
  opacity: 1;
}

.cursor__ring {
  position: absolute;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  transition: width 0.5s var(--ease), height 0.5s var(--ease), margin 0.5s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.cursor__label {
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 500;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}

.cursor.is-link .cursor__ring {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--accent);
}

/* Sur une tuile, qui vire au bleu : un disque blanc avec le mot dedans */
.cursor.is-label .cursor__ring {
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-color: var(--white);
  background: var(--white);
}

.cursor.is-label .cursor__label {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Sans WebGL : le dessin au trait remplace la bague 3D
   -------------------------------------------------------------------------- */

.no-webgl canvas,
.no-webgl .strip,
.no-webgl .floater {
  display: none;
}

.hero__stage .drawing,
.parcours__canvas .drawing {
  padding: 8%;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Écrans étroits
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact__grid {
    grid-template-columns: 1fr;
  }

  .atelier__card {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 700px) {
  .body {
    font-size: 18px;
  }

  .bar {
    --bar: 64px;
  }

  .bar__nav {
    display: none;
  }

  .bar__brand {
    margin-right: auto;
  }

  .hero {
    --bar: 64px;
    padding-top: var(--bar);
  }

  /* Le halo se regroupe derrière la bague, en haut */
  .hero__aura i:nth-child(1) {
    top: 6%;
    right: 18%;
    width: 64vw;
    height: 64vw;
  }

  .hero__aura i:nth-child(2) {
    top: 20%;
    right: 46%;
    width: 46vw;
    height: 46vw;
  }

  .hero__aura i:nth-child(3) {
    top: 24%;
    right: -8%;
    width: 50vw;
    height: 50vw;
  }

  .hero__aura i {
    filter: blur(60px);
  }

  .hero__stage {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: 44svh;
    margin: 0 calc(var(--pad) * -1);
  }

  /* Empilé : la bague, le mot, la phrase et ses boutons, puis les quatre états */
  .hero__foot {
    display: contents;
  }

  .hero__title {
    order: 1;
  }

  .hero__lead {
    order: 2;
    margin: 32px 0;
  }

  .hero__intro {
    font-size: 20px;
  }

  .hero__tools {
    order: 3;
    margin-bottom: 40px;
  }

  .cue {
    display: none;
  }

  .facts {
    grid-template-columns: 1fr;
    border-top: 0;
  }

  .fact,
  .fact:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--frost);
    border-left: 0;
  }

  .parcours__grid {
    grid-template-columns: 1fr;
  }

  .parcours__visual {
    z-index: 2;
    height: 44svh;
    margin: 0 calc(var(--pad) * -1);
    border-radius: 0;
  }

  .parcours__state {
    padding-inline: var(--pad);
  }

  .step {
    min-height: 52svh;
    padding: 40px 0;
  }

  .js .step .body {
    transform: none;
  }

  .info {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* --------------------------------------------------------------------------
   Mouvement réduit : tout est en place, rien ne bouge
   -------------------------------------------------------------------------- */

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

  .js [data-reveal],
  .js [data-words] .w__i,
  .js .hero__word .ch,
  .js .contact__word .ch,
  .js .hero__stage,
  .js .section::before,
  .js .step,
  .js .step .body,
  .js .tile .d {
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
    transition: none;
  }

  .js .manifeste__text .sw {
    opacity: 1;
  }

  .hero__aura i,
  .atelier__card::before,
  .wa::after,
  .cue::after,
  .is-gold .spark,
  .tile:hover .d {
    animation: none;
  }
}