/* ANIMIA Pro, page vitrine animia.vet
   Les couleurs viennent du design system de l'app iOS (AnimiaColors / AnimiaEchelle) :
   la nuit marine des planches, l'aqua de la marque, le rouge réservé aux alertes.
   Rayons : boutons en pilule, cartes 20px, tuiles 16px, étiquettes 9px. */

:root,
[data-theme="nuit"] {
  --fond: #1F3149;            /* nuit 10 */
  --fond-bas: #182841;
  --surface: #2A3E56;         /* nuit 9 */
  --surface-haute: #344A63;   /* nuit 8 */
  --filet: rgba(255, 255, 255, .10);
  --filet-fort: rgba(255, 255, 255, .18);
  --texte: #F4F8FB;           /* nuit 1 */
  --texte-2: #BACAD8;         /* nuit 3 */
  --texte-3: #93A8BC;         /* nuit 4 */
  --aqua: #5ED8DA;            /* animiaTexte sombre */
  --aqua-plein: #1FA3C0;      /* animia sombre */
  --signature: #55C8D8;
  --degrade-haut: #6FE0DC;
  --degrade-bas: #1D8CB0;
  --sur-aqua: #04222B;
  --urgence: #E5484D;
  --fond-urgence: #3D2330;
  --alerte: #F08A34;
  --succes: #2DBE6C;
  --encre-ombre: 3, 10, 22;
  --lueur: .55;
  color-scheme: dark;
}

[data-theme="clair"] {
  --fond: #F6F8F9;            /* ardoise 1 */
  --fond-bas: #EAF0F3;
  --surface: #FFFFFF;
  --surface-haute: #FFFFFF;
  --filet: rgba(15, 35, 48, .10);
  --filet-fort: rgba(15, 35, 48, .18);
  --texte: #0F2330;           /* ardoise 9 */
  --texte-2: #3F5666;         /* ardoise 6 */
  --texte-3: #56707F;
  --aqua: #0A6F81;            /* animiaTexte clair */
  --aqua-plein: #0E8AA1;
  --signature: #55C8D8;
  --degrade-haut: #6FE0DC;
  --degrade-bas: #1D8CB0;
  --sur-aqua: #04222B;
  --urgence: #C0272D;
  --fond-urgence: #FBF4F4;
  --alerte: #9E5F00;
  --succes: #12833C;
  --encre-ombre: 8, 18, 33;
  --lueur: .28;
  color-scheme: light;
}

@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

.ic { width: 1em; height: 1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -0.125em; }

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

body {
  margin: 0;
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .3s ease, color .3s ease;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

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

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--aqua-plein); color: #fff; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Le fond de nuit : une lueur aqua qui descend d'un coin, comme FondNuit dans l'app. */
.aurore {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 45vmax at 85% -10%, rgba(85, 200, 216, calc(var(--lueur) * .55)), transparent 60%),
    radial-gradient(50vmax 40vmax at -10% 20%, rgba(29, 140, 176, calc(var(--lueur) * .45)), transparent 60%),
    linear-gradient(180deg, var(--fond) 0%, var(--fond-bas) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .aurore { animation: derive 60s ease-in-out infinite alternate; background-size: 120% 120%; }
}
@keyframes derive { to { background-position: 30% 20%, 60% 40%, 0 0; } }

/* ─── Boutons ─── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: 0 1.5rem;
  border-radius: 999px; border: 0;
  font: inherit; font-weight: 700; font-size: 1rem; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, background-color .2s ease;
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn--plein {
  color: var(--sur-aqua);
  background: linear-gradient(135deg, var(--degrade-haut), var(--degrade-bas));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px -8px rgba(29, 140, 176, .65);
}
.btn--plein:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 40px -10px rgba(29, 140, 176, .8); }
.btn--plein .ic { transition: transform .2s ease; }
.btn--plein:hover .ic { transform: translateX(3px); }
.btn--lien { color: var(--texte); padding: 0 .75rem; }
.btn--lien:hover { color: var(--aqua); }
.btn--petit { min-height: 44px; padding: 0 1.1rem; font-size: .9375rem; }

/* ─── Navigation ─── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  background: color-mix(in srgb, var(--fond) 72%, transparent);
  border-bottom: 1px solid var(--filet);
}
.nav__in {
  max-width: 1240px; margin: 0 auto; height: 68px;
  padding: 0 20px; display: flex; align-items: center; gap: 24px;
}
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marque__tuile {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(145deg, #1a7f93, #0f5f70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -6px rgba(15, 95, 112, .8);
}
.marque__tuile img { width: 26px; height: 26px; }
.marque__nom { font-weight: 800; letter-spacing: .02em; font-size: 1.05rem; white-space: nowrap; }
.marque__nom b { color: var(--aqua); font-weight: 900; }
.marque__nom small { color: var(--texte-3); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.nav__liens { display: flex; gap: 4px; margin-left: auto; }
.nav__liens a {
  padding: 10px 14px; border-radius: 999px; text-decoration: none;
  color: var(--texte-2); font-weight: 600; font-size: .95rem;
  transition: color .2s ease, background-color .2s ease;
}
.nav__liens a:hover { color: var(--texte); background: var(--filet); }
.nav__liens a[aria-current="true"] { color: var(--aqua); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.theme {
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; font-size: 1.2rem;
  color: var(--texte-2); background: transparent; border: 1px solid var(--filet-fort);
  transition: color .2s ease, background-color .2s ease;
}
.theme:hover { color: var(--texte); background: var(--filet); }

@media (max-width: 860px) {
  .nav__liens { display: none; }
  .nav__actions { margin-left: auto; }
}
/* Sur téléphone, l'appel à l'action du héros suffit : la barre garde la marque et le thème. */
@media (max-width: 520px) {
  .nav .btn--petit { display: none; }
}

