/* ═══════════════════════════════════════════════════════════
   seize — feuille de style
   Noir, blanc chaud, Alte Haas. La couleur vient des clients.
   ═══════════════════════════════════════════════════════════ */

/* ── Polices ───────────────────────────────────────────────── */
@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("assets/fonts/AlteHaasGroteskRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("assets/fonts/AlteHaasGroteskBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Melodrame";
  src: url("assets/fonts/Melodrame.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Jetons ────────────────────────────────────────────────── */
:root {
  --noir: #050505;
  --noir-2: #0d0d0d;
  --noir-3: #161616;
  --blanc: #f2efe9;
  --dim: rgba(242, 239, 233, 0.56);
  --dim-2: rgba(242, 239, 233, 0.5);
  --trait: rgba(242, 239, 233, 0.32);
  --line: rgba(242, 239, 233, 0.13);

  --display:
    "Alte Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --script: "Melodrame", "Didot", Georgia, serif;

  --pad: clamp(1.25rem, 4.5vw, 5rem);
  --max: 1680px;
  --gap: clamp(0.75rem, 1.4vw, 1.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.65, 0, 0.35, 1);
  /* Couple non negociable : ce qui arrive se pose, ce qui part tombe.
     Rapport de duree 1 pour 2,5. Sans ca, une transition se lit comme une
     pulsation et non comme une direction. */
  --entree: cubic-bezier(0.16, 1, 0.3, 1);
  --sortie: cubic-bezier(0.7, 0, 0.84, 0);
  --vif: cubic-bezier(0.25, 1, 0.5, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--display);
  font-size: clamp(1rem, 0.93rem + 0.32vw, 1.1rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--blanc);
  color: var(--noir);
}

.skip {
  position: fixed;
  top: -100px;
  left: var(--pad);
  z-index: 200;
  background: var(--blanc);
  color: var(--noir);
  padding: 0.7rem 1.1rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.85rem;
}
.skip:focus {
  top: 1rem;
}

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

/* ── Grain ─────────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: -6%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-3%, 4%);
  }
  40% {
    transform: translate(4%, -2%);
  }
  60% {
    transform: translate(-2%, -4%);
  }
  80% {
    transform: translate(3%, 2%);
  }
}

/* ── Curseur ───────────────────────────────────────────────── */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  pointer-events: none;
  mix-blend-mode: difference;
  translate: -50% -50%;
  transition:
    scale 0.32s var(--ease),
    opacity 0.3s;
  opacity: 0;
}
.cursor.is-live {
  opacity: 1;
}
.cursor__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition:
    width 0.32s var(--ease),
    height 0.32s var(--ease);
}
.cursor.is-hot .cursor__dot {
  width: 54px;
  height: 54px;
}
@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1rem, 2vw, 1.6rem) var(--pad);
  transition:
    background 0.45s var(--ease),
    backdrop-filter 0.45s,
    transform 0.5s var(--ease);
}
.nav.is-stuck {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav.is-hidden {
  transform: translateY(-105%);
}

.nav__logo img {
  width: clamp(84px, 8.5vw, 118px);
  height: auto;
}

.nav__links {
  display: none;
  gap: clamp(1.4rem, 2.4vw, 2.6rem);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (min-width: 800px) {
  .nav__links {
    display: flex;
  }
}
.nav__links a {
  position: relative;
  padding-block: 0.3rem;
  color: var(--dim);
  transition: color 0.3s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  scale: 0 1;
  transform-origin: right;
  transition: scale 0.5s var(--ease);
}
.nav__links a:hover {
  color: var(--blanc);
}
.nav__links a:hover::after {
  scale: 1 1;
  transform-origin: left;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition:
    background 0.35s var(--ease),
    color 0.35s var(--ease),
    border-color 0.35s;
}
.nav__cta svg {
  width: 10px;
  height: 10px;
  transition: translate 0.35s var(--ease);
}
.nav__cta:hover {
  background: var(--blanc);
  color: var(--noir);
  border-color: var(--blanc);
}
.nav__cta:hover svg {
  translate: 2px -2px;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8rem var(--pad) 0;
  overflow: hidden;
}

.hero__wall {
  position: absolute;
  inset: -15% -2%;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  filter: grayscale(1) contrast(1.04) brightness(0.55);
}
@media (min-width: 760px) {
  .hero__wall {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1180px) {
  .hero__wall {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wall__col {
  display: grid;
  gap: var(--gap);
}
/* `drift` animait `transform` et battait donc la parallaxe dans la cascade :
   trois mouvements concurrents sur le meme objet, dont deux invisibles.
   Une seule respiration, sur le mur entier. */
.hero__wall {
  animation: souffle 24s ease-in-out infinite alternate;
}
@keyframes souffle {
  to {
    scale: 1.035;
  }
}
.wall__col:nth-child(3) {
}
.wall__col video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 3px;
  background: var(--noir-2);
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      135% 95% at 12% 92%,
      rgba(5, 5, 5, 0.96) 0%,
      rgba(5, 5, 5, 0.74) 38%,
      rgba(5, 5, 5, 0.22) 72%,
      transparent 88%
    ),
    linear-gradient(
      180deg,
      rgba(5, 5, 5, 0.88) 0%,
      rgba(5, 5, 5, 0.3) 26%,
      rgba(5, 5, 5, 0.55) 60%,
      var(--noir) 100%
    );
}

.hero__inner {
  max-width: var(--max);
  width: 100%;
  margin-inline: auto;
}

.hero__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: clamp(1.2rem, 3vw, 2.4rem);
}
.hero__eyebrow .dot {
  opacity: 0.45;
  margin-inline: 0.35em;
}

.hero__title {
  font-size: clamp(2.4rem, 7.4vw, 7.6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  /* 0.04em rognait les delies de Melodrame en permanence, pas seulement
     pendant l'animation. La marge negative garde la hauteur de ligne. */
  padding-block: 0.14em;
  margin-block: -0.14em;
}
.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
}
.hero__title.is-in .line > span {
  transform: none;
}
.hero__title .line:nth-child(2) > span {
  transition-delay: 0.09s;
}
.hero__title .line:nth-child(3) > span {
  transition-delay: 0.18s;
}
.line--em em {
  font-family: var(--script);
  font-style: normal;
  font-size: 1.16em;
  letter-spacing: 0;
  line-height: 0.9;
  display: inline-block;
  padding-right: 0.06em;
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(1.8rem, 4vw, 3.2rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.hero__foot p {
  color: var(--dim);
  max-width: 34ch;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.08rem);
}

.hero__ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 0.85rem;
  margin-inline: calc(var(--pad) * -1);
  overflow: hidden;
  white-space: nowrap;
}
.ticker__track {
  display: flex;
  width: max-content;
  /* Position integree dans la boucle JS : ecrire `animation-duration` a
     chaque frame recalculait la progression et faisait sauter le bandeau. */
  will-change: transform;
}
.ticker__track span {
  font-size: clamp(0.78rem, 0.75rem + 0.2vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim-2);
  padding-right: 1.2rem;
}

/* ── Boutons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: transparent;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease),
    border-color 0.4s;
  cursor: pointer;
}
.btn__icon {
  transition: translate 0.4s var(--ease);
}
.btn:hover {
  background: var(--blanc);
  color: var(--noir);
  border-color: var(--blanc);
}
.btn:hover .btn__icon {
  translate: 0 3px;
}
.btn--solid {
  background: var(--blanc);
  color: var(--noir);
  border-color: var(--blanc);
  padding-inline: 2rem;
}
.btn--solid:hover {
  background: transparent;
  color: var(--blanc);
  border-color: var(--blanc);
}
.btn--solid:hover .btn__icon {
  translate: 4px 0;
}

/* ── En-tête de section ────────────────────────────────────── */
.sec-head {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: 0.9rem;
  padding-bottom: clamp(2rem, 4.5vw, 3.5rem);
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}
@media (min-width: 900px) {
  .sec-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: start;
    gap: 2.5rem;
  }
}
/* La numerotation des chapitres est retiree : on ne chiffre plus,
   les titres portent seuls. Le span reste dans le HTML des sections
   deja traitees, on le coupe ici. */
.sec-head__idx {
  display: none;
}
.sec-head__title {
  font-size: clamp(2rem, 5.2vw, 4.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.sec-head__note {
  color: var(--dim);
  font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
  align-self: end;
}

section[id] {
  scroll-margin-top: clamp(5.5rem, 9vw, 8rem);
}

/* ── Manifeste ─────────────────────────────────────────────── */
.manifesto {
  position: relative;
  padding: clamp(4.5rem, 10vw, 8.5rem) var(--pad);
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: var(--max);
  margin-inline: auto;
}
@media (min-width: 940px) {
  .manifesto {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
  }
}

.manifesto__count {
  position: relative;
  height: clamp(9rem, 22vw, 20rem);
  display: grid;
  place-items: center;
}
.count__n {
  grid-area: 1 / 1;
  font-size: clamp(9rem, 24vw, 22rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 239, 233, 0.34);
  opacity: 0;
  scale: 1.25;
  transition:
    opacity 0.6s var(--ease),
    scale 0.9s var(--ease);
}
.count__n.is-on {
  opacity: 1;
  scale: 1;
}

.manifesto__text {
  display: grid;
  gap: 1.6rem;
  max-width: 46ch;
}
.manifesto__text p {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.75rem);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--dim);
}
.manifesto__text em {
  font-family: var(--script);
  font-style: normal;
  color: var(--blanc);
  font-size: 1.22em;
}
.manifesto__sign {
  color: var(--blanc);
}
.manifesto__sign strong {
  font-weight: 700;
}

/* ── Services ──────────────────────────────────────────────── */
.services {
  padding: clamp(3rem, 6vw, 5.5rem) var(--pad);
}
.svc {
  max-width: var(--max);
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.svc__item {
  position: relative;
  display: grid;
  gap: 0.5rem 2.5rem;
  padding: clamp(1.8rem, 3.6vw, 3.2rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.5s var(--ease);
}
@media (min-width: 900px) {
  .svc__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 14rem);
    align-items: baseline;
  }
  .svc__item:hover {
    padding-left: 1.2rem;
  }
}
.svc__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--blanc);
  scale: 1 0;
  transform-origin: bottom;
  transition: scale 0.55s var(--ease);
}
.svc__item:hover::before {
  scale: 1 1;
  transform-origin: top;
}

.svc__name {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.svc__desc {
  color: var(--dim);
  max-width: 48ch;
}
.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-self: center;
  justify-content: flex-end;
}
.svc__tags li {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--dim-2);
}

/* ── Travaux ───────────────────────────────────────────────── */
.work {
  padding: clamp(3rem, 6vw, 5.5rem) var(--pad) clamp(4rem, 8vw, 7rem);
}
.grid {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
}
@media (min-width: 760px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1180px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  position: relative;
  display: grid;
  /* Sans cette contrainte, le max-content du bandeau elargit la colonne
     au-dela de la carte et le texte deborde. */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 4px;
  background: var(--noir-2);
  transform: translateY(28px);
  opacity: 0;
  transition:
    transform 0.9s var(--ease),
    opacity 0.9s var(--ease);
}
.card.is-in {
  transform: none;
  opacity: 1;
}

/*
  Geometrie des cartes.
  Un cale invisible donne a la carte sa hauteur minimale par ratio ; le media,
  lui, remplit toujours 100 % de la case. Sans ca, une carte au ratio court
  laisse une bande noire quand sa rangee est etiree par une carte plus haute.
*/
.card::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 4 / 5;
}
.card--v::before,
.card--tall::before {
  aspect-ratio: 9 / 16;
}
.card--wide::before {
  aspect-ratio: 16 / 10;
}
.card--tall {
  grid-row: span 2;
}
.card--wide {
  grid-column: span 2;
}

.card__media {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
}
.card__media img,
.card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.04);
  transition:
    filter 0.7s var(--ease),
    scale 1.1s var(--ease);
}

.card--light {
  background: #e9e6e0;
}
.card--light .card__media img {
  filter: grayscale(0.6) contrast(1) brightness(1);
  object-fit: contain;
  padding: 8%;
}

.card:hover .card__media img,
.card:hover .card__media video {
  filter: none;
  scale: 1.035;
}
.card--light:hover .card__media img {
  filter: none;
  scale: 1.02;
}

