/* ===== Dogcytocin et Racines — styles ===== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=IM+Fell+English:ital@0;1&family=Inter:wght@300;400;500;600;700&family=Permanent+Marker&display=swap');

:root {
  --brown-deepest: #1D2013;
  --brown-dark: #3A3D22;
  --brown-dark-rgb: 58, 61, 34;
  --olive: #6E7548;
  --olive-rgb: 110, 117, 72;
  --khaki: #A6A177;
  --khaki-rgb: 166, 161, 119;
  --brown-light: #AD8358;
  --brown-light-rgb: 173, 131, 88;
  --brown-light-dark: #8A6640;
  --pink: #D98CA0;
  --pink-rgb: 217, 140, 160;
  --cream: #F2E9D6;
  --cream-rgb: 242, 233, 214;
  --text: #3A2F22;
  --text-muted: #6B5F4D;
  --danger: #b23b3b;
  --danger-dark: #9c3232;

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-book: 'IM Fell English', Georgia, 'Times New Roman', serif;
  --font-marker: 'Permanent Marker', cursive;

  --h1-size: clamp(2.5rem, 5vw, 3.4rem);
  --h2-size: clamp(1.9rem, 3.4vw, 2.4rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Garantit que l'attribut hidden masque toujours l'element, meme si une regle plus bas
   dans ce fichier lui donne un display explicite (flex/grid/...) qui l'emporterait sinon
   sur la regle par defaut du navigateur -- deux bugs distincts causes par ce piege ont
   deja ete corriges au cas par cas (.admin-reply-form, .admin-auth-connected) avant qu'on
   ne se rende compte qu'une regle globale evitait d'avoir a y repenser a chaque nouveau composant. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--cream);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Grain de papier — intensité adaptée à la fonction de chaque page */

body.grain-moderate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.11'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

body.grain-light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Semis d'empreintes et de feuilles en fond, sur toutes les pages publiques : les deux
   moities du nom de l'association (le chien, les racines/la nature) representees ensemble,
   en tuile assez grande (320px) et disposees de facon irreguliere a l'interieur pour eviter
   un effet "papier peint" trop regulier. Superpose au grain de papier existant plutot que de
   le remplacer -- les deux se cumulent en CSS via une liste de background-image. */
body.grain-moderate.paw-bg {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='12' cy='15.5' rx='5' ry='4.2'/%3E%3Cellipse cx='5.2' cy='8.5' rx='2.1' ry='2.6' transform='rotate(-20 5.2 8.5)'/%3E%3Cellipse cx='9.6' cy='5.2' rx='2.2' ry='2.8' transform='rotate(-8 9.6 5.2)'/%3E%3Cellipse cx='14.4' cy='5.2' rx='2.2' ry='2.8' transform='rotate(8 14.4 5.2)'/%3E%3Cellipse cx='18.8' cy='8.5' rx='2.1' ry='2.6' transform='rotate(20 18.8 8.5)'/%3E%3C/g%3E%3Cpath id='l' d='M12,2 Q21,12 12,23 Q3,12 12,2 Z'/%3E%3C/defs%3E%3Cg fill='%23A6A177' opacity='0.18'%3E%3Cuse href='%23p' transform='translate(25,40) rotate(-24) scale(1.1)'/%3E%3Cuse href='%23l' transform='translate(170,25) rotate(15) scale(0.9)'/%3E%3Cuse href='%23p' transform='translate(245,100) rotate(20) scale(0.9)'/%3E%3Cuse href='%23l' transform='translate(55,145) rotate(-20) scale(0.8)'/%3E%3Cuse href='%23p' transform='translate(175,215) rotate(-15) scale(1.0)'/%3E%3Cuse href='%23l' transform='translate(275,255) rotate(30) scale(0.7)'/%3E%3Cuse href='%23p' transform='translate(25,265) rotate(10) scale(0.85)'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.11'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
}

/* Meme semis, decline pour les pages en grain-light (moins de bruit de fond, la plupart des
   pages interieures) et pour celles sans classe de grain du tout (le semis devient alors la
   seule texture de fond, sans grain de papier superpose). */
body.grain-light.paw-bg {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='12' cy='15.5' rx='5' ry='4.2'/%3E%3Cellipse cx='5.2' cy='8.5' rx='2.1' ry='2.6' transform='rotate(-20 5.2 8.5)'/%3E%3Cellipse cx='9.6' cy='5.2' rx='2.2' ry='2.8' transform='rotate(-8 9.6 5.2)'/%3E%3Cellipse cx='14.4' cy='5.2' rx='2.2' ry='2.8' transform='rotate(8 14.4 5.2)'/%3E%3Cellipse cx='18.8' cy='8.5' rx='2.1' ry='2.6' transform='rotate(20 18.8 8.5)'/%3E%3C/g%3E%3Cpath id='l' d='M12,2 Q21,12 12,23 Q3,12 12,2 Z'/%3E%3C/defs%3E%3Cg fill='%23A6A177' opacity='0.18'%3E%3Cuse href='%23p' transform='translate(25,40) rotate(-24) scale(1.1)'/%3E%3Cuse href='%23l' transform='translate(170,25) rotate(15) scale(0.9)'/%3E%3Cuse href='%23p' transform='translate(245,100) rotate(20) scale(0.9)'/%3E%3Cuse href='%23l' transform='translate(55,145) rotate(-20) scale(0.8)'/%3E%3Cuse href='%23p' transform='translate(175,215) rotate(-15) scale(1.0)'/%3E%3Cuse href='%23l' transform='translate(275,255) rotate(30) scale(0.7)'/%3E%3Cuse href='%23p' transform='translate(25,265) rotate(10) scale(0.85)'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
}

body.paw-bg:not(.grain-moderate):not(.grain-light) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='12' cy='15.5' rx='5' ry='4.2'/%3E%3Cellipse cx='5.2' cy='8.5' rx='2.1' ry='2.6' transform='rotate(-20 5.2 8.5)'/%3E%3Cellipse cx='9.6' cy='5.2' rx='2.2' ry='2.8' transform='rotate(-8 9.6 5.2)'/%3E%3Cellipse cx='14.4' cy='5.2' rx='2.2' ry='2.8' transform='rotate(8 14.4 5.2)'/%3E%3Cellipse cx='18.8' cy='8.5' rx='2.1' ry='2.6' transform='rotate(20 18.8 8.5)'/%3E%3C/g%3E%3Cpath id='l' d='M12,2 Q21,12 12,23 Q3,12 12,2 Z'/%3E%3C/defs%3E%3Cg fill='%23A6A177' opacity='0.18'%3E%3Cuse href='%23p' transform='translate(25,40) rotate(-24) scale(1.1)'/%3E%3Cuse href='%23l' transform='translate(170,25) rotate(15) scale(0.9)'/%3E%3Cuse href='%23p' transform='translate(245,100) rotate(20) scale(0.9)'/%3E%3Cuse href='%23l' transform='translate(55,145) rotate(-20) scale(0.8)'/%3E%3Cuse href='%23p' transform='translate(175,215) rotate(-15) scale(1.0)'/%3E%3Cuse href='%23l' transform='translate(275,255) rotate(30) scale(0.7)'/%3E%3Cuse href='%23p' transform='translate(25,265) rotate(10) scale(0.85)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button.link-more {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ===== Focus visibility (keyboard navigation) ===== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brown-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-header :focus-visible,
.cta-box :focus-visible,
.dogs-hero :focus-visible {
  outline-color: var(--brown-light);
}

h1, h2, h3 {
  font-family: var(--font-serif);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.3px;
}

h1 { font-size: var(--h1-size); }

h2 {
  font-size: var(--h2-size);
  margin-bottom: 1.25rem;
  color: var(--brown-dark);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}

h3 { font-size: 1.4rem; margin-bottom: 0.5rem; color: var(--brown-dark); font-weight: 600; }

.divider {
  width: 90px;
  height: 1px;
  background: var(--khaki);
  margin: 18px auto;
  position: relative;
}

.divider::after {
  content: '♥';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  color: var(--pink);
  background: inherit;
  padding: 0 10px;
}