main > section { max-width: 1240px; margin: 0 auto; padding-inline: 20px; }

.surtitre {
  color: var(--aqua); font-weight: 800; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem;
}

h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -.028em; }

/* ─── Héros ─── */
.heros {
  min-height: calc(100dvh - 68px);
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 24px;
  padding-top: 32px; padding-bottom: 48px;
}
.heros h1 {
  font-size: clamp(2.4rem, 1.3rem + 2.8vw, 3.6rem);
  line-height: 1.02; letter-spacing: -.04em; font-weight: 900;
}
.heros__sous { margin-top: 1.4rem; font-size: 1.2rem; color: var(--texte-2); max-width: 34ch; }
.heros__cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.heros__scene {
  position: relative; height: min(78dvh, 720px); min-height: 460px;
  perspective: 1100px;
}
.scene3d { position: absolute; inset: -10% -20% -10% -10%; width: 130%; height: 120%; }
.halo {
  position: absolute; left: 50%; top: 52%; width: 70%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(85, 200, 216, .45), rgba(29, 140, 176, .12) 45%, transparent 70%);
  filter: blur(8px);
}
.heros__robot {
  position: absolute; left: 50%; bottom: 0; height: 96%; width: auto;
  transform: translateX(-50%) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transform-style: preserve-3d;
  filter: drop-shadow(0 30px 40px rgba(var(--encre-ombre), .55));
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.bulle-espece {
  position: absolute; width: clamp(78px, 9vw, 112px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d9f3f6 60%, #a9e2ea);
  box-shadow: inset 0 -6px 14px rgba(29, 140, 176, .25), inset 0 2px 0 #fff,
              0 18px 36px -12px rgba(var(--encre-ombre), .7), 0 0 0 1px rgba(255, 255, 255, .25);
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.bulle-espece img { width: 88%; }
.bulle-espece--chat { left: 4%; top: 18%; }
.bulle-espece--chien { right: 2%; top: 34%; width: clamp(92px, 10.5vw, 132px); }
.bulle-espece--lapin { left: 10%; bottom: 14%; width: clamp(64px, 7vw, 92px); }

@media (max-width: 900px) {
  .heros { grid-template-columns: 1fr; min-height: auto; padding-top: 40px; }
  .heros__scene { height: 460px; min-height: 0; order: 2; }
}

/* L'entrée du héros est orchestrée par mouvement.js. */
@keyframes entree { to { opacity: 1; transform: none; } }
@keyframes scene { from { opacity: 0; transform: translateY(30px) scale(.96); } }



/* ─── Manifeste ─── */
.manifeste {
  display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center;
  padding-top: 120px; padding-bottom: 120px;
}
.manifeste__buste {
  width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(85, 200, 216, .35), rgba(29, 140, 176, .08) 60%, transparent 72%);
  filter: drop-shadow(0 24px 30px rgba(var(--encre-ombre), .5));
}
.manifeste h2 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem); line-height: 1.05; letter-spacing: -.035em; max-width: 18ch; }
.manifeste h2 span { color: var(--aqua); }
.manifeste p { margin-top: 1.6rem; font-size: 1.25rem; color: var(--texte-2); max-width: 52ch; }
@media (max-width: 760px) {
  .manifeste { grid-template-columns: 1fr; gap: 24px; padding-top: 72px; padding-bottom: 72px; }
  .manifeste__buste { width: 180px; }
}

/* ─── Fiche clinique ─── */
.fiche-sec {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center;
  padding-top: 40px; padding-bottom: 120px;
}
.fiche-sec__texte p { margin-top: 1.25rem; color: var(--texte-2); font-size: 1.125rem; max-width: 48ch; }
.points { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .8rem; }
.points li { display: flex; gap: .7rem; align-items: baseline; color: var(--texte); font-weight: 500; }
.points .ic { color: var(--aqua); font-size: 1.1rem; transform: translateY(2px); }