.card__meta {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.8rem;
  padding: 2.6rem 1rem 0.9rem;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.86) 62%);
  translate: 0 6px;
  opacity: 0.82;
  transition:
    translate 0.55s var(--ease),
    opacity 0.55s var(--ease);
}
.card:hover .card__meta {
  translate: 0;
  opacity: 1;
}
.card__meta h3 {
  font-size: clamp(0.98rem, 0.95rem + 0.25vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.card__meta p {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Chiffres ──────────────────────────────────────────────── */
.stats {
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--pad);
  background: var(--noir-2);
}
.stat-row {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 640px) {
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .stat-row {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stat {
  background: var(--noir-2);
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2vw, 2rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
  transition: background 0.5s var(--ease);
}
.stat:hover {
  background: var(--noir-3);
}
.stat dt {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.stat .num {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.stat p {
  font-size: 0.88rem;
  color: var(--dim);
  max-width: 30ch;
}

/* ── Avis ──────────────────────────────────────────────────── */
.quotes {
  padding: clamp(4.5rem, 10vw, 8.5rem) var(--pad);
}
.quote {
  max-width: min(92vw, 58rem);
  margin-inline: auto;
  text-align: center;
}
.quote blockquote {
  max-width: min(92vw, 54rem);
  margin-inline: auto;
  font-size: clamp(1.4rem, 1.05rem + 1.9vw, 3rem);
  line-height: 1.22;
  letter-spacing: -0.032em;
  font-weight: 700;
  text-wrap: balance;
}
.quote blockquote::before {
  content: "« ";
  color: var(--dim-2);
}
.quote blockquote::after {
  content: " »";
  color: var(--dim-2);
}
.quote figcaption {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.quote figcaption em {
  font-style: normal;
  opacity: 0.6;
  text-transform: none;
  letter-spacing: 0.02em;
}
.star {
  width: 12px;
  height: 12px;
  background: var(--blanc);
  -webkit-mask: url("assets/PICTO_SEIZE_NOIR.svg") center / contain no-repeat;
  mask: url("assets/PICTO_SEIZE_NOIR.svg") center / contain no-repeat;
}

/* ── Studio ────────────────────────────────────────────────── */
.studio {
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--pad);
}
.studio__grid {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 940px) {
  .studio__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

.studio__text {
  display: grid;
  gap: 1.3rem;
  max-width: 34rem;
  align-content: start;
}
.studio__text p {
  color: var(--dim);
}
.studio__text .big {
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--blanc);
  max-width: 20ch;
}

.studio__people {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  align-content: start;
}
.person__ph {
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--line);
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: var(--noir-2);
  margin-bottom: 0.9rem;
  transition:
    border-color 0.5s var(--ease),
    background 0.5s var(--ease);
}
.person:hover .person__ph {
  border-color: rgba(242, 239, 233, 0.34);
  background: var(--noir-3);
}
.person__ph span {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.person h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.person p {
  font-size: 0.8rem;
  color: var(--dim);
}

.method {
  max-width: var(--max);
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
@media (min-width: 780px) {
  .method {
    grid-template-columns: repeat(3, 1fr);
  }
}
.method li {
  background: var(--noir);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2vw, 2rem);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.method span {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--dim-2);
}
.method h4 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.method p {
  font-size: 0.92rem;
  color: var(--dim);
  max-width: 32ch;
}

/* ── Contact ───────────────────────────────────────────────── */
.contact {
  padding: clamp(6rem, 13vw, 11rem) var(--pad);
  max-width: 78rem;
  margin-inline: auto;
  text-align: center;
}
.contact__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.contact__title {
  margin-top: 1.2rem;
  font-size: clamp(2.2rem, 6.4vw, 6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.038em;
}
.contact__title .line {
  display: block;
  overflow: hidden;
  padding-block: 0.05em;
}
.contact__title .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
}
.contact__title.is-in .line > span {
  transform: none;
}
.contact__title .line:nth-child(2) > span {
  transition-delay: 0.1s;
}
.contact__note {
  margin: 1.6rem auto 0;
  max-width: 46ch;
  color: var(--dim);
}

.form {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1.1rem;
  text-align: left;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  .form {
    grid-template-columns: 1fr;
  }
}
.field {
  display: grid;
  gap: 0.45rem;
}
.field--full {
  grid-column: 1 / -1;
}
.field label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.field input,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0;
  resize: vertical;
  transition: border-color 0.4s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(242, 239, 233, 0.22);
}
.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--blanc);
}
.form .btn {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.6rem;
}
.form__hint {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  color: var(--dim-2);
  letter-spacing: 0.04em;
}

/* ── Pied ──────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) var(--pad) clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: var(--max);
  margin-inline: auto;
}
@media (min-width: 900px) {
  .foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}
.foot__mark {
  align-self: start;
}
.foot__mark img {
  width: clamp(160px, 24vw, 340px);
  opacity: 0.9;
}
.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2rem;
  align-content: start;
}
.foot__cols h5 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin-bottom: 0.8rem;
  font-weight: 400;
}
.foot__cols a,
.foot__cols p {
  display: block;
  color: var(--dim);
  transition: color 0.3s;
  padding-block: 0.18rem;
}
.foot__cols a:hover {
  color: var(--blanc);
}
.todo {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.28);
  border: 1px dashed var(--line);
  padding: 0.16rem 0.5rem;
  border-radius: 3px;
}
.foot__legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--dim-2);
}

/* ── Révélations ───────────────────────────────────────────── */
.reveal,
.reveal-lines {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.85s var(--ease),
    transform 0.85s var(--ease);
}
.reveal.is-in,
.reveal-lines.is-in {
  opacity: 1;
  transform: none;
}
.reveal-lines:nth-of-type(2) {
  transition-delay: 0.08s;
}
.reveal-lines:nth-of-type(3) {
  transition-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal,
  .reveal-lines,
  .card {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__title .line > span,
  .contact__title .line > span {
    transform: none !important;
  }
  .count__n {
    opacity: 0;
  }
  .count__n.is-on {
    opacity: 1;
  }
  .grain {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   CHAPITRES EPINGLES
   Une piste haute + un ecran colle dedans. Le scroll dans la
   piste pilote un "temps" (beat) : c'est ce qui permet de faire
   comprendre le 3-2-1 au lieu de le faire clignoter.
   ═══════════════════════════════════════════════════════════ */
.scene {
  position: relative;
}
.scene[data-beats="4"] .scene__track {
  height: 380svh;
}
.scene[data-beats="5"] .scene__track {
  height: 460svh;
}
.scene__pin {
  position: sticky;
  z-index: 1;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  padding: clamp(5rem, 10vw, 7rem) var(--pad) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

.scene__label {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim-2);
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.scene__label span {
  color: var(--blanc);
  opacity: 0.5;
}

/* Jauge : la barre se vide, litteralement, comme les 3 secondes. */
.scene__bar {
  justify-self: center;
  width: min(30rem, 72vw);
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.scene__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--blanc);
  transform-origin: left;
  transform: scaleX(var(--drain, 1));
  transition: transform 0.12s linear;
}

/* ── 01 · le compte a rebours ─────────────────────────────── */
.count {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  text-align: center;
}

.count__digits {
  display: grid;
  place-items: center;
  height: clamp(9rem, 34vh, 24rem);
  transition: height 0.7s var(--ease);
}
/* Dernier temps : plus de chiffre, le texte remonte au centre. */
.count.is-end .count__digits {
  height: 0;
}
.count__d {
  grid-area: 1 / 1;
  font-size: clamp(9rem, 36vh, 26rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242, 239, 233, 0.5);
  opacity: 0;
  scale: 1.28;
  filter: blur(6px);
  transition:
    opacity 0.5s var(--ease),
    scale 0.75s var(--ease),
    filter 0.5s var(--ease);
}
.count__d.is-on {
  opacity: 1;
  scale: 1;
  filter: none;
  -webkit-text-stroke-color: var(--blanc);
}

.count__lines {
  display: grid;
  place-items: center;
  min-height: 6.5rem;
  width: min(38rem, 88vw);
}
.count__l {
  grid-area: 1 / 1;
  font-size: clamp(1.15rem, 1rem + 1vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--dim);
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity 0.5s var(--ease),
    translate 0.6s var(--ease);
  text-wrap: balance;
}
.count__l.is-on {
  opacity: 1;
  translate: 0;
}
.count__l--end {
  color: var(--blanc);
  font-weight: 700;
}
.count__l--end em {
  display: inline-block;
  margin-top: 0.5em;
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.15em;
  color: var(--dim);
}

/* ── 02 · la preuve ───────────────────────────────────────── */
.proof {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  width: min(52rem, 100%);
  margin-inline: auto;
}

.proof__total {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.proof__n {
  font-size: clamp(3.2rem, 2rem + 6vw, 7.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.proof__u {
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim-2);
}

.proof__list {
  width: 100%;
  display: grid;
  border-top: 1px solid var(--line);
}
.proof__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.15rem 1.2rem;
  padding: clamp(0.7rem, 1.6vw, 1.05rem) 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.55s var(--ease),
    translate 0.65s var(--ease);
}
.proof__row.is-on {
  opacity: 1;
  translate: 0;
}
.proof__who {
  font-size: clamp(0.98rem, 0.92rem + 0.35vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.proof__v {
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.proof__x {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--dim-2);
}
.proof__row--rest .proof__who,
.proof__row--rest .proof__v {
  color: var(--dim);
}

.proof__end {
  max-width: 44ch;
  text-align: center;
  color: var(--dim);
  font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.6s var(--ease),
    translate 0.7s var(--ease);
}
.proof__end.is-on {
  opacity: 1;
  translate: 0;
}
.proof__end em {
  font-family: var(--script);
  font-style: normal;
  font-size: 1.18em;
  color: var(--blanc);
}

/* ── Resultat chiffre sur une carte projet ────────────────── */
.card__win {
  flex-basis: 100%;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blanc);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.card__win::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("assets/PICTO_SEIZE_NOIR.svg") center / contain no-repeat;
  mask: url("assets/PICTO_SEIZE_NOIR.svg") center / contain no-repeat;
}

/* ── Respiration : une idee par ecran ─────────────────────── */
.quotes {
  position: relative;
}
.quotes > .scene__label {
  position: absolute;
  top: clamp(2.5rem, 6vw, 4.5rem);
  left: var(--pad);
}
.quotes,
.contact {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Sans JS ou en mouvement reduit : tout est lisible ────── */
.no-js .scene__track,
.reduced .scene__track {
  height: auto;
}
.no-js .scene__pin,
.reduced .scene__pin {
  position: static;
  height: auto;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.no-js .count__digits,
.reduced .count__digits,
.no-js .count__lines,
.reduced .count__lines {
  min-height: 0;
}
.no-js .count__d,
.no-js .count__l,
.no-js .proof__row,
.no-js .proof__end,
.reduced .count__d,
.reduced .count__l,
.reduced .proof__row,
.reduced .proof__end {
  position: static;
  grid-area: auto;
  opacity: 1;
  scale: 1;
  filter: none;
  translate: 0;
}
.no-js .count__d,
.reduced .count__d {
  -webkit-text-stroke-color: var(--blanc);
  font-size: clamp(4rem, 12vw, 8rem);
}
.no-js .scene__bar,
.reduced .scene__bar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .scene__track {
    height: auto !important;
  }
  .scene__pin {
    position: static;
    height: auto;
  }
}

/* ═══════════════════════════════════════════════════════════
   V3 — teinte client, audit progressif, cartes depliables
   ═══════════════════════════════════════════════════════════ */

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

/* ── Teinte ambiante ──────────────────────────────────────
   Le site reste noir et blanc. La seule couleur du fond est empruntee au
   client actuellement au centre de l'ecran — jamais une couleur seize.
   @property permet au navigateur d'interpoler la couleur d'un client a
   l'autre au lieu de sauter.                                            */
@property --teinte-active {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

.ambiance {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    72% 56% at 50% 82%,
    var(--teinte-active) 0%,
    transparent 68%
  );
  transition:
    opacity 0.9s var(--ease),
    --teinte-active 0.9s var(--ease);
}
.ambiance.is-on {
  opacity: 0.34;
}

/* ── Pastille d'audit ─────────────────────────────────────── */
.tally {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(5, 5, 5, 0.78);
  backdrop-filter: blur(16px);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  transition:
    color 0.4s,
    border-color 0.4s,
    background 0.4s;
  animation: tally-in 0.6s var(--ease) both;
}
@keyframes tally-in {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}
.tally:hover {
  color: var(--blanc);
  border-color: rgba(242, 239, 233, 0.35);
}
.tally.is-full {
  color: var(--noir);
  background: var(--blanc);
  border-color: var(--blanc);
}
.tally__dots {
  display: flex;
  gap: 4px;
}
.tally__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.45;
  transition:
    background 0.35s var(--ease),
    opacity 0.35s;
}
.tally__dots i.is-on {
  background: currentColor;
  opacity: 1;
}
.tally__txt b {
  font-weight: 700;
}

/* ── Les questions semees dans le scroll ──────────────────── */
.ask {
  border-block: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad);
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  text-align: center;
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 0.8s var(--ease),
    translate 0.8s var(--ease),
    background 0.5s var(--ease);
}
.ask.is-in {
  opacity: 1;
  translate: 0;
}
.quiz.is-pointed .quiz__q {
  animation: pointe 1.5s var(--ease);
}
@keyframes pointe {
  0%,
  100% {
    opacity: 1;
  }
  25%,
  60% {
    opacity: 0.45;
  }
}

.ask__q {
  font-size: clamp(1.25rem, 1rem + 1.3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.028em;
  max-width: 22ch;
  text-wrap: balance;
}

.ask__opts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.ask__o {
  padding: 0.72rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--dim);
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background 0.35s var(--ease),
    color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.ask__o:hover {
  color: var(--blanc);
  border-color: rgba(242, 239, 233, 0.34);
}
.ask__o.is-on {
  background: var(--blanc);
  border-color: var(--blanc);
  color: var(--noir);
  font-weight: 700;
}

.ask__note {
  font-size: 0.8rem;
  color: var(--dim-2);
  max-width: 46ch;
  transition: opacity 0.4s;
}
.ask.is-answered .ask__note {
  opacity: 0.35;
}

/* ── Recapitulatif dans le formulaire ─────────────────────── */
.recap {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 34rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--noir-2);
}
.recap__head {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin-bottom: 0.9rem;
}
.recap__list {
  display: grid;
  gap: 0.15rem 1rem;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
}
.recap__list dt {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--dim-2);
  padding-block: 0.25rem;
}
.recap__list dd {
  margin: 0;
  padding-block: 0.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.recap__edit {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--dim-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.3s;
}
.recap__edit:hover {
  color: var(--blanc);
}

/* ── Compte a rebours : l'anneau ──────────────────────────── */
.count__stage {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(11rem, 38vh, 26rem);
  aspect-ratio: 1;
  transition: height 0.7s var(--ease);
}
.count.is-end .count__stage {
  height: 0;
}
.count__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: -90deg;
  overflow: visible;
}
.count__ring circle {
  fill: none;
  stroke-width: 1.5;
  /* 2 x pi x 94, arrondi : la circonference du cercle ci-dessus */
  stroke-dasharray: 591;
}
.count__ring-bg {
  stroke: rgba(242, 239, 233, 0.1);
}
.count__ring-fg {
  stroke: var(--blanc);
  stroke-linecap: round;
  stroke-dashoffset: calc(591 * (1 - var(--drain, 1)));
}
.count.is-end .count__ring {
  opacity: 0;
  transition: opacity 0.4s;
}

.count__digits {
  height: auto;
}
.count__d {
  font-size: clamp(6rem, 24vh, 17rem);
}

/* ── Chapitre preuve : le reel a cote du chiffre ──────────── */
.proof {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: min(60rem, 100%);
  margin-inline: auto;
}
@media (min-width: 860px) {
  .proof {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
  }
}

/* Dernier temps : le reel s'efface, le total prend toute la place. */
.scene--proof .proof__side {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  width: 100%;
}
.proof__total {
  justify-content: flex-start;
}
@media (max-width: 859px) {
  .proof__total {
    justify-content: center;
  }
}

/* Les lignes prennent la teinte de leur client au moment ou elles arrivent. */
.proof__row.is-on .proof__v {
  color: var(--teinte, var(--blanc));
}
.proof__row--rest.is-on .proof__v {
  color: var(--dim);
}

/* ── Cartes projet depliables ─────────────────────────────── */
.card__toggle {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.card__toggle::after {
  content: "+";
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.5);
  color: var(--blanc);
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transition:
    opacity 0.4s var(--ease),
    rotate 0.45s var(--ease),
    background 0.4s;
}
.card:hover .card__toggle::after,
.card__toggle:focus-visible::after {
  opacity: 1;
}
.card.is-open .card__toggle::after {
  opacity: 1;
  rotate: 45deg;
  background: var(--blanc);
  color: var(--noir);
}

.card__more {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: stretch;
  pointer-events: none;
  display: grid;
  align-content: end;
  gap: 0.7rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0.3) 0%,
    rgba(5, 5, 5, 0.93) 46%
  );
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 0.5s var(--ease),
    translate 0.55s var(--ease);
  overflow-y: auto;
}
.card.is-open .card__more {
  opacity: 1;
  translate: 0;
}
.card__more h4 {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--teinte, var(--blanc));
}
.card__more p {
  font-size: clamp(0.82rem, 0.8rem + 0.15vw, 0.94rem);
  line-height: 1.5;
  color: var(--dim);
}
.card__more dl {
  display: grid;
  gap: 0.15rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.card__more dt {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.card__more dd {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
/* Le halo de la carte prend la couleur du client. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 1px transparent;
  transition: box-shadow 0.5s var(--ease);
}
.card:hover::after,
.card.is-open::after {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--teinte, #fff) 55%, transparent),
    0 0 40px -12px var(--teinte, transparent);
}
.card__win::before {
  background: var(--teinte, currentColor);
}

/* ── Emplacements d'avis a venir ──────────────────────────── */
.quotes__slots {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  width: min(58rem, 100%);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.slot {
  border: 1px dashed var(--line);
  border-radius: 4px;
  min-height: 7rem;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
}
.slot span {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.26);
}

/* ── Formulaire : le champ facultatif s'efface un peu ─────── */
.field--extra label span {
  text-transform: none;
  letter-spacing: 0;
  color: rgba(242, 239, 233, 0.22);
  font-size: 0.9em;
}

/* ── Sans JS / mouvement reduit ───────────────────────────── */
.no-js .tally,
.reduced .tally {
  display: none;
}
.no-js .card__toggle,
.no-js .card__more {
  display: none;
}
.no-js .ask,
.reduced .ask {
  opacity: 1;
  translate: 0;
}
.no-js .count__stage,
.reduced .count__stage {
  height: auto;
  aspect-ratio: auto;
}
.no-js .count__ring,
.reduced .count__ring {
  display: none;
}
.no-js 
/* `display: inline-flex` bat l'attribut `hidden`. Regle autonome : un
   commentaire entre le selecteur precedent et celui-ci le transformait en
   descendant, et la pastille restait visible a zero reponse. */
.tally[hidden],
.recap[hidden] {
  display: none !important;
}

/* Quand le detail s'ouvre, le bandeau du bas s'efface : sans ca, le nom du
   client et son resultat s'affichaient deux fois, superposes. */
.card.is-open .card__meta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

/* ═══════════════════════════════════════════════════════════
   V4 — LA LUMIERE

   Le recit reste sombre (hero, compte a rebours, services, travail,
   studio). Ce qui vend passe en clair : la preuve, les questions, les
   mots, l'audit. Un site entierement noir se lit comme un tunnel ;
   l'alternance donne le rythme et fait respirer.

   Convention dans un bloc .lumiere : `--noir` designe LE FOND et
   `--blanc` L'ENCRE. Les composants n'ont pas a savoir ou ils sont —
   ils lisent les memes jetons, qui s'inversent ici.
   ═══════════════════════════════════════════════════════════ */
.lumiere {
  --noir: #f4f1ea;
  --noir-2: #ebe6db;
  --noir-3: #e3ddcf;
  --blanc: #0b0b0b;
  --dim: rgba(11, 11, 11, 0.62);
  --dim-2: rgba(11, 11, 11, 0.58);
  --trait: rgba(11, 11, 11, 0.4);
  --line: rgba(11, 11, 11, 0.15);

  position: relative;
  background: var(--noir);
  color: var(--blanc);
}

/* Raccord doux entre un bloc sombre et un bloc clair : pas de trait net. */
.lumiere::before {
  content: "";
  position: absolute;
  inset: -5rem 0 auto 0;
  height: 5rem;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--noir));
}
.lumiere + .lumiere::before {
  display: none;
}

.lumiere .scene__pin,
.lumiere.scene .scene__track {
  background: var(--noir);
}

/* Le grain est fait pour du noir : sur fond clair il salit. */
.lumiere {
  isolation: isolate;
}

/* ── Le chapitre preuve, en clair ─────────────────────────── */
.proof {
  display: grid;
  align-content: center;
  gap: clamp(1.6rem, 3.5vw, 3rem);
  width: min(66rem, 100%);
  margin-inline: auto;
}

/* La bande de reels glisse d'un temps a l'autre. */
.proof__strip {
  display: flex;
  gap: var(--gap);
  width: max-content;
  translate: calc(var(--beat, 0) * -13.5%) 0;
  transition: translate 1s var(--ease);
}
.proof__strip video {
  width: clamp(6.5rem, 11vw, 11rem);
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 4px;
  background: var(--noir-2);
  /* Sur fond clair, les reels gardent leur couleur : c'est le sujet. */
  filter: saturate(1.02) contrast(1.02);
}

.proof__side {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
.proof__total {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.proof__n {
  font-size: clamp(3.4rem, 2rem + 7vw, 9rem);
  letter-spacing: -0.055em;
}
.proof__u {
  color: var(--dim-2);
}

.proof__list {
  display: grid;
  border-top: 1px solid var(--line);
}
.proof__row {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.1rem 1.1rem;
  align-items: baseline;
}
.proof__row .proof__v {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 2rem);
  color: var(--blanc);
}
.proof__row .proof__x {
  grid-column: auto;
  font-size: clamp(0.78rem, 0.76rem + 0.15vw, 0.9rem);
  letter-spacing: 0;
  color: var(--dim);
}
@media (max-width: 700px) {
  .proof__row {
    grid-template-columns: 1fr;
  }
  .proof__row .proof__x {
    grid-column: 1;
  }
}

/* ── Les questions, en clair et plus douces ───────────────── */
.ask {
  border-block: 0;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad);
  gap: 1.8rem;
}
.ask__q {
  font-size: clamp(1.35rem, 1.05rem + 1.6vw, 2.6rem);
  max-width: 20ch;
}
.ask__hint {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim-2);
}

/* Les options entrent une par une : la question a l'air de se poser,
   pas de tomber. */
.ask__o {
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 0.55s var(--ease),
    translate 0.6s var(--ease),
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.ask.is-in .ask__o {
  opacity: 1;
  translate: 0;
}
.ask.is-in .ask__o:nth-child(1) {
  transition-delay: 0.14s, 0.14s, 0s, 0s, 0s;
}
.ask.is-in .ask__o:nth-child(2) {
  transition-delay: 0.22s, 0.22s, 0s, 0s, 0s;
}
.ask.is-in .ask__o:nth-child(3) {
  transition-delay: 0.3s, 0.3s, 0s, 0s, 0s;
}
.ask.is-in .ask__o:nth-child(4) {
  transition-delay: 0.38s, 0.38s, 0s, 0s, 0s;
}
.ask.is-in .ask__o:nth-child(5) {
  transition-delay: 0.46s, 0.46s, 0s, 0s, 0s;
}

.ask__o {
  border-color: rgba(11, 11, 11, 0.22);
  color: rgba(11, 11, 11, 0.72);
}
.ask__o:hover {
  border-color: var(--blanc);
  color: var(--blanc);
}
.ask__o.is-on {
  background: var(--blanc);
  border-color: var(--blanc);
  color: var(--noir);
}

/* ── Avis et audit en clair ───────────────────────────────── */
.quotes .star {
  background: var(--blanc);
}
.slot {
  border-color: rgba(11, 11, 11, 0.18);
}
.slot span {
  color: rgba(11, 11, 11, 0.34);
}
.recap {
  background: rgba(11, 11, 11, 0.04);
}
.contact .btn--solid {
  background: var(--blanc);
  color: var(--noir);
  border-color: var(--blanc);
}
.contact .btn--solid:hover {
  background: transparent;
  color: var(--blanc);
}
.lumiere .field input,
.lumiere .field textarea {
  border-bottom-color: rgba(11, 11, 11, 0.22);
}
.lumiere .field input::placeholder,
.lumiere .field textarea::placeholder {
  color: rgba(11, 11, 11, 0.3);
}
.lumiere .todo {
  border-color: rgba(11, 11, 11, 0.2);
  color: rgba(11, 11, 11, 0.4);
}

/* Le halo client reste, mais plus franc sur fond clair. */
.lumiere .ambiance,
.ambiance {
  mix-blend-mode: normal;
}

/* Sur fond clair, la pastille s'inverse pour rester lisible. */
.tally {
  color: var(--blanc);
}

/* ── Le grain ne doit pas salir le clair ──────────────────── */
.grain {
  opacity: 0.03;
}

/* La V3 mettait le chapitre preuve sur deux colonnes (reel | chiffres).
   La bande de reels occupe desormais toute la largeur : une seule colonne,
   sinon le bloc chiffres est pousse hors de l'ecran. */
@media (min-width: 860px) {
  .proof {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }
}
.proof__strip {
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
.proof__side {
  width: min(48rem, 100%);
}

/* Raccord clair -> sombre, symetrique de .lumiere::before. Sans lui, le bas
   d'un bloc clair coupe net sur le noir. */
.lumiere::after {
  content: "";
  position: absolute;
  inset: auto 0 -5rem 0;
  height: 5rem;
  pointer-events: none;
  background: linear-gradient(180deg, var(--noir), transparent);
}
.lumiere:has(+ .lumiere)::after {
  display: none;
}

/* La chute du chapitre preuve suit l'alignement des lignes, pas le centre. */
.proof__end {
  max-width: 52ch;
  text-align: left;
  margin-inline: 0;
}

/* ═══════════════════════════════════════════════════════════
   V5 — PROFONDEUR, LAMES, QUESTIONS PLEIN ECRAN

   Trois partis pris, tires de la recherche :
   · les clients achetent des resultats — le chiffre monte dans le hero
   · la profondeur se fait en perspective + translateZ, jamais en top/left
   · la transition sombre/clair est un geste, pas un degrade
   ═══════════════════════════════════════════════════════════ */

/* ── Les lames ────────────────────────────────────────────────
   Douze lames verticales s'ouvrent depuis leur centre, en decale, et
   laissent passer le fond clair. Chaque lame connait son rang (--i) et
   deduit son ouverture de la progression du scroll (--p) : aucun calcul
   par lame en JS.                                                      */
.lames {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: min(34vh, 20rem);
  display: flex;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
/* Des lames SOMBRES qui se retirent depuis leur centre, posees a l'interieur
   de la section claire. La version precedente etait un bandeau clair pose
   au-DESSUS de la section : une fois ouvert, il laissait une plaque claire
   flottant sur le noir, et a mi-course il couvrait le texte du chapitre
   precedent. Ici, quand la transition est finie, il ne reste rien. */
.lames i {
  flex: 1 1 0;
  /* Le bord bas est fondu : au repos, le raccord sombre -> clair est un
     degrade court au lieu d'une ligne dure ; en mouvement, le bord de
     chaque lame reste feutre. */
  background: linear-gradient(
    to bottom,
    #050505 0%,
    #050505 74%,
    rgba(5, 5, 5, 0.85) 87%,
    rgba(5, 5, 5, 0) 100%
  );
  --d: max(calc(var(--i) - 5.5), calc(5.5 - var(--i)));
  --t: clamp(0, calc((var(--p, 0) - var(--d) * 0.035) / 0.615), 1);
  /* La lame se retire vers le haut ET s'amincit legerement : des fentes
     de clair s'ouvrent entre les lames pendant la course, un store qui
     se leve plutot qu'un rideau qui tombe d'un bloc. */
  transform: scale(
    calc(1 - var(--t) * 0.16),
    calc(1 - var(--t) * (2 - var(--t)))
  );
  transform-origin: top;
}
/* Une lame sur deux part un demi-temps plus tard : l'ouverture se tisse
   depuis le centre au lieu de tomber d'une piece. Meme duree totale. */
.lames i:nth-child(even) {
  --d: calc(max(calc(var(--i) - 5.5), calc(5.5 - var(--i))) + 1.6);
}
/* Le raccord en degrade n'a plus lieu d'etre : les lames font le travail. */
.lumiere::before {
  display: none;
}

/* ── Le fond vivant ───────────────────────────────────────────
   Un mesh lent dans la teinte du client actif. Volontairement discret :
   la preuve, ce sont les reels, pas le decor.                          */
.mesh {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.mesh.is-on {
  opacity: 1;
}

/* ── Le filet de progression ──────────────────────────────────
   Se dessine a gauche au fil du scroll. Repere de lecture, pas decor.  */
.beam {
  position: fixed;
  left: max(0.75rem, 2vw);
  top: 22vh;
  bottom: 22vh;
  width: 1px;
  z-index: 95;
  background: rgba(242, 239, 233, 0.14);
  pointer-events: none;
}
.beam i {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--avance, 0) * 100%);
  background: var(--blanc);
  transform-origin: top;
}
@media (max-width: 900px) {
  .beam {
    display: none;
  }
}

/* ── Le hero mene avec le resultat ────────────────────────────── */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 1.8rem;
}
.hero__stat {
  display: grid;
  gap: 0.1rem;
  padding-left: 1.6rem;
  border-left: 1px solid var(--line);
}
.hero__stat strong {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hero__stat span {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--dim-2);
}

/* ── Profondeur du mur de reels ───────────────────────────────
   Les colonnes vivent sur des plans differents. translate3d garde le
   travail sur le GPU ; on n'anime jamais top/left.                     */
.hero__wall {
  perspective: 1200px;
  transform-style: preserve-3d;
}
.wall__col {
  /* `translate` se compose avec `transform` au lieu de l'ecraser. */
  translate: 0 calc(var(--parallaxe, 0) * 1px);
}
/* Deux colonnes montent, deux descendent. Quatre colonnes qui vont dans le
   meme sens a des vitesses differentes se lisent comme « ca rame » ; des sens
   opposes se lisent comme de l'espace. */
.wall__col:nth-child(1) {
  --profondeur: 0.1;
}
.wall__col:nth-child(2) {
  --profondeur: -0.05;
}
.wall__col:nth-child(3) {
  --profondeur: 0.12;
}
.wall__col:nth-child(4) {
  --profondeur: -0.07;
}

/* ── Le chapitre preuve : la pile de reels a gauche ───────────── */
@media (min-width: 900px) {
  .proof {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}
.proof__deck {
  position: relative;
  aspect-ratio: 9 / 16;
  height: min(58svh, 34rem);
  width: auto;
  justify-self: center;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}
.proof__reel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  background: var(--noir-2);
  box-shadow: 0 30px 70px -30px rgba(11, 11, 11, 0.5);
  /* Au repos : range derriere, un peu plus loin et un peu tourne. */
  opacity: 0;
  transform: translate3d(-6%, 3%, -140px) rotateY(9deg);
  transition:
    opacity 0.7s var(--ease),
    transform 1s var(--ease);
}
.proof__reel.is-on {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateY(0deg);
  z-index: 2;
}
/* Le reel qui vient de passer reste visible derriere : on sent la pile. */
.proof__reel.is-passe {
  opacity: 0.28;
  transform: translate3d(7%, -3%, -180px) rotateY(-10deg);
  z-index: 1;
}

.proof__cta {
  justify-self: start;
  margin-top: 0.4rem;
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.6s var(--ease),
    translate 0.7s var(--ease),
    background 0.4s var(--ease),
    color 0.4s var(--ease);
}
.proof__cta.is-on {
  opacity: 1;
  translate: 0;
}

/* ── Les questions, plein ecran ───────────────────────────────── */
.quiz {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(6rem, 12vw, 9rem) var(--pad);
}
.quiz__inner {
  width: min(var(--max), 100%);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.quiz__idx {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--dim-2);
}
.quiz__idx span {
  color: var(--blanc);
  font-weight: 700;
}
.quiz__idx i {
  font-style: normal;
}
.quiz__q {
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 4.6rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.04em;
  max-width: 18ch;
  text-wrap: balance;
}
.quiz__hint {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin-top: -0.8rem;
}

.quiz__opts {
  display: grid;
  border-top: 1px solid var(--line);
  max-width: 56rem;
}
.quiz__o {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 1rem;
  padding: clamp(0.9rem, 2vw, 1.35rem) 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--dim);
  overflow: hidden;
  transition: color 0.4s var(--ease);
}
/* Un aplat balaie la ligne depuis la gauche au survol. */
.quiz__o::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blanc);
  transform: scaleX(0);
  /* Sortie par la droite : l'aplat continue dans le meme sens au lieu de
     rembobiner. */
  transform-origin: right;
  transition: transform 260ms var(--sortie);
  z-index: -1;
}
.quiz__o:hover::before,
.quiz__o:focus-visible::before {
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 320ms var(--entree);
}
/* Un accuse de clic au-dela de 200 ms se lit comme « ca n'a pas pris ». */
.quiz__o.is-on::before {
  transition: transform 200ms var(--vif);
}
.quiz__o:hover,
.quiz__o:focus-visible {
  color: var(--noir);
}
.quiz__n {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  opacity: 0.55;
}
.quiz__t {
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  transition: translate 0.5s var(--ease);
}
.quiz__o:hover .quiz__t,
.quiz__o:focus-visible .quiz__t {
  translate: 0.6rem 0;
}
.quiz__go {
  justify-self: end;
  opacity: 0;
  translate: -8px 0;
  transition:
    opacity 0.4s var(--ease),
    translate 0.5s var(--ease);
}
.quiz__o:hover .quiz__go,
.quiz__o:focus-visible .quiz__go {
  opacity: 1;
  translate: 0;
}

/* Choix retenu : la ligne reste allumee, les autres s'effacent. */
.quiz__o.is-on {
  color: var(--noir);
}
.quiz__o.is-on::before {
  transform: scaleX(1);
}
.quiz__o.is-on .quiz__go {
  opacity: 1;
  translate: 0;
}
.quiz.is-answered .quiz__o:not(.is-on) {
  opacity: 0.32;
}
.quiz.is-answered .quiz__o:not(.is-on):hover {
  opacity: 1;
}

.quiz__ack {
  min-height: 1.4em;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim-2);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.quiz.is-answered .quiz__ack {
  opacity: 1;
}

/* Les lignes entrent en cascade quand la question arrive. */
.quiz__o {
  opacity: 0;
  translate: 0 14px;
}
.quiz.is-in .quiz__o {
  opacity: 1;
  translate: 0;
  transition:
    opacity 0.6s var(--ease),
    translate 0.7s var(--ease),
    color 0.4s var(--ease);
}
/* Chaque bouton est fils unique de son <li> : `nth-child` sur le bouton
   matchait tout le monde et la cascade n'a jamais tourne. */
.quiz__opts > li:nth-child(1) {
  --n: 0;
}
.quiz__opts > li:nth-child(2) {
  --n: 1;
}
.quiz__opts > li:nth-child(3) {
  --n: 2;
}
.quiz__opts > li:nth-child(4) {
  --n: 3;
}
.quiz__opts > li:nth-child(5) {
  --n: 4;
}
.quiz.is-in .quiz__o {
  transition-delay: calc(260ms + var(--n, 0) * 70ms);
}
.quiz.is-answered .quiz__o {
  transition-delay: 0s;
}

/* ── Ticker : suit la vitesse du scroll ───────────────────────── */
.ticker__track {
  /* `skew` n'existe pas comme propriete individuelle ; seul `transform` la
     porte, et `translate` reste libre pour la position. */
  transform: skewX(calc(var(--penche, 0) * 1deg));
}

/* ── Repli sans JS / mouvement reduit ─────────────────────────── */
.no-js .lames,
.reduced .lames,
.no-js .beam,
.reduced .beam,
.no-js .mesh,
.reduced .mesh {
  display: none;
}
.no-js .quiz__o,
.reduced .quiz__o {
  opacity: 1;
  translate: 0;
}
.no-js .proof__reel:first-child,
.reduced .proof__reel:first-child {
  opacity: 1;
  transform: none;
}

/* Les lames sont un decor de fond : en z-index positif elles passaient
   devant la question. En negatif, elles restent au-dessus du fond de leur
   section mais sous tout le contenu. */
.lames {
  z-index: -1;
}
/* NE JAMAIS remettre .scene__pin ici : `position: relative` y ecrase
   `position: sticky` et plus aucun chapitre ne s'epingle. */
.quiz__inner,
.quote,
.quotes > .scene__label,
.quotes__slots,
.contact > *:not(.lames) {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   SANS JS — la contrainte etait ecrite et pas tenue : sans JS,
   ni titre, ni cartes, ni titres de section n'apparaissaient.
   ═══════════════════════════════════════════════════════════ */
.no-js .reveal,
.no-js .reveal-lines,
.no-js .card,
.no-js .quiz,
.no-js .quiz__o {
  opacity: 1;
  transform: none;
  translate: 0;
}
.no-js .hero__title .line > span,
.no-js .contact__title .line > span {
  transform: none;
}
.no-js .proof__row,
.no-js .proof__end {
  opacity: 1;
  translate: 0;
}
/* En mouvement reduit, le passage sombre -> clair redevient un degrade :
   sans lames et sans degrade, c'etait une coupure nette. */
.reduced .lumiere::before {
  display: block;
}

/* ── L'etoile de seize ponctue chaque titre de chapitre ─────
   Le picto est le seul signe propre a la marque : il doit revenir,
   pas seulement vivre en favicon. Les numeros ont disparu : l'etoile
   vit desormais au bout des grands titres. */
.sec-head__title::after,
.metiers__titre-gros::after {
  content: "";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: 0.24em;
  vertical-align: baseline;
  background: var(--teinte, currentColor);
  -webkit-mask: url("assets/PICTO_SEIZE_NOIR.svg") center / contain no-repeat;
  mask: url("assets/PICTO_SEIZE_NOIR.svg") center / contain no-repeat;
}

/* ═══════════════════════════════════════════════════════════
   IDENTITE — hierarchie, respiration, profondeur

   Trois defauts diagnostiques : cinq tailles d'affichage dans un rapport
   de 1 a 2 (donc aucun classement lisible), quatorze echelles d'espacement
   sans rapport entre elles, et une seule et meme revelation appliquee a
   quatorze elements differents. C'est ca qui faisait « fait par defaut ».
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Quatre respirations, plus quatorze. Le site prend un pouls. */
  --sp-1: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  --sp-2: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  --sp-3: clamp(3rem, 2.2rem + 3vw, 5rem);
  --sp-4: clamp(5rem, 3.5rem + 6vw, 9rem);
}

body {
  line-height: 1.6;
  letter-spacing: 0;
}

/* Echelle d'affichage, rapport 1,62 : aucun palier confondable.
   D0 le chiffre de preuve · D1 l'ouverture et la fermeture ·
   D2 les chapitres · D3 le courant fort. */
.proof__n {
  font-size: clamp(4rem, 2rem + 9vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
  min-width: 6.6ch;
}
.hero__title,
.contact__title {
  font-size: clamp(2.6rem, 5.6vw, 7.25rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.sec-head__title,
.quiz__q {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.032em;
}
.svc__name,
.quiz__t,
.quote blockquote,
.count__l {
  font-size: clamp(1.3rem, 1rem + 1.1vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.024em;
}
.count__l--end {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem);
}

.services,
.work,
.methode,
.quotes {
  padding-block: var(--sp-4);
}
.sec-head {
  padding-bottom: var(--sp-3);
}

/* ── Trois gestes nommes, plus un seul repete ──────────────
   Un titre de chapitre se DEVOILE (masque qui monte), un paragraphe
   MONTE, une carte se POSE. Trois vocabulaires, trois durees. */
.sec-head__title.reveal {
  clip-path: inset(0 0 108% 0);
  transform: none;
  opacity: 1;
  transition: clip-path 0.82s cubic-bezier(0.76, 0, 0.24, 1);
}
.sec-head__title.reveal.is-in {
  clip-path: inset(0 0 -12% 0);
}

.card {
  transform: translateY(20px) scale(0.985);
  transition:
    transform 0.72s var(--entree) var(--retard, 0ms),
    opacity 0.48s var(--vif) var(--retard, 0ms);
}
.card.is-in {
  transform: none;
}

/* ── La profondeur de la grille ────────────────────────────
   La geometrie de la grille ne bouge JAMAIS : c'est l'interieur des
   cartes qui vit. L'alignement reste intact, donc la comparaison entre
   projets aussi, et pourtant chaque tuile respire. */
.card__media img,
.card__media video {
  scale: 1.12;
  translate: 0 calc(var(--c, 0) * -26px);
}
.card.is-in {
  /* Seule la carte vraiment centree ressort. En lineaire, tout serait
     vaguement moyen et ca se lirait comme du flou. */
  scale: calc(0.968 + 0.032 * var(--e, 0));
  opacity: calc(0.82 + 0.18 * var(--e, 0));
}
/* L'ombre de contact : c'est elle qui donne la profondeur, pas le
   deplacement. Pre-cuite, on n'anime que son opacite. */
.card::before {
  content: "";
  position: absolute;
  inset: 8% 4% -6% 4%;
  z-index: -1;
  border-radius: 12px;
  box-shadow: 0 34px 68px -22px rgba(0, 0, 0, 0.95);
  opacity: calc(var(--e, 0) * 0.9);
  pointer-events: none;
}

/* ── Le bandeau de navigation suit le fond de la section ── */
.nav.is-stuck {
  background: color-mix(in srgb, var(--fond-nav, #050505) 74%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card.is-in {
    scale: 1;
    opacity: 1;
    transform: none;
  }
  .card__media img,
  .card__media video {
    scale: 1;
    translate: 0;
  }
  .sec-head__title.reveal {
    clip-path: none;
  }
}

/* Au-dessus d'une section claire, la nav inverse son encre. */
.nav.is-clair {
  color: #0b0b0b;
}
.nav.is-clair .nav__logo img {
  filter: invert(1);
}
.nav.is-clair .nav__cta {
  border-color: rgba(11, 11, 11, 0.2);
}
.nav.is-clair .nav__cta:hover {
  background: #0b0b0b;
  color: #f4f1ea;
  border-color: #0b0b0b;
}

/* ═══════════ CORRECTIFS ═══════════ */

/* L'etoile collee au numero de chapitre ne tenait pas : elle se lisait comme
   une coquille, pas comme une signature. Elle repart. */
.sec-head__idx::after,
.scene__label span::after,
.quiz__idx span::after {
  content: none;
}

/* Le chapitre preuve debordait de son ecran epingle : le bouton d'appel
   tombait sous la ligne de flottaison et disparaissait. Tout doit tenir. */
.proof__n {
  font-size: clamp(3rem, 1.6rem + 6.4vw, 8.2rem);
  line-height: 0.84;
}
.proof {
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
}
.proof__side {
  gap: clamp(0.6rem, 1.2vw, 1rem);
}
.proof__row {
  padding-block: clamp(0.5rem, 1.1vw, 0.8rem);
}
.proof__end {
  font-size: 0.88rem;
  max-width: 46ch;
}
.proof__deck {
  height: min(52svh, 30rem);
}
.proof__cta {
  padding-block: 0.75rem;
}

/* Filet de securite : si l'observateur n'a pas encore marque un titre, il
   reste invisible. Un titre de chapitre absent est pire que pas d'animation. */
.sec-head__title.reveal {
  clip-path: inset(0 0 108% 0);
}
/* V36 : plus de revelation globale par .js-pret — elle posait tous les
   titres d'avance et aucune entree ne se voyait plus au scroll. Le filet
   par visibilite (main.js, 2 s) couvre les titres coinces a l'ecran. */
.sec-head__title.reveal.is-in {
  clip-path: inset(0 0 -12% 0);
}

/* Le bouton touchait encore le bord bas de l'ecran epingle. */
.proof__deck {
  height: min(46svh, 27rem);
}
.proof__n {
  font-size: clamp(2.8rem, 1.5rem + 5.6vw, 7rem);
}
.proof__end {
  font-size: 0.84rem;
  max-width: 52ch;
}

/* Au survol d'un projet, le fond assume franchement sa couleur. */
.ambiance.is-fort {
  opacity: 0.52;
  transition:
    opacity 0.45s var(--entree),
    --teinte-active 0.45s var(--entree);
}

/* ═══════════════════════════════════════════════════════════
   L'IDENTITE seize, telle qu'elle existe deja

   Le dossier POST AOUT montre un vocabulaire visuel qui n'etait nulle
   part sur le site : des bulles blanches arrondies, des mots entoures
   au feutre, l'etoile, et un vert chartreuse. On le reprend comme
   accent d'interface, la palette clients reste libre et pastel.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Etait un vert-jaune de notification : hors sujet sur un site dont la
     couleur vient uniquement des clients. Un ambre de veille tient le
     role « ca tourne » sans se prendre pour une marque. */
  --vert: #d98b32;
}

/* Le mot entoure au feutre. Le trait se dessine a la revelation. */
.cercle {
  position: relative;
  font-style: normal;
  display: inline-block;
  white-space: nowrap;
}
.cercle::after {
  content: "";
  position: absolute;
  left: -0.28em;
  right: -0.28em;
  top: -0.16em;
  bottom: -0.16em;
  border: 2px solid var(--vert);
  border-radius: 50%;
  rotate: -1.6deg;
  scale: 0 1;
  transform-origin: left center;
  transition: scale 0.62s var(--entree) 0.28s;
  pointer-events: none;
}
.is-in .cercle::after,
.reveal.is-in.cercle::after,
.cercle.is-in::after {
  scale: 1 1;
}

/* ── Le curseur : l'etoile, plus un point ─────────────────── */
.cursor__dot {
  border-radius: 0;
  background: var(--blanc);
  -webkit-mask: url("assets/PICTO_SEIZE_NOIR.svg") center / contain no-repeat;
  mask: url("assets/PICTO_SEIZE_NOIR.svg") center / contain no-repeat;
  width: 18px;
  height: 18px;
}
.cursor.is-hot .cursor__dot {
  width: 46px;
  height: 46px;
}

/* ── L'analyse du compte ──────────────────────────────────── */
.scan__zone {
  display: grid;
  gap: var(--sp-2);
  max-width: 46rem;
}
.scan__champ {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  border-bottom: 2px solid var(--blanc);
  padding-bottom: 0.5rem;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.scan__champ span {
  color: var(--dim-2);
}
.scan__champ input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  outline: none;
}
.scan__champ input::placeholder {
  color: rgba(11, 11, 11, 0.22);
}

.scan__ecran {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  background: rgba(11, 11, 11, 0.03);
  display: grid;
  gap: 0.9rem;
  animation: monte 0.5s var(--entree) both;
}
@keyframes monte {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}
.scan__tete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
}
.scan__pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 0 0 var(--vert);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  70% {
    box-shadow: 0 0 0 9px rgba(216, 232, 132, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(216, 232, 132, 0);
  }
}
.scan__nom {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.scan__etat {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.scan__barre {
  height: 3px;
  background: rgba(11, 11, 11, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.scan__barre i {
  display: block;
  height: 100%;
  width: calc(var(--avancee, 0) * 1%);
  background: var(--vert);
  transition: width 0.7s var(--entree);
}
.scan__lignes {
  display: grid;
  gap: 0.3rem;
  font-size: 0.84rem;
  color: var(--dim-2);
}
.scan__lignes li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0.4;
  transition:
    opacity 0.4s var(--entree),
    color 0.4s;
}
.scan__lignes li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition:
    background 0.4s,
    border-color 0.4s;
}
.scan__lignes li.is-fait {
  opacity: 1;
  color: var(--blanc);
}
.scan__lignes li.is-fait::before {
  background: var(--vert);
  border-color: var(--vert);
}

/* Les etapes de la methode vivent maintenant dans .colab,
   tout en bas de cette feuille : une ligne, quatre gares, une scene. */

/* La pastille d'audit devient la jauge d'analyse. */
.tally__txt b {
  color: var(--vert);
}

/* ═══════════════════════════════════════════════════════════
   L'ANALYSE QUI SUIT LE VISITEUR
   ═══════════════════════════════════════════════════════════ */

/* Le filet vertical qui descendait le long du site ne servait a rien. */
.beam {
  display: none !important;
}

/* La pastille devient un signal fin : pas de boite, pas de flou, juste
   un chiffre, le compte analyse et un trait qui avance. */
.tally {
  position: fixed;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 110;
  display: grid;
  gap: 0.45rem;
  justify-items: end;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  mix-blend-mode: difference;
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: tally-in 0.7s var(--entree) both;
}
.tally:hover {
  color: #fff;
}
.tally__txt {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.tally__qui {
  font-style: normal;
  opacity: 0.55;
  text-transform: none;
  letter-spacing: 0.02em;
}
.tally__txt b {
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
}
.tally__ligne {
  display: block;
  width: clamp(4.5rem, 9vw, 7rem);
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}
.tally__ligne i {
  display: block;
  height: 100%;
  width: calc(var(--pct, 0) * 1%);
  background: #fff;
  transition: width 0.8s var(--entree);
}
.tally.is-full .tally__ligne i {
  background: var(--vert);
}
.tally__cible {
  display: none;
}

/* ── L'ecran d'analyse, sur fond sombre ───────────────────── */
.scan .scan__champ input::placeholder {
  color: rgba(242, 239, 233, 0.24);
}
.scan .scan__ecran {
  background: rgba(242, 239, 233, 0.04);
  border-color: rgba(242, 239, 233, 0.14);
}
.scan .scan__barre {
  background: rgba(242, 239, 233, 0.12);
}
.scan__zone {
  margin-inline: auto;
  width: min(46rem, 100%);
}
/* Cette section-la se centre : c'est un moment, pas un paragraphe. */
.scan .quiz__inner {
  justify-items: center;
  text-align: center;
}
.scan .quiz__q {
  max-width: 22ch;
}
.scan .scan__lignes {
  text-align: left;
}

/* Le curseur doit coller a la fleche, pas la suivre de loin. */
.cursor {
  transition:
    scale 0.3s var(--entree),
    opacity 0.3s;
}

/* ═══════════════════════════════════════════════════════════
   LA LOUPE — le projet a sa taille reelle
   La grille ne porte que des titres. Tout le texte vit ici, apres le
   clic, quand la personne a decide qu'elle voulait en savoir plus.
   ═══════════════════════════════════════════════════════════ */
.loupe {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.loupe[hidden] {
  display: none;
}
.loupe__fond {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
  animation: fondu 0.35s ease both;
}
@keyframes fondu {
  from {
    opacity: 0;
  }
}
.loupe__boite {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  width: min(78rem, 100%);
  max-height: 100%;
  animation: loupe-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes loupe-in {
  from {
    opacity: 0;
    translate: 0 22px;
    scale: 0.98;
  }
}
@media (min-width: 880px) {
  .loupe__boite {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.loupe__media {
  display: grid;
  place-items: center;
  max-height: min(82svh, 46rem);
  overflow: auto;
}
.loupe__media video,
.loupe__media img {
  display: block;
  max-height: min(82svh, 46rem);
  width: auto;
  max-width: 100%;
  border-radius: 6px;
  scale: var(--echelle, 1);
  transform-origin: center;
  transition: scale 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}
.loupe__texte {
  color: var(--blanc);
  display: grid;
  gap: 0.8rem;
  align-content: center;
  max-width: 40ch;
}
.loupe__texte h4 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--teinte, var(--blanc));
}
.loupe__texte p {
  color: var(--dim);
  line-height: 1.55;
}
.loupe__texte dl {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}
.loupe__texte dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.loupe__texte dd {
  margin: 0;
  font-weight: 700;
}
.loupe__fermer {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.7);
  color: var(--blanc);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s;
}
.loupe__fermer:hover {
  background: var(--blanc);
  color: var(--noir);
}
.loupe__taille {
  position: absolute;
  left: 0;
  bottom: -3rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--dim-2);
}
.loupe__taille button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--blanc);
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s;
}
.loupe__taille button:hover {
  background: var(--blanc);
  color: var(--noir);
}
@media (max-width: 879px) {
  .loupe__taille {
    display: none;
  }
}

/* La grille ne montre plus que le titre : le detail vit dans la loupe. */
.card__more {
  display: none;
}
.card__toggle::after {
  content: "↗";
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   V11 · Le hero EST les trois secondes
   Le visiteur ne lit pas qu'il a trois secondes : il les vit, montre en
   main, avant que la page ne lui dise ce qu'elles valent. Tant que le
   compte tourne, il n'y a rien d'autre a regarder.
   ═══════════════════════════════════════════════════════════════════════ */

.hero {
  justify-content: center;
  text-align: center;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__foot {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.hero__foot p {
  max-width: 30ch;
  text-align: center;
}
.hero__stat strong {
  color: var(--blanc);
  font-weight: 700;
}

/* Le mur reste sourd et flou pendant le compte : rien ne doit voler
   l'attention au chiffre. Il s'allume quand le compte tombe. */
.js-cd .hero__wall {
  transition:
    filter 1.1s var(--ease),
    scale 1.4s var(--ease);
}
.js-cd .hero:not(.is-live) .hero__wall {
  filter: grayscale(1) brightness(0.26) blur(13px);
  scale: 1.12;
}

.js-cd .hero:not(.is-live) .hero__title .line > span {
  transform: translateY(115%) !important;
}
.js-cd .hero:not(.is-live) .hero__title {
  opacity: 0;
}
.hero__title {
  transition: opacity 0.5s var(--ease) 0.1s;
}
.js-cd .hero:not(.is-live) .hero__eyebrow,
.js-cd .hero:not(.is-live) .hero__foot,
.js-cd .hero:not(.is-live) .hero__ticker,
.js-cd .hero:not(.is-live) ~ * .nav,
.js-cd:not(.est-vivant) .nav {
  opacity: 0;
}
.hero__eyebrow,
.hero__foot,
.hero__ticker,
.nav {
  transition: opacity 0.85s var(--ease) 0.12s;
}

/* ── Le compte a rebours ─────────────────────────────────── */
.cd {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition:
    opacity 0.6s var(--ease),
    scale 0.9s var(--ease),
    filter 0.6s var(--ease);
}
.cd.is-done {
  opacity: 0;
  scale: 0.68;
  filter: blur(10px);
}

.cd__ring {
  grid-area: 1 / 1;
  width: min(44vmin, 360px);
  aspect-ratio: 1;
  rotate: -90deg;
  overflow: visible;
}
.cd__bg,
.cd__fg {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.cd__bg {
  stroke: rgba(242, 239, 233, 0.13);
}
.cd__fg {
  stroke: var(--blanc);
  stroke-linecap: round;
  stroke-dasharray: 691.15;
  stroke-dashoffset: calc(691.15 * var(--p, 0));
}

.cd__n {
  grid-area: 1 / 1;
  font-size: min(24vmin, 13rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--blanc);
}
.cd.tick .cd__n {
  animation: cd-frappe 0.62s var(--ease);
}
@keyframes cd-frappe {
  0% {
    scale: 1.55;
    opacity: 0;
    filter: blur(14px);
  }
  38% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}

.cd__l {
  grid-area: 1 / 1;
  align-self: center;
  translate: 0 calc(min(44vmin, 360px) * 0.66);
  font-size: clamp(1rem, 1.9vw, 1.45rem);
  color: var(--blanc);
  white-space: nowrap;
  overflow: hidden;
  padding-block: 0.2em;
}
.cd__l span {
  display: block;
}
.cd.tick .cd__l span {
  animation: cd-monte 0.62s var(--ease);
}
@keyframes cd-monte {
  from {
    transform: translateY(110%);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd {
    display: none;
  }
  .js-cd .hero:not(.is-live) .hero__wall {
    filter: grayscale(1) contrast(1.04) brightness(0.55);
    scale: 1;
  }
  .js-cd .hero:not(.is-live) .hero__title .line > span {
    transform: none !important;
  }
  .js-cd .hero:not(.is-live) .hero__eyebrow,
  .js-cd .hero:not(.is-live) .hero__foot,
  .js-cd .hero:not(.is-live) .hero__ticker,
  .js-cd:not(.est-vivant) .nav {
    opacity: 1;
  }
}

/* Le bandeau reste colle en bas : `justify-content: center` groupait tous
   les enfants au milieu et laissait un bloc noir mort sous le ticker. */
.hero__inner {
  margin-block: auto;
}
.hero__ticker {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   V11 · Les metiers
   La section la plus vendeuse du site ne doit pas etre un paragraphe.
   A gauche quatre noms, a droite la matiere produite pour chacun. Le
   texte n'apparait que si on le demande, dans la loupe.
   ═══════════════════════════════════════════════════════════════════════ */

.metiers {
  position: relative;
  background: var(--noir);
}
.metiers .scene__pin {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-content: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  padding: clamp(5rem, 9vh, 7rem) var(--pad) clamp(3rem, 6vh, 5rem);
}
@media (min-width: 900px) {
  .metiers .scene__pin {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    max-width: var(--max);
    margin-inline: auto;
  }
  .metiers__head {
    grid-column: 1 / -1;
  }
  .metiers__liste {
    grid-column: 1;
    align-self: center;
  }
  .metiers__scene {
    grid-column: 2;
    grid-row: 2;
  }
}

.metiers__note {
  color: var(--dim);
  max-width: 46ch;
  margin-top: 0.9rem;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.06rem);
}

/* ── La colonne des quatre noms ──────────────────────────── */
.metiers__liste {
  display: grid;
  gap: clamp(0.2rem, 1.4vh, 0.9rem);
  align-content: center;
}
.metier {
  border-top: 1px solid var(--line);
}
.metier:last-child {
  border-bottom: 1px solid var(--line);
}

.metier__btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: clamp(0.7rem, 1.8vh, 1.25rem) 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.metier__n {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--dim-2);
  transition: color 0.4s var(--ease);
  flex: none;
}
.metier__nom {
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--dim-2);
  transition:
    color 0.5s var(--ease),
    translate 0.6s var(--ease);
  flex: 1;
}
.metier__plus {
  font-size: 1rem;
  color: var(--dim-2);
  opacity: 0;
  translate: -0.4rem 0;
  transition:
    opacity 0.4s var(--ease),
    translate 0.4s var(--ease);
  flex: none;
}

.metier.is-on .metier__nom {
  color: var(--blanc);
  translate: 0.4rem 0;
}
.metier.is-on .metier__n {
  color: var(--teinte-active, var(--blanc));
}
.metier.is-on .metier__plus {
  opacity: 0.8;
  translate: 0 0;
}
.metier__btn:hover .metier__nom,
.metier__btn:focus-visible .metier__nom {
  color: var(--blanc);
}
.metier__btn:hover .metier__plus {
  opacity: 1;
  translate: 0 0;
}

/* Les tags ne servent que le metier actif : sinon c'est un mur de mots. */
.metier__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  list-style: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.6s var(--ease),
    opacity 0.5s var(--ease),
    padding-bottom 0.6s var(--ease);
}
.metier.is-on .metier__tags {
  max-height: 6rem;
  opacity: 1;
  padding-bottom: clamp(0.6rem, 1.6vh, 1.1rem);
}
.metier__tags li {
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3em 0.75em;
}

/* ── Le collage de droite ────────────────────────────────── */
.metiers__scene {
  position: relative;
  min-height: min(58svh, 520px);
  isolation: isolate;
}
.mfig {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: clamp(0.4rem, 1vw, 0.75rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease);
}
.mfig.is-on {
  opacity: 1;
  pointer-events: auto;
}
.mfig > video,
.mfig > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  background: var(--noir-2);
  opacity: 0;
  translate: 0 2.2rem;
  transition:
    opacity 0.6s var(--ease),
    translate 0.75s var(--ease);
}
.mfig.is-on > video,
.mfig.is-on > img {
  opacity: 1;
  translate: 0 0;
}
.mfig > :nth-child(1) {
  grid-area: 1 / 1 / 7 / 4;
  transition-delay: 0.04s;
}
.mfig > :nth-child(2) {
  grid-area: 1 / 4 / 4 / 7;
  transition-delay: 0.14s;
}
.mfig > :nth-child(3) {
  grid-area: 4 / 4 / 7 / 7;
  transition-delay: 0.24s;
}

/* La lueur prend la teinte mesuree sur le client montre. */
.mfig::after {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(
    60% 55% at 50% 55%,
    var(--teinte, transparent) 0%,
    transparent 72%
  );
  opacity: 0;
  filter: blur(60px);
  transition: opacity 0.8s var(--ease);
}
.mfig.is-on::after {
  opacity: 0.34;
}

.mfig .card__more {
  display: none;
}

@media (max-width: 899px) {
  .metiers .scene__pin {
    min-height: auto;
  }
  .metiers__scene {
    min-height: 46svh;
    order: 3;
  }
  .metier__nom {
    font-size: clamp(1.7rem, 8vw, 2.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mfig,
  .mfig > video,
  .mfig > img {
    transition: none;
  }
}

/* La section metiers utilise le meme moteur epingle que les chapitres,
   sans en heriter la mise en page. 320svh : quatre temps confortables. */
.metiers .scene__track {
  height: 340svh;
}
.metiers .scene__pin {
  height: 100svh;
  overflow: hidden;
}
.no-js .metiers .scene__track,
.reduced .metiers .scene__track {
  height: auto;
}
.no-js .metiers .scene__pin,
.reduced .metiers .scene__pin {
  position: static;
  height: auto;
  min-height: 0;
}
.no-js .mfig,
.reduced .mfig {
  position: relative;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   V11 · La fin
   Personne n'aime un formulaire. Tout le monde aime un rapport a son nom
   deja a moitie ecrit. A gauche ce qu'on sait deja, a droite la seule
   ligne qui manque.
   ═══════════════════════════════════════════════════════════════════════ */

.fin {
  position: relative;
  padding: clamp(5rem, 12vh, 9rem) var(--pad) clamp(4rem, 9vh, 7rem);
}
.fin__grille {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .fin__grille {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

/* ── Le rapport ──────────────────────────────────────────── */
.rapport {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--blanc) 4%, transparent);
}
.rapport__tete {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8rem;
}
.rapport__pastille {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teinte-active, var(--noir));
  flex: none;
  animation: pouls 2.4s ease-in-out infinite;
}
@keyframes pouls {
  50% {
    opacity: 0.28;
  }
}
.rapport__nom {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.rapport__etat {
  margin-left: auto;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.rapport__barre {
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  margin: 1rem 0 1.4rem;
  overflow: hidden;
}
.rapport__barre i {
  display: block;
  height: 100%;
  width: calc(var(--avancee, 0) * 1%);
  background: var(--noir);
  transition: width 0.7s var(--ease);
}

.rapport__lignes {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin-top: 1.2rem;
}
.rapport__lignes li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--dim);
  transition: color 0.5s var(--ease);
}
.rapport__lignes li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: none;
  translate: 0 -0.1em;
  transition:
    background 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
.rapport__lignes li.is-fait {
  color: var(--noir);
}
.rapport__lignes li.is-fait::before {
  background: var(--noir);
  border-color: var(--noir);
}

.rapport__vide {
  font-size: 0.92rem;
  color: var(--dim);
  max-width: 42ch;
}
.rapport:has(.recap:not([hidden])) .rapport__vide {
  display: none;
}

.recap__head {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.75rem;
}
.recap__list {
  display: grid;
  gap: 0.15rem 0;
}
.recap__list dt {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 0.7rem;
}
.recap__list dd {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.recap__edit {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.recap__edit:hover {
  color: var(--noir);
}

/* ── La derniere ligne ───────────────────────────────────── */
.envoi__eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem;
}
.envoi__note {
  color: var(--dim);
  max-width: 44ch;
  margin: 1.4rem 0 2rem;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.06rem);
}
.fin .contact__title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.form {
  display: grid;
  gap: 1.1rem;
  max-width: 30rem;
}
.form__champ {
  display: grid;
  gap: 0.4rem;
}
.form__champ label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.form__champ input {
  font: inherit;
  font-size: 1.05rem;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0;
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
}
.form__champ input:focus {
  outline: none;
  border-bottom-color: var(--noir);
}
.form__champ input::placeholder {
  color: var(--dim-2);
}

.btn--plein {
  justify-self: start;
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
  margin-top: 0.5rem;
}
.btn--plein:hover {
  background: color-mix(in srgb, var(--noir) 82%, var(--blanc));
}
.form__hint {
  font-size: 0.8rem;
  color: var(--dim);
  max-width: 40ch;
}
.form__ok {
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* ── Les deux avis, cote a cote ──────────────────────────── */
.quotes__duo {
  max-width: var(--max);
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 820px) {
  .quotes__duo {
    grid-template-columns: 1fr 1fr;
  }
}
.quotes__duo .quote {
  margin: 0;
  max-width: none;
}

/* Dans un bloc `.lumiere`, --noir est le FOND et --blanc l'ENCRE. Ecrire
   les regles avec ces deux noms les rend justes des deux cotes du site. */
.rapport__pastille {
  background: var(--teinte-active, var(--blanc));
}
.rapport__barre i {
  background: var(--blanc);
}
.rapport__lignes li.is-fait {
  color: var(--blanc);
}
.rapport__lignes li.is-fait::before {
  background: var(--blanc);
  border-color: var(--blanc);
}
.recap__edit:hover {
  color: var(--blanc);
}
.form__champ input:focus {
  border-bottom-color: var(--blanc);
}
.btn--plein {
  background: var(--blanc);
  color: var(--noir);
  border-color: var(--blanc);
}
.btn--plein:hover {
  background: transparent;
  color: var(--blanc);
}

/* Le recapitulatif vit maintenant DANS le rapport : plus de boite dans
   la boite, plus de largeur propre. */
.rapport .recap {
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
}
.rapport .recap__list {
  grid-template-columns: 1fr;
  gap: 0;
}
.rapport .recap__list dt {
  margin-top: 0.85rem;
}
.rapport .recap__list dt:first-child {
  margin-top: 0;
}

/* ── L'odometre ────────────────────────────────────────────
   Les chiffres roulent, mais ils ne s'arretent que sur des totaux reels.
   Aucun palier intermediaire n'est lisible : c'est voulu. */
.odo {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: baseline;
  line-height: 1;
}
.odo i {
  display: block;
  font-style: normal;
  translate: 0 calc(var(--d, 0) * -1em);
  transition: translate 1.05s cubic-bezier(0.16, 1, 0.3, 1) var(--r, 0s);
}
.odo b {
  display: block;
  height: 1em;
  line-height: 1;
  font-weight: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .odo i {
    transition: none;
  }
}

/* ── L'avancee de l'audit, dans la barre du haut ───────────
   Elle etait dans un rectangle pose en bas a droite : une notification,
   pas un site. Ici c'est un filet sous la nav, il suit toute la page. */
.nav__jauge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: transparent;
  pointer-events: none;
}
.nav__jauge::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct, 0) * 1%);
  background: currentColor;
  transition: width 0.8s var(--ease);
}
.nav.est-en-cours .nav__jauge {
  color: var(--blanc);
  opacity: 0.55;
}
.nav.est-plein .nav__jauge {
  opacity: 1;
}
.nav.est-en-cours .nav__cta {
  font-variant-numeric: tabular-nums;
}
.beam {
  display: none !important;
}

/* Le texte de la loupe se lisait par-dessus le media : il lui faut un fond. */
.loupe__texte {
  background: var(--noir-2, #111);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   V12 · Respiration
   Rien n'est coupe, rien ne se colle. Les masques de ligne rognaient les
   accents et les jambages ; les fentes de l'odometre rognaient les
   chiffres eux-memes. Une boite de texte ne fait jamais exactement 1em.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── L'odometre ne rogne plus ses chiffres ────────────────── */
.odo {
  --h: 1.24em;
  height: var(--h);
  translate: 0 0.13em;
}
.odo i {
  translate: 0 calc(var(--d, 0) * -1 * var(--h));
}
.odo b {
  height: var(--h);
  line-height: var(--h);
}

/* ── Tout masque de ligne garde de la marge haute et basse ─ */
.contact__title .line,
.quiz__q .line,
.sec-head__title .line {
  padding-block: 0.16em;
  margin-block: -0.16em;
}
.hero__title .line {
  padding-block: 0.18em;
  margin-block: -0.18em;
}

/* Les intitules en capitales perdaient leurs accents en haut. */
.envoi__eyebrow,
.hero__eyebrow,
.scene__label,
.sec-head__idx,
.quiz__idx,
.metier__n,
.rapport__etat,
.recap__list dt,
.form__champ label {
  line-height: 1.5;
}

/* ── Les avis ne se collent plus a leur intitule ──────────── */
.quotes {
  padding-block: clamp(6rem, 14vh, 10rem) clamp(4rem, 10vh, 7rem);
}
.quotes > .scene__label {
  position: static;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.quotes__duo {
  padding-inline: var(--pad);
}

/* ── La fin respire ──────────────────────────────────────── */
.envoi__eyebrow {
  margin-bottom: 1.4rem;
}
.fin .contact__title {
  padding-block: 0.1em;
}

/* ── On ouvre les cases du travail ────────────────────────
   Quatre colonnes serrees rendaient chaque projet illisible : le titre
   mangeait l'image. Trois colonnes au maximum, et de l'air entre. */
.grid {
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
}
@media (min-width: 760px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1180px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── « Ce qu'on fait » se voit ────────────────────────────── */
.metiers__head .scene__label {
  font-size: 0.8rem;
}
.metiers__head .scene__label span {
  font-size: 0.8rem;
}
.metiers__titre-gros {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.04em;
  margin-top: 0.5rem;
}
.metiers__note {
  margin-top: 1.1rem;
}

/* ── La loupe : le texte avait 40ch dans une colonne etroite ─ */
.loupe__texte {
  max-width: 46ch;
  gap: 1.1rem;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  line-height: 1.62;
}
.loupe__texte h3,
.loupe__texte h4 {
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--teinte, var(--blanc));
}
.loupe__texte p {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.14rem);
}
@media (min-width: 880px) {
  .loupe__boite {
    gap: clamp(1.8rem, 4vw, 3.5rem);
  }
}

/* ── La nav n'a plus de liens : le logo et l'audit, rien d'autre ─ */
.nav {
  justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════════════════
   V12 · L'ecran de compte
   Taper son pseudo ne doit pas ressembler a remplir un champ : ca doit
   ressembler a voir son propre compte passer sous un scanner. Les tuiles
   sont une simulation assumee, la mention le dit noir sur blanc.
   ═══════════════════════════════════════════════════════════════════════ */

/* Le vert « notification » ne racontait rien de la marque. Un ambre de
   veille : ca dit « en train de tourner » sans crier. */
.scan {
  --signal: #d98b32;
}
.scan__pastille {
  background: var(--signal);
  box-shadow: 0 0 0 0 var(--signal);
}
.scan__barre i {
  background: var(--signal);
}

.scan__grille {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 780px) {
  .scan__grille {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
}

/* ── Le telephone ────────────────────────────────────────── */
.phone {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem;
  background: color-mix(in srgb, var(--blanc) 5%, transparent);
  display: grid;
  gap: 0.85rem;
}
.phone__tete {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.phone__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(
    from 210deg,
    var(--signal),
    var(--teinte-active, var(--signal)),
    var(--signal)
  );
  position: relative;
}
.phone__avatar::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--noir);
}
.phone__qui {
  display: grid;
  min-width: 0;
}
.phone__qui .scan__nom {
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone__sous {
  font-size: 0.72rem;
  color: var(--dim);
  line-height: 1.5;
}

.phone__feed {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  overflow: hidden;
  border-radius: 4px;
}
.phone__feed i {
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--blanc) 8%, transparent);
  opacity: 0;
  scale: 0.86;
  animation: tuile-pose 0.5s var(--ease) both;
  animation-delay: calc(var(--t) * 0.075s);
}
@keyframes tuile-pose {
  to {
    opacity: 1;
    scale: 1;
  }
}
/* Le balai : une passe lumineuse qui traverse le feed en boucle. */
.phone__balai {
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--signal) 55%, transparent),
    transparent
  );
  animation: balai 2.6s ease-in-out 0.7s infinite;
  pointer-events: none;
}
@keyframes balai {
  to {
    translate: 350% 0;
  }
}

.scan__droite {
  display: grid;
  gap: 0.9rem;
  align-content: center;
}
.scan__mention {
  font-size: 0.75rem;
  color: var(--dim);
  line-height: 1.6;
  max-width: 40ch;
}

@media (prefers-reduced-motion: reduce) {
  .phone__feed i {
    animation: none;
    opacity: 1;
    scale: 1;
  }
  .phone__balai {
    display: none;
  }
}

/* L'ecran de compte prend toute la largeur utile : c'est le moment ou le
   visiteur se voit lui-meme, pas une vignette perdue au milieu. */
.scan__ecran {
  max-width: var(--max);
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 780px) {
  .scan__grille {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}
.scan__droite {
  text-align: left;
}
.scan__lignes li {
  text-align: left;
}
.scan__mention {
  text-align: left;
}
.phone__feed i {
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--blanc) 11%, transparent),
    color-mix(in srgb, var(--blanc) 4%, transparent)
  );
}
.phone__balai {
  mix-blend-mode: screen;
  opacity: 0.8;
}

