/* ==========================================================================
   Refuge Mandalore — page d'accueil « papier pêche »
   Une bande de papier pêche déchirée, posée sur une page crème, avec des photos
   et des notes collées. Écriture à la main, pattes brunes, traits jaunes.

   Bureau (≥ 64 rem) : les pièces sont placées en % de la largeur de la bande.
   Téléphone (< 64 rem) : elles s'empilent sur deux colonnes.

   Réglages rapides :
     --peach-a, --peach-b   dégradé de la bande pêche
     --coral                couleur des coups de pinceau et du bouton
     --brown                texte et icônes
   ========================================================================== */

:root {
  --cream: #FCF4EC;
  --peach-a: #F9BCA4;
  --peach-b: #F3A08A;
  --coral: #E4694F;          /* blanc dessus : 3,3:1, réservé aux gros textes en gras */
  --coral-text: #D45A40;     /* texte corail sur crème : 3,6:1, gros textes uniquement */
  --brown: #7D3820;          /* texte courant : 9:1 sur la crème */
  --brown-paw: #8B3B21;
  --brown-soft: #7C5646;     /* texte secondaire : 5,7:1 sur la crème */
  --paper-note: #F7ECD9;
  --yellow: #FCE3A6;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --font-hand: 'Gaegu', 'Segoe Print', 'Bradley Hand', cursive;

  --tape-clip: polygon(0 0, 100% 0, 97% 18%, 100% 36%, 97% 54%, 100% 72%, 97% 90%, 100% 100%, 0 100%, 3% 82%, 0 64%, 3% 46%, 0 28%, 3% 10%);
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .32 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  color-scheme: light;
}

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

html { background: var(--cream); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--cream);
  background-image: var(--grain-soft);
  background-size: 320px 320px;
  color: var(--brown);
  font-family: var(--font-hand);
  font-size: 1.25rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 40;
  padding: 0.75rem 1.25rem;
  background: var(--brown);
  color: #fff;
  border-radius: 0.5rem;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

.icon { display: inline-block; width: 1.15em; height: 1.15em; flex: none; color: currentColor; }
.ink { filter: url(#ink); }

/* ---------- En-tête ---------- */
.topbar { position: relative; z-index: 20; }
/* Fond plein sous le haut de l'en-tête, identique à celui de la page : sur iPhone, un carré noir apparaissait ici, derrière le contenu */
.topbar::before { content: ''; position: absolute; z-index: -1; inset: 0 0 auto; height: 2.6rem; background: var(--grain-soft), var(--cream); background-size: 320px 320px; pointer-events: none; }
.topbar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem clamp(1.25rem, 5.5vw, 6rem) 1.25rem;
}

.brand { position: relative; display: inline-flex; align-items: center; gap: 0.85rem; color: var(--brown); text-decoration: none; }
.brand__text { display: grid; font: 400 1.7rem/1.08 var(--font-hand); letter-spacing: 0.09em; }
.brand__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  overflow: hidden;
  border-radius: 50%;
  background: #FFF1E6;
  box-shadow: inset 0 0 0 2px rgba(228, 105, 79, 0.35), 0 2px 6px rgba(140, 70, 40, 0.2);
}
.brand__logo svg { width: 52%; height: 52%; fill: var(--brown-paw); }
.brand__logo img { width: 100%; height: 100%; object-fit: cover; }

.nav__list { display: flex; justify-content: center; gap: clamp(1.25rem, 3.4vw, 3.5rem); }
.nav__list a {
  display: inline-block;
  padding: 0.15rem 0.1rem 0.25rem;
  border-bottom: 3px solid transparent;
  border-radius: 2px;
  color: var(--brown);
  font: 400 1.35rem/1.2 var(--font-hand);
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: border-color 0.3s ease;
}
.nav__list a[aria-current] { border-bottom-color: var(--coral); color: var(--coral-text); font-weight: 700; }
.nav__list a:hover { border-bottom-color: rgba(228, 105, 79, 0.55); }

.topbar__actions { display: flex; align-items: center; gap: 1.1rem; }
.topbar__paw { width: 1.9rem; height: 1.9rem; fill: var(--brown-paw); }

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.7rem 0.6rem 1.5rem;
  border-radius: 999px 900px 999px 700px / 800px 999px 700px 999px;
  background: var(--coral);
  color: #fff;
  font: 700 1.3rem/1.2 var(--font-hand);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.btn-pill:hover { opacity: 0.9; }
.btn-pill .icon { width: 1.4rem; height: 1.4rem; }
.btn-pill:focus-visible { outline-color: var(--brown); }

.nav-toggle { display: none; }