.divider.on-cream::after { background: var(--cream); }
.divider.on-green::after { background: var(--brown-dark); }
.divider.on-white::after { background: #fff; }

/* ===== Wave dividers between color sections =====
   Overlay technique: negative margin pulls the div up over the
   bottom of the preceding section, and the SVG is transparent above
   the curve — so the "from" colour is always the real rendered
   pixels behind it (correct even over gradients), never a guessed
   flat colour. Only the curve fill (the "to" colour) is chosen. */

/* Transitions plates a la SPA : plus de vagues entre sections, on garde juste l'espacement. */
.wave-divider { display: none; }

.wave-to-cream {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C90,10 160,50 260,34 C360,18 420,52 540,32 C660,12 730,46 850,28 C970,10 1040,44 1160,26 C1280,8 1350,38 1440,24 L1440,60 L0,60 Z' fill='%23F8F5EE'/%3E%3C/svg%3E");
}

.wave-to-green {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C90,10 160,50 260,34 C360,18 420,52 540,32 C660,12 730,46 850,28 C970,10 1040,44 1160,26 C1280,8 1350,38 1440,24 L1440,60 L0,60 Z' fill='%231B3A2B'/%3E%3C/svg%3E");
}

.wave-to-keyfacts {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C90,10 160,50 260,34 C360,18 420,52 540,32 C660,12 730,46 850,28 C970,10 1040,44 1160,26 C1280,8 1350,38 1440,24 L1440,60 L0,60 Z' fill='%2312291D'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
  .wave-divider { height: 34px; margin-top: -34px; }
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Header ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  color: var(--text);
  border-bottom: 1px solid rgba(var(--brown-dark-rgb), 0.12);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  transition: box-shadow 0.3s ease;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  transition: padding 0.3s ease;
}

/* Ajoute par script.js des que la page a defile au-dela du hero -- un header
   legerement plus compact et une ombre plus marquee, comme sur la plupart des
   sites premium, plutot qu'un bandeau fixe qui garde toujours la meme taille. */
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09); }

.site-header.is-scrolled .container {
  padding-top: 10px;
  padding-bottom: 10px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Sans ça, quand le header manque de place (nav + bouton "Faire un don"), c'est le texte du
     logo qui absorbe la compression en repassant a la ligne plutot que le reste -- header
     soudain deux fois plus haut, qui peut chevaucher le titre de la section juste en dessous. */
  flex-shrink: 0;
}

.logo-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 0 0 2px rgba(var(--brown-light-rgb), 0.5);
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-serif);
  line-height: 1.15;
}

.logo-text .name {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brown-dark);
  white-space: nowrap;
}

.logo-text .tagline {
  display: block;
  font-family: var(--font-marker);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  color: var(--olive);
  margin-top: 3px;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin-right: 22px;
}

.nav-links a {
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--olive);
  border-bottom-color: var(--olive);
}

.site-header .container { flex-wrap: nowrap; }

.nav-cta {
  flex-shrink: 0;
  display: inline-block;
  background: var(--olive);
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2px;
  padding: 10px 22px;
  border-radius: 50px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-cta:hover { transform: scale(1.03); box-shadow: 0 6px 16px rgba(var(--olive-rgb), 0.35); }
.nav-cta:active { transform: scale(0.97); }

/* Etendu a 1360px (au lieu de 1200px) : a 1280px, une largeur d'ecran tres courante, le
   header n'avait pas assez de place pour le logo + les 6 liens + le bouton "Faire un don"
   sans ce resserrement -- desormais couvert avant le seuil du menu mobile (1150px). */
@media (max-width: 1360px) and (min-width: 1151px) {
  .nav-links { gap: 14px; margin-right: 16px; }
  .nav-links a { font-size: 0.72rem; }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--brown-dark);
  font-size: 1.6rem;
  line-height: 1;
  padding: 11px 11px;
  margin: -11px -11px;
  cursor: pointer;
  order: 2;
}

@media (max-width: 1150px) {
  .nav-toggle { display: block; }
  .nav-cta { display: none; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-right: 0;
    background: var(--cream);
    border-bottom: 1px solid rgba(var(--brown-dark-rgb), 0.12);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-links.open { max-height: 420px; overflow-y: auto; }

  .nav-links li { border-top: 1px solid rgba(var(--brown-dark-rgb), 0.08); }

  .nav-links a {
    display: block;
    padding: 16px 24px;
  }
}

@media (max-width: 560px) {
  .logo { gap: 8px; }
  .logo-mark { width: 38px; height: 38px; }
  .logo-text .name { font-size: 0.95rem; letter-spacing: 1px; }
  .logo-text .tagline { display: none; }
}

@media (max-width: 340px) {
  .logo { gap: 6px; }
  .logo-mark { width: 30px; height: 30px; }
  .logo-text .name { font-size: 0.78rem; letter-spacing: 0.4px; }
  .site-header .container { padding-top: 12px; padding-bottom: 12px; }
}

/* ===== Buttons ===== */

.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 480px) {
  .btn { padding: 12px 26px; font-size: 0.88rem; }
}

.btn:hover { transform: scale(1.03); }

/* Retour tactile au clic : sans ça, seul le hover donne un signal, ce qui ne dit rien au
   doigt sur mobile (pas de hover) ni au clic sur desktop. */
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--olive);
  color: var(--cream);
}

.btn-primary:hover { box-shadow: 0 6px 18px rgba(var(--olive-rgb), 0.4); }

.btn-secondary {
  background: var(--brown-light);
  color: var(--brown-deepest);
}

.btn-secondary:hover { box-shadow: 0 6px 18px rgba(var(--brown-light-rgb), 0.4); }

.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}

.btn-outline:hover { background: rgba(var(--cream-rgb), 0.1); }

.btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== Hero ===== */