/* L'ecran de compte n'est pas une reponse a une question : c'est le
   moment ou le visiteur se voit. Il sort de la colonne du quiz. */
.scan .quiz__inner {
  max-width: none;
}
.scan .quiz__idx,
.scan .quiz__q,
.scan .scan__champ {
  max-width: 46rem;
  margin-inline: auto;
}
.scan__ecran {
  max-width: min(70rem, 100%);
}
.scan__ecran > .scan__grille {
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* Le media prenait `auto`, c'est-a-dire tout, et le texte se retrouvait
   sur douze caracteres par ligne. On reserve d'abord la colonne de
   lecture, le media prend ce qui reste. */
@media (min-width: 880px) {
  .loupe__boite {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    align-items: center;
  }
  .loupe__media {
    grid-column: 1;
  }
  .loupe__texte {
    grid-column: 2;
    max-width: none;
  }
}
.loupe__texte {
  align-content: start;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  border-radius: 6px;
}

/* `.quotes` heritait de `min-height: 100svh` + centrage : combine au
   nouveau padding, ca creait un demi-ecran de vide au-dessus et au-dessous
   de deux phrases. Le padding suffit. */
.quotes {
  min-height: 0;
  display: block;
}
.quotes > .scene__label {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* ═══════════════════════════════════════════════════════════════════════
   V13 · Le fond suit vraiment le curseur
   La teinte mettait 0.9 s a fondre a 34 % d'opacite : on ne voyait rien
   passer. Un panneau orange doit donner un fond orange TOUT DE SUITE,
   et le panneau rose juste a cote un fond rose.
   ═══════════════════════════════════════════════════════════════════════ */
.ambiance {
  background: radial-gradient(
    92% 74% at 50% 74%,
    var(--teinte-active) 0%,
    transparent 72%
  );
  transition:
    opacity 0.45s var(--ease),
    --teinte-active 0.16s linear;
}
.ambiance.is-on {
  opacity: 0.46;
}
.ambiance.is-fort {
  opacity: 0.78;
}

/* ── L'odometre, pour de bon ───────────────────────────────
   La fente faisait 1.24em dans une ligne de 0.84em : elle depassait sa
   propre boite de ligne et se faisait rogner en haut et en bas. La ligne
   s'ouvre a la hauteur de la fente, et on rattrape par la marge. */
.proof__n {
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin-block: -0.19em;
}
.odo {
  --h: 1.28em;
  height: var(--h);
  line-height: var(--h);
  vertical-align: top;
  translate: 0;
}
.odo b {
  height: var(--h);
  line-height: var(--h);
}
.odo i {
  translate: 0 calc(var(--d, 0) * -1 * var(--h));
}

/* ── Le travail revient a la mosaique dense ────────────────
   Trois colonnes rendaient chaque case fine et morte. Quatre colonnes en
   flux dense, c'est la version qui marchait. */
@media (min-width: 760px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1180px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.grid {
  gap: clamp(0.55rem, 1.1vw, 1rem);
}

/* ── La fin perd ses traits et ses bordures ────────────────── */
.rapport {
  border: 0;
  padding: 0;
  background: none;
}
.rapport__lignes li::before {
  display: none;
}
.rapport__lignes li {
  gap: 0;
}
.form__ok {
  border: 0;
  background: color-mix(in srgb, var(--blanc) 7%, transparent);
}
.form__champ input {
  border-bottom-color: color-mix(in srgb, var(--blanc) 18%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   V13 · Le collage des metiers, autrement
   Trois blocs egaux empiles, ca ressemblait a un gabarit. Un grand cadre
   decale, une colonne haute a droite et une bande basse : ca se lit comme
   une planche contact, et chaque piece s'ouvre au clic.
   ═══════════════════════════════════════════════════════════════════════ */
.mfig {
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(0.35rem, 0.9vw, 0.7rem);
}
.mfig > :nth-child(1) {
  grid-area: 1 / 1 / 6 / 6;
  transition-delay: 0.04s;
}
.mfig > :nth-child(2) {
  grid-area: 2 / 6 / 9 / 9;
  transition-delay: 0.13s;
}
.mfig > :nth-child(3) {
  grid-area: 6 / 1 / 9 / 6;
  transition-delay: 0.22s;
}
.mfig > video,
.mfig > img {
  border-radius: 3px;
  transition:
    opacity 0.6s var(--ease),
    translate 0.75s var(--ease),
    filter 0.4s var(--ease);
}
.mfig > [data-zoom]:hover {
  filter: brightness(1.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   V13 · Le feed qui se monte
   Les publications ne s'affichent pas : elles ARRIVENT. Chaque carte
   entre en volant depuis la droite, tourne, et se pose dans la grille.
   Neuf cartes, et le feed est monte sous ses yeux.

   La rampe de teinte (violet -> cyan -> ambre) est un etat d'interface,
   pas une couleur de marque : elle ne vit que dans cet ecran d'analyse.
   ═══════════════════════════════════════════════════════════════════════ */
.phone {
  --a: #7b5cff;
  --b: #2fd4c8;
  --c: #ffb43d;
}

.phone__feed {
  gap: 4px;
  perspective: 900px;
}
.phone__feed i {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--a) calc((9 - var(--k)) * 9%), transparent),
    color-mix(in srgb, var(--b) calc(var(--k) * 8%), transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blanc) 9%, transparent);
  opacity: 0;
  animation: carte-arrive 0.72s cubic-bezier(0.18, 0.9, 0.24, 1) both;
  animation-delay: calc(var(--k) * 0.085s);
  scale: 1;
}
/* Le grain de la vignette : une trame diagonale, pas un aplat mort. */
.phone__feed i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    58deg,
    color-mix(in srgb, var(--blanc) 7%, transparent) 0 2px,
    transparent 2px 9px
  );
  opacity: 0.5;
}
@keyframes carte-arrive {
  from {
    opacity: 0;
    translate: 190% -60%;
    rotate: 16deg;
    scale: 1.45;
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }
}

.phone__balai {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--b) 65%, transparent),
    color-mix(in srgb, var(--c) 45%, transparent),
    transparent
  );
  animation-delay: 1.2s;
}

