/* ==========================================================================
   GJS · QUI SOMMES-NOUS
   Ouverture G · J · S (les lettres se rassemblent au défilement) · Vision
   (citation corrigée au défilement) · L'équipe (3 associés) · Valeurs (cartes
   qui se retournent) · Trajectoire (frise qui se remplit) · CTA
   Sans JavaScript et en mouvement réduit : chaque bloc est dans son état final.
   ========================================================================== */

/* ---- 1. Ouverture : G · J · S ------------------------------------------------
   Trois lettres-affiches (citron, noir, crème foncé), chacune suivie de la
   pastille photo d'un associé : G ● J ● S ●. Au défilement (pages/about.js),
   elles glissent et s'emboîtent, les pastilles se referment en points citron, un coup de peinture citron recouvre
   le J puis le S : le logo GJS, géant, est « tamponné ».
   Tout est piloté par six variables de progression, de 0 à 1, posées sur la
   section : --t (textes qui s'effacent), --m (rapprochement), --d (pastilles),
   --c (couleurs fondues), --z (zoom au centre), --r (inclinaison du logo). */

.gather {
  --t: 0;
  --m: 1;
  --d: 1;
  --c: 1;
  --z: 0;
  --r: 1;
  position: relative;
  isolation: isolate;
}

/* Avec le mouvement : départ séparé, et la scène reste collée (sticky) pendant
   que la section, plus haute que l'écran, défile. */
.has-motion:not([data-motion="reduced"]) .gather {
  --m: 0;
  --d: 0;
  --c: 0;
  --r: 0;
  --run: 70svh;
  height: calc(100svh - var(--header-h) + var(--run));
}

.has-motion[data-motion="desktop"] .gather { --run: 95svh; }

.gather__pin {
  min-height: min(calc(100svh - var(--header-h)), 860px);
  display: grid;
}

.has-motion:not([data-motion="reduced"]) .gather__pin {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  min-height: 0;
  overflow: clip;
}

.gather__inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  row-gap: clamp(12px, 2.4vh, 30px);
  padding-block: clamp(16px, 3vh, 40px) clamp(10px, 2vh, 24px);
}

.gather__kicker .sticker { font-size: 1.125rem; }

/* Scène : un soleil de points (trame) derrière le mot */
.gather__stage {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  min-height: 0;
  container-type: inline-size;
}

.gather__stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(92cqi, 680px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(20, 20, 20, 0.16) 1.8px, transparent 2.4px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0 34%, transparent 70%);
  mask-image: radial-gradient(circle at center, #000 0 34%, transparent 70%);
  opacity: calc(1 - var(--z) * 0.6);
  pointer-events: none;
}

.gather__word {
  --gw: min(clamp(5.5rem, 2.4rem + 16vw, 16rem), 30svh);
  /* Écart de départ entre les lettres (affiné en px par about.js) : trois écarts,
     deux entre les lettres et un après le S pour la troisième pastille */
  --spread: min(0.8em, max(0em, calc((94cqi - 1.96em) / 3)));
  /* Diamètre des pastilles : il suit l'écart qu'elles occupent */
  --dw: min(0.6em, calc(var(--spread) * 0.84));
  position: relative;
  display: flex;
  align-items: stretch;
  font-family: var(--font-display);
  font-size: var(--gw);
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  /* Au départ, la rangée G ● J ● S ● est recentrée : la troisième pastille
     dépasse à droite d'un demi-écart et d'un demi-diamètre, on décale donc de
     (écart + diamètre) / 4 ; une fois soudé, le logo revient au centre */
  translate: calc((var(--spread) + var(--dw)) * -0.25 * (1 - var(--m))) calc(var(--zy, 0px) * var(--z));
  rotate: calc(-3deg * var(--r));
  scale: calc(1 + (var(--zs, 1.6) - 1) * var(--z));
}

.gather__card {
  position: relative;
  display: block;
  flex-shrink: 0;
}