.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(36, 26, 16, 0.75) 0%, rgba(36, 26, 16, 0.55) 45%, rgba(36, 26, 16, 0.88) 100%),
    url("images/chien-caresse.jpg");
  background-repeat: no-repeat;
  /* Le chien et la main sont dans la moitie droite de la photo (~80% en largeur) : sur
     desktop, cover ne rogne que verticalement (l'image couvre deja toute la largeur), donc
     ce reglage horizontal n'a aucun effet visible -- mais sur mobile, ou le hero est plus
     etroit que haut, cover rogne fortement en largeur, et un centrage naif coupait la main
     qui caresse. 82% garde le sujet dans le cadre sur les deux formats. */
  background-position: 82% 66%;
  background-size: cover;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 32px 24px;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-marker);
  font-size: 1.15rem;
  letter-spacing: 0.3px;
  color: var(--brown-deepest);
  background: var(--pink);
  padding: 4px 16px 6px;
  transform: rotate(-1.5deg);
  margin-bottom: 22px;
  animation: heroEyebrowRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero h1 {
  font-style: italic;
  font-weight: 500;
  margin-bottom: 20px;
  text-wrap: balance;
  animation: heroRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.hero p.subtitle {
  font-size: 1.1rem;
  max-width: 520px;
  margin: 0 auto 32px;
  color: rgba(255, 255, 255, 0.92);
  animation: heroRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}

/* Petite entree en cascade au chargement (eyebrow -> titre -> texte -> boutons), plutot
   que tout le bloc hero qui apparait d'un coup -- c'est la toute premiere chose vue sur le
   site, ca vaut la peine d'un soin particulier. Chaque etape a son propre delai via
   animation-delay ; "both" garde l'etat de depart avant le lancement (pas de flash) et
   l'etat final une fois termine. */
.hero .btn-row { animation: heroRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroEyebrowRise {
  from { opacity: 0; transform: rotate(-1.5deg) translateY(16px); }
  to { opacity: 1; transform: rotate(-1.5deg) translateY(0); }
}

/* ===== Section fade-in ===== */

.fade-in {
  /* Visible par defaut (pas opacity: 0) : l'ancienne version cachait le contenu tant que le
     JS (IntersectionObserver) n'avait pas ajoute .visible, et malgre plusieurs correctifs
     successifs (marge de declenchement, filet de securite par timer...), des photos
     restaient invisibles chez certain⋅es visiteur⋅ses mobiles -- cause exacte non confirmee
     (JS bloque, edge case de l'observer...), mais le risque n'en valait plus la peine pour
     une simple animation d'apparition. Le contenu est desormais toujours visible immediatement,
     avec juste une legere transition si jamais .visible est ajoutee. */
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cascade en escalier pour les elements d'une meme rangee (cartes, photos chantier) --
   plus premium qu'un fade-in simultane, purement visuel : le seuil de declenchement
   individuel de l'IntersectionObserver (script.js) n'est pas touche. */
.cards .card:nth-child(2),
.actions-grid .action-block:nth-child(2),
.support-grid .support-item:nth-child(2),
.two-ways .fundraiser-box:nth-child(2),
.bts-strip figure:nth-child(2) { transition-delay: 0.09s; }

.cards .card:nth-child(3),
.support-grid .support-item:nth-child(3),
.two-ways .fundraiser-box:nth-child(3),
.bts-strip figure:nth-child(3) { transition-delay: 0.18s; }

.support-grid .support-item:nth-child(4),
.bts-strip figure:nth-child(4) { transition-delay: 0.27s; }

section {
  padding: 80px 0;
}


.section-intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

/* ===== Story teaser (homepage) ===== */

.story-teaser {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding: 88px 0;
}

.story-teaser-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.story-teaser-inner .eyebrow {
  font-family: var(--font-marker);
  color: var(--olive);
  font-size: 1.25rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 24px;
}

.story-teaser-inner p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 16px;
}

.story-teaser-inner p.highlight {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--brown-dark);
  font-weight: 600;
  line-height: 1.35;
  margin: 28px 0 36px;
  text-wrap: balance;
}

.story-teaser-inner .link-more {
  font-weight: 600;
  color: var(--olive);
  transition: color 0.2s;
}

.story-teaser-inner .link-more:hover { color: var(--brown-light); }

/* Mosaique plutot qu'une simple rangee de 4 : une photo "vedette" (2x2) entouree de
   vignettes, pour representer la variete de ce qui se passe sur le terrain (chantiers +
   vie du refuge) au lieu de 4 cases figees de meme poids visuel. grid-auto-flow: dense
   comble les cases laissees vides par la vedette avec les vignettes suivantes. */
.bts-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 150px laissait a peine ~75px de photo utile une fois la legende et le cadre polaroid
     retires -- les vignettes 1x1 etaient beaucoup trop rognees. 240px donne une vraie photo
     visible sur les petites cartes, meme avec une legende sur 2 lignes. */
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  gap: 30px 24px;
  margin: 56px 0 40px;
  padding: 0 28px;
}

.bts-strip .bts-featured {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 800px) {
  .bts-strip .bts-featured { grid-column: span 2; grid-row: span 2; }
}

.bts-strip figure {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  padding: 12px 12px 38px;
  box-shadow: 0 10px 22px rgba(47, 42, 34, 0.2), 0 2px 6px rgba(47, 42, 34, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bts-strip figure:nth-child(1) { transform: rotate(-2deg); clip-path: polygon(0.8% 0%, 100% 1.2%, 99.3% 100%, 0% 98.8%); }
.bts-strip figure:nth-child(2) { transform: rotate(1.6deg); clip-path: polygon(0% 1.5%, 99.2% 0%, 100% 98.5%, 0.6% 100%); }
.bts-strip figure:nth-child(3) { transform: rotate(-1.2deg); clip-path: polygon(1% 0.5%, 100% 0%, 99% 99%, 0% 100%); }
.bts-strip figure:nth-child(4) { transform: rotate(2.4deg); clip-path: polygon(0.5% 1%, 99.5% 0.3%, 100% 99%, 0.3% 99.6%); }
.bts-strip figure:nth-child(5) { transform: rotate(-1.6deg); clip-path: polygon(0.6% 0.4%, 99.4% 0%, 100% 99.5%, 0.4% 100%); }

.bts-strip figure:hover {
  transform: rotate(0deg) translateY(-5px) scale(1.035);
  box-shadow: 0 18px 32px rgba(47, 42, 34, 0.26), 0 4px 10px rgba(47, 42, 34, 0.14);
  z-index: 3;
}

.bts-strip figure::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 36px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, transparent 55%, rgba(47, 42, 34, 0.05) 55%, rgba(47, 42, 34, 0.12) 100%);
  pointer-events: none;
}

.bts-strip figure.tape::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  width: 68px;
  height: 25px;
  transform: translateX(-50%) rotate(-6deg);
  background: repeating-linear-gradient(45deg, rgba(var(--brown-light-rgb), 0.5), rgba(var(--brown-light-rgb), 0.5) 3px, rgba(233, 216, 165, 0.4) 3px, rgba(233, 216, 165, 0.4) 6px);
  box-shadow: 0 2px 4px rgba(47, 42, 34, 0.15);
  pointer-events: none;
  z-index: 2;
}

.bts-photo {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.bts-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.22) saturate(0.78) contrast(1.04) brightness(1.03);
  /* Zoom leger au survol de la carte entiere (voir figure:hover), sans deborder du cadre
     polaroid grace a overflow:hidden sur .bts-photo. */
  transition: transform 0.5s ease;
}

.bts-strip figure:hover img { transform: scale(1.08); }

.bts-strip figcaption {
  margin-top: 12px;
  font-family: var(--font-book);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--text);
  text-align: center;
}

@media (max-width: 800px) {
  .bts-strip { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; padding: 0 20px; }
}

@media (max-width: 480px) {
  .bts-strip figure:nth-child(1) { transform: rotate(-1.1deg); }
  .bts-strip figure:nth-child(2) { transform: rotate(0.9deg); }
  .bts-strip figure:nth-child(3) { transform: rotate(-0.7deg); }
  .bts-strip figure:nth-child(4) { transform: rotate(1.3deg); }
  .bts-strip figure:nth-child(5) { transform: rotate(-0.9deg); }
}

/* ===== Cards ===== */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 800px) {
  .cards { grid-template-columns: 1fr; }
}

/* ===== Feature split (accueil : message phare "Sauver et soigner") ===== */

.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  margin-bottom: 56px;
}

@media (max-width: 800px) {
  .feature-split { grid-template-columns: 1fr; gap: 28px; }
  /* Quel que soit l'ordre texte/photo choisi sur desktop (alterne d'un bloc a l'autre pour
     le rythme visuel), la photo passe toujours en premier une fois empilee -- elle donne le
     ton immediatement, plutot que de faire defiler tout le texte avant de l'atteindre. */
  .feature-split-media { order: -1; }
}

/* Photo en flux normal avec un aspect-ratio fixe (pas de position:absolute) : approche la
   plus simple et la plus largement compatible, y compris sur les navigateurs mobiles plus
   anciens. Une version precedente etirait le cadre a la hauteur du texte via
   position:absolute -- plus soignee visuellement, mais des photos restaient invisibles sur
   certains mobiles malgre plusieurs correctifs cibles, donc priorite a la fiabilite ici. */
.feature-split-media {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(47, 42, 34, 0.15);
  aspect-ratio: 5 / 4;
}

.feature-split-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-split-text {
  position: relative;
  text-align: left;
}

.feature-split-text .card-number { top: -34px; right: auto; left: -4px; }

.feature-split-text h2 {
  position: relative;
  text-align: left;
  margin-bottom: 18px;
}

.feature-split-text p {
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 38ch;
}

.feature-split-text ul {
  color: var(--text-muted);
  margin: -8px 0 28px;
  padding-left: 20px;
  max-width: 38ch;
}

.feature-split-text li { margin-bottom: 8px; line-height: 1.6; }

/* Paire de cartes secondaires sous le message phare -- volontairement distincte de .cards
   (grille a 3) pour ne pas heriter de son empilement mobile a 800px, le seuil ici est plus bas. */