.phone__avatar {
  background: conic-gradient(
    from 200deg,
    var(--a),
    var(--b),
    var(--c),
    var(--a)
  );
  animation: avatar-tourne 9s linear infinite;
}
@keyframes avatar-tourne {
  to {
    rotate: 1turn;
  }
}

.phone__prive {
  font-size: 0.74rem;
  color: var(--dim);
  line-height: 1.55;
}

.scan__titre {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.scan__tete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .phone__feed i {
    animation: none;
    opacity: 1;
  }
  .phone__avatar {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V14 · La couleur se pose SOUS le curseur, pas sur toute la page
   Un lavis plein ecran a 78 % ne montrait pas la couleur du panneau
   survole : il barbouillait le site entier en boue et effacait les
   projets. La teinte vit maintenant dans une tache qui suit la souris.
   ═══════════════════════════════════════════════════════════════════════ */
.ambiance.is-on {
  opacity: 0.2;
}
.ambiance.is-fort {
  opacity: 0.3;
}

.tache {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: min(48vmax, 780px);
  aspect-ratio: 1;
  margin: calc(min(48vmax, 780px) / -2);
  translate: var(--tx, 50vw) var(--ty, 50vh);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at center,
    var(--teinte-active, transparent) 0%,
    color-mix(in srgb, var(--teinte-active, transparent) 45%, transparent) 34%,
    transparent 68%
  );
  filter: blur(46px);
  mix-blend-mode: screen;
  transition:
    opacity 0.4s var(--ease),
    --teinte-active 0.14s linear;
}
.tache.is-on {
  opacity: 0.62;
}
/* Sur fond clair, `screen` delave : on repasse en multiplication douce. */
.lumiere .tache,
.tache.sur-clair {
  mix-blend-mode: multiply;
  filter: blur(52px);
}

/* Les cartes gardent leur contraste : la tache passe DERRIERE elles. */
.card,
.grid {
  position: relative;
  z-index: 1;
}

/* ── Aucun chiffre n'est rogne, nulle part ─────────────────── */
.proof__v,
.card__win,
.hero__stat strong,
.rapport__etat,
.quiz__o,
.proof__u {
  line-height: 1.45;
}
.proof__v {
  padding-block: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* ── Plus d'orange : l'accent d'interface passe au bleu electrique ──
   Hugo a refuse le vert, puis l'orange. Ce bleu est froid, il ne
   ressemble a aucune teinte client, et il se lit sur les deux fonds. */
:root {
  --vert: #4d7cff;
}
.scan {
  --signal: #4d7cff;
}

/* ═══════════════════════════════════════════════════════════════════════
   V15 · La couleur devient un projecteur, pas un lavis
   La tache faisait 780 px de large avec 46 px de flou : elle recouvrait
   la page entiere et verdissait tout le portfolio. Elle se resserre a la
   taille d'une carte et gagne en force. On voit la couleur LA ou on est,
   et nulle part ailleurs.
   ═══════════════════════════════════════════════════════════════════════ */
.tache {
  width: min(26vmax, 420px);
  margin: calc(min(26vmax, 420px) / -2);
  filter: blur(26px);
  background: radial-gradient(
    circle at center,
    var(--teinte-active, transparent) 0%,
    color-mix(in srgb, var(--teinte-active, transparent) 55%, transparent) 42%,
    transparent 70%
  );
}
.tache.is-on {
  opacity: 0.85;
}
.lumiere .tache,
.tache.sur-clair {
  filter: blur(30px);
}
/* Le lavis global disparait : il n'apportait que de la boue. */
.ambiance.is-on,
/* La carte survolee prend la couleur qu'on lit dedans : le lien entre
   « ce que je regarde » et « ce que le site fait » devient explicite. */
.card {
  transition:
    transform 0.72s var(--entree) var(--retard, 0ms),
    opacity 0.72s var(--entree) var(--retard, 0ms),
    box-shadow 0.35s var(--ease);
}
.card.est-teinte {
  box-shadow:
    0 0 0 1px
      color-mix(in srgb, var(--teinte-vive, transparent) 70%, transparent),
    0 26px 70px -22px
      color-mix(in srgb, var(--teinte-vive, transparent) 85%, transparent);
}

/* ── Chaque piece du collage dit de qui elle est ────────────── */
.mpiece {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
}
.mpiece > video,
.mpiece > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mpiece::after {
  content: attr(data-nom);
  position: absolute;
  left: 0.55rem;
  bottom: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blanc);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
  opacity: 0.9;
  pointer-events: none;
}
.mfig > .mpiece {
  opacity: 0;
  translate: 0 2.2rem;
  transition:
    opacity 0.6s var(--ease),
    translate 0.75s var(--ease);
}
.mfig.is-on > .mpiece {
  opacity: 1;
  translate: 0 0;
}
.mfig > .mpiece:nth-child(1) {
  grid-area: 1 / 1 / 6 / 6;
  transition-delay: 0.04s;
}
.mfig > .mpiece:nth-child(2) {
  grid-area: 2 / 6 / 9 / 9;
  transition-delay: 0.13s;
}
.mfig > .mpiece:nth-child(3) {
  grid-area: 6 / 1 / 9 / 6;
  transition-delay: 0.22s;
}

/* Le projecteur doit etre franc : on doit VOIR le fond passer a l'orange,
   au rose puis au vert en traversant l'affiche. Assez large pour se lire,
   assez serre pour ne pas repeindre la page. */
.tache {
  width: min(34vmax, 580px);
  margin: calc(min(34vmax, 580px) / -2);
  filter: blur(34px);
}
.tache.is-on {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   V16 · La fin, sans couture
   Bandes noires sur les bords, trait au-dessus du rapport, rupture entre
   la section et le pied : trois defauts qui donnaient une page bricolee.
   ═══════════════════════════════════════════════════════════════════════ */
.fin,
.foot {
  background: var(--noir);
  isolation: auto;
}
.fin::before,
.foot::before {
  display: none;
}
/* Le pied prolonge la fin au lieu de repartir a zero. */
.foot {
  border-top: 0;
  padding-top: clamp(3rem, 7vh, 5rem);
  margin-top: 0;
}
.rapport__barre {
  margin-top: 0.9rem;
}
.rapport__tete {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Le pied etait limite a `--max` et centre : d'ou deux bandes noires sur
   les cotes. Le fond va d'un bord a l'autre, seul le contenu est borne. */
.foot {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--pad);
}
.foot > * {
  max-width: var(--max);
  margin-inline: auto;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   V17 · La mosaïque, en grand
   J'avais tout ramene a des carres egaux : la grille est devenue une
   feuille de contact sans hierarchie. On revient a la mosaique d'origine
   (ratios varies, flux dense, cartes qui s'etalent) mais en TROIS
   colonnes au lieu de quatre : mêmes formes, cases beaucoup plus grandes.
   ═══════════════════════════════════════════════════════════════════════ */
.grid {
  grid-auto-flow: dense;
  gap: clamp(0.7rem, 1.5vw, 1.3rem);
}
@media (min-width: 760px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1180px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card::before {
  aspect-ratio: 4 / 5;
}
.card--v::before,
.card--tall::before {
  aspect-ratio: 9 / 16;
}
.card--wide::before {
  aspect-ratio: 16 / 10;
}
.card--tall {
  grid-row: span 2;
}
.card--wide {
  grid-column: span 2;
}

/* Les titres suivent l'echelle des cases. */
.card__meta h3 {
  font-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.5rem);
}

/* « gratuitement » en Melodrame debordait sa boite de ligne et se faisait
   rogner en bas. Les jambages ont maintenant leur place. */
.contact__title .line,
.fin .contact__title .line {
  padding-block: 0.24em;
  margin-block: -0.24em;
  overflow: visible;
}

/* La promesse remplace la checklist : ce que LUI reçoit, pas ce que NOUS
   faisons. Une phrase, grande, et c'est tout. */
.scan__promesse {
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.025em;
  max-width: 20ch;
  text-wrap: balance;
}
.scan__droite {
  gap: 1.4rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   V18 · Le mur, au lieu du faux feed
   On ne peut pas lire son Instagram : Meta a supprime toute lecture par
   cle en 2020, l'API exige que le proprietaire du compte autorise chez
   eux. Alors on ne simule pas son feed. On lui montre en GRAND ce qu'on
   mettrait dessus, son pseudo estampille par-dessus. Quatre reels pleine
   hauteur qui arrivent en volant, pas neuf vignettes.
   ═══════════════════════════════════════════════════════════════════════ */
.mur {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
}
@media (min-width: 900px) {
  .mur {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mur__case {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 9 / 16;
  background: var(--noir-2);
  opacity: 0;
  animation: mur-arrive 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--k) * 0.11s);
}
.mur__case video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mur__case figcaption {
  position: absolute;
  left: 0.7rem;
  bottom: 0.65rem;
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blanc);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  opacity: 0.88;
}
@keyframes mur-arrive {
  from {
    opacity: 0;
    translate: 0 14%;
    scale: 1.12;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }
}

/* Le pseudo est estampille par-dessus le mur, en grand. C'est SON nom
   qui tient l'ecran, pas une vignette de profil. */
.mur__signature {
  position: absolute;
  inset: auto 0 -0.1em 0;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  pointer-events: none;
  translate: 0 40%;
}
.mur__signature .scan__nom {
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.1;
  color: var(--blanc);
  text-shadow: 0 8px 40px rgba(5, 5, 5, 0.85);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mur__signature span {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

.scan__grille {
  align-items: start;
}
@media (min-width: 780px) {
  .scan__grille {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
}
.scan__ecran {
  max-width: min(78rem, 100%);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

@media (prefers-reduced-motion: reduce) {
  .mur__case {
    animation: none;
    opacity: 1;
  }
}

/* `.scan__zone` etait borne a 46rem : le mur, la signature et la promesse
   se retrouvaient tous ecrases dans une colonne de 530 px. Seul le CHAMP
   de saisie garde cette largeur ; l'ecran prend toute la page. */
.scan__zone {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}
.scan__champ {
  width: min(46rem, 100%);
  margin-inline: auto;
}
.scan__ecran {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  max-width: min(88rem, 100%);
  margin-inline: auto;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  .scan__grille {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}
.scan__promesse {
  max-width: 24ch;
  font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem);
  line-height: 1.2;
}
.mur__signature .scan__nom {
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
}
.mur__signature {
  translate: 0 32%;
}

/* ═══════════════════════════════════════════════════════════════════════
   V19 · Téléphone
   Le site glissait de gauche à droite. `overflow-x: clip` coupe le
   débordement SANS casser `position: sticky`, contrairement à
   `overflow: hidden` qui aurait tué tous les chapitres épinglés.
   ═══════════════════════════════════════════════════════════════════════ */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Aucun mot ne dépasse sa colonne, même un pseudo à rallonge. */
.mur__signature,
.mur__signature .scan__nom,
.scan__nom,
.rapport__nom,
.recap__list dd,
.card__meta h3,
.card__meta p {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mur__signature .scan__nom {
  overflow-wrap: normal;
}

@media (max-width: 760px) {
  /* Les titres tenaient sur une ligne et se faisaient couper. */
  .hero__title,
  .contact__title,
  .metiers__titre-gros,
  .sec-head__title,
  .quiz__q {
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .hero__title {
    font-size: clamp(2rem, 9.5vw, 3.2rem);
  }
  .metiers__titre-gros {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }
  .fin .contact__title {
    font-size: clamp(1.9rem, 9.5vw, 2.8rem);
  }
  .proof__n {
    font-size: clamp(2.4rem, 13vw, 4rem);
  }

  /* Toutes les cartes au même format portrait doux : en 9:16 sur un
     téléphone, le sujet sortait du cadre à chaque fois. */
  .card::before,
  .card--v::before,
  .card--tall::before,
  .card--wide::before {
    aspect-ratio: 4 / 5;
  }
  .card--tall {
    grid-row: span 1;
  }
  .card--wide {
    grid-column: span 2;
  }
  .card--wide::before {
    aspect-ratio: 16 / 10;
  }

  /* Le mur passe à deux colonnes, la signature sous les reels. */
  .mur {
    grid-template-columns: repeat(2, 1fr);
  }
  .mur__signature {
    position: static;
    translate: none;
    margin-top: 1rem;
  }
  .mur__signature .scan__nom {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    text-shadow: none;
  }

  /* Le collage des métiers ne tient pas en trois pièces sur 390 px. */
  .mfig > .mpiece:nth-child(1) {
    grid-area: 1 / 1 / 6 / 9;
  }
  .mfig > .mpiece:nth-child(2) {
    grid-area: 6 / 1 / 9 / 5;
  }
  .mfig > .mpiece:nth-child(3) {
    grid-area: 6 / 5 / 9 / 9;
  }

  .quotes__duo,
  .fin__grille,
  .scan__grille {
    grid-template-columns: minmax(0, 1fr);
  }
  .loupe__boite {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V20 · La mosaïque en GRAND, pour de bon
   Pourquoi c'étaient des bandes fines : `aspect-ratio` sur le cale
   invisible ne survit pas à une carte qui s'étale sur deux colonnes. La
   rangée se dimensionnait sur la carte la plus courte et écrasait tout.
   On fixe la hauteur de rangée : la géométrie devient prévisible et
   chaque case est grande.
   ═══════════════════════════════════════════════════════════════════════ */
.grid {
  grid-auto-rows: clamp(13rem, 21vw, 25rem);
  grid-auto-flow: dense;
  gap: clamp(0.6rem, 1.2vw, 1.1rem);
}
@media (min-width: 760px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1180px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Le cale ne pilote plus rien : la rangée donne la hauteur. */
.card::before {
  display: none;
}

/* Trois formats, tous grands. Rien en dessous de deux rangées. */
.card {
  grid-column: span 1;
  grid-row: span 2;
}
.card--v,
.card--tall {
  grid-row: span 3;
}
.card--wide {
  grid-column: span 2;
  grid-row: span 2;
}

/* Le titre suit l'échelle des cases. */
.card__meta h3 {
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.75rem);
}
.card__meta p {
  font-size: clamp(0.68rem, 0.64rem + 0.15vw, 0.8rem);
}

@media (max-width: 760px) {
  .grid {
    /* 29vw et pas moins : a 606 px la carte large mesurait 1,70 de
       rapport, hors de la regle "aucune carte au-dela de 1,6". */
    grid-auto-rows: clamp(8rem, 29vw, 15rem);
  }
  .card {
    grid-row: span 2;
  }
  .card--v,
  .card--tall {
    grid-row: span 2;
  }
  .card--wide {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ── La couleur doit sauter aux yeux ─────────────────────────
   Le halo restait derrière les cartes et se voyait à peine. Il monte en
   force et la carte survolée s'entoure franchement de sa couleur. */
.tache {
  width: min(42vmax, 720px);
  margin: calc(min(42vmax, 720px) / -2);
  filter: blur(42px);
}
.tache.is-on {
  opacity: 1;
}
.card.est-teinte {
  box-shadow:
    0 0 0 2px
      color-mix(in srgb, var(--teinte-vive, transparent) 85%, transparent),
    0 0 90px 10px
      color-mix(in srgb, var(--teinte-vive, transparent) 55%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   V21 · Connexion Instagram
   Le bouton n'apparaît que si le serveur sait répondre. La note dit
   exactement ce qui est demandé : c'est elle qui enlève la peur, pas le
   design.
   ═══════════════════════════════════════════════════════════════════════ */
.igc {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}
/* Un bouton du site, pas un corps etranger : meme langage que .btn
   (pilule transparente, filet, inversion au survol). Le glyphe Instagram
   dessine en CSS a ete retire — il faisait badge rapporte. */
.igc__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1.7rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--blanc);
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease),
    border-color 0.4s;
}
.igc__btn svg {
  flex: none;
  transition: translate 0.4s var(--ease);
}
.igc__btn:hover {
  background: var(--blanc);
  color: var(--noir);
  border-color: var(--blanc);
}
.igc__btn:hover svg {
  translate: 4px 0;
}
.igc.est-en-cours .igc__btn {
  opacity: 0.55;
  pointer-events: none;
}

/* La note qui dit ce qu'on lit et ce qu'on ne lit pas doit se voir :
   c'est elle qui enleve la peur, pas le design. Un encadre filete,
   deux lignes nettes, plus une confidence en petit. */
.igc__note {
  display: grid;
  gap: 0.5rem;
  max-width: 52ch;
  margin-inline: auto;
  font-size: 0.9rem;
  color: var(--dim);
  line-height: 1.6;
  /* La section quiz centre son texte : un encadre a filet gauche doit
     se lire aligne a gauche, sinon le filet flotte. */
  text-align: left;
}
.igc__note p {
  margin: 0;
}
.igc__note strong {
  color: var(--blanc);
  font-weight: 700;
}
.igc__etat {
  font-size: 0.85rem;
  color: var(--blanc);
  padding: 0.55rem 0.85rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--blanc) 8%, transparent);
}
.igc__etat.est-erreur {
  color: var(--vert);
}
.igc.est-en-cours .igc__etat::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.5em;
  border-radius: 50%;
  background: currentColor;
  animation: pouls 1.2s ease-in-out infinite;
}

/* ── Ses posts, quand il a autorisé ────────────────────────── */
.mur.est-sien {
  grid-template-columns: repeat(3, 1fr);
}
.mur__case--sien {
  aspect-ratio: 1;
}
.mur__case--sien img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mur__reel {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  width: 0;
  height: 0;
  border-left: 10px solid var(--blanc);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.8));
  opacity: 0.9;
}
@media (min-width: 900px) {
  .mur.est-sien {
    grid-template-columns: repeat(3, 1fr);
    max-width: 40rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V22 · Une carte par client, la galerie qui défile
   La grille se raccourcit : un seul projet par client. Le clic n'ouvre
   plus UN média mais TOUT le travail du client, dans une colonne qui
   défile comme un feed. Le son est un choix, jamais une surprise.
   ═══════════════════════════════════════════════════════════════════════ */
.loupe__scene {
  position: relative;
  display: grid;
  min-width: 0;
}
.loupe--galerie .loupe__media {
  display: grid;
  gap: clamp(0.6rem, 1.5vw, 1rem);
  align-content: start;
  justify-items: center;
  max-height: min(82svh, 46rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blanc) 30%, transparent) transparent;
  border-radius: 6px;
}
.loupe--galerie .loupe__media figure {
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
}
.loupe--galerie .loupe__media video,
.loupe--galerie .loupe__media img {
  max-height: min(74svh, 42rem);
  width: auto;
  max-width: min(26rem, 82vw);
  scale: none;
  object-fit: contain;
}
/* Le zoom manuel n'a pas de sens quand on défile un feed. */
.loupe--galerie .loupe__taille {
  display: none;
}

/* Le compteur dit où on en est dans le projet. */
.loupe__compte {
  position: absolute;
  top: 0.7rem;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.72);
  color: var(--blanc);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Le son : coupé par défaut, activé d'un geste, jamais imposé. */
.loupe__son {
  position: absolute;
  bottom: 0.7rem;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  padding: 0.55rem 1rem;
  border: 1px solid color-mix(in srgb, var(--blanc) 35%, transparent);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.72);
  color: var(--blanc);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s;
}
.loupe__son:hover,
.loupe__son[aria-pressed="true"] {
  background: var(--blanc);
  color: var(--noir);
  border-color: var(--blanc);
}
.loupe__son[hidden],
.loupe__compte[hidden] {
  display: none;
}

/* ── L'apparition au scroll, nettement plus lisible ──────────
   Chaque carte arrive l'une après l'autre : plus de distance, plus de
   temps, un vrai décalage entre voisines (le --retard vient de main.js,
   rangée par rangée visuelle). */
.card {
  transform: translateY(56px) scale(0.95);
  transition:
    transform 0.9s var(--entree) var(--retard, 0ms),
    opacity 0.75s var(--vif) var(--retard, 0ms),
    box-shadow 0.35s var(--ease);
}
.card.is-in {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .card,
  .card.is-in {
    transform: none;
    opacity: 1;
    scale: 1;
    transition: none;
  }
  .loupe--galerie .loupe__media {
    scroll-snap-type: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   DIRECTION TYPO — session du 13 aout
   Le constat du client : « on ne lit que ce qui est ecrit en
   grand ». Donc quatre etages nets et rien entre deux :
   D0 le chiffre de preuve · D1 l'ouverture et la fermeture ·
   D2 les chapitres et les questions · D3 le courant fort.
   Rapport ~1,55 entre etages. Plus de numeros de chapitre,
   plus de sur-titres : le titre porte seul, l'etoile de la
   marque le ponctue.
   ═══════════════════════════════════════════════════════════ */

/* D1 — on ouvre et on ferme en tres grand. */
.hero__title,
.contact__title {
  font-size: clamp(3rem, 7vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.042em;
}

/* D2 — les chapitres se lisent de loin. */
.sec-head__title,
.metiers__titre-gros,
.quiz__q {
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.036em;
}
.quiz__q {
  max-width: 16ch;
}

/* D3 — ce qui se lit en scrollant, un cran au-dessus d'avant. */
.svc__name,
.quiz__t,
.quote blockquote,
.count__l {
  font-size: clamp(1.35rem, 1rem + 1.35vw, 2.4rem);
}
.count__l--end {
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 3rem);
}

/* Les notes qui vendent restent, mais on ne les ecrit plus en tout
   petit. */
.metiers__note,
.sec-head__note,
.envoi__note {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
}

/* Le seul repere conserve : la progression reelle de l'audit,
   en capitales discretes. Pas une numerotation decorative. */
.quiz__idx {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Les options du quiz ne sont plus numerotees : la phrase porte. */
.quiz__n {
  display: none;
}
.quiz__o {
  grid-template-columns: minmax(0, 1fr) 2rem;
}

/* « Les mots » est devenu un vrai titre de chapitre, plus une
   etiquette posee dans un coin. */
.quotes__titre {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* La fin : le titre grandit mais reste dans sa colonne. */
.fin .contact__title {
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 5.75rem);
}

/* Sous 760 px, les grands titres gardent leur rang sans se faire
   couper. Memes etages, echelle telephone. */
@media (max-width: 760px) {
  .hero__title {
    /* 9.7vw et pas plus : au-dela, « ne se demande pas. » casse en deux. */
    font-size: clamp(2.2rem, 9.7vw, 3.4rem);
  }
  .sec-head__title,
  .metiers__titre-gros,
  .quiz__q {
    font-size: clamp(2.1rem, 9.6vw, 3.2rem);
  }
  .fin .contact__title {
    font-size: clamp(2rem, 9.5vw, 2.9rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V22 · Pied de page en 390 px
   `repeat(auto-fit, minmax(9rem, 1fr))` dans une piste `auto` se resout a
   sa largeur max-content : les trois colonnes restaient cote a cote et la
   colonne « Aller » sortait de l'ecran (mesure : 496 px pour 390). Piste
   bornee + minimum a zero, et tout replie proprement.
   ═══════════════════════════════════════════════════════════════════════ */
.foot > * {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 760px) {
  .foot__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1.2rem;
  }
  .foot__mark img {
    width: clamp(120px, 40vw, 200px);
  }
  .foot__legal {
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
  }
}

/* Les quatre metiers non plus ne se numerotent pas : le nom suffit. */
.metier__n {
  display: none;
}

/* Les chapitres epingles n'ont plus de rangee d'etiquette : le contenu
   reprend l'ecran entier, la jauge reste collee en bas. */
.scene__pin {
  grid-template-rows: minmax(0, 1fr) auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   LA MÉTHODE, VERSION DESSINÉE — .colab
   Quatre pavés de texte sont devenus un chemin : une ligne, quatre
   gares, l'étoile seize qui voyage de l'une à l'autre. On clique une
   gare, la scène dessous change et son pictogramme s'anime. Zéro JS :
   quatre radios pilotent tout, le clavier navigue aux flèches.
   ═══════════════════════════════════════════════════════════════════════ */

/* La section était la seule sans marge interne : au banc 390 le titre
   touchait le bord. Alignée sur ses voisines. */
.methode {
  padding-inline: var(--pad);
}

.colab {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.8rem);
}

/* Les radios restent focusables : on les cache sans display:none. */
.colab__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.colab__hint {
  font-size: 0.88rem;
  color: var(--dim-2);
  letter-spacing: 0.01em;
}

/* ── La ligne et ses quatre gares ─────────────────────────── */
.colab__ligne {
  --pos: 0;
  /* rayon de puce : sert a poser le rail au centre des cercles */
  --puce: clamp(3.4rem, 6vw, 4.4rem);
  --etoile: 24px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding-top: calc(var(--etoile) + 14px);
}
#colab-2:checked ~ .colab__ligne {
  --pos: 1;
}
#colab-3:checked ~ .colab__ligne {
  --pos: 2;
}
#colab-4:checked ~ .colab__ligne {
  --pos: 3;
}

.colab__rail {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: calc(var(--etoile) + 14px + var(--puce) / 2);
  height: 2px;
  background: var(--line);
}
.colab__rail--fait {
  right: auto;
  width: 75%;
  background: var(--blanc);
  transform-origin: left center;
  scale: calc(var(--pos) / 3) 1;
  transition: scale 0.7s var(--entree);
}

/* L'étoile seize voyage au-dessus des gares et tourne en marchant. */
.colab__star {
  position: absolute;
  top: 0;
  left: calc(12.5% + var(--pos) * 25%);
  width: var(--etoile);
  height: var(--etoile);
  translate: -50% 0;
  rotate: calc(var(--pos) * 180deg);
  background: var(--blanc);
  -webkit-mask: url("assets/PICTO_SEIZE_NOIR.svg") center / contain no-repeat;
  mask: url("assets/PICTO_SEIZE_NOIR.svg") center / contain no-repeat;
  transition:
    left 0.7s var(--entree),
    rotate 0.7s var(--entree);
}

.colab__gare {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.colab__puce {
  width: var(--puce);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--trait);
  background: var(--noir);
  color: var(--blanc);
  display: grid;
  place-items: center;
  transition:
    background 0.4s var(--vif),
    color 0.4s var(--vif),
    border-color 0.4s var(--vif),
    translate 0.4s var(--vif),
    scale 0.4s var(--vif);
}
.colab__puce svg {
  width: 48%;
  height: 48%;
}
.colab__nom {
  font-size: clamp(0.78rem, 0.72rem + 0.3vw, 0.98rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
  color: var(--dim);
  transition: color 0.4s var(--vif);
}
.colab__gare:hover .colab__puce {
  translate: 0 -4px;
  border-color: var(--blanc);
}
.colab__gare:hover .colab__nom {
  color: var(--blanc);
}

/* La gare active s'allume : encre pleine, picto inversé. */
#colab-1:checked ~ .colab__ligne label[for="colab-1"] .colab__puce,
#colab-2:checked ~ .colab__ligne label[for="colab-2"] .colab__puce,
#colab-3:checked ~ .colab__ligne label[for="colab-3"] .colab__puce,
#colab-4:checked ~ .colab__ligne label[for="colab-4"] .colab__puce {
  background: var(--blanc);
  color: var(--noir);
  border-color: var(--blanc);
  scale: 1.08;
}
#colab-1:checked ~ .colab__ligne label[for="colab-1"] .colab__nom,
#colab-2:checked ~ .colab__ligne label[for="colab-2"] .colab__nom,
#colab-3:checked ~ .colab__ligne label[for="colab-3"] .colab__nom,
#colab-4:checked ~ .colab__ligne label[for="colab-4"] .colab__nom {
  color: var(--blanc);
}

/* Focus clavier : l'anneau se pose sur la puce correspondante. */
#colab-1:focus-visible ~ .colab__ligne label[for="colab-1"] .colab__puce,
#colab-2:focus-visible ~ .colab__ligne label[for="colab-2"] .colab__puce,
#colab-3:focus-visible ~ .colab__ligne label[for="colab-3"] .colab__puce,
#colab-4:focus-visible ~ .colab__ligne label[for="colab-4"] .colab__puce {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
}

/* ── La scène ─────────────────────────────────────────────── */
.colab__scene {
  display: grid;
  margin-top: clamp(0.6rem, 1.5vw, 1.4rem);
  background: var(--noir-2);
  border-radius: 28px;
  padding: clamp(1.7rem, 4vw, 3.4rem);
}
.colab__vue {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, auto);
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  opacity: 0;
  visibility: hidden;
  translate: 0 14px;
  transition:
    opacity 0.45s ease,
    translate 0.55s var(--entree),
    visibility 0s 0.45s;
}
#colab-1:checked ~ .colab__scene .colab__vue--1,
#colab-2:checked ~ .colab__scene .colab__vue--2,
#colab-3:checked ~ .colab__scene .colab__vue--3,
#colab-4:checked ~ .colab__scene .colab__vue--4 {
  opacity: 1;
  visibility: visible;
  translate: 0;
  transition:
    opacity 0.45s ease 0.12s,
    translate 0.55s var(--entree) 0.12s,
    visibility 0s;
}
.colab__pic {
  width: clamp(122px, 15vw, 196px);
  height: auto;
}
.colab__vue h3 {
  font-size: clamp(1.7rem, 1.15rem + 2.3vw, 3.1rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 0.55em;
}
.colab__vue figcaption p {
  color: var(--dim);
  max-width: 36ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.45;
}

/* Le cercle au feutre se redessine a chaque changement de scene.
   La scale 0 explicite bat le `.is-in .cercle::after` global : sans
   elle, l'entree en vue pre-dessine les cercles des vues cachees. */
.colab__vue .cercle::after {
  scale: 0 1;
  transition: none;
}
#colab-1:checked ~ .colab__scene .colab__vue--1 .cercle::after,
#colab-2:checked ~ .colab__scene .colab__vue--2 .cercle::after,
#colab-3:checked ~ .colab__scene .colab__vue--3 .cercle::after,
#colab-4:checked ~ .colab__scene .colab__vue--4 .cercle::after {
  scale: 1 1;
  transition: scale 0.55s var(--entree) 0.4s;
}

/* ── Les pictogrammes s'animent quand leur scène est active ──
   Les animations ne sont posées QUE sur la vue cochée : quand le
   sélecteur cesse de matcher, elles se retirent, et se rejouent
   au retour. Tous les états de base sont les états finaux : couper
   les animations (reduced) laisse un dessin complet. */
@keyframes colab-pop {
  from {
    opacity: 0;
    scale: 0.55;
  }
}
@keyframes colab-trace {
  from {
    stroke-dashoffset: 1;
  }
}
@keyframes colab-bob {
  50% {
    translate: 0 -4px;
  }
}
@keyframes colab-frappe {
  0%,
  60%,
  100% {
    opacity: 0.22;
  }
  20% {
    opacity: 1;
  }
}
@keyframes colab-pulse {
  50% {
    scale: 1.12;
  }
}
@keyframes colab-scintille {
  50% {
    opacity: 0.25;
    rotate: 18deg;
  }
}

.colab__pic g,
.colab__pic path,
.colab__pic circle,
.colab__pic ellipse {
  transform-box: fill-box;
  transform-origin: center;
}
.v2-l,
.v2-cercle,
.v4-arc {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Scène 1 : la bulle parle, l'autre répond. */
#colab-1:checked ~ .colab__scene .v1-a {
  animation: colab-bob 3.2s ease-in-out 0.6s infinite;
}
#colab-1:checked ~ .colab__scene .v1-d {
  animation: colab-frappe 1.3s ease-in-out infinite;
}
#colab-1:checked ~ .colab__scene .v1-d2 {
  animation-delay: 0.18s;
}
#colab-1:checked ~ .colab__scene .v1-d3 {
  animation-delay: 0.36s;
}
#colab-1:checked ~ .colab__scene .v1-b {
  animation: colab-pop 0.55s var(--entree) 0.45s backwards;
}

/* Scène 2 : l'offre s'écrit, le feutre entoure. */
#colab-2:checked ~ .colab__scene .v2-l1 {
  animation: colab-trace 0.4s ease-out 0.3s backwards;
}
#colab-2:checked ~ .colab__scene .v2-l2 {
  animation: colab-trace 0.4s ease-out 0.5s backwards;
}
#colab-2:checked ~ .colab__scene .v2-l3 {
  animation: colab-trace 0.4s ease-out 0.7s backwards;
}
#colab-2:checked ~ .colab__scene .v2-cercle {
  animation:
    colab-trace 0.6s ease-out 1s backwards,
    colab-pop 0.6s var(--entree) 1s backwards;
}