.fiche {
  margin: 0; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-haute), var(--surface));
  border: 1px solid var(--filet-fort);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(var(--encre-ombre), .2), 0 40px 80px -30px rgba(var(--encre-ombre), .75);
  transform: perspective(1400px) rotateY(var(--ry, -8deg)) rotateX(var(--rx, 4deg));
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .7s ease;
}
.fiche__urgence {
  display: flex; align-items: center; gap: .6rem; padding: 14px 20px;
  background: var(--urgence); color: #fff; font-size: .95rem;
}
.fiche__urgence .ic { font-size: 1.3rem; }
.fiche__urgence b { font-weight: 800; margin-right: .35rem; }
.fiche__corps { padding: 22px 22px 8px; }
.fiche__synthese { font-size: 1.2rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.fiche__titre { margin-top: 1.3rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.fiche__gestes {
  margin-top: 1.1rem; padding: 4px 16px 14px; border-radius: 14px;
  background: var(--fond-urgence); border: 1px solid color-mix(in srgb, var(--urgence) 45%, transparent);
}
.fiche__gestes .fiche__titre { color: var(--urgence); margin-top: .8rem; }
.fiche__gestes ol { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-weight: 600; }
.diff { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .9rem; }
.diff li { display: grid; grid-template-columns: 30px 1fr; row-gap: 6px; align-items: baseline; }
.diff__rang { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--texte-3); font-size: .9rem; }
.diff li:first-child .diff__rang { color: var(--aqua); }
.diff__nom { font-weight: 600; }
.diff__barre {
  grid-column: 2; height: 6px; border-radius: 999px; width: calc(var(--p) * 100%);
  background: var(--texte-3); transform-origin: left; transform: scaleX(var(--s, 1));
  transition: transform 1s cubic-bezier(.16, 1, .3, 1) .3s;
}
.diff li:first-child .diff__barre { background: linear-gradient(90deg, var(--degrade-haut), var(--degrade-bas)); }
.fiche figcaption { padding: 12px 22px 18px; font-size: .85rem; color: var(--texte-3); }
@media (max-width: 900px) {
  .fiche-sec { grid-template-columns: 1fr; gap: 40px; padding-bottom: 80px; }
  .fiche { --ry: 0deg; --rx: 0deg; }
}

/* ─── Mains libres ─── */
.voix {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center;
  padding-top: 40px; padding-bottom: 120px;
}
.voix__visuel { position: relative; display: grid; place-items: center; }
.voix__visuel img { position: relative; height: 520px; width: auto; filter: drop-shadow(0 26px 30px rgba(var(--encre-ombre), .5)); }
.onde { position: absolute; top: 12%; left: 50%; width: 260px; aspect-ratio: 1; transform: translateX(-50%); }
.onde span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--signature); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .voix__visuel.vu .onde span { animation: onde 3.2s cubic-bezier(.2, .6, .3, 1) infinite; }
  .voix__visuel.vu .onde span:nth-child(2) { animation-delay: 1.05s; }
  .voix__visuel.vu .onde span:nth-child(3) { animation-delay: 2.1s; }
}
@keyframes onde { 0% { transform: scale(.35); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
.voix__texte p { margin-top: 1.25rem; font-size: 1.125rem; color: var(--texte-2); max-width: 50ch; }
.gestes { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--filet-fort); }
.gestes > div { padding: 1.3rem 1.2rem 0 0; display: grid; gap: .3rem; }
.gestes > div + div { padding-left: 1.2rem; border-left: 1px solid var(--filet); }
.gestes .ic { font-size: 1.6rem; color: var(--aqua); }
.gestes b { font-size: 1.15rem; font-weight: 800; }
.gestes span { color: var(--texte-2); font-size: .98rem; }
@media (max-width: 900px) {
  .voix { grid-template-columns: 1fr; gap: 24px; padding-bottom: 80px; }
  .voix__visuel img { height: 360px; }
  .onde { width: 190px; }
}
@media (max-width: 560px) {
  .gestes { grid-template-columns: 1fr; }
  .gestes > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--filet); }
  .gestes > div { padding-bottom: 1rem; }
}