.cards-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .cards-pair { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  border-top: 3px solid transparent;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
  padding: 36px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-number {
  position: absolute;
  top: -14px;
  right: 18px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: rgba(var(--brown-dark-rgb), 0.06);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(47, 42, 34, 0.12);
  border-top-color: var(--brown-light);
}

.card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(var(--olive-rgb), 0.12);
  font-size: 1.6rem;
  color: var(--olive);
}

.icon svg {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 1.85;
  fill: none;
}

.footer-contact svg {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  vertical-align: -0.15em;
  margin-right: 2px;
}

.card p { margin-bottom: 16px; color: var(--text-muted); }

.card .link-more {
  font-weight: 600;
  color: var(--olive);
  transition: color 0.2s;
}

.card .link-more:hover { color: var(--brown-light); }

/* ===== Key facts / repères (homepage) ===== */

.key-facts {
  background: var(--cream);
  padding: 72px 0;
}

.key-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.key-fact {
  position: relative;
  padding: 0 24px;
}

.key-fact:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: -1px;
  width: 1px;
  background: rgba(var(--brown-dark-rgb), 0.12);
}

.key-fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
}

.key-fact-icon svg { width: 100%; height: 100%; }

.key-fact-number {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--olive);
  line-height: 1.15;
  margin-bottom: 10px;
}

.key-fact-number.is-route {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  letter-spacing: 0.2px;
}

.key-fact-label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 220px;
  margin: 0 auto;
}

@media (max-width: 800px) {
  .key-facts { padding: 48px 0; }
  .key-facts-grid { grid-template-columns: 1fr; gap: 36px; }
  .key-fact:not(:last-child)::after { display: none; }
  .key-fact:not(:last-child) { padding-bottom: 32px; border-bottom: 1px solid rgba(var(--brown-dark-rgb), 0.1); }
}

/* ===== Page header (inner pages) ===== */

.page-header {
  background: var(--cream);
  color: var(--text);
  padding: 44px 0 40px;
  text-align: center;
}

.page-header .kicker {
  font-family: var(--font-sans);
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  font-size: 0.8rem;
  display: block;
  margin-bottom: 14px;
}

.page-header h1 {
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  color: var(--brown-dark);
  text-transform: none;
  letter-spacing: 0.3px;
}

.page-header p {
  max-width: 560px;
  margin: 16px auto 0;
  color: var(--text-muted);
}

/* ===== Qui sommes-nous (notre-histoire.html) ===== */

.who-we-are {
  max-width: 720px;
  margin: 0 auto 40px;
}

/* Volontairement different du h2 uppercase/serif utilise partout ailleurs sur le site :
   ce bloc reprend le style simple, gras, sans-serif demande (references montrees en
   conversation), pas le traitement "titre de section" habituel. */
.who-we-are h2 {
  text-align: left;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--olive);
}

.who-we-are p {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 20px;
}

.who-we-are p:last-child { margin-bottom: 0; }

/* Vert plus franc que --olive (trop proche du brun sur fond creme) pour que
   les passages en gras du recit ressortent nettement a la lecture. */
.who-we-are strong { color: #2F6B3C; }

.who-we-are-photo {
  max-width: 720px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(47, 42, 34, 0.12);
}

.who-we-are-photo img {
  width: 100%;
  display: block;
  max-height: 420px;
  object-fit: cover;
  /* Photo portrait (676x1200) recadree dans un cadre bien plus large que haut : un
     centrage par defaut coupait la tete du chien en haut. 30% garde la tete et le
     harnais dans le cadre -- fonctionne aussi bien sur mobile (cadre plus haut,
     donc moins de recadrage) que sur desktop (cadre large, recadrage vertical fort). */
  object-position: center 30%;
}

/* ===== Fil d'ariane ===== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 18px 0 0;
}

.breadcrumb a { color: var(--text-muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--olive); }
.breadcrumb .sep { color: rgba(var(--brown-dark-rgb), 0.3); }
.breadcrumb .current { color: var(--brown-dark); font-weight: 600; }

/* ===== Story page (book layout) ===== */

.story-page {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  background: #fff;
  border-top: 4px solid var(--brown-light);
  border-radius: 4px;
  padding: 60px 68px;
  box-shadow: 0 20px 50px rgba(47, 42, 34, 0.1), 0 2px 10px rgba(47, 42, 34, 0.06);
}

@media (max-width: 640px) {
  .story-page { padding: 40px 26px; }
}

.story-page-eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-marker);
  color: var(--olive);
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.story {
  max-width: 650px;
  margin: 0 auto;
  font-family: var(--font-book);
}

.story-section { margin-bottom: 8px; }

.story-section:not(:last-child)::after {
  content: '❧';
  display: block;
  text-align: center;
  color: var(--brown-light);
  font-size: 1.05rem;
  margin: 22px 0 4px;
}

.story-block {
  margin-bottom: 18px;
}

.story-block:last-child {
  margin-bottom: 0;
}

.story-block p {
  margin-bottom: 0.85rem;
  font-size: 1.08rem;
  line-height: 1.68;
  text-align: justify;
  hyphens: auto;
  color: var(--text);
}

.story-block p:last-child { margin-bottom: 0; }

.story-section:first-child .story-block:first-of-type p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 4rem;
  line-height: 0.75;
  padding: 6px 10px 0 0;
  color: var(--brown-dark);
}

.story-block.emphasis p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.55rem;
  color: var(--brown-dark);
  text-align: center;
  line-height: 1.45;
}

.story-signature {
  text-align: center;
  margin-top: 36px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--olive);
}

/* ===== Actions page ===== */

.actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 800px) {
  .actions-grid { grid-template-columns: 1fr; }
}

.action-block {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.action-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(47, 42, 34, 0.12);
}

.action-block .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: rgba(var(--olive-rgb), 0.12);
  font-size: 1.9rem;
  color: var(--olive);
}

.action-block ul {
  margin: 20px 0 0;
  padding-left: 20px;
}

.action-block li { margin-bottom: 8px; }

/* ===== Support page ===== */

.fundraiser-box {
  background: linear-gradient(160deg, #fff9ea, #fdf3d9);
  border: 1px solid rgba(var(--brown-light-rgb), 0.5);
  border-radius: 24px;
  padding: 48px 32px;
  margin-bottom: 48px;
  text-align: center;
}

.fundraiser-box .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 50%;
  font-size: 1.8rem;
  background: rgba(var(--brown-light-rgb), 0.28);
  color: var(--brown-light);
}

.fundraiser-box .icon svg { fill: currentColor; stroke: none; }

.fundraiser-box p {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-muted);
}

.fundraiser-box .btn {
  margin-top: 28px;
}

.two-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 64px;
}