/* ---------- Héros : la bande pêche ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  height: clamp(38rem, 46vw, 58rem);
  color: var(--brown);
}
.hero::before, .hero::after { content: ''; position: absolute; pointer-events: none; }
.hero::after {                          /* bord clair et fibreux du papier déchiré + ombre */
  z-index: -2;
  inset: -0.6rem 0;
  background: #FFF1E6;
  box-shadow: 0 5px 10px rgba(140, 70, 40, 0.14);
  filter: url(#edge-a);
}
.hero::before {                         /* le papier pêche */
  z-index: -1;
  inset: 0;
  background:
    var(--grain-soft),
    linear-gradient(172deg, var(--peach-a) 0%, #F6AB92 55%, var(--peach-b) 100%);
  filter: url(#edge-b);
}

/* Titre : deux coups de pinceau corail */
.hl { position: absolute; left: 9.2%; top: 7.5%; z-index: 4; }
.hl__row { display: flex; align-items: center; gap: 1.6rem; }
.hl__line {
  position: relative;
  isolation: isolate;
  display: block;
  width: fit-content;
  padding: 0.1em 0.6em 0.2em 0.5em;
  color: #fff;
  font: 700 clamp(2.2rem, 3.85vw, 4.5rem)/1.05 var(--font-hand);
  letter-spacing: 0.015em;
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.hl__line::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--coral); filter: url(#brush); }
.hl__line--2 { margin-top: -0.12em; margin-left: 1.2%; }
.hl__line--2::before { background: #E56B51; }
.check { position: relative; z-index: 2; width: clamp(1.8rem, 2.6vw, 2.9rem); height: auto; transform: translateY(-48%) rotate(8deg); }

.dashes { position: absolute; height: auto; z-index: 3; }
.dashes--l { left: 5%; top: 6%; width: 3%; }
.dashes--r { left: 52.5%; top: 11%; width: 3.2%; }

.sub {
  position: absolute;
  z-index: 3;
  left: 14.5%;
  top: 45%;
  width: 34%;
  font: 400 clamp(1.25rem, 2.15vw, 2.4rem)/1.45 var(--font-hand);
  transform: rotate(-5deg);
  transform-origin: left top;
  color: var(--brown);
}

.pill {
  position: absolute;
  z-index: 3;
  left: 19.5%;
  top: 62%;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 2.1rem 0.9rem;
  border-radius: 999px 700px 999px 800px / 800px 999px 700px 999px;
  background: #FCF1E6;
  box-shadow: 0 3px 8px rgba(150, 70, 40, 0.2);
  color: var(--brown);
  font: 400 clamp(1.1rem, 1.5vw, 1.65rem)/1 var(--font-hand);
  letter-spacing: 0.04em;
  text-decoration: none;
  transform: rotate(-2deg);
  transition: background-color 0.3s ease;
}
.pill:hover { background: #fff; }
.pill .icon { width: 1.35em; height: 1.35em; }

/* Décor au trait */
.doodle { position: absolute; height: auto; color: rgba(255, 255, 255, 0.92); fill: none; z-index: 2; }
.doodle--heart-l { left: 7.2%; top: 49.5%; width: 3.6%; aspect-ratio: 1; transform: rotate(-8deg); }
.doodle--cat { left: 18%; top: 76%; width: 9%; aspect-ratio: 120 / 140; color: rgba(255, 255, 255, 0.85); }
.doodle--heart-m { display: none; }

.swoosh { position: absolute; height: auto; z-index: 1; }
.swoosh--l { left: 0; top: 26%; width: 8.5%; }
.swoosh--r { right: 0; top: 70%; width: 7%; }

.pawprint { position: absolute; width: 2.4%; aspect-ratio: 1; height: auto; fill: var(--brown-paw); z-index: 2; }
.pp1 { left: 49.8%; top: 49%; transform: rotate(-12deg); }
.pp2 { left: 52.6%; top: 57.5%; transform: rotate(14deg); width: 2.2%; }
.pp3 { left: 43.4%; top: 71%; transform: rotate(-4deg); }
.pp4 { left: 40.2%; top: 79%; transform: rotate(16deg); width: 2.6%; }
.pp5 { left: 90.4%; top: 83%; transform: rotate(-14deg); }
.pp6 { left: 92.8%; top: 89.5%; transform: rotate(10deg); width: 2.2%; }

/* ---------- Polaroïds ---------- */
.polaroid {
  position: absolute;
  z-index: 3;
  padding: 0.9rem 0.9rem 0;
  background: #FBF3E8;
  box-shadow: 0 2px 3px rgba(120, 55, 30, 0.2), 8px 14px 22px -8px rgba(120, 55, 30, 0.4);
}
.polaroid__photo { position: relative; line-height: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.polaroid__photo img { width: 100%; height: auto; object-fit: cover; }
.polaroid figcaption { padding: 0.7rem 0.5rem 1.3rem; font: 400 clamp(1.1rem, 1.6vw, 1.8rem)/1.25 var(--font-hand); }
.polaroid figcaption .icon { width: 1em; height: 1em; vertical-align: -0.1em; }

.tape {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -1.4rem;
  width: 46%;
  height: 2.5rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 12%, transparent 88%, rgba(255, 255, 255, 0.18)),
    rgba(244, 143, 118, 0.72);
  clip-path: var(--tape-clip);
  transform: translateX(-50%) rotate(-2deg);
}

.polaroid--big { left: 57.4%; top: 14%; width: 24.2%; padding-bottom: clamp(2.8rem, 4.6vw, 5rem); transform: rotate(2.2deg); }   /* sans légende : on garde le large bord crème du bas */
.polaroid--big .polaroid__photo img { aspect-ratio: 1 / 1.03; object-position: 64% 52%; transform: scale(1.4); transform-origin: 63% 56%; }   /* cadrage serré sur le visage */
.polaroid__heart { position: absolute; right: 7%; top: 6%; width: 14%; height: auto; aspect-ratio: 1; color: rgba(255, 255, 255, 0.95); }

.polaroid--small { left: 3.6%; top: 66%; width: 13.8%; padding: 0.7rem 0.7rem clamp(1.9rem, 3.2vw, 3.4rem); transform: rotate(-3.5deg); }
.polaroid--small .polaroid__photo img { aspect-ratio: 1.12 / 1; object-position: 50% 36%; }
.polaroid--small .tape { left: 36%; width: 52%; }

/* Les deux petits polaroïds de droite */
.note { padding: 0.7rem 0.7rem clamp(1.7rem, 2.7vw, 2.9rem); }
.note .polaroid__photo img { aspect-ratio: 1.28 / 1; }
.note--a .polaroid__photo img { object-position: 52% 38%; }
.note--b .polaroid__photo img { aspect-ratio: 1 / 0.98; object-position: 52% 52%; }
.note .tape { width: 42%; }
.note .tape--b { left: 38%; transform: translateX(-50%) rotate(3deg); }
.note--a { left: 82.4%; top: 10.6%; width: 14.6%; transform: rotate(-6deg); }
.note--b { left: 82.8%; top: 43.3%; width: 14.4%; transform: rotate(-2.5deg); }

/* ---------- Raccourcis ---------- */
.shortcuts {
  display: grid;
  grid-template-columns: 1fr clamp(14rem, 20vw, 24rem);
  align-items: center;
  max-width: 96rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 3rem) var(--gutter) clamp(2.5rem, 4.5vw, 5rem);
}
.shortcuts__list { display: flex; justify-content: space-around; gap: 1.5rem; padding-inline: clamp(0rem, 4vw, 5rem) 0; }

.sc { display: grid; justify-items: center; gap: 0.15rem; text-align: center; text-decoration: none; color: var(--brown); }
.sc__icon { position: relative; isolation: isolate; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; margin-bottom: 0.7rem; }
.sc__icon::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--blob); filter: url(#blob); }
.sc__icon--rose { --blob: #F7B5A0; }
.sc__icon--jaune { --blob: #FBD79F; }
.sc__rays { position: absolute; left: 50%; top: 50%; width: 8.4rem; height: 5.6rem; transform: translate(-50%, -50%); color: #E88B6B; z-index: -1; }
.sc__pic { width: 2.7rem; height: 2.7rem; fill: var(--brown-paw); color: var(--brown); }
.sc__pic--line { fill: none; }
.sc__title { font: 400 clamp(1.3rem, 1.9vw, 1.9rem)/1.2 var(--font-hand); letter-spacing: 0.04em; }
.sc__text { font: 400 1.15rem/1.3 var(--font-hand); letter-spacing: 0.05em; color: var(--brown-soft); }
.sc:hover .sc__title { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

/* Signature « Ensemble pour eux » */
.signoff { position: relative; justify-self: center; width: 100%; min-height: 11rem; }
.signoff__text { font: 400 clamp(2.2rem, 3.4vw, 3.7rem)/1.05 var(--font-hand); color: var(--coral-text); transform: rotate(-12deg); transform-origin: left bottom; margin: 2.4rem 0 0 18%; }
.signoff__line { position: absolute; left: 24%; top: 7.8rem; width: 9rem; height: auto; color: var(--coral-text); transform: rotate(-10deg); }
.signoff__heart { position: absolute; right: 8%; top: 4.8rem; width: 1.6rem; height: 1.6rem; color: var(--coral-text); }
.signoff__paw { position: absolute; left: 14%; top: 8.1rem; width: 1.2rem; height: 1.2rem; fill: var(--brown-paw); }
.signoff .pawprint { display: none; }

/* ==========================================================================
   Pages intérieures (À propos…) : la même bande pêche, en plus basse
   ========================================================================== */

/* Papier déchiré posé sur la page (note, texte) */
.paper-piece { position: relative; isolation: isolate; color: var(--brown); }
.paper-piece::before, .paper-piece::after { content: ''; position: absolute; pointer-events: none; }
.paper-piece::after { z-index: -2; inset: -0.4rem; background: #FFF8EC; box-shadow: 2px 6px 8px rgba(120, 55, 30, 0.3); filter: url(#tear-a); }
.paper-piece::before { z-index: -1; inset: 0; background: var(--grain-soft), var(--paper-note); filter: url(#tear-b); }

/* Titre de section : un coup de pinceau corail */
.brush-title {
  position: relative;
  isolation: isolate;
  width: fit-content;
  padding: 0.1em 0.7em 0.2em 0.6em;
  color: #fff;
  font: 700 clamp(1.9rem, 2.9vw, 3.2rem)/1.1 var(--font-hand);
  letter-spacing: 0.015em;
  transform: rotate(-2deg);
}
.brush-title::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--coral); filter: url(#brush); }

/* Bande du haut */
.hero--page { height: clamp(26rem, 33vw, 40rem); }
.hero--page .hl { top: 13%; }
.hero--page .sub { left: 12.5%; top: 57%; width: 36%; }
.heart-mark { position: relative; z-index: 2; width: clamp(2rem, 2.9vw, 3.3rem); height: auto; aspect-ratio: 1; color: #fff; transform: translateY(-38%) rotate(10deg); }

.polaroid--p1 { left: 59%; top: 12%; width: 23%; padding-bottom: clamp(2.4rem, 4vw, 4.4rem); transform: rotate(2.4deg); }
.polaroid--p1 .polaroid__photo img { aspect-ratio: 1.12 / 1; object-position: 58% 48%; }
.polaroid--p2 { left: 82%; top: 42%; width: 14.5%; padding-bottom: clamp(1.8rem, 2.9vw, 3.1rem); transform: rotate(-5deg); }
.polaroid--p2 .polaroid__photo img { aspect-ratio: 1.05 / 1; object-position: 52% 38%; }
.polaroid--p2 .tape { width: 44%; }

.hp1 { left: 51.5%; top: 70%; transform: rotate(-12deg); }
.hp2 { left: 54.5%; top: 80%; transform: rotate(14deg); width: 2.2%; }
.hp3 { left: 4.5%; top: 76%; transform: rotate(-6deg); }
.hp4 { left: 7.5%; top: 86%; transform: rotate(16deg); width: 2.2%; }

/* Notre histoire : photos à gauche, mot sur un papier déchiré à droite */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 7rem);
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 7rem) var(--gutter) clamp(2rem, 4vw, 4rem);
}
.story__photos { position: relative; aspect-ratio: 1 / 0.92; }
.story__pol1 { left: 3%; top: 3%; width: 60%; padding-bottom: clamp(2.6rem, 4.2vw, 4.6rem); transform: rotate(-3deg); }
.story__pol1 .polaroid__photo img { aspect-ratio: 1 / 1.02; object-position: 64% 52%; transform: scale(1.3); transform-origin: 63% 56%; }
.story__pol2 { right: 2%; bottom: 3%; width: 43%; padding-bottom: clamp(1.9rem, 3vw, 3.2rem); transform: rotate(4deg); }
.story__pol2 .polaroid__photo img { aspect-ratio: 1.12 / 1; object-position: 50% 36%; }
.story__text { display: grid; justify-items: start; gap: clamp(1.8rem, 3vw, 2.8rem); }
.story__note { padding: clamp(1.7rem, 3vw, 3rem) clamp(1.7rem, 3.2vw, 3.4rem); font-size: clamp(1.25rem, 1.65vw, 1.75rem); line-height: 1.55; transform: rotate(1deg); }
.story__note p + p { margin-top: 1rem; }
.story__note .tape { left: 28%; width: 24%; }

/* Nos missions */
.missions {
  display: grid;
  justify-items: center;
  gap: clamp(2.2rem, 3.5vw, 3.8rem);
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 4vw, 4.5rem) var(--gutter) clamp(3.5rem, 6vw, 7rem);
}
.missions__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 5vw, 6rem); width: 100%; }
.sc--static { cursor: default; }
.sc--static:hover .sc__title { text-decoration: none; }
.sc--static .sc__text { max-width: 18rem; font-size: clamp(1.15rem, 1.35vw, 1.4rem); line-height: 1.4; }

/* Bande du bas : un appel, sur le même papier pêche */
.band {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  display: grid;
  justify-items: center;
  gap: clamp(1.6rem, 2.6vw, 2.4rem);
  margin-bottom: clamp(2rem, 4vw, 4rem);
  padding: clamp(4rem, 6vw, 7rem) var(--gutter);
  text-align: center;
  color: var(--brown);
}
.band::before, .band::after { content: ''; position: absolute; pointer-events: none; }
.band::after { z-index: -2; inset: -0.6rem 0; background: #FFF1E6; box-shadow: 0 5px 10px rgba(140, 70, 40, 0.14); filter: url(#edge-a); }
.band::before { z-index: -1; inset: 0; background: var(--grain-soft), linear-gradient(172deg, var(--peach-a) 0%, #F6AB92 55%, var(--peach-b) 100%); filter: url(#edge-b); }
.band__title { font: 700 clamp(2rem, 3.4vw, 3.8rem)/1.15 var(--font-hand); letter-spacing: 0.01em; transform: rotate(-2deg); }
.band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem 1.6rem; }
.pill--flow { position: relative; left: auto; top: auto; }
.pill--coral { background: var(--coral); color: #fff; font-weight: 700; }
.pill--coral:hover { background: #D95F46; }
.band__heart { position: absolute; left: 12%; top: 26%; width: 2.2rem; height: 2.2rem; color: rgba(255, 255, 255, 0.92); transform: rotate(-10deg); }
.band .pawprint { width: 2.4rem; }
.bp1 { right: 10%; top: 22%; transform: rotate(-14deg); }
.bp2 { right: 14.5%; top: 40%; transform: rotate(12deg); width: 2.1rem; }
.bp3 { left: 9%; top: 62%; transform: rotate(-8deg); }
.bp4 { left: 13.5%; top: 76%; transform: rotate(14deg); width: 2.1rem; }

/* ---------- Nos chats : une galerie de polaroïds, puis les étapes ---------- */
.gallery {
  display: grid;
  justify-items: center;
  gap: clamp(2.5rem, 4vw, 4rem);
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 7rem) var(--gutter) clamp(2rem, 4vw, 4rem);
}
.gallery__list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2.4rem, 4vw, 3.8rem) clamp(1.6rem, 3.5vw, 3.6rem); width: 100%; }
.gallery__list li { width: clamp(14rem, 21vw, 19.5rem); }
.gallery .polaroid { position: relative; width: 100%; padding-bottom: clamp(2.4rem, 3.4vw, 3.6rem); }
.gallery .polaroid__photo img { aspect-ratio: 1 / 1.1; }
.gallery li:nth-child(odd) .polaroid { transform: rotate(-2.6deg); }
.gallery li:nth-child(even) .polaroid { transform: rotate(2.2deg); }
.gallery li:nth-child(3n) .polaroid { transform: rotate(-0.8deg); }
.sc__num { font: 700 2.6rem/1 var(--font-hand); color: var(--brown); }

/* ---------- Agir : quatre papiers, quatre façons d'aider ---------- */
.actions {
  display: grid;
  justify-items: center;
  gap: clamp(2.5rem, 4vw, 4rem);
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 7rem) var(--gutter) clamp(3rem, 6vw, 6rem);
}
.actions__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.4rem, 4vw, 3.8rem) clamp(2rem, 4.5vw, 5rem); width: 100%; }
.action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 0.5rem 1.5rem;
  padding: clamp(1.7rem, 2.8vw, 2.8rem);
  scroll-margin-top: 2rem;
}
.action:nth-child(odd) { transform: rotate(-1deg); }
.action:nth-child(even) { transform: rotate(1deg); }
.action .sc__icon { grid-row: 1 / 4; width: 4.4rem; height: 4.4rem; margin: 0; }
.action .sc__rays { width: 6.8rem; height: 4.6rem; }
.action .sc__pic { width: 2.2rem; height: 2.2rem; }
.action__title { font: 700 clamp(1.6rem, 2.1vw, 2.2rem)/1.15 var(--font-hand); letter-spacing: 0.02em; }
.action__text { font-size: clamp(1.2rem, 1.45vw, 1.5rem); line-height: 1.45; }
.action__link { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; padding-bottom: 0.1rem; border-bottom: 3px solid var(--coral); color: var(--brown); font: 700 1.25rem/1.2 var(--font-hand); letter-spacing: 0.03em; text-decoration: none; }
.action__link .icon { width: 1.2em; height: 1.2em; }
.action__link:hover { border-bottom-color: var(--brown); }

/* ---------- Contact : les coordonnées sur le papier ---------- */
.contact-list { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.contact-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.contact-list .sc__icon { width: 3.6rem; height: 3.6rem; margin: 0; }
.contact-list .sc__rays { display: none; }
.contact-list .sc__pic { width: 1.8rem; height: 1.8rem; }
.contact-list__label { display: block; color: var(--brown-soft); font-size: 1.05rem; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; }
.todo { display: inline-block; border-bottom: 2px dashed var(--coral); color: var(--brown); font-size: clamp(1.25rem, 1.6vw, 1.7rem); line-height: 1.3; }
.story__pol1--plain .polaroid__photo img { object-position: 58% 55%; transform: none; }

/* ---------- Pied de page : un carton brun déchiré, posé sous la bande pêche ---------- */
.footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(5.6rem, 7.4vw, 8rem) var(--gutter) clamp(1.4rem, 2vw, 2rem);
  color: var(--cream);
}
.footer::before, .footer::after { content: ''; position: absolute; pointer-events: none; }
.footer::after { z-index: -2; inset: 1.4rem 0 -3rem; background: #FFF1E6; box-shadow: 0 -4px 10px rgba(140, 70, 40, 0.16); filter: url(#edge-a); }
.footer::before { z-index: -1; inset: 2.4rem 0 -3rem; background: var(--grain-soft), linear-gradient(176deg, #8E4327 0%, var(--brown) 55%, #6E3019 100%); filter: url(#edge-b); }
.footer a:focus-visible { outline-color: var(--yellow); }

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 6vw, 7rem);
  max-width: 78rem;
  margin: 0 auto;
}
.footer__logo { display: inline-grid; color: var(--cream); font: 400 clamp(1.7rem, 2.2vw, 2.3rem)/1.08 var(--font-hand); letter-spacing: 0.09em; text-decoration: none; }
.footer__slogan { margin-top: 1rem; max-width: 22rem; color: var(--yellow); font: 700 clamp(1.4rem, 1.8vw, 1.9rem)/1.2 var(--font-hand); transform: rotate(-2deg); transform-origin: left center; }
.footer__trail { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.2rem; }
.footer__heart { width: 1.8rem; height: 1.8rem; color: #F6AB92; }
.footer__trail .pawprint { position: static; width: 1.5rem; fill: rgba(252, 244, 236, 0.3); }
.ft1 { --i: 0; transform: rotate(-14deg); }
.ft2 { --i: 1; transform: rotate(10deg) translateY(-0.3rem); }
.ft3 { --i: 2; transform: rotate(-8deg); }

.footer__title { font: 700 1.45rem/1.2 var(--font-hand); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.footer__title::after { content: ''; display: block; width: 3.2rem; height: 3px; margin-top: 0.45rem; border-radius: 3px; background: var(--peach-b); }
.footer__col ul { display: grid; justify-items: start; gap: 0.6rem; margin-top: 1.1rem; }
.footer__col a { display: inline-block; padding-bottom: 0.1rem; border-bottom: 2px solid transparent; color: var(--cream); font-size: 1.3rem; line-height: 1.25; text-decoration: none; transition: border-color 0.25s ease, color 0.25s ease; }
.footer__col a:hover { border-bottom-color: var(--peach-b); color: #fff; }
.footer__col a[aria-current] { border-bottom-color: var(--peach-b); color: var(--yellow); font-weight: 700; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  max-width: 78rem;
  margin: clamp(2.2rem, 3.4vw, 3.4rem) auto 0;
  padding-top: 1.2rem;
  border-top: 2px dashed rgba(252, 244, 236, 0.35);
  color: rgba(252, 244, 236, 0.88);
  font-size: 1.15rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; }
.footer__legal strong { color: var(--cream); font-weight: 700; letter-spacing: 0.03em; }
.footer__top { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--yellow); font-weight: 700; letter-spacing: 0.04em; text-decoration: none; }
.footer__top .icon { width: 1.2em; height: 1.2em; rotate: -90deg; transition: translate 0.25s ease; }
.footer__top:hover .icon { translate: 0 -0.25rem; }

/* ---------- Téléphone et petites largeurs ---------- */
@media (max-width: 63.9375rem) {
  .topbar__inner { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0.5rem; padding: 0.8rem var(--gutter) 1rem; }
  .brand { gap: 0.5rem; }
  .brand__logo { width: 2.5rem; height: 2.5rem; }
  .brand__text { font-size: 1.05rem; letter-spacing: 0.06em; }
  .topbar__paw { display: none; }
  .topbar__actions { justify-self: end; gap: 0.4rem; }
  .btn-pill { gap: 0.4rem; font-size: 1rem; letter-spacing: 0.02em; padding: 0.4rem 0.9rem 0.45rem 0.8rem; }
  .btn-pill .icon { width: 1.1rem; height: 1.1rem; }

  .nav-toggle {
    display: inline-grid;
    gap: 0.3rem;
    align-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2.5px; border-radius: 2px; background: var(--brown); }
  .nav {
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    display: none;
    padding: 1rem 1.5rem 1.25rem;
    background: #FFF6EC;
    border-radius: 0.8rem;
    box-shadow: 0 10px 24px rgba(120, 55, 30, 0.28);
    z-index: 30;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 0.35rem; }

  /* La bande pêche devient une grille à deux colonnes */
  .hero {
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: auto;
    column-gap: 1rem;
    padding: 3.6rem var(--gutter) 5rem;
  }
  .hl, .sub, .pill, .polaroid--big, .note--b, .doodle--cat, .doodle--heart-m {
    position: relative; left: auto; top: auto; width: auto; margin: 0;
  }
  .hl { grid-column: 1 / -1; grid-row: 1; margin-bottom: 1.5rem; }
  .hl__line { font-size: clamp(1.7rem, 8vw, 2.6rem); white-space: normal; }
  .check { width: 1.7rem; }
  .sub { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0.8rem; font-size: clamp(1.05rem, 4.4vw, 1.4rem); transform: rotate(-4deg); }
  .sub br { display: none; }
  .pill { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; margin-top: 1rem; gap: 0.35rem; padding: 0.55rem 0.85rem 0.6rem; font-size: 0.9rem; letter-spacing: 0.01em; white-space: nowrap; }
  .pill .icon { width: 1.15em; height: 1.15em; }
  .hero .polaroid--big { grid-column: 2; grid-row: 2 / 4; align-self: start; margin-top: -0.5rem; padding-bottom: 2.6rem; transform: rotate(3deg); }
  .polaroid--big .polaroid__photo img { aspect-ratio: 1 / 1.05; }
  .polaroid { padding: 0.6rem 0.6rem 0; }
  .polaroid figcaption { padding: 0.5rem 0.3rem 0.9rem; font-size: 1.1rem; }
  .note--b { grid-column: 2; grid-row: 4; align-self: start; margin-top: 1.25rem; padding-bottom: 2.2rem; transform: rotate(-3deg); }
  .doodle--cat { grid-column: 1; grid-row: 4; justify-self: start; align-self: end; width: 6.5rem; aspect-ratio: 120 / 140; }
  .doodle--heart-l { left: 4%; top: 52%; width: 2.2rem; }
  .doodle--heart-m { display: block; position: absolute; left: 50%; top: 66%; width: 2.2rem; aspect-ratio: 1; height: auto; transform: rotate(-6deg); }

  .note--a, .polaroid--small, .dashes--r, .pp1, .pp2 { display: none; }
  .pp3 { left: 44%; top: 56%; width: 1.7rem; }
  .pp4 { left: 40%; top: 62%; width: 1.7rem; }
  .pp5 { left: 90%; top: 52%; width: 1.7rem; }
  .pp6 { left: 80%; top: 79%; width: 1.6rem; }
  .swoosh--l { top: 76%; width: 6rem; }
  .swoosh--r { top: 80%; width: 5rem; }
  .dashes--l { left: 3%; top: 3%; width: 2rem; }

  /* Raccourcis : deux colonnes ; la signature devient une bande pêche */
  .shortcuts { display: block; overflow-x: clip; padding: 2.5rem var(--gutter) 0; }   /* la bande pêche dépasse de 3 rem : on coupe, sans défilement horizontal */
  .shortcuts__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.2rem 1rem; padding-inline: 0; }
  .sc__icon { width: 4.6rem; height: 4.6rem; }
  .sc__rays { width: 7.6rem; height: 5rem; }
  .sc__title { font-size: 1.3rem; letter-spacing: 0.02em; }
  .sc__text { font-size: 0.98rem; letter-spacing: 0.01em; }

  .signoff {
    isolation: isolate;
    margin: 2.5rem calc(-1 * var(--gutter)) 0;
    padding: 4.5rem var(--gutter) 3.5rem;
    min-height: 0;
  }
  .signoff::before, .signoff::after { content: ''; position: absolute; pointer-events: none; }
  .signoff::after { z-index: -2; inset: -0.5rem calc(-1 * var(--gutter)) 0; background: #FFF1E6; filter: url(#edge-a); }
  .signoff::before { z-index: -1; inset: 0 calc(-1 * var(--gutter)); background: var(--grain-soft), linear-gradient(172deg, var(--peach-a), var(--peach-b)); filter: url(#edge-b); }
  .signoff__text { margin: 0; font-size: 2.2rem; }
  .signoff__line { left: calc(var(--gutter) + 1rem); top: auto; bottom: 2rem; width: 7.5rem; }
  .signoff__heart { left: 11rem; right: auto; top: 6.4rem; }
  .signoff__paw { display: none; }
  .signoff .pawprint { display: block; width: 2.2rem; }
  .signoff .pt1 { right: 4rem; top: 3rem; transform: rotate(-16deg); }
  .signoff .pt2 { right: 7rem; top: 5rem; transform: rotate(10deg); width: 2rem; }
  .signoff .pt3 { right: 2.5rem; top: 6.4rem; transform: rotate(-8deg); }
  .signoff .pt4 { right: 5.8rem; top: 8.2rem; transform: rotate(14deg); width: 2rem; }
}

/* Pages intérieures sur téléphone */
@media (max-width: 63.9375rem) {
  .hero--page .hl { top: auto; margin-bottom: 1.2rem; }
  .hero--page .hl__row { gap: 0.6rem; }
  .hero--page .hl__line { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  .hero--page .sub { left: auto; top: auto; width: auto; }
  .heart-mark { width: 1.8rem; }
  .hero--page .polaroid--p1 { position: relative; left: auto; top: auto; width: auto; grid-column: 2; grid-row: 2 / 4; align-self: start; margin-top: -0.5rem; padding-bottom: 2.2rem; transform: rotate(3deg); }
  .polaroid--p1 .polaroid__photo img { aspect-ratio: 1 / 1; }
  .polaroid--p2, .hp3, .hp4 { display: none; }
  .hp1 { left: 42%; top: 66%; width: 1.7rem; }
  .hp2 { left: 38%; top: 73%; width: 1.6rem; }

  .story { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; padding-top: 3.2rem; padding-bottom: 1.5rem; }
  .story__photos { width: min(100%, 27rem); justify-self: center; }
  .story__pol1 { padding-bottom: 2.4rem; }
  .story__pol2 { padding-bottom: 1.8rem; }
  .story__text { justify-items: center; }
  .story__note { font-size: 1.25rem; }

  .missions { padding-top: 2rem; padding-bottom: 3.5rem; }
  .missions__list { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }

  .band { padding: 5.2rem var(--gutter) 6rem; }
  .band__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .band__heart { left: 8%; top: 1.4rem; width: 1.7rem; height: 1.7rem; }
  .bp1 { right: 7%; top: 1rem; width: 1.9rem; }
  .bp2 { right: 14%; top: 2.8rem; width: 1.7rem; }
  .bp3 { left: 8%; bottom: 1.6rem; top: auto; width: 1.9rem; }
  .bp4 { left: 15%; bottom: 0.7rem; top: auto; width: 1.7rem; }
}

/* Nos chats, Agir, Contact sur téléphone */
@media (max-width: 63.9375rem) {
  .gallery { padding-top: 3rem; padding-bottom: 1.5rem; }
  .gallery__list { gap: 2rem 1rem; }
  .gallery__list li { width: calc(50% - 0.5rem); }
  .gallery .polaroid { padding: 0.6rem 0.6rem 2.2rem; }

  .actions { padding-top: 3rem; padding-bottom: 3.5rem; }
  .actions__list { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .action { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .action .sc__icon { grid-row: auto; margin-bottom: 0.6rem; }

  .contact-list { gap: 1rem; }
}

/* En-tête sur les plus petits téléphones (≤ 384 px) : le rond du logo et le bouton restent sur une ligne */
@media (max-width: 24rem) {
  .btn-pill { white-space: nowrap; padding: 0.4rem 0.7rem 0.45rem 0.65rem; font-size: 0.95rem; }
  .brand__logo { width: 2.2rem; height: 2.2rem; }
  .brand__text { font-size: 0.95rem; letter-spacing: 0.04em; }
  .nav-toggle { width: 2.4rem; padding-inline: 0.3rem; }
}

/* Pied de page sur téléphone */
@media (max-width: 63.9375rem) {
  .footer { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1.5rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col a { font-size: 1.25rem; }
  .footer__bottom { margin-top: 2.4rem; }
}

/* ---------- Animations ----------
   Rien n'est caché au départ : si une animation ne se lance pas, tout reste visible.
   Les propriétés individuelles (translate, rotate, scale) s'ajoutent aux « transform »
   déjà posés sur chaque pièce. Désactivées pour qui préfère moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pose    { from { translate: 0 -1.6rem; } }
  @keyframes brise   { 0%, 100% { rotate: -0.9deg; } 50% { rotate: 0.9deg; } }
  @keyframes pouls   { 0%, 100% { scale: 1; } 50% { scale: 1.14; } }
  @keyframes scintille { 0%, 100% { opacity: 0.95; scale: 1; } 50% { opacity: 0.3; scale: 0.8; } }
  @keyframes pas     { from { opacity: 0; scale: 0.5; } to { opacity: 1; scale: 1; } }
  @keyframes pinceau { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes trace   { to { stroke-dashoffset: 0; } }
  @keyframes flotte  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.5rem; } }
  @keyframes monte   { from { translate: 0 1.6rem; } to { translate: 0 0; } }

  /* Les photos se posent, puis bougent doucement comme dans un courant d'air */
  .polaroid { transition: scale 0.3s ease; animation: pose 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both, brise 7s ease-in-out 1s infinite; }
  .polaroid--big { animation-delay: 0s, 1s; }
  .polaroid--small { animation-delay: 0.25s, 1.6s; animation-duration: 0.9s, 8.5s; }
  .polaroid:hover { animation-play-state: paused; scale: 1.03; }

  /* Les papiers se posent aussi (sans balancement : leur bord déchiré est coûteux à redessiner) */
  .note { animation: pose 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .note--a { animation-delay: 0.3s; }
  .note--b { animation-delay: 0.5s; }

  /* Titre : le pinceau passe, ligne après ligne ; la coche se trace ensuite */
  .hl__line::before { animation: pinceau 0.9s cubic-bezier(0.3, 0.6, 0.2, 1) 0.1s both; }
  .hl__line--2::before { animation-delay: 0.55s; }
  .check path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: trace 0.5s ease-out 1.35s forwards; }

  /* Petits traits, cœurs et chat dessiné */
  .dashes { animation: scintille 2.6s ease-in-out infinite; }
  .dashes--r { animation-delay: 1.1s; }
  .doodle--heart-l, .polaroid__heart, .signoff__heart { animation: pouls 3s ease-in-out infinite; }
  .polaroid__heart { animation-delay: 0.6s; }
  .doodle--cat { animation: flotte 5s ease-in-out infinite; }

  /* Les pattes marchent à l'écran, l'une après l'autre */
  .pawprint { animation: pas 0.5s ease-out both; animation-delay: calc(1.1s + var(--i, 0) * 0.22s); }
  .pp1, .pt1 { --i: 0; } .pp2, .pt2 { --i: 1; } .pp3, .pt3 { --i: 2; }
  .pp4, .pt4 { --i: 3; } .pp5 { --i: 4; } .pp6 { --i: 5; }

  /* Boutons et raccourcis réagissent au survol */
  .pill, .btn-pill { transition: translate 0.25s ease, background-color 0.3s ease, opacity 0.3s ease; }
  .pill:hover, .btn-pill:hover { translate: 0 -3px; }
  .sc__icon { transition: rotate 0.35s ease, scale 0.35s ease; }
  .sc:hover .sc__icon { rotate: -7deg; scale: 1.08; }
  .sc__rays { transition: scale 0.35s ease; }
  .sc:hover .sc__rays { scale: 1.12; }

  /* Les raccourcis montent en place quand on arrive dessus (navigateurs récents) */
  @supports (animation-timeline: view()) {
    .sc, .signoff__text { animation: monte linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

/* ---------- Animations, suite ---------- */
.floaty { display: none; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes descend   { from { translate: 0 -1rem; } to { translate: 0 0; } }
  @keyframes glisse    { from { translate: -1.4rem 0; } to { translate: 0 0; } }
  @keyframes bat       { 0%, 86%, 100% { scale: 1; } 91% { scale: 1.07; } 95% { scale: 0.98; } }
  @keyframes tape      { 0%, 80%, 100% { rotate: 0deg; } 86% { rotate: -14deg; } 92% { rotate: 10deg; } 96% { rotate: -5deg; } }
  @keyframes pousse    { 0%, 100% { translate: 0 0; } 50% { translate: 0.35rem 0; } }
  @keyframes bascule   { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
  @keyframes empreinte { 0%, 72%, 100% { opacity: 1; } 86% { opacity: 0.3; } }
  @keyframes vole      { 0% { opacity: 0; translate: 0 0; scale: 0.6; } 18% { opacity: 0.95; } 100% { opacity: 0; translate: 0.7rem -3.8rem; scale: 1.15; } }
  @keyframes deroule   { from { opacity: 0; translate: 0 -0.7rem; } to { opacity: 1; translate: 0 0; } }

  /* En-tête : les liens descendent l'un après l'autre */
  .nav__list li { animation: descend 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .nav__list li:nth-child(1) { animation-delay: 0.05s; }
  .nav__list li:nth-child(2) { animation-delay: 0.12s; }
  .nav__list li:nth-child(3) { animation-delay: 0.19s; }
  .nav__list li:nth-child(4) { animation-delay: 0.26s; }
  .nav__list li:nth-child(5) { animation-delay: 0.33s; }
  /* Le nom du refuge ne glisse plus : sur iPhone, un carré noir restait derrière lui */
  .topbar__actions { animation: descend 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s backwards; }

  /* Le bouton « Faire un don » bat comme un cœur, et la patte à côté s'agite de temps en temps */
  .btn-pill { animation: bat 5s ease-in-out 2.5s infinite; }
  .topbar__paw { animation: tape 7s ease-in-out 3s infinite; transform-origin: 50% 70%; }

  /* Sous-titre et bouton du hero arrivent de la gauche ; la flèche pousse en boucle */
  .sub { animation: glisse 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s backwards; }
  .pill { animation: glisse 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s backwards; }   /* « backwards » : le survol reprend la main une fois l'arrivée finie */
  .pill .icon { animation: pousse 1.8s ease-in-out 2.2s infinite; }
  .pill:hover .icon { animation-duration: 0.7s; }

  /* Le chat dessiné se balance en plus de flotter ; les traits jaunes se tracent */
  .doodle--cat { animation: flotte 5s ease-in-out infinite, bascule 6.5s ease-in-out infinite; transform-origin: 50% 100%; }
  .swoosh path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: trace 1.8s ease-out 0.4s forwards; }

  /* Les pattes clignent à tour de rôle une fois posées */
  .pawprint { animation: pas 0.5s ease-out both, empreinte 6s ease-in-out infinite; animation-delay: calc(1.1s + var(--i, 0) * 0.22s), calc(3.4s + var(--i, 0) * 0.7s); }

  /* Des cœurs s'envolent du grand polaroïd (ordinateur seulement) */
  @media (min-width: 64rem) {
    .floaty { display: block; position: absolute; z-index: 5; width: 1.7rem; height: 1.7rem; color: rgba(255, 255, 255, 0.95); fill: none; opacity: 0; pointer-events: none; animation: vole 4.6s ease-out infinite; }
    .f1 { left: 79.6%; top: 26%; animation-delay: 1.8s; }
    .f2 { left: 56.2%; top: 40%; width: 1.3rem; height: 1.3rem; animation-delay: 3.4s; }
    .f3 { left: 80.8%; top: 56%; width: 1.4rem; height: 1.4rem; animation-delay: 5s; }
  }

  /* Raccourcis : les icônes flottent avec un décalage ; le soulignement de la signature se trace en défilant */
  .sc__icon { animation: flotte 4.2s ease-in-out infinite; }
  .shortcuts li:nth-child(2) .sc__icon { animation-delay: 0.7s; }
  .shortcuts li:nth-child(3) .sc__icon { animation-delay: 1.4s; }
  .shortcuts li:nth-child(4) .sc__icon { animation-delay: 2.1s; }
  .sc:hover .sc__icon { animation-play-state: paused; }
  .signoff__text { animation: brise 6s ease-in-out infinite; }
  @supports (animation-timeline: view()) {
    .signoff__text { animation: monte linear both, brise 6s ease-in-out infinite; animation-timeline: view(), auto; animation-range: entry 0% entry 70%, normal; }
    .signoff__line path { stroke-dasharray: 160; stroke-dashoffset: 160; animation: trace linear both; animation-timeline: view(); animation-range: entry 30% cover 35%; }
  }

  /* Menu téléphone : les trois barres deviennent une croix, et le panneau se déroule */
  .nav-toggle span { transition: translate 0.3s ease, rotate 0.3s ease, opacity 0.2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 0.46rem; rotate: 45deg; }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -0.46rem; rotate: -45deg; }
  .nav.is-open { animation: deroule 0.3s ease-out both; }
}

/* ---------- Animations des pages intérieures ---------- */
.hp1, .bp1 { --i: 0; } .hp2, .bp2 { --i: 1; } .hp3, .bp3 { --i: 2; } .hp4, .bp4 { --i: 3; }

@media (prefers-reduced-motion: no-preference) {
  .heart-mark, .band__heart, .footer__heart { animation: pouls 3s ease-in-out infinite; }
  .missions li:nth-child(2) .sc__icon { animation-delay: 0.7s; }
  .missions li:nth-child(3) .sc__icon { animation-delay: 1.4s; }
  .story__pol2, .polaroid--p2 { animation-delay: 0.25s, 1.6s; animation-duration: 0.9s, 8.5s; }

  /* Les titres, le papier et la bande montent en place quand on arrive dessus */
  @supports (animation-timeline: view()) {
    .brush-title, .story__note, .band__title, .band__actions { animation: monte linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gallery li:nth-child(2) .polaroid { animation-delay: 0.12s, 1.3s; }
  .gallery li:nth-child(3) .polaroid { animation-delay: 0.24s, 1.6s; }
  .gallery li:nth-child(4) .polaroid { animation-delay: 0.36s, 1.9s; }
  .gallery li:nth-child(5) .polaroid { animation-delay: 0.48s, 2.2s; }
  .actions li:nth-child(2) .sc__icon { animation-delay: 0.7s; }
  .actions li:nth-child(3) .sc__icon { animation-delay: 1.4s; }
  .actions li:nth-child(4) .sc__icon { animation-delay: 2.1s; }
  .contact-list li:nth-child(2) .sc__icon { animation-delay: 0.7s; }
  .contact-list li:nth-child(3) .sc__icon { animation-delay: 1.4s; }
  .action__link .icon { transition: translate 0.25s ease; }
  .action__link:hover .icon { translate: 0.3rem 0; }
  @supports (animation-timeline: view()) {
    .action { animation: monte linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

/* ---------- Mouvement réduit ----------
   Pas de balancement, de flottement, de glissement ni de rebond : seulement des fondus
   (apparition en douceur) et un léger souffle sur les cœurs. */
@media (prefers-reduced-motion: reduce) {
  @keyframes fondu  { from { opacity: 0; } }
  @keyframes souffle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }

  /* Les photos, les papiers, le pinceau du titre et les pattes apparaissent en fondu */
  .polaroid, .note { animation: fondu 1s ease-out both; }
  .polaroid--small, .story__pol2, .polaroid--p2 { animation-delay: 0.25s; }
  .note--a { animation-delay: 0.3s; }
  .note--b { animation-delay: 0.5s; }
  .gallery li:nth-child(2) .polaroid { animation-delay: 0.12s; }
  .gallery li:nth-child(3) .polaroid { animation-delay: 0.24s; }
  .gallery li:nth-child(4) .polaroid { animation-delay: 0.36s; }
  .gallery li:nth-child(5) .polaroid { animation-delay: 0.48s; }
  .hl__line::before { animation: fondu 0.9s ease-out 0.1s both; }
  .hl__line--2::before { animation-delay: 0.5s; }
  .pawprint { animation: fondu 0.6s ease-out both; animation-delay: calc(1.1s + var(--i, 0) * 0.22s); }
  .nav.is-open { animation: fondu 0.25s ease-out both; }

  /* Les cœurs et les petits traits respirent doucement */
  .doodle--heart-l, .polaroid__heart, .signoff__heart, .heart-mark, .band__heart, .footer__heart, .dashes { animation: souffle 3.5s ease-in-out infinite; }
  .polaroid__heart, .dashes--r { animation-delay: 0.9s; }

  /* Ce qui arrive en défilant apparaît en fondu (navigateurs récents) */
  @supports (animation-timeline: view()) {
    .sc, .signoff__text, .brush-title, .story__note, .band__title, .band__actions, .action { animation: fondu linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}