/* ─── Outils : bento avec inclinaison 3D ─── */
.outils { padding-top: 40px; padding-bottom: 120px; }
.outils h2 { max-width: 20ch; }
.bento {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(210px, auto); gap: 16px;
  perspective: 1400px;
}
.tuile {
  --mx: 50%; --my: 50%;
  position: relative; border-radius: 20px; padding: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-haute) 92%, transparent), var(--surface));
  border: 1px solid var(--filet);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 40px -24px rgba(var(--encre-ombre), .8);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
  overflow: hidden; isolation: isolate;
}
.tuile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(85, 200, 216, .16), transparent 45%);
  opacity: 0; transition: opacity .3s ease;
}
.tuile:hover { border-color: color-mix(in srgb, var(--signature) 45%, transparent); }
.tuile:hover::before { opacity: 1; }
.tuile img { width: 84px; height: 84px; transform: translateZ(40px); filter: drop-shadow(0 12px 16px rgba(var(--encre-ombre), .45)); }
.tuile h3 { margin-top: 14px; font-size: 1.25rem; letter-spacing: -.015em; transform: translateZ(24px); }
.tuile p { margin-top: .45rem; color: var(--texte-2); font-size: .98rem; line-height: 1.5; transform: translateZ(14px); }

.tuile--posologie {
  grid-column: span 2; grid-row: span 2; padding: 32px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(111, 224, 220, .38), transparent 55%),
    linear-gradient(160deg, #1b7f95, #114a67 70%, #0f3a55);
  border-color: rgba(111, 224, 220, .35);
  color: #F4F8FB;
}
.tuile--posologie img { width: 150px; height: 150px; }
.tuile--posologie h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); margin-top: 22px; }
.tuile--posologie p { color: #D6ECF2; font-size: 1.1rem; max-width: 40ch; }
.tuile--posologie .tuile__plus { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .18); color: #BFE6EE; font-size: 1rem; }
.tuile--perfusion {
  grid-column: span 2;
  display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-haute) 80%, #1D8CB0 20%), var(--surface));
}
.tuile--perfusion img { grid-row: span 2; width: 104px; height: 104px; align-self: center; }
.tuile--perfusion h3 { margin-top: 0; align-self: end; }
[data-theme="clair"] .tuile--perfusion { background: linear-gradient(135deg, #E2F2F8, #FFFFFF); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tuile--posologie { grid-row: span 1; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .tuile--posologie, .tuile--perfusion { grid-column: auto; }
  .tuile--perfusion { grid-template-columns: 1fr; }
  .tuile--perfusion img { grid-row: auto; width: 84px; height: 84px; }
  .tuile--perfusion h3 { margin-top: 14px; }
}

/* ─── Espèces : l'anneau 3D ─── */
.especes { padding-top: 40px; padding-bottom: 80px; text-align: center; }
.especes__texte h2 { max-width: 22ch; margin-inline: auto; }
.especes__texte p { margin: 1.25rem auto 0; font-size: 1.125rem; color: var(--texte-2); max-width: 56ch; }
.anneau-scene {
  --r: clamp(260px, 36vw, 480px);
  position: relative; height: 380px; margin-top: 40px;
  perspective: 1400px; perspective-origin: 50% 30%;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.anneau-scene:active { cursor: grabbing; }
.anneau {
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: 50%; top: 40px; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-8deg) rotateY(var(--angle, 0deg));
}
.anneau li {
  position: absolute; left: -70px; top: 0; width: 140px;
  transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(var(--r));
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.anneau figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.anneau img {
  width: 140px; height: 140px; border-radius: 50%; padding: 10px;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d9f3f6 60%, #a9e2ea);
  box-shadow: inset 0 -8px 18px rgba(29, 140, 176, .25), inset 0 2px 0 #fff, 0 22px 36px -14px rgba(var(--encre-ombre), .75);
  pointer-events: none;
}
.anneau figcaption { font-weight: 700; font-size: 1rem; }
.anneau__aide { position: absolute; left: 0; right: 0; bottom: 0; color: var(--texte-3); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) {
  .anneau-scene { height: auto; perspective: none; cursor: auto; }
  .anneau { position: static; width: auto; height: auto; transform: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
  .anneau li { position: static; transform: none; width: 110px; }
  .anneau img { width: 110px; height: 110px; }
  .anneau__aide { display: none; }
}
@media (max-width: 600px) {
  .anneau-scene { --r: 230px; height: 270px; }
  .anneau li { left: -52px; width: 104px; }
  .anneau img { width: 104px; height: 104px; }
}

/* ─── Confiance ─── */
.confiance { padding-top: 80px; padding-bottom: 120px; }
.confiance h2 { max-width: 18ch; }
.principes {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 64px;
}
.principes > div { padding: 28px 0; border-top: 1px solid var(--filet-fort); }
.principes h3 { font-size: 1.35rem; letter-spacing: -.015em; display: flex; align-items: center; gap: .6rem; }
.principes h3::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px; flex: none;
  background: linear-gradient(135deg, var(--degrade-haut), var(--degrade-bas));
}
.principes > div:nth-child(2) h3::before { background: var(--urgence); }
.principes p { margin-top: .6rem; color: var(--texte-2); max-width: 46ch; }
@media (max-width: 760px) { .principes { grid-template-columns: 1fr; } }

/* ─── Appel final ─── */
.final {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
  padding-top: 40px; padding-bottom: 120px;
}
.final__visuel {
  position: relative; height: 440px; border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(70% 80% at 50% 100%, rgba(111, 224, 220, .45), transparent 70%),
    linear-gradient(160deg, #1b7f95, #114a67 70%, #0f3a55);
  box-shadow: 0 0 0 1px rgba(111, 224, 220, .3), 0 40px 80px -30px rgba(var(--encre-ombre), .8);
}
.final__robot {
  position: absolute; left: 50%; bottom: -8%; height: 112%; width: auto; transform: translateX(-50%);
  filter: drop-shadow(0 24px 30px rgba(3, 10, 22, .5));
}
.final__chien { left: 7%; bottom: 14%; width: clamp(100px, 12vw, 150px); }
.final__chat { right: 7%; top: 14%; width: clamp(92px, 11vw, 136px); }
.final__texte p { margin: 1.2rem 0 2rem; font-size: 1.125rem; color: var(--texte-2); max-width: 40ch; }
@media (max-width: 900px) { .final { grid-template-columns: 1fr; gap: 32px; padding-bottom: 80px; } }

/* ─── Pied ─── */
.pied { border-top: 1px solid var(--filet); }
.pied__in {
  max-width: 1240px; margin: 0 auto; padding: 28px 20px 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  color: var(--texte-3); font-size: .95rem;
}
.pied__in a { color: var(--texte-2); text-decoration: none; }
.pied__in a:hover { color: var(--aqua); }
.pied__in > span:last-child { margin-left: auto; }
.pied .marque__tuile { width: 32px; height: 32px; border-radius: 9px; }
.pied .marque__tuile img { width: 22px; height: 22px; }

/* En clair, la profondeur vient de la finesse, pas de la force (AnimiaShadow). */
[data-theme="clair"] .tuile { box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(8, 18, 33, .06), 0 18px 36px -24px rgba(8, 18, 33, .35); }
[data-theme="clair"] .fiche { box-shadow: 0 2px 6px rgba(8, 18, 33, .06), 0 40px 80px -36px rgba(8, 18, 33, .4); }

/* ─── RobotVet, la conversation ─── */
.btn--contour {
  margin-top: 1.8rem; color: var(--texte); background: transparent;
  border: 1px solid var(--filet-fort);
}
.btn--contour:hover { border-color: var(--signature); color: var(--aqua); }
.btn--contour .ic { font-size: 1.2rem; color: var(--aqua); }

.rv-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rv-bouton {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px;
  border-radius: 999px; border: 1px solid rgba(111, 224, 220, .45); cursor: pointer;
  font: inherit; color: var(--texte); text-align: left;
  background: color-mix(in srgb, var(--surface-haute) 88%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -14px rgba(var(--encre-ombre), .8), 0 0 0 6px rgba(85, 200, 216, .08);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.rv-bouton:hover { transform: translateY(-3px); }
.rv-bouton:active { transform: scale(.97); }
.rv-bouton.cache { opacity: 0; pointer-events: none; transform: scale(.9); }
.rv-bouton__tete, .rv-tete {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none;
  background: radial-gradient(circle at 50% 35%, #e6f8fa, #9fdde6 70%);
  box-shadow: inset 0 -4px 10px rgba(29, 140, 176, .3);
}
.rv-bouton__tete img, .rv-tete img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transform: scale(1.25); }
.rv-bouton__texte { display: grid; font-size: .85rem; color: var(--texte-2); line-height: 1.25; }
.rv-bouton__texte b { font-size: 1rem; color: var(--texte); font-weight: 800; }
@media (max-width: 520px) {
  .rv-bouton { padding: 5px; }
  /* Masqué à l'écran, mais lu par les lecteurs d'écran : c'est le nom du bouton. */
  .rv-bouton__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.rv-panneau {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 70;
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 110px));
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--filet-fort);
  box-shadow: 0 30px 80px -20px rgba(var(--encre-ombre), .85);
  transform-origin: 100% 100%; transform: translateY(12px) scale(.96); opacity: 0;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.rv-panneau.ouvert { transform: none; opacity: 1; }
.rv-panneau[hidden] { display: none; }
@media (max-width: 520px) {
  .rv-panneau { right: 8px; left: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom)); height: calc(100dvh - 90px); }
}

.rv-entete {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
  background: linear-gradient(135deg, #1b7f95, #0f3a55); color: #F4F8FB;
}
.rv-entete h2 { font-size: 1.1rem; letter-spacing: -.01em; }
.rv-entete p { font-size: .82rem; color: #BFE6EE; display: flex; align-items: center; gap: 6px; }
.rv-entete p::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2DBE6C; }
.rv-tete { width: 44px; height: 44px; position: relative; overflow: visible; }
.rv-tete img { border-radius: 50%; }
.rv-tete::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #6FE0DC; border-right-color: #6FE0DC;
  opacity: 0; transition: opacity .2s ease;
}
.rv-tete.reflechit::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rv-tete.reflechit::after { animation: rv-tourne 1.6s linear infinite; }
}
@keyframes rv-tourne { to { transform: rotate(360deg); } }
.rv-fermer {
  margin-left: auto; width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 1.2rem; color: #F4F8FB; background: rgba(255, 255, 255, .12);
}
.rv-fermer:hover { background: rgba(255, 255, 255, .22); }

.rv-fil { list-style: none; margin: 0; padding: 16px; flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 12px; overscroll-behavior: contain; }
.rv-msg { max-width: 88%; font-size: .96rem; line-height: 1.5; }
.rv-msg ul { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.rv-msg a { color: var(--aqua); font-weight: 700; }
.rv-msg--robot { padding: 2px 0 2px 12px; border-left: 2px solid var(--signature); color: var(--texte); }
.rv-msg--moi {
  justify-self: end; padding: 10px 14px; border-radius: 18px 18px 6px 18px;
  background: linear-gradient(135deg, var(--degrade-haut), var(--degrade-bas)); color: var(--sur-aqua); font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .rv-msg { animation: entree .35s cubic-bezier(.16, 1, .3, 1) both; }
  .rv-arrive { animation: entree .35s cubic-bezier(.16, 1, .3, 1) both; }
}
.rv-points { display: inline-flex; gap: 5px; padding: 6px 0; }
.rv-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--signature); opacity: .4; }
@media (prefers-reduced-motion: no-preference) {
  .rv-points i { animation: rv-point 1s ease-in-out infinite; }
  .rv-points i:nth-child(2) { animation-delay: .15s; }
  .rv-points i:nth-child(3) { animation-delay: .3s; }
}
@keyframes rv-point { 50% { opacity: 1; transform: translateY(-3px); } }

