:root{--navy:#071b4e;--ink:#081840;--sky:#b9edff;--paper:#f7fbff;--blue:#134db4;--line:#d8e8f4;--round:1rem}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:white;color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.5}
a{color:inherit}
img{display:block;max-width:100%}
button,input{font:inherit}
:focus-visible{outline:3px solid #ff9b40;outline-offset:4px}
.wrap{width:min(100% - 2rem,76rem);margin-inline:auto}
.skip{position:absolute;top:-5rem;left:1rem;background:white;color:var(--navy);padding:.65rem;z-index:5}
.skip:focus{top:1rem}
header,footer{background:var(--navy);color:white}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem;padding-block:.8rem}
.logo{font-size:clamp(1.45rem,4vw,2.15rem);font-weight:850;text-decoration:none;letter-spacing:-.06em;white-space:nowrap}
.logo span,.title span{font-weight:300}
nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;list-style:none;padding:0;margin:0;font-weight:700;font-size:.88rem}
nav a{text-decoration:none}
nav a:hover,nav a[aria-current=page]{text-decoration:underline;text-underline-offset:.3em}
.button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:.65rem 1rem;border:0;border-radius:.7rem;background:var(--sky);color:var(--navy);font-weight:800;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.button:hover{background:#e1f8ff;transform:translateY(-2px)}
.tricolor{display:block;width:8rem;height:5px;margin-bottom:1rem;background:linear-gradient(90deg,#163aab 33.33%,#fff 33.33%,#fff 66.66%,#ed263e 66.66%)}
h1,h2,h3,p{margin:0 0 .65rem}
h1,h2,h3{line-height:1.08;letter-spacing:-.04em}
h1{font-size:clamp(2.1rem,7vw,4.4rem);font-weight:900}
h2{font-size:clamp(1.75rem,4vw,3rem);font-weight:850}
h3{font-size:1.38rem}
.title strong{display:block;color:#a8e8ff}
.tagline{font-size:clamp(1.1rem,3vw,1.6rem);font-weight:750;line-height:1.22;margin:.8rem 0 1rem}
.debt{background:var(--navy);color:white;padding-block:1rem}
.debt-inner{display:grid;gap:.6rem;align-items:center}
.debt h2{font-size:1rem;letter-spacing:0;text-transform:uppercase;color:var(--sky);margin:0}
.debt .counter{display:block;font-variant-numeric:tabular-nums;font-size:clamp(1rem,6vw,2.3rem);line-height:1.5;font-weight:850;color:var(--navy);background:white;border-radius:.5rem;width:fit-content;padding:0 .45em}
.debt small{display:block;margin-top:.25rem;color:#d6e7ff}
.debt p{margin:0;font-weight:800}
.section{padding-block:clamp(1.7rem,5vw,3.25rem)}
.eyebrow{font-size:.82rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.grid{display:grid;gap:.8rem;margin-top:1.1rem}
.tile{display:flex;align-items:center;gap:.75rem;padding:1rem;min-height:4.35rem;background:linear-gradient(115deg,#e1f6ff,#a8e8fa);border:1px solid #c5ebfb;border-radius:var(--round);text-decoration:none;font-weight:850;font-size:clamp(1rem,2vw,1.26rem);transition:transform .2s,box-shadow .2s,background .2s}
.tile svg{width:1.75rem;height:1.75rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile .arrow{margin-left:auto;transition:transform .2s}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);box-shadow:0 .65rem 1.25rem #153b7224;background:#c3f1ff}
.tile:hover .arrow{transform:translateX(.2rem)}
.kibble{height:clamp(1.3rem,3vw,2.2rem);background:url(croquettes.webp) center/cover}
.newsletter{background:linear-gradient(120deg,#dcf7ff,#afeaff)}
.newsletter-inner{display:grid;gap:1.1rem}
.newsletter h2{margin-bottom:.4rem}
form{display:grid;gap:.55rem}
.email{width:100%;padding:.65rem .8rem;border:1px solid var(--navy);border-radius:.55rem;background:white;color:var(--ink)}
.check{display:flex;align-items:flex-start;gap:.55rem;font-size:.9rem}
.check input{width:1.15rem;height:1.15rem;flex:none;accent-color:var(--navy);margin:.16rem 0 0}
.newsletter button,.dark{background:var(--navy);color:white}
.newsletter button:hover,.dark:hover{background:#15417c;color:white}
button:disabled{opacity:.6;cursor:wait}
#form-status:empty{display:none}
#form-status{margin:0;font-weight:700}
footer .bar{padding-block:1rem}
footer .legal{font-size:.75rem;color:#e1ebff}
.crumb{font-size:.9rem;margin-bottom:.8rem}
.prose{max-width:49rem}
.prose p{margin-bottom:1rem}
.proposals article{overflow:hidden;border:1px solid var(--line);border-radius:var(--round);background:#def5ff}
.proposals img{width:100%;aspect-ratio:2.4;object-fit:cover}
.proposals article div{padding:1rem}
.page-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:1.25rem;font-weight:750}
@media(min-width:38rem){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.debt-inner{grid-template-columns:auto 1fr}.debt p{grid-column:2}}
@media(min-width:58rem){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.newsletter-inner{grid-template-columns:1fr 1fr;align-items:center}.debt-inner{grid-template-columns:10rem auto 1fr;gap:1.3rem}.debt p{grid-column:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* Le cadrage de la photo change, le texte reste en HTML. */
.photo-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: clamp(33rem, 148vw, 57rem);
  background: #103878;
  color: white;
}
.photo-hero-media,
.photo-hero::after {
  position: absolute;
  inset: 0;
}
.photo-hero-media { z-index: -2; }
.photo-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}
.photo-hero::after {
  content: "";
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #061b48b8, #061b4840 38%, transparent 57%);
}
.photo-hero-inner { padding-block: clamp(1.45rem, 6vw, 3rem); }
.photo-hero-copy { max-width: 28rem; }
.photo-hero h1 {
  font-size: clamp(2rem, 8.5vw, 3.7rem);
  line-height: .94;
  font-weight: 900;
}
.photo-hero .title strong { text-transform: uppercase; }
.photo-hero .tagline { margin-block: .6rem .85rem; }
@media (min-width: 48rem) {
  .photo-hero {
    align-items: center;
    min-height: max(25rem, 33.333vw);
  }
  .photo-hero-media img { object-position: 65% 50%; }
  .photo-hero::after {
    background: linear-gradient(90deg, #061b48b8, #061b4863 35%, transparent 65%);
  }
  .photo-hero-copy { max-width: 45%; }
  .photo-hero h1 { font-size: clamp(2.8rem, 5vw, 5rem); }
}

.shelter-hero { background-color: var(--navy); }
.shelter-needs article {
  padding: 1.2rem 1.25rem;
  background: #f1f6fb;
  border: 1px solid var(--line);
  border-radius: var(--round);
}
.shelter-needs p { margin-bottom: 0; }
.shelter-support { background: #eef4fa; }


.debt .debt-slogan {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: white;
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  line-height: 1.12;
}
.debt-paw {
  width: 1.65em;
  height: 1.65em;
  flex: none;
  fill: currentColor;
  transform: rotate(19deg);
}
@media (max-width: 37.99rem) {
  .home header .bar, .home footer .bar {
    flex-direction: column;
    text-align: center;
  }
  .home header nav ul { justify-content: center; }
  .home .debt-inner { justify-items: center; text-align: center; }
  .home .debt .counter { margin-inline: auto; }
  .home .debt-slogan { margin-top: .35rem; }
  .home .newsletter-inner > div { text-align: center; }
}
@media (min-width: 58rem) {
  .debt .debt-slogan { font-size: clamp(1.125rem, 1.8vw, 1.65rem); }
}

.programme-intro { margin-top: clamp(2rem, 4vw, 3rem); }