/* Les cartes se chevauchent d'une bordure : une fois soudées, plus de joint */
.gather__card + .gather__card { margin-left: calc(-1 * var(--border)); }

.gather__in {
  --card-bg: var(--lime);
  --card-fg: var(--ink);
  --card-sh: var(--ink);
  position: relative;
  display: block;
  padding: 0.12em 0.13em 0.02em;
  background: var(--card-bg);
  color: var(--card-fg);
  border: var(--border) solid var(--ink);
  box-shadow: 0.045em 0.045em 0 var(--card-sh);
}

.gather__letter {
  display: block;
  line-height: 0.84;
}

.gather__card--g {
  translate: calc(var(--spread) * (var(--m) - 1)) calc(-0.08em * (1 - var(--m)));
  rotate: calc(-8deg * (1 - var(--m)));
}

.gather__card--g .gather__in {
  border-radius: var(--radius) calc(var(--radius) * (1 - var(--c))) calc(var(--radius) * (1 - var(--c))) var(--radius);
}

.gather__card--j {
  translate: 0 calc(0.1em * (1 - var(--m)));
  rotate: calc(5deg * (1 - var(--m)));
}

.gather__card--j .gather__in {
  --card-bg: var(--ink);
  --card-fg: var(--cream);
  --card-sh: var(--lime);
  border-radius: calc(var(--radius) * (1 - var(--c)));
  transition: box-shadow 0.35s var(--ease);
}

/* Une fois repeint, le J reprend l'ombre noire du logo */
.gather.is-painted .gather__card--j .gather__in,
html:not(.has-motion) .gather__card--j .gather__in,
[data-motion="reduced"] .gather__card--j .gather__in { --card-sh: var(--ink); }

.gather__card--s {
  translate: calc(var(--spread) * (1 - var(--m))) calc(-0.04em * (1 - var(--m)));
  rotate: calc(-6deg * (1 - var(--m)));
}

.gather__card--s .gather__in {
  --card-bg: var(--cream-2);
  border-radius: calc(var(--radius) * (1 - var(--c))) var(--radius) var(--radius) calc(var(--radius) * (1 - var(--c)));
}

/* Coup de peinture citron : il recouvre le J, puis le S, de gauche à droite.
   Le calque reprend exactement la place de la lettre (même marge intérieure). */
.gather__paint {
  position: absolute;
  inset: 0;
  display: block;
  padding: inherit;
  background: var(--lime);
  color: var(--ink);
  line-height: 0.84;
  clip-path: inset(0 calc((1 - min(1, var(--c) * 1.5)) * 100%) 0 0);
}

.gather__card--s .gather__paint {
  clip-path: inset(0 calc((1 - max(0, var(--c) * 1.5 - 0.5)) * 100%) 0 0);
}

/* Rubans adhésifs sur le G et le S */
.gather__card--g::before,
.gather__card--s::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -0.07em;
  width: 0.42em;
  height: 0.12em;
  background: var(--cream-2);
  opacity: 0.94;
  border-inline: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  pointer-events: none;
}

.gather__card--g::before { left: -0.08em; rotate: -18deg; }
.gather__card--s::before { right: -0.1em; rotate: 14deg; }

/* Pastilles photo (une par associé) : les deux premières suivent le milieu des
   écarts entre les lettres, la troisième celui de l'écart après le S ; puis
   elles se referment en points citron */
.gather__dot {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: var(--dw);
  aspect-ratio: 1;
  /* La pastille rétrécit avec l'écart qu'elle occupe */
  scale: clamp(0, calc((1 - var(--m)) * 1.25), 1);
}

.gather__dot--1 {
  left: var(--x1, 33.3%);
  translate: calc(-50% - var(--spread) * (1 - var(--m)) / 2) -50%;
}

.gather__dot--2 {
  left: var(--x2, 66.6%);
  translate: calc(-50% + var(--spread) * (1 - var(--m)) / 2) -50%;
}

/* Après le S : le S s'écarte d'un écart, la pastille se place au milieu du suivant */
.gather__dot--3 {
  left: var(--x3, 100%);
  translate: calc(-50% + var(--spread) * (1 - var(--m)) * 1.5) -50%;
}