.rv-puces { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.rv-puces:empty { display: none; }
.rv-puces button {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--aqua);
  background: transparent; border: 1px solid color-mix(in srgb, var(--signature) 50%, transparent);
}
.rv-puces button:hover { background: color-mix(in srgb, var(--signature) 14%, transparent); }

.rv-saisie { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--filet); }
.rv-saisie input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 16px; border-radius: 999px;
  font: inherit; font-size: 1rem; color: var(--texte);
  background: var(--fond); border: 1px solid var(--filet-fort);
}
.rv-saisie input::placeholder { color: var(--texte-3); }
.rv-saisie input:focus-visible { outline: 2px solid var(--signature); outline-offset: 1px; }
.rv-saisie button {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  display: grid; place-items: center; font-size: 1.2rem; color: var(--sur-aqua);
  background: linear-gradient(135deg, var(--degrade-haut), var(--degrade-bas));
}
.rv-mention { padding: 0 16px 12px; font-size: .78rem; color: var(--texte-3); text-align: center; }

/* ─── L'app, en vrai : téléphones en perspective ─── */
.ecrans { padding-top: 40px; padding-bottom: 120px; }
.ecrans__texte { max-width: 640px; }
.ecrans__texte p { margin-top: 1.2rem; font-size: 1.125rem; color: var(--texte-2); }
.ecrans__rangee {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-items: start;
  perspective: 1800px;
}
.telephone { margin: 0; display: grid; gap: 14px; justify-items: center; }
.telephone__cadre {
  width: 100%; max-width: 270px; padding: 9px; border-radius: 46px;
  background: linear-gradient(145deg, #4a5a6e, #1a2433 45%, #2d3a4b);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 40px 70px -28px rgba(var(--encre-ombre), .9), 0 0 0 1px rgba(0, 0, 0, .35);
  transform: rotateY(calc(var(--r) * -7deg + 10deg)) rotateX(4deg) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.telephone__cadre img { width: 100%; height: auto; border-radius: 38px; display: block; }
.telephone:hover .telephone__cadre { transform: rotateY(0deg) rotateX(0deg) translateY(-8px); }
.telephone--haut { margin-top: -28px; }
.telephone figcaption { font-weight: 700; font-size: .98rem; color: var(--texte-2); text-align: center; }
@media (max-width: 1000px) {
  .ecrans__rangee {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(62vw, 250px);
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 20px 24px; margin-inline: -20px;
    scrollbar-width: none;
  }
  .ecrans__rangee::-webkit-scrollbar { display: none; }
  .telephone { scroll-snap-align: center; }
  .telephone--haut { margin-top: 0; }
  .telephone__cadre { transform: none; }
}

/* ─── « Demander à RobotVet » sur chaque outil ─── */
.tuile__question {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 700;
  color: var(--aqua); background: transparent; border: 1px solid color-mix(in srgb, var(--signature) 45%, transparent);
  transform: translateZ(20px); transition: background-color .2s ease, border-color .2s ease;
}
.tuile__question:hover { background: color-mix(in srgb, var(--signature) 14%, transparent); border-color: var(--signature); }
.tuile--posologie .tuile__question { color: #E8FAFB; border-color: rgba(255, 255, 255, .4); }
.tuile--posologie .tuile__question:hover { background: rgba(255, 255, 255, .12); }
.tuile--perfusion .tuile__question { grid-column: 2; justify-self: start; }
@media (max-width: 600px) { .tuile--perfusion .tuile__question { grid-column: auto; } }

/* ─── Équipe ─── */
.equipe {
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
  padding-top: 40px; padding-bottom: 100px; max-width: 980px;
}
.equipe__marque {
  width: 132px; height: 132px; border-radius: 36px; display: grid; place-items: center;
  background: linear-gradient(145deg, #1a7f93, #0f5f70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 30px 50px -20px rgba(15, 95, 112, .9);
}
.equipe__marque img { width: 84px; height: 84px; }
.equipe p { margin-top: 1.1rem; font-size: 1.125rem; color: var(--texte-2); max-width: 60ch; }
.equipe p b { color: var(--texte); }
@media (max-width: 700px) { .equipe { grid-template-columns: 1fr; gap: 24px; } .equipe__marque { width: 96px; height: 96px; border-radius: 26px; } .equipe__marque img { width: 60px; height: 60px; } }

/* ─── FAQ : deux colonnes, tout visible ─── */
.faq { padding-top: 40px; padding-bottom: 120px; }
.faq__liste { margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 64px; }
.faq__liste dt { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.faq__liste dd { margin: .5rem 0 0; color: var(--texte-2); max-width: 52ch; }
@media (max-width: 760px) { .faq__liste { grid-template-columns: 1fr; gap: 28px; } }

/* ─── Formulaire de demande d'accès ─── */
.acces { margin-top: 1.6rem; display: grid; gap: 14px; max-width: 460px; }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 700; font-size: .95rem; }
.champ label span { font-weight: 500; color: var(--texte-3); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 14px;
  font: inherit; font-size: 1rem; color: var(--texte);
  background: var(--surface); border: 1px solid var(--filet-fort);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { resize: vertical; min-height: 88px; }
.champ select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texte-3) 50%), linear-gradient(135deg, var(--texte-3) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: none; border-color: var(--signature); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signature) 35%, transparent); }
.champ [aria-invalid="true"] { border-color: var(--urgence); }
.champ__erreur { color: var(--urgence); font-size: .9rem; font-weight: 600; }
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acces .btn { justify-self: start; margin-top: 4px; }
.acces .btn[disabled] { opacity: .6; cursor: progress; }
.acces__etat { font-weight: 700; min-height: 1.4em; }
.acces__etat.ok { color: var(--succes); }
.acces__etat.erreur { color: var(--urgence); }
.acces__mention { font-size: .85rem; color: var(--texte-3); }
.acces__mention a { color: var(--texte-2); }
.final { align-items: start; }
.final__visuel { position: sticky; top: 96px; }
@media (max-width: 900px) { .final__visuel { position: relative; top: 0; height: 320px; } }

/* ─── Pied ─── */
.pied__liens { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ─── Pages de texte : mentions légales, confidentialité, 404 ─── */
.nav__retour { margin-left: auto; }
.nav__retour .ic { transform: rotate(180deg); }
.texte { max-width: 760px; margin: 0 auto; padding: 56px 20px 100px; }
.texte h1 { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em; }
.texte h2 { font-size: 1.35rem; letter-spacing: -.015em; margin-top: 2.4rem; }
.texte p, .texte li { color: var(--texte-2); margin-top: .8rem; }
.texte ul { padding-left: 1.2rem; }
.texte a:not(.btn) { color: var(--aqua); font-weight: 600; }
.texte b { color: var(--texte); }
.texte__maj { color: var(--texte-3) !important; font-size: .95rem; }
.texte__resume { margin-top: 1.6rem; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--filet-fort); }
.texte__resume p { margin: 0; }
.texte__table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: .95rem; }
.texte__table th, .texte__table td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--filet); color: var(--texte-2); }
.texte__table th { color: var(--texte); font-weight: 800; border-bottom-color: var(--filet-fort); }
@media (max-width: 640px) {
  .texte__table thead { display: none; }
  .texte__table tr { display: grid; padding: 12px 0; border-bottom: 1px solid var(--filet); }
  .texte__table td { border: 0; padding: 2px 0; }
  .texte__table td:first-child { color: var(--texte); font-weight: 800; }
}
.introuvable { display: grid; justify-items: center; text-align: center; gap: 12px; padding-top: 20px; }
.introuvable img { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(85, 200, 216, .35), transparent 70%); }
.introuvable .btn { margin-top: 12px; }
.rv-bouton.efface { opacity: 0; pointer-events: none; transform: translateY(20px); }