.two-ways .fundraiser-box {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Largeur commune fixe (pas stretch pleine carte, qui rendait les boutons disproportionnes) :
   les 3 boutons font la meme taille sans etre demesures. Le texte du 3e a aussi ete raccourci
   ("Devenir famille d'accueil" -> "Famille d'accueil") pour tenir sur une seule ligne comme
   les deux autres a cette largeur. */
.two-ways .fundraiser-box .btn {
  margin-top: 28px;
  align-self: center;
  width: 100%;
  max-width: 220px;
  text-align: center;
}

@media (max-width: 800px) {
  .two-ways { grid-template-columns: 1fr; gap: 24px; }
}

.two-ways.three-ways { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .two-ways.three-ways { grid-template-columns: 1fr; }
}

.volunteer-feature {
  background: linear-gradient(160deg, #fbf1e4, #f5e6d0);
  border-color: rgba(var(--brown-light-rgb), 0.35);
}

.volunteer-feature .icon {
  background: rgba(var(--brown-light-rgb), 0.16);
  color: var(--brown-light-dark);
}

.volunteer-feature .icon svg { fill: none; stroke: currentColor; }

.foster-feature {
  background: linear-gradient(160deg, #eef1e6, #e3ead9);
  border-color: rgba(var(--olive-rgb), 0.3);
}

.foster-feature .icon {
  background: rgba(var(--brown-dark-rgb), 0.1);
  color: var(--brown-dark);
}

.foster-feature .icon svg { fill: none; stroke: currentColor; }

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

@media (max-width: 800px) {
  .support-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .support-grid { grid-template-columns: 1fr; }
}

.support-grid-secondary { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .support-grid-secondary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .support-grid-secondary { grid-template-columns: 1fr; }
}

.support-item {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.support-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(47, 42, 34, 0.12);
}

.support-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(var(--olive-rgb), 0.12);
  font-size: 1.4rem;
  color: var(--olive);
}

.support-item .link-more {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  color: var(--olive);
  transition: color 0.2s;
}

.support-item .link-more:hover { color: var(--brown-light); }

.cta-box {
  background: var(--brown-dark);
  color: var(--cream);
  border-radius: 24px;
  padding: 56px 32px;
  text-align: center;
}

.cta-box h2 { color: var(--cream); }

.cta-box p {
  max-width: 520px;
  margin: 0 auto 32px;
  color: rgba(var(--cream-rgb), 0.9);
}

/* ===== Foster application form ===== */

.form-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
}

.form-card + .form-card { margin-top: 32px; }

.form-card > p { color: var(--text-muted); line-height: 1.7; }

.intro-card {
  background: linear-gradient(160deg, #fff9ea, #fdf3d9);
  border: 1px solid rgba(var(--brown-light-rgb), 0.5);
  text-align: center;
}

.intro-card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(var(--brown-light-rgb), 0.28);
  font-size: 1.8rem;
  color: var(--brown-light);
}

.intro-card > p {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.form-section-label {
  display: block;
  font-family: var(--font-marker);
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1.05rem;
  margin: 36px 0 18px;
}

.form-field + .form-section-label,
form > .form-section-label:first-of-type {
  margin-top: 0;
}

.form-reassurance {
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--olive);
  margin-top: 16px;
}

.form-field { margin-bottom: 24px; }

.form-field:last-child { margin-bottom: 0; }

.form-field label,
.form-field legend {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brown-dark);
  margin-bottom: 8px;
}

.form-field fieldset { border: none; }

.form-char-count {
  text-align: right;
  font-size: 0.8rem;
  color: var(--olive);
  margin: 6px 0 0;
  transition: color 0.2s;
}

.form-char-count.is-near-limit,
.form-char-count.is-over-limit {
  color: var(--danger);
  font-weight: 600;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

.field {
  width: 100%;
  background: var(--cream);
  color: var(--text);
  border: 1.5px solid rgba(var(--brown-dark-rgb), 0.15);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 1rem;
  font-family: var(--font-sans);
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.field { resize: vertical; }

.field::placeholder { color: rgba(47, 42, 34, 0.4); }

.field:focus {
  outline: none;
  border-color: var(--brown-light);
  box-shadow: 0 0 0 3px rgba(var(--brown-light-rgb), 0.3);
}

select.field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A3826' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 1.1em;
  padding-right: 42px;
}

.radio-row { display: flex; gap: 12px; }

.radio-pill { flex: 1; }

.radio-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.radio-pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 24px;
  border-radius: 50px;
  border: 1.5px solid rgba(47, 42, 34, 0.2);
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.radio-pill input:checked + span {
  background: var(--brown-dark);
  border-color: var(--brown-dark);
  color: var(--cream);
}

.radio-pill input:focus-visible + span {
  outline: 2px solid var(--brown-dark);
  outline-offset: 2px;
}

#autres-animaux-details {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

#autres-animaux-details.open {
  max-height: 160px;
  opacity: 1;
  margin-top: 16px;
}

.form-msg-error {
  color: var(--danger);
  font-size: 0.9rem;
  background: rgba(178, 59, 59, 0.08);
  border: 1px solid rgba(178, 59, 59, 0.25);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.form-success {
  text-align: center;
  background: var(--cream);
  border: 1px solid rgba(var(--brown-dark-rgb), 0.15);
  border-radius: 20px;
  padding: 56px 32px;
}

.form-success h2 { margin-bottom: 12px; }

/* ===== Dogs / adoption page ===== */

.dogs-hero {
  min-height: 440px;
  background-image:
    linear-gradient(180deg, rgba(36, 26, 16, 0.7) 0%, rgba(36, 26, 16, 0.5) 45%, rgba(36, 26, 16, 0.85) 100%),
    url("images/chien-repos.jpg");
  background-position: center 58%;
}

/* Le filigrane silhouette d'origine etait pense pour un fond illustre sans photo -- inutile
   maintenant que le hero utilise une vraie photo en fond. */
.dogs-hero-mark { display: none; }

.dogs-hero .hero-content { max-width: 620px; }

.dog-filters {
  display: flex;
  gap: 14px;
  justify-content: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 8px;
  margin: 0 0 44px;
}

@media (max-width: 560px) {
  .dog-filters { justify-content: flex-start; }
}

.filter-pill {
  flex-shrink: 0;
  background: transparent;
  border: 2px solid rgba(var(--brown-dark-rgb), 0.25);
  color: var(--brown-dark);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  padding: 14px 32px;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.filter-pill:hover {
  border-color: var(--brown-dark);
  background-color: rgba(var(--brown-dark-rgb), 0.06);
  transform: scale(1.04);
}

.filter-pill:active { transform: scale(0.96); }

.filter-pill.active {
  background: var(--khaki);
  border-color: var(--khaki);
  color: var(--brown-deepest);
  box-shadow: 0 6px 18px rgba(var(--khaki-rgb), 0.4);
}

.filter-pill.active:hover { transform: scale(1.04); }

.dogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .dogs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .dogs-grid { grid-template-columns: 1fr; }
}

.dog-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .dog-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 10px 28px rgba(47, 42, 34, 0.14);
  }

  .dog-card:hover .dog-silhouette,
  .dog-card:hover .dog-photo-img { transform: scale(1.06); }
}

.dog-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.dog-photo::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--brown-light-rgb), 0.3);
  pointer-events: none;
}

.dog-photo-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(160deg, #eef1e8, #e3e8da);
}

.dog-photo-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 25% 18%, rgba(var(--brown-light-rgb), 0.16), transparent 55%),
    radial-gradient(circle at 88% 92%, rgba(var(--olive-rgb), 0.1), transparent 50%);
}

.dog-silhouette {
  position: absolute;
  top: 7%;
  right: 7%;
  bottom: 7%;
  left: 7%;
  width: 86%;
  height: 86%;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.32;
  transition: transform 0.4s ease;
}

/* Vraie photo de chien (URL renseignee dans l'admin) : contrairement a .dog-silhouette --
   pensee pour l'illustration de substitution en filigrane -- une photo reelle doit s'afficher
   pleine opacite, sans effet de fondu. */
.dog-photo-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dog-stamp {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(var(--brown-light-rgb), 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-9deg);
  color: var(--brown-light);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.52rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.15;
  /* Delibererement plus transparent qu'un simple badge : sur une vraie photo (contrairement au
     placeholder), il peut arriver que le tampon chevauche le sujet -- il doit rester lisible
     sans jamais masquer completement ce qu'il y a dessous. Coin bas-droit + petite taille pour
     minimiser le risque de chevaucher la tete du chien. */
  background: rgba(255, 253, 247, 0.32);
  backdrop-filter: blur(2px);
  box-shadow: 0 3px 10px rgba(47, 42, 34, 0.18);
}

.dog-stamp::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border: 1px solid rgba(var(--brown-light-rgb), 0.9);
  border-radius: 50%;
}

.dog-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(var(--brown-dark-rgb), 0.9);
  color: var(--cream);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 7px 14px 7px 12px;
  border-radius: 50px;
  box-shadow: 0 3px 10px rgba(47, 42, 34, 0.18);
}

.dog-badge svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Signale qu'une fiche a plus d'une photo avant meme d'ouvrir la visionneuse -- en bas a
   gauche pour ne jamais chevaucher .dog-badge/.dog-stamp, deja en bas a droite. */
.dog-photo-count {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(29, 32, 19, 0.75);
  backdrop-filter: blur(2px);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 50px;
}

.dog-photo-count svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }

.dog-photo.has-photos { cursor: pointer; }

.dog-info { padding: 20px 22px 24px; }

