/* ================================================================ MISSION */
.mission { padding-block: 2rem clamp(5rem, 10vw, 8rem); }
.mission__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.mission__title {
  margin-top: 1.5rem;
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.mission__title em { color: var(--bleu); position: relative; white-space: nowrap; }
.mission__title em svg {
  position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .3em;
  color: var(--corail);
}
.mission__title em svg path { stroke-width: 6; }
.mission__aside { display: grid; gap: 1.75rem; min-width: 0; }
.mission__aside p { color: var(--encre-2); max-width: 34rem; }
.mission__aside p strong { color: var(--encre); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.promise {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.25rem;
  border-radius: 1.25rem;
  background: var(--blanc);
  box-shadow: 0 0 0 1px var(--encre-a06);
  font-size: .9375rem;
}
.promise .spark { width: 1.6rem; color: var(--corail); flex: none; }
.promise b { font-weight: 700; }

@media (max-width: 56rem) {
  .mission__grid { grid-template-columns: 1fr; align-items: start; }
}

/* ================================================================ CLIENTS
   Marquee : port de badapt.com3.0/js/marquee.js (LogoLoop). */
.clients { padding-block: 0 clamp(5rem, 9vw, 7.5rem); }
.clients__head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.75rem;
  color: var(--encre-2);
}
.clients__head::after { content: ""; flex: 1 1 4rem; height: 1px; background: var(--lin-2); }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* Marge haute et basse : le masque coupe tout ce qui dépasse de la piste,
   il faut donc de la place pour le zoom au survol / à l'appui. */
.marquee__track { display: flex; width: max-content; padding-block: clamp(.75rem, 1.5vw, 1.25rem); will-change: transform; }
.marquee__seq { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.marquee__item { flex: none; padding-inline: clamp(1.75rem, 4vw, 3.5rem); }
.marquee__item img {
  height: clamp(2.25rem, 4vw, 3rem); width: auto;
  /* Logos en couleurs d'origine, sans filtre. */
  transform-origin: 50% 50%;
  transition: transform .4s var(--ease-back);
  user-select: none;
}
.marquee__item img { transform: skewX(var(--skew, 0deg)); }
.marquee__item img:hover { transform: skewX(var(--skew, 0deg)) scale(1.06); }

/* ================================================================ MÉTHODE
   Trois cartes qui s'empilent au scroll (sticky). C'est une vraie séquence :
   la numérotation 01/02/03 encode l'ordre de la mission. */
.method { padding-block: 0 clamp(5rem, 10vw, 8rem); }
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  margin-top: 1.25rem;
}
.section-head h2 em { color: var(--bleu); }
.section-head p { max-width: 26rem; color: var(--encre-2); }
@media (max-width: 48rem) { .section-head { grid-template-columns: 1fr; } }

.steps { display: grid; gap: 1.5rem; }
.step {
  position: sticky;
  top: calc(6rem + var(--n) * 1.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  min-height: min(34rem, 72vh);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 -18px 40px -24px var(--encre-a35);
}
.step--saisir { --n: 0; background: var(--citron); color: var(--encre); }
.step--evoluer { --n: 1; background: var(--bleu); color: var(--blanc); }
.step--durer { --n: 2; background: var(--corail); color: var(--encre); }

.step__num { font-size: 1.375rem; font-weight: 700; }
.step__word {
  margin-top: auto;
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.045em;
}
.step__left { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.step__verb { font-size: var(--fs-sub); font-weight: 500; line-height: 1.3; }
.step__right {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  min-width: 0;
}
.step__right p { font-size: var(--fs-sub); font-weight: 500; line-height: 1.35; max-width: 28rem; }
.step__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.step__list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .85rem;
  border-top: 1.5px solid currentColor;
  font-weight: 500;
}
.step__list li span:last-child { opacity: .7; font-size: .875rem; white-space: nowrap; }
/* Contraste AA : sur Bleu et Corail, les durées restent à pleine opacité. */
.step--evoluer .step__list li span:last-child, .step--durer .step__list li span:last-child { opacity: 1; }
.step__art { position: absolute; pointer-events: none; }
.step__art { left: 30%; top: 12%; }
.step--saisir .step__art { width: clamp(5rem, 12vw, 9rem); color: var(--bleu); }
.step--evoluer .step__art { width: clamp(4rem, 9vw, 7rem); color: var(--citron); }
.step--durer .step__art { width: clamp(6rem, 14vw, 11rem); color: var(--encre); }
.step--durer .step__art path { stroke-width: 5; }

@media (max-width: 52rem) {
  .step { grid-template-columns: 1fr; top: calc(5rem + var(--n) * .9rem); min-height: 0; }
  .step__word { margin-top: 1.5rem; }
  .step__art { left: auto; right: 6%; top: 1.25rem; }
}

/* ================================================================ SERVICES
   Fond Encre, pastilles mots-clés, vague panorama Corail en sortie. */
.services { background: var(--encre); color: var(--lin); padding-top: clamp(5rem, 10vw, 8rem); }
.services .section-head p { color: var(--lin-a72); }
.services .section-head h2 em { color: var(--citron); }

.pills {
  position: relative;
  display: flex; flex-wrap: wrap; gap: .7rem 1rem;
  justify-content: flex-end;
  max-width: 30rem;
}
.pills .tag { font-size: clamp(.8125rem, 1.2vw, 1rem); padding: .8em 1.35em; transition: transform .5s var(--ease-back); }
.pills .tag:nth-child(1) { rotate: -6deg; }
.pills .tag:nth-child(2) { rotate: 4deg; }
.pills .tag:nth-child(3) { rotate: -3deg; }
.pills .tag:nth-child(4) { rotate: 7deg; }
.pills .tag:nth-child(5) { rotate: -5deg; }
.pills .tag:nth-child(6) { rotate: 3deg; }
.pills .tag:hover { transform: scale(1.08) rotate(-4deg); }

.svc { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--lin-a18); }
.svc__row {
  position: relative; cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
  gap: 1rem 2.5rem;
  align-items: center;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(.75rem, 2vw, 1.5rem);
  border-top: 1px solid var(--lin-a18);
  isolation: isolate;
}
.svc__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 1.25rem;
  background: var(--bleu);
  transform: scaleY(.3); opacity: 0;
  transition: transform .5s var(--ease-expo), opacity .3s;
}
.svc__row:hover::before { transform: scaleY(1); opacity: 1; }
.svc__row h4 { margin: 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.svc__row p { color: var(--lin-a75); font-size: 1rem; }
.svc__row p strong { display: block; color: var(--citron); font-weight: 600; margin-bottom: .15rem; }
.svc__row:hover p { color: var(--lin); }
.svc__go {
  display: grid; place-items: center; border: 0; padding: 0; cursor: pointer;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--lin); color: var(--encre);
  transition: background-color .3s, transform .5s var(--ease-back);
}
.svc__go svg { width: 1.1rem; }
.svc__row:hover .svc__go { background: var(--citron); transform: rotate(-45deg); }
@media (max-width: 48rem) {
  .svc__row { grid-template-columns: minmax(0, 1fr) auto; }
  .svc__row p { grid-column: 1 / -1; grid-row: 2; }
}