/* Scène 3 : ça tourne. */
#colab-3:checked ~ .colab__scene .v3-play {
  animation: colab-pulse 1.6s ease-in-out 0.5s infinite;
}
#colab-3:checked ~ .colab__scene .v3-e {
  animation: colab-scintille 1.8s ease-in-out infinite;
}
#colab-3:checked ~ .colab__scene .v3-e2 {
  animation-delay: 0.7s;
}

/* Scène 4 : la boucle se dessine, l'étoile respire. */
#colab-4:checked ~ .colab__scene .v4-arc {
  animation: colab-trace 0.8s ease-out 0.3s backwards;
}
#colab-4:checked ~ .colab__scene .v4-fleche {
  animation: colab-pop 0.4s var(--entree) 1s backwards;
}
#colab-4:checked ~ .colab__scene .v4-star {
  animation: colab-pulse 2.4s ease-in-out 1.2s infinite;
}

/* ── Mobile : tout se resserre, rien ne déborde ───────────── */
@media (max-width: 719px) {
  .colab__ligne {
    --puce: 3rem;
    --etoile: 20px;
    gap: 0.35rem;
  }
  .colab__scene {
    border-radius: 20px;
  }
  .colab__vue {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 1.4rem;
  }
  .colab__pic {
    width: 112px;
  }
  .colab__vue figcaption p {
    margin-inline: auto;
  }
}