.dog-info h3 { margin-bottom: 4px; }

.dog-meta {
  font-size: 0.85rem;
  color: var(--olive);
  font-weight: 600;
  margin-bottom: 10px;
}

.dog-quote {
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.dog-interest-btn {
  display: block;
  width: 100%;
  text-align: center;
  border: none;
  background: var(--olive);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 16px;
  border-radius: 50px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.dog-interest-btn:hover { box-shadow: 0 6px 18px rgba(var(--olive-rgb), 0.4); }

.dogs-empty {
  text-align: center;
  padding: 40px 0;
}

.dogs-empty-icon {
  width: 34px;
  height: 34px;
  color: var(--brown-light);
  display: block;
  margin: 0 auto 14px;
}

.dogs-empty p {
  font-style: italic;
  color: var(--olive);
  font-size: 1.05rem;
}

.dogs-contact-note {
  text-align: center;
  margin-top: 48px;
  color: var(--text-muted);
}

/* ===== Footer ===== */

.site-footer {
  background: var(--brown-dark);
  color: rgba(var(--cream-rgb), 0.85);
  padding: 48px 0 32px;
  text-align: center;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr;
  gap: 32px;
  text-align: left;
  padding-bottom: 8px;
}

.footer-tagline {
  font-family: var(--font-marker);
  color: var(--brown-light);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }
}

.footer-col h4 {
  font-family: var(--font-serif);
  color: var(--brown-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.site-footer .footer-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--cream);
  margin-bottom: 10px;
}

@media (max-width: 700px) {
  .site-footer .footer-logo { justify-content: center; }
}

.site-footer .footer-logo img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 0 0 2px rgba(var(--brown-light-rgb), 0.5);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a {
  color: rgba(var(--cream-rgb), 0.85);
  transition: color 0.2s;
}

.footer-nav a:hover { color: var(--brown-light); }

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

@media (max-width: 700px) {
  .footer-contact { align-items: center; }
}

.footer-contact span,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(var(--cream-rgb), 0.85);
  transition: color 0.2s;
}

.footer-contact a:hover { color: var(--brown-light); }

.footer-credit {
  margin-top: 24px;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(var(--cream-rgb), 0.5);
}

/* ===== Hand-drawn feel for feature icons ===== */

.card .icon,
.action-block .icon,
.support-item .icon,
.fundraiser-box .icon,
.intro-card .icon,
.contact-location .icon {
  border-radius: 42% 58% 53% 47% / 45% 42% 58% 55%;
  transition: transform 0.2s ease;
}

.cards .card:nth-child(odd) .icon,
.actions-grid .action-block:nth-child(odd) .icon,
.support-grid .support-item:nth-child(odd) .icon,
.two-ways .fundraiser-box:nth-child(1) .icon {
  transform: rotate(-4deg);
}

.cards .card:nth-child(even) .icon,
.actions-grid .action-block:nth-child(even) .icon,
.support-grid .support-item:nth-child(even) .icon,
.two-ways .fundraiser-box:nth-child(2) .icon {
  transform: rotate(4deg);
}

.intro-card .icon,
.contact-location .icon { transform: rotate(-3deg); }

.card:hover .icon,
.action-block:hover .icon,
.support-item:hover .icon {
  transform: rotate(0deg) scale(1.06);
}

/* ===== Signature manuscrite (fin de "Notre histoire") ===== */

.story-sign-off {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--font-marker);
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--brown-dark);
  transform: rotate(-1.5deg);
}

.sign-flourish {
  display: block;
  width: 170px;
  height: 24px;
  margin: 4px auto 0;
  stroke: var(--brown-light);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
}

/* ===== Livre d'or ===== */

.guestbook-form-card { margin-bottom: 48px; }

.guestbook-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.guestbook-entry {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  border-top: 3px solid var(--brown-light);
  padding: 30px 30px 28px;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.guestbook-entry::before {
  content: '\201C';
  position: absolute;
  top: -22px;
  right: 22px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  color: rgba(var(--brown-dark-rgb), 0.06);
  pointer-events: none;
}

.guestbook-entry:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(47, 42, 34, 0.13);
}

.guestbook-entry-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.guestbook-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 42% 58% 53% 47% / 45% 42% 58% 55%;
  background: rgba(var(--brown-dark-rgb), 0.08);
  color: var(--brown-dark);
  font-family: var(--font-marker);
  font-size: 1.15rem;
}

.guestbook-entry-head {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.guestbook-entry-name {
  font-family: var(--font-marker);
  font-size: 1.25rem;
  color: var(--brown-dark);
}

.guestbook-entry-date {
  font-size: 0.78rem;
  color: var(--olive);
  white-space: nowrap;
}

.guestbook-entry-message {
  position: relative;
  color: var(--text-muted);
  line-height: 1.6;
}

.guestbook-reply {
  position: relative;
  margin-top: 16px;
  margin-left: 30px;
  padding: 14px 18px;
  background: rgba(var(--brown-light-rgb), 0.14);
  border-left: 3px solid var(--brown-light);
  border-radius: 4px 12px 12px 4px;
}

.guestbook-reply-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--brown-dark);
  background: var(--brown-light);
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 8px;
}

.guestbook-reply-message {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

@media (max-width: 480px) {
  .guestbook-reply { margin-left: 14px; padding: 12px 16px; }
}

.guestbook-empty,
.guestbook-loading {
  text-align: center;
  font-style: italic;
  color: var(--olive);
  padding: 24px 0;
}

.guestbook-count {
  text-align: center;
  font-size: 0.85rem;
  color: var(--olive);
  margin-top: -8px;
}

@media (max-width: 480px) {
  .guestbook-entry { padding: 24px 22px 22px; }
  .guestbook-entry::before { font-size: 4.5rem; top: -14px; right: 14px; }
}

/* ===== Administration (livre d'or) ===== */

.admin-password-row {
  flex: 1;
  display: flex;
  gap: 8px;
}

.admin-password-row .field {
  flex: 1;
}

#admin-password-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--brown-dark-rgb), 0.08);
  border: 1px solid rgba(var(--brown-dark-rgb), 0.25);
  color: var(--brown-dark);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-sans);
  padding: 0 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

#admin-password-toggle:hover { background: rgba(var(--brown-dark-rgb), 0.15); }

.admin-password-toggle-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.admin-password-toggle-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.admin-shell {
  display: flex;
  min-height: 100vh;
  background: var(--cream);
}

.admin-nav {
  flex-shrink: 0;
  width: 220px;
  background: var(--brown-dark);
  color: var(--cream);
  padding: 28px 20px;
}

.admin-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.admin-nav-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
}

.admin-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-nav-link {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.92rem;
  color: rgba(var(--cream-rgb), 0.75);
  transition: background-color 0.2s, color 0.2s;
}

.admin-nav-link:hover { color: var(--cream); background: rgba(var(--cream-rgb), 0.08); }

.admin-nav-link.active {
  color: var(--brown-dark);
  background: var(--brown-light);
  font-weight: 600;
}

.admin-nav-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 50px;
  background: var(--brown-light);
  color: var(--brown-dark);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.admin-nav-link.active .admin-nav-badge {
  background: var(--brown-dark);
  color: var(--brown-light);
}

.admin-main {
  flex: 0 1 720px;
  min-width: 0;
  margin: 0 auto;
  padding: 48px 32px 80px;
}

.admin-main h1 {
  font-size: 1.5rem;
  margin: 0 0 24px;
}

@media (max-width: 700px) {
  .admin-shell { flex-direction: column; }
  .admin-nav { width: 100%; padding: 18px 20px; }
  .admin-nav-brand { margin-bottom: 14px; }

  /* Barre d'onglets defilable horizontalement : avec 4 onglets (dont "Blog" et "Messages
     refuses"), un simple flex row sans wrap deborde du cadre et rend certains onglets
     inatteignables sur petit ecran -- le scroll horizontal garde tout accessible. */
  .admin-nav-links {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px;
  }
  .admin-nav-link { flex-shrink: 0; white-space: nowrap; }

  .admin-main { flex: 1; margin: 0; padding: 32px 20px 60px; }
}