/* Rubriques de services dépliantes ----------------------------------------
   Trois familles, chacune avec sa couleur. Ouverture par grid-template-rows
   (0fr → 1fr), le contenu fermé est inert. */
.svcgroups { border-top: 1px solid var(--lin-a18); }
.svcg { border-bottom: 1px solid var(--lin-a18); }
.svcg__head { margin: 0; }
.svcg__btn {
  width: 100%; display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 1rem clamp(1rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.4rem) .5rem;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.svcg__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); transition: transform .5s var(--spring); }
.svcg__title { font-size: clamp(1.6rem, 3.2vw, 2.75rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; transition: transform .5s var(--spring); }
.svcg__title em { color: var(--c); }
.svcg__sum { color: var(--lin-a72); font-size: 1rem; line-height: 1.5; }
.svcg__count { padding: .5em .9em; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--lin-a35); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.svcg__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--lin); color: var(--encre); transition: background-color .3s, transform .6s var(--spring); }
.svcg__icon svg { width: 1.25rem; transition: rotate .6s var(--spring); }
.svcg__btn:hover .svcg__title { transform: translateX(.4rem); }
.svcg__btn:hover .svcg__dot { transform: scale(1.35); }
.svcg__btn:hover .svcg__icon { background: var(--c); }
.svcg[data-open] .svcg__icon { background: var(--c); }
.svcg[data-open] .svcg__icon svg { rotate: 135deg; }
.svcg__btn:focus-visible { outline: 3px solid var(--c); outline-offset: -3px; border-radius: 1rem; }
.svcg__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-expo); }
.svcg[data-open] .svcg__panel { grid-template-rows: 1fr; }
.svcg__inner { overflow: hidden; min-height: 0; }
.svcg .svc { margin: 0 0 clamp(1.25rem, 2.5vw, 2rem) clamp(0rem, 3.2vw, 2.6rem); border-bottom: 0; }
.svcg .svc__row::before { background: color-mix(in srgb, var(--c) 16%, var(--encre-3)); box-shadow: inset 3px 0 0 var(--c); }
.svcg .svc__row p strong { color: var(--c); }
@media (max-width: 52rem) {
  .svcg__btn { grid-template-columns: auto minmax(0, 1fr) auto; }
  .svcg__sum { grid-column: 2 / 4; grid-row: 2; }
  .svcg__count { display: none; }
}

.wave { display: block; width: 100%; height: clamp(7rem, 16vw, 14rem); margin-top: clamp(4rem, 8vw, 6rem); }

/* ================================================================ STUDIO IA
   Fond Lin quadrillé + bulles de conversation (charte p. 20). */
.studio {
  padding-block: clamp(5rem, 10vw, 8rem);
  background-color: var(--lin);
  background-image:
    linear-gradient(var(--lin-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--lin-2) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  background-position: center top;
}
.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.studio__grid h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1; letter-spacing: -.03em; margin-top: 1.25rem; }
.studio__grid h2 em { color: var(--bleu); position: relative; }
.studio__grid h2 em .circle {
  position: absolute; left: -6%; top: 6%; width: 112%; height: 104%;
  color: var(--corail); overflow: visible;
}
.studio__grid h2 em .circle path { stroke-width: 3.5; }
.studio__text { display: grid; gap: 1.5rem; min-width: 0; }
.studio__text > p { color: var(--encre-2); max-width: 32rem; }