.gather__dot-in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--cream-2);
  border: var(--border) solid var(--ink);
  border-radius: 50%;
  box-shadow: 0.03em 0.03em 0 var(--ink);
}

.gather__dot--1 .gather__dot-in { rotate: -6deg; }
.gather__dot--2 .gather__dot-in { rotate: 7deg; }
.gather__dot--3 .gather__dot-in { rotate: -4deg; }

.gather__dot-in img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.gather__dot-in::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--lime);
  opacity: clamp(0, calc(var(--d) * 2.4 - 0.5), 1);
}

/* Tampon rond « 3 associés » : il s'écrase sur le logo une fois soudé */
.gather__stamp {
  position: absolute;
  z-index: 4;
  right: -0.17em;
  top: -0.28em;
  display: grid;
  place-items: center;
  width: 0.46em;
  aspect-ratio: 1;
  background: var(--ink);
  color: var(--lime);
  border: var(--border-thin) solid var(--ink);
  border-radius: 50%;
  box-shadow: 0.025em 0.025em 0 var(--cream-2);
  rotate: 12deg;
}

.gather__stamp > span {
  display: grid;
  justify-items: center;
  font-size: 0.082em;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gather__stamp strong {
  font-size: 2.3em;
  font-weight: 400;
  line-height: 0.82;
}

.has-motion:not([data-motion="reduced"]) .gather__stamp {
  opacity: 0;
  scale: 1.9;
  rotate: -16deg;
  transition: opacity 0.15s linear, scale 0.55s var(--ease-expo), rotate 0.55s var(--ease-expo);
}

.has-motion:not([data-motion="reduced"]) .gather.is-stamped .gather__stamp {
  opacity: 1;
  scale: 1;
  rotate: 12deg;
}

/* La scène encaisse le coup de tampon */
@keyframes gather-shake {
  20% { translate: -6px 0; }
  40% { translate: 5px 0; }
  60% { translate: -3px 0; }
  80% { translate: 1px 0; }
}

.gather.is-stamped .gather__stage { animation: gather-shake 0.5s var(--ease-expo) 0.1s; }

/* Entrée (about.js) : les cartes se collent une à une. Filet de sécurité :
   si le script ne prend pas la main, elles apparaissent quand même. */
@keyframes gather-failsafe { to { opacity: 1; } }

.has-motion:not([data-motion="reduced"]) .gather:not(.is-live) :is(.gather__in, .gather__dot-in) {
  opacity: 0;
  animation: gather-failsafe 0.01s linear 3.2s forwards;
}

/* Textes : ils s'effacent pendant que les lettres se rassemblent */
[data-gather-fade] {
  opacity: calc(1 - var(--t));
  translate: 0 calc(var(--t) * -28px);
}

[data-gather-fade]:focus-within { opacity: 1; }

.gather__bottom {
  display: grid;
  gap: 14px var(--gutter);
}

.gather__title {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: min(clamp(2.75rem, 1.4rem + 4.8vw, 6.5rem), 11svh);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.gather__lead {
  max-width: 44ch;
  font-weight: 500;
  color: var(--fg-2);
}

.gather__scroll {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.gather__scroll-line {
  position: relative;
  width: 3px;
  height: 30px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.gather__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  animation: gather-hint 1.8s var(--ease) infinite;
}

@keyframes gather-hint {
  0% { translate: 0 -100%; }
  60%, 100% { translate: 0 100%; }
}

[data-motion="reduced"] .gather__scroll-line::after { animation: none; }

@media (min-width: 1024px) {
  .gather__bottom {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: end;
  }

  .gather__lead { padding-bottom: 0.4em; }
}

/* Téléphone couché ou écran bas : pas de scène collée, état final direct */
@media (max-height: 520px) {
  .has-motion:not([data-motion="reduced"]) .gather { height: auto; --m: 1; --d: 1; --c: 1; --r: 1; }
  .has-motion:not([data-motion="reduced"]) .gather__pin { position: relative; top: auto; height: auto; min-height: 0; }
  .has-motion:not([data-motion="reduced"]) .gather__card--j .gather__in { --card-sh: var(--ink); }
  .gather__word { --gw: min(clamp(4rem, 2rem + 12vw, 9rem), 34svh); }
}

/* ---- 2. Vision (section noire n° 1) -----------------------------------------
   Citation du site de Joachim (V2) : les guillemets se posent, les mots montent
   un par un ; au défilement, « faire joli » se fait barrer d'un trait citron et
   s'éteint, puis « faire grandir votre activité » passe au citron et se
   souligne, mot après mot (about.js). Mouvement réduit : état final posé. */

.vision__label {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.vision__quote {
  position: relative;
  max-width: 1040px;
  margin: 0;
}

.vision__blockquote { margin: 0; }

.vision__mark {
  display: block;
  height: 0.5em;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(6rem, 4rem + 8vw, 11rem);
  line-height: 0.8;
  color: var(--lime);
}

.vision__text {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 1.5rem + 3.6vw, 5rem);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: pretty;
}

/* « faire joli » est barré, « faire grandir votre activité » passe au citron (citron sur noir) */
.vision__result { transition: color 0.5s var(--ease-expo); }

.vision__strike.is-static {
  color: color-mix(in srgb, var(--fg) 55%, var(--bg));
  text-decoration: line-through var(--lime) 0.08em;
}

.vision__result.is-static,
.vision__result.is-on { color: var(--lime); }

.vision__result.is-static {
  text-decoration: underline var(--lime) 0.07em;
  text-underline-offset: 0.12em;
}

/* Mots découpés par about.js : un trait par mot, qui se dessine au défilement */
.vision__mask {
  position: relative;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.vision__bar {
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  height: 0.075em;
  background: var(--lime);
  border-radius: 0.04em;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.vision__bar--strike { top: 0.42em; }
.vision__bar--under { bottom: 0.04em; }

.vision__sign { margin-top: 32px; }

/* Le constat, puis l'inverse */
.vision__copy {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(64px, 8vw, 120px);
  padding-top: clamp(40px, 5vw, 72px);
  border-top: var(--border-thin) solid color-mix(in srgb, var(--cream) 28%, transparent);
}

.vision__p {
  max-width: 46ch;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
}

.vision__p--muted {
  max-width: 58ch;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-2);
}

.vision__inverse {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 0.92;
  text-transform: uppercase;
}

.vision__question {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--lime);
}

@media (min-width: 1024px) {
  .vision__copy {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .vision__p--muted { grid-column: 1 / span 6; grid-row: 1; }
  .vision__inverse { grid-column: 1 / span 6; grid-row: 2; }
  .vision__copy > .vision__p:not(.vision__p--muted) { grid-column: 8 / -1; grid-row: 1; }
  .vision__question { grid-column: 8 / -1; grid-row: 2; }
}

/* ---- 3. L'équipe ------------------------------------------------------------ */

.team {
  display: grid;
  gap: 56px 32px;
}

.member > * + * {
  margin-top: 10px;
}

.member__photo {
  margin-bottom: 22px;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow-color);
  background: var(--cream-2);
  transform: rotate(var(--tilt, -2deg));
}

.member:nth-child(2) .member__photo { --tilt: 1.5deg; }
.member:nth-child(3) .member__photo { --tilt: -1deg; }

.member__photo { position: relative; }

.member__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.2s var(--ease-expo), filter 1.6s var(--ease);
}

/* Masque de la photo : le volet « En savoir plus » y glisse, le scotch reste dessus */
.member__mask {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1px;
  background: var(--cream-2);
}

.member__role {
  color: var(--ink-2);
  font-weight: 500;
}

/* Polaroïd qui se « développe » à l'arrivée (team.js) */
.team.is-armed .member__photo img { filter: grayscale(1) contrast(0.55) brightness(1.55) blur(5px); }
.team.is-armed .member.is-developed .member__photo img { filter: none; }

/* Sticker du rôle, collé au coin de la photo */
.member__badge {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: -12px;
  padding: 6px 12px 2px;
  background: var(--ink);
  color: var(--lime);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--lime);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(6deg);
  transition: transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* Volet « En savoir plus » : glisse du bas de la photo */
.member__drawer {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 18px 18px 16px;
  background: var(--cream);
  border-top: var(--border) solid var(--ink);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-expo);
}

.member__does { font-size: var(--fs-small); font-weight: 500; line-height: 1.45; }

.member__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.member__skills li {
  padding: 5px 10px 2px;
  background: var(--lime);
  border: var(--border-thin) solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px) rotate(-4deg);
  transition: opacity 0.3s, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
  transition-delay: calc(0.15s + var(--k) * 0.07s);
}