.admin-auth {
  background: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
  margin-bottom: 32px;
}

.admin-auth label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brown-dark);
  margin-bottom: 8px;
}

.admin-auth-help {
  font-size: 0.85rem;
  color: var(--olive);
  margin: 0 0 14px;
}

.admin-auth-row {
  display: flex;
  gap: 12px;
}

.admin-auth-row .field { flex: 1; }

.admin-auth-msg {
  margin-top: 12px;
  font-size: 0.85rem;
}

.admin-auth-msg.is-error { color: var(--danger); }
.admin-auth-msg.is-ok { color: var(--brown-dark); }

.admin-auth-connected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-auth-connected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brown-dark);
}

.admin-logout-btn {
  background: none;
  border: 1px solid rgba(var(--brown-dark-rgb), 0.25);
  color: var(--olive);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 7px 16px;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.admin-logout-btn:hover { background: rgba(var(--brown-dark-rgb), 0.06); color: var(--brown-dark); }

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-entry {
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 4px rgba(47, 42, 34, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.admin-entry-body { flex: 1; min-width: 0; }

.admin-entry-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.admin-entry-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--brown-dark);
}

.admin-entry-date {
  font-size: 0.74rem;
  color: var(--olive);
}

.admin-entry-message {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.admin-foster-contact {
  color: var(--olive);
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.admin-foster-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.admin-foster-chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brown-dark);
  background: rgba(var(--brown-dark-rgb), 0.06);
  padding: 3px 10px;
  border-radius: 50px;
}

.admin-foster-text { margin-bottom: 6px; }
.admin-foster-text:last-child { margin-bottom: 0; }

.admin-foster-text-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--olive);
  margin-bottom: 2px;
}

.admin-foster-text p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.admin-foster-status {
  flex-shrink: 0;
  width: auto;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 30px 6px 13px;
  border-radius: 50px;
  border: 1px solid rgba(var(--brown-dark-rgb), 0.25);
  background-color: rgba(var(--brown-dark-rgb), 0.06);
  color: var(--brown-dark);
  cursor: pointer;
}

.admin-foster-status[data-status="nouvelle"] {
  background-color: rgba(var(--brown-light-rgb), 0.25);
  border-color: rgba(var(--brown-light-rgb), 0.7);
  color: #6b4d2e;
}

.admin-foster-status[data-status="en_cours"] {
  background-color: rgba(var(--olive-rgb), 0.1);
  border-color: rgba(var(--olive-rgb), 0.3);
  color: var(--olive);
}

.admin-foster-status[data-status="acceptee"] {
  background-color: rgba(var(--brown-dark-rgb), 0.12);
  border-color: rgba(var(--brown-dark-rgb), 0.35);
  color: var(--brown-dark);
}

.admin-foster-status[data-status="refusee"] {
  background-color: rgba(178, 59, 59, 0.08);
  border-color: rgba(178, 59, 59, 0.3);
  color: var(--danger);
}

.admin-foster-status:disabled { opacity: 0.6; cursor: default; }

.admin-foster-notes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(var(--brown-dark-rgb), 0.15);
}

.admin-foster-notes-textarea {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 0.85rem;
  margin-top: 4px;
  margin-bottom: 8px;
}

.admin-foster-notes-save {
  background: rgba(var(--brown-dark-rgb), 0.08);
  border: 1px solid rgba(var(--brown-dark-rgb), 0.25);
  color: var(--brown-dark);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.admin-foster-notes-save:hover { background: rgba(var(--brown-dark-rgb), 0.15); }
.admin-foster-notes-save:disabled { opacity: 0.6; cursor: default; }

.admin-delete-btn {
  flex-shrink: 0;
  background: rgba(178, 59, 59, 0.08);
  border: 1px solid rgba(178, 59, 59, 0.25);
  color: var(--danger);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 6px 13px;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.admin-delete-btn:hover { background: rgba(178, 59, 59, 0.15); }
.admin-delete-btn:disabled { opacity: 0.5; cursor: default; }

.admin-delete-btn.confirming {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.admin-delete-btn.confirming:hover { background: var(--danger-dark); }

.admin-tab-intro {
  color: var(--olive);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.admin-subtabs {
  display: flex;
  gap: 22px;
  border-bottom: 2px solid rgba(var(--brown-dark-rgb), 0.12);
  margin-bottom: 24px;
}

.admin-subtab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--olive);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 10px 2px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.admin-subtab-btn:hover { color: var(--brown-dark); }

.admin-subtab-btn.active {
  color: var(--brown-dark);
  border-bottom-color: var(--brown-light);
}

@media (max-width: 480px) {
  .admin-subtabs { gap: 16px; }
  .admin-subtab-btn { font-size: 0.85rem; }
}

.admin-entry-reason {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--danger);
  background: rgba(178, 59, 59, 0.08);
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 8px;
}

.admin-entry-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-approve-btn {
  background: rgba(var(--brown-dark-rgb), 0.08);
  border: 1px solid rgba(var(--brown-dark-rgb), 0.25);
  color: var(--brown-dark);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 6px 13px;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.admin-approve-btn:hover { background: rgba(var(--brown-dark-rgb), 0.15); }
.admin-approve-btn:disabled { opacity: 0.5; cursor: default; }

.admin-reply-preview {
  margin-top: 8px;
  padding: 7px 12px;
  background: rgba(var(--brown-light-rgb), 0.14);
  border-left: 3px solid var(--brown-light);
  border-radius: 4px 8px 8px 4px;
}

.admin-reply-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--brown-dark);
  background: var(--brown-light);
  padding: 2px 9px;
  border-radius: 50px;
  margin-bottom: 4px;
}

.admin-reply-preview-message {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.admin-reply-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-reply-textarea {
  min-height: 44px;
  padding: 9px 12px;
  font-size: 0.92rem;
}

.admin-reply-actions {
  display: flex;
  gap: 10px;
}

.admin-reply-toggle-btn {
  flex-shrink: 0;
  background: rgba(var(--brown-light-rgb), 0.18);
  border: 1px solid rgba(var(--brown-light-rgb), 0.6);
  color: var(--brown-dark);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 6px 13px;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.admin-reply-toggle-btn:hover { background: rgba(var(--brown-light-rgb), 0.3); }

.admin-reply-cancel-btn {
  background: none;
  border: none;
  color: var(--olive);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: underline;
}

.admin-sort-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.admin-sort-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.admin-sort-toggle {
  display: inline-flex;
  background: rgba(var(--brown-dark-rgb), 0.06);
  border-radius: 50px;
  padding: 4px;
  gap: 4px;
  max-width: 100%;
}

.admin-sort-btn {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  color: var(--brown-dark);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 9px 18px;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.admin-sort-btn:hover { background: rgba(var(--brown-dark-rgb), 0.08); }

.admin-sort-btn.active {
  background: var(--brown-light);
  color: var(--brown-dark);
  box-shadow: 0 3px 10px rgba(var(--brown-light-rgb), 0.4);
}

.admin-sort-btn.active:hover { background: var(--brown-light); }

.admin-status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.admin-status-filter-btn {
  background: transparent;
  border: 1.5px solid rgba(var(--brown-dark-rgb), 0.2);
  color: var(--brown-dark);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 7px 15px;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s;
}

.admin-status-filter-btn:hover { border-color: var(--brown-dark); background: rgba(var(--brown-dark-rgb), 0.06); }

.admin-status-filter-btn.active {
  background: var(--brown-light);
  border-color: var(--brown-light);
  color: var(--brown-dark);
}

@media (max-width: 480px) {
  .admin-sort-toggle { width: 100%; }
  .admin-sort-btn { flex: 1; font-size: 0.78rem; padding: 9px 8px; }
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.admin-stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
  text-align: center;
}

.admin-stat-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brown-dark);
  line-height: 1;
  margin-bottom: 8px;
}

.admin-stat-label {
  font-size: 0.78rem;
  color: var(--olive);
  font-weight: 600;
}

.admin-stats-latest {
  background: #fff;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--olive);
}

.admin-stats-latest-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.admin-stats-latest-name {
  font-weight: 700;
  color: var(--brown-dark);
}

.admin-stats-latest-date {
  font-size: 0.85rem;
  color: var(--olive);
}

.admin-stats-chart-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
}

.admin-stats-chart-title {
  font-size: 1rem;
  margin: 0 0 20px;
  color: var(--brown-dark);
}

.admin-stats-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.admin-stats-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.admin-stats-bar-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brown-dark);
}