.chat {
  display: grid; gap: .9rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-card);
  background: var(--encre);
  color: var(--lin);
  box-shadow: 0 30px 60px -30px var(--encre-a55);
  min-width: 0;
}
.chat__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.chat__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--bleu); display: grid; place-items: center; }
.chat__avatar svg { width: 1.1rem; }
.chat__name { font-weight: 600; line-height: 1.2; }
.chat__status { font-size: .8125rem; color: var(--citron); }
.bubble {
  max-width: 82%;
  padding: .85rem 1.15rem;
  border-radius: 1.25rem;
  font-size: .9688rem;
  line-height: 1.45;
}
.bubble--them { background: var(--encre-4); border-bottom-left-radius: .35rem; }
.bubble--us { justify-self: end; background: var(--bleu); color: var(--blanc); border-bottom-right-radius: .35rem; }
.bubble--us.is-citron { background: var(--citron); color: var(--encre); }
.chat__foot { margin-top: .75rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.chat__foot em { color: var(--corail); }

@media (max-width: 52rem) { .studio__grid { grid-template-columns: 1fr; } }

/* Carrousel « 5 façons d'utiliser l'IA » : la ligne et le point traversent
   toutes les cartes (charte p. 27). Défilement horizontal dans son propre
   conteneur, jamais celui de la page. */
.guide { margin-top: clamp(4rem, 8vw, 6rem); }
.guide__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.guide__nav { display: flex; gap: .5rem; }
.guide__nav button {
  width: 3rem; height: 3rem; border-radius: 50%; border: 0;
  background: var(--encre); color: var(--lin); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .25s, transform .4s var(--ease-back);
}
.guide__nav button:hover { background: var(--bleu); transform: scale(1.06); }
.guide__nav svg { width: 1.1rem; }
.guide__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.guide__track::-webkit-scrollbar { display: none; }
.slide {
  --line: var(--bleu);
  position: relative;
  flex: none;
  width: clamp(15rem, 24vw, 19rem);
  aspect-ratio: 4 / 5;
  max-width: 100%;
  padding: 1.5rem 1.5rem 4.75rem;
  margin-right: 1rem;
  border-radius: 1.25rem;
  background: var(--blanc);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .75rem;
}
.slide:last-child { margin-right: 0; }
.slide::after {
  /* le fil : il déborde dans l'espace entre deux cartes */
  content: ""; position: absolute; left: 1.5rem; right: -1rem; bottom: 2.6rem;
  height: 2px; background: var(--line);
}
.slide:last-child::after { right: 1.5rem; }
.slide__dot { position: absolute; left: 50%; bottom: calc(2.6rem - 5px); width: 12px; height: 12px; border-radius: 50%; background: var(--line); z-index: 1; }
.slide__meta { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; font-weight: 600; }
.slide__meta svg { height: 1.25rem; width: auto; }
.slide__num { font-size: clamp(3.5rem, 6vw, 4.75rem); font-weight: 700; line-height: .9; letter-spacing: -.05em; color: var(--bleu); margin-top: .5rem; }
.slide h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.slide p { font-size: .875rem; line-height: 1.5; color: var(--encre-2); }
.slide--cover { --line: var(--citron); background: var(--bleu); color: var(--blanc); }
.slide--cover h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.05; margin-top: .5rem; }
.slide--cover h3 em { color: var(--citron); }
.slide--cover .spark { position: absolute; right: 1.5rem; top: 4rem; width: 2.75rem; color: var(--citron); }
.slide--end { --line: var(--encre); background: var(--corail); color: var(--encre); }
.slide--end h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.05; margin-top: auto; }
/* Encre plutôt que Lin : Lin sur Corail ne passe pas le contraste (2,78). */
.slide--end h3 em { color: var(--encre); }
.slide--end .spark { position: absolute; right: 1.5rem; top: 3.5rem; width: 2.75rem; color: var(--lin); }
.slide--end .tag { align-self: flex-start; }
.slide__swipe { position: absolute; left: 1.5rem; bottom: 1rem; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* ================================================================ PROJETS */
.work { padding-block: clamp(5rem, 10vw, 8rem); }
.work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 64rem) { .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .work__grid { grid-template-columns: 1fr; } }