.member__skills li:nth-child(2) { background: var(--cream-2); }

.member.is-open .member__drawer { transform: none; }
.member.is-open .member__skills li { opacity: 1; transform: rotate(calc(var(--k) * 3deg - 3deg)); }
.member.is-open .member__photo img { transform: scale(1.06); }
.member.is-open .member__badge { transform: rotate(-4deg) scale(1.12); }

.member__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.member__more-plus {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  background: var(--lime);
  border: var(--border-thin) solid var(--ink);
  border-radius: 50%;
}

.member__more-plus::before,
.member__more-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-expo);
}

.member__more-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.member.is-open .member__more-plus::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Sans JavaScript : le volet est simplement affiché sous la photo */
.no-js .member__drawer { position: static; transform: none; border-top: 0; padding-inline: 0; background: none; }
.no-js .member__skills li { opacity: 1; transform: none; }
.no-js .member__more { display: none; }

@media (hover: hover) and (pointer: fine) {
  .member__card:hover .member__photo img { transform: scale(1.06); }
  .member__card:hover .member__badge { transform: rotate(-4deg) scale(1.12); }
}

/* Téléphone : carrousel à faire glisser, point par membre */
@media (max-width: 719px) {
  .has-motion .team {
    display: flex;
    gap: 20px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 16px var(--gutter) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .has-motion .team::-webkit-scrollbar { display: none; }
  .has-motion .member { flex: 0 0 min(80vw, 330px); scroll-snap-align: center; }

  .team__nav { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
  .team__dot {
    width: 12px;
    height: 12px;
    border: var(--border-thin) solid var(--ink);
    border-radius: 50%;
    background: var(--cream);
    transition: background-color 0.2s, transform 0.3s var(--ease-expo);
  }
  .team__dot.is-on { background: var(--lime); transform: scale(1.3); }
}

@media (min-width: 720px) {
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team__nav { display: none; }
}

html:not(.has-motion) .team__nav { display: none; }

/* ---- 4. Valeurs : cartes qui se retournent ----------------------------------
   UX du site de Gabin : survol (souris), focus clavier, clic ou tap (état
   mémorisé, aria-pressed). Recto en couleur, verso avec l'engagement. */

.values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.value {
  position: relative;
  min-height: clamp(210px, 26vw, 340px);
  perspective: 1600px;
}

.value--lime { --v-bg: var(--lime); --v-fg: var(--ink); --v-sh: var(--ink); --v-back-bg: var(--ink); --v-back-fg: var(--cream); --v-back-accent: var(--lime); --v-back-sh: var(--lime); }
.value--ink { --v-bg: var(--ink); --v-fg: var(--cream); --v-sh: var(--lime); --v-back-bg: var(--lime); --v-back-fg: var(--ink); --v-back-accent: var(--ink); --v-back-sh: var(--ink); }
.value--cream { --v-bg: var(--cream-2); --v-fg: var(--ink); --v-sh: var(--ink); --v-back-bg: var(--ink); --v-back-fg: var(--cream); --v-back-accent: var(--lime); --v-back-sh: var(--lime); }

.value__inner {
  position: relative;
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease-expo);
}

.value__face {
  grid-area: 1 / 1;
  container-type: inline-size;
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 30px);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.value__face--front {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  background: var(--v-bg);
  color: var(--v-fg);
  box-shadow: 6px 6px 0 var(--v-sh);
}

.value__index {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
}

.value__index span {
  margin-left: 0.15em;
  font-size: 0.55em;
}

.value__hint {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.value__hint-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--border-thin) solid currentColor;
  border-radius: 50%;
  font-size: 15px;
  letter-spacing: 0;
}