/* ── Mouvement réduit : tout est posé, rien ne bouge ──────── */
@media (prefers-reduced-motion: reduce) {
  .colab *,
  .colab *::before,
  .colab *::after {
    animation: none !important;
    transition: none !important;
  }
}
.reduced .colab *,
.reduced .colab *::before,
.reduced .colab *::after {
  animation: none !important;
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   V24 · La couleur suit le scroll, Instagram en grand
   Trois gestes :
   · l'ambiance pilotee par le scroll fond en douceur (.is-doux) — c'est
     l'echantillonneur de viewport qui parle, pas le curseur ;
   · les publications Instagram connectees s'affichent en GRAND, avec une
     vraie entree ;
   · le bouton et la note de connexion parlent le langage du site.
   ═══════════════════════════════════════════════════════════════════════ */

/* Pendant le scroll, la teinte glisse au lieu de claquer. Le survol
   retire cette classe : lui doit repondre au quart de tour. */
.ambiance.is-doux {
  transition:
    opacity 0.9s var(--ease),
    --teinte-active 0.7s linear;
}
.ambiance.is-on.is-doux {
  /* 0.18 etait imperceptible : la couleur de la video qui joue doit se
     VOIR, c'est la demande la plus repetee du projet. */
  opacity: 0.4;
  transition:
    opacity 0.7s var(--ease),
    --teinte-active 0.45s linear;
}

/* ── Les posts connectes, en grand ─────────────────────────────
   L'ancienne grille les bornait a 40rem : neuf timbres-poste. Ici trois
   colonnes pleine largeur d'ecran de scan, et chaque carte arrive en
   volant, comme le mur qu'elle remplace. */
.mur.est-sien {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 1.5vw, 1.3rem);
}
@media (min-width: 900px) {
  .mur.est-sien {
    max-width: none;
  }
}
.mur__case--sien {
  aspect-ratio: 1;
  border-radius: 6px;
  animation: sien-arrive 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--k) * 90ms);
}
@keyframes sien-arrive {
  from {
    opacity: 0;
    translate: 0 42%;
    scale: 0.76;
    filter: blur(12px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }
}
@media (max-width: 760px) {
  .mur.est-sien {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mur__case--sien {
    animation: none;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V23 · Retours du 13 août
   ═══════════════════════════════════════════════════════════════════════ */

/* Le survol repond franchement : c'est LA demande repetee depuis le debut. */
.ambiance.is-on {
  opacity: 0.3;
}
.ambiance.is-fort {
  opacity: 0.58;
  transition:
    opacity 0.3s var(--ease),
    --teinte-active 0.12s linear;
}

/* ── Le cercle d'analyse, discret, dans la barre du haut ────── */
.nav__cercle {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(
    currentColor calc(var(--pct, 0) * 1%),
    transparent 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 66%);
  mask: radial-gradient(farthest-side, transparent 62%, #000 66%);
  opacity: 0;
  scale: 0.6;
  transition:
    opacity 0.5s var(--ease),
    scale 0.5s var(--ease);
}
.nav__cercle.is-on {
  opacity: 0.85;
  scale: 1;
}

/* ── La signature remonte dans la barre ─────────────────────── */
.nav__tag {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 900px) {
  .nav__tag {
    display: none;
  }
}

/* ── La fin : le nom et les reponses a hauteur d'oeil ───────── */
.rapport__nom {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem);
  letter-spacing: -0.03em;
}
.rapport .recap__list dd {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
}
.rapport .recap__list dt {
  font-size: 0.72rem;
}
.form__champ input {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  padding: 0.7rem 0;
}
.form .btn--plein {
  padding: 1.05rem 1.9rem;
  font-size: 1.05rem;
}

/* ── La collab : le rail ne traverse plus les gares ─────────── */
.colab__gare {
  position: relative;
  z-index: 1;
}
.colab__puce {
  box-shadow: 0 0 0 6px var(--noir);
}
/* Le passage d'une etape a l'autre glisse au lieu de claquer. */
.colab__scene > * {
  transition:
    opacity 0.55s var(--ease),
    translate 0.55s var(--ease);
}

/* ═══════════════════════════════════════════════════════════════════════
   V24 · Le cercle flottant
   L'avancee de l'audit, toujours visible, jamais un bouton. Il prend un
   eclat de la teinte ambiante : le meme detail qui colore tout le site.
   ═══════════════════════════════════════════════════════════════════════ */
.flotteur {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 120;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--blanc);
  mix-blend-mode: difference;
  transition: scale 0.45s var(--ease);
}
.flotteur svg {
  position: absolute;
  inset: 0;
  rotate: -90deg;
  overflow: visible;
}
.flotteur__fond,
.flotteur__arc {
  fill: none;
  stroke-width: 2;
}
.flotteur__fond {
  stroke: currentColor;
  opacity: 0.18;
}
.flotteur__arc {
  stroke: currentColor;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s var(--ease);
}
.flotteur b {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.flotteur b i {
  font-style: normal;
  font-size: 0.62em;
  opacity: 0.65;
  margin-left: 1px;
}

/* L'eclat : des qu'il avance, l'anneau respire avec la teinte ambiante.
   `difference` s'arrete la ou l'eclat commence : on le peint sans lui. */
.flotteur::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--teinte-active, transparent) 40%,
    transparent 70%
  );
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.8s var(--ease);
}
.flotteur.est-avance::before {
  opacity: 0.5;
  animation: flotteur-pouls 3.2s ease-in-out infinite;
}
@keyframes flotteur-pouls {
  50% {
    opacity: 0.22;
  }
}

/* 100 % : le cercle celebre, le merci sort a sa gauche. */
.flotteur.celebre {
  scale: 1.18;
}
.flotteur.est-plein .flotteur__arc {
  stroke-width: 3;
}
.flotteur__merci {
  position: absolute;
  right: calc(100% + 0.8rem);
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0;
  translate: 8px 0;
  transition:
    opacity 0.6s var(--ease) 0.25s,
    translate 0.6s var(--ease) 0.25s;
}
.flotteur.est-plein .flotteur__merci:not([hidden]) {
  opacity: 1;
  translate: 0 0;
}
@media (max-width: 640px) {
  .flotteur {
    width: 52px;
    height: 52px;
  }
  .flotteur b {
    font-size: 0.78rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flotteur.est-avance::before {
    animation: none;
  }
}
/* L'ancienne jauge lineaire s'efface au profit du cercle. */
.nav__jauge {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   V24 · La transition entre sombre et clair, retissee
   Les lames noires uniformes cassaient l'ambiance : quand le fond est
   rose, la transition arrivait en deuil. Chaque lame prend maintenant la
   teinte ambiante melee au noir, les bords sont feutres, et l'ouverture
   est une vague : le centre part en premier, les bords suivent.
   ═══════════════════════════════════════════════════════════════════════ */
.lames i {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--teinte-active, #050505) 26%, #050505) 0%,
    #050505 62%
  );
  filter: blur(0.5px);
}

/* ═══════════════════════════════════════════════════════════════════════
   V25 · Fin des lames
   Les bandes verticales qui se retirent n'ont jamais convaincu. La
   transition devient un voile : un long fondu feutre entre le noir et le
   papier, teinte par l'ambiance du moment. Rien a animer, rien qui
   claque : la couture disparait dans le scroll.
   ═══════════════════════════════════════════════════════════════════════ */
.lames {
  display: none !important;
}
.lumiere::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(9rem, 22vh, 16rem);
  transform: translateY(-99.5%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--teinte-active, #050505) 14%, #f4f1ea00) 30%,
    color-mix(in srgb, #f4f1ea 55%, transparent) 76%,
    #f4f1ea 100%
  );
  pointer-events: none;
}
/* Et la sortie du bloc clair redescend vers le noir, symetriquement. */
.lumiere::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(9rem, 22vh, 16rem);
  transform: translateY(99.5%);
  background: linear-gradient(
    0deg,
    transparent 0%,
    color-mix(in srgb, #f4f1ea 55%, transparent) 76%,
    #f4f1ea 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Deux blocs clairs qui se suivent n'ont pas besoin de couture. */
.lumiere + .lumiere::before,
.lumiere:has(+ .lumiere)::after {
  display: none;
}

/* ── Le bloc Instagram, nu et centre ───────────────────────── */
.igc {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  text-align: center;
}
.igc__deux {
  display: grid;
  gap: 0.25rem;
  font-size: 0.88rem;
  color: var(--dim);
  line-height: 1.6;
}
.igc__deux b {
  color: var(--blanc);
  font-weight: 700;
}
.igc__etat {
  font-size: 0.85rem;
  color: var(--blanc);
}

/* ── La feuille : la reponse quand la connexion n'est pas prete ──
   Pas un pop-up systeme, pas une page noire : une carte qui monte du bas,
   eclairee par la teinte ambiante. */
.igc__voile {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: end center;
  background: rgba(5, 5, 5, 0);
  transition: background 0.45s var(--ease);
}
.igc__voile.is-la {
  background: rgba(5, 5, 5, 0.6);
}
.igc__feuille {
  position: relative;
  overflow: hidden;
  width: min(34rem, calc(100vw - 2rem));
  margin-bottom: clamp(1rem, 4vh, 3rem);
  border-radius: 14px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: #0d0d0d;
  color: #f2efe9;
  text-align: left;
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  translate: 0 30px;
  opacity: 0;
  transition:
    translate 0.5s var(--ease),
    opacity 0.5s var(--ease);
}
.igc__voile.is-la .igc__feuille {
  translate: 0 0;
  opacity: 1;
}
.igc__feuille h3 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.igc__feuille p {
  color: rgba(242, 239, 233, 0.72);
  line-height: 1.65;
  font-size: 0.98rem;
}
.igc__lueur {
  position: absolute;
  inset: -40% -20% auto;
  height: 70%;
  background: radial-gradient(
    60% 90% at 50% 0%,
    var(--teinte-active, #4d7cff) 0%,
    transparent 70%
  );
  opacity: 0.24;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   V26 · L'etoile qui se remplit
   Le temoin d'audit n'est plus un cercle anonyme : c'est l'etoile seize.
   Son contour se dessine avec les reponses, et une lueur de la teinte
   ambiante l'habille. A 100 %, elle se remplit entierement.
   ═══════════════════════════════════════════════════════════════════════ */
.flotteur svg {
  position: absolute;
  inset: 6px;
  rotate: 0deg;
  overflow: visible;
}
.flotteur__trace,
.flotteur__contour {
  fill: none;
  stroke: currentColor;
  stroke-width: 26px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flotteur__trace {
  opacity: 0.16;
}
.flotteur__contour {
  transition: stroke-dashoffset 0.8s var(--ease);
}
.flotteur.est-plein .flotteur__trace {
  fill: currentColor;
  opacity: 1;
  transition: opacity 0.6s var(--ease);
}
.flotteur b {
  translate: 0 34px;
  font-size: 0.68rem;
}
.flotteur {
  width: 58px;
  height: 58px;
}
/* La lueur ambiante, sous l'etoile. */
.flotteur::before {
  inset: -12px;
}

/* ── Le voile de transition, neutre ─────────────────────────
   La version teintee brunissait tout : le fondu redevient pur, noir vers
   papier, court et net. */
.lumiere::before {
  height: clamp(6rem, 14vh, 10rem);
  background: linear-gradient(180deg, transparent 0%, #f4f1ea 100%);
}
.lumiere::after {
  height: clamp(6rem, 14vh, 10rem);
  background: linear-gradient(0deg, transparent 0%, #f4f1ea 100%);
}

/* `hidden` agit via display:none du navigateur, que notre display:grid
   ecrasait : le voile invisible couvrait toute la page et avalait les
   clics. C'est LA raison du « je ne peux pas cliquer ». */
.igc__voile[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   V27 · Subtilités
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Les questions n'attendent plus : reveil immediat ────────
   260 ms de retard + cascade + declenchement a 40 % d'ecran : la reponse
   semblait disparaitre puis revenir. Tout arrive tout de suite. */
.quiz.is-in .quiz__o {
  transition-delay: calc(var(--n, 0) * 45ms);
}

/* ── Le chapitre preuve respire ───────────────────────────────
   Le reel etait un timbre au milieu d'une page blanche. Il prend sa
   place, et les chiffres se resserrent a cote. */
.proof__deck {
  height: min(72svh, 44rem);
}
@media (min-width: 900px) {
  .proof {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    width: min(72rem, 100%);
  }
}
.proof__v {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
}
.proof__x {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.proof__x b {
  color: var(--blanc);
  font-weight: 700;
}

/* ── L'ecran de compte, aere et sans boite ────────────────── */
.scan .scan__ecran {
  background: none;
  border: 0;
  box-shadow: none;
}
.scan__grille {
  gap: clamp(3rem, 7vw, 6rem);
}
.scan__droite {
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.mur {
  gap: clamp(0.8rem, 1.8vw, 1.4rem);
}
.scan__ecran {
  margin-top: clamp(3rem, 7vw, 5rem);
}

/* ═══════════════════════════════════════════════════════════════════════
   V28 · Derniers détails du 13 août
   ═══════════════════════════════════════════════════════════════════════ */

/* ── L'étoile grandit et se nomme ─────────────────────────── */
.flotteur {
  width: 76px;
  height: 76px;
}
.flotteur b {
  font-size: 0.82rem;
  translate: 0 44px;
}
.flotteur__quoi {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  translate: -50% 0;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.flotteur.est-avance .flotteur__quoi {
  opacity: 0.7;
}
.flotteur.est-plein .flotteur__quoi {
  opacity: 0;
}
.flotteur__merci {
  font-size: 0.88rem;
  max-width: 30ch;
  white-space: normal;
  text-align: right;
  line-height: 1.4;
}

/* ── La mosaïque se densifie : mêmes formats, cases plus petites,
     deux fois plus de projets par écran, moitié moins de scroll. */
.grid {
  grid-auto-rows: clamp(9rem, 13.5vw, 15.5rem);
  gap: clamp(0.55rem, 1vw, 0.9rem);
}
@media (min-width: 1400px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Les vraies publications du client, en tête de galerie ── */
.loupe__reel-feed {
  width: 100%;
  display: grid;
  gap: 0.6rem;
  scroll-snap-align: start;
}
.loupe__reel-feed > p {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.loupe__reel-grille {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.45rem;
}
.loupe__reel-grille img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.loupe__reel-grille a {
  transition: scale 0.3s var(--ease);
}
.loupe__reel-grille a:hover {
  scale: 1.04;
}

/* ── Les mots s'écrivent ──────────────────────────────────── */
.quote blockquote .mot {
  opacity: 0;
  translate: 0 6px;
  display: inline-block;
  transition:
    opacity 0.45s var(--ease) calc(var(--m, 0) * 55ms),
    translate 0.45s var(--ease) calc(var(--m, 0) * 55ms);
}
.quote.is-in blockquote .mot {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .quote blockquote .mot {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* Les mots suivent le scroll : pas d'attente, pas de cascade chronometree. */
.quote blockquote .mot {
  opacity: 0.08;
  translate: 0 3px;
  transition:
    opacity 0.3s var(--ease),
    translate 0.3s var(--ease);
}
.quote blockquote .mot.est-ecrit,
.quote.is-in blockquote .mot.est-ecrit {
  opacity: 1;
  translate: 0 0;
}
/* L'ancienne cascade par is-in ne pilote plus rien. */
.quote.is-in blockquote .mot:not(.est-ecrit) {
  opacity: 0.08;
}

/* ── « Les mots » respire : plus d'air entre le titre et les avis,
     moins de vide mort avant la section suivante. */
.quotes {
  padding-block: clamp(6rem, 14vh, 10rem) clamp(3rem, 7vh, 5rem);
}
.quotes__duo {
  margin-top: clamp(3rem, 7vw, 5rem);
  gap: clamp(2.5rem, 6vw, 5rem);
}

/* ═══════════════════════════════════════════════════════════════════════
   V29 · Le feed du visiteur, monte comme un vrai feed
   L'en-tete d'abord : son avatar, son pseudo, ses abonnes, et la ligne
   qui dit tout : « sous nos yeux, en ce moment ». Puis ses publications
   tombent du haut une a une, avec un leger balancement, comme des cartes
   qu'on pose.
   ═══════════════════════════════════════════════════════════════════════ */
.mur__profil {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.4rem;
  animation: profil-entre 0.7s var(--ease) both;
}
@keyframes profil-entre {
  from {
    opacity: 0;
    translate: 0 -18px;
  }
}
.mur__profil img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.mur__profil b {
  display: block;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.02em;
}
.mur__profil span {
  font-size: 0.78rem;
  color: var(--dim);
}

.mur.est-sien .mur__case--sien {
  aspect-ratio: 1;
  animation: carte-tombe 0.85s cubic-bezier(0.22, 1.1, 0.36, 1) both;
  animation-delay: calc(var(--k) * 130ms);
}
@keyframes carte-tombe {
  0% {
    opacity: 0;
    translate: 0 -60vh;
    rotate: calc((var(--k) - 2.5) * 3deg);
    scale: 0.9;
  }
  70% {
    opacity: 1;
    rotate: calc((var(--k) - 2.5) * -0.8deg);
  }
  100% {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mur__profil,
  .mur.est-sien .mur__case--sien {
    animation: none;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V30 · Les mots, visibles ; les blancs, domptes ; la collab, animee
   ═══════════════════════════════════════════════════════════════════════ */

/* Les mots pas encore ecrits se devinent : le balayage se VOIT. */
.quote blockquote .mot {
  opacity: 0.14;
  translate: 0 5px;
  filter: blur(1.5px);
  transition:
    opacity 0.35s var(--ease),
    translate 0.35s var(--ease),
    filter 0.35s var(--ease);
}
.quote blockquote .mot.est-ecrit,
.quote.is-in blockquote .mot.est-ecrit {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}
/* Chaque avis glisse depuis son cote en entrant. */
.quotes__duo .quote:first-child {
  translate: -34px 0;
  opacity: 0;
  transition:
    translate 0.9s var(--ease),
    opacity 0.9s var(--ease);
}
.quotes__duo .quote:last-child {
  translate: 34px 0;
  opacity: 0;
  transition:
    translate 0.9s var(--ease) 0.12s,
    opacity 0.9s var(--ease) 0.12s;
}
.quotes__duo .quote.is-in {
  translate: 0 0;
  opacity: 1;
}

/* Les blancs : moitie moins de vide avant et apres les avis. */
.quotes {
  padding-block: clamp(4rem, 9vh, 7rem) clamp(1.5rem, 4vh, 3rem);
}
.quotes__duo {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.methode {
  padding-top: clamp(3rem, 7vh, 5rem);
}

/* ── La collab s'anime : les gares se posent une a une, le rail se
     dessine, la scene respire a chaque changement d'etape. */
.colab__gare {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 0.6s var(--ease) calc(var(--g, 0) * 120ms),
    translate 0.6s var(--ease) calc(var(--g, 0) * 120ms);
}
.methode.is-in .colab__gare {
  opacity: 1;
  translate: 0 0;
}
.colab__ligne label[for="colab-1"] {
  --g: 0;
}
.colab__ligne label[for="colab-2"] {
  --g: 1;
}
.colab__ligne label[for="colab-3"] {
  --g: 2;
}
.colab__ligne label[for="colab-4"] {
  --g: 3;
}

.colab__rail {
  transform-origin: left center;
  scale: 0 1;
  transition: scale 1.1s var(--ease) 0.35s;
}
.methode.is-in .colab__rail {
  scale: 1 1;
}

/* La gare active rebondit, la scene monte en fondu a chaque clic. */
#colab-1:checked ~ .colab__ligne label[for="colab-1"] .colab__puce,
#colab-2:checked ~ .colab__ligne label[for="colab-2"] .colab__puce,
#colab-3:checked ~ .colab__ligne label[for="colab-3"] .colab__puce,
#colab-4:checked ~ .colab__ligne label[for="colab-4"] .colab__puce {
  animation: puce-pose 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes puce-pose {
  0% {
    scale: 0.82;
  }
  60% {
    scale: 1.12;
  }
  100% {
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quotes__duo .quote,
  .colab__gare,
  .colab__rail {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
  }
  .quote blockquote .mot {
    filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V31 · Le bon timing
   Les animations duraient le bon temps mais partaient trop tot : finies
   avant d'etre vues. Declenchement plus tard (30 % du bas) et gestes plus
   amples, pour que l'oeil assiste au mouvement au lieu d'arriver apres.
   ═══════════════════════════════════════════════════════════════════════ */

/* Les avis prennent leur temps, et l'ecart entre les deux se sent. */
.quotes__duo .quote:first-child {
  translate: -60px 0;
  transition:
    translate 1.2s var(--ease),
    opacity 1.2s var(--ease);
}
.quotes__duo .quote:last-child {
  translate: 60px 0;
  transition:
    translate 1.2s var(--ease) 0.25s,
    opacity 1.2s var(--ease) 0.25s;
}

/* La collab se monte en scene : gares plus espacees dans le temps,
   rail qui se dessine lentement, sous les yeux. */
.colab__gare {
  translate: 0 40px;
  transition:
    opacity 0.75s var(--ease) calc(var(--g, 0) * 200ms),
    translate 0.75s var(--ease) calc(var(--g, 0) * 200ms);
}
.colab__rail {
  transition: scale 1.8s var(--ease) 0.6s;
}

/* Deux respirations de plus sur la collab : le picto de la gare active
   ondule doucement, et le nom actif se souleve. */
#colab-1:checked ~ .colab__ligne label[for="colab-1"] .colab__nom,
#colab-2:checked ~ .colab__ligne label[for="colab-2"] .colab__nom,
#colab-3:checked ~ .colab__ligne label[for="colab-3"] .colab__nom,
#colab-4:checked ~ .colab__ligne label[for="colab-4"] .colab__nom {
  translate: 0 -3px;
  transition:
    color 0.4s var(--vif),
    translate 0.4s var(--vif);
}
#colab-1:checked ~ .colab__ligne label[for="colab-1"] .colab__puce svg,
#colab-2:checked ~ .colab__ligne label[for="colab-2"] .colab__puce svg,
#colab-3:checked ~ .colab__ligne label[for="colab-3"] .colab__puce svg,
#colab-4:checked ~ .colab__ligne label[for="colab-4"] .colab__puce svg {
  animation: picto-vit 2.6s ease-in-out 0.5s infinite;
}
@keyframes picto-vit {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -2px;
    rotate: -2deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  #colab-1:checked ~ .colab__ligne label .colab__puce svg,
  #colab-2:checked ~ .colab__ligne label .colab__puce svg,
  #colab-3:checked ~ .colab__ligne label .colab__puce svg,
  #colab-4:checked ~ .colab__ligne label .colab__puce svg {
    animation: none;
  }
}

/* Filet CSS en plus du filet JS : meme sans aucun JavaScript, les gares
   et les avis existent. Une animation manquee vaut mieux qu'une section
   vide. */
.no-js .colab__gare,
.no-js .quotes__duo .quote,
.reduced .colab__gare,
.reduced .quotes__duo .quote {
  opacity: 1;
  translate: none;
}
.no-js .colab__rail,
.reduced .colab__rail {
  scale: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   V32 · Couleur assumee, tempo tenu, telephone soigne
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Le hero passe en couleur ────────────────────────────────
   Le mur de reels etait gris : l'effet waouh reclame la couleur des le
   premier ecran. Le reste du site garde son noir et blanc ; ici, c'est
   la vitrine du metier, elle brille. */
.hero__wall {
  filter: brightness(0.62) saturate(1.08) contrast(1.02);
}
.js-cd .hero:not(.is-live) .hero__wall {
  filter: brightness(0.26) saturate(0.9) blur(13px);
}

/* La carte survolee porte sa couleur, franchement. */
.card.est-teinte {
  box-shadow:
    0 0 0 2px var(--teinte-vive, transparent),
    0 18px 80px -12px var(--teinte-vive, transparent);
}
.card.est-teinte .card__media img,
.card.est-teinte .card__media video {
  filter: grayscale(0) contrast(1.02);
}

/* ── 3·2·1 : le tempo se tient ───────────────────────────────
   La piste s'allonge de moitie : scroller vite ne saute plus les temps,
   chaque chiffre a la place d'etre lu. */
.scene--count .scene__track {
  height: 560svh;
}

/* ── Téléphone ───────────────────────────────────────────────
   Passe complete sur les nouveautes : rien ne depasse, rien ne se
   chevauche, tout se lit d'une main. */
@media (max-width: 760px) {
  .flotteur {
    width: 46px;
    height: 46px;
    right: 0.8rem;
    bottom: 0.8rem;
  }
  .flotteur b {
    font-size: 0.66rem;
    translate: 0 28px;
  }
  .flotteur__quoi {
    display: none;
  }
  .flotteur__merci {
    max-width: 38vw;
    font-size: 0.72rem;
  }

  .proof__deck {
    height: min(52svh, 26rem);
  }

  /* Les quatre gares en 2 x 2 : quatre colonnes ecrasaient les noms. */
  .colab__ligne {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 0.8rem;
  }
  .colab__rail {
    display: none;
  }

  .quotes__duo .quote:first-child,
  .quotes__duo .quote:last-child {
    translate: 0 24px;
  }
  .quotes__duo .quote.is-in {
    translate: 0 0;
  }

  .mur__profil img {
    width: 42px;
    height: 42px;
  }
  .scan__ecran {
    margin-top: 2rem;
  }
  .igc__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V31 · Le feed du visiteur en VRAIS formats
   Les reels en 9/16 et ils tournent (muets, en boucle) ; les photos en
   4/5 comme sur le feed. Sur grand écran la rangée enveloppe et les
   cartes tombent une à une (carte-tombe, V29). Sur téléphone le fil se
   fait défiler au doigt, une carte après l'autre — le défilement vit
   DANS le fil, jamais sur la page.
   ═══════════════════════════════════════════════════════════════════════ */
.mur.est-sien {
  display: block;
}
.mur.est-sien .mur__fil {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(0.7rem, 1.5vw, 1.2rem);
}
.mur.est-sien .mur__case--sien {
  flex: 0 0 auto;
  width: auto;
  height: clamp(15rem, 26vw, 23rem);
  aspect-ratio: 4 / 5;
  border-radius: 6px;
}
.mur.est-sien .mur__case--reel {
  aspect-ratio: 9 / 16;
}
.mur__case--sien video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* La section scan centre son texte : l'en-tete de profil le subissait
   (avatar a gauche, texte flottant au centre). Le GROUPE se centre,
   le texte se recolle a l'avatar. */
.mur.est-sien .mur__profil {
  justify-content: center;
  text-align: left;
}
@media (max-width: 760px) {
  .mur.est-sien .mur__fil {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.6rem;
    scrollbar-width: thin;
  }
  .mur.est-sien .mur__case--sien {
    height: clamp(16rem, 72vw, 22rem);
    scroll-snap-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V33 · Le fond en halo de bord, les titres qui se posent
   Le mesh flottait en plein centre des ecrans sans media (le 3·2·1
   baignait dans un lavis brun sous le texte). Le masque repousse la
   couleur vers les bords : le centre reste noir profond, la teinte
   du client devient une lueur de cadre au lieu d'un barbouillage.
   ═══════════════════════════════════════════════════════════════════════ */
.mesh {
  -webkit-mask-image: radial-gradient(
    ellipse 92% 72% at 50% 46%,
    transparent 24%,
    black 76%
  );
  mask-image: radial-gradient(
    ellipse 92% 72% at 50% 46%,
    transparent 24%,
    black 76%
  );
}

/* Les titres de chapitre se posaient d'un bloc, secs, alors que leurs
   reponses cascadent depuis toujours. Le label arrive d'abord, la
   question se depose ensuite en defloutant : l'oeil a une raison de
   s'arreter a chaque chapitre. */
.quiz .quiz__idx {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 0.55s var(--ease),
    translate 0.6s var(--ease);
}
.quiz .quiz__q {
  opacity: 0;
  translate: 0 30px;
  filter: blur(8px);
  transition:
    opacity 0.8s var(--ease) 0.1s,
    translate 0.9s var(--ease) 0.1s,
    filter 0.75s var(--ease) 0.1s;
}
.quiz.is-in .quiz__idx,
.quiz.is-in .quiz__q {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

/* Filets : sans JS ou en mouvement reduit, tout est visible d'emblee. */
.no-js .quiz__idx,
.no-js .quiz__q,
.reduced .quiz__idx,
.reduced .quiz__q {
  opacity: 1;
  translate: none;
  filter: none;
  transition: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   V34 · L'arrivee du feed identifie — la prise en main
   Le moment ou le pseudo devient SON feed est l'argument du site : il
   merite une entree en scene. L'avatar claque, le compteur roule, les
   cartes deferlent en profondeur, et les vignettes des reels VIVENT
   (lente respiration Ken Burns) — Meta ne donne jamais le fichier video
   des reels d'un autre compte, alors tout ce qui peut bouger bouge.
   ═══════════════════════════════════════════════════════════════════════ */
.mur.est-sien {
  perspective: 1200px;
}
.mur.est-sien .mur__fil {
  transform-style: preserve-3d;
}
.mur.est-sien .mur__case--sien {
  animation: carte-deferle 1.05s cubic-bezier(0.2, 0.9, 0.24, 1) both;
  animation-delay: calc(0.45s + var(--k) * 115ms);
  will-change: transform, opacity;
}
@keyframes carte-deferle {
  0% {
    opacity: 0;
    transform: translate3d(0, 44vh, -560px) rotateX(16deg)
      rotateZ(calc((var(--k) - 2.5) * 4deg)) scale(1.08);
    filter: brightness(1.9) saturate(0.6);
  }
  55% {
    opacity: 1;
    filter: brightness(1.12) saturate(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: brightness(1) saturate(1);
  }
}

/* L'avatar arrive de face et se pose sec ; le nom glisse a sa suite. */
.mur.est-sien .mur__profil {
  animation: none;
}
.mur.est-sien .mur__profil img {
  animation: avatar-claque 0.65s cubic-bezier(0.18, 1.35, 0.3, 1) both;
}
@keyframes avatar-claque {
  0% {
    opacity: 0;
    scale: 2.3;
    filter: blur(7px);
  }
  100% {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
}
.mur.est-sien .mur__profil div {
  animation: profil-glisse 0.6s var(--ease) 0.22s both;
}
@keyframes profil-glisse {
  from {
    opacity: 0;
    translate: -14px 0;
  }
}

/* Les vignettes respirent : zoom lent alterne, contenu par l'overflow
   des cases. C'est ce qui remplace la lecture des reels tiers. */
.mur.est-sien .mur__case--sien img {
  animation: kb-respire 16s ease-in-out infinite alternate;
}
.mur.est-sien .mur__case--sien:nth-child(even) img {
  animation-direction: alternate-reverse;
}
@keyframes kb-respire {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.14) translate3d(2.4%, -1.8%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mur.est-sien .mur__case--sien,
  .mur.est-sien .mur__profil img,
  .mur.est-sien .mur__profil div,
  .mur.est-sien .mur__case--sien img {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* En mode feed reel, la signature geante recouvrait les cartes : le
   profil porte deja le pseudo. Elle devient une legende posee sous le
   fil, discrete. */
.mur.est-sien .mur__signature {
  position: static;
  translate: none;
  margin-top: 1.1rem;
}
.mur.est-sien .mur__signature .scan__nom {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════
   V35 · Noir pur, questions qui s'ecrivent, travail qui monte,
   collab en frise verticale sur telephone
   Le mesh est retire cote JS : le fond du site est un noir franc.
   ═══════════════════════════════════════════════════════════════════════ */

/* Les mots du titre remplacent l'entree en bloc de V33 : le bloc reste
   en place, chaque mot se pose l'un apres l'autre en defloutant. */
.quiz .quiz__q {
  opacity: 1;
  translate: none;
  filter: none;
  transition: none;
}
.quiz .quiz__q .qmot {
  display: inline-block;
  opacity: 0.08;
  translate: 0 0.35em;
  filter: blur(6px);
  transition:
    opacity 0.55s var(--ease) calc(0.12s + var(--m, 0) * 75ms),
    translate 0.6s var(--ease) calc(0.12s + var(--m, 0) * 75ms),
    filter 0.55s var(--ease) calc(0.12s + var(--m, 0) * 75ms);
}
.quiz.is-in .quiz__q .qmot {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}
.no-js .quiz__q .qmot,
.reduced .quiz__q .qmot {
  opacity: 1;
  translate: none;
  filter: none;
  transition: none;
}

/* Le travail MONTE : l'entree des cartes etait a peine visible
   (20 px, 0.72 s). Chaque rangee se souleve franchement au scroll. */
.grid .card {
  transform: translateY(64px) scale(0.94);
  transition:
    transform 1.05s var(--entree) var(--retard, 0ms),
    opacity 0.6s var(--vif) var(--retard, 0ms);
}
.grid .card.is-in {
  transform: none;
}

/* La collab sur telephone : le 2 x 2 posait quatre ronds sans ordre.
   Frise VERTICALE — rail a gauche, l'etoile descend de gare en gare,
   les noms se lisent a droite des puces. */
@media (max-width: 719px) {
  .colab__ligne {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    padding-left: 0.2rem;
    --puce: 2.7rem;
  }
  .colab__rail {
    display: block;
    left: calc(0.2rem + var(--puce) / 2);
    right: auto;
    top: 1.2rem;
    bottom: 1.2rem;
    width: 2px;
    height: auto;
    translate: -50% 0;
  }
  .colab__rail--fait {
    bottom: auto;
    height: calc(100% - 2.4rem);
    transform-origin: center top;
    scale: 1 calc(var(--pos) / 3);
  }
  .colab__star {
    left: calc(0.2rem + var(--puce) / 2);
    top: calc(0.75rem + var(--pos) * 24%);
    translate: -50% 0;
    transition:
      top 0.7s var(--entree),
      rotate 0.7s var(--entree);
  }
  .colab__gare {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 0 0.95rem;
    padding: 0.5rem 0;
  }
  .colab__nom {
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V36 · Le fond est NOIR, point — et l'arrivee vient du coin
   L'ambiance pleine page (radial bas d'ecran) etait la derniere source
   de couleur flottante : coupee. La couleur du client ne vit plus que
   dans la tache sous le curseur et les liseres de cartes.
   ═══════════════════════════════════════════════════════════════════════ */
.ambiance,
.ambiance.is-on,
.ambiance.is-fort {
  display: none;
}

/* L'arrivee des posts, demandee par Hugo : depuis le coin haut-droit
   de l'ecran, une publication apres l'autre, qui descend se poser. */
@keyframes carte-deferle {
  0% {
    opacity: 0;
    transform: translate3d(72vw, -70vh, 0) rotate(10deg) scale(0.5);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}
.mur.est-sien .mur__case--sien {
  animation: carte-deferle 0.9s cubic-bezier(0.22, 1, 0.3, 1) both;
  animation-delay: calc(0.25s + var(--k) * 170ms);
}

/* La couture entre une section sombre et la question claire qui suit :
   un voile qui s'estompe, au lieu d'une coupe franche. */
.scan + .quiz::before,
.metiers + .quiz::before,
.work + .quiz::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.5), transparent);
  pointer-events: none;
}
.scan + .quiz,
.metiers + .quiz,
.work + .quiz {
  position: relative;
}

/* Les mots des questions repondent plus vite au scroll : la cascade
   reste, le retard de depart tombe. */
.quiz .quiz__q .qmot {
  transition:
    opacity 0.5s var(--ease) calc(0.05s + var(--m, 0) * 55ms),
    translate 0.55s var(--ease) calc(0.05s + var(--m, 0) * 55ms),
    filter 0.5s var(--ease) calc(0.05s + var(--m, 0) * 55ms);
}

/* Le compteur d'abonnes est un <i> semantiquement neutre : pas d'italique. */
.mur__nb {
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   V37 · L'ordre des entrees, l'arrivee fluide, l'etoile visible
   ═══════════════════════════════════════════════════════════════════════ */

/* Le titre d'abord, les reponses ensuite : les options attendent que
   les mots de la question soient poses. Une question deja repondue
   reste instantanee. */
.quiz.is-in .quiz__o {
  transition-delay: calc(0.45s + var(--n, 0) * 60ms);
}
.quiz.is-answered .quiz__o {
  transition-delay: 0s;
}

/* Le « Spoiler » n'a plus le droit d'arriver avant son titre. */
.sec-head__note.reveal {
  transition-delay: 0.25s;
}

/* L'arrivee du feed, fluide : un seul geste qui coule depuis le coin,
   les cartes s'enchainent sans a-coups (expo-out, pas de rebond). */
@keyframes carte-deferle {
  0% {
    opacity: 0;
    transform: translate3d(64vw, -62vh, 0) rotate(6deg) scale(0.72);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}
.mur.est-sien .mur__case--sien {
  animation: carte-deferle 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.2s + var(--k) * 110ms);
}

/* L'etoile d'audit se perdait (mix-blend difference) : elle vit sur une
   pastille givree, lisible sur les deux fonds. */
.flotteur {
  mix-blend-mode: normal;
  color: #f2efe9;
  background: rgba(5, 5, 5, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  border: 1px solid rgba(242, 239, 233, 0.2);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.flotteur b,
.flotteur__quoi,
.flotteur__merci {
  text-shadow: 0 1px 6px rgba(5, 5, 5, 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════
   V38 · Cartes qui volent, travail plus quali, respirations reglees,
   etoile sans cercle
   ═══════════════════════════════════════════════════════════════════════ */

/* L'arrivee du feed, inspiree du scroll-morph montre par Hugo : chaque
   carte vole depuis son propre angle (les gauches de la gauche, les
   droites de la droite) et converge vers sa place. */
@keyframes carte-vole {
  0% {
    opacity: 0;
    transform: translate3d(calc((var(--k) - 2.5) * 24vw), -58vh, 0)
      rotate(calc((var(--k) - 2.5) * 9deg)) scale(0.6);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}
.mur.est-sien .mur__case--sien {
  animation: carte-vole 1.15s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(0.15s + var(--k) * 130ms);
}

/* Le travail se souleve avec plus d'ampleur, ressort spring long. */
.grid .card {
  transform: translateY(84px) scale(0.88);
  transition:
    transform 1.15s cubic-bezier(0.19, 1, 0.22, 1) var(--retard, 0ms),
    opacity 0.65s var(--vif) var(--retard, 0ms);
}

/* Les questions ne monopolisent plus un ecran entier : le vide sous la
   question 4 lisait comme « un gros espace » avant les avis. La sonde
   d'entree vise le contenu, la section peut respirer moins haut. */
.quiz[data-ask] {
  min-height: 84svh;
}

/* Respirations du bloc avis → methode : moins de vide au-dessus des
   avis, plus d'air ENTRE les deux avis, la methode se decolle. */
.quotes {
  padding-block: clamp(2.5rem, 5vh, 4rem) clamp(2.5rem, 6vh, 4.5rem);
}
.quotes__duo {
  gap: clamp(2.2rem, 6vw, 4.5rem);
}
.methode {
  padding-top: clamp(4.5rem, 9vh, 7rem);
}

/* La fin : le rapport glisse de gauche, la ligne d'envoi se pose. */
.fin__grille .rapport {
  opacity: 0;
  translate: -30px 0;
  transition:
    opacity 0.8s var(--ease) 0.05s,
    translate 0.85s var(--ease) 0.05s;
}
.fin__grille .envoi {
  opacity: 0;
  translate: 0 34px;
  transition:
    opacity 0.8s var(--ease) 0.22s,
    translate 0.85s var(--ease) 0.22s;
}
.fin__grille.is-in .rapport,
.fin__grille.is-in .envoi {
  opacity: 1;
  translate: 0 0;
}
.no-js .fin__grille .rapport,
.no-js .fin__grille .envoi,
.reduced .fin__grille .rapport,
.reduced .fin__grille .envoi {
  opacity: 1;
  translate: none;
  transition: none;
}

/* L'etoile : pas de cercle (refuse par Hugo). Elle ressort par un
   contour d'ombre serre + une lueur portee, lisibles sur les deux fonds. */
.flotteur {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: drop-shadow(0 0 1.5px rgba(5, 5, 5, 0.95))
    drop-shadow(0 3px 14px rgba(5, 5, 5, 0.5));
}

/* La cascade des mots repond plus vite, les reponses suivent de pres. */
.quiz .quiz__q .qmot {
  transition:
    opacity 0.45s var(--ease) calc(0.04s + var(--m, 0) * 48ms),
    translate 0.5s var(--ease) calc(0.04s + var(--m, 0) * 48ms),
    filter 0.45s var(--ease) calc(0.04s + var(--m, 0) * 48ms);
}
.quiz.is-in .quiz__o {
  transition-delay: calc(0.38s + var(--n, 0) * 55ms);
}
.quiz.is-answered .quiz__o {
  transition-delay: 0s;
}

/* ═══════════════════════════════════════════════════════════════════════
   V39 · Les quatre questions au meme tempo, le rotor du travail,
   l'etoile qui s'inverse, les avis en cartes
   ═══════════════════════════════════════════════════════════════════════ */

/* Une question deja repondue coupait TOUT delai : ses options
   claquaient d'un bloc et Hugo croyait l'animation morte (questions 1
   et 4, les siennes). L'ENTREE garde sa cascade partout ; seule la
   couleur du clic reste immediate. Ce bloc, en dernier, l'emporte sur
   tous les raccourcis is-answered au-dessus. */
.quiz.is-in .quiz__o {
  transition:
    opacity 0.6s var(--ease) calc(0.38s + var(--n, 0) * 55ms),
    translate 0.7s var(--ease) calc(0.38s + var(--n, 0) * 55ms),
    color 0.35s var(--ease) 0s;
}

/* Le rotor : un domaine chasse l'autre dans le titre du travail. */
.sec-head__title .rotor {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
}
.sec-head__title .rotor em {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  translate: 0 115%;
  transition:
    translate 0.75s cubic-bezier(0.3, 1.2, 0.35, 1),
    opacity 0.45s var(--ease);
}
.sec-head__title .rotor em.est-la {
  opacity: 1;
  translate: 0 0;
}
.sec-head__title .rotor em.est-parti {
  opacity: 0;
  translate: 0 -115%;
}
.no-js .rotor em:first-child,
.reduced .rotor em:first-child {
  opacity: 1;
  translate: none;
}

/* L'etoile s'inverse selon le fond qu'elle survole, avec un halo doux
   pour se detacher — jamais de pastille (refusee). */
.flotteur::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(242, 239, 233, 0.18),
    transparent 70%
  );
  z-index: -1;
  transition: background 0.4s var(--ease);
}
.flotteur.sur-clair {
  color: #050505;
  filter: drop-shadow(0 0 1.5px rgba(242, 239, 233, 0.9))
    drop-shadow(0 3px 14px rgba(5, 5, 5, 0.22));
}
.flotteur.sur-clair::before {
  background: radial-gradient(circle, rgba(5, 5, 5, 0.09), transparent 70%);
}
.flotteur.sur-clair b,
.flotteur.sur-clair .flotteur__quoi,
.flotteur.sur-clair .flotteur__merci {
  text-shadow: 0 1px 6px rgba(242, 239, 233, 0.85);
}

/* Les avis deviennent des cartes : fond pose, texte a gauche, l'air
   entre les deux. Pas de portrait : aucun visage invente. */
.quotes {
  padding-block: clamp(3.5rem, 7vh, 5.5rem) clamp(4.5rem, 9vh, 7rem);
}
.quotes__duo {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  gap: clamp(2rem, 5vw, 3.5rem);
}
.quotes__duo .quote {
  background: rgba(5, 5, 5, 0.045);
  border-radius: 22px;
  padding: clamp(1.8rem, 4vw, 3rem);
  text-align: left;
}
.quotes__duo .quote blockquote {
  text-align: left;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2.2rem);
  margin-inline: 0;
}
.methode {
  padding-top: clamp(6rem, 11vh, 8.5rem);
}

/* Le trace de l'etoile etait a 0.16 : trop timide pour se distinguer.
   Le contour de progression, lui, reste plein. */
.flotteur__trace {
  opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════════════════
   V40 · Le feed s'assemble, le temoignage en carte, le titre sobre
   ═══════════════════════════════════════════════════════════════════════ */

/* Les cartes du feed naissent EPARPILLEES (--dx/--dy/--rot poses par
   instagram.js) puis glissent en ressort vers leur place — l'assemblage
   de la reference scroll-morph, contenu dans la zone du fil. Ce bloc
   remplace les keyframes precedentes. */
.mur.est-sien .mur__case--sien {
  animation: none;
  opacity: 0;
  transform: translate3d(var(--dx, 0), var(--dy, -30vh), 0)
    rotate(var(--rot, 0deg)) scale(0.72);
  transition:
    transform 1.05s cubic-bezier(0.26, 1.14, 0.32, 1) calc(var(--k, 0) * 80ms),
    opacity 0.5s var(--ease) calc(var(--k, 0) * 80ms);
  will-change: transform, opacity;
}
.mur.est-sien .mur__fil.est-rangee .mur__case--sien {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mur.est-sien .mur__case--sien {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Le temoignage en carte : visuel a gauche, gros guillemet, citation,
   fleches. Un avis a la fois. */
.temoin {
  max-width: var(--max);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding-inline: var(--pad);
}
.temoin__scene {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
  background: rgba(5, 5, 5, 0.045);
  border-radius: 24px;
  padding: clamp(1.6rem, 4vw, 3rem);
}
.temoin__visu {
  grid-area: 1 / 1;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  scale: 0.96;
  transition:
    opacity 0.55s var(--ease),
    scale 0.6s var(--ease);
}
.temoin__visu.est-la {
  opacity: 1;
  scale: 1;
}
.temoin__visu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.temoin__visu--marque {
  display: grid;
  place-items: center;
  background: rgba(5, 5, 5, 0.07);
}
.temoin__visu--marque img {
  width: 38%;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
}
.temoin__texte {
  grid-area: 1 / 2;
  display: grid;
  position: relative;
}
.temoin__guillemet {
  font-family: inherit;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.6;
  font-weight: 700;
  opacity: 0.25;
  margin-bottom: 0.35em;
}
.temoin__slide {
  grid-area: 2 / 1;
  opacity: 0;
  translate: 0 14px;
  pointer-events: none;
  transition:
    opacity 0.5s var(--ease),
    translate 0.55s var(--ease);
}
.temoin__slide.vient-droite {
  translate: 34px 0;
}
.temoin__slide.vient-gauche {
  translate: -34px 0;
}
.temoin__slide.est-la {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.temoin__slide blockquote {
  margin: 0;
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.3rem);
  line-height: 1.24;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}
.temoin__qui {
  margin-top: 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.temoin__qui em {
  font-style: normal;
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0.02em;
}
.temoin__nav {
  grid-area: 3 / 1;
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.temoin__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--trait, currentColor);
  background: none;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    scale 0.3s var(--ease);
}
.temoin__btn:hover {
  background: var(--blanc);
  color: var(--noir);
  scale: 1.06;
}
@media (max-width: 760px) {
  .temoin__scene {
    grid-template-columns: minmax(0, 1fr);
  }
  .temoin__visu {
    grid-area: 1 / 1;
    max-width: 240px;
  }
  .temoin__texte {
    grid-area: 2 / 1;
  }
}

/* La loupe ne laisse plus le scroll s'enchainer vers la page. */
.loupe {
  overscroll-behavior: contain;
}
.loupe__media {
  overscroll-behavior: contain;
}

/* ═══════════════════════════════════════════════════════════════════════
   V42 · L'ambiance revient en subtil, la nav gagne ses raccourcis,
   le 3·2·1 parle en blanc, le pied de page se tient
   ═══════════════════════════════════════════════════════════════════════ */

/* L'ambiance revit, mais UNIQUEMENT nourrie par les medias : la teinte
   de l'echantillonneur (is-doux) et du survol (is-fort). La teinte de
   section, elle, reste eteinte — pas de couleur sans media a l'ecran. */
.ambiance,
.ambiance.is-on,
.ambiance.is-fort {
  display: block;
}
.ambiance:not(.is-doux):not(.is-fort) {
  opacity: 0;
}
.ambiance.is-on.is-doux {
  opacity: 0.12;
}
.ambiance.is-fort {
  opacity: 0.16;
}

/* Le 3·2·1 vend : les phrases en blanc franc, et la chute
   « c'est tout notre metier » en grand, blanche, qui claque. */
.count__l {
  color: var(--blanc);
}
.count__l--end em {
  color: var(--blanc);
  font-size: 1.55em;
  margin-top: 0.4em;
}

/* Les raccourcis de la nav, et la pastille du retour. */
.nav__liens {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  margin-left: auto;
}
.nav__liens a {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
  position: relative;
  padding-block: 0.2rem;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}
.nav__liens a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.35s var(--ease);
}
.nav__liens a:hover {
  opacity: 1;
}
.nav__liens a:hover::after {
  right: 0;
}
.nav__retour {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.38rem 0.9rem;
  opacity: 0.9;
}
.nav__retour::after {
  display: none;
}
.nav__retour[hidden] {
  display: none;
}
@media (max-width: 760px) {
  .nav__tag {
    display: none;
  }
  .nav__liens {
    gap: 0.8rem;
  }
  .nav__liens a {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }
  .nav__retour {
    padding: 0.3rem 0.7rem;
  }
}

/* Le pied de page : la colonne de droite se tient — l'email en grand,
   les liens qui repondent au survol. */
.foot__cols h5 {
  margin-bottom: 1rem;
}
.foot__cols a {
  font-size: 0.98rem;
  padding-block: 0.3rem;
  width: fit-content;
}
.foot__cols a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.4em;
  opacity: 0;
  translate: -6px 0;
  transition:
    opacity 0.3s var(--ease),
    translate 0.3s var(--ease);
}
.foot__cols a:hover::after {
  opacity: 1;
  translate: 0 0;
}
.foot__cols a[href^="mailto"] {
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blanc);
}

/* Sur telephone, le bouton d'analyse colle au champ du pseudo. */
.scan__champ + .igc {
  margin-top: 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   V43 · Le telephone au serieux : preuve degagee de la nav, methode en
   etapes qui viennent au scroll, temoignage swipable
   ═══════════════════════════════════════════════════════════════════════ */

/* La scene preuve commencait SOUS la nav fixe : le haut du reel etait
   coupe sur iPhone. On lui laisse la place de la nav + l'encoche. */
@media (max-width: 760px) {
  .scene--proof .scene__pin {
    padding-top: calc(3.4rem + env(safe-area-inset-top, 0px));
  }
  .proof__deck {
    height: min(44svh, 23rem);
  }
}

/* Le temoignage se laisse pousser du doigt et du trackpad. */
.temoin__scene {
  touch-action: pan-y;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   V44 · La couleur au survol seulement, la methode epinglee au scroll,
   la preuve qui tient dans un iPhone, le reste au cordeau
   ═══════════════════════════════════════════════════════════════════════ */

/* L'« ovale » au scroll degage (decision Hugo) : la couleur n'existe
   plus QU'AU SURVOL d'un media (is-fort, section travail). */
.ambiance.is-on.is-doux {
  opacity: 0;
}

/* Les badges de vues sur les cartes travail : retires — « c'est pas la
   question qu'on pose a ce moment-la ». Les chiffres vivent au chapitre
   preuve. */
.card__win {
  display: none;
}

/* ── La methode, scene epinglee : une bulle au centre, le scroll passe
     a la suivante. Meme mecanique que le 3·2·1 (majScene + data-solo). */
.methode.scene {
  padding: 0;
}
.scene--collab .scene__track {
  height: 430svh;
}
.scene--collab .scene__pin {
  padding: calc(3.2rem + env(safe-area-inset-top, 0px)) var(--pad) 1.4rem;
}
.scene--collab .sec-head {
  margin-bottom: 0;
}
.scene--collab .colab {
  display: grid;
  place-items: center;
}
.scene--collab .colab__scene {
  background: none;
  padding: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  width: 100%;
}
.scene--collab .colab__vue {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  grid-template-columns: none;
  justify-items: center;
  text-align: center;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  max-width: 34rem;
  opacity: 0;
  visibility: hidden;
  scale: 0.92;
  translate: 0 26px;
  transition:
    opacity 0.5s var(--ease),
    scale 0.55s var(--ease),
    translate 0.55s var(--ease),
    visibility 0s 0.5s;
}
.scene--collab .colab__vue.is-on {
  opacity: 1;
  visibility: visible;
  scale: 1;
  translate: 0 0;
  transition-delay: 0s, 0s, 0s, 0s;
}
.scene--collab .colab__pic {
  width: clamp(120px, 18vw, 170px);
  height: auto;
  aspect-ratio: 1;
  padding: clamp(24px, 3vw, 34px);
  border: 1.5px solid var(--trait);
  border-radius: 50%;
  box-sizing: border-box;
}
.scene--collab .colab__vue figcaption h3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.scene--collab .colab__vue figcaption p {
  max-width: 30rem;
  margin-inline: auto;
}

/* ── La preuve tient dans un iPhone : tout se resserre pour que la
     barre de scene ne barre plus la liste. */
@media (max-width: 760px) {
  .proof__deck {
    height: min(38svh, 20rem);
  }
  .proof__n {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }
  .proof__v {
    font-size: 1.3rem;
  }
  .proof__x {
    font-size: 0.66rem;
  }
  .proof__row {
    padding-block: 0.4rem;
  }
  .quiz[data-ask] {
    min-height: 72svh;
  }
}

/* ── La couture clair → sombre : les sections noires qui suivent une
     question n'arrivent plus en coupe franche. */
.quiz + .metiers,
.quiz + .work {
  position: relative;
}
.quiz + .metiers::before,
.quiz + .work::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(242, 239, 233, 0.3), transparent);
  pointer-events: none;
}

/* ── Le flash d'analyse : quand le compte est identifie, l'ecran
     « prend la photo » avant que le feed s'assemble. */
.scan__ecran {
  position: relative;
}
.scan__ecran.est-flash::after {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    60% 50% at 50% 40%,
    rgba(242, 239, 233, 0.85),
    transparent 70%
  );
  animation: flash-analyse 0.7s var(--ease) both;
}
@keyframes flash-analyse {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ── Le pied de page, au cordeau : trois colonnes reglees, labels
     souslignes. */
.foot__cols h5 {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
@media (min-width: 700px) {
  .foot__cols {
    grid-template-columns: 1.35fr 0.9fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

/* Le pin generique donne le 1fr a la PREMIERE rangee (regle pensee pour
   les scenes preuve/compte) : le titre avalait 800 px et la bulle
   tombait au fond. Ici : titre auto, bulle au centre du reste. */
.scene--collab .scene__pin {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.scene--collab .colab {
  align-self: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   V45 · La methode en GRAND sans cercle, la preuve mobile refaite,
   les collages qui ne rognent plus, l'etoile jamais coupee
   ═══════════════════════════════════════════════════════════════════════ */

/* La bulle de la methode : plus de cercle autour, l'icone en grand,
   le titre en grand — l'ecran ne doit plus paraitre vide (Hugo). */
.scene--collab .colab__pic {
  border: 0;
  padding: 0;
  width: clamp(150px, 22vw, 250px);
}
.scene--collab .colab__vue {
  max-width: 46rem;
  gap: clamp(1.2rem, 3vw, 2rem);
}
.scene--collab .colab__vue figcaption h3 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
}
.scene--collab .colab__vue figcaption p {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  max-width: 34rem;
}

/* Les collages des metiers rognaient le bas des medias : le conteneur
   (46svh en mobile) etait plus petit que sa grille. Plancher a 470 px. */
@media (max-width: 899px) {
  .metiers__scene {
    min-height: max(46svh, 470px);
  }
}

/* La preuve sur telephone, refaite : le reel EN ENTIER et en grand,
   le total dessous, UNE seule ligne de contexte (la derniere allumee),
   pas de coda, la barre au ras du bas. */
@media (max-width: 760px) {
  .proof__deck {
    height: min(52svh, 30rem);
  }
  .proof__row {
    display: none;
  }
  .proof__row.is-on {
    display: block;
  }
  .proof__row.is-on:has(~ .proof__row.is-on) {
    display: none;
  }
  .proof__end {
    display: none;
  }
  .scene--proof .scene__bar {
    margin-bottom: max(0.6rem, env(safe-area-inset-bottom, 0px));
  }

  /* L'etoile d'audit ne depasse plus jamais du bord de l'ecran. */
  .flotteur {
    width: 48px;
    height: 48px;
    right: 0.9rem;
    bottom: 0.9rem;
  }
  .flotteur svg {
    width: 48px;
    height: 48px;
  }

  /* La fin, calibree : de l'air entre le rapport et l'envoi. */
  .fin__grille {
    gap: 2.4rem;
  }
  .fin {
    padding-block: 3rem 2rem;
  }
}

/* Mieux que le plancher : sur mobile, le collage ACTIF devient relatif
   et donne sa vraie hauteur au conteneur — aucun media rogne, quel que
   soit le collage. Les collages inactifs restent empiles en absolu. */
@media (max-width: 899px) {
  .metiers__scene {
    min-height: 0;
  }
  .mfig.is-on {
    position: relative;
    inset: auto;
  }
}

/* Les fractions de rangee arrondissent encore 6-12 px sous le collage :
   absorbes par un fond de marge, plus un pixel de media coupe. */
@media (max-width: 899px) {
  .mfig.is-on {
    padding-bottom: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V46 · Le clip des titres ne rogne plus rien, la methode sous la nav,
   l'arrivee Insta toujours jouee et plus ample
   ═══════════════════════════════════════════════════════════════════════ */

/* Le clip de revelation restait a inset(0 0 -12%) : il rognait
   l'ellipse bleue qui deborde a GAUCHE du bloc titre (« seize » coupe,
   3 rappels de Hugo) et les descentes des italiques. Une fois revele,
   le clip s'ouvre largement au-dela de la boite. */
.sec-head__title.reveal.is-in {
  clip-path: inset(-12% -8% -36% -8%);
}

/* Les italiques Melodrame debordent de leur boite d'encre : de l'air
   pour « gratuitement. » et consorts. */
.contact__title {
  padding-bottom: 0.12em;
}
.contact__title em {
  padding-right: 0.1em;
}

/* Le titre de la methode passait sous la nav fixe (« le Ça est coupe
   par le seize »). */
.scene--collab .scene__pin {
  padding-top: calc(5.6rem + env(safe-area-inset-top, 0px));
}
@media (max-width: 760px) {
  .scene--collab .scene__pin {
    padding-top: calc(4.4rem + env(safe-area-inset-top, 0px));
  }
}

/* L'arrivee du feed, plus ample : depart plus loin, plus penche, plus
   petit, ressort avec un leger depassement a l'atterrissage. */
.mur.est-sien .mur__case--sien {
  transform: translate3d(var(--dx, 0), var(--dy, -32vh), 0)
    rotate(var(--rot, 0deg)) scale(0.5);
  transition:
    transform 1.15s cubic-bezier(0.2, 1.3, 0.25, 1) calc(var(--k, 0) * 85ms),
    opacity 0.5s var(--ease) calc(var(--k, 0) * 85ms);
}

/* DECISION HUGO : l'arrivee du feed est l'argument de vente, elle joue
   AUSSI en « Reduire les animations » (iOS coupait tout : « aucune
   animation sur le telephone »). Les videos, elles, restent soumises au
   reglage. */
@media (prefers-reduced-motion: reduce) {
  .mur.est-sien .mur__case--sien {
    opacity: 0;
    transform: translate3d(var(--dx, 0), var(--dy, -32vh), 0)
      rotate(var(--rot, 0deg)) scale(0.5);
    transition:
      transform 1.15s cubic-bezier(0.2, 1.3, 0.25, 1) calc(var(--k, 0) * 85ms),
      opacity 0.5s var(--ease) calc(var(--k, 0) * 85ms);
  }
  .mur.est-sien .mur__fil.est-rangee .mur__case--sien {
    opacity: 1;
    transform: none;
  }
  .mur.est-sien .mur__profil img {
    animation: avatar-claque 0.65s cubic-bezier(0.18, 1.35, 0.3, 1) both;
  }
  .mur.est-sien .mur__profil div {
    animation: profil-glisse 0.6s var(--ease) 0.22s both;
  }
  .scan__ecran.est-flash::after {
    animation: flash-analyse 0.7s var(--ease) both;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V47 · Les collages en grille mobile propre, et l'arrivee Insta qui ne
   demarre QUE sous les yeux
   ═══════════════════════════════════════════════════════════════════════ */

/* Les collages gardaient leurs positions de grille DESKTOP sur mobile :
   des medias finissaient en lamelle coupee au bord droit (capture
   Identite/KOFF de Hugo). Sur mobile la grille est refaite : un grand
   media, puis des tuiles carrees deux par deux. Rien au bord, jamais. */
@media (max-width: 899px) {
  .mfig {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: 10px;
  }
  .mfig > .mpiece {
    grid-area: auto !important;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
  .mfig > .mpiece:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
}

/* L'arrivee du feed : AUCUNE piece ne bouge avant que le mur soit vu
   (.est-visible pose par instagram.js). Keyframes : elles jouent des
   qu'elles s'appliquent, quel que soit le timing de peinture d'iOS. */
.mur.est-sien .mur__profil img,
.mur.est-sien .mur__profil div {
  opacity: 0;
  animation: none;
}
.mur.est-sien.est-visible .mur__profil img {
  animation: avatar-claque 0.65s cubic-bezier(0.18, 1.35, 0.3, 1) both;
}
.mur.est-sien.est-visible .mur__profil div {
  animation: profil-glisse 0.6s var(--ease) 0.22s both;
}
.mur.est-sien .mur__case--sien {
  opacity: 0;
  transform: none;
  transition: none;
  animation: none;
}
.mur.est-sien.est-visible .mur__case--sien {
  animation: carte-arrive 1.15s cubic-bezier(0.2, 1.3, 0.25, 1) both;
  animation-delay: calc(0.1s + var(--k, 0) * 85ms);
}
@keyframes carte-arrive {
  0% {
    opacity: 0;
    transform: translate3d(var(--dx, 0), var(--dy, -32vh), 0)
      rotate(var(--rot, 0deg)) scale(0.5);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mur.est-sien.est-visible .mur__case--sien {
    animation: carte-arrive 1.15s cubic-bezier(0.2, 1.3, 0.25, 1) both;
    animation-delay: calc(0.1s + var(--k, 0) * 85ms);
  }
  .mur.est-sien.est-visible .mur__profil img {
    animation: avatar-claque 0.65s cubic-bezier(0.18, 1.35, 0.3, 1) both;
  }
  .mur.est-sien.est-visible .mur__profil div {
    animation: profil-glisse 0.6s var(--ease) 0.22s both;
  }
}

/* L'encre des italiques Melodrame deborde de la boite de ligne du titre
   de fin (« gratuitement. » : la boucle du g tranchee net — capture de
   Hugo). La boite masquante s'elargit, les marges negatives conservent
   la mise en page, et le span part de plus bas pour rester masque. */
.contact__title .line {
  padding: 0.14em 0.22em;
  margin: -0.14em -0.22em;
}
.contact__title .line > span {
  transform: translateY(140%);
}

/* ═══════════════════════════════════════════════════════════════════════
   V48 · Chaque metier porte son collage sur telephone, et la retenue
   du hero
   ═══════════════════════════════════════════════════════════════════════ */

/* Le vrai « c'est coupe » de la section metiers : la bascule au scroll
   remplacait le collage avant qu'on ait pu en voir le bas. Sur
   telephone, main.js pose chaque collage SOUS sa ligne de metier, tous
   visibles, plus aucune bascule. */
@media (max-width: 899px) {
  .metier .mfig {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    pointer-events: auto;
    margin: 1.1rem 0 1.8rem;
    padding-bottom: 0 !important;
  }
  .metier .mfig > .mpiece {
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    transition: none;
  }
  .metiers__scene {
    display: none;
    min-height: 0;
  }
}

/* La retenue : la chute du titre attend d'etre MERITEE. Tant que la
   garde est armee, « Elle se saisit. » reste sous son masque ; au
   premier geste de scroll, le site retient le visiteur et l'ecrit. */
.hero.garde-attention .hero__title.is-in .line--em > span {
  transform: translateY(115%);
  transition: transform 1s var(--ease);
}
.hero.garde-attention.se-saisit .hero__title.is-in .line--em > span {
  transform: none;
}

/* Une tuile isolee en fin de collage prend toute la largeur : pas de
   case vide dans la grille mobile. */
@media (max-width: 899px) {
  .metier .mfig > .mpiece:last-child:nth-child(odd):not(:first-child) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V49 · Les metiers en rangees de posts sur telephone, et la retenue
   qui RATTRAPE
   ═══════════════════════════════════════════════════════════════════════ */

/* L'empilement des collages etait informe (tailles depareillees, trous).
   La langue du site, c'est le post : chaque metier montre une RANGEE de
   posts uniformes 4:5 qui se fait defiler au doigt, comme le feed. */
@media (max-width: 899px) {
  .metier .mfig {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .metier .mfig::-webkit-scrollbar {
    display: none;
  }
  .metier .mfig > .mpiece {
    flex: 0 0 auto;
    width: 176px;
    height: 220px;
    aspect-ratio: auto;
    grid-column: auto;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
  }
  .metier .mfig > .mpiece:last-child:nth-child(odd):not(:first-child) {
    grid-column: auto;
    aspect-ratio: auto;
  }
  .metier .mfig > .mpiece > img,
  .metier .mfig > .mpiece > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* La retenue, version rattrapage : le tampon « Elle se saisit. » claque
   en grand, le hero encaisse, le mur s'embrase un battement. */
.hero.garde-attention .hero__title .line--em {
  overflow: visible;
}
.hero.garde-attention .hero__title.is-in .line--em > span {
  transform: none;
  opacity: 0;
  transition: none;
}
.hero.garde-attention.se-saisit .hero__title.is-in .line--em > span {
  opacity: 1;
  animation: tampon-saisit 0.75s cubic-bezier(0.16, 1.3, 0.3, 1) both;
}
@keyframes tampon-saisit {
  0% {
    opacity: 0;
    transform: scale(2.2);
    filter: blur(10px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  75% {
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
.hero.se-saisit .hero__inner {
  animation: secousse 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes secousse {
  0% {
    scale: 1.045;
  }
  100% {
    scale: 1;
  }
}
.hero.se-saisit .hero__wall {
  animation: mur-eclair 0.9s var(--ease) both;
}
@keyframes mur-eclair {
  0% {
    filter: brightness(1.2) saturate(1.25) contrast(1.02);
  }
  100% {
    filter: brightness(0.62) saturate(1.08) contrast(1.02);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V50 · Les metiers redeviennent une section NORMALE sur telephone,
   et la prise devient FLAGRANTE
   ═══════════════════════════════════════════════════════════════════════ */

/* L'epinglage de la scene metiers survivait sur mobile : la section
   « bougeait bizarrement » au scroll et coupait en bas (capture Hugo).
   Sur telephone : plus de piste, plus de pin, une section qui defile
   normalement, tuiles verrouillees a 176x220. */
@media (max-width: 899px) {
  .metiers .scene__track {
    height: auto !important;
  }
  .metiers .scene__pin {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }
  .metiers .scene__bar {
    display: none;
  }
  .metier .mfig > .mpiece {
    width: 176px !important;
    height: 220px !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* La prise, version FLAGRANTE : eclair plein ecran au rattrapage, la
   chute claque enorme et RESTE en grand. C'est l'argument du site. */
.hero.garde-attention.se-saisit .hero__title .line--em em {
  font-size: 1.5em;
}
.hero.se-saisit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    62% 58% at 50% 46%,
    rgba(242, 239, 233, 0.95),
    transparent 74%
  );
  animation: prise-eclair 0.55s var(--ease) both;
}
@keyframes prise-eclair {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.hero.garde-attention.se-saisit .hero__title.is-in .line--em > span {
  animation: tampon-saisit 0.85s cubic-bezier(0.16, 1.3, 0.3, 1) 0.1s both;
}
@keyframes tampon-saisit {
  0% {
    opacity: 0;
    transform: scale(3.1) rotate(-4deg);
    filter: blur(14px);
  }
  50% {
    opacity: 1;
    filter: blur(0);
  }
  68% {
    transform: scale(0.94) rotate(0.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0);
  }
}
@keyframes secousse {
  0% {
    scale: 1.07;
  }
  100% {
    scale: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V51 · La prise seule en scene, les metiers en grille fixe, la loupe
   qui defile, l'etoile qui explique, zero emoji
   ═══════════════════════════════════════════════════════════════════════ */

/* Le DERNIER emoji : le ↗ du bouton de carte etait dessine par le CSS
   sans selecteur de presentation texte — carre bleu sur iOS. */
.card__toggle::after {
  content: "↗\FE0E";
}

/* La prise : « L'attention ne se demande pas » S'EFFACE au rattrapage —
   il ne reste que la chute, seule en scene. */
.hero.garde-attention.se-saisit .hero__title .line:not(.line--em) > span {
  animation: efface-attention 0.55s var(--ease) both;
}
@keyframes efface-attention {
  to {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-16%);
  }
}

/* Les metiers sur telephone : GRILLE FIXE — le couloir scrollable
   piegait les gestes (la rangee bougeait pendant le scroll vertical,
   3e tuile inaccessible). Un grand media, deux carres, tout visible. */
@media (max-width: 899px) {
  .metier .mfig {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .metier .mfig > .mpiece {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  .metier .mfig > .mpiece:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10 !important;
  }
}

/* La loupe defile sur telephone : media borne, texte lisible dessous,
   pour TOUT ce qu'on ouvre. */
@media (max-width: 760px) {
  .loupe {
    place-items: start center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .loupe > * {
    max-height: none;
  }
  .loupe__media {
    max-height: 56svh;
  }
  .loupe__texte {
    padding-bottom: 2.2rem;
  }
}

/* L'etoile devient cliquable et s'explique ; sur telephone le
   pourcentage ne s'entremele plus (la bulle le porte). */
.flotteur {
  pointer-events: auto;
  cursor: pointer;
}
.flotteur__aide {
  position: fixed;
  right: 0.9rem;
  bottom: calc(0.9rem + 64px);
  z-index: 130;
  max-width: 270px;
  background: #050505;
  color: #f2efe9;
  border: 1px solid rgba(242, 239, 233, 0.18);
  border-radius: 14px;
  padding: 0.95rem 1.05rem;
  font-size: 0.82rem;
  line-height: 1.45;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.flotteur__aide[hidden] {
  display: none;
}
.flotteur__aide b {
  display: block;
  margin-bottom: 0.3rem;
}
.flotteur__aide span {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
@media (max-width: 760px) {
  .flotteur b {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V52 · Les dernieres retouches : la prise plus liee, la preuve moins
   pressee, le pourcentage sous l'etoile, les metiers aeres, l'ordre
   titre puis bulle
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · La prise, plus fluide : l'effacement et le tampon se CROISENT —
   l'un s'en va pendant que l'autre arrive, un seul geste. */
.hero.garde-attention.se-saisit .hero__title .line:not(.line--em) > span {
  animation: efface-attention 0.75s var(--ease) both;
}
.hero.garde-attention.se-saisit .hero__title.is-in .line--em > span {
  animation: tampon-saisit 1.05s cubic-bezier(0.19, 1.08, 0.28, 1) 0.22s both;
}
@keyframes tampon-saisit {
  0% {
    opacity: 0;
    transform: scale(2.4) rotate(-3deg);
    filter: blur(12px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  74% {
    transform: scale(0.975) rotate(0.3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0);
  }
}

/* 2 · La preuve prenait de la vitesse sur la fin : piste allongee,
   chaque palier a le temps d'etre lu. */
.scene--proof .scene__track {
  height: 580svh;
}

/* 3 · Le pourcentage vit JUSTE SOUS l'etoile, centre, partout. */
.flotteur b {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  translate: -50% 0;
  font-size: 0.62rem;
}
@media (max-width: 760px) {
  .flotteur b {
    display: block;
    font-size: 0.56rem;
  }
}

/* 4 · Les metiers respirent : plus d'air autour des collages, la tuile
   isolee reprend toute la largeur. */
@media (max-width: 899px) {
  .metier .mfig {
    gap: 12px;
    margin: 1.5rem 0 2.2rem;
  }
  .metier .mfig > .mpiece:last-child:nth-child(odd):not(:first-child) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10 !important;
  }
}

/* 5 · La methode dans l'ORDRE : le titre d'abord, la bulle ensuite. */
.scene--collab .colab {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 0.7s var(--ease) 0.55s,
    translate 0.75s var(--ease) 0.55s;
}
.methode.is-in .colab {
  opacity: 1;
  translate: 0 0;
}
.no-js .scene--collab .colab,
.reduced .scene--collab .colab {
  opacity: 1;
  translate: none;
  transition: none;
}

/* Le grid-area !important d'un ancien bloc ecrasait la pleine largeur
   du premier media : on aligne les armes. */
@media (max-width: 899px) {
  .metier .mfig > .mpiece:first-child {
    grid-column: 1 / -1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V53 · Les medias ENTIERS au doigt : rangee laterale aux vrais
   formats, cascade au scroll, loupe pleine, pourcentage decolle
   ═══════════════════════════════════════════════════════════════════════ */

/* Ce qu'on fait, telephone : defilement lateral par metier, chaque
   media ENTIER a son vrai format (un reel = un 9:16 complet), snap
   doux, et les tuiles arrivent en cascade quand le metier entre. */
@media (max-width: 899px) {
  .metier .mfig {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    gap: 10px;
    margin: 1.4rem 0 2.1rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }
  .metier .mfig::-webkit-scrollbar {
    display: none;
  }
  .metier .mfig > .mpiece {
    flex: 0 0 auto;
    height: 300px !important;
    width: auto !important;
    aspect-ratio: auto !important;
    grid-column: auto !important;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
  }
  /* Un reel est un reel : les videos gardent leur 9:16 entier. */
  .metier .mfig > .mpiece:has(> video) {
    aspect-ratio: 9 / 16 !important;
  }
  .metier .mfig > .mpiece > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Les images s'affichent entieres, largeur naturelle. */
  .metier .mfig > .mpiece > img {
    height: 100%;
    width: auto;
    max-width: 78vw;
    object-fit: contain;
    display: block;
  }
  /* La cascade : les tuiles glissent une a une quand le metier entre. */
  .metier .mfig > .mpiece {
    opacity: 0;
    translate: 26px 0;
    transition:
      opacity 0.5s var(--ease),
      translate 0.55s var(--ease);
  }
  .metier .mfig.is-in > .mpiece {
    opacity: 1;
    translate: 0 0;
  }
  .metier .mfig.is-in > .mpiece:nth-child(2) {
    transition-delay: 0.12s;
  }
  .metier .mfig.is-in > .mpiece:nth-child(3) {
    transition-delay: 0.24s;
  }
  .metier .mfig.is-in > .mpiece:nth-child(4) {
    transition-delay: 0.36s;
  }
  .no-js .metier .mfig > .mpiece,
  .reduced .metier .mfig > .mpiece {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* La loupe : le media EN ENTIER (reel a taille de reel), jamais de
   scroll dans le media — c'est la loupe qui defile, le texte dessous. */
@media (max-width: 760px) {
  .loupe__media {
    max-height: none;
    overflow: visible;
  }
  .loupe__media video,
  .loupe__media img {
    max-height: 64svh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-inline: auto;
  }
}

/* Le pourcentage decolle de la pointe basse de l'etoile. */
.flotteur b {
  top: calc(100% + 8px);
}
@media (max-width: 760px) {
  .flotteur b {
    top: calc(100% + 10px);
  }
}

/* Les regles de l'ere grille (premier media 16/10 pleine largeur)
   battaient le 9:16 des reels (:has pese moins que :first-child).
   On les neutralise : dans la rangee, chaque media a SON format. */
@media (max-width: 899px) {
  .metier .mfig > .mpiece:first-child,
  .metier .mfig > .mpiece:last-child:nth-child(odd):not(:first-child) {
    grid-column: auto !important;
    aspect-ratio: auto !important;
  }
  .metier .mfig > .mpiece:has(> video),
  .metier .mfig > .mpiece:has(> video):first-child {
    aspect-ratio: 9 / 16 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V54 · Les rangees avancent au scroll : plus de defilement au doigt
   sur les tuiles (fini le drift), le scroll vertical les pilote.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .metier .mfig {
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    touch-action: pan-y !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V55 · Les metiers sur telephone : la SCENE, version doigt
   Un metier plein ecran a la fois (nom, tags, rangee de reels swipable
   a l'horizontale), le scroll vertical passe au suivant en fondu, une
   fleche indique qu'on peut descendre. C'est la scene du desktop,
   traduite au telephone — plus de pilotage automatique.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* La scene se re-epingle (annule le mode statique V50). */
  .metiers .scene__track {
    height: 380svh !important;
  }
  .metiers .scene__pin {
    position: sticky !important;
    top: 0;
    height: 100svh !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: start;
    padding-top: calc(3.6rem + env(safe-area-inset-top, 0px));
    padding-bottom: 1rem;
    overflow: hidden;
  }
  .metiers .scene__bar {
    display: block;
  }
  .metiers__head {
    margin-bottom: 0.6rem;
  }
  /* Un seul metier a l'ecran : les quatre s'empilent dans la meme
     case et se fondent l'un dans l'autre au scroll. */
  .metiers__liste {
    display: grid;
    align-self: center;
  }
  .metier {
    grid-area: 1 / 1;
    border: 0 !important;
    opacity: 0;
    translate: 0 34px;
    pointer-events: none;
    transition:
      opacity 0.5s var(--ease),
      translate 0.55s var(--ease);
  }
  .metier.is-on {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }
  /* La rangee : swipe HORIZONTAL au doigt ; le geste vertical remonte
     a la page (pan-x seul), plus aucun drift accidentel. */
  .metier .mfig {
    overflow-x: auto !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity !important;
    margin: 1.2rem 0 0.6rem;
  }
  .metier .mfig > .mpiece {
    opacity: 1 !important;
    translate: none !important;
  }
  /* L'indice : on peut descendre. */
  .metiers .scene__pin::after {
    content: "\2193";
    position: absolute;
    left: 50%;
    bottom: max(0.9rem, env(safe-area-inset-bottom, 0px));
    translate: -50% 0;
    font-size: 1.1rem;
    color: var(--dim);
    animation: indice-descend 1.6s var(--ease) infinite;
    pointer-events: none;
  }
  @keyframes indice-descend {
    0%,
    100% {
      transform: translateY(0);
      opacity: 0.45;
    }
    50% {
      transform: translateY(7px);
      opacity: 0.95;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V56 · Le clic touche le BON metier, et la phrase se reconstruit
   ═══════════════════════════════════════════════════════════════════════ */

/* Les 4 metiers sont empiles : pointer-events se reactive sur les
   enfants, et le collage d'Identite (au sommet, invisible) captait les
   clics — « je clique une video, ca ouvre Identite ». `visibility`
   coupe le hit-test pour de bon ; elle bascule a la fin du fondu. */
@media (max-width: 899px) {
  .metier {
    visibility: hidden;
    transition:
      opacity 0.5s var(--ease),
      translate 0.55s var(--ease),
      visibility 0s 0.5s;
  }
  .metier.is-on {
    visibility: visible;
    transition:
      opacity 0.5s var(--ease),
      translate 0.55s var(--ease),
      visibility 0s 0s;
  }
  .metier:not(.is-on) .mfig,
  .metier:not(.is-on) .mpiece {
    pointer-events: none !important;
  }
}

/* La phrase se RECONSTRUIT apres la prise : les deux premieres lignes
   reviennent doucement au-dessus de la chute restee en grand. */
.hero.se-relit .hero__title .line:not(.line--em) > span {
  animation: rev-attention 1s var(--ease) both;
}
@keyframes rev-attention {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-16%);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V57 · Ce qu'on fait, plus fluide : piste plus longue (chaque metier
   respire), fondus plus doux, entree en micro-zoom.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .metiers .scene__track {
    height: 440svh !important;
  }
  /* L'equilibre : la sortie s'efface VITE (0.3 s), l'entree repond
     IMMEDIATEMENT (pas de delai) mais se pose en douceur (0.5 s).
     Reaction instantanee, geste doux. */
  .metier {
    translate: 0 14px;
    scale: 0.99;
    transition:
      opacity 0.3s var(--ease),
      translate 0.3s var(--ease),
      scale 0.3s var(--ease),
      visibility 0s 0.3s;
    will-change: opacity, translate;
  }
  .metier.is-on {
    translate: 0 0;
    scale: 1;
    transition:
      opacity 0.5s var(--ease),
      translate 0.55s var(--ease),
      scale 0.55s var(--ease),
      visibility 0s 0s;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V58 · CE QU'ON FAIT SUR TELEPHONE — FORME FINALE, STATIQUE ET NATIVE
   La scene epinglee est abandonnee sur mobile (decision ferme).
   Section normale, metiers empiles, rangees de reels entiers en glisse
   horizontale NATIVE (touch-action auto : le navigateur arbitre les
   gestes comme dans toutes les apps), zero snap, bout atteignable.
   Ce bloc est FINAL et ecrase toute la guerre de reglages au-dessus.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .metiers .scene__track {
    height: auto !important;
  }
  .metiers .scene__pin {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding-top: 1.5rem;
    overflow: visible !important;
  }
  .metiers .scene__pin::after {
    content: none !important;
  }
  .metiers .scene__bar {
    display: none !important;
  }
  .metiers__liste {
    display: block !important;
  }
  .metier {
    position: static !important;
    grid-area: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    pointer-events: auto !important;
    transition: none !important;
    padding-block: 1.1rem 1.6rem;
  }
  .metier .mfig,
  .metier .mpiece {
    pointer-events: auto !important;
    visibility: visible !important;
  }
  .metier .mfig {
    display: flex !important;
    overflow-x: auto !important;
    touch-action: auto !important;
    scroll-snap-type: none !important;
    gap: 10px;
    margin: 1.1rem 0 0.3rem;
    padding-bottom: 6px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .metier .mfig > .mpiece {
    opacity: 1 !important;
    translate: none !important;
    height: 290px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V59 · CE QU'ON FAIT TELEPHONE — GRILLE 3 REELS, AUCUN SCROLLER
   Le scroller horizontal imbrique est une plaie iOS (Safari verrouille
   l'element touche : gestes pieges, bout inatteignable). SUPPRIME.
   Par metier : ses 3 reels cote a cote en 9:16, tout visible d'un
   coup, aucun geste interne, un clic ouvre la loupe. Ce bloc remplace
   V58 et clot le sujet.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .metier .mfig {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible !important;
    overflow-x: visible !important;
    touch-action: auto !important;
    margin: 1.1rem 0 0.3rem;
    padding-bottom: 0;
  }
  .metier .mfig > .mpiece {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    border-radius: 9px;
    overflow: hidden;
  }
  .metier .mfig > .mpiece > img,
  .metier .mfig > .mpiece > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V60 · SPEC FINALE DE HUGO — les 3 videos PRESQUE PLEIN ECRAN, paging
   facon Apple (une video par geste, aimantee au centre), pattern natif
   canonique SANS entrave (touch-action auto : l'axe vertical passe a la
   page). Ecrase V59.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .metier .mfig {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory !important;
    touch-action: auto !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 1.2rem 0 0.4rem;
  }
  .metier .mfig::-webkit-scrollbar {
    display: none;
  }
  .metier .mfig > .mpiece {
    flex: 0 0 auto;
    width: min(78vw, 340px) !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 12px;
    overflow: hidden;
  }
  .metier .mfig > .mpiece > img,
  .metier .mfig > .mpiece > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V61 · CE QU'ON FAIT TELEPHONE — SCENE EPINGLEE, SPEC DICTEE PAR HUGO
   « Le titre reste. Je scroll : Social media devient Video, sans que ce
   soit plus bas. Gauche-droite = le carrousel, basta. Haut-bas = la page,
   meme le doigt sur une video. » Le titre est epingle, le scroll vertical
   bascule les metiers SUR PLACE (machinerie de scene, comme le reste du
   site). Tuiles moitie de V60. L'axe est verrouille en dur : touch-action
   pan-y (le navigateur ne connait QUE le vertical) + drag horizontal
   pilote en JS (module carrousel dans main.js). Ecrase V58-V60.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .metiers .scene__track {
    height: 420svh !important;
  }
  .metiers .scene__pin {
    position: sticky !important;
    top: 0;
    height: 100dvh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 1.1rem;
    padding: 4.2rem var(--pad, 20px) 2.4rem;
    overflow: hidden !important;
  }
  .metiers__head {
    flex: none;
  }
  .metiers__note {
    display: none;
  }
  .metiers__liste {
    display: grid !important;
    flex: none;
  }
  .metier {
    position: static !important;
    grid-area: 1 / 1 !important;
    padding-block: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    translate: 0 22px !important;
    pointer-events: none !important;
    transition:
      opacity 0.4s ease,
      translate 0.4s ease,
      visibility 0s 0.4s !important;
  }
  .metier.is-on {
    visibility: visible !important;
    opacity: 1 !important;
    translate: 0 0 !important;
    pointer-events: auto !important;
    transition:
      opacity 0.55s ease 0.12s,
      translate 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
      visibility 0s !important;
  }
  .metier .mfig {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px;
    margin: 1rem 0 0;
    padding-bottom: 0;
    overflow-x: auto !important;
    overflow-y: hidden;
    touch-action: pan-y !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    visibility: inherit !important;
  }
  .metier .mfig::-webkit-scrollbar {
    display: none;
  }
  .metier .mfig > .mpiece {
    flex: 0 0 auto;
    width: min(44vw, 190px) !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    opacity: 1 !important;
    translate: none !important;
    scroll-snap-align: none;
    border-radius: 10px;
    overflow: hidden;
  }
  .metier .mfig > .mpiece > img,
  .metier .mfig > .mpiece > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .metier .mfig > .card__more {
    display: none;
  }
}

/* V61b · La colonne de la scene metiers deborde (nom en taille desktop
   → min-content 535px > 390). On borne tout a l'ecran, le nom en clamp. */
@media (max-width: 899px) {
  .metiers__liste {
    width: 100% !important;
    max-width: 100% !important;
  }
  .metier {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .metier__btn {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  .metier__nom {
    font-size: clamp(1.9rem, 8.2vw, 2.6rem) !important;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V63 · CE QU'ON FAIT TELEPHONE — MOSAIQUE PLEIN ECRAN (spec Hugo, soir
   du 16). Plus AUCUN defilement lateral : les 3 medias du metier en
   mosaique (grande a gauche, deux a droite, comme l'ordinateur), le
   titre vers le haut, la mosaique mange le noir. Track rallonge pour
   un scroll precis (un petit geste ne saute plus deux metiers), fleche
   d'invitation en bas, etoile et pourcentage remontes.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .metiers .scene__track {
    height: 560svh !important;
  }
  .metiers .scene__pin {
    justify-content: flex-start;
    gap: 0.8rem;
    padding: 4.6rem var(--pad, 20px) 3.2rem;
  }
  .metiers__liste {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  .metier {
    height: 100%;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
  }
  .metier .mfig {
    display: grid !important;
    grid-template-columns: 3fr 2fr !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0.9rem 0 0;
    overflow: hidden !important;
    overflow-x: hidden !important;
    touch-action: auto !important;
  }
  .metier .mfig > .mpiece {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    aspect-ratio: auto !important;
    flex: none !important;
    grid-area: auto !important;
    border-radius: 10px;
    overflow: hidden;
  }
  .metier .mfig > .mpiece:first-child {
    grid-area: 1 / 1 / 3 / 2 !important;
  }
  .metier .mfig > .mpiece > img,
  .metier .mfig > .mpiece > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .metiers .scene__pin::after {
    content: "" !important;
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    width: 11px;
    height: 11px;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    border-bottom: 2px solid rgba(255, 255, 255, 0.75);
    transform: translateX(-50%) rotate(45deg);
    animation: fleche-scroll 1.7s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes fleche-scroll {
    0%,
    100% {
      translate: -50% 0;
      opacity: 0.8;
    }
    50% {
      translate: -50% 7px;
      opacity: 0.3;
    }
  }
  .flotteur {
    bottom: 2.6rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   V64 · FEED INSTA TELEPHONE (cases plus grandes + axe verrouille) et
   BARRE DU HAUT QUI RESTE. Trois retours de Hugo du 16 au soir :
   1. les publications qui arrivent apres le scan sont trop petites ;
   2. le fil se laissait bouger dans les deux axes a la fois (meme
      liberte que l'ancien bug des metiers) → meme traitement : pan-y
      + drag pilote en JS (module axe verrouille, generalise) ;
   3. la nav se cachait/revenait au scroll sur telephone (clignote) :
      sur mobile elle reste posee, point.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .mur.est-sien .mur__fil {
    touch-action: pan-y !important;
    scroll-snap-type: none !important;
    overflow-y: hidden;
    scrollbar-width: none;
    gap: 10px;
  }
  .mur.est-sien .mur__fil::-webkit-scrollbar {
    display: none;
  }
  .mur.est-sien .mur__case--sien {
    height: clamp(22rem, 100vw, 28rem) !important;
  }
}
/* La regle « transform:none sur .nav.is-hidden mobile » (V64) est retiree :
   Hugo a vu la barre disparaitre completement sur iPhone juste apres.
   Le clignotement est desormais coupe a la source dans main.js : sur
   telephone la classe is-hidden n'est JAMAIS posee. */

/* ═══════════════════════════════════════════════════════════════════════
   V66 · PIED DE PAGE : l'adresse hello@seizesocialmedia.ch est longue,
   elle debordait sur la colonne Instagram au telephone. Chaque colonne
   est bornee et l'adresse se coupe proprement. Et FIN DE PARCOURS :
   pluie d'etoiles dorees + panneau merci fermable (demande de Hugo —
   exception assumee a la regle « pas de couleur seize »).
   ═══════════════════════════════════════════════════════════════════════ */
.foot__cols > div {
  min-width: 0;
}
.foot__cols a,
.foot__cols p {
  overflow-wrap: anywhere;
}

.fin__grille form {
  position: relative;
}
.pluie-etoiles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.pluie-etoiles i {
  position: absolute;
  bottom: 30%;
  width: 14px;
  height: 14px;
  background: #e8b84b;
  clip-path: polygon(
    50% 0%,
    63% 34%,
    98% 35%,
    70% 57%,
    79% 91%,
    50% 71%,
    21% 91%,
    30% 57%,
    2% 35%,
    37% 34%
  );
  filter: drop-shadow(0 0 6px rgba(232, 184, 75, 0.55));
  animation: vol-dore var(--t, 1.3s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes vol-dore {
  0% {
    opacity: 0;
    translate: 0 0;
    scale: 0.3;
    rotate: 0deg;
  }
  12% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: calc(var(--dx, 0.5) * 150px) calc(var(--dy, -1) * 190px);
    scale: 0.55;
    rotate: var(--r, 260deg);
  }
}

.merci-panneau {
  margin-top: 1.1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(5, 5, 5, 0.16);
  border-radius: 12px;
  background: rgba(232, 184, 75, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  animation: merci-pose 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.merci-panneau p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.merci-panneau button {
  flex: none;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}
@keyframes merci-pose {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pluie-etoiles i {
    animation: none;
    opacity: 0;
  }
}