.project { display: grid; gap: 1rem; text-decoration: none; min-width: 0; }
.project__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg);
  display: grid; place-items: center;
}
.project__media img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 6%;
  transition: transform .8s var(--ease-expo);
}
.project:hover .project__media img { transform: scale(1.045) rotate(-1.2deg); }
.project__media .tag { position: absolute; left: 1.1rem; top: 1.1rem; }
.project__body { display: grid; gap: .35rem; padding-inline: .25rem; }
.project__client { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.project__client h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.project__client span { font-size: .8125rem; color: var(--encre-2); white-space: nowrap; }
.project__body p { color: var(--encre-2); font-size: .9688rem; }
.project__note { font-size: .8125rem; color: var(--encre-2); font-style: italic; }

/* ================================================================ CONTACT */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--citron);
  padding-block: clamp(5rem, 11vw, 9rem) clamp(6rem, 12vw, 10rem);
}
.cta__title {
  font-size: clamp(3rem, 9vw, 8.5rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  max-width: 11ch;
  position: relative; z-index: 1;
}
.cta__title em { color: var(--bleu); }
.cta__body { position: relative; z-index: 1; display: grid; gap: 2rem; margin-top: 2.5rem; max-width: 36rem; }
.cta__body p { font-size: var(--fs-sub); font-weight: 500; line-height: 1.35; }
.mail {
  display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  font-weight: 600;
}
.mail code { font-family: var(--font); font-size: 1.125rem; user-select: all; }
.mail button {
  border: 0; cursor: pointer;
  padding: .55em 1em; border-radius: var(--r-pill);
  background: var(--encre-a10); color: var(--encre);
  font: 600 .75rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
}
.mail button:hover { background: var(--encre); color: var(--citron); }
.phones { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: -1rem 0 0; padding: 0; list-style: none; font-weight: 600; font-size: 1.125rem; }
.phones a { text-decoration: none; background-image: linear-gradient(var(--encre), var(--encre)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s var(--ease-expo); }
.phones a:hover { background-size: 100% 2px; }
.cta__orb {
  position: absolute;
  right: clamp(-18rem, -12vw, -6rem);
  bottom: clamp(-20rem, -18vw, -8rem);
  width: clamp(20rem, 48vw, 44rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bleu);
  display: grid; place-items: center;
}
.cta__orb::after { content: ""; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--corail); }
.cta__spark1 { position: absolute; right: 22%; top: 14%; width: clamp(4rem, 9vw, 8rem); color: var(--bleu); }
.cta__spark2 { position: absolute; right: 12%; top: 34%; width: clamp(2rem, 4vw, 3.25rem); color: var(--encre); }
@media (max-width: 40rem) {
  .cta__spark1 { right: 8%; top: 5%; }
  .cta__spark2 { display: none; }
  .cta__orb { width: 15rem; right: -6rem; bottom: -9rem; }
  .cta { padding-bottom: 9rem; }
}
.js .cta__spark1 { animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { rotate: 0deg; scale: 1; } 50% { rotate: 12deg; scale: 1.08; } }
@media (prefers-reduced-motion: reduce) { .js .cta__spark1 { animation: none; } }

/* ================================================================ FOOTER */
.footer { background: var(--encre); color: var(--lin); padding-block: clamp(4rem, 8vw, 6rem) calc(2rem + env(safe-area-inset-bottom, 0px)); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}
.footer .logo { --hfg: var(--lin); font-size: clamp(2.5rem, 6vw, 4.5rem); }
.footer__tagline { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 600; }
.footer__tagline em { color: var(--citron); }
.footer h2 { margin: 0 0 1rem; color: var(--lin-a60); }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.footer ul a { text-decoration: none; }
.footer ul a:hover { color: var(--citron); }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--citron); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--lin-a16);
  font-size: .8125rem;
  color: var(--lin-a60);
}
@media (max-width: 52rem) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* =========================================================================
   SYSTÈME D'ANIMATIONS — quatre gestes de marque, un seul ressort.
   1. Pousser depuis le sol  : titres, grands mots, cartes (comme « évoluer »).
   2. Le trait à la main     : soulignés, entourés, flèches, vague.
   3. Le point Citron        : curseur, barre de progression, logo.
   4. L'étincelle            : scintille et flotte, 1 à 2 par écran.
   Couche passive : tout ce qui est décoratif flotte doucement, chacun sur
   sa propre période, pour que rien ne bouge en même temps.
   Tout s'arrête avec prefers-reduced-motion (bloc en fin de section).
========================================================================= */

/* ---------------------------------------------------------- 1. Poussée
   Le JS enveloppe chaque mot (ou lettre, data-split="chars") dans un
   masque. Caché seulement si l'élément est sous la ligne de flottaison au
   chargement ; sinon visible d'emblée. */
.w {
  display: inline-block;
  vertical-align: top;
  clip-path: inset(-.4em -.25em -.16em -.25em);
}
.wi {
  display: inline-block;
  transition: transform .95s var(--spring-soft), opacity .5s ease;
  transition-delay: calc(var(--wi, 0) * 55ms);
}
[data-split="chars"] .wi { transition-delay: calc(var(--wi, 0) * 42ms); }
.js .is-below .wi,
.js .is-replay .wi { transform: translateY(1.25em) rotate(5deg); opacity: 0; }
.js .is-replay .wi { transition: none; }

/* Étiquettes : apparition en ressort, légèrement de biais. */
.pop { transition: transform .8s var(--spring), opacity .4s ease; }
.js .pop.is-below { transform: scale(.4) rotate(-12deg); opacity: 0; }