.value__word {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  font-family: var(--font-display);
  /* Le mot le plus long (« Obsession ») tient toujours sur une ligne */
  font-size: clamp(2.25rem, 19cqi, 4.75rem);
  overflow-wrap: normal;
  hyphens: none;
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.value__face--back {
  align-content: space-between;
  background: var(--v-back-bg);
  color: var(--v-back-fg);
  /* Le verso pivote deux fois (lui-même, puis la carte) : son ombre reste à droite */
  box-shadow: 6px 6px 0 var(--v-back-sh);
  transform: rotateY(180deg);
}

.value__back-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v-back-accent);
}

.value__text {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.38;
}

/* Bouton qui recouvre la carte : clic, tap, Entrée ou Espace la retournent */
.value__toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.value__toggle:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 6px;
}

.value.is-flipped .value__inner,
.value:has(.value__toggle:focus-visible) .value__inner {
  transform: rotateY(180deg);
}

@media (hover: hover) {
  .value:hover .value__inner { transform: rotateY(180deg); }
}

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

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

/* Mouvement réduit : pas de rotation, les faces s'échangent sur place */
[data-motion="reduced"] .value__inner,
[data-motion="reduced"] .value.is-flipped .value__inner,
[data-motion="reduced"] .value:hover .value__inner,
[data-motion="reduced"] .value:has(.value__toggle:focus-visible) .value__inner { transform: none; }