/* La sphère 3D arrive après la page : elle apparaît en fondu, pas d'un coup. */
.scene3d { opacity: 0; transition: opacity .9s ease; }
.scene3d.pret { opacity: 1; }

/* Sur téléphone, le chien remonte pour laisser la place au bouton de RobotVet. */
@media (max-width: 900px) {
  .bulle-espece--chien { top: 8%; right: 4%; }
}


/* ═══════════════ Mouvement (mouvement.js) ═══════════════ */

/* Enveloppes du héros : GSAP anime l'enveloppe, la souris incline le robot dedans. */
.heros__perso, .heros__bulles { position: absolute; inset: 0; }
.heros__bulles { pointer-events: none; }

/* Progression de lecture, sous la barre de navigation */
.progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.progression span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--degrade-haut), var(--degrade-bas));
  box-shadow: 0 0 12px rgba(85, 200, 216, .7);
}
.nav { transition: background-color .3s ease, box-shadow .3s ease; }
.nav__in { transition: height .35s cubic-bezier(.16, 1, .3, 1); }
.nav--compacte { box-shadow: 0 10px 30px -18px rgba(var(--encre-ombre), .9); }
.nav--compacte .nav__in { height: 58px; }

/* Masques de SplitText : les mots montent depuis une ligne coupée net */
.ligne-masque { padding-bottom: .08em; margin-bottom: -.08em; }