/* Échelonnement : le JS pose --i sur les enfants d'un [data-stagger]. */
.rise { transition-delay: calc(var(--i, 0) * 80ms); }

/* Projets : la carte se découvre de bas en haut, l'image se pose. */
.js .project.rise.is-below { opacity: 1; transform: none; }
.project__media { transition: clip-path 1.1s var(--ease-expo), transform .6s var(--ease-expo); transition-delay: calc(var(--i, 0) * 90ms); }
.js .project.is-below .project__media { clip-path: inset(100% 0 0 0 round var(--r-card)); }
.project__media img { scale: 1; transition: transform .8s var(--ease-expo), scale 1.3s var(--ease-expo); }
.js .project.is-below .project__media img { scale: 1.3; }
.project__body { transition: opacity .7s ease .25s, transform .9s var(--spring-soft) .25s; }
.js .project.is-below .project__body { opacity: 0; transform: translateY(24px); }

/* Services : chaque ligne glisse et son filet se trace. */
.svc__row { transition: opacity .7s ease, transform .9s var(--spring-soft); transition-delay: calc(var(--i, 0) * 70ms); }
.js .svc__row.is-below { opacity: 0; transform: translateX(-40px); }
.svc__row h4 { transition: transform .5s var(--spring); }
.svc__row:hover h4 { transform: translateX(.6rem); }

/* Guide : les cartes arrivent de la droite, en éventail. */
.slide { transition: transform .9s var(--spring-soft), opacity .5s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.js .slide.is-below { opacity: 0; transform: translateX(80px) rotate(4deg); }
.guide__track.is-drag { scroll-snap-type: none; cursor: grabbing; }
.guide__track.is-drag .slide { transition: none; }
.guide__track { cursor: grab; }
.slide__dot { transition: scale .5s var(--spring); }
.slide:hover .slide__dot { scale: 1.8; }

/* Méthode : la carte recouverte recule et s'assombrit (JS : --stack). */
.step { transform-origin: 50% 0; scale: calc(1 - var(--stack, 0) * .06); }
.step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--encre); opacity: calc(var(--stack, 0) * .4);
  pointer-events: none;
}

/* ---------------------------------------------------------- 2. Interaction
   Boutons magnétiques (JS : --mx / --my), tilt des projets (--rx / --ry). */
.magnetic { translate: var(--mx, 0px) var(--my, 0px); transition: translate .6s var(--spring), transform .4s var(--ease-back), background-color .25s, color .25s, box-shadow .25s; }
.magnetic.is-pull { transition: translate .15s linear, transform .4s var(--ease-back), background-color .25s, color .25s; }
.magnetic .arrow { display: inline-block; }

.project__media { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.project__media .tag { transition: transform .6s var(--spring); }
.project:hover .project__media .tag { transform: translate(4px, -4px) rotate(-4deg); }

/* Pastilles attrapables : on les tire, elles reviennent en ressort. */
.pills .tag { cursor: grab; touch-action: none; user-select: none; translate: 0 0; transition: translate .9s cubic-bezier(.3, 1.8, .5, 1), scale .4s var(--spring); }
.pills .tag:hover { transform: none; scale: 1.08; }
.pills .tag.is-drag { cursor: grabbing; transition: scale .3s var(--spring); scale: 1.12; z-index: 2; }

/* Logo : la pointe avance et le point rebondit au survol (variables
   héritées dans le symbole). Passif : le point respire. */
.logo { --bm-tri: 0px; --bm-dot: 0px; }
.logo:hover { --bm-tri: 7px; --bm-dot: -9px; }

/* Orbe du contact : suit le curseur de loin. */
.cta__orb { translate: var(--ox, 0px) var(--oy, 0px); transition: translate 1.2s var(--ease-expo); }

/* ---------------------------------------------------------- 3. Point Citron
   Curseur suiveur (souris uniquement). Le curseur système reste visible. */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 300;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--citron);
  box-shadow: 0 0 0 2px var(--encre);
  pointer-events: none;
  display: grid; place-items: center;
  opacity: 0;
  transition: width .45s var(--spring), height .45s var(--spring), margin .45s var(--spring), opacity .3s, background-color .3s, box-shadow .3s;
  will-change: transform;
}
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: var(--citron-a35); box-shadow: 0 0 0 2px var(--encre); }
.cursor.is-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--encre); box-shadow: 0 0 0 2px var(--citron); }
.cursor__label { color: var(--citron); font: 600 .75rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.is-label .cursor__label { opacity: 1; transition-delay: .1s; }
.cursor.is-down { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Progression : la ligne et le point qui traversent la page (charte p. 27). */
.progress {
  position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px);
  height: 3px; z-index: 99; pointer-events: none;
  opacity: 0; transition: opacity .4s;
}
:root[data-ground="light"] .progress { opacity: 1; }
.progress__bar { position: absolute; inset: 0; background: var(--bleu); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.progress__dot {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--citron); box-shadow: 0 0 0 2px var(--bleu);
  transform: translateX(calc(var(--p, 0) * 100vw));
}

/* Chat : bulle « en train d'écrire » avant chaque réponse. */
.js .chat .bubble { transition: opacity .45s ease, transform .7s var(--spring); }
.js .chat:not(.is-done) .bubble:not(.on) { opacity: 0; transform: translateY(14px) scale(.9); }
.bubble { transform-origin: 0 100%; }
.bubble--us { transform-origin: 100% 100%; }
.bubble.typing { color: transparent; position: relative; }
.bubble.typing > * { visibility: hidden; }
.bubble.typing::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -15px; border-radius: 50%;
  background: currentColor; color: var(--blanc);
  box-shadow: 12px 0 0 var(--blanc), 24px 0 0 var(--blanc);
  animation: typing 1s ease-in-out infinite;
}
.bubble--us.is-citron.typing::after { background: var(--encre); box-shadow: 12px 0 0 var(--encre), 24px 0 0 var(--encre); }
@keyframes typing { 0%, 100% { opacity: .35; translate: 0 0; } 50% { opacity: 1; translate: 0 -3px; } }