[data-motion="reduced"] .value__face { transition: opacity 0.3s linear; }
[data-motion="reduced"] .value__face--back { transform: none; opacity: 0; }

[data-motion="reduced"] .value.is-flipped .value__face--back,
[data-motion="reduced"] .value:has(.value__toggle:focus-visible) .value__face--back { opacity: 1; }

[data-motion="reduced"] .value.is-flipped .value__face--front,
[data-motion="reduced"] .value:has(.value__toggle:focus-visible) .value__face--front { opacity: 0; }

@media (hover: hover) {
  [data-motion="reduced"] .value:hover .value__face--back { opacity: 1; }
  [data-motion="reduced"] .value:hover .value__face--front { opacity: 0; }
}

/* Sans JavaScript : le verso s'affiche sous le recto, rien à retourner */
.no-js .value { perspective: none; }
.no-js .value__inner,
.no-js .value:hover .value__inner { transform: none; gap: 14px; }
.no-js .value__face { grid-area: auto; }
.no-js .value__face--back { transform: none; }
.no-js .value__toggle,
.no-js .value__hint { display: none; }

/* ---- 5. Trajectoire : frise qui se remplit -----------------------------------
   Route en pointillés, trait de marqueur citron qui la recouvre au rythme du
   défilement, mini-logo GJS à sa pointe (effet du site de Gabin) ; chaque
   étape (contenu du site de Joachim) s'allume en la croisant.
   Mobile : la route longe la gauche. Ordinateur : étape | titre | texte. */

.timeline__track {
  --dot: 22px;
  --rail-x: 0px;
  --row-y: clamp(24px, 3vw, 40px);
  /* Étapes en mots (« Au départ », « Aujourd’hui ») : plus petites que des années */
  --year-fs: clamp(2.5rem, 1.5rem + 2.8vw, 4.5rem);
  /* Écart entre le point (centré dans la gouttière) et le texte voisin */
  --rail-gap: max(0px, calc(var(--dot) / 2 + 18px - var(--gutter) / 2));
  position: relative;
}