.admin-stats-bar {
  width: 100%;
  max-width: 34px;
  background: var(--brown-light);
  border-radius: 6px 6px 0 0;
  transition: height 0.3s ease;
}

.admin-stats-bar-label {
  font-size: 0.72rem;
  color: var(--olive);
  white-space: nowrap;
  text-transform: capitalize;
}

@media (max-width: 480px) {
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-stat-number { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .admin-entry { flex-direction: column; }
  .admin-entry-actions { flex-direction: row; }
  .admin-auth-row { flex-direction: column; align-items: stretch; }
}

.admin-blog-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}

.admin-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-field-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brown-dark);
}

.admin-blog-content-textarea { resize: vertical; min-height: 180px; }

.admin-blog-image-hint {
  font-size: 0.78rem;
  color: var(--olive);
}

.admin-image-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Cache visuellement le <input type="file"> sans display:none : sur certains navigateurs
   mobiles, un .click() programmatique sur un input display:none n'ouvre pas de facon fiable
   le selecteur de photos natif -- il doit rester "present" pour le systeme, juste invisible. */
.admin-file-input-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.admin-image-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.85rem;
  /* Ne pas reutiliser .btn-outline ici : ses couleurs (texte/bordure crème) sont pensees pour
     un fond vert fonce (hero, CTA) -- sur le fond clair du panel admin, ca rendait le bouton
     quasi invisible (texte crème sur fond crème). Couleurs propres, adaptees a un fond clair. */
  background: transparent;
  color: var(--brown-dark);
  border-color: rgba(var(--brown-dark-rgb), 0.35);
}

.admin-image-upload-btn:hover {
  background: rgba(var(--brown-dark-rgb), 0.06);
  border-color: var(--brown-dark);
}

.admin-image-upload-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  flex-shrink: 0;
}

.admin-image-upload-status {
  font-size: 0.82rem;
  color: var(--olive);
}

.admin-image-upload-status.is-error { color: var(--danger); }

.admin-blog-preview {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(var(--cream-rgb), 0.5);
  border: 1.5px solid rgba(var(--brown-dark-rgb), 0.15);
}

.admin-blog-preview-img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.admin-blog-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-blog-list-title {
  font-size: 1.1rem;
  color: var(--brown-dark);
  margin: 40px 0 16px;
}

.admin-blog-entry { align-items: center; }

.admin-blog-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .admin-blog-form-actions { flex-direction: column; align-items: stretch; }
}

.admin-dog-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}

.admin-dog-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.admin-dog-description-textarea { resize: vertical; min-height: 90px; }

.admin-dog-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(160deg, #eef1e8, #e3e8da);
}

.admin-dog-status-label {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
}

.admin-dog-status-label.is-adoption { background: rgba(var(--brown-light-rgb), 0.22); color: #6b4d2e; }
.admin-dog-status-label.is-bientot { background: rgba(var(--olive-rgb), 0.14); color: var(--brown-dark); }

@media (max-width: 480px) {
  .admin-dog-form-row { grid-template-columns: 1fr; }
}

/* ===== Page Actualites (blog public) ===== */

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 780px;
  margin: 0 auto;
}

.blog-post {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Coherent avec les autres cartes du site (.card, .dog-card, .contact-method, ...),
   qui ont toutes ce leger effet de soulevement au survol -- il manquait ici. */
.blog-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(47, 42, 34, 0.13);
}

.blog-post-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brown-deepest); }

/* Repere immediatement un article video avant meme de lancer la lecture -- meme traitement
   visuel que .dog-badge (pastille sombre arrondie). En haut a droite : le coin le moins
   susceptible de chevaucher les propres surcouches des lecteurs externes (YouTube affiche
   souvent logo de chaine + titre en haut a gauche avant lecture, Vimeo/Facebook leurs
   controles en bas). */
.blog-video-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(29, 32, 19, 0.75);
  backdrop-filter: blur(2px);
  color: var(--cream);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 9px 4px 7px;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(47, 42, 34, 0.18);
  pointer-events: none;
}

.blog-video-badge svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  flex-shrink: 0;
}

.blog-post-media img,
.blog-post-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-post-media iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.blog-post-body { padding: 28px 30px 32px; }

.blog-post-date {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--olive);
  margin-bottom: 8px;
}

.blog-post-body h2 { margin-bottom: 14px; }

.blog-post-content {
  color: var(--text-muted);
  white-space: pre-line;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .blog-post-body { padding: 22px 20px 26px; }
}

/* ===== Contact ===== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 4px 20px rgba(47, 42, 34, 0.08);
  margin-bottom: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.contact-method:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(47, 42, 34, 0.12); }

.contact-method .icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--olive-rgb), 0.12);
  color: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-method .icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }

.contact-method-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--olive);
  margin-bottom: 2px;
}

.contact-method-value { font-weight: 600; color: var(--brown-dark); }

.contact-location {
  background: rgba(var(--khaki-rgb), 0.16);
  border: 1px dashed rgba(var(--khaki-rgb), 0.6);
  border-radius: 18px;
  padding: 40px 32px;
  text-align: center;
  height: 100%;
}

.contact-location .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  background: rgba(var(--olive-rgb), 0.14);
  color: var(--olive);
}

.contact-location .icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; }

.contact-location p { color: var(--text-muted); max-width: 380px; margin: 0 auto; }

/* ===== "Nous trouver" (accueil) ===== */

.find-us {
  background: var(--cream);
}

.contact-location.is-map-companion {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-location.is-map-companion .icon { margin: 0 0 18px; }
.contact-location.is-map-companion p { max-width: none; margin: 0; }
.contact-location.is-map-companion .btn-row { justify-content: flex-start; margin-top: 20px; }

.map-frame {
  height: 100%;
  min-height: 320px;
  background: #fffdf8;
  padding: 10px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(47, 42, 34, 0.16), 0 2px 8px rgba(47, 42, 34, 0.08);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  border-radius: 12px;
  /* Adoucit le vert/jaune criards par defaut d'OpenStreetMap pour se rapprocher de la
     palette du site -- meme recette que .bts-strip img. Un filtre CSS s'applique au rendu
     entier de l'iframe (comme une image), meme si son contenu vient d'une autre origine. */
  filter: sepia(0.2) saturate(0.65) contrast(1.05) brightness(1.03);
}

/* ===== Visionneuse photo (fiches chiens) ===== */

.dog-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(29, 32, 19, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Ajoutee par script.js une frame apres avoir retire [hidden], pour laisser le temps au
   navigateur de peindre l'etat opacity:0 avant de lancer la transition vers 1. */
.dog-lightbox.is-visible { opacity: 1; }

.dog-lightbox img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dog-lightbox.is-visible img { transform: scale(1); }

.dog-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

.dog-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dog-lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); }
.dog-lightbox-prev { left: 16px; }
.dog-lightbox-next { right: 16px; }

@media (max-width: 560px) {
  .dog-lightbox-prev { left: 6px; }
  .dog-lightbox-next { right: 6px; }
}

.dog-lightbox-count {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}

/* ===== Formulaire "Je suis intéressé(e)" (fiches chiens) ===== */

.adoption-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 20px;
}

.adoption-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(29, 32, 19, 0.72);
}

.adoption-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 620px;
  z-index: 1;
}

.adoption-modal-dialog .form-card { margin: 0; }

.adoption-modal-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--brown-dark);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(29, 32, 19, 0.25);
  z-index: 2;
}

@media (max-width: 560px) {
  .adoption-modal { padding: 24px 14px; }
  .adoption-modal-dialog .form-card { padding: 28px 22px; }
}