/* ---------------------------------------------------------- 4. Couche passive
   Périodes premières entre elles (7, 9, 11, 13 s…) : les mouvements ne se
   resynchronisent jamais, la page « respire » sans motif répété. */
@keyframes float-t   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes float-y   { 0%, 100% { transform: translateY(0); }           50% { transform: translateY(-10px); } }
@keyframes float-xy  { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(6px, -9px) rotate(2deg); } 66% { transform: translate(-5px, -4px) rotate(-2deg); } }
@keyframes drift     { 0%, 100% { transform: translate(0, 0) rotate(var(--r0, 0deg)); } 50% { transform: translate(var(--dx, 4px), var(--dy, -8px)) rotate(var(--r1, 3deg)); } }
@keyframes twinkle   { 0%, 100% { scale: 1; rotate: 0deg; opacity: 1; } 40% { scale: 1.12; rotate: 14deg; } 55% { scale: .86; opacity: .75; } }
@keyframes breathe   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes orbit     { from { transform: rotate(0deg) translateX(3%) rotate(0deg); } to { transform: rotate(360deg) translateX(3%) rotate(-360deg); } }
@keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 3.5rem, 3.5rem 0; } }
@keyframes dot-pulse { 0%, 82%, 100% { transform: translateY(0) scale(1); } 88% { transform: translateY(-7px) scale(1.08); } 94% { transform: translateY(0) scale(.96); } }
@keyframes tri-nudge { 0%, 70%, 100% { transform: translateX(0); } 76% { transform: translateX(6px); } 82% { transform: translateX(0); } 86% { transform: translateX(3px); } }
@keyframes hero-spark { 0%, 100% { opacity: 0; scale: .4; rotate: 0deg; } 20%, 60% { opacity: .9; scale: 1; } 80% { rotate: 50deg; } }

.js .spark { animation: twinkle 6s ease-in-out infinite; }
.promise .spark { animation-duration: 4.6s; }
.step--evoluer .step__art { animation: twinkle 7s ease-in-out infinite, float-xy 11s ease-in-out infinite; }
.step--saisir .step__art.is-in, .step--durer .step__art.is-in { animation: float-y 9s ease-in-out infinite 1.2s; }
.slide--cover .spark { animation: twinkle 5s ease-in-out infinite, float-y 7s ease-in-out infinite; }
.slide--end .spark { animation: twinkle 6.5s ease-in-out infinite .8s, float-y 9s ease-in-out infinite; }
.js .cta__spark1 { animation: twinkle 6s ease-in-out infinite, float-xy 13s ease-in-out infinite; }
.cta__spark2 { animation: twinkle 4.4s ease-in-out infinite 1s, float-y 7s ease-in-out infinite; }
.cta__orb { animation: orbit 23s linear infinite; }
.cta__orb::after { animation: breathe 7s ease-in-out infinite; }

.pills .tag { animation: drift var(--dur, 9s) ease-in-out infinite; animation-delay: var(--del, 0s); }
.pills .tag:nth-child(1) { --dur: 9s;  --dx: 5px;  --dy: -9px; --r0: -6deg; --r1: -3deg; --del: -1s; }
.pills .tag:nth-child(2) { --dur: 11s; --dx: -6px; --dy: -7px; --r0: 4deg;  --r1: 7deg;  --del: -4s; }
.pills .tag:nth-child(3) { --dur: 7s;  --dx: 4px;  --dy: -6px; --r0: -3deg; --r1: -6deg; --del: -2s; }
.pills .tag:nth-child(4) { --dur: 13s; --dx: -5px; --dy: -10px; --r0: 7deg; --r1: 3deg;  --del: -7s; }
.pills .tag:nth-child(5) { --dur: 10s; --dx: 6px;  --dy: -8px; --r0: -5deg; --r1: -1deg; --del: -3s; }
.pills .tag:nth-child(6) { --dur: 8s;  --dx: -4px; --dy: -6px; --r0: 3deg;  --r1: 6deg;  --del: -5s; }
.pills .tag { rotate: none !important; }