.timeline__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--rail-x) + var(--dot) / 2 - 2px);
  width: 4px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 9px, transparent 9px 17px);
}

.timeline__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  right: -3px;
  background: var(--lime);
  border: var(--border-thin) solid var(--ink);
  border-radius: 6px;
  transform-origin: 50% 0;
  transform: scaleY(1);
}

.timeline__tip {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  padding: 0.32em 0.45em 0.12em;
  background: var(--ink);
  color: var(--lime);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--lime);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.03em;
  translate: -50% -50%;
  rotate: -5deg;
  display: none;
}

.has-motion:not([data-motion="reduced"]) .timeline__tip { display: block; }

.timeline__list {
  display: grid;
}

.milestone {
  position: relative;
  display: grid;
  gap: 12px;
  padding-block: var(--row-y);
  padding-left: calc(var(--dot) + 22px);
  border-top: var(--border-thin) solid var(--ink);
}

.milestone:last-child {
  border-bottom: var(--border-thin) solid var(--ink);
}

.milestone__dot {
  position: absolute;
  top: calc(var(--row-y) + var(--year-fs) * 0.36 - var(--dot) / 2);
  left: var(--rail-x);
  z-index: 1;
  width: var(--dot);
  height: var(--dot);
  background: var(--lime);
  border: var(--border) solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  transition: background-color 0.4s, box-shadow 0.4s, transform 0.6s var(--ease-expo);
}

.milestone__head {
  display: grid;
  row-gap: 10px; /* pas de « gap » : la sous-grille garde les gouttières de la frise */
  align-items: start;
}

.milestone__year {
  position: relative;
  z-index: 0;
  justify-self: start;
  display: block;
  font-family: var(--font-display);
  font-size: var(--year-fs);
  line-height: 0.86;
  font-variant-numeric: tabular-nums;
  transition: color 0.5s;
}

/* Trait de marqueur sous l'année allumée */
.milestone__year::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.04em;
  right: -0.06em;
  bottom: 0.04em;
  height: 0.36em;
  background: var(--lime);
  border-radius: 0.04em 0.16em 0.06em 0.12em;
  transform: rotate(-1.5deg);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-expo);
}

.milestone__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.milestone__text {
  max-width: 46ch;
  color: var(--fg-2);
}

/* Avec le mouvement, les dates attendent d'être croisées par la frise */
.has-motion:not([data-motion="reduced"]) .timeline.is-live .milestone:not(.is-active) .milestone__year { color: var(--ink-2); }
.has-motion:not([data-motion="reduced"]) .timeline.is-live .milestone:not(.is-active) .milestone__year::before { transform: scaleX(0) rotate(-1.5deg); }
.has-motion:not([data-motion="reduced"]) .timeline.is-live .milestone:not(.is-active) .milestone__dot { background: var(--cream); box-shadow: 0 0 0 var(--ink); }
.timeline.is-live .milestone.is-active .milestone__dot { transform: scale(1.12); }

@media (min-width: 768px) {
  /* Rail dans la gouttière entre l'année et le contenu */
  .timeline__track { --rail-x: calc((100% - 5 * var(--gutter)) / 3 + 1.5 * var(--gutter) - var(--dot) / 2); }

  .milestone {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-left: 0;
  }

  .milestone__head {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .milestone__year { grid-column: 1 / span 2; }

  .milestone__title,
  .milestone__text {
    grid-column: 3 / -1;
    padding-left: var(--rail-gap);
  }

  .milestone__dot { top: calc(var(--row-y) + var(--fs-h3) * 0.4 - var(--dot) / 2); }
}

@media (min-width: 1024px) {
  .timeline__track { --rail-x: calc((100% - 11 * var(--gutter)) / 3 + 3.5 * var(--gutter) - var(--dot) / 2); }

  .milestone { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .milestone__head { grid-column: 1 / span 8; }
  .milestone__year { grid-column: 1 / span 4; }
  .milestone__title { grid-column: 5 / span 4; }
  .milestone__text { grid-column: 9 / -1; padding-left: 0; }
}