/* Reflet qui balaie le bouton principal au survol */
.btn--plein { position: relative; overflow: hidden; isolation: isolate; }
.btn--plein::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--plein:hover::after { transform: translateX(120%); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
}

/* Les trois gestes s'allument l'un après l'autre */
.mouvement .gestes > div { transition: opacity .4s ease; }
.mouvement .gestes > div.eteint { opacity: .35; }
.gestes .ic { transition: transform .4s cubic-bezier(.16, 1, .3, 1), filter .4s ease; }
.gestes > div.actif .ic { transform: scale(1.25); filter: drop-shadow(0 0 10px rgba(85, 200, 216, .8)); }

/* L'onde sonore du mode mains libres */
.vumetre { display: flex; align-items: center; gap: 4px; height: 34px; margin-top: 1.4rem; }
.vumetre i {
  width: 4px; height: 100%; border-radius: 4px; transform-origin: 50% 50%; transform: scaleY(.25);
  background: linear-gradient(180deg, var(--degrade-haut), var(--degrade-bas));
}

/* RobotVet fait signe depuis son bouton */
.rv-bouton.salue .rv-bouton__tete img { animation: rv-salut 1.1s cubic-bezier(.22, 1, .36, 1); }
@keyframes rv-salut { 0%, 100% { transform: scale(1.25) rotate(0); } 25% { transform: scale(1.32) rotate(-10deg); } 55% { transform: scale(1.32) rotate(8deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn--plein::after, .vumetre { display: none; }
}

/* Quand GSAP pilote un élément, aucune transition CSS ne doit lisser ses
   propriétés en même temps : les deux se battraient, et GSAP enregistrerait un
   état intermédiaire comme état final (la fiche restait invisible). */
.mouvement .fiche,
.mouvement .bulle-espece { transition: none; }
.mouvement .btn--plein { transition: box-shadow .25s ease, background-color .2s ease; }
.mouvement .btn--plein:hover { transform: none; }
.mouvement .tuile.en-mouvement { transition: none; }

/* RobotVet écrit : chaque mot s'allume, légèrement flou au départ */
.rv-mot { opacity: 0; filter: blur(3px); transition: opacity .35s ease, filter .35s ease; }
.rv-mot.vu { opacity: 1; filter: none; }

/* Transitions entre pages (accueil, mentions, confidentialité) : fondu, la barre reste en place */
@view-transition { navigation: auto; }
.nav { view-transition-name: barre; }
::view-transition-old(root) { animation: vt-sortie .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-entree .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }

/* Une lueur aqua suit la souris dans le fond de nuit, très discrète */
.lueur-souris {
  position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%;
  background: radial-gradient(circle, rgba(85, 200, 216, calc(var(--lueur) * .32)), transparent 62%);
  opacity: 0; transition: opacity .6s ease;
  will-change: transform;
}
.lueur-souris.active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rv-mot { opacity: 1; filter: none; transition: none; }
  @view-transition { navigation: none; }
  .lueur-souris { display: none; }
}