.chat { animation: float-y 9s ease-in-out infinite; }
.promise { animation: float-y 11s ease-in-out infinite -3s; }
.project__media img { animation: float-t var(--fd, 9s) ease-in-out infinite; animation-delay: var(--fdl, 0s); }
.project:nth-child(2) .project__media img { --fd: 11s; --fdl: -3s; }
.project:nth-child(3) .project__media img { --fd: 7s; --fdl: -5s; }
.project:nth-child(4) .project__media img { --fd: 13s; --fdl: -2s; }
.project:nth-child(5) .project__media img { --fd: 10s; --fdl: -6s; }
.project:nth-child(6) .project__media img { --fd: 8s; --fdl: -1s; }
.section-head .tag.is-in, .mission .tag.is-in, .studio .tag.is-in { animation: drift 7s ease-in-out infinite; --dx: 0px; --dy: -4px; --r0: 0deg; --r1: -2deg; }
.studio { animation: grid-drift 14s linear infinite; }
.chat__status { animation: blink-dot 2.4s ease-in-out infinite; }
@keyframes blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.marquee__item:nth-child(odd) img { animation: float-t 7s ease-in-out infinite; }
.marquee__item:nth-child(even) img { animation: float-t 9s ease-in-out infinite -3s; }

/* Hero : quelques étincelles dans le noir, puis dans le bleu. */
.hero__ambient { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s; }
:root[data-ground="light"] .hero__ambient { opacity: 0; }
.hero__ambient svg { position: absolute; width: var(--s, 1.2rem); color: var(--citron); animation: hero-spark var(--d, 6s) ease-in-out infinite; animation-delay: var(--dl, 0s); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wi, .pop, .rise, .svc__row, .slide, .project__media, .project__body, .project__media img { transition: none !important; }
  .js .is-below .wi, .js .pop.is-below, .js .svc__row.is-below, .js .slide.is-below, .js .project.is-below .project__body { transform: none; opacity: 1; }
  .js .project.is-below .project__media { clip-path: none; }
  .js .project.is-below .project__media img { scale: 1; }
  .js .chat:not(.is-done) .bubble:not(.on) { opacity: 1; transform: none; }
  *, *::before, *::after { animation: none !important; }
  .hero__ambient { display: none; }
  .cursor { display: none; }
  .step { scale: 1; }
  .step::after { opacity: 0; }
}


/* ================================================================ QUI ON EST
   Le manifeste de l'ancienne page About, sur Bleu. Trois « Parce que »
   posés comme des cartes papier, légèrement de biais, qui flottent. */
.about { background: var(--bleu); color: var(--blanc); padding-block: clamp(5rem, 10vw, 8rem); overflow: hidden; }
.about__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.about__title { margin-top: 1.25rem; font-size: clamp(2.25rem, 4.8vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.about__title em { color: var(--citron); }
.about__text { display: grid; gap: 1.5rem; min-width: 0; }
.about__text p { color: var(--blanc-a90); font-size: 1.0625rem; max-width: 34rem; }
.about__text p strong { color: var(--blanc); font-weight: 600; }
.about__markets { display: flex; flex-wrap: wrap; gap: .5rem; }
.about__markets .tag { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--blanc-a60); }
.about__markets .tag:first-child { background: var(--citron); color: var(--encre); box-shadow: none; }
.because { margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.because li {
  position: relative; display: grid; gap: 1rem; align-content: start;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--lin); color: var(--encre);
  box-shadow: 0 24px 50px -28px var(--nuit-a60);
  min-width: 0;
}
.because li:nth-child(1) { rotate: -1.5deg; }
.because li:nth-child(2) { rotate: 1.2deg; margin-top: 2rem; }
.because li:nth-child(3) { rotate: -.8deg; background: var(--citron); }
.because .label { color: var(--bleu); }
.because li:nth-child(3) .label { color: var(--encre); }
.because p { font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.because p em { color: var(--bleu); position: relative; white-space: nowrap; }
.because li:nth-child(3) p em { color: var(--encre); }
.because p em svg { position: absolute; left: -3%; bottom: -.22em; width: 106%; height: .35em; color: var(--corail); }
.because p em svg path { stroke-width: 6; }
.because .spark { position: absolute; right: 1.25rem; top: 1.25rem; width: 1.6rem; color: var(--corail); }
.js .because li.is-in { animation: drift var(--bd, 10s) ease-in-out infinite; }
.because li:nth-child(1) { --bd: 10s; --dx: 3px; --dy: -8px; --r0: 0deg; --r1: .8deg; }
.because li:nth-child(2) { --bd: 12s; --dx: -4px; --dy: -6px; --r0: 0deg; --r1: -.8deg; }
.because li:nth-child(3) { --bd: 9s; --dx: 4px; --dy: -9px; --r0: 0deg; --r1: 1deg; }
@media (max-width: 52rem) {
  .about__grid { grid-template-columns: 1fr; }
  .because { grid-template-columns: 1fr; }
  .because li:nth-child(2) { margin-top: 0; }
}


/* Équipe : la photo du bureau en grand, avec la forme « papier » de la
   charte (p. 21), et les deux associés en duotone Pêche (p. 21, point 03).
   La couleur revient au survol. */
.team { margin-top: clamp(4rem, 8vw, 6.5rem); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.team__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.team__head h3 { margin: 0; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; }
.team__head h3 em { color: var(--citron); }
.team__office { position: relative; margin: 0; min-width: 0; }
.team__office .frame { border-radius: var(--r-card); overflow: hidden; rotate: -1deg; box-shadow: 0 30px 60px -30px var(--nuit-a70); }
.team__office img { width: 100%; height: auto; aspect-ratio: 1400 / 1013; object-fit: cover; transition: transform 1.2s var(--ease-expo); }
.team__office:hover img { transform: scale(1.04); }
.team__blob {
  position: absolute; left: -1rem; bottom: -1.75rem;
  padding: 1.1rem 2.2rem 1.2rem 1.6rem;
  background: var(--corail); color: var(--encre);
  border-radius: 58% 42% 52% 48% / 55% 48% 52% 45%;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1;
  rotate: -3deg;
  animation: drift 9s ease-in-out infinite; --dx: 3px; --dy: -5px; --r0: -3deg; --r1: -1deg;
}
.team__blob em { color: var(--encre); } /* Lin sur Corail : contraste 2,78 */
.team__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); min-width: 0; }
.member { display: grid; gap: .3rem; margin: 0; min-width: 0; }
.member:nth-child(2) { translate: 0 2.5rem; }
.member__photo {
  position: relative; aspect-ratio: 4 / 5; max-width: 100%;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--peche);
  margin-bottom: .75rem;
}
.member__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  filter: grayscale(1) contrast(1.08) brightness(1.04);
  mix-blend-mode: multiply;
  transition: filter .6s var(--ease-expo), transform .9s var(--ease-expo);
}
.member:hover .member__photo img { filter: none; mix-blend-mode: normal; transform: scale(1.04); }
.member__photo .spark { position: absolute; right: .9rem; top: .9rem; width: 1.5rem; color: var(--bleu); opacity: 0; scale: .4; transition: opacity .4s, scale .6s var(--spring); }
.member:hover .member__photo .spark { opacity: 1; scale: 1; }
.member h4 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.member .label { color: var(--blanc); } /* Citron sur Bleu réservé aux titres (4,44 en 13 px) */
.js .member.is-in { animation: drift var(--md, 11s) ease-in-out infinite; --dx: 0px; --dy: -6px; --r0: 0deg; --r1: 0deg; }
.member:nth-child(2) { --md: 13s; }
@media (max-width: 52rem) {
  .team { grid-template-columns: 1fr; }
  .team__blob { left: .5rem; }
  .team__people { margin-top: 2rem; }
  .member:nth-child(2) { translate: 0 1.5rem; }
}


/* ================================================================ OUTILS
   Nuage interactif des outils (Studio IA). Chaque logo est une bulle
   blanche ; une petite simulation physique les garde groupées, les fait
   dériver doucement, les écarte du curseur et permet de les attraper et
   de les lancer. Elles entrent en poussant depuis le bas, comme le reste. */
.tools { margin-top: clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.tools__text { display: grid; gap: 1rem; min-width: 0; }
.tools__text h3 { margin: 0; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.tools__text h3 em { color: var(--bleu); }
.tools__text p { color: var(--encre-2); max-width: 26rem; }
.tools__hint { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--encre); }
.tools__hint svg { width: 1.6rem; color: var(--corail); }
.tools__cloud {
  position: relative; margin: 0; padding: 0; list-style: none;
  height: clamp(22rem, 34vw, 28rem);
  min-width: 0;
  touch-action: pan-y;
  user-select: none;
}
.tool {
  position: absolute; left: 0; top: 0;
  width: calc(var(--r) * 2px); height: calc(var(--r) * 2px);
  margin: calc(var(--r) * -1px) 0 0 calc(var(--r) * -1px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: 0 0 0 1.5px var(--encre-a06), 0 14px 30px -16px var(--encre-a35);
  cursor: grab;
  will-change: transform;
}
.tool img { width: var(--lw, 58%); height: auto; max-height: 62%; object-fit: contain; pointer-events: none; transition: scale .5s var(--spring); }
.tool:hover img, .tool.is-drag img { scale: 1.12; }
.tool.is-drag { cursor: grabbing; z-index: 3; box-shadow: 0 0 0 2px var(--bleu), 0 24px 40px -18px var(--encre-a50); }
.tool__name {
  position: absolute; left: 50%; top: calc(100% + .4rem); translate: -50% 0;
  padding: .45em .85em; border-radius: var(--r-pill);
  background: var(--encre); color: var(--citron);
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; scale: .7; transition: opacity .25s, scale .4s var(--spring);
  pointer-events: none; z-index: 4;
}
.tool:hover .tool__name, .tool.is-drag .tool__name, .tool:focus-visible .tool__name { opacity: 1; scale: 1; }
.tool:hover { z-index: 3; }
/* Sans JS : simple grille de pastilles. */
html:not(.js) .tools__cloud { height: auto; display: flex; flex-wrap: wrap; gap: 1rem; }
html:not(.js) .tool { position: relative; margin: 0; --r: 42; }
@media (max-width: 52rem) { .tools { grid-template-columns: 1fr; } }